@wizishop/angular-components 15.1.132 → 15.1.133

package/fesm2020/wizishop-angular-components.mjs

@@ -2386,14 +2386,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
             }] } });
 
 class InfoComponent {
-    constructor() { }
+    get isColorPickerEnabled() {
+        return this.colorPicker === true || this.colorPicker === 'true';
+    }
+    constructor() {
+        this.colorPicker = false;
+    }
 }
 InfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: InfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: InfoComponent, selector: "wac-info", ngImport: i0, template: "<div class=\"wac-info\">\r\n  <div class=\"wac-info__wrapper\">\r\n    <i class=\"fas fa-info-circle\"></i>\r\n    <div class=\"wac-info__wrapper__sublevel\">\r\n      <div class=\"wac-info__wrapper__sublevel__container\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" });
+InfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: InfoComponent, selector: "wac-info", inputs: { colorPicker: "colorPicker" }, ngImport: i0, template: "<div class=\"wac-info\" [ngClass]=\"{'wac-info__color-picker': isColorPickerEnabled}\">\r\n  <div class=\"wac-info__wrapper\">\r\n    <i class=\"fas fa-info-circle\"></i>\r\n    <div class=\"wac-info__wrapper__sublevel\">\r\n      <div class=\"wac-info__wrapper__sublevel__container\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: InfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-info', template: "<div class=\"wac-info\">\r\n  <div class=\"wac-info__wrapper\">\r\n    <i class=\"fas fa-info-circle\"></i>\r\n    <div class=\"wac-info__wrapper__sublevel\">\r\n      <div class=\"wac-info__wrapper__sublevel__container\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
-        }], ctorParameters: function () { return []; } });
+            args: [{ selector: 'wac-info', template: "<div class=\"wac-info\" [ngClass]=\"{'wac-info__color-picker': isColorPickerEnabled}\">\r\n  <div class=\"wac-info__wrapper\">\r\n    <i class=\"fas fa-info-circle\"></i>\r\n    <div class=\"wac-info__wrapper__sublevel\">\r\n      <div class=\"wac-info__wrapper__sublevel__container\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { colorPicker: [{
+                type: Input
+            }] } });
 
 class SettingsComponent {
     constructor() { }
@@ -6587,6 +6594,7 @@ class ColorPickerComponent {
         this.value = '';
         this.gap = '12px';
         this.fontSize = '14px';
+        this.id = 'colorPicker';
         this.colorChange = new EventEmitter();
         this.onChange = () => { };
         this.onTouched = () => { };
@@ -6638,26 +6646,10 @@ class ColorPickerComponent {
     }
 }
 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{position:relative;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 .color-picker{left:0!important}.w-color-picker .w-input .color-picker .arrow-bottom{left:14px!important}.w-color-picker .w-input .cp-input{width:70%;height:100%;border:none;font-size:14px;color:#1d2a3b;font-weight:400;padding:0!important}\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"] }] });
+ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: ColorPickerComponent, selector: "wac-color-picker", inputs: { label: "label", value: "value", gap: "gap", fontSize: "fontSize", id: "id", info: "info" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<div class=\"w-color-picker\" [ngStyle]=\"{'gap': gap}\">\r\n\r\n  <div class=\"w-label\">\r\n    <label class=\"cp-label\" [for]=\"id\" [ngStyle]=\"{'font-size': fontSize}\">{{ label }}</label>\r\n    <wac-info *ngIf=\"info\" [colorPicker]=\"'true'\">{{ info }}</wac-info>\r\n  </div>\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]=\"id\"\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", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "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"] }, { kind: "component", type: InfoComponent, selector: "wac-info", inputs: ["colorPicker"] }] });
 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{position:relative;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 .color-picker{left:0!important}.w-color-picker .w-input .color-picker .arrow-bottom{left:14px!important}.w-color-picker .w-input .cp-input{width:70%;height:100%;border:none;font-size:14px;color:#1d2a3b;font-weight:400;padding:0!important}\n"] }]
+            args: [{ selector: "wac-color-picker", template: "<div class=\"w-color-picker\" [ngStyle]=\"{'gap': gap}\">\r\n\r\n  <div class=\"w-label\">\r\n    <label class=\"cp-label\" [for]=\"id\" [ngStyle]=\"{'font-size': fontSize}\">{{ label }}</label>\r\n    <wac-info *ngIf=\"info\" [colorPicker]=\"'true'\">{{ info }}</wac-info>\r\n  </div>\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]=\"id\"\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" }]
         }], ctorParameters: function () { return []; }, propDecorators: { label: [{
                 type: Input
             }], value: [{
@@ -6666,6 +6658,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
                 type: Input
             }], fontSize: [{
                 type: Input
+            }], id: [{
+                type: Input
+            }], info: [{
+                type: Input
             }], colorChange: [{
                 type: Output
             }] } });
@@ -6991,7 +6987,8 @@ const components = [
     TagDropdownComponent,
     SlideInComponent,
     OptionGroupComponent,
-    MenuTileComponent
+    MenuTileComponent,
+    ColorPickerComponent
 ];
 const exportsFromModule = [
     PaginationComponent,
@@ -7019,7 +7016,6 @@ const standaloneComponents = [
     InputWithSelectComponent,
     BlockTitleLegacyComponent,
     BlockSeparatorComponent,
-    ColorPickerComponent,
     BorderPickerComponent
 ];
 class SharedComponentsModule {
@@ -7091,7 +7087,8 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         TagDropdownComponent,
         SlideInComponent,
         OptionGroupComponent,
-        MenuTileComponent], imports: [CommonModule,
+        MenuTileComponent,
+        ColorPickerComponent], imports: [CommonModule,
         FormsModule,
         NwbAllModule,
         TranslateModule,
@@ -7125,7 +7122,6 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         InputWithSelectComponent,
         BlockTitleLegacyComponent,
         BlockSeparatorComponent,
-        ColorPickerComponent,
         BorderPickerComponent], exports: [GridComponent,
         TagComponent,
         ButtonComponent,
@@ -7192,7 +7188,8 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         TagDropdownComponent,
         SlideInComponent,
         OptionGroupComponent,
-        MenuTileComponent, PaginationComponent,
+        MenuTileComponent,
+        ColorPickerComponent, PaginationComponent,
         TableComponent,
         TableColumn,
         CheckBoxRow,
@@ -7213,7 +7210,6 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         InputWithSelectComponent,
         BlockTitleLegacyComponent,
         BlockSeparatorComponent,
-        ColorPickerComponent,
         BorderPickerComponent] });
 SharedComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: SharedComponentsModule, imports: [CommonModule,
         FormsModule,