@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
|
@@ -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: [{
|