npm - @sdcorejs/angular - Versions diffs - 19.0.0-rc.1 - Mend

@sdcorejs/angular 19.0.0-rc.1

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

package/fesm2022/sdcorejs-angular-components-ckeditor-styles.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sdcorejs-angular-components-ckeditor-styles.mjs","sources":["../../../projects/sdcorejs-angular/components/ckeditor-styles/src/ckeditor-styles.component.ts","../../../projects/sdcorejs-angular/components/ckeditor-styles/sdcorejs-angular-components-ckeditor-styles.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\n\n/**\n * Styles-only component that loads the global CKEditor 5 stylesheet on demand.\n *\n * Why this exists:\n * - CKEditor's CSS must be global (applies to body-rendered overlays, dialogs, balloons),\n * which means whichever Angular component declares it must use ViewEncapsulation.None.\n * - Switching encapsulation on the main editor components (`<sd-editor>`, `<sd-mini-editor>`,\n * `<sd-document-builder>`) would un-scope all their local styles too.\n * - Instead, this tiny no-render component owns the global CSS. The editor components embed\n * `<sd-ckeditor-styles>` at the top of their template; the CSS is injected once into <head>\n * the first time any editor instance mounts. Editor components themselves keep\n * ViewEncapsulation.Emulated.\n *\n * Behavior:\n * - Renders nothing in the DOM (empty template).\n * - Angular dedupes styles per component class — multiple instances inject the <style> tag\n * only once.\n * - When the host editor component is lazy-loaded, this component's chunk and its CSS travel\n * with it.\n */\n@Component({\n selector: 'sd-ckeditor-styles',\n standalone: true,\n template: '',\n styleUrls: ['../../../assets/scss/ckeditor5.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SdCKEditorStyles {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA;;;;;;;;;;;;;;;;;;;AAmBG;MASU,gBAAgB,CAAA;wGAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,gBAAgB,8EALjB,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,6khJAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;4FAKD,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAR5B,SAAS;+BACE,oBAAoB,EAAA,UAAA,EAClB,IAAI,EAAA,QAAA,EACN,EAAE,EAAA,aAAA,EAEG,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,6khJAAA,CAAA,EAAA;;;AC5BjD;;AAEG;;;;"}

package/fesm2022/sdcorejs-angular-components-code-editor.mjs ADDED Viewed

@@ -0,0 +1,128 @@
+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 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 { TranslatePipe } from '@sdcorejs/angular/i18n';
+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.21", ngImport: i0, type: SdCodeEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", 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()\">\n  \n  <div class=\"sd-code-header\">\n    <div class=\"mac-dots\">\n      <span class=\"dot red\"></span>\n      <span class=\"dot yellow\"></span>\n      <span class=\"dot green\"></span>\n    </div>\n    \n    <div class=\"lang-badge\">\n      {{ language().toUpperCase() }} \n      <span style=\"opacity: 0.6; margin-left: 4px; font-weight: normal;\">\n        {{ viewed() ? '(READ ONLY)' : '(EDITING)' }}\n      </span>\n    </div>\n    \n    <button class=\"copy-btn\" [matTooltip]=\"copied() ? ('core.component.code-editor.copied' | translate) : 'Copy code'\" (click)=\"copyToClipboard()\">\n      <mat-icon [class.text-success]=\"copied()\">{{ copied() ? 'check' : 'content_copy' }}</mat-icon>\n      <span>{{ copied() ? 'Copied' : 'Copy' }}</span>\n    </button>\n  </div>\n\n  <div class=\"sd-code-content\" [style.maxHeight]=\"maxHeight()\">\n    <div class=\"editor-overlay-container\">\n      \n      @if (!viewed()) {\n        <textarea\n          class=\"code-textarea\"\n          [value]=\"textValue()\"\n          (input)=\"onTextChange($any($event.target).value)\"\n          spellcheck=\"false\"\n          autocomplete=\"off\"\n          autocorrect=\"off\"\n          autocapitalize=\"off\">\n        </textarea>\n      }\n      \n      <pre aria-hidden=\"true\" class=\"code-display\"><code [class]=\"'language-' + prismLang()\" [innerHTML]=\"highlightedCode()\"></code></pre>\n      \n    </div>\n  </div>\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!important;color:transparent!important;-webkit-text-fill-color:transparent!important;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: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdCodeEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-code-editor', standalone: true, imports: [CommonModule, MatIconModule, MatTooltipModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"sd-code-wrapper\" [class.is-editable]=\"!viewed()\">\n  \n  <div class=\"sd-code-header\">\n    <div class=\"mac-dots\">\n      <span class=\"dot red\"></span>\n      <span class=\"dot yellow\"></span>\n      <span class=\"dot green\"></span>\n    </div>\n    \n    <div class=\"lang-badge\">\n      {{ language().toUpperCase() }} \n      <span style=\"opacity: 0.6; margin-left: 4px; font-weight: normal;\">\n        {{ viewed() ? '(READ ONLY)' : '(EDITING)' }}\n      </span>\n    </div>\n    \n    <button class=\"copy-btn\" [matTooltip]=\"copied() ? ('core.component.code-editor.copied' | translate) : 'Copy code'\" (click)=\"copyToClipboard()\">\n      <mat-icon [class.text-success]=\"copied()\">{{ copied() ? 'check' : 'content_copy' }}</mat-icon>\n      <span>{{ copied() ? 'Copied' : 'Copy' }}</span>\n    </button>\n  </div>\n\n  <div class=\"sd-code-content\" [style.maxHeight]=\"maxHeight()\">\n    <div class=\"editor-overlay-container\">\n      \n      @if (!viewed()) {\n        <textarea\n          class=\"code-textarea\"\n          [value]=\"textValue()\"\n          (input)=\"onTextChange($any($event.target).value)\"\n          spellcheck=\"false\"\n          autocomplete=\"off\"\n          autocorrect=\"off\"\n          autocapitalize=\"off\">\n        </textarea>\n      }\n      \n      <pre aria-hidden=\"true\" class=\"code-display\"><code [class]=\"'language-' + prismLang()\" [innerHTML]=\"highlightedCode()\"></code></pre>\n      \n    </div>\n  </div>\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!important;color:transparent!important;-webkit-text-fill-color:transparent!important;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=sdcorejs-angular-components-code-editor.mjs.map

package/fesm2022/sdcorejs-angular-components-code-editor.mjs.map ADDED Viewed

@@ -0,0 +1 @@

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