codexly-ui 0.12.22 → 0.12.24

package/fesm2022/codexly-ui.mjs

@@ -8414,7 +8414,11 @@ class ClxModalComponent {
     _confirmColor = computed(() => this.confirmButton()?.color ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_confirmColor" }] : /* istanbul ignore next */ []));
     _confirmVariant = computed(() => this.confirmButton()?.variant ?? 'solid', ...(ngDevMode ? [{ debugName: "_confirmVariant" }] : /* istanbul ignore next */ []));
     _cancelText = computed(() => this.cancelButton()?.text ?? 'Cancelar', ...(ngDevMode ? [{ debugName: "_cancelText" }] : /* istanbul ignore next */ []));
-    _cancelColor = computed(() => this.cancelButton()?.color ?? 'slate', ...(ngDevMode ? [{ debugName: "_cancelColor" }] : /* istanbul ignore next */ []));
+    /** Undefined when the caller didn't pass an explicit cancelButton.color — lets the button's own
+     *  emphasis="secondary" resolve the theme's secondaryColor (with secondaryButtonTextColor
+     *  auto-applied on solid variants) instead of hardcoding 'slate', same convention as
+     *  clx-alert/clx-product-detail/clx-wishlist's secondary actions. */
+    _cancelColor = computed(() => this.cancelButton()?.color, ...(ngDevMode ? [{ debugName: "_cancelColor" }] : /* istanbul ignore next */ []));
     _cancelVariant = computed(() => this.cancelButton()?.variant ?? 'ghost', ...(ngDevMode ? [{ debugName: "_cancelVariant" }] : /* istanbul ignore next */ []));
     _close() {
         this._modalRef?.close();
@@ -8454,6 +8458,7 @@ class ClxModalComponent {
           <button
             clx-button
             type="button"
+            emphasis="secondary"
             [color]="_cancelColor()"
             [variant]="_cancelVariant()"
             [icon]="cancelButton()?.icon"
@@ -8522,6 +8527,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           <button
             clx-button
             type="button"
+            emphasis="secondary"
             [color]="_cancelColor()"
             [variant]="_cancelVariant()"
             [icon]="cancelButton()?.icon"
@@ -11857,7 +11863,11 @@ class ClxAlertComponent {
         return ALERT_CONFIRM_COLOR_MAP[this._type];
     }, ...(ngDevMode ? [{ debugName: "_confirmColor" }] : /* istanbul ignore next */ []));
     _cancelText = signal(this._opts.cancelButton?.text ?? 'Cancelar', ...(ngDevMode ? [{ debugName: "_cancelText" }] : /* istanbul ignore next */ []));
-    _cancelColor = computed(() => this._opts.cancelButton?.color ?? this._themeSvc.config().secondaryColor, ...(ngDevMode ? [{ debugName: "_cancelColor" }] : /* istanbul ignore next */ []));
+    /** Undefined when the caller didn't pass an explicit cancelButton.color — lets the button's own
+     *  emphasis="secondary" resolve the theme's secondaryColor (with secondaryButtonTextColor
+     *  auto-applied on solid variants), same convention as clx-product-detail/clx-wishlist's
+     *  secondary CTAs, instead of hardcoding secondaryColor here and losing that auto-text-color. */
+    _cancelColor = computed(() => this._opts.cancelButton?.color, ...(ngDevMode ? [{ debugName: "_cancelColor" }] : /* istanbul ignore next */ []));
     _cancelVariant = signal(this._opts.cancelButton?.variant ?? 'ghost', ...(ngDevMode ? [{ debugName: "_cancelVariant" }] : /* istanbul ignore next */ []));
     // ─── Timer state ─────────────────────────────────────────────────────────
     _timerTotal = signal(this._opts.timer ?? 0, ...(ngDevMode ? [{ debugName: "_timerTotal" }] : /* istanbul ignore next */ []));
@@ -11959,6 +11969,7 @@ class ClxAlertComponent {
           <button
             clx-button
             type="button"
+            emphasis="secondary"
             [color]="_cancelColor()"
             [variant]="_cancelVariant()"
             size="md"
@@ -12031,6 +12042,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           <button
             clx-button
             type="button"
+            emphasis="secondary"
             [color]="_cancelColor()"
             [variant]="_cancelVariant()"
             size="md"
@@ -16055,11 +16067,18 @@ class ClxWishlistComponent {
      *  clx-input/clx-select/clx-pagination themselves. Previously this was a required-looking input
      *  defaulting to a hardcoded 'indigo' that every zone read directly, bypassing theme entirely. */
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    /** Text color for "Agregar todo al carrito" (variant="light") — independent of `color`, same
-     *  rationale as clx-button's own [textColor]: a saturated `color` can leave the auto-resolved
-     *  text illegible against a light-tinted background. Undefined leaves clx-button's own
-     *  automatic resolution untouched. */
+    /** Override for "Agregar todo al carrito" (variant="light") — same [color]/[textColor]/
+     *  [emphasis] precedence as clx-button itself: an explicit checkoutAllColor always wins;
+     *  otherwise checkoutAllEmphasis="secondary" resolves the theme's secondaryColor (falling back
+     *  to primaryColor) instead of `color()`/primaryColor, same as clx-product-detail's
+     *  addToCartColor + emphasis="secondary" treatment for its own secondary CTA. */
+    checkoutAllColor = input(undefined, ...(ngDevMode ? [{ debugName: "checkoutAllColor" }] : /* istanbul ignore next */ []));
     checkoutAllTextColor = input(undefined, ...(ngDevMode ? [{ debugName: "checkoutAllTextColor" }] : /* istanbul ignore next */ []));
+    checkoutAllEmphasis = input('primary', ...(ngDevMode ? [{ debugName: "checkoutAllEmphasis" }] : /* istanbul ignore next */ []));
+    /** checkoutAllColor always wins when set. Otherwise: emphasis="secondary" is passed through
+     *  as-is (undefined) so clx-button resolves the theme's secondaryColor itself; emphasis="primary"
+     *  falls back to `color()`/theme primaryColor, same as every other zone in this component. */
+    _checkoutAllColor = computed(() => this.checkoutAllColor() ?? (this.checkoutAllEmphasis() === 'secondary' ? undefined : this._accentColor()), ...(ngDevMode ? [{ debugName: "_checkoutAllColor" }] : /* 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 */ []));
@@ -16166,7 +16185,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 }, 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: `
+    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 }, checkoutAllColor: { classPropertyName: "checkoutAllColor", publicName: "checkoutAllColor", isSignal: true, isRequired: false, transformFunction: null }, checkoutAllTextColor: { classPropertyName: "checkoutAllTextColor", publicName: "checkoutAllTextColor", isSignal: true, isRequired: false, transformFunction: null }, checkoutAllEmphasis: { classPropertyName: "checkoutAllEmphasis", publicName: "checkoutAllEmphasis", 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) {
@@ -16205,7 +16224,8 @@ class ClxWishlistComponent {
             clx-button
             type="button"
             variant="light"
-            [color]="_accentColor()"
+            [emphasis]="checkoutAllEmphasis()"
+            [color]="_checkoutAllColor()"
             [textColor]="checkoutAllTextColor()"
             icon="arrow_forward"
             iconPosition="right"
@@ -16414,7 +16434,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             clx-button
             type="button"
             variant="light"
-            [color]="_accentColor()"
+            [emphasis]="checkoutAllEmphasis()"
+            [color]="_checkoutAllColor()"
             [textColor]="checkoutAllTextColor()"
             icon="arrow_forward"
             iconPosition="right"
@@ -16569,7 +16590,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 }] }], 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"] }] } });
+        }], 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 }] }], checkoutAllColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkoutAllColor", required: false }] }], checkoutAllTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkoutAllTextColor", required: false }] }], checkoutAllEmphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkoutAllEmphasis", 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 */ []));