@sd-angular/core 19.0.0-beta.39 → 19.0.0-beta.40

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

@@ -1,108 +1,119 @@
+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';
+import { DefaultMaterialIconFontSet } from '@sd-angular/core/utilities/models';
 
 /* 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(DefaultMaterialIconFontSet, {
+        transform: (value) => value || DefaultMaterialIconFontSet
+    });
+    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  <!-- \u0110\u1ED1i v\u1EDBi badge icon th\u00EC secondary s\u1EBD ch\u1EC9 d\u00F9ng m\u00E0u black400 -->\r\n  <div\r\n    class=\"d-flex\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tooltip\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-badge-icon]=\"type === 'icon'\"\r\n    [class.pointer]=\"!!sdClick.observers.length\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      <span\r\n        class=\"c-material-icon mr-4\"\r\n        [class]=\"{\r\n          'c-xs': size === 'xs',\r\n          'c-sm': size === 'sm',\r\n          'c-md': size === 'md',\r\n          'c-lg': size === 'lg',\r\n          'material-icons': fontSet === 'material-icons',\r\n          'material-icons-outlined': fontSet === 'material-icons-outlined',\r\n          'material-icons-round': fontSet === 'material-icons-round',\r\n          'material-icons-sharp': fontSet === 'material-icons-sharp'\r\n        }\"\r\n        [class.c-primary]=\"color === 'primary'\"\r\n        [class.c-black400]=\"color === 'secondary'\"\r\n        [class.c-info]=\"color === 'info'\"\r\n        [class.c-success]=\"color === 'success'\"\r\n        [class.c-warning]=\"color === 'warning'\"\r\n        [class.c-error]=\"color === 'error'\">\r\n        {{ icon || defaultIcon }}\r\n      </span>\r\n      <div class=\"d-flex flex-column\">\r\n        <span class=\"T14R c-badge-title\">{{ title }}</span>\r\n        @if (description) {\r\n          <span class=\"T10R c-badge-description\">{{ description }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-badge{border-radius:20px;padding:2px 10px;display:inline-block;text-align:center;overflow-wrap:break-word}.c-badge.c-primary{background:var(--sd-primary-light);color:var(--sd-primary)}.c-badge.c-primary.c-badge--tag{border:1px solid var(--sd-primary)}.c-badge.c-secondary{background:var(--sd-secondary-light);color:var(--sd-secondary)}.c-badge.c-secondary.c-badge--tag{border:1px solid var(--sd-secondary)}.c-badge.c-info{background:var(--sd-info-light);color:var(--sd-info)}.c-badge.c-info.c-badge--tag{border:1px solid var(--sd-info)}.c-badge.c-warning{background:var(--sd-warning-light);color:var(--sd-warning)}.c-badge.c-warning.c-badge--tag{border:1px solid var(--sd-warning)}.c-badge.c-success{background:var(--sd-success-light);color:var(--sd-success)}.c-badge.c-success.c-badge--tag{border:1px solid var(--sd-success)}.c-badge.c-error{background:var(--sd-error-light);color:var(--sd-error)}.c-badge.c-error.c-badge--tag{border:1px solid var(--sd-error)}.c-badge.c-badge--tag{border-radius:4px;padding:1px 7px}.c-badge.c-badge--tag .c-material-icon{padding:0}.c-badge.c-badge--tag .c-material-icon.c-xs,.c-badge.c-badge--tag .c-material-icon.c-sm,.c-badge.c-badge--tag .c-material-icon.c-md,.c-badge.c-badge--tag .c-material-icon.c-lg{line-height:20px}.c-badge-icon{min-width:50px}.c-badge-icon .c-material-icon{border-radius:50%;padding:2px 2px 2px 0}.c-badge-icon .c-material-icon.c-xs{width:18px;height:18px;font-size:14px}.c-badge-icon .c-material-icon.c-sm{width:20px;height:20px;font-size:16px}.c-badge-icon .c-material-icon.c-md{width:22px;height:22px;font-size:18px}.c-badge-icon .c-material-icon.c-lg{width:28px;height:28px;font-size:24px}.c-badge-icon .c-material-icon.c-primary{color:var(--sd-primary)}.c-badge-icon .c-material-icon.c-secondary{color:var(--sd-secondary)}.c-badge-icon .c-material-icon.c-black400{color:var(--sd-black400)}.c-badge-icon .c-material-icon.c-info{color:var(--sd-info)}.c-badge-icon .c-material-icon.c-success{color:var(--sd-success)}.c-badge-icon .c-material-icon.c-error{color:var(--sd-error)}.c-badge-icon .c-material-icon.c-warning{color:var(--sd-warning)}.c-badge-description{color:var(--sd-black400)}::ng-deep .sd-multiline-tooltip{white-space:pre-line}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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  <!-- \u0110\u1ED1i v\u1EDBi badge icon th\u00EC secondary s\u1EBD ch\u1EC9 d\u00F9ng m\u00E0u black400 -->\r\n  <div\r\n    class=\"d-flex\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tooltip\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-badge-icon]=\"type === 'icon'\"\r\n    [class.pointer]=\"!!sdClick.observers.length\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      <span\r\n        class=\"c-material-icon mr-4\"\r\n        [class]=\"{\r\n          'c-xs': size === 'xs',\r\n          'c-sm': size === 'sm',\r\n          'c-md': size === 'md',\r\n          'c-lg': size === 'lg',\r\n          'material-icons': fontSet === 'material-icons',\r\n          'material-icons-outlined': fontSet === 'material-icons-outlined',\r\n          'material-icons-round': fontSet === 'material-icons-round',\r\n          'material-icons-sharp': fontSet === 'material-icons-sharp'\r\n        }\"\r\n        [class.c-primary]=\"color === 'primary'\"\r\n        [class.c-black400]=\"color === 'secondary'\"\r\n        [class.c-info]=\"color === 'info'\"\r\n        [class.c-success]=\"color === 'success'\"\r\n        [class.c-warning]=\"color === 'warning'\"\r\n        [class.c-error]=\"color === 'error'\">\r\n        {{ icon || defaultIcon }}\r\n      </span>\r\n      <div class=\"d-flex flex-column\">\r\n        <span class=\"T14R c-badge-title\">{{ title }}</span>\r\n        @if (description) {\r\n          <span class=\"T10R c-badge-description\">{{ description }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-badge{border-radius:20px;padding:2px 10px;display:inline-block;text-align:center;overflow-wrap:break-word}.c-badge.c-primary{background:var(--sd-primary-light);color:var(--sd-primary)}.c-badge.c-primary.c-badge--tag{border:1px solid var(--sd-primary)}.c-badge.c-secondary{background:var(--sd-secondary-light);color:var(--sd-secondary)}.c-badge.c-secondary.c-badge--tag{border:1px solid var(--sd-secondary)}.c-badge.c-info{background:var(--sd-info-light);color:var(--sd-info)}.c-badge.c-info.c-badge--tag{border:1px solid var(--sd-info)}.c-badge.c-warning{background:var(--sd-warning-light);color:var(--sd-warning)}.c-badge.c-warning.c-badge--tag{border:1px solid var(--sd-warning)}.c-badge.c-success{background:var(--sd-success-light);color:var(--sd-success)}.c-badge.c-success.c-badge--tag{border:1px solid var(--sd-success)}.c-badge.c-error{background:var(--sd-error-light);color:var(--sd-error)}.c-badge.c-error.c-badge--tag{border:1px solid var(--sd-error)}.c-badge.c-badge--tag{border-radius:4px;padding:1px 7px}.c-badge.c-badge--tag .c-material-icon{padding:0}.c-badge.c-badge--tag .c-material-icon.c-xs,.c-badge.c-badge--tag .c-material-icon.c-sm,.c-badge.c-badge--tag .c-material-icon.c-md,.c-badge.c-badge--tag .c-material-icon.c-lg{line-height:20px}.c-badge-icon{min-width:50px}.c-badge-icon .c-material-icon{border-radius:50%;padding:2px 2px 2px 0}.c-badge-icon .c-material-icon.c-xs{width:18px;height:18px;font-size:14px}.c-badge-icon .c-material-icon.c-sm{width:20px;height:20px;font-size:16px}.c-badge-icon .c-material-icon.c-md{width:22px;height:22px;font-size:18px}.c-badge-icon .c-material-icon.c-lg{width:28px;height:28px;font-size:24px}.c-badge-icon .c-material-icon.c-primary{color:var(--sd-primary)}.c-badge-icon .c-material-icon.c-secondary{color:var(--sd-secondary)}.c-badge-icon .c-material-icon.c-black400{color:var(--sd-black400)}.c-badge-icon .c-material-icon.c-info{color:var(--sd-info)}.c-badge-icon .c-material-icon.c-success{color:var(--sd-success)}.c-badge-icon .c-material-icon.c-error{color:var(--sd-error)}.c-badge-icon .c-material-icon.c-warning{color:var(--sd-warning)}.c-badge-description{color:var(--sd-black400)}::ng-deep .sd-multiline-tooltip{white-space:pre-line}\n"] }]
-        }], propDecorators: { _type: [{
-                type: Input,
-                args: ['type']
-            }], _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
             }] } });
 

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

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

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

@@ -11,6 +11,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i5 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { SdBaseSecureComponent } from '@sd-angular/core/components/base';
+import { DefaultMaterialIconFontSet } from '@sd-angular/core/utilities/models';
 import { Subject, Subscription } from 'rxjs';
 import { throttleTime, filter } from 'rxjs/operators';
 
@@ -33,8 +34,8 @@ class SdButton extends SdBaseSecureComponent {
     size = input('sm', {
         transform: (value) => value || 'sm'
     });
-    fontSet = input('material-icons', {
-        transform: (value) => value || 'material-icons'
+    fontSet = input(DefaultMaterialIconFontSet, {
+        transform: (value) => value || DefaultMaterialIconFontSet
     });
     title = input(undefined);
     width = input(undefined);

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

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-components-button.mjs","sources":["../../../projects/sd-angular/components/button/src/button.component.ts","../../../projects/sd-angular/components/button/src/button.component.html","../../../projects/sd-angular/components/button/sd-angular-core-components-button.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\r\nimport { CommonModule } from '@angular/common';\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ElementRef,\r\n  OnDestroy,\r\n  OnInit,\r\n  booleanAttribute,\r\n  computed,\r\n  inject,\r\n  input,\r\n  output,\r\n} from '@angular/core';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { SdBaseSecureComponent } from '@sd-angular/core/components/base';\r\nimport { SdColor } from '@sd-angular/core/utilities/models';\r\nimport { Subject, Subscription } from 'rxjs';\r\nimport { filter, throttleTime } from 'rxjs/operators';\r\n\r\n// Export các Type ra ngoài để tái sử dụng ở file config/interface\r\nexport type SdButtonFontSet = 'material-icons' | 'material-icons-outlined' | 'material-icons-round' | 'material-icons-sharp' | 'material-symbols-outlined';\r\nexport type SdButtonType = 'fill' | 'light' | 'outline' | 'link';\r\nexport type SdButtonSize = 'sm' | 'md' | 'lg';\r\n\r\n@Component({\r\n  selector: 'sd-button',\r\n  templateUrl: './button.component.html',\r\n  styleUrls: ['./button.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  standalone: true,\r\n  imports: [CommonModule, MatIconModule, MatButtonModule, MatProgressSpinnerModule, MatTooltipModule],\r\n  host: {\r\n    '[class.sd-disabled]': 'disabled()',\r\n    '[class.sd-loading]': 'loading()',\r\n    '[attr.disabled]': 'disabled() ? \"true\" : null',\r\n  }\r\n})\r\nexport class SdButton extends SdBaseSecureComponent implements OnInit, OnDestroy {\r\n  // ==========================================\r\n  // 1. INJECTS\r\n  // ==========================================\r\n  private el = inject(ElementRef);\r\n\r\n  // ==========================================\r\n  // 2. SIGNAL INPUTS (Bảo mật 100% với Null/Undefined)\r\n  // ==========================================\r\n  autoIdInput = input<string | undefined | null>(undefined, { alias: 'autoId' });\r\n  \r\n  type = input<SdButtonType, SdButtonType | undefined | null>('light', {\r\n    transform: (value) => value || 'light'\r\n  });\r\n\r\n  color = input<SdColor, SdColor | undefined | null>('secondary', {\r\n    transform: (value) => value || 'secondary'\r\n  });\r\n\r\n  size = input<SdButtonSize, SdButtonSize | undefined | null>('sm', {\r\n    transform: (value) => value || 'sm'\r\n  });\r\n\r\n  fontSet = input<SdButtonFontSet, SdButtonFontSet | undefined | null>('material-icons', {\r\n    transform: (value) => value || 'material-icons'\r\n  });\r\n\r\n  title = input<string | undefined | null>(undefined);\r\n  width = input<string | undefined | null>(undefined);\r\n  tooltip = input<string | undefined | null>(undefined);\r\n  prefixIcon = input<string | undefined | null>(undefined);\r\n  suffixIcon = input<string | undefined | null>(undefined);\r\n\r\n  disabled = input(false, { transform: booleanAttribute });\r\n  loading = input(false, { transform: booleanAttribute });\r\n\r\n  // ==========================================\r\n  // 3. COMPUTED STATE\r\n  // ==========================================\r\n  autoId = computed(() => this.autoIdInput() ? `button-${this.autoIdInput()}` : undefined);\r\n  \r\n  buttonClasses = computed(() => ({\r\n    'c-square': (this.prefixIcon() || this.suffixIcon()) && !this.title(),\r\n    'c-sm': this.size() === 'sm',\r\n    'c-md': this.size() === 'md',\r\n    'c-lg': this.size() === 'lg',\r\n    'c-disabled': this.disabled(),\r\n  }));\r\n\r\n  // ==========================================\r\n  // 4. OUTPUT & RXJS STREAMS\r\n  // ==========================================\r\n  click = output<Event>();\r\n\r\n  #clickSubject = new Subject<Event>();\r\n  #subscription = new Subscription();\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    // Kỹ thuật Đánh chặn sự kiện (Capture Phase)\r\n    // Tóm sống mọi sự kiện click ngay khi nó vừa chạm vào component\r\n    this.el.nativeElement.addEventListener(\r\n      'click',\r\n      (event: Event) => {\r\n        if (this.disabled() || this.loading()) {\r\n          // Nghiền nát sự kiện, không cho Angular phát (click) ra component cha\r\n          event.preventDefault();\r\n          event.stopPropagation();\r\n          event.stopImmediatePropagation();\r\n        }\r\n      },\r\n      { capture: true }\r\n    );\r\n  }\r\n\r\n  ngOnInit() {\r\n    this.#subscription.add(\r\n      this.#clickSubject\r\n        .pipe(\r\n          throttleTime(300, undefined, { leading: true, trailing: false }),\r\n          filter(() => !this.disabled() && !this.loading())\r\n        )\r\n        .subscribe(event => {\r\n          this.click.emit(event);\r\n        })\r\n    );\r\n  }\r\n\r\n  // Nhận click từ thẻ button con bên trong\r\n  onInternalClick(event: Event) {\r\n    event.stopPropagation();\r\n    \r\n    if (this.disabled() || this.loading()) {\r\n      return;\r\n    }\r\n\r\n    this.#clickSubject.next(event);\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.#subscription.unsubscribe();\r\n  }\r\n}","@let btnType = type();\n@let btnLoad = loading();\n@let btnTitle = title();\n@let pIcon = prefixIcon();\n@let sIcon = suffixIcon();\n@let fSet = fontSet();\n\n@if (btnType === 'fill') {\n  <button\n    mat-flat-button\n    class=\"c-button c-fill\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"disabled()\"\n    [color]=\"color()\"\n    [attr.data-autoId]=\"autoId()\"\n    [style.width]=\"width()\"\n    [matTooltip]=\"tooltip() || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'light') {\n  <button\n    mat-flat-button\n    class=\"c-button c-light\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"disabled()\"\n    [color]=\"color()\"\n    [attr.data-autoId]=\"autoId()\"\n    [style.width]=\"width()\"\n    [matTooltip]=\"tooltip() || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'outline') {\n  <button\n    mat-stroked-button\n    class=\"c-button c-outline\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"disabled()\"\n    [color]=\"color()\"\n    [attr.data-autoId]=\"autoId()\"\n    [style.width]=\"width()\"\n    [matTooltip]=\"tooltip() || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'link') {\n  <button\n    mat-button\n    class=\"c-button c-link\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"disabled()\"\n    [color]=\"color()\"\n    [attr.data-autoId]=\"autoId()\"\n    [style.width]=\"width()\"\n    [matTooltip]=\"tooltip() || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n}\n\n<ng-template #contentTpl>\n  <div class=\"c-button-content-wrapper\">\n    @if (btnLoad) {\n      <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\n    } @else if (pIcon) {\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-prefix\">{{ pIcon }}</mat-icon>\n    }\n\n    @if (btnTitle) {\n      <span class=\"c-title\" [class.ml-8]=\"btnLoad || pIcon\" [class.mr-8]=\"sIcon && !btnLoad\">\n        {{ btnTitle }}\n      </span>\n    }\n\n    @if (sIcon && !btnLoad) {\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-suffix\">{{ sIcon }}</mat-icon>\n    }\n\n    @if (!btnTitle && !pIcon && !btnLoad && sIcon) {\n      <mat-icon [fontSet]=\"fSet\">{{ sIcon }}</mat-icon>\n    }\n  </div>\n</ng-template>\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-button.mjs","sources":["../../../projects/sd-angular/components/button/src/button.component.ts","../../../projects/sd-angular/components/button/src/button.component.html","../../../projects/sd-angular/components/button/sd-angular-core-components-button.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\r\nimport { CommonModule } from '@angular/common';\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ElementRef,\r\n  OnDestroy,\r\n  OnInit,\r\n  booleanAttribute,\r\n  computed,\r\n  inject,\r\n  input,\r\n  output,\r\n} from '@angular/core';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { SdBaseSecureComponent } from '@sd-angular/core/components/base';\r\nimport { DefaultMaterialIconFontSet, MaterialIconFontSet, SdColor } from '@sd-angular/core/utilities/models';\r\nimport { Subject, Subscription } from 'rxjs';\r\nimport { filter, throttleTime } from 'rxjs/operators';\r\n\r\n// Export các Type ra ngoài để tái sử dụng ở file config/interface\r\nexport type SdButtonType = 'fill' | 'light' | 'outline' | 'link';\r\nexport type SdButtonSize = 'sm' | 'md' | 'lg';\r\n\r\n@Component({\r\n  selector: 'sd-button',\r\n  templateUrl: './button.component.html',\r\n  styleUrls: ['./button.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  standalone: true,\r\n  imports: [CommonModule, MatIconModule, MatButtonModule, MatProgressSpinnerModule, MatTooltipModule],\r\n  host: {\r\n    '[class.sd-disabled]': 'disabled()',\r\n    '[class.sd-loading]': 'loading()',\r\n    '[attr.disabled]': 'disabled() ? \"true\" : null',\r\n  }\r\n})\r\nexport class SdButton extends SdBaseSecureComponent implements OnInit, OnDestroy {\r\n  // ==========================================\r\n  // 1. INJECTS\r\n  // ==========================================\r\n  private el = inject(ElementRef);\r\n\r\n  // ==========================================\r\n  // 2. SIGNAL INPUTS (Bảo mật 100% với Null/Undefined)\r\n  // ==========================================\r\n  autoIdInput = input<string | undefined | null>(undefined, { alias: 'autoId' });\r\n  \r\n  type = input<SdButtonType, SdButtonType | undefined | null>('light', {\r\n    transform: (value) => value || 'light'\r\n  });\r\n\r\n  color = input<SdColor, SdColor | undefined | null>('secondary', {\r\n    transform: (value) => value || 'secondary'\r\n  });\r\n\r\n  size = input<SdButtonSize, SdButtonSize | undefined | null>('sm', {\r\n    transform: (value) => value || 'sm'\r\n  });\r\n\r\n  fontSet = input<MaterialIconFontSet, MaterialIconFontSet | undefined | null>(DefaultMaterialIconFontSet, {\r\n    transform: (value) => value || DefaultMaterialIconFontSet\r\n  });\r\n\r\n  title = input<string | undefined | null>(undefined);\r\n  width = input<string | undefined | null>(undefined);\r\n  tooltip = input<string | undefined | null>(undefined);\r\n  prefixIcon = input<string | undefined | null>(undefined);\r\n  suffixIcon = input<string | undefined | null>(undefined);\r\n\r\n  disabled = input(false, { transform: booleanAttribute });\r\n  loading = input(false, { transform: booleanAttribute });\r\n\r\n  // ==========================================\r\n  // 3. COMPUTED STATE\r\n  // ==========================================\r\n  autoId = computed(() => this.autoIdInput() ? `button-${this.autoIdInput()}` : undefined);\r\n  \r\n  buttonClasses = computed(() => ({\r\n    'c-square': (this.prefixIcon() || this.suffixIcon()) && !this.title(),\r\n    'c-sm': this.size() === 'sm',\r\n    'c-md': this.size() === 'md',\r\n    'c-lg': this.size() === 'lg',\r\n    'c-disabled': this.disabled(),\r\n  }));\r\n\r\n  // ==========================================\r\n  // 4. OUTPUT & RXJS STREAMS\r\n  // ==========================================\r\n  click = output<Event>();\r\n\r\n  #clickSubject = new Subject<Event>();\r\n  #subscription = new Subscription();\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    // Kỹ thuật Đánh chặn sự kiện (Capture Phase)\r\n    // Tóm sống mọi sự kiện click ngay khi nó vừa chạm vào component\r\n    this.el.nativeElement.addEventListener(\r\n      'click',\r\n      (event: Event) => {\r\n        if (this.disabled() || this.loading()) {\r\n          // Nghiền nát sự kiện, không cho Angular phát (click) ra component cha\r\n          event.preventDefault();\r\n          event.stopPropagation();\r\n          event.stopImmediatePropagation();\r\n        }\r\n      },\r\n      { capture: true }\r\n    );\r\n  }\r\n\r\n  ngOnInit() {\r\n    this.#subscription.add(\r\n      this.#clickSubject\r\n        .pipe(\r\n          throttleTime(300, undefined, { leading: true, trailing: false }),\r\n          filter(() => !this.disabled() && !this.loading())\r\n        )\r\n        .subscribe(event => {\r\n          this.click.emit(event);\r\n        })\r\n    );\r\n  }\r\n\r\n  // Nhận click từ thẻ button con bên trong\r\n  onInternalClick(event: Event) {\r\n    event.stopPropagation();\r\n    \r\n    if (this.disabled() || this.loading()) {\r\n      return;\r\n    }\r\n\r\n    this.#clickSubject.next(event);\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.#subscription.unsubscribe();\r\n  }\r\n}","@let btnType = type();\n@let btnLoad = loading();\n@let btnTitle = title();\n@let pIcon = prefixIcon();\n@let sIcon = suffixIcon();\n@let fSet = fontSet();\n\n@if (btnType === 'fill') {\n  <button\n    mat-flat-button\n    class=\"c-button c-fill\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"disabled()\"\n    [color]=\"color()\"\n    [attr.data-autoId]=\"autoId()\"\n    [style.width]=\"width()\"\n    [matTooltip]=\"tooltip() || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'light') {\n  <button\n    mat-flat-button\n    class=\"c-button c-light\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"disabled()\"\n    [color]=\"color()\"\n    [attr.data-autoId]=\"autoId()\"\n    [style.width]=\"width()\"\n    [matTooltip]=\"tooltip() || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'outline') {\n  <button\n    mat-stroked-button\n    class=\"c-button c-outline\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"disabled()\"\n    [color]=\"color()\"\n    [attr.data-autoId]=\"autoId()\"\n    [style.width]=\"width()\"\n    [matTooltip]=\"tooltip() || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n} @else if (btnType === 'link') {\n  <button\n    mat-button\n    class=\"c-button c-link\"\n    [ngClass]=\"buttonClasses()\"\n    [disabled]=\"disabled()\"\n    [color]=\"color()\"\n    [attr.data-autoId]=\"autoId()\"\n    [style.width]=\"width()\"\n    [matTooltip]=\"tooltip() || ''\"\n    matTooltipPosition=\"above\"\n    (click)=\"onInternalClick($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n}\n\n<ng-template #contentTpl>\n  <div class=\"c-button-content-wrapper\">\n    @if (btnLoad) {\n      <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\n    } @else if (pIcon) {\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-prefix\">{{ pIcon }}</mat-icon>\n    }\n\n    @if (btnTitle) {\n      <span class=\"c-title\" [class.ml-8]=\"btnLoad || pIcon\" [class.mr-8]=\"sIcon && !btnLoad\">\n        {{ btnTitle }}\n      </span>\n    }\n\n    @if (sIcon && !btnLoad) {\n      <mat-icon [fontSet]=\"fSet\" class=\"c-icon-suffix\">{{ sIcon }}</mat-icon>\n    }\n\n    @if (!btnTitle && !pIcon && !btnLoad && sIcon) {\n      <mat-icon [fontSet]=\"fSet\">{{ sIcon }}</mat-icon>\n    }\n  </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -32,7 +32,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
 class SdHistoryItem {
     items = [];
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdHistoryItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdHistoryItem, isStandalone: true, selector: "sd-history", inputs: { items: "items" }, ngImport: i0, template: "<div class=\"sd-history\">\r\n  <div class=\"history-container\">\r\n    <div class=\"history-line\"></div>\r\n    <div *ngFor=\"let item of items; let i = index\" class=\"history-item\">\r\n      <div class=\"dot\"></div>\r\n      <div class=\"card\">\r\n        <div class=\"header\">\r\n          <div class=\"title-wrapper\">\r\n            <span class=\"title\">{{ item.title }}</span>\r\n            <span class=\"status\">\r\n                @if (item?.status) {\r\n                  <sd-badge\r\n                  [icon]=\"item.status?.icon\"\r\n                  [title]=\"item.status?.title\"\r\n                  [color]=\"item.status?.color\"></sd-badge>\r\n                }\r\n            </span>\r\n          </div>\r\n            <span class=\"date\">{{ item?.date | viewDateTime }}</span>\r\n        </div>\r\n        <div class=\"meta\">\r\n          @if (item?.actor) {\r\n            <span>B\u1EDFi <strong>&#64;{{ item.actor }}</strong></span>\r\n          }\r\n          @if (item?.source) {\r\n            <span> &#183; {{ item.source }}</span>\r\n          }\r\n        </div>\r\n        <div class=\"description\">\r\n          {{ item?.description }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".sd-history{padding:16px}.history-container{position:relative;padding-left:20px;font-size:14px;line-height:20px;min-width:470px;max-width:100%}.history-line{position:absolute;left:8px;top:0;bottom:0;width:2px;background-color:#94b0ff}.history-item{position:relative;margin-bottom:16px;padding-left:10px}.history-item .dot{position:absolute;left:-16px;top:12px;width:12px;height:12px;background-color:#94b0ff;border-radius:50%}.history-item .card{background:#fff;border-radius:6px;box-shadow:0 2px 4px #0000001a;padding:8px 8px 8px 16px}.history-item .card .header{display:flex;justify-content:space-between;align-items:center}.history-item .card .header .title-wrapper{display:flex;align-items:flex-start;padding-right:8px}.history-item .card .header .title{margin-right:8px;color:#757575}.history-item .card .header .status{display:flex;align-items:center}.history-item .card .header .status mat-icon{margin-right:4px}.history-item .card .header .date{color:#757575;font-size:12px;line-height:16px}.history-item .card .meta{color:#757575;margin-top:4px}.history-item .card .meta strong{color:#000}.history-item .card .description{margin-top:4px;color:#000;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SdBadge, selector: "sd-badge", inputs: ["type", "color", "primary", "secondary", "success", "info", "warning", "error", "fontSet", "title", "description", "tooltip", "icon", "size"], outputs: ["sdClick"] }, { kind: "pipe", type: ViewDateTimePipe, name: "viewDateTime" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdHistoryItem, isStandalone: true, selector: "sd-history", inputs: { items: "items" }, ngImport: i0, template: "<div class=\"sd-history\">\r\n  <div class=\"history-container\">\r\n    <div class=\"history-line\"></div>\r\n    <div *ngFor=\"let item of items; let i = index\" class=\"history-item\">\r\n      <div class=\"dot\"></div>\r\n      <div class=\"card\">\r\n        <div class=\"header\">\r\n          <div class=\"title-wrapper\">\r\n            <span class=\"title\">{{ item.title }}</span>\r\n            <span class=\"status\">\r\n                @if (item?.status) {\r\n                  <sd-badge\r\n                  [icon]=\"item.status?.icon\"\r\n                  [title]=\"item.status?.title\"\r\n                  [color]=\"item.status?.color\"></sd-badge>\r\n                }\r\n            </span>\r\n          </div>\r\n            <span class=\"date\">{{ item?.date | viewDateTime }}</span>\r\n        </div>\r\n        <div class=\"meta\">\r\n          @if (item?.actor) {\r\n            <span>B\u1EDFi <strong>&#64;{{ item.actor }}</strong></span>\r\n          }\r\n          @if (item?.source) {\r\n            <span> &#183; {{ item.source }}</span>\r\n          }\r\n        </div>\r\n        <div class=\"description\">\r\n          {{ item?.description }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".sd-history{padding:16px}.history-container{position:relative;padding-left:20px;font-size:14px;line-height:20px;min-width:470px;max-width:100%}.history-line{position:absolute;left:8px;top:0;bottom:0;width:2px;background-color:#94b0ff}.history-item{position:relative;margin-bottom:16px;padding-left:10px}.history-item .dot{position:absolute;left:-16px;top:12px;width:12px;height:12px;background-color:#94b0ff;border-radius:50%}.history-item .card{background:#fff;border-radius:6px;box-shadow:0 2px 4px #0000001a;padding:8px 8px 8px 16px}.history-item .card .header{display:flex;justify-content:space-between;align-items:center}.history-item .card .header .title-wrapper{display:flex;align-items:flex-start;padding-right:8px}.history-item .card .header .title{margin-right:8px;color:#757575}.history-item .card .header .status{display:flex;align-items:center}.history-item .card .header .status mat-icon{margin-right:4px}.history-item .card .header .date{color:#757575;font-size:12px;line-height:16px}.history-item .card .meta{color:#757575;margin-top:4px}.history-item .card .meta strong{color:#000}.history-item .card .description{margin-top:4px;color:#000;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SdBadge, selector: "sd-badge", inputs: ["type", "color", "primary", "secondary", "success", "info", "warning", "error", "fontSet", "title", "description", "tooltip", "icon", "size"], outputs: ["click"] }, { kind: "pipe", type: ViewDateTimePipe, name: "viewDateTime" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdHistoryItem, decorators: [{
             type: Component,

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

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-components-history.mjs","sources":["../../../projects/sd-angular/components/history/pipes/view-date.pipe.ts","../../../projects/sd-angular/components/history/src/history.component.ts","../../../projects/sd-angular/components/history/src/history.component.html","../../../projects/sd-angular/components/history/sd-angular-core-components-history.ts"],"sourcesContent":["import { Injectable, Pipe, PipeTransform } from '@angular/core';\r\nimport { DateUtilities, SD_EMPTY_STR } from '@sd-angular/core/utilities';\r\n\r\n@Pipe({\r\n  name: 'viewDateTime',\r\n  standalone: true,\r\n})\r\n@Injectable({\r\n  providedIn: 'root',\r\n})\r\nexport class ViewDateTimePipe implements PipeTransform {\r\n  transform(value: any): string {\r\n    if (!value || !DateUtilities.isDate(value)) {\r\n      return SD_EMPTY_STR;\r\n    }\r\n    return DateUtilities.toFormat(value, 'HH:mm dd/MM/yyyy');\r\n  }\r\n}\r\n","import { CommonModule } from '@angular/common';\r\nimport { Component, Input } from '@angular/core';\r\nimport { SdBadge } from '@sd-angular/core/components/badge';\r\nimport { SdHistoryItemType } from '../models/history.model';\r\nimport { ViewDateTimePipe } from '../pipes/view-date.pipe';\r\n\r\n@Component({\r\n  selector: 'sd-history',\r\n  imports: [CommonModule, SdBadge, ViewDateTimePipe],\r\n  templateUrl: './history.component.html',\r\n  styleUrl: './history.component.scss',\r\n})\r\nexport class SdHistoryItem {\r\n  @Input() items: SdHistoryItemType[] = [];\r\n}\r\n","<div class=\"sd-history\">\r\n  <div class=\"history-container\">\r\n    <div class=\"history-line\"></div>\r\n    <div *ngFor=\"let item of items; let i = index\" class=\"history-item\">\r\n      <div class=\"dot\"></div>\r\n      <div class=\"card\">\r\n        <div class=\"header\">\r\n          <div class=\"title-wrapper\">\r\n            <span class=\"title\">{{ item.title }}</span>\r\n            <span class=\"status\">\r\n                @if (item?.status) {\r\n                  <sd-badge\r\n                  [icon]=\"item.status?.icon\"\r\n                  [title]=\"item.status?.title\"\r\n                  [color]=\"item.status?.color\"></sd-badge>\r\n                }\r\n            </span>\r\n          </div>\r\n            <span class=\"date\">{{ item?.date | viewDateTime }}</span>\r\n        </div>\r\n        <div class=\"meta\">\r\n          @if (item?.actor) {\r\n            <span>Bởi <strong>&#64;{{ item.actor }}</strong></span>\r\n          }\r\n          @if (item?.source) {\r\n            <span> &#183; {{ item.source }}</span>\r\n          }\r\n        </div>\r\n        <div class=\"description\">\r\n          {{ item?.description }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;MAUa,gBAAgB,CAAA;AAC3B,IAAA,SAAS,CAAC,KAAU,EAAA;QAClB,IAAI,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;AAC1C,YAAA,OAAO,YAAY;QACrB;QACA,OAAO,aAAa,CAAC,QAAQ,CAAC,KAAK,EAAE,kBAAkB,CAAC;IAC1D;wGANW,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,IAAA,EAAA,CAAA;sGAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,IAAA,EAAA,cAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,cAFf,MAAM,EAAA,CAAA;;4FAEP,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAP5B,IAAI;AAAC,YAAA,IAAA,EAAA,CAAA;AACJ,oBAAA,IAAI,EAAE,cAAc;AACpB,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;kBACA,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;AACnB,iBAAA;;;MCGY,aAAa,CAAA;IACf,KAAK,GAAwB,EAAE;wGAD7B,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,aAAa,kGCZ1B,ouCAmCA,EAAA,MAAA,EAAA,CAAA,qvCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED3BY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,8NAAE,gBAAgB,EAAA,IAAA,EAAA,cAAA,EAAA,CAAA,EAAA,CAAA;;4FAItC,aAAa,EAAA,UAAA,EAAA,CAAA;kBANzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,WACb,CAAC,YAAY,EAAE,OAAO,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,ouCAAA,EAAA,MAAA,EAAA,CAAA,qvCAAA,CAAA,EAAA;8BAKzC,KAAK,EAAA,CAAA;sBAAb;;;AEbH;;AAEG;;;;"}
+{"version":3,"file":"sd-angular-core-components-history.mjs","sources":["../../../projects/sd-angular/components/history/pipes/view-date.pipe.ts","../../../projects/sd-angular/components/history/src/history.component.ts","../../../projects/sd-angular/components/history/src/history.component.html","../../../projects/sd-angular/components/history/sd-angular-core-components-history.ts"],"sourcesContent":["import { Injectable, Pipe, PipeTransform } from '@angular/core';\r\nimport { DateUtilities, SD_EMPTY_STR } from '@sd-angular/core/utilities';\r\n\r\n@Pipe({\r\n  name: 'viewDateTime',\r\n  standalone: true,\r\n})\r\n@Injectable({\r\n  providedIn: 'root',\r\n})\r\nexport class ViewDateTimePipe implements PipeTransform {\r\n  transform(value: any): string {\r\n    if (!value || !DateUtilities.isDate(value)) {\r\n      return SD_EMPTY_STR;\r\n    }\r\n    return DateUtilities.toFormat(value, 'HH:mm dd/MM/yyyy');\r\n  }\r\n}\r\n","import { CommonModule } from '@angular/common';\r\nimport { Component, Input } from '@angular/core';\r\nimport { SdBadge } from '@sd-angular/core/components/badge';\r\nimport { SdHistoryItemType } from '../models/history.model';\r\nimport { ViewDateTimePipe } from '../pipes/view-date.pipe';\r\n\r\n@Component({\r\n  selector: 'sd-history',\r\n  imports: [CommonModule, SdBadge, ViewDateTimePipe],\r\n  templateUrl: './history.component.html',\r\n  styleUrl: './history.component.scss',\r\n})\r\nexport class SdHistoryItem {\r\n  @Input() items: SdHistoryItemType[] = [];\r\n}\r\n","<div class=\"sd-history\">\r\n  <div class=\"history-container\">\r\n    <div class=\"history-line\"></div>\r\n    <div *ngFor=\"let item of items; let i = index\" class=\"history-item\">\r\n      <div class=\"dot\"></div>\r\n      <div class=\"card\">\r\n        <div class=\"header\">\r\n          <div class=\"title-wrapper\">\r\n            <span class=\"title\">{{ item.title }}</span>\r\n            <span class=\"status\">\r\n                @if (item?.status) {\r\n                  <sd-badge\r\n                  [icon]=\"item.status?.icon\"\r\n                  [title]=\"item.status?.title\"\r\n                  [color]=\"item.status?.color\"></sd-badge>\r\n                }\r\n            </span>\r\n          </div>\r\n            <span class=\"date\">{{ item?.date | viewDateTime }}</span>\r\n        </div>\r\n        <div class=\"meta\">\r\n          @if (item?.actor) {\r\n            <span>Bởi <strong>&#64;{{ item.actor }}</strong></span>\r\n          }\r\n          @if (item?.source) {\r\n            <span> &#183; {{ item.source }}</span>\r\n          }\r\n        </div>\r\n        <div class=\"description\">\r\n          {{ item?.description }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;MAUa,gBAAgB,CAAA;AAC3B,IAAA,SAAS,CAAC,KAAU,EAAA;QAClB,IAAI,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;AAC1C,YAAA,OAAO,YAAY;QACrB;QACA,OAAO,aAAa,CAAC,QAAQ,CAAC,KAAK,EAAE,kBAAkB,CAAC;IAC1D;wGANW,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,IAAA,EAAA,CAAA;sGAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,IAAA,EAAA,cAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,cAFf,MAAM,EAAA,CAAA;;4FAEP,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAP5B,IAAI;AAAC,YAAA,IAAA,EAAA,CAAA;AACJ,oBAAA,IAAI,EAAE,cAAc;AACpB,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;kBACA,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;AACnB,iBAAA;;;MCGY,aAAa,CAAA;IACf,KAAK,GAAwB,EAAE;wGAD7B,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,aAAa,kGCZ1B,ouCAmCA,EAAA,MAAA,EAAA,CAAA,qvCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED3BY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,4NAAE,gBAAgB,EAAA,IAAA,EAAA,cAAA,EAAA,CAAA,EAAA,CAAA;;4FAItC,aAAa,EAAA,UAAA,EAAA,CAAA;kBANzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,WACb,CAAC,YAAY,EAAE,OAAO,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,ouCAAA,EAAA,MAAA,EAAA,CAAA,qvCAAA,CAAA,EAAA;8BAKzC,KAAK,EAAA,CAAA;sBAAb;;;AEbH;;AAEG;;;;"}