npm - @sd-angular/core - Versions diffs - 19.0.0-beta.6 → 19.0.0-beta.60 - Mend

@sd-angular/core 19.0.0-beta.6 → 19.0.0-beta.60

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 (219) hide show

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

@@ -0,0 +1,326 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, forwardRef, Input, Output, 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;
+    /** 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.17", ngImport: i0, type: SdMiniEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SdMiniEditor, isStandalone: true, selector: "sd-mini-editor", inputs: { option: "option", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange", contentChange: "contentChange", blur: "blur", focus: "focus" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SdMiniEditor),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"sd-mini-editor\" [style.height]=\"option.height || 'auto'\" [style.max-height]=\"option.maxHeight\">\r\n  <ckeditor [editor]=\"Editor\" [config]=\"editorConfig\" [disabled]=\"disabled\" (ready)=\"onReady($event)\"> </ckeditor>\r\n</div>\r\n", styles: [".sd-mini-editor{display:block;width:100%;overflow-y:auto}::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-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.17", 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: "<div class=\"sd-mini-editor\" [style.height]=\"option.height || 'auto'\" [style.max-height]=\"option.maxHeight\">\r\n  <ckeditor [editor]=\"Editor\" [config]=\"editorConfig\" [disabled]=\"disabled\" (ready)=\"onReady($event)\"> </ckeditor>\r\n</div>\r\n", styles: [".sd-mini-editor{display:block;width:100%;overflow-y:auto}::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-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 }]
+            }], 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 ADDED Viewed

@@ -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, 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 /** 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","<div class=\"sd-mini-editor\" [style.height]=\"option.height || 'auto'\" [style.max-height]=\"option.maxHeight\">\r\n <ckeditor [editor]=\"Editor\" [config]=\"editorConfig\" [disabled]=\"disabled\" (ready)=\"onReady($event)\"> </ckeditor>\r\n</div>\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-preview.mjs CHANGED Viewed

@@ -93,7 +93,7 @@ class SdPreviewImage {
         this.activeIndex = 0;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdPreviewImage, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdPreviewImage, isStandalone: true, selector: "sd-preview-image", outputs: { close: "close" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "<sd-modal [title]=\"title\" (sdClosed)=\"close.emit()\" #modal>\r\n  <div class=\"p-16\" style=\"overflow: hidden; height: 100%\">\r\n    <!-- Main image -->\r\n    @if (images.length) {\r\n      <div style=\"gap: 8px;\" class=\"image-gallery\">\r\n        <div class=\"thumbnail-container\">\r\n          @for (image of images; track image.id; let i = $index) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"thumbnail-wrapper\"\r\n              (click)=\"onClickThumbnailImage(i)\"\r\n              [ngStyle]=\"{\r\n                border: activeIndex === i ? '2px solid #2962ff' : 'none'\r\n              }\">\r\n              @if (image.src) {\r\n                <img fill loading=\"lazy\" [ngSrc]=\"image.src\" alt=\"thumbnail\" [id]=\"image.id\" class=\"thumbnail-img\" />\r\n              } @else {\r\n                <img fill loading=\"lazy\" [src]=\"image.blobSrc\" alt=\"thumbnail\" [id]=\"image.id\" class=\"thumbnail-img\" />\r\n              }\r\n            </button>\r\n          }\r\n        </div>\r\n        <div class=\"main-image-container\" #mainImage>\r\n          @let activedImage = images[activeIndex];\r\n          @if (activedImage.src) {\r\n            <img fill priority [ngSrc]=\"activedImage.src\" class=\"main-image\" alt=\"Main display image\" />\r\n          } @else {\r\n            <img fill priority [src]=\"activedImage.blobSrc!\" class=\"main-image\" alt=\"Main display image\" />\r\n          }\r\n          <sd-button prefixIcon=\"arrow_forward_ios\" class=\"next-icon\" (click)=\"updateCurrentImage(1)\"></sd-button>\r\n          <sd-button prefixIcon=\"arrow_back_ios_new\" class=\"back-icon\" (click)=\"updateCurrentImage(-1)\"></sd-button>\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <div class=\"no-image d-flex justify-content-center align-items-center flex-column m-20\" style=\"height: 80%\">\r\n        <i class=\"icon-no-image mb-16\"></i>\r\n        <div>Kh\u00F4ng c\u00F3 th\u00F4ng tin \u1EA3nh</div>\r\n      </div>\r\n    }\r\n  </div>\r\n</sd-modal>\r\n", styles: [".image-gallery{display:flex;width:100%;max-height:60vh;min-height:60vh}.image-gallery .main-image-container{flex:1;position:relative}.image-gallery .main-image-container .next-icon{position:absolute;top:45%;right:10px;cursor:pointer;color:#000;z-index:9999}.image-gallery .main-image-container .back-icon{position:absolute;top:45%;left:0;cursor:pointer;color:#000;z-index:9999}.image-gallery .thumbnail-container{width:120px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;box-sizing:border-box}.image-gallery .thumbnail-wrapper{position:relative;width:100px;aspect-ratio:1;flex:0 0 auto;overflow:hidden;padding:0;border:none;background:transparent}.image-gallery .thumbnail-wrapper .thumbnail-img{object-fit:cover;width:100%;height:100%;display:block}.image-gallery .main-image{object-fit:contain;width:100%;height:100%;display:block}\n"], dependencies: [{ kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "lazyLoadContent"], outputs: ["sdClosed"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "title", "width", "size", "tooltip", "prefixIcon", "suffixIcon", "fontSet", "disabled", "loading"], outputs: ["click"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdPreviewImage, isStandalone: true, selector: "sd-preview-image", outputs: { close: "close" }, viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }], ngImport: i0, template: "<sd-modal [title]=\"title\" (sdClosed)=\"close.emit()\" #modal>\r\n  <div class=\"p-16\" style=\"overflow: hidden; height: 100%\">\r\n    <!-- Main image -->\r\n    @if (images.length) {\r\n      <div style=\"gap: 8px;\" class=\"image-gallery\">\r\n        <div class=\"thumbnail-container\">\r\n          @for (image of images; track image.id; let i = $index) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"thumbnail-wrapper\"\r\n              (click)=\"onClickThumbnailImage(i)\"\r\n              [ngStyle]=\"{\r\n                border: activeIndex === i ? '2px solid #2962ff' : 'none'\r\n              }\">\r\n              @if (image.src) {\r\n                <img fill loading=\"lazy\" [ngSrc]=\"image.src\" alt=\"thumbnail\" [id]=\"image.id\" class=\"thumbnail-img\" />\r\n              } @else {\r\n                <img fill loading=\"lazy\" [src]=\"image.blobSrc\" alt=\"thumbnail\" [id]=\"image.id\" class=\"thumbnail-img\" />\r\n              }\r\n            </button>\r\n          }\r\n        </div>\r\n        <div class=\"main-image-container\" #mainImage>\r\n          @let activedImage = images[activeIndex];\r\n          @if (activedImage.src) {\r\n            <img fill priority [ngSrc]=\"activedImage.src\" class=\"main-image\" alt=\"Main display image\" />\r\n          } @else {\r\n            <img fill priority [src]=\"activedImage.blobSrc!\" class=\"main-image\" alt=\"Main display image\" />\r\n          }\r\n          <sd-button prefixIcon=\"arrow_forward_ios\" class=\"next-icon\" (click)=\"updateCurrentImage(1)\"></sd-button>\r\n          <sd-button prefixIcon=\"arrow_back_ios_new\" class=\"back-icon\" (click)=\"updateCurrentImage(-1)\"></sd-button>\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <div class=\"no-image d-flex justify-content-center align-items-center flex-column m-20\" style=\"height: 80%\">\r\n        <i class=\"icon-no-image mb-16\"></i>\r\n        <div>Kh\u00F4ng c\u00F3 th\u00F4ng tin \u1EA3nh</div>\r\n      </div>\r\n    }\r\n  </div>\r\n</sd-modal>\r\n", styles: [".image-gallery{display:flex;width:100%;max-height:60vh;min-height:60vh}.image-gallery .main-image-container{flex:1;position:relative}.image-gallery .main-image-container .next-icon{position:absolute;top:45%;right:10px;cursor:pointer;color:#000;z-index:9999}.image-gallery .main-image-container .back-icon{position:absolute;top:45%;left:0;cursor:pointer;color:#000;z-index:9999}.image-gallery .thumbnail-container{width:120px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;box-sizing:border-box}.image-gallery .thumbnail-wrapper{position:relative;width:100px;aspect-ratio:1;flex:0 0 auto;overflow:hidden;padding:0;border:none;background:transparent}.image-gallery .thumbnail-wrapper .thumbnail-img{object-fit:cover;width:100%;height:100%;display:block}.image-gallery .main-image{object-fit:contain;width:100%;height:100%;display:block}\n"], dependencies: [{ kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "lazyLoadContent"], outputs: ["sdClosed"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdPreviewImage, decorators: [{
             type: Component,

package/fesm2022/sd-angular-core-components-preview.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-angular-core-components-preview.mjs","sources":["../../../projects/sd-angular/components/preview/src/preview-image/preview-image.component.ts","../../../projects/sd-angular/components/preview/src/preview-image/preview-image.component.html","../../../projects/sd-angular/components/preview/sd-angular-core-components-preview.ts"],"sourcesContent":["import { CommonModule, NgOptimizedImage } from '@angular/common';\r\nimport { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';\r\nimport { SdButton } from '@sd-angular/core/components/button';\r\nimport { SdModal } from '@sd-angular/core/components/modal';\r\nimport * as uuid from 'uuid';\r\n\r\ninterface Image {\r\n id: string;\r\n // Vì NgOptimizedImage không thể sử dụng với blobSrc nên đối với url từ cdn sẽ vẫn lưu ở src\r\n blobSrc: string;\r\n src?: string;\r\n name: string;\r\n size: number;\r\n}\r\n\r\n@Component({\r\n selector: 'sd-preview-image',\r\n imports: [SdModal, SdButton, CommonModule, NgOptimizedImage],\r\n templateUrl: './preview-image.component.html',\r\n styleUrl: './preview-image.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SdPreviewImage {\r\n @ViewChild(SdModal) modal!: SdModal;\r\n @Output() close = new EventEmitter<void>();\r\n\r\n title: string = 'Xem ảnh';\r\n thumbnailPosition: 'right' \| 'left' \| 'bottom' \| 'top' = 'right';\r\n activeIndex = 0;\r\n images: Image[] = [];\r\n constructor(private cd: ChangeDetectorRef) {}\r\n\r\n #loadImages = async (urlOrFiles: (string \| File)[]) => {\r\n urlOrFiles = urlOrFiles.filter(url => !!url);\r\n // Xử lý nếu là url thì thực hiện fetch lấy blob rồi từ blob => file\r\n const promises = urlOrFiles.map<Promise<Image \| null>>(async urlOrFile => {\r\n if (typeof urlOrFile === 'string') {\r\n return fetch(urlOrFile)\r\n .then(async r => {\r\n const blob = await r.blob();\r\n // Lấy filename dựa vào url src\r\n const baseSrc = urlOrFile.split('?')[0];\r\n const filename = baseSrc.substring(baseSrc.lastIndexOf('/') + 1);\r\n const file = new File([blob], filename);\r\n const image: Image = {\r\n id: uuid.v4(),\r\n blobSrc: URL.createObjectURL(file!),\r\n src: urlOrFile,\r\n name: file!.name,\r\n size: file!.size,\r\n };\r\n return image;\r\n })\r\n .catch(err => {\r\n console.error(err);\r\n return null;\r\n });\r\n } else {\r\n if (urlOrFile.type.split('/')[0] === 'image') {\r\n const image: Image = {\r\n id: uuid.v4(),\r\n blobSrc: URL.createObjectURL(urlOrFile),\r\n name: urlOrFile.name,\r\n size: urlOrFile.size,\r\n };\r\n return image;\r\n }\r\n return null;\r\n }\r\n });\r\n this.images = (await Promise.all(promises)).filter(image => image !== null);\r\n };\r\n\r\n // Nên sử dụng urlOrFiles ở tham số khi open thay vì dùng @Input để component sử dụng sẽ chỉ cần map ở hàm khi gọi open thay vì phải mất công map mọi lúc để binding vào @Input\r\n open = async (urlOrFiles: (string \| File)[] \| undefined \| null) => {\r\n if (!Array.isArray(urlOrFiles)) {\r\n return;\r\n }\r\n await this.#loadImages(urlOrFiles);\r\n this.#reset();\r\n this.modal?.open();\r\n this.cd.markForCheck();\r\n };\r\n\r\n onClickThumbnailImage = (index: number) => {\r\n this.activeIndex = index;\r\n this.cd.markForCheck();\r\n };\r\n\r\n updateCurrentImage = (direction: 1 \| -1) => {\r\n this.activeIndex = (this.activeIndex + direction + this.images.length) % this.images.length;\r\n this.#scrollView(this.activeIndex, direction === 1 ? 'start' : 'end');\r\n this.cd.markForCheck();\r\n };\r\n\r\n onClose = () => {\r\n this.close.emit();\r\n };\r\n\r\n #scrollView = (index: number, type?: 'center' \| 'end' \| 'nearest' \| 'start') => {\r\n const nameId: string = 'thumbnailImage' + index;\r\n const element = document.getElementById(nameId);\r\n if (!element) {\r\n return;\r\n }\r\n const blockType: ScrollLogicalPosition = type \|\| 'start';\r\n element.scrollIntoView({ behavior: 'smooth', block: blockType });\r\n };\r\n\r\n #reset = () => {\r\n this.activeIndex = 0;\r\n };\r\n}\r\n","<sd-modal [title]=\"title\" (sdClosed)=\"close.emit()\" #modal>\r\n <div class=\"p-16\" style=\"overflow: hidden; height: 100%\">\r\n <!-- Main image -->\r\n @if (images.length) {\r\n <div style=\"gap: 8px;\" class=\"image-gallery\">\r\n <div class=\"thumbnail-container\">\r\n @for (image of images; track image.id; let i = $index) {\r\n <button\r\n type=\"button\"\r\n class=\"thumbnail-wrapper\"\r\n (click)=\"onClickThumbnailImage(i)\"\r\n [ngStyle]=\"{\r\n border: activeIndex === i ? '2px solid #2962ff' : 'none'\r\n }\">\r\n @if (image.src) {\r\n <img fill loading=\"lazy\" [ngSrc]=\"image.src\" alt=\"thumbnail\" [id]=\"image.id\" class=\"thumbnail-img\" />\r\n } @else {\r\n <img fill loading=\"lazy\" [src]=\"image.blobSrc\" alt=\"thumbnail\" [id]=\"image.id\" class=\"thumbnail-img\" />\r\n }\r\n </button>\r\n }\r\n </div>\r\n <div class=\"main-image-container\" #mainImage>\r\n @let activedImage = images[activeIndex];\r\n @if (activedImage.src) {\r\n <img fill priority [ngSrc]=\"activedImage.src\" class=\"main-image\" alt=\"Main display image\" />\r\n } @else {\r\n <img fill priority [src]=\"activedImage.blobSrc!\" class=\"main-image\" alt=\"Main display image\" />\r\n }\r\n <sd-button prefixIcon=\"arrow_forward_ios\" class=\"next-icon\" (click)=\"updateCurrentImage(1)\"></sd-button>\r\n <sd-button prefixIcon=\"arrow_back_ios_new\" class=\"back-icon\" (click)=\"updateCurrentImage(-1)\"></sd-button>\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"no-image d-flex justify-content-center align-items-center flex-column m-20\" style=\"height: 80%\">\r\n <i class=\"icon-no-image mb-16\"></i>\r\n <div>Không có thông tin ảnh</div>\r\n </div>\r\n }\r\n </div>\r\n</sd-modal>\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"sd-angular-core-components-preview.mjs","sources":["../../../projects/sd-angular/components/preview/src/preview-image/preview-image.component.ts","../../../projects/sd-angular/components/preview/src/preview-image/preview-image.component.html","../../../projects/sd-angular/components/preview/sd-angular-core-components-preview.ts"],"sourcesContent":["import { CommonModule, NgOptimizedImage } from '@angular/common';\r\nimport { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';\r\nimport { SdButton } from '@sd-angular/core/components/button';\r\nimport { SdModal } from '@sd-angular/core/components/modal';\r\nimport * as uuid from 'uuid';\r\n\r\ninterface Image {\r\n id: string;\r\n // Vì NgOptimizedImage không thể sử dụng với blobSrc nên đối với url từ cdn sẽ vẫn lưu ở src\r\n blobSrc: string;\r\n src?: string;\r\n name: string;\r\n size: number;\r\n}\r\n\r\n@Component({\r\n selector: 'sd-preview-image',\r\n imports: [SdModal, SdButton, CommonModule, NgOptimizedImage],\r\n templateUrl: './preview-image.component.html',\r\n styleUrl: './preview-image.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SdPreviewImage {\r\n @ViewChild(SdModal) modal!: SdModal;\r\n @Output() close = new EventEmitter<void>();\r\n\r\n title: string = 'Xem ảnh';\r\n thumbnailPosition: 'right' \| 'left' \| 'bottom' \| 'top' = 'right';\r\n activeIndex = 0;\r\n images: Image[] = [];\r\n constructor(private cd: ChangeDetectorRef) {}\r\n\r\n #loadImages = async (urlOrFiles: (string \| File)[]) => {\r\n urlOrFiles = urlOrFiles.filter(url => !!url);\r\n // Xử lý nếu là url thì thực hiện fetch lấy blob rồi từ blob => file\r\n const promises = urlOrFiles.map<Promise<Image \| null>>(async urlOrFile => {\r\n if (typeof urlOrFile === 'string') {\r\n return fetch(urlOrFile)\r\n .then(async r => {\r\n const blob = await r.blob();\r\n // Lấy filename dựa vào url src\r\n const baseSrc = urlOrFile.split('?')[0];\r\n const filename = baseSrc.substring(baseSrc.lastIndexOf('/') + 1);\r\n const file = new File([blob], filename);\r\n const image: Image = {\r\n id: uuid.v4(),\r\n blobSrc: URL.createObjectURL(file!),\r\n src: urlOrFile,\r\n name: file!.name,\r\n size: file!.size,\r\n };\r\n return image;\r\n })\r\n .catch(err => {\r\n console.error(err);\r\n return null;\r\n });\r\n } else {\r\n if (urlOrFile.type.split('/')[0] === 'image') {\r\n const image: Image = {\r\n id: uuid.v4(),\r\n blobSrc: URL.createObjectURL(urlOrFile),\r\n name: urlOrFile.name,\r\n size: urlOrFile.size,\r\n };\r\n return image;\r\n }\r\n return null;\r\n }\r\n });\r\n this.images = (await Promise.all(promises)).filter(image => image !== null);\r\n };\r\n\r\n // Nên sử dụng urlOrFiles ở tham số khi open thay vì dùng @Input để component sử dụng sẽ chỉ cần map ở hàm khi gọi open thay vì phải mất công map mọi lúc để binding vào @Input\r\n open = async (urlOrFiles: (string \| File)[] \| undefined \| null) => {\r\n if (!Array.isArray(urlOrFiles)) {\r\n return;\r\n }\r\n await this.#loadImages(urlOrFiles);\r\n this.#reset();\r\n this.modal?.open();\r\n this.cd.markForCheck();\r\n };\r\n\r\n onClickThumbnailImage = (index: number) => {\r\n this.activeIndex = index;\r\n this.cd.markForCheck();\r\n };\r\n\r\n updateCurrentImage = (direction: 1 \| -1) => {\r\n this.activeIndex = (this.activeIndex + direction + this.images.length) % this.images.length;\r\n this.#scrollView(this.activeIndex, direction === 1 ? 'start' : 'end');\r\n this.cd.markForCheck();\r\n };\r\n\r\n onClose = () => {\r\n this.close.emit();\r\n };\r\n\r\n #scrollView = (index: number, type?: 'center' \| 'end' \| 'nearest' \| 'start') => {\r\n const nameId: string = 'thumbnailImage' + index;\r\n const element = document.getElementById(nameId);\r\n if (!element) {\r\n return;\r\n }\r\n const blockType: ScrollLogicalPosition = type \|\| 'start';\r\n element.scrollIntoView({ behavior: 'smooth', block: blockType });\r\n };\r\n\r\n #reset = () => {\r\n this.activeIndex = 0;\r\n };\r\n}\r\n","<sd-modal [title]=\"title\" (sdClosed)=\"close.emit()\" #modal>\r\n <div class=\"p-16\" style=\"overflow: hidden; height: 100%\">\r\n <!-- Main image -->\r\n @if (images.length) {\r\n <div style=\"gap: 8px;\" class=\"image-gallery\">\r\n <div class=\"thumbnail-container\">\r\n @for (image of images; track image.id; let i = $index) {\r\n <button\r\n type=\"button\"\r\n class=\"thumbnail-wrapper\"\r\n (click)=\"onClickThumbnailImage(i)\"\r\n [ngStyle]=\"{\r\n border: activeIndex === i ? '2px solid #2962ff' : 'none'\r\n }\">\r\n @if (image.src) {\r\n <img fill loading=\"lazy\" [ngSrc]=\"image.src\" alt=\"thumbnail\" [id]=\"image.id\" class=\"thumbnail-img\" />\r\n } @else {\r\n <img fill loading=\"lazy\" [src]=\"image.blobSrc\" alt=\"thumbnail\" [id]=\"image.id\" class=\"thumbnail-img\" />\r\n }\r\n </button>\r\n }\r\n </div>\r\n <div class=\"main-image-container\" #mainImage>\r\n @let activedImage = images[activeIndex];\r\n @if (activedImage.src) {\r\n <img fill priority [ngSrc]=\"activedImage.src\" class=\"main-image\" alt=\"Main display image\" />\r\n } @else {\r\n <img fill priority [src]=\"activedImage.blobSrc!\" class=\"main-image\" alt=\"Main display image\" />\r\n }\r\n <sd-button prefixIcon=\"arrow_forward_ios\" class=\"next-icon\" (click)=\"updateCurrentImage(1)\"></sd-button>\r\n <sd-button prefixIcon=\"arrow_back_ios_new\" class=\"back-icon\" (click)=\"updateCurrentImage(-1)\"></sd-button>\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"no-image d-flex justify-content-center align-items-center flex-column m-20\" style=\"height: 80%\">\r\n <i class=\"icon-no-image mb-16\"></i>\r\n <div>Không có thông tin ảnh</div>\r\n </div>\r\n }\r\n </div>\r\n</sd-modal>\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-section.mjs CHANGED Viewed

@@ -1,62 +1,44 @@
 import * as i0 from '@angular/core';
-import { Input, Component } from '@angular/core';
+import { inject, ElementRef, input, model, booleanAttribute, effect, Component } from '@angular/core';
 import * as i1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { SdBaseSecureComponent } from '@sd-angular/core/components/base';
 /* eslint-disable @angular-eslint/no-input-rename */
 class SdSection extends SdBaseSecureComponent {
-    title; // Tiêu đề của section
-    subTitle; // sub Tiêu đề của section
-    icon;
-    iconColor = 'primary'; // Màu sắc của icon, mặc định là 'primary'
-    collapsed = false;
-    set _collapsed(val) {
-        this.collapsed = val === '' || !!val;
-    }
-    collapsable = false;
-    set _collapsable(val) {
-        this.collapsable = val === '' || !!val;
-    }
-    hideHeader = false;
-    set _hideHeader(val) {
-        this.hideHeader = val === '' || !!val;
+    el = inject(ElementRef);
+    title = input('', { alias: 'title' });
+    subTitle = input('', { alias: 'subTitle' });
+    icon = input(null, { alias: 'icon' });
+    iconColor = input('primary', { alias: 'iconColor' });
+    collapsed = model(false, { alias: 'collapsed' });
+    collapsable = input(false, { transform: booleanAttribute, alias: 'collapsable' });
+    hideHeader = input(false, { transform: booleanAttribute, alias: 'hideHeader' });
+    constructor() {
+        super();
+        effect(() => {
+            if (this.title()) {
+                this.el.nativeElement.removeAttribute('title');
+            }
+        });
     }
     toggleCollapse = () => {
-        if (this.collapsable) {
-            this.collapsed = !this.collapsed;
+        if (this.collapsable()) {
+            this.collapsed.set(!this.collapsed());
         }
         else {
-            if (this.collapsed) {
-                this.collapsed = false;
+            if (this.collapsed()) {
+                this.collapsed.set(false);
             }
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSection, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdSection, isStandalone: true, selector: "sd-section", inputs: { title: "title", subTitle: "subTitle", icon: "icon", iconColor: "iconColor", _collapsed: ["collapsed", "_collapsed"], _collapsable: ["collapsable", "_collapsable"], _hideHeader: ["hideHeader", "_hideHeader"] }, usesInheritance: true, ngImport: i0, template: "<div class=\"rounded-8 bg-white\" [class]=\"{ 'c-shadow-section': !collapsed }\">\r\n  @if (!hideHeader) {\r\n    <div\r\n      class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\r\n      (click)=\"toggleCollapse()\"\r\n      aria-hidden=\"true\">\r\n      <div class=\"d-flex align-items-center\">\r\n        @if (icon) {\r\n          <span\r\n            class=\"mr-8 material-icons-outlined\"\r\n            [class.text-primary]=\"iconColor === 'primary'\"\r\n            [class.text-secondary]=\"iconColor === 'secondary'\"\r\n            [class.text-error]=\"iconColor === 'error'\"\r\n            [class.text-warning]=\"iconColor === 'warning'\"\r\n            [class.text-success]=\"iconColor === 'success'\">\r\n            {{ icon }}\r\n          </span>\r\n        }\r\n        <div>\r\n          @if (title) {\r\n            <div class=\"T16M\">{{ title }}</div>\r\n          }\r\n          @if (subTitle) {\r\n            <div class=\"T12R text-secondary\">{{ subTitle }}</div>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n        @if (collapsable) {\r\n          <div class=\"d-flex align-items-center\">\r\n            @if (collapsed) {\r\n              <mat-icon>expand_more</mat-icon>\r\n            } @else {\r\n              <mat-icon>expand_less</mat-icon>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (!collapsed || hideHeader) {\r\n    <!-- N\u1EBFu header b\u1ECB \u1EA9n th\u00EC kh\u00F4ng c\u1EA7n border top -->\r\n    <div class=\"p-16 no-padding\" [style.border-top]=\"hideHeader ? 'none' : '1px solid #e6e6e6'\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{width:100%;display:block}.c-shadow-section{box-shadow:-1px 0 #f2f2f2 inset,1px 0 #f2f2f2 inset,0 1px #f2f2f2 inset,0 -1px #f2f2f2 inset,0 1px 2px #2f31361a}.cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdSection, isStandalone: true, selector: "sd-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, collapsable: { classPropertyName: "collapsable", publicName: "collapsable", isSignal: true, isRequired: false, transformFunction: null }, hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"rounded-8 bg-white\" [class]=\"{ 'c-shadow-section': !collapsed() }\">\r\n  @if (!hideHeader()) {\r\n    <div\r\n      class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\r\n      (click)=\"toggleCollapse()\"\r\n      aria-hidden=\"true\">\r\n      <div class=\"d-flex align-items-center\">\r\n        <ng-content select=\"[sdHeaderLeft]\">\r\n          @if (icon()) {\r\n            <span\r\n              class=\"mr-8 material-icons-outlined\"\r\n              [class.text-primary]=\"iconColor() === 'primary'\"\r\n              [class.text-secondary]=\"iconColor() === 'secondary'\"\r\n              [class.text-error]=\"iconColor() === 'error'\"\r\n              [class.text-warning]=\"iconColor() === 'warning'\"\r\n              [class.text-success]=\"iconColor() === 'success'\">\r\n              {{ icon() }}\r\n            </span>\r\n          }\r\n          <div>\r\n            @if (title()) {\r\n              <div class=\"T16M\">{{ title() }}</div>\r\n            }\r\n            @if (subTitle()) {\r\n              <div class=\"T12R text-secondary\">{{ subTitle() }}</div>\r\n            }\r\n          </div>\r\n        </ng-content>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n        @if (collapsable()) {\r\n          <div class=\"d-flex align-items-center\">\r\n            @if (collapsed()) {\r\n              <mat-icon>expand_more</mat-icon>\r\n            } @else {\r\n              <mat-icon>expand_less</mat-icon>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (!collapsed() || hideHeader()) {\r\n    <!-- N\u1EBFu header b\u1ECB \u1EA9n th\u00EC kh\u00F4ng c\u1EA7n border top -->\r\n    <div class=\"p-16 no-padding\" [style.border-top]=\"hideHeader() ? 'none' : '1px solid #e6e6e6'\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{width:100%;display:block}.c-shadow-section{box-shadow:-1px 0 #f2f2f2 inset,1px 0 #f2f2f2 inset,0 1px #f2f2f2 inset,0 -1px #f2f2f2 inset,0 1px 2px #2f31361a}.cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSection, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-section', imports: [MatIconModule], template: "<div class=\"rounded-8 bg-white\" [class]=\"{ 'c-shadow-section': !collapsed }\">\r\n  @if (!hideHeader) {\r\n    <div\r\n      class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\r\n      (click)=\"toggleCollapse()\"\r\n      aria-hidden=\"true\">\r\n      <div class=\"d-flex align-items-center\">\r\n        @if (icon) {\r\n          <span\r\n            class=\"mr-8 material-icons-outlined\"\r\n            [class.text-primary]=\"iconColor === 'primary'\"\r\n            [class.text-secondary]=\"iconColor === 'secondary'\"\r\n            [class.text-error]=\"iconColor === 'error'\"\r\n            [class.text-warning]=\"iconColor === 'warning'\"\r\n            [class.text-success]=\"iconColor === 'success'\">\r\n            {{ icon }}\r\n          </span>\r\n        }\r\n        <div>\r\n          @if (title) {\r\n            <div class=\"T16M\">{{ title }}</div>\r\n          }\r\n          @if (subTitle) {\r\n            <div class=\"T12R text-secondary\">{{ subTitle }}</div>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n        @if (collapsable) {\r\n          <div class=\"d-flex align-items-center\">\r\n            @if (collapsed) {\r\n              <mat-icon>expand_more</mat-icon>\r\n            } @else {\r\n              <mat-icon>expand_less</mat-icon>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (!collapsed || hideHeader) {\r\n    <!-- N\u1EBFu header b\u1ECB \u1EA9n th\u00EC kh\u00F4ng c\u1EA7n border top -->\r\n    <div class=\"p-16 no-padding\" [style.border-top]=\"hideHeader ? 'none' : '1px solid #e6e6e6'\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{width:100%;display:block}.c-shadow-section{box-shadow:-1px 0 #f2f2f2 inset,1px 0 #f2f2f2 inset,0 1px #f2f2f2 inset,0 -1px #f2f2f2 inset,0 1px 2px #2f31361a}.cursor-pointer{cursor:pointer}\n"] }]
-        }], propDecorators: { title: [{
-                type: Input,
-                args: [{ required: true }]
-            }], subTitle: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], iconColor: [{
-                type: Input
-            }], _collapsed: [{
-                type: Input,
-                args: ['collapsed']
-            }], _collapsable: [{
-                type: Input,
-                args: ['collapsable']
-            }], _hideHeader: [{
-                type: Input,
-                args: ['hideHeader']
-            }] } });
+            args: [{ selector: 'sd-section', imports: [MatIconModule], template: "<div class=\"rounded-8 bg-white\" [class]=\"{ 'c-shadow-section': !collapsed() }\">\r\n  @if (!hideHeader()) {\r\n    <div\r\n      class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\r\n      (click)=\"toggleCollapse()\"\r\n      aria-hidden=\"true\">\r\n      <div class=\"d-flex align-items-center\">\r\n        <ng-content select=\"[sdHeaderLeft]\">\r\n          @if (icon()) {\r\n            <span\r\n              class=\"mr-8 material-icons-outlined\"\r\n              [class.text-primary]=\"iconColor() === 'primary'\"\r\n              [class.text-secondary]=\"iconColor() === 'secondary'\"\r\n              [class.text-error]=\"iconColor() === 'error'\"\r\n              [class.text-warning]=\"iconColor() === 'warning'\"\r\n              [class.text-success]=\"iconColor() === 'success'\">\r\n              {{ icon() }}\r\n            </span>\r\n          }\r\n          <div>\r\n            @if (title()) {\r\n              <div class=\"T16M\">{{ title() }}</div>\r\n            }\r\n            @if (subTitle()) {\r\n              <div class=\"T12R text-secondary\">{{ subTitle() }}</div>\r\n            }\r\n          </div>\r\n        </ng-content>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n        @if (collapsable()) {\r\n          <div class=\"d-flex align-items-center\">\r\n            @if (collapsed()) {\r\n              <mat-icon>expand_more</mat-icon>\r\n            } @else {\r\n              <mat-icon>expand_less</mat-icon>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (!collapsed() || hideHeader()) {\r\n    <!-- N\u1EBFu header b\u1ECB \u1EA9n th\u00EC kh\u00F4ng c\u1EA7n border top -->\r\n    <div class=\"p-16 no-padding\" [style.border-top]=\"hideHeader() ? 'none' : '1px solid #e6e6e6'\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{width:100%;display:block}.c-shadow-section{box-shadow:-1px 0 #f2f2f2 inset,1px 0 #f2f2f2 inset,0 1px #f2f2f2 inset,0 -1px #f2f2f2 inset,0 1px 2px #2f31361a}.cursor-pointer{cursor:pointer}\n"] }]
+        }], ctorParameters: () => [] });
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/sd-angular-core-components-section.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-angular-core-components-section.mjs","sources":["../../../projects/sd-angular/components/section/src/section.component.ts","../../../projects/sd-angular/components/section/src/section.component.html","../../../projects/sd-angular/components/section/sd-angular-core-components-section.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename /\r\nimport { Component, ~~Input~~ } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdBaseSecureComponent } from '@sd-angular/core/components/base';\r\nimport { SdColor } from '@sd-angular/core/utilities';\r\n\r\n@Component({\r\n selector: 'sd-section',\r\n templateUrl: './section.component.html',\r\n styleUrls: ['./section.component.scss'],\r\n imports: [MatIconModule],\r\n})\r\nexport class SdSection extends SdBaseSecureComponent {\r\n ~~@Input({~~ ~~required:~~ ~~true~~ }) title?: string \| null; // ~~Tiêu~~ đề ~~của section\~~r\n ~~@Input()~~ subTitle?: string; // ~~sub~~ ~~Tiêu~~ ~~đề của section\~~r\n~~\r\n~~ ~~@Input()~~ icon?: string \| null~~;\r\n @Input~~() ~~iconColor?:~~ ~~SdColor~~ = '~~primary~~'; ~~// Màu sắc của icon, mặc định là 'primary'\~~r\n ~~collapsed~~ = ~~false;\r\n @Input~~('~~collapsed~~') ~~set~~ ~~_collapsed(val~~: ~~boolean \|~~ '' ~~\| undefined \| null~~) {\r\n ~~this.~~collapsed = ~~val~~ ~~===~~ '' ~~\|\| !!val~~;\r\n ~~}\r\n~~ collapsable = false~~;\r\n @Input('collapsable')~~ ~~set~~ ~~_collapsable(val~~: ~~boolean~~ \| '' ~~\| undefined \| null~~) {\r\n ~~this.collapsable~~ = ~~val~~ ~~===~~ '' ~~\|\| !!val~~;\r\n }\r\n\r\n ~~hideHeader = false~~;\r\n ~~@Input~~(~~'hideHeader'~~) ~~set~~ ~~_hideHeader~~(~~val: boolean \| '' \| undefined \| null~~) {\r\n this.~~hideHeader = val ===~~ '' ~~\|\| !!val~~;\r\n }\r\n toggleCollapse = () => {\r\n if (this.collapsable) {\r\n this.collapsed = !this.collapsed;\r\n } else {\r\n if (this.collapsed) {\r\n this.collapsed = false;\r\n }\r\n }\r\n };\r\n}\r\n","<div class=\"rounded-8 bg-white\" [class]=\"{ 'c-shadow-section': !collapsed }\">\r\n @if (!hideHeader) {\r\n <div\r\n class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\r\n (click)=\"toggleCollapse()\"\r\n aria-hidden=\"true\">\r\n <div class=\"d-flex align-items-center\">\r\n @if (icon) {\r\n <span\r\n class=\"mr-8 material-icons-outlined\"\r\n [class.text-primary]=\"iconColor === 'primary'\"\r\n [class.text-secondary]=\"iconColor === 'secondary'\"\r\n [class.text-error]=\"iconColor === 'error'\"\r\n [class.text-warning]=\"iconColor === 'warning'\"\r\n [class.text-success]=\"iconColor === 'success'\">\r\n {{ icon }}\r\n </span>\r\n }\r\n <div>\r\n @if (title) {\r\n <div class=\"T16M\">{{ title }}</div>\r\n }\r\n @if (subTitle) {\r\n <div class=\"T12R text-secondary\">{{ subTitle }}</div>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n @if (collapsable) {\r\n <div class=\"d-flex align-items-center\">\r\n @if (collapsed) {\r\n <mat-icon>expand_more</mat-icon>\r\n } @else {\r\n <mat-icon>expand_less</mat-icon>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @if (!collapsed \|\| hideHeader) {\r\n <!-- Nếu header bị ẩn thì không cần border top -->\r\n <div class=\"p-16 no-padding\" [style.border-top]=\"hideHeader ? 'none' : '1px solid #e6e6e6'\">\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\n</div>\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;AAAA;AAYM,MAAO,SAAU,SAAQ,qBAAqB,CAAA;~~IACvB~~,~~KAAK~~,~~CAAiB;IACxC~~,~~QAAQ~~,~~CAAU;AAElB~~,~~IAAA~~,~~IAAI~~;~~AACJ~~,~~IAAA~~,~~SAAS~~,~~GAAa~~,~~SAAS~~,CAAC;~~IACzC~~,~~SAAS~~,GAAG,KAAK~~;IACjB~~,~~IAAwB~~,UAAU,CAAC,~~GAAoC~~,~~EAAA;QACrE~~,IAAI,CAAC,SAAS,GAAG,~~GAAG~~,KAAK,EAAE,~~IAAI~~,~~CAAC~~,CAAC~~,GAAG~~;~~IACtC;IACA~~,~~WAAW~~,GAAG,KAAK~~;IACnB~~,~~IAA0B~~,~~YAAY~~,~~CAAC~~,~~GAAoC~~,~~EAAA;QACzE~~,~~IAAI~~,CAAC,WAAW,GAAG,~~GAAG~~,KAAK,EAAE,~~IAAI~~,~~CAAC~~,CAAC~~,GAAG~~;~~IACxC;IAEA~~,UAAU,GAAG,KAAK~~;IAClB~~,~~IAAyB~~,~~WAAW~~,CAAC,~~GAAoC~~,~~EAAA~~;~~QACvE~~,~~IAAI~~,CAAC,~~UAAU~~,~~GAAG~~,~~GAAG~~,KAAK,EAAE,IAAI,CAAC,CAAC,~~GAAG~~;~~IACvC~~;~~IACA~~,cAAc,GAAG,MAAK;AACpB,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;~~AACpB~~,~~YAAA,~~IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS;~~QAClC~~;aAAO;AACL,YAAA,IAAI,IAAI,CAAC,SAAS,EAAE;~~AAClB~~,gBAAA,IAAI,CAAC,SAAS,GAAG,KAAK;~~YACxB~~;QACF;AACF,IAAA,CAAC;~~wGA3BU~~,SAAS,EAAA,IAAA,EAAA,~~IAAA~~,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,IAAA,EAAA,~~MAAA~~,EAAA,~~SAAA~~,EAAA,~~WAAA~~,EAAA,UAAA,EAAA,~~CAAA~~,~~WAAA~~,EAAA,~~YAAA~~,~~CAAA~~,EAAA,~~YAAA~~,EAAA,~~CAAA~~,~~aAAA~~,EAAA,~~cAAA~~,~~CAAA~~,EAAA,~~WAAA~~,EAAA,~~CAAA~~,~~YAAA~~,EAAA,~~aAAA~~,~~CAAA~~,EAAA,EAAA,~~eAAA~~,EAAA,IAAA,EAAA,~~QAAA~~,EAAA,EAAA,EAAA,~~QAAA~~,~~ECZtB~~,~~ixDAgDA~~,EAAA,~~MAAA~~,EAAA,~~CAAA~~,~~qMAAA~~,~~CAAA~~,EAAA,~~YAAA~~,EAAA,~~CAAA~~,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,~~EDtCY~~,~~aAAa~~,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,~~IAAA~~,EAAA,EAAA,~~CAAA~~,~~OAAA~~,EAAA,QAAA,EAAA,UAAA,EAAA,~~MAAA~~,EAAA,~~CAAA~~,~~OAAA~~,EAAA,~~QAAA~~,EAAA,~~SAAA~~,EAAA,~~SAAA~~,EAAA,UAAA,~~CAAA~~,EAAA,QAAA,EAAA,~~CAAA~~,~~SAAA~~,~~CAAA~~,EAAA,~~CAAA~~,EAAA,~~CAAA;;4FAEZ~~,~~SAAS~~,EAAA,~~UAAA~~,EAAA,~~CAAA;kBANrB~~,~~SAAS;+BACE~~,~~YAAY~~,EAAA,~~OAAA~~,~~EAGb~~,~~CAAC~~,~~aAAa~~,~~CAAC~~,EAAA,QAAA,EAAA,~~ixDAAA~~,EAAA,MAAA,EAAA,CAAA,qMAAA,CAAA,EAAA~~;8BAGG~~,~~KAAK~~,EAAA,CAAA~~;sBAA/B~~,~~KAAK;uBAAC~~,~~EAAE~~,~~QAAQ~~,~~EAAE~~,~~IAAI~~,~~EAAE;gBAChB~~,~~QAAQ~~,EAAA,CAAA~~;sBAAhB;gBAEQ~~,~~IAAI~~,EAAA,CAAA~~;sBAAZ;gBACQ~~,~~SAAS~~,EAAA,CAAA~~;sBAAjB;gBAEuB~~,~~UAAU~~,EAAA,CAAA~~;sBAAjC~~,~~KAAK;uBAAC~~,~~WAAW;gBAIQ~~,~~YAAY~~,EAAA,CAAA~~;sBAArC~~,~~KAAK~~;~~uBAAC~~,aAAa~~;gBAKK~~,~~WAAW~~,EAAA,CAAA~~;sBAAnC~~,~~KAAK;uBAAC~~,~~YAAY~~;;;~~AE5BrB~~;;AAEG;;;;"}
1	+ {"version":3,"file":"sd-angular-core-components-section.mjs","sources":["../../../projects/sd-angular/components/section/src/section.component.ts","../../../projects/sd-angular/components/section/src/section.component.html","../../../projects/sd-angular/components/section/sd-angular-core-components-section.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename /\r\nimport { booleanAttribute, Component, effect, ElementRef, inject, input, model } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdBaseSecureComponent } from '@sd-angular/core/components/base';\r\nimport { SdColor } from '@sd-angular/core/utilities';\r\n\r\n@Component({\r\n selector: 'sd-section',\r\n templateUrl: './section.component.html',\r\n styleUrls: ['./section.component.scss'],\r\n imports: [MatIconModule],\r\n})\r\nexport class SdSection extends SdBaseSecureComponent {\r\n private el = inject(ElementRef);\r\n\r\n title = input<string \| null>('', { alias: 'title' });\r\n subTitle = input<string>('', { alias: 'subTitle' });\r\n icon = input<string \| null>(null, { alias: 'icon' });\r\n iconColor = input<SdColor>('primary', { alias: 'iconColor' });\r\n\r\n collapsed = model<boolean>(false, { alias: 'collapsed' });\r\n collapsable = input(false, { transform: booleanAttribute, alias: 'collapsable' });\r\n hideHeader = input(false, { transform: booleanAttribute, alias: 'hideHeader' });\r\n\r\n constructor() {\r\n super();\r\n effect(() => {\r\n if (this.title()) {\r\n this.el.nativeElement.removeAttribute('title');\r\n }\r\n });\r\n }\r\n\r\n toggleCollapse = () => {\r\n if (this.collapsable()) {\r\n this.collapsed.set(!this.collapsed());\r\n } else {\r\n if (this.collapsed()) {\r\n this.collapsed.set(false);\r\n }\r\n }\r\n };\r\n}\r\n","<div class=\"rounded-8 bg-white\" [class]=\"{ 'c-shadow-section': !collapsed() }\">\r\n @if (!hideHeader()) {\r\n <div\r\n class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\r\n (click)=\"toggleCollapse()\"\r\n aria-hidden=\"true\">\r\n <div class=\"d-flex align-items-center\">\r\n <ng-content select=\"[sdHeaderLeft]\">\r\n @if (icon()) {\r\n <span\r\n class=\"mr-8 material-icons-outlined\"\r\n [class.text-primary]=\"iconColor() === 'primary'\"\r\n [class.text-secondary]=\"iconColor() === 'secondary'\"\r\n [class.text-error]=\"iconColor() === 'error'\"\r\n [class.text-warning]=\"iconColor() === 'warning'\"\r\n [class.text-success]=\"iconColor() === 'success'\">\r\n {{ icon() }}\r\n </span>\r\n }\r\n <div>\r\n @if (title()) {\r\n <div class=\"T16M\">{{ title() }}</div>\r\n }\r\n @if (subTitle()) {\r\n <div class=\"T12R text-secondary\">{{ subTitle() }}</div>\r\n }\r\n </div>\r\n </ng-content>\r\n </div>\r\n <div class=\"d-flex\">\r\n <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n @if (collapsable()) {\r\n <div class=\"d-flex align-items-center\">\r\n @if (collapsed()) {\r\n <mat-icon>expand_more</mat-icon>\r\n } @else {\r\n <mat-icon>expand_less</mat-icon>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @if (!collapsed() \|\| hideHeader()) {\r\n <!-- Nếu header bị ẩn thì không cần border top -->\r\n <div class=\"p-16 no-padding\" [style.border-top]=\"hideHeader() ? 'none' : '1px solid #e6e6e6'\">\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\n</div>\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}