@dotcms/client 0.0.1-alpha.9 → 0.0.1-beta.10

package/index.esm.js

@@ -0,0 +1,903 @@
+import { _ as __classPrivateFieldGet, E as ErrorMessages, a as __classPrivateFieldSet, C as Content } from './transforms.esm.js';
+export { g as graphqlToPageEntity } from './transforms.esm.js';
+
+/**
+ * Actions received from the dotcms editor
+ *
+ * @export
+ * @enum {number}
+ */
+var NOTIFY_CLIENT;
+(function (NOTIFY_CLIENT) {
+    /**
+     * Request to page to reload
+     */
+    NOTIFY_CLIENT["UVE_RELOAD_PAGE"] = "uve-reload-page";
+    /**
+     * Request the bounds for the elements
+     */
+    NOTIFY_CLIENT["UVE_REQUEST_BOUNDS"] = "uve-request-bounds";
+    /**
+     * Received pong from the editor
+     */
+    NOTIFY_CLIENT["UVE_EDITOR_PONG"] = "uve-editor-pong";
+    /**
+     * Received scroll event trigger from the editor
+     */
+    NOTIFY_CLIENT["UVE_SCROLL_INSIDE_IFRAME"] = "uve-scroll-inside-iframe";
+    /**
+     * Set the page data
+     */
+    NOTIFY_CLIENT["UVE_SET_PAGE_DATA"] = "uve-set-page-data";
+    /**
+     * Copy contentlet inline editing success
+     */
+    NOTIFY_CLIENT["UVE_COPY_CONTENTLET_INLINE_EDITING_SUCCESS"] = "uve-copy-contentlet-inline-editing-success";
+})(NOTIFY_CLIENT || (NOTIFY_CLIENT = {}));
+
+/**
+ * Calculates the bounding information for each page element within the given containers.
+ *
+ * @export
+ * @param {HTMLDivElement[]} containers - An array of HTMLDivElement representing the containers.
+ * @return {ContainerBound[]} An array of objects containing the bounding information for each page element.
+ * @example
+ * ```ts
+ * const containers = document.querySelectorAll('.container');
+ * const bounds = getPageElementBound(containers);
+ * console.log(bounds);
+ * ```
+ */
+function getPageElementBound(containers) {
+    return containers.map((container) => {
+        const containerRect = container.getBoundingClientRect();
+        const contentlets = Array.from(container.querySelectorAll('[data-dot-object="contentlet"]'));
+        return {
+            x: containerRect.x,
+            y: containerRect.y,
+            width: containerRect.width,
+            height: containerRect.height,
+            payload: JSON.stringify({
+                container: getContainerData(container)
+            }),
+            contentlets: getContentletsBound(containerRect, contentlets)
+        };
+    });
+}
+/**
+ * Calculates the bounding information for each contentlet inside a container.
+ *
+ * @export
+ * @param {DOMRect} containerRect - The bounding rectangle of the container.
+ * @param {HTMLDivElement[]} contentlets - An array of HTMLDivElement representing the contentlets.
+ * @return {ContentletBound[]} An array of objects containing the bounding information for each contentlet.
+ * @example
+ * ```ts
+ * const containerRect = container.getBoundingClientRect();
+ * const contentlets = container.querySelectorAll('.contentlet');
+ * const bounds = getContentletsBound(containerRect, contentlets);
+ * console.log(bounds); // Element bounds within the container
+ * ```
+ */
+function getContentletsBound(containerRect, contentlets) {
+    return contentlets.map((contentlet) => {
+        const contentletRect = contentlet.getBoundingClientRect();
+        return {
+            x: 0,
+            y: contentletRect.y - containerRect.y,
+            width: contentletRect.width,
+            height: contentletRect.height,
+            payload: JSON.stringify({
+                container: contentlet.dataset?.['dotContainer']
+                    ? JSON.parse(contentlet.dataset?.['dotContainer'])
+                    : getClosestContainerData(contentlet),
+                contentlet: {
+                    identifier: contentlet.dataset?.['dotIdentifier'],
+                    title: contentlet.dataset?.['dotTitle'],
+                    inode: contentlet.dataset?.['dotInode'],
+                    contentType: contentlet.dataset?.['dotType']
+                }
+            })
+        };
+    });
+}
+/**
+ * Get container data from VTLS.
+ *
+ * @export
+ * @param {HTMLElement} container - The container element.
+ * @return {object} An object containing the container data.
+ * @example
+ * ```ts
+ * const container = document.querySelector('.container');
+ * const data = getContainerData(container);
+ * console.log(data);
+ * ```
+ */
+function getContainerData(container) {
+    return {
+        acceptTypes: container.dataset?.['dotAcceptTypes'] || '',
+        identifier: container.dataset?.['dotIdentifier'] || '',
+        maxContentlets: container.dataset?.['maxContentlets'] || '',
+        uuid: container.dataset?.['dotUuid'] || ''
+    };
+}
+/**
+ * Get the closest container data from the contentlet.
+ *
+ * @export
+ * @param {Element} element - The contentlet element.
+ * @return {object | null} An object containing the closest container data or null if no container is found.
+ * @example
+ * ```ts
+ * const contentlet = document.querySelector('.contentlet');
+ * const data = getClosestContainerData(contentlet);
+ * console.log(data);
+ * ```
+ */
+function getClosestContainerData(element) {
+    // Find the closest ancestor element with data-dot-object="container" attribute
+    const container = element.closest('[data-dot-object="container"]');
+    // If a container element is found
+    if (container) {
+        // Return the dataset of the container element
+        return getContainerData(container);
+    }
+    else {
+        // If no container element is found, return null
+        console.warn('No container found for the contentlet');
+        return null;
+    }
+}
+/**
+ * Find the closest contentlet element based on HTMLElement.
+ *
+ * @export
+ * @param {HTMLElement | null} element - The starting element.
+ * @return {HTMLElement | null} The closest contentlet element or null if not found.
+ * @example
+ * const element = document.querySelector('.some-element');
+ * const contentlet = findDotElement(element);
+ * console.log(contentlet);
+ */
+function findDotElement(element) {
+    if (!element)
+        return null;
+    if (element?.dataset?.['dotObject'] === 'contentlet' ||
+        (element?.dataset?.['dotObject'] === 'container' && element.children.length === 0)) {
+        return element;
+    }
+    return findDotElement(element?.['parentElement']);
+}
+/**
+ * Find VTL data within a target element.
+ *
+ * @export
+ * @param {HTMLElement} target - The target element to search within.
+ * @return {Array<{ inode: string, name: string }> | null} An array of objects containing VTL data or null if none found.
+ * @example
+ * ```ts
+ * const target = document.querySelector('.target-element');
+ * const vtlData = findVTLData(target);
+ * console.log(vtlData);
+ * ```
+ */
+function findVTLData(target) {
+    const vltElements = target.querySelectorAll('[data-dot-object="vtl-file"]');
+    if (!vltElements.length) {
+        return null;
+    }
+    return Array.from(vltElements).map((vltElement) => {
+        return {
+            inode: vltElement.dataset?.['dotInode'],
+            name: vltElement.dataset?.['dotUrl']
+        };
+    });
+}
+/**
+ * Check if the scroll position is at the bottom of the page.
+ *
+ * @export
+ * @return {boolean} True if the scroll position is at the bottom, otherwise false.
+ * @example
+ * ```ts
+ * if (scrollIsInBottom()) {
+ *     console.log('Scrolled to the bottom');
+ * }
+ * ```
+ */
+function scrollIsInBottom() {
+    const documentHeight = document.documentElement.scrollHeight;
+    const viewportHeight = window.innerHeight;
+    const scrollY = window.scrollY;
+    return scrollY + viewportHeight >= documentHeight;
+}
+
+/**
+ * Represents an array of DotCMSPageEditorSubscription objects.
+ * Used to store the subscriptions for the editor and unsubscribe later.
+ */
+const subscriptions = [];
+/**
+ * Sets the bounds of the containers in the editor.
+ * Retrieves the containers from the DOM and sends their position data to the editor.
+ * @private
+ * @memberof DotCMSPageEditor
+ */
+function setBounds() {
+    const containers = Array.from(document.querySelectorAll('[data-dot-object="container"]'));
+    const positionData = getPageElementBound(containers);
+    postMessageToEditor({
+        action: CLIENT_ACTIONS.SET_BOUNDS,
+        payload: positionData
+    });
+}
+/**
+ * Listens for editor messages and performs corresponding actions based on the received message.
+ *
+ * @private
+ * @memberof DotCMSPageEditor
+ */
+function listenEditorMessages() {
+    const messageCallback = (event) => {
+        const ACTIONS_NOTIFICATION = {
+            [NOTIFY_CLIENT.UVE_RELOAD_PAGE]: () => {
+                window.location.reload();
+            },
+            [NOTIFY_CLIENT.UVE_REQUEST_BOUNDS]: () => {
+                setBounds();
+            },
+            [NOTIFY_CLIENT.UVE_SCROLL_INSIDE_IFRAME]: () => {
+                const direction = event.data.direction;
+                if ((window.scrollY === 0 && direction === 'up') ||
+                    (scrollIsInBottom() && direction === 'down')) {
+                    // If the iframe scroll is at the top or bottom, do not send anything.
+                    // This avoids losing the scrollend event.
+                    return;
+                }
+                const scrollY = direction === 'up' ? -120 : 120;
+                window.scrollBy({ left: 0, top: scrollY, behavior: 'smooth' });
+            }
+        };
+        ACTIONS_NOTIFICATION[event.data.name]?.();
+    };
+    window.addEventListener('message', messageCallback);
+    subscriptions.push({
+        type: 'listener',
+        event: 'message',
+        callback: messageCallback
+    });
+}
+/**
+ * Listens for pointer move events and extracts information about the hovered contentlet.
+ *
+ * @private
+ * @memberof DotCMSPageEditor
+ */
+function listenHoveredContentlet() {
+    const pointerMoveCallback = (event) => {
+        const foundElement = findDotElement(event.target);
+        if (!foundElement)
+            return;
+        const { x, y, width, height } = foundElement.getBoundingClientRect();
+        const isContainer = foundElement.dataset?.['dotObject'] === 'container';
+        const contentletForEmptyContainer = {
+            identifier: 'TEMP_EMPTY_CONTENTLET',
+            title: 'TEMP_EMPTY_CONTENTLET',
+            contentType: 'TEMP_EMPTY_CONTENTLET_TYPE',
+            inode: 'TEMPY_EMPTY_CONTENTLET_INODE',
+            widgetTitle: 'TEMP_EMPTY_CONTENTLET',
+            baseType: 'TEMP_EMPTY_CONTENTLET',
+            onNumberOfPages: 1
+        };
+        const contentlet = {
+            identifier: foundElement.dataset?.['dotIdentifier'],
+            title: foundElement.dataset?.['dotTitle'],
+            inode: foundElement.dataset?.['dotInode'],
+            contentType: foundElement.dataset?.['dotType'],
+            baseType: foundElement.dataset?.['dotBasetype'],
+            widgetTitle: foundElement.dataset?.['dotWidgetTitle'],
+            onNumberOfPages: foundElement.dataset?.['dotOnNumberOfPages']
+        };
+        const vtlFiles = findVTLData(foundElement);
+        const contentletPayload = {
+            container: 
+            // Here extract dot-container from contentlet if it is Headless
+            // or search in parent container if it is VTL
+            foundElement.dataset?.['dotContainer']
+                ? JSON.parse(foundElement.dataset?.['dotContainer'])
+                : getClosestContainerData(foundElement),
+            contentlet: isContainer ? contentletForEmptyContainer : contentlet,
+            vtlFiles
+        };
+        postMessageToEditor({
+            action: CLIENT_ACTIONS.SET_CONTENTLET,
+            payload: {
+                x,
+                y,
+                width,
+                height,
+                payload: contentletPayload
+            }
+        });
+    };
+    document.addEventListener('pointermove', pointerMoveCallback);
+    subscriptions.push({
+        type: 'listener',
+        event: 'pointermove',
+        callback: pointerMoveCallback
+    });
+}
+/**
+ * Attaches a scroll event listener to the window
+ * and sends a message to the editor when the window is scrolled.
+ *
+ * @private
+ * @memberof DotCMSPageEditor
+ */
+function scrollHandler() {
+    const scrollCallback = () => {
+        postMessageToEditor({
+            action: CLIENT_ACTIONS.IFRAME_SCROLL
+        });
+        // In case it doesn't have a dotUVE object, we create it with the initial values.
+        window.dotUVE = {
+            ...(window.dotUVE ?? INITIAL_DOT_UVE),
+            lastScrollYPosition: window.scrollY
+        };
+    };
+    const scrollEndCallback = () => {
+        postMessageToEditor({
+            action: CLIENT_ACTIONS.IFRAME_SCROLL_END
+        });
+    };
+    window.addEventListener('scroll', scrollCallback);
+    window.addEventListener('scrollend', scrollEndCallback);
+    subscriptions.push({
+        type: 'listener',
+        event: 'scroll',
+        callback: scrollEndCallback
+    });
+    subscriptions.push({
+        type: 'listener',
+        event: 'scroll',
+        callback: scrollCallback
+    });
+}
+/**
+ * Sends a message to the editor to get the page data.
+ * @param {string} pathname - The pathname of the page.
+ * @private
+ * @memberof DotCMSPageEditor
+ */
+function fetchPageDataFromInsideUVE(pathname) {
+    postMessageToEditor({
+        action: CLIENT_ACTIONS.GET_PAGE_DATA,
+        payload: {
+            pathname
+        }
+    });
+}
+
+/**
+ * Updates the navigation in the editor.
+ *
+ * @param {string} pathname - The pathname to update the navigation with.
+ * @memberof DotCMSPageEditor
+ * @example
+ * updateNavigation('/home'); // Sends a message to the editor to update the navigation to '/home'
+ */
+function updateNavigation(pathname) {
+    postMessageToEditor({
+        action: CLIENT_ACTIONS.NAVIGATION_UPDATE,
+        payload: {
+            url: pathname || '/'
+        }
+    });
+}
+/**
+ * You can use this function to edit a contentlet in the editor.
+ *
+ * Calling this function inside the editor, will prompt the UVE to open a dialog to edit the contentlet.
+ *
+ * @export
+ * @template T
+ * @param {Contentlet<T>} contentlet - The contentlet to edit.
+ */
+function editContentlet(contentlet) {
+    postMessageToEditor({
+        action: CLIENT_ACTIONS.EDIT_CONTENTLET,
+        payload: contentlet
+    });
+}
+/**
+ * Initializes the inline editing in the editor.
+ *
+ * @export
+ * @param {INLINE_EDITING_EVENT_KEY} type
+ * @param {InlineEditEventData} eventData
+ * @return {*}
+ *
+ *  * @example
+ * ```html
+ * <div onclick="initInlineEditing('BLOCK_EDITOR', { inode, languageId, contentType, fieldName, content })">
+ *      ${My Content}
+ * </div>
+ * ```
+ */
+function initInlineEditing(type, data) {
+    postMessageToEditor({
+        action: CLIENT_ACTIONS.INIT_INLINE_EDITING,
+        payload: {
+            type,
+            data
+        }
+    });
+}
+/*
+ * Reorders the menu based on the provided configuration.
+ *
+ * @param {ReorderMenuConfig} [config] - Optional configuration for reordering the menu.
+ * @param {number} [config.startLevel=1] - The starting level of the menu to reorder.
+ * @param {number} [config.depth=2] - The depth of the menu to reorder.
+ *
+ * This function constructs a URL for the reorder menu page with the specified
+ * start level and depth, and sends a message to the editor to perform the reorder action.
+ */
+function reorderMenu(config) {
+    const { startLevel = 1, depth = 2 } = config || {};
+    postMessageToEditor({
+        action: CLIENT_ACTIONS.REORDER_MENU,
+        payload: { startLevel, depth }
+    });
+}
+/**
+ * @deprecated Use `getUVEState` function on {@link https://npmjs.com/package/@dotcms/uve|@dotcms/uve} instead, this function will be removed on future versions.
+ *
+ * Checks if the code is running inside the DotCMS Universal Visual Editor (UVE).
+ *
+ * The function checks three conditions:
+ * 1. If window is defined (for SSR environments)
+ * 2. If the page is not in preview mode
+ * 3. If the current window is embedded in a parent frame
+ *
+ * @returns {boolean} Returns true if running inside the UVE editor, false if running standalone or in preview mode
+ * @example
+ * ```ts
+ * // Check if code is running in editor before initializing editor-specific features
+ * if (isInsideEditor()) {
+ *     initEditor(config);
+ * } else {
+ *     initStandaloneMode();
+ * }
+ * ```
+ */
+function isInsideEditor() {
+    if (typeof window === 'undefined') {
+        return false;
+    }
+    return window.parent !== window;
+}
+function initDotUVE() {
+    window.dotUVE = INITIAL_DOT_UVE;
+}
+/**
+ * Initializes the DotCMS page editor.
+ *
+ * @param {DotCMSPageEditorConfig} config - Optional configuration for the editor.
+ * @example
+ * ```ts
+ * const config = { pathname: '/home' };
+ * initEditor(config); // Initializes the editor with the provided configuration
+ * ```
+ */
+function initEditor(config) {
+    initDotUVE();
+    fetchPageDataFromInsideUVE(config.pathname);
+    listenEditorMessages();
+    listenHoveredContentlet();
+    scrollHandler();
+}
+/**
+ * Destroys the editor by removing event listeners and disconnecting observers.
+ *
+ * @example
+ * ```ts
+ * destroyEditor(); // Cleans up the editor by removing all event listeners and disconnecting observers
+ * ```
+ */
+function destroyEditor() {
+    subscriptions.forEach((subscription) => {
+        if (subscription.type === 'listener') {
+            window.removeEventListener(subscription.event, subscription.callback);
+        }
+        if (subscription.type === 'observer') {
+            subscription.observer.disconnect();
+        }
+    });
+}
+
+const INITIAL_DOT_UVE = {
+    editContentlet,
+    initInlineEditing,
+    reorderMenu,
+    lastScrollYPosition: 0
+};
+/**
+ * Actions send to the dotcms editor
+ *
+ * @export
+ * @enum {number}
+ */
+var CLIENT_ACTIONS;
+(function (CLIENT_ACTIONS) {
+    /**
+     * Tell the dotcms editor that page change
+     */
+    CLIENT_ACTIONS["NAVIGATION_UPDATE"] = "set-url";
+    /**
+     * Send the element position of the rows, columnsm containers and contentlets
+     */
+    CLIENT_ACTIONS["SET_BOUNDS"] = "set-bounds";
+    /**
+     * Send the information of the hovered contentlet
+     */
+    CLIENT_ACTIONS["SET_CONTENTLET"] = "set-contentlet";
+    /**
+     * Tell the editor that the page is being scrolled
+     */
+    CLIENT_ACTIONS["IFRAME_SCROLL"] = "scroll";
+    /**
+     * Tell the editor that the page has stopped scrolling
+     */
+    CLIENT_ACTIONS["IFRAME_SCROLL_END"] = "scroll-end";
+    /**
+     * Ping the editor to see if the page is inside the editor
+     */
+    CLIENT_ACTIONS["PING_EDITOR"] = "ping-editor";
+    /**
+     * Tell the editor to init the inline editing editor.
+     */
+    CLIENT_ACTIONS["INIT_INLINE_EDITING"] = "init-inline-editing";
+    /**
+     * Tell the editor to open the Copy-contentlet dialog
+     * To copy a content and then edit it inline.
+     */
+    CLIENT_ACTIONS["COPY_CONTENTLET_INLINE_EDITING"] = "copy-contentlet-inline-editing";
+    /**
+     * Tell the editor to save inline edited contentlet
+     */
+    CLIENT_ACTIONS["UPDATE_CONTENTLET_INLINE_EDITING"] = "update-contentlet-inline-editing";
+    /**
+     * Tell the editor to trigger a menu reorder
+     */
+    CLIENT_ACTIONS["REORDER_MENU"] = "reorder-menu";
+    /**
+     * Tell the editor to send the page info to iframe
+     */
+    CLIENT_ACTIONS["GET_PAGE_DATA"] = "get-page-data";
+    /**
+     * Tell the editor an user send a graphql query
+     */
+    CLIENT_ACTIONS["CLIENT_READY"] = "client-ready";
+    /**
+     * Tell the editor to edit a contentlet
+     */
+    CLIENT_ACTIONS["EDIT_CONTENTLET"] = "edit-contentlet";
+    /**
+     * Tell the editor to do nothing
+     */
+    CLIENT_ACTIONS["NOOP"] = "noop";
+})(CLIENT_ACTIONS || (CLIENT_ACTIONS = {}));
+/**
+ * Post message to dotcms page editor
+ *
+ * @export
+ * @template T
+ * @param {PostMessageProps<T>} message
+ */
+function postMessageToEditor(message) {
+    window.parent.postMessage(message, '*');
+}
+
+var _DotCmsClient_config, _DotCmsClient_requestOptions, _DotCmsClient_listeners;
+function getHostURL(url) {
+    try {
+        return new URL(url);
+    }
+    catch (error) {
+        return undefined;
+    }
+}
+/**
+ * `DotCmsClient` is a TypeScript class that provides methods to interact with the DotCMS REST API.
+ * DotCMS is a hybrid-headless CMS and digital experience platform.
+ *
+ * @class DotCmsClient
+ * @property {ClientConfig} config - The configuration object for the DotCMS client.
+ * @property {Content} content - Provides methods to interact with content in DotCMS.
+ *
+ * @method constructor(config: ClientConfig) - Constructs a new instance of the DotCmsClient class.
+ *
+ * @method page.get(options: PageApiOptions): Promise<PageApiResponse> - Retrieves all the elements of any Page in your dotCMS system in JSON format.
+ * The Page API enables you to retrieve page information, layout, template, content blocks, and more.
+ * @see {@link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas}
+ *
+ * @method nav.get(options: NavApiOptions = { depth: 0, path: '/', languageId: 1 }): Promise<NavApiResponse> - Retrieves information about the dotCMS file and folder tree.
+ * The Navigation API allows you to fetch the site structure and menu items.
+ * @see {@link https://www.dotcms.com/docs/latest/navigation-rest-api}
+ *
+ * @method content.get(options: ContentApiOptions): Promise<ContentApiResponse> - Retrieves content items based on specified criteria.
+ * The Content API allows you to query and retrieve content by ID, inode, or using Lucene queries.
+ * @see {@link https://www.dotcms.com/docs/latest/content-api-retrieval-and-querying}
+ *
+ * @method editor.on(action: string, callbackFn: (payload: unknown) => void) - Allows you to react to actions issued by the Universal Visual Editor (UVE).
+ * @method editor.off(action: string) - Stops listening to an action issued by UVE.
+ *
+ * @static
+ * @method init(config: ClientConfig): DotCmsClient - Initializes and returns a DotCmsClient instance.
+ * @method dotcmsUrl: string - Retrieves the DotCMS URL from the instance configuration.
+ *
+ * @example <caption>Basic usage</caption>
+ * ```javascript
+ * const client = DotCmsClient.init({ dotcmsUrl: 'https://demo.dotcms.com', authToken: 'your-auth-token' });
+ *
+ * // Get a page
+ * client.page.get({ path: '/about-us' }).then(response => console.log(response));
+ *
+ * // Get navigation
+ * client.nav.get({ path: '/about-us', depth: 2 }).then(response => console.log(response));
+ *
+ * // Get content
+ * client.content.get({ query: '+contentType:Blog +languageId:1', limit: 10 }).then(response => console.log(response));
+ *
+ * // Listen to editor changes
+ * client.editor.on('changes', (payload) => console.log('Changes detected:', payload));
+ * ```
+ */
+class DotCmsClient {
+    constructor(config = { dotcmsUrl: '', authToken: '', requestOptions: {}, siteId: '' }) {
+        _DotCmsClient_config.set(this, void 0);
+        _DotCmsClient_requestOptions.set(this, void 0);
+        _DotCmsClient_listeners.set(this, []);
+        this.page = {
+            /**
+             * `page.get` is an asynchronous method of the `DotCmsClient` class that retrieves all the elements of any Page in your dotCMS system in JSON format.
+             * It takes a `PageApiOptions` object as a parameter and returns a Promise that resolves to the response from the DotCMS API.
+             *
+             * The Page API enables you to retrieve all the elements of any Page in your dotCMS system.
+             * The elements may be retrieved in JSON format.
+             *
+             * @link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas
+             * @async
+             * @param {PageApiOptions} options - The options for the Page API call.
+             * @returns {Promise<unknown>} - A Promise that resolves to the response from the DotCMS API.
+             * @throws {Error} - Throws an error if the options are not valid.
+             * @example
+             * ```ts
+             * const client = new DotCmsClient({ dotcmsUrl: 'https://your.dotcms.com', authToken: 'your-auth-token', siteId: 'your-site-id' });
+             * client.page.get({ path: '/about-us' }).then(response => console.log(response));
+             * ```
+             */
+            get: async (options) => {
+                this.validatePageOptions(options);
+                const queryParamsObj = {};
+                for (const [key, value] of Object.entries(options)) {
+                    if (value === undefined || key === 'path' || key === 'siteId')
+                        continue;
+                    if (key === 'personaId') {
+                        queryParamsObj['com.dotmarketing.persona.id'] = String(value);
+                    }
+                    else if (key === 'mode' && value) {
+                        queryParamsObj['mode'] = String(value);
+                    }
+                    else {
+                        queryParamsObj[key] = String(value);
+                    }
+                }
+                const queryHostId = options.siteId ?? __classPrivateFieldGet(this, _DotCmsClient_config, "f").siteId ?? '';
+                if (queryHostId) {
+                    queryParamsObj['host_id'] = queryHostId;
+                }
+                const queryParams = new URLSearchParams(queryParamsObj).toString();
+                const formattedPath = options.path.startsWith('/') ? options.path : `/${options.path}`;
+                const url = `${__classPrivateFieldGet(this, _DotCmsClient_config, "f").dotcmsUrl}/api/v1/page/json${formattedPath}${queryParams ? `?${queryParams}` : ''}`;
+                const response = await fetch(url, __classPrivateFieldGet(this, _DotCmsClient_requestOptions, "f"));
+                if (!response.ok) {
+                    const error = {
+                        status: response.status,
+                        message: ErrorMessages[response.status] || response.statusText
+                    };
+                    console.error(error);
+                    throw error;
+                }
+                return response.json().then((data) => data.entity);
+            }
+        };
+        this.editor = {
+            /**
+             * `editor.on` is an asynchronous method of the `DotCmsClient` class that allows you to react to actions issued by the UVE.
+             *
+             *  NOTE: This is being used by the development team - This logic is probably varied or moved to another function/object.
+             * @param {string} action - The name of the action emitted by UVE.
+             * @param {function} callbackFn - The function to execute when the UVE emits the action.
+             * @example
+             * ```ts
+             * client.editor.on('changes', (payload) => {
+             *     console.log('Changes detected:', payload);
+             * });
+             * ```
+             */
+            on: (action, callbackFn) => {
+                if (!isInsideEditor()) {
+                    return;
+                }
+                if (action === 'changes') {
+                    const messageCallback = (event) => {
+                        if (event.data.name === NOTIFY_CLIENT.UVE_SET_PAGE_DATA) {
+                            callbackFn(event.data.payload);
+                        }
+                    };
+                    window.addEventListener('message', messageCallback);
+                    __classPrivateFieldGet(this, _DotCmsClient_listeners, "f").push({ event: 'message', callback: messageCallback, action });
+                }
+            },
+            /**
+             * `editor.off` is a synchronous method of the `DotCmsClient` class that allows you to stop listening and reacting to an action issued by UVE.
+             *
+             * NOTE: This is being used by the development team - This logic is probably varied or moved to another function/object.
+             * @param {string} action - The name of the action to stop listening to.
+             * @example
+             * ```ts
+             * client.editor.off('changes');
+             * ```
+             */
+            off: (action) => {
+                const listenerIndex = __classPrivateFieldGet(this, _DotCmsClient_listeners, "f").findIndex((listener) => listener.action === action);
+                if (listenerIndex !== -1) {
+                    const listener = __classPrivateFieldGet(this, _DotCmsClient_listeners, "f")[listenerIndex];
+                    window.removeEventListener(listener.event, listener.callback);
+                    __classPrivateFieldGet(this, _DotCmsClient_listeners, "f").splice(listenerIndex, 1);
+                }
+            }
+        };
+        this.nav = {
+            /**
+             * `nav.get` is an asynchronous method of the `DotCmsClient` class that retrieves information about the dotCMS file and folder tree.
+             * It takes a `NavApiOptions` object as a parameter (with default values) and returns a Promise that resolves to the response from the DotCMS API.
+             *
+             * The navigation REST API enables you to retrieve information about the dotCMS file and folder tree through REST API calls.
+             * @link https://www.dotcms.com/docs/latest/navigation-rest-api
+             * @async
+             * @param {NavApiOptions} options - The options for the Nav API call. Defaults to `{ depth: 0, path: '/', languageId: 1 }`.
+             * @returns {Promise<unknown>} - A Promise that resolves to the response from the DotCMS API.
+             * @throws {Error} - Throws an error if the options are not valid.
+             * @example
+             * ```ts
+             * const client = new DotCmsClient({ dotcmsUrl: 'https://your.dotcms.com', authToken: 'your-auth-token', siteId: 'your-site-id' }});
+             * client.nav.get({ path: '/about-us', depth: 2 }).then(response => console.log(response));
+             * ```
+             */
+            get: async (options = { depth: 0, path: '/', languageId: 1 }) => {
+                this.validateNavOptions(options);
+                // Extract the 'path' from the options and prepare the rest as query parameters
+                const { path, ...queryParamsOptions } = options;
+                const queryParamsObj = {};
+                Object.entries(queryParamsOptions).forEach(([key, value]) => {
+                    if (value !== undefined) {
+                        queryParamsObj[key] = String(value);
+                    }
+                });
+                const queryParams = new URLSearchParams(queryParamsObj).toString();
+                // Format the URL correctly depending on the 'path' value
+                const formattedPath = path === '/' ? '/' : `/${path}`;
+                const url = `${__classPrivateFieldGet(this, _DotCmsClient_config, "f").dotcmsUrl}/api/v1/nav${formattedPath}${queryParams ? `?${queryParams}` : ''}`;
+                const response = await fetch(url, __classPrivateFieldGet(this, _DotCmsClient_requestOptions, "f"));
+                return response.json();
+            }
+        };
+        if (!config.dotcmsUrl) {
+            throw new Error("Invalid configuration - 'dotcmsUrl' is required");
+        }
+        this.dotcmsUrl = getHostURL(config.dotcmsUrl)?.origin;
+        if (!this.dotcmsUrl) {
+            throw new Error("Invalid configuration - 'dotcmsUrl' must be a valid URL");
+        }
+        if (!config.authToken) {
+            throw new Error("Invalid configuration - 'authToken' is required");
+        }
+        __classPrivateFieldSet(this, _DotCmsClient_config, {
+            ...config,
+            dotcmsUrl: this.dotcmsUrl
+        }, "f");
+        __classPrivateFieldSet(this, _DotCmsClient_requestOptions, {
+            ...__classPrivateFieldGet(this, _DotCmsClient_config, "f").requestOptions,
+            headers: {
+                Authorization: `Bearer ${__classPrivateFieldGet(this, _DotCmsClient_config, "f").authToken}`,
+                ...__classPrivateFieldGet(this, _DotCmsClient_config, "f").requestOptions?.headers
+            }
+        }, "f");
+        this.content = new Content(__classPrivateFieldGet(this, _DotCmsClient_requestOptions, "f"), __classPrivateFieldGet(this, _DotCmsClient_config, "f").dotcmsUrl);
+    }
+    /**
+     * Initializes the DotCmsClient instance with the provided configuration.
+     * If an instance already exists, it returns the existing instance.
+     *
+     * @param {ClientConfig} config - The configuration object for the DotCMS client.
+     * @returns {DotCmsClient} - The initialized DotCmsClient instance.
+     * @example
+     * ```ts
+     * const client = DotCmsClient.init({ dotcmsUrl: 'https://demo.dotcms.com', authToken: 'your-auth-token' });
+     * ```
+     */
+    static init(config) {
+        if (this.instance) {
+            console.warn('DotCmsClient has already been initialized. Please use the instance to interact with the DotCMS API.');
+        }
+        return this.instance ?? (this.instance = new DotCmsClient(config));
+    }
+    /**
+     * Retrieves the DotCMS URL from the instance configuration.
+     *
+     * @returns {string} - The DotCMS URL.
+     */
+    static get dotcmsUrl() {
+        return (this.instance && __classPrivateFieldGet(this.instance, _DotCmsClient_config, "f").dotcmsUrl) || '';
+    }
+    /**
+     * Throws an error if the path is not valid.
+     *
+     * @returns {string} - The authentication token.
+     */
+    validatePageOptions(options) {
+        if (!options.path) {
+            throw new Error("The 'path' parameter is required for the Page API");
+        }
+    }
+    /**
+     * Throws an error if the path is not valid.
+     *
+     *  @returns {string} - The authentication token.
+     */
+    validateNavOptions(options) {
+        if (!options.path) {
+            throw new Error("The 'path' parameter is required for the Nav API");
+        }
+    }
+}
+_DotCmsClient_config = new WeakMap(), _DotCmsClient_requestOptions = new WeakMap(), _DotCmsClient_listeners = new WeakMap();
+
+/**
+ * Generates the page request parameters to be used in the API call.
+ *
+ * @param {PageRequestParamsProps} PageRequestParamsProps - The properties for the page request.
+ * @returns {PageApiOptions} The options for the page API.
+ * @example
+ * ```ts
+ * const pageApiOptions = getPageRequestParams({ path: '/api/v1/page', params: queryParams });
+ * ```
+ */
+const getPageRequestParams = ({ path = '', params = {} }) => {
+    const copiedParams = params instanceof URLSearchParams ? Object.fromEntries(params.entries()) : { ...params };
+    const finalParams = {};
+    const dotMarketingPersonaId = copiedParams['com.dotmarketing.persona.id'] || '';
+    finalParams['mode'] = copiedParams['mode'] || 'LIVE';
+    if (copiedParams['language_id']) {
+        finalParams['language_id'] = copiedParams['language_id'];
+    }
+    if (copiedParams['variantName']) {
+        finalParams['variantName'] = copiedParams['variantName'];
+    }
+    if (copiedParams['personaId'] || dotMarketingPersonaId) {
+        finalParams['personaId'] = copiedParams['personaId'] || dotMarketingPersonaId;
+    }
+    if (copiedParams['publishDate']) {
+        finalParams['publishDate'] = copiedParams['publishDate'];
+    }
+    return {
+        path,
+        ...finalParams
+    };
+};
+
+export { CLIENT_ACTIONS, DotCmsClient, NOTIFY_CLIENT, destroyEditor, editContentlet, getPageRequestParams, initEditor, initInlineEditing, isInsideEditor, postMessageToEditor, reorderMenu, updateNavigation };