@wizishop/angular-components 15.1.114 → 15.1.116

package/angular-components.scss

@@ -140,7 +140,8 @@ $wac-token-dark: #E8BF09!default;
 $wac-token-main: #1D2A3B!default;
 $wac-token-disabled: #EFF2F4!default;
 $wac-token-disabled-dark: #8A98B2!default;
-.zindexToggle {
+
+$wac-tab-colunm-blue: #3ba6ec!default;.zindexToggle {
   z-index: 9!important;
   position: relative;
 }
@@ -944,7 +945,157 @@ wac-block {
     margin-right: 0;
   }
 }
-.wac-breadcrumbs {
+.w-border-picker {
+  display: flex;
+  flex-direction: column;
+
+  .bp-label {
+    font-weight: 500;
+  }
+
+  .w-input {
+    width: 210px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 5px;
+    border: 1px solid #dee2ed;
+    border-radius: 3px;
+    position: relative;
+
+    .border-preview {
+      position: relative;
+      width: 30px;
+      height: 30px;
+      border: 2px solid #1d2a3b;
+      border-radius: 3px;
+
+      .mask1, .mask2 {
+        background: #fff;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      .mask1 {
+        width: 30px;
+        height: 14px;
+      }
+
+      .mask2 {
+        width: 14px;
+        height: 30px;
+      }
+    }
+    
+    .bp-input {
+      width: 70%;
+      height: 100%;
+      border: none;
+      font-size: 14px;
+      color: #1d2a3b;
+      font-weight: 400;
+    }
+
+    .slider-popup {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      position: absolute;
+      top: 50px;
+      left: 0;
+      min-width: 270px;
+      background: white;
+      border: 1px solid #dee2ed;
+      padding: 10px;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      z-index: 10;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: -20px;
+        left: 8px;
+        border: 10px solid transparent;
+        border-bottom-color: #dee2ed;
+      }
+
+      .slider {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+
+        input[type="range"] {
+          -webkit-appearance: none;
+          width: 100%;
+          height: 8px;
+          background: #dee2ed;
+          border-radius: 5px;
+          outline: none;
+          opacity: 0.7;
+          transition: opacity .2s;
+
+          &:hover {
+            opacity: 1;
+          }
+
+          &::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            background: #52aecd;
+            cursor: pointer;
+            border-radius: 50%;
+            box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+          }
+
+          &::-moz-range-thumb {
+            width: 20px;
+            height: 20px;
+            background: #52aecd;
+            cursor: pointer;
+            border-radius: 50%;
+            box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+          }
+        }
+      }
+
+      .preset-buttons {
+        display: flex;
+        gap: 10px;
+        align-items: center;
+
+        button {
+          border: 1px solid #dee2ed;
+          background-color: #f5f5f5;
+          color: #1d2a3b;
+          font-size: 14px;
+          border-radius: 12px;
+          padding: 5px 15px;
+          cursor: pointer;
+          transition: background-color 0.3s, box-shadow 0.3s;
+
+          &:hover {
+            background-color: #e0e0e0;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+          }
+
+          &:active {
+            background-color: #d0d0d0;
+            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
+          }
+        }
+      }
+    }
+  }
+}.wac-breadcrumbs {
   width: 100%;
   display: flex;
   align-items: center;
@@ -3593,7 +3744,41 @@ wac-calendar {
     }
   }
 }
-.wac-confirm-delete {
+.w-color-picker {
+  display: flex;
+  flex-direction: column;
+
+  .cp-label {
+    font-weight: 500;
+  }
+
+  .w-input {
+    width: 210px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 5px;
+    border: 1px solid #dee2ed;
+    border-radius: 3px;
+
+    .color-preview {
+      width: 30px;
+      height: 30px;
+      border: 1px solid #dee2ed;
+      border-radius: 3px;
+    }
+    
+    .cp-input {
+      width: 70%;
+      height: 100%;
+      border: none;
+      font-size: 14px;
+      color: #1d2a3b;
+      font-weight: 400;
+    }
+  }
+}.wac-confirm-delete {
   position: absolute;
   right: 0;
   top: 0;
@@ -7413,6 +7598,42 @@ wac-optional-disable-container {
     }
   }
 
+  &--column {
+    .wac-tabs__wrapper {
+      flex-direction: column;
+
+      &::before {
+        position: absolute;
+        content: "";
+        width: 1px;
+        height: 100%;
+        top: 0;
+        left: -15px;
+        background-color: $wac-border-form;
+      }
+
+      .wac-tabs__wrapper__tab {
+        &::after {
+          background-color: $wac-tab-colunm-blue;
+          height: 0;
+          width: 1px;
+          left: -15px;
+          top: 0;
+        }
+
+        &--selected {
+          color: $wac-tab-colunm-blue;
+          font-weight: 400;
+
+          &::after {
+            height: 100%;
+            transition: height 0.3s ease-in-out;
+          }
+        }
+      }
+    }
+  }
+
   wac-tab-body {
     width: 100%;
     max-width: 100%;

package/esm2020/lib/components/border-picker/border-picker.component.mjs

@@ -0,0 +1,108 @@
+import { CommonModule } from "@angular/common";
+import { Component, EventEmitter, Input, Output, HostListener, forwardRef } from "@angular/core";
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+export 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']]
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYm9yZGVyLXBpY2tlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL2JvcmRlci1waWNrZXIvYm9yZGVyLXBpY2tlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL2JvcmRlci1waWNrZXIvYm9yZGVyLXBpY2tlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFDLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQTBCLFVBQVUsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN2SCxPQUFPLEVBQXdCLFdBQVcsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7O0FBb0J0RixNQUFNLE9BQU8scUJBQXFCO0lBaUJoQztRQWZTLFFBQUcsR0FBVyxNQUFNLENBQUM7UUFDckIsYUFBUSxHQUFXLE1BQU0sQ0FBQztRQUMxQixpQkFBWSxHQUFXLEtBQUssQ0FBQztRQUM3QixtQkFBYyxHQUFXLE9BQU8sQ0FBQztRQUNqQyxvQkFBZSxHQUFXLFFBQVEsQ0FBQztRQUNuQyxtQkFBYyxHQUFXLE1BQU0sQ0FBQztRQUNoQyxhQUFRLEdBQVksS0FBSyxDQUFDO1FBQzFCLFVBQUssR0FBVyxFQUFFLENBQUM7UUFFbEIsWUFBTyxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7UUFDbkMsdUJBQWtCLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQUUxRCxlQUFVLEdBQVksS0FBSyxDQUFDO1FBQzVCLGdCQUFXLEdBQVcsQ0FBQyxDQUFDO1FBSXhCLGFBQVEsR0FBUSxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7UUFDekIsY0FBUyxHQUFRLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztJQUhYLENBQUM7SUFLaEIsVUFBVSxDQUFDLEtBQWE7UUFDdEIsSUFBSSxLQUFLLEtBQUssU0FBUyxFQUFFO1lBQ3ZCLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO1NBQ3BCO0lBQ0gsQ0FBQztJQUdELGdCQUFnQixDQUFDLEVBQU87UUFDdEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVELGlCQUFpQixDQUFDLEVBQU87UUFDdkIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVELFFBQVEsQ0FBQyxLQUFVO1FBQ2pCLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUM7UUFDaEMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDMUIsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDM0MsQ0FBQztJQUdELFVBQVU7SUFDVixDQUFDO0lBRUQsVUFBVTtRQUNSLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxXQUFXLEdBQUcsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDckUsQ0FBQztJQUVELGtCQUFrQixDQUFDLEtBQWE7UUFDOUIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLEdBQUcsSUFBSSxDQUFDO1FBQzFCLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsZ0NBQWdDO1FBQzNELElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzNDLENBQUM7SUFFRCxlQUFlLENBQUMsS0FBYTtRQUMzQixJQUFJLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQztRQUN6QixJQUFJLENBQUMsa0JBQWtCLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDakMsQ0FBQztJQUdELGNBQWMsQ0FBQyxLQUFZO1FBQ3pCLE1BQU0sTUFBTSxHQUFHLEtBQUssQ0FBQyxNQUFxQixDQUFDO1FBQzNDLElBQUksQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLFVBQVUsQ0FBQyxFQUFFO1lBQy9CLElBQUksQ0FBQyxVQUFVLEdBQUcsS0FBSyxDQUFDO1NBQ3pCO0lBQ0gsQ0FBQzs7a0hBckVVLHFCQUFxQjtzR0FBckIscUJBQXFCLDBiQVRyQjtRQUNUO1lBQ0UsT0FBTyxFQUFFLGlCQUFpQjtZQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLHFCQUFxQixDQUFDO1lBQ3BELEtBQUssRUFBRSxJQUFJO1NBQ1o7S0FDRiwwQkNuQkgsMjZDQStDQSxxbkZEckNJLFlBQVksdU5BQ1osV0FBVzsyRkFXRixxQkFBcUI7a0JBbEJqQyxTQUFTOytCQUNFLG1CQUFtQixjQUdqQixJQUFJLFdBQ1A7d0JBQ1AsWUFBWTt3QkFDWixXQUFXO3FCQUNaLGFBQ1U7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsc0JBQXNCLENBQUM7NEJBQ3BELEtBQUssRUFBRSxJQUFJO3lCQUNaO3FCQUNGOzBFQUlRLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxHQUFHO3NCQUFYLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBQ0csZUFBZTtzQkFBdkIsS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUVJLE9BQU87c0JBQWhCLE1BQU07Z0JBQ0csa0JBQWtCO3NCQUEzQixNQUFNO2dCQW9EUCxjQUFjO3NCQURiLFlBQVk7dUJBQUMsZ0JBQWdCLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uXCI7XHJcbmltcG9ydCB7Q29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQsIEhvc3RMaXN0ZW5lciwgQ1VTVE9NX0VMRU1FTlRTX1NDSEVNQSwgZm9yd2FyZFJlZn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcclxuaW1wb3J0IHsgQ29udHJvbFZhbHVlQWNjZXNzb3IsIEZvcm1zTW9kdWxlLCBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcclxuXHJcbkBDb21wb25lbnQgKHtcclxuICBzZWxlY3RvcjogXCJ3YWMtYm9yZGVyLXBpY2tlclwiLFxyXG4gIHRlbXBsYXRlVXJsOiBcIi4vYm9yZGVyLXBpY2tlci5jb21wb25lbnQuaHRtbFwiLFxyXG4gIHN0eWxlVXJsczogW1wiLi9ib3JkZXItcGlja2VyLmNvbXBvbmVudC5zY3NzXCJdLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW1xyXG4gICAgQ29tbW9uTW9kdWxlLFxyXG4gICAgRm9ybXNNb2R1bGUsXHJcbiAgXSxcclxuICBwcm92aWRlcnM6IFtcclxuICAgIHtcclxuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXHJcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IEJvcmRlclBpY2tlckNvbXBvbmVudCksXHJcbiAgICAgIG11bHRpOiB0cnVlXHJcbiAgICB9XHJcbiAgXVxyXG59KVxyXG5cclxuZXhwb3J0IGNsYXNzIEJvcmRlclBpY2tlckNvbXBvbmVudCBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcclxuICBASW5wdXQoKSBsYWJlbDogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIGdhcDogc3RyaW5nID0gJzEycHgnO1xyXG4gIEBJbnB1dCgpIGZvbnRTaXplOiBzdHJpbmcgPSAnMTRweCc7XHJcbiAgQElucHV0KCkgYm9yZGVyUmFkaXVzOiBzdHJpbmcgPSAnMHB4JztcclxuICBASW5wdXQoKSBmaXJzdEJ0bk9wdGlvbjogc3RyaW5nID0gJ1NtYWxsJztcclxuICBASW5wdXQoKSBzZWNvbmRCdG5PcHRpb246IHN0cmluZyA9ICdNZWRpdW0nO1xyXG4gIEBJbnB1dCgpIHRoaXJkQnRuT3B0aW9uOiBzdHJpbmcgPSAnRnVsbCc7XHJcbiAgQElucHV0KCkgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBASW5wdXQoKSB2YWx1ZTogc3RyaW5nID0gJyc7XHJcblxyXG4gIEBPdXRwdXQoKSBibHVycmVkID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xyXG4gIEBPdXRwdXQoKSBib3JkZXJSYWRpdXNDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcclxuXHJcbiAgc2hvd1NsaWRlcjogYm9vbGVhbiA9IGZhbHNlO1xyXG4gIHNsaWRlclZhbHVlOiBudW1iZXIgPSAwO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHt9XHJcblxyXG4gIG9uQ2hhbmdlOiBhbnkgPSAoKSA9PiB7fTtcclxuICBvblRvdWNoZWQ6IGFueSA9ICgpID0+IHt9O1xyXG5cclxuICB3cml0ZVZhbHVlKHZhbHVlOiBzdHJpbmcpOiB2b2lkIHtcclxuICAgIGlmICh2YWx1ZSAhPT0gdW5kZWZpbmVkKSB7XHJcbiAgICAgIHRoaXMudmFsdWUgPSB2YWx1ZTtcclxuICAgIH1cclxuICB9XHJcblxyXG5cclxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMub25DaGFuZ2UgPSBmbjtcclxuICB9XHJcblxyXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMub25Ub3VjaGVkID0gZm47XHJcbiAgfVxyXG5cclxuICBzZXRWYWx1ZShldmVudDogYW55KSB7XHJcbiAgICB0aGlzLnZhbHVlID0gZXZlbnQudGFyZ2V0LnZhbHVlO1xyXG4gICAgdGhpcy5vbkNoYW5nZSh0aGlzLnZhbHVlKTtcclxuICAgIHRoaXMuYm9yZGVyUmFkaXVzQ2hhbmdlLmVtaXQodGhpcy52YWx1ZSk7XHJcbiAgfVxyXG5cclxuXHJcbiAgb25Gb2N1c091dCgpIHtcclxuICB9XHJcblxyXG4gIG9wZW5TbGlkZXIoKSB7XHJcbiAgICB0aGlzLnNob3dTbGlkZXIgPSB0cnVlO1xyXG4gICAgdGhpcy5zbGlkZXJWYWx1ZSA9IHBhcnNlSW50KHRoaXMudmFsdWUucmVwbGFjZSgncHgnLCAnJyksIDEwKSB8fCAwO1xyXG4gIH1cclxuXHJcbiAgdXBkYXRlQm9yZGVyUmFkaXVzKHZhbHVlOiBudW1iZXIpIHtcclxuICAgIHRoaXMudmFsdWUgPSB2YWx1ZSArICdweCc7XHJcbiAgICB0aGlzLm9uQ2hhbmdlKHRoaXMudmFsdWUpOyAvLyBOb3RpZmllIEFuZ3VsYXIgZHUgY2hhbmdlbWVudFxyXG4gICAgdGhpcy5ib3JkZXJSYWRpdXNDaGFuZ2UuZW1pdCh0aGlzLnZhbHVlKTtcclxuICB9XHJcblxyXG4gIHNldEJvcmRlclJhZGl1cyh2YWx1ZTogbnVtYmVyKSB7XHJcbiAgICB0aGlzLnNsaWRlclZhbHVlID0gdmFsdWU7XHJcbiAgICB0aGlzLnVwZGF0ZUJvcmRlclJhZGl1cyh2YWx1ZSk7XHJcbiAgfVxyXG5cclxuICBASG9zdExpc3RlbmVyKCdkb2N1bWVudDpjbGljaycsIFsnJGV2ZW50J10pXHJcbiAgb25DbGlja091dHNpZGUoZXZlbnQ6IEV2ZW50KSB7XHJcbiAgICBjb25zdCB0YXJnZXQgPSBldmVudC50YXJnZXQgYXMgSFRNTEVsZW1lbnQ7XHJcbiAgICBpZiAoIXRhcmdldC5jbG9zZXN0KCcudy1pbnB1dCcpKSB7XHJcbiAgICAgIHRoaXMuc2hvd1NsaWRlciA9IGZhbHNlO1xyXG4gICAgfVxyXG4gIH1cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwidy1ib3JkZXItcGlja2VyXCIgW25nU3R5bGVdPVwieydnYXAnOiBnYXB9XCI+XHJcblxyXG4gIDxsYWJlbCBjbGFzcz1cImJwLWxhYmVsXCIgZm9yPVwiYm9yZGVyUGlja2VyXCIgW25nU3R5bGVdPVwieydmb250LXNpemUnOiBmb250U2l6ZX1cIj57eyBsYWJlbCB9fTwvbGFiZWw+XHJcblxyXG4gIDxkaXYgY2xhc3M9XCJ3LWlucHV0XCI+XHJcblxyXG4gICAgPGRpdiBjbGFzcz1cImJvcmRlci1wcmV2aWV3XCIgW25nU3R5bGVdPVwieydib3JkZXItcmFkaXVzJzogdmFsdWV9XCI+XHJcbiAgICAgIDxkaXYgY2xhc3M9XCJtYXNrMVwiPjwvZGl2PlxyXG4gICAgICA8ZGl2IGNsYXNzPVwibWFzazJcIj48L2Rpdj5cclxuICAgIDwvZGl2PlxyXG5cclxuICAgIDxpbnB1dFxyXG4gICAgICBjbGFzcz1cImJwLWlucHV0XCJcclxuICAgICAgaWQ9XCJib3JkZXJQaWNrZXJcIlxyXG4gICAgICBwbGFjZWhvbGRlcj1cIjhweFwiXHJcbiAgICAgIG1heGxlbmd0aD1cIjVcIlxyXG4gICAgICBbKG5nTW9kZWwpXT1cInZhbHVlXCJcclxuICAgICAgKGZvY3VzKT1cIm9wZW5TbGlkZXIoKVwiXHJcbiAgICAgIChuZ01vZGVsQ2hhbmdlKT1cIm9uQ2hhbmdlKCRldmVudClcIlxyXG4gICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxyXG4gICAgICAoZm9jdXNvdXQpPVwib25Gb2N1c091dCgpXCJcclxuICAgICAgKGlucHV0KT1cInNldFZhbHVlKCRldmVudClcIlxyXG4gICAgLz5cclxuXHJcbiAgICA8ZGl2IGNsYXNzPVwic2xpZGVyLXBvcHVwXCIgKm5nSWY9XCJzaG93U2xpZGVyXCI+XHJcblxyXG4gICAgICA8ZGl2IGNsYXNzPVwic2xpZGVyXCI+XHJcbiAgICAgICAgPGlucHV0XHJcbiAgICAgICAgICB0eXBlPVwicmFuZ2VcIlxyXG4gICAgICAgICAgbWluPVwiMFwiXHJcbiAgICAgICAgICBtYXg9XCIxMDBcIlxyXG4gICAgICAgICAgWyhuZ01vZGVsKV09XCJzbGlkZXJWYWx1ZVwiXHJcbiAgICAgICAgICAobmdNb2RlbENoYW5nZSk9XCJ1cGRhdGVCb3JkZXJSYWRpdXMoJGV2ZW50KVwiXHJcbiAgICAgICAgLz5cclxuICAgICAgICA8c3Bhbj57eyBzbGlkZXJWYWx1ZSB9fXB4PC9zcGFuPlxyXG4gICAgICA8L2Rpdj5cclxuXHJcbiAgICAgIDxkaXYgY2xhc3M9XCJwcmVzZXQtYnV0dG9uc1wiPlxyXG4gICAgICAgIDxidXR0b24gKGNsaWNrKT1cInNldEJvcmRlclJhZGl1cyg0KVwiPnt7IGZpcnN0QnRuT3B0aW9uIH19PC9idXR0b24+XHJcbiAgICAgICAgPGJ1dHRvbiAoY2xpY2spPVwic2V0Qm9yZGVyUmFkaXVzKDgpXCI+e3sgc2Vjb25kQnRuT3B0aW9uIH19PC9idXR0b24+XHJcbiAgICAgICAgPGJ1dHRvbiAoY2xpY2spPVwic2V0Qm9yZGVyUmFkaXVzKDEwMClcIj57eyB0aGlyZEJ0bk9wdGlvbiB9fTwvYnV0dG9uPlxyXG4gICAgICA8L2Rpdj5cclxuICAgIDwvZGl2PlxyXG5cclxuICA8L2Rpdj5cclxuXHJcbjwvZGl2PlxyXG4iXX0=

package/esm2020/lib/components/color-picker/color-picker.component.mjs

@@ -0,0 +1,90 @@
+import { CommonModule } from "@angular/common";
+import { Component, EventEmitter, forwardRef, Input, Output } from "@angular/core";
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ColorPickerModule } from "ngx-color-picker";
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+import * as i3 from "ngx-color-picker";
+export 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.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
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3ItcGlja2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvY29sb3ItcGlja2VyL2NvbG9yLXBpY2tlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL2NvbG9yLXBpY2tlci9jb2xvci1waWNrZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBQyxTQUFTLEVBQUUsWUFBWSxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ2pGLE9BQU8sRUFBdUIsV0FBVyxFQUFFLGlCQUFpQixFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDcEYsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7Ozs7O0FBcUJyRCxNQUFNLE9BQU8sb0JBQW9CO0lBTy9CO1FBTFMsVUFBSyxHQUFXLEVBQUUsQ0FBQztRQUNuQixRQUFHLEdBQVcsTUFBTSxDQUFDO1FBQ3JCLGFBQVEsR0FBVyxNQUFNLENBQUM7UUFDekIsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBSW5ELGFBQVEsR0FBUSxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7UUFDekIsY0FBUyxHQUFRLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztJQUhYLENBQUM7SUFLaEIsVUFBVSxDQUFDLEtBQWE7UUFDdEIsSUFBSSxLQUFLLEtBQUssU0FBUyxFQUFFO1lBQ3ZCLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO1NBQ3BCO0lBQ0gsQ0FBQztJQUdELGdCQUFnQixDQUFDLEVBQU87UUFDdEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVELGlCQUFpQixDQUFDLEVBQU87UUFDdkIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVELFFBQVEsQ0FBQyxLQUFVO1FBQ2pCLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUM7UUFDaEMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDMUIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3BDLENBQUM7SUFFRCxXQUFXLENBQUMsS0FBYTtRQUN2Qix3Q0FBd0M7UUFDeEMsS0FBSyxHQUFHLEtBQUssQ0FBQyxPQUFPLENBQUMsZUFBZSxFQUFFLEVBQUUsQ0FBQyxDQUFDO1FBRTNDLHlCQUF5QjtRQUN6QixJQUFJLENBQUMsS0FBSyxDQUFDLFVBQVUsQ0FBQyxHQUFHLENBQUMsRUFBRTtZQUMxQixLQUFLLEdBQUcsR0FBRyxHQUFHLEtBQUssQ0FBQztTQUNyQjtRQUVELDRCQUE0QjtRQUM1QixJQUFJLElBQUksQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDLEVBQUU7WUFDNUIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7WUFDbkIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyw4REFBOEQ7WUFDekYsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQ25DO2FBQU07WUFDTCw0Q0FBNEM7WUFDNUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQ25DO0lBQ0gsQ0FBQztJQUdELFlBQVksQ0FBQyxLQUFhO1FBQ3hCLE1BQU0sQ0FBQyxHQUFHLElBQUksTUFBTSxFQUFFLENBQUMsS0FBSyxDQUFDO1FBQzdCLENBQUMsQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO1FBQ2hCLE9BQU8sQ0FBQyxDQUFDLEtBQUssS0FBSyxFQUFFLENBQUM7SUFDeEIsQ0FBQzs7aUhBMURVLG9CQUFvQjtxR0FBcEIsb0JBQW9CLHNMQVRwQjtRQUNUO1lBQ0UsT0FBTyxFQUFFLGlCQUFpQjtZQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLG9CQUFvQixDQUFDO1lBQ25ELEtBQUssRUFBRSxJQUFJO1NBQ1o7S0FDRiwwQkNyQkgsZzlCQWlDQSxxZ0JEdEJJLFlBQVksbUhBQ1osV0FBVyxpeEJBQ1gsaUJBQWlCOzJGQVdSLG9CQUFvQjtrQkFuQmhDLFNBQVM7K0JBQ0Usa0JBQWtCLGNBR2hCLElBQUksV0FDUDt3QkFDUCxZQUFZO3dCQUNaLFdBQVc7d0JBQ1gsaUJBQWlCO3FCQUNsQixhQUNVO3dCQUNUOzRCQUNFLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLHFCQUFxQixDQUFDOzRCQUNuRCxLQUFLLEVBQUUsSUFBSTt5QkFDWjtxQkFDRjswRUFJUSxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLEdBQUc7c0JBQVgsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNJLFdBQVc7c0JBQXBCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uXCI7XHJcbmltcG9ydCB7Q29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIGZvcndhcmRSZWYsIElucHV0LCBPdXRwdXR9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XHJcbmltcG9ydCB7Q29udHJvbFZhbHVlQWNjZXNzb3IsIEZvcm1zTW9kdWxlLCBOR19WQUxVRV9BQ0NFU1NPUn0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5pbXBvcnQgeyBDb2xvclBpY2tlck1vZHVsZSB9IGZyb20gXCJuZ3gtY29sb3ItcGlja2VyXCI7XHJcblxyXG5AQ29tcG9uZW50ICh7XHJcbiAgc2VsZWN0b3I6IFwid2FjLWNvbG9yLXBpY2tlclwiLFxyXG4gIHRlbXBsYXRlVXJsOiBcIi4vY29sb3ItcGlja2VyLmNvbXBvbmVudC5odG1sXCIsXHJcbiAgc3R5bGVVcmxzOiBbXCIuL2NvbG9yLXBpY2tlci5jb21wb25lbnQuc2Nzc1wiXSxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGltcG9ydHM6IFtcclxuICAgIENvbW1vbk1vZHVsZSxcclxuICAgIEZvcm1zTW9kdWxlLFxyXG4gICAgQ29sb3JQaWNrZXJNb2R1bGVcclxuICBdLFxyXG4gIHByb3ZpZGVyczogW1xyXG4gICAge1xyXG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcclxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gQ29sb3JQaWNrZXJDb21wb25lbnQpLFxyXG4gICAgICBtdWx0aTogdHJ1ZVxyXG4gICAgfVxyXG4gIF1cclxufSlcclxuXHJcbmV4cG9ydCBjbGFzcyBDb2xvclBpY2tlckNvbXBvbmVudCBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcclxuICBASW5wdXQoKSBsYWJlbDogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIHZhbHVlOiBzdHJpbmcgPSAnJztcclxuICBASW5wdXQoKSBnYXA6IHN0cmluZyA9ICcxMnB4JztcclxuICBASW5wdXQoKSBmb250U2l6ZTogc3RyaW5nID0gJzE0cHgnO1xyXG4gIEBPdXRwdXQoKSBjb2xvckNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHt9XHJcblxyXG4gIG9uQ2hhbmdlOiBhbnkgPSAoKSA9PiB7fTtcclxuICBvblRvdWNoZWQ6IGFueSA9ICgpID0+IHt9O1xyXG5cclxuICB3cml0ZVZhbHVlKHZhbHVlOiBzdHJpbmcpOiB2b2lkIHtcclxuICAgIGlmICh2YWx1ZSAhPT0gdW5kZWZpbmVkKSB7XHJcbiAgICAgIHRoaXMudmFsdWUgPSB2YWx1ZTtcclxuICAgIH1cclxuICB9XHJcblxyXG5cclxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMub25DaGFuZ2UgPSBmbjtcclxuICB9XHJcblxyXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMub25Ub3VjaGVkID0gZm47XHJcbiAgfVxyXG5cclxuICBzZXRWYWx1ZShldmVudDogYW55KSB7XHJcbiAgICB0aGlzLnZhbHVlID0gZXZlbnQudGFyZ2V0LnZhbHVlO1xyXG4gICAgdGhpcy5vbkNoYW5nZSh0aGlzLnZhbHVlKTtcclxuICAgIHRoaXMuY29sb3JDaGFuZ2UuZW1pdCh0aGlzLnZhbHVlKTtcclxuICB9XHJcblxyXG4gIGNoYW5nZUNvbG9yKGNvbG9yOiBzdHJpbmcpIHtcclxuICAgIC8vIFJlbW92ZSBhbnkgbm9uLWhleGFkZWNpbWFsIGNoYXJhY3RlcnNcclxuICAgIGNvbG9yID0gY29sb3IucmVwbGFjZSgvW15hLWZBLUYwLTldL2csICcnKTtcclxuXHJcbiAgICAvLyBBZGQgJyMnIGlmIG5vdCBwcmVzZW50XHJcbiAgICBpZiAoIWNvbG9yLnN0YXJ0c1dpdGgoJyMnKSkge1xyXG4gICAgICBjb2xvciA9ICcjJyArIGNvbG9yO1xyXG4gICAgfVxyXG5cclxuICAgIC8vIFZhbGlkYXRlIGFuZCB1cGRhdGUgY29sb3JcclxuICAgIGlmICh0aGlzLmlzVmFsaWRDb2xvcihjb2xvcikpIHtcclxuICAgICAgdGhpcy52YWx1ZSA9IGNvbG9yO1xyXG4gICAgICB0aGlzLm9uQ2hhbmdlKHRoaXMudmFsdWUpOyAvLyDwn5SlIEFKT1VUIGRlIGNldHRlIGxpZ25lIHBvdXIgaW5mb3JtZXIgQW5ndWxhciBkdSBjaGFuZ2VtZW50XHJcbiAgICAgIHRoaXMuY29sb3JDaGFuZ2UuZW1pdCh0aGlzLnZhbHVlKTtcclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIC8vIElmIGludmFsaWQsIHJlc2V0IHRvIHByZXZpb3VzIHZhbGlkIGNvbG9yXHJcbiAgICAgIHRoaXMuY29sb3JDaGFuZ2UuZW1pdCh0aGlzLnZhbHVlKTtcclxuICAgIH1cclxuICB9XHJcblxyXG5cclxuICBpc1ZhbGlkQ29sb3IoY29sb3I6IHN0cmluZyk6IGJvb2xlYW4ge1xyXG4gICAgY29uc3QgcyA9IG5ldyBPcHRpb24oKS5zdHlsZTtcclxuICAgIHMuY29sb3IgPSBjb2xvcjtcclxuICAgIHJldHVybiBzLmNvbG9yICE9PSAnJztcclxuICB9XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cInctY29sb3ItcGlja2VyXCIgW25nU3R5bGVdPVwieydnYXAnOiBnYXB9XCI+XHJcblxyXG4gIDxsYWJlbCBjbGFzcz1cImNwLWxhYmVsXCIgZm9yPVwiY29sb3JQaWNrZXJcIiBbbmdTdHlsZV09XCJ7J2ZvbnQtc2l6ZSc6IGZvbnRTaXplfVwiPnt7IGxhYmVsIH19PC9sYWJlbD5cclxuXHJcbiAgPGRpdiBjbGFzcz1cInctaW5wdXRcIj5cclxuXHJcbiAgICA8ZGl2XHJcbiAgICAgIGNsYXNzPVwiY29sb3ItcHJldmlld1wiXHJcbiAgICAgIFtjb2xvclBpY2tlcl09XCJ2YWx1ZVwiXHJcbiAgICAgIChjbGljayk9XCJjb2xvclBpY2tlcklucHV0Lm9wZW5EaWFsb2coKVwiXHJcbiAgICAgIFtuZ1N0eWxlXT1cInsnYmFja2dyb3VuZC1jb2xvcic6IHZhbHVlfVwiXHJcbiAgICAgIFtjcFBvc2l0aW9uXT1cIidib3R0b20nXCJcclxuICAgICAgW2NwUG9zaXRpb25PZmZzZXRdPVwiJy0zNSdcIlxyXG4gICAgPjwvZGl2PlxyXG5cclxuICAgIDxpbnB1dFxyXG4gICAgICBjbGFzcz1cImNwLWlucHV0XCJcclxuICAgICAgaWQ9XCJjb2xvclBpY2tlclwiXHJcbiAgICAgICNjb2xvclBpY2tlcklucHV0PVwibmd4Q29sb3JQaWNrZXJcIlxyXG4gICAgICBtYXhsZW5ndGg9XCI3XCJcclxuICAgICAgcGxhY2Vob2xkZXI9XCIjMDAwMDAwXCJcclxuICAgICAgWyhuZ01vZGVsKV09XCJ2YWx1ZVwiXHJcbiAgICAgIChuZ01vZGVsQ2hhbmdlKT1cImNoYW5nZUNvbG9yKCRldmVudClcIlxyXG4gICAgICBbY29sb3JQaWNrZXJdPVwidmFsdWVcIlxyXG4gICAgICAoY29sb3JQaWNrZXJDaGFuZ2UpPVwiY2hhbmdlQ29sb3IoJGV2ZW50KVwiXHJcbiAgICAgIFtjcFBvc2l0aW9uXT1cIidib3R0b20nXCJcclxuICAgICAgW2NwUG9zaXRpb25PZmZzZXRdPVwiJy0zNSdcIlxyXG4gICAgICAoaW5wdXQpPVwic2V0VmFsdWUoJGV2ZW50KVwiXHJcbiAgICAvPlxyXG5cclxuICA8L2Rpdj5cclxuXHJcbjwvZGl2PlxyXG4iXX0=