codexly-ui 0.12.20 → 0.12.22

package/fesm2022/codexly-ui.mjs

@@ -10977,6 +10977,14 @@ class ClxProfileComponent {
         const t = resolveColor(this._color());
         return `focus-visible:${t.ringBase}`;
     }, ...(ngDevMode ? [{ debugName: "_ringClass" }] : /* istanbul ignore next */ []));
+    /** Dropdown panel border — was a hardcoded border-clx-border-soft (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, clx-filter-panel all use
+     *  cardBorderColor/borderLight). Now consistent with those. */
+    _panelClass = computed(() => {
+        const t = resolveColor(this._themeSvc.cardBorderColor());
+        return `w-72 bg-clx-surface rounded-2xl shadow-xl border ${t.borderLight} overflow-hidden mt-2`;
+    }, ...(ngDevMode ? [{ debugName: "_panelClass" }] : /* istanbul ignore next */ []));
     // ── Methods ──────────────────────────────────────────────────────────────────
     _toggle() { this._isOpen.update(v => !v); }
     _close() { this._isOpen.set(false); }
@@ -11020,7 +11028,7 @@ class ClxProfileComponent {
       (overlayOutsideClick)="_close()"
       (overlayKeydown)="_onKeydown($event)">
 
-      <div class="w-72 bg-clx-surface rounded-2xl shadow-xl border border-clx-border-soft overflow-hidden mt-2">
+      <div [class]="_panelClass()">
 
         <!-- Header: avatar + name + role badge -->
         <div class="px-4 pt-4 pb-3 flex items-center gap-3">
@@ -11097,7 +11105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       (overlayOutsideClick)="_close()"
       (overlayKeydown)="_onKeydown($event)">
 
-      <div class="w-72 bg-clx-surface rounded-2xl shadow-xl border border-clx-border-soft overflow-hidden mt-2">
+      <div [class]="_panelClass()">
 
         <!-- Header: avatar + name + role badge -->
         <div class="px-4 pt-4 pb-3 flex items-center gap-3">
@@ -16052,9 +16060,11 @@ class ClxWishlistComponent {
      *  text illegible against a light-tinted background. Undefined leaves clx-button's own
      *  automatic resolution untouched. */
     checkoutAllTextColor = input(undefined, ...(ngDevMode ? [{ debugName: "checkoutAllTextColor" }] : /* istanbul ignore next */ []));
-    /** Text color for each item's own "Añadir al carrito" (variant="solid") — independent of
-     *  `color`, same rationale as checkoutAllTextColor. */
-    addToCartTextColor = input(undefined, ...(ngDevMode ? [{ debugName: "addToCartTextColor" }] : /* istanbul ignore next */ []));
+    /** Override for each item's own "Añadir al carrito" button (variant="solid") — same naming as
+     *  clx-product-detail's actionColor/actionTextColor. Falls back to `color()` when unset. */
+    actionColor = input(undefined, ...(ngDevMode ? [{ debugName: "actionColor" }] : /* istanbul ignore next */ []));
+    actionTextColor = input(undefined, ...(ngDevMode ? [{ debugName: "actionTextColor" }] : /* istanbul ignore next */ []));
+    _actionColor = computed(() => this.actionColor() ?? this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_actionColor" }] : /* istanbul ignore next */ []));
     /** Product card drop shadow — same ClxCardShadow scale as clx-card ('none' turns it off
      *  entirely). Falls back to 'sm', the shadow these cards have always rendered with. */
     shadow = input(undefined, ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
@@ -16156,7 +16166,7 @@ class ClxWishlistComponent {
         this.onCheckoutAll.emit(this._filtered());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxWishlistComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxWishlistComponent, isStandalone: true, selector: "clx-wishlist", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, checkoutAllTextColor: { classPropertyName: "checkoutAllTextColor", publicName: "checkoutAllTextColor", isSignal: true, isRequired: false, transformFunction: null }, addToCartTextColor: { classPropertyName: "addToCartTextColor", publicName: "addToCartTextColor", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, sortOptions: { classPropertyName: "sortOptions", publicName: "sortOptions", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, sortValue: { classPropertyName: "sortValue", publicName: "sortValue", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", pageSize: "pageSizeChange", sortValue: "sortValueChange", searchValue: "searchValueChange", onRemove: "onRemove", onAddToCart: "onAddToCart", onSearchChange: "onSearchChange", onSortChange: "onSortChange", onPageChange: "onPageChange", onCheckoutAll: "onCheckoutAll", onBrowseCatalog: "onBrowseCatalog" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxWishlistComponent, isStandalone: true, selector: "clx-wishlist", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, checkoutAllTextColor: { classPropertyName: "checkoutAllTextColor", publicName: "checkoutAllTextColor", isSignal: true, isRequired: false, transformFunction: null }, actionColor: { classPropertyName: "actionColor", publicName: "actionColor", isSignal: true, isRequired: false, transformFunction: null }, actionTextColor: { classPropertyName: "actionTextColor", publicName: "actionTextColor", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, sortOptions: { classPropertyName: "sortOptions", publicName: "sortOptions", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, sortValue: { classPropertyName: "sortValue", publicName: "sortValue", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", pageSize: "pageSizeChange", sortValue: "sortValueChange", searchValue: "searchValueChange", onRemove: "onRemove", onAddToCart: "onAddToCart", onSearchChange: "onSearchChange", onSortChange: "onSortChange", onPageChange: "onPageChange", onCheckoutAll: "onCheckoutAll", onBrowseCatalog: "onBrowseCatalog" }, ngImport: i0, template: `
     <div class="flex flex-col gap-6">
 
       @if (loading() || items().length > 0) {
@@ -16189,7 +16199,7 @@ class ClxWishlistComponent {
         <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
           <div class="flex items-center gap-2">
             <h2 class="text-base font-semibold text-clx-text-label">Productos</h2>
-            <span clx-badge variant="light" [color]="_accentColor()" size="sm">{{ _totalItems() }}</span>
+            <span clx-badge variant="solid" [color]="_accentColor()" size="sm">{{ _totalItems() }}</span>
           </div>
           <button
             clx-button
@@ -16312,8 +16322,8 @@ class ClxWishlistComponent {
                   <button
                     clx-button
                     type="button"
-                    [color]="_accentColor()"
-                    [textColor]="addToCartTextColor()"
+                    [color]="_actionColor()"
+                    [textColor]="actionTextColor()"
                     variant="solid"
                     size="md"
                     icon="shopping_cart"
@@ -16398,7 +16408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
           <div class="flex items-center gap-2">
             <h2 class="text-base font-semibold text-clx-text-label">Productos</h2>
-            <span clx-badge variant="light" [color]="_accentColor()" size="sm">{{ _totalItems() }}</span>
+            <span clx-badge variant="solid" [color]="_accentColor()" size="sm">{{ _totalItems() }}</span>
           </div>
           <button
             clx-button
@@ -16521,8 +16531,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                   <button
                     clx-button
                     type="button"
-                    [color]="_accentColor()"
-                    [textColor]="addToCartTextColor()"
+                    [color]="_actionColor()"
+                    [textColor]="actionTextColor()"
                     variant="solid"
                     size="md"
                     icon="shopping_cart"
@@ -16559,7 +16569,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], checkoutAllTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkoutAllTextColor", required: false }] }], addToCartTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "addToCartTextColor", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], sortOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOptions", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], sortValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortValue", required: false }] }, { type: i0.Output, args: ["sortValueChange"] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }, { type: i0.Output, args: ["searchValueChange"] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }], onAddToCart: [{ type: i0.Output, args: ["onAddToCart"] }], onSearchChange: [{ type: i0.Output, args: ["onSearchChange"] }], onSortChange: [{ type: i0.Output, args: ["onSortChange"] }], onPageChange: [{ type: i0.Output, args: ["onPageChange"] }], onCheckoutAll: [{ type: i0.Output, args: ["onCheckoutAll"] }], onBrowseCatalog: [{ type: i0.Output, args: ["onBrowseCatalog"] }] } });
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], checkoutAllTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkoutAllTextColor", required: false }] }], actionColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionColor", required: false }] }], actionTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionTextColor", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], sortOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOptions", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], sortValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortValue", required: false }] }, { type: i0.Output, args: ["sortValueChange"] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }, { type: i0.Output, args: ["searchValueChange"] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }], onAddToCart: [{ type: i0.Output, args: ["onAddToCart"] }], onSearchChange: [{ type: i0.Output, args: ["onSearchChange"] }], onSortChange: [{ type: i0.Output, args: ["onSortChange"] }], onPageChange: [{ type: i0.Output, args: ["onPageChange"] }], onCheckoutAll: [{ type: i0.Output, args: ["onCheckoutAll"] }], onBrowseCatalog: [{ type: i0.Output, args: ["onBrowseCatalog"] }] } });
 
 class ClxCartComponent {
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));