codexly-ui 0.12.32 → 0.12.34

package/fesm2022/codexly-ui.mjs

@@ -13420,14 +13420,6 @@ class ClxFilterPanelComponent {
     _apply() {
         this.applyChange.emit(this.values());
     }
-    _badgeCls() {
-        const t = resolveColor(this._color());
-        return `inline-flex items-center justify-center w-5 h-5 text-xs font-bold rounded-full ${t.bg} ${t.text}`;
-    }
-    _fieldBadgeCls() {
-        const t = resolveColor(this._color());
-        return `text-xs px-1.5 py-0.5 rounded-full font-medium ${t.bgSubtle} ${t.textSubtle}`;
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxFilterPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxFilterPanelComponent, isStandalone: true, selector: "clx-filter-panel", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, showApply: { classPropertyName: "showApply", publicName: "showApply", isSignal: true, isRequired: false, transformFunction: null }, applyButtonColor: { classPropertyName: "applyButtonColor", publicName: "applyButtonColor", isSignal: true, isRequired: false, transformFunction: null }, applyButtonTextColor: { classPropertyName: "applyButtonTextColor", publicName: "applyButtonTextColor", isSignal: true, isRequired: false, transformFunction: null }, applyButtonSize: { classPropertyName: "applyButtonSize", publicName: "applyButtonSize", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, panelCollapsed: { classPropertyName: "panelCollapsed", publicName: "panelCollapsed", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { panelCollapsed: "panelCollapsedChange", values: "valuesChange", filterChange: "filterChange", applyChange: "applyChange" }, host: { properties: { "class": "_hostClass()" } }, ngImport: i0, template: `
     <!-- Header -->
@@ -13436,7 +13428,7 @@ class ClxFilterPanelComponent {
         <span clx-icon name="filter_list" size="sm" class="text-clx-text-subtle"></span>
         <span class="text-sm font-semibold text-clx-text-label">Filtros</span>
         @if (_activeCount() > 0) {
-          <span [class]="_badgeCls()">{{ _activeCount() }}</span>
+          <span clx-badge variant="solid" [color]="_color()" size="sm">{{ _activeCount() }}</span>
         }
       </div>
       <div class="flex items-center gap-1">
@@ -13465,7 +13457,7 @@ class ClxFilterPanelComponent {
             <span>{{ field.label }}</span>
             <div class="flex items-center gap-1.5">
               @if (_hasValue(field.key)) {
-                <span [class]="_fieldBadgeCls()">{{ _valueLabel(field) }}</span>
+                <span clx-badge variant="solid" [color]="_color()" size="sm">{{ _valueLabel(field) }}</span>
               }
               <span clx-icon
                     [name]="_isCollapsed(field.key) ? 'expand_more' : 'expand_less'"
@@ -13562,14 +13554,14 @@ class ClxFilterPanelComponent {
       </div>
     }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "emphasis", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxCheckboxComponent, selector: "clx-checkbox", inputs: ["color", "variant", "size", "label", "value", "disabled"] }, { kind: "component", type: ClxNumberComponent, selector: "clx-number", inputs: ["variant", "size", "color", "label", "placeholder", "hint", "prefixIcon", "min", "max", "step", "value", "disabled"] }, { kind: "component", type: ClxRadioGroupComponent, selector: "clx-radio-group", inputs: ["color", "variant", "size", "direction", "disabled"] }, { kind: "component", type: ClxRadioComponent, selector: "clx-radio", inputs: ["value", "label", "color", "variant", "size"] }, { kind: "component", type: ClxSelectComponent, selector: "clx-select", inputs: ["label", "placeholder", "options", "multiple", "searchable", "searchPlaceholder", "activeColor", "size", "hint", "errorMessage", "disabled", "async", "loadOptions", "debounceMs", "minChars"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "emphasis", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxCheckboxComponent, selector: "clx-checkbox", inputs: ["color", "variant", "size", "label", "value", "disabled"] }, { kind: "component", type: ClxNumberComponent, selector: "clx-number", inputs: ["variant", "size", "color", "label", "placeholder", "hint", "prefixIcon", "min", "max", "step", "value", "disabled"] }, { kind: "component", type: ClxRadioGroupComponent, selector: "clx-radio-group", inputs: ["color", "variant", "size", "direction", "disabled"] }, { kind: "component", type: ClxRadioComponent, selector: "clx-radio", inputs: ["value", "label", "color", "variant", "size"] }, { kind: "component", type: ClxSelectComponent, selector: "clx-select", inputs: ["label", "placeholder", "options", "multiple", "searchable", "searchPlaceholder", "activeColor", "size", "hint", "errorMessage", "disabled", "async", "loadOptions", "debounceMs", "minChars"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxFilterPanelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clx-filter-panel',
                     standalone: true,
-                    imports: [FormsModule, ClxIconComponent, ClxButtonComponent, ClxCheckboxComponent, ClxNumberComponent, ClxRadioGroupComponent, ClxRadioComponent, ClxSelectComponent],
+                    imports: [FormsModule, ClxIconComponent, ClxButtonComponent, ClxBadgeComponent, ClxCheckboxComponent, ClxNumberComponent, ClxRadioGroupComponent, ClxRadioComponent, ClxSelectComponent],
                     template: `
     <!-- Header -->
     <div [class]="_headerClass()" (click)="collapsible() ? _togglePanel() : null">
@@ -13577,7 +13569,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         <span clx-icon name="filter_list" size="sm" class="text-clx-text-subtle"></span>
         <span class="text-sm font-semibold text-clx-text-label">Filtros</span>
         @if (_activeCount() > 0) {
-          <span [class]="_badgeCls()">{{ _activeCount() }}</span>
+          <span clx-badge variant="solid" [color]="_color()" size="sm">{{ _activeCount() }}</span>
         }
       </div>
       <div class="flex items-center gap-1">
@@ -13606,7 +13598,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             <span>{{ field.label }}</span>
             <div class="flex items-center gap-1.5">
               @if (_hasValue(field.key)) {
-                <span [class]="_fieldBadgeCls()">{{ _valueLabel(field) }}</span>
+                <span clx-badge variant="solid" [color]="_color()" size="sm">{{ _valueLabel(field) }}</span>
               }
               <span clx-icon
                     [name]="_isCollapsed(field.key) ? 'expand_more' : 'expand_less'"