@wizishop/angular-components 15.1.115 → 15.1.116
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 +50 -8
- package/esm2020/lib/components/color-picker/color-picker.component.mjs +41 -9
- package/fesm2015/wizishop-angular-components.mjs +85 -11
- package/fesm2015/wizishop-angular-components.mjs.map +1 -1
- package/fesm2020/wizishop-angular-components.mjs +85 -11
- 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/package.json +1 -1
- package/wizishop-angular-components-15.1.116.tgz +0 -0
- package/wizishop-angular-components-15.1.115.tgz +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { CommonModule } from "@angular/common";
|
|
2
|
-
import { Component, EventEmitter, Input, Output, HostListener } from "@angular/core";
|
|
3
|
-
import { FormsModule } from '@angular/forms';
|
|
2
|
+
import { Component, EventEmitter, Input, Output, HostListener, forwardRef } from "@angular/core";
|
|
3
|
+
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
import * as i1 from "@angular/common";
|
|
6
6
|
import * as i2 from "@angular/forms";
|
|
@@ -12,17 +12,41 @@ export class BorderPickerComponent {
|
|
|
12
12
|
this.firstBtnOption = 'Small';
|
|
13
13
|
this.secondBtnOption = 'Medium';
|
|
14
14
|
this.thirdBtnOption = 'Full';
|
|
15
|
+
this.disabled = false;
|
|
16
|
+
this.value = '';
|
|
17
|
+
this.blurred = new EventEmitter();
|
|
15
18
|
this.borderRadiusChange = new EventEmitter();
|
|
16
19
|
this.showSlider = false;
|
|
17
20
|
this.sliderValue = 0;
|
|
21
|
+
this.onChange = () => { };
|
|
22
|
+
this.onTouched = () => { };
|
|
23
|
+
}
|
|
24
|
+
writeValue(value) {
|
|
25
|
+
if (value !== undefined) {
|
|
26
|
+
this.value = value;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
registerOnChange(fn) {
|
|
30
|
+
this.onChange = fn;
|
|
31
|
+
}
|
|
32
|
+
registerOnTouched(fn) {
|
|
33
|
+
this.onTouched = fn;
|
|
34
|
+
}
|
|
35
|
+
setValue(event) {
|
|
36
|
+
this.value = event.target.value;
|
|
37
|
+
this.onChange(this.value);
|
|
38
|
+
this.borderRadiusChange.emit(this.value);
|
|
39
|
+
}
|
|
40
|
+
onFocusOut() {
|
|
18
41
|
}
|
|
19
42
|
openSlider() {
|
|
20
43
|
this.showSlider = true;
|
|
21
|
-
this.sliderValue = parseInt(this.
|
|
44
|
+
this.sliderValue = parseInt(this.value.replace('px', ''), 10) || 0;
|
|
22
45
|
}
|
|
23
46
|
updateBorderRadius(value) {
|
|
24
|
-
this.
|
|
25
|
-
this.
|
|
47
|
+
this.value = value + 'px';
|
|
48
|
+
this.onChange(this.value); // Notifie Angular du changement
|
|
49
|
+
this.borderRadiusChange.emit(this.value);
|
|
26
50
|
}
|
|
27
51
|
setBorderRadius(value) {
|
|
28
52
|
this.sliderValue = value;
|
|
@@ -36,13 +60,25 @@ export class BorderPickerComponent {
|
|
|
36
60
|
}
|
|
37
61
|
}
|
|
38
62
|
BorderPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BorderPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
39
|
-
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"
|
|
63
|
+
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: [
|
|
64
|
+
{
|
|
65
|
+
provide: NG_VALUE_ACCESSOR,
|
|
66
|
+
useExisting: forwardRef(() => BorderPickerComponent),
|
|
67
|
+
multi: true
|
|
68
|
+
}
|
|
69
|
+
], 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"] }] });
|
|
40
70
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BorderPickerComponent, decorators: [{
|
|
41
71
|
type: Component,
|
|
42
72
|
args: [{ selector: "wac-border-picker", standalone: true, imports: [
|
|
43
73
|
CommonModule,
|
|
44
74
|
FormsModule,
|
|
45
|
-
],
|
|
75
|
+
], providers: [
|
|
76
|
+
{
|
|
77
|
+
provide: NG_VALUE_ACCESSOR,
|
|
78
|
+
useExisting: forwardRef(() => BorderPickerComponent),
|
|
79
|
+
multi: true
|
|
80
|
+
}
|
|
81
|
+
], 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"] }]
|
|
46
82
|
}], ctorParameters: function () { return []; }, propDecorators: { label: [{
|
|
47
83
|
type: Input
|
|
48
84
|
}], gap: [{
|
|
@@ -57,10 +93,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
57
93
|
type: Input
|
|
58
94
|
}], thirdBtnOption: [{
|
|
59
95
|
type: Input
|
|
96
|
+
}], disabled: [{
|
|
97
|
+
type: Input
|
|
98
|
+
}], value: [{
|
|
99
|
+
type: Input
|
|
100
|
+
}], blurred: [{
|
|
101
|
+
type: Output
|
|
60
102
|
}], borderRadiusChange: [{
|
|
61
103
|
type: Output
|
|
62
104
|
}], onClickOutside: [{
|
|
63
105
|
type: HostListener,
|
|
64
106
|
args: ['document:click', ['$event']]
|
|
65
107
|
}] } });
|
|
66
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
108
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYm9yZGVyLXBpY2tlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL2JvcmRlci1waWNrZXIvYm9yZGVyLXBpY2tlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL2JvcmRlci1waWNrZXIvYm9yZGVyLXBpY2tlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFDLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQTBCLFVBQVUsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN2SCxPQUFPLEVBQXdCLFdBQVcsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7O0FBb0J0RixNQUFNLE9BQU8scUJBQXFCO0lBaUJoQztRQWZTLFFBQUcsR0FBVyxNQUFNLENBQUM7UUFDckIsYUFBUSxHQUFXLE1BQU0sQ0FBQztRQUMxQixpQkFBWSxHQUFXLEtBQUssQ0FBQztRQUM3QixtQkFBYyxHQUFXLE9BQU8sQ0FBQztRQUNqQyxvQkFBZSxHQUFXLFFBQVEsQ0FBQztRQUNuQyxtQkFBYyxHQUFXLE1BQU0sQ0FBQztRQUNoQyxhQUFRLEdBQVksS0FBSyxDQUFDO1FBQzFCLFVBQUssR0FBVyxFQUFFLENBQUM7UUFFbEIsWUFBTyxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7UUFDbkMsdUJBQWtCLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQUUxRCxlQUFVLEdBQVksS0FBSyxDQUFDO1FBQzVCLGdCQUFXLEdBQVcsQ0FBQyxDQUFDO1FBSXhCLGFBQVEsR0FBUSxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7UUFDekIsY0FBUyxHQUFRLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztJQUhYLENBQUM7SUFLaEIsVUFBVSxDQUFDLEtBQWE7UUFDdEIsSUFBSSxLQUFLLEtBQUssU0FBUyxFQUFFO1lBQ3ZCLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO1NBQ3BCO0lBQ0gsQ0FBQztJQUdELGdCQUFnQixDQUFDLEVBQU87UUFDdEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVELGlCQUFpQixDQUFDLEVBQU87UUFDdkIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVELFFBQVEsQ0FBQyxLQUFVO1FBQ2pCLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUM7UUFDaEMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDMUIsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDM0MsQ0FBQztJQUdELFVBQVU7SUFDVixDQUFDO0lBRUQsVUFBVTtRQUNSLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxXQUFXLEdBQUcsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDckUsQ0FBQztJQUVELGtCQUFrQixDQUFDLEtBQWE7UUFDOUIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLEdBQUcsSUFBSSxDQUFDO1FBQzFCLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsZ0NBQWdDO1FBQzNELElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzNDLENBQUM7SUFFRCxlQUFlLENBQUMsS0FBYTtRQUMzQixJQUFJLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQztRQUN6QixJQUFJLENBQUMsa0JBQWtCLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDakMsQ0FBQztJQUdELGNBQWMsQ0FBQyxLQUFZO1FBQ3pCLE1BQU0sTUFBTSxHQUFHLEtBQUssQ0FBQyxNQUFxQixDQUFDO1FBQzNDLElBQUksQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLFVBQVUsQ0FBQyxFQUFFO1lBQy9CLElBQUksQ0FBQyxVQUFVLEdBQUcsS0FBSyxDQUFDO1NBQ3pCO0lBQ0gsQ0FBQzs7a0hBckVVLHFCQUFxQjtzR0FBckIscUJBQXFCLDBiQVRyQjtRQUNUO1lBQ0UsT0FBTyxFQUFFLGlCQUFpQjtZQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLHFCQUFxQixDQUFDO1lBQ3BELEtBQUssRUFBRSxJQUFJO1NBQ1o7S0FDRiwwQkNuQkgsMjZDQStDQSxxbkZEckNJLFlBQVksdU5BQ1osV0FBVzsyRkFXRixxQkFBcUI7a0JBbEJqQyxTQUFTOytCQUNFLG1CQUFtQixjQUdqQixJQUFJLFdBQ1A7d0JBQ1AsWUFBWTt3QkFDWixXQUFXO3FCQUNaLGFBQ1U7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsc0JBQXNCLENBQUM7NEJBQ3BELEtBQUssRUFBRSxJQUFJO3lCQUNaO3FCQUNGOzBFQUlRLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxHQUFHO3NCQUFYLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBQ0csZUFBZTtzQkFBdkIsS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUVJLE9BQU87c0JBQWhCLE1BQU07Z0JBQ0csa0JBQWtCO3NCQUEzQixNQUFNO2dCQW9EUCxjQUFjO3NCQURiLFlBQVk7dUJBQUMsZ0JBQWdCLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uXCI7XHJcbmltcG9ydCB7Q29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQsIEhvc3RMaXN0ZW5lciwgQ1VTVE9NX0VMRU1FTlRTX1NDSEVNQSwgZm9yd2FyZFJlZn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcclxuaW1wb3J0IHsgQ29udHJvbFZhbHVlQWNjZXNzb3IsIEZvcm1zTW9kdWxlLCBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcclxuXHJcbkBDb21wb25lbnQgKHtcclxuICBzZWxlY3RvcjogXCJ3YWMtYm9yZGVyLXBpY2tlclwiLFxyXG4gIHRlbXBsYXRlVXJsOiBcIi4vYm9yZGVyLXBpY2tlci5jb21wb25lbnQuaHRtbFwiLFxyXG4gIHN0eWxlVXJsczogW1wiLi9ib3JkZXItcGlja2VyLmNvbXBvbmVudC5zY3NzXCJdLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW1xyXG4gICAgQ29tbW9uTW9kdWxlLFxyXG4gICAgRm9ybXNNb2R1bGUsXHJcbiAgXSxcclxuICBwcm92aWRlcnM6IFtcclxuICAgIHtcclxuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXHJcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IEJvcmRlclBpY2tlckNvbXBvbmVudCksXHJcbiAgICAgIG11bHRpOiB0cnVlXHJcbiAgICB9XHJcbiAgXVxyXG59KVxyXG5cclxuZXhwb3J0IGNsYXNzIEJvcmRlclBpY2tlckNvbXBvbmVudCBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcclxuICBASW5wdXQoKSBsYWJlbDogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIGdhcDogc3RyaW5nID0gJzEycHgnO1xyXG4gIEBJbnB1dCgpIGZvbnRTaXplOiBzdHJpbmcgPSAnMTRweCc7XHJcbiAgQElucHV0KCkgYm9yZGVyUmFkaXVzOiBzdHJpbmcgPSAnMHB4JztcclxuICBASW5wdXQoKSBmaXJzdEJ0bk9wdGlvbjogc3RyaW5nID0gJ1NtYWxsJztcclxuICBASW5wdXQoKSBzZWNvbmRCdG5PcHRpb246IHN0cmluZyA9ICdNZWRpdW0nO1xyXG4gIEBJbnB1dCgpIHRoaXJkQnRuT3B0aW9uOiBzdHJpbmcgPSAnRnVsbCc7XHJcbiAgQElucHV0KCkgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBASW5wdXQoKSB2YWx1ZTogc3RyaW5nID0gJyc7XHJcblxyXG4gIEBPdXRwdXQoKSBibHVycmVkID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xyXG4gIEBPdXRwdXQoKSBib3JkZXJSYWRpdXNDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcclxuXHJcbiAgc2hvd1NsaWRlcjogYm9vbGVhbiA9IGZhbHNlO1xyXG4gIHNsaWRlclZhbHVlOiBudW1iZXIgPSAwO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHt9XHJcblxyXG4gIG9uQ2hhbmdlOiBhbnkgPSAoKSA9PiB7fTtcclxuICBvblRvdWNoZWQ6IGFueSA9ICgpID0+IHt9O1xyXG5cclxuICB3cml0ZVZhbHVlKHZhbHVlOiBzdHJpbmcpOiB2b2lkIHtcclxuICAgIGlmICh2YWx1ZSAhPT0gdW5kZWZpbmVkKSB7XHJcbiAgICAgIHRoaXMudmFsdWUgPSB2YWx1ZTtcclxuICAgIH1cclxuICB9XHJcblxyXG5cclxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMub25DaGFuZ2UgPSBmbjtcclxuICB9XHJcblxyXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMub25Ub3VjaGVkID0gZm47XHJcbiAgfVxyXG5cclxuICBzZXRWYWx1ZShldmVudDogYW55KSB7XHJcbiAgICB0aGlzLnZhbHVlID0gZXZlbnQudGFyZ2V0LnZhbHVlO1xyXG4gICAgdGhpcy5vbkNoYW5nZSh0aGlzLnZhbHVlKTtcclxuICAgIHRoaXMuYm9yZGVyUmFkaXVzQ2hhbmdlLmVtaXQodGhpcy52YWx1ZSk7XHJcbiAgfVxyXG5cclxuXHJcbiAgb25Gb2N1c091dCgpIHtcclxuICB9XHJcblxyXG4gIG9wZW5TbGlkZXIoKSB7XHJcbiAgICB0aGlzLnNob3dTbGlkZXIgPSB0cnVlO1xyXG4gICAgdGhpcy5zbGlkZXJWYWx1ZSA9IHBhcnNlSW50KHRoaXMudmFsdWUucmVwbGFjZSgncHgnLCAnJyksIDEwKSB8fCAwO1xyXG4gIH1cclxuXHJcbiAgdXBkYXRlQm9yZGVyUmFkaXVzKHZhbHVlOiBudW1iZXIpIHtcclxuICAgIHRoaXMudmFsdWUgPSB2YWx1ZSArICdweCc7XHJcbiAgICB0aGlzLm9uQ2hhbmdlKHRoaXMudmFsdWUpOyAvLyBOb3RpZmllIEFuZ3VsYXIgZHUgY2hhbmdlbWVudFxyXG4gICAgdGhpcy5ib3JkZXJSYWRpdXNDaGFuZ2UuZW1pdCh0aGlzLnZhbHVlKTtcclxuICB9XHJcblxyXG4gIHNldEJvcmRlclJhZGl1cyh2YWx1ZTogbnVtYmVyKSB7XHJcbiAgICB0aGlzLnNsaWRlclZhbHVlID0gdmFsdWU7XHJcbiAgICB0aGlzLnVwZGF0ZUJvcmRlclJhZGl1cyh2YWx1ZSk7XHJcbiAgfVxyXG5cclxuICBASG9zdExpc3RlbmVyKCdkb2N1bWVudDpjbGljaycsIFsnJGV2ZW50J10pXHJcbiAgb25DbGlja091dHNpZGUoZXZlbnQ6IEV2ZW50KSB7XHJcbiAgICBjb25zdCB0YXJnZXQgPSBldmVudC50YXJnZXQgYXMgSFRNTEVsZW1lbnQ7XHJcbiAgICBpZiAoIXRhcmdldC5jbG9zZXN0KCcudy1pbnB1dCcpKSB7XHJcbiAgICAgIHRoaXMuc2hvd1NsaWRlciA9IGZhbHNlO1xyXG4gICAgfVxyXG4gIH1cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwidy1ib3JkZXItcGlja2VyXCIgW25nU3R5bGVdPVwieydnYXAnOiBnYXB9XCI+XHJcblxyXG4gIDxsYWJlbCBjbGFzcz1cImJwLWxhYmVsXCIgZm9yPVwiYm9yZGVyUGlja2VyXCIgW25nU3R5bGVdPVwieydmb250LXNpemUnOiBmb250U2l6ZX1cIj57eyBsYWJlbCB9fTwvbGFiZWw+XHJcblxyXG4gIDxkaXYgY2xhc3M9XCJ3LWlucHV0XCI+XHJcblxyXG4gICAgPGRpdiBjbGFzcz1cImJvcmRlci1wcmV2aWV3XCIgW25nU3R5bGVdPVwieydib3JkZXItcmFkaXVzJzogdmFsdWV9XCI+XHJcbiAgICAgIDxkaXYgY2xhc3M9XCJtYXNrMVwiPjwvZGl2PlxyXG4gICAgICA8ZGl2IGNsYXNzPVwibWFzazJcIj48L2Rpdj5cclxuICAgIDwvZGl2PlxyXG5cclxuICAgIDxpbnB1dFxyXG4gICAgICBjbGFzcz1cImJwLWlucHV0XCJcclxuICAgICAgaWQ9XCJib3JkZXJQaWNrZXJcIlxyXG4gICAgICBwbGFjZWhvbGRlcj1cIjhweFwiXHJcbiAgICAgIG1heGxlbmd0aD1cIjVcIlxyXG4gICAgICBbKG5nTW9kZWwpXT1cInZhbHVlXCJcclxuICAgICAgKGZvY3VzKT1cIm9wZW5TbGlkZXIoKVwiXHJcbiAgICAgIChuZ01vZGVsQ2hhbmdlKT1cIm9uQ2hhbmdlKCRldmVudClcIlxyXG4gICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxyXG4gICAgICAoZm9jdXNvdXQpPVwib25Gb2N1c091dCgpXCJcclxuICAgICAgKGlucHV0KT1cInNldFZhbHVlKCRldmVudClcIlxyXG4gICAgLz5cclxuXHJcbiAgICA8ZGl2IGNsYXNzPVwic2xpZGVyLXBvcHVwXCIgKm5nSWY9XCJzaG93U2xpZGVyXCI+XHJcblxyXG4gICAgICA8ZGl2IGNsYXNzPVwic2xpZGVyXCI+XHJcbiAgICAgICAgPGlucHV0XHJcbiAgICAgICAgICB0eXBlPVwicmFuZ2VcIlxyXG4gICAgICAgICAgbWluPVwiMFwiXHJcbiAgICAgICAgICBtYXg9XCIxMDBcIlxyXG4gICAgICAgICAgWyhuZ01vZGVsKV09XCJzbGlkZXJWYWx1ZVwiXHJcbiAgICAgICAgICAobmdNb2RlbENoYW5nZSk9XCJ1cGRhdGVCb3JkZXJSYWRpdXMoJGV2ZW50KVwiXHJcbiAgICAgICAgLz5cclxuICAgICAgICA8c3Bhbj57eyBzbGlkZXJWYWx1ZSB9fXB4PC9zcGFuPlxyXG4gICAgICA8L2Rpdj5cclxuXHJcbiAgICAgIDxkaXYgY2xhc3M9XCJwcmVzZXQtYnV0dG9uc1wiPlxyXG4gICAgICAgIDxidXR0b24gKGNsaWNrKT1cInNldEJvcmRlclJhZGl1cyg0KVwiPnt7IGZpcnN0QnRuT3B0aW9uIH19PC9idXR0b24+XHJcbiAgICAgICAgPGJ1dHRvbiAoY2xpY2spPVwic2V0Qm9yZGVyUmFkaXVzKDgpXCI+e3sgc2Vjb25kQnRuT3B0aW9uIH19PC9idXR0b24+XHJcbiAgICAgICAgPGJ1dHRvbiAoY2xpY2spPVwic2V0Qm9yZGVyUmFkaXVzKDEwMClcIj57eyB0aGlyZEJ0bk9wdGlvbiB9fTwvYnV0dG9uPlxyXG4gICAgICA8L2Rpdj5cclxuICAgIDwvZGl2PlxyXG5cclxuICA8L2Rpdj5cclxuXHJcbjwvZGl2PlxyXG4iXX0=
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { CommonModule } from "@angular/common";
|
|
2
|
-
import { Component, EventEmitter, Input, Output } from "@angular/core";
|
|
3
|
-
import { FormsModule } from '@angular/forms';
|
|
2
|
+
import { Component, EventEmitter, forwardRef, Input, Output } from "@angular/core";
|
|
3
|
+
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
4
4
|
import { ColorPickerModule } from "ngx-color-picker";
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
6
|
import * as i1 from "@angular/common";
|
|
@@ -8,9 +8,28 @@ import * as i2 from "@angular/forms";
|
|
|
8
8
|
import * as i3 from "ngx-color-picker";
|
|
9
9
|
export class ColorPickerComponent {
|
|
10
10
|
constructor() {
|
|
11
|
+
this.value = '';
|
|
11
12
|
this.gap = '12px';
|
|
12
13
|
this.fontSize = '14px';
|
|
13
14
|
this.colorChange = new EventEmitter();
|
|
15
|
+
this.onChange = () => { };
|
|
16
|
+
this.onTouched = () => { };
|
|
17
|
+
}
|
|
18
|
+
writeValue(value) {
|
|
19
|
+
if (value !== undefined) {
|
|
20
|
+
this.value = value;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
registerOnChange(fn) {
|
|
24
|
+
this.onChange = fn;
|
|
25
|
+
}
|
|
26
|
+
registerOnTouched(fn) {
|
|
27
|
+
this.onTouched = fn;
|
|
28
|
+
}
|
|
29
|
+
setValue(event) {
|
|
30
|
+
this.value = event.target.value;
|
|
31
|
+
this.onChange(this.value);
|
|
32
|
+
this.colorChange.emit(this.value);
|
|
14
33
|
}
|
|
15
34
|
changeColor(color) {
|
|
16
35
|
// Remove any non-hexadecimal characters
|
|
@@ -21,12 +40,13 @@ export class ColorPickerComponent {
|
|
|
21
40
|
}
|
|
22
41
|
// Validate and update color
|
|
23
42
|
if (this.isValidColor(color)) {
|
|
24
|
-
this.
|
|
25
|
-
this.
|
|
43
|
+
this.value = color;
|
|
44
|
+
this.onChange(this.value); // 🔥 AJOUT de cette ligne pour informer Angular du changement
|
|
45
|
+
this.colorChange.emit(this.value);
|
|
26
46
|
}
|
|
27
47
|
else {
|
|
28
48
|
// If invalid, reset to previous valid color
|
|
29
|
-
this.colorChange.emit(this.
|
|
49
|
+
this.colorChange.emit(this.value);
|
|
30
50
|
}
|
|
31
51
|
}
|
|
32
52
|
isValidColor(color) {
|
|
@@ -36,17 +56,29 @@ export class ColorPickerComponent {
|
|
|
36
56
|
}
|
|
37
57
|
}
|
|
38
58
|
ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
39
|
-
ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: ColorPickerComponent, isStandalone: true, selector: "wac-color-picker", inputs: { label: "label",
|
|
59
|
+
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: [
|
|
60
|
+
{
|
|
61
|
+
provide: NG_VALUE_ACCESSOR,
|
|
62
|
+
useExisting: forwardRef(() => ColorPickerComponent),
|
|
63
|
+
multi: true
|
|
64
|
+
}
|
|
65
|
+
], 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.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"] }] });
|
|
40
66
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ColorPickerComponent, decorators: [{
|
|
41
67
|
type: Component,
|
|
42
68
|
args: [{ selector: "wac-color-picker", standalone: true, imports: [
|
|
43
69
|
CommonModule,
|
|
44
70
|
FormsModule,
|
|
45
71
|
ColorPickerModule
|
|
46
|
-
],
|
|
72
|
+
], providers: [
|
|
73
|
+
{
|
|
74
|
+
provide: NG_VALUE_ACCESSOR,
|
|
75
|
+
useExisting: forwardRef(() => ColorPickerComponent),
|
|
76
|
+
multi: true
|
|
77
|
+
}
|
|
78
|
+
], 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"] }]
|
|
47
79
|
}], ctorParameters: function () { return []; }, propDecorators: { label: [{
|
|
48
80
|
type: Input
|
|
49
|
-
}],
|
|
81
|
+
}], value: [{
|
|
50
82
|
type: Input
|
|
51
83
|
}], gap: [{
|
|
52
84
|
type: Input
|
|
@@ -55,4 +87,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
55
87
|
}], colorChange: [{
|
|
56
88
|
type: Output
|
|
57
89
|
}] } });
|
|
58
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
90
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3ItcGlja2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvY29sb3ItcGlja2VyL2NvbG9yLXBpY2tlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL2NvbG9yLXBpY2tlci9jb2xvci1waWNrZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBQyxTQUFTLEVBQUUsWUFBWSxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ2pGLE9BQU8sRUFBdUIsV0FBVyxFQUFFLGlCQUFpQixFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDcEYsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7Ozs7O0FBcUJyRCxNQUFNLE9BQU8sb0JBQW9CO0lBTy9CO1FBTFMsVUFBSyxHQUFXLEVBQUUsQ0FBQztRQUNuQixRQUFHLEdBQVcsTUFBTSxDQUFDO1FBQ3JCLGFBQVEsR0FBVyxNQUFNLENBQUM7UUFDekIsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBSW5ELGFBQVEsR0FBUSxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7UUFDekIsY0FBUyxHQUFRLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztJQUhYLENBQUM7SUFLaEIsVUFBVSxDQUFDLEtBQWE7UUFDdEIsSUFBSSxLQUFLLEtBQUssU0FBUyxFQUFFO1lBQ3ZCLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO1NBQ3BCO0lBQ0gsQ0FBQztJQUdELGdCQUFnQixDQUFDLEVBQU87UUFDdEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVELGlCQUFpQixDQUFDLEVBQU87UUFDdkIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVELFFBQVEsQ0FBQyxLQUFVO1FBQ2pCLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUM7UUFDaEMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDMUIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3BDLENBQUM7SUFFRCxXQUFXLENBQUMsS0FBYTtRQUN2Qix3Q0FBd0M7UUFDeEMsS0FBSyxHQUFHLEtBQUssQ0FBQyxPQUFPLENBQUMsZUFBZSxFQUFFLEVBQUUsQ0FBQyxDQUFDO1FBRTNDLHlCQUF5QjtRQUN6QixJQUFJLENBQUMsS0FBSyxDQUFDLFVBQVUsQ0FBQyxHQUFHLENBQUMsRUFBRTtZQUMxQixLQUFLLEdBQUcsR0FBRyxHQUFHLEtBQUssQ0FBQztTQUNyQjtRQUVELDRCQUE0QjtRQUM1QixJQUFJLElBQUksQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDLEVBQUU7WUFDNUIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7WUFDbkIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyw4REFBOEQ7WUFDekYsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQ25DO2FBQU07WUFDTCw0Q0FBNEM7WUFDNUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQ25DO0lBQ0gsQ0FBQztJQUdELFlBQVksQ0FBQyxLQUFhO1FBQ3hCLE1BQU0sQ0FBQyxHQUFHLElBQUksTUFBTSxFQUFFLENBQUMsS0FBSyxDQUFDO1FBQzdCLENBQUMsQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO1FBQ2hCLE9BQU8sQ0FBQyxDQUFDLEtBQUssS0FBSyxFQUFFLENBQUM7SUFDeEIsQ0FBQzs7aUhBMURVLG9CQUFvQjtxR0FBcEIsb0JBQW9CLHNMQVRwQjtRQUNUO1lBQ0UsT0FBTyxFQUFFLGlCQUFpQjtZQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLG9CQUFvQixDQUFDO1lBQ25ELEtBQUssRUFBRSxJQUFJO1NBQ1o7S0FDRiwwQkNyQkgsZzlCQWlDQSxxZ0JEdEJJLFlBQVksbUhBQ1osV0FBVyxpeEJBQ1gsaUJBQWlCOzJGQVdSLG9CQUFvQjtrQkFuQmhDLFNBQVM7K0JBQ0Usa0JBQWtCLGNBR2hCLElBQUksV0FDUDt3QkFDUCxZQUFZO3dCQUNaLFdBQVc7d0JBQ1gsaUJBQWlCO3FCQUNsQixhQUNVO3dCQUNUOzRCQUNFLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLHFCQUFxQixDQUFDOzRCQUNuRCxLQUFLLEVBQUUsSUFBSTt5QkFDWjtxQkFDRjswRUFJUSxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLEdBQUc7c0JBQVgsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNJLFdBQVc7c0JBQXBCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uXCI7XHJcbmltcG9ydCB7Q29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIGZvcndhcmRSZWYsIElucHV0LCBPdXRwdXR9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XHJcbmltcG9ydCB7Q29udHJvbFZhbHVlQWNjZXNzb3IsIEZvcm1zTW9kdWxlLCBOR19WQUxVRV9BQ0NFU1NPUn0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5pbXBvcnQgeyBDb2xvclBpY2tlck1vZHVsZSB9IGZyb20gXCJuZ3gtY29sb3ItcGlja2VyXCI7XHJcblxyXG5AQ29tcG9uZW50ICh7XHJcbiAgc2VsZWN0b3I6IFwid2FjLWNvbG9yLXBpY2tlclwiLFxyXG4gIHRlbXBsYXRlVXJsOiBcIi4vY29sb3ItcGlja2VyLmNvbXBvbmVudC5odG1sXCIsXHJcbiAgc3R5bGVVcmxzOiBbXCIuL2NvbG9yLXBpY2tlci5jb21wb25lbnQuc2Nzc1wiXSxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGltcG9ydHM6IFtcclxuICAgIENvbW1vbk1vZHVsZSxcclxuICAgIEZvcm1zTW9kdWxlLFxyXG4gICAgQ29sb3JQaWNrZXJNb2R1bGVcclxuICBdLFxyXG4gIHByb3ZpZGVyczogW1xyXG4gICAge1xyXG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcclxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gQ29sb3JQaWNrZXJDb21wb25lbnQpLFxyXG4gICAgICBtdWx0aTogdHJ1ZVxyXG4gICAgfVxyXG4gIF1cclxufSlcclxuXHJcbmV4cG9ydCBjbGFzcyBDb2xvclBpY2tlckNvbXBvbmVudCBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcclxuICBASW5wdXQoKSBsYWJlbDogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIHZhbHVlOiBzdHJpbmcgPSAnJztcclxuICBASW5wdXQoKSBnYXA6IHN0cmluZyA9ICcxMnB4JztcclxuICBASW5wdXQoKSBmb250U2l6ZTogc3RyaW5nID0gJzE0cHgnO1xyXG4gIEBPdXRwdXQoKSBjb2xvckNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHt9XHJcblxyXG4gIG9uQ2hhbmdlOiBhbnkgPSAoKSA9PiB7fTtcclxuICBvblRvdWNoZWQ6IGFueSA9ICgpID0+IHt9O1xyXG5cclxuICB3cml0ZVZhbHVlKHZhbHVlOiBzdHJpbmcpOiB2b2lkIHtcclxuICAgIGlmICh2YWx1ZSAhPT0gdW5kZWZpbmVkKSB7XHJcbiAgICAgIHRoaXMudmFsdWUgPSB2YWx1ZTtcclxuICAgIH1cclxuICB9XHJcblxyXG5cclxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMub25DaGFuZ2UgPSBmbjtcclxuICB9XHJcblxyXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMub25Ub3VjaGVkID0gZm47XHJcbiAgfVxyXG5cclxuICBzZXRWYWx1ZShldmVudDogYW55KSB7XHJcbiAgICB0aGlzLnZhbHVlID0gZXZlbnQudGFyZ2V0LnZhbHVlO1xyXG4gICAgdGhpcy5vbkNoYW5nZSh0aGlzLnZhbHVlKTtcclxuICAgIHRoaXMuY29sb3JDaGFuZ2UuZW1pdCh0aGlzLnZhbHVlKTtcclxuICB9XHJcblxyXG4gIGNoYW5nZUNvbG9yKGNvbG9yOiBzdHJpbmcpIHtcclxuICAgIC8vIFJlbW92ZSBhbnkgbm9uLWhleGFkZWNpbWFsIGNoYXJhY3RlcnNcclxuICAgIGNvbG9yID0gY29sb3IucmVwbGFjZSgvW15hLWZBLUYwLTldL2csICcnKTtcclxuXHJcbiAgICAvLyBBZGQgJyMnIGlmIG5vdCBwcmVzZW50XHJcbiAgICBpZiAoIWNvbG9yLnN0YXJ0c1dpdGgoJyMnKSkge1xyXG4gICAgICBjb2xvciA9ICcjJyArIGNvbG9yO1xyXG4gICAgfVxyXG5cclxuICAgIC8vIFZhbGlkYXRlIGFuZCB1cGRhdGUgY29sb3JcclxuICAgIGlmICh0aGlzLmlzVmFsaWRDb2xvcihjb2xvcikpIHtcclxuICAgICAgdGhpcy52YWx1ZSA9IGNvbG9yO1xyXG4gICAgICB0aGlzLm9uQ2hhbmdlKHRoaXMudmFsdWUpOyAvLyDwn5SlIEFKT1VUIGRlIGNldHRlIGxpZ25lIHBvdXIgaW5mb3JtZXIgQW5ndWxhciBkdSBjaGFuZ2VtZW50XHJcbiAgICAgIHRoaXMuY29sb3JDaGFuZ2UuZW1pdCh0aGlzLnZhbHVlKTtcclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIC8vIElmIGludmFsaWQsIHJlc2V0IHRvIHByZXZpb3VzIHZhbGlkIGNvbG9yXHJcbiAgICAgIHRoaXMuY29sb3JDaGFuZ2UuZW1pdCh0aGlzLnZhbHVlKTtcclxuICAgIH1cclxuICB9XHJcblxyXG5cclxuICBpc1ZhbGlkQ29sb3IoY29sb3I6IHN0cmluZyk6IGJvb2xlYW4ge1xyXG4gICAgY29uc3QgcyA9IG5ldyBPcHRpb24oKS5zdHlsZTtcclxuICAgIHMuY29sb3IgPSBjb2xvcjtcclxuICAgIHJldHVybiBzLmNvbG9yICE9PSAnJztcclxuICB9XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cInctY29sb3ItcGlja2VyXCIgW25nU3R5bGVdPVwieydnYXAnOiBnYXB9XCI+XHJcblxyXG4gIDxsYWJlbCBjbGFzcz1cImNwLWxhYmVsXCIgZm9yPVwiY29sb3JQaWNrZXJcIiBbbmdTdHlsZV09XCJ7J2ZvbnQtc2l6ZSc6IGZvbnRTaXplfVwiPnt7IGxhYmVsIH19PC9sYWJlbD5cclxuXHJcbiAgPGRpdiBjbGFzcz1cInctaW5wdXRcIj5cclxuXHJcbiAgICA8ZGl2XHJcbiAgICAgIGNsYXNzPVwiY29sb3ItcHJldmlld1wiXHJcbiAgICAgIFtjb2xvclBpY2tlcl09XCJ2YWx1ZVwiXHJcbiAgICAgIChjbGljayk9XCJjb2xvclBpY2tlcklucHV0Lm9wZW5EaWFsb2coKVwiXHJcbiAgICAgIFtuZ1N0eWxlXT1cInsnYmFja2dyb3VuZC1jb2xvcic6IHZhbHVlfVwiXHJcbiAgICAgIFtjcFBvc2l0aW9uXT1cIidib3R0b20nXCJcclxuICAgICAgW2NwUG9zaXRpb25PZmZzZXRdPVwiJy0zNSdcIlxyXG4gICAgPjwvZGl2PlxyXG5cclxuICAgIDxpbnB1dFxyXG4gICAgICBjbGFzcz1cImNwLWlucHV0XCJcclxuICAgICAgaWQ9XCJjb2xvclBpY2tlclwiXHJcbiAgICAgICNjb2xvclBpY2tlcklucHV0PVwibmd4Q29sb3JQaWNrZXJcIlxyXG4gICAgICBtYXhsZW5ndGg9XCI3XCJcclxuICAgICAgcGxhY2Vob2xkZXI9XCIjMDAwMDAwXCJcclxuICAgICAgWyhuZ01vZGVsKV09XCJ2YWx1ZVwiXHJcbiAgICAgIChuZ01vZGVsQ2hhbmdlKT1cImNoYW5nZUNvbG9yKCRldmVudClcIlxyXG4gICAgICBbY29sb3JQaWNrZXJdPVwidmFsdWVcIlxyXG4gICAgICAoY29sb3JQaWNrZXJDaGFuZ2UpPVwiY2hhbmdlQ29sb3IoJGV2ZW50KVwiXHJcbiAgICAgIFtjcFBvc2l0aW9uXT1cIidib3R0b20nXCJcclxuICAgICAgW2NwUG9zaXRpb25PZmZzZXRdPVwiJy0zNSdcIlxyXG4gICAgICAoaW5wdXQpPVwic2V0VmFsdWUoJGV2ZW50KVwiXHJcbiAgICAvPlxyXG5cclxuICA8L2Rpdj5cclxuXHJcbjwvZGl2PlxyXG4iXX0=
|
|
@@ -6517,9 +6517,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
6517
6517
|
|
|
6518
6518
|
class ColorPickerComponent {
|
|
6519
6519
|
constructor() {
|
|
6520
|
+
this.value = '';
|
|
6520
6521
|
this.gap = '12px';
|
|
6521
6522
|
this.fontSize = '14px';
|
|
6522
6523
|
this.colorChange = new EventEmitter();
|
|
6524
|
+
this.onChange = () => { };
|
|
6525
|
+
this.onTouched = () => { };
|
|
6526
|
+
}
|
|
6527
|
+
writeValue(value) {
|
|
6528
|
+
if (value !== undefined) {
|
|
6529
|
+
this.value = value;
|
|
6530
|
+
}
|
|
6531
|
+
}
|
|
6532
|
+
registerOnChange(fn) {
|
|
6533
|
+
this.onChange = fn;
|
|
6534
|
+
}
|
|
6535
|
+
registerOnTouched(fn) {
|
|
6536
|
+
this.onTouched = fn;
|
|
6537
|
+
}
|
|
6538
|
+
setValue(event) {
|
|
6539
|
+
this.value = event.target.value;
|
|
6540
|
+
this.onChange(this.value);
|
|
6541
|
+
this.colorChange.emit(this.value);
|
|
6523
6542
|
}
|
|
6524
6543
|
changeColor(color) {
|
|
6525
6544
|
// Remove any non-hexadecimal characters
|
|
@@ -6530,12 +6549,13 @@ class ColorPickerComponent {
|
|
|
6530
6549
|
}
|
|
6531
6550
|
// Validate and update color
|
|
6532
6551
|
if (this.isValidColor(color)) {
|
|
6533
|
-
this.
|
|
6534
|
-
this.
|
|
6552
|
+
this.value = color;
|
|
6553
|
+
this.onChange(this.value); // 🔥 AJOUT de cette ligne pour informer Angular du changement
|
|
6554
|
+
this.colorChange.emit(this.value);
|
|
6535
6555
|
}
|
|
6536
6556
|
else {
|
|
6537
6557
|
// If invalid, reset to previous valid color
|
|
6538
|
-
this.colorChange.emit(this.
|
|
6558
|
+
this.colorChange.emit(this.value);
|
|
6539
6559
|
}
|
|
6540
6560
|
}
|
|
6541
6561
|
isValidColor(color) {
|
|
@@ -6545,17 +6565,29 @@ class ColorPickerComponent {
|
|
|
6545
6565
|
}
|
|
6546
6566
|
}
|
|
6547
6567
|
ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6548
|
-
ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: ColorPickerComponent, isStandalone: true, selector: "wac-color-picker", inputs: { label: "label",
|
|
6568
|
+
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: [
|
|
6569
|
+
{
|
|
6570
|
+
provide: NG_VALUE_ACCESSOR,
|
|
6571
|
+
useExisting: forwardRef(() => ColorPickerComponent),
|
|
6572
|
+
multi: true
|
|
6573
|
+
}
|
|
6574
|
+
], 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"] }] });
|
|
6549
6575
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ColorPickerComponent, decorators: [{
|
|
6550
6576
|
type: Component,
|
|
6551
6577
|
args: [{ selector: "wac-color-picker", standalone: true, imports: [
|
|
6552
6578
|
CommonModule,
|
|
6553
6579
|
FormsModule,
|
|
6554
6580
|
ColorPickerModule
|
|
6555
|
-
],
|
|
6581
|
+
], providers: [
|
|
6582
|
+
{
|
|
6583
|
+
provide: NG_VALUE_ACCESSOR,
|
|
6584
|
+
useExisting: forwardRef(() => ColorPickerComponent),
|
|
6585
|
+
multi: true
|
|
6586
|
+
}
|
|
6587
|
+
], 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"] }]
|
|
6556
6588
|
}], ctorParameters: function () { return []; }, propDecorators: { label: [{
|
|
6557
6589
|
type: Input
|
|
6558
|
-
}],
|
|
6590
|
+
}], value: [{
|
|
6559
6591
|
type: Input
|
|
6560
6592
|
}], gap: [{
|
|
6561
6593
|
type: Input
|
|
@@ -6573,17 +6605,41 @@ class BorderPickerComponent {
|
|
|
6573
6605
|
this.firstBtnOption = 'Small';
|
|
6574
6606
|
this.secondBtnOption = 'Medium';
|
|
6575
6607
|
this.thirdBtnOption = 'Full';
|
|
6608
|
+
this.disabled = false;
|
|
6609
|
+
this.value = '';
|
|
6610
|
+
this.blurred = new EventEmitter();
|
|
6576
6611
|
this.borderRadiusChange = new EventEmitter();
|
|
6577
6612
|
this.showSlider = false;
|
|
6578
6613
|
this.sliderValue = 0;
|
|
6614
|
+
this.onChange = () => { };
|
|
6615
|
+
this.onTouched = () => { };
|
|
6616
|
+
}
|
|
6617
|
+
writeValue(value) {
|
|
6618
|
+
if (value !== undefined) {
|
|
6619
|
+
this.value = value;
|
|
6620
|
+
}
|
|
6621
|
+
}
|
|
6622
|
+
registerOnChange(fn) {
|
|
6623
|
+
this.onChange = fn;
|
|
6624
|
+
}
|
|
6625
|
+
registerOnTouched(fn) {
|
|
6626
|
+
this.onTouched = fn;
|
|
6627
|
+
}
|
|
6628
|
+
setValue(event) {
|
|
6629
|
+
this.value = event.target.value;
|
|
6630
|
+
this.onChange(this.value);
|
|
6631
|
+
this.borderRadiusChange.emit(this.value);
|
|
6632
|
+
}
|
|
6633
|
+
onFocusOut() {
|
|
6579
6634
|
}
|
|
6580
6635
|
openSlider() {
|
|
6581
6636
|
this.showSlider = true;
|
|
6582
|
-
this.sliderValue = parseInt(this.
|
|
6637
|
+
this.sliderValue = parseInt(this.value.replace('px', ''), 10) || 0;
|
|
6583
6638
|
}
|
|
6584
6639
|
updateBorderRadius(value) {
|
|
6585
|
-
this.
|
|
6586
|
-
this.
|
|
6640
|
+
this.value = value + 'px';
|
|
6641
|
+
this.onChange(this.value); // Notifie Angular du changement
|
|
6642
|
+
this.borderRadiusChange.emit(this.value);
|
|
6587
6643
|
}
|
|
6588
6644
|
setBorderRadius(value) {
|
|
6589
6645
|
this.sliderValue = value;
|
|
@@ -6597,13 +6653,25 @@ class BorderPickerComponent {
|
|
|
6597
6653
|
}
|
|
6598
6654
|
}
|
|
6599
6655
|
BorderPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BorderPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6600
|
-
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"
|
|
6656
|
+
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: [
|
|
6657
|
+
{
|
|
6658
|
+
provide: NG_VALUE_ACCESSOR,
|
|
6659
|
+
useExisting: forwardRef(() => BorderPickerComponent),
|
|
6660
|
+
multi: true
|
|
6661
|
+
}
|
|
6662
|
+
], 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"] }] });
|
|
6601
6663
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BorderPickerComponent, decorators: [{
|
|
6602
6664
|
type: Component,
|
|
6603
6665
|
args: [{ selector: "wac-border-picker", standalone: true, imports: [
|
|
6604
6666
|
CommonModule,
|
|
6605
6667
|
FormsModule,
|
|
6606
|
-
],
|
|
6668
|
+
], providers: [
|
|
6669
|
+
{
|
|
6670
|
+
provide: NG_VALUE_ACCESSOR,
|
|
6671
|
+
useExisting: forwardRef(() => BorderPickerComponent),
|
|
6672
|
+
multi: true
|
|
6673
|
+
}
|
|
6674
|
+
], 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"] }]
|
|
6607
6675
|
}], ctorParameters: function () { return []; }, propDecorators: { label: [{
|
|
6608
6676
|
type: Input
|
|
6609
6677
|
}], gap: [{
|
|
@@ -6618,6 +6686,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
6618
6686
|
type: Input
|
|
6619
6687
|
}], thirdBtnOption: [{
|
|
6620
6688
|
type: Input
|
|
6689
|
+
}], disabled: [{
|
|
6690
|
+
type: Input
|
|
6691
|
+
}], value: [{
|
|
6692
|
+
type: Input
|
|
6693
|
+
}], blurred: [{
|
|
6694
|
+
type: Output
|
|
6621
6695
|
}], borderRadiusChange: [{
|
|
6622
6696
|
type: Output
|
|
6623
6697
|
}], onClickOutside: [{
|