codexly-ui 0.12.14 → 0.12.15

package/fesm2022/codexly-ui.mjs

@@ -13267,6 +13267,14 @@ class ClxFilterPanelComponent {
     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();
@@ -13351,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 }, 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: { 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">
@@ -13614,7 +13622,7 @@ 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 }] }], 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"] }] } });