@sd-angular/core 19.0.0-beta.5 → 19.0.0-beta.50

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

@@ -0,0 +1,129 @@
+import { Clipboard } from '@angular/cdk/clipboard';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, model, input, booleanAttribute, signal, computed, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i3 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i2 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { DomSanitizer } from '@angular/platform-browser';
+import * as Prism from 'prismjs';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-scss';
+import 'prismjs/components/prism-markup';
+
+class SdCodeEditor {
+    #clipboard = inject(Clipboard);
+    #sanitizer = inject(DomSanitizer);
+    // ==========================================
+    // 1. SIGNAL INPUTS & MODEL
+    // ==========================================
+    // Nhận bất kỳ kiểu dữ liệu nào (string, array, object)
+    valueModel = model(undefined, { alias: 'model' });
+    language = input('typescript');
+    maxHeight = input('500px');
+    // Trạng thái Viewed (true = Read Only, false = Editable)
+    viewed = input(false, { transform: booleanAttribute });
+    // ==========================================
+    // 2. INTERNAL STATE
+    // ==========================================
+    copied = signal(false);
+    // Chuỗi text nội bộ dùng để map với thẻ <textarea>
+    textValue = signal('');
+    prismLang = computed(() => this.language() === 'html' ? 'markup' : this.language());
+    // Cờ lưu vết để chống Loop (Vòng lặp vô tận khi bắn 2 chiều)
+    _lastEmittedValue = undefined;
+    constructor() {
+        // ==========================================
+        // EFFECT 1: Dữ liệu từ CHA truyền vào (Model -> TextValue)
+        // ==========================================
+        effect(() => {
+            const extVal = this.valueModel();
+            const lang = this.language();
+            untracked(() => {
+                // Nếu giá trị này do chính component bắn ra, bỏ qua để tránh loop
+                if (extVal === this._lastEmittedValue)
+                    return;
+                if (typeof extVal === 'string') {
+                    this.textValue.set(extVal);
+                }
+                else if (extVal !== undefined && extVal !== null) {
+                    // Tự động format Object -> String nếu là JSON
+                    if (lang === 'json') {
+                        try {
+                            this.textValue.set(JSON.stringify(extVal, null, 2));
+                        }
+                        catch {
+                            this.textValue.set('// Lỗi: Object có tham chiếu vòng (Circular Reference)');
+                        }
+                    }
+                    else {
+                        this.textValue.set(String(extVal));
+                    }
+                }
+                else {
+                    this.textValue.set('');
+                }
+            });
+        });
+    }
+    // ==========================================
+    // EFFECT 2: PrismJS render (TextValue -> HTML MÀU)
+    // ==========================================
+    highlightedCode = computed(() => {
+        // Dùng khoảng trắng để giữ độ cao cho thẻ pre nếu rỗng
+        const rawCode = this.textValue() || ' ';
+        const langKey = this.prismLang();
+        const grammar = Prism.languages[langKey] || Prism.languages['markup'];
+        // Cộng thêm \n ở cuối để chống lỗi con trỏ textarea ăn lẹm dòng cuối
+        const highlightedString = Prism.highlight(rawCode, grammar, langKey) + '\n';
+        return this.#sanitizer.bypassSecurityTrustHtml(highlightedString);
+    });
+    // ==========================================
+    // EVENTS
+    // ==========================================
+    // Khi người dùng gõ vào Textarea (TextValue -> Model)
+    onTextChange(newText) {
+        this.textValue.set(newText);
+        let valToEmit = newText;
+        // Nếu ngôn ngữ là JSON, cố gắng trả về Object thật
+        if (this.language() === 'json') {
+            try {
+                valToEmit = JSON.parse(newText);
+            }
+            catch {
+                // Nếu gõ dở ngoặc/sai cú pháp -> Trả về chuỗi String tạm
+                valToEmit = newText;
+            }
+        }
+        // Ghi sổ và bắn ra ngoài
+        this._lastEmittedValue = valToEmit;
+        this.valueModel.set(valToEmit);
+    }
+    copyToClipboard() {
+        const rawCode = this.textValue();
+        if (!rawCode)
+            return;
+        if (this.#clipboard.copy(rawCode)) {
+            this.copied.set(true);
+            setTimeout(() => this.copied.set(false), 2000);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdCodeEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdCodeEditor, isStandalone: true, selector: "sd-code-editor", inputs: { valueModel: { classPropertyName: "valueModel", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, viewed: { classPropertyName: "viewed", publicName: "viewed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueModel: "modelChange" }, ngImport: i0, template: "<div class=\"sd-code-wrapper\" [class.is-editable]=\"!viewed()\">\r\n  \r\n  <div class=\"sd-code-header\">\r\n    <div class=\"mac-dots\">\r\n      <span class=\"dot red\"></span>\r\n      <span class=\"dot yellow\"></span>\r\n      <span class=\"dot green\"></span>\r\n    </div>\r\n    \r\n    <div class=\"lang-badge\">\r\n      {{ language().toUpperCase() }} \r\n      <span style=\"opacity: 0.6; margin-left: 4px; font-weight: normal;\">\r\n        {{ viewed() ? '(READ ONLY)' : '(EDITING)' }}\r\n      </span>\r\n    </div>\r\n    \r\n    <button class=\"copy-btn\" [matTooltip]=\"copied() ? '\u0110\u00E3 copy!' : 'Copy code'\" (click)=\"copyToClipboard()\">\r\n      <mat-icon [class.text-success]=\"copied()\">{{ copied() ? 'check' : 'content_copy' }}</mat-icon>\r\n      <span>{{ copied() ? 'Copied' : 'Copy' }}</span>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"sd-code-content\" [style.maxHeight]=\"maxHeight()\">\r\n    <div class=\"editor-overlay-container\">\r\n      \r\n      @if (!viewed()) {\r\n        <textarea \r\n          class=\"code-textarea\"\r\n          [ngModel]=\"textValue()\"\r\n          (ngModelChange)=\"onTextChange($event)\"\r\n          spellcheck=\"false\"\r\n          autocomplete=\"off\"\r\n          autocorrect=\"off\"\r\n          autocapitalize=\"off\">\r\n        </textarea>\r\n      }\r\n      \r\n      <pre aria-hidden=\"true\" class=\"code-display\"><code [class]=\"'language-' + prismLang()\" [innerHTML]=\"highlightedCode()\"></code></pre>\r\n      \r\n    </div>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.sd-code-wrapper{background-color:#1e1e1e;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px #00000026;margin:16px 0;font-family:Fira Code,Consolas,Monaco,monospace}.sd-code-wrapper .sd-code-header{display:flex;align-items:center;justify-content:space-between;background-color:#2d2d2d;padding:8px 16px;border-bottom:1px solid #404040}.sd-code-wrapper .sd-code-header .mac-dots{display:flex;gap:6px}.sd-code-wrapper .sd-code-header .mac-dots .dot{width:12px;height:12px;border-radius:50%}.sd-code-wrapper .sd-code-header .mac-dots .dot.red{background-color:#ff5f56}.sd-code-wrapper .sd-code-header .mac-dots .dot.yellow{background-color:#ffbd2e}.sd-code-wrapper .sd-code-header .mac-dots .dot.green{background-color:#27c93f}.sd-code-wrapper .sd-code-header .lang-badge{color:#858585;font-size:12px;font-weight:600;letter-spacing:.5px}.sd-code-wrapper .sd-code-header .copy-btn{display:flex;align-items:center;gap:4px;background:none;border:none;color:#ccc;cursor:pointer;font-size:13px;padding:4px 8px;border-radius:4px;transition:all .2s ease}.sd-code-wrapper .sd-code-header .copy-btn mat-icon{font-size:16px;width:16px;height:16px}.sd-code-wrapper .sd-code-header .copy-btn:hover{background-color:#404040;color:#fff}.sd-code-wrapper .sd-code-header .copy-btn .text-success{color:#27c93f!important}.sd-code-wrapper .sd-code-content{overflow-y:auto;position:relative}.sd-code-wrapper .sd-code-content::-webkit-scrollbar{width:8px;height:8px}.sd-code-wrapper .sd-code-content::-webkit-scrollbar-thumb{background:#555;border-radius:4px}.sd-code-wrapper .sd-code-content::-webkit-scrollbar-thumb:hover{background:#777}.sd-code-wrapper .sd-code-content::-webkit-scrollbar-track{background:#1e1e1e}.sd-code-wrapper .sd-code-content .editor-overlay-container{position:relative;min-height:100px}.sd-code-wrapper .sd-code-content .code-textarea,.sd-code-wrapper .sd-code-content .code-display{margin:0;padding:16px;border:0;width:100%;min-height:100%;font-family:inherit;font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-all;tab-size:2}.sd-code-wrapper .sd-code-content .code-textarea{position:absolute;top:0;left:0;z-index:2;background:transparent;color:transparent;caret-color:#fff;resize:none;outline:none;overflow:hidden}.sd-code-wrapper .sd-code-content .code-display{position:relative;z-index:1;pointer-events:none}.sd-code-wrapper .sd-code-content .code-display code{color:#d4d4d4;font-family:inherit}.sd-code-wrapper .token.comment,.sd-code-wrapper .token.block-comment,.sd-code-wrapper .token.prolog,.sd-code-wrapper .token.doctype,.sd-code-wrapper .token.cdata{color:#999}.sd-code-wrapper .token.punctuation{color:#ccc}.sd-code-wrapper .token.tag,.sd-code-wrapper .token.attr-name,.sd-code-wrapper .token.namespace,.sd-code-wrapper .token.deleted{color:#e2777a}.sd-code-wrapper .token.function-name{color:#6196cc}.sd-code-wrapper .token.boolean,.sd-code-wrapper .token.number,.sd-code-wrapper .token.function{color:#f08d49}.sd-code-wrapper .token.property,.sd-code-wrapper .token.class-name,.sd-code-wrapper .token.constant,.sd-code-wrapper .token.symbol{color:#f8c555}.sd-code-wrapper .token.selector,.sd-code-wrapper .token.important,.sd-code-wrapper .token.atrule,.sd-code-wrapper .token.keyword,.sd-code-wrapper .token.builtin{color:#cc99cd}.sd-code-wrapper .token.string,.sd-code-wrapper .token.char,.sd-code-wrapper .token.attr-value,.sd-code-wrapper .token.regex,.sd-code-wrapper .token.variable{color:#7ec699}.sd-code-wrapper .token.operator,.sd-code-wrapper .token.entity,.sd-code-wrapper .token.url{color:#67cdcc}.sd-code-wrapper .token.important,.sd-code-wrapper .token.bold{font-weight:700}.sd-code-wrapper .token.italic{font-style:italic}.sd-code-wrapper .token.entity{cursor:help}.sd-code-wrapper .token.inserted{color:green}\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: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdCodeEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-code-editor', standalone: true, imports: [CommonModule, MatIconModule, MatTooltipModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"sd-code-wrapper\" [class.is-editable]=\"!viewed()\">\r\n  \r\n  <div class=\"sd-code-header\">\r\n    <div class=\"mac-dots\">\r\n      <span class=\"dot red\"></span>\r\n      <span class=\"dot yellow\"></span>\r\n      <span class=\"dot green\"></span>\r\n    </div>\r\n    \r\n    <div class=\"lang-badge\">\r\n      {{ language().toUpperCase() }} \r\n      <span style=\"opacity: 0.6; margin-left: 4px; font-weight: normal;\">\r\n        {{ viewed() ? '(READ ONLY)' : '(EDITING)' }}\r\n      </span>\r\n    </div>\r\n    \r\n    <button class=\"copy-btn\" [matTooltip]=\"copied() ? '\u0110\u00E3 copy!' : 'Copy code'\" (click)=\"copyToClipboard()\">\r\n      <mat-icon [class.text-success]=\"copied()\">{{ copied() ? 'check' : 'content_copy' }}</mat-icon>\r\n      <span>{{ copied() ? 'Copied' : 'Copy' }}</span>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"sd-code-content\" [style.maxHeight]=\"maxHeight()\">\r\n    <div class=\"editor-overlay-container\">\r\n      \r\n      @if (!viewed()) {\r\n        <textarea \r\n          class=\"code-textarea\"\r\n          [ngModel]=\"textValue()\"\r\n          (ngModelChange)=\"onTextChange($event)\"\r\n          spellcheck=\"false\"\r\n          autocomplete=\"off\"\r\n          autocorrect=\"off\"\r\n          autocapitalize=\"off\">\r\n        </textarea>\r\n      }\r\n      \r\n      <pre aria-hidden=\"true\" class=\"code-display\"><code [class]=\"'language-' + prismLang()\" [innerHTML]=\"highlightedCode()\"></code></pre>\r\n      \r\n    </div>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.sd-code-wrapper{background-color:#1e1e1e;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px #00000026;margin:16px 0;font-family:Fira Code,Consolas,Monaco,monospace}.sd-code-wrapper .sd-code-header{display:flex;align-items:center;justify-content:space-between;background-color:#2d2d2d;padding:8px 16px;border-bottom:1px solid #404040}.sd-code-wrapper .sd-code-header .mac-dots{display:flex;gap:6px}.sd-code-wrapper .sd-code-header .mac-dots .dot{width:12px;height:12px;border-radius:50%}.sd-code-wrapper .sd-code-header .mac-dots .dot.red{background-color:#ff5f56}.sd-code-wrapper .sd-code-header .mac-dots .dot.yellow{background-color:#ffbd2e}.sd-code-wrapper .sd-code-header .mac-dots .dot.green{background-color:#27c93f}.sd-code-wrapper .sd-code-header .lang-badge{color:#858585;font-size:12px;font-weight:600;letter-spacing:.5px}.sd-code-wrapper .sd-code-header .copy-btn{display:flex;align-items:center;gap:4px;background:none;border:none;color:#ccc;cursor:pointer;font-size:13px;padding:4px 8px;border-radius:4px;transition:all .2s ease}.sd-code-wrapper .sd-code-header .copy-btn mat-icon{font-size:16px;width:16px;height:16px}.sd-code-wrapper .sd-code-header .copy-btn:hover{background-color:#404040;color:#fff}.sd-code-wrapper .sd-code-header .copy-btn .text-success{color:#27c93f!important}.sd-code-wrapper .sd-code-content{overflow-y:auto;position:relative}.sd-code-wrapper .sd-code-content::-webkit-scrollbar{width:8px;height:8px}.sd-code-wrapper .sd-code-content::-webkit-scrollbar-thumb{background:#555;border-radius:4px}.sd-code-wrapper .sd-code-content::-webkit-scrollbar-thumb:hover{background:#777}.sd-code-wrapper .sd-code-content::-webkit-scrollbar-track{background:#1e1e1e}.sd-code-wrapper .sd-code-content .editor-overlay-container{position:relative;min-height:100px}.sd-code-wrapper .sd-code-content .code-textarea,.sd-code-wrapper .sd-code-content .code-display{margin:0;padding:16px;border:0;width:100%;min-height:100%;font-family:inherit;font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-all;tab-size:2}.sd-code-wrapper .sd-code-content .code-textarea{position:absolute;top:0;left:0;z-index:2;background:transparent;color:transparent;caret-color:#fff;resize:none;outline:none;overflow:hidden}.sd-code-wrapper .sd-code-content .code-display{position:relative;z-index:1;pointer-events:none}.sd-code-wrapper .sd-code-content .code-display code{color:#d4d4d4;font-family:inherit}.sd-code-wrapper .token.comment,.sd-code-wrapper .token.block-comment,.sd-code-wrapper .token.prolog,.sd-code-wrapper .token.doctype,.sd-code-wrapper .token.cdata{color:#999}.sd-code-wrapper .token.punctuation{color:#ccc}.sd-code-wrapper .token.tag,.sd-code-wrapper .token.attr-name,.sd-code-wrapper .token.namespace,.sd-code-wrapper .token.deleted{color:#e2777a}.sd-code-wrapper .token.function-name{color:#6196cc}.sd-code-wrapper .token.boolean,.sd-code-wrapper .token.number,.sd-code-wrapper .token.function{color:#f08d49}.sd-code-wrapper .token.property,.sd-code-wrapper .token.class-name,.sd-code-wrapper .token.constant,.sd-code-wrapper .token.symbol{color:#f8c555}.sd-code-wrapper .token.selector,.sd-code-wrapper .token.important,.sd-code-wrapper .token.atrule,.sd-code-wrapper .token.keyword,.sd-code-wrapper .token.builtin{color:#cc99cd}.sd-code-wrapper .token.string,.sd-code-wrapper .token.char,.sd-code-wrapper .token.attr-value,.sd-code-wrapper .token.regex,.sd-code-wrapper .token.variable{color:#7ec699}.sd-code-wrapper .token.operator,.sd-code-wrapper .token.entity,.sd-code-wrapper .token.url{color:#67cdcc}.sd-code-wrapper .token.important,.sd-code-wrapper .token.bold{font-weight:700}.sd-code-wrapper .token.italic{font-style:italic}.sd-code-wrapper .token.entity{cursor:help}.sd-code-wrapper .token.inserted{color:green}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdCodeEditor };
+//# sourceMappingURL=sd-angular-core-components-code-editor.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-angular-core-components-code-editor.mjs","sources":["../../../projects/sd-angular/components/code-editor/src/code-editor.component.ts","../../../projects/sd-angular/components/code-editor/src/code-editor.component.html","../../../projects/sd-angular/components/code-editor/sd-angular-core-components-code-editor.ts"],"sourcesContent":["import { Clipboard } from '@angular/cdk/clipboard';\r\nimport { CommonModule } from '@angular/common';\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  computed,\r\n  effect,\r\n  inject,\r\n  input,\r\n  model,\r\n  signal,\r\n  untracked,\r\n  ViewEncapsulation,\r\n  booleanAttribute\r\n} from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\r\n\r\nimport * as Prism from 'prismjs';\r\nimport 'prismjs/components/prism-typescript';\r\nimport 'prismjs/components/prism-json';\r\nimport 'prismjs/components/prism-css';\r\nimport 'prismjs/components/prism-scss';\r\nimport 'prismjs/components/prism-markup'; // HTML\r\n\r\nexport type CodeLanguage = 'html' | 'typescript' | 'json' | 'css' | 'scss';\r\n\r\n@Component({\r\n  selector: 'sd-code-editor',\r\n  standalone: true,\r\n  imports: [CommonModule, MatIconModule, MatTooltipModule, FormsModule],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  templateUrl: './code-editor.component.html',\r\n  styleUrls: ['./code-editor.component.scss'],\r\n  encapsulation: ViewEncapsulation.None, // Bắt buộc để nhận màu Prism\r\n})\r\nexport class SdCodeEditor {\r\n  #clipboard = inject(Clipboard);\r\n  #sanitizer = inject(DomSanitizer);\r\n\r\n  // ==========================================\r\n  // 1. SIGNAL INPUTS & MODEL\r\n  // ==========================================\r\n  // Nhận bất kỳ kiểu dữ liệu nào (string, array, object)\r\n  valueModel = model<any>(undefined, { alias: 'model' });\r\n  \r\n  language = input<CodeLanguage>('typescript');\r\n  maxHeight = input<string>('500px');\r\n  \r\n  // Trạng thái Viewed (true = Read Only, false = Editable)\r\n  viewed = input(false, { transform: booleanAttribute });\r\n\r\n  // ==========================================\r\n  // 2. INTERNAL STATE\r\n  // ==========================================\r\n  copied = signal<boolean>(false);\r\n  \r\n  // Chuỗi text nội bộ dùng để map với thẻ <textarea>\r\n  textValue = signal<string>('');\r\n  \r\n  prismLang = computed(() => this.language() === 'html' ? 'markup' : this.language());\r\n\r\n  // Cờ lưu vết để chống Loop (Vòng lặp vô tận khi bắn 2 chiều)\r\n  private _lastEmittedValue: any = undefined;\r\n\r\n  constructor() {\r\n    // ==========================================\r\n    // EFFECT 1: Dữ liệu từ CHA truyền vào (Model -> TextValue)\r\n    // ==========================================\r\n    effect(() => {\r\n      const extVal = this.valueModel();\r\n      const lang = this.language();\r\n      \r\n      untracked(() => {\r\n        // Nếu giá trị này do chính component bắn ra, bỏ qua để tránh loop\r\n        if (extVal === this._lastEmittedValue) return;\r\n\r\n        if (typeof extVal === 'string') {\r\n          this.textValue.set(extVal);\r\n        } else if (extVal !== undefined && extVal !== null) {\r\n          // Tự động format Object -> String nếu là JSON\r\n          if (lang === 'json') {\r\n            try {\r\n              this.textValue.set(JSON.stringify(extVal, null, 2));\r\n            } catch {\r\n              this.textValue.set('// Lỗi: Object có tham chiếu vòng (Circular Reference)');\r\n            }\r\n          } else {\r\n            this.textValue.set(String(extVal));\r\n          }\r\n        } else {\r\n          this.textValue.set('');\r\n        }\r\n      });\r\n    });\r\n  }\r\n\r\n  // ==========================================\r\n  // EFFECT 2: PrismJS render (TextValue -> HTML MÀU)\r\n  // ==========================================\r\n  highlightedCode = computed<SafeHtml>(() => {\r\n    // Dùng khoảng trắng để giữ độ cao cho thẻ pre nếu rỗng\r\n    const rawCode = this.textValue() || ' '; \r\n    const langKey = this.prismLang();\r\n    const grammar = Prism.languages[langKey] || Prism.languages['markup'];\r\n    \r\n    // Cộng thêm \\n ở cuối để chống lỗi con trỏ textarea ăn lẹm dòng cuối\r\n    const highlightedString = Prism.highlight(rawCode, grammar, langKey) + '\\n';\r\n    return this.#sanitizer.bypassSecurityTrustHtml(highlightedString);\r\n  });\r\n\r\n  // ==========================================\r\n  // EVENTS\r\n  // ==========================================\r\n  \r\n  // Khi người dùng gõ vào Textarea (TextValue -> Model)\r\n  onTextChange(newText: string) {\r\n    this.textValue.set(newText);\r\n    \r\n    let valToEmit: any = newText;\r\n    \r\n    // Nếu ngôn ngữ là JSON, cố gắng trả về Object thật\r\n    if (this.language() === 'json') {\r\n      try {\r\n        valToEmit = JSON.parse(newText);\r\n      } catch {\r\n        // Nếu gõ dở ngoặc/sai cú pháp -> Trả về chuỗi String tạm\r\n        valToEmit = newText; \r\n      }\r\n    }\r\n    \r\n    // Ghi sổ và bắn ra ngoài\r\n    this._lastEmittedValue = valToEmit;\r\n    this.valueModel.set(valToEmit);\r\n  }\r\n\r\n  copyToClipboard() {\r\n    const rawCode = this.textValue();\r\n    if (!rawCode) return;\r\n    \r\n    if (this.#clipboard.copy(rawCode)) {\r\n      this.copied.set(true);\r\n      setTimeout(() => this.copied.set(false), 2000);\r\n    }\r\n  }\r\n}","<div class=\"sd-code-wrapper\" [class.is-editable]=\"!viewed()\">\r\n  \r\n  <div class=\"sd-code-header\">\r\n    <div class=\"mac-dots\">\r\n      <span class=\"dot red\"></span>\r\n      <span class=\"dot yellow\"></span>\r\n      <span class=\"dot green\"></span>\r\n    </div>\r\n    \r\n    <div class=\"lang-badge\">\r\n      {{ language().toUpperCase() }} \r\n      <span style=\"opacity: 0.6; margin-left: 4px; font-weight: normal;\">\r\n        {{ viewed() ? '(READ ONLY)' : '(EDITING)' }}\r\n      </span>\r\n    </div>\r\n    \r\n    <button class=\"copy-btn\" [matTooltip]=\"copied() ? 'Đã copy!' : 'Copy code'\" (click)=\"copyToClipboard()\">\r\n      <mat-icon [class.text-success]=\"copied()\">{{ copied() ? 'check' : 'content_copy' }}</mat-icon>\r\n      <span>{{ copied() ? 'Copied' : 'Copy' }}</span>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"sd-code-content\" [style.maxHeight]=\"maxHeight()\">\r\n    <div class=\"editor-overlay-container\">\r\n      \r\n      @if (!viewed()) {\r\n        <textarea \r\n          class=\"code-textarea\"\r\n          [ngModel]=\"textValue()\"\r\n          (ngModelChange)=\"onTextChange($event)\"\r\n          spellcheck=\"false\"\r\n          autocomplete=\"off\"\r\n          autocorrect=\"off\"\r\n          autocapitalize=\"off\">\r\n        </textarea>\r\n      }\r\n      \r\n      <pre aria-hidden=\"true\" class=\"code-display\"><code [class]=\"'language-' + prismLang()\" [innerHTML]=\"highlightedCode()\"></code></pre>\r\n      \r\n    </div>\r\n  </div>\r\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}