@pepperi-addons/ngx-lib 0.4.0-angular14.36 → 0.4.0-angular14.39

package/fesm2015/pepperi-addons-ngx-lib-color.mjs

@@ -28,19 +28,19 @@ import * as i11 from '@pepperi-addons/ngx-lib/textbox';
 import { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';
 import * as i12 from '@ngx-translate/core';
 
-var PepContrastRatioType;
-(function (PepContrastRatioType) {
-    PepContrastRatioType[PepContrastRatioType["AA"] = 4.5] = "AA";
-    PepContrastRatioType[PepContrastRatioType["AAA"] = 7] = "AAA";
-})(PepContrastRatioType || (PepContrastRatioType = {}));
-class PepColorPickerComponent {
-    constructor(colorService, dialogRef, data) {
-        var _a;
-        this.colorService = colorService;
-        this.dialogRef = dialogRef;
-        this.data = data;
-        this.defaultColor = '#ccc';
-        this.checkAAComplient = true;
+var PepContrastRatioType;
+(function (PepContrastRatioType) {
+    PepContrastRatioType[PepContrastRatioType["AA"] = 4.5] = "AA";
+    PepContrastRatioType[PepContrastRatioType["AAA"] = 7] = "AAA";
+})(PepContrastRatioType || (PepContrastRatioType = {}));
+class PepColorPickerComponent {
+    constructor(colorService, dialogRef, data) {
+        var _a;
+        this.colorService = colorService;
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.defaultColor = '#ccc';
+        this.checkAAComplient = true;
         this.defaultHueBackground = `linear-gradient(to right,
         hsl(0, 100%, 50%) 0%,
         hsl(60, 100%, 50%) 17%,
@@ -48,356 +48,356 @@ class PepColorPickerComponent {
         hsl(180, 100%, 50%) 50%,
         hsl(240, 100%, 50%) 67%,
         hsl(300, 100%, 50%) 83%,
-        hsl(360, 100%, 50%) 100%)`;
-        this.currentHue = 100;
-        this.currentHueMin = 0;
-        this.currentHueMax = 360;
-        this.currentHueBackground = this.defaultHueBackground;
+        hsl(360, 100%, 50%) 100%)`;
+        this.currentHue = 100;
+        this.currentHueMin = 0;
+        this.currentHueMax = 360;
+        this.currentHueBackground = this.defaultHueBackground;
         this.defaultSaturationBackground = `linear-gradient(to right,
         hsl(var(--pep-color-picker-current-hue), 0.01%, 50%) 0%,
-        hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%)`;
-        this.currentSaturation = 50;
-        this.currentSaturationMin = 0;
-        this.currentSaturationMax = 100;
-        this.currentSaturationBackground = this.defaultSaturationBackground;
+        hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%)`;
+        this.currentSaturation = 50;
+        this.currentSaturationMin = 0;
+        this.currentSaturationMax = 100;
+        this.currentSaturationBackground = this.defaultSaturationBackground;
         this.defaultLightnessBackground = `linear-gradient(to right,
         hsl(var(--pep-color-picker-current-hue), 100%, 100%) 0%,
         hsl(var(--pep-color-picker-current-hue), 100%, 50%) 50%,
-        hsl(var(--pep-color-picker-current-hue), 100%, 0.01%) 100%)`;
-        this.currentLightness = 50;
-        this.currentLightnessMin = 0;
-        this.currentLightnessMax = 100;
-        this.currentLightnessBackground = this.defaultLightnessBackground;
-        this.data.type = data ? data.type : 'any';
-        this.data.showAAComplient = !data
-            ? false
-            : (_a = data.showAAComplient) !== null && _a !== void 0 ? _a : true;
-        this.data.textColor = data && data.textColor ? data.textColor : '#fff';
-        this.data.contrastRatio =
-            data && data.contrastRatio
-                ? data.contrastRatio
-                : PepContrastRatioType.AA;
-    }
-    ngOnInit() {
-        this.initVars();
-        this.checkAAComplient = this.data.checkAAComplient;
-        this.convertValueStringToColor(this.data.value);
-    }
-    initVars() {
-        if (this.data.type === 'main') {
-            this.currentLightnessMax = 10;
-            this.currentLightness = 5;
-            this.currentHueBackground = this.defaultHueBackground;
-            this.currentSaturationBackground = this.defaultSaturationBackground;
-            this.currentLightnessBackground = this.defaultLightnessBackground;
-        }
-        else if (this.data.type === 'success') {
-            this.currentHueMin = 70;
-            this.currentHueMax = 150;
-            this.currentHue = 100;
-            this.currentSaturationMin = 50;
-            this.currentSaturationMax = 100;
-            this.currentSaturation = 50;
-            this.currentLightnessMin = 10;
-            this.currentLightnessMax = 65;
-            this.currentLightness = 50;
+        hsl(var(--pep-color-picker-current-hue), 100%, 0.01%) 100%)`;
+        this.currentLightness = 50;
+        this.currentLightnessMin = 0;
+        this.currentLightnessMax = 100;
+        this.currentLightnessBackground = this.defaultLightnessBackground;
+        this.data.type = data ? data.type : 'any';
+        this.data.showAAComplient = !data
+            ? false
+            : (_a = data.showAAComplient) !== null && _a !== void 0 ? _a : true;
+        this.data.textColor = data && data.textColor ? data.textColor : '#fff';
+        this.data.contrastRatio =
+            data && data.contrastRatio
+                ? data.contrastRatio
+                : PepContrastRatioType.AA;
+    }
+    ngOnInit() {
+        this.initVars();
+        this.checkAAComplient = this.data.checkAAComplient;
+        this.convertValueStringToColor(this.data.value);
+    }
+    initVars() {
+        if (this.data.type === 'main') {
+            this.currentLightnessMax = 10;
+            this.currentLightness = 5;
+            this.currentHueBackground = this.defaultHueBackground;
+            this.currentSaturationBackground = this.defaultSaturationBackground;
+            this.currentLightnessBackground = this.defaultLightnessBackground;
+        }
+        else if (this.data.type === 'success') {
+            this.currentHueMin = 70;
+            this.currentHueMax = 150;
+            this.currentHue = 100;
+            this.currentSaturationMin = 50;
+            this.currentSaturationMax = 100;
+            this.currentSaturation = 50;
+            this.currentLightnessMin = 10;
+            this.currentLightnessMax = 65;
+            this.currentLightness = 50;
             this.currentHueBackground = `linear-gradient(to right,
                 hsl(70, 100%, 50%) 0%,
-                hsl(150, 100%, 50%) 100%)`;
+                hsl(150, 100%, 50%) 100%)`;
             this.currentSaturationBackground = `linear-gradient(to right,
                 hsl(var(--pep-color-picker-current-hue), 50%, 50%) 50%,
-                hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%)`;
+                hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%)`;
             this.currentLightnessBackground = `linear-gradient(to right,
                 hsl(var(--pep-color-picker-current-hue), 100%, 65%) 10%,
                 hsl(var(--pep-color-picker-current-hue), 100%, 35%) 35%,
-                hsl(var(--pep-color-picker-current-hue), 100%, 10%) 65%)`;
-        }
-        else if (this.data.type === 'caution') {
-            this.currentHueMin = -20;
-            this.currentHueMax = 20;
-            this.currentHue = 10;
-            this.currentSaturationMin = 75;
-            this.currentSaturationMax = 100;
-            this.currentSaturation = 75;
-            this.currentLightnessMin = 25;
-            this.currentLightnessMax = 75;
-            this.currentLightness = 50;
+                hsl(var(--pep-color-picker-current-hue), 100%, 10%) 65%)`;
+        }
+        else if (this.data.type === 'caution') {
+            this.currentHueMin = -20;
+            this.currentHueMax = 20;
+            this.currentHue = 10;
+            this.currentSaturationMin = 75;
+            this.currentSaturationMax = 100;
+            this.currentSaturation = 75;
+            this.currentLightnessMin = 25;
+            this.currentLightnessMax = 75;
+            this.currentLightness = 50;
             this.currentHueBackground = `linear-gradient(to right,
                 hsl(340, 100%, 50%) 0%,
-                hsl(20, 100%, 50%) 100%)`;
+                hsl(20, 100%, 50%) 100%)`;
             this.currentSaturationBackground = `linear-gradient(to right,
                 hsl(var(--pep-color-picker-current-hue), 75%, 50%) 75%,
-                hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%)`;
+                hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%)`;
             this.currentLightnessBackground = `linear-gradient(to right,
                 hsl(var(--pep-color-picker-current-hue), 100%, 75%) 25%,
                 hsl(var(--pep-color-picker-current-hue), 100%, 50%) 50%,
-                hsl(var(--pep-color-picker-current-hue), 100%, 25%) 75%)`;
-        }
-    }
-    setCurrentHueInCss() {
-        document.documentElement.style.setProperty(PepColorPickerComponent.CURRENT_HUE, this.currentHue.toString());
-    }
-    convertValueStringToColor(color) {
-        if (color.indexOf('hsl') === 0) {
-            const hsl = this.colorService.hslString2hsl(color);
-            this.convertColorToValueString(hsl);
-        }
-        else if (color.indexOf('rgb') === 0) {
-            const hsl = this.colorService.rgbString2hsl(color);
-            this.convertColorToValueString(hsl);
-        }
-        else if (color.indexOf('#') === 0) {
-            const hsl = this.colorService.hex2hsl(color);
-            this.convertColorToValueString(hsl);
-        }
-        else {
-            // Handle default.
-            const hsl = this.colorService.hex2hsl(this.defaultColor);
-            this.convertColorToValueString(hsl);
-        }
-        this.setCurrentHueInCss();
-    }
-    convertColorToValueString(hslColor) {
-        // Regular hue
-        if (hslColor.h >= this.currentHueMin &&
-            hslColor.h <= this.currentHueMax) {
-            this.currentHue = hslColor.h;
-        }
-        else if (this.currentHueMin < 0 &&
-            hslColor.h >= 0 &&
-            hslColor.h <= 360) {
-            // For min with - (change to the other side of the circle)
-            hslColor.h = hslColor.h - 360;
-            if (hslColor.h >= this.currentHueMin &&
-                hslColor.h <= this.currentHueMax) {
-                this.currentHue = hslColor.h;
-            }
-        }
-        this.currentSaturation =
-            hslColor.s >= this.currentSaturationMin &&
-                hslColor.s <= this.currentSaturationMax
-                ? hslColor.s
-                : this.currentSaturation;
-        this.currentLightness =
-            hslColor.l >= this.currentLightnessMin &&
-                hslColor.l <= this.currentLightnessMax
-                ? hslColor.l
-                : this.currentLightness;
-        // Write the value (if hue is changed to the other side of the circle return it back).
-        const hsl = {
-            h: this.currentHue,
-            s: this.currentSaturation,
-            l: this.currentLightness,
-        };
-        this.data.value = this.colorService.convertHslToStringHsl(hsl);
-        // Check the contrast ratio - set the closest accessible color to complientColor
-        // and update isUserChooseAAComplientColor.
-        const adjustableColor = this.colorService.hsl2hex(hsl);
-        const closestHex = this.colorService.findClosestAccessibleColor(adjustableColor, this.data.textColor, this.data.contrastRatio);
-        this.isUserChooseAAComplientColor = adjustableColor === closestHex;
-        this.complientColor = this.colorService.convertHslToStringHsl(this.colorService.hex2hsl(closestHex));
-    }
-    onHueChange(value) {
-        this.convertColorToValueString({ h: value });
-        this.setCurrentHueInCss();
-    }
-    onSaturationChange(value) {
-        // this.currentSaturation = event.value;
-        this.convertColorToValueString({ s: value });
-    }
-    onLightnessChange(value) {
-        // this.currentLightness = event.value;
-        this.convertColorToValueString({
-            l: this.currentLightnessMax -
-                value +
-                this.currentLightnessMin,
-        });
-    }
-    onColorValueChange(event) {
-        this.convertValueStringToColor(event.value);
-    }
-    onSave(event) {
-        const color = this.checkAAComplient
-            ? this.complientColor
-            : this.data.value;
-        // this.notify.emit({ key: this.key, value: color });
-        this.dialogRef.close(color);
-    }
-    closeDialog(event) {
-        this.dialogRef.close(event);
-    }
-}
-PepColorPickerComponent.CURRENT_HUE = '--pep-color-picker-current-hue';
-PepColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepColorPickerComponent, deps: [{ token: i1.PepColorService }, { token: i2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-PepColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepColorPickerComponent, selector: "ng-component", ngImport: i0, template: "<div class=\"pep-color-picker-container\">\n    <pep-dialog [title]=\"'COLOR.DIALOG_TITLE' | translate\" (close)=\"closeDialog($event)\">\n        <ng-container pep-dialog-content>\n            <div class=\"color-chooser-content\">\n                <div class=\"current-color\" [ngStyle]=\"{ 'background': data?.value ? data.value : 'transparent' }\"></div>\n\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_HUE' | translate\" [minValue]=\"currentHueMin\"\n                    [maxValue]=\"currentHueMax\" [value]=\"currentHue\" [background]=\"currentHueBackground\"\n                    (valueChange)=\"onHueChange($event)\">\n                </pep-slider>\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_SATURATION' | translate\"\n                    [minValue]=\"currentSaturationMin\" [maxValue]=\"currentSaturationMax\" [value]=\"currentSaturation\"\n                    [background]=\"currentSaturationBackground\" (valueChange)=\"onSaturationChange($event)\">\n                </pep-slider>\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_LIGHTNESS' | translate\"\n                    [minValue]=\"currentLightnessMin\" [maxValue]=\"currentLightnessMax\"\n                    [value]=\"currentLightnessMax - currentLightness + currentLightnessMin\"\n                    [background]=\"currentLightnessBackground\" (valueChange)=\"onLightnessChange($event)\">\n                </pep-slider>\n            </div>\n            <div class=\"color-value-content\">\n                <div class=\"color-value\" [ngClass]=\"{ 'with-complient': checkAAComplient }\">\n                    <pep-textbox [key]=\"'colorValue'\" [label]=\"'COLOR.ADD_VALUE_HERE' | translate \"\n                        [formattedValue]=\"data?.value\" [value]=\"data?.value\" (valueChange)=\"onColorValueChange($event)\">\n                    </pep-textbox>\n                </div>\n                <div *ngIf=\"checkAAComplient\" class=\"color-complient-container\">\n                    <pep-field-title [label]=\"'COLOR.AA_COMPLIENT' | translate \">\n                    </pep-field-title>\n                    <div class=\"color-complient\" [ngStyle]=\"{ 'background': complientColor }\">\n                        <mat-icon *ngIf=\"isUserChooseAAComplientColor\">\n                            <pep-icon name=\"system_ok\">\n                            </pep-icon>\n                        </mat-icon>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-container pep-dialog-actions>\n            <div class=\"color-actions pep-spacing-element-negative\">\n                <mat-checkbox *ngIf=\"data.showAAComplient\" class=\"pep-spacing-element\" type=\"checkbox\"\n                    id=\"checkAAComplient\" (change)=\"checkAAComplient = !checkAAComplient\" [checked]=\"checkAAComplient\">\n                    <span class=\"body-xs ellipsis\">{{ 'COLOR.AA_COMPLIENT' | translate }}</span>\n                </mat-checkbox>\n                <div>\n                    <button mat-button [mat-dialog-close]=\"null\" class=\"pep-spacing-element pep-button md weak\">\n                        {{'ACTIONS.CANCEL' | translate}}\n                    </button>\n                    <button mat-button class=\"pep-spacing-element pep-button md strong\" (click)=\"onSave($event)\">\n                        {{'ACTIONS.OK' | translate}}\n                    </button>\n                </div>\n            </div>\n        </ng-container>\n    </pep-dialog>\n</div>", styles: [".mat-slider-track-background,.mat-slider-horizontal .mat-slider-track-fill{display:none}.pepperi-color-picker-container ::ng-deep .mat-dialog-content,.pep-color-picker-container ::ng-deep .mat-dialog-content{padding:var(--pep-spacing-sm, .5rem) var(--pep-spacing-sm, .5rem) 0}.pepperi-color-picker-container .color-chooser-content,.pep-color-picker-container .color-chooser-content{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(3,1fr);grid-column-gap:var(--pep-spacing-xl, 1.5rem);grid-row-gap:var(--pep-spacing-sm, .5rem);margin-top:var(--pep-spacing-sm, .5rem)}.pepperi-color-picker-container .color-chooser-content .current-color,.pep-color-picker-container .color-chooser-content .current-color{grid-row:1/span 3;grid-column:6/span 4;border-radius:var(--pep-border-radius-md, .25rem);width:9.25rem;height:9.25rem}.pepperi-color-picker-container .color-chooser-content .slider-box,.pep-color-picker-container .color-chooser-content .slider-box{grid-column:1/span 5}.pepperi-color-picker-container .color-value-content,.pep-color-picker-container .color-value-content{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(1,1fr);grid-column-gap:var(--pep-spacing-xl, 1.5rem);grid-row-gap:var(--pep-spacing-sm, .5rem);margin-top:1.5rem}.pepperi-color-picker-container .color-value-content .color-value,.pep-color-picker-container .color-value-content .color-value{grid-row:1/span 1;grid-column:1/span 9}.pepperi-color-picker-container .color-value-content .color-value.with-complient,.pep-color-picker-container .color-value-content .color-value.with-complient{grid-column:1/span 5}.pepperi-color-picker-container .color-value-content .color-complient-container,.pep-color-picker-container .color-value-content .color-complient-container{grid-column:6/span 4}.pepperi-color-picker-container .color-value-content .color-complient-container .color-complient,.pep-color-picker-container .color-value-content .color-complient-container .color-complient{display:flex;justify-content:center;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);height:var(--pep-form-field-height, 2.5rem);width:9.25rem}.pepperi-color-picker-container ::ng-deep .mat-dialog-actions,.pep-color-picker-container ::ng-deep .mat-dialog-actions{display:block}.pepperi-color-picker-container ::ng-deep .mat-dialog-actions .color-actions,.pep-color-picker-container ::ng-deep .mat-dialog-actions .color-actions{display:flex;justify-content:space-between;align-items:center}\n", ".pepperi-color-picker-container .color-value-content .color-complient-container .color-complient ::ng-deep .mat-icon .svg-icon,.pep-color-picker-container .color-value-content .color-complient-container .color-complient ::ng-deep .mat-icon .svg-icon{fill:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$1.PepDialogComponent, selector: "pep-dialog", inputs: ["title", "showClose", "showHeader", "showFooter"], outputs: ["close"] }, { kind: "component", type: i1$2.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i9.PepSliderComponent, selector: "pep-slider", inputs: ["label", "disabled", "hint", "background", "step", "minValue", "maxValue", "value"], outputs: ["valueChange", "inputChange"] }, { kind: "component", type: i10.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength"] }, { kind: "component", type: i11.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "formattedValue", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey"], outputs: ["valueChange", "formValidationChange"] }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepColorPickerComponent, decorators: [{
-            type: Component,
-            args: [{ template: "<div class=\"pep-color-picker-container\">\n    <pep-dialog [title]=\"'COLOR.DIALOG_TITLE' | translate\" (close)=\"closeDialog($event)\">\n        <ng-container pep-dialog-content>\n            <div class=\"color-chooser-content\">\n                <div class=\"current-color\" [ngStyle]=\"{ 'background': data?.value ? data.value : 'transparent' }\"></div>\n\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_HUE' | translate\" [minValue]=\"currentHueMin\"\n                    [maxValue]=\"currentHueMax\" [value]=\"currentHue\" [background]=\"currentHueBackground\"\n                    (valueChange)=\"onHueChange($event)\">\n                </pep-slider>\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_SATURATION' | translate\"\n                    [minValue]=\"currentSaturationMin\" [maxValue]=\"currentSaturationMax\" [value]=\"currentSaturation\"\n                    [background]=\"currentSaturationBackground\" (valueChange)=\"onSaturationChange($event)\">\n                </pep-slider>\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_LIGHTNESS' | translate\"\n                    [minValue]=\"currentLightnessMin\" [maxValue]=\"currentLightnessMax\"\n                    [value]=\"currentLightnessMax - currentLightness + currentLightnessMin\"\n                    [background]=\"currentLightnessBackground\" (valueChange)=\"onLightnessChange($event)\">\n                </pep-slider>\n            </div>\n            <div class=\"color-value-content\">\n                <div class=\"color-value\" [ngClass]=\"{ 'with-complient': checkAAComplient }\">\n                    <pep-textbox [key]=\"'colorValue'\" [label]=\"'COLOR.ADD_VALUE_HERE' | translate \"\n                        [formattedValue]=\"data?.value\" [value]=\"data?.value\" (valueChange)=\"onColorValueChange($event)\">\n                    </pep-textbox>\n                </div>\n                <div *ngIf=\"checkAAComplient\" class=\"color-complient-container\">\n                    <pep-field-title [label]=\"'COLOR.AA_COMPLIENT' | translate \">\n                    </pep-field-title>\n                    <div class=\"color-complient\" [ngStyle]=\"{ 'background': complientColor }\">\n                        <mat-icon *ngIf=\"isUserChooseAAComplientColor\">\n                            <pep-icon name=\"system_ok\">\n                            </pep-icon>\n                        </mat-icon>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-container pep-dialog-actions>\n            <div class=\"color-actions pep-spacing-element-negative\">\n                <mat-checkbox *ngIf=\"data.showAAComplient\" class=\"pep-spacing-element\" type=\"checkbox\"\n                    id=\"checkAAComplient\" (change)=\"checkAAComplient = !checkAAComplient\" [checked]=\"checkAAComplient\">\n                    <span class=\"body-xs ellipsis\">{{ 'COLOR.AA_COMPLIENT' | translate }}</span>\n                </mat-checkbox>\n                <div>\n                    <button mat-button [mat-dialog-close]=\"null\" class=\"pep-spacing-element pep-button md weak\">\n                        {{'ACTIONS.CANCEL' | translate}}\n                    </button>\n                    <button mat-button class=\"pep-spacing-element pep-button md strong\" (click)=\"onSave($event)\">\n                        {{'ACTIONS.OK' | translate}}\n                    </button>\n                </div>\n            </div>\n        </ng-container>\n    </pep-dialog>\n</div>", styles: [".mat-slider-track-background,.mat-slider-horizontal .mat-slider-track-fill{display:none}.pepperi-color-picker-container ::ng-deep .mat-dialog-content,.pep-color-picker-container ::ng-deep .mat-dialog-content{padding:var(--pep-spacing-sm, .5rem) var(--pep-spacing-sm, .5rem) 0}.pepperi-color-picker-container .color-chooser-content,.pep-color-picker-container .color-chooser-content{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(3,1fr);grid-column-gap:var(--pep-spacing-xl, 1.5rem);grid-row-gap:var(--pep-spacing-sm, .5rem);margin-top:var(--pep-spacing-sm, .5rem)}.pepperi-color-picker-container .color-chooser-content .current-color,.pep-color-picker-container .color-chooser-content .current-color{grid-row:1/span 3;grid-column:6/span 4;border-radius:var(--pep-border-radius-md, .25rem);width:9.25rem;height:9.25rem}.pepperi-color-picker-container .color-chooser-content .slider-box,.pep-color-picker-container .color-chooser-content .slider-box{grid-column:1/span 5}.pepperi-color-picker-container .color-value-content,.pep-color-picker-container .color-value-content{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(1,1fr);grid-column-gap:var(--pep-spacing-xl, 1.5rem);grid-row-gap:var(--pep-spacing-sm, .5rem);margin-top:1.5rem}.pepperi-color-picker-container .color-value-content .color-value,.pep-color-picker-container .color-value-content .color-value{grid-row:1/span 1;grid-column:1/span 9}.pepperi-color-picker-container .color-value-content .color-value.with-complient,.pep-color-picker-container .color-value-content .color-value.with-complient{grid-column:1/span 5}.pepperi-color-picker-container .color-value-content .color-complient-container,.pep-color-picker-container .color-value-content .color-complient-container{grid-column:6/span 4}.pepperi-color-picker-container .color-value-content .color-complient-container .color-complient,.pep-color-picker-container .color-value-content .color-complient-container .color-complient{display:flex;justify-content:center;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);height:var(--pep-form-field-height, 2.5rem);width:9.25rem}.pepperi-color-picker-container ::ng-deep .mat-dialog-actions,.pep-color-picker-container ::ng-deep .mat-dialog-actions{display:block}.pepperi-color-picker-container ::ng-deep .mat-dialog-actions .color-actions,.pep-color-picker-container ::ng-deep .mat-dialog-actions .color-actions{display:flex;justify-content:space-between;align-items:center}\n", ".pepperi-color-picker-container .color-value-content .color-complient-container .color-complient ::ng-deep .mat-icon .svg-icon,.pep-color-picker-container .color-value-content .color-complient-container .color-complient ::ng-deep .mat-icon .svg-icon{fill:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: i1.PepColorService }, { type: i2.MatDialogRef }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [MAT_DIALOG_DATA]
-                    }] }];
+                hsl(var(--pep-color-picker-current-hue), 100%, 25%) 75%)`;
+        }
+    }
+    setCurrentHueInCss() {
+        document.documentElement.style.setProperty(PepColorPickerComponent.CURRENT_HUE, this.currentHue.toString());
+    }
+    convertValueStringToColor(color) {
+        if (color.indexOf('hsl') === 0) {
+            const hsl = this.colorService.hslString2hsl(color);
+            this.convertColorToValueString(hsl);
+        }
+        else if (color.indexOf('rgb') === 0) {
+            const hsl = this.colorService.rgbString2hsl(color);
+            this.convertColorToValueString(hsl);
+        }
+        else if (color.indexOf('#') === 0) {
+            const hsl = this.colorService.hex2hsl(color);
+            this.convertColorToValueString(hsl);
+        }
+        else {
+            // Handle default.
+            const hsl = this.colorService.hex2hsl(this.defaultColor);
+            this.convertColorToValueString(hsl);
+        }
+        this.setCurrentHueInCss();
+    }
+    convertColorToValueString(hslColor) {
+        // Regular hue
+        if (hslColor.h >= this.currentHueMin &&
+            hslColor.h <= this.currentHueMax) {
+            this.currentHue = hslColor.h;
+        }
+        else if (this.currentHueMin < 0 &&
+            hslColor.h >= 0 &&
+            hslColor.h <= 360) {
+            // For min with - (change to the other side of the circle)
+            hslColor.h = hslColor.h - 360;
+            if (hslColor.h >= this.currentHueMin &&
+                hslColor.h <= this.currentHueMax) {
+                this.currentHue = hslColor.h;
+            }
+        }
+        this.currentSaturation =
+            hslColor.s >= this.currentSaturationMin &&
+                hslColor.s <= this.currentSaturationMax
+                ? hslColor.s
+                : this.currentSaturation;
+        this.currentLightness =
+            hslColor.l >= this.currentLightnessMin &&
+                hslColor.l <= this.currentLightnessMax
+                ? hslColor.l
+                : this.currentLightness;
+        // Write the value (if hue is changed to the other side of the circle return it back).
+        const hsl = {
+            h: this.currentHue,
+            s: this.currentSaturation,
+            l: this.currentLightness,
+        };
+        this.data.value = this.colorService.convertHslToStringHsl(hsl);
+        // Check the contrast ratio - set the closest accessible color to complientColor
+        // and update isUserChooseAAComplientColor.
+        const adjustableColor = this.colorService.hsl2hex(hsl);
+        const closestHex = this.colorService.findClosestAccessibleColor(adjustableColor, this.data.textColor, this.data.contrastRatio);
+        this.isUserChooseAAComplientColor = adjustableColor === closestHex;
+        this.complientColor = this.colorService.convertHslToStringHsl(this.colorService.hex2hsl(closestHex));
+    }
+    onHueChange(value) {
+        this.convertColorToValueString({ h: value });
+        this.setCurrentHueInCss();
+    }
+    onSaturationChange(value) {
+        // this.currentSaturation = event.value;
+        this.convertColorToValueString({ s: value });
+    }
+    onLightnessChange(value) {
+        // this.currentLightness = event.value;
+        this.convertColorToValueString({
+            l: this.currentLightnessMax -
+                value +
+                this.currentLightnessMin,
+        });
+    }
+    onColorValueChange(color) {
+        this.convertValueStringToColor(color);
+    }
+    onSave(event) {
+        const color = this.checkAAComplient
+            ? this.complientColor
+            : this.data.value;
+        // this.notify.emit({ key: this.key, value: color });
+        this.dialogRef.close(color);
+    }
+    closeDialog(event) {
+        this.dialogRef.close(event);
+    }
+}
+PepColorPickerComponent.CURRENT_HUE = '--pep-color-picker-current-hue';
+PepColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepColorPickerComponent, deps: [{ token: i1.PepColorService }, { token: i2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+PepColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepColorPickerComponent, selector: "ng-component", ngImport: i0, template: "<div class=\"pep-color-picker-container\">\n    <pep-dialog [title]=\"'COLOR.DIALOG_TITLE' | translate\" (close)=\"closeDialog($event)\">\n        <ng-container pep-dialog-content>\n            <div class=\"color-chooser-content\">\n                <div class=\"current-color\" [ngStyle]=\"{ 'background': data?.value ? data.value : 'transparent' }\"></div>\n\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_HUE' | translate\" [minValue]=\"currentHueMin\"\n                    [maxValue]=\"currentHueMax\" [value]=\"currentHue\" [background]=\"currentHueBackground\"\n                    (valueChange)=\"onHueChange($event)\">\n                </pep-slider>\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_SATURATION' | translate\"\n                    [minValue]=\"currentSaturationMin\" [maxValue]=\"currentSaturationMax\" [value]=\"currentSaturation\"\n                    [background]=\"currentSaturationBackground\" (valueChange)=\"onSaturationChange($event)\">\n                </pep-slider>\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_LIGHTNESS' | translate\"\n                    [minValue]=\"currentLightnessMin\" [maxValue]=\"currentLightnessMax\"\n                    [value]=\"currentLightnessMax - currentLightness + currentLightnessMin\"\n                    [background]=\"currentLightnessBackground\" (valueChange)=\"onLightnessChange($event)\">\n                </pep-slider>\n            </div>\n            <div class=\"color-value-content\">\n                <div class=\"color-value\" [ngClass]=\"{ 'with-complient': checkAAComplient }\">\n                    <pep-textbox [key]=\"'colorValue'\" [label]=\"'COLOR.ADD_VALUE_HERE' | translate \"\n                        [formattedValue]=\"data?.value\" [value]=\"data?.value\" (valueChange)=\"onColorValueChange($event)\">\n                    </pep-textbox>\n                </div>\n                <div *ngIf=\"checkAAComplient\" class=\"color-complient-container\">\n                    <pep-field-title [label]=\"'COLOR.AA_COMPLIENT' | translate \">\n                    </pep-field-title>\n                    <div class=\"color-complient\" [ngStyle]=\"{ 'background': complientColor }\">\n                        <mat-icon *ngIf=\"isUserChooseAAComplientColor\">\n                            <pep-icon name=\"system_ok\">\n                            </pep-icon>\n                        </mat-icon>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-container pep-dialog-actions>\n            <div class=\"color-actions pep-spacing-element-negative\">\n                <mat-checkbox *ngIf=\"data.showAAComplient\" class=\"pep-spacing-element\" type=\"checkbox\"\n                    id=\"checkAAComplient\" (change)=\"checkAAComplient = !checkAAComplient\" [checked]=\"checkAAComplient\">\n                    <span class=\"body-xs ellipsis\">{{ 'COLOR.AA_COMPLIENT' | translate }}</span>\n                </mat-checkbox>\n                <div>\n                    <button mat-button [mat-dialog-close]=\"null\" class=\"pep-spacing-element pep-button md weak\">\n                        {{'ACTIONS.CANCEL' | translate}}\n                    </button>\n                    <button mat-button class=\"pep-spacing-element pep-button md strong\" (click)=\"onSave($event)\">\n                        {{'ACTIONS.OK' | translate}}\n                    </button>\n                </div>\n            </div>\n        </ng-container>\n    </pep-dialog>\n</div>", styles: [".mat-slider-track-background,.mat-slider-horizontal .mat-slider-track-fill{display:none}.pepperi-color-picker-container ::ng-deep .mat-dialog-content,.pep-color-picker-container ::ng-deep .mat-dialog-content{padding:var(--pep-spacing-sm, .5rem) var(--pep-spacing-sm, .5rem) 0}.pepperi-color-picker-container .color-chooser-content,.pep-color-picker-container .color-chooser-content{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(3,1fr);grid-column-gap:var(--pep-spacing-xl, 1.5rem);grid-row-gap:var(--pep-spacing-sm, .5rem);margin-top:var(--pep-spacing-sm, .5rem)}.pepperi-color-picker-container .color-chooser-content .current-color,.pep-color-picker-container .color-chooser-content .current-color{grid-row:1/span 3;grid-column:6/span 4;border-radius:var(--pep-border-radius-md, .25rem);width:9.25rem;height:9.25rem}.pepperi-color-picker-container .color-chooser-content .slider-box,.pep-color-picker-container .color-chooser-content .slider-box{grid-column:1/span 5}.pepperi-color-picker-container .color-value-content,.pep-color-picker-container .color-value-content{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(1,1fr);grid-column-gap:var(--pep-spacing-xl, 1.5rem);grid-row-gap:var(--pep-spacing-sm, .5rem);margin-top:1.5rem}.pepperi-color-picker-container .color-value-content .color-value,.pep-color-picker-container .color-value-content .color-value{grid-row:1/span 1;grid-column:1/span 9}.pepperi-color-picker-container .color-value-content .color-value.with-complient,.pep-color-picker-container .color-value-content .color-value.with-complient{grid-column:1/span 5}.pepperi-color-picker-container .color-value-content .color-complient-container,.pep-color-picker-container .color-value-content .color-complient-container{grid-column:6/span 4}.pepperi-color-picker-container .color-value-content .color-complient-container .color-complient,.pep-color-picker-container .color-value-content .color-complient-container .color-complient{display:flex;justify-content:center;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);height:var(--pep-form-field-height, 2.5rem);width:9.25rem}.pepperi-color-picker-container ::ng-deep .mat-dialog-actions,.pep-color-picker-container ::ng-deep .mat-dialog-actions{display:block}.pepperi-color-picker-container ::ng-deep .mat-dialog-actions .color-actions,.pep-color-picker-container ::ng-deep .mat-dialog-actions .color-actions{display:flex;justify-content:space-between;align-items:center}\n", ".pepperi-color-picker-container .color-value-content .color-complient-container .color-complient ::ng-deep .mat-icon .svg-icon,.pep-color-picker-container .color-value-content .color-complient-container .color-complient ::ng-deep .mat-icon .svg-icon{fill:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$1.PepDialogComponent, selector: "pep-dialog", inputs: ["title", "showClose", "showHeader", "showFooter"], outputs: ["close"] }, { kind: "component", type: i1$2.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i9.PepSliderComponent, selector: "pep-slider", inputs: ["label", "disabled", "hint", "background", "step", "minValue", "maxValue", "value"], outputs: ["valueChange", "inputChange"] }, { kind: "component", type: i10.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength"] }, { kind: "component", type: i11.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "formattedValue", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey"], outputs: ["valueChange", "formValidationChange"] }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{ template: "<div class=\"pep-color-picker-container\">\n    <pep-dialog [title]=\"'COLOR.DIALOG_TITLE' | translate\" (close)=\"closeDialog($event)\">\n        <ng-container pep-dialog-content>\n            <div class=\"color-chooser-content\">\n                <div class=\"current-color\" [ngStyle]=\"{ 'background': data?.value ? data.value : 'transparent' }\"></div>\n\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_HUE' | translate\" [minValue]=\"currentHueMin\"\n                    [maxValue]=\"currentHueMax\" [value]=\"currentHue\" [background]=\"currentHueBackground\"\n                    (valueChange)=\"onHueChange($event)\">\n                </pep-slider>\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_SATURATION' | translate\"\n                    [minValue]=\"currentSaturationMin\" [maxValue]=\"currentSaturationMax\" [value]=\"currentSaturation\"\n                    [background]=\"currentSaturationBackground\" (valueChange)=\"onSaturationChange($event)\">\n                </pep-slider>\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_LIGHTNESS' | translate\"\n                    [minValue]=\"currentLightnessMin\" [maxValue]=\"currentLightnessMax\"\n                    [value]=\"currentLightnessMax - currentLightness + currentLightnessMin\"\n                    [background]=\"currentLightnessBackground\" (valueChange)=\"onLightnessChange($event)\">\n                </pep-slider>\n            </div>\n            <div class=\"color-value-content\">\n                <div class=\"color-value\" [ngClass]=\"{ 'with-complient': checkAAComplient }\">\n                    <pep-textbox [key]=\"'colorValue'\" [label]=\"'COLOR.ADD_VALUE_HERE' | translate \"\n                        [formattedValue]=\"data?.value\" [value]=\"data?.value\" (valueChange)=\"onColorValueChange($event)\">\n                    </pep-textbox>\n                </div>\n                <div *ngIf=\"checkAAComplient\" class=\"color-complient-container\">\n                    <pep-field-title [label]=\"'COLOR.AA_COMPLIENT' | translate \">\n                    </pep-field-title>\n                    <div class=\"color-complient\" [ngStyle]=\"{ 'background': complientColor }\">\n                        <mat-icon *ngIf=\"isUserChooseAAComplientColor\">\n                            <pep-icon name=\"system_ok\">\n                            </pep-icon>\n                        </mat-icon>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-container pep-dialog-actions>\n            <div class=\"color-actions pep-spacing-element-negative\">\n                <mat-checkbox *ngIf=\"data.showAAComplient\" class=\"pep-spacing-element\" type=\"checkbox\"\n                    id=\"checkAAComplient\" (change)=\"checkAAComplient = !checkAAComplient\" [checked]=\"checkAAComplient\">\n                    <span class=\"body-xs ellipsis\">{{ 'COLOR.AA_COMPLIENT' | translate }}</span>\n                </mat-checkbox>\n                <div>\n                    <button mat-button [mat-dialog-close]=\"null\" class=\"pep-spacing-element pep-button md weak\">\n                        {{'ACTIONS.CANCEL' | translate}}\n                    </button>\n                    <button mat-button class=\"pep-spacing-element pep-button md strong\" (click)=\"onSave($event)\">\n                        {{'ACTIONS.OK' | translate}}\n                    </button>\n                </div>\n            </div>\n        </ng-container>\n    </pep-dialog>\n</div>", styles: [".mat-slider-track-background,.mat-slider-horizontal .mat-slider-track-fill{display:none}.pepperi-color-picker-container ::ng-deep .mat-dialog-content,.pep-color-picker-container ::ng-deep .mat-dialog-content{padding:var(--pep-spacing-sm, .5rem) var(--pep-spacing-sm, .5rem) 0}.pepperi-color-picker-container .color-chooser-content,.pep-color-picker-container .color-chooser-content{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(3,1fr);grid-column-gap:var(--pep-spacing-xl, 1.5rem);grid-row-gap:var(--pep-spacing-sm, .5rem);margin-top:var(--pep-spacing-sm, .5rem)}.pepperi-color-picker-container .color-chooser-content .current-color,.pep-color-picker-container .color-chooser-content .current-color{grid-row:1/span 3;grid-column:6/span 4;border-radius:var(--pep-border-radius-md, .25rem);width:9.25rem;height:9.25rem}.pepperi-color-picker-container .color-chooser-content .slider-box,.pep-color-picker-container .color-chooser-content .slider-box{grid-column:1/span 5}.pepperi-color-picker-container .color-value-content,.pep-color-picker-container .color-value-content{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(1,1fr);grid-column-gap:var(--pep-spacing-xl, 1.5rem);grid-row-gap:var(--pep-spacing-sm, .5rem);margin-top:1.5rem}.pepperi-color-picker-container .color-value-content .color-value,.pep-color-picker-container .color-value-content .color-value{grid-row:1/span 1;grid-column:1/span 9}.pepperi-color-picker-container .color-value-content .color-value.with-complient,.pep-color-picker-container .color-value-content .color-value.with-complient{grid-column:1/span 5}.pepperi-color-picker-container .color-value-content .color-complient-container,.pep-color-picker-container .color-value-content .color-complient-container{grid-column:6/span 4}.pepperi-color-picker-container .color-value-content .color-complient-container .color-complient,.pep-color-picker-container .color-value-content .color-complient-container .color-complient{display:flex;justify-content:center;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);height:var(--pep-form-field-height, 2.5rem);width:9.25rem}.pepperi-color-picker-container ::ng-deep .mat-dialog-actions,.pep-color-picker-container ::ng-deep .mat-dialog-actions{display:block}.pepperi-color-picker-container ::ng-deep .mat-dialog-actions .color-actions,.pep-color-picker-container ::ng-deep .mat-dialog-actions .color-actions{display:flex;justify-content:space-between;align-items:center}\n", ".pepperi-color-picker-container .color-value-content .color-complient-container .color-complient ::ng-deep .mat-icon .svg-icon,.pep-color-picker-container .color-value-content .color-complient-container .color-complient ::ng-deep .mat-icon .svg-icon{fill:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1.PepColorService }, { type: i2.MatDialogRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_DIALOG_DATA]
+                    }] }];
     } });
 
-class PepColorComponent {
-    constructor(dialogService, renderer, element) {
-        this.dialogService = dialogService;
-        this.renderer = renderer;
-        this.element = element;
-        this.key = '';
-        this.value = '';
-        this.label = '';
-        this.disabled = false;
-        this.xAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;
-        this.rowSpan = 1;
-        this.type = 'any';
-        this.showTitle = true;
-        this.renderTitle = true;
-        this.showAAComplient = true;
-        this.checkAAComplient = true;
-        this.layoutType = 'form';
-        this.valueChange = new EventEmitter();
-    }
-    ngOnInit() {
-        this.renderer.addClass(this.element.nativeElement, PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
-        if (!this.renderTitle) {
-            this.renderer.addClass(this.element.nativeElement, PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME);
-        }
-    }
-    ngOnDestroy() {
-        //
-    }
-    changeColor(value) {
-        this.value = value;
-        this.valueChange.emit(value);
-    }
-    chooseColor() {
-        const dialogRef = this.dialogService.openDialog(PepColorPickerComponent, {
-            value: this.value,
-            type: this.type,
-            showAAComplient: this.showAAComplient,
-            checkAAComplient: this.checkAAComplient
-        });
-        dialogRef.afterClosed().subscribe((value) => {
-            if (value !== undefined && value !== null) {
-                this.changeColor(value);
-            }
-        });
-    }
-}
-PepColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepColorComponent, deps: [{ token: i1$1.PepDialogService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-PepColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepColorComponent, selector: "pep-color", inputs: { key: "key", value: "value", label: "label", disabled: "disabled", xAlignment: "xAlignment", rowSpan: "rowSpan", type: "type", showTitle: "showTitle", renderTitle: "renderTitle", showAAComplient: "showAAComplient", checkAAComplient: "checkAAComplient", layoutType: "layoutType" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [disabled]=\"disabled\" [xAlignment]=\"xAlignment\"\n    [showTitle]=\"showTitle\">\n</pep-field-title>\n<div [id]=\"key\" class=\"pep-color-container\" [ngClass]=\"{ 'right-alignment': xAlignment == 'right' }\">\n    <div pepRtlDirection (click)=\"!disabled ? chooseColor() : ''\" class=\"pep-color pep-input\"\n        [ngClass]=\"{disable: disabled, 'one-row': rowSpan === 1}\"\n        style=\"background: {{ value ? value + '!important' : 'transparent' }}; opacity: {{ disabled && value ? 0.12 : 1}};\">\n        <button *ngIf=\"!disabled\" class=\"pep-button icon-button xs weak invert mat-button btn-edit\" tabindex=\"-1\"\n            pepButtonBlur mat-button>\n            <mat-icon>\n                <pep-icon name=\"system_edit\"></pep-icon>\n            </mat-icon>\n        </button>\n    </div>\n</div>", styles: [":host{display:grid}.pepperi-color-container .pepperi-color,.pepperi-color-container .pep-color,.pep-color-container .pepperi-color,.pep-color-container .pep-color{padding:0;display:grid}.pepperi-color-container .pepperi-color .btn-edit,.pepperi-color-container .pep-color .btn-edit,.pep-color-container .pepperi-color .btn-edit,.pep-color-container .pep-color .btn-edit{width:calc(var(--pep-form-field-height, 2.5rem) - var(--pep-spacing-lg, 1rem));min-width:unset;padding:0;margin:0 var(--pep-spacing-md, .75rem);justify-self:end;align-self:center}.pepperi-color-container.right-alignment .pepperi-color .btn-edit,.pepperi-color-container.right-alignment .pep-color .btn-edit,.pep-color-container.right-alignment .pepperi-color .btn-edit,.pep-color-container.right-alignment .pep-color .btn-edit{justify-self:start}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.PepButtonBlurDirective, selector: "[pepButtonBlur]" }, { kind: "directive", type: i1.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i1$2.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i10.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepColorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pep-color', template: "<pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [disabled]=\"disabled\" [xAlignment]=\"xAlignment\"\n    [showTitle]=\"showTitle\">\n</pep-field-title>\n<div [id]=\"key\" class=\"pep-color-container\" [ngClass]=\"{ 'right-alignment': xAlignment == 'right' }\">\n    <div pepRtlDirection (click)=\"!disabled ? chooseColor() : ''\" class=\"pep-color pep-input\"\n        [ngClass]=\"{disable: disabled, 'one-row': rowSpan === 1}\"\n        style=\"background: {{ value ? value + '!important' : 'transparent' }}; opacity: {{ disabled && value ? 0.12 : 1}};\">\n        <button *ngIf=\"!disabled\" class=\"pep-button icon-button xs weak invert mat-button btn-edit\" tabindex=\"-1\"\n            pepButtonBlur mat-button>\n            <mat-icon>\n                <pep-icon name=\"system_edit\"></pep-icon>\n            </mat-icon>\n        </button>\n    </div>\n</div>", styles: [":host{display:grid}.pepperi-color-container .pepperi-color,.pepperi-color-container .pep-color,.pep-color-container .pepperi-color,.pep-color-container .pep-color{padding:0;display:grid}.pepperi-color-container .pepperi-color .btn-edit,.pepperi-color-container .pep-color .btn-edit,.pep-color-container .pepperi-color .btn-edit,.pep-color-container .pep-color .btn-edit{width:calc(var(--pep-form-field-height, 2.5rem) - var(--pep-spacing-lg, 1rem));min-width:unset;padding:0;margin:0 var(--pep-spacing-md, .75rem);justify-self:end;align-self:center}.pepperi-color-container.right-alignment .pepperi-color .btn-edit,.pepperi-color-container.right-alignment .pep-color .btn-edit,.pep-color-container.right-alignment .pepperi-color .btn-edit,.pep-color-container.right-alignment .pep-color .btn-edit{justify-self:start}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.PepDialogService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { key: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], xAlignment: [{
-                type: Input
-            }], rowSpan: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], showTitle: [{
-                type: Input
-            }], renderTitle: [{
-                type: Input
-            }], showAAComplient: [{
-                type: Input
-            }], checkAAComplient: [{
-                type: Input
-            }], layoutType: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
+class PepColorComponent {
+    constructor(dialogService, renderer, element) {
+        this.dialogService = dialogService;
+        this.renderer = renderer;
+        this.element = element;
+        this.key = '';
+        this.value = '';
+        this.label = '';
+        this.disabled = false;
+        this.xAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;
+        this.rowSpan = 1;
+        this.type = 'any';
+        this.showTitle = true;
+        this.renderTitle = true;
+        this.showAAComplient = true;
+        this.checkAAComplient = true;
+        this.layoutType = 'form';
+        this.valueChange = new EventEmitter();
+    }
+    ngOnInit() {
+        this.renderer.addClass(this.element.nativeElement, PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
+        if (!this.renderTitle) {
+            this.renderer.addClass(this.element.nativeElement, PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME);
+        }
+    }
+    ngOnDestroy() {
+        //
+    }
+    changeColor(value) {
+        this.value = value;
+        this.valueChange.emit(value);
+    }
+    chooseColor() {
+        const dialogRef = this.dialogService.openDialog(PepColorPickerComponent, {
+            value: this.value,
+            type: this.type,
+            showAAComplient: this.showAAComplient,
+            checkAAComplient: this.checkAAComplient
+        });
+        dialogRef.afterClosed().subscribe((value) => {
+            if (value !== undefined && value !== null) {
+                this.changeColor(value);
+            }
+        });
+    }
+}
+PepColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepColorComponent, deps: [{ token: i1$1.PepDialogService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+PepColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepColorComponent, selector: "pep-color", inputs: { key: "key", value: "value", label: "label", disabled: "disabled", xAlignment: "xAlignment", rowSpan: "rowSpan", type: "type", showTitle: "showTitle", renderTitle: "renderTitle", showAAComplient: "showAAComplient", checkAAComplient: "checkAAComplient", layoutType: "layoutType" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [disabled]=\"disabled\" [xAlignment]=\"xAlignment\"\n    [showTitle]=\"showTitle\">\n</pep-field-title>\n<div [id]=\"key\" class=\"pep-color-container\" [ngClass]=\"{ 'right-alignment': xAlignment == 'right' }\">\n    <div pepRtlDirection (click)=\"!disabled ? chooseColor() : ''\" class=\"pep-color pep-input\"\n        [ngClass]=\"{disable: disabled, 'one-row': rowSpan === 1}\"\n        style=\"background: {{ value ? value + '!important' : 'transparent' }}; opacity: {{ disabled && value ? 0.12 : 1}};\">\n        <button *ngIf=\"!disabled\" class=\"pep-button icon-button xs weak invert mat-button btn-edit\" tabindex=\"-1\"\n            pepButtonBlur mat-button>\n            <mat-icon>\n                <pep-icon name=\"system_edit\"></pep-icon>\n            </mat-icon>\n        </button>\n    </div>\n</div>", styles: [":host{display:grid}.pepperi-color-container .pepperi-color,.pepperi-color-container .pep-color,.pep-color-container .pepperi-color,.pep-color-container .pep-color{padding:0;display:grid}.pepperi-color-container .pepperi-color .btn-edit,.pepperi-color-container .pep-color .btn-edit,.pep-color-container .pepperi-color .btn-edit,.pep-color-container .pep-color .btn-edit{width:calc(var(--pep-form-field-height, 2.5rem) - var(--pep-spacing-lg, 1rem));min-width:unset;padding:0;margin:0 var(--pep-spacing-md, .75rem);justify-self:end;align-self:center}.pepperi-color-container.right-alignment .pepperi-color .btn-edit,.pepperi-color-container.right-alignment .pep-color .btn-edit,.pep-color-container.right-alignment .pepperi-color .btn-edit,.pep-color-container.right-alignment .pep-color .btn-edit{justify-self:start}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.PepButtonBlurDirective, selector: "[pepButtonBlur]" }, { kind: "directive", type: i1.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i1$2.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i10.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepColorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-color', template: "<pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [disabled]=\"disabled\" [xAlignment]=\"xAlignment\"\n    [showTitle]=\"showTitle\">\n</pep-field-title>\n<div [id]=\"key\" class=\"pep-color-container\" [ngClass]=\"{ 'right-alignment': xAlignment == 'right' }\">\n    <div pepRtlDirection (click)=\"!disabled ? chooseColor() : ''\" class=\"pep-color pep-input\"\n        [ngClass]=\"{disable: disabled, 'one-row': rowSpan === 1}\"\n        style=\"background: {{ value ? value + '!important' : 'transparent' }}; opacity: {{ disabled && value ? 0.12 : 1}};\">\n        <button *ngIf=\"!disabled\" class=\"pep-button icon-button xs weak invert mat-button btn-edit\" tabindex=\"-1\"\n            pepButtonBlur mat-button>\n            <mat-icon>\n                <pep-icon name=\"system_edit\"></pep-icon>\n            </mat-icon>\n        </button>\n    </div>\n</div>", styles: [":host{display:grid}.pepperi-color-container .pepperi-color,.pepperi-color-container .pep-color,.pep-color-container .pepperi-color,.pep-color-container .pep-color{padding:0;display:grid}.pepperi-color-container .pepperi-color .btn-edit,.pepperi-color-container .pep-color .btn-edit,.pep-color-container .pepperi-color .btn-edit,.pep-color-container .pep-color .btn-edit{width:calc(var(--pep-form-field-height, 2.5rem) - var(--pep-spacing-lg, 1rem));min-width:unset;padding:0;margin:0 var(--pep-spacing-md, .75rem);justify-self:end;align-self:center}.pepperi-color-container.right-alignment .pepperi-color .btn-edit,.pepperi-color-container.right-alignment .pep-color .btn-edit,.pep-color-container.right-alignment .pepperi-color .btn-edit,.pep-color-container.right-alignment .pep-color .btn-edit{justify-self:start}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.PepDialogService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { key: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], xAlignment: [{
+                type: Input
+            }], rowSpan: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], showTitle: [{
+                type: Input
+            }], renderTitle: [{
+                type: Input
+            }], showAAComplient: [{
+                type: Input
+            }], checkAAComplient: [{
+                type: Input
+            }], layoutType: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
             }] } });
 
-class PepColorModule {
-    constructor(pepIconRegistry) {
-        this.pepIconRegistry = pepIconRegistry;
-        this.pepIconRegistry.registerIcons([
-            pepIconSystemEdit,
-            pepIconSystemOk,
-            pepIconSystemClose,
-        ]);
-    }
-}
-PepColorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepColorModule, deps: [{ token: i1$2.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
-PepColorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepColorModule, declarations: [PepColorComponent, PepColorPickerComponent], imports: [CommonModule,
-        ReactiveFormsModule,
-        // Material modules
-        MatCommonModule,
-        MatButtonModule,
-        MatFormFieldModule,
-        MatCheckboxModule,
-        MatDialogModule,
-        MatIconModule,
-        MatSliderModule,
-        // ngx-lib modules
-        PepNgxLibModule,
-        PepDialogModule,
-        PepIconModule,
-        PepSliderModule,
-        PepFieldTitleModule,
-        PepTextboxModule], exports: [PepColorComponent] });
-PepColorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepColorModule, imports: [CommonModule,
-        ReactiveFormsModule,
-        // Material modules
-        MatCommonModule,
-        MatButtonModule,
-        MatFormFieldModule,
-        MatCheckboxModule,
-        MatDialogModule,
-        MatIconModule,
-        MatSliderModule,
-        // ngx-lib modules
-        PepNgxLibModule,
-        PepDialogModule,
-        PepIconModule,
-        PepSliderModule,
-        PepFieldTitleModule,
-        PepTextboxModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepColorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        // Material modules
-                        MatCommonModule,
-                        MatButtonModule,
-                        MatFormFieldModule,
-                        MatCheckboxModule,
-                        MatDialogModule,
-                        MatIconModule,
-                        MatSliderModule,
-                        // ngx-lib modules
-                        PepNgxLibModule,
-                        PepDialogModule,
-                        PepIconModule,
-                        PepSliderModule,
-                        PepFieldTitleModule,
-                        PepTextboxModule,
-                    ],
-                    exports: [PepColorComponent],
-                    declarations: [PepColorComponent, PepColorPickerComponent],
-                    entryComponents: [PepColorPickerComponent],
-                }]
+class PepColorModule {
+    constructor(pepIconRegistry) {
+        this.pepIconRegistry = pepIconRegistry;
+        this.pepIconRegistry.registerIcons([
+            pepIconSystemEdit,
+            pepIconSystemOk,
+            pepIconSystemClose,
+        ]);
+    }
+}
+PepColorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepColorModule, deps: [{ token: i1$2.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
+PepColorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepColorModule, declarations: [PepColorComponent, PepColorPickerComponent], imports: [CommonModule,
+        ReactiveFormsModule,
+        // Material modules
+        MatCommonModule,
+        MatButtonModule,
+        MatFormFieldModule,
+        MatCheckboxModule,
+        MatDialogModule,
+        MatIconModule,
+        MatSliderModule,
+        // ngx-lib modules
+        PepNgxLibModule,
+        PepDialogModule,
+        PepIconModule,
+        PepSliderModule,
+        PepFieldTitleModule,
+        PepTextboxModule], exports: [PepColorComponent] });
+PepColorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepColorModule, imports: [CommonModule,
+        ReactiveFormsModule,
+        // Material modules
+        MatCommonModule,
+        MatButtonModule,
+        MatFormFieldModule,
+        MatCheckboxModule,
+        MatDialogModule,
+        MatIconModule,
+        MatSliderModule,
+        // ngx-lib modules
+        PepNgxLibModule,
+        PepDialogModule,
+        PepIconModule,
+        PepSliderModule,
+        PepFieldTitleModule,
+        PepTextboxModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepColorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        // Material modules
+                        MatCommonModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatCheckboxModule,
+                        MatDialogModule,
+                        MatIconModule,
+                        MatSliderModule,
+                        // ngx-lib modules
+                        PepNgxLibModule,
+                        PepDialogModule,
+                        PepIconModule,
+                        PepSliderModule,
+                        PepFieldTitleModule,
+                        PepTextboxModule,
+                    ],
+                    exports: [PepColorComponent],
+                    declarations: [PepColorComponent, PepColorPickerComponent],
+                    entryComponents: [PepColorPickerComponent],
+                }]
         }], ctorParameters: function () { return [{ type: i1$2.PepIconRegistry }]; } });
 
-/*
- * Public API Surface of ngx-lib/color
+/*
+ * Public API Surface of ngx-lib/color
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { PepColorComponent, PepColorModule };