codexly-ui 0.12.13 → 0.12.15

package/fesm2022/codexly-ui.mjs

@@ -13259,9 +13259,22 @@ class ClxFilterPanelComponent {
      *  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 */ []));
+    /** Text color for the same "Aplicar filtros" button — independent of applyButtonColor, same
+     *  rationale as clx-button's own [textColor]: a saturated applyButtonColor can leave the
+     *  auto-resolved contrast text illegible. Undefined leaves clx-button's own automatic
+     *  resolution untouched. */
+    applyButtonTextColor = input(undefined, ...(ngDevMode ? [{ debugName: "applyButtonTextColor" }] : /* 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 */ []));
+    /** Outer border — was a hardcoded border-clx-border (a fixed global CSS var, same gray in every
+     *  theme) instead of reading the theme like every other card-shaped component (clx-card,
+     *  clx-product, clx-wishlist, clx-notification all use cardBorderColor/borderLight). Now
+     *  consistent with those. */
+    _hostClass = computed(() => {
+        const t = resolveColor(this._themeSvc.cardBorderColor());
+        return `flex flex-col bg-clx-surface border ${t.borderLight} rounded-xl overflow-hidden`;
+    }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
     values = model({}, ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
     filterChange = output();
     applyChange = output();
@@ -13346,7 +13359,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 }, 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: `
+    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 }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange", filterChange: "filterChange", applyChange: "applyChange" }, host: { properties: { "class": "_hostClass()" } }, 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">
@@ -13467,7 +13480,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]="_applyButtonColor()" [size]="applyButtonSize()" class="flex-1" (click)="_apply()">
+        <button clx-button type="button" variant="solid" [color]="_applyButtonColor()" [textColor]="applyButtonTextColor()" [size]="applyButtonSize()" class="flex-1" (click)="_apply()">
           Aplicar filtros
         </button>
       </div>
@@ -13601,7 +13614,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]="_applyButtonColor()" [size]="applyButtonSize()" class="flex-1" (click)="_apply()">
+        <button clx-button type="button" variant="solid" [color]="_applyButtonColor()" [textColor]="applyButtonTextColor()" [size]="applyButtonSize()" class="flex-1" (click)="_apply()">
           Aplicar filtros
         </button>
       </div>
@@ -13609,9 +13622,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { class: 'flex flex-col bg-clx-surface border border-clx-border rounded-xl overflow-hidden' },
+                    host: { '[class]': '_hostClass()' },
                 }]
-        }], 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"] }] } });
+        }], 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 }] }], applyButtonTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyButtonTextColor", 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;