@wizishop/angular-components 15.1.115 → 15.1.117
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/angular-components.scss +93 -19
- package/esm2020/lib/components/border-picker/border-picker.component.mjs +50 -8
- package/esm2020/lib/components/color-picker/color-picker.component.mjs +41 -9
- package/esm2020/lib/components/shared-components.module.mjs +8 -4
- package/esm2020/lib/components/slide-in/slide-in.component.mjs +37 -0
- package/esm2020/public-api.mjs +2 -1
- package/fesm2015/wizishop-angular-components.mjs +127 -15
- package/fesm2015/wizishop-angular-components.mjs.map +1 -1
- package/fesm2020/wizishop-angular-components.mjs +127 -15
- package/fesm2020/wizishop-angular-components.mjs.map +1 -1
- package/lib/components/border-picker/border-picker.component.d.ts +13 -2
- package/lib/components/color-picker/color-picker.component.d.ts +10 -3
- package/lib/components/shared-components.module.d.ts +52 -51
- package/lib/components/slide-in/slide-in.component.d.ts +17 -0
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
- package/wizishop-angular-components-15.1.117.tgz +0 -0
- package/wizishop-angular-components-15.1.115.tgz +0 -0
|
@@ -6495,9 +6495,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
6495
6495
|
|
|
6496
6496
|
class ColorPickerComponent {
|
|
6497
6497
|
constructor() {
|
|
6498
|
+
this.value = '';
|
|
6498
6499
|
this.gap = '12px';
|
|
6499
6500
|
this.fontSize = '14px';
|
|
6500
6501
|
this.colorChange = new EventEmitter();
|
|
6502
|
+
this.onChange = () => { };
|
|
6503
|
+
this.onTouched = () => { };
|
|
6504
|
+
}
|
|
6505
|
+
writeValue(value) {
|
|
6506
|
+
if (value !== undefined) {
|
|
6507
|
+
this.value = value;
|
|
6508
|
+
}
|
|
6509
|
+
}
|
|
6510
|
+
registerOnChange(fn) {
|
|
6511
|
+
this.onChange = fn;
|
|
6512
|
+
}
|
|
6513
|
+
registerOnTouched(fn) {
|
|
6514
|
+
this.onTouched = fn;
|
|
6515
|
+
}
|
|
6516
|
+
setValue(event) {
|
|
6517
|
+
this.value = event.target.value;
|
|
6518
|
+
this.onChange(this.value);
|
|
6519
|
+
this.colorChange.emit(this.value);
|
|
6501
6520
|
}
|
|
6502
6521
|
changeColor(color) {
|
|
6503
6522
|
// Remove any non-hexadecimal characters
|
|
@@ -6508,12 +6527,13 @@ class ColorPickerComponent {
|
|
|
6508
6527
|
}
|
|
6509
6528
|
// Validate and update color
|
|
6510
6529
|
if (this.isValidColor(color)) {
|
|
6511
|
-
this.
|
|
6512
|
-
this.
|
|
6530
|
+
this.value = color;
|
|
6531
|
+
this.onChange(this.value); // 🔥 AJOUT de cette ligne pour informer Angular du changement
|
|
6532
|
+
this.colorChange.emit(this.value);
|
|
6513
6533
|
}
|
|
6514
6534
|
else {
|
|
6515
6535
|
// If invalid, reset to previous valid color
|
|
6516
|
-
this.colorChange.emit(this.
|
|
6536
|
+
this.colorChange.emit(this.value);
|
|
6517
6537
|
}
|
|
6518
6538
|
}
|
|
6519
6539
|
isValidColor(color) {
|
|
@@ -6523,17 +6543,29 @@ class ColorPickerComponent {
|
|
|
6523
6543
|
}
|
|
6524
6544
|
}
|
|
6525
6545
|
ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6526
|
-
ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: ColorPickerComponent, isStandalone: true, selector: "wac-color-picker", inputs: { label: "label",
|
|
6546
|
+
ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: ColorPickerComponent, isStandalone: true, selector: "wac-color-picker", inputs: { label: "label", value: "value", gap: "gap", fontSize: "fontSize" }, outputs: { colorChange: "colorChange" }, providers: [
|
|
6547
|
+
{
|
|
6548
|
+
provide: NG_VALUE_ACCESSOR,
|
|
6549
|
+
useExisting: forwardRef(() => ColorPickerComponent),
|
|
6550
|
+
multi: true
|
|
6551
|
+
}
|
|
6552
|
+
], ngImport: i0, template: "<div class=\"w-color-picker\" [ngStyle]=\"{'gap': gap}\">\r\n\r\n <label class=\"cp-label\" for=\"colorPicker\" [ngStyle]=\"{'font-size': fontSize}\">{{ label }}</label>\r\n\r\n <div class=\"w-input\">\r\n\r\n <div\r\n class=\"color-preview\"\r\n [colorPicker]=\"value\"\r\n (click)=\"colorPickerInput.openDialog()\"\r\n [ngStyle]=\"{'background-color': value}\"\r\n [cpPosition]=\"'bottom'\"\r\n [cpPositionOffset]=\"'-35'\"\r\n ></div>\r\n\r\n <input\r\n class=\"cp-input\"\r\n id=\"colorPicker\"\r\n #colorPickerInput=\"ngxColorPicker\"\r\n maxlength=\"7\"\r\n placeholder=\"#000000\"\r\n [(ngModel)]=\"value\"\r\n (ngModelChange)=\"changeColor($event)\"\r\n [colorPicker]=\"value\"\r\n (colorPickerChange)=\"changeColor($event)\"\r\n [cpPosition]=\"'bottom'\"\r\n [cpPositionOffset]=\"'-35'\"\r\n (input)=\"setValue($event)\"\r\n />\r\n\r\n </div>\r\n\r\n</div>\r\n", styles: [".w-color-picker{display:flex;flex-direction:column}.w-color-picker .cp-label{font-weight:500}.w-color-picker .w-input{width:210px;height:40px;display:flex;align-items:center;gap:10px;padding:5px;border:1px solid #dee2ed;border-radius:3px}.w-color-picker .w-input .color-preview{width:30px;height:30px;border:1px solid #dee2ed;border-radius:3px}.w-color-picker .w-input .cp-input{width:70%;height:100%;border:none;font-size:14px;color:#1d2a3b;font-weight:400}\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.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"] }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "directive", type: i3$3.ColorPickerDirective, selector: "[colorPicker]", inputs: ["colorPicker", "cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpEyeDropper", "cpPresetLabel", "cpPresetColors", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "cpArrowPosition", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }] });
|
|
6527
6553
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ColorPickerComponent, decorators: [{
|
|
6528
6554
|
type: Component,
|
|
6529
6555
|
args: [{ selector: "wac-color-picker", standalone: true, imports: [
|
|
6530
6556
|
CommonModule,
|
|
6531
6557
|
FormsModule,
|
|
6532
6558
|
ColorPickerModule
|
|
6533
|
-
],
|
|
6559
|
+
], providers: [
|
|
6560
|
+
{
|
|
6561
|
+
provide: NG_VALUE_ACCESSOR,
|
|
6562
|
+
useExisting: forwardRef(() => ColorPickerComponent),
|
|
6563
|
+
multi: true
|
|
6564
|
+
}
|
|
6565
|
+
], template: "<div class=\"w-color-picker\" [ngStyle]=\"{'gap': gap}\">\r\n\r\n <label class=\"cp-label\" for=\"colorPicker\" [ngStyle]=\"{'font-size': fontSize}\">{{ label }}</label>\r\n\r\n <div class=\"w-input\">\r\n\r\n <div\r\n class=\"color-preview\"\r\n [colorPicker]=\"value\"\r\n (click)=\"colorPickerInput.openDialog()\"\r\n [ngStyle]=\"{'background-color': value}\"\r\n [cpPosition]=\"'bottom'\"\r\n [cpPositionOffset]=\"'-35'\"\r\n ></div>\r\n\r\n <input\r\n class=\"cp-input\"\r\n id=\"colorPicker\"\r\n #colorPickerInput=\"ngxColorPicker\"\r\n maxlength=\"7\"\r\n placeholder=\"#000000\"\r\n [(ngModel)]=\"value\"\r\n (ngModelChange)=\"changeColor($event)\"\r\n [colorPicker]=\"value\"\r\n (colorPickerChange)=\"changeColor($event)\"\r\n [cpPosition]=\"'bottom'\"\r\n [cpPositionOffset]=\"'-35'\"\r\n (input)=\"setValue($event)\"\r\n />\r\n\r\n </div>\r\n\r\n</div>\r\n", styles: [".w-color-picker{display:flex;flex-direction:column}.w-color-picker .cp-label{font-weight:500}.w-color-picker .w-input{width:210px;height:40px;display:flex;align-items:center;gap:10px;padding:5px;border:1px solid #dee2ed;border-radius:3px}.w-color-picker .w-input .color-preview{width:30px;height:30px;border:1px solid #dee2ed;border-radius:3px}.w-color-picker .w-input .cp-input{width:70%;height:100%;border:none;font-size:14px;color:#1d2a3b;font-weight:400}\n"] }]
|
|
6534
6566
|
}], ctorParameters: function () { return []; }, propDecorators: { label: [{
|
|
6535
6567
|
type: Input
|
|
6536
|
-
}],
|
|
6568
|
+
}], value: [{
|
|
6537
6569
|
type: Input
|
|
6538
6570
|
}], gap: [{
|
|
6539
6571
|
type: Input
|
|
@@ -6551,17 +6583,41 @@ class BorderPickerComponent {
|
|
|
6551
6583
|
this.firstBtnOption = 'Small';
|
|
6552
6584
|
this.secondBtnOption = 'Medium';
|
|
6553
6585
|
this.thirdBtnOption = 'Full';
|
|
6586
|
+
this.disabled = false;
|
|
6587
|
+
this.value = '';
|
|
6588
|
+
this.blurred = new EventEmitter();
|
|
6554
6589
|
this.borderRadiusChange = new EventEmitter();
|
|
6555
6590
|
this.showSlider = false;
|
|
6556
6591
|
this.sliderValue = 0;
|
|
6592
|
+
this.onChange = () => { };
|
|
6593
|
+
this.onTouched = () => { };
|
|
6594
|
+
}
|
|
6595
|
+
writeValue(value) {
|
|
6596
|
+
if (value !== undefined) {
|
|
6597
|
+
this.value = value;
|
|
6598
|
+
}
|
|
6599
|
+
}
|
|
6600
|
+
registerOnChange(fn) {
|
|
6601
|
+
this.onChange = fn;
|
|
6602
|
+
}
|
|
6603
|
+
registerOnTouched(fn) {
|
|
6604
|
+
this.onTouched = fn;
|
|
6605
|
+
}
|
|
6606
|
+
setValue(event) {
|
|
6607
|
+
this.value = event.target.value;
|
|
6608
|
+
this.onChange(this.value);
|
|
6609
|
+
this.borderRadiusChange.emit(this.value);
|
|
6610
|
+
}
|
|
6611
|
+
onFocusOut() {
|
|
6557
6612
|
}
|
|
6558
6613
|
openSlider() {
|
|
6559
6614
|
this.showSlider = true;
|
|
6560
|
-
this.sliderValue = parseInt(this.
|
|
6615
|
+
this.sliderValue = parseInt(this.value.replace('px', ''), 10) || 0;
|
|
6561
6616
|
}
|
|
6562
6617
|
updateBorderRadius(value) {
|
|
6563
|
-
this.
|
|
6564
|
-
this.
|
|
6618
|
+
this.value = value + 'px';
|
|
6619
|
+
this.onChange(this.value); // Notifie Angular du changement
|
|
6620
|
+
this.borderRadiusChange.emit(this.value);
|
|
6565
6621
|
}
|
|
6566
6622
|
setBorderRadius(value) {
|
|
6567
6623
|
this.sliderValue = value;
|
|
@@ -6575,13 +6631,25 @@ class BorderPickerComponent {
|
|
|
6575
6631
|
}
|
|
6576
6632
|
}
|
|
6577
6633
|
BorderPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BorderPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6578
|
-
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", borderRadius: "borderRadius", firstBtnOption: "firstBtnOption", secondBtnOption: "secondBtnOption", thirdBtnOption: "thirdBtnOption"
|
|
6634
|
+
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", borderRadius: "borderRadius", firstBtnOption: "firstBtnOption", secondBtnOption: "secondBtnOption", thirdBtnOption: "thirdBtnOption", disabled: "disabled", value: "value" }, outputs: { blurred: "blurred", borderRadiusChange: "borderRadiusChange" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, providers: [
|
|
6635
|
+
{
|
|
6636
|
+
provide: NG_VALUE_ACCESSOR,
|
|
6637
|
+
useExisting: forwardRef(() => BorderPickerComponent),
|
|
6638
|
+
multi: true
|
|
6639
|
+
}
|
|
6640
|
+
], 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-input\"\r\n id=\"borderPicker\"\r\n placeholder=\"8px\"\r\n maxlength=\"5\"\r\n [(ngModel)]=\"value\"\r\n (focus)=\"openSlider()\"\r\n (ngModelChange)=\"onChange($event)\"\r\n [disabled]=\"disabled\"\r\n (focusout)=\"onFocusOut()\"\r\n (input)=\"setValue($event)\"\r\n />\r\n\r\n <div class=\"slider-popup\" *ngIf=\"showSlider\">\r\n\r\n <div class=\"slider\">\r\n <input\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 <span>{{ sliderValue }}px</span>\r\n </div>\r\n\r\n <div class=\"preset-buttons\">\r\n <button (click)=\"setBorderRadius(4)\">{{ firstBtnOption }}</button>\r\n <button (click)=\"setBorderRadius(8)\">{{ secondBtnOption }}</button>\r\n <button (click)=\"setBorderRadius(100)\">{{ thirdBtnOption }}</button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n</div>\r\n", styles: [".w-border-picker{display:flex;flex-direction:column}.w-border-picker .bp-label{font-weight:500}.w-border-picker .w-input{width:210px;height:40px;display:flex;align-items:center;gap:10px;padding:5px;border:1px solid #dee2ed;border-radius:3px;position:relative}.w-border-picker .w-input .border-preview{position:relative;width:30px;height:30px;border:2px solid #1d2a3b;border-radius:3px}.w-border-picker .w-input .border-preview .mask1,.w-border-picker .w-input .border-preview .mask2{background:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.w-border-picker .w-input .border-preview .mask1{width:30px;height:14px}.w-border-picker .w-input .border-preview .mask2{width:14px;height:30px}.w-border-picker .w-input .bp-input{width:70%;height:100%;border:none;font-size:14px;color:#1d2a3b;font-weight:400}.w-border-picker .w-input .slider-popup{flex-direction:column;position:absolute;top:50px;left:0;min-width:270px;background:white;border:1px solid #dee2ed;padding:10px;box-shadow:0 2px 10px #0000001a;z-index:10;display:flex;align-items:center;gap:10px}.w-border-picker .w-input .slider-popup:before{content:\"\";position:absolute;top:-20px;left:8px;border:10px solid transparent;border-bottom-color:#dee2ed}.w-border-picker .w-input .slider-popup .slider{width:100%;display:flex;align-items:center;gap:10px}.w-border-picker .w-input .slider-popup .slider input[type=range]{-webkit-appearance:none;width:100%;height:8px;background:#dee2ed;border-radius:5px;outline:none;opacity:.7;transition:opacity .2s}.w-border-picker .w-input .slider-popup .slider input[type=range]:hover{opacity:1}.w-border-picker .w-input .slider-popup .slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#52aecd;cursor:pointer;border-radius:50%;box-shadow:0 0 2px #00000080}.w-border-picker .w-input .slider-popup .slider input[type=range]::-moz-range-thumb{width:20px;height:20px;background:#52aecd;cursor:pointer;border-radius:50%;box-shadow:0 0 2px #00000080}.w-border-picker .w-input .slider-popup .preset-buttons{display:flex;gap:10px;align-items:center}.w-border-picker .w-input .slider-popup .preset-buttons button{border:1px solid #dee2ed;background-color:#f5f5f5;color:#1d2a3b;font-size:14px;border-radius:12px;padding:5px 15px;cursor:pointer;transition:background-color .3s,box-shadow .3s}.w-border-picker .w-input .slider-popup .preset-buttons button:hover{background-color:#e0e0e0;box-shadow:0 2px 5px #0000001a}.w-border-picker .w-input .slider-popup .preset-buttons button:active{background-color:#d0d0d0;box-shadow:inset 0 2px 5px #0003}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] });
|
|
6579
6641
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BorderPickerComponent, decorators: [{
|
|
6580
6642
|
type: Component,
|
|
6581
6643
|
args: [{ selector: "wac-border-picker", standalone: true, imports: [
|
|
6582
6644
|
CommonModule,
|
|
6583
6645
|
FormsModule,
|
|
6584
|
-
],
|
|
6646
|
+
], providers: [
|
|
6647
|
+
{
|
|
6648
|
+
provide: NG_VALUE_ACCESSOR,
|
|
6649
|
+
useExisting: forwardRef(() => BorderPickerComponent),
|
|
6650
|
+
multi: true
|
|
6651
|
+
}
|
|
6652
|
+
], 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-input\"\r\n id=\"borderPicker\"\r\n placeholder=\"8px\"\r\n maxlength=\"5\"\r\n [(ngModel)]=\"value\"\r\n (focus)=\"openSlider()\"\r\n (ngModelChange)=\"onChange($event)\"\r\n [disabled]=\"disabled\"\r\n (focusout)=\"onFocusOut()\"\r\n (input)=\"setValue($event)\"\r\n />\r\n\r\n <div class=\"slider-popup\" *ngIf=\"showSlider\">\r\n\r\n <div class=\"slider\">\r\n <input\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 <span>{{ sliderValue }}px</span>\r\n </div>\r\n\r\n <div class=\"preset-buttons\">\r\n <button (click)=\"setBorderRadius(4)\">{{ firstBtnOption }}</button>\r\n <button (click)=\"setBorderRadius(8)\">{{ secondBtnOption }}</button>\r\n <button (click)=\"setBorderRadius(100)\">{{ thirdBtnOption }}</button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n</div>\r\n", styles: [".w-border-picker{display:flex;flex-direction:column}.w-border-picker .bp-label{font-weight:500}.w-border-picker .w-input{width:210px;height:40px;display:flex;align-items:center;gap:10px;padding:5px;border:1px solid #dee2ed;border-radius:3px;position:relative}.w-border-picker .w-input .border-preview{position:relative;width:30px;height:30px;border:2px solid #1d2a3b;border-radius:3px}.w-border-picker .w-input .border-preview .mask1,.w-border-picker .w-input .border-preview .mask2{background:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.w-border-picker .w-input .border-preview .mask1{width:30px;height:14px}.w-border-picker .w-input .border-preview .mask2{width:14px;height:30px}.w-border-picker .w-input .bp-input{width:70%;height:100%;border:none;font-size:14px;color:#1d2a3b;font-weight:400}.w-border-picker .w-input .slider-popup{flex-direction:column;position:absolute;top:50px;left:0;min-width:270px;background:white;border:1px solid #dee2ed;padding:10px;box-shadow:0 2px 10px #0000001a;z-index:10;display:flex;align-items:center;gap:10px}.w-border-picker .w-input .slider-popup:before{content:\"\";position:absolute;top:-20px;left:8px;border:10px solid transparent;border-bottom-color:#dee2ed}.w-border-picker .w-input .slider-popup .slider{width:100%;display:flex;align-items:center;gap:10px}.w-border-picker .w-input .slider-popup .slider input[type=range]{-webkit-appearance:none;width:100%;height:8px;background:#dee2ed;border-radius:5px;outline:none;opacity:.7;transition:opacity .2s}.w-border-picker .w-input .slider-popup .slider input[type=range]:hover{opacity:1}.w-border-picker .w-input .slider-popup .slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#52aecd;cursor:pointer;border-radius:50%;box-shadow:0 0 2px #00000080}.w-border-picker .w-input .slider-popup .slider input[type=range]::-moz-range-thumb{width:20px;height:20px;background:#52aecd;cursor:pointer;border-radius:50%;box-shadow:0 0 2px #00000080}.w-border-picker .w-input .slider-popup .preset-buttons{display:flex;gap:10px;align-items:center}.w-border-picker .w-input .slider-popup .preset-buttons button{border:1px solid #dee2ed;background-color:#f5f5f5;color:#1d2a3b;font-size:14px;border-radius:12px;padding:5px 15px;cursor:pointer;transition:background-color .3s,box-shadow .3s}.w-border-picker .w-input .slider-popup .preset-buttons button:hover{background-color:#e0e0e0;box-shadow:0 2px 5px #0000001a}.w-border-picker .w-input .slider-popup .preset-buttons button:active{background-color:#d0d0d0;box-shadow:inset 0 2px 5px #0003}\n"] }]
|
|
6585
6653
|
}], ctorParameters: function () { return []; }, propDecorators: { label: [{
|
|
6586
6654
|
type: Input
|
|
6587
6655
|
}], gap: [{
|
|
@@ -6596,6 +6664,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
6596
6664
|
type: Input
|
|
6597
6665
|
}], thirdBtnOption: [{
|
|
6598
6666
|
type: Input
|
|
6667
|
+
}], disabled: [{
|
|
6668
|
+
type: Input
|
|
6669
|
+
}], value: [{
|
|
6670
|
+
type: Input
|
|
6671
|
+
}], blurred: [{
|
|
6672
|
+
type: Output
|
|
6599
6673
|
}], borderRadiusChange: [{
|
|
6600
6674
|
type: Output
|
|
6601
6675
|
}], onClickOutside: [{
|
|
@@ -6603,6 +6677,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
6603
6677
|
args: ['document:click', ['$event']]
|
|
6604
6678
|
}] } });
|
|
6605
6679
|
|
|
6680
|
+
class SlideInComponent {
|
|
6681
|
+
constructor() {
|
|
6682
|
+
this.title = '';
|
|
6683
|
+
this.isOpen = false;
|
|
6684
|
+
this.closed = new EventEmitter();
|
|
6685
|
+
}
|
|
6686
|
+
/**
|
|
6687
|
+
* Ouvre le panneau coulissant
|
|
6688
|
+
*/
|
|
6689
|
+
open() {
|
|
6690
|
+
this.isOpen = true;
|
|
6691
|
+
document.body.classList.add('slide-in-open');
|
|
6692
|
+
}
|
|
6693
|
+
/**
|
|
6694
|
+
* Ferme le panneau coulissant
|
|
6695
|
+
*/
|
|
6696
|
+
close() {
|
|
6697
|
+
this.isOpen = false;
|
|
6698
|
+
document.body.classList.remove('slide-in-open');
|
|
6699
|
+
this.closed.emit();
|
|
6700
|
+
}
|
|
6701
|
+
}
|
|
6702
|
+
SlideInComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: SlideInComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6703
|
+
SlideInComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: SlideInComponent, selector: "wac-slide-in", inputs: { title: "title", isOpen: "isOpen" }, outputs: { closed: "closed" }, 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>\r\n</ng-container>", styles: [".slide-in__overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0006;z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s ease}.slide-in__overlay.is-visible{opacity:1;visibility:visible}.slide-in__panel{position:fixed;top:0;right:-550px;width:550px;height:100%;background-color:#fff;box-shadow:-2px 0 10px #0003;z-index:1001;transition:right .3s ease;display:flex;flex-direction:column}.slide-in__panel.is-open{right:0}.slide-in__panel__header{display:flex;justify-content:space-between;align-items:center;padding:30px 40px;border-bottom:1px solid #eaeaea}.slide-in__panel__header__title{margin:0;font-size:24px;font-weight:600;color:#1d2a3b}.slide-in__panel__header__close{font-size:16px;cursor:pointer;color:#526384;transition:all .3s ease}.slide-in__panel__header__close:hover{color:#3ba6ec}.slide-in__panel__content{padding:30px 40px;flex:1;overflow-y:auto}\n"] });
|
|
6704
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: SlideInComponent, decorators: [{
|
|
6705
|
+
type: Component,
|
|
6706
|
+
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>\r\n</ng-container>", styles: [".slide-in__overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0006;z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s ease}.slide-in__overlay.is-visible{opacity:1;visibility:visible}.slide-in__panel{position:fixed;top:0;right:-550px;width:550px;height:100%;background-color:#fff;box-shadow:-2px 0 10px #0003;z-index:1001;transition:right .3s ease;display:flex;flex-direction:column}.slide-in__panel.is-open{right:0}.slide-in__panel__header{display:flex;justify-content:space-between;align-items:center;padding:30px 40px;border-bottom:1px solid #eaeaea}.slide-in__panel__header__title{margin:0;font-size:24px;font-weight:600;color:#1d2a3b}.slide-in__panel__header__close{font-size:16px;cursor:pointer;color:#526384;transition:all .3s ease}.slide-in__panel__header__close:hover{color:#3ba6ec}.slide-in__panel__content{padding:30px 40px;flex:1;overflow-y:auto}\n"] }]
|
|
6707
|
+
}], propDecorators: { title: [{
|
|
6708
|
+
type: Input
|
|
6709
|
+
}], isOpen: [{
|
|
6710
|
+
type: Input
|
|
6711
|
+
}], closed: [{
|
|
6712
|
+
type: Output
|
|
6713
|
+
}] } });
|
|
6714
|
+
|
|
6606
6715
|
const components = [
|
|
6607
6716
|
TagComponent,
|
|
6608
6717
|
ButtonComponent,
|
|
@@ -6666,7 +6775,8 @@ const components = [
|
|
|
6666
6775
|
ColumnComponent,
|
|
6667
6776
|
AiExpressComponent,
|
|
6668
6777
|
RadioOptionComponent,
|
|
6669
|
-
TagDropdownComponent
|
|
6778
|
+
TagDropdownComponent,
|
|
6779
|
+
SlideInComponent
|
|
6670
6780
|
];
|
|
6671
6781
|
const exportsFromModule = [
|
|
6672
6782
|
PaginationComponent,
|
|
@@ -6762,7 +6872,8 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
|
|
|
6762
6872
|
ColumnComponent,
|
|
6763
6873
|
AiExpressComponent,
|
|
6764
6874
|
RadioOptionComponent,
|
|
6765
|
-
TagDropdownComponent
|
|
6875
|
+
TagDropdownComponent,
|
|
6876
|
+
SlideInComponent], imports: [CommonModule,
|
|
6766
6877
|
FormsModule,
|
|
6767
6878
|
NwbAllModule,
|
|
6768
6879
|
TranslateModule,
|
|
@@ -6859,7 +6970,8 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
|
|
|
6859
6970
|
ColumnComponent,
|
|
6860
6971
|
AiExpressComponent,
|
|
6861
6972
|
RadioOptionComponent,
|
|
6862
|
-
TagDropdownComponent,
|
|
6973
|
+
TagDropdownComponent,
|
|
6974
|
+
SlideInComponent, PaginationComponent,
|
|
6863
6975
|
TableComponent,
|
|
6864
6976
|
TableColumn,
|
|
6865
6977
|
CheckBoxRow,
|
|
@@ -7130,5 +7242,5 @@ const switchInOut = trigger('switchInOut', [
|
|
|
7130
7242
|
* Generated bundle index. Do not edit.
|
|
7131
7243
|
*/
|
|
7132
7244
|
|
|
7133
|
-
export { ACCORDION_ITEM, AbstractDebounceDirective, AccordionComponent, AiExpressComponent, AlertComponent, AlertPopupComponent, AlertPopupModule, AlertPopupService, AreAllOptionsSelectedPipe, AutoHideDirective, BackComponent, BlockComponent, BlockSeparatorComponent, BlockTitleLegacyComponent, BlockWithCheckboxComponent, BorderPickerComponent, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CallComponentFunctionPipe, CardPriceComponent, ChargingBarComponent, CheckBoxRow, CheckboxComponent, ColorPickerComponent, ColumnComponent, ConfirmDeleteComponent, ContentWithButtonsComponent, CopyToClipBoardDirective, DebounceKeyupDirective, DeleteComponent, DomChangedDirective, DraganddropListComponent, DropdownComponent, EXPANSION_PANEL_HEADER, ExpandedPanelComponent, ExpansionExport, ExpansionModule, ExpansionPanelComponent, ExpansionPanelDirective, ExpansionPanelHeaderComponent, ExpansionPanelHeaderDirective, FilterOptionsPipe, FiltersComponent, FiltersTableService, FindOptionSelectedPipe, FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, FreePopinComponent, GooglePreviewComponent, H1Component, H2Component, H3Component, H4Component, HeaderPageComponent, HistoryService, HtmlContainer, ImageComponent, InfoComponent, InputComponent, InputSearchComponent, InputWithSelectComponent, KeypressEnterDirective, LabelComponent, LinkComponent, LoaderComponent, LogoComponent, MosaicComponent, MultipleSearchComponent, MultipleSearchPlusComponent, OnlyNumberDirective, OptionCallToActionComponent, OptionComponent, OptionalDisableContainerComponent, PaginationComponent, PlaceholderComponent, PopinComponent, ProgressBarComponent, RadioComponent, RadioDirective, RadioGroupDirective$1 as RadioGroupDirective, RadioLegacyComponent, RadioOptionComponent, RowComponent, ScrollToDirective, SearchComponent, SelectComponent, SelectDirective, SelectFiltersPipe, SelectInTextComponent, SelectOptionDirective, SelectSearchTriggerComponent, SelectedListComponent, SeparatorComponent, SettingsComponent, SharedComponentsModule, SharedDirectives, SharedPipes, SnackbarComponent, StateComponent, SummaryComponent, SwitchComponent, TabComponent, TableColumn, TableColumnHeader, TableComponent, TableFiltersGroup, TableRow, TabsComponent, TagComponent, TagDropdownComponent, TagLabelComponent, TextAreaComponent, TextComponent, TokenCheckComponent, TooltipComponent, TreeComponent, TreeModule, TwoDigitDecimalNumberDirective, UploadComponent, ValueChangeService, VarDirective, WiziComponentsModule, WrapperBlocsComponent, WrapperComponent, WrapperMultipleBlockComponent, WrapperSidebarComponent, WzEditInPlaceComponent, ZindexToggleDirective, animateListFromBottom, animateListFromLeft, animateListFromRight, animateListFromTop, distinctUntilTableFiltersChanged, inOutX, inOutY, opacityAnimation, showFromBottom, showFromLeft, showFromRight, showFromTop, switchInOut, updateTableFiltersTotalItems, uuid };
|
|
7245
|
+
export { ACCORDION_ITEM, AbstractDebounceDirective, AccordionComponent, AiExpressComponent, AlertComponent, AlertPopupComponent, AlertPopupModule, AlertPopupService, AreAllOptionsSelectedPipe, AutoHideDirective, BackComponent, BlockComponent, BlockSeparatorComponent, BlockTitleLegacyComponent, BlockWithCheckboxComponent, BorderPickerComponent, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CallComponentFunctionPipe, CardPriceComponent, ChargingBarComponent, CheckBoxRow, CheckboxComponent, ColorPickerComponent, ColumnComponent, ConfirmDeleteComponent, ContentWithButtonsComponent, CopyToClipBoardDirective, DebounceKeyupDirective, DeleteComponent, DomChangedDirective, DraganddropListComponent, DropdownComponent, EXPANSION_PANEL_HEADER, ExpandedPanelComponent, ExpansionExport, ExpansionModule, ExpansionPanelComponent, ExpansionPanelDirective, ExpansionPanelHeaderComponent, ExpansionPanelHeaderDirective, FilterOptionsPipe, FiltersComponent, FiltersTableService, FindOptionSelectedPipe, FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, FreePopinComponent, GooglePreviewComponent, H1Component, H2Component, H3Component, H4Component, HeaderPageComponent, HistoryService, HtmlContainer, ImageComponent, InfoComponent, InputComponent, InputSearchComponent, InputWithSelectComponent, KeypressEnterDirective, LabelComponent, LinkComponent, LoaderComponent, LogoComponent, MosaicComponent, MultipleSearchComponent, MultipleSearchPlusComponent, OnlyNumberDirective, OptionCallToActionComponent, OptionComponent, OptionalDisableContainerComponent, PaginationComponent, PlaceholderComponent, PopinComponent, ProgressBarComponent, RadioComponent, RadioDirective, RadioGroupDirective$1 as RadioGroupDirective, RadioLegacyComponent, RadioOptionComponent, RowComponent, ScrollToDirective, SearchComponent, SelectComponent, SelectDirective, SelectFiltersPipe, SelectInTextComponent, SelectOptionDirective, SelectSearchTriggerComponent, SelectedListComponent, SeparatorComponent, SettingsComponent, SharedComponentsModule, SharedDirectives, SharedPipes, SlideInComponent, SnackbarComponent, StateComponent, SummaryComponent, SwitchComponent, TabComponent, TableColumn, TableColumnHeader, TableComponent, TableFiltersGroup, TableRow, TabsComponent, TagComponent, TagDropdownComponent, TagLabelComponent, TextAreaComponent, TextComponent, TokenCheckComponent, TooltipComponent, TreeComponent, TreeModule, TwoDigitDecimalNumberDirective, UploadComponent, ValueChangeService, VarDirective, WiziComponentsModule, WrapperBlocsComponent, WrapperComponent, WrapperMultipleBlockComponent, WrapperSidebarComponent, WzEditInPlaceComponent, ZindexToggleDirective, animateListFromBottom, animateListFromLeft, animateListFromRight, animateListFromTop, distinctUntilTableFiltersChanged, inOutX, inOutY, opacityAnimation, showFromBottom, showFromLeft, showFromRight, showFromTop, switchInOut, updateTableFiltersTotalItems, uuid };
|
|
7134
7246
|
//# sourceMappingURL=wizishop-angular-components.mjs.map
|