@sd-angular/core 19.0.0-beta.10 → 19.0.0-beta.101

package/fesm2022/sd-angular-core-components-mini-editor.mjs

@@ -0,0 +1,332 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, forwardRef, Input, Output, HostBinding, Component } from '@angular/core';
+import * as i1 from '@ckeditor/ckeditor5-angular';
+import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
+import { ClassicEditor, Essentials, FontColor, Paragraph, Bold, Italic, Underline, Link, List, Undo, Widget, Markdown, Mention } from 'ckeditor5';
+import { Subscription, Subject } from 'rxjs';
+import { throttleTime } from 'rxjs/operators';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+/**
+ * Component sd-mini-editor - Editor đơn giản cho comment input
+ * Sử dụng CKEditor với chế độ đơn giản (bold, italic, link)
+ * Hỗ trợ mention và output format (html/markdown)
+ *
+ * @example
+ * ```html
+ * <sd-mini-editor
+ *   [option]="editorOption"
+ *   [(ngModel)]="content"
+ *   (contentChange)="onContentChange($event)"
+ * >
+ * </sd-mini-editor>
+ * ```
+ */
+class SdMiniEditor {
+    /** Cấu hình option cho editor */
+    option;
+    get maxEditorHeight() {
+        return this.option?.maxHeight;
+    }
+    /** NgModel binding - nội dung HTML/Markdown */
+    value = '';
+    valueChange = new EventEmitter();
+    /** Event emitter khi content thay đổi */
+    contentChange = new EventEmitter();
+    /** Event emitter khi blur */
+    blur = new EventEmitter();
+    /** Event emitter khi focus */
+    focus = new EventEmitter();
+    /** Disabled state */
+    disabled = false;
+    Editor = ClassicEditor;
+    #editor;
+    #subscription = new Subscription();
+    #contentChangeSubject = new Subject();
+    // Build editor config dynamically
+    get editorConfig() {
+        const enableMention = this.option?.enableMention ?? false;
+        const useMarkdown = this.option?.outputFormat === 'markdown';
+        const plugins = [Essentials, FontColor, Paragraph, Bold, Italic, Underline, Link, List, Undo, Widget];
+        // Add Markdown plugin if outputFormat is markdown
+        if (useMarkdown) {
+            plugins.push(Markdown);
+        }
+        // Add Mention plugin if enabled
+        if (enableMention) {
+            plugins.push(Mention);
+        }
+        // Build base config
+        const config = {
+            licenseKey: 'GPL',
+            getOption: () => this.option,
+            plugins,
+            toolbar: {
+                items: ['bold', 'italic', 'underline', '|', 'fontColor', '|', 'bulletedList', 'numberedList', '|', 'link'],
+                shouldNotGroupWhenFull: true,
+            },
+            placeholder: this.option?.placeholder,
+            link: {
+                addTargetToExternalLinks: true,
+                defaultProtocol: 'https://',
+            },
+            fontColor: {
+                columns: 5,
+                documentColors: 10,
+                colorPicker: { format: 'hex' },
+            },
+        };
+        // Add mention configuration if enabled
+        if (enableMention && this.option?.mentionConfig?.feeds) {
+            config.mention = {
+                feeds: this.option.mentionConfig.feeds,
+            };
+        }
+        return config;
+    }
+    constructor() {
+        // Setup debounce cho content change
+        this.#subscription.add(this.#contentChangeSubject.pipe(throttleTime(500, undefined, { leading: true, trailing: true })).subscribe(content => {
+            const output = this.#convertOutput(content);
+            this.value = output;
+            this.#onChange(output);
+            this.valueChange.emit(output);
+            this.contentChange.emit(output);
+            this.option?.onChange?.(output);
+        }));
+    }
+    ngOnDestroy() {
+        this.#subscription.unsubscribe();
+        this.#editor?.destroy?.();
+    }
+    /**
+     * Kiểm tra có nên enable mention plugin không
+     */
+    #shouldEnableMention() {
+        return this.option?.enableMention ?? false;
+    }
+    /**
+     * Xử lý khi editor ready
+     */
+    onReady(editor) {
+        this.#editor = editor;
+        // Set initial content
+        if (this.value) {
+            this.setContent(this.value);
+        }
+        // Lắng nghe sự kiện thay đổi nội dung
+        editor.model.document.on('change:data', () => {
+            const content = editor.getData();
+            this.#contentChangeSubject.next(content);
+        });
+        // Lắng nghe focus/blur events
+        editor.editing.view.document.on('focus', evt => {
+            const domEvent = evt.domEvent;
+            this.focus.emit(domEvent);
+            this.option?.onFocus?.(domEvent);
+        });
+        editor.editing.view.document.on('blur', evt => {
+            const domEvent = evt.domEvent;
+            this.blur.emit(domEvent);
+            this.option?.onBlur?.(domEvent);
+        });
+        // Lắng nghe sự kiện mention được chọn
+        if (this.#shouldEnableMention()) {
+            editor.commands.get('mention')?.on('execute', (_evt, data) => {
+                const mentionData = data[0];
+                this.option?.onMentionSelect?.(mentionData.mention);
+                // Trigger content change sau khi insert mention
+                const content = editor.getData();
+                this.#contentChangeSubject.next(content);
+            });
+            // Custom downcast converter để thay đổi cấu trúc mention HTML
+            editor.conversion.for('downcast').attributeToElement({
+                model: 'mention',
+                view: (mentionData, { writer }) => {
+                    const data = mentionData;
+                    const rawId = data?.id || '';
+                    const marker = rawId[0];
+                    const cleanId = rawId.slice(1);
+                    return writer.createAttributeElement('span', {
+                        class: 'ck-custom-mention',
+                        'data-id': cleanId,
+                        'data-marker': marker,
+                        contenteditable: 'false',
+                    });
+                },
+                converterPriority: 'highest',
+            });
+            // Xử lý keyboard để xóa mention 1 lần
+            editor.editing.view.document.on('keydown', (evt, data) => {
+                const keyEvent = data;
+                // Delete (46) hoặc Backspace (8)
+                if (keyEvent.keyCode === 46 || keyEvent.keyCode === 8) {
+                    const model = editor.model;
+                    const selection = model.document.selection;
+                    const position = selection.getFirstPosition();
+                    if (!position)
+                        return;
+                    // Tìm text node có mention attribute
+                    const node = position.textNode || position.nodeBefore || position.nodeAfter;
+                    if (node && node.is('$text')) {
+                        const mentionAttr = node.getAttribute('mention');
+                        if (mentionAttr) {
+                            // Xóa toàn bộ text node chứa mention
+                            model.change(writer => {
+                                writer.remove(node);
+                            });
+                            evt.stop();
+                        }
+                    }
+                }
+            });
+        }
+    }
+    /**
+     * Convert output theo format (html hoặc markdown)
+     * Khi sử dụng CKEditor Markdown plugin, getData() tự động trả về Markdown
+     */
+    #convertOutput(content) {
+        // CKEditor Markdown plugin tự động xử lý conversion
+        // Không cần manual conversion nữa
+        return content;
+    }
+    /**
+     * Set nội dung cho editor
+     */
+    setContent(content) {
+        this.#editor?.setData?.(content);
+    }
+    /**
+     * Get nội dung từ editor
+     */
+    getContent() {
+        if (this.#editor) {
+            const html = this.#editor.getData();
+            return this.#convertOutput(html);
+        }
+        return '';
+    }
+    /**
+     * Get nội dung HTML gốc (không convert)
+     */
+    getHtmlContent() {
+        return this.#editor?.getData?.() || '';
+    }
+    /**
+     * Focus vào editor
+     */
+    focusEditor() {
+        this.#editor?.editing?.view?.focus?.();
+    }
+    /**
+     * Insert mention vào vị trí con trỏ hiện tại
+     */
+    insertMention(item) {
+        if (!this.#editor)
+            return;
+        const firstFeed = this.option?.mentionConfig?.feeds?.[0];
+        const marker = item.marker || firstFeed?.marker || '@';
+        // Sử dụng CKEditor mention command
+        this.#editor.execute('mention', {
+            marker,
+            mention: {
+                id: item.id,
+                text: `${marker}${item.name}`,
+            },
+        });
+    }
+    /**
+     * Get danh sách mentions trong nội dung
+     */
+    getMentions() {
+        if (!this.#editor)
+            return [];
+        const mentions = [];
+        const root = this.#editor.model.document.getRoot();
+        if (!root)
+            return mentions;
+        const range = this.#editor.model.createRangeIn(root);
+        for (const item of range.getItems()) {
+            if (item.is('$text')) {
+                const mentionAttr = item.getAttribute('mention');
+                if (mentionAttr) {
+                    const text = item.data;
+                    const marker = text.charAt(0);
+                    const name = text.substring(1);
+                    const id = item.getAttribute('data-user-id');
+                    mentions.push({ id, name, marker });
+                }
+            }
+        }
+        return mentions;
+    }
+    /**
+     * ControlValueAccessor: Write value
+     */
+    writeValue(value) {
+        this.value = value || '';
+        if (this.#editor) {
+            this.setContent(this.value);
+        }
+    }
+    /**
+     * ControlValueAccessor: Register change callback
+     */
+    registerOnChange(fn) {
+        this.#onChange = fn;
+    }
+    /**
+     * ControlValueAccessor: Register touched callback
+     */
+    registerOnTouched(fn) {
+        this.#onTouched = fn;
+    }
+    /** ControlValueAccessor callbacks */
+    #onChange = () => { };
+    #onTouched = () => { };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdMiniEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: SdMiniEditor, isStandalone: true, selector: "sd-mini-editor", inputs: { option: "option", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange", contentChange: "contentChange", blur: "blur", focus: "focus" }, host: { properties: { "style.--sd-mini-editor-max-height": "this.maxEditorHeight" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SdMiniEditor),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<ckeditor class=\"sd-mini-editor\" [editor]=\"Editor\" [config]=\"editorConfig\" [disabled]=\"disabled\" (ready)=\"onReady($event)\"> </ckeditor>\r\n", styles: [".sd-mini-editor{display:block}::ng-deep .ck-powered-by-balloon{display:none!important}::ng-deep .ck-mentions .ck-button.ck-on{background:var(--sd-primary)!important;color:#fff!important}::ng-deep .ck-mentions .ck-button.ck-on *{color:#fff!important}:host ::ng-deep .ck-editor{--ck-content-font-size: 14px;--ck-content-line-height: 1.5}:host ::ng-deep .ck-editor__editable_inline{border:var(--ck-focus-ring);border-top-left-radius:0!important;border-top-right-radius:0!important;max-height:var(--sd-mini-editor-max-height);overflow:auto}:host ::ng-deep .ck-toolbar{border-radius:0;border:0!important}:host ::ng-deep .ck-content img{max-width:100%!important;height:auto!important;object-fit:contain}:host ::ng-deep .ck-content p{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}:host ::ng-deep .ck-custom-mention{font-weight:600;padding:0 2px;display:inline-block;pointer-events:none;-webkit-user-select:none;user-select:none;color:#2962ff}:host ::ng-deep .ck-custom-mention:before{content:attr(data-marker)}\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: SdMiniEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-mini-editor', standalone: true, imports: [CommonModule, CKEditorModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SdMiniEditor),
+                            multi: true,
+                        },
+                    ], template: "<ckeditor class=\"sd-mini-editor\" [editor]=\"Editor\" [config]=\"editorConfig\" [disabled]=\"disabled\" (ready)=\"onReady($event)\"> </ckeditor>\r\n", styles: [".sd-mini-editor{display:block}::ng-deep .ck-powered-by-balloon{display:none!important}::ng-deep .ck-mentions .ck-button.ck-on{background:var(--sd-primary)!important;color:#fff!important}::ng-deep .ck-mentions .ck-button.ck-on *{color:#fff!important}:host ::ng-deep .ck-editor{--ck-content-font-size: 14px;--ck-content-line-height: 1.5}:host ::ng-deep .ck-editor__editable_inline{border:var(--ck-focus-ring);border-top-left-radius:0!important;border-top-right-radius:0!important;max-height:var(--sd-mini-editor-max-height);overflow:auto}:host ::ng-deep .ck-toolbar{border-radius:0;border:0!important}:host ::ng-deep .ck-content img{max-width:100%!important;height:auto!important;object-fit:contain}:host ::ng-deep .ck-content p{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}:host ::ng-deep .ck-custom-mention{font-weight:600;padding:0 2px;display:inline-block;pointer-events:none;-webkit-user-select:none;user-select:none;color:#2962ff}:host ::ng-deep .ck-custom-mention:before{content:attr(data-marker)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { option: [{
+                type: Input,
+                args: [{ required: true }]
+            }], maxEditorHeight: [{
+                type: HostBinding,
+                args: ['style.--sd-mini-editor-max-height']
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], contentChange: [{
+                type: Output
+            }], blur: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }], disabled: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdMiniEditor };
+//# sourceMappingURL=sd-angular-core-components-mini-editor.mjs.map

package/fesm2022/sd-angular-core-components-mini-editor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-angular-core-components-mini-editor.mjs","sources":["../../../projects/sd-angular/components/mini-editor/src/mini-editor.component.ts","../../../projects/sd-angular/components/mini-editor/src/mini-editor.component.html","../../../projects/sd-angular/components/mini-editor/sd-angular-core-components-mini-editor.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { Component, EventEmitter, HostBinding, Input, Output, forwardRef } from '@angular/core';\r\nimport { CKEditorModule } from '@ckeditor/ckeditor5-angular';\r\nimport {\r\n  Bold,\r\n  ClassicEditor,\r\n  Essentials,\r\n  Italic,\r\n  Link,\r\n  List,\r\n  FontColor,\r\n  Markdown,\r\n  Mention,\r\n  Paragraph,\r\n  Underline,\r\n  Undo,\r\n  Widget,\r\n} from 'ckeditor5';\r\nimport { Subject, Subscription } from 'rxjs';\r\nimport { throttleTime } from 'rxjs/operators';\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\r\n\r\nimport { SdMiniEditorOption, SdMiniEditorConfig, SdMiniEditorMentionItem } from './mini-editor.model';\r\n\r\n/**\r\n * Component sd-mini-editor - Editor đơn giản cho comment input\r\n * Sử dụng CKEditor với chế độ đơn giản (bold, italic, link)\r\n * Hỗ trợ mention và output format (html/markdown)\r\n *\r\n * @example\r\n * ```html\r\n * <sd-mini-editor\r\n *   [option]=\"editorOption\"\r\n *   [(ngModel)]=\"content\"\r\n *   (contentChange)=\"onContentChange($event)\"\r\n * >\r\n * </sd-mini-editor>\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'sd-mini-editor',\r\n  standalone: true,\r\n  imports: [CommonModule, CKEditorModule],\r\n  templateUrl: './mini-editor.component.html',\r\n  styleUrls: ['./mini-editor.component.scss'],\r\n  providers: [\r\n    {\r\n      provide: NG_VALUE_ACCESSOR,\r\n      useExisting: forwardRef(() => SdMiniEditor),\r\n      multi: true,\r\n    },\r\n  ],\r\n})\r\nexport class SdMiniEditor implements ControlValueAccessor {\r\n  /** Cấu hình option cho editor */\r\n  @Input({ required: true }) option!: SdMiniEditorOption;\r\n\r\n  @HostBinding('style.--sd-mini-editor-max-height')\r\n  get maxEditorHeight(): string | undefined {\r\n    return this.option?.maxHeight;\r\n  }\r\n\r\n  /** NgModel binding - nội dung HTML/Markdown */\r\n  @Input() value = '';\r\n  @Output() valueChange = new EventEmitter<string>();\r\n\r\n  /** Event emitter khi content thay đổi */\r\n  @Output() contentChange = new EventEmitter<string>();\r\n\r\n  /** Event emitter khi blur */\r\n  @Output() blur = new EventEmitter<FocusEvent>();\r\n\r\n  /** Event emitter khi focus */\r\n  @Output() focus = new EventEmitter<FocusEvent>();\r\n\r\n  /** Disabled state */\r\n  @Input() disabled = false;\r\n\r\n  Editor = ClassicEditor;\r\n  #editor!: ClassicEditor;\r\n  #subscription = new Subscription();\r\n  #contentChangeSubject = new Subject<string>();\r\n\r\n  // Build editor config dynamically\r\n  get editorConfig(): SdMiniEditorConfig {\r\n    const enableMention = this.option?.enableMention ?? false;\r\n    const useMarkdown = this.option?.outputFormat === 'markdown';\r\n    const plugins: any[] = [Essentials, FontColor, Paragraph, Bold, Italic, Underline, Link, List, Undo, Widget];\r\n\r\n    // Add Markdown plugin if outputFormat is markdown\r\n    if (useMarkdown) {\r\n      plugins.push(Markdown);\r\n    }\r\n\r\n    // Add Mention plugin if enabled\r\n    if (enableMention) {\r\n      plugins.push(Mention);\r\n    }\r\n\r\n    // Build base config\r\n    const config: SdMiniEditorConfig = {\r\n      licenseKey: 'GPL',\r\n      getOption: () => this.option,\r\n      plugins,\r\n      toolbar: {\r\n        items: ['bold', 'italic', 'underline', '|', 'fontColor', '|', 'bulletedList', 'numberedList', '|', 'link'],\r\n        shouldNotGroupWhenFull: true,\r\n      },\r\n      placeholder: this.option?.placeholder,\r\n      link: {\r\n        addTargetToExternalLinks: true,\r\n        defaultProtocol: 'https://',\r\n      },\r\n      fontColor: {\r\n        columns: 5,\r\n        documentColors: 10,\r\n        colorPicker: { format: 'hex' },\r\n      },\r\n    };\r\n\r\n    // Add mention configuration if enabled\r\n    if (enableMention && this.option?.mentionConfig?.feeds) {\r\n      config.mention = {\r\n        feeds: this.option.mentionConfig.feeds,\r\n      };\r\n    }\r\n\r\n    return config;\r\n  }\r\n\r\n  constructor() {\r\n    // Setup debounce cho content change\r\n    this.#subscription.add(\r\n      this.#contentChangeSubject.pipe(throttleTime(500, undefined, { leading: true, trailing: true })).subscribe(content => {\r\n        const output = this.#convertOutput(content);\r\n        this.value = output;\r\n        this.#onChange(output);\r\n        this.valueChange.emit(output);\r\n        this.contentChange.emit(output);\r\n        this.option?.onChange?.(output);\r\n      })\r\n    );\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.#subscription.unsubscribe();\r\n    this.#editor?.destroy?.();\r\n  }\r\n\r\n  /**\r\n   * Kiểm tra có nên enable mention plugin không\r\n   */\r\n  #shouldEnableMention(): boolean {\r\n    return this.option?.enableMention ?? false;\r\n  }\r\n\r\n  /**\r\n   * Xử lý khi editor ready\r\n   */\r\n  onReady(editor: ClassicEditor) {\r\n    this.#editor = editor;\r\n\r\n    // Set initial content\r\n    if (this.value) {\r\n      this.setContent(this.value);\r\n    }\r\n\r\n    // Lắng nghe sự kiện thay đổi nội dung\r\n    editor.model.document.on('change:data', () => {\r\n      const content = editor.getData();\r\n      this.#contentChangeSubject.next(content);\r\n    });\r\n\r\n    // Lắng nghe focus/blur events\r\n    editor.editing.view.document.on('focus', evt => {\r\n      const domEvent = (evt as any).domEvent as FocusEvent;\r\n      this.focus.emit(domEvent);\r\n      this.option?.onFocus?.(domEvent);\r\n    });\r\n\r\n    editor.editing.view.document.on('blur', evt => {\r\n      const domEvent = (evt as any).domEvent as FocusEvent;\r\n      this.blur.emit(domEvent);\r\n      this.option?.onBlur?.(domEvent);\r\n    });\r\n\r\n    // Lắng nghe sự kiện mention được chọn\r\n    if (this.#shouldEnableMention()) {\r\n      editor.commands.get('mention')?.on('execute', (_evt, data: any) => {\r\n        const mentionData = data[0];\r\n        this.option?.onMentionSelect?.(mentionData.mention);\r\n        // Trigger content change sau khi insert mention\r\n        const content = editor.getData();\r\n        this.#contentChangeSubject.next(content);\r\n      });\r\n\r\n      // Custom downcast converter để thay đổi cấu trúc mention HTML\r\n      editor.conversion.for('downcast').attributeToElement({\r\n        model: 'mention',\r\n        view: (mentionData, { writer }) => {\r\n          const data = mentionData as SdMiniEditorMentionItem;\r\n          const rawId = data?.id || '';\r\n          const marker = rawId[0];\r\n          const cleanId = rawId.slice(1);\r\n\r\n          return writer.createAttributeElement('span', {\r\n            class: 'ck-custom-mention',\r\n            'data-id': cleanId,\r\n            'data-marker': marker,\r\n            contenteditable: 'false',\r\n          });\r\n        },\r\n        converterPriority: 'highest',\r\n      });\r\n\r\n      // Xử lý keyboard để xóa mention 1 lần\r\n      editor.editing.view.document.on('keydown', (evt, data) => {\r\n        const keyEvent = data as { keyCode: number; domEvent: KeyboardEvent };\r\n        // Delete (46) hoặc Backspace (8)\r\n        if (keyEvent.keyCode === 46 || keyEvent.keyCode === 8) {\r\n          const model = editor.model;\r\n          const selection = model.document.selection;\r\n          const position = selection.getFirstPosition();\r\n          if (!position) return;\r\n\r\n          // Tìm text node có mention attribute\r\n          const node = position.textNode || position.nodeBefore || position.nodeAfter;\r\n          if (node && node.is('$text')) {\r\n            const mentionAttr = node.getAttribute('mention');\r\n            if (mentionAttr) {\r\n              // Xóa toàn bộ text node chứa mention\r\n              model.change(writer => {\r\n                writer.remove(node);\r\n              });\r\n              evt.stop();\r\n            }\r\n          }\r\n        }\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Convert output theo format (html hoặc markdown)\r\n   * Khi sử dụng CKEditor Markdown plugin, getData() tự động trả về Markdown\r\n   */\r\n  #convertOutput(content: string): string {\r\n    // CKEditor Markdown plugin tự động xử lý conversion\r\n    // Không cần manual conversion nữa\r\n    return content;\r\n  }\r\n\r\n  /**\r\n   * Set nội dung cho editor\r\n   */\r\n  setContent(content: string) {\r\n    this.#editor?.setData?.(content);\r\n  }\r\n\r\n  /**\r\n   * Get nội dung từ editor\r\n   */\r\n  getContent(): string {\r\n    if (this.#editor) {\r\n      const html = this.#editor.getData();\r\n      return this.#convertOutput(html);\r\n    }\r\n    return '';\r\n  }\r\n\r\n  /**\r\n   * Get nội dung HTML gốc (không convert)\r\n   */\r\n  getHtmlContent(): string {\r\n    return this.#editor?.getData?.() || '';\r\n  }\r\n\r\n  /**\r\n   * Focus vào editor\r\n   */\r\n  focusEditor() {\r\n    this.#editor?.editing?.view?.focus?.();\r\n  }\r\n\r\n  /**\r\n   * Insert mention vào vị trí con trỏ hiện tại\r\n   */\r\n  insertMention(item: { id: string; name: string; marker?: string }) {\r\n    if (!this.#editor) return;\r\n\r\n    const firstFeed = this.option?.mentionConfig?.feeds?.[0];\r\n    const marker = item.marker || (firstFeed as any)?.marker || '@';\r\n\r\n    // Sử dụng CKEditor mention command\r\n    this.#editor.execute('mention', {\r\n      marker,\r\n      mention: {\r\n        id: item.id,\r\n        text: `${marker}${item.name}`,\r\n      },\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Get danh sách mentions trong nội dung\r\n   */\r\n  getMentions(): Array<{ id: string; name: string; marker: string }> {\r\n    if (!this.#editor) return [];\r\n\r\n    const mentions: Array<{ id: string; name: string; marker: string }> = [];\r\n    const root = this.#editor.model.document.getRoot();\r\n    if (!root) return mentions;\r\n\r\n    const range = this.#editor.model.createRangeIn(root);\r\n\r\n    for (const item of range.getItems()) {\r\n      if (item.is('$text')) {\r\n        const mentionAttr = item.getAttribute('mention');\r\n        if (mentionAttr) {\r\n          const text = (item as any).data as string;\r\n          const marker = text.charAt(0);\r\n          const name = text.substring(1);\r\n          const id = item.getAttribute('data-user-id') as string;\r\n\r\n          mentions.push({ id, name, marker });\r\n        }\r\n      }\r\n    }\r\n\r\n    return mentions;\r\n  }\r\n\r\n  /**\r\n   * ControlValueAccessor: Write value\r\n   */\r\n  writeValue(value: string): void {\r\n    this.value = value || '';\r\n    if (this.#editor) {\r\n      this.setContent(this.value);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * ControlValueAccessor: Register change callback\r\n   */\r\n  registerOnChange(fn: (value: string) => void): void {\r\n    this.#onChange = fn;\r\n  }\r\n\r\n  /**\r\n   * ControlValueAccessor: Register touched callback\r\n   */\r\n  registerOnTouched(fn: () => void): void {\r\n    this.#onTouched = fn;\r\n  }\r\n\r\n  /** ControlValueAccessor callbacks */\r\n  #onChange: (value: string) => void = () => {};\r\n  #onTouched: () => void = () => {};\r\n}\r\n","<ckeditor class=\"sd-mini-editor\" [editor]=\"Editor\" [config]=\"editorConfig\" [disabled]=\"disabled\" (ready)=\"onReady($event)\"> </ckeditor>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sd-angular-core-components-modal.mjs

@@ -1,127 +1,104 @@
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, ViewChild, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
-import * as i2 from '@angular/material/bottom-sheet';
-import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
+import { signal, viewChild, input, computed, booleanAttribute, output, inject, DestroyRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatBottomSheet, MatBottomSheetModule } from '@angular/material/bottom-sheet';
 import { MatButtonModule } from '@angular/material/button';
-import * as i1 from '@angular/material/dialog';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
-import * as i3 from '@angular/material/icon';
+import * as i1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { SdUtilities } from '@sd-angular/core/utilities';
-import { Subscription } from 'rxjs';
 
 class SdModal {
-    ref;
-    dialog;
-    bottomSheet;
-    static index = 0;
-    templateRef;
-    title;
-    color = 'primary';
-    width = 'md';
-    height = 'auto';
-    view;
-    lazyLoadContent = true;
-    sdClosed = new EventEmitter();
-    modal;
-    isOpened = false;
-    alreadyOpened = false;
+    static index = signal(0);
+    templateRef = viewChild.required('templateRef');
+    modal = viewChild('modal');
+    // autoId prefix `modal-`. Lưu ý: footer/body buttons render qua <ng-content> nên consumer phải
+    // tự đặt [attr.data-autoId] cho các nút đó. Component chỉ tự bind autoId cho NÚT ĐÓNG (X icon).
+    autoIdInput = input(undefined, { alias: 'autoId' });
+    autoId = computed(() => (this.autoIdInput() ? `components-modal-${this.autoIdInput()}` : undefined));
+    closeButtonAutoId = computed(() => (this.autoId() ? `${this.autoId()}-close` : undefined));
+    dataOpened = computed(() => (this.isOpened() ? 'true' : 'false'));
+    title = input('', { transform: (v) => v ?? '' });
+    color = input('primary', { transform: (v) => v ?? 'primary' });
+    width = input('md', { transform: (v) => v ?? 'md' });
+    height = input('auto', { transform: (v) => v ?? 'auto' });
+    view = input(undefined, { transform: (v) => v ?? undefined });
+    modalClass = input('', { transform: (v) => v ?? '' });
+    lazyLoadContent = input(true, { transform: booleanAttribute });
+    hideClose = input(false, { transform: booleanAttribute });
+    disableBackdropClose = input(true, { transform: booleanAttribute }); // default to true to keep backward compatibility
+    sdClosed = output();
+    isOpened = signal(false);
+    alreadyOpened = signal(false);
     #isMobile = false;
+    #resolvedWidth = 'md';
     #bottomSheetRef;
     #dialogRef;
-    subcription = new Subscription();
-    constructor(ref, dialog, bottomSheet) {
-        this.ref = ref;
-        this.dialog = dialog;
-        this.bottomSheet = bottomSheet;
+    #dialog = inject(MatDialog);
+    #bottomSheet = inject(MatBottomSheet);
+    #destroyRef = inject(DestroyRef);
+    constructor() {
         this.#isMobile = SdUtilities.isMobile();
     }
-    ngOnInit() {
-        this.width = this.width || '80vw';
-        if (!this.#isMobile) {
-            switch (this.width) {
-                case 'lg':
-                    this.width = '80vw';
-                    break;
-                case 'md':
-                    this.width = '60vw';
-                    break;
-                case 'sm':
-                    this.width = '40vw';
-                    break;
-                case 'sx':
-                    this.width = '20vw';
-                    break;
-            }
+    #resolveWidth() {
+        const w = this.width() || '80vw';
+        if (this.#isMobile)
+            return w;
+        switch (w) {
+            case 'lg': return '80vw';
+            case 'md': return '60vw';
+            case 'sm': return '40vw';
+            case 'sx': return '20vw';
+            default: return w;
         }
     }
-    ngOnDestroy() {
-        this.subcription.unsubscribe();
-    }
     open = () => {
-        if (this.isOpened) {
+        if (this.isOpened()) {
             return;
         }
-        this.ref.markForCheck();
-        this.alreadyOpened = true;
-        this.isOpened = true;
-        if ((!this.view && this.#isMobile) || this.view === 'bottom-sheet') {
-            this.#bottomSheetRef = this.bottomSheet.open(this.templateRef);
-            this.subcription.add(this.#bottomSheetRef.afterDismissed().subscribe(() => {
-                this.isOpened = false;
+        this.alreadyOpened.set(true);
+        this.isOpened.set(true);
+        this.#resolvedWidth = this.#resolveWidth();
+        if ((!this.view() && this.#isMobile) || this.view() === 'bottom-sheet') {
+            this.#bottomSheetRef = this.#bottomSheet.open(this.templateRef(), {
+                panelClass: this.modalClass(),
+                disableClose: this.disableBackdropClose()
+            });
+            this.#bottomSheetRef.afterDismissed()
+                .pipe(takeUntilDestroyed(this.#destroyRef))
+                .subscribe(() => {
+                this.isOpened.set(false);
                 this.sdClosed.emit();
-            }));
+            });
         }
         else {
-            this.#dialogRef = this.dialog.open(this.templateRef, {
-                width: this.width,
-                maxWidth: this.width,
-                disableClose: true, // mặc định ko cho đóng modal khi click out side
+            this.#dialogRef = this.#dialog.open(this.templateRef(), {
+                width: this.#resolvedWidth,
+                maxWidth: this.#resolvedWidth,
+                panelClass: this.modalClass(),
+                disableClose: this.disableBackdropClose(),
             });
-            this.subcription.add(this.#dialogRef.afterClosed().subscribe(() => {
-                this.isOpened = false;
+            this.#dialogRef.afterClosed()
+                .pipe(takeUntilDestroyed(this.#destroyRef))
+                .subscribe(() => {
+                this.isOpened.set(false);
                 this.sdClosed.emit();
-            }));
+            });
         }
     };
     close = () => {
-        this.ref.markForCheck();
         this.#bottomSheetRef?.dismiss();
         this.#dialogRef?.close();
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdModal, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.MatDialog }, { token: i2.MatBottomSheet }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdModal, isStandalone: true, selector: "sd-modal", inputs: { title: "title", color: "color", width: "width", height: "height", view: "view", lazyLoadContent: "lazyLoadContent" }, outputs: { sdClosed: "sdClosed" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true }, { propertyName: "modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<ng-template #templateRef>\r\n  @if (!lazyLoadContent || alreadyOpened) {\r\n    <!-- Header -->\r\n    <!-- D\u00F9ng scss thu\u1EA7n -->\r\n    @if (title) {\r\n      <div class=\"d-flex align-items-center p-16\">\r\n        <div class=\"T18M\">{{ title }}</div>\r\n        <div class=\"d-flex align-items-center ml-auto\">\r\n          <ng-content select=\"[sdHeader]\"></ng-content>\r\n          <mat-icon class=\"text-secondary pointer\" fontIcon=\"close\" (click)=\"close()\"></mat-icon>\r\n        </div>\r\n      </div>\r\n    }\r\n    <!-- <mat-divider></mat-divider> -->\r\n    <!-- Body -->\r\n    <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh;\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <!-- Footer -->\r\n    <!-- <mat-divider></mat-divider> -->\r\n    <div class=\"d-flex align-items-center p-16\" #footer>\r\n      <ng-content select=\"[sdFooterLeft]\"></ng-content>\r\n      <div class=\"ml-auto\">\r\n        <ng-content select=\"[sdFooter]\"></ng-content>\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<!-- <ng-template #templateRef>\r\n  @if(!lazyLoadContent || alreadyOpened) {\r\n    <sd-modal-header *ngIf=\"title\">\r\n      <span [innerHtml]=\"title\"></span>\r\n      <div class=\"d-flex align-items-center\">\r\n        <ng-content select=\"[sdModalHeaderRight]\"></ng-content>\r\n        <button type=\"button\" (click)=\"close()\" mat-icon-button>\r\n          <mat-icon fontIcon=\"close\"></mat-icon>\r\n        </button>\r\n      </div>\r\n    </sd-modal-header>\r\n  }\r\n  <ng-container *ngIf=\"!lazyLoadContent || alreadyOpened\">\r\n    <sd-modal-header *ngIf=\"title\">\r\n      <span [innerHtml]=\"title\"></span>\r\n      <div class=\"d-flex align-items-center\">\r\n        <ng-content select=\"[sdModalHeaderRight]\"></ng-content>\r\n        <button type=\"button\" (click)=\"close()\" mat-icon-button>\r\n          <mat-icon fontIcon=\"close\"></mat-icon>\r\n        </button>\r\n      </div>\r\n    </sd-modal-header>\r\n    <div class=\"d-flex flex-column px-12 px-md-24 pb-6 overflow-auto w-full mh-full\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </ng-container>\r\n</ng-template> -->\r\n", styles: ["button:focus{outline:none!important}.mat-dialog-container{padding:0!important}.mat-dialog-container .mat-dialog-content{max-height:80vh}.mat-dialog-container .mat-dialog-actions{min-height:auto;margin-bottom:0;padding:0}.mat-bottom-sheet-container{max-height:\"inherit\"}sd-modal-header{padding:12px 24px;display:block;width:100%}@media(max-width:640px){sd-modal-header{padding:12px}}.cdk-global-overlay-wrapper .mat-bottom-sheet-container{padding:0;min-width:100vw;box-sizing:border-box;outline:0;max-height:80vh;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdModal, isStandalone: true, selector: "sd-modal", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, modalClass: { classPropertyName: "modalClass", publicName: "modalClass", isSignal: true, isRequired: false, transformFunction: null }, lazyLoadContent: { classPropertyName: "lazyLoadContent", publicName: "lazyLoadContent", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdClosed: "sdClosed" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }, { propertyName: "modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef>\r\n  <div class=\"sd-modal-root\"\r\n       [attr.data-autoId]=\"autoId()\"\r\n       [attr.data-opened]=\"dataOpened()\">\r\n    @if (!lazyLoadContent() || alreadyOpened()) {\r\n      <!-- Header -->\r\n      <!-- D\u00F9ng scss thu\u1EA7n -->\r\n      @if (title()) {\r\n        <div class=\"d-flex align-items-center p-16\">\r\n          <ng-content select=\"[sdHeaderLeft]\">\r\n            <div class=\"T18M\">{{ title() }}</div>\r\n          </ng-content>\r\n          <div class=\"d-flex align-items-center ml-auto\">\r\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n            <ng-content select=\"[sdHeader]\"></ng-content>\r\n            @if (!hideClose()) {\r\n              <mat-icon class=\"text-secondary cursor-pointer\" fontIcon=\"close\" (click)=\"close()\" [attr.data-autoId]=\"closeButtonAutoId()\"></mat-icon>\r\n            }\r\n          </div>\r\n        </div>\r\n      }\r\n      <!-- <mat-divider></mat-divider> -->\r\n      <!-- Body -->\r\n      <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n      <!-- Footer -->\r\n      <!-- <mat-divider></mat-divider> -->\r\n      <div class=\"d-flex align-items-center p-8\" #footer>\r\n        <ng-content select=\"[sdFooterLeft]\"></ng-content>\r\n        <div class=\"ml-auto\">\r\n          <ng-content select=\"[sdFooterRight]\"></ng-content>\r\n          <ng-content select=\"[sdFooter]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["button:focus{outline:none!important}.mat-dialog-container{padding:0!important}.mat-dialog-container .mat-dialog-content{max-height:80vh}.mat-dialog-container .mat-dialog-actions{min-height:auto;margin-bottom:0;padding:0}.mat-bottom-sheet-container{max-height:\"inherit\"}sd-modal-header{padding:12px 24px;display:block;width:100%}@media(max-width:640px){sd-modal-header{padding:12px}}.cdk-global-overlay-wrapper .mat-bottom-sheet-container{padding:0;min-width:100vw;box-sizing:border-box;outline:0;max-height:80vh;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdModal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdModal, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-modal', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, MatBottomSheetModule, MatDialogModule, MatDividerModule, MatButtonModule], template: "<ng-template #templateRef>\r\n  @if (!lazyLoadContent || alreadyOpened) {\r\n    <!-- Header -->\r\n    <!-- D\u00F9ng scss thu\u1EA7n -->\r\n    @if (title) {\r\n      <div class=\"d-flex align-items-center p-16\">\r\n        <div class=\"T18M\">{{ title }}</div>\r\n        <div class=\"d-flex align-items-center ml-auto\">\r\n          <ng-content select=\"[sdHeader]\"></ng-content>\r\n          <mat-icon class=\"text-secondary pointer\" fontIcon=\"close\" (click)=\"close()\"></mat-icon>\r\n        </div>\r\n      </div>\r\n    }\r\n    <!-- <mat-divider></mat-divider> -->\r\n    <!-- Body -->\r\n    <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh;\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <!-- Footer -->\r\n    <!-- <mat-divider></mat-divider> -->\r\n    <div class=\"d-flex align-items-center p-16\" #footer>\r\n      <ng-content select=\"[sdFooterLeft]\"></ng-content>\r\n      <div class=\"ml-auto\">\r\n        <ng-content select=\"[sdFooter]\"></ng-content>\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<!-- <ng-template #templateRef>\r\n  @if(!lazyLoadContent || alreadyOpened) {\r\n    <sd-modal-header *ngIf=\"title\">\r\n      <span [innerHtml]=\"title\"></span>\r\n      <div class=\"d-flex align-items-center\">\r\n        <ng-content select=\"[sdModalHeaderRight]\"></ng-content>\r\n        <button type=\"button\" (click)=\"close()\" mat-icon-button>\r\n          <mat-icon fontIcon=\"close\"></mat-icon>\r\n        </button>\r\n      </div>\r\n    </sd-modal-header>\r\n  }\r\n  <ng-container *ngIf=\"!lazyLoadContent || alreadyOpened\">\r\n    <sd-modal-header *ngIf=\"title\">\r\n      <span [innerHtml]=\"title\"></span>\r\n      <div class=\"d-flex align-items-center\">\r\n        <ng-content select=\"[sdModalHeaderRight]\"></ng-content>\r\n        <button type=\"button\" (click)=\"close()\" mat-icon-button>\r\n          <mat-icon fontIcon=\"close\"></mat-icon>\r\n        </button>\r\n      </div>\r\n    </sd-modal-header>\r\n    <div class=\"d-flex flex-column px-12 px-md-24 pb-6 overflow-auto w-full mh-full\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </ng-container>\r\n</ng-template> -->\r\n", styles: ["button:focus{outline:none!important}.mat-dialog-container{padding:0!important}.mat-dialog-container .mat-dialog-content{max-height:80vh}.mat-dialog-container .mat-dialog-actions{min-height:auto;margin-bottom:0;padding:0}.mat-bottom-sheet-container{max-height:\"inherit\"}sd-modal-header{padding:12px 24px;display:block;width:100%}@media(max-width:640px){sd-modal-header{padding:12px}}.cdk-global-overlay-wrapper .mat-bottom-sheet-container{padding:0;min-width:100vw;box-sizing:border-box;outline:0;max-height:80vh;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.MatDialog }, { type: i2.MatBottomSheet }], propDecorators: { templateRef: [{
-                type: ViewChild,
-                args: ['templateRef']
-            }], title: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], view: [{
-                type: Input
-            }], lazyLoadContent: [{
-                type: Input
-            }], sdClosed: [{
-                type: Output
-            }], modal: [{
-                type: ViewChild,
-                args: ['modal']
-            }] } });
-
-// export * from './src/modal/modal-header/modal-header.component';
-// export * from './src/modal/modal-body/modal-body.component';
-// export * from './src/modal/modal-footer/modal-footer.component';
+            args: [{ selector: 'sd-modal', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, MatBottomSheetModule, MatDialogModule, MatDividerModule, MatButtonModule], template: "<ng-template #templateRef>\r\n  <div class=\"sd-modal-root\"\r\n       [attr.data-autoId]=\"autoId()\"\r\n       [attr.data-opened]=\"dataOpened()\">\r\n    @if (!lazyLoadContent() || alreadyOpened()) {\r\n      <!-- Header -->\r\n      <!-- D\u00F9ng scss thu\u1EA7n -->\r\n      @if (title()) {\r\n        <div class=\"d-flex align-items-center p-16\">\r\n          <ng-content select=\"[sdHeaderLeft]\">\r\n            <div class=\"T18M\">{{ title() }}</div>\r\n          </ng-content>\r\n          <div class=\"d-flex align-items-center ml-auto\">\r\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n            <ng-content select=\"[sdHeader]\"></ng-content>\r\n            @if (!hideClose()) {\r\n              <mat-icon class=\"text-secondary cursor-pointer\" fontIcon=\"close\" (click)=\"close()\" [attr.data-autoId]=\"closeButtonAutoId()\"></mat-icon>\r\n            }\r\n          </div>\r\n        </div>\r\n      }\r\n      <!-- <mat-divider></mat-divider> -->\r\n      <!-- Body -->\r\n      <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n      <!-- Footer -->\r\n      <!-- <mat-divider></mat-divider> -->\r\n      <div class=\"d-flex align-items-center p-8\" #footer>\r\n        <ng-content select=\"[sdFooterLeft]\"></ng-content>\r\n        <div class=\"ml-auto\">\r\n          <ng-content select=\"[sdFooterRight]\"></ng-content>\r\n          <ng-content select=\"[sdFooter]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["button:focus{outline:none!important}.mat-dialog-container{padding:0!important}.mat-dialog-container .mat-dialog-content{max-height:80vh}.mat-dialog-container .mat-dialog-actions{min-height:auto;margin-bottom:0;padding:0}.mat-bottom-sheet-container{max-height:\"inherit\"}sd-modal-header{padding:12px 24px;display:block;width:100%}@media(max-width:640px){sd-modal-header{padding:12px}}.cdk-global-overlay-wrapper .mat-bottom-sheet-container{padding:0;min-width:100vw;box-sizing:border-box;outline:0;max-height:80vh;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}\n"] }]
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.