@dotcms/angular 0.0.1-alpha.40 → 0.0.1-alpha.41

package/src/lib/components/dot-editable-text/utils.ts

@@ -1,51 +0,0 @@
-import { EditorComponent } from '@tinymce/tinymce-angular';
-
-export type DOT_EDITABLE_TEXT_MODE = 'minimal' | 'full' | 'plain';
-
-export type DOT_EDITABLE_TEXT_FORMAT = 'html' | 'text';
-
-const DEFAULT_TINYMCE_CONFIG: EditorComponent['init'] = {
-    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'
-};
-
-export const TINYMCE_CONFIG: {
-    [key in DOT_EDITABLE_TEXT_MODE]: EditorComponent['init'];
-} = {
-    minimal: {
-        ...DEFAULT_TINYMCE_CONFIG,
-        plugins: 'link autolink',
-        toolbar: 'bold italic underline | link',
-        valid_elements: 'strong,em,span[style],a[href]'
-    },
-    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'
-        ]
-    },
-    plain: {
-        ...DEFAULT_TINYMCE_CONFIG,
-        plugins: '',
-        toolbar: ''
-    }
-};

package/src/lib/components/no-component/no-component.component.css

@@ -1,3 +0,0 @@
-:host {
-    display: block;
-}

package/src/lib/components/no-component/no-component.component.spec.ts

@@ -1,24 +0,0 @@
-import { Spectator, createComponentFactory } from '@ngneat/spectator';
-
-import { NoComponent } from './no-component.component';
-
-import { DotCMSContentlet } from '../../models';
-
-describe('NoComponentComponent', () => {
-    let spectator: Spectator<NoComponent>;
-
-    const createComponent = createComponentFactory(NoComponent);
-
-    beforeEach(() => {
-        spectator = createComponent({
-            props: {
-                contentlet: { contentType: 'exampleContentType' } as DotCMSContentlet
-            }
-        });
-    });
-
-    it('should display the content type', () => {
-        const noComponent = spectator.debugElement.nativeElement;
-        expect(noComponent?.innerHTML).toContain('No Component for exampleContentType');
-    });
-});

package/src/lib/components/no-component/no-component.component.ts

@@ -1,31 +0,0 @@
-import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
-
-import { DotCMSContentlet } from '../../models';
-
-/**
- * This component is responsible to display a message when there is no component for a contentlet.
- *
- * @export
- * @class NoComponent
- */
-@Component({
-    selector: 'dotcms-no-component',
-    standalone: true,
-    template: `
-        No Component for {{ contentlet.contentType }}
-    `,
-    styleUrl: './no-component.component.css',
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class NoComponent {
-    /**
-     * The contentlet object containing content data.
-     * The component displays a message based on the content type of this contentlet.
-     */
-    @Input() contentlet!: DotCMSContentlet;
-
-    /**
-     * The data-testid attribute used for identifying the component during testing.
-     */
-    @HostBinding('attr.data-testid') testId = 'no-component';
-}

package/src/lib/layout/column/column.component.css

@@ -1,99 +0,0 @@
-: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;
-}

package/src/lib/layout/column/column.component.spec.ts

@@ -1,33 +0,0 @@
-import { Spectator, createComponentFactory } from '@ngneat/spectator';
-import { MockComponent } from 'ng-mocks';
-
-import { ColumnComponent } from './column.component';
-
-import { DotPageAssetLayoutColumn } from '../../models';
-import { PageResponseMock } from '../../utils/testing.utils';
-import { ContainerComponent } from '../container/container.component';
-
-describe('ColumnComponent', () => {
-    let spectator: Spectator<ColumnComponent>;
-
-    const createComponent = createComponentFactory({
-        component: ColumnComponent,
-        imports: [MockComponent(ContainerComponent)]
-    });
-
-    beforeEach(() => {
-        spectator = createComponent({
-            props: {
-                column: PageResponseMock.layout.body.rows[0].columns[0] as DotPageAssetLayoutColumn
-            }
-        });
-    });
-
-    it('should render one container', () => {
-        expect(spectator.queryAll(ContainerComponent)?.length).toBe(1);
-    });
-
-    it('should set correct containerClasses', () => {
-        expect(spectator.component.containerClasses).toBe('col-start-1 col-end-13');
-    });
-});

package/src/lib/layout/column/column.component.ts

@@ -1,49 +0,0 @@
-import { ChangeDetectionStrategy, Component, HostBinding, Input, OnInit } from '@angular/core';
-
-import { DotPageAssetLayoutColumn } from '../../models';
-import { getPositionStyleClasses } from '../../utils';
-import { ContainerComponent } from '../container/container.component';
-
-/**
- * This component is responsible to display a column with containers.
- *
- * @export
- * @class ColumnComponent
- * @implements {OnInit}
- */
-@Component({
-    selector: 'dotcms-column',
-    standalone: true,
-    imports: [ContainerComponent],
-    template: `
-        @for (container of column.containers; track $index) {
-            <dotcms-container [container]="container" />
-        }
-    `,
-    styleUrl: './column.component.css',
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ColumnComponent implements OnInit {
-    /**
-     * The column object containing the containers.
-     *
-     * @type {DotPageAssetLayoutColumn}
-     * @memberof ColumnComponent
-     */
-    @Input() column!: DotPageAssetLayoutColumn;
-
-    /**
-     * The data-testid attribute used for identifying the component during testing.
-     *
-     * @memberof ColumnComponent
-     */
-    @HostBinding('class') containerClasses = '';
-
-    ngOnInit() {
-        const { startClass, endClass } = getPositionStyleClasses(
-            this.column.leftOffset,
-            this.column.width + this.column.leftOffset
-        );
-        this.containerClasses = `${startClass} ${endClass}`;
-    }
-}

package/src/lib/layout/container/container.component.css

@@ -1,9 +0,0 @@
-:host.empty-container {
-    width: 100%;
-    background-color: #ecf0fd;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: #030e32;
-    height: 10rem;
-}

package/src/lib/layout/container/container.component.html

@@ -1,26 +0,0 @@
-@if ($isInsideEditor()) {
-    @if ($contentlets().length) {
-        @for (contentlet of $contentlets(); track $index) {
-            <dotcms-contentlet-wrapper
-                [contentlet]="contentlet"
-                [container]="$dotContainerAsString()">
-                <ng-container
-                    *ngComponentOutlet="
-                        (componentsMap[contentlet.contentType] || componentsMap['CustomNoComponent']
-                            | async) || NoComponent;
-                        inputs: { contentlet }
-                    " />
-            </dotcms-contentlet-wrapper>
-        }
-    } @else {
-        This container is empty.
-    }
-} @else {
-    @for (contentlet of $contentlets(); track $index) {
-        <ng-container
-            *ngComponentOutlet="
-                componentsMap[contentlet.contentType] | async;
-                inputs: { contentlet }
-            " />
-    }
-}

package/src/lib/layout/container/container.component.spec.ts

@@ -1,205 +0,0 @@
-import { Spectator, byTestId, byText, createComponentFactory } from '@ngneat/spectator';
-import { of } from 'rxjs';
-
-import { Component, Input } from '@angular/core';
-
-import { ContainerComponent } from './container.component';
-
-import { NoComponent } from '../../components/no-component/no-component.component';
-import { DotCMSContainer, DotCMSContentlet } from '../../models';
-import { PageContextService } from '../../services/dotcms-context/page-context.service';
-import { PageResponseMock } from '../../utils/testing.utils';
-
-@Component({
-    selector: 'dotcms-mock-component',
-    standalone: true,
-    template: 'Hello world'
-})
-class DotcmsSDKMockComponent {
-    @Input() contentlet!: DotCMSContentlet;
-}
-
-@Component({
-    selector: 'dot-no-component',
-    template: 'no component yet - Custom'
-})
-class CustomNoComponent {
-    @Input() contentlet!: DotCMSContentlet;
-}
-
-describe('ContainerComponent', () => {
-    let spectator: Spectator<ContainerComponent>;
-
-    describe('inside editor', () => {
-        const createComponent = createComponentFactory({
-            component: ContainerComponent,
-            detectChanges: false,
-            providers: [
-                {
-                    provide: PageContextService,
-                    useValue: {
-                        context: {
-                            pageAsset: {
-                                containers: PageResponseMock.containers
-                            },
-                            components: {
-                                Banner: of(DotcmsSDKMockComponent)
-                            },
-                            isInsideEditor: true
-                        }
-                    }
-                }
-            ]
-        });
-
-        beforeEach(() => {
-            spectator = createComponent({
-                props: {
-                    container: PageResponseMock.layout.body.rows[0].columns[0]
-                        .containers[0] as DotCMSContainer
-                }
-            });
-        });
-
-        it('should render MockContainerComponent', () => {
-            spectator.detectChanges();
-            expect(spectator.query(DotcmsSDKMockComponent)).toBeTruthy();
-        });
-
-        it('should container have data attributes', () => {
-            spectator.detectChanges();
-            const container = spectator.debugElement.nativeElement;
-            expect(container?.getAttribute('data-dot-accept-types')).toBeDefined();
-            expect(container?.getAttribute('data-dot-identifier')).toBeDefined();
-            expect(container?.getAttribute('data-max-contentlets')).toBeDefined();
-            expect(container?.getAttribute('ata-dot-uuid')).toBeDefined();
-        });
-
-        it('should contentlets have data attributes', () => {
-            spectator.detectChanges();
-            const contentlets = spectator.queryAll(byTestId('dot-contentlet'));
-            contentlets.forEach((contentlet) => {
-                expect(contentlet.getAttribute('data-dot-identifier')).toBeDefined();
-                expect(contentlet.getAttribute('data-dot-basetype')).toBeDefined();
-                expect(contentlet.getAttribute('data-dot-title')).toBeDefined();
-                expect(contentlet.getAttribute('data-dot-inode')).toBeDefined();
-                expect(contentlet.getAttribute('data-dot-type')).toBeDefined();
-                expect(contentlet.getAttribute('data-dot-container')).toBeDefined();
-                expect(contentlet.getAttribute('data-dot-on-number-of-pages')).toBeDefined();
-            });
-        });
-
-        it('should render NoComponent component for unsetted content types', () => {
-            spectator.setInput(
-                'container',
-                PageResponseMock.layout.body.rows[1].columns[0].containers[0] as DotCMSContainer
-            );
-            spectator.detectChanges();
-            expect(spectator.query(NoComponent)).toBeTruthy();
-        });
-
-        it('should render message when container is empty', () => {
-            spectator.setInput(
-                'container',
-                PageResponseMock.layout.body.rows[2].columns[0].containers[0] as DotCMSContainer
-            );
-            spectator.detectChanges();
-            expect(spectator.query(byText('This container is empty.'))).toBeTruthy();
-        });
-    });
-
-    describe('with custom NoComponent component', () => {
-        const createComponent = createComponentFactory({
-            component: ContainerComponent,
-            detectChanges: false,
-            providers: [
-                {
-                    provide: PageContextService,
-                    useValue: {
-                        context: {
-                            pageAsset: {
-                                containers: PageResponseMock.containers
-                            },
-                            components: {
-                                Banner: of(DotcmsSDKMockComponent)
-                            },
-                            isInsideEditor: true
-                        }
-                    }
-                }
-            ]
-        });
-        beforeEach(() => {
-            spectator = createComponent({
-                props: {
-                    container: PageResponseMock.layout.body.rows[1].columns[0]
-                        .containers[0] as DotCMSContainer
-                },
-                providers: [
-                    {
-                        provide: PageContextService,
-                        useValue: {
-                            context: {
-                                pageAsset: {
-                                    containers: PageResponseMock.containers
-                                },
-                                components: {
-                                    CustomNoComponent: of(CustomNoComponent)
-                                },
-                                isInsideEditor: true
-                            }
-                        }
-                    }
-                ]
-            });
-        });
-
-        it('should render custom NoComponent component for unsetted content types', () => {
-            spectator.detectChanges();
-            expect(spectator.query(CustomNoComponent)).toBeTruthy();
-        });
-    });
-
-    describe('outside editor', () => {
-        const createComponent = createComponentFactory({
-            component: ContainerComponent,
-            detectChanges: false,
-            providers: [
-                {
-                    provide: PageContextService,
-                    useValue: {
-                        context: {
-                            pageAsset: {
-                                containers: PageResponseMock.containers
-                            },
-                            components: {
-                                Banner: of(DotcmsSDKMockComponent)
-                            },
-                            isInsideEditor: false
-                        }
-                    }
-                }
-            ]
-        });
-
-        beforeEach(() => {
-            spectator = createComponent({
-                props: {
-                    container: PageResponseMock.layout.body.rows[0].columns[0]
-                        .containers[0] as DotCMSContainer
-                }
-            });
-        });
-
-        it('should not have data attributes', () => {
-            spectator.detectChanges();
-            const container = spectator.query(byTestId('dot-container'));
-            expect(container?.getAttribute('data-dot-accept-types')).toBeUndefined();
-
-            const contentlets = spectator.queryAll(byTestId('dot-contentlet'));
-            contentlets.forEach((contentlet) => {
-                expect(contentlet.getAttribute('data-dot-identifier')).toBeUndefined();
-            });
-        });
-    });
-});

package/src/lib/layout/container/container.component.ts

@@ -1,140 +0,0 @@
-import { AsyncPipe, NgComponentOutlet } from '@angular/common';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    HostBinding,
-    Input,
-    OnChanges,
-    computed,
-    inject,
-    signal
-} from '@angular/core';
-
-import { NoComponent } from '../../components/no-component/no-component.component';
-import { DynamicComponentEntity } from '../../models';
-import { DotCMSContainer, DotCMSContentlet } from '../../models/dotcms.model';
-import { PageContextService } from '../../services/dotcms-context/page-context.service';
-import { getContainersData } from '../../utils';
-import { ContentletComponent } from '../contentlet/contentlet.component';
-
-interface DotContainer {
-    acceptTypes: string;
-    identifier: string;
-    maxContentlets: number;
-    uuid: string;
-    variantId?: string;
-}
-
-/**
- * This component is responsible to display a container with contentlets.
- *
- * @export
- * @class ContainerComponent
- * @implements {OnChanges}
- */
-@Component({
-    selector: 'dotcms-container',
-    standalone: true,
-    imports: [AsyncPipe, NgComponentOutlet, NoComponent, ContentletComponent],
-    templateUrl: './container.component.html',
-    styleUrl: './container.component.css',
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ContainerComponent implements OnChanges {
-    /**
-     * The container object containing the contentlets.
-     *
-     * @type {DotCMSContainer}
-     * @memberof ContainerComponent
-     */
-    @Input({ required: true }) container!: DotCMSContainer;
-
-    private readonly pageContextService: PageContextService = inject(PageContextService);
-    protected readonly NoComponent = NoComponent;
-    protected readonly $isInsideEditor = signal<boolean>(false);
-
-    protected componentsMap!: Record<string, DynamicComponentEntity>;
-    protected $contentlets = signal<DotCMSContentlet[]>([]);
-    protected $dotContainer = signal<DotContainer | null>(null);
-    protected $dotContainerAsString = computed(() => JSON.stringify(this.$dotContainer()));
-
-    /**
-     * The accept types for the container component.
-     *
-     * @type {(string | null)}
-     * @memberof ContainerComponent
-     */
-    @HostBinding('attr.data-dot-accept-types') acceptTypes: string | null = null;
-
-    /**
-     * The identifier for the container component.
-     *
-     * @type {(string | null)}
-     * @memberof ContainerComponent
-     */
-    @HostBinding('attr.data-dot-identifier') identifier: string | null = null;
-    /**
-     * The max contentlets for the container component.
-     *
-     * @type {(number | null)}
-     * @memberof ContainerComponent
-     */
-    @HostBinding('attr.data-max-contentlets') maxContentlets: number | null = null;
-    /**
-     * The uuid for the container component.
-     *
-     * @type {(string | null)}
-     * @memberof ContainerComponent
-     */
-    @HostBinding('attr.data-dot-uuid') uuid: string | null = null;
-    /**
-     * The class for the container component.
-     *
-     * @type {(string | null)}
-     * @memberof ContainerComponent
-     */
-    @HostBinding('class') class: string | null = null;
-    /**
-     * The dot object for the container component.
-     *
-     * @type {(string | null)}
-     * @memberof ContainerComponent
-     */
-    @HostBinding('attr.data-dot-object') dotObject: string | null = null;
-    /**
-     * The data-testid attribute used for identifying the component during testing.
-     *
-     * @memberof ContainerComponent
-     */
-    @HostBinding('attr.data-testid') testId = 'dot-container';
-
-    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';
-        }
-    }
-}