@wizishop/angular-components 15.1.125 → 15.1.127
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.
- package/esm2020/lib/components/border-picker/border-picker.component.mjs +20 -11
- package/esm2020/lib/components/slide-in/slide-in.component.mjs +6 -3
- package/fesm2015/wizishop-angular-components.mjs +24 -12
- package/fesm2015/wizishop-angular-components.mjs.map +1 -1
- package/fesm2020/wizishop-angular-components.mjs +24 -12
- package/fesm2020/wizishop-angular-components.mjs.map +1 -1
- package/lib/components/border-picker/border-picker.component.d.ts +2 -1
- package/lib/components/slide-in/slide-in.component.d.ts +2 -1
- package/package.json +1 -1
- package/wizishop-angular-components-15.1.127.tgz +0 -0
- package/wizishop-angular-components-15.1.125.tgz +0 -0
|
@@ -6667,7 +6667,8 @@ class BorderPickerComponent {
|
|
|
6667
6667
|
this.gap = '12px';
|
|
6668
6668
|
this.fontSize = '14px';
|
|
6669
6669
|
this.disabled = false;
|
|
6670
|
-
this.value = '
|
|
6670
|
+
this.value = '0px';
|
|
6671
|
+
this.maxPixels = 50; // Valeur maximale en pixels
|
|
6671
6672
|
this.blurred = new EventEmitter();
|
|
6672
6673
|
this.borderRadiusChange = new EventEmitter();
|
|
6673
6674
|
this.sliderValue = 0;
|
|
@@ -6676,7 +6677,7 @@ class BorderPickerComponent {
|
|
|
6676
6677
|
}
|
|
6677
6678
|
ngOnInit() {
|
|
6678
6679
|
if (this.value) {
|
|
6679
|
-
const numericValue = parseInt(this.value.replace('
|
|
6680
|
+
const numericValue = parseInt(this.value.replace('px', ''), 10);
|
|
6680
6681
|
if (!isNaN(numericValue)) {
|
|
6681
6682
|
this.sliderValue = numericValue;
|
|
6682
6683
|
}
|
|
@@ -6685,6 +6686,11 @@ class BorderPickerComponent {
|
|
|
6685
6686
|
writeValue(value) {
|
|
6686
6687
|
if (value !== undefined) {
|
|
6687
6688
|
this.value = value;
|
|
6689
|
+
const numericValue = parseInt(this.value.replace('px', ''), 10);
|
|
6690
|
+
if (!isNaN(numericValue)) {
|
|
6691
|
+
this.sliderValue = numericValue;
|
|
6692
|
+
this.updateSliderPercentage();
|
|
6693
|
+
}
|
|
6688
6694
|
}
|
|
6689
6695
|
}
|
|
6690
6696
|
registerOnChange(fn) {
|
|
@@ -6695,7 +6701,7 @@ class BorderPickerComponent {
|
|
|
6695
6701
|
}
|
|
6696
6702
|
setValue(event) {
|
|
6697
6703
|
this.value = event.target.value;
|
|
6698
|
-
const numericValue = parseInt(this.value.replace('
|
|
6704
|
+
const numericValue = parseInt(this.value.replace('px', ''), 10);
|
|
6699
6705
|
if (!isNaN(numericValue)) {
|
|
6700
6706
|
this.sliderValue = numericValue;
|
|
6701
6707
|
this.updateSliderPercentage();
|
|
@@ -6706,21 +6712,22 @@ class BorderPickerComponent {
|
|
|
6706
6712
|
updateSliderPercentage() {
|
|
6707
6713
|
const slider = document.querySelector('.bp-range');
|
|
6708
6714
|
if (slider) {
|
|
6709
|
-
|
|
6715
|
+
const percentage = (this.sliderValue / this.maxPixels) * 100;
|
|
6716
|
+
slider.style.setProperty('--slider-percentage', `${percentage}%`);
|
|
6710
6717
|
}
|
|
6711
6718
|
}
|
|
6712
6719
|
ngAfterViewInit() {
|
|
6713
6720
|
this.updateSliderPercentage();
|
|
6714
6721
|
}
|
|
6715
6722
|
onFocusOut() {
|
|
6716
|
-
if (!this.value.endsWith('
|
|
6717
|
-
this.value = this.value + '
|
|
6723
|
+
if (!this.value.endsWith('px') && this.value) {
|
|
6724
|
+
this.value = this.value + 'px';
|
|
6718
6725
|
this.onChange(this.value);
|
|
6719
6726
|
this.borderRadiusChange.emit(this.value);
|
|
6720
6727
|
}
|
|
6721
6728
|
}
|
|
6722
6729
|
updateBorderRadius(value) {
|
|
6723
|
-
this.value = value + '
|
|
6730
|
+
this.value = value + 'px';
|
|
6724
6731
|
this.updateSliderPercentage();
|
|
6725
6732
|
this.onChange(this.value);
|
|
6726
6733
|
this.borderRadiusChange.emit(this.value);
|
|
@@ -6731,13 +6738,13 @@ class BorderPickerComponent {
|
|
|
6731
6738
|
}
|
|
6732
6739
|
}
|
|
6733
6740
|
BorderPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BorderPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6734
|
-
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: [
|
|
6741
|
+
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: [
|
|
6735
6742
|
{
|
|
6736
6743
|
provide: NG_VALUE_ACCESSOR,
|
|
6737
6744
|
useExisting: forwardRef(() => BorderPickerComponent),
|
|
6738
6745
|
multi: true
|
|
6739
6746
|
}
|
|
6740
|
-
], 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=\"
|
|
6747
|
+
], 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"] }] });
|
|
6741
6748
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BorderPickerComponent, decorators: [{
|
|
6742
6749
|
type: Component,
|
|
6743
6750
|
args: [{ selector: "wac-border-picker", standalone: true, imports: [
|
|
@@ -6749,7 +6756,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
6749
6756
|
useExisting: forwardRef(() => BorderPickerComponent),
|
|
6750
6757
|
multi: true
|
|
6751
6758
|
}
|
|
6752
|
-
], 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=\"
|
|
6759
|
+
], 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>" }]
|
|
6753
6760
|
}], ctorParameters: function () { return []; }, propDecorators: { label: [{
|
|
6754
6761
|
type: Input
|
|
6755
6762
|
}], gap: [{
|
|
@@ -6760,6 +6767,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
6760
6767
|
type: Input
|
|
6761
6768
|
}], value: [{
|
|
6762
6769
|
type: Input
|
|
6770
|
+
}], maxPixels: [{
|
|
6771
|
+
type: Input
|
|
6763
6772
|
}], blurred: [{
|
|
6764
6773
|
type: Output
|
|
6765
6774
|
}], borderRadiusChange: [{
|
|
@@ -6773,6 +6782,7 @@ class SlideInComponent {
|
|
|
6773
6782
|
this.hasButton = false;
|
|
6774
6783
|
this.primaryButtonText = 'Valider';
|
|
6775
6784
|
this.secondaryButtonText = 'Annuler';
|
|
6785
|
+
this.maxWidth = null;
|
|
6776
6786
|
this.closed = new EventEmitter();
|
|
6777
6787
|
this.primaryButtonClick = new EventEmitter();
|
|
6778
6788
|
this.secondaryButtonClick = new EventEmitter();
|
|
@@ -6806,10 +6816,10 @@ class SlideInComponent {
|
|
|
6806
6816
|
}
|
|
6807
6817
|
}
|
|
6808
6818
|
SlideInComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: SlideInComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6809
|
-
SlideInComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: SlideInComponent, selector: "wac-slide-in", inputs: { title: "title", isOpen: "isOpen", hasButton: "hasButton", primaryButtonText: "primaryButtonText", secondaryButtonText: "secondaryButtonText" }, outputs: { closed: "closed", primaryButtonClick: "primaryButtonClick", secondaryButtonClick: "secondaryButtonClick" }, ngImport: i0, template: "<ng-container class=\"slide-in\">\r\n <div class=\"slide-in__overlay\" [class.is-visible]=\"isOpen\" (click)=\"close()\"></div>\r\n \r\n <div class=\"slide-in__panel\" [class.is-open]=\"isOpen\">\r\n \r\n <div class=\"slide-in__panel__header\">\r\n <h2 class=\"slide-in__panel__header__title\">{{ title }}</h2>\r\n <i class=\"slide-in__panel__header__close fa-regular fa-xmark\" (click)=\"close()\"></i>\r\n </div>\r\n \r\n <div class=\"slide-in__panel__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <div class=\"slide-in__panel__footer\" *ngIf=\"hasButton\">\r\n <wac-button \r\n [extraClasses]=\"'is-grey is-outlined'\" \r\n [label]=\"secondaryButtonText\"\r\n (click)=\"onSecondaryButtonClick()\"\r\n ></wac-button>\r\n <wac-button \r\n [extraClasses]=\"'is-info'\" \r\n [label]=\"primaryButtonText\"\r\n (click)=\"onPrimaryButtonClick()\"\r\n ></wac-button>\r\n </div>\r\n \r\n </div>\r\n</ng-container>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "wac-button", inputs: ["extraClasses", "label", "icon", "isLoadingSvg", "iconNext", "textcolor", "colorIcon", "widthAuto", "contentHorizontalPosition", "iconFontSize", "hasLoader", "disabled", "whiteSpaceNowrap", "opacity", "animation", "animationRight", "animationText", "confirmDelete", "confirmDeleteText", "coin", "tooltip", "tooltipWidth", "borderColor", "noPadding", "tooltipPosition", "tooltipOneline", "confirmDeletePosition", "isLoading"], outputs: ["click", "isLoadingChange"] }] });
|
|
6819
|
+
SlideInComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: SlideInComponent, selector: "wac-slide-in", inputs: { title: "title", isOpen: "isOpen", hasButton: "hasButton", primaryButtonText: "primaryButtonText", secondaryButtonText: "secondaryButtonText", maxWidth: "maxWidth" }, outputs: { closed: "closed", primaryButtonClick: "primaryButtonClick", secondaryButtonClick: "secondaryButtonClick" }, ngImport: i0, template: "<ng-container class=\"slide-in\">\r\n <div class=\"slide-in__overlay\" [class.is-visible]=\"isOpen\" (click)=\"close()\"></div>\r\n \r\n <div class=\"slide-in__panel\" [class.is-open]=\"isOpen\" [style.max-width]=\"maxWidth ? maxWidth : '534px'\">\r\n \r\n <div class=\"slide-in__panel__header\">\r\n <h2 class=\"slide-in__panel__header__title\">{{ title }}</h2>\r\n <i class=\"slide-in__panel__header__close fa-regular fa-xmark\" (click)=\"close()\"></i>\r\n </div>\r\n \r\n <div class=\"slide-in__panel__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <div class=\"slide-in__panel__footer\" *ngIf=\"hasButton\">\r\n <wac-button \r\n [extraClasses]=\"'is-grey is-outlined'\" \r\n [label]=\"secondaryButtonText\"\r\n (click)=\"onSecondaryButtonClick()\"\r\n ></wac-button>\r\n <wac-button \r\n [extraClasses]=\"'is-info'\" \r\n [label]=\"primaryButtonText\"\r\n (click)=\"onPrimaryButtonClick()\"\r\n ></wac-button>\r\n </div>\r\n \r\n </div>\r\n</ng-container>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "wac-button", inputs: ["extraClasses", "label", "icon", "isLoadingSvg", "iconNext", "textcolor", "colorIcon", "widthAuto", "contentHorizontalPosition", "iconFontSize", "hasLoader", "disabled", "whiteSpaceNowrap", "opacity", "animation", "animationRight", "animationText", "confirmDelete", "confirmDeleteText", "coin", "tooltip", "tooltipWidth", "borderColor", "noPadding", "tooltipPosition", "tooltipOneline", "confirmDeletePosition", "isLoading"], outputs: ["click", "isLoadingChange"] }] });
|
|
6810
6820
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: SlideInComponent, decorators: [{
|
|
6811
6821
|
type: Component,
|
|
6812
|
-
args: [{ selector: 'wac-slide-in', template: "<ng-container class=\"slide-in\">\r\n <div class=\"slide-in__overlay\" [class.is-visible]=\"isOpen\" (click)=\"close()\"></div>\r\n \r\n <div class=\"slide-in__panel\" [class.is-open]=\"isOpen\">\r\n \r\n <div class=\"slide-in__panel__header\">\r\n <h2 class=\"slide-in__panel__header__title\">{{ title }}</h2>\r\n <i class=\"slide-in__panel__header__close fa-regular fa-xmark\" (click)=\"close()\"></i>\r\n </div>\r\n \r\n <div class=\"slide-in__panel__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <div class=\"slide-in__panel__footer\" *ngIf=\"hasButton\">\r\n <wac-button \r\n [extraClasses]=\"'is-grey is-outlined'\" \r\n [label]=\"secondaryButtonText\"\r\n (click)=\"onSecondaryButtonClick()\"\r\n ></wac-button>\r\n <wac-button \r\n [extraClasses]=\"'is-info'\" \r\n [label]=\"primaryButtonText\"\r\n (click)=\"onPrimaryButtonClick()\"\r\n ></wac-button>\r\n </div>\r\n \r\n </div>\r\n</ng-container>" }]
|
|
6822
|
+
args: [{ selector: 'wac-slide-in', template: "<ng-container class=\"slide-in\">\r\n <div class=\"slide-in__overlay\" [class.is-visible]=\"isOpen\" (click)=\"close()\"></div>\r\n \r\n <div class=\"slide-in__panel\" [class.is-open]=\"isOpen\" [style.max-width]=\"maxWidth ? maxWidth : '534px'\">\r\n \r\n <div class=\"slide-in__panel__header\">\r\n <h2 class=\"slide-in__panel__header__title\">{{ title }}</h2>\r\n <i class=\"slide-in__panel__header__close fa-regular fa-xmark\" (click)=\"close()\"></i>\r\n </div>\r\n \r\n <div class=\"slide-in__panel__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <div class=\"slide-in__panel__footer\" *ngIf=\"hasButton\">\r\n <wac-button \r\n [extraClasses]=\"'is-grey is-outlined'\" \r\n [label]=\"secondaryButtonText\"\r\n (click)=\"onSecondaryButtonClick()\"\r\n ></wac-button>\r\n <wac-button \r\n [extraClasses]=\"'is-info'\" \r\n [label]=\"primaryButtonText\"\r\n (click)=\"onPrimaryButtonClick()\"\r\n ></wac-button>\r\n </div>\r\n \r\n </div>\r\n</ng-container>" }]
|
|
6813
6823
|
}], propDecorators: { title: [{
|
|
6814
6824
|
type: Input
|
|
6815
6825
|
}], isOpen: [{
|
|
@@ -6820,6 +6830,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
6820
6830
|
type: Input
|
|
6821
6831
|
}], secondaryButtonText: [{
|
|
6822
6832
|
type: Input
|
|
6833
|
+
}], maxWidth: [{
|
|
6834
|
+
type: Input
|
|
6823
6835
|
}], closed: [{
|
|
6824
6836
|
type: Output
|
|
6825
6837
|
}], primaryButtonClick: [{
|