npm - @sdcorejs/angular - Versions diffs - 21.2.0 → 21.2.1 - Mend

@sdcorejs/angular 21.2.0 → 21.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/fesm2022/sdcorejs-angular-components-badge.mjs CHANGED Viewed

@@ -65,6 +65,18 @@ class SdBadge {
             return 'error';
         return this.color();
     }, ...(ngDevMode ? [{ debugName: "effectiveColor" }] : /* istanbul ignore next */ []));
+    accessibleName = computed(() => {
+        const visibleText = [this.title(), this.description()]
+            .filter(value => value !== undefined && value !== null && String(value).trim() !== '')
+            .map(value => String(value).trim())
+            .join(' ');
+        if (visibleText)
+            return visibleText;
+        const tooltip = this.tooltip()?.trim();
+        if (tooltip)
+            return tooltip;
+        return (this.icon() || this.defaultIcon).replace(/[_-]+/g, ' ').trim();
+    }, ...(ngDevMode ? [{ debugName: "accessibleName" }] : /* istanbul ignore next */ []));
     baseColorClasses = computed(() => {
         const c = this.effectiveColor();
         return {
@@ -128,11 +140,11 @@ class SdBadge {
         ...this.iconColorClasses(),
     }), ...(ngDevMode ? [{ debugName: "iconCombinedClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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 _type = type();\n@let _tooltip = tooltip();\n@let _title = title();\n@let _description = description();\n@let _fontSet = fontSet();\n@let _iconCssSize = iconCssSize();\n@let iconName = icon() || defaultIcon;\n@let isPointer = click.observed;\n@let _role = isPointer ? 'button' : null;\n@let _tabIndex = isPointer ? 0 : null;\n\n<!-- why: b\u1ECF aria-hidden=\"true\" kh\u1ECFi c\u1EA3 ba nh\u00E1nh. Badge mang n\u1ED9i dung th\u1EADt (title/description) n\u00EAn\n     aria-hidden xo\u00E1 lu\u00F4n n\u1ED9i dung \u0111\u00F3 kh\u1ECFi accessibility tree; khi badge c\u00F2n clickable th\u00EC n\u00F3 v\u1EEBa\n     nh\u1EADn focus v\u1EEBa kh\u00F4ng \u0111\u1ECDc \u0111\u01B0\u1EE3c g\u00EC \u2014 t\u1EC7 h\u01A1n l\u00E0 kh\u00F4ng l\u00E0m g\u00EC. Nay role/tabindex/keydown ch\u1EC9 b\u1EADt\n     khi th\u1EF1c s\u1EF1 c\u00F3 consumer l\u1EAFng nghe (click). -->\n@if (_type === 'round') {\n  <div\n    class=\"c-badge\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipClass=\"sd-multiline-tooltip\"\n    [ngClass]=\"containerCombinedClasses()\"\n    [class.c-badge--has-icon]=\"!!icon()\"\n    [class.pointer]=\"isPointer\"\n    [attr.role]=\"_role\"\n    [attr.tabindex]=\"_tabIndex\"\n    (click)=\"onClick($event)\"\n    (keydown.enter)=\"onActivateKey($event)\"\n    (keydown.space)=\"onActivateKey($event)\">\n    @if (icon()) {\n      <sd-icon\n        class=\"c-material-icon\"\n        [name]=\"iconName\"\n        [fontSet]=\"_fontSet\"\n        [size]=\"_iconCssSize\"\n        [ngClass]=\"tagIconCombinedClasses()\"></sd-icon>\n    }\n    <span class=\"c-badge-title\">{{ _title }}</span>\n  </div>\n} @else if (_type === 'tag') {\n  <div\n    class=\"c-badge c-badge--tag\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipClass=\"sd-multiline-tooltip\"\n    [ngClass]=\"containerCombinedClasses()\"\n    [class.pointer]=\"isPointer\"\n    [attr.role]=\"_role\"\n    [attr.tabindex]=\"_tabIndex\"\n    (click)=\"onClick($event)\"\n    (keydown.enter)=\"onActivateKey($event)\"\n    (keydown.space)=\"onActivateKey($event)\">\n    <div class=\"c-icon d-flex align-items-center\">\n      @if (icon()) {\n        <sd-icon\n          class=\"c-material-icon mr-4\"\n          [name]=\"iconName\"\n          [fontSet]=\"_fontSet\"\n          [size]=\"_iconCssSize\"\n          [ngClass]=\"tagIconCombinedClasses()\"></sd-icon>\n      }\n      <div class=\"d-flex flex-column align-items-start\">\n        <span class=\"T14R c-badge-title\">{{ _title }}</span>\n        @if (_description) {\n          <span class=\"T12R c-badge-description\">{{ _description }}</span>\n        }\n      </div>\n    </div>\n  </div>\n} @else {\n  <div\n    class=\"d-flex\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipClass=\"sd-multiline-tooltip\"\n    [class.c-badge-icon]=\"_type === 'icon'\"\n    [class.pointer]=\"isPointer\"\n    [attr.role]=\"_role\"\n    [attr.tabindex]=\"_tabIndex\"\n    (click)=\"onClick($event)\"\n    (keydown.enter)=\"onActivateKey($event)\"\n    (keydown.space)=\"onActivateKey($event)\">\n    <div class=\"c-icon d-flex align-items-center\">\n      <sd-icon\n        class=\"c-material-icon mr-4\"\n        [name]=\"iconName\"\n        [fontSet]=\"_fontSet\"\n        [size]=\"_iconCssSize\"\n        [ngClass]=\"iconCombinedClasses()\"></sd-icon>\n      <div class=\"d-flex flex-column\">\n        <span class=\"T14R c-badge-title\">{{ _title }}</span>\n        @if (_description) {\n          <span class=\"T10R c-badge-description\">{{ _description }}</span>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-primary-contrast{color:var(--sd-primary-contrast)!important}.bg-primary-contrast{background:var(--sd-primary-contrast)!important}.border-primary-contrast{border-color:var(--sd-primary-contrast)!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-secondary-contrast{color:var(--sd-secondary-contrast)!important}.bg-secondary-contrast{background:var(--sd-secondary-contrast)!important}.border-secondary-contrast{border-color:var(--sd-secondary-contrast)!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-info-contrast{color:var(--sd-info-contrast)!important}.bg-info-contrast{background:var(--sd-info-contrast)!important}.border-info-contrast{border-color:var(--sd-info-contrast)!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-success-contrast{color:var(--sd-success-contrast)!important}.bg-success-contrast{background:var(--sd-success-contrast)!important}.border-success-contrast{border-color:var(--sd-success-contrast)!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-warning-contrast{color:var(--sd-warning-contrast)!important}.bg-warning-contrast{background:var(--sd-warning-contrast)!important}.border-warning-contrast{border-color:var(--sd-warning-contrast)!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-error-contrast{color:var(--sd-error-contrast)!important}.bg-error-contrast{background:var(--sd-error-contrast)!important}.border-error-contrast{border-color:var(--sd-error-contrast)!important}.text-surface{color:var(--sd-surface)!important}.bg-surface{background:var(--sd-surface)!important}.border-surface{border-color:var(--sd-surface)!important}.text-surface-muted{color:var(--sd-surface-muted)!important}.bg-surface-muted{background:var(--sd-surface-muted)!important}.border-surface-muted{border-color:var(--sd-surface-muted)!important}.text-text{color:var(--sd-text)!important}.bg-text{background:var(--sd-text)!important}.border-text{border-color:var(--sd-text)!important}.text-text-secondary{color:var(--sd-text-secondary)!important}.bg-text-secondary{background:var(--sd-text-secondary)!important}.border-text-secondary{border-color:var(--sd-text-secondary)!important}.text-text-muted{color:var(--sd-text-muted)!important}.bg-text-muted{background:var(--sd-text-muted)!important}.border-text-muted{border-color:var(--sd-text-muted)!important}.text-border{color:var(--sd-border)!important}.bg-border{background:var(--sd-border)!important}.border-border{border-color:var(--sd-border)!important}.text-border-strong{color:var(--sd-border-strong)!important}.bg-border-strong{background:var(--sd-border-strong)!important}.border-border-strong{border-color:var(--sd-border-strong)!important}.text-disabled-bg{color:var(--sd-disabled-bg)!important}.bg-disabled-bg{background:var(--sd-disabled-bg)!important}.border-disabled-bg{border-color:var(--sd-disabled-bg)!important}.text-disabled-text{color:var(--sd-disabled-text)!important}.bg-disabled-text{background:var(--sd-disabled-text)!important}.border-disabled-text{border-color:var(--sd-disabled-text)!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}.text-secondary{color:var(--sd-text-secondary)!important}.text-muted{color:var(--sd-text-muted)!important}.text-body{color:var(--sd-text)!important}.bg-muted{background:var(--sd-surface-muted)!important}.c-badge{border-radius:20px;padding:2px 10px;display:inline-block;text-align:center;overflow-wrap:break-word}.c-badge.c-badge--has-icon{display:inline-flex;align-items:center;gap:4px}.c-badge .c-material-icon{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1}.c-badge .c-material-icon.c-sm{font-size:16px;width:16px;height:16px}.c-badge .c-material-icon.c-md{font-size:18px;width:18px;height:18px}.c-badge .c-material-icon.c-lg{font-size:24px;width:24px;height:24px}.c-badge.c-badge--sm:not(.c-badge--tag){padding:2px 10px}.c-badge.c-badge--md:not(.c-badge--tag){padding:4px 12px}.c-badge.c-badge--lg:not(.c-badge--tag){padding:6px 16px}.c-badge.c-badge--sm .c-badge-title{font-size:14px}.c-badge.c-badge--md .c-badge-title{font-size:16px}.c-badge.c-badge--lg .c-badge-title{font-size:18px}.c-badge.c-badge--sm .c-badge-description{font-size:12px}.c-badge.c-badge--md .c-badge-description{font-size:13px}.c-badge.c-badge--lg .c-badge-description{font-size:14px}.c-badge.c-primary{background:var(--sd-primary-light);color:var(--sd-primary)}.c-badge.c-primary.c-badge--tag{border:1px solid var(--sd-primary)}.c-badge.c-secondary{background:var(--sd-secondary-light);color:var(--sd-secondary)}.c-badge.c-secondary.c-badge--tag{border:1px solid var(--sd-secondary)}.c-badge.c-info{background:var(--sd-info-light);color:var(--sd-info)}.c-badge.c-info.c-badge--tag{border:1px solid var(--sd-info)}.c-badge.c-warning{background:var(--sd-warning-light);color:var(--sd-warning)}.c-badge.c-warning.c-badge--tag{border:1px solid var(--sd-warning)}.c-badge.c-success{background:var(--sd-success-light);color:var(--sd-success)}.c-badge.c-success.c-badge--tag{border:1px solid var(--sd-success)}.c-badge.c-error{background:var(--sd-error-light);color:var(--sd-error)}.c-badge.c-error.c-badge--tag{border:1px solid var(--sd-error)}.c-badge.c-badge--tag{border-radius:4px;padding:1px 7px}.c-badge.c-badge--tag.c-badge--sm{padding:1px 7px}.c-badge.c-badge--tag.c-badge--md{padding:2px 10px}.c-badge.c-badge--tag.c-badge--lg{padding:4px 12px}.c-badge-icon{min-width:50px}.c-badge-icon .c-material-icon{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:0;line-height:1}.c-badge-icon .c-material-icon.c-sm{width:20px;height:20px;font-size:16px}.c-badge-icon .c-material-icon.c-md{width:22px;height:22px;font-size:18px}.c-badge-icon .c-material-icon.c-lg{width:28px;height:28px;font-size:24px}.c-badge-icon .c-material-icon.c-primary{color:var(--sd-primary)}.c-badge-icon .c-material-icon.c-secondary{color:var(--sd-secondary)}.c-badge-icon .c-material-icon.c-info{color:var(--sd-info)}.c-badge-icon .c-material-icon.c-success{color:var(--sd-success)}.c-badge-icon .c-material-icon.c-error{color:var(--sd-error)}.c-badge-icon .c-material-icon.c-warning{color:var(--sd-warning)}.c-badge-description{color:var(--sd-text-secondary)}:host [role=button]:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:2px;border-radius:4px}::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: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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 _type = type();\n@let _tooltip = tooltip();\n@let _title = title();\n@let _description = description();\n@let _fontSet = fontSet();\n@let _iconCssSize = iconCssSize();\n@let _accessibleName = accessibleName();\n@let iconName = icon() || defaultIcon;\n@let isPointer = click.observed;\n@let _role = isPointer ? 'button' : null;\n@let _tabIndex = isPointer ? 0 : null;\n\n<!-- why: b\u1ECF aria-hidden=\"true\" kh\u1ECFi c\u1EA3 ba nh\u00E1nh. Badge mang n\u1ED9i dung th\u1EADt (title/description) n\u00EAn\n     aria-hidden xo\u00E1 lu\u00F4n n\u1ED9i dung \u0111\u00F3 kh\u1ECFi accessibility tree; khi badge c\u00F2n clickable th\u00EC n\u00F3 v\u1EEBa\n     nh\u1EADn focus v\u1EEBa kh\u00F4ng \u0111\u1ECDc \u0111\u01B0\u1EE3c g\u00EC \u2014 t\u1EC7 h\u01A1n l\u00E0 kh\u00F4ng l\u00E0m g\u00EC. Nay role/tabindex/keydown ch\u1EC9 b\u1EADt\n     khi th\u1EF1c s\u1EF1 c\u00F3 consumer l\u1EAFng nghe (click). -->\n@if (_type === 'round') {\n  <div\n    class=\"c-badge\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipClass=\"sd-multiline-tooltip\"\n    [ngClass]=\"containerCombinedClasses()\"\n    [class.c-badge--has-icon]=\"!!icon()\"\n    [class.pointer]=\"isPointer\"\n    [attr.role]=\"_role\"\n    [attr.tabindex]=\"_tabIndex\"\n    [attr.aria-label]=\"isPointer ? _accessibleName : null\"\n    (click)=\"onClick($event)\"\n    (keydown.enter)=\"onActivateKey($event)\"\n    (keydown.space)=\"onActivateKey($event)\">\n    @if (icon()) {\n      <sd-icon\n        class=\"c-material-icon\"\n        [name]=\"iconName\"\n        [fontSet]=\"_fontSet\"\n        [size]=\"_iconCssSize\"\n        [ngClass]=\"tagIconCombinedClasses()\"></sd-icon>\n    }\n    <span class=\"c-badge-title\">{{ _title }}</span>\n  </div>\n} @else if (_type === 'tag') {\n  <div\n    class=\"c-badge c-badge--tag\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipClass=\"sd-multiline-tooltip\"\n    [ngClass]=\"containerCombinedClasses()\"\n    [class.pointer]=\"isPointer\"\n    [attr.role]=\"_role\"\n    [attr.tabindex]=\"_tabIndex\"\n    [attr.aria-label]=\"isPointer ? _accessibleName : null\"\n    (click)=\"onClick($event)\"\n    (keydown.enter)=\"onActivateKey($event)\"\n    (keydown.space)=\"onActivateKey($event)\">\n    <div class=\"c-icon d-flex align-items-center\">\n      @if (icon()) {\n        <sd-icon\n          class=\"c-material-icon mr-4\"\n          [name]=\"iconName\"\n          [fontSet]=\"_fontSet\"\n          [size]=\"_iconCssSize\"\n          [ngClass]=\"tagIconCombinedClasses()\"></sd-icon>\n      }\n      <div class=\"d-flex flex-column align-items-start\">\n        <span class=\"T14R c-badge-title\">{{ _title }}</span>\n        @if (_description) {\n          <span class=\"T12R c-badge-description\">{{ _description }}</span>\n        }\n      </div>\n    </div>\n  </div>\n} @else {\n  <div\n    class=\"d-flex\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipClass=\"sd-multiline-tooltip\"\n    [class.c-badge-icon]=\"_type === 'icon'\"\n    [class.pointer]=\"isPointer\"\n    [attr.role]=\"_role\"\n    [attr.tabindex]=\"_tabIndex\"\n    [attr.aria-label]=\"isPointer ? _accessibleName : null\"\n    (click)=\"onClick($event)\"\n    (keydown.enter)=\"onActivateKey($event)\"\n    (keydown.space)=\"onActivateKey($event)\">\n    <div class=\"c-icon d-flex align-items-center\">\n      <sd-icon\n        class=\"c-material-icon mr-4\"\n        [name]=\"iconName\"\n        [fontSet]=\"_fontSet\"\n        [size]=\"_iconCssSize\"\n        [ngClass]=\"iconCombinedClasses()\"></sd-icon>\n      <div class=\"d-flex flex-column\">\n        <span class=\"T14R c-badge-title\">{{ _title }}</span>\n        @if (_description) {\n          <span class=\"T10R c-badge-description\">{{ _description }}</span>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-primary-contrast{color:var(--sd-primary-contrast)!important}.bg-primary-contrast{background:var(--sd-primary-contrast)!important}.border-primary-contrast{border-color:var(--sd-primary-contrast)!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-secondary-contrast{color:var(--sd-secondary-contrast)!important}.bg-secondary-contrast{background:var(--sd-secondary-contrast)!important}.border-secondary-contrast{border-color:var(--sd-secondary-contrast)!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-info-contrast{color:var(--sd-info-contrast)!important}.bg-info-contrast{background:var(--sd-info-contrast)!important}.border-info-contrast{border-color:var(--sd-info-contrast)!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-success-contrast{color:var(--sd-success-contrast)!important}.bg-success-contrast{background:var(--sd-success-contrast)!important}.border-success-contrast{border-color:var(--sd-success-contrast)!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-warning-contrast{color:var(--sd-warning-contrast)!important}.bg-warning-contrast{background:var(--sd-warning-contrast)!important}.border-warning-contrast{border-color:var(--sd-warning-contrast)!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-error-contrast{color:var(--sd-error-contrast)!important}.bg-error-contrast{background:var(--sd-error-contrast)!important}.border-error-contrast{border-color:var(--sd-error-contrast)!important}.text-surface{color:var(--sd-surface)!important}.bg-surface{background:var(--sd-surface)!important}.border-surface{border-color:var(--sd-surface)!important}.text-surface-muted{color:var(--sd-surface-muted)!important}.bg-surface-muted{background:var(--sd-surface-muted)!important}.border-surface-muted{border-color:var(--sd-surface-muted)!important}.text-text{color:var(--sd-text)!important}.bg-text{background:var(--sd-text)!important}.border-text{border-color:var(--sd-text)!important}.text-text-secondary{color:var(--sd-text-secondary)!important}.bg-text-secondary{background:var(--sd-text-secondary)!important}.border-text-secondary{border-color:var(--sd-text-secondary)!important}.text-text-muted{color:var(--sd-text-muted)!important}.bg-text-muted{background:var(--sd-text-muted)!important}.border-text-muted{border-color:var(--sd-text-muted)!important}.text-border{color:var(--sd-border)!important}.bg-border{background:var(--sd-border)!important}.border-border{border-color:var(--sd-border)!important}.text-border-strong{color:var(--sd-border-strong)!important}.bg-border-strong{background:var(--sd-border-strong)!important}.border-border-strong{border-color:var(--sd-border-strong)!important}.text-disabled-bg{color:var(--sd-disabled-bg)!important}.bg-disabled-bg{background:var(--sd-disabled-bg)!important}.border-disabled-bg{border-color:var(--sd-disabled-bg)!important}.text-disabled-text{color:var(--sd-disabled-text)!important}.bg-disabled-text{background:var(--sd-disabled-text)!important}.border-disabled-text{border-color:var(--sd-disabled-text)!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}.text-secondary{color:var(--sd-text-secondary)!important}.text-muted{color:var(--sd-text-muted)!important}.text-body{color:var(--sd-text)!important}.bg-muted{background:var(--sd-surface-muted)!important}.c-badge{border-radius:20px;padding:2px 10px;display:inline-block;text-align:center;overflow-wrap:break-word}.c-badge.c-badge--has-icon{display:inline-flex;align-items:center;gap:4px}.c-badge .c-material-icon{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1}.c-badge .c-material-icon.c-sm{font-size:16px;width:16px;height:16px}.c-badge .c-material-icon.c-md{font-size:18px;width:18px;height:18px}.c-badge .c-material-icon.c-lg{font-size:24px;width:24px;height:24px}.c-badge.c-badge--sm:not(.c-badge--tag){padding:2px 10px}.c-badge.c-badge--md:not(.c-badge--tag){padding:4px 12px}.c-badge.c-badge--lg:not(.c-badge--tag){padding:6px 16px}.c-badge.c-badge--sm .c-badge-title{font-size:14px}.c-badge.c-badge--md .c-badge-title{font-size:16px}.c-badge.c-badge--lg .c-badge-title{font-size:18px}.c-badge.c-badge--sm .c-badge-description{font-size:12px}.c-badge.c-badge--md .c-badge-description{font-size:13px}.c-badge.c-badge--lg .c-badge-description{font-size:14px}.c-badge.c-primary{background:var(--sd-primary-light);color:var(--sd-primary-dark)}.c-badge.c-primary.c-badge--tag{border:1px solid var(--sd-primary-dark)}.c-badge.c-secondary{background:var(--sd-secondary-light);color:var(--sd-secondary-dark)}.c-badge.c-secondary.c-badge--tag{border:1px solid var(--sd-secondary-dark)}.c-badge.c-info{background:var(--sd-info-light);color:var(--sd-info-dark)}.c-badge.c-info.c-badge--tag{border:1px solid var(--sd-info-dark)}.c-badge.c-warning{background:var(--sd-warning-light);color:var(--sd-warning-dark)}.c-badge.c-warning.c-badge--tag{border:1px solid var(--sd-warning-dark)}.c-badge.c-success{background:var(--sd-success-light);color:var(--sd-success-dark)}.c-badge.c-success.c-badge--tag{border:1px solid var(--sd-success-dark)}.c-badge.c-error{background:var(--sd-error-light);color:var(--sd-error-dark)}.c-badge.c-error.c-badge--tag{border:1px solid var(--sd-error-dark)}.c-badge.c-badge--tag{border-radius:4px;padding:1px 7px}.c-badge.c-badge--tag.c-badge--sm{padding:1px 7px}.c-badge.c-badge--tag.c-badge--md{padding:2px 10px}.c-badge.c-badge--tag.c-badge--lg{padding:4px 12px}.c-badge-icon{min-width:50px}.c-badge-icon .c-material-icon{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:0;line-height:1}.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-dark)}.c-badge-icon .c-material-icon.c-secondary{color:var(--sd-secondary-dark)}.c-badge-icon .c-material-icon.c-info{color:var(--sd-info-dark)}.c-badge-icon .c-material-icon.c-success{color:var(--sd-success-dark)}.c-badge-icon .c-material-icon.c-error{color:var(--sd-error-dark)}.c-badge-icon .c-material-icon.c-warning{color:var(--sd-warning-dark)}.c-badge-description{color:var(--sd-text-secondary)}:host [role=button]:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:2px;border-radius:4px}::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: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { 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: "21.2.17", ngImport: i0, type: SdBadge, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-badge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, SdIcon, MatTooltipModule], template: "@let _type = type();\n@let _tooltip = tooltip();\n@let _title = title();\n@let _description = description();\n@let _fontSet = fontSet();\n@let _iconCssSize = iconCssSize();\n@let iconName = icon() || defaultIcon;\n@let isPointer = click.observed;\n@let _role = isPointer ? 'button' : null;\n@let _tabIndex = isPointer ? 0 : null;\n\n<!-- why: b\u1ECF aria-hidden=\"true\" kh\u1ECFi c\u1EA3 ba nh\u00E1nh. Badge mang n\u1ED9i dung th\u1EADt (title/description) n\u00EAn\n     aria-hidden xo\u00E1 lu\u00F4n n\u1ED9i dung \u0111\u00F3 kh\u1ECFi accessibility tree; khi badge c\u00F2n clickable th\u00EC n\u00F3 v\u1EEBa\n     nh\u1EADn focus v\u1EEBa kh\u00F4ng \u0111\u1ECDc \u0111\u01B0\u1EE3c g\u00EC \u2014 t\u1EC7 h\u01A1n l\u00E0 kh\u00F4ng l\u00E0m g\u00EC. Nay role/tabindex/keydown ch\u1EC9 b\u1EADt\n     khi th\u1EF1c s\u1EF1 c\u00F3 consumer l\u1EAFng nghe (click). -->\n@if (_type === 'round') {\n  <div\n    class=\"c-badge\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipClass=\"sd-multiline-tooltip\"\n    [ngClass]=\"containerCombinedClasses()\"\n    [class.c-badge--has-icon]=\"!!icon()\"\n    [class.pointer]=\"isPointer\"\n    [attr.role]=\"_role\"\n    [attr.tabindex]=\"_tabIndex\"\n    (click)=\"onClick($event)\"\n    (keydown.enter)=\"onActivateKey($event)\"\n    (keydown.space)=\"onActivateKey($event)\">\n    @if (icon()) {\n      <sd-icon\n        class=\"c-material-icon\"\n        [name]=\"iconName\"\n        [fontSet]=\"_fontSet\"\n        [size]=\"_iconCssSize\"\n        [ngClass]=\"tagIconCombinedClasses()\"></sd-icon>\n    }\n    <span class=\"c-badge-title\">{{ _title }}</span>\n  </div>\n} @else if (_type === 'tag') {\n  <div\n    class=\"c-badge c-badge--tag\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipClass=\"sd-multiline-tooltip\"\n    [ngClass]=\"containerCombinedClasses()\"\n    [class.pointer]=\"isPointer\"\n    [attr.role]=\"_role\"\n    [attr.tabindex]=\"_tabIndex\"\n    (click)=\"onClick($event)\"\n    (keydown.enter)=\"onActivateKey($event)\"\n    (keydown.space)=\"onActivateKey($event)\">\n    <div class=\"c-icon d-flex align-items-center\">\n      @if (icon()) {\n        <sd-icon\n          class=\"c-material-icon mr-4\"\n          [name]=\"iconName\"\n          [fontSet]=\"_fontSet\"\n          [size]=\"_iconCssSize\"\n          [ngClass]=\"tagIconCombinedClasses()\"></sd-icon>\n      }\n      <div class=\"d-flex flex-column align-items-start\">\n        <span class=\"T14R c-badge-title\">{{ _title }}</span>\n        @if (_description) {\n          <span class=\"T12R c-badge-description\">{{ _description }}</span>\n        }\n      </div>\n    </div>\n  </div>\n} @else {\n  <div\n    class=\"d-flex\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipClass=\"sd-multiline-tooltip\"\n    [class.c-badge-icon]=\"_type === 'icon'\"\n    [class.pointer]=\"isPointer\"\n    [attr.role]=\"_role\"\n    [attr.tabindex]=\"_tabIndex\"\n    (click)=\"onClick($event)\"\n    (keydown.enter)=\"onActivateKey($event)\"\n    (keydown.space)=\"onActivateKey($event)\">\n    <div class=\"c-icon d-flex align-items-center\">\n      <sd-icon\n        class=\"c-material-icon mr-4\"\n        [name]=\"iconName\"\n        [fontSet]=\"_fontSet\"\n        [size]=\"_iconCssSize\"\n        [ngClass]=\"iconCombinedClasses()\"></sd-icon>\n      <div class=\"d-flex flex-column\">\n        <span class=\"T14R c-badge-title\">{{ _title }}</span>\n        @if (_description) {\n          <span class=\"T10R c-badge-description\">{{ _description }}</span>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-primary-contrast{color:var(--sd-primary-contrast)!important}.bg-primary-contrast{background:var(--sd-primary-contrast)!important}.border-primary-contrast{border-color:var(--sd-primary-contrast)!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-secondary-contrast{color:var(--sd-secondary-contrast)!important}.bg-secondary-contrast{background:var(--sd-secondary-contrast)!important}.border-secondary-contrast{border-color:var(--sd-secondary-contrast)!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-info-contrast{color:var(--sd-info-contrast)!important}.bg-info-contrast{background:var(--sd-info-contrast)!important}.border-info-contrast{border-color:var(--sd-info-contrast)!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-success-contrast{color:var(--sd-success-contrast)!important}.bg-success-contrast{background:var(--sd-success-contrast)!important}.border-success-contrast{border-color:var(--sd-success-contrast)!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-warning-contrast{color:var(--sd-warning-contrast)!important}.bg-warning-contrast{background:var(--sd-warning-contrast)!important}.border-warning-contrast{border-color:var(--sd-warning-contrast)!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-error-contrast{color:var(--sd-error-contrast)!important}.bg-error-contrast{background:var(--sd-error-contrast)!important}.border-error-contrast{border-color:var(--sd-error-contrast)!important}.text-surface{color:var(--sd-surface)!important}.bg-surface{background:var(--sd-surface)!important}.border-surface{border-color:var(--sd-surface)!important}.text-surface-muted{color:var(--sd-surface-muted)!important}.bg-surface-muted{background:var(--sd-surface-muted)!important}.border-surface-muted{border-color:var(--sd-surface-muted)!important}.text-text{color:var(--sd-text)!important}.bg-text{background:var(--sd-text)!important}.border-text{border-color:var(--sd-text)!important}.text-text-secondary{color:var(--sd-text-secondary)!important}.bg-text-secondary{background:var(--sd-text-secondary)!important}.border-text-secondary{border-color:var(--sd-text-secondary)!important}.text-text-muted{color:var(--sd-text-muted)!important}.bg-text-muted{background:var(--sd-text-muted)!important}.border-text-muted{border-color:var(--sd-text-muted)!important}.text-border{color:var(--sd-border)!important}.bg-border{background:var(--sd-border)!important}.border-border{border-color:var(--sd-border)!important}.text-border-strong{color:var(--sd-border-strong)!important}.bg-border-strong{background:var(--sd-border-strong)!important}.border-border-strong{border-color:var(--sd-border-strong)!important}.text-disabled-bg{color:var(--sd-disabled-bg)!important}.bg-disabled-bg{background:var(--sd-disabled-bg)!important}.border-disabled-bg{border-color:var(--sd-disabled-bg)!important}.text-disabled-text{color:var(--sd-disabled-text)!important}.bg-disabled-text{background:var(--sd-disabled-text)!important}.border-disabled-text{border-color:var(--sd-disabled-text)!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}.text-secondary{color:var(--sd-text-secondary)!important}.text-muted{color:var(--sd-text-muted)!important}.text-body{color:var(--sd-text)!important}.bg-muted{background:var(--sd-surface-muted)!important}.c-badge{border-radius:20px;padding:2px 10px;display:inline-block;text-align:center;overflow-wrap:break-word}.c-badge.c-badge--has-icon{display:inline-flex;align-items:center;gap:4px}.c-badge .c-material-icon{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1}.c-badge .c-material-icon.c-sm{font-size:16px;width:16px;height:16px}.c-badge .c-material-icon.c-md{font-size:18px;width:18px;height:18px}.c-badge .c-material-icon.c-lg{font-size:24px;width:24px;height:24px}.c-badge.c-badge--sm:not(.c-badge--tag){padding:2px 10px}.c-badge.c-badge--md:not(.c-badge--tag){padding:4px 12px}.c-badge.c-badge--lg:not(.c-badge--tag){padding:6px 16px}.c-badge.c-badge--sm .c-badge-title{font-size:14px}.c-badge.c-badge--md .c-badge-title{font-size:16px}.c-badge.c-badge--lg .c-badge-title{font-size:18px}.c-badge.c-badge--sm .c-badge-description{font-size:12px}.c-badge.c-badge--md .c-badge-description{font-size:13px}.c-badge.c-badge--lg .c-badge-description{font-size:14px}.c-badge.c-primary{background:var(--sd-primary-light);color:var(--sd-primary)}.c-badge.c-primary.c-badge--tag{border:1px solid var(--sd-primary)}.c-badge.c-secondary{background:var(--sd-secondary-light);color:var(--sd-secondary)}.c-badge.c-secondary.c-badge--tag{border:1px solid var(--sd-secondary)}.c-badge.c-info{background:var(--sd-info-light);color:var(--sd-info)}.c-badge.c-info.c-badge--tag{border:1px solid var(--sd-info)}.c-badge.c-warning{background:var(--sd-warning-light);color:var(--sd-warning)}.c-badge.c-warning.c-badge--tag{border:1px solid var(--sd-warning)}.c-badge.c-success{background:var(--sd-success-light);color:var(--sd-success)}.c-badge.c-success.c-badge--tag{border:1px solid var(--sd-success)}.c-badge.c-error{background:var(--sd-error-light);color:var(--sd-error)}.c-badge.c-error.c-badge--tag{border:1px solid var(--sd-error)}.c-badge.c-badge--tag{border-radius:4px;padding:1px 7px}.c-badge.c-badge--tag.c-badge--sm{padding:1px 7px}.c-badge.c-badge--tag.c-badge--md{padding:2px 10px}.c-badge.c-badge--tag.c-badge--lg{padding:4px 12px}.c-badge-icon{min-width:50px}.c-badge-icon .c-material-icon{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:0;line-height:1}.c-badge-icon .c-material-icon.c-sm{width:20px;height:20px;font-size:16px}.c-badge-icon .c-material-icon.c-md{width:22px;height:22px;font-size:18px}.c-badge-icon .c-material-icon.c-lg{width:28px;height:28px;font-size:24px}.c-badge-icon .c-material-icon.c-primary{color:var(--sd-primary)}.c-badge-icon .c-material-icon.c-secondary{color:var(--sd-secondary)}.c-badge-icon .c-material-icon.c-info{color:var(--sd-info)}.c-badge-icon .c-material-icon.c-success{color:var(--sd-success)}.c-badge-icon .c-material-icon.c-error{color:var(--sd-error)}.c-badge-icon .c-material-icon.c-warning{color:var(--sd-warning)}.c-badge-description{color:var(--sd-text-secondary)}:host [role=button]:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:2px;border-radius:4px}::ng-deep .sd-multiline-tooltip{white-space:pre-line}\n"] }]
+            args: [{ selector: 'sd-badge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, SdIcon, MatTooltipModule], template: "@let _type = type();\n@let _tooltip = tooltip();\n@let _title = title();\n@let _description = description();\n@let _fontSet = fontSet();\n@let _iconCssSize = iconCssSize();\n@let _accessibleName = accessibleName();\n@let iconName = icon() || defaultIcon;\n@let isPointer = click.observed;\n@let _role = isPointer ? 'button' : null;\n@let _tabIndex = isPointer ? 0 : null;\n\n<!-- why: b\u1ECF aria-hidden=\"true\" kh\u1ECFi c\u1EA3 ba nh\u00E1nh. Badge mang n\u1ED9i dung th\u1EADt (title/description) n\u00EAn\n     aria-hidden xo\u00E1 lu\u00F4n n\u1ED9i dung \u0111\u00F3 kh\u1ECFi accessibility tree; khi badge c\u00F2n clickable th\u00EC n\u00F3 v\u1EEBa\n     nh\u1EADn focus v\u1EEBa kh\u00F4ng \u0111\u1ECDc \u0111\u01B0\u1EE3c g\u00EC \u2014 t\u1EC7 h\u01A1n l\u00E0 kh\u00F4ng l\u00E0m g\u00EC. Nay role/tabindex/keydown ch\u1EC9 b\u1EADt\n     khi th\u1EF1c s\u1EF1 c\u00F3 consumer l\u1EAFng nghe (click). -->\n@if (_type === 'round') {\n  <div\n    class=\"c-badge\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipClass=\"sd-multiline-tooltip\"\n    [ngClass]=\"containerCombinedClasses()\"\n    [class.c-badge--has-icon]=\"!!icon()\"\n    [class.pointer]=\"isPointer\"\n    [attr.role]=\"_role\"\n    [attr.tabindex]=\"_tabIndex\"\n    [attr.aria-label]=\"isPointer ? _accessibleName : null\"\n    (click)=\"onClick($event)\"\n    (keydown.enter)=\"onActivateKey($event)\"\n    (keydown.space)=\"onActivateKey($event)\">\n    @if (icon()) {\n      <sd-icon\n        class=\"c-material-icon\"\n        [name]=\"iconName\"\n        [fontSet]=\"_fontSet\"\n        [size]=\"_iconCssSize\"\n        [ngClass]=\"tagIconCombinedClasses()\"></sd-icon>\n    }\n    <span class=\"c-badge-title\">{{ _title }}</span>\n  </div>\n} @else if (_type === 'tag') {\n  <div\n    class=\"c-badge c-badge--tag\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipClass=\"sd-multiline-tooltip\"\n    [ngClass]=\"containerCombinedClasses()\"\n    [class.pointer]=\"isPointer\"\n    [attr.role]=\"_role\"\n    [attr.tabindex]=\"_tabIndex\"\n    [attr.aria-label]=\"isPointer ? _accessibleName : null\"\n    (click)=\"onClick($event)\"\n    (keydown.enter)=\"onActivateKey($event)\"\n    (keydown.space)=\"onActivateKey($event)\">\n    <div class=\"c-icon d-flex align-items-center\">\n      @if (icon()) {\n        <sd-icon\n          class=\"c-material-icon mr-4\"\n          [name]=\"iconName\"\n          [fontSet]=\"_fontSet\"\n          [size]=\"_iconCssSize\"\n          [ngClass]=\"tagIconCombinedClasses()\"></sd-icon>\n      }\n      <div class=\"d-flex flex-column align-items-start\">\n        <span class=\"T14R c-badge-title\">{{ _title }}</span>\n        @if (_description) {\n          <span class=\"T12R c-badge-description\">{{ _description }}</span>\n        }\n      </div>\n    </div>\n  </div>\n} @else {\n  <div\n    class=\"d-flex\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"_tooltip || ''\"\n    matTooltipClass=\"sd-multiline-tooltip\"\n    [class.c-badge-icon]=\"_type === 'icon'\"\n    [class.pointer]=\"isPointer\"\n    [attr.role]=\"_role\"\n    [attr.tabindex]=\"_tabIndex\"\n    [attr.aria-label]=\"isPointer ? _accessibleName : null\"\n    (click)=\"onClick($event)\"\n    (keydown.enter)=\"onActivateKey($event)\"\n    (keydown.space)=\"onActivateKey($event)\">\n    <div class=\"c-icon d-flex align-items-center\">\n      <sd-icon\n        class=\"c-material-icon mr-4\"\n        [name]=\"iconName\"\n        [fontSet]=\"_fontSet\"\n        [size]=\"_iconCssSize\"\n        [ngClass]=\"iconCombinedClasses()\"></sd-icon>\n      <div class=\"d-flex flex-column\">\n        <span class=\"T14R c-badge-title\">{{ _title }}</span>\n        @if (_description) {\n          <span class=\"T10R c-badge-description\">{{ _description }}</span>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-primary-contrast{color:var(--sd-primary-contrast)!important}.bg-primary-contrast{background:var(--sd-primary-contrast)!important}.border-primary-contrast{border-color:var(--sd-primary-contrast)!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-secondary-contrast{color:var(--sd-secondary-contrast)!important}.bg-secondary-contrast{background:var(--sd-secondary-contrast)!important}.border-secondary-contrast{border-color:var(--sd-secondary-contrast)!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-info-contrast{color:var(--sd-info-contrast)!important}.bg-info-contrast{background:var(--sd-info-contrast)!important}.border-info-contrast{border-color:var(--sd-info-contrast)!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-success-contrast{color:var(--sd-success-contrast)!important}.bg-success-contrast{background:var(--sd-success-contrast)!important}.border-success-contrast{border-color:var(--sd-success-contrast)!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-warning-contrast{color:var(--sd-warning-contrast)!important}.bg-warning-contrast{background:var(--sd-warning-contrast)!important}.border-warning-contrast{border-color:var(--sd-warning-contrast)!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-error-contrast{color:var(--sd-error-contrast)!important}.bg-error-contrast{background:var(--sd-error-contrast)!important}.border-error-contrast{border-color:var(--sd-error-contrast)!important}.text-surface{color:var(--sd-surface)!important}.bg-surface{background:var(--sd-surface)!important}.border-surface{border-color:var(--sd-surface)!important}.text-surface-muted{color:var(--sd-surface-muted)!important}.bg-surface-muted{background:var(--sd-surface-muted)!important}.border-surface-muted{border-color:var(--sd-surface-muted)!important}.text-text{color:var(--sd-text)!important}.bg-text{background:var(--sd-text)!important}.border-text{border-color:var(--sd-text)!important}.text-text-secondary{color:var(--sd-text-secondary)!important}.bg-text-secondary{background:var(--sd-text-secondary)!important}.border-text-secondary{border-color:var(--sd-text-secondary)!important}.text-text-muted{color:var(--sd-text-muted)!important}.bg-text-muted{background:var(--sd-text-muted)!important}.border-text-muted{border-color:var(--sd-text-muted)!important}.text-border{color:var(--sd-border)!important}.bg-border{background:var(--sd-border)!important}.border-border{border-color:var(--sd-border)!important}.text-border-strong{color:var(--sd-border-strong)!important}.bg-border-strong{background:var(--sd-border-strong)!important}.border-border-strong{border-color:var(--sd-border-strong)!important}.text-disabled-bg{color:var(--sd-disabled-bg)!important}.bg-disabled-bg{background:var(--sd-disabled-bg)!important}.border-disabled-bg{border-color:var(--sd-disabled-bg)!important}.text-disabled-text{color:var(--sd-disabled-text)!important}.bg-disabled-text{background:var(--sd-disabled-text)!important}.border-disabled-text{border-color:var(--sd-disabled-text)!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}.text-secondary{color:var(--sd-text-secondary)!important}.text-muted{color:var(--sd-text-muted)!important}.text-body{color:var(--sd-text)!important}.bg-muted{background:var(--sd-surface-muted)!important}.c-badge{border-radius:20px;padding:2px 10px;display:inline-block;text-align:center;overflow-wrap:break-word}.c-badge.c-badge--has-icon{display:inline-flex;align-items:center;gap:4px}.c-badge .c-material-icon{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1}.c-badge .c-material-icon.c-sm{font-size:16px;width:16px;height:16px}.c-badge .c-material-icon.c-md{font-size:18px;width:18px;height:18px}.c-badge .c-material-icon.c-lg{font-size:24px;width:24px;height:24px}.c-badge.c-badge--sm:not(.c-badge--tag){padding:2px 10px}.c-badge.c-badge--md:not(.c-badge--tag){padding:4px 12px}.c-badge.c-badge--lg:not(.c-badge--tag){padding:6px 16px}.c-badge.c-badge--sm .c-badge-title{font-size:14px}.c-badge.c-badge--md .c-badge-title{font-size:16px}.c-badge.c-badge--lg .c-badge-title{font-size:18px}.c-badge.c-badge--sm .c-badge-description{font-size:12px}.c-badge.c-badge--md .c-badge-description{font-size:13px}.c-badge.c-badge--lg .c-badge-description{font-size:14px}.c-badge.c-primary{background:var(--sd-primary-light);color:var(--sd-primary-dark)}.c-badge.c-primary.c-badge--tag{border:1px solid var(--sd-primary-dark)}.c-badge.c-secondary{background:var(--sd-secondary-light);color:var(--sd-secondary-dark)}.c-badge.c-secondary.c-badge--tag{border:1px solid var(--sd-secondary-dark)}.c-badge.c-info{background:var(--sd-info-light);color:var(--sd-info-dark)}.c-badge.c-info.c-badge--tag{border:1px solid var(--sd-info-dark)}.c-badge.c-warning{background:var(--sd-warning-light);color:var(--sd-warning-dark)}.c-badge.c-warning.c-badge--tag{border:1px solid var(--sd-warning-dark)}.c-badge.c-success{background:var(--sd-success-light);color:var(--sd-success-dark)}.c-badge.c-success.c-badge--tag{border:1px solid var(--sd-success-dark)}.c-badge.c-error{background:var(--sd-error-light);color:var(--sd-error-dark)}.c-badge.c-error.c-badge--tag{border:1px solid var(--sd-error-dark)}.c-badge.c-badge--tag{border-radius:4px;padding:1px 7px}.c-badge.c-badge--tag.c-badge--sm{padding:1px 7px}.c-badge.c-badge--tag.c-badge--md{padding:2px 10px}.c-badge.c-badge--tag.c-badge--lg{padding:4px 12px}.c-badge-icon{min-width:50px}.c-badge-icon .c-material-icon{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:0;line-height:1}.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-dark)}.c-badge-icon .c-material-icon.c-secondary{color:var(--sd-secondary-dark)}.c-badge-icon .c-material-icon.c-info{color:var(--sd-info-dark)}.c-badge-icon .c-material-icon.c-success{color:var(--sd-success-dark)}.c-badge-icon .c-material-icon.c-error{color:var(--sd-error-dark)}.c-badge-icon .c-material-icon.c-warning{color:var(--sd-warning-dark)}.c-badge-description{color:var(--sd-text-secondary)}:host [role=button]:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:2px;border-radius:4px}::ng-deep .sd-multiline-tooltip{white-space:pre-line}\n"] }]
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], primary: [{ type: i0.Input, args: [{ isSignal: true, alias: "primary", required: false }] }], secondary: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondary", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }], info: [{ type: i0.Input, args: [{ isSignal: true, alias: "info", required: false }] }], warning: [{ type: i0.Input, args: [{ isSignal: true, alias: "warning", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], fontSet: [{ type: i0.Input, args: [{ isSignal: true, alias: "fontSet", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], click: [{
                 type: Output
             }] } });

package/fesm2022/sdcorejs-angular-components-badge.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sdcorejs-angular-components-badge.mjs","sources":["../../../projects/sdcorejs-angular/components/badge/src/badge.component.ts","../../../projects/sdcorejs-angular/components/badge/src/badge.component.html","../../../projects/sdcorejs-angular/components/badge/sdcorejs-angular-components-badge.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Output, booleanAttribute, computed, input } from '@angular/core';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { SdIcon, type SdIconSet } from '@sdcorejs/angular/modules/icon';\nimport { Color, Size } from '@sdcorejs/utils/models';\n\n// Export các Type để dùng chung\nexport type SdBadgeType = 'tag' \| 'round' \| 'icon';\n\n@Component({\n selector: 'sd-badge',\n templateUrl: './badge.component.html',\n styleUrl: './badge.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n imports: [CommonModule, SdIcon, MatTooltipModule],\n})\nexport class SdBadge {\n defaultIcon = 'fiber_manual_record';\n\n // ==========================================\n // 1. SIGNAL INPUTS\n // ==========================================\n type = input<SdBadgeType, SdBadgeType \| undefined \| null>('icon', {\n transform: value => value \|\| 'icon',\n });\n\n color = input<Color, Color \| undefined \| null>('secondary', {\n transform: value => value \|\| 'secondary',\n });\n\n primary = input(false, { transform: booleanAttribute });\n secondary = input(false, { transform: booleanAttribute });\n success = input(false, { transform: booleanAttribute });\n info = input(false, { transform: booleanAttribute });\n warning = input(false, { transform: booleanAttribute });\n error = input(false, { transform: booleanAttribute });\n\n fontSet = input<SdIconSet \| undefined, SdIconSet \| undefined \| null>(undefined, {\n transform: value => value ?? undefined,\n });\n\n title = input<string \| number \| undefined \| null>();\n description = input<string \| undefined \| null>();\n tooltip = input<string \| undefined \| null>();\n icon = input<string \| undefined \| null>();\n\n size = input<Size, Size \| undefined \| null>('sm', {\n transform: value => value \|\| 'sm',\n });\n\n // ==========================================\n // 2. OUTPUT\n // ==========================================\n // why: the template reads EventEmitter.observed to expose pointer styling only when a click listener exists.\n @Output() readonly click = new EventEmitter<Event>();\n\n onClick = (event: Event) => {\n // why: chỉ nuốt event khi thực sự có consumer lắng nghe. Trước đây badge luôn stopPropagation\n // nên khi đặt badge bên trong một control cha (vd <a> của tab-router) thì click không bao giờ\n // tới cha — buộc cha phải nhân bản handler lên chính badge, tạo interactive lồng interactive.\n if (!this.click.observed) return;\n event.stopPropagation();\n this.click.emit(event);\n };\n\n // why: badge clickable trước đây là <div (click)> + aria-hidden=\"true\" — vừa không nhận focus\n // bàn phím vừa biến mất khỏi accessibility tree, tệ hơn là không làm gì. Nay khi có consumer\n // lắng nghe (click) thì badge nhận role=\"button\" + tabindex=\"0\" và Enter/Space chạy đúng như click.\n onActivateKey = (event: Event) => {\n // why: chặn hành vi mặc định của Space (cuộn trang) trước khi kích hoạt.\n event.preventDefault();\n this.onClick(event);\n };\n\n // ==========================================\n // 3. COMPUTED STATE\n // ==========================================\n\n effectiveColor = computed(() => {\n if (this.primary()) return 'primary';\n if (this.secondary()) return 'secondary';\n if (this.success()) return 'success';\n if (this.info()) return 'info';\n if (this.warning()) return 'warning';\n if (this.error()) return 'error';\n return this.color();\n });\n\n baseColorClasses = computed(() => {\n const c = this.effectiveColor();\n return {\n 'c-primary': c === 'primary',\n 'c-secondary': c === 'secondary',\n 'c-info': c === 'info',\n 'c-success': c === 'success',\n 'c-warning': c === 'warning',\n 'c-error': c === 'error',\n };\n });\n\n iconColorClasses = computed(() => {\n const c = this.effectiveColor();\n return {\n 'c-primary': c === 'primary',\n 'c-secondary': c === 'secondary',\n 'c-info': c === 'info',\n 'c-success': c === 'success',\n 'c-warning': c === 'warning',\n 'c-error': c === 'error',\n };\n });\n\n iconSizeAndFontClasses = computed(() => {\n const s = this.size();\n return {\n 'c-sm': s === 'sm',\n 'c-md': s === 'md',\n 'c-lg': s === 'lg',\n };\n });\n\n iconCssSize = computed(() => {\n const s = this.size();\n if (s === 'md') return '18px';\n if (s === 'lg') return '24px';\n return '16px';\n });\n\n // why: keep container size classes separate from icon element size classes.\n containerSizeClasses = computed(() => {\n const s = this.size();\n return {\n 'c-badge--sm': s === 'sm',\n 'c-badge--md': s === 'md',\n 'c-badge--lg': s === 'lg',\n };\n });\n\n // GỘP CLASS CHO BADGE TYPE = 'TAG' (cũng dùng lại cho 'ROUND' khi có icon)\n tagIconCombinedClasses = computed(() => ({\n ...this.iconSizeAndFontClasses(),\n ...this.baseColorClasses(),\n }));\n\n // GỘP CLASS CHO CONTAINER round/tag (color tint + size modifier)\n containerCombinedClasses = computed(() => ({\n ...this.baseColorClasses(),\n ...this.containerSizeClasses(),\n }));\n\n // GỘP CLASS CHO BADGE TYPE = 'ICON'\n iconCombinedClasses = computed(() => ({\n ...this.iconSizeAndFontClasses(),\n ...this.iconColorClasses(),\n }));\n}\n","@let _type = type();\n@let _tooltip = tooltip();\n@let _title = title();\n@let _description = description();\n@let _fontSet = fontSet();\n@let _iconCssSize = iconCssSize();\n@let iconName = icon() \|\| defaultIcon;\n@let isPointer = click.observed;\n@let _role = isPointer ? 'button' : null;\n@let _tabIndex = isPointer ? 0 : null;\n\n<!-- why: bỏ aria-hidden=\"true\" khỏi cả ba nhánh. Badge mang nội dung thật (title/description) nên\n aria-hidden xoá luôn nội dung đó khỏi accessibility tree; khi badge còn clickable thì nó vừa\n nhận focus vừa không đọc được gì — tệ hơn là không làm gì. Nay role/tabindex/keydown chỉ bật\n khi thực sự có consumer lắng nghe (click). -->\n@if (_type === 'round') {\n <div\n class=\"c-badge\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"_tooltip \|\| ''\"\n matTooltipClass=\"sd-multiline-tooltip\"\n [ngClass]=\"containerCombinedClasses()\"\n [class.c-badge--has-icon]=\"!!icon()\"\n [class.pointer]=\"isPointer\"\n [attr.role]=\"_role\"\n [attr.tabindex]=\"_tabIndex\"\n (click)=\"onClick($event)\"\n (keydown.enter)=\"onActivateKey($event)\"\n (keydown.space)=\"onActivateKey($event)\">\n @if (icon()) {\n <sd-icon\n class=\"c-material-icon\"\n [name]=\"iconName\"\n [fontSet]=\"_fontSet\"\n [size]=\"_iconCssSize\"\n [ngClass]=\"tagIconCombinedClasses()\"></sd-icon>\n }\n <span class=\"c-badge-title\">{{ _title }}</span>\n </div>\n} @else if (_type === 'tag') {\n <div\n class=\"c-badge c-badge--tag\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"_tooltip \|\| ''\"\n matTooltipClass=\"sd-multiline-tooltip\"\n [ngClass]=\"containerCombinedClasses()\"\n [class.pointer]=\"isPointer\"\n [attr.role]=\"_role\"\n [attr.tabindex]=\"_tabIndex\"\n (click)=\"onClick($event)\"\n (keydown.enter)=\"onActivateKey($event)\"\n (keydown.space)=\"onActivateKey($event)\">\n <div class=\"c-icon d-flex align-items-center\">\n @if (icon()) {\n <sd-icon\n class=\"c-material-icon mr-4\"\n [name]=\"iconName\"\n [fontSet]=\"_fontSet\"\n [size]=\"_iconCssSize\"\n [ngClass]=\"tagIconCombinedClasses()\"></sd-icon>\n }\n <div class=\"d-flex flex-column align-items-start\">\n <span class=\"T14R c-badge-title\">{{ _title }}</span>\n @if (_description) {\n <span class=\"T12R c-badge-description\">{{ _description }}</span>\n }\n </div>\n </div>\n </div>\n} @else {\n <div\n class=\"d-flex\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"_tooltip \|\| ''\"\n matTooltipClass=\"sd-multiline-tooltip\"\n [class.c-badge-icon]=\"_type === 'icon'\"\n [class.pointer]=\"isPointer\"\n [attr.role]=\"_role\"\n [attr.tabindex]=\"_tabIndex\"\n (click)=\"onClick($event)\"\n (keydown.enter)=\"onActivateKey($event)\"\n (keydown.space)=\"onActivateKey($event)\">\n <div class=\"c-icon d-flex align-items-center\">\n <sd-icon\n class=\"c-material-icon mr-4\"\n [name]=\"iconName\"\n [fontSet]=\"_fontSet\"\n [size]=\"_iconCssSize\"\n [ngClass]=\"iconCombinedClasses()\"></sd-icon>\n <div class=\"d-flex flex-column\">\n <span class=\"T14R c-badge-title\">{{ _title }}</span>\n @if (_description) {\n <span class=\"T10R c-badge-description\">{{ _description }}</span>\n }\n </div>\n </div>\n </div>\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"sdcorejs-angular-components-badge.mjs","sources":["../../../projects/sdcorejs-angular/components/badge/src/badge.component.ts","../../../projects/sdcorejs-angular/components/badge/src/badge.component.html","../../../projects/sdcorejs-angular/components/badge/sdcorejs-angular-components-badge.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Output, booleanAttribute, computed, input } from '@angular/core';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { SdIcon, type SdIconSet } from '@sdcorejs/angular/modules/icon';\nimport { Color, Size } from '@sdcorejs/utils/models';\n\n// Export các Type để dùng chung\nexport type SdBadgeType = 'tag' \| 'round' \| 'icon';\n\n@Component({\n selector: 'sd-badge',\n templateUrl: './badge.component.html',\n styleUrl: './badge.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n imports: [CommonModule, SdIcon, MatTooltipModule],\n})\nexport class SdBadge {\n defaultIcon = 'fiber_manual_record';\n\n // ==========================================\n // 1. SIGNAL INPUTS\n // ==========================================\n type = input<SdBadgeType, SdBadgeType \| undefined \| null>('icon', {\n transform: value => value \|\| 'icon',\n });\n\n color = input<Color, Color \| undefined \| null>('secondary', {\n transform: value => value \|\| 'secondary',\n });\n\n primary = input(false, { transform: booleanAttribute });\n secondary = input(false, { transform: booleanAttribute });\n success = input(false, { transform: booleanAttribute });\n info = input(false, { transform: booleanAttribute });\n warning = input(false, { transform: booleanAttribute });\n error = input(false, { transform: booleanAttribute });\n\n fontSet = input<SdIconSet \| undefined, SdIconSet \| undefined \| null>(undefined, {\n transform: value => value ?? undefined,\n });\n\n title = input<string \| number \| undefined \| null>();\n description = input<string \| undefined \| null>();\n tooltip = input<string \| undefined \| null>();\n icon = input<string \| undefined \| null>();\n\n size = input<Size, Size \| undefined \| null>('sm', {\n transform: value => value \|\| 'sm',\n });\n\n // ==========================================\n // 2. OUTPUT\n // ==========================================\n // why: the template reads EventEmitter.observed to expose pointer styling only when a click listener exists.\n @Output() readonly click = new EventEmitter<Event>();\n\n onClick = (event: Event) => {\n // why: chỉ nuốt event khi thực sự có consumer lắng nghe. Trước đây badge luôn stopPropagation\n // nên khi đặt badge bên trong một control cha (vd <a> của tab-router) thì click không bao giờ\n // tới cha — buộc cha phải nhân bản handler lên chính badge, tạo interactive lồng interactive.\n if (!this.click.observed) return;\n event.stopPropagation();\n this.click.emit(event);\n };\n\n // why: badge clickable trước đây là <div (click)> + aria-hidden=\"true\" — vừa không nhận focus\n // bàn phím vừa biến mất khỏi accessibility tree, tệ hơn là không làm gì. Nay khi có consumer\n // lắng nghe (click) thì badge nhận role=\"button\" + tabindex=\"0\" và Enter/Space chạy đúng như click.\n onActivateKey = (event: Event) => {\n // why: chặn hành vi mặc định của Space (cuộn trang) trước khi kích hoạt.\n event.preventDefault();\n this.onClick(event);\n };\n\n // ==========================================\n // 3. COMPUTED STATE\n // ==========================================\n\n effectiveColor = computed(() => {\n if (this.primary()) return 'primary';\n if (this.secondary()) return 'secondary';\n if (this.success()) return 'success';\n if (this.info()) return 'info';\n if (this.warning()) return 'warning';\n if (this.error()) return 'error';\n return this.color();\n });\n\n accessibleName = computed(() => {\n const visibleText = [this.title(), this.description()]\n .filter(value => value !== undefined && value !== null && String(value).trim() !== '')\n .map(value => String(value).trim())\n .join(' ');\n if (visibleText) return visibleText;\n\n const tooltip = this.tooltip()?.trim();\n if (tooltip) return tooltip;\n\n return (this.icon() \|\| this.defaultIcon).replace(/[_-]+/g, ' ').trim();\n });\n\n baseColorClasses = computed(() => {\n const c = this.effectiveColor();\n return {\n 'c-primary': c === 'primary',\n 'c-secondary': c === 'secondary',\n 'c-info': c === 'info',\n 'c-success': c === 'success',\n 'c-warning': c === 'warning',\n 'c-error': c === 'error',\n };\n });\n\n iconColorClasses = computed(() => {\n const c = this.effectiveColor();\n return {\n 'c-primary': c === 'primary',\n 'c-secondary': c === 'secondary',\n 'c-info': c === 'info',\n 'c-success': c === 'success',\n 'c-warning': c === 'warning',\n 'c-error': c === 'error',\n };\n });\n\n iconSizeAndFontClasses = computed(() => {\n const s = this.size();\n return {\n 'c-sm': s === 'sm',\n 'c-md': s === 'md',\n 'c-lg': s === 'lg',\n };\n });\n\n iconCssSize = computed(() => {\n const s = this.size();\n if (s === 'md') return '18px';\n if (s === 'lg') return '24px';\n return '16px';\n });\n\n // why: keep container size classes separate from icon element size classes.\n containerSizeClasses = computed(() => {\n const s = this.size();\n return {\n 'c-badge--sm': s === 'sm',\n 'c-badge--md': s === 'md',\n 'c-badge--lg': s === 'lg',\n };\n });\n\n // GỘP CLASS CHO BADGE TYPE = 'TAG' (cũng dùng lại cho 'ROUND' khi có icon)\n tagIconCombinedClasses = computed(() => ({\n ...this.iconSizeAndFontClasses(),\n ...this.baseColorClasses(),\n }));\n\n // GỘP CLASS CHO CONTAINER round/tag (color tint + size modifier)\n containerCombinedClasses = computed(() => ({\n ...this.baseColorClasses(),\n ...this.containerSizeClasses(),\n }));\n\n // GỘP CLASS CHO BADGE TYPE = 'ICON'\n iconCombinedClasses = computed(() => ({\n ...this.iconSizeAndFontClasses(),\n ...this.iconColorClasses(),\n }));\n}\n","@let _type = type();\n@let _tooltip = tooltip();\n@let _title = title();\n@let _description = description();\n@let _fontSet = fontSet();\n@let _iconCssSize = iconCssSize();\n@let _accessibleName = accessibleName();\n@let iconName = icon() \|\| defaultIcon;\n@let isPointer = click.observed;\n@let _role = isPointer ? 'button' : null;\n@let _tabIndex = isPointer ? 0 : null;\n\n<!-- why: bỏ aria-hidden=\"true\" khỏi cả ba nhánh. Badge mang nội dung thật (title/description) nên\n aria-hidden xoá luôn nội dung đó khỏi accessibility tree; khi badge còn clickable thì nó vừa\n nhận focus vừa không đọc được gì — tệ hơn là không làm gì. Nay role/tabindex/keydown chỉ bật\n khi thực sự có consumer lắng nghe (click). -->\n@if (_type === 'round') {\n <div\n class=\"c-badge\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"_tooltip \|\| ''\"\n matTooltipClass=\"sd-multiline-tooltip\"\n [ngClass]=\"containerCombinedClasses()\"\n [class.c-badge--has-icon]=\"!!icon()\"\n [class.pointer]=\"isPointer\"\n [attr.role]=\"_role\"\n [attr.tabindex]=\"_tabIndex\"\n [attr.aria-label]=\"isPointer ? _accessibleName : null\"\n (click)=\"onClick($event)\"\n (keydown.enter)=\"onActivateKey($event)\"\n (keydown.space)=\"onActivateKey($event)\">\n @if (icon()) {\n <sd-icon\n class=\"c-material-icon\"\n [name]=\"iconName\"\n [fontSet]=\"_fontSet\"\n [size]=\"_iconCssSize\"\n [ngClass]=\"tagIconCombinedClasses()\"></sd-icon>\n }\n <span class=\"c-badge-title\">{{ _title }}</span>\n </div>\n} @else if (_type === 'tag') {\n <div\n class=\"c-badge c-badge--tag\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"_tooltip \|\| ''\"\n matTooltipClass=\"sd-multiline-tooltip\"\n [ngClass]=\"containerCombinedClasses()\"\n [class.pointer]=\"isPointer\"\n [attr.role]=\"_role\"\n [attr.tabindex]=\"_tabIndex\"\n [attr.aria-label]=\"isPointer ? _accessibleName : null\"\n (click)=\"onClick($event)\"\n (keydown.enter)=\"onActivateKey($event)\"\n (keydown.space)=\"onActivateKey($event)\">\n <div class=\"c-icon d-flex align-items-center\">\n @if (icon()) {\n <sd-icon\n class=\"c-material-icon mr-4\"\n [name]=\"iconName\"\n [fontSet]=\"_fontSet\"\n [size]=\"_iconCssSize\"\n [ngClass]=\"tagIconCombinedClasses()\"></sd-icon>\n }\n <div class=\"d-flex flex-column align-items-start\">\n <span class=\"T14R c-badge-title\">{{ _title }}</span>\n @if (_description) {\n <span class=\"T12R c-badge-description\">{{ _description }}</span>\n }\n </div>\n </div>\n </div>\n} @else {\n <div\n class=\"d-flex\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"_tooltip \|\| ''\"\n matTooltipClass=\"sd-multiline-tooltip\"\n [class.c-badge-icon]=\"_type === 'icon'\"\n [class.pointer]=\"isPointer\"\n [attr.role]=\"_role\"\n [attr.tabindex]=\"_tabIndex\"\n [attr.aria-label]=\"isPointer ? _accessibleName : null\"\n (click)=\"onClick($event)\"\n (keydown.enter)=\"onActivateKey($event)\"\n (keydown.space)=\"onActivateKey($event)\">\n <div class=\"c-icon d-flex align-items-center\">\n <sd-icon\n class=\"c-material-icon mr-4\"\n [name]=\"iconName\"\n [fontSet]=\"_fontSet\"\n [size]=\"_iconCssSize\"\n [ngClass]=\"iconCombinedClasses()\"></sd-icon>\n <div class=\"d-flex flex-column\">\n <span class=\"T14R c-badge-title\">{{ _title }}</span>\n @if (_description) {\n <span class=\"T10R c-badge-description\">{{ _description }}</span>\n }\n </div>\n </div>\n </div>\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sdcorejs-angular-components-operator.mjs CHANGED Viewed

@@ -62,11 +62,11 @@ class SdOperator {
         this.model.set(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdOperator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdOperator, isStandalone: true, selector: "sd-operator", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, operators: { classPropertyName: "operators", publicName: "operators", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "@let _model = model();\n\n<button\n  type=\"button\"\n  class=\"c-op-trigger\"\n  [disabled]=\"disabled()\"\n  [matMenuTriggerFor]=\"menu\"\n  [matTooltip]=\"currentLabel()\"\n  matTooltipPosition=\"above\"\n  [attr.data-autoId]=\"autoId() ?? null\">\n  <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\n</button>\n\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\n  @for (item of items(); track item.value) {\n    <button\n      type=\"button\"\n      mat-menu-item\n      class=\"c-op-row\"\n      [class.c-op-active]=\"item.value === _model\"\n      (click)=\"select(item.value)\">\n      <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\n      <span class=\"c-op-label\">{{ item.display }}</span>\n      <span class=\"c-op-code\">{{ item.value }}</span>\n    </button>\n  }\n</mat-menu>\n", styles: [".c-op-trigger{display:inline-flex;align-items:center;justify-content:center;padding:4px;border:none;background:transparent;color:var(--sd-primary, #0f766e);cursor:pointer;border-radius:4px}.c-op-trigger:hover:not([disabled]){background:#0000000a}.c-op-trigger[disabled]{color:#00000042;cursor:default}.c-op-icon{display:inline-flex;align-items:center}.c-op-icon svg{display:block}::ng-deep .c-op-menu .mat-mdc-menu-item-text{display:flex;align-items:center;gap:8px;width:100%}::ng-deep .c-op-menu .c-op-icon{display:inline-flex;align-items:center;flex:0 0 auto}::ng-deep .c-op-menu .c-op-icon svg{display:block}::ng-deep .c-op-menu .c-op-label{flex:1 1 auto}::ng-deep .c-op-menu .c-op-code{margin-left:auto;padding-left:16px;color:var(--sd-text-muted, #7a7a7a);font-size:11px;font-family:monospace}::ng-deep .c-op-menu .c-op-row.c-op-active{background:var(--sd-primary-light, rgba(15, 118, 110, .08))}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdOperator, isStandalone: true, selector: "sd-operator", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, operators: { classPropertyName: "operators", publicName: "operators", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "@let _model = model();\n\n<button\n  type=\"button\"\n  class=\"c-op-trigger\"\n  [disabled]=\"disabled()\"\n  [matMenuTriggerFor]=\"menu\"\n  [matTooltip]=\"currentLabel()\"\n  matTooltipPosition=\"above\"\n  [attr.data-autoId]=\"autoId() ?? null\">\n  <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\n</button>\n\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\n  @for (item of items(); track item.value) {\n    <button\n      type=\"button\"\n      mat-menu-item\n      class=\"c-op-row\"\n      [class.c-op-active]=\"item.value === _model\"\n      (click)=\"select(item.value)\">\n      <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\n      <span class=\"c-op-text\">\n        <span class=\"c-op-label\">{{ item.display }}</span>\n        <span class=\"c-op-code\">{{ item.value }}</span>\n      </span>\n    </button>\n  }\n</mat-menu>\n", styles: [".c-op-trigger{display:inline-flex;align-items:center;justify-content:center;padding:4px;border:none;background:transparent;color:var(--sd-primary, #0f766e);cursor:pointer;border-radius:4px}.c-op-trigger:hover:not([disabled]){background:#0000000a}.c-op-trigger[disabled]{color:#00000042;cursor:default}.c-op-icon{display:inline-flex;align-items:center}.c-op-icon svg{display:block}::ng-deep .c-op-menu .c-op-row.mat-mdc-menu-item{min-height:0;height:auto;padding-top:6px;padding-bottom:6px;line-height:normal}::ng-deep .c-op-menu .mat-mdc-menu-item-text{display:flex;align-items:center;gap:8px;width:100%}::ng-deep .c-op-menu .c-op-icon{display:inline-flex;align-items:center;flex:0 0 auto}::ng-deep .c-op-menu .c-op-icon svg{display:block}::ng-deep .c-op-menu .c-op-text{display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;min-width:0}::ng-deep .c-op-menu .c-op-label{font-weight:400;line-height:1.3;white-space:nowrap}::ng-deep .c-op-menu .c-op-code{color:var(--sd-text-muted, #7a7a7a);font-size:11px;line-height:1.2;font-family:monospace;white-space:nowrap}::ng-deep .c-op-menu .c-op-row.c-op-active{background:var(--sd-primary-light, rgba(15, 118, 110, .08))}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { 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: "21.2.17", ngImport: i0, type: SdOperator, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-operator', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatMenuModule, MatTooltipModule], template: "@let _model = model();\n\n<button\n  type=\"button\"\n  class=\"c-op-trigger\"\n  [disabled]=\"disabled()\"\n  [matMenuTriggerFor]=\"menu\"\n  [matTooltip]=\"currentLabel()\"\n  matTooltipPosition=\"above\"\n  [attr.data-autoId]=\"autoId() ?? null\">\n  <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\n</button>\n\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\n  @for (item of items(); track item.value) {\n    <button\n      type=\"button\"\n      mat-menu-item\n      class=\"c-op-row\"\n      [class.c-op-active]=\"item.value === _model\"\n      (click)=\"select(item.value)\">\n      <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\n      <span class=\"c-op-label\">{{ item.display }}</span>\n      <span class=\"c-op-code\">{{ item.value }}</span>\n    </button>\n  }\n</mat-menu>\n", styles: [".c-op-trigger{display:inline-flex;align-items:center;justify-content:center;padding:4px;border:none;background:transparent;color:var(--sd-primary, #0f766e);cursor:pointer;border-radius:4px}.c-op-trigger:hover:not([disabled]){background:#0000000a}.c-op-trigger[disabled]{color:#00000042;cursor:default}.c-op-icon{display:inline-flex;align-items:center}.c-op-icon svg{display:block}::ng-deep .c-op-menu .mat-mdc-menu-item-text{display:flex;align-items:center;gap:8px;width:100%}::ng-deep .c-op-menu .c-op-icon{display:inline-flex;align-items:center;flex:0 0 auto}::ng-deep .c-op-menu .c-op-icon svg{display:block}::ng-deep .c-op-menu .c-op-label{flex:1 1 auto}::ng-deep .c-op-menu .c-op-code{margin-left:auto;padding-left:16px;color:var(--sd-text-muted, #7a7a7a);font-size:11px;font-family:monospace}::ng-deep .c-op-menu .c-op-row.c-op-active{background:var(--sd-primary-light, rgba(15, 118, 110, .08))}\n"] }]
+            args: [{ selector: 'sd-operator', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatMenuModule, MatTooltipModule], template: "@let _model = model();\n\n<button\n  type=\"button\"\n  class=\"c-op-trigger\"\n  [disabled]=\"disabled()\"\n  [matMenuTriggerFor]=\"menu\"\n  [matTooltip]=\"currentLabel()\"\n  matTooltipPosition=\"above\"\n  [attr.data-autoId]=\"autoId() ?? null\">\n  <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\n</button>\n\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\n  @for (item of items(); track item.value) {\n    <button\n      type=\"button\"\n      mat-menu-item\n      class=\"c-op-row\"\n      [class.c-op-active]=\"item.value === _model\"\n      (click)=\"select(item.value)\">\n      <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\n      <span class=\"c-op-text\">\n        <span class=\"c-op-label\">{{ item.display }}</span>\n        <span class=\"c-op-code\">{{ item.value }}</span>\n      </span>\n    </button>\n  }\n</mat-menu>\n", styles: [".c-op-trigger{display:inline-flex;align-items:center;justify-content:center;padding:4px;border:none;background:transparent;color:var(--sd-primary, #0f766e);cursor:pointer;border-radius:4px}.c-op-trigger:hover:not([disabled]){background:#0000000a}.c-op-trigger[disabled]{color:#00000042;cursor:default}.c-op-icon{display:inline-flex;align-items:center}.c-op-icon svg{display:block}::ng-deep .c-op-menu .c-op-row.mat-mdc-menu-item{min-height:0;height:auto;padding-top:6px;padding-bottom:6px;line-height:normal}::ng-deep .c-op-menu .mat-mdc-menu-item-text{display:flex;align-items:center;gap:8px;width:100%}::ng-deep .c-op-menu .c-op-icon{display:inline-flex;align-items:center;flex:0 0 auto}::ng-deep .c-op-menu .c-op-icon svg{display:block}::ng-deep .c-op-menu .c-op-text{display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;min-width:0}::ng-deep .c-op-menu .c-op-label{font-weight:400;line-height:1.3;white-space:nowrap}::ng-deep .c-op-menu .c-op-code{color:var(--sd-text-muted, #7a7a7a);font-size:11px;line-height:1.2;font-family:monospace;white-space:nowrap}::ng-deep .c-op-menu .c-op-row.c-op-active{background:var(--sd-primary-light, rgba(15, 118, 110, .08))}\n"] }]
         }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], operators: [{ type: i0.Input, args: [{ isSignal: true, alias: "operators", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], autoId: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], trigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenuTrigger), { isSignal: true }] }] } });
 /**

package/fesm2022/sdcorejs-angular-components-operator.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sdcorejs-angular-components-operator.mjs","sources":["../../../projects/sdcorejs-angular/components/operator/src/operator.component.ts","../../../projects/sdcorejs-angular/components/operator/src/operator.component.html","../../../projects/sdcorejs-angular/components/operator/sdcorejs-angular-components-operator.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, booleanAttribute, computed, inject, input, model, viewChild } from '@angular/core';\nimport { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { OPERATORS } from '@sdcorejs/utils/constants';\nimport { Operator } from '@sdcorejs/utils/models';\nimport { I18nService } from '@sdcorejs/angular/i18n';\n\ninterface OperatorItem {\n value: Operator;\n icon: SafeHtml;\n display: string;\n}\n\n@Component({\n selector: 'sd-operator',\n templateUrl: './operator.component.html',\n styleUrl: './operator.component.scss',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [MatMenuModule, MatTooltipModule],\n})\nexport class SdOperator {\n // Inner SVG markup (hình phễu) dùng khi chưa chọn operator.\n static readonly FALLBACK_ICON = '<path d=\"M4 5h16l-6.5 7.5V19l-3 2v-8.5z\"/>';\n\n readonly #i18n = inject(I18nService);\n readonly #sanitizer = inject(DomSanitizer);\n\n /** Operator hiện tại — binding hai chiều [(model)]. /\n model = model<Operator \| undefined>();\n\n /* Danh sách operator cho phép, giữ nguyên thứ tự truyền vào. /\n operators = input<Operator[]>([]);\n\n /* Vô hiệu hóa trigger (không mở được menu). /\n disabled = input(false, { transform: booleanAttribute });\n\n /* data-autoId cho e2e selector. /\n autoId = input<string>();\n\n /* Allowed operators map sang { value, icon, display } theo thứ tự input. /\n readonly items = computed<OperatorItem[]>(() => {\n const out: OperatorItem[] = [];\n for (const value of this.operators()) {\n const r = this.#resolve(value);\n if (!r) continue;\n out.push({ value, icon: this.#svg(r.icon), display: r.display });\n }\n return out;\n });\n\n /* Icon SVG ở trigger — fallback phễu khi model chưa set / không tìm thấy. /\n readonly currentIcon = computed<SafeHtml>(() => {\n return this.#svg(this.#resolve(this.model())?.icon ?? SdOperator.FALLBACK_ICON);\n });\n\n /* Tooltip = i18n label của operator hiện tại ('' khi chưa chọn). /\n readonly currentLabel = computed<string>(() => this.#resolve(this.model())?.display ?? '');\n\n // Resolve một operator → { inner-svg, nhãn đã dịch } từ bảng OPERATORS dùng chung.\n // why: OPERATORS[].display là i18n KEY ('core.operator..display'), KHÔNG phải text —\n // phải dịch qua I18nService, nếu không UI hiện key thô (code) thay vì nhãn đã dịch.\n #resolve(value: Operator \| undefined): { icon: string; display: string } \| undefined {\n if (value == null) return undefined;\n const entry = OPERATORS.find(o => o.value === value);\n return entry ? { icon: entry.icon, display: this.#i18n.t(entry.display) } : undefined;\n }\n\n // why: OPERATORS.icon là inner SVG (path/line/rect). Bọc <svg> + bypass sanitizer\n // (nguồn là hằng số nội bộ, không phải input người dùng) để Angular không strip svg con.\n #svg(inner: string): SafeHtml {\n return this.#sanitizer.bypassSecurityTrustHtml(\n `<svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">${inner}</svg>`\n );\n }\n\n private readonly trigger = viewChild(MatMenuTrigger);\n\n /** Open the operator menu programmatically (used by the query-bar build flow). /\n open(): void {\n this.trigger()?.openMenu();\n }\n\n /* Chọn operator từ menu. /\n select(value: Operator): void {\n this.model.set(value);\n }\n}\n","@let _model = model();\n\n<button\n type=\"button\"\n class=\"c-op-trigger\"\n [disabled]=\"disabled()\"\n [matMenuTriggerFor]=\"menu\"\n [matTooltip]=\"currentLabel()\"\n matTooltipPosition=\"above\"\n [attr.data-autoId]=\"autoId() ?? null\">\n <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\n</button>\n\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\n @for (item of items(); track item.value) {\n <button\n type=\"button\"\n mat-menu-item\n class=\"c-op-row\"\n [class.c-op-active]=\"item.value === _model\"\n (click)=\"select(item.value)\">\n <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\n <span class=\"c-op-label\">{{ item.display }}</span>\n <span class=\"c-op-code\">{{ item.value }}</span>\n </button>\n }\n</mat-menu>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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~~szBA2BA~~,EAAA,MAAA,EAAA,CAAA,~~y4BAAA~~,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,~~EDPY~~,aAAa,6vBAAE,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAE9B,UAAU,EAAA,UAAA,EAAA,CAAA;kBARtB,SAAS;+BACE,aAAa,EAAA,UAAA,EAGX,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,aAAa,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,~~szBAAA~~,EAAA,MAAA,EAAA,CAAA,~~y4BAAA~~,CAAA,EAAA;6fAyDL,cAAc,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AE7ErD;;AAEG;;;;"}
1	+ {"version":3,"file":"sdcorejs-angular-components-operator.mjs","sources":["../../../projects/sdcorejs-angular/components/operator/src/operator.component.ts","../../../projects/sdcorejs-angular/components/operator/src/operator.component.html","../../../projects/sdcorejs-angular/components/operator/sdcorejs-angular-components-operator.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, booleanAttribute, computed, inject, input, model, viewChild } from '@angular/core';\nimport { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { OPERATORS } from '@sdcorejs/utils/constants';\nimport { Operator } from '@sdcorejs/utils/models';\nimport { I18nService } from '@sdcorejs/angular/i18n';\n\ninterface OperatorItem {\n value: Operator;\n icon: SafeHtml;\n display: string;\n}\n\n@Component({\n selector: 'sd-operator',\n templateUrl: './operator.component.html',\n styleUrl: './operator.component.scss',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [MatMenuModule, MatTooltipModule],\n})\nexport class SdOperator {\n // Inner SVG markup (hình phễu) dùng khi chưa chọn operator.\n static readonly FALLBACK_ICON = '<path d=\"M4 5h16l-6.5 7.5V19l-3 2v-8.5z\"/>';\n\n readonly #i18n = inject(I18nService);\n readonly #sanitizer = inject(DomSanitizer);\n\n /** Operator hiện tại — binding hai chiều [(model)]. /\n model = model<Operator \| undefined>();\n\n /* Danh sách operator cho phép, giữ nguyên thứ tự truyền vào. /\n operators = input<Operator[]>([]);\n\n /* Vô hiệu hóa trigger (không mở được menu). /\n disabled = input(false, { transform: booleanAttribute });\n\n /* data-autoId cho e2e selector. /\n autoId = input<string>();\n\n /* Allowed operators map sang { value, icon, display } theo thứ tự input. /\n readonly items = computed<OperatorItem[]>(() => {\n const out: OperatorItem[] = [];\n for (const value of this.operators()) {\n const r = this.#resolve(value);\n if (!r) continue;\n out.push({ value, icon: this.#svg(r.icon), display: r.display });\n }\n return out;\n });\n\n /* Icon SVG ở trigger — fallback phễu khi model chưa set / không tìm thấy. /\n readonly currentIcon = computed<SafeHtml>(() => {\n return this.#svg(this.#resolve(this.model())?.icon ?? SdOperator.FALLBACK_ICON);\n });\n\n /* Tooltip = i18n label của operator hiện tại ('' khi chưa chọn). /\n readonly currentLabel = computed<string>(() => this.#resolve(this.model())?.display ?? '');\n\n // Resolve một operator → { inner-svg, nhãn đã dịch } từ bảng OPERATORS dùng chung.\n // why: OPERATORS[].display là i18n KEY ('core.operator..display'), KHÔNG phải text —\n // phải dịch qua I18nService, nếu không UI hiện key thô (code) thay vì nhãn đã dịch.\n #resolve(value: Operator \| undefined): { icon: string; display: string } \| undefined {\n if (value == null) return undefined;\n const entry = OPERATORS.find(o => o.value === value);\n return entry ? { icon: entry.icon, display: this.#i18n.t(entry.display) } : undefined;\n }\n\n // why: OPERATORS.icon là inner SVG (path/line/rect). Bọc <svg> + bypass sanitizer\n // (nguồn là hằng số nội bộ, không phải input người dùng) để Angular không strip svg con.\n #svg(inner: string): SafeHtml {\n return this.#sanitizer.bypassSecurityTrustHtml(\n `<svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">${inner}</svg>`\n );\n }\n\n private readonly trigger = viewChild(MatMenuTrigger);\n\n /** Open the operator menu programmatically (used by the query-bar build flow). /\n open(): void {\n this.trigger()?.openMenu();\n }\n\n /* Chọn operator từ menu. /\n select(value: Operator): void {\n this.model.set(value);\n }\n}\n","@let _model = model();\n\n<button\n type=\"button\"\n class=\"c-op-trigger\"\n [disabled]=\"disabled()\"\n [matMenuTriggerFor]=\"menu\"\n [matTooltip]=\"currentLabel()\"\n matTooltipPosition=\"above\"\n [attr.data-autoId]=\"autoId() ?? null\">\n <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\n</button>\n\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\n @for (item of items(); track item.value) {\n <button\n type=\"button\"\n mat-menu-item\n class=\"c-op-row\"\n [class.c-op-active]=\"item.value === _model\"\n (click)=\"select(item.value)\">\n <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\n <span class=\"c-op-text\">\n <span class=\"c-op-label\">{{ item.display }}</span>\n <span class=\"c-op-code\">{{ item.value }}</span>\n </span>\n </button>\n }\n</mat-menu>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sdcorejs-angular-components-section.mjs CHANGED Viewed

@@ -1,7 +1,9 @@
 import * as i0 from '@angular/core';
 import { inject, ElementRef, input, model, booleanAttribute, effect, Component } from '@angular/core';
 import { SdIcon } from '@sdcorejs/angular/modules/icon';
+import { SdTranslatePipe } from '@sdcorejs/angular/i18n';
+const SECTION_INTERACTIVE_SELECTOR = 'a[href], button, input, select, textarea, [role="button"], [role="link"], [contenteditable="true"], [tabindex]';
 // why: id tăng dần để nối aria-controls từ header sang body — mỗi instance cần một id duy nhất.
 let sectionBodyIdSeq = 0;
 class SdSection {
@@ -32,9 +34,22 @@ class SdSection {
             }
         }
     };
-    // why: header là div[role=button] nhưng consumer chiếu nội dung tuỳ ý vào [sdHeaderRight]
-    // (thường là nút bấm). Nếu không lọc theo target thì Enter/Space trên nút của consumer vừa
-    // kích hoạt nút vừa gập section. Chỉ xử lý khi chính header đang giữ focus.
+    onHeaderClick = (event) => {
+        const target = event.target;
+        if (!(target instanceof Element))
+            return;
+        const header = target.closest('.sd-section-header');
+        if (!header || header.closest('sd-section') !== this.#el.nativeElement)
+            return;
+        if (target.closest(SECTION_INTERACTIVE_SELECTOR))
+            return;
+        this.toggleCollapse();
+    };
+    onCollapseButtonClick = (event) => {
+        event.stopPropagation();
+        this.toggleCollapse();
+    };
+    // why: giữ public handler cũ để không làm thay đổi declaration API của component.
     onHeaderKeydown = (event) => {
         if (event.target !== event.currentTarget)
             return;
@@ -43,11 +58,13 @@ class SdSection {
         this.toggleCollapse();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdSection, isStandalone: true, selector: "sd-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, ngImport: i0, template: "@let _hideHeader = hideHeader();\n@let _collapsible = collapsible();\n@let _collapsed = collapsed();\n@let _title = title();\n@let _subTitle = subTitle();\n@let _icon = icon();\n@let _iconColor = iconColor();\n<div class=\"sd-section c-shadow-section\">\n  @if (!_hideHeader) {\n    <!-- why: b\u1ECF aria-hidden=\"true\" \u2014 header ch\u1EE9a title/subTitle v\u00E0 to\u00E0n b\u1ED9 n\u1ED9i dung chi\u1EBFu\n         [sdHeaderLeft]/[sdHeaderRight] (th\u01B0\u1EDDng c\u00F3 n\u00FAt b\u1EA5m). aria-hidden xo\u00E1 t\u1EA5t c\u1EA3 kh\u1ECFi\n         accessibility tree trong khi v\u00F9ng n\u00E0y v\u1EABn nh\u1EADn click. Khi collapsible, header tr\u1EDF th\u00E0nh\n         n\u00FAt th\u1EADt: role=button + tabindex=0 + aria-expanded/aria-controls + Enter/Space. -->\n    <div\n      class=\"sd-section-header cursor-pointer\"\n      [attr.role]=\"_collapsible ? 'button' : null\"\n      [attr.tabindex]=\"_collapsible ? 0 : null\"\n      [attr.aria-expanded]=\"_collapsible ? !_collapsed : null\"\n      [attr.aria-controls]=\"_collapsible ? bodyId : null\"\n      (click)=\"toggleCollapse()\"\n      (keydown.enter)=\"onHeaderKeydown($event)\"\n      (keydown.space)=\"onHeaderKeydown($event)\">\n      <div class=\"sd-section-header-left\">\n        <ng-content select=\"[sdHeaderLeft]\">\n          @if (_icon) {\n            <span\n              class=\"mr-8 material-icons-outlined\"\n              [class.text-primary]=\"_iconColor === 'primary'\"\n              [class.text-secondary]=\"_iconColor === 'secondary'\"\n              [class.text-error]=\"_iconColor === 'error'\"\n              [class.text-warning]=\"_iconColor === 'warning'\"\n              [class.text-success]=\"_iconColor === 'success'\">\n              {{ _icon }}\n            </span>\n          }\n          <div class=\"sd-section-title-block\">\n            @if (_title) {\n              <div class=\"sd-section-title T16M\">{{ _title }}</div>\n            }\n            @if (_subTitle) {\n              <div class=\"sd-section-subtitle T12R text-secondary\">{{ _subTitle }}</div>\n            }\n          </div>\n        </ng-content>\n      </div>\n      <div class=\"sd-section-header-right\">\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\n        @if (_collapsible) {\n          <div class=\"d-flex align-items-center\">\n            @if (_collapsed) {\n              <sd-icon name=\"expand_more\"></sd-icon>\n            } @else {\n              <sd-icon name=\"expand_less\"></sd-icon>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n  @if (!_collapsed || _hideHeader) {\n    <div class=\"sd-section-body\" [id]=\"bodyId\" [class.sd-section-body--with-header]=\"!_hideHeader\">\n      <ng-content></ng-content>\n    </div>\n  }\n  <div class=\"sd-section-footer\">\n    <div class=\"sd-section-footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n    <div class=\"sd-section-footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n  </div>\n</div>\n", styles: [":host{width:100%;display:block}.sd-section{border-radius:8px;background-color:#fff}.sd-section-header,.sd-section-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:8px 16px}.sd-section-header[role=button]:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:-2px;border-radius:8px}.sd-section-header-left,.sd-section-header-right,.sd-section-footer-left,.sd-section-footer-right{display:flex;align-items:center;min-width:0}.sd-section-header-left,.sd-section-footer-left{flex:1 1 auto}.sd-section-header-right,.sd-section-footer-right{flex:0 0 auto;justify-content:flex-end;gap:8px}.sd-section-footer-right{margin-left:auto}.sd-section-title-block,.sd-section-title,.sd-section-subtitle{min-width:0}.sd-section-body{padding:0}.sd-section-body--with-header,.sd-section-footer{border-top:1px solid #e6e6e6}.sd-section-footer-left:empty,.sd-section-footer-right:empty{display:none}.sd-section-footer:has(.sd-section-footer-left:empty):has(.sd-section-footer-right:empty){display:none}.c-shadow-section{box-shadow:-1px 0 #f2f2f2 inset,1px 0 #f2f2f2 inset,0 1px #f2f2f2 inset,0 -1px #f2f2f2 inset,0 1px 2px #2f31361a}.cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdSection, isStandalone: true, selector: "sd-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { listeners: { "click": "onHeaderClick($event)" } }, ngImport: i0, template: "@let _hideHeader = hideHeader();\n@let _collapsible = collapsible();\n@let _collapsed = collapsed();\n@let _title = title();\n@let _subTitle = subTitle();\n@let _icon = icon();\n@let _iconColor = iconColor();\n<div class=\"sd-section c-shadow-section\">\n  @if (!_hideHeader) {\n    <div class=\"sd-section-header\" [class.cursor-pointer]=\"_collapsible\">\n      <div class=\"sd-section-header-left\">\n        <ng-content select=\"[sdHeaderLeft]\">\n          @if (_icon) {\n            <span\n              class=\"mr-8 material-icons-outlined\"\n              [class.text-primary]=\"_iconColor === 'primary'\"\n              [class.text-secondary]=\"_iconColor === 'secondary'\"\n              [class.text-error]=\"_iconColor === 'error'\"\n              [class.text-warning]=\"_iconColor === 'warning'\"\n              [class.text-success]=\"_iconColor === 'success'\">\n              {{ _icon }}\n            </span>\n          }\n          <div class=\"sd-section-title-block\">\n            @if (_title) {\n              <div class=\"sd-section-title T16M\">{{ _title }}</div>\n            }\n            @if (_subTitle) {\n              <div class=\"sd-section-subtitle T12R text-secondary\">{{ _subTitle }}</div>\n            }\n          </div>\n        </ng-content>\n      </div>\n      <div class=\"sd-section-header-right\">\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\n        @if (_collapsible) {\n          <button\n            type=\"button\"\n            class=\"sd-section-collapse-toggle d-flex align-items-center\"\n            [attr.aria-label]=\"\n              (_collapsed ? 'core.component.section.expand' : 'core.component.section.collapse') | sdTranslate: { title: _title || '' }\n            \"\n            [attr.aria-expanded]=\"!_collapsed\"\n            [attr.aria-controls]=\"bodyId\"\n            (click)=\"onCollapseButtonClick($event)\">\n            <sd-icon aria-hidden=\"true\" [name]=\"_collapsed ? 'expand_more' : 'expand_less'\"></sd-icon>\n          </button>\n        }\n      </div>\n    </div>\n  }\n  @if (!_collapsed || _hideHeader) {\n    <div class=\"sd-section-body\" [id]=\"bodyId\" [class.sd-section-body--with-header]=\"!_hideHeader\">\n      <ng-content></ng-content>\n    </div>\n  }\n  <div class=\"sd-section-footer\">\n    <div class=\"sd-section-footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n    <div class=\"sd-section-footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n  </div>\n</div>\n", styles: [":host{width:100%;display:block}.sd-section{border-radius:8px;background-color:#fff}.sd-section-header,.sd-section-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:8px 16px}.sd-section-collapse-toggle{padding:0;border:0;background:transparent;color:inherit;cursor:pointer;border-radius:8px}.sd-section-collapse-toggle:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:-2px}.sd-section-header-left,.sd-section-header-right,.sd-section-footer-left,.sd-section-footer-right{display:flex;align-items:center;min-width:0}.sd-section-header-left,.sd-section-footer-left{flex:1 1 auto}.sd-section-header-right,.sd-section-footer-right{flex:0 0 auto;justify-content:flex-end;gap:8px}.sd-section-footer-right{margin-left:auto}.sd-section-title-block,.sd-section-title,.sd-section-subtitle{min-width:0}.sd-section-body{padding:0}.sd-section-body--with-header,.sd-section-footer{border-top:1px solid #e6e6e6}.sd-section-footer-left:empty,.sd-section-footer-right:empty{display:none}.sd-section-footer:has(.sd-section-footer-left:empty):has(.sd-section-footer-right:empty){display:none}.c-shadow-section{box-shadow:-1px 0 #f2f2f2 inset,1px 0 #f2f2f2 inset,0 1px #f2f2f2 inset,0 -1px #f2f2f2 inset,0 1px 2px #2f31361a}.cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "pipe", type: SdTranslatePipe, name: "sdTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdSection, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-section', imports: [SdIcon], template: "@let _hideHeader = hideHeader();\n@let _collapsible = collapsible();\n@let _collapsed = collapsed();\n@let _title = title();\n@let _subTitle = subTitle();\n@let _icon = icon();\n@let _iconColor = iconColor();\n<div class=\"sd-section c-shadow-section\">\n  @if (!_hideHeader) {\n    <!-- why: b\u1ECF aria-hidden=\"true\" \u2014 header ch\u1EE9a title/subTitle v\u00E0 to\u00E0n b\u1ED9 n\u1ED9i dung chi\u1EBFu\n         [sdHeaderLeft]/[sdHeaderRight] (th\u01B0\u1EDDng c\u00F3 n\u00FAt b\u1EA5m). aria-hidden xo\u00E1 t\u1EA5t c\u1EA3 kh\u1ECFi\n         accessibility tree trong khi v\u00F9ng n\u00E0y v\u1EABn nh\u1EADn click. Khi collapsible, header tr\u1EDF th\u00E0nh\n         n\u00FAt th\u1EADt: role=button + tabindex=0 + aria-expanded/aria-controls + Enter/Space. -->\n    <div\n      class=\"sd-section-header cursor-pointer\"\n      [attr.role]=\"_collapsible ? 'button' : null\"\n      [attr.tabindex]=\"_collapsible ? 0 : null\"\n      [attr.aria-expanded]=\"_collapsible ? !_collapsed : null\"\n      [attr.aria-controls]=\"_collapsible ? bodyId : null\"\n      (click)=\"toggleCollapse()\"\n      (keydown.enter)=\"onHeaderKeydown($event)\"\n      (keydown.space)=\"onHeaderKeydown($event)\">\n      <div class=\"sd-section-header-left\">\n        <ng-content select=\"[sdHeaderLeft]\">\n          @if (_icon) {\n            <span\n              class=\"mr-8 material-icons-outlined\"\n              [class.text-primary]=\"_iconColor === 'primary'\"\n              [class.text-secondary]=\"_iconColor === 'secondary'\"\n              [class.text-error]=\"_iconColor === 'error'\"\n              [class.text-warning]=\"_iconColor === 'warning'\"\n              [class.text-success]=\"_iconColor === 'success'\">\n              {{ _icon }}\n            </span>\n          }\n          <div class=\"sd-section-title-block\">\n            @if (_title) {\n              <div class=\"sd-section-title T16M\">{{ _title }}</div>\n            }\n            @if (_subTitle) {\n              <div class=\"sd-section-subtitle T12R text-secondary\">{{ _subTitle }}</div>\n            }\n          </div>\n        </ng-content>\n      </div>\n      <div class=\"sd-section-header-right\">\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\n        @if (_collapsible) {\n          <div class=\"d-flex align-items-center\">\n            @if (_collapsed) {\n              <sd-icon name=\"expand_more\"></sd-icon>\n            } @else {\n              <sd-icon name=\"expand_less\"></sd-icon>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n  @if (!_collapsed || _hideHeader) {\n    <div class=\"sd-section-body\" [id]=\"bodyId\" [class.sd-section-body--with-header]=\"!_hideHeader\">\n      <ng-content></ng-content>\n    </div>\n  }\n  <div class=\"sd-section-footer\">\n    <div class=\"sd-section-footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n    <div class=\"sd-section-footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n  </div>\n</div>\n", styles: [":host{width:100%;display:block}.sd-section{border-radius:8px;background-color:#fff}.sd-section-header,.sd-section-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:8px 16px}.sd-section-header[role=button]:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:-2px;border-radius:8px}.sd-section-header-left,.sd-section-header-right,.sd-section-footer-left,.sd-section-footer-right{display:flex;align-items:center;min-width:0}.sd-section-header-left,.sd-section-footer-left{flex:1 1 auto}.sd-section-header-right,.sd-section-footer-right{flex:0 0 auto;justify-content:flex-end;gap:8px}.sd-section-footer-right{margin-left:auto}.sd-section-title-block,.sd-section-title,.sd-section-subtitle{min-width:0}.sd-section-body{padding:0}.sd-section-body--with-header,.sd-section-footer{border-top:1px solid #e6e6e6}.sd-section-footer-left:empty,.sd-section-footer-right:empty{display:none}.sd-section-footer:has(.sd-section-footer-left:empty):has(.sd-section-footer-right:empty){display:none}.c-shadow-section{box-shadow:-1px 0 #f2f2f2 inset,1px 0 #f2f2f2 inset,0 1px #f2f2f2 inset,0 -1px #f2f2f2 inset,0 1px 2px #2f31361a}.cursor-pointer{cursor:pointer}\n"] }]
+            args: [{ selector: 'sd-section', imports: [SdIcon, SdTranslatePipe], host: {
+                        '(click)': 'onHeaderClick($event)',
+                    }, template: "@let _hideHeader = hideHeader();\n@let _collapsible = collapsible();\n@let _collapsed = collapsed();\n@let _title = title();\n@let _subTitle = subTitle();\n@let _icon = icon();\n@let _iconColor = iconColor();\n<div class=\"sd-section c-shadow-section\">\n  @if (!_hideHeader) {\n    <div class=\"sd-section-header\" [class.cursor-pointer]=\"_collapsible\">\n      <div class=\"sd-section-header-left\">\n        <ng-content select=\"[sdHeaderLeft]\">\n          @if (_icon) {\n            <span\n              class=\"mr-8 material-icons-outlined\"\n              [class.text-primary]=\"_iconColor === 'primary'\"\n              [class.text-secondary]=\"_iconColor === 'secondary'\"\n              [class.text-error]=\"_iconColor === 'error'\"\n              [class.text-warning]=\"_iconColor === 'warning'\"\n              [class.text-success]=\"_iconColor === 'success'\">\n              {{ _icon }}\n            </span>\n          }\n          <div class=\"sd-section-title-block\">\n            @if (_title) {\n              <div class=\"sd-section-title T16M\">{{ _title }}</div>\n            }\n            @if (_subTitle) {\n              <div class=\"sd-section-subtitle T12R text-secondary\">{{ _subTitle }}</div>\n            }\n          </div>\n        </ng-content>\n      </div>\n      <div class=\"sd-section-header-right\">\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\n        @if (_collapsible) {\n          <button\n            type=\"button\"\n            class=\"sd-section-collapse-toggle d-flex align-items-center\"\n            [attr.aria-label]=\"\n              (_collapsed ? 'core.component.section.expand' : 'core.component.section.collapse') | sdTranslate: { title: _title || '' }\n            \"\n            [attr.aria-expanded]=\"!_collapsed\"\n            [attr.aria-controls]=\"bodyId\"\n            (click)=\"onCollapseButtonClick($event)\">\n            <sd-icon aria-hidden=\"true\" [name]=\"_collapsed ? 'expand_more' : 'expand_less'\"></sd-icon>\n          </button>\n        }\n      </div>\n    </div>\n  }\n  @if (!_collapsed || _hideHeader) {\n    <div class=\"sd-section-body\" [id]=\"bodyId\" [class.sd-section-body--with-header]=\"!_hideHeader\">\n      <ng-content></ng-content>\n    </div>\n  }\n  <div class=\"sd-section-footer\">\n    <div class=\"sd-section-footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n    <div class=\"sd-section-footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n  </div>\n</div>\n", styles: [":host{width:100%;display:block}.sd-section{border-radius:8px;background-color:#fff}.sd-section-header,.sd-section-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:8px 16px}.sd-section-collapse-toggle{padding:0;border:0;background:transparent;color:inherit;cursor:pointer;border-radius:8px}.sd-section-collapse-toggle:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:-2px}.sd-section-header-left,.sd-section-header-right,.sd-section-footer-left,.sd-section-footer-right{display:flex;align-items:center;min-width:0}.sd-section-header-left,.sd-section-footer-left{flex:1 1 auto}.sd-section-header-right,.sd-section-footer-right{flex:0 0 auto;justify-content:flex-end;gap:8px}.sd-section-footer-right{margin-left:auto}.sd-section-title-block,.sd-section-title,.sd-section-subtitle{min-width:0}.sd-section-body{padding:0}.sd-section-body--with-header,.sd-section-footer{border-top:1px solid #e6e6e6}.sd-section-footer-left:empty,.sd-section-footer-right:empty{display:none}.sd-section-footer:has(.sd-section-footer-left:empty):has(.sd-section-footer-right:empty){display:none}.c-shadow-section{box-shadow:-1px 0 #f2f2f2 inset,1px 0 #f2f2f2 inset,0 1px #f2f2f2 inset,0 -1px #f2f2f2 inset,0 1px 2px #2f31361a}.cursor-pointer{cursor:pointer}\n"] }]
         }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitle", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], hideHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideHeader", required: false }] }] } });
 class SdSectionItem {

package/fesm2022/sdcorejs-angular-components-section.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sdcorejs-angular-components-section.mjs","sources":["../../../projects/sdcorejs-angular/components/section/src/section.component.ts","../../../projects/sdcorejs-angular/components/section/src/section.component.html","../../../projects/sdcorejs-angular/components/section/src/section-item/section-item.component.ts","../../../projects/sdcorejs-angular/components/section/src/section-item/section-item.component.html","../../../projects/sdcorejs-angular/components/section/sdcorejs-angular-components-section.ts"],"sourcesContent":["import { booleanAttribute, Component, effect, ElementRef, inject, input, model } from '@angular/core';\nimport { Color } from '@sdcorejs/utils/models';\nimport { SdIcon } from '@sdcorejs/angular/modules/icon';\n\n// why: id tăng dần để nối aria-controls từ header sang body — mỗi instance cần một id duy nhất.\nlet sectionBodyIdSeq = 0;\n\n@Component({\n selector: 'sd-section',\n templateUrl: './section.component.html',\n styleUrl: './section.component.scss',\n imports: [SdIcon],\n})\nexport class SdSection {\n #el = inject(ElementRef);\n\n title = input<string \| undefined \| null>(undefined);\n subTitle = input<string \| undefined \| null>(undefined);\n icon = input<string \| undefined \| null>(undefined);\n iconColor = input<Color>('primary', { alias: 'iconColor' });\n\n collapsed = model<boolean>(false, { alias: 'collapsed' });\n collapsible = input(false, { transform: booleanAttribute });\n\n hideHeader = input(false, { transform: booleanAttribute });\n\n /** Id của vùng body, để header `aria-controls` trỏ tới khi section collapsible. /\n readonly bodyId = `sd-section-body-${++sectionBodyIdSeq}`;\n\n constructor() {\n effect(() => {\n if (this.title()) {\n this.#el.nativeElement.removeAttribute('title');\n }\n });\n }\n\n toggleCollapse = () => {\n if (this.collapsible()) {\n this.collapsed.set(!this.collapsed());\n } else {\n if (this.collapsed()) {\n this.collapsed.set(false);\n }\n }\n };\n\n // why: header là div[role=button] nhưng consumer chiếu nội dung tuỳ ý vào [sdHeaderRight]\n // (thường là nút bấm). Nếu không lọc theo target thì Enter/Space trên nút của consumer vừa\n // kích hoạt nút vừa gập section. Chỉ xử lý khi chính header đang giữ focus.\n onHeaderKeydown = (event: KeyboardEvent) => {\n if (event.target !== event.currentTarget) return;\n // why: chặn Space cuộn trang trước khi toggle.\n event.preventDefault();\n this.toggleCollapse();\n };\n}\n","@let _hideHeader = hideHeader();\n@let _collapsible = collapsible();\n@let _collapsed = collapsed();\n@let _title = title();\n@let _subTitle = subTitle();\n@let _icon = icon();\n@let _iconColor = iconColor();\n<div class=\"sd-section c-shadow-section\">\n @if (!_hideHeader) {\n <!-- why: bỏ aria-hidden=\"true\" — header chứa title/subTitle và toàn bộ nội dung chiếu\n [sdHeaderLeft]/[sdHeaderRight] (thường có nút bấm). aria-hidden xoá tất cả khỏi\n accessibility tree trong khi vùng này vẫn nhận click. Khi collapsible, header trở thành\n nút thật: role=button + tabindex=0 + aria-expanded/aria-controls + Enter/Space. -->\n <div\n class=\"sd-section-header cursor-pointer\"\n [attr.role]=\"_collapsible ? 'button' : null\"\n [attr.tabindex]=\"_collapsible ? 0 : null\"\n [attr.aria-expanded]=\"_collapsible ? !_collapsed : null\"\n [attr.aria-controls]=\"_collapsible ? bodyId : null\"\n (click)=\"toggleCollapse()\"\n (keydown.enter)=\"onHeaderKeydown($event)\"\n (keydown.space)=\"onHeaderKeydown($event)\">\n <div class=\"sd-section-header-left\">\n <ng-content select=\"[sdHeaderLeft]\">\n @if (_icon) {\n <span\n class=\"mr-8 material-icons-outlined\"\n [class.text-primary]=\"_iconColor === 'primary'\"\n [class.text-secondary]=\"_iconColor === 'secondary'\"\n [class.text-error]=\"_iconColor === 'error'\"\n [class.text-warning]=\"_iconColor === 'warning'\"\n [class.text-success]=\"_iconColor === 'success'\">\n {{ _icon }}\n </span>\n }\n <div class=\"sd-section-title-block\">\n @if (_title) {\n <div class=\"sd-section-title T16M\">{{ _title }}</div>\n }\n @if (_subTitle) {\n <div class=\"sd-section-subtitle T12R text-secondary\">{{ _subTitle }}</div>\n }\n </div>\n </ng-content>\n </div>\n <div class=\"sd-section-header-right\">\n <ng-content select=\"[sdHeaderRight]\"></ng-content>\n @if (_collapsible) {\n <div class=\"d-flex align-items-center\">\n @if (_collapsed) {\n <sd-icon name=\"expand_more\"></sd-icon>\n } @else {\n <sd-icon name=\"expand_less\"></sd-icon>\n }\n </div>\n }\n </div>\n </div>\n }\n @if (!_collapsed \|\| _hideHeader) {\n <div class=\"sd-section-body\" [id]=\"bodyId\" [class.sd-section-body--with-header]=\"!_hideHeader\">\n <ng-content></ng-content>\n </div>\n }\n <div class=\"sd-section-footer\">\n <div class=\"sd-section-footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n <div class=\"sd-section-footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n </div>\n</div>\n","import { Component, input } from '@angular/core';\n\n@Component({\n selector: 'sd-section-item',\n templateUrl: './section-item.component.html',\n styleUrl: 'section-item.component.scss',\n standalone: true,\n})\nexport class SdSectionItem {\n label = input.required<string>();\n labelWidth = input<string, string \| null \| undefined>('150px', {\n transform: (val: any): string => {\n return val \|\| '150px';\n },\n });\n}\n","<div class=\"c-item\">\n <div class=\"c-item-label T14R text-secondary\" [style.width]=\"labelWidth()\">{{ label() }}</div>\n <div class=\"c-item-content\"><ng-content></ng-content></div>\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"sdcorejs-angular-components-section.mjs","sources":["../../../projects/sdcorejs-angular/components/section/src/section.component.ts","../../../projects/sdcorejs-angular/components/section/src/section.component.html","../../../projects/sdcorejs-angular/components/section/src/section-item/section-item.component.ts","../../../projects/sdcorejs-angular/components/section/src/section-item/section-item.component.html","../../../projects/sdcorejs-angular/components/section/sdcorejs-angular-components-section.ts"],"sourcesContent":["import { booleanAttribute, Component, effect, ElementRef, inject, input, model } from '@angular/core';\nimport { Color } from '@sdcorejs/utils/models';\nimport { SdIcon } from '@sdcorejs/angular/modules/icon';\nimport { SdTranslatePipe } from '@sdcorejs/angular/i18n';\n\nconst SECTION_INTERACTIVE_SELECTOR =\n 'a[href], button, input, select, textarea, [role=\"button\"], [role=\"link\"], [contenteditable=\"true\"], [tabindex]';\n\n// why: id tăng dần để nối aria-controls từ header sang body — mỗi instance cần một id duy nhất.\nlet sectionBodyIdSeq = 0;\n\n@Component({\n selector: 'sd-section',\n templateUrl: './section.component.html',\n styleUrl: './section.component.scss',\n imports: [SdIcon, SdTranslatePipe],\n host: {\n '(click)': 'onHeaderClick($event)',\n },\n})\nexport class SdSection {\n #el = inject(ElementRef);\n\n title = input<string \| undefined \| null>(undefined);\n subTitle = input<string \| undefined \| null>(undefined);\n icon = input<string \| undefined \| null>(undefined);\n iconColor = input<Color>('primary', { alias: 'iconColor' });\n\n collapsed = model<boolean>(false, { alias: 'collapsed' });\n collapsible = input(false, { transform: booleanAttribute });\n\n hideHeader = input(false, { transform: booleanAttribute });\n\n /** Id của vùng body, để header `aria-controls` trỏ tới khi section collapsible. /\n readonly bodyId = `sd-section-body-${++sectionBodyIdSeq}`;\n\n constructor() {\n effect(() => {\n if (this.title()) {\n this.#el.nativeElement.removeAttribute('title');\n }\n });\n }\n\n toggleCollapse = () => {\n if (this.collapsible()) {\n this.collapsed.set(!this.collapsed());\n } else {\n if (this.collapsed()) {\n this.collapsed.set(false);\n }\n }\n };\n\n protected onHeaderClick = (event: MouseEvent): void => {\n const target = event.target;\n if (!(target instanceof Element)) return;\n\n const header = target.closest('.sd-section-header');\n if (!header \|\| header.closest('sd-section') !== this.#el.nativeElement) return;\n if (target.closest(SECTION_INTERACTIVE_SELECTOR)) return;\n\n this.toggleCollapse();\n };\n\n protected onCollapseButtonClick = (event: MouseEvent): void => {\n event.stopPropagation();\n this.toggleCollapse();\n };\n\n // why: giữ public handler cũ để không làm thay đổi declaration API của component.\n onHeaderKeydown = (event: KeyboardEvent) => {\n if (event.target !== event.currentTarget) return;\n // why: chặn Space cuộn trang trước khi toggle.\n event.preventDefault();\n this.toggleCollapse();\n };\n}\n","@let _hideHeader = hideHeader();\n@let _collapsible = collapsible();\n@let _collapsed = collapsed();\n@let _title = title();\n@let _subTitle = subTitle();\n@let _icon = icon();\n@let _iconColor = iconColor();\n<div class=\"sd-section c-shadow-section\">\n @if (!_hideHeader) {\n <div class=\"sd-section-header\" [class.cursor-pointer]=\"_collapsible\">\n <div class=\"sd-section-header-left\">\n <ng-content select=\"[sdHeaderLeft]\">\n @if (_icon) {\n <span\n class=\"mr-8 material-icons-outlined\"\n [class.text-primary]=\"_iconColor === 'primary'\"\n [class.text-secondary]=\"_iconColor === 'secondary'\"\n [class.text-error]=\"_iconColor === 'error'\"\n [class.text-warning]=\"_iconColor === 'warning'\"\n [class.text-success]=\"_iconColor === 'success'\">\n {{ _icon }}\n </span>\n }\n <div class=\"sd-section-title-block\">\n @if (_title) {\n <div class=\"sd-section-title T16M\">{{ _title }}</div>\n }\n @if (_subTitle) {\n <div class=\"sd-section-subtitle T12R text-secondary\">{{ _subTitle }}</div>\n }\n </div>\n </ng-content>\n </div>\n <div class=\"sd-section-header-right\">\n <ng-content select=\"[sdHeaderRight]\"></ng-content>\n @if (_collapsible) {\n <button\n type=\"button\"\n class=\"sd-section-collapse-toggle d-flex align-items-center\"\n [attr.aria-label]=\"\n (_collapsed ? 'core.component.section.expand' : 'core.component.section.collapse') \| sdTranslate: { title: _title \|\| '' }\n \"\n [attr.aria-expanded]=\"!_collapsed\"\n [attr.aria-controls]=\"bodyId\"\n (click)=\"onCollapseButtonClick($event)\">\n <sd-icon aria-hidden=\"true\" [name]=\"_collapsed ? 'expand_more' : 'expand_less'\"></sd-icon>\n </button>\n }\n </div>\n </div>\n }\n @if (!_collapsed \|\| _hideHeader) {\n <div class=\"sd-section-body\" [id]=\"bodyId\" [class.sd-section-body--with-header]=\"!_hideHeader\">\n <ng-content></ng-content>\n </div>\n }\n <div class=\"sd-section-footer\">\n <div class=\"sd-section-footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n <div class=\"sd-section-footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n </div>\n</div>\n","import { Component, input } from '@angular/core';\n\n@Component({\n selector: 'sd-section-item',\n templateUrl: './section-item.component.html',\n styleUrl: 'section-item.component.scss',\n standalone: true,\n})\nexport class SdSectionItem {\n label = input.required<string>();\n labelWidth = input<string, string \| null \| undefined>('150px', {\n transform: (val: any): string => {\n return val \|\| '150px';\n },\n });\n}\n","<div class=\"c-item\">\n <div class=\"c-item-label T14R text-secondary\" [style.width]=\"labelWidth()\">{{ label() }}</div>\n <div class=\"c-item-content\"><ng-content></ng-content></div>\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sdcorejs-angular-components-table.mjs CHANGED Viewed

@@ -3301,19 +3301,20 @@ const matchesColumnFilter = (data, columns = [], rawColumnFilter = {}) => {
             }
             else if (type === 'values' || type === 'lazy-values') {
                 const columnType = column;
-                const isMultiple = columnType.option.selection === 'MULTIPLE';
-                if (isMultiple && Array.isArray(rawColVal)) {
-                    const columnValues = rawColVal.map((i) => (Utilities.getNestedValue(i, columnType.option.valueField) ?? '').toString().trim().toLowerCase()) ??
-                        [];
-                    const filterValues = rawColumnFilter[field]?.map((v) => (v ?? '').toString().trim().toLowerCase());
-                    if (filterValues?.length && filterValues.every(fv => !columnValues.includes(fv))) {
-                        return false;
-                    }
-                }
-                else {
-                    if (columnValue !== filterValue) {
-                        return false;
-                    }
+                // why: chọn nhánh theo HÌNH DẠNG GIÁ TRỊ, không theo `option.selection`. Inline filter dropdown
+                // multiple luôn phát ra mảng, còn dữ liệu hàng thường là scalar; trước đây nhánh lại chọn theo
+                // array-ness của DỮ LIỆU HÀNG nên scalar row rơi xuống so sánh `===` với `['A','B'].toString()`
+                // = 'a,b' và không bao giờ khớp (chọn 1 giá trị thì vô tình đúng, chọn từ 2 là mất hết dòng).
+                const rawFilterValue = rawColumnFilter[field];
+                const filterValues = (Array.isArray(rawFilterValue) ? rawFilterValue : [rawFilterValue])
+                    .map((v) => (v ?? '').toString().trim().toLowerCase())
+                    .filter(v => !!v);
+                const columnValues = Array.isArray(rawColVal)
+                    ? rawColVal.map((i) => (Utilities.getNestedValue(i, columnType.option.valueField) ?? '').toString().trim().toLowerCase())
+                    : [columnValue];
+                // why: nhiều giá trị = OR, khớp đúng operator `IN` mà SdConvertToPagingReq gửi cho server.
+                if (filterValues.length && !filterValues.some(fv => columnValues.includes(fv))) {
+                    return false;
                 }
             }
             else if (type === 'number') {