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

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

@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ContentletComponent } from './contentlet.component';
-
-describe('ContentletComponent', () => {
-    let component: ContentletComponent;
-    let fixture: ComponentFixture<ContentletComponent>;
-
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            imports: [ContentletComponent]
-        }).compileComponents();
-
-        fixture = TestBed.createComponent(ContentletComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
-});

package/src/lib/layout/dotcms-layout/dotcms-layout.component.css

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

package/src/lib/layout/dotcms-layout/dotcms-layout.component.spec.ts

@@ -1,195 +0,0 @@
-import { expect } from '@jest/globals';
-import { Spectator, createRoutingFactory } from '@ngneat/spectator/jest';
-import { MockComponent } from 'ng-mocks';
-import { of } from 'rxjs';
-
-import { Component, Input } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-
-import * as dotcmsClient from '@dotcms/client';
-
-import { PageResponseMock, PageResponseOneRowMock } from './../../utils/testing.utils';
-import { DotcmsLayoutComponent } from './dotcms-layout.component';
-
-import { DotCMSContentlet, DotCMSPageAsset } from '../../models';
-import { PageContextService } from '../../services/dotcms-context/page-context.service';
-import { RowComponent } from '../row/row.component';
-
-interface Callback {
-    [key: string]: (data: unknown) => void;
-}
-
-interface DotCmsClientMock extends dotcmsClient.DotCmsClient {
-    editor: {
-        on: (type: string, callbackFn: (data: unknown) => void) => void;
-        off: jest.Mock;
-        callbacks: Callback;
-    };
-}
-
-@Component({
-    selector: 'dotcms-mock-component',
-    standalone: true,
-    template: 'Hello world'
-})
-class DotcmsSDKMockComponent {
-    @Input() contentlet!: DotCMSContentlet;
-}
-
-jest.mock('@dotcms/client', () => ({
-    ...jest.requireActual('@dotcms/client'),
-    isInsideEditor: jest.fn().mockReturnValue(true),
-    initEditor: jest.fn(),
-    updateNavigation: jest.fn(),
-    postMessageToEditor: jest.fn(),
-    DotCmsClient: {
-        instance: {
-            editor: {
-                on: function (type: string, callbackFn: (data: unknown) => void): void {
-                    this.callbacks[type] = callbackFn;
-                },
-                off: jest.fn(),
-                callbacks: {} as Callback
-            }
-        }
-    },
-    CUSTOMER_ACTIONS: {
-        GET_PAGE_DATA: 'get-page-data'
-    }
-}));
-
-const { DotCmsClient } = dotcmsClient as jest.Mocked<typeof dotcmsClient>;
-
-describe('DotcmsLayoutComponent', () => {
-    let spectator: Spectator<DotcmsLayoutComponent>;
-    let pageContextService: PageContextService;
-
-    const createComponent = createRoutingFactory({
-        component: DotcmsLayoutComponent,
-        imports: [MockComponent(RowComponent)],
-        providers: [
-            PageContextService,
-            { provide: ActivatedRoute, useValue: { url: of([]) } },
-            { provide: Router, useValue: {} }
-        ]
-    });
-
-    beforeEach(() => {
-        spectator = createComponent({
-            props: {
-                pageAsset: PageResponseMock as unknown as DotCMSPageAsset,
-                components: {
-                    Banner: Promise.resolve(DotcmsSDKMockComponent)
-                }
-            },
-            detectChanges: false
-        });
-
-        pageContextService = spectator.inject(PageContextService, true);
-    });
-
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
-    it('should render rows', () => {
-        spectator.detectChanges();
-        expect(spectator.queryAll(RowComponent).length).toBe(3);
-    });
-
-    it('should save pageContext', () => {
-        const setContextSpy = jest.spyOn(pageContextService, 'setContext');
-        spectator.detectChanges();
-        expect(setContextSpy).toHaveBeenCalled();
-    });
-
-    describe('inside editor', () => {
-        it('should call initEditor and updateNavigation from @dotcms/client', () => {
-            const initEditorSpy = jest.spyOn(dotcmsClient, 'initEditor');
-            const updateNavigationSpy = jest.spyOn(dotcmsClient, 'updateNavigation');
-
-            spectator.detectChanges();
-            expect(initEditorSpy).toHaveBeenCalled();
-            expect(updateNavigationSpy).toHaveBeenCalled();
-        });
-
-        describe('onReload', () => {
-            const client = DotCmsClient.instance;
-            let editorOnSpy: jest.SpyInstance;
-
-            beforeEach(() => {
-                editorOnSpy = jest.spyOn(client.editor, 'on');
-                spectator.setInput('onReload', () => {
-                    /* do nothing */
-                });
-                spectator.detectChanges();
-            });
-
-            it('should subscribe to the `CHANGE` event', () => {
-                expect(editorOnSpy).toHaveBeenCalled();
-            });
-
-            it('should remove listener on unmount', () => {
-                spectator.component.ngOnDestroy();
-                spectator.detectChanges();
-
-                expect(client.editor.off).toHaveBeenCalledWith('changes');
-            });
-        });
-
-        describe('client is ready', () => {
-            const query = { query: 'query { ... }' };
-
-            beforeEach(() => {
-                spectator.setInput('editor', query);
-                spectator.detectChanges();
-            });
-
-            it('should post message to editor', () => {
-                spectator.detectChanges();
-                expect(dotcmsClient.postMessageToEditor).toHaveBeenCalledWith({
-                    action: dotcmsClient.CUSTOMER_ACTIONS.CLIENT_READY,
-                    payload: query
-                });
-            });
-        });
-
-        describe('onChange', () => {
-            const client = DotCmsClient.instance;
-            beforeEach(() => spectator.detectChanges());
-
-            it('should update the page asset when changes are made in the editor', () => {
-                const editorOnSpy = jest.spyOn(client.editor, 'on');
-                expect(editorOnSpy).toHaveBeenCalledWith('changes', expect.any(Function));
-            });
-        });
-    });
-
-    describe('template', () => {
-        beforeEach(() => spectator.detectChanges());
-
-        it('should render rows', () => {
-            expect(spectator.queryAll(RowComponent).length).toBe(3);
-        });
-
-        it('should pass the correct row to RowComponent', () => {
-            const rowComponents = spectator.queryAll(RowComponent);
-            const rows = PageResponseMock.layout.body.rows;
-            expect(rowComponents.length).toBe(rows.length);
-
-            rowComponents.forEach((component, index) => {
-                expect(component.row).toEqual(rows[index]);
-            });
-        });
-
-        it('should update the page asset when changes are made in the editor', () => {
-            const { editor } = DotCmsClient.instance as DotCmsClientMock;
-            editor.callbacks['changes'](PageResponseOneRowMock);
-            spectator.detectChanges();
-            const rowComponents = spectator.queryAll(RowComponent);
-            const rows = PageResponseMock.layout.body.rows;
-            expect(rowComponents.length).toBe(1);
-            expect(rowComponents[0].row).toEqual(rows[0]);
-        });
-    });
-});

package/src/lib/layout/dotcms-layout/dotcms-layout.component.ts

@@ -1,150 +0,0 @@
-import { AsyncPipe } from '@angular/common';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    DestroyRef,
-    Input,
-    OnInit,
-    inject
-} from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { ActivatedRoute } from '@angular/router';
-
-import {
-    CUSTOMER_ACTIONS,
-    DotCmsClient,
-    EditorConfig,
-    initEditor,
-    isInsideEditor,
-    postMessageToEditor,
-    updateNavigation
-} from '@dotcms/client';
-
-import { DotCMSPageComponent } from '../../models';
-import { DotCMSPageAsset } from '../../models/dotcms.model';
-import { PageContextService } from '../../services/dotcms-context/page-context.service';
-import { RowComponent } from '../row/row.component';
-
-/**
- * `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.
- *
- * @export
- * @class DotcmsLayoutComponent
- */
-@Component({
-    selector: 'dotcms-layout',
-    standalone: true,
-    imports: [RowComponent, AsyncPipe],
-    template: `
-        @if (pageAsset$ | async; as page) {
-            @for (row of this.page?.layout?.body?.rows; track $index) {
-                <dotcms-row [row]="row" />
-            }
-        }
-    `,
-    styleUrl: './dotcms-layout.component.css',
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class DotcmsLayoutComponent implements OnInit {
-    private _pageAsset!: DotCMSPageAsset;
-
-    /**
-     * Represents the DotCMS page asset.
-     *
-     * @type {DotCMSPageAsset}
-     * @memberof DotcmsLayoutComponent
-     */
-    @Input({ required: true })
-    set pageAsset(value: DotCMSPageAsset) {
-        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(): DotCMSPageAsset {
-        return this._pageAsset;
-    }
-
-    /**
-     * The `components` property is a record of dynamic components for each Contentlet on the page.
-     *
-     * @type {DotCMSPageComponent}
-     * @memberof DotcmsLayoutComponent
-     * @required
-     */
-    @Input({ required: true }) components!: DotCMSPageComponent;
-
-    /**
-     * The `onReload` property is a function that reloads the page after changes are made.
-     *
-     * @memberof DotcmsLayoutComponent
-     * @deprecated In future implementation we will be listening for the changes from the editor to update the page state so reload will not be needed.
-     */
-    @Input() onReload!: () => void;
-
-    /**
-     *
-     * @type {DotCMSFetchConfig}
-     * @memberof DotCMSPageEditorConfig
-     * @description The configuration custom params for data fetching on Edit Mode.
-     * @example <caption>Example with Custom GraphQL query</caption>
-     * <dotcms-layout [editor]="{ query: 'query { ... }' }"/>
-     *
-     * @example <caption>Example usage with Custom Page API parameters</caption>
-     * <dotcms-layout [editor]="{ params: { depth: '2' } }"/>;
-     */
-    @Input() editor!: EditorConfig;
-
-    private readonly route = inject(ActivatedRoute);
-    private readonly pageContextService = inject(PageContextService);
-    private readonly destroyRef$ = inject(DestroyRef);
-    private client!: DotCmsClient;
-    protected readonly pageAsset$ = this.pageContextService.currentPage$;
-
-    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.client.editor.on('changes', (data) => {
-            if (this.onReload) {
-                this.onReload();
-
-                return;
-            }
-
-            this.pageContextService.setPageAsset(data as DotCMSPageAsset);
-        });
-
-        postMessageToEditor({ action: CUSTOMER_ACTIONS.CLIENT_READY, payload: this.editor });
-    }
-
-    ngOnDestroy() {
-        if (!isInsideEditor()) {
-            return;
-        }
-
-        this.client.editor.off('changes');
-    }
-}

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

@@ -1,6 +0,0 @@
-:host {
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    gap: 1rem;
-    row-gap: 1rem;
-}

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

@@ -1,28 +0,0 @@
-import { Spectator, createComponentFactory } from '@ngneat/spectator/jest';
-import { MockComponent } from 'ng-mocks';
-
-import { RowComponent } from './row.component';
-
-import { DotPageAssetLayoutRow } from '../../models';
-import { PageResponseMock } from '../../utils/testing.utils';
-import { ColumnComponent } from '../column/column.component';
-
-describe('RowComponent', () => {
-    let spectator: Spectator<RowComponent>;
-    const createComponent = createComponentFactory({
-        component: RowComponent,
-        imports: [MockComponent(ColumnComponent)]
-    });
-
-    beforeEach(() => {
-        spectator = createComponent({
-            props: {
-                row: PageResponseMock.layout.body.rows[1] as DotPageAssetLayoutRow
-            }
-        });
-    });
-
-    it('should render two columns', () => {
-        expect(spectator.queryAll(ColumnComponent)?.length).toBe(4);
-    });
-});

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

@@ -1,32 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-import { DotPageAssetLayoutRow } from '../../models';
-import { ColumnComponent } from '../column/column.component';
-
-/**
- * This component is responsible to display a row with columns.
- *
- * @export
- * @class RowComponent
- */
-@Component({
-    selector: 'dotcms-row',
-    standalone: true,
-    imports: [ColumnComponent],
-    template: `
-        @for (column of row.columns; track $index) {
-            <dotcms-column [column]="column" />
-        }
-    `,
-    styleUrl: './row.component.css',
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class RowComponent {
-    /**
-     * The row object containing the columns.
-     *
-     * @type {DotPageAssetLayoutRow}
-     * @memberof RowComponent
-     */
-    @Input({ required: true }) row!: DotPageAssetLayoutRow;
-}

package/src/lib/services/dotcms-context/page-context.spec.ts

@@ -1,80 +0,0 @@
-import { SpectatorService, createServiceFactory } from '@ngneat/spectator';
-
-import { TestBed } from '@angular/core/testing';
-
-import { PageContextService } from './page-context.service';
-
-import { DotCMSPageAsset, DotCMSPageComponent } from '../../models';
-import { PageResponseMock } from '../../utils/testing.utils';
-
-const initialPageAssetMock = {} as DotCMSPageAsset;
-const initialComponentsMock = {} as DotCMSPageComponent;
-
-describe('PageContextService', () => {
-    let spectator: SpectatorService<PageContextService>;
-    let service: PageContextService;
-
-    const createService = createServiceFactory(PageContextService);
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({});
-        spectator = createService();
-        service = spectator.service;
-    });
-
-    it('should set the context', () => {
-        service.setContext(initialPageAssetMock, initialComponentsMock);
-
-        expect(service.context).toEqual({
-            components: initialComponentsMock,
-            pageAsset: initialPageAssetMock,
-            isInsideEditor: false
-        });
-    });
-
-    it('should set the page asset in the context', () => {
-        service.setContext(initialPageAssetMock, initialComponentsMock);
-
-        const newPageAssetMock = PageResponseMock as unknown as DotCMSPageAsset;
-
-        service.setPageAsset(newPageAssetMock);
-
-        expect(service.context).toEqual({
-            components: initialComponentsMock,
-            pageAsset: newPageAssetMock,
-            isInsideEditor: false
-        });
-    });
-
-    it('should return the context', () => {
-        service.setContext(initialPageAssetMock, initialComponentsMock);
-
-        expect(service.context).toEqual({
-            components: initialComponentsMock,
-            pageAsset: initialPageAssetMock,
-            isInsideEditor: false
-        });
-    });
-
-    it('should return the context as an observable', (done) => {
-        service.setContext(initialPageAssetMock, initialComponentsMock);
-
-        service.contextObs$.subscribe((context) => {
-            expect(context).toEqual({
-                components: initialComponentsMock,
-                pageAsset: initialPageAssetMock,
-                isInsideEditor: false
-            });
-            done();
-        });
-    });
-
-    it('should return the page asset as an observable', (done) => {
-        service.setContext(initialPageAssetMock, initialComponentsMock);
-
-        service.currentPage$.subscribe((pageAsset) => {
-            expect(pageAsset).toEqual(initialPageAssetMock);
-            done();
-        });
-    });
-});

package/src/lib/utils/index.ts

@@ -1,92 +0,0 @@
-import { DotCMSContainer, DotCMSPageAssetContainer } from '../models/dotcms.model';
-
-//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: Record<number, string | null> = {
-    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: Record<number, string | null> = {
-    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.
- */
-export const getContainersData = (
-    containers: DotCMSPageAssetContainer,
-    containerRef: DotCMSContainer
-) => {
-    const { identifier, uuid } = containerRef;
-
-    const { containerStructures, container } = containers[identifier];
-
-    const { variantId } = container?.parentPermissionable || {};
-
-    const acceptTypes: string = containerStructures
-        .map((structure) => structure.contentTypeVar)
-        .join(',');
-
-    const contentlets = containers[identifier].contentlets[`uuid-${uuid}`];
-
-    return {
-        ...containers[identifier].container,
-        acceptTypes,
-        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.
- */
-export const getPositionStyleClasses = (start: number, end: number) => {
-    const startClass = startClassMap[start];
-    const endClass = endClassMap[end];
-
-    return {
-        startClass,
-        endClass
-    };
-};