@sd-angular/core 19.0.0-beta.7 → 19.0.0-beta.71

package/assets/scss/ckeditor5.scss

@@ -1,5 +1,5 @@
 // Import the core styles.
-@import '@ckeditor/ckeditor5-theme-lark/dist/index.css';
+@import '@ckeditor/ckeditor5-ui/dist/index.css';
 @import '@ckeditor/ckeditor5-clipboard/dist/index.css';
 @import '@ckeditor/ckeditor5-core/dist/index.css';
 @import '@ckeditor/ckeditor5-engine/dist/index.css';
@@ -7,7 +7,6 @@
 @import '@ckeditor/ckeditor5-paragraph/dist/index.css';
 @import '@ckeditor/ckeditor5-select-all/dist/index.css';
 @import '@ckeditor/ckeditor5-typing/dist/index.css';
-@import '@ckeditor/ckeditor5-ui/dist/index.css';
 @import '@ckeditor/ckeditor5-undo/dist/index.css';
 @import '@ckeditor/ckeditor5-upload/dist/index.css';
 @import '@ckeditor/ckeditor5-utils/dist/index.css';
@@ -17,15 +16,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

@@ -27,7 +27,7 @@
 
   // Xử lý icon
   .sd-suffix-icon {
-    color: #dadada;
+    color: #757575;
     &:hover {
       color: #616161;
     }
@@ -87,10 +87,28 @@
     .mat-mdc-form-field-subscript-wrapper {
       display: none;
     }
+
+    &.mat-form-field-invalid {
+      .mat-mdc-notch-piece {
+        &.mdc-notched-outline__leading {
+          border-color: map.get(color.$color_map, 'error') !important;
+        }
+        &.mdc-notched-outline__notch {
+          border-top-color: map.get(color.$color_map, 'error') !important;
+          border-bottom-color: map.get(color.$color_map, 'error') !important;
+        }
+        &.mdc-notched-outline__trailing {
+          border-color: map.get(color.$color_map, 'error') !important;
+        }
+      }
+    }
   }
 
-  // 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;
@@ -108,9 +126,13 @@
       .mat-mdc-form-field-icon-suffix {
         top: 0;
         right: 0;
-        padding: 0 8px;
+        padding: 0 12px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
 
-        .sd-suffix-icon {
+        .sd-suffix-icon,
+        .sd-error-icon {
           height: 20px;
           width: 20px;
           font-size: 20px;
@@ -172,9 +194,13 @@
       .mat-mdc-form-field-icon-suffix {
         top: 0;
         right: 0;
-        padding: 0 4px;
+        padding: 0 8px;
+        display: flex;
+        align-items: center;
+        gap: 4px;
 
-        .sd-suffix-icon {
+        .sd-suffix-icon,
+        .sd-error-icon {
           height: 16px;
           width: 16px;
           font-size: 16px;

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,58 +2,100 @@
 @use './default.scss' as default;
 @use 'sass:map';
 
-// Tạo custom primary palette
-$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,
-  contrast: (
-    500: white,
-    600: white,
-    700: white,
-    800: white,
-    900: white,
+// --------------------------------------------------
+// Palette M2 — generated từ hex color
+// --------------------------------------------------
+$custom-primary-palette: mat.m2-define-palette(
+  (
+    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,
+      800: white,
+      900: white,
+    ),
   )
-));
+);
 
-// 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,
-  contrast: (
-    500: white,
-    700: white,
+$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: (
+      700: white,
+      800: white,
+      900: white,
+    ),
   )
-));
+);
 
-// Tạo theme
+$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: mat.m2-define-palette(mat.$m2-indigo-palette),
+      accent: $custom-accent-palette,
       warn: $custom-warn-palette,
     ),
     density: -3,
-    // typography: Roboto,
   )
 );
 
-
-// Apply theme
 @include mat.all-component-themes($custom-theme);
+
+// Fix paginator density riêng về 0 để không bị lệch
+html {
+  @include mat.theme(
+    (
+      color: (
+        theme-type: light,
+        primary: mat.$azure-palette,
+        tertiary: mat.$blue-palette,
+      ),
+      typography: Roboto,
+      density: 0,
+    )
+  );
+}

package/components/anchor-v2/src/components/anchor-item-v2/anchor-item-v2.component.d.ts

@@ -2,11 +2,11 @@ import { ElementRef } from '@angular/core';
 import { IAnchorItemV2 } from '../../models';
 import * as i0 from "@angular/core";
 export declare class SdAnchorItemV2 implements IAnchorItemV2 {
-    elementRef: ElementRef;
-    title: string;
-    icon?: string;
+    title: import("@angular/core").InputSignal<string>;
+    icon: import("@angular/core").InputSignal<string | undefined>;
     id: string;
-    constructor(elementRef: ElementRef);
+    elementRef: ElementRef<any>;
+    constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<SdAnchorItemV2, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdAnchorItemV2, "sd-anchor-item-v2", never, { "title": { "alias": "title"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdAnchorItemV2, "sd-anchor-item-v2", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

package/components/anchor-v2/src/models/sd-anchor-v2.model.d.ts

@@ -1,7 +1,7 @@
-import { ElementRef } from "@angular/core";
+import { ElementRef, InputSignal } from "@angular/core";
 export interface IAnchorItemV2 {
     id: string;
-    title: string;
-    icon?: string;
+    title: InputSignal<string>;
+    icon: InputSignal<string | undefined>;
     elementRef: ElementRef;
 }

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>;
+}