codexly-ui 0.10.84 → 0.10.85

package/fesm2022/codexly-ui.mjs

@@ -12044,7 +12044,14 @@ class ClxFilterPanelComponent {
     fields = input.required(...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     showApply = input(false, ...(ngDevMode ? [{ debugName: "showApply" }] : /* istanbul ignore next */ []));
+    /** Overrides for just the "Aplicar filtros" button — falls back to color()/theme primary and
+     *  size 'sm' when unset, same pattern as clx-product-detail's actionColor/wishlistColor. Lets a
+     *  host keep a saturated brand color on checkboxes/slider (small accents) while giving the CTA
+     *  button its own color and a bigger size if the sidebar's width calls for it. */
+    applyButtonColor = input(undefined, ...(ngDevMode ? [{ debugName: "applyButtonColor" }] : /* istanbul ignore next */ []));
+    applyButtonSize = input('sm', ...(ngDevMode ? [{ debugName: "applyButtonSize" }] : /* istanbul ignore next */ []));
     _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _applyButtonColor = computed(() => this.applyButtonColor() ?? this._color(), ...(ngDevMode ? [{ debugName: "_applyButtonColor" }] : /* istanbul ignore next */ []));
     values = model({}, ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
     filterChange = output();
     applyChange = output();
@@ -12129,7 +12136,7 @@ class ClxFilterPanelComponent {
         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 }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange", filterChange: "filterChange", applyChange: "applyChange" }, host: { classAttribute: "flex flex-col bg-clx-surface border border-clx-border rounded-xl overflow-hidden" }, ngImport: i0, template: `
+    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 }, applyButtonSize: { classPropertyName: "applyButtonSize", publicName: "applyButtonSize", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange", filterChange: "filterChange", applyChange: "applyChange" }, host: { classAttribute: "flex flex-col bg-clx-surface border border-clx-border rounded-xl overflow-hidden" }, ngImport: i0, template: `
     <!-- Header -->
     <div class="flex items-center justify-between px-4 py-3 border-b border-clx-border-soft">
       <div class="flex items-center gap-2">
@@ -12250,7 +12257,7 @@ class ClxFilterPanelComponent {
     <!-- Apply footer -->
     @if (showApply()) {
       <div class="px-4 py-3 border-t border-clx-border-soft flex gap-2">
-        <button clx-button type="button" variant="solid" [color]="_color()" size="sm" class="flex-1" (click)="_apply()">
+        <button clx-button type="button" variant="solid" [color]="_applyButtonColor()" [size]="applyButtonSize()" class="flex-1" (click)="_apply()">
           Aplicar filtros
         </button>
       </div>
@@ -12384,7 +12391,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
     <!-- Apply footer -->
     @if (showApply()) {
       <div class="px-4 py-3 border-t border-clx-border-soft flex gap-2">
-        <button clx-button type="button" variant="solid" [color]="_color()" size="sm" class="flex-1" (click)="_apply()">
+        <button clx-button type="button" variant="solid" [color]="_applyButtonColor()" [size]="applyButtonSize()" class="flex-1" (click)="_apply()">
           Aplicar filtros
         </button>
       </div>
@@ -12394,7 +12401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'flex flex-col bg-clx-surface border border-clx-border rounded-xl overflow-hidden' },
                 }]
-        }], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], showApply: [{ type: i0.Input, args: [{ isSignal: true, alias: "showApply", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], applyChange: [{ type: i0.Output, args: ["applyChange"] }] } });
+        }], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], showApply: [{ type: i0.Input, args: [{ isSignal: true, alias: "showApply", required: false }] }], applyButtonColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyButtonColor", required: false }] }], applyButtonSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyButtonSize", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], applyChange: [{ type: i0.Output, args: ["applyChange"] }] } });
 
 class ClxCarouselDirective {
     templateRef;