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

package/assets/scss/ckeditor5.scss

@@ -17,15 +17,73 @@
 // Import the editor styles.
 // @import '@ckeditor/ckeditor5-editor-classic/dist/index.css';
 @import '@ckeditor/ckeditor5-essentials/dist/index.css';
+@import '@ckeditor/ckeditor5-page-break/dist/index.css';
 @import '@ckeditor/ckeditor5-autoformat/dist/index.css';
 @import '@ckeditor/ckeditor5-basic-styles/dist/index.css';
 // @import '@ckeditor/ckeditor5-block-quote/dist/index.css';
 @import '@ckeditor/ckeditor5-heading/dist/index.css';
-@import '@ckeditor/ckeditor5-image/dist/index.css';
+// @import '@ckeditor/ckeditor5-image/dist/index.css';
+@import '@ckeditor/ckeditor5-image/dist/index-editor.css';
 @import '@ckeditor/ckeditor5-indent/dist/index.css';
 @import '@ckeditor/ckeditor5-link/dist/index.css';
 @import '@ckeditor/ckeditor5-list/dist/index.css';
 // @import '@ckeditor/ckeditor5-media-embed/dist/index.css';
 @import '@ckeditor/ckeditor5-paste-from-office/dist/index.css';
-@import '@ckeditor/ckeditor5-table/dist/index.css';
+
+// hung.pham16: không sử dụng default styles của ckeditor vì server không hỗ trợ
+// @import '@ckeditor/ckeditor5-table/dist/index.css';
+@import '@ckeditor/ckeditor5-table/dist/index-editor.css';
+
 // @import '@ckeditor/ckeditor5-mention/dist/index.css';
+
+// Custom toolbar
+.ck-editor {
+  /* --- 1. GIẢM KÍCH THƯỚC ICON VÀ CHỮ --- */
+  /* Giảm cỡ chữ trong dropdown (mặc định khoảng 13px) */
+  --ck-font-size-base: 11px !important;
+
+  /* Giảm kích thước Icon (mặc định 20px) */
+  --ck-icon-size: 16px !important;
+
+  /* --- 2. TỐI ƯU KHOẢNG CÁCH (Padding/Margin) --- */
+
+  /* Giảm khoảng cách giữa các nút */
+  --ck-spacing-small: 2px !important;
+  --ck-spacing-standard: 6px !important;
+  --ck-spacing-large: 8px !important;
+
+  /*  */
+  --ck-color-table-focused-cell-background: transparent !important;
+  --ck-table-content-default-border-color: transparent !important;
+
+  //
+  --ck-insert-table-dropdown-padding: 10px;
+  --ck-insert-table-dropdown-box-height: 16px;
+  --ck-insert-table-dropdown-box-width: 16px;
+  --ck-insert-table-dropdown-box-margin: 1px;
+
+  --ck-focus-ring: 1px solid var(--ck-color-base-border);
+}
+
+/* Giảm độ cao của thanh toolbar (cho gọn) */
+.ck-toolbar {
+  min-height: 32px !important; /* Mặc định thường là 40px */
+  padding: 2px !important;
+
+  /* Làm màu nền toolbar nhạt hơn cho hiện đại */
+  background: #f8f9fa !important;
+  border-bottom: 1px solid #e0e0e0 !important;
+}
+
+.ck-toolbar__items {
+  /* Chỉnh nút bấm trong toolbar nhỏ lại */
+  > .ck-button {
+    padding: 2px 4px !important; /* Giảm padding trái phải của nút */
+    min-height: 24px !important;
+  }
+
+  /* Chỉnh lại dropdown (Heading, Font Size) cho khớp */
+  > .ck-dropdown {
+    min-height: 24px !important;
+  }
+}

package/assets/scss/core/bootstrap.scss

@@ -81,6 +81,23 @@
   .fs-#{$i} {
     font-size: #{$i}px !important;
   }
+
+  // Gap
+  .gap-#{$i} {
+    gap: #{$i}px !important;
+  }
+
+  .gap-y-#{$i} {
+    row-gap: #{$i}px !important;
+  }
+
+  .gap-x-#{$i} {
+    column-gap: #{$i}px !important;
+  }
+}
+
+.flex-1 {
+  flex: 1;
 }
 
 .w-full {

package/assets/scss/core/form.scss

@@ -89,8 +89,11 @@
     }
   }
 
-  // Size normal
+  // Size normal`
   &.sd-md {
+    --mat-form-field-container-height: 40px;
+    --mat-form-field-container-vertical-padding: 3px;
+
     &.mat-form-field-appearance-outline {
       .mat-mdc-form-field-infix {
         padding: 0 0 8px 0 !important;

package/assets/scss/core/grid.scss

@@ -0,0 +1,40 @@
+/* ==========================================================================
+   CSS GRID UTILITIES
+   ========================================================================== */
+
+/* 1. Kích hoạt Grid cơ bản */
+.sd-grid-container {
+  display: grid;
+  column-gap: 8px;
+  row-gap: 0px;
+
+  /* 2. Định nghĩa tổng số cột của Grid Cha (từ 1 đến 12 cột) */
+  @for $i from 1 through 12 {
+    &.grid-cols-#{$i} {
+      /* Dùng minmax(0, 1fr) thay vì 1fr để chống vỡ layout khi nội dung text quá dài */
+      grid-template-columns: repeat($i, minmax(0, 1fr));
+    }
+  }
+
+  /* 3. Tiện ích chiếm CỘT (Column Spanning) cho phần tử con */
+  @for $i from 1 through 12 {
+    .col-span-#{$i} {
+      grid-column: span #{$i} / span #{$i};
+    }
+  }
+  /* Chiếm toàn bộ số cột hiện có (Full width) */
+  .col-span-full {
+    grid-column: 1 / -1;
+  }
+
+  /* 4. Tiện ích chiếm HÀNG (Row Spanning) cho phần tử con */
+  @for $i from 1 through 12 {
+    .row-span-#{$i} {
+      grid-row: span #{$i} / span #{$i};
+    }
+  }
+  /* Chiếm toàn bộ hàng (Full height) */
+  .row-span-full {
+    grid-row: 1 / -1;
+  }
+}

package/assets/scss/sd-core.scss

@@ -7,6 +7,7 @@
 @use './core/typography.scss';
 @use './core/print.scss';
 @use './core/elevation.scss';
+@use './core/grid.scss';
 @use './themes/default.scss';
 @use './themes/material-theme.scss';
 

package/assets/scss/themes/material-theme.scss

@@ -2,19 +2,22 @@
 @use './default.scss' as default;
 @use 'sass:map';
 
-// Tạo custom primary palette
+// --------------------------------------------------
+// Palette M2 — generated từ hex color
+// --------------------------------------------------
 $custom-primary-palette: mat.m2-define-palette((
-  50: #eaf1ff,  // từ primary-light
-  100: #d0e0ff,
-  200: #a3c0ff,
-  300: #78a0ff,
-  400: #5288f9,
-  500: #2A66F4,  // màu chính bạn muốn
-  600: #1c4ad9,  // từ primary-darker
-  700: #1232bd,
-  800: #0b1e9f,
-  900: #061080,
+  50: #F0F1F5,
+  100: #D7DCEA,
+  200: #ABBCE3,
+  300: #6E90E3,
+  400: #346AEA,
+  500: #2A66F4,
+  600: #0645DB,
+  700: #0131A3,
+  800: #00216D,
+  900: #001546,
   contrast: (
+    400: white,
     500: white,
     600: white,
     700: white,
@@ -23,37 +26,59 @@ $custom-primary-palette: mat.m2-define-palette((
   )
 ));
 
-// Tạo custom warn palette
-$custom-warn-palette: mat.m2-define-palette((
-  50: #ffebee,
-  100: #ffcdd2,
-  200: #ef9a9a,
-  300: #e57373,
-  400: #ef5350,
-  500: #F82C13, // custom warn main color
-  600: #e53935,
-  700: #d32f2f,
-  800: #c62828,
-  900: #b71c1c,
+$custom-accent-palette: mat.m2-define-palette((
+  50: #F1F3F1,
+  100: #DCE5DD,
+  200: #BBD3BC,
+  300: #8FC291,
+  400: #67B76A,
+  500: #4CAF50,
+  600: #3A8C3D,
+  700: #29692C,
+  800: #1C471E,
+  900: #132F14,
   contrast: (
-    500: white,
     700: white,
+    800: white,
+    900: white,
   )
 ));
 
-// Tạo theme
-$custom-theme: mat.m2-define-light-theme(
-  (
-    color: (
-      primary: $custom-primary-palette,
-      accent: mat.m2-define-palette(mat.$m2-indigo-palette),
-      warn: $custom-warn-palette,
-    ),
-    density: -3,
-    // typography: Roboto,
+$custom-warn-palette: mat.m2-define-palette((
+  50: #F5F0F0,
+  100: #EAD9D6,
+  200: #E4B0AA,
+  300: #E6786B,
+  400: #EE4430,
+  500: #F82C13,
+  600: #D11801,
+  700: #9A1100,
+  800: #680B00,
+  900: #440700,
+  contrast: (
+    600: white,
+    700: white,
+    800: white,
+    900: white,
   )
-);
+));
 
+// --------------------------------------------------
+// Theme
+// --------------------------------------------------
+$custom-theme: mat.m2-define-light-theme((
+  color: (
+    primary: $custom-primary-palette,
+    accent: $custom-accent-palette,
+    warn: $custom-warn-palette,
+  ),
+  typography: mat.m2-define-typography-config(
+    $font-family: 'Roboto',
+  ),
+  density: -3,
+));
 
-// Apply theme
 @include mat.all-component-themes($custom-theme);
+
+// Fix paginator density riêng về 0 để không bị lệch
+@include mat.paginator-density(0);

package/components/avatar/index.d.ts

@@ -0,0 +1 @@
+export * from './src/avatar.component';

package/components/avatar/src/avatar.component.d.ts

@@ -0,0 +1,19 @@
+import * as i0 from "@angular/core";
+export declare class SdAvatar {
+    #private;
+    /**
+     * The source string to be used for the avatar.
+     * - If it matches a URL pattern, an image is displayed.
+     * - If it is a string representing a name, initials and a colored background are generated.
+     * - If undefined, it falls back to a neutral ? initial.
+     */
+    readonly src: import("@angular/core").InputSignal<string | null | undefined>;
+    readonly size: import("@angular/core").InputSignal<number>;
+    constructor();
+    readonly isUrl: import("@angular/core").Signal<boolean>;
+    readonly bgColor: import("@angular/core").Signal<string>;
+    readonly initials: import("@angular/core").Signal<string>;
+    handleError(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdAvatar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdAvatar, "sd-avatar", never, { "src": { "alias": "src"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/components/badge/src/badge.component.d.ts

@@ -1,27 +1,85 @@
 import { EventEmitter } from '@angular/core';
 import { SdColor, SdSize } from '@sd-angular/core/utilities/models';
+import { MaterialIconFontSet } from '@sd-angular/core/utilities/models';
 import * as i0 from "@angular/core";
+export type SdBadgeType = 'tag' | 'round' | 'icon';
 export declare class SdBadge {
     defaultIcon: string;
-    type: 'tag' | 'round' | 'icon';
-    set _type(type: 'tag' | 'round' | 'icon' | undefined | null);
-    color: SdColor;
-    set _color(color: SdColor | undefined | null);
-    set primary(value: boolean | '');
-    set secondary(value: boolean | '');
-    set success(value: boolean | '' | undefined | null);
-    set info(value: boolean | '' | undefined | null);
-    set warning(value: boolean | '' | undefined | null);
-    set error(value: boolean | '' | undefined | null);
-    fontSet: 'material-icons' | 'material-icons-outlined' | 'material-icons-round' | 'material-icons-sharp';
-    set _fontSet(fontSet: 'material-icons' | 'material-icons-outlined' | 'material-icons-round' | 'material-icons-sharp' | undefined | null);
-    title: string | number | undefined | null;
-    description: string | undefined | null;
-    tooltip: string | undefined | null;
-    icon: string | undefined | null;
-    size: SdSize;
-    sdClick: EventEmitter<any>;
+    type: import("@angular/core").InputSignalWithTransform<SdBadgeType, SdBadgeType | null | undefined>;
+    color: import("@angular/core").InputSignalWithTransform<SdColor, SdColor | null | undefined>;
+    primary: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    secondary: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    success: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    info: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    warning: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    error: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    fontSet: import("@angular/core").InputSignalWithTransform<MaterialIconFontSet, MaterialIconFontSet | null | undefined>;
+    title: import("@angular/core").InputSignal<string | number | null | undefined>;
+    description: import("@angular/core").InputSignal<string | null | undefined>;
+    tooltip: import("@angular/core").InputSignal<string | null | undefined>;
+    icon: import("@angular/core").InputSignal<string | null | undefined>;
+    size: import("@angular/core").InputSignalWithTransform<SdSize, SdSize | null | undefined>;
+    click: EventEmitter<Event>;
     onClick: (event: Event) => void;
+    effectiveColor: import("@angular/core").Signal<SdColor>;
+    baseColorClasses: import("@angular/core").Signal<{
+        'c-primary': boolean;
+        'c-secondary': boolean;
+        'c-info': boolean;
+        'c-success': boolean;
+        'c-warning': boolean;
+        'c-error': boolean;
+    }>;
+    iconColorClasses: import("@angular/core").Signal<{
+        'c-primary': boolean;
+        'c-black400': boolean;
+        'c-info': boolean;
+        'c-success': boolean;
+        'c-warning': boolean;
+        'c-error': boolean;
+    }>;
+    iconSizeAndFontClasses: import("@angular/core").Signal<{
+        'c-xs': boolean;
+        'c-sm': boolean;
+        'c-md': boolean;
+        'c-lg': boolean;
+        'material-icons': boolean;
+        'material-icons-outlined': boolean;
+        'material-icons-round': boolean;
+        'material-icons-sharp': boolean;
+    }>;
+    tagIconCombinedClasses: import("@angular/core").Signal<{
+        'c-primary': boolean;
+        'c-secondary': boolean;
+        'c-info': boolean;
+        'c-success': boolean;
+        'c-warning': boolean;
+        'c-error': boolean;
+        'c-xs': boolean;
+        'c-sm': boolean;
+        'c-md': boolean;
+        'c-lg': boolean;
+        'material-icons': boolean;
+        'material-icons-outlined': boolean;
+        'material-icons-round': boolean;
+        'material-icons-sharp': boolean;
+    }>;
+    iconCombinedClasses: import("@angular/core").Signal<{
+        'c-primary': boolean;
+        'c-black400': boolean;
+        'c-info': boolean;
+        'c-success': boolean;
+        'c-warning': boolean;
+        'c-error': boolean;
+        'c-xs': boolean;
+        'c-sm': boolean;
+        'c-md': boolean;
+        'c-lg': boolean;
+        'material-icons': boolean;
+        'material-icons-outlined': boolean;
+        'material-icons-round': boolean;
+        'material-icons-sharp': boolean;
+    }>;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdBadge, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdBadge, "sd-badge", never, { "_type": { "alias": "type"; "required": false; }; "_color": { "alias": "color"; "required": false; }; "primary": { "alias": "primary"; "required": false; }; "secondary": { "alias": "secondary"; "required": false; }; "success": { "alias": "success"; "required": false; }; "info": { "alias": "info"; "required": false; }; "warning": { "alias": "warning"; "required": false; }; "error": { "alias": "error"; "required": false; }; "_fontSet": { "alias": "fontSet"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "sdClick": "sdClick"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdBadge, "sd-badge", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "primary": { "alias": "primary"; "required": false; "isSignal": true; }; "secondary": { "alias": "secondary"; "required": false; "isSignal": true; }; "success": { "alias": "success"; "required": false; "isSignal": true; }; "info": { "alias": "info"; "required": false; "isSignal": true; }; "warning": { "alias": "warning"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "fontSet": { "alias": "fontSet"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "click": "click"; }, never, never, true, never>;
 }

package/components/button/src/button.component.d.ts

@@ -1,39 +1,41 @@
-import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { OnDestroy, OnInit } from '@angular/core';
 import { SdBaseSecureComponent } from '@sd-angular/core/components/base';
-import { SdColor } from '@sd-angular/core/utilities/models';
+import { MaterialIconFontSet, SdColor } from '@sd-angular/core/utilities/models';
 import * as i0 from "@angular/core";
+export type SdButtonType = 'fill' | 'light' | 'outline' | 'link';
+export type SdButtonSize = 'sm' | 'md' | 'lg';
+export type SdButtonHtmlType = 'button' | 'submit' | 'reset';
 export declare class SdButton extends SdBaseSecureComponent implements OnInit, OnDestroy {
     #private;
-    autoId?: string;
-    set _autoId(val: string | undefined | null);
-    type: 'fill' | 'light' | 'outline' | 'link';
-    set _type(type: 'fill' | 'light' | 'outline' | 'link' | undefined | null);
-    color: SdColor;
-    set _color(color: SdColor | undefined | null);
-    title: string | undefined | null;
-    width: string | undefined | null;
-    size: 'sm' | 'md' | 'lg' | undefined | null;
-    tooltip: string | undefined | null;
-    prefixIcon: string | undefined | null;
-    suffixIcon: string | undefined | null;
-    fontSet: 'material-icons' | 'material-icons-outlined' | 'material-icons-round' | 'material-icons-sharp' | 'material-symbols-outlined';
-    set _fontSet(fontSet: SdButton['fontSet'] | undefined | null);
-    disabled: boolean;
-    get disabledAttr(): "true" | null;
-    set _disabled(value: '' | boolean | undefined | null);
-    loading: boolean;
-    click: EventEmitter<Event>;
-    constructor();
-    ngOnInit(): void;
-    onInternalClick(event: Event): void;
-    ngOnDestroy(): void;
-    get buttonClasses(): {
+    private el;
+    autoIdInput: import("@angular/core").InputSignal<string | null | undefined>;
+    type: import("@angular/core").InputSignalWithTransform<SdButtonType, SdButtonType | null | undefined>;
+    color: import("@angular/core").InputSignalWithTransform<SdColor, SdColor | null | undefined>;
+    size: import("@angular/core").InputSignalWithTransform<SdButtonSize, SdButtonSize | null | undefined>;
+    fontSet: import("@angular/core").InputSignalWithTransform<MaterialIconFontSet, MaterialIconFontSet | null | undefined>;
+    title: import("@angular/core").InputSignal<string | null | undefined>;
+    width: import("@angular/core").InputSignal<string | null | undefined>;
+    tooltip: import("@angular/core").InputSignal<string | null | undefined>;
+    prefixIcon: import("@angular/core").InputSignal<string | null | undefined>;
+    suffixIcon: import("@angular/core").InputSignal<string | null | undefined>;
+    disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    block: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    htmlType: import("@angular/core").InputSignalWithTransform<SdButtonHtmlType, SdButtonHtmlType | null | undefined>;
+    autoId: import("@angular/core").Signal<string | undefined>;
+    buttonClasses: import("@angular/core").Signal<{
         'c-square': boolean | "" | null | undefined;
         'c-sm': boolean;
         'c-md': boolean;
         'c-lg': boolean;
         'c-disabled': boolean;
-    };
+        'c-block': boolean;
+    }>;
+    click: import("@angular/core").OutputEmitterRef<Event>;
+    constructor();
+    ngOnInit(): void;
+    onInternalClick(event: Event): void;
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdButton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdButton, "sd-button", never, { "_autoId": { "alias": "autoId"; "required": false; }; "_type": { "alias": "type"; "required": false; }; "_color": { "alias": "color"; "required": false; }; "title": { "alias": "title"; "required": false; }; "width": { "alias": "width"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; }; "_fontSet": { "alias": "fontSet"; "required": false; }; "_disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; }, { "click": "click"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdButton, "sd-button", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fontSet": { "alias": "fontSet"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "htmlType": { "alias": "htmlType"; "required": false; "isSignal": true; }; }, { "click": "click"; }, never, never, true, never>;
 }

package/components/code-editor/index.d.ts

@@ -0,0 +1 @@
+export * from './src/code-editor.component';

package/components/code-editor/src/code-editor.component.d.ts

@@ -0,0 +1,25 @@
+import { SafeHtml } from '@angular/platform-browser';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-scss';
+import 'prismjs/components/prism-markup';
+import * as i0 from "@angular/core";
+export type CodeLanguage = 'html' | 'typescript' | 'json' | 'css' | 'scss';
+export declare class SdCodeEditor {
+    #private;
+    valueModel: import("@angular/core").ModelSignal<any>;
+    language: import("@angular/core").InputSignal<CodeLanguage>;
+    maxHeight: import("@angular/core").InputSignal<string>;
+    viewed: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    copied: import("@angular/core").WritableSignal<boolean>;
+    textValue: import("@angular/core").WritableSignal<string>;
+    prismLang: import("@angular/core").Signal<CodeLanguage | "markup">;
+    private _lastEmittedValue;
+    constructor();
+    highlightedCode: import("@angular/core").Signal<SafeHtml>;
+    onTextChange(newText: string): void;
+    copyToClipboard(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdCodeEditor, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdCodeEditor, "sd-code-editor", never, { "valueModel": { "alias": "model"; "required": false; "isSignal": true; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; }, { "valueModel": "modelChange"; }, never, never, true, never>;
+}

package/components/document-builder/index.d.ts

@@ -1,3 +1,4 @@
 export * from './src/components';
 export * from './src/document-builder.model';
 export * from './src/document-builder.component';
+export * from './src/plugins/ck-comment/ck-comment.plugin.model';

package/components/document-builder/src/document-builder.component.d.ts

@@ -1,6 +1,7 @@
 import { EventEmitter } from '@angular/core';
 import { ClassicEditor, ModelRange } from 'ckeditor5';
-import { SdDocumentBuilderComment, SdDocumentBuilderHeading, SdDocumentBuilderOption, SdDocumentBuilderVariable, SdEditorConfig } from './document-builder.model';
+import { VariablePlugin, CkCommentPlugin } from './plugins';
+import { SdDocumentBuilderHeading, SdDocumentBuilderOption, SdEditorConfig } from './document-builder.model';
 import * as i0 from "@angular/core";
 export declare class SdDocumentBuilder {
     #private;
@@ -19,51 +20,19 @@ export declare class SdDocumentBuilder {
     getOrientation: () => "PORTRAIT" | "LANDSCAPE";
     scrollToTop(): void;
     heading: {
-        all: () => SdDocumentBuilderHeading[];
-        scroll: (id: string) => void;
-    };
-    comment: {
-        /**
-         * Lấy tất cả comments trong document
-         * @returns Danh sách tất cả comments
-         */
-        all: () => SdDocumentBuilderComment[];
-        /**
-         * Thêm comment vào vùng text đang được chọn
-         * @param comment - Dữ liệu comment
-         * @param data - Dữ liệu extra data
-         * @returns SdDocumentBuilderComment hoặc null nếu không có text được chọn
-         */
-        add: <T = any>(range: ModelRange, comment: string, data?: T) => SdDocumentBuilderComment<T> | null;
         /**
-         * Cập nhật nội dung comment
-         * @param markerId - ID của marker
-         * @param commentData - Dữ liệu mới
-         * @returns Comment đã cập nhật hoặc null
+         * Lấy tất cả headings trong document
+         * @returns Danh sách tất cả headings
          */
-        update: <T = any>(markerId: string, comment: string, data?: T) => SdDocumentBuilderComment<T> | null;
-        /**
-         * Lấy chi tiết comment theo markerId
-         * @param markerId - ID của marker
-         * @returns Comment hoặc null
-         */
-        detail: (markerId: string) => SdDocumentBuilderComment | null;
-        /**
-         * Xóa comment theo markerId
-         * @param markerId - ID của marker cần xóa
-         * @returns true nếu xóa thành công, false nếu không tìm thấy
-         */
-        remove: (markerId: string) => boolean;
+        all: () => SdDocumentBuilderHeading[];
         /**
-         * Scroll đến vị trí comment
-         * @param markerId - ID của marker cần scroll tới
+         * Scroll tới vị trí của heading
+         * @param id - ID của heading cần scroll tới
          */
-        scroll: (markerId: string) => void;
-    };
-    variable: {
-        all: () => SdDocumentBuilderVariable[];
-        scroll: (uuid: string) => void;
+        scroll: (id: string) => void;
     };
+    getCommentPluginAPI(): CkCommentPlugin | null;
+    getVariablePluginAPI(): VariablePlugin | null;
     /**
      * Xuất file Word có Header/Footer
      * @param fileName Tên file
@@ -77,6 +46,8 @@ export declare class SdDocumentBuilder {
         header?: string;
         footer?: string;
     }): void;
+    hightSelectRange: (range: ModelRange) => void;
+    removeHighlightSeclectRange: () => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdDocumentBuilder, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SdDocumentBuilder, "sd-document-builder", never, { "option": { "alias": "option"; "required": true; }; "_disabled": { "alias": "disabled"; "required": false; }; }, { "contentChange": "contentChange"; }, never, never, true, never>;
 }