@libs-ui/components-preview-text-data 0.2.357-3 → 0.2.357-4

package/fesm2022/libs-ui-components-preview-text-data.mjs

@@ -1,16 +1,16 @@
 import * as i0 from '@angular/core';
 import { signal, inject, DestroyRef, computed, input, model, output, viewChild, effect, Component, ChangeDetectionStrategy } from '@angular/core';
-import { autocompletion } from '@codemirror/autocomplete';
-import { syntaxTree } from '@codemirror/language';
-import { lintGutter, linter } from '@codemirror/lint';
-import { Compartment, Prec, EditorState, Transaction } from '@codemirror/state';
+import { linter, lintGutter } from '@codemirror/lint';
+import { EditorState, Transaction, Compartment, Prec } from '@codemirror/state';
 import { EditorView, lineNumbers } from '@codemirror/view';
 import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
 import { LibsUiComponentsDropdownComponent } from '@libs-ui/components-dropdown';
 import { LibsUiNotificationService } from '@libs-ui/services-notification';
-import { UtilsHttpParamsRequest, get } from '@libs-ui/utils';
 import { basicSetup } from 'codemirror6';
 import { returnListObject } from '@libs-ui/services-http-request';
+import { UtilsHttpParamsRequest, get } from '@libs-ui/utils';
+import { syntaxTree } from '@codemirror/language';
+import { autocompletion } from '@codemirror/autocomplete';
 
 /**
  * Danh sách các ngôn ngữ được hỗ trợ
@@ -154,6 +154,18 @@ const DEFAULT_SECURITY_PATTERNS = [
     /document\.write\s*\(/i,
     /window\.location\s*=/i,
 ];
+/**
+ * Các key của AST node KHÔNG phải node con (metadata vị trí, comment...) — bỏ qua khi duyệt.
+ */
+const astSkipKeys = new Set(['loc', 'start', 'end', 'range', 'leadingComments', 'trailingComments', 'innerComments', 'extra', 'comments', 'tokens']);
+/**
+ * Các key chứa annotation kiểu TypeScript → con của nó nằm trong "type context" (không phải biến giá trị).
+ */
+const astTypeKeys = new Set(['typeAnnotation', 'returnType', 'typeParameters', 'typeArguments', 'superTypeParameters']);
+/**
+ * Các node `TS*` mang GIÁ TRỊ (không phải type thuần) → con của chúng vẫn là biến giá trị bình thường.
+ */
+const tsValueNodes = new Set(['TSEnumDeclaration', 'TSEnumMember', 'TSModuleDeclaration', 'TSModuleBlock', 'TSAsExpression', 'TSNonNullExpression', 'TSParameterProperty', 'TSExportAssignment', 'TSImportEqualsDeclaration', 'TSExternalModuleReference', 'TSSatisfiesExpression']);
 /**
  * Tạo default language extension cho plain text
  * Sử dụng khi ngôn ngữ không được hỗ trợ
@@ -168,6 +180,633 @@ const createDefaultLanguage = async () => {
     });
 };
 
+/** Lấy token (chuỗi không khoảng trắng) liền trước vị trí `pos` trong document. Dùng chung cho JS/SQL/Python. */
+const getTokenBefore = (doc, pos) => {
+    const start = Math.max(0, pos - 30);
+    const text = doc.sliceString(start, pos);
+    const match = /(\S+)\s*$/.exec(text);
+    return match?.[1] ?? '';
+};
+
+// Cache module-level (chia sẻ giữa các instance editor) — đều immutable, lazy-load 1 lần.
+let babelParserModule;
+let knownGlobalsSet;
+/** Lazy-load + cache module @babel/parser (chỉ tải lần đầu khi lint JS/TS). */
+const getBabelParser = async () => {
+    if (!babelParserModule) {
+        babelParserModule = await import('@babel/parser');
+    }
+    return babelParserModule;
+};
+/** Lazy-load + cache tập biến toàn cục JS/DOM hợp lệ từ package `globals` (JSON thuần, browser-safe). */
+const getKnownGlobals = async () => {
+    if (!knownGlobalsSet) {
+        const globalsModule = (await import('globals'));
+        const globalsData = (globalsModule.default ?? globalsModule);
+        knownGlobalsSet = new Set([...Object.keys(globalsData['builtin'] ?? {}), ...Object.keys(globalsData['browser'] ?? {}), ...Object.keys(globalsData['es2021'] ?? {})]);
+    }
+    return knownGlobalsSet;
+};
+/**
+ * Parse code, trả về vừa danh sách lỗi cú pháp vừa AST (nếu parse sạch).
+ * `errorRecovery` gom nhiều lỗi vào `result.errors`; lỗi nặng vẫn `throw` → bắt thêm ở catch.
+ */
+const parseJs = (parser, code) => {
+    try {
+        const result = parser.parse(code, {
+            sourceType: 'module',
+            errorRecovery: true,
+            plugins: ['typescript', 'jsx'],
+            allowReturnOutsideFunction: true,
+            allowAwaitOutsideFunction: true,
+            allowImportExportEverywhere: true,
+            allowSuperOutsideMethod: true,
+            allowNewTargetOutsideFunction: true,
+            allowUndeclaredExports: true,
+        });
+        return { errors: result.errors, ast: result };
+    }
+    catch (error) {
+        const loc = get(error, 'loc');
+        const message = get(error, 'message') || 'JavaScript syntax error';
+        return { errors: [{ loc, message }] };
+    }
+};
+/** Giữ cho test/back-compat: chỉ lấy danh sách lỗi cú pháp. */
+const collectBabelErrors = (parser, code) => parseJs(parser, code).errors;
+/**
+ * Quét text từng dòng, flag dấu "." cuối dòng (incomplete property access) tại ĐÚNG vị trí dấu chấm.
+ * Thu thập `taintedLines` (dòng có trailing dot) + `dotPositions` (offset dấu chấm để vá khi parse).
+ */
+const collectTrailingDotDiagnostics = (doc, diagnostics, taintedLines, dotPositions) => {
+    for (let lineNumber = 1; lineNumber <= doc.lines; lineNumber++) {
+        const line = doc.line(lineNumber);
+        const trimmed = line.text.trimEnd();
+        const match = /(\w+)\.\s*$/.exec(trimmed);
+        if (!match) {
+            continue;
+        }
+        taintedLines.add(lineNumber);
+        const dotPosition = line.from + trimmed.lastIndexOf('.');
+        dotPositions.push(dotPosition);
+        diagnostics.push({ from: dotPosition, to: dotPosition + 1, severity: 'error', message: `Incomplete property access on "${match[1]}"` });
+    }
+};
+/** Thay các ký tự tại `positions` bằng space, giữ nguyên độ dài chuỗi (để offset không đổi). */
+const replaceCharsWithSpace = (code, positions) => {
+    if (!positions.length) {
+        return code;
+    }
+    const chars = code.split('');
+    for (const position of positions) {
+        if (position >= 0 && position < chars.length) {
+            chars[position] = ' ';
+        }
+    }
+    return chars.join('');
+};
+/** VariableDeclaration ở `for(let i=0;...)` / `for..in` / `for..of` KHÔNG cần `;` cuối. */
+const requiresSemicolon = (nodeType, parentType, keyInParent) => {
+    if (nodeType === 'VariableDeclaration') {
+        if (parentType === 'ForStatement' && keyInParent === 'init')
+            return false;
+        if ((parentType === 'ForInStatement' || parentType === 'ForOfStatement') && keyInParent === 'left')
+            return false;
+    }
+    return true;
+};
+/**
+ * Rule custom "require semicolon": câu lệnh (const/let/return/expression...) không kết thúc bằng `;` → báo lỗi.
+ * Dùng vị trí `node.end` của AST babel; bỏ qua dòng tainted (trailing dot) để không chồng lỗi.
+ */
+const collectMissingSemicolonDiagnostics = (ast, code, diagnostics, taintedLines) => {
+    const semiNodes = new Set(['ExpressionStatement', 'VariableDeclaration', 'ReturnStatement', 'ThrowStatement', 'BreakStatement', 'ContinueStatement', 'DoWhileStatement', 'DebuggerStatement']);
+    const seen = new Set();
+    const lineOf = (offset) => code.slice(0, offset).split('\n').length;
+    const walk = (node, parentType, keyInParent) => {
+        if (Array.isArray(node)) {
+            for (const item of node)
+                walk(item, parentType, keyInParent);
+            return;
+        }
+        if (!node || typeof node !== 'object')
+            return;
+        const current = node;
+        if (typeof current.type !== 'string')
+            return;
+        if (semiNodes.has(current.type) && requiresSemicolon(current.type, parentType, keyInParent) && typeof current.end === 'number') {
+            const end = Math.min(current.end, code.length);
+            if (end > 0 && code.charAt(end - 1) !== ';' && !seen.has(end) && !taintedLines.has(lineOf(end - 1))) {
+                seen.add(end);
+                diagnostics.push({ from: end - 1, to: end, severity: 'error', message: 'Missing semicolon' });
+            }
+        }
+        for (const childKey of Object.keys(current)) {
+            if (astSkipKeys.has(childKey))
+                continue;
+            walk(current[childKey], current.type, childKey);
+        }
+    };
+    walk(ast.program ?? ast, '', '');
+};
+/** Chuẩn hóa message: thân thiện cho trailing dot + heuristic kiểu cũ cho "Unexpected token"; bỏ hậu tố "(line:col)". */
+const buildJsErrorMessage = (doc, from, rawMessage) => {
+    const charBefore = from > 0 ? doc.sliceString(from - 1, from) : '';
+    if (charBefore === '.') {
+        const owner = getTokenBefore(doc, from).replace(/\.$/, '');
+        return owner ? `Incomplete property access on "${owner}"` : 'Incomplete property access';
+    }
+    const cleaned = rawMessage.replace(/\s*\(\d+:\d+\)\s*$/, '').trim();
+    if (/missing semicolon/i.test(cleaned)) {
+        return 'Unexpected token — missing operator or separator between expressions';
+    }
+    if (/^unexpected token$/i.test(cleaned)) {
+        const prevToken = getTokenBefore(doc, from);
+        if (prevToken.endsWith('('))
+            return 'Missing closing ")"';
+        if (prevToken.endsWith('['))
+            return 'Missing closing "]"';
+        if (/^function$/i.test(prevToken))
+            return 'Expected function name or "("';
+        if (/^return$/i.test(prevToken))
+            return 'Invalid expression after "return"';
+        if (/^=>$/.test(prevToken))
+            return 'Expected function body after "=>"';
+        if (/^const$|^let$|^var$/i.test(prevToken))
+            return 'Expected variable name';
+    }
+    return `JavaScript syntax error: ${cleaned}`;
+};
+/** Lấy tên binding từ pattern (Identifier, destructuring object/array, default, rest). */
+const collectPatternNames = (node, declared) => {
+    if (!node || typeof node.type !== 'string')
+        return;
+    switch (node.type) {
+        case 'Identifier':
+            if (node.name)
+                declared.add(node.name);
+            return;
+        case 'ObjectPattern':
+            if (node.properties)
+                for (const property of node.properties)
+                    collectPatternNames(property.type === 'RestElement' ? property.argument : property.value, declared);
+            return;
+        case 'ArrayPattern':
+            if (node.elements)
+                for (const element of node.elements)
+                    collectPatternNames(element, declared);
+            return;
+        case 'AssignmentPattern':
+            collectPatternNames(node.left, declared);
+            return;
+        case 'RestElement':
+            collectPatternNames(node.argument, declared);
+            return;
+        case 'TSParameterProperty':
+            collectPatternNames(node.parameter, declared);
+            return;
+        default:
+            return;
+    }
+};
+/** Thu thập tên binding (biến/hàm/class/param/import/enum...) từ 1 node vào tập `declared`. */
+const collectBindingNames = (node, declared) => {
+    switch (node.type) {
+        case 'VariableDeclarator':
+            collectPatternNames(node.id, declared);
+            return;
+        case 'FunctionDeclaration':
+        case 'FunctionExpression':
+        case 'ClassDeclaration':
+        case 'ClassExpression':
+            if (node.id?.name)
+                declared.add(node.id.name);
+            if (node.params)
+                for (const param of node.params)
+                    collectPatternNames(param, declared);
+            return;
+        case 'ArrowFunctionExpression':
+            if (node.params)
+                for (const param of node.params)
+                    collectPatternNames(param, declared);
+            return;
+        case 'CatchClause':
+            collectPatternNames(node.param, declared);
+            return;
+        case 'ImportDefaultSpecifier':
+        case 'ImportNamespaceSpecifier':
+        case 'ImportSpecifier':
+            if (node.local?.name)
+                declared.add(node.local.name);
+            return;
+        case 'TSEnumDeclaration':
+        case 'TSModuleDeclaration':
+            if (node.id?.name)
+                declared.add(node.id.name);
+            return;
+        default:
+            return;
+    }
+};
+/** Xác định 1 Identifier có phải tham chiếu giá trị không (loại property access, key object, declaration id, label...). */
+const isReferenceIdentifier = (parent, keyInParent) => {
+    if (!parent)
+        return true;
+    const parentType = parent.type;
+    if ((parentType === 'MemberExpression' || parentType === 'OptionalMemberExpression') && keyInParent === 'property' && !parent.computed)
+        return false;
+    if ((parentType === 'ObjectProperty' || parentType === 'ObjectMethod' || parentType === 'ClassMethod' || parentType === 'ClassProperty' || parentType === 'ClassPrivateProperty' || parentType === 'PropertyDefinition') && keyInParent === 'key' && !parent.computed)
+        return false;
+    if (keyInParent === 'label')
+        return false;
+    if (parentType === 'TSQualifiedName' && keyInParent === 'right')
+        return false;
+    if (parentType === 'VariableDeclarator' && keyInParent === 'id')
+        return false;
+    if ((parentType === 'FunctionDeclaration' || parentType === 'FunctionExpression' || parentType === 'ClassDeclaration' || parentType === 'ClassExpression') && keyInParent === 'id')
+        return false;
+    if (parentType === 'ImportSpecifier' || parentType === 'ImportDefaultSpecifier' || parentType === 'ImportNamespaceSpecifier' || parentType === 'ExportSpecifier')
+        return false;
+    if (parentType === 'MetaProperty')
+        return false;
+    if (parentType === 'TSEnumMember' && keyInParent === 'id')
+        return false;
+    return true;
+};
+/** Duyệt đệ quy AST: gom binding name vào `declared`, gom identifier tham chiếu vào `references`. */
+const walkAstNode = (node, parent, keyInParent, inType, declared, references) => {
+    if (Array.isArray(node)) {
+        for (const item of node)
+            walkAstNode(item, parent, keyInParent, inType, declared, references);
+        return;
+    }
+    if (!node || typeof node !== 'object')
+        return;
+    const current = node;
+    if (typeof current.type !== 'string')
+        return;
+    collectBindingNames(current, declared);
+    if (current.type === 'Identifier' && !inType && isReferenceIdentifier(parent, keyInParent)) {
+        const start = current.loc?.start;
+        if (current.name && start)
+            references.push({ name: current.name, line: start.line, column: start.column });
+    }
+    const opensType = inType || (current.type.startsWith('TS') && !tsValueNodes.has(current.type));
+    for (const childKey of Object.keys(current)) {
+        if (astSkipKeys.has(childKey))
+            continue;
+        const child = current[childKey];
+        const childOpensType = typeof child === 'object' && child !== null && typeof child.type === 'string' && child.type.startsWith('TS') && !tsValueNodes.has(child.type);
+        const childInType = opensType || astTypeKeys.has(childKey) || childOpensType;
+        walkAstNode(child, current, childKey, childInType, declared, references);
+    }
+};
+/**
+ * Pass ngữ nghĩa: báo biến CHƯA KHAI BÁO. Tự duyệt AST (object thuần) — KHÔNG dùng `@babel/traverse`
+ * (cần `process` của Node → crash browser). Hợp lệ = binding trong code + global JS/DOM + `completionLabels`.
+ */
+const collectUndeclaredIdentifiers = async (ast, doc, completionLabels, taintedLines = new Set()) => {
+    const globalsSet = await getKnownGlobals();
+    const declared = new Set();
+    const references = [];
+    walkAstNode(ast, null, '', false, declared, references);
+    const diagnostics = [];
+    const seen = new Set();
+    for (const reference of references) {
+        const { name, line: startLine, column: startColumn } = reference;
+        if (declared.has(name) || globalsSet.has(name) || completionLabels.has(name))
+            continue;
+        if (taintedLines.has(startLine))
+            continue;
+        const dedupeKey = `${startLine}:${startColumn}:${name}`;
+        if (seen.has(dedupeKey))
+            continue;
+        seen.add(dedupeKey);
+        const line = doc.line(Math.min(Math.max(startLine, 1), doc.lines));
+        const from = Math.min(line.from + Math.max(startColumn, 0), doc.length);
+        const to = Math.min(from + name.length, doc.length);
+        diagnostics.push({ from, to: Math.max(from + 1, to), severity: 'error', message: `"${name}" is not defined` });
+    }
+    return diagnostics;
+};
+/**
+ * Toàn bộ pipeline validate JS/TS:
+ * - Pass 1: trailing dot (text) — flag đúng vị trí dấu `.` cuối dòng + đánh dấu dòng tainted.
+ * - Pass 2: lỗi cú pháp babel — bỏ lỗi trên dòng tainted (cascading).
+ * - Pass 3: rule cần AST (thiếu `;`, biến chưa khai báo). Trailing dot được "vá" (`.`→space) để babel
+ *   vẫn parse được phần còn lại → rule vẫn chạy cho các dòng KHÁC.
+ */
+const computeJsDiagnostics = async (doc, code, completionLabels) => {
+    const diagnostics = [];
+    if (code.trim() === '') {
+        return diagnostics;
+    }
+    const taintedLines = new Set();
+    const dotPositions = [];
+    collectTrailingDotDiagnostics(doc, diagnostics, taintedLines, dotPositions);
+    const parseCode = replaceCharsWithSpace(code, dotPositions);
+    const parser = await getBabelParser();
+    const { errors, ast } = parseJs(parser, parseCode);
+    const seen = new Set();
+    for (const error of errors) {
+        const location = error.loc;
+        if (!location)
+            continue;
+        const lineNumber = Math.min(Math.max(location.line, 1), doc.lines);
+        if (taintedLines.has(lineNumber))
+            continue;
+        const line = doc.line(lineNumber);
+        const errorPos = Math.min(line.from + Math.max(location.column, 0), doc.length);
+        const to = Math.min(errorPos + 1, doc.length);
+        const from = errorPos >= to && errorPos > 0 ? errorPos - 1 : errorPos;
+        const message = buildJsErrorMessage(doc, errorPos, error.message);
+        const dedupeKey = `${from}:${message}`;
+        if (seen.has(dedupeKey))
+            continue;
+        seen.add(dedupeKey);
+        diagnostics.push({ from, to: Math.max(from + 1, to), severity: 'error', message });
+    }
+    if (errors.length === 0 && ast) {
+        collectMissingSemicolonDiagnostics(ast, code, diagnostics, taintedLines);
+        diagnostics.push(...(await collectUndeclaredIdentifiers(ast, doc, completionLabels, taintedLines)));
+    }
+    return diagnostics;
+};
+
+/** Validate JSON bằng `JSON.parse`. Lỗi → 1 diagnostic phủ toàn bộ nội dung. */
+const computeJsonDiagnostics = (view) => {
+    const text = view.state.doc.toString();
+    const diagnostics = [];
+    try {
+        JSON.parse(text);
+    }
+    catch (error) {
+        diagnostics.push({ from: 0, to: text.length, severity: 'error', message: get(error, 'message', '') });
+    }
+    return diagnostics;
+};
+
+const buildSqlErrorMessage = (doc, node) => {
+    if (node.from !== node.to) {
+        const text = doc.sliceString(node.from, node.to);
+        return `SQL syntax error near "${text}"`;
+    }
+    const prevToken = getTokenBefore(doc, node.from);
+    if (!prevToken)
+        return 'SQL syntax error at beginning of statement';
+    if (/FROM$/i.test(prevToken))
+        return 'Expected table name after FROM';
+    if (/SELECT$/i.test(prevToken))
+        return 'Expected column list after SELECT';
+    if (/WHERE$/i.test(prevToken))
+        return 'Expected condition after WHERE';
+    if (prevToken.endsWith('('))
+        return 'Missing closing ")"';
+    return `Unexpected end of SQL after "${prevToken}"`;
+};
+/** Phát hiện lỗi cú pháp SQL từ error node của syntaxTree (Lezer). */
+const computeSqlDiagnostics = (view) => {
+    const diagnostics = [];
+    const doc = view.state.doc;
+    syntaxTree(view.state).iterate({
+        enter: (node) => {
+            if (!node.type.isError)
+                return;
+            diagnostics.push({ from: Math.max(0, node.from - 1), to: node.from, severity: 'error', message: buildSqlErrorMessage(doc, node) });
+        },
+    });
+    return diagnostics;
+};
+
+const buildPythonErrorMessage = (doc, node) => {
+    if (node.from !== node.to) {
+        const text = doc.sliceString(node.from, node.to).trim();
+        return `Python syntax error${text ? ` near "${text}"` : ''}`;
+    }
+    const prevToken = getTokenBefore(doc, node.from);
+    if (!prevToken)
+        return 'Python syntax error';
+    if (/^def$/i.test(prevToken))
+        return 'Expected function name after "def"';
+    if (/^class$/i.test(prevToken))
+        return 'Expected class name after "class"';
+    if (/^return$/i.test(prevToken))
+        return 'Invalid expression after "return"';
+    if (/^import$/i.test(prevToken))
+        return 'Expected module name after "import"';
+    if (/^from$/i.test(prevToken))
+        return 'Expected module name after "from"';
+    if (/^if$/i.test(prevToken))
+        return 'Expected condition after "if"';
+    if (/^elif$/i.test(prevToken))
+        return 'Expected condition after "elif"';
+    if (/^while$/i.test(prevToken))
+        return 'Expected condition after "while"';
+    if (/^for$/i.test(prevToken))
+        return 'Expected variable after "for"';
+    if (prevToken.endsWith('.'))
+        return `Incomplete attribute access on "${prevToken.slice(0, -1)}"`;
+    if (prevToken.endsWith('('))
+        return 'Missing closing ")"';
+    if (prevToken.endsWith('['))
+        return 'Missing closing "]"';
+    return `Python syntax error near "${prevToken}"`;
+};
+/** Phát hiện lỗi cú pháp Python từ error node của syntaxTree (Lezer) — cùng approach SQL. */
+const computePythonDiagnostics = (view) => {
+    const diagnostics = [];
+    const doc = view.state.doc;
+    syntaxTree(view.state).iterate({
+        enter: (node) => {
+            if (!node.type.isError)
+                return;
+            const from = Math.max(0, node.from - 1);
+            const to = node.from === node.to ? node.from + 1 : node.to;
+            diagnostics.push({ from, to: Math.min(to, doc.length), severity: 'error', message: buildPythonErrorMessage(doc, node) });
+        },
+    });
+    return diagnostics;
+};
+
+/**
+ * Tạo extension autocomplete từ danh sách `items`:
+ * 1. Gõ `obj.` → gợi ý properties của obj (dot-notation).
+ * 2. Gõ ký tự → gợi ý tên biến/object top-level.
+ */
+const buildCompletionExtension = (items) => {
+    const completionSource = (context) => {
+        const dotMatch = context.matchBefore(/\w+\.\w*/);
+        if (dotMatch) {
+            const dotPos = dotMatch.text.indexOf('.');
+            const objectName = dotMatch.text.slice(0, dotPos);
+            const parent = items.find((i) => i.label === objectName);
+            if (parent?.properties?.length) {
+                return {
+                    from: dotMatch.from + dotPos + 1,
+                    options: parent.properties.map((p) => ({ label: p.label, type: p.type ?? 'property', detail: p.detail ?? '', info: p.info ?? '' })),
+                };
+            }
+        }
+        const word = context.matchBefore(/\w*/);
+        if (!word || (word.from === word.to && !context.explicit))
+            return null;
+        return {
+            from: word.from,
+            options: items.map((item) => ({ label: item.label, type: item.type ?? 'variable', detail: item.detail ?? '', info: item.info ?? '' })),
+        };
+    };
+    return autocompletion({ override: [completionSource] });
+};
+
+const escapeRegex = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+const toGlobalRegex = (pattern) => {
+    if (pattern instanceof RegExp) {
+        const flags = pattern.flags.includes('g') ? pattern.flags : `${pattern.flags}g`;
+        return new RegExp(pattern.source, flags);
+    }
+    return new RegExp(escapeRegex(pattern), 'gi');
+};
+/**
+ * Extension bảo mật gồm 2 layer:
+ * 1. Linter: highlight đỏ tại đúng vị trí match (bỏ qua match trong comment) + gọi `emitViolations`.
+ * 2. Transaction filter: chặn paste nếu nội dung paste chứa pattern cấm.
+ */
+const buildForbiddenExtension = (patterns, emitViolations) => {
+    const forbiddenLinter = linter((view) => {
+        const diagnostics = [];
+        const violations = [];
+        const text = view.state.doc.toString();
+        const commentRanges = [];
+        syntaxTree(view.state).iterate({
+            enter: (node) => {
+                if (node.type.name.toLowerCase().includes('comment')) {
+                    commentRanges.push({ from: node.from, to: node.to });
+                }
+            },
+        });
+        const isInComment = (from, to) => commentRanges.some((r) => from >= r.from && to <= r.to);
+        for (const pattern of patterns) {
+            const re = toGlobalRegex(pattern);
+            re.lastIndex = 0;
+            let match;
+            while ((match = re.exec(text)) !== null) {
+                const from = match.index;
+                const to = from + match[0].length;
+                if (isInComment(from, to))
+                    continue;
+                const line = view.state.doc.lineAt(from).number;
+                const patternLabel = pattern instanceof RegExp ? pattern.source : pattern;
+                diagnostics.push({ from, to, severity: 'error', message: `Mã bị cấm: "${match[0]}" — vi phạm chính sách bảo mật` });
+                violations.push({ from, to, line, pattern: patternLabel, matched: match[0] });
+            }
+        }
+        emitViolations(violations);
+        return diagnostics;
+    });
+    const pasteFilter = EditorState.transactionFilter.of((tr) => {
+        if (!tr.docChanged)
+            return tr;
+        if (!tr.annotation(Transaction.userEvent)?.startsWith('input.paste'))
+            return tr;
+        const newText = tr.newDoc.toString();
+        for (const pattern of patterns) {
+            const re = toGlobalRegex(pattern);
+            re.lastIndex = 0;
+            if (re.test(newText))
+                return [];
+        }
+        return tr;
+    });
+    return [forbiddenLinter, pasteFilter];
+};
+
+/** Parse giá trị CSS px → number. Trả về undefined nếu không phải px hợp lệ (vd `none`, `0`). */
+const parsePx = (raw) => {
+    if (!raw || !raw.endsWith('px')) {
+        return undefined;
+    }
+    const value = parseFloat(raw);
+    return Number.isFinite(value) && value > 0 ? value : undefined;
+};
+/** Bù dòng trống cho đủ `minLines` (xử lý 1 lần khi khởi tạo). Đủ rồi giữ nguyên, không cắt bớt. */
+const applyMinLines = (content, minLines) => {
+    const value = content ?? '';
+    if (!minLines || minLines <= 0) {
+        return value;
+    }
+    const currentLines = value === '' ? 1 : value.split('\n').length;
+    if (currentLines >= minLines) {
+        return value;
+    }
+    return value + '\n'.repeat(minLines - currentLines);
+};
+/**
+ * Tính min/max-height vùng cuộn theo CSS của container ngoài, snap về bội số dòng.
+ * Trừ offset phần header/toolbar (giữa đỉnh container và đỉnh vùng cuộn) để vừa khít container.
+ */
+const applyContainerHeight = (view, container) => {
+    const style = getComputedStyle(container);
+    const minPx = parsePx(style.minHeight);
+    const maxPx = parsePx(style.maxHeight);
+    if (minPx === undefined && maxPx === undefined) {
+        return;
+    }
+    view.requestMeasure({
+        read: (measureView) => {
+            const line = measureView.contentDOM.querySelector('.cm-line');
+            const lineHeight = (line ? line.getBoundingClientRect().height : measureView.defaultLineHeight) || 20;
+            const offsetTop = Math.max(measureView.scrollDOM.getBoundingClientRect().top - container.getBoundingClientRect().top, 0);
+            const toLines = (px) => Math.max(1, Math.floor((px - offsetTop - 8) / lineHeight));
+            return { lineHeight, minLines: minPx === undefined ? undefined : toLines(minPx), maxLines: maxPx === undefined ? undefined : toLines(maxPx) };
+        },
+        write: ({ lineHeight, minLines, maxLines }, writeView) => {
+            if (maxLines !== undefined) {
+                writeView.scrollDOM.style.maxHeight = `${maxLines * lineHeight + 8}px`;
+                writeView.scrollDOM.style.overflowY = 'auto';
+            }
+            // min-height: bù dòng trống vào content (hiện đủ line-number 1..N), giống cơ chế minLines.
+            if (minLines !== undefined) {
+                const currentLines = writeView.state.doc.lines;
+                if (currentLines < minLines) {
+                    queueMicrotask(() => writeView.dispatch({ changes: { from: writeView.state.doc.length, insert: '\n'.repeat(minLines - currentLines) } }));
+                }
+            }
+        },
+    });
+};
+/**
+ * Giới hạn chiều cao editor (xử lý 1 lần). 2 chế độ loại trừ nhau:
+ * - `maxLines`: cap theo số dòng truyền vào.
+ * - `container`: tự tính số dòng theo `min-height`/`max-height` (CSS) của container, snap bội số dòng.
+ * Cấu hình đồng thời `container` + `minLines`/`maxLines` → throw.
+ */
+const applyMaxHeight = (view, options) => {
+    const { minLines, maxLines, container } = options;
+    if (container && (minLines || maxLines)) {
+        throw new Error('[preview-text-data] CẤM cấu hình [containerElement] cùng [minLines]/[maxLines]. Container tự quản lý min/max height.');
+    }
+    if (!view) {
+        return;
+    }
+    if (container) {
+        applyContainerHeight(view, container);
+        return;
+    }
+    if (!maxLines || maxLines <= 0) {
+        return;
+    }
+    view.requestMeasure({
+        read: (measureView) => {
+            const line = measureView.contentDOM.querySelector('.cm-line');
+            return (line ? line.getBoundingClientRect().height : measureView.defaultLineHeight) || 20;
+        },
+        write: (lineHeight, writeView) => {
+            writeView.scrollDOM.style.maxHeight = `${maxLines * lineHeight + 8}px`;
+            writeView.scrollDOM.style.overflowY = 'auto';
+        },
+    });
+};
+
 class LibsUiComponentsPreviewTextDataComponent {
     // ==========================================================================
     // PRIVATE PROPERTIES
@@ -211,6 +850,19 @@ class LibsUiComponentsPreviewTextDataComponent {
     hiddenAction = input(false, {
         transform: (value) => value ?? false,
     });
+    /** Số dòng tối thiểu: nếu content ít dòng hơn sẽ tự bù dòng trống (xử lý 1 lần khi khởi tạo editor). Bỏ trống = không bù. */
+    minLines = input();
+    /** Số dòng tối đa: vượt quá editor sẽ giới hạn chiều cao và xuất hiện vùng cuộn (xử lý 1 lần khi khởi tạo editor). Bỏ trống = không giới hạn. */
+    maxLines = input();
+    /**
+     * Element container bên ngoài để editor tự tính chiều cao theo `min-height`/`max-height` (CSS) của nó.
+     * Khi truyền, editor đọc min/max-height của container, trừ phần header/toolbar phía trên, rồi snap
+     * chiều cao vùng cuộn về đúng bội số dòng (không cắt nửa dòng) + bật scroll khi vượt max.
+     * CẤM cấu hình đồng thời với `minLines`/`maxLines` (sẽ throw lỗi) — container tự quản lý min/max.
+     */
+    containerElement = input();
+    /** z-index cho popover dropdown chọn ngôn ngữ. */
+    zIndexPopover = input();
     lintIgnorePatterns = input(['Cannot use import statement outside a module', 'Unexpected token export', 'import ', '@angular/core'], {
         transform: (value) => value ?? ['Cannot use import statement outside a module', 'Unexpected token export', 'import ', '@angular/core'],
     });
@@ -273,7 +925,7 @@ class LibsUiComponentsPreviewTextDataComponent {
             if (!this.isInitialized || !this.editorViewInstance)
                 return;
             this.editorViewInstance.dispatch({
-                effects: this.completionsCompartment.reconfigure(items.length ? this.buildCompletionExtension(items) : []),
+                effects: this.completionsCompartment.reconfigure(items.length ? buildCompletionExtension(items) : []),
             });
         });
         // Effect để cập nhật forbidden patterns khi input thay đổi
@@ -282,7 +934,7 @@ class LibsUiComponentsPreviewTextDataComponent {
             if (!this.isInitialized || !this.editorViewInstance)
                 return;
             this.editorViewInstance.dispatch({
-                effects: this.forbiddenCompartment.reconfigure(patterns.length ? this.buildForbiddenExtension(patterns) : []),
+                effects: this.forbiddenCompartment.reconfigure(patterns.length ? buildForbiddenExtension(patterns, (violations) => this.outViolations.emit(violations)) : []),
             });
         });
         // Cleanup khi component bị destroy
@@ -314,10 +966,11 @@ class LibsUiComponentsPreviewTextDataComponent {
         const languageExtension = await this.loadLanguageExtension(this.langSelected());
         const linterExtension = await this.loadLinterExtension(this.langSelected());
         this.editorViewInstance = new EditorView({
-            doc: this.content(),
+            doc: applyMinLines(this.content(), this.minLines()),
             parent: this.containerPreview().nativeElement,
             extensions: this.createExtensions(languageExtension, linterExtension),
         });
+        applyMaxHeight(this.editorViewInstance, { minLines: this.minLines(), maxLines: this.maxLines(), container: this.containerElement() });
     }
     /**
      * Tạo danh sách extensions cho editor
@@ -330,8 +983,8 @@ class LibsUiComponentsPreviewTextDataComponent {
             this.languageCompartment.of(languageExtension),
             this.linterCompartment.of(linterExtension),
             // Compartment cho custom completions — Prec.highest để override basicSetup's autocompletion
-            Prec.highest(this.completionsCompartment.of(initialCompletions.length ? this.buildCompletionExtension(initialCompletions) : [])),
-            this.forbiddenCompartment.of(initialPatterns.length ? this.buildForbiddenExtension(initialPatterns) : []),
+            Prec.highest(this.completionsCompartment.of(initialCompletions.length ? buildCompletionExtension(initialCompletions) : [])),
+            this.forbiddenCompartment.of(initialPatterns.length ? buildForbiddenExtension(initialPatterns, (violations) => this.outViolations.emit(violations)) : []),
             this.createLightTheme(),
             EditorView.editable.of(this.editable()),
             this.wrapCompartment.of(EditorView.lineWrapping),
@@ -411,336 +1064,38 @@ class LibsUiComponentsPreviewTextDataComponent {
     // ==========================================================================
     // PUBLIC METHODS - Linter factories (được gọi từ registry)
     // ==========================================================================
-    /**
-     * Tạo JavaScript linter với 2-pass detection:
-     * 1. Text-based scan cho trailing dot (parser thường đặt error node sai vị trí với pattern này)
-     * 2. syntaxTree cho các lỗi thực sự khác, bỏ qua vùng bị ảnh hưởng bởi trailing dot
-     */
+    /** JavaScript/TypeScript linter — pipeline trong `linters/js-linter.ts` (babel + trailing-dot + thiếu `;` + biến chưa khai báo). */
     createJsLinter() {
-        return linter((view) => {
-            const diagnostics = [];
-            const doc = view.state.doc;
-            // Pass 1: Text-based trailing dot detection — đặt diagnostic đúng tại vị trí dấu chấm
-            const trailingDotLines = new Set();
-            for (let lineNum = 1; lineNum <= doc.lines; lineNum++) {
-                const line = doc.line(lineNum);
-                const trimmed = line.text.trimEnd();
-                const match = /(\w+)\.\s*$/.exec(trimmed);
-                if (!match)
-                    continue;
-                trailingDotLines.add(lineNum);
-                const dotPos = line.from + trimmed.lastIndexOf('.');
-                diagnostics.push({
-                    from: dotPos,
-                    to: dotPos + 1,
-                    severity: 'error',
-                    message: `Incomplete property access on "${match[1]}"`,
-                });
-            }
-            // Đánh dấu các dòng bị ảnh hưởng bởi trailing dot (trailing-dot line + 4 dòng tiếp theo)
-            // để lọc cascading errors từ syntaxTree
-            const taintedLines = new Set();
-            for (const lineNum of trailingDotLines) {
-                for (let i = lineNum; i <= Math.min(lineNum + 4, doc.lines); i++) {
-                    taintedLines.add(i);
-                }
-            }
-            // Pass 2: syntaxTree cho các lỗi khác (chỉ non-empty range, bỏ qua vùng tainted)
-            const tree = syntaxTree(view.state);
-            tree.iterate({
-                enter: (node) => {
-                    if (!node.type.isError)
-                        return;
-                    if (node.from === node.to)
-                        return; // Bỏ qua empty-range node (cascading error)
-                    const errorLineNum = doc.lineAt(node.from).number;
-                    if (taintedLines.has(errorLineNum))
-                        return;
-                    diagnostics.push({
-                        from: node.from,
-                        to: Math.min(node.to, doc.length),
-                        severity: 'error',
-                        message: this.buildJsErrorMessage(doc, node),
-                    });
-                },
-            });
+        return linter(async (view) => {
+            const diagnostics = await computeJsDiagnostics(view.state.doc, view.state.doc.toString(), new Set(this.completions().map((item) => item.label)));
             this.syntaxErrors.emit(diagnostics);
             return diagnostics;
         });
     }
-    buildJsErrorMessage(doc, node) {
-        const text = doc.sliceString(node.from, node.to).trim();
-        if (text)
-            return `JavaScript syntax error near "${text}"`;
-        const prevToken = this.getTokenBefore(doc, node.from);
-        if (!prevToken)
-            return 'JavaScript syntax error';
-        if (prevToken.endsWith('('))
-            return 'Missing closing ")"';
-        if (prevToken.endsWith('['))
-            return 'Missing closing "]"';
-        if (/^function$/i.test(prevToken))
-            return 'Expected function name or "("';
-        if (/^return$/i.test(prevToken))
-            return 'Invalid expression after "return"';
-        if (/^=>$/.test(prevToken))
-            return 'Expected function body after "=>"';
-        if (/^const$|^let$|^var$/i.test(prevToken))
-            return 'Expected variable name';
-        return `JavaScript syntax error near "${prevToken}"`;
-    }
-    /**
-     * Tạo JSON linter
-     * Sử dụng JSON.parse để validate
-     */
+    /** JSON linter — logic trong `linters/json-linter.ts`. */
     createJsonLinter() {
         return linter((view) => {
-            const text = view.state.doc.toString();
-            const diagnostics = [];
-            try {
-                JSON.parse(text);
-            }
-            catch (err) {
-                diagnostics.push({
-                    from: 0,
-                    to: text.length,
-                    severity: 'error',
-                    message: get(err, 'message', ''),
-                });
-            }
+            const diagnostics = computeJsonDiagnostics(view);
             this.syntaxErrors.emit(diagnostics);
             return diagnostics;
         });
     }
-    /**
-     * Tạo SQL linter
-     */
+    /** SQL linter — logic trong `linters/sql-linter.ts`. */
     createSqlLinter() {
         return linter((view) => {
-            const diagnostics = [];
-            const doc = view.state.doc;
-            const tree = syntaxTree(view.state);
-            tree.iterate({
-                enter: (node) => {
-                    if (!node.type.isError)
-                        return;
-                    diagnostics.push({
-                        from: Math.max(0, node.from - 1),
-                        to: node.from,
-                        severity: 'error',
-                        message: this.buildSqlErrorMessage(doc, node),
-                    });
-                },
-            });
+            const diagnostics = computeSqlDiagnostics(view);
             this.syntaxErrors.emit(diagnostics);
             return diagnostics;
         });
     }
-    buildSqlErrorMessage(doc, node) {
-        if (node.from !== node.to) {
-            const text = doc.sliceString(node.from, node.to);
-            return `SQL syntax error near "${text}"`;
-        }
-        const prevToken = this.getTokenBefore(doc, node.from);
-        if (!prevToken) {
-            return 'SQL syntax error at beginning of statement';
-        }
-        if (/FROM$/i.test(prevToken)) {
-            return 'Expected table name after FROM';
-        }
-        if (/SELECT$/i.test(prevToken)) {
-            return 'Expected column list after SELECT';
-        }
-        if (/WHERE$/i.test(prevToken)) {
-            return 'Expected condition after WHERE';
-        }
-        if (prevToken.endsWith('(')) {
-            return 'Missing closing ")"';
-        }
-        return `Unexpected end of SQL after "${prevToken}"`;
-    }
-    getTokenBefore(doc, pos) {
-        const start = Math.max(0, pos - 30);
-        const text = doc.sliceString(start, pos);
-        const match = /(\S+)\s*$/.exec(text);
-        return match?.[1] ?? '';
-    }
-    /**
-     * Tạo Python linter dựa trên syntaxTree parse error — cùng approach với SQL linter.
-     * Phát hiện lỗi cú pháp mà CodeMirror Python parser đánh dấu là error node.
-     */
+    /** Python linter — logic trong `linters/python-linter.ts`. */
     createPythonLinter() {
         return linter((view) => {
-            const diagnostics = [];
-            const doc = view.state.doc;
-            const tree = syntaxTree(view.state);
-            tree.iterate({
-                enter: (node) => {
-                    if (!node.type.isError)
-                        return;
-                    const from = Math.max(0, node.from - 1);
-                    const to = node.from === node.to ? node.from + 1 : node.to;
-                    diagnostics.push({
-                        from,
-                        to: Math.min(to, doc.length),
-                        severity: 'error',
-                        message: this.buildPythonErrorMessage(doc, node),
-                    });
-                },
-            });
+            const diagnostics = computePythonDiagnostics(view);
             this.syntaxErrors.emit(diagnostics);
             return diagnostics;
         });
     }
-    buildPythonErrorMessage(doc, node) {
-        if (node.from !== node.to) {
-            const text = doc.sliceString(node.from, node.to).trim();
-            const textSuffix = text ? ` near "${text}"` : '';
-            return `Python syntax error${textSuffix}`;
-        }
-        const prevToken = this.getTokenBefore(doc, node.from);
-        if (!prevToken) {
-            return 'Python syntax error';
-        }
-        if (/^def$/i.test(prevToken))
-            return 'Expected function name after "def"';
-        if (/^class$/i.test(prevToken))
-            return 'Expected class name after "class"';
-        if (/^return$/i.test(prevToken))
-            return 'Invalid expression after "return"';
-        if (/^import$/i.test(prevToken))
-            return 'Expected module name after "import"';
-        if (/^from$/i.test(prevToken))
-            return 'Expected module name after "from"';
-        if (/^if$/i.test(prevToken))
-            return 'Expected condition after "if"';
-        if (/^elif$/i.test(prevToken))
-            return 'Expected condition after "elif"';
-        if (/^while$/i.test(prevToken))
-            return 'Expected condition after "while"';
-        if (/^for$/i.test(prevToken))
-            return 'Expected variable after "for"';
-        if (prevToken.endsWith('.'))
-            return `Incomplete attribute access on "${prevToken.slice(0, -1)}"`;
-        if (prevToken.endsWith('('))
-            return 'Missing closing ")"';
-        if (prevToken.endsWith('['))
-            return 'Missing closing "]"';
-        return `Python syntax error near "${prevToken}"`;
-    }
-    /**
-     * Tạo CodeMirror extension cho custom completions từ danh sách input.
-     * Hỗ trợ 2 chế độ:
-     * 1. Gõ tên biến → gợi ý top-level items
-     * 2. Gõ `obj.` → gợi ý properties của obj
-     */
-    buildCompletionExtension(items) {
-        const completionSource = (context) => {
-            // Chế độ dot-notation: gõ "obj.prop" → gợi ý properties của obj
-            const dotMatch = context.matchBefore(/\w+\.\w*/);
-            if (dotMatch) {
-                const dotPos = dotMatch.text.indexOf('.');
-                const objectName = dotMatch.text.slice(0, dotPos);
-                const parent = items.find((i) => i.label === objectName);
-                if (parent?.properties?.length) {
-                    return {
-                        from: dotMatch.from + dotPos + 1,
-                        options: parent.properties.map((p) => ({
-                            label: p.label,
-                            type: p.type ?? 'property',
-                            detail: p.detail ?? '',
-                            info: p.info ?? '',
-                        })),
-                    };
-                }
-            }
-            // Chế độ top-level: gợi ý tên biến/object khi gõ ký tự
-            const word = context.matchBefore(/\w*/);
-            if (!word || (word.from === word.to && !context.explicit))
-                return null;
-            return {
-                from: word.from,
-                options: items.map((item) => ({
-                    label: item.label,
-                    type: item.type ?? 'variable',
-                    detail: item.detail ?? '',
-                    info: item.info ?? '',
-                })),
-            };
-        };
-        return autocompletion({ override: [completionSource] });
-    }
-    /**
-     * Tạo extension bảo mật gồm 2 layer:
-     * 1. Linter: highlight đỏ tại đúng vị trí match + emit outViolations
-     * 2. Transaction filter: chặn paste nếu nội dung paste chứa pattern cấm
-     */
-    buildForbiddenExtension(patterns) {
-        const toGlobalRegex = (p) => {
-            if (p instanceof RegExp) {
-                const flags = p.flags.includes('g') ? p.flags : `${p.flags}g`;
-                return new RegExp(p.source, flags);
-            }
-            return new RegExp(this.escapeRegex(p), 'gi');
-        };
-        const forbiddenLinter = linter((view) => {
-            const diagnostics = [];
-            const violations = [];
-            const text = view.state.doc.toString();
-            const tree = syntaxTree(view.state);
-            // Build a Set of comment ranges từ AST để skip match nằm trong comment
-            const commentRanges = [];
-            tree.iterate({
-                enter: (node) => {
-                    if (node.type.name.toLowerCase().includes('comment')) {
-                        commentRanges.push({ from: node.from, to: node.to });
-                    }
-                },
-            });
-            const isInComment = (from, to) => commentRanges.some((r) => from >= r.from && to <= r.to);
-            for (const pattern of patterns) {
-                const re = toGlobalRegex(pattern);
-                re.lastIndex = 0;
-                let match;
-                while ((match = re.exec(text)) !== null) {
-                    const from = match.index;
-                    const to = from + match[0].length;
-                    if (isInComment(from, to))
-                        continue;
-                    const line = view.state.doc.lineAt(from).number;
-                    const patternLabel = pattern instanceof RegExp ? pattern.source : pattern;
-                    diagnostics.push({
-                        from,
-                        to,
-                        severity: 'error',
-                        message: `Mã bị cấm: "${match[0]}" — vi phạm chính sách bảo mật`,
-                    });
-                    violations.push({ from, to, line, pattern: patternLabel, matched: match[0] });
-                }
-            }
-            this.outViolations.emit(violations);
-            return diagnostics;
-        });
-        // Chặn paste nếu nội dung paste chứa bất kỳ pattern cấm nào
-        const pasteFilter = EditorState.transactionFilter.of((tr) => {
-            if (!tr.docChanged)
-                return tr;
-            if (!tr.annotation(Transaction.userEvent)?.startsWith('input.paste'))
-                return tr;
-            const newText = tr.newDoc.toString();
-            for (const pattern of patterns) {
-                const re = toGlobalRegex(pattern);
-                re.lastIndex = 0;
-                if (re.test(newText))
-                    return []; // [] = block transaction
-            }
-            return tr;
-        });
-        return [forbiddenLinter, pasteFilter];
-    }
-    escapeRegex(str) {
-        return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    }
     // ==========================================================================
     // PROTECTED METHODS - Event handlers
     // ==========================================================================
@@ -786,16 +1141,16 @@ class LibsUiComponentsPreviewTextDataComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsPreviewTextDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsPreviewTextDataComponent, isStandalone: true, selector: "libs_ui-components-preview_text_data", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, langSelected: { classPropertyName: "langSelected", publicName: "langSelected", isSignal: true, isRequired: true, transformFunction: null }, langsAccept: { classPropertyName: "langsAccept", publicName: "langsAccept", isSignal: true, isRequired: false, transformFunction: null }, langsChangeLabel: { classPropertyName: "langsChangeLabel", publicName: "langsChangeLabel", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, hiddenAction: { classPropertyName: "hiddenAction", publicName: "hiddenAction", isSignal: true, isRequired: false, transformFunction: null }, lintIgnorePatterns: { classPropertyName: "lintIgnorePatterns", publicName: "lintIgnorePatterns", isSignal: true, isRequired: false, transformFunction: null }, completions: { classPropertyName: "completions", publicName: "completions", isSignal: true, isRequired: false, transformFunction: null }, forbiddenPatterns: { classPropertyName: "forbiddenPatterns", publicName: "forbiddenPatterns", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { langSelected: "langSelectedChange", outChange: "outChange", syntaxErrors: "syntaxErrors", outViolations: "outViolations" }, viewQueries: [{ propertyName: "containerPreview", first: true, predicate: ["containerPreview"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"libs-ui-preview-data-container flex flex-col w-full h-auto rounded-[8px] libs-ui-border-general px-[8px]\"\n  [style.--background-color]=\"background()\"\n  [class.pt-[8px]]=\"!hiddenAction()\">\n  @if (!hiddenAction()) {\n    <div class=\"flex items-center content-between color-[#6a7383]\">\n      <libs_ui-components-dropdown\n        classInclude=\"w-[200px]\"\n        [listConfig]=\"configLoadDataIsHttpConfig()\"\n        [listMaxItemShow]=\"5\"\n        [isNgContent]=\"true\"\n        [readonly]=\"!editable() || !acceptChangeLang()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        (outSelectKey)=\"handlerSelectKey($event)\">\n        <libs_ui-components-buttons-button\n          [type]=\"'button-link-third'\"\n          [label]=\"labelLang() || ''\"\n          [sizeButton]=\"'small'\"\n          [classIconRight]=\"editable() && acceptChangeLang() ? 'libs-ui-icon-move-right rotate-90' : ''\"\n          [classInclude]=\"'!p-[0px]' + (editable() && acceptChangeLang() ? '' : '!pointer-events-none !cursor-default hover:!text-[#6A7383]')\" />\n      </libs_ui-components-dropdown>\n      <div class=\"flex items-center\">\n        <libs_ui-components-buttons-button\n          [type]=\"'button-link-third'\"\n          [label]=\"isWrap() ? 'i18n_remove_line_wrap' : 'i18n_line_wrap'\"\n          [sizeButton]=\"'small'\"\n          [classIconLeft]=\"isWrap() ? 'libs-ui-icon-unwrap' : 'libs-ui-icon-wrap'\"\n          [classInclude]=\"'mo-lib-p-0px mo-lib-mr-16px'\"\n          (outClick)=\"handlerLineWrap()\" />\n        <libs_ui-components-buttons-button\n          [type]=\"'button-link-third'\"\n          [label]=\"'i18n_copy'\"\n          [sizeButton]=\"'small'\"\n          [classIconLeft]=\"'libs-ui-icon-copy'\"\n          [classInclude]=\"'mo-lib-p-0px'\"\n          (outClick)=\"handlerCopy()\" />\n      </div>\n    </div>\n  }\n  <div #containerPreview></div>\n</div>\n", styles: [":host ::ng-deep .libs-ui-preview-data-container{background-color:var(--background-color)!important}:host ::ng-deep .libs-ui-preview-data-container .cm-line{white-space:pre-wrap}:host ::ng-deep .libs-ui-preview-data-container .cm-lintRange-error{background-color:#ff323233;border-bottom:2px solid red}:host ::ng-deep .libs-ui-preview-data-container .cm-lintRange-warning{background-color:#ffc80026}:host ::ng-deep .libs-ui-preview-data-container .cm-tooltip-lint{background:#fff8f8;color:#d32f2f;border:1px solid #f44336;padding:8px 10px;font-size:13px;font-family:Inter,sans-serif;border-radius:6px;box-shadow:0 2px 8px #ff000026}:host ::ng-deep .libs-ui-preview-data-container .cm-focused{outline:none!important}:host ::ng-deep .libs-ui-preview-data-container .cm-gutters{background-color:var(--background-color)!important}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "dropdownTemplateRefNotSearchNoData", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsPreviewTextDataComponent, isStandalone: true, selector: "libs_ui-components-preview_text_data", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, langSelected: { classPropertyName: "langSelected", publicName: "langSelected", isSignal: true, isRequired: true, transformFunction: null }, langsAccept: { classPropertyName: "langsAccept", publicName: "langsAccept", isSignal: true, isRequired: false, transformFunction: null }, langsChangeLabel: { classPropertyName: "langsChangeLabel", publicName: "langsChangeLabel", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, hiddenAction: { classPropertyName: "hiddenAction", publicName: "hiddenAction", isSignal: true, isRequired: false, transformFunction: null }, minLines: { classPropertyName: "minLines", publicName: "minLines", isSignal: true, isRequired: false, transformFunction: null }, maxLines: { classPropertyName: "maxLines", publicName: "maxLines", isSignal: true, isRequired: false, transformFunction: null }, containerElement: { classPropertyName: "containerElement", publicName: "containerElement", isSignal: true, isRequired: false, transformFunction: null }, zIndexPopover: { classPropertyName: "zIndexPopover", publicName: "zIndexPopover", isSignal: true, isRequired: false, transformFunction: null }, lintIgnorePatterns: { classPropertyName: "lintIgnorePatterns", publicName: "lintIgnorePatterns", isSignal: true, isRequired: false, transformFunction: null }, completions: { classPropertyName: "completions", publicName: "completions", isSignal: true, isRequired: false, transformFunction: null }, forbiddenPatterns: { classPropertyName: "forbiddenPatterns", publicName: "forbiddenPatterns", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { langSelected: "langSelectedChange", outChange: "outChange", syntaxErrors: "syntaxErrors", outViolations: "outViolations" }, viewQueries: [{ propertyName: "containerPreview", first: true, predicate: ["containerPreview"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"libs-ui-preview-data-container flex flex-col w-full h-auto rounded-[8px] libs-ui-border-general px-[8px]\"\n  [style.--background-color]=\"background()\"\n  [class.pt-[8px]]=\"!hiddenAction()\">\n  @if (!hiddenAction()) {\n    <div class=\"flex items-center content-between color-[#6a7383]\">\n      <libs_ui-components-dropdown\n        classInclude=\"w-[200px]\"\n        [listConfig]=\"configLoadDataIsHttpConfig()\"\n        [listMaxItemShow]=\"5\"\n        [zIndex]=\"zIndexPopover()\"\n        [isNgContent]=\"true\"\n        [readonly]=\"!editable() || !acceptChangeLang()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        (outSelectKey)=\"handlerSelectKey($event)\">\n        <libs_ui-components-buttons-button\n          [type]=\"'button-link-third'\"\n          [label]=\"labelLang() || ''\"\n          [sizeButton]=\"'small'\"\n          [classIconRight]=\"editable() && acceptChangeLang() ? 'libs-ui-icon-move-right rotate-90' : ''\"\n          [classInclude]=\"'!p-[0px]' + (editable() && acceptChangeLang() ? '' : '!pointer-events-none !cursor-default hover:!text-[#6A7383]')\" />\n      </libs_ui-components-dropdown>\n      <div class=\"flex items-center\">\n        <libs_ui-components-buttons-button\n          [type]=\"'button-link-third'\"\n          [label]=\"isWrap() ? 'i18n_remove_line_wrap' : 'i18n_line_wrap'\"\n          [sizeButton]=\"'small'\"\n          [classIconLeft]=\"isWrap() ? 'libs-ui-icon-unwrap' : 'libs-ui-icon-wrap'\"\n          [classInclude]=\"'mo-lib-p-0px mo-lib-mr-16px'\"\n          (outClick)=\"handlerLineWrap()\" />\n        <libs_ui-components-buttons-button\n          [type]=\"'button-link-third'\"\n          [label]=\"'i18n_copy'\"\n          [sizeButton]=\"'small'\"\n          [classIconLeft]=\"'libs-ui-icon-copy'\"\n          [classInclude]=\"'mo-lib-p-0px'\"\n          (outClick)=\"handlerCopy()\" />\n      </div>\n    </div>\n  }\n  <div #containerPreview></div>\n</div>\n", styles: [":host ::ng-deep .libs-ui-preview-data-container{background-color:var(--background-color)!important}:host ::ng-deep .libs-ui-preview-data-container .cm-line{white-space:pre-wrap}:host ::ng-deep .libs-ui-preview-data-container .cm-lintRange-error{background-color:#ff323233;border-bottom:2px solid red}:host ::ng-deep .libs-ui-preview-data-container .cm-lintRange-warning{background-color:#ffc80026}:host ::ng-deep .libs-ui-preview-data-container .cm-tooltip-lint{background:#fff8f8;color:#d32f2f;border:1px solid #f44336;padding:8px 10px;font-size:13px;font-family:Inter,sans-serif;border-radius:6px;box-shadow:0 2px 8px #ff000026}:host ::ng-deep .libs-ui-preview-data-container .cm-focused{outline:none!important}:host ::ng-deep .libs-ui-preview-data-container .cm-gutters{background-color:var(--background-color)!important}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "dropdownTemplateRefNotSearchNoData", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsPreviewTextDataComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'libs_ui-components-preview_text_data', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LibsUiComponentsDropdownComponent, LibsUiComponentsButtonsButtonComponent], template: "<div\n  class=\"libs-ui-preview-data-container flex flex-col w-full h-auto rounded-[8px] libs-ui-border-general px-[8px]\"\n  [style.--background-color]=\"background()\"\n  [class.pt-[8px]]=\"!hiddenAction()\">\n  @if (!hiddenAction()) {\n    <div class=\"flex items-center content-between color-[#6a7383]\">\n      <libs_ui-components-dropdown\n        classInclude=\"w-[200px]\"\n        [listConfig]=\"configLoadDataIsHttpConfig()\"\n        [listMaxItemShow]=\"5\"\n        [isNgContent]=\"true\"\n        [readonly]=\"!editable() || !acceptChangeLang()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        (outSelectKey)=\"handlerSelectKey($event)\">\n        <libs_ui-components-buttons-button\n          [type]=\"'button-link-third'\"\n          [label]=\"labelLang() || ''\"\n          [sizeButton]=\"'small'\"\n          [classIconRight]=\"editable() && acceptChangeLang() ? 'libs-ui-icon-move-right rotate-90' : ''\"\n          [classInclude]=\"'!p-[0px]' + (editable() && acceptChangeLang() ? '' : '!pointer-events-none !cursor-default hover:!text-[#6A7383]')\" />\n      </libs_ui-components-dropdown>\n      <div class=\"flex items-center\">\n        <libs_ui-components-buttons-button\n          [type]=\"'button-link-third'\"\n          [label]=\"isWrap() ? 'i18n_remove_line_wrap' : 'i18n_line_wrap'\"\n          [sizeButton]=\"'small'\"\n          [classIconLeft]=\"isWrap() ? 'libs-ui-icon-unwrap' : 'libs-ui-icon-wrap'\"\n          [classInclude]=\"'mo-lib-p-0px mo-lib-mr-16px'\"\n          (outClick)=\"handlerLineWrap()\" />\n        <libs_ui-components-buttons-button\n          [type]=\"'button-link-third'\"\n          [label]=\"'i18n_copy'\"\n          [sizeButton]=\"'small'\"\n          [classIconLeft]=\"'libs-ui-icon-copy'\"\n          [classInclude]=\"'mo-lib-p-0px'\"\n          (outClick)=\"handlerCopy()\" />\n      </div>\n    </div>\n  }\n  <div #containerPreview></div>\n</div>\n", styles: [":host ::ng-deep .libs-ui-preview-data-container{background-color:var(--background-color)!important}:host ::ng-deep .libs-ui-preview-data-container .cm-line{white-space:pre-wrap}:host ::ng-deep .libs-ui-preview-data-container .cm-lintRange-error{background-color:#ff323233;border-bottom:2px solid red}:host ::ng-deep .libs-ui-preview-data-container .cm-lintRange-warning{background-color:#ffc80026}:host ::ng-deep .libs-ui-preview-data-container .cm-tooltip-lint{background:#fff8f8;color:#d32f2f;border:1px solid #f44336;padding:8px 10px;font-size:13px;font-family:Inter,sans-serif;border-radius:6px;box-shadow:0 2px 8px #ff000026}:host ::ng-deep .libs-ui-preview-data-container .cm-focused{outline:none!important}:host ::ng-deep .libs-ui-preview-data-container .cm-gutters{background-color:var(--background-color)!important}\n"] }]
+            args: [{ selector: 'libs_ui-components-preview_text_data', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LibsUiComponentsDropdownComponent, LibsUiComponentsButtonsButtonComponent], template: "<div\n  class=\"libs-ui-preview-data-container flex flex-col w-full h-auto rounded-[8px] libs-ui-border-general px-[8px]\"\n  [style.--background-color]=\"background()\"\n  [class.pt-[8px]]=\"!hiddenAction()\">\n  @if (!hiddenAction()) {\n    <div class=\"flex items-center content-between color-[#6a7383]\">\n      <libs_ui-components-dropdown\n        classInclude=\"w-[200px]\"\n        [listConfig]=\"configLoadDataIsHttpConfig()\"\n        [listMaxItemShow]=\"5\"\n        [zIndex]=\"zIndexPopover()\"\n        [isNgContent]=\"true\"\n        [readonly]=\"!editable() || !acceptChangeLang()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        (outSelectKey)=\"handlerSelectKey($event)\">\n        <libs_ui-components-buttons-button\n          [type]=\"'button-link-third'\"\n          [label]=\"labelLang() || ''\"\n          [sizeButton]=\"'small'\"\n          [classIconRight]=\"editable() && acceptChangeLang() ? 'libs-ui-icon-move-right rotate-90' : ''\"\n          [classInclude]=\"'!p-[0px]' + (editable() && acceptChangeLang() ? '' : '!pointer-events-none !cursor-default hover:!text-[#6A7383]')\" />\n      </libs_ui-components-dropdown>\n      <div class=\"flex items-center\">\n        <libs_ui-components-buttons-button\n          [type]=\"'button-link-third'\"\n          [label]=\"isWrap() ? 'i18n_remove_line_wrap' : 'i18n_line_wrap'\"\n          [sizeButton]=\"'small'\"\n          [classIconLeft]=\"isWrap() ? 'libs-ui-icon-unwrap' : 'libs-ui-icon-wrap'\"\n          [classInclude]=\"'mo-lib-p-0px mo-lib-mr-16px'\"\n          (outClick)=\"handlerLineWrap()\" />\n        <libs_ui-components-buttons-button\n          [type]=\"'button-link-third'\"\n          [label]=\"'i18n_copy'\"\n          [sizeButton]=\"'small'\"\n          [classIconLeft]=\"'libs-ui-icon-copy'\"\n          [classInclude]=\"'mo-lib-p-0px'\"\n          (outClick)=\"handlerCopy()\" />\n      </div>\n    </div>\n  }\n  <div #containerPreview></div>\n</div>\n", styles: [":host ::ng-deep .libs-ui-preview-data-container{background-color:var(--background-color)!important}:host ::ng-deep .libs-ui-preview-data-container .cm-line{white-space:pre-wrap}:host ::ng-deep .libs-ui-preview-data-container .cm-lintRange-error{background-color:#ff323233;border-bottom:2px solid red}:host ::ng-deep .libs-ui-preview-data-container .cm-lintRange-warning{background-color:#ffc80026}:host ::ng-deep .libs-ui-preview-data-container .cm-tooltip-lint{background:#fff8f8;color:#d32f2f;border:1px solid #f44336;padding:8px 10px;font-size:13px;font-family:Inter,sans-serif;border-radius:6px;box-shadow:0 2px 8px #ff000026}:host ::ng-deep .libs-ui-preview-data-container .cm-focused{outline:none!important}:host ::ng-deep .libs-ui-preview-data-container .cm-gutters{background-color:var(--background-color)!important}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_SECURITY_PATTERNS, LibsUiComponentsPreviewTextDataComponent, createDefaultLanguage, httpRequestConfigGetOptionsLang, languageRegistry, optionsLangData };
+export { DEFAULT_SECURITY_PATTERNS, LibsUiComponentsPreviewTextDataComponent, astSkipKeys, astTypeKeys, createDefaultLanguage, httpRequestConfigGetOptionsLang, languageRegistry, optionsLangData, tsValueNodes };
 //# sourceMappingURL=libs-ui-components-preview-text-data.mjs.map