@sd-angular/core 19.0.0-beta.88 → 19.0.0-beta.89

package/components/document-builder/src/plugins/variable/variable.plugin.d.ts

@@ -43,3 +43,9 @@ export declare class VariablePlugin extends Plugin {
     /** Xóa toàn bộ binding values trong document. Shorthand của clearValues(). */
     clearAllValues(): void;
 }
+/**
+ * HTML từ getData() phiên bản cũ có thể chứa block (vd. table) bên trong `span.variable-widget[data-binding="html"]`,
+ * khiến setData/upcast CKEditor lỗi (unexpected-error, null.start). Gọi trước `setData` để giữ chỉ
+ * `data-binding-value` và bỏ các node con.
+ */
+export declare function sanitizeVariableHtmlBoundSerializedHtml(html: string): string;

package/components/table/src/models/table-option-selector.model.d.ts

@@ -1,12 +1,19 @@
 import { SdButton } from '@sd-angular/core/components/button';
 import { SdUnwrapSignal } from '@sd-angular/core/utilities/models';
 export interface SdTableOptionSelector<T = any> {
+    /** Bật/tắt cột checkbox selector. Mặc định: true. */
     visible?: boolean;
+    /** Chỉ cho chọn 1 dòng tại một thời điểm. */
     single?: boolean;
+    /** Danh sách action hiển thị khi có item được chọn. */
     actions?: SdTableAction<T>[];
+    /** Nội dung hiển thị bên cạnh selector/action bar. */
     message?: string | ((selectedItems?: T[]) => string);
+    /** Callback khi user chọn/bỏ chọn một dòng. */
     onSelect?: (rowData?: T, selectedItems?: T[]) => void;
+    /** Callback khi user chọn tất cả hoặc bỏ chọn tất cả. */
     onSelectAll?: (selectedItems: T[]) => void;
+    /** Disable checkbox của từng dòng theo điều kiện. */
     disabled?: (rowData?: T, selectedItems?: T[]) => boolean;
     /**
      * Predicate để tự động pre-select item sau mỗi lần load.
@@ -17,25 +24,66 @@ export interface SdTableOptionSelector<T = any> {
 }
 export type SdTableAction<T = any> = SdTableActionNormal<T> | SdTableActionChildren<T>;
 export interface SdTableActionNormal<T = any> {
+    /**
+     * Tên icon hiển thị trên action button.
+     * Giá trị này được render qua `mat-icon`, vì vậy nên dùng đúng tên glyph của Material Icons.
+     * Tra cứu icon tại: https://fonts.google.com/icons
+     */
     icon?: string;
+    /**
+     * Font set của Material icon.
+     * Kiểu thực tế lấy từ `SdButton['fontSet']` và chỉ hỗ trợ các giá trị thuộc `MaterialIconFontSet`,
+     * ví dụ: `material-icons`, `material-icons-outlined`, `material-icons-round`,
+     * `material-icons-sharp`, `material-symbols-outlined`.
+     * Nếu không truyền, `SdButton` sẽ dùng font set mặc định của nó.
+     */
     fontSet?: SdUnwrapSignal<SdButton['fontSet']>;
+    /** Tooltip hiển thị khi hover action button. */
     tooltip?: SdUnwrapSignal<SdButton['tooltip']>;
+    /** Text label hiển thị trên button action. */
     title?: SdUnwrapSignal<SdButton['title']>;
+    /**
+     * Màu của `SdButton`.
+     * Kiểu thực tế map theo `SdButton['color']`, hiện dùng các token như
+     * `primary`, `secondary`, `info`, `success`, `warning`, `error`.
+     */
     color?: SdUnwrapSignal<SdButton['color']>;
+    /**
+     * Variant hiển thị của `SdButton`.
+     * Kiểu thực tế là `fill | light | outline | link`.
+     */
     type?: SdUnwrapSignal<SdButton['type']>;
+    /** Ẩn action theo cờ tĩnh hoặc theo điều kiện của dữ liệu dòng. */
     hidden?: boolean | ((rowData?: T) => boolean);
+    /** Gom action vào nhóm hiển thị compact nếu table hỗ trợ grouped actions. */
     isGrouped?: boolean;
+    /** Hàm xử lý khi click action, nhận toàn bộ item đang được chọn. */
     click: (selectedItems?: T[]) => void;
 }
 interface SdTableActionChildren<T = any> {
+    /**
+     * Tên icon của action cha (group action).
+     * Giá trị nên là tên glyph Material Icons: https://fonts.google.com/icons
+     */
     icon?: string;
+    /**
+     * Font set của Material icon cho action cha.
+     * Dùng cùng kiểu dữ liệu với `SdButton['fontSet']`.
+     */
     fontSet?: SdUnwrapSignal<SdButton['fontSet']>;
+    /** Tooltip của action cha. */
     tooltip?: SdUnwrapSignal<SdButton['tooltip']>;
+    /** Label của action cha. */
     title?: SdUnwrapSignal<SdButton['title']>;
+    /** Màu của action cha theo kiểu `SdButton['color']`. */
     color?: SdUnwrapSignal<SdButton['color']>;
+    /** Variant hiển thị của action cha theo kiểu `SdButton['type']`. */
     type?: SdUnwrapSignal<SdButton['type']>;
+    /** Ẩn action cha theo cờ tĩnh hoặc theo điều kiện của dữ liệu dòng. */
     hidden?: boolean | ((rowData?: T) => boolean);
+    /** Gom action cha vào nhóm hiển thị compact nếu table hỗ trợ grouped actions. */
     isGrouped?: boolean;
+    /** Danh sách action con hiển thị bên trong group action này. */
     children: SdTableActionNormal<T>[];
 }
 export {};

package/components/table/src/models/table-option.model.d.ts

@@ -13,38 +13,140 @@ import { SdTableOptionSort } from './table-option-sort.model';
 import { SdTableOptionStyle } from './table-option-style.model';
 export type SdTableOption<T = any> = SdTableLocalOption<T> | SdTableServerOption<T>;
 interface SdTableBaseOption<T = any> {
+    /**
+     * Key định danh của table option.
+     * Thường dùng khi một số tính năng con cần lưu trạng thái riêng theo table,
+     * ví dụ các option có hỗ trợ cache/config theo key.
+     */
     key?: string;
+    /**
+     * Cấu hình hiển thị/phục hồi config của table.
+     * Xem thêm kiểu chi tiết tại `TableOptionConfig`.
+     */
     config?: TableOptionConfig;
+    /**
+     * Cấu hình chọn dòng (checkbox selector, action theo selection, pre-select...).
+     * Xem thêm tại `SdTableOptionSelector`.
+     */
     selector?: SdTableOptionSelector<T>;
+    /**
+     * Cấu hình expand row.
+     * Xem thêm tại `SdTableOptionExpand` để biết cách disable, expand nhiều dòng,
+     * hoặc luôn hiển thị vùng expand.
+     */
     expand?: SdTableOptionExpand<T>;
+    /**
+     * Bật/tắt sorting ở cấp table.
+     * Xem thêm tại `SdTableOptionSort`.
+     */
     sort?: SdTableOptionSort;
+    /**
+     * Cấu hình phân trang.
+     * Xem thêm tại `SdTableOptionPaginate`.
+     */
     paginate?: SdTableOptionPaginate;
+    /**
+     * Cấu hình hành vi reload dữ liệu.
+     * Xem thêm tại `SdTableOptionReload`.
+     */
     reload?: SdTableOptionReload<T>;
+    /**
+     * Cấu hình export dữ liệu.
+     * Xem thêm tại `SdTableOptionExport` để biết mode `default`/`custom`, mapping,
+     * sheet export và giới hạn số dòng.
+     */
     export?: SdTableOptionExport<T>;
+    /**
+     * Cấu hình group dữ liệu theo nhiều field.
+     * Xem thêm tại `SdTableOptionGroup`.
+     */
     group?: SdTableOptionGroup<T>;
+    /**
+     * Cấu hình filter của table.
+     * Xem thêm tại `SdTableOptionFilter` để biết filter inline, external filter,
+     * manual filter, cacheable và callback clear filter.
+     */
     filter?: SdTableOptionFilter;
+    /**
+     * Cấu hình kéo-thả đổi thứ tự dòng.
+     * Chỉ bật khi table cho phép reorder dữ liệu phía client.
+     */
     rowReorder?: {
+        /** Bật/tắt tính năng reorder row. */
         enabled?: boolean;
+        /**
+         * Callback sau khi reorder xong.
+         * `newRows` là mảng sau khi đã đổi vị trí ở UI,
+         * `movedItem` là item vừa được kéo,
+         * `fromIndex` và `toIndex` là vị trí cũ/mới.
+         */
         onChange?: (newRows: T[], movedItem: T, fromIndex: number, toIndex: number) => void;
+        /**
+         * Tên icon hiển thị cho drag handle.
+         * Nếu không truyền thì table dùng icon reorder mặc định của Material.
+         * Nếu truyền custom icon, nên dùng tên glyph của Material Icons:
+         * https://fonts.google.com/icons
+         */
         icon?: string;
+        /**
+         * Disable khả năng reorder theo từng dòng.
+         * Trả về `true` để chặn kéo-thả dòng tương ứng.
+         */
         disabled?: (row: T, index: number) => boolean;
     };
+    /**
+     * Danh sách command thao tác theo từng dòng.
+     * Xem thêm tại `SdTableCommand`.
+     */
     commands?: SdTableCommand<T>[];
+    /**
+     * Cấu hình vùng command tập trung.
+     * Dùng khi cần set thêm alignment hoặc bọc danh sách command trong object option.
+     * Xem thêm tại `SdTableCommandOption`.
+     */
     command?: SdTableCommandOption<T>;
+    /**
+     * Danh sách cột hiển thị của table.
+     * Đây là phần bắt buộc. Xem thêm tại `SdTableColumn` để cấu hình field, filter,
+     * sort, transform, template và export của từng cột.
+     */
     columns: SdTableColumn<T>[];
+    /**
+     * Cấu hình style/layout chung của table.
+     * Xem thêm tại `SdTableOptionStyle`.
+     */
     style?: SdTableOptionStyle<T>;
 }
 interface SdTableLocalOption<T = any> extends SdTableBaseOption<T> {
+    /** Dùng dữ liệu local tại client. */
     type: 'local';
+    /**
+     * Hàm trả dữ liệu local cho table.
+     * Table sẽ tự gọi hàm này để lấy mảng item nguồn.
+     * Có thể trả về đồng bộ hoặc `Promise<T[]>`.
+     */
     items: () => T[] | Promise<T[]>;
 }
 interface SdTableServerOption<T = any> extends SdTableBaseOption<T> {
+    /** Dùng dữ liệu từ server, có paging/filter/sort theo request của table. */
     type: 'server';
+    /**
+     * Hàm lấy dữ liệu từ server.
+     * `filterRequest` chứa trạng thái filter/sort/visible columns ở dạng của table.
+     * `pagingReq` là dữ liệu paging đã được chuẩn hóa để dễ map sang API backend.
+     * Hàm cần trả về `{ items, total }` để table render và tính phân trang.
+     */
     items: (filterRequest: SdTableFilterRequest<T>, pagingReq: SdPagingReq<T>) => Promise<{
         items: T[];
         total: number;
     }>;
+    /**
+     * Hook chạy khi table phát sinh filter request.
+     * Dùng để can thiệp thêm trước/sau khi gọi API, ví dụ sync external state,
+     * theo dõi trạng thái valid của external filter, hoặc ghi log request filter hiện tại.
+     */
     onFilter?: (filterRequest: SdTableFilterRequest<T>, args: {
+        /** Cho biết toàn bộ external filter hiện tại có hợp lệ để trigger filter hay không. */
         externalFilterValid: boolean;
     }) => void;
 }

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

@@ -415,12 +415,12 @@ class VariablePlugin extends Plugin {
                 return toWidget(widgetElement, viewWriter);
             },
         });
-        // 2b. One-way attribute converter cho bindingValue (chỉ editing view, không ảnh hưởng getData())
-        // Chỉ chạy khi bindValue() / clearValue() gọi model.change → setAttribute/removeAttribute
-        // Binding được persist vào HTML (getData() và setData() có binding state)
-        // conversion.for('downcast') ảnh hưởng cả editing view và data view (getData)
-        conversion.for('downcast').add(dispatcher => {
-            dispatcher.on('attribute:bindingValue:variable', (evt, data, conversionApi) => {
+        // 2b. bindingValue → view
+        // - editingDowncast: HTML bind dùng createRawElement để hiển thị table/section trong editor.
+        // - dataDowncast (getData): CHỈ lưu data-binding-value (URI), không chèn block HTML vào <span> —
+        //   tránh HTML lưu dạng <p><span>…<table>… (invalid / upcast CKEditor lỗi null.start).
+        const applyBindingValueAttributeToView = (isDataPipeline) => {
+            return (evt, data, conversionApi) => {
                 if (!conversionApi.consumable.consume(data.item, evt.name))
                     return;
                 const viewWriter = conversionApi.writer;
@@ -430,18 +430,46 @@ class VariablePlugin extends Plugin {
                 const bindingValue = data.attributeNewValue;
                 const isBound = !!bindingValue;
                 const display = data.item.getAttribute('display');
-                // Cập nhật data-binding attribute trên container span
-                viewWriter.setAttribute('data-binding', isBound ? 'true' : 'false', viewElement);
-                // Xóa text node cũ và chèn text mới (bound value hoặc {{display}})
                 viewWriter.remove(viewWriter.createRangeIn(viewElement));
-                viewWriter.insert(viewWriter.createPositionAt(viewElement, 0), viewWriter.createText(isBound ? bindingValue : `{{${display}}}`));
-            });
+                if (!isBound) {
+                    viewWriter.setAttribute('data-binding', 'false', viewElement);
+                    viewWriter.removeAttribute('data-binding-value', viewElement);
+                    viewWriter.insert(viewWriter.createPositionAt(viewElement, 0), viewWriter.createText(`{{${display}}}`));
+                    return;
+                }
+                const raw = bindingValue;
+                const isHtml = /<[a-z][\s\S]*>/i.test(raw);
+                if (isHtml) {
+                    viewWriter.setAttribute('data-binding', 'html', viewElement);
+                    viewWriter.setAttribute('data-binding-value', encodeURIComponent(raw), viewElement);
+                    if (isDataPipeline) {
+                        // Không nhét DOM con vào serialized HTML; upcast đọc binding từ data-binding-value.
+                        return;
+                    }
+                    const htmlHost = viewWriter.createRawElement('span', { class: 'variable-html-content' }, (domElement) => {
+                        domElement.innerHTML = raw;
+                    });
+                    viewWriter.insert(viewWriter.createPositionAt(viewElement, 0), htmlHost);
+                }
+                else {
+                    viewWriter.setAttribute('data-binding', 'true', viewElement);
+                    viewWriter.removeAttribute('data-binding-value', viewElement);
+                    viewWriter.insert(viewWriter.createPositionAt(viewElement, 0), viewWriter.createText(raw));
+                }
+            };
+        };
+        conversion.for('dataDowncast').add(dispatcher => {
+            dispatcher.on('attribute:bindingValue:variable', applyBindingValueAttributeToView(true));
+        });
+        conversion.for('editingDowncast').add(dispatcher => {
+            dispatcher.on('attribute:bindingValue:variable', applyBindingValueAttributeToView(false));
         });
         // 3. HTML -> Model
         conversion.for('upcast').elementToElement({
             // NOTE: Chỉ khai báo các attribute CẦN THIẾT để nhận biết variable widget.
             // - data-binding KHÔNG được đưa vào required attributes (HTML cũ không có sẽ không được nhận biết).
-            // - Nếu data-binding="true" trong HTML → đọc text content làm bindingValue để restore trạng thái bound.
+            // - data-binding="true" → đọc text child làm bindingValue (plain text).
+            // - data-binding="html" → đọc data-binding-value (URI-encoded) làm bindingValue.
             view: {
                 name: 'span',
                 classes: 'variable-widget ck-widget',
@@ -453,10 +481,21 @@ class VariablePlugin extends Plugin {
                 },
             },
             model: (viewElement, { writer: modelWriter }) => {
-                const isBound = viewElement.getAttribute('data-binding') === 'true';
+                const bindingMode = viewElement.getAttribute('data-binding');
                 let bindingValue;
-                if (isBound) {
-                    // Đọc text content làm bindingValue (bound value được lưu trực tiếp vào innerHTML)
+                if (bindingMode === 'html') {
+                    const encoded = viewElement.getAttribute('data-binding-value');
+                    if (encoded) {
+                        try {
+                            bindingValue = decodeURIComponent(encoded);
+                        }
+                        catch {
+                            bindingValue = undefined;
+                        }
+                    }
+                }
+                else if (bindingMode === 'true') {
+                    // Đọc text content làm bindingValue (bound value được lưu trực tiếp vào inner text)
                     for (const child of viewElement.getChildren()) {
                         if (child.is('$text')) {
                             bindingValue = child.data;
@@ -991,6 +1030,32 @@ class VariablePlugin extends Plugin {
         this.clearValues();
     }
 }
+/**
+ * HTML từ getData() phiên bản cũ có thể chứa block (vd. table) bên trong `span.variable-widget[data-binding="html"]`,
+ * khiến setData/upcast CKEditor lỗi (unexpected-error, null.start). Gọi trước `setData` để giữ chỉ
+ * `data-binding-value` và bỏ các node con.
+ */
+function sanitizeVariableHtmlBoundSerializedHtml(html) {
+    if (!html || !html.includes('variable-widget'))
+        return html;
+    try {
+        const doc = new DOMParser().parseFromString(`<div id="__sd_var_sanitize_root__">${html}</div>`, 'text/html');
+        const root = doc.getElementById('__sd_var_sanitize_root__');
+        if (!root)
+            return html;
+        root.querySelectorAll('span.variable-widget').forEach(el => {
+            if (el.getAttribute('data-binding') !== 'html')
+                return;
+            if (!el.hasAttribute('data-binding-value'))
+                return;
+            el.replaceChildren();
+        });
+        return root.innerHTML;
+    }
+    catch {
+        return html;
+    }
+}
 
 class TableCustom extends Plugin {
     init() {
@@ -4575,7 +4640,8 @@ class SdDocumentBuilder {
         }
     }
     setContent = (html) => {
-        this.#editor?.setData?.(html);
+        const safe = sanitizeVariableHtmlBoundSerializedHtml(html);
+        this.#editor?.setData?.(safe);
     };
     getContent = () => {
         if (this.#editor) {
@@ -4936,11 +5002,11 @@ class SdDocumentBuilder {
         });
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdDocumentBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: SdDocumentBuilder, isStandalone: true, selector: "sd-document-builder", inputs: { option: "option", _disabled: ["disabled", "_disabled"] }, outputs: { contentChange: "contentChange" }, ngImport: i0, template: "<div class=\"builder-container\">\r\n  <ckeditor class=\"w-full\" [editor]=\"Editor\" [config]=\"config\" (ready)=\"onReady($event)\" [disabled]=\"disabled\"> </ckeditor>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.builder-container{height:100%;overflow-y:auto;width:100%;display:flex;flex-direction:column;align-items:center}:host{display:inline-block}:host ::ng-deep .ck-editor{display:flex;flex-direction:column;align-items:center;width:100%;--ck-content-font-family: \"Times New Roman\", serif !important;--ck-content-font-size: 13pt;--ck-content-line-height: 1.15}:host ::ng-deep .ck-editor__top,:host ::ng-deep .ck-editor__main{border:none!important;box-shadow:none!important}:host ::ng-deep .ck-editor__top{position:sticky;top:0;z-index:100;width:100%;min-width:600px;margin-bottom:10px}:host ::ng-deep .ck-editor__top .ck-sticky-panel__content{border:none!important}:host ::ng-deep .ck-editor__top .ck-toolbar{background:#fff!important;box-shadow:none!important;border-radius:8px;padding:8px!important}:host ::ng-deep .ck-editor__top .ck-toolbar .ck-toolbar__items{display:flex;justify-content:center;flex-wrap:wrap;align-items:center}: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;font-size:inherit;line-height:inherit;margin-bottom:4px}: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 p{margin-bottom:4px;text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{padding-left:20px!important;margin-left:0!important;margin-bottom:4px}:host ::ng-deep .ck-content li{margin-bottom:0}:host ::ng-deep .ck-content table{margin-bottom:4px}\n", ":host ::ng-deep .ck-heading-highlight{background-color:#fef08a}\n", "@charset \"UTF-8\";::ng-deep .ck-clipboard-drop-target-line{display:none!important}:host ::ng-deep .variable-widget{display:inline-block;-webkit-user-select:none;user-select:none}:host ::ng-deep .variable-widget:not([data-binding=true]){background-color:#e3f2fd;color:#1976d2;border:1px solid #90caf9!important;border-radius:4px;padding:2px 6px;font-size:0;margin:0 2px;vertical-align:middle;font-weight:600;cursor:default}:host ::ng-deep .variable-widget:not([data-binding=true]):before{content:attr(data-display);font-size:10px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}:host ::ng-deep .variable-widget:not([data-binding=true]):hover{background-color:#bbdefb;box-shadow:0 1px 2px #0000001a}:host ::ng-deep .variable-widget:not([data-binding=true]).ck-widget_selected{outline:2px solid #2196f3;background-color:#bbdefb}:host ::ng-deep .variable-widget[data-binding=true]{background-color:#4caf501f;color:#2e7d32;border-bottom:2px solid #4caf50!important;border-radius:0;padding:0 1px;font-size:inherit;cursor:default}:host ::ng-deep .variable-widget[data-binding=true]:before{content:none}:host ::ng-deep .variable-widget[data-binding=true]:hover{background-color:#4caf5038}:host ::ng-deep .variable-widget[data-binding=true].ck-widget_selected{outline:2px solid #4caf50;background-color:#4caf5047}: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", ":host ::ng-deep .highlight-range{background-color:#ffeb3b80;border-bottom:2px solid #fbc02d;transition:background-color .2s;cursor:pointer}\n", ":host ::ng-deep .ck-comment-marker{background-color:var(--comment-bg, rgba(59, 130, 246, .3));border-bottom:2px solid rgb(59,130,246);cursor:pointer;transition:all .2s ease}:host ::ng-deep .ck-comment-marker:hover{opacity:.8}:host ::ng-deep .ck-comment-marker.ck-comment-pending{background-color:var(--comment-pending-bg, rgba(245, 158, 11, .4));border-bottom-color:#f59e0b}:host ::ng-deep .ck-comment-marker.ck-comment-normal{background-color:var(--comment-bg, rgba(59, 130, 246, .2));border-bottom-color:#3b82f6}:host ::ng-deep .ck-comment-marker.ck-comment-selected{background-color:var(--comment-selected-bg, 59, 130, 246, .5);border-bottom-color:#3b82f6}:host ::ng-deep .ck-comment-marker.ck-comment-modified{background-color:var(--comment-modified-bg, rgba(249, 115, 22, .3));border-bottom-color:#f97316}:host ::ng-deep .ck-comment-marker.ck-comment-broken{background-color:var(--comment-broken-bg, rgba(239, 68, 68, .3));border-bottom-color:#ef4444;text-decoration:line-through;text-decoration-color:#ef4444}:host ::ng-deep .ck-balloon-panel .ck-button.ck-on:hover,:host ::ng-deep .ck-balloon-panel .ck-button.ck-off:hover{background:var(--ck-color-button-default-hover-background)}\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.21", type: SdDocumentBuilder, isStandalone: true, selector: "sd-document-builder", inputs: { option: "option", _disabled: ["disabled", "_disabled"] }, outputs: { contentChange: "contentChange" }, ngImport: i0, template: "<div class=\"builder-container\">\r\n  <ckeditor class=\"w-full\" [editor]=\"Editor\" [config]=\"config\" (ready)=\"onReady($event)\" [disabled]=\"disabled\"> </ckeditor>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.builder-container{height:100%;overflow-y:auto;width:100%;display:flex;flex-direction:column;align-items:center}:host{display:inline-block}:host ::ng-deep .ck-editor{display:flex;flex-direction:column;align-items:center;width:100%;--ck-content-font-family: \"Times New Roman\", serif !important;--ck-content-font-size: 13pt;--ck-content-line-height: 1.15}:host ::ng-deep .ck-editor__top,:host ::ng-deep .ck-editor__main{border:none!important;box-shadow:none!important}:host ::ng-deep .ck-editor__top{position:sticky;top:0;z-index:100;width:100%;min-width:600px;margin-bottom:10px}:host ::ng-deep .ck-editor__top .ck-sticky-panel__content{border:none!important}:host ::ng-deep .ck-editor__top .ck-toolbar{background:#fff!important;box-shadow:none!important;border-radius:8px;padding:8px!important}:host ::ng-deep .ck-editor__top .ck-toolbar .ck-toolbar__items{display:flex;justify-content:center;flex-wrap:wrap;align-items:center}: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;font-size:inherit;line-height:inherit;margin-bottom:4px}: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 p{margin-bottom:4px;text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{padding-left:20px!important;margin-left:0!important;margin-bottom:4px}:host ::ng-deep .ck-content li{margin-bottom:0}:host ::ng-deep .ck-content table{margin-bottom:4px}\n", ":host ::ng-deep .ck-heading-highlight{background-color:#fef08a}\n", "@charset \"UTF-8\";::ng-deep .ck-clipboard-drop-target-line{display:none!important}:host ::ng-deep .variable-widget{display:inline-block;-webkit-user-select:none;user-select:none}:host ::ng-deep .variable-widget:not([data-binding=true]):not([data-binding=html]){background-color:#e3f2fd;color:#1976d2;border:1px solid #90caf9!important;border-radius:4px;padding:2px 6px;font-size:0;margin:0 2px;vertical-align:middle;font-weight:600;cursor:default}:host ::ng-deep .variable-widget:not([data-binding=true]):not([data-binding=html]):before{content:attr(data-display);font-size:10px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}:host ::ng-deep .variable-widget:not([data-binding=true]):not([data-binding=html]):hover{background-color:#bbdefb;box-shadow:0 1px 2px #0000001a}:host ::ng-deep .variable-widget:not([data-binding=true]):not([data-binding=html]).ck-widget_selected{outline:2px solid #2196f3;background-color:#bbdefb}:host ::ng-deep .variable-widget[data-binding=true]{background-color:#4caf501f;color:#2e7d32;border-bottom:2px solid #4caf50!important;border-radius:0;padding:0 1px;font-size:inherit;cursor:default}:host ::ng-deep .variable-widget[data-binding=true]:before{content:none}:host ::ng-deep .variable-widget[data-binding=true]:hover{background-color:#4caf5038}:host ::ng-deep .variable-widget[data-binding=true].ck-widget_selected{outline:2px solid #4caf50;background-color:#4caf5047}:host ::ng-deep .variable-widget[data-binding=html]{display:block;background-color:transparent;border:1px dashed #4caf50!important;border-radius:4px;padding:4px;-webkit-user-select:text;user-select:text;pointer-events:none}:host ::ng-deep .variable-widget[data-binding=html]:before{content:none}:host ::ng-deep .variable-widget[data-binding=html]:hover{background-color:#4caf500f}:host ::ng-deep .variable-widget[data-binding=html].ck-widget_selected{outline:2px solid #4caf50;background-color:#4caf5014}:host ::ng-deep .variable-widget[data-binding=html] .variable-html-content{display:block}: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", ":host ::ng-deep .highlight-range{background-color:#ffeb3b80;border-bottom:2px solid #fbc02d;transition:background-color .2s;cursor:pointer}\n", ":host ::ng-deep .ck-comment-marker{background-color:var(--comment-bg, rgba(59, 130, 246, .3));border-bottom:2px solid rgb(59,130,246);cursor:pointer;transition:all .2s ease}:host ::ng-deep .ck-comment-marker:hover{opacity:.8}:host ::ng-deep .ck-comment-marker.ck-comment-pending{background-color:var(--comment-pending-bg, rgba(245, 158, 11, .4));border-bottom-color:#f59e0b}:host ::ng-deep .ck-comment-marker.ck-comment-normal{background-color:var(--comment-bg, rgba(59, 130, 246, .2));border-bottom-color:#3b82f6}:host ::ng-deep .ck-comment-marker.ck-comment-selected{background-color:var(--comment-selected-bg, 59, 130, 246, .5);border-bottom-color:#3b82f6}:host ::ng-deep .ck-comment-marker.ck-comment-modified{background-color:var(--comment-modified-bg, rgba(249, 115, 22, .3));border-bottom-color:#f97316}:host ::ng-deep .ck-comment-marker.ck-comment-broken{background-color:var(--comment-broken-bg, rgba(239, 68, 68, .3));border-bottom-color:#ef4444;text-decoration:line-through;text-decoration-color:#ef4444}:host ::ng-deep .ck-balloon-panel .ck-button.ck-on:hover,:host ::ng-deep .ck-balloon-panel .ck-button.ck-off:hover{background:var(--ck-color-button-default-hover-background)}\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.21", ngImport: i0, type: SdDocumentBuilder, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-document-builder', standalone: true, imports: [CommonModule, CKEditorModule], template: "<div class=\"builder-container\">\r\n  <ckeditor class=\"w-full\" [editor]=\"Editor\" [config]=\"config\" (ready)=\"onReady($event)\" [disabled]=\"disabled\"> </ckeditor>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.builder-container{height:100%;overflow-y:auto;width:100%;display:flex;flex-direction:column;align-items:center}:host{display:inline-block}:host ::ng-deep .ck-editor{display:flex;flex-direction:column;align-items:center;width:100%;--ck-content-font-family: \"Times New Roman\", serif !important;--ck-content-font-size: 13pt;--ck-content-line-height: 1.15}:host ::ng-deep .ck-editor__top,:host ::ng-deep .ck-editor__main{border:none!important;box-shadow:none!important}:host ::ng-deep .ck-editor__top{position:sticky;top:0;z-index:100;width:100%;min-width:600px;margin-bottom:10px}:host ::ng-deep .ck-editor__top .ck-sticky-panel__content{border:none!important}:host ::ng-deep .ck-editor__top .ck-toolbar{background:#fff!important;box-shadow:none!important;border-radius:8px;padding:8px!important}:host ::ng-deep .ck-editor__top .ck-toolbar .ck-toolbar__items{display:flex;justify-content:center;flex-wrap:wrap;align-items:center}: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;font-size:inherit;line-height:inherit;margin-bottom:4px}: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 p{margin-bottom:4px;text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{padding-left:20px!important;margin-left:0!important;margin-bottom:4px}:host ::ng-deep .ck-content li{margin-bottom:0}:host ::ng-deep .ck-content table{margin-bottom:4px}\n", ":host ::ng-deep .ck-heading-highlight{background-color:#fef08a}\n", "@charset \"UTF-8\";::ng-deep .ck-clipboard-drop-target-line{display:none!important}:host ::ng-deep .variable-widget{display:inline-block;-webkit-user-select:none;user-select:none}:host ::ng-deep .variable-widget:not([data-binding=true]){background-color:#e3f2fd;color:#1976d2;border:1px solid #90caf9!important;border-radius:4px;padding:2px 6px;font-size:0;margin:0 2px;vertical-align:middle;font-weight:600;cursor:default}:host ::ng-deep .variable-widget:not([data-binding=true]):before{content:attr(data-display);font-size:10px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}:host ::ng-deep .variable-widget:not([data-binding=true]):hover{background-color:#bbdefb;box-shadow:0 1px 2px #0000001a}:host ::ng-deep .variable-widget:not([data-binding=true]).ck-widget_selected{outline:2px solid #2196f3;background-color:#bbdefb}:host ::ng-deep .variable-widget[data-binding=true]{background-color:#4caf501f;color:#2e7d32;border-bottom:2px solid #4caf50!important;border-radius:0;padding:0 1px;font-size:inherit;cursor:default}:host ::ng-deep .variable-widget[data-binding=true]:before{content:none}:host ::ng-deep .variable-widget[data-binding=true]:hover{background-color:#4caf5038}:host ::ng-deep .variable-widget[data-binding=true].ck-widget_selected{outline:2px solid #4caf50;background-color:#4caf5047}: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", ":host ::ng-deep .highlight-range{background-color:#ffeb3b80;border-bottom:2px solid #fbc02d;transition:background-color .2s;cursor:pointer}\n", ":host ::ng-deep .ck-comment-marker{background-color:var(--comment-bg, rgba(59, 130, 246, .3));border-bottom:2px solid rgb(59,130,246);cursor:pointer;transition:all .2s ease}:host ::ng-deep .ck-comment-marker:hover{opacity:.8}:host ::ng-deep .ck-comment-marker.ck-comment-pending{background-color:var(--comment-pending-bg, rgba(245, 158, 11, .4));border-bottom-color:#f59e0b}:host ::ng-deep .ck-comment-marker.ck-comment-normal{background-color:var(--comment-bg, rgba(59, 130, 246, .2));border-bottom-color:#3b82f6}:host ::ng-deep .ck-comment-marker.ck-comment-selected{background-color:var(--comment-selected-bg, 59, 130, 246, .5);border-bottom-color:#3b82f6}:host ::ng-deep .ck-comment-marker.ck-comment-modified{background-color:var(--comment-modified-bg, rgba(249, 115, 22, .3));border-bottom-color:#f97316}:host ::ng-deep .ck-comment-marker.ck-comment-broken{background-color:var(--comment-broken-bg, rgba(239, 68, 68, .3));border-bottom-color:#ef4444;text-decoration:line-through;text-decoration-color:#ef4444}:host ::ng-deep .ck-balloon-panel .ck-button.ck-on:hover,:host ::ng-deep .ck-balloon-panel .ck-button.ck-off:hover{background:var(--ck-color-button-default-hover-background)}\n"] }]
+            args: [{ selector: 'sd-document-builder', standalone: true, imports: [CommonModule, CKEditorModule], template: "<div class=\"builder-container\">\r\n  <ckeditor class=\"w-full\" [editor]=\"Editor\" [config]=\"config\" (ready)=\"onReady($event)\" [disabled]=\"disabled\"> </ckeditor>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.builder-container{height:100%;overflow-y:auto;width:100%;display:flex;flex-direction:column;align-items:center}:host{display:inline-block}:host ::ng-deep .ck-editor{display:flex;flex-direction:column;align-items:center;width:100%;--ck-content-font-family: \"Times New Roman\", serif !important;--ck-content-font-size: 13pt;--ck-content-line-height: 1.15}:host ::ng-deep .ck-editor__top,:host ::ng-deep .ck-editor__main{border:none!important;box-shadow:none!important}:host ::ng-deep .ck-editor__top{position:sticky;top:0;z-index:100;width:100%;min-width:600px;margin-bottom:10px}:host ::ng-deep .ck-editor__top .ck-sticky-panel__content{border:none!important}:host ::ng-deep .ck-editor__top .ck-toolbar{background:#fff!important;box-shadow:none!important;border-radius:8px;padding:8px!important}:host ::ng-deep .ck-editor__top .ck-toolbar .ck-toolbar__items{display:flex;justify-content:center;flex-wrap:wrap;align-items:center}: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;font-size:inherit;line-height:inherit;margin-bottom:4px}: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 p{margin-bottom:4px;text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{padding-left:20px!important;margin-left:0!important;margin-bottom:4px}:host ::ng-deep .ck-content li{margin-bottom:0}:host ::ng-deep .ck-content table{margin-bottom:4px}\n", ":host ::ng-deep .ck-heading-highlight{background-color:#fef08a}\n", "@charset \"UTF-8\";::ng-deep .ck-clipboard-drop-target-line{display:none!important}:host ::ng-deep .variable-widget{display:inline-block;-webkit-user-select:none;user-select:none}:host ::ng-deep .variable-widget:not([data-binding=true]):not([data-binding=html]){background-color:#e3f2fd;color:#1976d2;border:1px solid #90caf9!important;border-radius:4px;padding:2px 6px;font-size:0;margin:0 2px;vertical-align:middle;font-weight:600;cursor:default}:host ::ng-deep .variable-widget:not([data-binding=true]):not([data-binding=html]):before{content:attr(data-display);font-size:10px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}:host ::ng-deep .variable-widget:not([data-binding=true]):not([data-binding=html]):hover{background-color:#bbdefb;box-shadow:0 1px 2px #0000001a}:host ::ng-deep .variable-widget:not([data-binding=true]):not([data-binding=html]).ck-widget_selected{outline:2px solid #2196f3;background-color:#bbdefb}:host ::ng-deep .variable-widget[data-binding=true]{background-color:#4caf501f;color:#2e7d32;border-bottom:2px solid #4caf50!important;border-radius:0;padding:0 1px;font-size:inherit;cursor:default}:host ::ng-deep .variable-widget[data-binding=true]:before{content:none}:host ::ng-deep .variable-widget[data-binding=true]:hover{background-color:#4caf5038}:host ::ng-deep .variable-widget[data-binding=true].ck-widget_selected{outline:2px solid #4caf50;background-color:#4caf5047}:host ::ng-deep .variable-widget[data-binding=html]{display:block;background-color:transparent;border:1px dashed #4caf50!important;border-radius:4px;padding:4px;-webkit-user-select:text;user-select:text;pointer-events:none}:host ::ng-deep .variable-widget[data-binding=html]:before{content:none}:host ::ng-deep .variable-widget[data-binding=html]:hover{background-color:#4caf500f}:host ::ng-deep .variable-widget[data-binding=html].ck-widget_selected{outline:2px solid #4caf50;background-color:#4caf5014}:host ::ng-deep .variable-widget[data-binding=html] .variable-html-content{display:block}: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", ":host ::ng-deep .highlight-range{background-color:#ffeb3b80;border-bottom:2px solid #fbc02d;transition:background-color .2s;cursor:pointer}\n", ":host ::ng-deep .ck-comment-marker{background-color:var(--comment-bg, rgba(59, 130, 246, .3));border-bottom:2px solid rgb(59,130,246);cursor:pointer;transition:all .2s ease}:host ::ng-deep .ck-comment-marker:hover{opacity:.8}:host ::ng-deep .ck-comment-marker.ck-comment-pending{background-color:var(--comment-pending-bg, rgba(245, 158, 11, .4));border-bottom-color:#f59e0b}:host ::ng-deep .ck-comment-marker.ck-comment-normal{background-color:var(--comment-bg, rgba(59, 130, 246, .2));border-bottom-color:#3b82f6}:host ::ng-deep .ck-comment-marker.ck-comment-selected{background-color:var(--comment-selected-bg, 59, 130, 246, .5);border-bottom-color:#3b82f6}:host ::ng-deep .ck-comment-marker.ck-comment-modified{background-color:var(--comment-modified-bg, rgba(249, 115, 22, .3));border-bottom-color:#f97316}:host ::ng-deep .ck-comment-marker.ck-comment-broken{background-color:var(--comment-broken-bg, rgba(239, 68, 68, .3));border-bottom-color:#ef4444;text-decoration:line-through;text-decoration-color:#ef4444}:host ::ng-deep .ck-balloon-panel .ck-button.ck-on:hover,:host ::ng-deep .ck-balloon-panel .ck-button.ck-off:hover{background:var(--ck-color-button-default-hover-background)}\n"] }]
         }], propDecorators: { option: [{
                 type: Input,
                 args: [{ required: true }]