@wizishop/angular-components 15.1.114 → 15.1.116

package/fesm2020/wizishop-angular-components.mjs

@@ -28,6 +28,8 @@ import * as i3$2 from 'ngx-scrollbar/reached-event';
 import { NgScrollbarReachedModule } from 'ngx-scrollbar/reached-event';
 import * as i2$2 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i3$3 from 'ngx-color-picker';
+import { ColorPickerModule } from 'ngx-color-picker';
 
 class LoaderComponent {
     constructor() {
@@ -2126,6 +2128,7 @@ class TabsComponent {
         this.button = false;
         this.right = false;
         this.marginBottom = '30px';
+        this.column = false;
     }
     ngAfterViewInit() {
         this.tabList$.next(this.tabList);
@@ -2167,14 +2170,14 @@ class TabsComponent {
     }
 }
 TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TabsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: TabsComponent, isStandalone: true, selector: "wac-tabs", inputs: { underline: "underline", button: "button", right: "right", marginBottom: "marginBottom" }, providers: [
+TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: TabsComponent, isStandalone: true, selector: "wac-tabs", inputs: { underline: "underline", button: "button", right: "right", marginBottom: "marginBottom", column: "column" }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: TabsComponent, multi: true },
-    ], queries: [{ propertyName: "tabList", predicate: TabComponent }], ngImport: i0, template: "<div class=\"wac-tabs\"\r\n     *ngIf=\"((viewModel$ | async) || defaultViewModel ) as viewModel\"\r\n     [ngClass]=\"{'wac-tabs--underline': underline, 'wac-tabs--button' : button, 'wac-tabs--right' : right}\"\r\n     wzAutoHide\r\n     (clickOutside)=\"listIsOpen$.next(false)\"\r\n     [triggerElement]=\"'wac-select__header__selection'\"\r\n>\r\n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__mobile\" (click)=\"openList($event)\">\r\n    <div>{{ viewModel.selected?.label }}</div><i [class]=\"'fa-solid fa-caret-' + (viewModel.listIsOpen ? 'up' : 'down')\"></i>\r\n  </div>\r\n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__wrapper\" [ngClass]=\"{ 'open' : viewModel.listIsOpen }\" [ngStyle]=\"{'margin-bottom': marginBottom}\">\r\n    <a\r\n      *ngFor=\"let tab of tabList; let i = index\"\r\n      class=\"wac-tabs__wrapper__tab\"\r\n      [ngClass]=\"{'wac-tabs__wrapper__tab--selected': i === viewModel.index}\"\r\n      (click)=\"index$.next(i); listIsOpen$.next(false)\"\r\n    >\r\n      {{ tab.label }}\r\n    </a>\r\n  </div>\r\n  <wac-tab-body\r\n    *ngFor=\"let tab of tabList; let i = index\"\r\n    [content]=\"tab.content\"\r\n    [active]=\"i === viewModel.index\"\r\n  ></wac-tab-body>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SharedDirectives }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "component", type: TabBodyComponent, selector: "wac-tab-body", inputs: ["content", "active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "tabList", predicate: TabComponent }], ngImport: i0, template: "<div class=\"wac-tabs\"\r\n     *ngIf=\"((viewModel$ | async) || defaultViewModel ) as viewModel\"\r\n     [ngClass]=\"{'wac-tabs--underline': underline, 'wac-tabs--button' : button, 'wac-tabs--right' : right, 'wac-tabs--column' : column}\"\r\n     wzAutoHide\r\n     (clickOutside)=\"listIsOpen$.next(false)\"\r\n     [triggerElement]=\"'wac-select__header__selection'\"\r\n>\r\n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__mobile\" (click)=\"openList($event)\">\r\n    <div>{{ viewModel.selected?.label }}</div><i [class]=\"'fa-solid fa-caret-' + (viewModel.listIsOpen ? 'up' : 'down')\"></i>\r\n  </div>\r\n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__wrapper\" [ngClass]=\"{ 'open' : viewModel.listIsOpen }\" [ngStyle]=\"{'margin-bottom': marginBottom}\">\r\n    <a\r\n      *ngFor=\"let tab of tabList; let i = index\"\r\n      class=\"wac-tabs__wrapper__tab\"\r\n      [ngClass]=\"{'wac-tabs__wrapper__tab--selected': i === viewModel.index}\"\r\n      (click)=\"index$.next(i); listIsOpen$.next(false)\"\r\n    >\r\n      {{ tab.label }}\r\n    </a>\r\n  </div>\r\n  <wac-tab-body\r\n    *ngFor=\"let tab of tabList; let i = index\"\r\n    [content]=\"tab.content\"\r\n    [active]=\"i === viewModel.index\"\r\n  ></wac-tab-body>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SharedDirectives }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "component", type: TabBodyComponent, selector: "wac-tab-body", inputs: ["content", "active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wac-tabs', encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, FormsModule, TabComponent, SharedDirectives, TabBodyComponent], providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: TabsComponent, multi: true },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wac-tabs\"\r\n     *ngIf=\"((viewModel$ | async) || defaultViewModel ) as viewModel\"\r\n     [ngClass]=\"{'wac-tabs--underline': underline, 'wac-tabs--button' : button, 'wac-tabs--right' : right}\"\r\n     wzAutoHide\r\n     (clickOutside)=\"listIsOpen$.next(false)\"\r\n     [triggerElement]=\"'wac-select__header__selection'\"\r\n>\r\n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__mobile\" (click)=\"openList($event)\">\r\n    <div>{{ viewModel.selected?.label }}</div><i [class]=\"'fa-solid fa-caret-' + (viewModel.listIsOpen ? 'up' : 'down')\"></i>\r\n  </div>\r\n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__wrapper\" [ngClass]=\"{ 'open' : viewModel.listIsOpen }\" [ngStyle]=\"{'margin-bottom': marginBottom}\">\r\n    <a\r\n      *ngFor=\"let tab of tabList; let i = index\"\r\n      class=\"wac-tabs__wrapper__tab\"\r\n      [ngClass]=\"{'wac-tabs__wrapper__tab--selected': i === viewModel.index}\"\r\n      (click)=\"index$.next(i); listIsOpen$.next(false)\"\r\n    >\r\n      {{ tab.label }}\r\n    </a>\r\n  </div>\r\n  <wac-tab-body\r\n    *ngFor=\"let tab of tabList; let i = index\"\r\n    [content]=\"tab.content\"\r\n    [active]=\"i === viewModel.index\"\r\n  ></wac-tab-body>\r\n</div>\r\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wac-tabs\"\r\n     *ngIf=\"((viewModel$ | async) || defaultViewModel ) as viewModel\"\r\n     [ngClass]=\"{'wac-tabs--underline': underline, 'wac-tabs--button' : button, 'wac-tabs--right' : right, 'wac-tabs--column' : column}\"\r\n     wzAutoHide\r\n     (clickOutside)=\"listIsOpen$.next(false)\"\r\n     [triggerElement]=\"'wac-select__header__selection'\"\r\n>\r\n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__mobile\" (click)=\"openList($event)\">\r\n    <div>{{ viewModel.selected?.label }}</div><i [class]=\"'fa-solid fa-caret-' + (viewModel.listIsOpen ? 'up' : 'down')\"></i>\r\n  </div>\r\n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__wrapper\" [ngClass]=\"{ 'open' : viewModel.listIsOpen }\" [ngStyle]=\"{'margin-bottom': marginBottom}\">\r\n    <a\r\n      *ngFor=\"let tab of tabList; let i = index\"\r\n      class=\"wac-tabs__wrapper__tab\"\r\n      [ngClass]=\"{'wac-tabs__wrapper__tab--selected': i === viewModel.index}\"\r\n      (click)=\"index$.next(i); listIsOpen$.next(false)\"\r\n    >\r\n      {{ tab.label }}\r\n    </a>\r\n  </div>\r\n  <wac-tab-body\r\n    *ngFor=\"let tab of tabList; let i = index\"\r\n    [content]=\"tab.content\"\r\n    [active]=\"i === viewModel.index\"\r\n  ></wac-tab-body>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { tabList: [{
                 type: ContentChildren,
                 args: [TabComponent]
@@ -2186,6 +2189,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
                 type: Input
             }], marginBottom: [{
                 type: Input
+            }], column: [{
+                type: Input
             }] } });
 
 class ButtonComponent {
@@ -6488,6 +6493,190 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
                 type: Output
             }] } });
 
+class ColorPickerComponent {
+    constructor() {
+        this.value = '';
+        this.gap = '12px';
+        this.fontSize = '14px';
+        this.colorChange = new EventEmitter();
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    writeValue(value) {
+        if (value !== undefined) {
+            this.value = value;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setValue(event) {
+        this.value = event.target.value;
+        this.onChange(this.value);
+        this.colorChange.emit(this.value);
+    }
+    changeColor(color) {
+        // Remove any non-hexadecimal characters
+        color = color.replace(/[^a-fA-F0-9]/g, '');
+        // Add '#' if not present
+        if (!color.startsWith('#')) {
+            color = '#' + color;
+        }
+        // Validate and update color
+        if (this.isValidColor(color)) {
+            this.value = color;
+            this.onChange(this.value); // 🔥 AJOUT de cette ligne pour informer Angular du changement
+            this.colorChange.emit(this.value);
+        }
+        else {
+            // If invalid, reset to previous valid color
+            this.colorChange.emit(this.value);
+        }
+    }
+    isValidColor(color) {
+        const s = new Option().style;
+        s.color = color;
+        return s.color !== '';
+    }
+}
+ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+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: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => ColorPickerComponent),
+            multi: true
+        }
+    ], 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "wac-color-picker", standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ColorPickerModule
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ColorPickerComponent),
+                            multi: true
+                        }
+                    ], 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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], gap: [{
+                type: Input
+            }], fontSize: [{
+                type: Input
+            }], colorChange: [{
+                type: Output
+            }] } });
+
+class BorderPickerComponent {
+    constructor() {
+        this.gap = '12px';
+        this.fontSize = '14px';
+        this.borderRadius = '0px';
+        this.firstBtnOption = 'Small';
+        this.secondBtnOption = 'Medium';
+        this.thirdBtnOption = 'Full';
+        this.disabled = false;
+        this.value = '';
+        this.blurred = new EventEmitter();
+        this.borderRadiusChange = new EventEmitter();
+        this.showSlider = false;
+        this.sliderValue = 0;
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    writeValue(value) {
+        if (value !== undefined) {
+            this.value = value;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setValue(event) {
+        this.value = event.target.value;
+        this.onChange(this.value);
+        this.borderRadiusChange.emit(this.value);
+    }
+    onFocusOut() {
+    }
+    openSlider() {
+        this.showSlider = true;
+        this.sliderValue = parseInt(this.value.replace('px', ''), 10) || 0;
+    }
+    updateBorderRadius(value) {
+        this.value = value + 'px';
+        this.onChange(this.value); // Notifie Angular du changement
+        this.borderRadiusChange.emit(this.value);
+    }
+    setBorderRadius(value) {
+        this.sliderValue = value;
+        this.updateBorderRadius(value);
+    }
+    onClickOutside(event) {
+        const target = event.target;
+        if (!target.closest('.w-input')) {
+            this.showSlider = false;
+        }
+    }
+}
+BorderPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BorderPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BorderPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: BorderPickerComponent, isStandalone: true, selector: "wac-border-picker", inputs: { label: "label", gap: "gap", fontSize: "fontSize", borderRadius: "borderRadius", firstBtnOption: "firstBtnOption", secondBtnOption: "secondBtnOption", thirdBtnOption: "thirdBtnOption", disabled: "disabled", value: "value" }, outputs: { blurred: "blurred", borderRadiusChange: "borderRadiusChange" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => BorderPickerComponent),
+            multi: true
+        }
+    ], ngImport: i0, template: "<div class=\"w-border-picker\" [ngStyle]=\"{'gap': gap}\">\r\n\r\n  <label class=\"bp-label\" for=\"borderPicker\" [ngStyle]=\"{'font-size': fontSize}\">{{ label }}</label>\r\n\r\n  <div class=\"w-input\">\r\n\r\n    <div class=\"border-preview\" [ngStyle]=\"{'border-radius': value}\">\r\n      <div class=\"mask1\"></div>\r\n      <div class=\"mask2\"></div>\r\n    </div>\r\n\r\n    <input\r\n      class=\"bp-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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BorderPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "wac-border-picker", standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BorderPickerComponent),
+                            multi: true
+                        }
+                    ], template: "<div class=\"w-border-picker\" [ngStyle]=\"{'gap': gap}\">\r\n\r\n  <label class=\"bp-label\" for=\"borderPicker\" [ngStyle]=\"{'font-size': fontSize}\">{{ label }}</label>\r\n\r\n  <div class=\"w-input\">\r\n\r\n    <div class=\"border-preview\" [ngStyle]=\"{'border-radius': value}\">\r\n      <div class=\"mask1\"></div>\r\n      <div class=\"mask2\"></div>\r\n    </div>\r\n\r\n    <input\r\n      class=\"bp-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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { label: [{
+                type: Input
+            }], gap: [{
+                type: Input
+            }], fontSize: [{
+                type: Input
+            }], borderRadius: [{
+                type: Input
+            }], firstBtnOption: [{
+                type: Input
+            }], secondBtnOption: [{
+                type: Input
+            }], thirdBtnOption: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], blurred: [{
+                type: Output
+            }], borderRadiusChange: [{
+                type: Output
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
 const components = [
     TagComponent,
     ButtonComponent,
@@ -6579,6 +6768,8 @@ const standaloneComponents = [
     InputWithSelectComponent,
     BlockTitleLegacyComponent,
     BlockSeparatorComponent,
+    ColorPickerComponent,
+    BorderPickerComponent
 ];
 class SharedComponentsModule {
 }
@@ -6666,7 +6857,8 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         NgScrollbarModule,
         NgScrollbarReachedModule,
         TreeModule,
-        ExpansionModule, TabsComponent,
+        ExpansionModule,
+        ColorPickerModule, TabsComponent,
         TabComponent,
         SnackbarComponent,
         BlockComponent,
@@ -6677,7 +6869,9 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         InputSearchComponent,
         InputWithSelectComponent,
         BlockTitleLegacyComponent,
-        BlockSeparatorComponent], exports: [TagComponent,
+        BlockSeparatorComponent,
+        ColorPickerComponent,
+        BorderPickerComponent], exports: [TagComponent,
         ButtonComponent,
         InfoComponent,
         SettingsComponent,
@@ -6759,7 +6953,9 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         InputSearchComponent,
         InputWithSelectComponent,
         BlockTitleLegacyComponent,
-        BlockSeparatorComponent] });
+        BlockSeparatorComponent,
+        ColorPickerComponent,
+        BorderPickerComponent] });
 SharedComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: SharedComponentsModule, imports: [CommonModule,
         FormsModule,
         NwbAllModule,
@@ -6781,7 +6977,8 @@ SharedComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
         NgScrollbarModule,
         NgScrollbarReachedModule,
         TreeModule,
-        ExpansionModule, standaloneComponents] });
+        ExpansionModule,
+        ColorPickerModule, standaloneComponents] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: SharedComponentsModule, decorators: [{
             type: NgModule,
             args: [{
@@ -6808,6 +7005,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
                         NgScrollbarReachedModule,
                         TreeModule,
                         ExpansionModule,
+                        ColorPickerModule,
                         ...standaloneComponents
                     ],
                     declarations: components,
@@ -7006,5 +7204,5 @@ const switchInOut = trigger('switchInOut', [
  * Generated bundle index. Do not edit.
  */
 
-export { ACCORDION_ITEM, AbstractDebounceDirective, AccordionComponent, AiExpressComponent, AlertComponent, AlertPopupComponent, AlertPopupModule, AlertPopupService, AreAllOptionsSelectedPipe, AutoHideDirective, BackComponent, BlockComponent, BlockSeparatorComponent, BlockTitleLegacyComponent, BlockWithCheckboxComponent, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CallComponentFunctionPipe, CardPriceComponent, ChargingBarComponent, CheckBoxRow, CheckboxComponent, 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 };
+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 };
 //# sourceMappingURL=wizishop-angular-components.mjs.map