@dotcms/angular 0.0.1-beta.1 → 0.0.1-beta.10

package/fesm2022/dotcms-angular-next.mjs

@@ -0,0 +1,395 @@
+import * as i0 from '@angular/core';
+import { inject, ViewContainerRef, TemplateRef, Directive, Input, Renderer2, ElementRef, SecurityContext, Component, ViewChild, HostListener } from '@angular/core';
+import { getUVEState } from '@dotcms/uve';
+import { UVE_MODE } from '@dotcms/uve/types';
+import { IMAGE_LOADER } from '@angular/common';
+import { TINYMCE_SCRIPT_SRC, EditorComponent } from '@tinymce/tinymce-angular';
+import { DomSanitizer } from '@angular/platform-browser';
+import { NOTIFY_CLIENT, isInsideEditor, DotCmsClient, postMessageToEditor, CLIENT_ACTIONS } from '@dotcms/client';
+
+/**
+ * Directive to show a template when the UVE is in a specific mode.
+ *
+ * @example
+ * <div *dotCMSShowWhen="UVE_MODE.EDIT">
+ *     This will be shown when the UVE is in edit mode.
+ * </div>
+ *
+ * @export
+ * @class DotCMSShowWhenDirective
+ */
+class DotCMSShowWhenDirective {
+    #when = UVE_MODE.EDIT;
+    #hasView = false;
+    set dotCMSShowWhen(value) {
+        this.#when = value;
+        this.updateViewContainer();
+    }
+    #viewContainerRef = inject(ViewContainerRef);
+    #templateRef = inject(TemplateRef);
+    updateViewContainer() {
+        const state = getUVEState();
+        const shouldShow = state?.mode === this.#when;
+        if (shouldShow && !this.#hasView) {
+            this.#viewContainerRef.createEmbeddedView(this.#templateRef);
+            this.#hasView = true;
+        }
+        else if (!shouldShow && this.#hasView) {
+            this.#viewContainerRef.clear();
+            this.#hasView = false;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSShowWhenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: DotCMSShowWhenDirective, isStandalone: true, selector: "[dotCMSShowWhen]", inputs: { dotCMSShowWhen: "dotCMSShowWhen" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSShowWhenDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dotCMSShowWhen]',
+                    standalone: true
+                }]
+        }], propDecorators: { dotCMSShowWhen: [{
+                type: Input
+            }] } });
+
+/**
+ * Validates if a given path is a valid URL string
+ *
+ * @param path - The path to validate
+ * @returns boolean indicating if the path is valid
+ */
+function isValidPath(path) {
+    if (typeof path !== 'string' || path.trim() === '') {
+        return false;
+    }
+    try {
+        new URL(path);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Provides a DotCMS image loader configuration for the Angular Image directive
+ *
+ * @param path - The base URL path to the DotCMS instance, or empty to use current site
+ * @returns An array of providers for the IMAGE_LOADER token
+ * @throws Error if the provided path is invalid
+ * @example
+ * ```typescript
+ * // In your app.config.ts
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideDotCMSImageLoader('https://demo.dotcms.com')
+ *     // Or use current site:
+ *     // provideDotCMSImageLoader()
+ *   ]
+ * };
+ * ```
+ */
+function provideDotCMSImageLoader(path) {
+    // If path is provided, validate it
+    if (path && !isValidPath(path)) {
+        throw new Error(`Image loader has detected an invalid path (\`${path}\`). ` +
+            `To fix this, supply either the full URL to the dotCMS site, or leave it empty to use the current site.`);
+    }
+    return [
+        {
+            provide: IMAGE_LOADER,
+            useValue: (config) => createDotCMSURL(config, path)
+        }
+    ];
+}
+/**
+ * Creates a DotCMS-compatible URL for image loading
+ *
+ * @param config - The image loader configuration
+ * @param path - The base URL path to the DotCMS instance
+ * @returns A fully qualified URL for the image
+ * @internal
+ */
+function createDotCMSURL(config, path) {
+    const { loaderParams, src, width } = config;
+    const params = loaderParams;
+    if (params?.isOutsideSRC) {
+        return src;
+    }
+    // Use empty string as fallback to support using current site
+    const dotcmsHost = path ? new URL(path).origin : '';
+    const imageSRC = src.includes('/dA/') ? src : `/dA/${src}`;
+    const languageId = params?.languageId ?? '1';
+    if (width) {
+        return `${dotcmsHost}${imageSRC}/${width}w?language_id=${languageId}`;
+    }
+    return `${dotcmsHost}${imageSRC}?language_id=${languageId}`;
+}
+
+const DEFAULT_TINYMCE_CONFIG = {
+    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'
+};
+const TINYMCE_CONFIG = {
+    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: ''
+    }
+};
+
+/**
+ * Dot editable text component.
+ * This component is responsible to render a text field that can be edited inline.
+ *
+ * @export
+ * @class DotCMSEditableTextComponent
+ * @implements {OnInit}
+ * @implements {OnChanges}
+ */
+class DotCMSEditableTextComponent {
+    constructor() {
+        /**
+         * Represents the mode of the editor which can be `plain`, `minimal`, or `full`
+         *
+         * @type {DOT_EDITABLE_TEXT_MODE}
+         * @memberof DotCMSEditableTextComponent
+         */
+        this.mode = 'plain';
+        /**
+         * Represents the format of the editor which can be `text` or `html`
+         *
+         * @type {DOT_EDITABLE_TEXT_FORMAT}
+         * @memberof DotCMSEditableTextComponent
+         */
+        this.format = 'text';
+        /**
+         * Represents the field name of the `contentlet` that can be edited
+         *
+         * @memberof DotCMSEditableTextComponent
+         */
+        this.fieldName = '';
+        /**
+         * Represents the content of the `contentlet` that can be edited
+         *
+         * @protected
+         * @memberof DotCMSEditableTextComponent
+         */
+        this.content = '';
+        this.#sanitizer = inject(DomSanitizer);
+        this.#renderer = inject(Renderer2);
+        this.#elementRef = inject(ElementRef);
+    }
+    #sanitizer;
+    #renderer;
+    #elementRef;
+    /**
+     * The TinyMCE editor
+     *
+     * @readonly
+     * @memberof DotCMSEditableTextComponent
+     */
+    get editor() {
+        return this.editorComponent?.editor;
+    }
+    /**
+     * Returns the number of pages the contentlet is on
+     *
+     * @readonly
+     * @memberof DotCMSEditableTextComponent
+     */
+    get onNumberOfPages() {
+        return this.contentlet['onNumberOfPages'] || 1;
+    }
+    /**
+     * Handle copy contentlet inline editing success event
+     *
+     * @param {MessageEvent} { data }
+     * @return {*}
+     * @memberof DotCMSEditableTextComponent
+     */
+    onMessage({ data }) {
+        const { name, payload } = data;
+        if (name !== NOTIFY_CLIENT.UVE_COPY_CONTENTLET_INLINE_EDITING_SUCCESS) {
+            return;
+        }
+        const { oldInode, inode } = payload;
+        const currentInode = this.contentlet.inode;
+        if (currentInode === oldInode || currentInode === inode) {
+            this.editorComponent.editor.focus();
+            return;
+        }
+    }
+    ngOnInit() {
+        this.isInsideEditor = isInsideEditor();
+        if (!this.isInsideEditor) {
+            this.innerHTMLToElement();
+            return;
+        }
+        this.init = {
+            ...TINYMCE_CONFIG[this.mode],
+            base_url: `${DotCmsClient.dotcmsUrl}/ext/tinymcev7`
+        };
+    }
+    ngOnChanges() {
+        this.content = this.contentlet[this.fieldName] || '';
+        if (this.editor) {
+            this.editor.setContent(this.content, { format: this.format });
+        }
+    }
+    /**
+     * Handle mouse down event
+     *
+     * @param {EventObj<MouseEvent>} { event }
+     * @return {*}
+     * @memberof DotCMSEditableTextComponent
+     */
+    onMouseDown({ event }) {
+        if (this.onNumberOfPages <= 1 || this.editorComponent.editor.hasFocus()) {
+            return;
+        }
+        const { inode, languageId: language } = this.contentlet;
+        event.stopPropagation();
+        event.preventDefault();
+        try {
+            postMessageToEditor({
+                action: CLIENT_ACTIONS.COPY_CONTENTLET_INLINE_EDITING,
+                payload: {
+                    dataset: {
+                        inode,
+                        language,
+                        fieldName: this.fieldName
+                    }
+                }
+            });
+        }
+        catch (error) {
+            console.error('Failed to post message to editor:', error);
+        }
+    }
+    /**
+     * Handle focus out event
+     *
+     * @return {*}
+     * @memberof DotCMSEditableTextComponent
+     */
+    onFocusOut() {
+        const content = this.editor.getContent({ format: this.format });
+        if (!this.editor.isDirty() || !this.didContentChange(content)) {
+            return;
+        }
+        const { inode, languageId: langId } = this.contentlet;
+        try {
+            postMessageToEditor({
+                action: CLIENT_ACTIONS.UPDATE_CONTENTLET_INLINE_EDITING,
+                payload: {
+                    content,
+                    dataset: {
+                        inode,
+                        langId,
+                        fieldName: this.fieldName
+                    }
+                }
+            });
+        }
+        catch (error) {
+            console.error('Failed to post message to editor:', error);
+        }
+    }
+    /**
+     * inner HTML to element
+     *
+     * @private
+     * @param {string} editedContent
+     * @return {*}
+     * @memberof DotCMSEditableTextComponent
+     */
+    innerHTMLToElement() {
+        const element = this.#elementRef.nativeElement;
+        const safeHtml = this.#sanitizer.bypassSecurityTrustHtml(this.content);
+        const content = this.#sanitizer.sanitize(SecurityContext.HTML, safeHtml) || '';
+        this.#renderer.setProperty(element, 'innerHTML', content);
+    }
+    /**
+     * Check if the content has changed
+     *
+     * @private
+     * @param {string} editedContent
+     * @return {*}
+     * @memberof DotCMSEditableTextComponent
+     */
+    didContentChange(editedContent) {
+        return this.content !== editedContent;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSEditableTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: DotCMSEditableTextComponent, isStandalone: true, selector: "dotcms-editable-text", inputs: { mode: "mode", format: "format", contentlet: "contentlet", fieldName: "fieldName" }, host: { listeners: { "window:message": "onMessage($event)" } }, providers: [
+            {
+                provide: TINYMCE_SCRIPT_SRC,
+                useFactory: () => {
+                    return `${DotCmsClient.dotcmsUrl}/ext/tinymcev7/tinymce.min.js`;
+                }
+            }
+        ], 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: "18.2.3", ngImport: i0, type: DotCMSEditableTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dotcms-editable-text', standalone: true, imports: [EditorComponent], providers: [
+                        {
+                            provide: TINYMCE_SCRIPT_SRC,
+                            useFactory: () => {
+                                return `${DotCmsClient.dotcmsUrl}/ext/tinymcev7/tinymce.min.js`;
+                            }
+                        }
+                    ], 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"] }]
+        }], propDecorators: { editorComponent: [{
+                type: ViewChild,
+                args: [EditorComponent]
+            }], mode: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], contentlet: [{
+                type: Input
+            }], fieldName: [{
+                type: Input
+            }], onMessage: [{
+                type: HostListener,
+                args: ['window:message', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DotCMSEditableTextComponent, DotCMSShowWhenDirective, provideDotCMSImageLoader };
+//# sourceMappingURL=dotcms-angular-next.mjs.map

package/fesm2022/dotcms-angular-next.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dotcms-angular-next.mjs","sources":["../../../../../libs/sdk/angular/next/directives/dotcms-show-when/dotcms-show-when.directive.ts","../../../../../libs/sdk/angular/next/providers/dotcms-image-loader/dotcms-image_loader.ts","../../../../../libs/sdk/angular/next/components/dotcms-editable-text/utils.ts","../../../../../libs/sdk/angular/next/components/dotcms-editable-text/dotcms-editable-text.component.ts","../../../../../libs/sdk/angular/next/components/dotcms-editable-text/dotcms-editable-text.component.html","../../../../../libs/sdk/angular/next/dotcms-angular-next.ts"],"sourcesContent":["import { Directive, Input, ViewContainerRef, TemplateRef, inject } from '@angular/core';\n\nimport { getUVEState } from '@dotcms/uve';\nimport { UVE_MODE, UVEState } from '@dotcms/uve/types';\n\n/**\n * Directive to show a template when the UVE is in a specific mode.\n *\n * @example\n * <div *dotCMSShowWhen=\"UVE_MODE.EDIT\">\n *     This will be shown when the UVE is in edit mode.\n * </div>\n *\n * @export\n * @class DotCMSShowWhenDirective\n */\n@Directive({\n    selector: '[dotCMSShowWhen]',\n    standalone: true\n})\nexport class DotCMSShowWhenDirective {\n    #when: UVE_MODE = UVE_MODE.EDIT;\n    #hasView = false;\n\n    @Input() set dotCMSShowWhen(value: UVE_MODE) {\n        this.#when = value;\n        this.updateViewContainer();\n    }\n\n    #viewContainerRef = inject(ViewContainerRef);\n    #templateRef = inject(TemplateRef);\n\n    private updateViewContainer() {\n        const state: UVEState | undefined = getUVEState();\n\n        const shouldShow = state?.mode === this.#when;\n\n        if (shouldShow && !this.#hasView) {\n            this.#viewContainerRef.createEmbeddedView(this.#templateRef);\n            this.#hasView = true;\n        } else if (!shouldShow && this.#hasView) {\n            this.#viewContainerRef.clear();\n            this.#hasView = false;\n        }\n    }\n}\n","import { IMAGE_LOADER, ImageLoaderConfig } from '@angular/common';\nimport { Provider } from '@angular/core';\n\n/**\n * Type definition for the DotCMS image loader parameters\n */\ninterface DotCMSImageLoaderParams {\n    isOutsideSRC?: boolean;\n    languageId?: string;\n}\n\n/**\n * Validates if a given path is a valid URL string\n *\n * @param path - The path to validate\n * @returns boolean indicating if the path is valid\n */\nfunction isValidPath(path: unknown): boolean {\n    if (typeof path !== 'string' || path.trim() === '') {\n        return false;\n    }\n\n    try {\n        new URL(path);\n\n        return true;\n    } catch {\n        return false;\n    }\n}\n\n/**\n * Provides a DotCMS image loader configuration for the Angular Image directive\n *\n * @param path - The base URL path to the DotCMS instance, or empty to use current site\n * @returns An array of providers for the IMAGE_LOADER token\n * @throws Error if the provided path is invalid\n * @example\n * ```typescript\n * // In your app.config.ts\n * export const appConfig: ApplicationConfig = {\n *   providers: [\n *     provideDotCMSImageLoader('https://demo.dotcms.com')\n *     // Or use current site:\n *     // provideDotCMSImageLoader()\n *   ]\n * };\n * ```\n */\nexport function provideDotCMSImageLoader(path?: string): Provider[] {\n    // If path is provided, validate it\n    if (path && !isValidPath(path)) {\n        throw new Error(\n            `Image loader has detected an invalid path (\\`${path}\\`). ` +\n                `To fix this, supply either the full URL to the dotCMS site, or leave it empty to use the current site.`\n        );\n    }\n\n    return [\n        {\n            provide: IMAGE_LOADER,\n            useValue: (config: ImageLoaderConfig) => createDotCMSURL(config, path)\n        }\n    ];\n}\n\n/**\n * Creates a DotCMS-compatible URL for image loading\n *\n * @param config - The image loader configuration\n * @param path - The base URL path to the DotCMS instance\n * @returns A fully qualified URL for the image\n * @internal\n */\nfunction createDotCMSURL(config: ImageLoaderConfig, path?: string): string {\n    const { loaderParams, src, width } = config;\n    const params = loaderParams as DotCMSImageLoaderParams;\n\n    if (params?.isOutsideSRC) {\n        return src;\n    }\n\n    // Use empty string as fallback to support using current site\n    const dotcmsHost = path ? new URL(path).origin : '';\n    const imageSRC = src.includes('/dA/') ? src : `/dA/${src}`;\n    const languageId = params?.languageId ?? '1';\n\n    if (width) {\n        return `${dotcmsHost}${imageSRC}/${width}w?language_id=${languageId}`;\n    }\n\n    return `${dotcmsHost}${imageSRC}?language_id=${languageId}`;\n}\n","import { EditorComponent } from '@tinymce/tinymce-angular';\n\nexport type DOT_EDITABLE_TEXT_MODE = 'minimal' | 'full' | 'plain';\n\nexport type DOT_EDITABLE_TEXT_FORMAT = 'html' | 'text';\n\nconst DEFAULT_TINYMCE_CONFIG: EditorComponent['init'] = {\n    menubar: false,\n    inline: true,\n    valid_styles: {\n        '*': 'font-size,font-family,color,text-decoration,text-align'\n    },\n    powerpaste_word_import: 'clean',\n    powerpaste_html_import: 'clean',\n    suffix: '.min', // Suffix to use when loading resources\n    license_key: 'gpl'\n};\n\nexport const TINYMCE_CONFIG: {\n    [key in DOT_EDITABLE_TEXT_MODE]: EditorComponent['init'];\n} = {\n    minimal: {\n        ...DEFAULT_TINYMCE_CONFIG,\n        plugins: 'link autolink',\n        toolbar: 'bold italic underline | link',\n        valid_elements: 'strong,em,span[style],a[href]'\n    },\n    full: {\n        ...DEFAULT_TINYMCE_CONFIG,\n        plugins: 'link lists autolink charmap',\n        style_formats: [\n            { title: 'Paragraph', format: 'p' },\n            { title: 'Header 1', format: 'h1' },\n            { title: 'Header 2', format: 'h2' },\n            { title: 'Header 3', format: 'h3' },\n            { title: 'Header 4', format: 'h4' },\n            { title: 'Header 5', format: 'h5' },\n            { title: 'Header 6', format: 'h6' },\n            { title: 'Pre', format: 'pre' },\n            { title: 'Code', format: 'code' }\n        ],\n        toolbar: [\n            'styleselect undo redo | bold italic underline | forecolor backcolor | alignleft aligncenter alignright alignfull | numlist bullist outdent indent | hr charmap removeformat | link'\n        ]\n    },\n    plain: {\n        ...DEFAULT_TINYMCE_CONFIG,\n        plugins: '',\n        toolbar: ''\n    }\n};\n","import { EditorComponent, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';\nimport { EventObj } from '@tinymce/tinymce-angular/editor/Events';\n\nimport {\n    Component,\n    ElementRef,\n    HostListener,\n    inject,\n    Input,\n    OnChanges,\n    OnInit,\n    Renderer2,\n    SecurityContext,\n    ViewChild\n} from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\n\nimport {\n    CLIENT_ACTIONS,\n    DotCmsClient,\n    isInsideEditor,\n    NOTIFY_CLIENT,\n    postMessageToEditor\n} from '@dotcms/client';\n\nimport { TINYMCE_CONFIG, DOT_EDITABLE_TEXT_FORMAT, DOT_EDITABLE_TEXT_MODE } from './utils';\n\nimport { DotCMSContentlet } from '../../models';\n\n/**\n * Dot editable text component.\n * This component is responsible to render a text field that can be edited inline.\n *\n * @export\n * @class DotCMSEditableTextComponent\n * @implements {OnInit}\n * @implements {OnChanges}\n */\n@Component({\n    selector: 'dotcms-editable-text',\n    standalone: true,\n    templateUrl: './dotcms-editable-text.component.html',\n    styleUrl: './dotcms-editable-text.component.css',\n    imports: [EditorComponent],\n    providers: [\n        {\n            provide: TINYMCE_SCRIPT_SRC,\n            useFactory: () => {\n                return `${DotCmsClient.dotcmsUrl}/ext/tinymcev7/tinymce.min.js`;\n            }\n        }\n    ]\n})\nexport class DotCMSEditableTextComponent implements OnInit, OnChanges {\n    @ViewChild(EditorComponent) editorComponent!: EditorComponent;\n\n    /**\n     * Represents the mode of the editor which can be `plain`, `minimal`, or `full`\n     *\n     * @type {DOT_EDITABLE_TEXT_MODE}\n     * @memberof DotCMSEditableTextComponent\n     */\n    @Input() mode: DOT_EDITABLE_TEXT_MODE = 'plain';\n    /**\n     * Represents the format of the editor which can be `text` or `html`\n     *\n     * @type {DOT_EDITABLE_TEXT_FORMAT}\n     * @memberof DotCMSEditableTextComponent\n     */\n    @Input() format: DOT_EDITABLE_TEXT_FORMAT = 'text';\n    /**\n     * Represents the `contentlet` that can be inline edited\n     *\n     * @type {DotCMSContentlet}\n     * @memberof DotCMSEditableTextComponent\n     */\n    @Input() contentlet!: DotCMSContentlet;\n    /**\n     * Represents the field name of the `contentlet` that can be edited\n     *\n     * @memberof DotCMSEditableTextComponent\n     */\n    @Input() fieldName = '';\n\n    /**\n     * Represents the content of the `contentlet` that can be edited\n     *\n     * @protected\n     * @memberof DotCMSEditableTextComponent\n     */\n    protected content = '';\n    /**\n     * Represents the configuration of the editor\n     *\n     * @protected\n     * @type {EditorComponent['init']}\n     * @memberof DotCMSEditableTextComponent\n     */\n    protected init!: EditorComponent['init'];\n    /**\n     * Represents if the component is inside the editor\n     *\n     * @protected\n     * @type {boolean}\n     * @memberof DotCMSEditableTextComponent\n     */\n    protected isInsideEditor!: boolean;\n\n    readonly #sanitizer = inject<DomSanitizer>(DomSanitizer);\n    readonly #renderer = inject<Renderer2>(Renderer2);\n    readonly #elementRef = inject<ElementRef>(ElementRef);\n\n    /**\n     * The TinyMCE editor\n     *\n     * @readonly\n     * @memberof DotCMSEditableTextComponent\n     */\n    get editor() {\n        return this.editorComponent?.editor;\n    }\n\n    /**\n     * Returns the number of pages the contentlet is on\n     *\n     * @readonly\n     * @memberof DotCMSEditableTextComponent\n     */\n    get onNumberOfPages() {\n        return this.contentlet['onNumberOfPages'] || 1;\n    }\n\n    /**\n     * Handle copy contentlet inline editing success event\n     *\n     * @param {MessageEvent} { data }\n     * @return {*}\n     * @memberof DotCMSEditableTextComponent\n     */\n    @HostListener('window:message', ['$event'])\n    onMessage({ data }: MessageEvent) {\n        const { name, payload } = data;\n        if (name !== NOTIFY_CLIENT.UVE_COPY_CONTENTLET_INLINE_EDITING_SUCCESS) {\n            return;\n        }\n\n        const { oldInode, inode } = payload;\n        const currentInode = this.contentlet.inode;\n\n        if (currentInode === oldInode || currentInode === inode) {\n            this.editorComponent.editor.focus();\n\n            return;\n        }\n    }\n\n    ngOnInit() {\n        this.isInsideEditor = isInsideEditor();\n\n        if (!this.isInsideEditor) {\n            this.innerHTMLToElement();\n\n            return;\n        }\n\n        this.init = {\n            ...TINYMCE_CONFIG[this.mode],\n            base_url: `${DotCmsClient.dotcmsUrl}/ext/tinymcev7`\n        };\n    }\n\n    ngOnChanges() {\n        this.content = this.contentlet[this.fieldName] || '';\n        if (this.editor) {\n            this.editor.setContent(this.content, { format: this.format });\n        }\n    }\n\n    /**\n     * Handle mouse down event\n     *\n     * @param {EventObj<MouseEvent>} { event }\n     * @return {*}\n     * @memberof DotCMSEditableTextComponent\n     */\n    onMouseDown({ event }: EventObj<MouseEvent>) {\n        if (this.onNumberOfPages <= 1 || this.editorComponent.editor.hasFocus()) {\n            return;\n        }\n\n        const { inode, languageId: language } = this.contentlet;\n\n        event.stopPropagation();\n        event.preventDefault();\n\n        try {\n            postMessageToEditor({\n                action: CLIENT_ACTIONS.COPY_CONTENTLET_INLINE_EDITING,\n                payload: {\n                    dataset: {\n                        inode,\n                        language,\n                        fieldName: this.fieldName\n                    }\n                }\n            });\n        } catch (error) {\n            console.error('Failed to post message to editor:', error);\n        }\n    }\n    /**\n     * Handle focus out event\n     *\n     * @return {*}\n     * @memberof DotCMSEditableTextComponent\n     */\n    onFocusOut() {\n        const content = this.editor.getContent({ format: this.format });\n\n        if (!this.editor.isDirty() || !this.didContentChange(content)) {\n            return;\n        }\n\n        const { inode, languageId: langId } = this.contentlet;\n\n        try {\n            postMessageToEditor({\n                action: CLIENT_ACTIONS.UPDATE_CONTENTLET_INLINE_EDITING,\n                payload: {\n                    content,\n                    dataset: {\n                        inode,\n                        langId,\n                        fieldName: this.fieldName\n                    }\n                }\n            });\n        } catch (error) {\n            console.error('Failed to post message to editor:', error);\n        }\n    }\n\n    /**\n     * inner HTML to element\n     *\n     * @private\n     * @param {string} editedContent\n     * @return {*}\n     * @memberof DotCMSEditableTextComponent\n     */\n    private innerHTMLToElement() {\n        const element = this.#elementRef.nativeElement;\n        const safeHtml = this.#sanitizer.bypassSecurityTrustHtml(this.content);\n        const content = this.#sanitizer.sanitize(SecurityContext.HTML, safeHtml) || '';\n\n        this.#renderer.setProperty(element, 'innerHTML', content);\n    }\n\n    /**\n     * Check if the content has changed\n     *\n     * @private\n     * @param {string} editedContent\n     * @return {*}\n     * @memberof DotCMSEditableTextComponent\n     */\n    private didContentChange(editedContent: string) {\n        return this.content !== editedContent;\n    }\n}\n","@if (isInsideEditor) {\n    <editor\n        #tinyEditor\n        [init]=\"init\"\n        [initialValue]=\"content\"\n        (onMouseDown)=\"onMouseDown($event)\"\n        (onFocusOut)=\"onFocusOut()\" />\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;;AAKA;;;;;;;;;;AAUG;MAKU,uBAAuB,CAAA;AAChC,IAAA,KAAK,GAAa,QAAQ,CAAC,IAAI,CAAC;IAChC,QAAQ,GAAG,KAAK,CAAC;IAEjB,IAAa,cAAc,CAAC,KAAe,EAAA;AACvC,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC9B;AAED,IAAA,iBAAiB,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAC7C,IAAA,YAAY,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;IAE3B,mBAAmB,GAAA;AACvB,QAAA,MAAM,KAAK,GAAyB,WAAW,EAAE,CAAC;QAElD,MAAM,UAAU,GAAG,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC;AAE9C,QAAA,IAAI,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC9B,IAAI,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;AAC7D,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACxB;AAAM,aAAA,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,EAAE;AACrC,YAAA,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;AAC/B,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;SACzB;KACJ;8GAxBQ,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAAvB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAJnC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,kBAAkB;AAC5B,oBAAA,UAAU,EAAE,IAAI;AACnB,iBAAA,CAAA;8BAKgB,cAAc,EAAA,CAAA;sBAA1B,KAAK;;;ACbV;;;;;AAKG;AACH,SAAS,WAAW,CAAC,IAAa,EAAA;AAC9B,IAAA,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;AAChD,QAAA,OAAO,KAAK,CAAC;KAChB;AAED,IAAA,IAAI;AACA,QAAA,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC;AAEd,QAAA,OAAO,IAAI,CAAC;KACf;AAAC,IAAA,MAAM;AACJ,QAAA,OAAO,KAAK,CAAC;KAChB;AACL,CAAC;AAED;;;;;;;;;;;;;;;;;AAiBG;AACG,SAAU,wBAAwB,CAAC,IAAa,EAAA;;IAElD,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE;AAC5B,QAAA,MAAM,IAAI,KAAK,CACX,CAAA,6CAAA,EAAgD,IAAI,CAAO,KAAA,CAAA;AACvD,YAAA,CAAA,sGAAA,CAAwG,CAC/G,CAAC;KACL;IAED,OAAO;AACH,QAAA;AACI,YAAA,OAAO,EAAE,YAAY;YACrB,QAAQ,EAAE,CAAC,MAAyB,KAAK,eAAe,CAAC,MAAM,EAAE,IAAI,CAAC;AACzE,SAAA;KACJ,CAAC;AACN,CAAC;AAED;;;;;;;AAOG;AACH,SAAS,eAAe,CAAC,MAAyB,EAAE,IAAa,EAAA;IAC7D,MAAM,EAAE,YAAY,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC;IAC5C,MAAM,MAAM,GAAG,YAAuC,CAAC;AAEvD,IAAA,IAAI,MAAM,EAAE,YAAY,EAAE;AACtB,QAAA,OAAO,GAAG,CAAC;KACd;;AAGD,IAAA,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC,MAAM,GAAG,EAAE,CAAC;AACpD,IAAA,MAAM,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,GAAG,GAAG,CAAO,IAAA,EAAA,GAAG,EAAE,CAAC;AAC3D,IAAA,MAAM,UAAU,GAAG,MAAM,EAAE,UAAU,IAAI,GAAG,CAAC;IAE7C,IAAI,KAAK,EAAE;QACP,OAAO,CAAA,EAAG,UAAU,CAAG,EAAA,QAAQ,IAAI,KAAK,CAAA,cAAA,EAAiB,UAAU,CAAA,CAAE,CAAC;KACzE;AAED,IAAA,OAAO,GAAG,UAAU,CAAA,EAAG,QAAQ,CAAgB,aAAA,EAAA,UAAU,EAAE,CAAC;AAChE;;ACtFA,MAAM,sBAAsB,GAA4B;AACpD,IAAA,OAAO,EAAE,KAAK;AACd,IAAA,MAAM,EAAE,IAAI;AACZ,IAAA,YAAY,EAAE;AACV,QAAA,GAAG,EAAE,wDAAwD;AAChE,KAAA;AACD,IAAA,sBAAsB,EAAE,OAAO;AAC/B,IAAA,sBAAsB,EAAE,OAAO;IAC/B,MAAM,EAAE,MAAM;AACd,IAAA,WAAW,EAAE,KAAK;CACrB,CAAC;AAEK,MAAM,cAAc,GAEvB;AACA,IAAA,OAAO,EAAE;AACL,QAAA,GAAG,sBAAsB;AACzB,QAAA,OAAO,EAAE,eAAe;AACxB,QAAA,OAAO,EAAE,8BAA8B;AACvC,QAAA,cAAc,EAAE,+BAA+B;AAClD,KAAA;AACD,IAAA,IAAI,EAAE;AACF,QAAA,GAAG,sBAAsB;AACzB,QAAA,OAAO,EAAE,6BAA6B;AACtC,QAAA,aAAa,EAAE;AACX,YAAA,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,EAAE;AACnC,YAAA,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE;AACnC,YAAA,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE;AACnC,YAAA,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE;AACnC,YAAA,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE;AACnC,YAAA,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE;AACnC,YAAA,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE;AACnC,YAAA,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE;AAC/B,YAAA,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE;AACpC,SAAA;AACD,QAAA,OAAO,EAAE;YACL,oLAAoL;AACvL,SAAA;AACJ,KAAA;AACD,IAAA,KAAK,EAAE;AACH,QAAA,GAAG,sBAAsB;AACzB,QAAA,OAAO,EAAE,EAAE;AACX,QAAA,OAAO,EAAE,EAAE;AACd,KAAA;CACJ;;ACrBD;;;;;;;;AAQG;MAgBU,2BAA2B,CAAA;AAfxC,IAAA,WAAA,GAAA;AAkBI;;;;;AAKG;QACM,IAAI,CAAA,IAAA,GAA2B,OAAO,CAAC;AAChD;;;;;AAKG;QACM,IAAM,CAAA,MAAA,GAA6B,MAAM,CAAC;AAQnD;;;;AAIG;QACM,IAAS,CAAA,SAAA,GAAG,EAAE,CAAC;AAExB;;;;;AAKG;QACO,IAAO,CAAA,OAAA,GAAG,EAAE,CAAC;AAkBd,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAe,YAAY,CAAC,CAAC;AAChD,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAY,SAAS,CAAC,CAAC;AACzC,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAa,UAAU,CAAC,CAAC;AA+JzD,KAAA;AAjKY,IAAA,UAAU,CAAsC;AAChD,IAAA,SAAS,CAAgC;AACzC,IAAA,WAAW,CAAkC;AAEtD;;;;;AAKG;AACH,IAAA,IAAI,MAAM,GAAA;AACN,QAAA,OAAO,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;KACvC;AAED;;;;;AAKG;AACH,IAAA,IAAI,eAAe,GAAA;QACf,OAAO,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;KAClD;AAED;;;;;;AAMG;IAEH,SAAS,CAAC,EAAE,IAAI,EAAgB,EAAA;AAC5B,QAAA,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;AAC/B,QAAA,IAAI,IAAI,KAAK,aAAa,CAAC,0CAA0C,EAAE;YACnE,OAAO;SACV;AAED,QAAA,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC;AACpC,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;QAE3C,IAAI,YAAY,KAAK,QAAQ,IAAI,YAAY,KAAK,KAAK,EAAE;AACrD,YAAA,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;YAEpC,OAAO;SACV;KACJ;IAED,QAAQ,GAAA;AACJ,QAAA,IAAI,CAAC,cAAc,GAAG,cAAc,EAAE,CAAC;AAEvC,QAAA,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAE1B,OAAO;SACV;QAED,IAAI,CAAC,IAAI,GAAG;AACR,YAAA,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;AAC5B,YAAA,QAAQ,EAAE,CAAA,EAAG,YAAY,CAAC,SAAS,CAAgB,cAAA,CAAA;SACtD,CAAC;KACL;IAED,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;AACrD,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AACb,YAAA,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;SACjE;KACJ;AAED;;;;;;AAMG;IACH,WAAW,CAAC,EAAE,KAAK,EAAwB,EAAA;AACvC,QAAA,IAAI,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE;YACrE,OAAO;SACV;QAED,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC;QAExD,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,KAAK,CAAC,cAAc,EAAE,CAAC;AAEvB,QAAA,IAAI;AACA,YAAA,mBAAmB,CAAC;gBAChB,MAAM,EAAE,cAAc,CAAC,8BAA8B;AACrD,gBAAA,OAAO,EAAE;AACL,oBAAA,OAAO,EAAE;wBACL,KAAK;wBACL,QAAQ;wBACR,SAAS,EAAE,IAAI,CAAC,SAAS;AAC5B,qBAAA;AACJ,iBAAA;AACJ,aAAA,CAAC,CAAC;SACN;QAAC,OAAO,KAAK,EAAE;AACZ,YAAA,OAAO,CAAC,KAAK,CAAC,mCAAmC,EAAE,KAAK,CAAC,CAAC;SAC7D;KACJ;AACD;;;;;AAKG;IACH,UAAU,GAAA;AACN,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;AAEhE,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE;YAC3D,OAAO;SACV;QAED,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC;AAEtD,QAAA,IAAI;AACA,YAAA,mBAAmB,CAAC;gBAChB,MAAM,EAAE,cAAc,CAAC,gCAAgC;AACvD,gBAAA,OAAO,EAAE;oBACL,OAAO;AACP,oBAAA,OAAO,EAAE;wBACL,KAAK;wBACL,MAAM;wBACN,SAAS,EAAE,IAAI,CAAC,SAAS;AAC5B,qBAAA;AACJ,iBAAA;AACJ,aAAA,CAAC,CAAC;SACN;QAAC,OAAO,KAAK,EAAE;AACZ,YAAA,OAAO,CAAC,KAAK,CAAC,mCAAmC,EAAE,KAAK,CAAC,CAAC;SAC7D;KACJ;AAED;;;;;;;AAOG;IACK,kBAAkB,GAAA;AACtB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC;AAC/C,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,uBAAuB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AACvE,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,eAAe,CAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC;QAE/E,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,OAAO,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC;KAC7D;AAED;;;;;;;AAOG;AACK,IAAA,gBAAgB,CAAC,aAAqB,EAAA;AAC1C,QAAA,OAAO,IAAI,CAAC,OAAO,KAAK,aAAa,CAAC;KACzC;8GAvNQ,2BAA2B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAA3B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,2BAA2B,EATzB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,gBAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,SAAA,EAAA;AACP,YAAA;AACI,gBAAA,OAAO,EAAE,kBAAkB;gBAC3B,UAAU,EAAE,MAAK;AACb,oBAAA,OAAO,CAAG,EAAA,YAAY,CAAC,SAAS,+BAA+B,CAAC;iBACnE;AACJ,aAAA;AACJ,SAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAGU,eAAe,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECtD9B,qNAQA,EAAA,MAAA,EAAA,CAAA,6GAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDmCc,eAAe,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,MAAA,EAAA,IAAA,EAAA,cAAA,EAAA,cAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,SAAA,EAAA,aAAA,EAAA,eAAA,EAAA,cAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAUhB,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBAfvC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,sBAAsB,cACpB,IAAI,EAAA,OAAA,EAGP,CAAC,eAAe,CAAC,EACf,SAAA,EAAA;AACP,wBAAA;AACI,4BAAA,OAAO,EAAE,kBAAkB;4BAC3B,UAAU,EAAE,MAAK;AACb,gCAAA,OAAO,CAAG,EAAA,YAAY,CAAC,SAAS,+BAA+B,CAAC;6BACnE;AACJ,yBAAA;AACJ,qBAAA,EAAA,QAAA,EAAA,qNAAA,EAAA,MAAA,EAAA,CAAA,6GAAA,CAAA,EAAA,CAAA;8BAG2B,eAAe,EAAA,CAAA;sBAA1C,SAAS;uBAAC,eAAe,CAAA;gBAQjB,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAOG,MAAM,EAAA,CAAA;sBAAd,KAAK;gBAOG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBAMG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBA0DN,SAAS,EAAA,CAAA;sBADR,YAAY;uBAAC,gBAAgB,EAAE,CAAC,QAAQ,CAAC,CAAA;;;AE3I9C;;AAEG;;;;"}

package/fesm2022/dotcms-angular.mjs

@@ -3,9 +3,10 @@ import * as i0 from '@angular/core';
 import { inject, Renderer2, ElementRef, SecurityContext, Component, ViewChild, Input, HostListener, Injectable, ChangeDetectionStrategy, HostBinding, signal, computed, DestroyRef } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { NOTIFY_CLIENT, isInsideEditor, DotCmsClient, postMessageToEditor, CLIENT_ACTIONS, initEditor, updateNavigation } from '@dotcms/client';
-import { AsyncPipe, NgComponentOutlet } from '@angular/common';
+import { AsyncPipe, NgComponentOutlet, IMAGE_LOADER } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivatedRoute } from '@angular/router';
+import { createUVESubscription } from '@dotcms/uve';
 import { BehaviorSubject } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -53,6 +54,10 @@ const TINYMCE_CONFIG = {
 };
 
 /**
+ * @deprecated This component is deprecated and will be removed in future versions.
+ * Please use the new Rich Text Editor component from the main SDK.
+ * For more information, refer to the migration guide in the documentation.
+ *
  * Dot editable text component.
  * This component is responsible to render a text field that can be edited inline.
  *
@@ -272,6 +277,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
             }] } });
 
 /**
+ * @deprecated This service is deprecated and will be removed in future versions.
+ * Please use the new Page Context service from the main SDK.
+ * For more information, refer to the migration guide in the documentation.
+ *
  * @author dotCMS
  * @description This service is responsible for managing the page context.
  * @export
@@ -760,6 +769,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
             }] } });
 
 /**
+ * @deprecated This component is deprecated and will be removed in future versions.
+ * Please use the new Page Layout component from the main SDK.
+ * For more information, refer to the migration guide in the documentation.
+ *
  * `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.
  *
@@ -806,7 +819,7 @@ class DotcmsLayoutComponent {
             initEditor({ pathname });
             updateNavigation(pathname || '/');
         });
-        this.client.editor.on('changes', (data) => {
+        this.uveSubscription = createUVESubscription('changes', (data) => {
             if (this.onReload) {
                 this.onReload();
                 return;
@@ -819,7 +832,7 @@ class DotcmsLayoutComponent {
         if (!isInsideEditor()) {
             return;
         }
-        this.client.editor.off('changes');
+        this.uveSubscription?.unsubscribe();
     }
     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: `
@@ -855,9 +868,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+/**
+ * Validates if a given path is a valid URL string
+ *
+ * @param path - The path to validate
+ * @returns boolean indicating if the path is valid
+ */
+function isValidPath(path) {
+    if (typeof path !== 'string' || path.trim() === '') {
+        return false;
+    }
+    try {
+        new URL(path);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Provides a DotCMS image loader configuration for the Angular Image directive
+ *
+ * @param path - The base URL path to the DotCMS instance, or empty to use current site
+ * @returns An array of providers for the IMAGE_LOADER token
+ * @throws Error if the provided path is invalid
+ * @example
+ * ```typescript
+ * // In your app.config.ts
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideDotCMSImageLoader('https://demo.dotcms.com')
+ *     // Or use current site:
+ *     // provideDotCMSImageLoader()
+ *   ]
+ * };
+ * ```
+ */
+function provideDotCMSImageLoader(path) {
+    // If path is provided, validate it
+    if (path && !isValidPath(path)) {
+        throw new Error(`Image loader has detected an invalid path (\`${path}\`). ` +
+            `To fix this, supply either the full URL to the dotCMS site, or leave it empty to use the current site.`);
+    }
+    return [
+        {
+            provide: IMAGE_LOADER,
+            useValue: (config) => createDotCMSUrl(config, path)
+        }
+    ];
+}
+/**
+ * Creates a DotCMS-compatible URL for image loading
+ *
+ * @param config - The image loader configuration
+ * @param path - The base URL path to the DotCMS instance
+ * @returns A fully qualified URL for the image
+ * @internal
+ */
+function createDotCMSUrl(config, path) {
+    // console.log('createDotCMSUrl', config, path);
+    const { loaderParams, src, width } = config;
+    const params = loaderParams;
+    if (params?.isOutsideSRC) {
+        return src;
+    }
+    // Use empty string as fallback to support using current site
+    const dotcmsHost = path ? new URL(path).origin : '';
+    const imageSRC = src.includes('/dA/') ? src : `/dA/${src}`;
+    const languageId = params?.languageId ?? '1';
+    if (width) {
+        return `${dotcmsHost}${imageSRC}/${width}w?language_id=${languageId}`;
+    }
+    return `${dotcmsHost}${imageSRC}?language_id=${languageId}`;
+}
+
+/**
+ * @deprecated This API is deprecated and will be removed in future versions.
+ * Please migrate to the new components and services in the main SDK.
+ * For more information, refer to the migration guide in the documentation.
+ */
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DotEditableTextComponent, DotcmsLayoutComponent, PageContextService };
+export { DotEditableTextComponent, DotcmsLayoutComponent, PageContextService, provideDotCMSImageLoader };
 //# sourceMappingURL=dotcms-angular.mjs.map