npm - @sd-angular/core - Versions diffs - 19.0.0-beta.3 → 19.0.0-beta.4 - Mend

@sd-angular/core 19.0.0-beta.3 → 19.0.0-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/components/document-builder/src/document-builder.config.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+/**
+ * Cấu hình màu cho Document Builder
+ * Bảng màu tập trung và cấu hình cho việc lựa chọn màu nhất quán
+ */
+import { ColorPickerConfig, FontColorConfig, FontSizeConfig, HeadingConfig } from 'ckeditor5';
+/**
+ * Trả về bảng màu chung được sử dụng trong tất cả tính năng của document builder
+ * @returns Mảng các tùy chọn màu được định sẵn với giá trị hex và label
+ */
+export declare function getPresetColors(): FontColorConfig['colors'];
+/**
+ * Trả về cấu hình bộ chọn màu với định dạng hex
+ * @returns Đối tượng cấu hình bộ chọn màu
+ */
+export declare function getColorPickerConfig(): ColorPickerConfig;
+/**
+ * Trả về cấu hình kích thước font cho document builder
+ * @returns Mảng các tùy chọn kích thước font được định sẵn
+ */
+export declare function getFontSizeOptions(): FontSizeConfig['options'];
+export declare function getHeadingOptions(): HeadingConfig['options'];

package/components/document-builder/src/document-builder.utils.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+/**
+ * Document Builder Utilities
+ * Các hàm tiện ích cho document builder
+ */
+/**
+ * Chuẩn hóa nội dung bằng cách chuyển đổi tất cả màu HSL và RGB sang hex
+ * @param content - Nội dung HTML cần chuẩn hóa
+ * @returns Nội dung đã được chuẩn hóa với màu hex
+ */
+export declare function normalize(content: string): string;

package/fesm2022/sd-angular-core-components-document-builder.mjs CHANGED Viewed

@@ -4,9 +4,8 @@ import { CommonModule } from '@angular/common';
 import * as i1 from '@ckeditor/ckeditor5-angular';
 import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
 import { Plugin, ButtonView, ClassicEditor, Essentials, Paragraph, Bold, Italic, Underline, FontSize, FontColor, FontBackgroundColor, Alignment, Widget, toWidget, GeneralHtmlSupport, FontFamily, Heading, List, Table, TableToolbar, TableProperties, TableCellProperties, TableColumnResize, PasteFromOffice, PageBreak, Undo, Subscript, Superscript, Image, ImageUpload, ImageToolbar, ImageCaption, ImageResize, ImageStyle } from 'ckeditor5';
-import { SdResolveMaybeAsync } from '@sd-angular/core/utilities';
-import { SdUtilities } from '@sd-angular/core/utilities/extensions';
 import { Subscription, Subject, throttleTime } from 'rxjs';
+import { SdResolveMaybeAsync, hslToHex, rgbToHex, SdUtilities } from '@sd-angular/core/utilities';
 class PageNumberPlugin extends Plugin {
     init() {
@@ -208,10 +207,15 @@ class CommentPlugin extends Plugin {
         const editor = this.editor;
         // --- 1. CONVERSION: MODEL MARKER -> VIEW CSS ---
         // Biến Marker thành Highlight màu vàng
-        editor.conversion.for('editingDowncast').markerToHighlight({
-            model: 'comment', // Khớp với prefix của markerId (ví dụ: comment:12345)
-            view: {
-                classes: 'ck-comment-marker', // Class CSS sẽ được gắn vào thẻ <span> bao quanh text
+        editor.conversion.for('downcast').markerToHighlight({
+            model: 'comment',
+            view: data => {
+                return {
+                    classes: 'ck-comment-marker',
+                    attributes: {
+                        'data-comment-id': data.markerName,
+                    },
+                };
             },
         });
         // --- 3. ĐĂNG KÝ UI COMPONENT: 'addCommentBtn' ---
@@ -263,6 +267,29 @@ class CommentPlugin extends Plugin {
             });
             return view;
         });
+        // 8. Xử lý sự kiện Copy (Clipboard Output)
+        this.listenTo(editor.editing.view.document, 'clipboardOutput', (evt, data) => {
+            const content = data.content;
+            editor.editing.view.change(writer => {
+                // Tạo range bao quanh toàn bộ nội dung clipboard
+                const range = writer.createRangeIn(content);
+                // Mảng chứa các item cần xử lý
+                const itemsToClean = [];
+                // 1. Duyệt qua để tìm các thẻ có class ck-comment-marker
+                for (const item of range.getItems()) {
+                    if (item.is('element') && item.hasClass('ck-comment-marker')) {
+                        itemsToClean.push(item);
+                    }
+                }
+                // 2. Thực hiện xóa Class và Attribute
+                for (const item of itemsToClean) {
+                    // Xóa class 'ck-comment-marker'
+                    writer.removeClass('ck-comment-marker', item);
+                    // Xóa thuộc tính 'data-comment-id'
+                    writer.removeAttribute('data-comment-id', item);
+                }
+            });
+        });
     }
 }
@@ -483,6 +510,35 @@ class VariablePlugin extends Plugin {
                 }
             }
         }, { priority: 'highest' });
+        // 8. Xử lý sự kiện Copy (Clipboard Output)
+        // Khi copy, thay thế  variable bằng text
+        this.listenTo(editor.editing.view.document, 'clipboardOutput', (evt, data) => {
+            const content = data.content;
+            editor.editing.view.change(writer => {
+                // Tạo range bao quanh toàn bộ nội dung clipboard
+                const range = writer.createRangeIn(content);
+                const itemsToReplace = [];
+                // Duyệt qua tất cả các phần tử trong clipboard để tìm variable
+                for (const item of range.getItems()) {
+                    // Kiểm tra đúng là thẻ span và có class variable-widget
+                    if (item.is('element', 'span') && item.hasClass('variable-widget')) {
+                        itemsToReplace.push(item);
+                    }
+                }
+                // Thay thế  variable bằng text
+                for (const item of itemsToReplace) {
+                    const displayText = item.getAttribute('data-display');
+                    if (displayText) {
+                        // Tạo một node text thuần túy
+                        const textNode = writer.createText(`{{${displayText}}}`);
+                        // Chèn text node vào ngay trước widget cũ
+                        writer.insert(writer.createPositionBefore(item), textNode);
+                        // Xóa widget cũ đi
+                        writer.remove(item);
+                    }
+                }
+            });
+        });
     }
     #isSdDocumentBuilderVariableResult = (obj) => {
         return (obj !== null &&
@@ -597,8 +653,203 @@ class Base64UploadAdapter {
     }
 }
+/**
+ * Cấu hình màu cho Document Builder
+ * Bảng màu tập trung và cấu hình cho việc lựa chọn màu nhất quán
+ */
+/**
+ * Trả về bảng màu chung được sử dụng trong tất cả tính năng của document builder
+ * @returns Mảng các tùy chọn màu được định sẵn với giá trị hex và label
+ */
+function getPresetColors() {
+    return [
+        { color: '#000000', label: 'Black' },
+        { color: '#4D4D4D', label: 'Dim grey' },
+        { color: '#999999', label: 'Grey' },
+        { color: '#E6E6E6', label: 'Light grey' },
+        { color: '#FFFFFF', label: 'White' },
+        { color: '#E64D4D', label: 'Red' },
+        { color: '#E6994D', label: 'Orange' },
+        { color: '#E6E64D', label: 'Yellow' },
+        { color: '#99E64D', label: 'Light green' },
+        { color: '#4DE64D', label: 'Green' },
+        { color: '#4DE699', label: 'Aquamarine' },
+        { color: '#4DE6E6', label: 'Turquoise' },
+        { color: '#4D99E6', label: 'Light blue' },
+        { color: '#4D4DE6', label: 'Blue' },
+        { color: '#994DE6', label: 'Purple' },
+    ];
+}
+/**
+ * Trả về cấu hình bộ chọn màu với định dạng hex
+ * @returns Đối tượng cấu hình bộ chọn màu
+ */
+function getColorPickerConfig() {
+    return {
+        format: 'hex',
+    };
+}
+/**
+ * Trả về cấu hình kích thước font cho document builder
+ * @returns Mảng các tùy chọn kích thước font được định sẵn
+ */
+function getFontSizeOptions() {
+    return [
+        {
+            title: '9',
+            model: '9pt',
+            view: {
+                name: 'span',
+                styles: { 'font-size': '9pt' },
+                priority: 7,
+            },
+        },
+        {
+            title: '10',
+            model: '10pt',
+            view: {
+                name: 'span',
+                styles: { 'font-size': '10pt' },
+                priority: 7,
+            },
+        },
+        {
+            title: '11',
+            model: '11pt',
+            view: {
+                name: 'span',
+                styles: { 'font-size': '11pt' },
+                priority: 7,
+            },
+        },
+        {
+            title: '12',
+            model: '12pt',
+            view: {
+                name: 'span',
+                styles: { 'font-size': '12pt' },
+                priority: 7,
+            },
+        },
+        {
+            title: '13',
+            model: '13pt',
+            view: {
+                name: 'span',
+                styles: { 'font-size': '13pt' },
+                priority: 7,
+            },
+        },
+        {
+            title: '14',
+            model: '14pt',
+            view: {
+                name: 'span',
+                styles: { 'font-size': '14pt' },
+                priority: 7,
+            },
+        },
+        {
+            title: '16',
+            model: '16pt',
+            view: {
+                name: 'span',
+                styles: { 'font-size': '16pt' },
+                priority: 7,
+            },
+        },
+        {
+            title: '18',
+            model: '18pt',
+            view: {
+                name: 'span',
+                styles: { 'font-size': '18pt' },
+                priority: 7,
+            },
+        },
+        {
+            title: '20',
+            model: '20pt',
+            view: {
+                name: 'span',
+                styles: { 'font-size': '20pt' },
+                priority: 7,
+            },
+        },
+        {
+            title: '24',
+            model: '24pt',
+            view: {
+                name: 'span',
+                styles: { 'font-size': '24pt' },
+                priority: 7,
+            },
+        },
+    ];
+}
+function getHeadingOptions() {
+    return [
+        { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+        { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
+        { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
+        { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
+    ];
+}
+/**
+ * Document Builder Utilities
+ * Các hàm tiện ích cho document builder
+ */
+/**
+ * Chuẩn hóa nội dung bằng cách chuyển đổi tất cả màu HSL và RGB sang hex
+ * @param content - Nội dung HTML cần chuẩn hóa
+ * @returns Nội dung đã được chuẩn hóa với màu hex
+ */
+function normalize(content) {
+    let normalized = content;
+    // Chuyển đổi HSL sang hex
+    const hslRegex = /hsl\(\s*(\d+)\s*,\s*(\d+)%?\s*,\s*(\d+)%?\s*\)/gi;
+    normalized = normalized.replace(hslRegex, (match, h, s, l) => {
+        try {
+            const hue = parseInt(h, 10);
+            const saturation = parseInt(s, 10);
+            const lightness = parseInt(l, 10);
+            // Kiểm tra giá trị hợp lệ
+            if (hue >= 0 && hue <= 360 && saturation >= 0 && saturation <= 100 && lightness >= 0 && lightness <= 100) {
+                return hslToHex(hue, saturation, lightness);
+            }
+        }
+        catch (error) {
+            console.warn('Failed to convert HSL to hex:', error, match);
+        }
+        return match; // Giữ nguyên nếu không thể chuyển đổi
+    });
+    // Chuyển đổi RGB sang hex
+    const rgbRegex = /rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/gi;
+    normalized = normalized.replace(rgbRegex, (match, r, g, b) => {
+        try {
+            const red = parseInt(r, 10);
+            const green = parseInt(g, 10);
+            const blue = parseInt(b, 10);
+            if (red >= 0 && red <= 255 && green >= 0 && green <= 255 && blue >= 0 && blue <= 255) {
+                return rgbToHex(red, green, blue);
+            }
+        }
+        catch (error) {
+            console.warn('Failed to convert RGB to hex:', error, match);
+        }
+        return match;
+    });
+    return normalized;
+}
 class SdDocumentBuilder {
     #id = '1212';
+    // Shared color palette and configuration
+    #sharedColors = getPresetColors();
+    #colorPickerConfig = getColorPickerConfig();
+    #fontSizeOptions = getFontSizeOptions();
+    #headingOptions = getHeadingOptions();
     option;
     disabled = false;
     set _disabled(val) {
@@ -607,6 +858,7 @@ class SdDocumentBuilder {
     }
     Editor = ClassicEditor;
     #editor;
+    #idTimeOutScrollHeading = null;
     // Config
     config = {
         getOption: () => this.option,
@@ -685,109 +937,24 @@ class SdDocumentBuilder {
             toolbar: ['toggleImageCaption', '|', 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side'],
         },
         fontSize: {
-            options: [
-                // Định nghĩa từng size một cách tường minh
-                {
-                    title: '9',
-                    model: '9pt',
-                    view: {
-                        name: 'span',
-                        styles: { 'font-size': '9pt' },
-                        priority: 7,
-                    },
-                },
-                {
-                    title: '10',
-                    model: '10pt',
-                    view: {
-                        name: 'span',
-                        styles: { 'font-size': '10pt' },
-                        priority: 7,
-                    },
-                },
-                {
-                    title: '11',
-                    model: '11pt',
-                    view: {
-                        name: 'span',
-                        styles: { 'font-size': '11pt' },
-                        priority: 7,
-                    },
-                },
-                {
-                    title: '12',
-                    model: '12pt',
-                    view: {
-                        name: 'span',
-                        styles: { 'font-size': '12pt' },
-                        priority: 7,
-                    },
-                },
-                {
-                    title: '13',
-                    model: '13pt',
-                    view: {
-                        name: 'span',
-                        styles: { 'font-size': '13pt' },
-                        priority: 7,
-                    },
-                },
-                {
-                    title: '14',
-                    model: '14pt',
-                    view: {
-                        name: 'span',
-                        styles: { 'font-size': '14pt' },
-                        priority: 7,
-                    },
-                },
-                {
-                    title: '16',
-                    model: '16pt',
-                    view: {
-                        name: 'span',
-                        styles: { 'font-size': '16pt' },
-                        priority: 7,
-                    },
-                },
-                {
-                    title: '18',
-                    model: '18pt',
-                    view: {
-                        name: 'span',
-                        styles: { 'font-size': '18pt' },
-                        priority: 7,
-                    },
-                },
-                {
-                    title: '20',
-                    model: '20pt',
-                    view: {
-                        name: 'span',
-                        styles: { 'font-size': '20pt' },
-                        priority: 7,
-                    },
-                },
-                {
-                    title: '24',
-                    model: '24pt',
-                    view: {
-                        name: 'span',
-                        styles: { 'font-size': '24pt' },
-                        priority: 7,
-                    },
-                },
-            ],
+            options: this.#fontSizeOptions,
             supportAllValues: false, // Khuyên dùng false để ép user chọn đúng size chuẩn
         },
+        heading: {
+            options: this.#headingOptions,
+        },
         // 4. Cấu hình bảng màu (Tùy chọn)
         fontColor: {
-            columns: 5,
+            // columns: 5,
             documentColors: 10,
+            colorPicker: this.#colorPickerConfig,
+            colors: this.#sharedColors,
         },
         fontBackgroundColor: {
-            columns: 5,
+            // columns: 5,
             documentColors: 10,
+            colorPicker: this.#colorPickerConfig,
+            colors: this.#sharedColors,
         },
         table: {
             contentToolbar: [
@@ -798,6 +965,14 @@ class SdDocumentBuilder {
                 'tableProperties', // <--- Nút chỉnh thuộc tính bảng (Viền, Màu, Width)
                 'tableCellProperties',
             ],
+            tableProperties: {
+                borderColors: this.#sharedColors,
+                colorPicker: this.#colorPickerConfig,
+            },
+            tableCellProperties: {
+                borderColors: this.#sharedColors,
+                colorPicker: this.#colorPickerConfig,
+            },
         },
         // Quan trọng: Cho phép paste style từ Word nhưng bỏ qua margin/padding
         htmlSupport: {
@@ -817,12 +992,11 @@ class SdDocumentBuilder {
     contentChange = new EventEmitter(); // Emit HTML content
     #subscription = new Subscription();
     #contentChangeSubject = new Subject();
-    #editorChangeRxjs = new Subject();
     ngOnInit() {
         // https://onemount.atlassian.net/browse/SM-1862
         // Debounce trong rxjs không hỗ trợ leading -->
         this.#subscription.add(this.#contentChangeSubject.pipe(throttleTime(500, undefined, { leading: true, trailing: true })).subscribe(content => {
-            this.contentChange.emit(content);
+            this.contentChange.emit(normalize(content));
         }));
     }
     ngOnDestroy() {
@@ -830,6 +1004,12 @@ class SdDocumentBuilder {
     }
     onReady(editor) {
         this.#editor = editor;
+        editor.conversion.for('editingDowncast').markerToHighlight({
+            model: 'highlightMarker',
+            view: {
+                classes: 'ck-heading-highlight',
+            },
+        });
         // Setup orientation plugin callback
         try {
             const orientationPlugin = editor.plugins.get('PageOrientationPlugin');
@@ -863,10 +1043,30 @@ class SdDocumentBuilder {
         if (this.disabled) {
             // Bật chế độ chỉ đọc với ID khóa
             this.#editor.enableReadOnlyMode(this.#id);
+            // Disable page orientation button
+            try {
+                const orientationPlugin = this.#editor.plugins.get('PageOrientationPlugin');
+                if (orientationPlugin && orientationPlugin.buttonView) {
+                    orientationPlugin.buttonView.isEnabled = false;
+                }
+            }
+            catch (error) {
+                console.warn('Failed to disable orientation button:', error);
+            }
         }
         else {
             // Tắt chế độ chỉ đọc với ID khóa tương ứng
             this.#editor.disableReadOnlyMode(this.#id);
+            // Enable page orientation button
+            try {
+                const orientationPlugin = this.#editor.plugins.get('PageOrientationPlugin');
+                if (orientationPlugin && orientationPlugin.buttonView) {
+                    orientationPlugin.buttonView.isEnabled = true;
+                }
+            }
+            catch (error) {
+                console.warn('Failed to enable orientation button:', error);
+            }
         }
     }
     scrollToComment = (markerId) => {
@@ -1041,31 +1241,43 @@ class SdDocumentBuilder {
         scrollToHeading: (id) => {
             if (!this.#editor)
                 return;
-            // 1. Lấy Model Element từ kho lưu trữ
             const modelElement = this.#headingElementsMap.get(id);
             if (modelElement) {
-                const editor = this.#editor;
-                const view = editor.editing.view;
-                // 2. Chuyển đổi Model Element -> View Element
-                // mapper.toViewElement sẽ trả về thẻ HTML ảo (View Element) tương ứng (ví dụ thẻ <h2>)
-                const viewElement = editor.editing.mapper.toViewElement(modelElement);
+                this.#editor.model.change(writer => {
+                    // Xóa marker cũ
+                    if (this.#idTimeOutScrollHeading) {
+                        clearTimeout(this.#idTimeOutScrollHeading);
+                    }
+                    const currentMarker = this.#editor.model.markers.get('highlightMarker');
+                    if (currentMarker) {
+                        writer.removeMarker(currentMarker);
+                    }
+                    // Tạo Range bao trùm highlight
+                    const range = writer.createRangeOn(modelElement);
+                    // Thêm Marker mới
+                    writer.addMarker('highlightMarker', {
+                        range: range,
+                        usingOperation: false,
+                    });
+                });
+                // Scroll tới vị trí đó
+                const viewElement = this.#editor.editing.mapper.toViewElement(modelElement);
                 if (viewElement) {
-                    // 3. Từ View Element ảo -> Lấy ra DOM thật (HTMLElement)
-                    const domElement = view.domConverter.mapViewToDom(viewElement);
+                    const domElement = this.#editor.editing.view.domConverter.viewToDom(viewElement);
                     if (domElement) {
-                        // 4. Dùng hàm native của trình duyệt để cuộn
-                        domElement.scrollIntoView({
-                            behavior: 'smooth',
-                            block: 'start',
-                            inline: 'nearest',
-                        });
-                        // 5. (Tùy chọn) Focus và đặt con trỏ vào đó
-                        view.focus();
-                        editor.model.change(writer => {
-                            writer.setSelection(modelElement, 'on');
-                        });
+                        domElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
                     }
                 }
+                // Tự động tắt marker sau 10 giây
+                this.#idTimeOutScrollHeading = setTimeout(() => {
+                    if (this.#editor) {
+                        this.#editor.model.change(writer => {
+                            const marker = this.#editor.model.markers.get('highlightMarker');
+                            if (marker)
+                                writer.removeMarker(marker);
+                        });
+                    }
+                }, 10000);
             }
             else {
                 console.warn(`Heading with id ${id} not found.`);
@@ -1423,11 +1635,11 @@ class SdDocumentBuilder {
         // });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdDocumentBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SdDocumentBuilder, isStandalone: true, selector: "sd-document-builder", inputs: { option: "option", _disabled: ["disabled", "_disabled"] }, outputs: { contentChange: "contentChange" }, ngImport: i0, template: "<div class=\"builder-container\">\n  <ckeditor\n    style=\"width: 100%\"\n    [editor]=\"Editor\" \n    [config]=\"config\" \n    (ready)=\"onReady($event)\"\n    [disabled]=\"disabled\">\n  </ckeditor>\n</div>", styles: ["@charset \"UTF-8\";.builder-container{background-color:#f3f4f6;height:100%;overflow-y:auto;width:100%;display:flex;flex-direction:column;align-items:center;padding-bottom:20px}:host{display:inline-block}:host ::ng-deep .ck-editor{display:flex;flex-direction:column;align-items:center;width:100%}:host ::ng-deep .ck-editor .ck-editor__top,:host ::ng-deep .ck-editor .ck-editor__main{border:none!important;box-shadow:none!important}:host ::ng-deep .ck-content{background-color:#fff;width:210mm;min-height:1123px;padding:20mm!important;box-sizing:border-box!important;box-shadow:0 10px 15px -3px #0000001a}:host ::ng-deep .ck-content h1,:host ::ng-deep .ck-content h2,:host ::ng-deep .ck-content h3,:host ::ng-deep .ck-content h4,:host ::ng-deep .ck-content h5,:host ::ng-deep .ck-content h6{font-weight:400}:host ::ng-deep .ck-content.ck-focused{outline:none!important;border-color:#d1d5db!important}:host ::ng-deep .ck-content.landscape{width:297mm}:host ::ng-deep .ck-content>*{max-width:100%!important;box-sizing:border-box!important}:host ::ng-deep .ck-content img{max-width:100%!important;height:auto!important;object-fit:contain}:host ::ng-deep .ck-content p{margin-left:0!important;margin-right:0!important;margin-bottom:var(--ck-spacing-large);text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{padding-left:20px!important;margin-left:0!important}\n", "@charset \"UTF-8\";:host ::ng-deep .ck-comment-marker{background-color:#ffeb3b80;border-bottom:2px solid #fbc02d;cursor:pointer;transition:background-color .2s}:host ::ng-deep .ck-comment-marker:hover{background-color:#ffeb3bcc}:host ::ng-deep .ck-comment-marker.active-highlight{background-color:#ffeb3b;outline:2px dashed #f57f17}\n", "@charset \"UTF-8\";:host ::ng-deep .variable-widget{background-color:#e3f2fd;color:#1976d2;border:1px solid #90caf9!important;border-radius:4px;padding:2px 6px;font-weight:600;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:10px;cursor:default;-webkit-user-select:none;user-select:none;display:inline-block;margin:0 4px;vertical-align:middle;font-size:0}:host ::ng-deep .variable-widget:before{content:attr(data-display);font-size:10px}:host ::ng-deep .variable-widget:hover{background-color:#bbdefb;box-shadow:0 1px 2px #0000001a}:host ::ng-deep .variable-widget.ck-widget_selected{outline:2px solid #2196f3;background-color:#bbdefb}:host ::ng-deep .ck.ck-clipboard-drop-target-line{display:none!important}:host ::ng-deep .ck.ck-content .ck-widget,:host ::ng-deep .ck.ck-content .ck-widget:hover,:host ::ng-deep .ck.ck-content .ck-widget:focus,:host ::ng-deep .ck.ck-content .ck-widget.ck-widget_selected,:host ::ng-deep .ck.ck-content .ck-widget.ck-widget_selected:hover{outline:none!important;box-shadow:none!important}\n", "@charset \"UTF-8\";:host ::ng-deep .ck-editor__editable .ck-widget.table{float:none!important;display:block!important;max-width:100%!important;width:100%!important;margin:0!important;clear:both}:host ::ng-deep .ck-editor__editable table{table-layout:auto!important;width:100%!important;border-collapse:collapse;margin:0!important}:host ::ng-deep .ck-editor__editable table td,:host ::ng-deep .ck-editor__editable table th{word-wrap:break-word;white-space:normal!important;padding:.4em!important}:host ::ng-deep .ck-editor__editable table td img,:host ::ng-deep .ck-editor__editable table th img{max-width:100%;height:auto}\n", "@charset \"UTF-8\";::ng-deep .ck-editor{--ck-font-size-base: 11px !important;--ck-icon-size: 16px !important;--ck-content-font-family: \"Times New Roman\", serif !important;--ck-content-font-size: 13pt;--ck-content-line-height: 1.5;--ck-spacing-small: 2px !important;--ck-spacing-standard: 4px !important;--ck-spacing-large: 8px !important}::ng-deep .ck-editor .ck-editor__top{position:sticky;top:0;z-index:100;width:100%;min-width:600px;margin-bottom:10px}::ng-deep .ck-editor .ck-editor__top .ck-sticky-panel__content{border:none!important}::ng-deep .ck-editor .ck-editor__top .ck-toolbar{background:#fff!important;box-shadow:0 4px 6px -1px #0000001a!important;padding:8px!important}::ng-deep .ck-editor .ck-editor__top .ck-toolbar .ck-toolbar__items{display:flex;justify-content:center;flex-wrap:wrap;align-items:center}::ng-deep .ck-editor .ck-toolbar{min-height:32px!important;padding:2px!important}::ng-deep .ck-editor .ck-button{padding:2px 4px!important;min-height:24px!important}::ng-deep .ck-editor .ck-dropdown__button{min-height:24px!important}::ng-deep .ck.ck-toolbar{background:#f8f9fa!important;border-bottom:1px solid #e0e0e0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i1.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableWatchdog", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SdDocumentBuilder, isStandalone: true, selector: "sd-document-builder", inputs: { option: "option", _disabled: ["disabled", "_disabled"] }, outputs: { contentChange: "contentChange" }, ngImport: i0, template: "<div class=\"builder-container\">\n  <ckeditor\n    style=\"width: 100%\"\n    [editor]=\"Editor\" \n    [config]=\"config\" \n    (ready)=\"onReady($event)\"\n    [disabled]=\"disabled\">\n  </ckeditor>\n</div>", styles: ["@charset \"UTF-8\";.builder-container{background-color:#f3f4f6;height:100%;overflow-y:auto;width:100%;display:flex;flex-direction:column;align-items:center;padding-bottom:20px}:host{display:inline-block}:host ::ng-deep .ck-heading-highlight{background-color:#fef08a;animation:fadeOut 2s 8s forwards}@keyframes fadeOut{0%{background-color:#fef08a}to{background-color:transparent}}:host ::ng-deep .ck-editor{display:flex;flex-direction:column;align-items:center;width:100%}:host ::ng-deep .ck-editor .ck-editor__top,:host ::ng-deep .ck-editor .ck-editor__main{border:none!important;box-shadow:none!important}:host ::ng-deep .ck-content{background-color:#fff;width:210mm;min-height:1123px;padding:20mm!important;box-sizing:border-box!important;box-shadow:0 10px 15px -3px #0000001a}:host ::ng-deep .ck-content h1,:host ::ng-deep .ck-content h2,:host ::ng-deep .ck-content h3,:host ::ng-deep .ck-content h4,:host ::ng-deep .ck-content h5,:host ::ng-deep .ck-content h6{font-weight:400}:host ::ng-deep .ck-content.ck-focused{outline:none!important;border-color:#d1d5db!important}:host ::ng-deep .ck-content.landscape{width:297mm}:host ::ng-deep .ck-content>*{max-width:100%!important;box-sizing:border-box!important}:host ::ng-deep .ck-content img{max-width:100%!important;height:auto!important;object-fit:contain}:host ::ng-deep .ck-content p{margin-left:0!important;margin-right:0!important;margin-bottom:var(--ck-spacing-large);text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{padding-left:20px!important;margin-left:0!important}\n", "@charset \"UTF-8\";:host ::ng-deep .ck-comment-marker{background-color:#ffeb3b80;border-bottom:2px solid #fbc02d;cursor:pointer;transition:background-color .2s}:host ::ng-deep .ck-comment-marker:hover{background-color:#ffeb3bcc}:host ::ng-deep .ck-comment-marker.active-highlight{background-color:#ffeb3b;outline:2px dashed #f57f17}\n", "@charset \"UTF-8\";:host ::ng-deep .variable-widget{background-color:#e3f2fd;color:#1976d2;border:1px solid #90caf9!important;border-radius:4px;padding:2px 6px;font-weight:600;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:10px;cursor:default;-webkit-user-select:none;user-select:none;display:inline-block;margin:0 4px;vertical-align:middle;font-size:0}:host ::ng-deep .variable-widget:before{content:attr(data-display);font-size:10px}:host ::ng-deep .variable-widget:hover{background-color:#bbdefb;box-shadow:0 1px 2px #0000001a}:host ::ng-deep .variable-widget.ck-widget_selected{outline:2px solid #2196f3;background-color:#bbdefb}:host ::ng-deep .ck.ck-clipboard-drop-target-line{display:none!important}:host ::ng-deep .ck.ck-content .ck-widget,:host ::ng-deep .ck.ck-content .ck-widget:hover,:host ::ng-deep .ck.ck-content .ck-widget:focus,:host ::ng-deep .ck.ck-content .ck-widget.ck-widget_selected,:host ::ng-deep .ck.ck-content .ck-widget.ck-widget_selected:hover{outline:none!important;box-shadow:none!important}\n", "@charset \"UTF-8\";:host ::ng-deep .ck-editor__editable .ck-widget.table{float:none!important;display:block!important;max-width:100%!important;width:100%!important;margin:0!important;clear:both}:host ::ng-deep .ck-editor__editable table{table-layout:auto!important;width:100%!important;border-collapse:collapse;margin:0!important}:host ::ng-deep .ck-editor__editable table td,:host ::ng-deep .ck-editor__editable table th{word-wrap:break-word;white-space:normal!important;padding:.4em!important}:host ::ng-deep .ck-editor__editable table td img,:host ::ng-deep .ck-editor__editable table th img{max-width:100%;height:auto}\n", "@charset \"UTF-8\";::ng-deep .ck-editor{--ck-font-size-base: 11px !important;--ck-icon-size: 16px !important;--ck-content-font-family: \"Times New Roman\", serif !important;--ck-content-font-size: 13pt;--ck-content-line-height: 1.5;--ck-spacing-small: 2px !important;--ck-spacing-standard: 4px !important;--ck-spacing-large: 8px !important}::ng-deep .ck-editor .ck-editor__top{position:sticky;top:0;z-index:100;width:100%;min-width:600px;margin-bottom:10px}::ng-deep .ck-editor .ck-editor__top .ck-sticky-panel__content{border:none!important}::ng-deep .ck-editor .ck-editor__top .ck-toolbar{background:#fff!important;box-shadow:0 4px 6px -1px #0000001a!important;padding:8px!important}::ng-deep .ck-editor .ck-editor__top .ck-toolbar .ck-toolbar__items{display:flex;justify-content:center;flex-wrap:wrap;align-items:center}::ng-deep .ck-editor .ck-toolbar{min-height:32px!important;padding:2px!important}::ng-deep .ck-editor .ck-button{padding:2px 4px!important;min-height:24px!important}::ng-deep .ck-editor .ck-dropdown__button{min-height:24px!important}::ng-deep .ck.ck-toolbar{background:#f8f9fa!important;border-bottom:1px solid #e0e0e0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i1.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableWatchdog", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdDocumentBuilder, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-document-builder', standalone: true, imports: [CommonModule, CKEditorModule], template: "<div class=\"builder-container\">\n  <ckeditor\n    style=\"width: 100%\"\n    [editor]=\"Editor\" \n    [config]=\"config\" \n    (ready)=\"onReady($event)\"\n    [disabled]=\"disabled\">\n  </ckeditor>\n</div>", styles: ["@charset \"UTF-8\";.builder-container{background-color:#f3f4f6;height:100%;overflow-y:auto;width:100%;display:flex;flex-direction:column;align-items:center;padding-bottom:20px}:host{display:inline-block}:host ::ng-deep .ck-editor{display:flex;flex-direction:column;align-items:center;width:100%}:host ::ng-deep .ck-editor .ck-editor__top,:host ::ng-deep .ck-editor .ck-editor__main{border:none!important;box-shadow:none!important}:host ::ng-deep .ck-content{background-color:#fff;width:210mm;min-height:1123px;padding:20mm!important;box-sizing:border-box!important;box-shadow:0 10px 15px -3px #0000001a}:host ::ng-deep .ck-content h1,:host ::ng-deep .ck-content h2,:host ::ng-deep .ck-content h3,:host ::ng-deep .ck-content h4,:host ::ng-deep .ck-content h5,:host ::ng-deep .ck-content h6{font-weight:400}:host ::ng-deep .ck-content.ck-focused{outline:none!important;border-color:#d1d5db!important}:host ::ng-deep .ck-content.landscape{width:297mm}:host ::ng-deep .ck-content>*{max-width:100%!important;box-sizing:border-box!important}:host ::ng-deep .ck-content img{max-width:100%!important;height:auto!important;object-fit:contain}:host ::ng-deep .ck-content p{margin-left:0!important;margin-right:0!important;margin-bottom:var(--ck-spacing-large);text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{padding-left:20px!important;margin-left:0!important}\n", "@charset \"UTF-8\";:host ::ng-deep .ck-comment-marker{background-color:#ffeb3b80;border-bottom:2px solid #fbc02d;cursor:pointer;transition:background-color .2s}:host ::ng-deep .ck-comment-marker:hover{background-color:#ffeb3bcc}:host ::ng-deep .ck-comment-marker.active-highlight{background-color:#ffeb3b;outline:2px dashed #f57f17}\n", "@charset \"UTF-8\";:host ::ng-deep .variable-widget{background-color:#e3f2fd;color:#1976d2;border:1px solid #90caf9!important;border-radius:4px;padding:2px 6px;font-weight:600;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:10px;cursor:default;-webkit-user-select:none;user-select:none;display:inline-block;margin:0 4px;vertical-align:middle;font-size:0}:host ::ng-deep .variable-widget:before{content:attr(data-display);font-size:10px}:host ::ng-deep .variable-widget:hover{background-color:#bbdefb;box-shadow:0 1px 2px #0000001a}:host ::ng-deep .variable-widget.ck-widget_selected{outline:2px solid #2196f3;background-color:#bbdefb}:host ::ng-deep .ck.ck-clipboard-drop-target-line{display:none!important}:host ::ng-deep .ck.ck-content .ck-widget,:host ::ng-deep .ck.ck-content .ck-widget:hover,:host ::ng-deep .ck.ck-content .ck-widget:focus,:host ::ng-deep .ck.ck-content .ck-widget.ck-widget_selected,:host ::ng-deep .ck.ck-content .ck-widget.ck-widget_selected:hover{outline:none!important;box-shadow:none!important}\n", "@charset \"UTF-8\";:host ::ng-deep .ck-editor__editable .ck-widget.table{float:none!important;display:block!important;max-width:100%!important;width:100%!important;margin:0!important;clear:both}:host ::ng-deep .ck-editor__editable table{table-layout:auto!important;width:100%!important;border-collapse:collapse;margin:0!important}:host ::ng-deep .ck-editor__editable table td,:host ::ng-deep .ck-editor__editable table th{word-wrap:break-word;white-space:normal!important;padding:.4em!important}:host ::ng-deep .ck-editor__editable table td img,:host ::ng-deep .ck-editor__editable table th img{max-width:100%;height:auto}\n", "@charset \"UTF-8\";::ng-deep .ck-editor{--ck-font-size-base: 11px !important;--ck-icon-size: 16px !important;--ck-content-font-family: \"Times New Roman\", serif !important;--ck-content-font-size: 13pt;--ck-content-line-height: 1.5;--ck-spacing-small: 2px !important;--ck-spacing-standard: 4px !important;--ck-spacing-large: 8px !important}::ng-deep .ck-editor .ck-editor__top{position:sticky;top:0;z-index:100;width:100%;min-width:600px;margin-bottom:10px}::ng-deep .ck-editor .ck-editor__top .ck-sticky-panel__content{border:none!important}::ng-deep .ck-editor .ck-editor__top .ck-toolbar{background:#fff!important;box-shadow:0 4px 6px -1px #0000001a!important;padding:8px!important}::ng-deep .ck-editor .ck-editor__top .ck-toolbar .ck-toolbar__items{display:flex;justify-content:center;flex-wrap:wrap;align-items:center}::ng-deep .ck-editor .ck-toolbar{min-height:32px!important;padding:2px!important}::ng-deep .ck-editor .ck-button{padding:2px 4px!important;min-height:24px!important}::ng-deep .ck-editor .ck-dropdown__button{min-height:24px!important}::ng-deep .ck.ck-toolbar{background:#f8f9fa!important;border-bottom:1px solid #e0e0e0!important}\n"] }]
+            args: [{ selector: 'sd-document-builder', standalone: true, imports: [CommonModule, CKEditorModule], template: "<div class=\"builder-container\">\n  <ckeditor\n    style=\"width: 100%\"\n    [editor]=\"Editor\" \n    [config]=\"config\" \n    (ready)=\"onReady($event)\"\n    [disabled]=\"disabled\">\n  </ckeditor>\n</div>", styles: ["@charset \"UTF-8\";.builder-container{background-color:#f3f4f6;height:100%;overflow-y:auto;width:100%;display:flex;flex-direction:column;align-items:center;padding-bottom:20px}:host{display:inline-block}:host ::ng-deep .ck-heading-highlight{background-color:#fef08a;animation:fadeOut 2s 8s forwards}@keyframes fadeOut{0%{background-color:#fef08a}to{background-color:transparent}}:host ::ng-deep .ck-editor{display:flex;flex-direction:column;align-items:center;width:100%}:host ::ng-deep .ck-editor .ck-editor__top,:host ::ng-deep .ck-editor .ck-editor__main{border:none!important;box-shadow:none!important}:host ::ng-deep .ck-content{background-color:#fff;width:210mm;min-height:1123px;padding:20mm!important;box-sizing:border-box!important;box-shadow:0 10px 15px -3px #0000001a}:host ::ng-deep .ck-content h1,:host ::ng-deep .ck-content h2,:host ::ng-deep .ck-content h3,:host ::ng-deep .ck-content h4,:host ::ng-deep .ck-content h5,:host ::ng-deep .ck-content h6{font-weight:400}:host ::ng-deep .ck-content.ck-focused{outline:none!important;border-color:#d1d5db!important}:host ::ng-deep .ck-content.landscape{width:297mm}:host ::ng-deep .ck-content>*{max-width:100%!important;box-sizing:border-box!important}:host ::ng-deep .ck-content img{max-width:100%!important;height:auto!important;object-fit:contain}:host ::ng-deep .ck-content p{margin-left:0!important;margin-right:0!important;margin-bottom:var(--ck-spacing-large);text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{padding-left:20px!important;margin-left:0!important}\n", "@charset \"UTF-8\";:host ::ng-deep .ck-comment-marker{background-color:#ffeb3b80;border-bottom:2px solid #fbc02d;cursor:pointer;transition:background-color .2s}:host ::ng-deep .ck-comment-marker:hover{background-color:#ffeb3bcc}:host ::ng-deep .ck-comment-marker.active-highlight{background-color:#ffeb3b;outline:2px dashed #f57f17}\n", "@charset \"UTF-8\";:host ::ng-deep .variable-widget{background-color:#e3f2fd;color:#1976d2;border:1px solid #90caf9!important;border-radius:4px;padding:2px 6px;font-weight:600;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:10px;cursor:default;-webkit-user-select:none;user-select:none;display:inline-block;margin:0 4px;vertical-align:middle;font-size:0}:host ::ng-deep .variable-widget:before{content:attr(data-display);font-size:10px}:host ::ng-deep .variable-widget:hover{background-color:#bbdefb;box-shadow:0 1px 2px #0000001a}:host ::ng-deep .variable-widget.ck-widget_selected{outline:2px solid #2196f3;background-color:#bbdefb}:host ::ng-deep .ck.ck-clipboard-drop-target-line{display:none!important}:host ::ng-deep .ck.ck-content .ck-widget,:host ::ng-deep .ck.ck-content .ck-widget:hover,:host ::ng-deep .ck.ck-content .ck-widget:focus,:host ::ng-deep .ck.ck-content .ck-widget.ck-widget_selected,:host ::ng-deep .ck.ck-content .ck-widget.ck-widget_selected:hover{outline:none!important;box-shadow:none!important}\n", "@charset \"UTF-8\";:host ::ng-deep .ck-editor__editable .ck-widget.table{float:none!important;display:block!important;max-width:100%!important;width:100%!important;margin:0!important;clear:both}:host ::ng-deep .ck-editor__editable table{table-layout:auto!important;width:100%!important;border-collapse:collapse;margin:0!important}:host ::ng-deep .ck-editor__editable table td,:host ::ng-deep .ck-editor__editable table th{word-wrap:break-word;white-space:normal!important;padding:.4em!important}:host ::ng-deep .ck-editor__editable table td img,:host ::ng-deep .ck-editor__editable table th img{max-width:100%;height:auto}\n", "@charset \"UTF-8\";::ng-deep .ck-editor{--ck-font-size-base: 11px !important;--ck-icon-size: 16px !important;--ck-content-font-family: \"Times New Roman\", serif !important;--ck-content-font-size: 13pt;--ck-content-line-height: 1.5;--ck-spacing-small: 2px !important;--ck-spacing-standard: 4px !important;--ck-spacing-large: 8px !important}::ng-deep .ck-editor .ck-editor__top{position:sticky;top:0;z-index:100;width:100%;min-width:600px;margin-bottom:10px}::ng-deep .ck-editor .ck-editor__top .ck-sticky-panel__content{border:none!important}::ng-deep .ck-editor .ck-editor__top .ck-toolbar{background:#fff!important;box-shadow:0 4px 6px -1px #0000001a!important;padding:8px!important}::ng-deep .ck-editor .ck-editor__top .ck-toolbar .ck-toolbar__items{display:flex;justify-content:center;flex-wrap:wrap;align-items:center}::ng-deep .ck-editor .ck-toolbar{min-height:32px!important;padding:2px!important}::ng-deep .ck-editor .ck-button{padding:2px 4px!important;min-height:24px!important}::ng-deep .ck-editor .ck-dropdown__button{min-height:24px!important}::ng-deep .ck.ck-toolbar{background:#f8f9fa!important;border-bottom:1px solid #e0e0e0!important}\n"] }]
         }], propDecorators: { option: [{
                 type: Input,
                 args: [{ required: true }]