@sd-angular/core 19.0.49 → 19.0.51

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

@@ -4,6 +4,8 @@ import { MaterialIconFontSet } from '@sd-angular/core/utilities/models';
 import * as i0 from "@angular/core";
 export type SdBadgeType = 'tag' | 'round' | 'icon';
 export declare class SdBadge {
+    #private;
+    /** Glyph mặc định trước 19.0.51; type icon không có icon giờ vẽ chấm CSS. Giữ lại vì là property công khai. */
     defaultIcon: string;
     type: import("@angular/core").InputSignalWithTransform<SdBadgeType, SdBadgeType | null | undefined>;
     color: import("@angular/core").InputSignalWithTransform<Color, Color | null | undefined>;
@@ -21,6 +23,11 @@ export declare class SdBadge {
     size: import("@angular/core").InputSignalWithTransform<Size, Size | null | undefined>;
     click: EventEmitter<Event>;
     onClick: (event: Event) => void;
+    private readonly titleRef;
+    /** Đo lúc hover/focus xem title có bị cắt không; chỉ khi bị cắt (hoặc có `tooltip`) badge mới có tooltip. */
+    measureTruncation: () => void;
+    /** Chữ của tooltip: `tooltip` nếu có; nếu không thì title đầy đủ khi title đang bị cắt; ngược lại rỗng. */
+    tooltipText: import("@angular/core").Signal<string>;
     effectiveColor: import("@angular/core").Signal<Color>;
     baseColorClasses: import("@angular/core").Signal<{
         'c-primary': boolean;
@@ -32,7 +39,7 @@ export declare class SdBadge {
     }>;
     iconColorClasses: import("@angular/core").Signal<{
         'c-primary': boolean;
-        'c-black400': boolean;
+        'c-secondary': boolean;
         'c-info': boolean;
         'c-success': boolean;
         'c-warning': boolean;
@@ -80,7 +87,7 @@ export declare class SdBadge {
     }>;
     iconCombinedClasses: import("@angular/core").Signal<{
         'c-primary': boolean;
-        'c-black400': boolean;
+        'c-secondary': boolean;
         'c-info': boolean;
         'c-success': boolean;
         'c-warning': boolean;

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

@@ -18,6 +18,15 @@ export declare class SdModal {
     modalClass: import("@angular/core").InputSignalWithTransform<string | Record<string, boolean> | string[], string | Record<string, boolean> | string[] | null | undefined>;
     lazyLoadContent: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     hideClose: import("@angular/core").InputSignalWithTransform<boolean, boolean | "">;
+    /**
+     * Cho phép đóng bằng cách bấm nền hoặc phím Esc. Không truyền (`undefined`/`null`) thì hành vi theo
+     * `disableBackdropClose`. Khi được truyền, cờ này quyết định. Attribute không giá trị = `true`.
+     */
+    enableBackdropClose: import("@angular/core").InputSignalWithTransform<boolean | undefined, boolean | "" | null | undefined>;
+    /**
+     * Chặn đóng bằng nền và phím Esc. Mặc định `true` để giữ tương thích.
+     * @deprecated Dùng `enableBackdropClose` (nghĩa ngược lại). Cờ này chỉ có hiệu lực khi không truyền `enableBackdropClose`.
+     */
     disableBackdropClose: import("@angular/core").InputSignalWithTransform<boolean, boolean | "">;
     sdClosed: import("@angular/core").OutputEmitterRef<void>;
     isOpened: import("@angular/core").WritableSignal<boolean>;
@@ -26,5 +35,5 @@ export declare class SdModal {
     open: () => void;
     close: () => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdModal, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdModal, "sd-modal", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; "modalClass": { "alias": "modalClass"; "required": false; "isSignal": true; }; "lazyLoadContent": { "alias": "lazyLoadContent"; "required": false; "isSignal": true; }; "hideClose": { "alias": "hideClose"; "required": false; "isSignal": true; }; "disableBackdropClose": { "alias": "disableBackdropClose"; "required": false; "isSignal": true; }; }, { "sdClosed": "sdClosed"; }, never, ["[sdHeaderLeft]", "[sdHeaderRight]", "[sdHeader]", "*", "[sdFooterLeft]", "[sdFooterRight]", "[sdFooter]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdModal, "sd-modal", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; "modalClass": { "alias": "modalClass"; "required": false; "isSignal": true; }; "lazyLoadContent": { "alias": "lazyLoadContent"; "required": false; "isSignal": true; }; "hideClose": { "alias": "hideClose"; "required": false; "isSignal": true; }; "enableBackdropClose": { "alias": "enableBackdropClose"; "required": false; "isSignal": true; }; "disableBackdropClose": { "alias": "disableBackdropClose"; "required": false; "isSignal": true; }; }, { "sdClosed": "sdClosed"; }, never, ["[sdHeaderLeft]", "[sdHeaderRight]", "[sdHeader]", "*", "[sdFooterLeft]", "[sdFooterRight]", "[sdFooter]"], true, never>;
 }

package/directives/src/sd-scroll-pointer.service.d.ts

@@ -0,0 +1,18 @@
+import { Signal } from '@angular/core';
+import * as i0 from "@angular/core";
+/** Thiết bị khớp media query này được coi là màn hình cảm ứng: cuộn ngang luôn bật, không phụ thuộc hover. */
+export declare const SD_SCROLL_TOUCH_MEDIA_QUERY = "(hover: none), (any-pointer: coarse)";
+/**
+ * Nội bộ của `SdScrollDirective` (không export khỏi entry point `directives`).
+ *
+ * why: mỗi `sdScroll` tự gọi `matchMedia` thì trang có N bảng sẽ có N listener `change`. Service root giữ đúng
+ * một `MediaQueryList` và một listener cho cả ứng dụng; directive chỉ đọc signal `touch`.
+ */
+export declare class SdScrollPointerService {
+    #private;
+    /** `true` khi thiết bị khớp `SD_SCROLL_TOUCH_MEDIA_QUERY`; `false` khi không khớp hoặc không có `matchMedia` (SSR, test). */
+    readonly touch: Signal<boolean>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdScrollPointerService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SdScrollPointerService>;
+}

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

@@ -4,9 +4,11 @@ export declare class SdScrollDirective implements OnInit {
     #private;
     private elementRef;
     private renderer;
+    constructor(elementRef: ElementRef, renderer: Renderer2);
+    /** Chế độ chuột: hiện thanh cuộn ngang khi con trỏ vào host (gọi từ `mouseenter`). Không làm gì trên thiết bị cảm ứng. */
     onMouseOver(): void;
+    /** Chế độ chuột: ẩn thanh cuộn ngang khi con trỏ rời host (gọi từ `mouseleave`). Không làm gì trên thiết bị cảm ứng. */
     onMouseOut(): void;
-    constructor(elementRef: ElementRef, renderer: Renderer2);
     ngOnInit(): void;
     scrollTop: () => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdScrollDirective, never>;

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

@@ -1,13 +1,12 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, EventEmitter, computed, Output, ChangeDetectionStrategy, Component } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-import * as i2 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { input, booleanAttribute, EventEmitter, viewChild, signal, computed, Output, ChangeDetectionStrategy, Component } from '@angular/core';
+import { SdTooltipDirective } from '@sd-angular/core/directives';
 
 /* eslint-disable @angular-eslint/no-input-rename */
 class SdBadge {
+    /** Glyph mặc định trước 19.0.51; type icon không có icon giờ vẽ chấm CSS. Giữ lại vì là property công khai. */
     defaultIcon = 'fiber_manual_record';
     // ==========================================
     // 1. SIGNAL INPUTS
@@ -43,7 +42,29 @@ class SdBadge {
         this.click.emit(event);
     };
     // ==========================================
-    // 3. COMPUTED STATE
+    // 3. TOOLTIP
+    // ==========================================
+    titleRef = viewChild('titleEl');
+    #truncated = signal(false);
+    /** Đo lúc hover/focus xem title có bị cắt không; chỉ khi bị cắt (hoặc có `tooltip`) badge mới có tooltip. */
+    // why: đo theo sự kiện thay vì ResizeObserver — bảng có hàng trăm badge, phần lớn không bao giờ được rê chuột.
+    // `[sdTooltip]` chờ một nhịp rồi mới đọc nội dung, nên giá trị đo ở đây đã có mặt ngay lần rê đầu.
+    measureTruncation = () => {
+        const el = this.titleRef()?.nativeElement;
+        this.#truncated.set(!!el && el.scrollWidth > el.clientWidth);
+    };
+    /** Chữ của tooltip: `tooltip` nếu có; nếu không thì title đầy đủ khi title đang bị cắt; ngược lại rỗng. */
+    tooltipText = computed(() => {
+        const tooltip = this.tooltip()?.trim();
+        if (tooltip)
+            return tooltip;
+        const title = this.title();
+        if (title === undefined || title === null)
+            return '';
+        return this.#truncated() ? String(title) : '';
+    });
+    // ==========================================
+    // 4. COMPUTED STATE
     // ==========================================
     effectiveColor = computed(() => {
         if (this.primary())
@@ -71,17 +92,8 @@ class SdBadge {
             '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',
-        };
-    });
+    // why: icon của type icon dùng tông *-dark của màu hiệu lực như Core UI; secondary không còn rơi về black400.
+    iconColorClasses = computed(() => this.baseColorClasses());
     iconSizeAndFontClasses = computed(() => {
         const s = this.size();
         const f = this.fontSet();
@@ -95,8 +107,7 @@ class SdBadge {
             'material-icons-sharp': f === 'material-icons-sharp',
         };
     });
-    // why: size modifier cho container .c-badge (round + tag). Tách prefix c-badge--<size>
-    // để không đụng class .c-sm/.c-md/.c-lg đang dùng trên icon span.
+    // why: size modifier cho container. Tách prefix c-badge--<size> để không đụng class .c-sm/.c-md/.c-lg trên icon.
     containerSizeClasses = computed(() => {
         const s = this.size();
         return {
@@ -105,27 +116,33 @@ class SdBadge {
             'c-badge--lg': s === 'lg',
         };
     });
-    // GỘP CLASS CHO BADGE TYPE = 'TAG' (cũng dùng lại cho 'ROUND' khi có icon)
+    // GỘP CLASS CHO ICON CỦA ROUND/TAG
     tagIconCombinedClasses = computed(() => ({
         ...this.iconSizeAndFontClasses(),
         ...this.baseColorClasses(),
     }));
-    // GỘP CLASS CHO CONTAINER round/tag (color tint + size modifier)
+    // GỘP CLASS CHO CONTAINER (màu + size modifier), dùng cho cả ba type
     containerCombinedClasses = computed(() => ({
         ...this.baseColorClasses(),
         ...this.containerSizeClasses(),
     }));
-    // GỘP CLASS CHO BADGE TYPE = 'ICON'
+    // GỘP CLASS CHO ICON CỦA TYPE 'ICON'
     iconCombinedClasses = computed(() => ({
         ...this.iconSizeAndFontClasses(),
         ...this.iconColorClasses(),
     }));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", 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 _type = type();\n@let _tooltip = tooltip();\n@let _title = title();\n@let _description = description();\n@let iconName = icon() || defaultIcon;\n@let isPointer = click.observed;\n\n@if (_type === 'round') {\n  <div\n    class=\"c-badge\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipClass=\"sd-multiline-tooltip\"\n    [ngClass]=\"containerCombinedClasses()\"\n    [class.c-badge--has-icon]=\"!!icon()\"\n    [class.pointer]=\"isPointer\"\n    (click)=\"onClick($event)\"\n    aria-hidden=\"true\">\n    @if (icon()) {\n      <span class=\"c-material-icon\" [ngClass]=\"tagIconCombinedClasses()\">\n        {{ iconName }}\n      </span>\n    }\n    <span class=\"c-badge-title\">{{ _title }}</span>\n  </div>\n} @else if (_type === 'tag') {\n  <div\n    class=\"c-badge c-badge--tag\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipClass=\"sd-multiline-tooltip\"\n    [ngClass]=\"containerCombinedClasses()\"\n    [class.pointer]=\"isPointer\"\n    (click)=\"onClick($event)\"\n    aria-hidden=\"true\">\n    <div class=\"c-icon d-flex align-items-center\">\n      @if (icon()) {\n        <span class=\"c-material-icon mr-4\" [ngClass]=\"tagIconCombinedClasses()\">\n          {{ iconName }}\n        </span>\n      }\n      <div class=\"d-flex flex-column align-items-start\">\n        <span class=\"T14R c-badge-title\">{{ _title }}</span>\n        @if (_description) {\n          <span class=\"T12R c-badge-description\">{{ _description }}</span>\n        }\n      </div>\n    </div>\n  </div>\n} @else {\n  <div\n    class=\"d-flex\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipClass=\"sd-multiline-tooltip\"\n    [class.c-badge-icon]=\"_type === 'icon'\"\n    [class.pointer]=\"isPointer\"\n    (click)=\"onClick($event)\"\n    aria-hidden=\"true\">\n    <div class=\"c-icon d-flex align-items-center\">\n      <span class=\"c-material-icon\" [ngClass]=\"iconCombinedClasses()\">\n        {{ iconName }}\n      </span>\n      <div class=\"c-badge-copy\">\n        <span class=\"T14R c-badge-title\">{{ _title }}</span>\n        @if (_description) {\n          <span class=\"T10R c-badge-description\">{{ _description }}</span>\n        }\n      </div>\n    </div>\n  </div>\n}\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-badge--has-icon{display:inline-flex;align-items:center;gap:4px}.c-badge .c-material-icon{padding:0}.c-badge .c-material-icon.c-sm{font-size:16px;width:16px;height:16px;line-height:16px}.c-badge .c-material-icon.c-md{font-size:18px;width:18px;height:18px;line-height:18px}.c-badge .c-material-icon.c-lg{font-size:24px;width:24px;height:24px;line-height:24px}.c-badge.c-badge--sm:not(.c-badge--tag){padding:2px 10px}.c-badge.c-badge--md:not(.c-badge--tag){padding:4px 12px}.c-badge.c-badge--lg:not(.c-badge--tag){padding:6px 16px}.c-badge.c-badge--sm .c-badge-title{font-size:14px}.c-badge.c-badge--md .c-badge-title{font-size:16px}.c-badge.c-badge--lg .c-badge-title{font-size:18px}.c-badge.c-badge--sm .c-badge-description{font-size:12px}.c-badge.c-badge--md .c-badge-description{font-size:13px}.c-badge.c-badge--lg .c-badge-description{font-size:14px}.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-badge--sm{padding:1px 7px}.c-badge.c-badge--tag.c-badge--md{padding:2px 10px}.c-badge.c-badge--tag.c-badge--lg{padding:4px 12px}.c-badge-icon{display:inline-flex;align-items:center;min-width:0;max-width:100%}.c-badge-icon .c-icon{display:flex;align-items:center;gap:4px;min-width:0;max-width:100%}.c-badge-icon .c-material-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:0;line-height:1}.c-badge-icon .c-material-icon.c-sm{width:16px;height:16px;font-size:16px}.c-badge-icon .c-material-icon.c-md{width:18px;height:18px;font-size:18px}.c-badge-icon .c-material-icon.c-lg{width:24px;height:24px;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-icon .c-badge-copy{display:flex;flex-direction:column;justify-content:center;min-width:0;overflow-wrap:anywhere}.c-badge-icon .c-badge-title{line-height:20px}.c-badge-icon .c-badge-description{line-height:14px}.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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", 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" }, host: { listeners: { "mouseenter": "measureTruncation()", "focusin": "measureTruncation()" }, properties: { "attr.title": "null" } }, viewQueries: [{ propertyName: "titleRef", first: true, predicate: ["titleEl"], descendants: true, isSignal: true }], ngImport: i0, template: "@let _type = type();\n@let _title = title();\n@let _description = description();\n@let _icon = icon();\n@let _tooltipText = tooltipText();\n@let isPointer = click.observed;\n\n<!-- why: tooltip d\u00F9ng [sdTooltip] thay matTooltip \u2014 overlay ch\u1EC9 t\u1EA1o khi hi\u1EC7n, v\u00E0 ch\u1EC9 c\u00F3 n\u1ED9i dung khi c\u00F3 `tooltip`\n     ho\u1EB7c khi title b\u1ECB c\u1EAFt (\u0111o l\u00FAc hover/focus tr\u00EAn host). -->\n@if (_type === 'round') {\n  <div\n    class=\"c-badge\"\n    sdTooltipPosition=\"top\"\n    [sdTooltip]=\"_tooltipText ? tooltipContent : ''\"\n    [ngClass]=\"containerCombinedClasses()\"\n    [class.c-badge--has-icon]=\"!!_icon\"\n    [class.pointer]=\"isPointer\"\n    (click)=\"onClick($event)\"\n    aria-hidden=\"true\">\n    @if (_icon) {\n      <span class=\"c-material-icon\" [ngClass]=\"tagIconCombinedClasses()\">{{ _icon }}</span>\n    }\n    <span #titleEl class=\"c-badge-title\">{{ _title }}</span>\n  </div>\n} @else if (_type === 'tag') {\n  <div\n    class=\"c-badge c-badge--tag\"\n    sdTooltipPosition=\"top\"\n    [sdTooltip]=\"_tooltipText ? tooltipContent : ''\"\n    [ngClass]=\"containerCombinedClasses()\"\n    [class.c-badge--has-desc]=\"!!_description\"\n    [class.pointer]=\"isPointer\"\n    (click)=\"onClick($event)\"\n    aria-hidden=\"true\">\n    @if (_icon) {\n      <span class=\"c-badge-lead\">\n        <span class=\"c-material-icon\" [ngClass]=\"tagIconCombinedClasses()\">{{ _icon }}</span>\n      </span>\n    }\n    <span class=\"c-badge-copy\">\n      <span #titleEl class=\"c-badge-title\">{{ _title }}</span>\n      @if (_description) {\n        <span class=\"c-badge-description\">{{ _description }}</span>\n      }\n    </span>\n  </div>\n} @else {\n  <div\n    class=\"c-badge-icon\"\n    sdTooltipPosition=\"top\"\n    [sdTooltip]=\"_tooltipText ? tooltipContent : ''\"\n    [ngClass]=\"containerCombinedClasses()\"\n    [class.c-badge-icon--has-desc]=\"!!_description\"\n    [class.pointer]=\"isPointer\"\n    (click)=\"onClick($event)\"\n    aria-hidden=\"true\">\n    <!-- why: \u00F4 d\u1EABn \u0111\u1EA7u cao b\u1EB1ng line-height c\u1EE7a title n\u00EAn icon (ho\u1EB7c ch\u1EA5m) lu\u00F4n n\u1EB1m gi\u1EEFa D\u00D2NG \u0110\u1EA6U, k\u1EC3 c\u1EA3 khi c\u00F3\n         description. Kh\u00F4ng c\u00F3 icon th\u00EC v\u1EBD ch\u1EA5m b\u1EB1ng CSS thay cho glyph fiber_manual_record. -->\n    <span class=\"c-badge-lead\">\n      @if (_icon) {\n        <span class=\"c-material-icon\" [ngClass]=\"iconCombinedClasses()\">{{ _icon }}</span>\n      } @else {\n        <span class=\"c-badge-dot\" [ngClass]=\"baseColorClasses()\"></span>\n      }\n    </span>\n    <span class=\"c-badge-copy\">\n      <span #titleEl class=\"c-badge-title\">{{ _title }}</span>\n      @if (_description) {\n        <span class=\"c-badge-description\">{{ _description }}</span>\n      }\n    </span>\n  </div>\n}\n\n<ng-template #tooltipContent>\n  <span class=\"c-badge-tooltip\">{{ _tooltipText }}</span>\n</ng-template>\n", styles: [":host{display:inline-flex;vertical-align:middle;max-width:100%;min-width:0}.c-primary{--badge-tone: var(--sd-primary);--badge-tone-light: var(--sd-primary-light);--badge-tone-dark: var(--sd-primary-dark)}.c-secondary{--badge-tone: var(--sd-secondary);--badge-tone-light: var(--sd-secondary-light);--badge-tone-dark: var(--sd-secondary-dark)}.c-info{--badge-tone: var(--sd-info);--badge-tone-light: var(--sd-info-light);--badge-tone-dark: var(--sd-info-dark)}.c-success{--badge-tone: var(--sd-success);--badge-tone-light: var(--sd-success-light);--badge-tone-dark: var(--sd-success-dark)}.c-warning{--badge-tone: var(--sd-warning);--badge-tone-light: var(--sd-warning-light);--badge-tone-dark: var(--sd-warning-dark)}.c-error{--badge-tone: var(--sd-error);--badge-tone-light: var(--sd-error-light);--badge-tone-dark: var(--sd-error-dark)}.c-secondary{--badge-tone: var(--sd-badge-secondary, #5c6270);--badge-tone-dark: var(--sd-badge-secondary-dark, #4d525e)}.c-badge,.c-badge-icon{display:inline-flex;align-items:center;box-sizing:border-box;max-width:100%;min-width:0;vertical-align:middle}.c-badge-title,.c-badge-description{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.c-badge-copy{display:flex;flex-direction:column;min-width:0}.c-badge-lead{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.c-material-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:0;line-height:1;overflow:hidden}.c-badge-description{font-size:12px;line-height:16px;font-weight:400;color:var(--sd-text-secondary, var(--sd-black400))}.c-badge{height:var(--sd-badge-height-sm, 20px);gap:4px;padding:0 8px;border-radius:999px;background-color:var(--badge-tone-light);color:var(--badge-tone-dark);outline:1px solid transparent;outline-offset:-1px}.c-badge .c-badge-title{font-size:12px;line-height:16px;font-weight:var(--sd-badge-font-weight, 500)}.c-badge .c-material-icon{width:14px;height:14px;font-size:14px;color:var(--badge-tone-dark)}.c-badge.c-badge--has-icon{padding:0 8px 0 6px}.c-badge.c-badge--md{height:var(--sd-badge-height-md, 24px);padding:0 10px}.c-badge.c-badge--md .c-badge-title{font-size:13px;line-height:18px}.c-badge.c-badge--md .c-material-icon{width:16px;height:16px;font-size:16px}.c-badge.c-badge--lg{height:var(--sd-badge-height-lg, 28px);gap:6px;padding:0 12px}.c-badge.c-badge--lg .c-badge-title{font-size:14px;line-height:20px}.c-badge.c-badge--lg .c-material-icon{width:18px;height:18px;font-size:18px}.c-badge.c-badge--tag{padding:0 6px;border:1px solid color-mix(in srgb,var(--badge-tone-dark) 22%,var(--badge-tone-light));border-radius:var(--sd-badge-radius-tag, 4px);outline:none}.c-badge.c-badge--tag.c-badge--md{padding:0 8px;border-radius:calc(var(--sd-badge-radius-tag, 4px) + 2px)}.c-badge.c-badge--tag.c-badge--lg{padding:0 10px;border-radius:calc(var(--sd-badge-radius-tag, 4px) + 2px)}.c-badge.c-badge--tag.c-badge--has-desc{align-items:flex-start;height:auto;padding:4px 8px;border-radius:calc(var(--sd-badge-radius-tag, 4px) + 2px)}.c-badge.c-badge--tag.c-badge--has-desc .c-badge-title{font-size:13px;line-height:18px}.c-badge.c-badge--tag.c-badge--has-desc .c-badge-lead{height:18px}.c-badge.c-badge--md:not(.c-badge--has-desc) .c-badge-title{position:relative;top:1px}.c-badge-icon{gap:6px;min-height:var(--sd-badge-height-sm, 20px);color:var(--sd-text, var(--sd-black500));border-radius:4px}.c-badge-icon .c-badge-title{font-size:13px;line-height:18px;font-weight:400}.c-badge-icon .c-badge-lead{height:18px}.c-badge-icon .c-material-icon{width:16px;height:16px;font-size:16px;color:var(--badge-tone-dark)}.c-badge-icon.c-badge--md .c-badge-title,.c-badge-icon.c-badge--lg .c-badge-title{font-size:14px;line-height:20px}.c-badge-icon.c-badge--md .c-badge-lead,.c-badge-icon.c-badge--lg .c-badge-lead{height:20px}.c-badge-icon.c-badge--md .c-material-icon,.c-badge-icon.c-badge--lg .c-material-icon{width:18px;height:18px;font-size:18px}.c-badge-icon.c-badge--md{min-height:var(--sd-badge-height-md, 24px)}.c-badge-icon.c-badge--lg{min-height:var(--sd-badge-height-lg, 28px)}.c-badge-icon.c-badge-icon--has-desc{align-items:flex-start}.c-badge-dot{display:block;width:var(--sd-badge-dot-size, 8px);height:var(--sd-badge-dot-size, 8px);border-radius:50%;background-color:var(--badge-tone)}.c-badge-icon.c-badge--lg .c-badge-dot{width:var(--sd-badge-dot-size, 10px);height:var(--sd-badge-dot-size, 10px)}.c-badge.pointer{--badge-bg-hover: color-mix(in srgb, var(--badge-tone-dark) 6%, var(--badge-tone-light));--badge-bg-active: color-mix(in srgb, var(--badge-tone-dark) 10%, var(--badge-tone-light))}.c-badge-icon.pointer{--badge-bg-hover: color-mix(in srgb, var(--badge-tone-dark) 6%, transparent);--badge-bg-active: color-mix(in srgb, var(--badge-tone-dark) 10%, transparent)}.c-badge.pointer,.c-badge-icon.pointer{cursor:pointer;transition:background-color .12s ease}.c-badge.pointer:hover,.c-badge-icon.pointer:hover{background-color:var(--badge-bg-hover)}.c-badge.pointer:active,.c-badge-icon.pointer:active{background-color:var(--badge-bg-active)}@media(prefers-reduced-motion:reduce){.c-badge.pointer,.c-badge-icon.pointer{transition:none}}@media(forced-colors:active){.c-badge-dot{forced-color-adjust:none;background-color:CanvasText}}.c-badge-tooltip{white-space:pre-line}::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: "directive", type: SdTooltipDirective, selector: "[sdTooltip]", inputs: ["sdTooltip", "sdTooltipPosition", "sdTooltipDelay", "sdTooltipColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdBadge, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-badge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, MatTooltipModule], template: "@let _type = type();\n@let _tooltip = tooltip();\n@let _title = title();\n@let _description = description();\n@let iconName = icon() || defaultIcon;\n@let isPointer = click.observed;\n\n@if (_type === 'round') {\n  <div\n    class=\"c-badge\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipClass=\"sd-multiline-tooltip\"\n    [ngClass]=\"containerCombinedClasses()\"\n    [class.c-badge--has-icon]=\"!!icon()\"\n    [class.pointer]=\"isPointer\"\n    (click)=\"onClick($event)\"\n    aria-hidden=\"true\">\n    @if (icon()) {\n      <span class=\"c-material-icon\" [ngClass]=\"tagIconCombinedClasses()\">\n        {{ iconName }}\n      </span>\n    }\n    <span class=\"c-badge-title\">{{ _title }}</span>\n  </div>\n} @else if (_type === 'tag') {\n  <div\n    class=\"c-badge c-badge--tag\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipClass=\"sd-multiline-tooltip\"\n    [ngClass]=\"containerCombinedClasses()\"\n    [class.pointer]=\"isPointer\"\n    (click)=\"onClick($event)\"\n    aria-hidden=\"true\">\n    <div class=\"c-icon d-flex align-items-center\">\n      @if (icon()) {\n        <span class=\"c-material-icon mr-4\" [ngClass]=\"tagIconCombinedClasses()\">\n          {{ iconName }}\n        </span>\n      }\n      <div class=\"d-flex flex-column align-items-start\">\n        <span class=\"T14R c-badge-title\">{{ _title }}</span>\n        @if (_description) {\n          <span class=\"T12R c-badge-description\">{{ _description }}</span>\n        }\n      </div>\n    </div>\n  </div>\n} @else {\n  <div\n    class=\"d-flex\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipClass=\"sd-multiline-tooltip\"\n    [class.c-badge-icon]=\"_type === 'icon'\"\n    [class.pointer]=\"isPointer\"\n    (click)=\"onClick($event)\"\n    aria-hidden=\"true\">\n    <div class=\"c-icon d-flex align-items-center\">\n      <span class=\"c-material-icon\" [ngClass]=\"iconCombinedClasses()\">\n        {{ iconName }}\n      </span>\n      <div class=\"c-badge-copy\">\n        <span class=\"T14R c-badge-title\">{{ _title }}</span>\n        @if (_description) {\n          <span class=\"T10R c-badge-description\">{{ _description }}</span>\n        }\n      </div>\n    </div>\n  </div>\n}\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-badge--has-icon{display:inline-flex;align-items:center;gap:4px}.c-badge .c-material-icon{padding:0}.c-badge .c-material-icon.c-sm{font-size:16px;width:16px;height:16px;line-height:16px}.c-badge .c-material-icon.c-md{font-size:18px;width:18px;height:18px;line-height:18px}.c-badge .c-material-icon.c-lg{font-size:24px;width:24px;height:24px;line-height:24px}.c-badge.c-badge--sm:not(.c-badge--tag){padding:2px 10px}.c-badge.c-badge--md:not(.c-badge--tag){padding:4px 12px}.c-badge.c-badge--lg:not(.c-badge--tag){padding:6px 16px}.c-badge.c-badge--sm .c-badge-title{font-size:14px}.c-badge.c-badge--md .c-badge-title{font-size:16px}.c-badge.c-badge--lg .c-badge-title{font-size:18px}.c-badge.c-badge--sm .c-badge-description{font-size:12px}.c-badge.c-badge--md .c-badge-description{font-size:13px}.c-badge.c-badge--lg .c-badge-description{font-size:14px}.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-badge--sm{padding:1px 7px}.c-badge.c-badge--tag.c-badge--md{padding:2px 10px}.c-badge.c-badge--tag.c-badge--lg{padding:4px 12px}.c-badge-icon{display:inline-flex;align-items:center;min-width:0;max-width:100%}.c-badge-icon .c-icon{display:flex;align-items:center;gap:4px;min-width:0;max-width:100%}.c-badge-icon .c-material-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:0;line-height:1}.c-badge-icon .c-material-icon.c-sm{width:16px;height:16px;font-size:16px}.c-badge-icon .c-material-icon.c-md{width:18px;height:18px;font-size:18px}.c-badge-icon .c-material-icon.c-lg{width:24px;height:24px;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-icon .c-badge-copy{display:flex;flex-direction:column;justify-content:center;min-width:0;overflow-wrap:anywhere}.c-badge-icon .c-badge-title{line-height:20px}.c-badge-icon .c-badge-description{line-height:14px}.c-badge-description{color:var(--sd-black400)}::ng-deep .sd-multiline-tooltip{white-space:pre-line}\n"] }]
+            args: [{ selector: 'sd-badge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, SdTooltipDirective], host: {
+                        // why: `<sd-badge title="…">` để lại attribute title trên host, trình duyệt hiện tooltip riêng chồng lên
+                        // tooltip của badge. Giá trị vẫn tới input `title`.
+                        '[attr.title]': 'null',
+                        '(mouseenter)': 'measureTruncation()',
+                        '(focusin)': 'measureTruncation()',
+                    }, template: "@let _type = type();\n@let _title = title();\n@let _description = description();\n@let _icon = icon();\n@let _tooltipText = tooltipText();\n@let isPointer = click.observed;\n\n<!-- why: tooltip d\u00F9ng [sdTooltip] thay matTooltip \u2014 overlay ch\u1EC9 t\u1EA1o khi hi\u1EC7n, v\u00E0 ch\u1EC9 c\u00F3 n\u1ED9i dung khi c\u00F3 `tooltip`\n     ho\u1EB7c khi title b\u1ECB c\u1EAFt (\u0111o l\u00FAc hover/focus tr\u00EAn host). -->\n@if (_type === 'round') {\n  <div\n    class=\"c-badge\"\n    sdTooltipPosition=\"top\"\n    [sdTooltip]=\"_tooltipText ? tooltipContent : ''\"\n    [ngClass]=\"containerCombinedClasses()\"\n    [class.c-badge--has-icon]=\"!!_icon\"\n    [class.pointer]=\"isPointer\"\n    (click)=\"onClick($event)\"\n    aria-hidden=\"true\">\n    @if (_icon) {\n      <span class=\"c-material-icon\" [ngClass]=\"tagIconCombinedClasses()\">{{ _icon }}</span>\n    }\n    <span #titleEl class=\"c-badge-title\">{{ _title }}</span>\n  </div>\n} @else if (_type === 'tag') {\n  <div\n    class=\"c-badge c-badge--tag\"\n    sdTooltipPosition=\"top\"\n    [sdTooltip]=\"_tooltipText ? tooltipContent : ''\"\n    [ngClass]=\"containerCombinedClasses()\"\n    [class.c-badge--has-desc]=\"!!_description\"\n    [class.pointer]=\"isPointer\"\n    (click)=\"onClick($event)\"\n    aria-hidden=\"true\">\n    @if (_icon) {\n      <span class=\"c-badge-lead\">\n        <span class=\"c-material-icon\" [ngClass]=\"tagIconCombinedClasses()\">{{ _icon }}</span>\n      </span>\n    }\n    <span class=\"c-badge-copy\">\n      <span #titleEl class=\"c-badge-title\">{{ _title }}</span>\n      @if (_description) {\n        <span class=\"c-badge-description\">{{ _description }}</span>\n      }\n    </span>\n  </div>\n} @else {\n  <div\n    class=\"c-badge-icon\"\n    sdTooltipPosition=\"top\"\n    [sdTooltip]=\"_tooltipText ? tooltipContent : ''\"\n    [ngClass]=\"containerCombinedClasses()\"\n    [class.c-badge-icon--has-desc]=\"!!_description\"\n    [class.pointer]=\"isPointer\"\n    (click)=\"onClick($event)\"\n    aria-hidden=\"true\">\n    <!-- why: \u00F4 d\u1EABn \u0111\u1EA7u cao b\u1EB1ng line-height c\u1EE7a title n\u00EAn icon (ho\u1EB7c ch\u1EA5m) lu\u00F4n n\u1EB1m gi\u1EEFa D\u00D2NG \u0110\u1EA6U, k\u1EC3 c\u1EA3 khi c\u00F3\n         description. Kh\u00F4ng c\u00F3 icon th\u00EC v\u1EBD ch\u1EA5m b\u1EB1ng CSS thay cho glyph fiber_manual_record. -->\n    <span class=\"c-badge-lead\">\n      @if (_icon) {\n        <span class=\"c-material-icon\" [ngClass]=\"iconCombinedClasses()\">{{ _icon }}</span>\n      } @else {\n        <span class=\"c-badge-dot\" [ngClass]=\"baseColorClasses()\"></span>\n      }\n    </span>\n    <span class=\"c-badge-copy\">\n      <span #titleEl class=\"c-badge-title\">{{ _title }}</span>\n      @if (_description) {\n        <span class=\"c-badge-description\">{{ _description }}</span>\n      }\n    </span>\n  </div>\n}\n\n<ng-template #tooltipContent>\n  <span class=\"c-badge-tooltip\">{{ _tooltipText }}</span>\n</ng-template>\n", styles: [":host{display:inline-flex;vertical-align:middle;max-width:100%;min-width:0}.c-primary{--badge-tone: var(--sd-primary);--badge-tone-light: var(--sd-primary-light);--badge-tone-dark: var(--sd-primary-dark)}.c-secondary{--badge-tone: var(--sd-secondary);--badge-tone-light: var(--sd-secondary-light);--badge-tone-dark: var(--sd-secondary-dark)}.c-info{--badge-tone: var(--sd-info);--badge-tone-light: var(--sd-info-light);--badge-tone-dark: var(--sd-info-dark)}.c-success{--badge-tone: var(--sd-success);--badge-tone-light: var(--sd-success-light);--badge-tone-dark: var(--sd-success-dark)}.c-warning{--badge-tone: var(--sd-warning);--badge-tone-light: var(--sd-warning-light);--badge-tone-dark: var(--sd-warning-dark)}.c-error{--badge-tone: var(--sd-error);--badge-tone-light: var(--sd-error-light);--badge-tone-dark: var(--sd-error-dark)}.c-secondary{--badge-tone: var(--sd-badge-secondary, #5c6270);--badge-tone-dark: var(--sd-badge-secondary-dark, #4d525e)}.c-badge,.c-badge-icon{display:inline-flex;align-items:center;box-sizing:border-box;max-width:100%;min-width:0;vertical-align:middle}.c-badge-title,.c-badge-description{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.c-badge-copy{display:flex;flex-direction:column;min-width:0}.c-badge-lead{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.c-material-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:0;line-height:1;overflow:hidden}.c-badge-description{font-size:12px;line-height:16px;font-weight:400;color:var(--sd-text-secondary, var(--sd-black400))}.c-badge{height:var(--sd-badge-height-sm, 20px);gap:4px;padding:0 8px;border-radius:999px;background-color:var(--badge-tone-light);color:var(--badge-tone-dark);outline:1px solid transparent;outline-offset:-1px}.c-badge .c-badge-title{font-size:12px;line-height:16px;font-weight:var(--sd-badge-font-weight, 500)}.c-badge .c-material-icon{width:14px;height:14px;font-size:14px;color:var(--badge-tone-dark)}.c-badge.c-badge--has-icon{padding:0 8px 0 6px}.c-badge.c-badge--md{height:var(--sd-badge-height-md, 24px);padding:0 10px}.c-badge.c-badge--md .c-badge-title{font-size:13px;line-height:18px}.c-badge.c-badge--md .c-material-icon{width:16px;height:16px;font-size:16px}.c-badge.c-badge--lg{height:var(--sd-badge-height-lg, 28px);gap:6px;padding:0 12px}.c-badge.c-badge--lg .c-badge-title{font-size:14px;line-height:20px}.c-badge.c-badge--lg .c-material-icon{width:18px;height:18px;font-size:18px}.c-badge.c-badge--tag{padding:0 6px;border:1px solid color-mix(in srgb,var(--badge-tone-dark) 22%,var(--badge-tone-light));border-radius:var(--sd-badge-radius-tag, 4px);outline:none}.c-badge.c-badge--tag.c-badge--md{padding:0 8px;border-radius:calc(var(--sd-badge-radius-tag, 4px) + 2px)}.c-badge.c-badge--tag.c-badge--lg{padding:0 10px;border-radius:calc(var(--sd-badge-radius-tag, 4px) + 2px)}.c-badge.c-badge--tag.c-badge--has-desc{align-items:flex-start;height:auto;padding:4px 8px;border-radius:calc(var(--sd-badge-radius-tag, 4px) + 2px)}.c-badge.c-badge--tag.c-badge--has-desc .c-badge-title{font-size:13px;line-height:18px}.c-badge.c-badge--tag.c-badge--has-desc .c-badge-lead{height:18px}.c-badge.c-badge--md:not(.c-badge--has-desc) .c-badge-title{position:relative;top:1px}.c-badge-icon{gap:6px;min-height:var(--sd-badge-height-sm, 20px);color:var(--sd-text, var(--sd-black500));border-radius:4px}.c-badge-icon .c-badge-title{font-size:13px;line-height:18px;font-weight:400}.c-badge-icon .c-badge-lead{height:18px}.c-badge-icon .c-material-icon{width:16px;height:16px;font-size:16px;color:var(--badge-tone-dark)}.c-badge-icon.c-badge--md .c-badge-title,.c-badge-icon.c-badge--lg .c-badge-title{font-size:14px;line-height:20px}.c-badge-icon.c-badge--md .c-badge-lead,.c-badge-icon.c-badge--lg .c-badge-lead{height:20px}.c-badge-icon.c-badge--md .c-material-icon,.c-badge-icon.c-badge--lg .c-material-icon{width:18px;height:18px;font-size:18px}.c-badge-icon.c-badge--md{min-height:var(--sd-badge-height-md, 24px)}.c-badge-icon.c-badge--lg{min-height:var(--sd-badge-height-lg, 28px)}.c-badge-icon.c-badge-icon--has-desc{align-items:flex-start}.c-badge-dot{display:block;width:var(--sd-badge-dot-size, 8px);height:var(--sd-badge-dot-size, 8px);border-radius:50%;background-color:var(--badge-tone)}.c-badge-icon.c-badge--lg .c-badge-dot{width:var(--sd-badge-dot-size, 10px);height:var(--sd-badge-dot-size, 10px)}.c-badge.pointer{--badge-bg-hover: color-mix(in srgb, var(--badge-tone-dark) 6%, var(--badge-tone-light));--badge-bg-active: color-mix(in srgb, var(--badge-tone-dark) 10%, var(--badge-tone-light))}.c-badge-icon.pointer{--badge-bg-hover: color-mix(in srgb, var(--badge-tone-dark) 6%, transparent);--badge-bg-active: color-mix(in srgb, var(--badge-tone-dark) 10%, transparent)}.c-badge.pointer,.c-badge-icon.pointer{cursor:pointer;transition:background-color .12s ease}.c-badge.pointer:hover,.c-badge-icon.pointer:hover{background-color:var(--badge-bg-hover)}.c-badge.pointer:active,.c-badge-icon.pointer:active{background-color:var(--badge-bg-active)}@media(prefers-reduced-motion:reduce){.c-badge.pointer,.c-badge-icon.pointer{transition:none}}@media(forced-colors:active){.c-badge-dot{forced-color-adjust:none;background-color:CanvasText}}.c-badge-tooltip{white-space:pre-line}::ng-deep .sd-multiline-tooltip{white-space:pre-line}\n"] }]
         }], propDecorators: { click: [{
                 type: Output
             }] } });

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 */\nimport { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Output, booleanAttribute, computed, input } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { Color, Size } from '@sdcorejs/utils/models';\nimport { MaterialIconFontSet, DefaultMaterialIconFontSet } from '@sd-angular/core/utilities/models';\n\n// Export các Type để dùng chung\nexport type SdBadgeType = 'tag' | 'round' | 'icon';\n\n@Component({\n  selector: 'sd-badge',\n  templateUrl: './badge.component.html',\n  styleUrl: './badge.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [CommonModule, MatIconModule, MatTooltipModule],\n})\nexport class SdBadge {\n  defaultIcon = 'fiber_manual_record';\n\n  // ==========================================\n  // 1. SIGNAL INPUTS\n  // ==========================================\n  type = input<SdBadgeType, SdBadgeType | undefined | null>('icon', {\n    transform: value => value || 'icon',\n  });\n\n  color = input<Color, Color | undefined | null>('secondary', {\n    transform: value => value || 'secondary',\n  });\n\n  primary = input(false, { transform: booleanAttribute });\n  secondary = input(false, { transform: booleanAttribute });\n  success = input(false, { transform: booleanAttribute });\n  info = input(false, { transform: booleanAttribute });\n  warning = input(false, { transform: booleanAttribute });\n  error = input(false, { transform: booleanAttribute });\n\n  fontSet = input<MaterialIconFontSet, MaterialIconFontSet | undefined | null>('material-icons', {\n    transform: value => value || 'material-icons',\n  });\n\n  title = input<string | number | undefined | null>();\n  description = input<string | undefined | null>();\n  tooltip = input<string | undefined | null>();\n  icon = input<string | undefined | null>();\n\n  size = input<Size, Size | undefined | null>('sm', {\n    transform: value => value || 'sm',\n  });\n\n  // ==========================================\n  // 2. OUTPUT\n  // ==========================================\n  @Output() click = new EventEmitter<Event>();\n\n  onClick = (event: Event) => {\n    event.stopPropagation();\n    this.click.emit(event);\n  };\n\n  // ==========================================\n  // 3. COMPUTED STATE\n  // ==========================================\n\n  effectiveColor = computed(() => {\n    if (this.primary()) return 'primary';\n    if (this.secondary()) return 'secondary';\n    if (this.success()) return 'success';\n    if (this.info()) return 'info';\n    if (this.warning()) return 'warning';\n    if (this.error()) return 'error';\n    return this.color();\n  });\n\n  baseColorClasses = computed(() => {\n    const c = this.effectiveColor();\n    return {\n      'c-primary': c === 'primary',\n      'c-secondary': c === 'secondary',\n      'c-info': c === 'info',\n      'c-success': c === 'success',\n      'c-warning': c === 'warning',\n      'c-error': c === 'error',\n    };\n  });\n\n  iconColorClasses = computed(() => {\n    const c = this.effectiveColor();\n    return {\n      'c-primary': c === 'primary',\n      'c-black400': c === 'secondary',\n      'c-info': c === 'info',\n      'c-success': c === 'success',\n      'c-warning': c === 'warning',\n      'c-error': c === 'error',\n    };\n  });\n\n  iconSizeAndFontClasses = computed(() => {\n    const s = this.size();\n    const f = this.fontSet();\n    return {\n      'c-sm': s === 'sm',\n      'c-md': s === 'md',\n      'c-lg': s === 'lg',\n      'material-icons': f === 'material-icons',\n      'material-icons-outlined': f === 'material-icons-outlined',\n      'material-icons-round': f === 'material-icons-round',\n      'material-icons-sharp': f === 'material-icons-sharp',\n    };\n  });\n\n  // why: size modifier cho container .c-badge (round + tag). Tách prefix c-badge--<size>\n  // để không đụng class .c-sm/.c-md/.c-lg đang dùng trên icon span.\n  containerSizeClasses = computed(() => {\n    const s = this.size();\n    return {\n      'c-badge--sm': s === 'sm',\n      'c-badge--md': s === 'md',\n      'c-badge--lg': s === 'lg',\n    };\n  });\n\n  // GỘP CLASS CHO BADGE TYPE = 'TAG' (cũng dùng lại cho 'ROUND' khi có icon)\n  tagIconCombinedClasses = computed(() => ({\n    ...this.iconSizeAndFontClasses(),\n    ...this.baseColorClasses(),\n  }));\n\n  // GỘP CLASS CHO CONTAINER round/tag (color tint + size modifier)\n  containerCombinedClasses = computed(() => ({\n    ...this.baseColorClasses(),\n    ...this.containerSizeClasses(),\n  }));\n\n  // GỘP CLASS CHO BADGE TYPE = 'ICON'\n  iconCombinedClasses = computed(() => ({\n    ...this.iconSizeAndFontClasses(),\n    ...this.iconColorClasses(),\n  }));\n}\n","@let _type = type();\n@let _tooltip = tooltip();\n@let _title = title();\n@let _description = description();\n@let iconName = icon() || defaultIcon;\n@let isPointer = click.observed;\n\n@if (_type === 'round') {\n  <div\n    class=\"c-badge\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipClass=\"sd-multiline-tooltip\"\n    [ngClass]=\"containerCombinedClasses()\"\n    [class.c-badge--has-icon]=\"!!icon()\"\n    [class.pointer]=\"isPointer\"\n    (click)=\"onClick($event)\"\n    aria-hidden=\"true\">\n    @if (icon()) {\n      <span class=\"c-material-icon\" [ngClass]=\"tagIconCombinedClasses()\">\n        {{ iconName }}\n      </span>\n    }\n    <span class=\"c-badge-title\">{{ _title }}</span>\n  </div>\n} @else if (_type === 'tag') {\n  <div\n    class=\"c-badge c-badge--tag\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipClass=\"sd-multiline-tooltip\"\n    [ngClass]=\"containerCombinedClasses()\"\n    [class.pointer]=\"isPointer\"\n    (click)=\"onClick($event)\"\n    aria-hidden=\"true\">\n    <div class=\"c-icon d-flex align-items-center\">\n      @if (icon()) {\n        <span class=\"c-material-icon mr-4\" [ngClass]=\"tagIconCombinedClasses()\">\n          {{ iconName }}\n        </span>\n      }\n      <div class=\"d-flex flex-column align-items-start\">\n        <span class=\"T14R c-badge-title\">{{ _title }}</span>\n        @if (_description) {\n          <span class=\"T12R c-badge-description\">{{ _description }}</span>\n        }\n      </div>\n    </div>\n  </div>\n} @else {\n  <div\n    class=\"d-flex\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipClass=\"sd-multiline-tooltip\"\n    [class.c-badge-icon]=\"_type === 'icon'\"\n    [class.pointer]=\"isPointer\"\n    (click)=\"onClick($event)\"\n    aria-hidden=\"true\">\n    <div class=\"c-icon d-flex align-items-center\">\n      <span class=\"c-material-icon\" [ngClass]=\"iconCombinedClasses()\">\n        {{ iconName }}\n      </span>\n      <div class=\"c-badge-copy\">\n        <span class=\"T14R c-badge-title\">{{ _title }}</span>\n        @if (_description) {\n          <span class=\"T10R c-badge-description\">{{ _description }}</span>\n        }\n      </div>\n    </div>\n  </div>\n}\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 */\nimport { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  EventEmitter,\n  Output,\n  booleanAttribute,\n  computed,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { Color, Size } from '@sdcorejs/utils/models';\nimport { SdTooltipDirective } from '@sd-angular/core/directives';\nimport { MaterialIconFontSet, DefaultMaterialIconFontSet } from '@sd-angular/core/utilities/models';\n\n// Export các Type để dùng chung\nexport type SdBadgeType = 'tag' | 'round' | 'icon';\n\n@Component({\n  selector: 'sd-badge',\n  templateUrl: './badge.component.html',\n  styleUrl: './badge.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [CommonModule, SdTooltipDirective],\n  host: {\n    // why: `<sd-badge title=\"…\">` để lại attribute title trên host, trình duyệt hiện tooltip riêng chồng lên\n    // tooltip của badge. Giá trị vẫn tới input `title`.\n    '[attr.title]': 'null',\n    '(mouseenter)': 'measureTruncation()',\n    '(focusin)': 'measureTruncation()',\n  },\n})\nexport class SdBadge {\n  /** Glyph mặc định trước 19.0.51; type icon không có icon giờ vẽ chấm CSS. Giữ lại vì là property công khai. */\n  defaultIcon = 'fiber_manual_record';\n\n  // ==========================================\n  // 1. SIGNAL INPUTS\n  // ==========================================\n  type = input<SdBadgeType, SdBadgeType | undefined | null>('icon', {\n    transform: value => value || 'icon',\n  });\n\n  color = input<Color, Color | undefined | null>('secondary', {\n    transform: value => value || 'secondary',\n  });\n\n  primary = input(false, { transform: booleanAttribute });\n  secondary = input(false, { transform: booleanAttribute });\n  success = input(false, { transform: booleanAttribute });\n  info = input(false, { transform: booleanAttribute });\n  warning = input(false, { transform: booleanAttribute });\n  error = input(false, { transform: booleanAttribute });\n\n  fontSet = input<MaterialIconFontSet, MaterialIconFontSet | undefined | null>('material-icons', {\n    transform: value => value || 'material-icons',\n  });\n\n  title = input<string | number | undefined | null>();\n  description = input<string | undefined | null>();\n  tooltip = input<string | undefined | null>();\n  icon = input<string | undefined | null>();\n\n  size = input<Size, Size | undefined | null>('sm', {\n    transform: value => value || 'sm',\n  });\n\n  // ==========================================\n  // 2. OUTPUT\n  // ==========================================\n  @Output() click = new EventEmitter<Event>();\n\n  onClick = (event: Event) => {\n    event.stopPropagation();\n    this.click.emit(event);\n  };\n\n  // ==========================================\n  // 3. TOOLTIP\n  // ==========================================\n  private readonly titleRef = viewChild<ElementRef<HTMLElement>>('titleEl');\n  readonly #truncated = signal(false);\n\n  /** Đo lúc hover/focus xem title có bị cắt không; chỉ khi bị cắt (hoặc có `tooltip`) badge mới có tooltip. */\n  // why: đo theo sự kiện thay vì ResizeObserver — bảng có hàng trăm badge, phần lớn không bao giờ được rê chuột.\n  // `[sdTooltip]` chờ một nhịp rồi mới đọc nội dung, nên giá trị đo ở đây đã có mặt ngay lần rê đầu.\n  measureTruncation = (): void => {\n    const el = this.titleRef()?.nativeElement;\n    this.#truncated.set(!!el && el.scrollWidth > el.clientWidth);\n  };\n\n  /** Chữ của tooltip: `tooltip` nếu có; nếu không thì title đầy đủ khi title đang bị cắt; ngược lại rỗng. */\n  tooltipText = computed(() => {\n    const tooltip = this.tooltip()?.trim();\n    if (tooltip) return tooltip;\n    const title = this.title();\n    if (title === undefined || title === null) return '';\n    return this.#truncated() ? String(title) : '';\n  });\n\n  // ==========================================\n  // 4. COMPUTED STATE\n  // ==========================================\n\n  effectiveColor = computed(() => {\n    if (this.primary()) return 'primary';\n    if (this.secondary()) return 'secondary';\n    if (this.success()) return 'success';\n    if (this.info()) return 'info';\n    if (this.warning()) return 'warning';\n    if (this.error()) return 'error';\n    return this.color();\n  });\n\n  baseColorClasses = computed(() => {\n    const c = this.effectiveColor();\n    return {\n      'c-primary': c === 'primary',\n      'c-secondary': c === 'secondary',\n      'c-info': c === 'info',\n      'c-success': c === 'success',\n      'c-warning': c === 'warning',\n      'c-error': c === 'error',\n    };\n  });\n\n  // why: icon của type icon dùng tông *-dark của màu hiệu lực như Core UI; secondary không còn rơi về black400.\n  iconColorClasses = computed(() => this.baseColorClasses());\n\n  iconSizeAndFontClasses = computed(() => {\n    const s = this.size();\n    const f = this.fontSet();\n    return {\n      'c-sm': s === 'sm',\n      'c-md': s === 'md',\n      'c-lg': s === 'lg',\n      'material-icons': f === 'material-icons',\n      'material-icons-outlined': f === 'material-icons-outlined',\n      'material-icons-round': f === 'material-icons-round',\n      'material-icons-sharp': f === 'material-icons-sharp',\n    };\n  });\n\n  // why: size modifier cho container. Tách prefix c-badge--<size> để không đụng class .c-sm/.c-md/.c-lg trên icon.\n  containerSizeClasses = computed(() => {\n    const s = this.size();\n    return {\n      'c-badge--sm': s === 'sm',\n      'c-badge--md': s === 'md',\n      'c-badge--lg': s === 'lg',\n    };\n  });\n\n  // GỘP CLASS CHO ICON CỦA ROUND/TAG\n  tagIconCombinedClasses = computed(() => ({\n    ...this.iconSizeAndFontClasses(),\n    ...this.baseColorClasses(),\n  }));\n\n  // GỘP CLASS CHO CONTAINER (màu + size modifier), dùng cho cả ba type\n  containerCombinedClasses = computed(() => ({\n    ...this.baseColorClasses(),\n    ...this.containerSizeClasses(),\n  }));\n\n  // GỘP CLASS CHO ICON CỦA TYPE 'ICON'\n  iconCombinedClasses = computed(() => ({\n    ...this.iconSizeAndFontClasses(),\n    ...this.iconColorClasses(),\n  }));\n}\n","@let _type = type();\n@let _title = title();\n@let _description = description();\n@let _icon = icon();\n@let _tooltipText = tooltipText();\n@let isPointer = click.observed;\n\n<!-- why: tooltip dùng [sdTooltip] thay matTooltip — overlay chỉ tạo khi hiện, và chỉ có nội dung khi có `tooltip`\n     hoặc khi title bị cắt (đo lúc hover/focus trên host). -->\n@if (_type === 'round') {\n  <div\n    class=\"c-badge\"\n    sdTooltipPosition=\"top\"\n    [sdTooltip]=\"_tooltipText ? tooltipContent : ''\"\n    [ngClass]=\"containerCombinedClasses()\"\n    [class.c-badge--has-icon]=\"!!_icon\"\n    [class.pointer]=\"isPointer\"\n    (click)=\"onClick($event)\"\n    aria-hidden=\"true\">\n    @if (_icon) {\n      <span class=\"c-material-icon\" [ngClass]=\"tagIconCombinedClasses()\">{{ _icon }}</span>\n    }\n    <span #titleEl class=\"c-badge-title\">{{ _title }}</span>\n  </div>\n} @else if (_type === 'tag') {\n  <div\n    class=\"c-badge c-badge--tag\"\n    sdTooltipPosition=\"top\"\n    [sdTooltip]=\"_tooltipText ? tooltipContent : ''\"\n    [ngClass]=\"containerCombinedClasses()\"\n    [class.c-badge--has-desc]=\"!!_description\"\n    [class.pointer]=\"isPointer\"\n    (click)=\"onClick($event)\"\n    aria-hidden=\"true\">\n    @if (_icon) {\n      <span class=\"c-badge-lead\">\n        <span class=\"c-material-icon\" [ngClass]=\"tagIconCombinedClasses()\">{{ _icon }}</span>\n      </span>\n    }\n    <span class=\"c-badge-copy\">\n      <span #titleEl class=\"c-badge-title\">{{ _title }}</span>\n      @if (_description) {\n        <span class=\"c-badge-description\">{{ _description }}</span>\n      }\n    </span>\n  </div>\n} @else {\n  <div\n    class=\"c-badge-icon\"\n    sdTooltipPosition=\"top\"\n    [sdTooltip]=\"_tooltipText ? tooltipContent : ''\"\n    [ngClass]=\"containerCombinedClasses()\"\n    [class.c-badge-icon--has-desc]=\"!!_description\"\n    [class.pointer]=\"isPointer\"\n    (click)=\"onClick($event)\"\n    aria-hidden=\"true\">\n    <!-- why: ô dẫn đầu cao bằng line-height của title nên icon (hoặc chấm) luôn nằm giữa DÒNG ĐẦU, kể cả khi có\n         description. Không có icon thì vẽ chấm bằng CSS thay cho glyph fiber_manual_record. -->\n    <span class=\"c-badge-lead\">\n      @if (_icon) {\n        <span class=\"c-material-icon\" [ngClass]=\"iconCombinedClasses()\">{{ _icon }}</span>\n      } @else {\n        <span class=\"c-badge-dot\" [ngClass]=\"baseColorClasses()\"></span>\n      }\n    </span>\n    <span class=\"c-badge-copy\">\n      <span #titleEl class=\"c-badge-title\">{{ _title }}</span>\n      @if (_description) {\n        <span class=\"c-badge-description\">{{ _description }}</span>\n      }\n    </span>\n  </div>\n}\n\n<ng-template #tooltipContent>\n  <span class=\"c-badge-tooltip\">{{ _tooltipText }}</span>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}