@wizishop/angular-components 15.1.126 → 15.1.129

package/fesm2020/wizishop-angular-components.mjs

@@ -6667,7 +6667,8 @@ class BorderPickerComponent {
         this.gap = '12px';
         this.fontSize = '14px';
         this.disabled = false;
-        this.value = '0%';
+        this.value = '0px';
+        this.maxPixels = 50; // Valeur maximale en pixels
         this.blurred = new EventEmitter();
         this.borderRadiusChange = new EventEmitter();
         this.sliderValue = 0;
@@ -6676,7 +6677,7 @@ class BorderPickerComponent {
     }
     ngOnInit() {
         if (this.value) {
-            const numericValue = parseInt(this.value.replace('%', ''), 10);
+            const numericValue = parseInt(this.value.replace('px', ''), 10);
             if (!isNaN(numericValue)) {
                 this.sliderValue = numericValue;
             }
@@ -6684,7 +6685,20 @@ class BorderPickerComponent {
     }
     writeValue(value) {
         if (value !== undefined) {
-            this.value = value;
+            this.value = value || '0px'; // Default to '0px' if value is null
+            if (this.value) {
+                const numericValue = parseInt(this.value.replace('px', ''), 10);
+                if (!isNaN(numericValue)) {
+                    this.sliderValue = numericValue;
+                    this.updateSliderPercentage();
+                }
+            }
+            else {
+                // Handle null value case
+                this.sliderValue = 0;
+                this.value = '0px';
+                this.updateSliderPercentage();
+            }
         }
     }
     registerOnChange(fn) {
@@ -6694,11 +6708,16 @@ class BorderPickerComponent {
         this.onTouched = fn;
     }
     setValue(event) {
-        this.value = event.target.value;
-        const numericValue = parseInt(this.value.replace('%', ''), 10);
-        if (!isNaN(numericValue)) {
-            this.sliderValue = numericValue;
-            this.updateSliderPercentage();
+        this.value = event.target.value || '0px';
+        if (this.value) {
+            const numericValue = parseInt(this.value.replace('px', ''), 10);
+            if (!isNaN(numericValue)) {
+                this.sliderValue = numericValue;
+                this.updateSliderPercentage();
+            }
+        }
+        else {
+            this.sliderValue = 0;
         }
         this.onChange(this.value);
         this.borderRadiusChange.emit(this.value);
@@ -6706,21 +6725,22 @@ class BorderPickerComponent {
     updateSliderPercentage() {
         const slider = document.querySelector('.bp-range');
         if (slider) {
-            slider.style.setProperty('--slider-percentage', `${this.sliderValue}%`);
+            const percentage = (this.sliderValue / this.maxPixels) * 100;
+            slider.style.setProperty('--slider-percentage', `${percentage}%`);
         }
     }
     ngAfterViewInit() {
         this.updateSliderPercentage();
     }
     onFocusOut() {
-        if (!this.value.endsWith('%') && this.value) {
-            this.value = this.value + '%';
+        if (!this.value.endsWith('px') && this.value) {
+            this.value = this.value + 'px';
             this.onChange(this.value);
             this.borderRadiusChange.emit(this.value);
         }
     }
     updateBorderRadius(value) {
-        this.value = value + '%';
+        this.value = value + 'px';
         this.updateSliderPercentage();
         this.onChange(this.value);
         this.borderRadiusChange.emit(this.value);
@@ -6731,13 +6751,13 @@ class BorderPickerComponent {
     }
 }
 BorderPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BorderPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BorderPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: BorderPickerComponent, isStandalone: true, selector: "wac-border-picker", inputs: { label: "label", gap: "gap", fontSize: "fontSize", disabled: "disabled", value: "value" }, outputs: { blurred: "blurred", borderRadiusChange: "borderRadiusChange" }, providers: [
+BorderPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: BorderPickerComponent, isStandalone: true, selector: "wac-border-picker", inputs: { label: "label", gap: "gap", fontSize: "fontSize", disabled: "disabled", value: "value", maxPixels: "maxPixels" }, outputs: { blurred: "blurred", borderRadiusChange: "borderRadiusChange" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => BorderPickerComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<div class=\"w-border-picker\" [ngStyle]=\"{'gap': gap}\">\r\n\r\n  <label class=\"bp-label\" for=\"borderPicker\" [ngStyle]=\"{'font-size': fontSize}\">{{ label }}</label>\r\n\r\n  <div class=\"w-input\">\r\n\r\n    <div class=\"border-preview\" [ngStyle]=\"{'border-radius': value}\">\r\n      <div class=\"mask1\"></div>\r\n      <div class=\"mask2\"></div>\r\n    </div>\r\n\r\n    <input\r\n      class=\"bp-range\"\r\n      type=\"range\"\r\n      min=\"0\"\r\n      max=\"100\"\r\n      [(ngModel)]=\"sliderValue\"\r\n      (ngModelChange)=\"updateBorderRadius($event)\"\r\n    />\r\n\r\n    <input\r\n      class=\"bp-input\"\r\n      id=\"borderPicker\"\r\n      [placeholder]=\"sliderValue\"\r\n      maxlength=\"5\"\r\n      [(ngModel)]=\"value\"\r\n      (ngModelChange)=\"onChange($event)\"\r\n      (focusout)=\"onFocusOut()\"\r\n      (input)=\"setValue($event)\"\r\n    />\r\n\r\n  </div>\r\n\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    ], ngImport: i0, template: "<div class=\"w-border-picker\" [ngStyle]=\"{'gap': gap}\">\r\n\r\n  <label class=\"bp-label\" for=\"borderPicker\" [ngStyle]=\"{'font-size': fontSize}\">{{ label }}</label>\r\n\r\n  <div class=\"w-input\">\r\n\r\n    <div class=\"border-preview\" [ngStyle]=\"{'border-radius': value}\">\r\n      <div class=\"mask1\"></div>\r\n      <div class=\"mask2\"></div>\r\n    </div>\r\n\r\n    <input\r\n      class=\"bp-range\"\r\n      type=\"range\"\r\n      min=\"0\"\r\n      [max]=\"maxPixels\"\r\n      [(ngModel)]=\"sliderValue\"\r\n      (ngModelChange)=\"updateBorderRadius($event)\"\r\n    />\r\n\r\n    <input\r\n      class=\"bp-input\"\r\n      id=\"borderPicker\"\r\n      [placeholder]=\"sliderValue\"\r\n      maxlength=\"5\"\r\n      [(ngModel)]=\"value\"\r\n      (ngModelChange)=\"onChange($event)\"\r\n      (focusout)=\"onFocusOut()\"\r\n      (input)=\"setValue($event)\"\r\n    />\r\n\r\n  </div>\r\n\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BorderPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: "wac-border-picker", standalone: true, imports: [
@@ -6749,7 +6769,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
                             useExisting: forwardRef(() => BorderPickerComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"w-border-picker\" [ngStyle]=\"{'gap': gap}\">\r\n\r\n  <label class=\"bp-label\" for=\"borderPicker\" [ngStyle]=\"{'font-size': fontSize}\">{{ label }}</label>\r\n\r\n  <div class=\"w-input\">\r\n\r\n    <div class=\"border-preview\" [ngStyle]=\"{'border-radius': value}\">\r\n      <div class=\"mask1\"></div>\r\n      <div class=\"mask2\"></div>\r\n    </div>\r\n\r\n    <input\r\n      class=\"bp-range\"\r\n      type=\"range\"\r\n      min=\"0\"\r\n      max=\"100\"\r\n      [(ngModel)]=\"sliderValue\"\r\n      (ngModelChange)=\"updateBorderRadius($event)\"\r\n    />\r\n\r\n    <input\r\n      class=\"bp-input\"\r\n      id=\"borderPicker\"\r\n      [placeholder]=\"sliderValue\"\r\n      maxlength=\"5\"\r\n      [(ngModel)]=\"value\"\r\n      (ngModelChange)=\"onChange($event)\"\r\n      (focusout)=\"onFocusOut()\"\r\n      (input)=\"setValue($event)\"\r\n    />\r\n\r\n  </div>\r\n\r\n</div>\r\n" }]
+                    ], template: "<div class=\"w-border-picker\" [ngStyle]=\"{'gap': gap}\">\r\n\r\n  <label class=\"bp-label\" for=\"borderPicker\" [ngStyle]=\"{'font-size': fontSize}\">{{ label }}</label>\r\n\r\n  <div class=\"w-input\">\r\n\r\n    <div class=\"border-preview\" [ngStyle]=\"{'border-radius': value}\">\r\n      <div class=\"mask1\"></div>\r\n      <div class=\"mask2\"></div>\r\n    </div>\r\n\r\n    <input\r\n      class=\"bp-range\"\r\n      type=\"range\"\r\n      min=\"0\"\r\n      [max]=\"maxPixels\"\r\n      [(ngModel)]=\"sliderValue\"\r\n      (ngModelChange)=\"updateBorderRadius($event)\"\r\n    />\r\n\r\n    <input\r\n      class=\"bp-input\"\r\n      id=\"borderPicker\"\r\n      [placeholder]=\"sliderValue\"\r\n      maxlength=\"5\"\r\n      [(ngModel)]=\"value\"\r\n      (ngModelChange)=\"onChange($event)\"\r\n      (focusout)=\"onFocusOut()\"\r\n      (input)=\"setValue($event)\"\r\n    />\r\n\r\n  </div>\r\n\r\n</div>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { label: [{
                 type: Input
             }], gap: [{
@@ -6760,6 +6780,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
                 type: Input
             }], value: [{
                 type: Input
+            }], maxPixels: [{
+                type: Input
             }], blurred: [{
                 type: Output
             }], borderRadiusChange: [{