codexly-ui 0.12.26 → 0.12.28

package/fesm2022/codexly-ui.mjs

@@ -9927,7 +9927,7 @@ class ClxWizardComponent {
             <button
               clx-button
               type="button"
-              [color]="_color()"
+              emphasis="secondary"
               variant="ghost"
               size="sm"
               icon="arrow_back"
@@ -10035,7 +10035,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             <button
               clx-button
               type="button"
-              [color]="_color()"
+              emphasis="secondary"
               variant="ghost"
               size="sm"
               icon="arrow_back"
@@ -13287,6 +13287,15 @@ class ClxFilterPanelComponent {
      *  resolution untouched. */
     applyButtonTextColor = input(undefined, ...(ngDevMode ? [{ debugName: "applyButtonTextColor" }] : /* istanbul ignore next */ []));
     applyButtonSize = input('sm', ...(ngDevMode ? [{ debugName: "applyButtonSize" }] : /* istanbul ignore next */ []));
+    /** Lets the whole panel collapse down to just its "Filtros" header row (click to toggle) — for
+     *  narrow layouts where a host wants to reclaim vertical space once the visitor is done
+     *  adjusting filters, without unmounting the panel (its field values/expand-state are preserved
+     *  underneath, just hidden). False (the default) keeps the current always-expanded behavior. */
+    collapsible = input(false, ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
+    /** Two-way — a host can control/observe collapse state (e.g. persist it, or start collapsed on
+     *  mobile) as well as let the header click toggle it internally. Only takes effect when
+     *  collapsible() is true; the header row itself is always visible regardless. */
+    panelCollapsed = model(false, ...(ngDevMode ? [{ debugName: "panelCollapsed" }] : /* 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
@@ -13297,6 +13306,15 @@ class ClxFilterPanelComponent {
         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 */ []));
+    _headerClass = computed(() => {
+        const base = 'flex items-center justify-between px-4 py-3';
+        const border = this.panelCollapsed() ? '' : ' border-b border-clx-border-soft';
+        const clickable = this.collapsible() ? ' cursor-pointer select-none' : '';
+        return base + border + clickable;
+    }, ...(ngDevMode ? [{ debugName: "_headerClass" }] : /* istanbul ignore next */ []));
+    _togglePanel() {
+        this.panelCollapsed.update(v => !v);
+    }
     values = model({}, ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
     filterChange = output();
     applyChange = output();
@@ -13381,24 +13399,28 @@ 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: { properties: { "class": "_hostClass()" } }, 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 }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, panelCollapsed: { classPropertyName: "panelCollapsed", publicName: "panelCollapsed", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { panelCollapsed: "panelCollapsedChange", 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]="_headerClass()" (click)="collapsible() ? _togglePanel() : null">
       <div class="flex items-center gap-2">
+        @if (collapsible()) {
+          <span clx-icon [name]="panelCollapsed() ? 'expand_more' : 'expand_less'" size="sm" class="text-clx-text-subtle"></span>
+        }
         <span clx-icon name="filter_list" size="sm" class="text-clx-text-subtle"></span>
         <span class="text-sm font-semibold text-clx-text-label">Filtros</span>
         @if (_activeCount() > 0) {
           <span [class]="_badgeCls()">{{ _activeCount() }}</span>
         }
       </div>
-      @if (_activeCount() > 0) {
-        <button clx-button type="button" variant="ghost" color="slate" size="sm" (click)="_reset()">
+      @if (_activeCount() > 0 && !panelCollapsed()) {
+        <button clx-button type="button" variant="ghost" color="slate" size="sm" (click)="$event.stopPropagation(); _reset()">
           Limpiar
         </button>
       }
     </div>
 
     <!-- Fields -->
+    @if (!panelCollapsed()) {
     <div class="overflow-y-auto flex-1">
       @for (field of fields(); track field.key) {
         <div class="border-b border-clx-border-soft last:border-0">
@@ -13507,6 +13529,7 @@ class ClxFilterPanelComponent {
         </button>
       </div>
     }
+    }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "emphasis", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxCheckboxComponent, selector: "clx-checkbox", inputs: ["color", "variant", "size", "label", "value", "disabled"] }, { kind: "component", type: ClxSliderComponent, selector: "clx-slider", inputs: ["label", "hint", "errorMessage", "activeColor", "size", "min", "max", "step", "showTooltip", "showMinMax", "marks", "disabled"] }, { kind: "component", type: ClxRadioGroupComponent, selector: "clx-radio-group", inputs: ["color", "variant", "size", "direction", "disabled"] }, { kind: "component", type: ClxRadioComponent, selector: "clx-radio", inputs: ["value", "label", "color", "variant", "size"] }, { kind: "component", type: ClxSelectComponent, selector: "clx-select", inputs: ["label", "placeholder", "options", "multiple", "searchable", "searchPlaceholder", "activeColor", "size", "hint", "errorMessage", "disabled", "async", "loadOptions", "debounceMs", "minChars"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxFilterPanelComponent, decorators: [{
@@ -13517,22 +13540,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     imports: [FormsModule, ClxIconComponent, ClxButtonComponent, ClxCheckboxComponent, ClxSliderComponent, ClxRadioGroupComponent, ClxRadioComponent, ClxSelectComponent],
                     template: `
     <!-- Header -->
-    <div class="flex items-center justify-between px-4 py-3 border-b border-clx-border-soft">
+    <div [class]="_headerClass()" (click)="collapsible() ? _togglePanel() : null">
       <div class="flex items-center gap-2">
+        @if (collapsible()) {
+          <span clx-icon [name]="panelCollapsed() ? 'expand_more' : 'expand_less'" size="sm" class="text-clx-text-subtle"></span>
+        }
         <span clx-icon name="filter_list" size="sm" class="text-clx-text-subtle"></span>
         <span class="text-sm font-semibold text-clx-text-label">Filtros</span>
         @if (_activeCount() > 0) {
           <span [class]="_badgeCls()">{{ _activeCount() }}</span>
         }
       </div>
-      @if (_activeCount() > 0) {
-        <button clx-button type="button" variant="ghost" color="slate" size="sm" (click)="_reset()">
+      @if (_activeCount() > 0 && !panelCollapsed()) {
+        <button clx-button type="button" variant="ghost" color="slate" size="sm" (click)="$event.stopPropagation(); _reset()">
           Limpiar
         </button>
       }
     </div>
 
     <!-- Fields -->
+    @if (!panelCollapsed()) {
     <div class="overflow-y-auto flex-1">
       @for (field of fields(); track field.key) {
         <div class="border-b border-clx-border-soft last:border-0">
@@ -13641,12 +13668,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         </button>
       </div>
     }
+    }
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     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"] }] } });
+        }], 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 }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], panelCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelCollapsed", required: false }] }, { type: i0.Output, args: ["panelCollapsedChange"] }], 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;
@@ -16730,7 +16758,7 @@ class ClxCartComponent {
           <div class="flex items-center justify-between">
             <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]="color()" size="sm">{{ _totalUnits() }}</span>
+              <span clx-badge variant="solid" [color]="color()" size="sm">{{ _totalUnits() }}</span>
             </div>
             <button
               clx-button type="button" variant="light" color="red" icon="delete"
@@ -16875,7 +16903,7 @@ class ClxCartComponent {
                 </div>
                 @if (coupon()) {
                   @if (coupon()!.valid) {
-                    <div class="flex items-center gap-1.5 text-emerald-600">
+                    <div class="flex items-center gap-1.5 text-green-500">
                       <span clx-icon name="check_circle" size="sm"></span>
                       <code class="text-xs font-bold">{{ coupon()!.code }}</code>
                       <span class="text-xs">aplicado</span>
@@ -16897,16 +16925,16 @@ class ClxCartComponent {
                 <dd class="font-medium">{{ _subtotal() | currency:'COP':'$':'1.0-0' }}</dd>
               </div>
               @if (_savingsAmount() > 0) {
-                <div class="flex justify-between text-emerald-600">
+                <div class="flex justify-between text-green-500">
                   <dt>Descuento productos</dt>
                   <dd class="font-medium">-{{ _savingsAmount() | currency:'COP':'$':'1.0-0' }}</dd>
                 </div>
               }
               @if (coupon()?.valid) {
-                <div class="flex justify-between text-emerald-600">
+                <div class="flex justify-between text-green-500">
                   <dt>
                     Cupón
-                    <code class="bg-emerald-50 px-1 rounded text-xs ml-1">{{ coupon()!.code }}</code>
+                    <code class="bg-green-50 px-1 rounded text-xs ml-1">{{ coupon()!.code }}</code>
                   </dt>
                   <dd class="font-medium">-{{ _couponDiscount() | currency:'COP':'$':'1.0-0' }}</dd>
                 </div>
@@ -17011,7 +17039,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           <div class="flex items-center justify-between">
             <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]="color()" size="sm">{{ _totalUnits() }}</span>
+              <span clx-badge variant="solid" [color]="color()" size="sm">{{ _totalUnits() }}</span>
             </div>
             <button
               clx-button type="button" variant="light" color="red" icon="delete"
@@ -17156,7 +17184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 </div>
                 @if (coupon()) {
                   @if (coupon()!.valid) {
-                    <div class="flex items-center gap-1.5 text-emerald-600">
+                    <div class="flex items-center gap-1.5 text-green-500">
                       <span clx-icon name="check_circle" size="sm"></span>
                       <code class="text-xs font-bold">{{ coupon()!.code }}</code>
                       <span class="text-xs">aplicado</span>
@@ -17178,16 +17206,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 <dd class="font-medium">{{ _subtotal() | currency:'COP':'$':'1.0-0' }}</dd>
               </div>
               @if (_savingsAmount() > 0) {
-                <div class="flex justify-between text-emerald-600">
+                <div class="flex justify-between text-green-500">
                   <dt>Descuento productos</dt>
                   <dd class="font-medium">-{{ _savingsAmount() | currency:'COP':'$':'1.0-0' }}</dd>
                 </div>
               }
               @if (coupon()?.valid) {
-                <div class="flex justify-between text-emerald-600">
+                <div class="flex justify-between text-green-500">
                   <dt>
                     Cupón
-                    <code class="bg-emerald-50 px-1 rounded text-xs ml-1">{{ coupon()!.code }}</code>
+                    <code class="bg-green-50 px-1 rounded text-xs ml-1">{{ coupon()!.code }}</code>
                   </dt>
                   <dd class="font-medium">-{{ _couponDiscount() | currency:'COP':'$':'1.0-0' }}</dd>
                 </div>