codexly-ui 0.12.30 → 0.12.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/fesm2022/codexly-ui.mjs +22 -22
  2. package/fesm2022/codexly-ui.mjs.map +1 -1
  3. package/package.json +1 -1
package/fesm2022/codexly-ui.mjs CHANGED
@@ -13514,21 +13514,21 @@ class ClxFilterPanelComponent {
13514
13514
  </clx-radio-group>
13515
13515
  }
13516
13516
 
13517
- <!-- Range slider — min -->
13517
+ <!-- Range — min/max -->
13518
13518
  @if (field.type === 'range') {
13519
13519
  @let rv = _getRangeValue(field);
13520
- <div class="space-y-3">
13521
- <clx-slider
13522
- [label]="'Mín: ' + (field.unit ?? '') + rv.min"
13523
- [activeColor]="_color()"
13524
- [min]="field.min ?? 0" [max]="field.max ?? 100" [step]="field.step ?? 1"
13520
+ <div class="flex flex-col gap-2">
13521
+ <clx-number
13522
+ [label]="'Mín' + (field.unit ? ' (' + field.unit + ')' : '')"
13523
+ [color]="_color()"
13524
+ [min]="field.min ?? null" [max]="field.max ?? null" [step]="field.step ?? 1"
13525
13525
  [ngModel]="rv.min"
13526
13526
  (ngModelChange)="_setRange(field.key, $event, rv.max, field)"
13527
13527
  size="sm" />
13528
- <clx-slider
13529
- [label]="'Máx: ' + (field.unit ?? '') + rv.max"
13530
- [activeColor]="_color()"
13531
- [min]="field.min ?? 0" [max]="field.max ?? 100" [step]="field.step ?? 1"
13528
+ <clx-number
13529
+ [label]="'Máx' + (field.unit ? ' (' + field.unit + ')' : '')"
13530
+ [color]="_color()"
13531
+ [min]="field.min ?? null" [max]="field.max ?? null" [step]="field.step ?? 1"
13532
13532
  [ngModel]="rv.max"
13533
13533
  (ngModelChange)="_setRange(field.key, rv.min, $event, field)"
13534
13534
  size="sm" />
@@ -13562,14 +13562,14 @@ class ClxFilterPanelComponent {
13562
13562
  </div>
13563
13563
  }
13564
13564
  }
13565
- `, 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 });
13565
+ `, 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: ClxNumberComponent, selector: "clx-number", inputs: ["variant", "size", "color", "label", "placeholder", "hint", "prefixIcon", "min", "max", "step", "value", "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 });
13566
13566
  }
13567
13567
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxFilterPanelComponent, decorators: [{
13568
13568
  type: Component,
13569
13569
  args: [{
13570
13570
  selector: 'clx-filter-panel',
13571
13571
  standalone: true,
13572
- imports: [FormsModule, ClxIconComponent, ClxButtonComponent, ClxCheckboxComponent, ClxSliderComponent, ClxRadioGroupComponent, ClxRadioComponent, ClxSelectComponent],
13572
+ imports: [FormsModule, ClxIconComponent, ClxButtonComponent, ClxCheckboxComponent, ClxNumberComponent, ClxRadioGroupComponent, ClxRadioComponent, ClxSelectComponent],
13573
13573
  template: `
13574
13574
  <!-- Header -->
13575
13575
  <div [class]="_headerClass()" (click)="collapsible() ? _togglePanel() : null">
@@ -13655,21 +13655,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
13655
13655
  </clx-radio-group>
13656
13656
  }
13657
13657
 
13658
- <!-- Range slider — min -->
13658
+ <!-- Range — min/max -->
13659
13659
  @if (field.type === 'range') {
13660
13660
  @let rv = _getRangeValue(field);
13661
- <div class="space-y-3">
13662
- <clx-slider
13663
- [label]="'Mín: ' + (field.unit ?? '') + rv.min"
13664
- [activeColor]="_color()"
13665
- [min]="field.min ?? 0" [max]="field.max ?? 100" [step]="field.step ?? 1"
13661
+ <div class="flex flex-col gap-2">
13662
+ <clx-number
13663
+ [label]="'Mín' + (field.unit ? ' (' + field.unit + ')' : '')"
13664
+ [color]="_color()"
13665
+ [min]="field.min ?? null" [max]="field.max ?? null" [step]="field.step ?? 1"
13666
13666
  [ngModel]="rv.min"
13667
13667
  (ngModelChange)="_setRange(field.key, $event, rv.max, field)"
13668
13668
  size="sm" />
13669
- <clx-slider
13670
- [label]="'Máx: ' + (field.unit ?? '') + rv.max"
13671
- [activeColor]="_color()"
13672
- [min]="field.min ?? 0" [max]="field.max ?? 100" [step]="field.step ?? 1"
13669
+ <clx-number
13670
+ [label]="'Máx' + (field.unit ? ' (' + field.unit + ')' : '')"
13671
+ [color]="_color()"
13672
+ [min]="field.min ?? null" [max]="field.max ?? null" [step]="field.step ?? 1"
13673
13673
  [ngModel]="rv.max"
13674
13674
  (ngModelChange)="_setRange(field.key, rv.min, $event, field)"
13675
13675
  size="sm" />