@sd-angular/core 19.0.0-beta.1 → 19.0.0-beta.10

package/assets/scss/core/bootstrap.scss

@@ -94,3 +94,28 @@
 .font-weight-medium {
   font-weight: 500 !important;
 }
+
+// Custom grid
+.row-md {
+  @include make-row(16px);
+
+  > * {
+    @include make-col-ready(16px);
+  }
+}
+
+.row-sm {
+  @include make-row(8px);
+
+  > * {
+    @include make-col-ready(8px);
+  }
+}
+
+.row-xs {
+  @include make-row(4px);
+
+  > * {
+    @include make-col-ready(4px);
+  }
+}

package/assets/scss/core/form.scss

@@ -62,13 +62,11 @@
     .mat-mdc-form-field-infix {
       mat-select.mat-mdc-select,
       mat-date-range-input.mat-mdc-date-range-input,
-      input.mat-mdc-input-element {
+      input.mat-mdc-input-element,
+      textarea.mat-mdc-input-element {
         font-size: 14px;
         margin-top: 10px; // Text hiển thị trong auto complete
       }
-      textarea.mat-mdc-input-element {
-        font-size: 14px; // Font-size hiển thị trong text-area outline
-      }
     }
 
     .mat-mdc-form-field-suffix {
@@ -158,14 +156,10 @@
 
         mat-select.mat-mdc-select,
         mat-date-range-input.mat-mdc-date-range-input,
-        input.mat-mdc-input-element {
-          margin-top: 2px; // Text hiển thị trong auto complete
-          font-size: 14px;
-        }
-
+        input.mat-mdc-input-element,
         textarea.mat-mdc-input-element {
+          margin-top: 2px; // Text hiển thị trong auto complete
           font-size: 14px;
-          margin-top: 2px;
         }
       }
 

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

@@ -7,23 +7,28 @@ export declare class SdDocumentBuilder {
     option: SdDocumentBuilderOption;
     disabled: boolean;
     set _disabled(val: boolean | '' | undefined | null);
+    contentChange: EventEmitter<string>;
     Editor: typeof ClassicEditor;
     config: SdEditorConfig;
-    contentChange: EventEmitter<string>;
     ngOnInit(): void;
     ngOnDestroy(): void;
     onReady(editor: ClassicEditor): void;
-    scrollToComment: (markerId: string) => void;
     setContent: (html: string) => void;
     getContent: () => string;
     setOrientation: (orientation: "PORTRAIT" | "LANDSCAPE") => void;
     getOrientation: () => "PORTRAIT" | "LANDSCAPE";
-    getVariables: () => SdDocumentBuilderVariable[];
-    getComments(): SdDocumentBuilderComment[];
     scrollToTop(): void;
     heading: {
-        getHeadings: () => SdDocumentBuilderHeading[];
-        scrollToHeading: (id: string) => void;
+        /**
+         * Lấy tất cả headings trong document
+         * @returns Danh sách tất cả headings
+         */
+        all: () => SdDocumentBuilderHeading[];
+        /**
+         * Scroll tới vị trí của heading
+         * @param id - ID của heading cần scroll tới
+         */
+        scroll: (id: string) => void;
     };
     comment: {
         /**
@@ -63,6 +68,18 @@ export declare class SdDocumentBuilder {
          */
         scroll: (markerId: string) => void;
     };
+    variable: {
+        /**
+         * Lấy tất cả variabes trong document
+         * @returns Danh sách tất cả variables
+         */
+        all: () => SdDocumentBuilderVariable[];
+        /**
+         * Scroll tới vị trí của variable
+         * @param uuid - uuid của variable FE sẽ tự sinh sau mỗi lần drop vào editor
+         */
+        scroll: (uuid: string) => void;
+    };
     /**
      * Xuất file Word có Header/Footer
      * @param fileName Tên file

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

@@ -0,0 +1,21 @@
+/**
+ * Cấu hình màu cho Document Builder
+ * Bảng màu tập trung và cấu hình cho việc lựa chọn màu nhất quán
+ */
+import { ColorPickerConfig, FontColorConfig, FontSizeConfig, HeadingConfig } from 'ckeditor5';
+/**
+ * Trả về bảng màu chung được sử dụng trong tất cả tính năng của document builder
+ * @returns Mảng các tùy chọn màu được định sẵn với giá trị hex và label
+ */
+export declare function getPresetColors(): FontColorConfig['colors'];
+/**
+ * Trả về cấu hình bộ chọn màu với định dạng hex
+ * @returns Đối tượng cấu hình bộ chọn màu
+ */
+export declare function getColorPickerConfig(): ColorPickerConfig;
+/**
+ * Trả về cấu hình kích thước font cho document builder
+ * @returns Mảng các tùy chọn kích thước font được định sẵn
+ */
+export declare function getFontSizeOptions(): FontSizeConfig['options'];
+export declare function getHeadingOptions(): HeadingConfig['options'];

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

@@ -12,6 +12,7 @@ export interface SdDocumentBuilderOption {
 }
 export interface SdDocumentBuilderVariable<T = any> {
     id: string;
+    uuid?: string;
     value: string;
     display: string;
     data?: T;

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

@@ -0,0 +1,10 @@
+/**
+ * Document Builder Utilities
+ * Các hàm tiện ích cho document builder
+ */
+/**
+ * Chuẩn hóa nội dung bằng cách chuyển đổi tất cả màu HSL và RGB sang hex
+ * @param content - Nội dung HTML cần chuẩn hóa
+ * @returns Nội dung đã được chuẩn hóa với màu hex
+ */
+export declare function normalize(content: string): string;

package/components/document-builder/src/plugins/heading/heading.plugin.d.ts

@@ -0,0 +1,4 @@
+import { Plugin } from 'ckeditor5';
+export declare class HeadingPlugin extends Plugin {
+    init(): void;
+}

package/components/document-builder/src/plugins/{image-upload.plugin.d.ts → image-upload/image-upload.plugin.d.ts}

@@ -1,8 +1,4 @@
 import { Plugin } from 'ckeditor5';
-/**
- * Custom base64 upload adapter plugin for CKEditor 5.
- * Converts uploaded images to base64 data URLs instead of uploading to a server.
- */
 export declare class ImageUploadPlugin extends Plugin {
     static get pluginName(): "ImageUploadPlugin";
     init(): void;

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

@@ -1,5 +1,6 @@
-export * from './page-orientation.plugin';
-export * from './comment.plugin';
-export * from './variable.plugin';
-export * from './table-fit.plugin';
-export * from './image-upload.plugin';
+export * from './heading/heading.plugin';
+export * from './comment/comment.plugin';
+export * from './variable/variable.plugin';
+export * from './table-fit/table-fit.plugin';
+export * from './image-upload/image-upload.plugin';
+export * from './page-orientation/page-orientation.plugin';

package/components/table/src/models/table-item.model.d.ts

@@ -14,7 +14,8 @@ export interface SdTableDisplay {
     badge?: {
         type: SdBadge['type'] | undefined | null;
         color: SdBadge['color'] | undefined | null;
-        icon: string | undefined | null;
+        icon?: string | undefined | null;
+        title?: string | number | null | undefined;
     };
     cellStyle?: Record<string, string>;
     data: string | number | undefined | null;

package/components/table/src/models/table-option.model.d.ts

@@ -10,6 +10,7 @@ import { SdTableOptionGroup } from './table-option-group.model';
 import { SdTableOptionSort } from './table-option-sort.model';
 import { SdTableOptionPaginate } from './table-option-paginate.model';
 import { TableOptionConfig } from './table-option-config.model';
+import { SdPagingReq } from '@sd-angular/core/utilities';
 export type SdTableOption<T = any> = SdTableLocalOption<T> | SdTableServerOption<T>;
 interface SdTableBaseOption<T = any> {
     key?: string;
@@ -32,7 +33,7 @@ interface SdTableLocalOption<T = any> extends SdTableBaseOption<T> {
 }
 interface SdTableServerOption<T = any> extends SdTableBaseOption<T> {
     type: 'server';
-    items: (filterRequest: SdTableFilterRequest<T>) => Promise<{
+    items: (filterRequest: SdTableFilterRequest<T>, pagingReq: SdPagingReq<T>) => Promise<{
         items: T[];
         total: number;
     }>;

package/components/workflow/src/models/index.d.ts

@@ -1,4 +1,5 @@
 export * from './form-render';
+export * from './form-generic.model';
 export * from './form-generic-component.model';
 export * from './form-generic-template.model';
 export * from './form-generic-definition-selection.model';

package/fesm2022/sd-angular-core-components-badge.mjs

@@ -66,11 +66,11 @@ class SdBadge {
         this.sdClick.emit(event);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdBadge, isStandalone: true, selector: "sd-badge", inputs: { _type: ["type", "_type"], _color: ["color", "_color"], primary: "primary", secondary: "secondary", success: "success", info: "info", warning: "warning", error: "error", _fontSet: ["fontSet", "_fontSet"], title: "title", description: "description", tooltip: "tooltip", icon: "icon", size: "size" }, outputs: { sdClick: "sdClick" }, ngImport: i0, template: "@if (type === 'round') {\r\n  <div\r\n    class=\"c-badge\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tooltip\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-primary]=\"color === 'primary'\"\r\n    [class.c-secondary]=\"color === 'secondary'\"\r\n    [class.c-info]=\"color === 'info'\"\r\n    [class.c-success]=\"color === 'success'\"\r\n    [class.c-warning]=\"color === 'warning'\"\r\n    [class.c-error]=\"color === 'error'\"\r\n    [class.pointer]=\"!!sdClick.observers.length\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    {{ title }}\r\n  </div>\r\n} @else if (type === 'tag') {\r\n  <div\r\n    class=\"c-badge c-badge--tag\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tooltip\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-primary]=\"color === 'primary'\"\r\n    [class.c-secondary]=\"color === 'secondary'\"\r\n    [class.c-info]=\"color === 'info'\"\r\n    [class.c-success]=\"color === 'success'\"\r\n    [class.c-warning]=\"color === 'warning'\"\r\n    [class.c-error]=\"color === 'error'\"\r\n    [class.pointer]=\"!!sdClick.observers.length\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      @if (icon) {\r\n        <span\r\n          class=\"c-material-icon mr-4\"\r\n          [class]=\"{\r\n            'c-xs': size === 'xs',\r\n            'c-sm': size === 'sm',\r\n            'c-md': size === 'md',\r\n            'c-lg': size === 'lg',\r\n            'material-icons': fontSet === 'material-icons',\r\n            'material-icons-outlined': fontSet === 'material-icons-outlined',\r\n            'material-icons-round': fontSet === 'material-icons-round',\r\n            'material-icons-sharp': fontSet === 'material-icons-sharp'\r\n          }\"\r\n          [class.c-primary]=\"color === 'primary'\"\r\n          [class.c-secondary]=\"color === 'secondary'\"\r\n          [class.c-info]=\"color === 'info'\"\r\n          [class.c-success]=\"color === 'success'\"\r\n          [class.c-warning]=\"color === 'warning'\"\r\n          [class.c-error]=\"color === 'error'\">\r\n          {{ icon || defaultIcon }}\r\n        </span>\r\n      }\r\n      <div class=\"d-flex flex-column align-items-start\">\r\n        <span class=\"T14R c-badge-title\">{{ title }}</span>\r\n        @if (description) {\r\n          <span class=\"T12R c-badge-description\">{{ description }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <div\r\n    class=\"d-flex\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tooltip\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-badge-icon]=\"type === 'icon'\"\r\n    [class.c-primary]=\"color === 'primary'\"\r\n    [class.c-secondary]=\"color === 'secondary'\"\r\n    [class.c-info]=\"color === 'info'\"\r\n    [class.c-success]=\"color === 'success'\"\r\n    [class.c-warning]=\"color === 'warning'\"\r\n    [class.c-error]=\"color === 'error'\"\r\n    [class.pointer]=\"!!sdClick.observers.length\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      <span\r\n        class=\"c-material-icon mr-4\"\r\n        [class]=\"{\r\n          'c-xs': size === 'xs',\r\n          'c-sm': size === 'sm',\r\n          'c-md': size === 'md',\r\n          'c-lg': size === 'lg',\r\n          'material-icons': fontSet === 'material-icons',\r\n          'material-icons-outlined': fontSet === 'material-icons-outlined',\r\n          'material-icons-round': fontSet === 'material-icons-round',\r\n          'material-icons-sharp': fontSet === 'material-icons-sharp'\r\n        }\"\r\n        [class.c-primary]=\"color === 'primary'\"\r\n        [class.c-secondary]=\"color === 'secondary'\"\r\n        [class.c-info]=\"color === 'info'\"\r\n        [class.c-success]=\"color === 'success'\"\r\n        [class.c-warning]=\"color === 'warning'\"\r\n        [class.c-error]=\"color === 'error'\">\r\n        {{ icon || defaultIcon }}\r\n      </span>\r\n      <div class=\"d-flex flex-column\">\r\n        <span class=\"T14R c-badge-title\">{{ title }}</span>\r\n        @if (description) {\r\n          <span class=\"T12R c-badge-description\">{{ description }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-badge{border-radius:20px;padding:2px 10px;display:inline-block;text-align:center;overflow-wrap:break-word}.c-badge.c-primary{background:var(--sd-primary-light);color:var(--sd-primary)}.c-badge.c-primary.c-badge--tag{border:1px solid var(--sd-primary)}.c-badge.c-secondary{background:var(--sd-secondary-light);color:var(--sd-secondary)}.c-badge.c-secondary.c-badge--tag{border:1px solid var(--sd-secondary)}.c-badge.c-info{background:var(--sd-info-light);color:var(--sd-info)}.c-badge.c-info.c-badge--tag{border:1px solid var(--sd-info)}.c-badge.c-warning{background:var(--sd-warning-light);color:var(--sd-warning)}.c-badge.c-warning.c-badge--tag{border:1px solid var(--sd-warning)}.c-badge.c-success{background:var(--sd-success-light);color:var(--sd-success)}.c-badge.c-success.c-badge--tag{border:1px solid var(--sd-success)}.c-badge.c-error{background:var(--sd-error-light);color:var(--sd-error)}.c-badge.c-error.c-badge--tag{border:1px solid var(--sd-error)}.c-badge.c-badge--tag{border-radius:4px;padding:1px 7px}.c-badge.c-badge--tag .c-material-icon{padding:0}.c-badge.c-badge--tag .c-material-icon.c-xs,.c-badge.c-badge--tag .c-material-icon.c-sm,.c-badge.c-badge--tag .c-material-icon.c-md,.c-badge.c-badge--tag .c-material-icon.c-lg{line-height:20px}.c-badge-icon{min-width:50px}.c-badge-icon .c-material-icon{border-radius:50%;padding:2px 2px 2px 0}.c-badge-icon .c-material-icon.c-xs{width:18px;height:18px;font-size:14px}.c-badge-icon .c-material-icon.c-sm{width:20px;height:20px;font-size:16px}.c-badge-icon .c-material-icon.c-md{width:22px;height:22px;font-size:18px}.c-badge-icon .c-material-icon.c-lg{width:28px;height:28px;font-size:24px}.c-badge-icon .c-material-icon.c-primary{color:var(--sd-primary)}.c-badge-icon .c-material-icon.c-secondary{color:var(--sd-secondary)}.c-badge-icon .c-material-icon.c-info{color:var(--sd-info)}.c-badge-icon .c-material-icon.c-success{color:var(--sd-success)}.c-badge-icon .c-material-icon.c-error{color:var(--sd-error)}.c-badge-icon .c-material-icon.c-warning{color:var(--sd-warning)}.c-badge-description{color:var(--sd-secondary)}::ng-deep .sd-multiline-tooltip{white-space:pre-line}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdBadge, isStandalone: true, selector: "sd-badge", inputs: { _type: ["type", "_type"], _color: ["color", "_color"], primary: "primary", secondary: "secondary", success: "success", info: "info", warning: "warning", error: "error", _fontSet: ["fontSet", "_fontSet"], title: "title", description: "description", tooltip: "tooltip", icon: "icon", size: "size" }, outputs: { sdClick: "sdClick" }, ngImport: i0, template: "@if (type === 'round') {\r\n  <div\r\n    class=\"c-badge\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tooltip\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-primary]=\"color === 'primary'\"\r\n    [class.c-secondary]=\"color === 'secondary'\"\r\n    [class.c-info]=\"color === 'info'\"\r\n    [class.c-success]=\"color === 'success'\"\r\n    [class.c-warning]=\"color === 'warning'\"\r\n    [class.c-error]=\"color === 'error'\"\r\n    [class.pointer]=\"!!sdClick.observers.length\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    {{ title }}\r\n  </div>\r\n} @else if (type === 'tag') {\r\n  <div\r\n    class=\"c-badge c-badge--tag\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tooltip\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-primary]=\"color === 'primary'\"\r\n    [class.c-secondary]=\"color === 'secondary'\"\r\n    [class.c-info]=\"color === 'info'\"\r\n    [class.c-success]=\"color === 'success'\"\r\n    [class.c-warning]=\"color === 'warning'\"\r\n    [class.c-error]=\"color === 'error'\"\r\n    [class.pointer]=\"!!sdClick.observers.length\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      @if (icon) {\r\n        <span\r\n          class=\"c-material-icon mr-4\"\r\n          [class]=\"{\r\n            'c-xs': size === 'xs',\r\n            'c-sm': size === 'sm',\r\n            'c-md': size === 'md',\r\n            'c-lg': size === 'lg',\r\n            'material-icons': fontSet === 'material-icons',\r\n            'material-icons-outlined': fontSet === 'material-icons-outlined',\r\n            'material-icons-round': fontSet === 'material-icons-round',\r\n            'material-icons-sharp': fontSet === 'material-icons-sharp'\r\n          }\"\r\n          [class.c-primary]=\"color === 'primary'\"\r\n          [class.c-secondary]=\"color === 'secondary'\"\r\n          [class.c-info]=\"color === 'info'\"\r\n          [class.c-success]=\"color === 'success'\"\r\n          [class.c-warning]=\"color === 'warning'\"\r\n          [class.c-error]=\"color === 'error'\">\r\n          {{ icon || defaultIcon }}\r\n        </span>\r\n      }\r\n      <div class=\"d-flex flex-column align-items-start\">\r\n        <span class=\"T14R c-badge-title\">{{ title }}</span>\r\n        @if (description) {\r\n          <span class=\"T12R c-badge-description\">{{ description }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <!-- \u0110\u1ED1i v\u1EDBi badge icon th\u00EC secondary s\u1EBD ch\u1EC9 d\u00F9ng m\u00E0u black400 -->\r\n  <div\r\n    class=\"d-flex\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tooltip\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-badge-icon]=\"type === 'icon'\"\r\n    [class.pointer]=\"!!sdClick.observers.length\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      <span\r\n        class=\"c-material-icon mr-4\"\r\n        [class]=\"{\r\n          'c-xs': size === 'xs',\r\n          'c-sm': size === 'sm',\r\n          'c-md': size === 'md',\r\n          'c-lg': size === 'lg',\r\n          'material-icons': fontSet === 'material-icons',\r\n          'material-icons-outlined': fontSet === 'material-icons-outlined',\r\n          'material-icons-round': fontSet === 'material-icons-round',\r\n          'material-icons-sharp': fontSet === 'material-icons-sharp'\r\n        }\"\r\n        [class.c-primary]=\"color === 'primary'\"\r\n        [class.c-black400]=\"color === 'secondary'\"\r\n        [class.c-info]=\"color === 'info'\"\r\n        [class.c-success]=\"color === 'success'\"\r\n        [class.c-warning]=\"color === 'warning'\"\r\n        [class.c-error]=\"color === 'error'\">\r\n        {{ icon || defaultIcon }}\r\n      </span>\r\n      <div class=\"d-flex flex-column\">\r\n        <span class=\"T14R c-badge-title\">{{ title }}</span>\r\n        @if (description) {\r\n          <span class=\"T10R c-badge-description\">{{ description }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-badge{border-radius:20px;padding:2px 10px;display:inline-block;text-align:center;overflow-wrap:break-word}.c-badge.c-primary{background:var(--sd-primary-light);color:var(--sd-primary)}.c-badge.c-primary.c-badge--tag{border:1px solid var(--sd-primary)}.c-badge.c-secondary{background:var(--sd-secondary-light);color:var(--sd-secondary)}.c-badge.c-secondary.c-badge--tag{border:1px solid var(--sd-secondary)}.c-badge.c-info{background:var(--sd-info-light);color:var(--sd-info)}.c-badge.c-info.c-badge--tag{border:1px solid var(--sd-info)}.c-badge.c-warning{background:var(--sd-warning-light);color:var(--sd-warning)}.c-badge.c-warning.c-badge--tag{border:1px solid var(--sd-warning)}.c-badge.c-success{background:var(--sd-success-light);color:var(--sd-success)}.c-badge.c-success.c-badge--tag{border:1px solid var(--sd-success)}.c-badge.c-error{background:var(--sd-error-light);color:var(--sd-error)}.c-badge.c-error.c-badge--tag{border:1px solid var(--sd-error)}.c-badge.c-badge--tag{border-radius:4px;padding:1px 7px}.c-badge.c-badge--tag .c-material-icon{padding:0}.c-badge.c-badge--tag .c-material-icon.c-xs,.c-badge.c-badge--tag .c-material-icon.c-sm,.c-badge.c-badge--tag .c-material-icon.c-md,.c-badge.c-badge--tag .c-material-icon.c-lg{line-height:20px}.c-badge-icon{min-width:50px}.c-badge-icon .c-material-icon{border-radius:50%;padding:2px 2px 2px 0}.c-badge-icon .c-material-icon.c-xs{width:18px;height:18px;font-size:14px}.c-badge-icon .c-material-icon.c-sm{width:20px;height:20px;font-size:16px}.c-badge-icon .c-material-icon.c-md{width:22px;height:22px;font-size:18px}.c-badge-icon .c-material-icon.c-lg{width:28px;height:28px;font-size:24px}.c-badge-icon .c-material-icon.c-primary{color:var(--sd-primary)}.c-badge-icon .c-material-icon.c-secondary{color:var(--sd-secondary)}.c-badge-icon .c-material-icon.c-black400{color:var(--sd-black400)}.c-badge-icon .c-material-icon.c-info{color:var(--sd-info)}.c-badge-icon .c-material-icon.c-success{color:var(--sd-success)}.c-badge-icon .c-material-icon.c-error{color:var(--sd-error)}.c-badge-icon .c-material-icon.c-warning{color:var(--sd-warning)}.c-badge-description{color:var(--sd-black400)}::ng-deep .sd-multiline-tooltip{white-space:pre-line}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdBadge, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-badge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, MatTooltipModule], template: "@if (type === 'round') {\r\n  <div\r\n    class=\"c-badge\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tooltip\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-primary]=\"color === 'primary'\"\r\n    [class.c-secondary]=\"color === 'secondary'\"\r\n    [class.c-info]=\"color === 'info'\"\r\n    [class.c-success]=\"color === 'success'\"\r\n    [class.c-warning]=\"color === 'warning'\"\r\n    [class.c-error]=\"color === 'error'\"\r\n    [class.pointer]=\"!!sdClick.observers.length\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    {{ title }}\r\n  </div>\r\n} @else if (type === 'tag') {\r\n  <div\r\n    class=\"c-badge c-badge--tag\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tooltip\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-primary]=\"color === 'primary'\"\r\n    [class.c-secondary]=\"color === 'secondary'\"\r\n    [class.c-info]=\"color === 'info'\"\r\n    [class.c-success]=\"color === 'success'\"\r\n    [class.c-warning]=\"color === 'warning'\"\r\n    [class.c-error]=\"color === 'error'\"\r\n    [class.pointer]=\"!!sdClick.observers.length\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      @if (icon) {\r\n        <span\r\n          class=\"c-material-icon mr-4\"\r\n          [class]=\"{\r\n            'c-xs': size === 'xs',\r\n            'c-sm': size === 'sm',\r\n            'c-md': size === 'md',\r\n            'c-lg': size === 'lg',\r\n            'material-icons': fontSet === 'material-icons',\r\n            'material-icons-outlined': fontSet === 'material-icons-outlined',\r\n            'material-icons-round': fontSet === 'material-icons-round',\r\n            'material-icons-sharp': fontSet === 'material-icons-sharp'\r\n          }\"\r\n          [class.c-primary]=\"color === 'primary'\"\r\n          [class.c-secondary]=\"color === 'secondary'\"\r\n          [class.c-info]=\"color === 'info'\"\r\n          [class.c-success]=\"color === 'success'\"\r\n          [class.c-warning]=\"color === 'warning'\"\r\n          [class.c-error]=\"color === 'error'\">\r\n          {{ icon || defaultIcon }}\r\n        </span>\r\n      }\r\n      <div class=\"d-flex flex-column align-items-start\">\r\n        <span class=\"T14R c-badge-title\">{{ title }}</span>\r\n        @if (description) {\r\n          <span class=\"T12R c-badge-description\">{{ description }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <div\r\n    class=\"d-flex\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tooltip\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-badge-icon]=\"type === 'icon'\"\r\n    [class.c-primary]=\"color === 'primary'\"\r\n    [class.c-secondary]=\"color === 'secondary'\"\r\n    [class.c-info]=\"color === 'info'\"\r\n    [class.c-success]=\"color === 'success'\"\r\n    [class.c-warning]=\"color === 'warning'\"\r\n    [class.c-error]=\"color === 'error'\"\r\n    [class.pointer]=\"!!sdClick.observers.length\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      <span\r\n        class=\"c-material-icon mr-4\"\r\n        [class]=\"{\r\n          'c-xs': size === 'xs',\r\n          'c-sm': size === 'sm',\r\n          'c-md': size === 'md',\r\n          'c-lg': size === 'lg',\r\n          'material-icons': fontSet === 'material-icons',\r\n          'material-icons-outlined': fontSet === 'material-icons-outlined',\r\n          'material-icons-round': fontSet === 'material-icons-round',\r\n          'material-icons-sharp': fontSet === 'material-icons-sharp'\r\n        }\"\r\n        [class.c-primary]=\"color === 'primary'\"\r\n        [class.c-secondary]=\"color === 'secondary'\"\r\n        [class.c-info]=\"color === 'info'\"\r\n        [class.c-success]=\"color === 'success'\"\r\n        [class.c-warning]=\"color === 'warning'\"\r\n        [class.c-error]=\"color === 'error'\">\r\n        {{ icon || defaultIcon }}\r\n      </span>\r\n      <div class=\"d-flex flex-column\">\r\n        <span class=\"T14R c-badge-title\">{{ title }}</span>\r\n        @if (description) {\r\n          <span class=\"T12R c-badge-description\">{{ description }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-badge{border-radius:20px;padding:2px 10px;display:inline-block;text-align:center;overflow-wrap:break-word}.c-badge.c-primary{background:var(--sd-primary-light);color:var(--sd-primary)}.c-badge.c-primary.c-badge--tag{border:1px solid var(--sd-primary)}.c-badge.c-secondary{background:var(--sd-secondary-light);color:var(--sd-secondary)}.c-badge.c-secondary.c-badge--tag{border:1px solid var(--sd-secondary)}.c-badge.c-info{background:var(--sd-info-light);color:var(--sd-info)}.c-badge.c-info.c-badge--tag{border:1px solid var(--sd-info)}.c-badge.c-warning{background:var(--sd-warning-light);color:var(--sd-warning)}.c-badge.c-warning.c-badge--tag{border:1px solid var(--sd-warning)}.c-badge.c-success{background:var(--sd-success-light);color:var(--sd-success)}.c-badge.c-success.c-badge--tag{border:1px solid var(--sd-success)}.c-badge.c-error{background:var(--sd-error-light);color:var(--sd-error)}.c-badge.c-error.c-badge--tag{border:1px solid var(--sd-error)}.c-badge.c-badge--tag{border-radius:4px;padding:1px 7px}.c-badge.c-badge--tag .c-material-icon{padding:0}.c-badge.c-badge--tag .c-material-icon.c-xs,.c-badge.c-badge--tag .c-material-icon.c-sm,.c-badge.c-badge--tag .c-material-icon.c-md,.c-badge.c-badge--tag .c-material-icon.c-lg{line-height:20px}.c-badge-icon{min-width:50px}.c-badge-icon .c-material-icon{border-radius:50%;padding:2px 2px 2px 0}.c-badge-icon .c-material-icon.c-xs{width:18px;height:18px;font-size:14px}.c-badge-icon .c-material-icon.c-sm{width:20px;height:20px;font-size:16px}.c-badge-icon .c-material-icon.c-md{width:22px;height:22px;font-size:18px}.c-badge-icon .c-material-icon.c-lg{width:28px;height:28px;font-size:24px}.c-badge-icon .c-material-icon.c-primary{color:var(--sd-primary)}.c-badge-icon .c-material-icon.c-secondary{color:var(--sd-secondary)}.c-badge-icon .c-material-icon.c-info{color:var(--sd-info)}.c-badge-icon .c-material-icon.c-success{color:var(--sd-success)}.c-badge-icon .c-material-icon.c-error{color:var(--sd-error)}.c-badge-icon .c-material-icon.c-warning{color:var(--sd-warning)}.c-badge-description{color:var(--sd-secondary)}::ng-deep .sd-multiline-tooltip{white-space:pre-line}\n"] }]
+            args: [{ selector: 'sd-badge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, MatTooltipModule], template: "@if (type === 'round') {\r\n  <div\r\n    class=\"c-badge\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tooltip\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-primary]=\"color === 'primary'\"\r\n    [class.c-secondary]=\"color === 'secondary'\"\r\n    [class.c-info]=\"color === 'info'\"\r\n    [class.c-success]=\"color === 'success'\"\r\n    [class.c-warning]=\"color === 'warning'\"\r\n    [class.c-error]=\"color === 'error'\"\r\n    [class.pointer]=\"!!sdClick.observers.length\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    {{ title }}\r\n  </div>\r\n} @else if (type === 'tag') {\r\n  <div\r\n    class=\"c-badge c-badge--tag\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tooltip\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-primary]=\"color === 'primary'\"\r\n    [class.c-secondary]=\"color === 'secondary'\"\r\n    [class.c-info]=\"color === 'info'\"\r\n    [class.c-success]=\"color === 'success'\"\r\n    [class.c-warning]=\"color === 'warning'\"\r\n    [class.c-error]=\"color === 'error'\"\r\n    [class.pointer]=\"!!sdClick.observers.length\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      @if (icon) {\r\n        <span\r\n          class=\"c-material-icon mr-4\"\r\n          [class]=\"{\r\n            'c-xs': size === 'xs',\r\n            'c-sm': size === 'sm',\r\n            'c-md': size === 'md',\r\n            'c-lg': size === 'lg',\r\n            'material-icons': fontSet === 'material-icons',\r\n            'material-icons-outlined': fontSet === 'material-icons-outlined',\r\n            'material-icons-round': fontSet === 'material-icons-round',\r\n            'material-icons-sharp': fontSet === 'material-icons-sharp'\r\n          }\"\r\n          [class.c-primary]=\"color === 'primary'\"\r\n          [class.c-secondary]=\"color === 'secondary'\"\r\n          [class.c-info]=\"color === 'info'\"\r\n          [class.c-success]=\"color === 'success'\"\r\n          [class.c-warning]=\"color === 'warning'\"\r\n          [class.c-error]=\"color === 'error'\">\r\n          {{ icon || defaultIcon }}\r\n        </span>\r\n      }\r\n      <div class=\"d-flex flex-column align-items-start\">\r\n        <span class=\"T14R c-badge-title\">{{ title }}</span>\r\n        @if (description) {\r\n          <span class=\"T12R c-badge-description\">{{ description }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <!-- \u0110\u1ED1i v\u1EDBi badge icon th\u00EC secondary s\u1EBD ch\u1EC9 d\u00F9ng m\u00E0u black400 -->\r\n  <div\r\n    class=\"d-flex\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tooltip\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-badge-icon]=\"type === 'icon'\"\r\n    [class.pointer]=\"!!sdClick.observers.length\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      <span\r\n        class=\"c-material-icon mr-4\"\r\n        [class]=\"{\r\n          'c-xs': size === 'xs',\r\n          'c-sm': size === 'sm',\r\n          'c-md': size === 'md',\r\n          'c-lg': size === 'lg',\r\n          'material-icons': fontSet === 'material-icons',\r\n          'material-icons-outlined': fontSet === 'material-icons-outlined',\r\n          'material-icons-round': fontSet === 'material-icons-round',\r\n          'material-icons-sharp': fontSet === 'material-icons-sharp'\r\n        }\"\r\n        [class.c-primary]=\"color === 'primary'\"\r\n        [class.c-black400]=\"color === 'secondary'\"\r\n        [class.c-info]=\"color === 'info'\"\r\n        [class.c-success]=\"color === 'success'\"\r\n        [class.c-warning]=\"color === 'warning'\"\r\n        [class.c-error]=\"color === 'error'\">\r\n        {{ icon || defaultIcon }}\r\n      </span>\r\n      <div class=\"d-flex flex-column\">\r\n        <span class=\"T14R c-badge-title\">{{ title }}</span>\r\n        @if (description) {\r\n          <span class=\"T10R c-badge-description\">{{ description }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-badge{border-radius:20px;padding:2px 10px;display:inline-block;text-align:center;overflow-wrap:break-word}.c-badge.c-primary{background:var(--sd-primary-light);color:var(--sd-primary)}.c-badge.c-primary.c-badge--tag{border:1px solid var(--sd-primary)}.c-badge.c-secondary{background:var(--sd-secondary-light);color:var(--sd-secondary)}.c-badge.c-secondary.c-badge--tag{border:1px solid var(--sd-secondary)}.c-badge.c-info{background:var(--sd-info-light);color:var(--sd-info)}.c-badge.c-info.c-badge--tag{border:1px solid var(--sd-info)}.c-badge.c-warning{background:var(--sd-warning-light);color:var(--sd-warning)}.c-badge.c-warning.c-badge--tag{border:1px solid var(--sd-warning)}.c-badge.c-success{background:var(--sd-success-light);color:var(--sd-success)}.c-badge.c-success.c-badge--tag{border:1px solid var(--sd-success)}.c-badge.c-error{background:var(--sd-error-light);color:var(--sd-error)}.c-badge.c-error.c-badge--tag{border:1px solid var(--sd-error)}.c-badge.c-badge--tag{border-radius:4px;padding:1px 7px}.c-badge.c-badge--tag .c-material-icon{padding:0}.c-badge.c-badge--tag .c-material-icon.c-xs,.c-badge.c-badge--tag .c-material-icon.c-sm,.c-badge.c-badge--tag .c-material-icon.c-md,.c-badge.c-badge--tag .c-material-icon.c-lg{line-height:20px}.c-badge-icon{min-width:50px}.c-badge-icon .c-material-icon{border-radius:50%;padding:2px 2px 2px 0}.c-badge-icon .c-material-icon.c-xs{width:18px;height:18px;font-size:14px}.c-badge-icon .c-material-icon.c-sm{width:20px;height:20px;font-size:16px}.c-badge-icon .c-material-icon.c-md{width:22px;height:22px;font-size:18px}.c-badge-icon .c-material-icon.c-lg{width:28px;height:28px;font-size:24px}.c-badge-icon .c-material-icon.c-primary{color:var(--sd-primary)}.c-badge-icon .c-material-icon.c-secondary{color:var(--sd-secondary)}.c-badge-icon .c-material-icon.c-black400{color:var(--sd-black400)}.c-badge-icon .c-material-icon.c-info{color:var(--sd-info)}.c-badge-icon .c-material-icon.c-success{color:var(--sd-success)}.c-badge-icon .c-material-icon.c-error{color:var(--sd-error)}.c-badge-icon .c-material-icon.c-warning{color:var(--sd-warning)}.c-badge-description{color:var(--sd-black400)}::ng-deep .sd-multiline-tooltip{white-space:pre-line}\n"] }]
         }], propDecorators: { _type: [{
                 type: Input,
                 args: ['type']

package/fesm2022/sd-angular-core-components-badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-components-badge.mjs","sources":["../../../projects/sd-angular/components/badge/src/badge.component.ts","../../../projects/sd-angular/components/badge/src/badge.component.html","../../../projects/sd-angular/components/badge/sd-angular-core-components-badge.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\r\nimport { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { SdColor, SdSize } from '@sd-angular/core/utilities/models';\r\n\r\n@Component({\r\n  selector: 'sd-badge',\r\n  templateUrl: './badge.component.html',\r\n  styleUrls: ['./badge.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  standalone: true,\r\n  imports: [CommonModule, MatIconModule, MatTooltipModule],\r\n})\r\nexport class SdBadge {\r\n  defaultIcon = 'fiber_manual_record';\r\n\r\n  type: 'tag' | 'round' | 'icon' = 'icon';\r\n  @Input('type') set _type(type: 'tag' | 'round' | 'icon' | undefined | null) {\r\n    this.type = type || 'icon';\r\n  }\r\n\r\n  color: SdColor = 'secondary';\r\n  @Input('color') set _color(color: SdColor | undefined | null) {\r\n    this.color = color || 'secondary';\r\n  }\r\n\r\n  // Hỗ trợ: <sd-button secondary> hoặc <sd-button [secondary]=\"condition\">\r\n  @Input() set primary(value: boolean | '') {\r\n    if (value === '' || value) {\r\n      this.color = 'primary';\r\n    }\r\n  }\r\n\r\n  @Input() set secondary(value: boolean | '') {\r\n    // Nếu value là '' (viết tắt <sd-button secondary>) hoặc true\r\n    if (value === '' || value) {\r\n      this.color = 'secondary';\r\n    }\r\n  }\r\n\r\n  @Input() set success(value: boolean | '' | undefined | null) {\r\n    // Nếu value là '' (viết tắt <sd-button secondary>) hoặc true\r\n    if (value === '' || value) {\r\n      this.color = 'success';\r\n    }\r\n  }\r\n\r\n  @Input() set info(value: boolean | '' | undefined | null) {\r\n    // Nếu value là '' (viết tắt <sd-button secondary>) hoặc true\r\n    if (value === '' || value) {\r\n      this.color = 'info';\r\n    }\r\n  }\r\n\r\n  @Input() set warning(value: boolean | '' | undefined | null) {\r\n    // Nếu value là '' (viết tắt <sd-button secondary>) hoặc true\r\n    if (value === '' || value) {\r\n      this.color = 'warning';\r\n    }\r\n  }\r\n\r\n  @Input() set error(value: boolean | '' | undefined | null) {\r\n    // Nếu value là '' (viết tắt <sd-button secondary>) hoặc true\r\n    if (value === '' || value) {\r\n      this.color = 'error';\r\n    }\r\n  }\r\n\r\n  fontSet: 'material-icons' | 'material-icons-outlined' | 'material-icons-round' | 'material-icons-sharp' = 'material-icons';\r\n  @Input('fontSet') set _fontSet(\r\n    fontSet: 'material-icons' | 'material-icons-outlined' | 'material-icons-round' | 'material-icons-sharp' | undefined | null\r\n  ) {\r\n    this.fontSet = fontSet || 'material-icons';\r\n  }\r\n  @Input() title: string | number | undefined | null;\r\n  @Input() description: string | undefined | null;\r\n  @Input() tooltip: string | undefined | null;\r\n  @Input() icon: string | undefined | null;\r\n\r\n  @Input() size: SdSize = 'sm';\r\n  @Output() sdClick = new EventEmitter();\r\n  onClick = (event: Event) => {\r\n    this.sdClick.emit(event);\r\n  };\r\n}\r\n","@if (type === 'round') {\r\n  <div\r\n    class=\"c-badge\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tooltip\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-primary]=\"color === 'primary'\"\r\n    [class.c-secondary]=\"color === 'secondary'\"\r\n    [class.c-info]=\"color === 'info'\"\r\n    [class.c-success]=\"color === 'success'\"\r\n    [class.c-warning]=\"color === 'warning'\"\r\n    [class.c-error]=\"color === 'error'\"\r\n    [class.pointer]=\"!!sdClick.observers.length\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    {{ title }}\r\n  </div>\r\n} @else if (type === 'tag') {\r\n  <div\r\n    class=\"c-badge c-badge--tag\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tooltip\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-primary]=\"color === 'primary'\"\r\n    [class.c-secondary]=\"color === 'secondary'\"\r\n    [class.c-info]=\"color === 'info'\"\r\n    [class.c-success]=\"color === 'success'\"\r\n    [class.c-warning]=\"color === 'warning'\"\r\n    [class.c-error]=\"color === 'error'\"\r\n    [class.pointer]=\"!!sdClick.observers.length\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      @if (icon) {\r\n        <span\r\n          class=\"c-material-icon mr-4\"\r\n          [class]=\"{\r\n            'c-xs': size === 'xs',\r\n            'c-sm': size === 'sm',\r\n            'c-md': size === 'md',\r\n            'c-lg': size === 'lg',\r\n            'material-icons': fontSet === 'material-icons',\r\n            'material-icons-outlined': fontSet === 'material-icons-outlined',\r\n            'material-icons-round': fontSet === 'material-icons-round',\r\n            'material-icons-sharp': fontSet === 'material-icons-sharp'\r\n          }\"\r\n          [class.c-primary]=\"color === 'primary'\"\r\n          [class.c-secondary]=\"color === 'secondary'\"\r\n          [class.c-info]=\"color === 'info'\"\r\n          [class.c-success]=\"color === 'success'\"\r\n          [class.c-warning]=\"color === 'warning'\"\r\n          [class.c-error]=\"color === 'error'\">\r\n          {{ icon || defaultIcon }}\r\n        </span>\r\n      }\r\n      <div class=\"d-flex flex-column align-items-start\">\r\n        <span class=\"T14R c-badge-title\">{{ title }}</span>\r\n        @if (description) {\r\n          <span class=\"T12R c-badge-description\">{{ description }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <div\r\n    class=\"d-flex\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tooltip\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-badge-icon]=\"type === 'icon'\"\r\n    [class.c-primary]=\"color === 'primary'\"\r\n    [class.c-secondary]=\"color === 'secondary'\"\r\n    [class.c-info]=\"color === 'info'\"\r\n    [class.c-success]=\"color === 'success'\"\r\n    [class.c-warning]=\"color === 'warning'\"\r\n    [class.c-error]=\"color === 'error'\"\r\n    [class.pointer]=\"!!sdClick.observers.length\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      <span\r\n        class=\"c-material-icon mr-4\"\r\n        [class]=\"{\r\n          'c-xs': size === 'xs',\r\n          'c-sm': size === 'sm',\r\n          'c-md': size === 'md',\r\n          'c-lg': size === 'lg',\r\n          'material-icons': fontSet === 'material-icons',\r\n          'material-icons-outlined': fontSet === 'material-icons-outlined',\r\n          'material-icons-round': fontSet === 'material-icons-round',\r\n          'material-icons-sharp': fontSet === 'material-icons-sharp'\r\n        }\"\r\n        [class.c-primary]=\"color === 'primary'\"\r\n        [class.c-secondary]=\"color === 'secondary'\"\r\n        [class.c-info]=\"color === 'info'\"\r\n        [class.c-success]=\"color === 'success'\"\r\n        [class.c-warning]=\"color === 'warning'\"\r\n        [class.c-error]=\"color === 'error'\">\r\n        {{ icon || defaultIcon }}\r\n      </span>\r\n      <div class=\"d-flex flex-column\">\r\n        <span class=\"T14R c-badge-title\">{{ title }}</span>\r\n        @if (description) {\r\n          <span class=\"T12R c-badge-description\">{{ description }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sd-angular-core-components-badge.mjs","sources":["../../../projects/sd-angular/components/badge/src/badge.component.ts","../../../projects/sd-angular/components/badge/src/badge.component.html","../../../projects/sd-angular/components/badge/sd-angular-core-components-badge.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\r\nimport { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { SdColor, SdSize } from '@sd-angular/core/utilities/models';\r\n\r\n@Component({\r\n  selector: 'sd-badge',\r\n  templateUrl: './badge.component.html',\r\n  styleUrls: ['./badge.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  standalone: true,\r\n  imports: [CommonModule, MatIconModule, MatTooltipModule],\r\n})\r\nexport class SdBadge {\r\n  defaultIcon = 'fiber_manual_record';\r\n\r\n  type: 'tag' | 'round' | 'icon' = 'icon';\r\n  @Input('type') set _type(type: 'tag' | 'round' | 'icon' | undefined | null) {\r\n    this.type = type || 'icon';\r\n  }\r\n\r\n  color: SdColor = 'secondary';\r\n  @Input('color') set _color(color: SdColor | undefined | null) {\r\n    this.color = color || 'secondary';\r\n  }\r\n\r\n  // Hỗ trợ: <sd-button secondary> hoặc <sd-button [secondary]=\"condition\">\r\n  @Input() set primary(value: boolean | '') {\r\n    if (value === '' || value) {\r\n      this.color = 'primary';\r\n    }\r\n  }\r\n\r\n  @Input() set secondary(value: boolean | '') {\r\n    // Nếu value là '' (viết tắt <sd-button secondary>) hoặc true\r\n    if (value === '' || value) {\r\n      this.color = 'secondary';\r\n    }\r\n  }\r\n\r\n  @Input() set success(value: boolean | '' | undefined | null) {\r\n    // Nếu value là '' (viết tắt <sd-button secondary>) hoặc true\r\n    if (value === '' || value) {\r\n      this.color = 'success';\r\n    }\r\n  }\r\n\r\n  @Input() set info(value: boolean | '' | undefined | null) {\r\n    // Nếu value là '' (viết tắt <sd-button secondary>) hoặc true\r\n    if (value === '' || value) {\r\n      this.color = 'info';\r\n    }\r\n  }\r\n\r\n  @Input() set warning(value: boolean | '' | undefined | null) {\r\n    // Nếu value là '' (viết tắt <sd-button secondary>) hoặc true\r\n    if (value === '' || value) {\r\n      this.color = 'warning';\r\n    }\r\n  }\r\n\r\n  @Input() set error(value: boolean | '' | undefined | null) {\r\n    // Nếu value là '' (viết tắt <sd-button secondary>) hoặc true\r\n    if (value === '' || value) {\r\n      this.color = 'error';\r\n    }\r\n  }\r\n\r\n  fontSet: 'material-icons' | 'material-icons-outlined' | 'material-icons-round' | 'material-icons-sharp' = 'material-icons';\r\n  @Input('fontSet') set _fontSet(\r\n    fontSet: 'material-icons' | 'material-icons-outlined' | 'material-icons-round' | 'material-icons-sharp' | undefined | null\r\n  ) {\r\n    this.fontSet = fontSet || 'material-icons';\r\n  }\r\n  @Input() title: string | number | undefined | null;\r\n  @Input() description: string | undefined | null;\r\n  @Input() tooltip: string | undefined | null;\r\n  @Input() icon: string | undefined | null;\r\n\r\n  @Input() size: SdSize = 'sm';\r\n  @Output() sdClick = new EventEmitter();\r\n  onClick = (event: Event) => {\r\n    this.sdClick.emit(event);\r\n  };\r\n}\r\n","@if (type === 'round') {\r\n  <div\r\n    class=\"c-badge\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tooltip\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-primary]=\"color === 'primary'\"\r\n    [class.c-secondary]=\"color === 'secondary'\"\r\n    [class.c-info]=\"color === 'info'\"\r\n    [class.c-success]=\"color === 'success'\"\r\n    [class.c-warning]=\"color === 'warning'\"\r\n    [class.c-error]=\"color === 'error'\"\r\n    [class.pointer]=\"!!sdClick.observers.length\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    {{ title }}\r\n  </div>\r\n} @else if (type === 'tag') {\r\n  <div\r\n    class=\"c-badge c-badge--tag\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tooltip\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-primary]=\"color === 'primary'\"\r\n    [class.c-secondary]=\"color === 'secondary'\"\r\n    [class.c-info]=\"color === 'info'\"\r\n    [class.c-success]=\"color === 'success'\"\r\n    [class.c-warning]=\"color === 'warning'\"\r\n    [class.c-error]=\"color === 'error'\"\r\n    [class.pointer]=\"!!sdClick.observers.length\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      @if (icon) {\r\n        <span\r\n          class=\"c-material-icon mr-4\"\r\n          [class]=\"{\r\n            'c-xs': size === 'xs',\r\n            'c-sm': size === 'sm',\r\n            'c-md': size === 'md',\r\n            'c-lg': size === 'lg',\r\n            'material-icons': fontSet === 'material-icons',\r\n            'material-icons-outlined': fontSet === 'material-icons-outlined',\r\n            'material-icons-round': fontSet === 'material-icons-round',\r\n            'material-icons-sharp': fontSet === 'material-icons-sharp'\r\n          }\"\r\n          [class.c-primary]=\"color === 'primary'\"\r\n          [class.c-secondary]=\"color === 'secondary'\"\r\n          [class.c-info]=\"color === 'info'\"\r\n          [class.c-success]=\"color === 'success'\"\r\n          [class.c-warning]=\"color === 'warning'\"\r\n          [class.c-error]=\"color === 'error'\">\r\n          {{ icon || defaultIcon }}\r\n        </span>\r\n      }\r\n      <div class=\"d-flex flex-column align-items-start\">\r\n        <span class=\"T14R c-badge-title\">{{ title }}</span>\r\n        @if (description) {\r\n          <span class=\"T12R c-badge-description\">{{ description }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <!-- Đối với badge icon thì secondary sẽ chỉ dùng màu black400 -->\r\n  <div\r\n    class=\"d-flex\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tooltip\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-badge-icon]=\"type === 'icon'\"\r\n    [class.pointer]=\"!!sdClick.observers.length\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      <span\r\n        class=\"c-material-icon mr-4\"\r\n        [class]=\"{\r\n          'c-xs': size === 'xs',\r\n          'c-sm': size === 'sm',\r\n          'c-md': size === 'md',\r\n          'c-lg': size === 'lg',\r\n          'material-icons': fontSet === 'material-icons',\r\n          'material-icons-outlined': fontSet === 'material-icons-outlined',\r\n          'material-icons-round': fontSet === 'material-icons-round',\r\n          'material-icons-sharp': fontSet === 'material-icons-sharp'\r\n        }\"\r\n        [class.c-primary]=\"color === 'primary'\"\r\n        [class.c-black400]=\"color === 'secondary'\"\r\n        [class.c-info]=\"color === 'info'\"\r\n        [class.c-success]=\"color === 'success'\"\r\n        [class.c-warning]=\"color === 'warning'\"\r\n        [class.c-error]=\"color === 'error'\">\r\n        {{ icon || defaultIcon }}\r\n      </span>\r\n      <div class=\"d-flex flex-column\">\r\n        <span class=\"T14R c-badge-title\">{{ title }}</span>\r\n        @if (description) {\r\n          <span class=\"T10R c-badge-description\">{{ description }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}