@sd-angular/core 19.0.0-beta.5 → 19.0.0-beta.51

package/components/table/src/services/table-format/table-format.service.d.ts

@@ -0,0 +1,16 @@
+import { SdTableColumn } from '../../models/table-column.model';
+import { SdTableItem } from '../../models/table-item.model';
+import * as i0 from "@angular/core";
+export declare class TableFormatService {
+    #private;
+    /**
+     * Tải và cache các giá trị từ điển cho cột 'values'
+     */
+    loadValues(columns: SdTableColumn[], cacheValues: Record<string, any[]>, cacheObjValues: Record<string, Record<string, string>>): Promise<void>;
+    /**
+     * Chuyển đổi dữ liệu thô thành SdTableItem kèm các thiết lập hiển thị (Display Meta)
+     */
+    format<T = any>(rawItems: T[], columns: SdTableColumn[], cacheValues: Record<string, any[]>, cacheObjValues: Record<string, Record<string, string>>): Promise<SdTableItem<T>[]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableFormatService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<TableFormatService>;
+}

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

@@ -1,19 +1,18 @@
-import { AfterViewInit, ChangeDetectorRef, OnDestroy, OnInit, QueryList } from '@angular/core';
+import { AfterViewInit, OnDestroy, OnInit } from '@angular/core';
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTable } from '@angular/material/table';
-import { SdExcelColumn, SdExcelService, SdNotifyService } from '@sd-angular/core/services';
+import { SdExcelColumn } from '@sd-angular/core/services';
 import { SdTabelCellDefDirective } from './directives/sd-table-cell-def.directive';
 import { SdMaterialSubInformationDefDirective } from './directives/sd-table-expand-def.directive';
 import { SdTableFilterDefDirective } from './directives/sd-table-filter-def.directive';
 import { SdMaterialFooterDefDirective } from './directives/sd-table-footer-def.directive';
 import { SdTableColumn } from './models/table-column.model';
 import { SdTableOption } from './models/table-option.model';
-import { TableFilterRegister } from './services/table-filter/table-filter.model';
+import { SdTableFilterRequest, TableFilterRegister } from './services/table-filter/table-filter.model';
 import { SdBaseSecureComponent } from '@sd-angular/core/components/base';
 import { SdQuickAction } from '@sd-angular/core/components/quick-action';
 import { SdScrollDirective } from '@sd-angular/core/directives';
-import { SdFormatNumberPipe } from '@sd-angular/core/pipes';
 import { SdOperator } from '@sd-angular/core/utilities';
 import { ExternalFilterComponent } from './components';
 import { ConfigComponent } from './components/config/config.component';
@@ -21,8 +20,6 @@ import { SdPopupExport } from './components/popup-export/popup-export.component'
 import { ISdTableConfiguration } from './configurations';
 import { SdTableItem } from './models/table-item.model';
 import { ConfiguredTableResult } from './models/table-option-config.model';
-import { ConfigService } from './services/config.service';
-import { SdTableFilterService } from './services/table-filter/table-filter.service';
 import * as i0 from "@angular/core";
 export declare class MatPaginatorIntlCro extends MatPaginatorIntl {
     firstPageLabel: string;
@@ -36,60 +33,49 @@ export declare class MatPaginatorIntlCro extends MatPaginatorIntl {
 }
 export declare class SdTable<T = unknown> extends SdBaseSecureComponent implements OnInit, AfterViewInit, OnDestroy {
     #private;
-    private ref;
-    private formatNumberPipe;
-    tableConfiguration: ISdTableConfiguration | undefined;
-    private configService;
-    private excelService;
-    private notifyService;
-    private gridFilterService;
-    autoId?: string;
-    set _autoId(val: string | undefined | null);
-    table?: MatTable<any>;
-    configComponent?: ConfigComponent;
-    sdPopupExport?: SdPopupExport;
-    scroll?: SdScrollDirective;
+    autoIdInput: import("@angular/core").InputSignal<string | null | undefined>;
+    autoId: import("@angular/core").Signal<string | undefined>;
+    option: import("@angular/core").InputSignal<SdTableOption<T>>;
+    table: import("@angular/core").Signal<MatTable<any> | undefined>;
+    configComponent: import("@angular/core").Signal<ConfigComponent | undefined>;
+    sdPopupExport: import("@angular/core").Signal<SdPopupExport | undefined>;
+    scroll: import("@angular/core").Signal<SdScrollDirective | undefined>;
+    quickAction: import("@angular/core").Signal<SdQuickAction | undefined>;
+    externalFilter: import("@angular/core").Signal<ExternalFilterComponent | undefined>;
+    paginator: import("@angular/core").Signal<MatPaginator | undefined>;
+    sort: import("@angular/core").Signal<MatSort | undefined>;
+    sdSubInformation: import("@angular/core").Signal<SdMaterialSubInformationDefDirective | undefined>;
+    sdCellDefs: import("@angular/core").Signal<readonly SdTabelCellDefDirective[]>;
+    sdFooterDefs: import("@angular/core").Signal<readonly SdMaterialFooterDefDirective[]>;
+    sdFilterDefs: import("@angular/core").Signal<readonly SdTableFilterDefDirective[]>;
+    cellDef: import("@angular/core").Signal<Record<string, SdTabelCellDefDirective>>;
+    footerDef: import("@angular/core").Signal<Record<string, SdMaterialFooterDefDirective>>;
+    hasFooter: import("@angular/core").Signal<boolean>;
+    tableOption: import("@angular/core").WritableSignal<SdTableOption<T> | undefined>;
+    configuration: import("@angular/core").WritableSignal<ConfiguredTableResult | undefined>;
+    items: import("@angular/core").WritableSignal<SdTableItem<T>[]>;
+    selectedTableItems: import("@angular/core").WritableSignal<SdTableItem<T>[]>;
+    total: import("@angular/core").WritableSignal<number | undefined>;
+    loading: import("@angular/core").WritableSignal<boolean>;
+    exporting: import("@angular/core").WritableSignal<boolean>;
+    isSelectAll: import("@angular/core").WritableSignal<boolean>;
+    exportTitle: import("@angular/core").WritableSignal<string>;
+    isFiltered: import("@angular/core").WritableSignal<boolean>;
+    requireFiltered: import("@angular/core").WritableSignal<boolean>;
     filterRegister: TableFilterRegister;
     key: string;
-    quickAction?: SdQuickAction;
-    externalFilter?: ExternalFilterComponent;
-    tableOption: SdTableOption<T>;
-    configuration?: ConfiguredTableResult;
-    set option(option: SdTableOption);
-    items: SdTableItem<T>[];
-    selectedTableItems: SdTableItem<T>[];
-    total?: number;
-    loading: boolean;
-    isHiddenPaginator: boolean;
-    set paginator(paginator: MatPaginator);
-    set sort(sort: MatSort);
-    sdSubInformation?: SdMaterialSubInformationDefDirective;
-    sdCellDefs: QueryList<SdTabelCellDefDirective>;
-    cellDef: Record<string, SdTabelCellDefDirective>;
-    sdFooterDefs: QueryList<SdMaterialFooterDefDirective>;
-    footerDef: Record<string, SdMaterialFooterDefDirective>;
-    hasFooter: boolean;
-    sdFilterDefs: QueryList<SdTableFilterDefDirective>;
-    filterDefs: SdTableFilterDefDirective[];
     columnOperator: Record<string, SdOperator>;
     columnFilter?: Record<string, any>;
-    exporting: boolean;
-    isSelectAll: boolean;
-    exportTitle: string;
     cacheValues: Record<string, any[]>;
-    constructor(ref: ChangeDetectorRef, formatNumberPipe: SdFormatNumberPipe, tableConfiguration: ISdTableConfiguration | undefined, configService: ConfigService, excelService: SdExcelService, notifyService: SdNotifyService, gridFilterService: SdTableFilterService);
+    tableConfiguration: ISdTableConfiguration | null;
+    constructor();
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
-    isFiltered: boolean;
-    requireFiltered: boolean;
+    getFilterRequest: () => SdTableFilterRequest;
     reload: (force?: boolean, scrollTop?: boolean) => Promise<void>;
-    onExport: (args?: {
-        columns?: SdExcelColumn[];
-        isCSV?: boolean;
-    }) => Promise<void>;
-    exportExcel: () => void;
-    exportCSV: () => void;
+    exportExcel: (columns?: SdExcelColumn[]) => void;
+    exportCSV: (columns?: SdExcelColumn[]) => void;
     exportCustom: () => void;
     onFilterChange: () => void;
     onExpand: (rowData: SdTableItem<T>) => Promise<void>;
@@ -106,6 +92,6 @@ export declare class SdTable<T = unknown> extends SdBaseSecureComponent implemen
     detectChanges: () => void;
     onOperatorChange: (column: SdTableColumn, operator: SdOperator) => void;
     trackBy: (index: number, item: SdTableItem) => string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SdTable<any>, [null, null, { optional: true; }, null, null, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdTable<any>, "sd-table", never, { "_autoId": { "alias": "autoId"; "required": false; }; "option": { "alias": "option"; "required": false; }; }, {}, ["sdSubInformation", "sdCellDefs", "sdFooterDefs", "sdFilterDefs"], ["[sdTableTop]"], true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdTable<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdTable<any>, "sd-table", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "option": { "alias": "option"; "required": true; "isSignal": true; }; }, {}, ["sdSubInformation", "sdCellDefs", "sdFooterDefs", "sdFilterDefs"], ["[sdTableTop]"], true, never>;
 }

package/components/view/index.d.ts

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

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

@@ -0,0 +1,16 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SdView {
+    label: import("@angular/core").InputSignal<string | null | undefined>;
+    value: import("@angular/core").InputSignal<any>;
+    display: import("@angular/core").InputSignal<string | null | undefined>;
+    hyperlink: import("@angular/core").InputSignal<string | null | undefined>;
+    labelTemplate: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
+    valueTemplate: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
+    contentLabelTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
+    contentValueTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
+    activeLabelTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
+    activeValueTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdView, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdView, "sd-view", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "display": { "alias": "display"; "required": true; "isSignal": true; }; "hyperlink": { "alias": "hyperlink"; "required": false; "isSignal": true; }; "labelTemplate": { "alias": "labelTemplate"; "required": false; "isSignal": true; }; "valueTemplate": { "alias": "valueTemplate"; "required": false; "isSignal": true; }; }, {}, ["contentLabelTemplate", "contentValueTemplate"], never, true, never>;
+}

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/directives/index.d.ts

@@ -2,3 +2,4 @@ export * from './src/sd-scroll.directive';
 export * from './src/sd-desktop.directive';
 export * from './src/sd-mobile.directive';
 export * from './src/sd-hover-copy.directive';
+export * from './src/sd-href.directive';

package/directives/src/sd-href.directive.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class SdHrefDirective {
+    #private;
+    url: string;
+    get href(): string;
+    onClick(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdHrefDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SdHrefDirective, "a[sdHref]", never, { "url": { "alias": "sdHref"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,90 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class SdAvatar {
+    src;
+    size = 32;
+    name = '';
+    isUrl = false;
+    initials = '';
+    bgColor = '#ccc';
+    ngOnInit() {
+        this.#init();
+    }
+    #init = () => {
+        // Kiểm tra xem src có phải là URL (http, https, data:image, hoặc path /)
+        const urlPattern = /^(http|https|data:image|\/)/;
+        this.isUrl = urlPattern.test(this.src || '');
+        if (this.name || !this.isUrl) {
+            this.bgColor = this.#generateColor(this.name || this.src || '');
+            this.initials = this.#getInitials(this.name || this.src || '');
+        }
+        else {
+            this.bgColor = '#bdc3c7';
+            this.initials = '?';
+        }
+    };
+    handleError() {
+        this.src = undefined; // Nếu ảnh lỗi, chuyển sang hiển thị initials
+        this.#init();
+    }
+    #getInitials = (name) => {
+        return (name
+            .trim()
+            .split(' ')
+            .filter(Boolean)
+            .map(n => n[0])
+            .join('')
+            .toUpperCase()
+            .substring(0, 2) || '');
+    };
+    #generateColor = (name) => {
+        const colors = [
+            '#1abc9c',
+            '#2ecc71',
+            '#3498db',
+            '#9b59b6',
+            '#34495e',
+            '#16a085',
+            '#27ae60',
+            '#2980b9',
+            '#8e44ad',
+            '#2c3e50',
+            '#f1c40f',
+            '#e67e22',
+            '#e74c3c',
+            '#95a5a6',
+            '#f39c12',
+            '#d35400',
+            '#c0392b',
+            '#bdc3c7',
+            '#7f8c8d',
+        ];
+        let hash = 0;
+        for (let i = 0; i < name.length; i++) {
+            hash = name.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        return colors[Math.abs(hash) % colors.length];
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdAvatar, isStandalone: true, selector: "sd-avatar", inputs: { src: "src", size: "size", name: "name" }, ngImport: i0, template: "<div class=\"sd-avatar\" [style.width.px]=\"size\" [style.height.px]=\"size\" [style.line-height.px]=\"size\" [style.backgroundColor]=\"bgColor\">\r\n  @if (isUrl) {\r\n    <img [src]=\"src\" (error)=\"handleError()\" alt=\"avatar\" />\r\n  } @else {\r\n    <span class=\"sd-avatar-text\" [style.fontSize.px]=\"size / 2.5\">\r\n      {{ initials }}\r\n    </span>\r\n  }\r\n</div>\r\n", styles: [".sd-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;color:#fff;font-weight:500;-webkit-user-select:none;user-select:none;background-size:cover}.sd-avatar img{width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAvatar, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-avatar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sd-avatar\" [style.width.px]=\"size\" [style.height.px]=\"size\" [style.line-height.px]=\"size\" [style.backgroundColor]=\"bgColor\">\r\n  @if (isUrl) {\r\n    <img [src]=\"src\" (error)=\"handleError()\" alt=\"avatar\" />\r\n  } @else {\r\n    <span class=\"sd-avatar-text\" [style.fontSize.px]=\"size / 2.5\">\r\n      {{ initials }}\r\n    </span>\r\n  }\r\n</div>\r\n", styles: [".sd-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;color:#fff;font-weight:500;-webkit-user-select:none;user-select:none;background-size:cover}.sd-avatar img{width:100%;height:100%;object-fit:cover}\n"] }]
+        }], propDecorators: { src: [{
+                type: Input,
+                args: [{ required: true }]
+            }], size: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdAvatar };
+//# sourceMappingURL=sd-angular-core-components-avatar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-angular-core-components-avatar.mjs","sources":["../../../projects/sd-angular/components/avatar/src/avatar.component.ts","../../../projects/sd-angular/components/avatar/src/avatar.component.html","../../../projects/sd-angular/components/avatar/sd-angular-core-components-avatar.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'sd-avatar',\r\n  standalone: true,\r\n  imports: [CommonModule],\r\n  templateUrl: './avatar.component.html',\r\n  styleUrls: ['./avatar.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SdAvatar implements OnInit {\r\n  @Input({ required: true }) src: string | undefined | null;\r\n  @Input() size: number = 32;\r\n  @Input() name: string = '';\r\n\r\n  isUrl: boolean = false;\r\n  initials: string = '';\r\n  bgColor: string = '#ccc';\r\n\r\n  ngOnInit(): void {\r\n    this.#init();\r\n  }\r\n\r\n  #init = () => {\r\n    // Kiểm tra xem src có phải là URL (http, https, data:image, hoặc path /)\r\n    const urlPattern = /^(http|https|data:image|\\/)/;\r\n    this.isUrl = urlPattern.test(this.src || '');\r\n    if (this.name || !this.isUrl) {\r\n      this.bgColor = this.#generateColor(this.name || this.src || '');\r\n      this.initials = this.#getInitials(this.name || this.src || '');\r\n    } else {\r\n      this.bgColor = '#bdc3c7';\r\n      this.initials = '?';\r\n    }\r\n  };\r\n\r\n  handleError() {\r\n    this.src = undefined; // Nếu ảnh lỗi, chuyển sang hiển thị initials\r\n    this.#init();\r\n  }\r\n\r\n  #getInitials = (name: string): string => {\r\n    return (\r\n      name\r\n        .trim()\r\n        .split(' ')\r\n        .filter(Boolean)\r\n        .map(n => n[0])\r\n        .join('')\r\n        .toUpperCase()\r\n        .substring(0, 2) || ''\r\n    );\r\n  };\r\n\r\n  #generateColor = (name: string): string => {\r\n    const colors = [\r\n      '#1abc9c',\r\n      '#2ecc71',\r\n      '#3498db',\r\n      '#9b59b6',\r\n      '#34495e',\r\n      '#16a085',\r\n      '#27ae60',\r\n      '#2980b9',\r\n      '#8e44ad',\r\n      '#2c3e50',\r\n      '#f1c40f',\r\n      '#e67e22',\r\n      '#e74c3c',\r\n      '#95a5a6',\r\n      '#f39c12',\r\n      '#d35400',\r\n      '#c0392b',\r\n      '#bdc3c7',\r\n      '#7f8c8d',\r\n    ];\r\n    let hash = 0;\r\n    for (let i = 0; i < name.length; i++) {\r\n      hash = name.charCodeAt(i) + ((hash << 5) - hash);\r\n    }\r\n    return colors[Math.abs(hash) % colors.length];\r\n  };\r\n}\r\n","<div class=\"sd-avatar\" [style.width.px]=\"size\" [style.height.px]=\"size\" [style.line-height.px]=\"size\" [style.backgroundColor]=\"bgColor\">\r\n  @if (isUrl) {\r\n    <img [src]=\"src\" (error)=\"handleError()\" alt=\"avatar\" />\r\n  } @else {\r\n    <span class=\"sd-avatar-text\" [style.fontSize.px]=\"size / 2.5\">\r\n      {{ initials }}\r\n    </span>\r\n  }\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAWa,QAAQ,CAAA;AACQ,IAAA,GAAG;IACrB,IAAI,GAAW,EAAE;IACjB,IAAI,GAAW,EAAE;IAE1B,KAAK,GAAY,KAAK;IACtB,QAAQ,GAAW,EAAE;IACrB,OAAO,GAAW,MAAM;IAExB,QAAQ,GAAA;QACN,IAAI,CAAC,KAAK,EAAE;IACd;IAEA,KAAK,GAAG,MAAK;;QAEX,MAAM,UAAU,GAAG,6BAA6B;AAChD,QAAA,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC;QAC5C,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;AAC5B,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC;AAC/D,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC;QAChE;aAAO;AACL,YAAA,IAAI,CAAC,OAAO,GAAG,SAAS;AACxB,YAAA,IAAI,CAAC,QAAQ,GAAG,GAAG;QACrB;AACF,IAAA,CAAC;IAED,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,GAAG,GAAG,SAAS,CAAC;QACrB,IAAI,CAAC,KAAK,EAAE;IACd;AAEA,IAAA,YAAY,GAAG,CAAC,IAAY,KAAY;AACtC,QAAA,QACE;AACG,aAAA,IAAI;aACJ,KAAK,CAAC,GAAG;aACT,MAAM,CAAC,OAAO;aACd,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;aACb,IAAI,CAAC,EAAE;AACP,aAAA,WAAW;aACX,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE;AAE5B,IAAA,CAAC;AAED,IAAA,cAAc,GAAG,CAAC,IAAY,KAAY;AACxC,QAAA,MAAM,MAAM,GAAG;YACb,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;SACV;QACD,IAAI,IAAI,GAAG,CAAC;AACZ,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACpC,YAAA,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC;QAClD;AACA,QAAA,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC;AAC/C,IAAA,CAAC;wGAvEU,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAR,QAAQ,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,KAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECXrB,kYASA,EAAA,MAAA,EAAA,CAAA,iQAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDHY,YAAY,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAKX,QAAQ,EAAA,UAAA,EAAA,CAAA;kBARpB,SAAS;+BACE,WAAW,EAAA,UAAA,EACT,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,CAAC,EAAA,eAAA,EAGN,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,kYAAA,EAAA,MAAA,EAAA,CAAA,iQAAA,CAAA,EAAA;8BAGpB,GAAG,EAAA,CAAA;sBAA7B,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBAChB,IAAI,EAAA,CAAA;sBAAZ;gBACQ,IAAI,EAAA,CAAA;sBAAZ;;;AEdH;;AAEG;;;;"}

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

@@ -1,108 +1,118 @@
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, booleanAttribute, EventEmitter, computed, Output, ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
-import * as i1 from '@angular/material/tooltip';
+import * as i2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
 /* eslint-disable @angular-eslint/no-input-rename */
 class SdBadge {
     defaultIcon = 'fiber_manual_record';
-    type = 'icon';
-    set _type(type) {
-        this.type = type || 'icon';
-    }
-    color = 'secondary';
-    set _color(color) {
-        this.color = color || 'secondary';
-    }
-    // Hỗ trợ: <sd-button secondary> hoặc <sd-button [secondary]="condition">
-    set primary(value) {
-        if (value === '' || value) {
-            this.color = 'primary';
-        }
-    }
-    set secondary(value) {
-        // Nếu value là '' (viết tắt <sd-button secondary>) hoặc true
-        if (value === '' || value) {
-            this.color = 'secondary';
-        }
-    }
-    set success(value) {
-        // Nếu value là '' (viết tắt <sd-button secondary>) hoặc true
-        if (value === '' || value) {
-            this.color = 'success';
-        }
-    }
-    set info(value) {
-        // Nếu value là '' (viết tắt <sd-button secondary>) hoặc true
-        if (value === '' || value) {
-            this.color = 'info';
-        }
-    }
-    set warning(value) {
-        // Nếu value là '' (viết tắt <sd-button secondary>) hoặc true
-        if (value === '' || value) {
-            this.color = 'warning';
-        }
-    }
-    set error(value) {
-        // Nếu value là '' (viết tắt <sd-button secondary>) hoặc true
-        if (value === '' || value) {
-            this.color = 'error';
-        }
-    }
-    fontSet = 'material-icons';
-    set _fontSet(fontSet) {
-        this.fontSet = fontSet || 'material-icons';
-    }
-    title;
-    description;
-    tooltip;
-    icon;
-    size = 'sm';
-    sdClick = new EventEmitter();
+    // ==========================================
+    // 1. SIGNAL INPUTS
+    // ==========================================
+    type = input('icon', {
+        transform: (value) => value || 'icon'
+    });
+    color = input('secondary', {
+        transform: (value) => value || 'secondary'
+    });
+    primary = input(false, { transform: booleanAttribute });
+    secondary = input(false, { transform: booleanAttribute });
+    success = input(false, { transform: booleanAttribute });
+    info = input(false, { transform: booleanAttribute });
+    warning = input(false, { transform: booleanAttribute });
+    error = input(false, { transform: booleanAttribute });
+    fontSet = input('material-icons', {
+        transform: (value) => value || 'material-icons'
+    });
+    title = input();
+    description = input();
+    tooltip = input();
+    icon = input();
+    size = input('sm', {
+        transform: (value) => value || 'sm'
+    });
+    // ==========================================
+    // 2. OUTPUT 
+    // ==========================================
+    click = new EventEmitter();
     onClick = (event) => {
-        this.sdClick.emit(event);
+        event.stopPropagation();
+        this.click.emit(event);
     };
+    // ==========================================
+    // 3. COMPUTED STATE 
+    // ==========================================
+    effectiveColor = computed(() => {
+        if (this.primary())
+            return 'primary';
+        if (this.secondary())
+            return 'secondary';
+        if (this.success())
+            return 'success';
+        if (this.info())
+            return 'info';
+        if (this.warning())
+            return 'warning';
+        if (this.error())
+            return 'error';
+        return this.color();
+    });
+    baseColorClasses = computed(() => {
+        const c = this.effectiveColor();
+        return {
+            'c-primary': c === 'primary',
+            'c-secondary': c === 'secondary',
+            'c-info': c === 'info',
+            'c-success': c === 'success',
+            'c-warning': c === 'warning',
+            'c-error': c === 'error',
+        };
+    });
+    iconColorClasses = computed(() => {
+        const c = this.effectiveColor();
+        return {
+            'c-primary': c === 'primary',
+            'c-black400': c === 'secondary',
+            'c-info': c === 'info',
+            'c-success': c === 'success',
+            'c-warning': c === 'warning',
+            'c-error': c === 'error',
+        };
+    });
+    iconSizeAndFontClasses = computed(() => {
+        const s = this.size();
+        const f = this.fontSet();
+        return {
+            'c-xs': s === 'xs',
+            'c-sm': s === 'sm',
+            'c-md': s === 'md',
+            'c-lg': s === 'lg',
+            'material-icons': f === 'material-icons',
+            'material-icons-outlined': f === 'material-icons-outlined',
+            'material-icons-round': f === 'material-icons-round',
+            'material-icons-sharp': f === 'material-icons-sharp'
+        };
+    });
+    // GỘP CLASS CHO BADGE TYPE = 'TAG'
+    tagIconCombinedClasses = computed(() => ({
+        ...this.iconSizeAndFontClasses(),
+        ...this.baseColorClasses()
+    }));
+    // GỘP CLASS CHO BADGE TYPE = 'ICON'
+    iconCombinedClasses = computed(() => ({
+        ...this.iconSizeAndFontClasses(),
+        ...this.iconColorClasses()
+    }));
     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: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, secondary: { classPropertyName: "secondary", publicName: "secondary", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, fontSet: { classPropertyName: "fontSet", publicName: "fontSet", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "@let badgeType = type();\r\n@let tt = tooltip();\r\n@let titleText = title();\r\n@let descText = description();\r\n@let iconName = icon() || defaultIcon;\r\n@let isPointer = click.observed;\r\n\r\n@if (badgeType === 'round') {\r\n  <div\r\n    class=\"c-badge\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tt || ''\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [ngClass]=\"baseColorClasses()\"\r\n    [class.pointer]=\"isPointer\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    {{ titleText }}\r\n  </div>\r\n} @else if (badgeType === 'tag') {\r\n  <div\r\n    class=\"c-badge c-badge--tag\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tt || ''\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [ngClass]=\"baseColorClasses()\"\r\n    [class.pointer]=\"isPointer\"\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 class=\"c-material-icon mr-4\" [ngClass]=\"tagIconCombinedClasses()\">\r\n          {{ iconName }}\r\n        </span>\r\n      }\r\n      <div class=\"d-flex flex-column align-items-start\">\r\n        <span class=\"T14R c-badge-title\">{{ titleText }}</span>\r\n        @if (descText) {\r\n          <span class=\"T12R c-badge-description\">{{ descText }}</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]=\"tt || ''\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-badge-icon]=\"badgeType === 'icon'\"\r\n    [class.pointer]=\"isPointer\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      <span class=\"c-material-icon mr-4\" [ngClass]=\"iconCombinedClasses()\"> \r\n        {{ iconName }} \r\n      </span>\r\n      <div class=\"d-flex flex-column\">\r\n        <span class=\"T14R c-badge-title\">{{ titleText }}</span>\r\n        @if (descText) {\r\n          <span class=\"T10R c-badge-description\">{{ descText }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.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"] }]
-        }], propDecorators: { _type: [{
-                type: Input,
-                args: ['type']
-            }], _color: [{
-                type: Input,
-                args: ['color']
-            }], primary: [{
-                type: Input
-            }], secondary: [{
-                type: Input
-            }], success: [{
-                type: Input
-            }], info: [{
-                type: Input
-            }], warning: [{
-                type: Input
-            }], error: [{
-                type: Input
-            }], _fontSet: [{
-                type: Input,
-                args: ['fontSet']
-            }], title: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], tooltip: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], sdClick: [{
+            args: [{ selector: 'sd-badge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, MatTooltipModule], template: "@let badgeType = type();\r\n@let tt = tooltip();\r\n@let titleText = title();\r\n@let descText = description();\r\n@let iconName = icon() || defaultIcon;\r\n@let isPointer = click.observed;\r\n\r\n@if (badgeType === 'round') {\r\n  <div\r\n    class=\"c-badge\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tt || ''\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [ngClass]=\"baseColorClasses()\"\r\n    [class.pointer]=\"isPointer\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    {{ titleText }}\r\n  </div>\r\n} @else if (badgeType === 'tag') {\r\n  <div\r\n    class=\"c-badge c-badge--tag\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tt || ''\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [ngClass]=\"baseColorClasses()\"\r\n    [class.pointer]=\"isPointer\"\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 class=\"c-material-icon mr-4\" [ngClass]=\"tagIconCombinedClasses()\">\r\n          {{ iconName }}\r\n        </span>\r\n      }\r\n      <div class=\"d-flex flex-column align-items-start\">\r\n        <span class=\"T14R c-badge-title\">{{ titleText }}</span>\r\n        @if (descText) {\r\n          <span class=\"T12R c-badge-description\">{{ descText }}</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]=\"tt || ''\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-badge-icon]=\"badgeType === 'icon'\"\r\n    [class.pointer]=\"isPointer\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      <span class=\"c-material-icon mr-4\" [ngClass]=\"iconCombinedClasses()\"> \r\n        {{ iconName }} \r\n      </span>\r\n      <div class=\"d-flex flex-column\">\r\n        <span class=\"T14R c-badge-title\">{{ titleText }}</span>\r\n        @if (descText) {\r\n          <span class=\"T10R c-badge-description\">{{ descText }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\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: { click: [{
                 type: Output
             }] } });