@pepperi-addons/ngx-lib 0.3.15-beta.19 → 0.3.15-beta.21

package/bundles/pepperi-addons-ngx-lib-color.umd.js

@@ -4,313 +4,313 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['pepperi-addons'] = global['pepperi-addons'] || {}, global['pepperi-addons']['ngx-lib'] = global['pepperi-addons']['ngx-lib'] || {}, global['pepperi-addons']['ngx-lib'].color = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.material.core, global.ng.material.button, global.ng.material.formField, global.ng.material.checkbox, global.ng.material.dialog, global.ng.material.icon, global.ng.material.slider, global['pepperi-addons']['ngx-lib'], global['pepperi-addons']['ngx-lib'].dialog, global['pepperi-addons']['ngx-lib'].slider, global['pepperi-addons']['ngx-lib'].icon, global['pepperi-addons']['ngx-lib']['field-title'], global['pepperi-addons']['ngx-lib'].textbox));
 }(this, (function (exports, core, common, forms, core$1, button, formField, checkbox, dialog, icon$1, slider, ngxLib, dialog$1, slider$1, icon, fieldTitle, textbox) { 'use strict';
 
-    var PepContrastRatioType;
-    (function (PepContrastRatioType) {
-        PepContrastRatioType[PepContrastRatioType["AA"] = 4.5] = "AA";
-        PepContrastRatioType[PepContrastRatioType["AAA"] = 7] = "AAA";
-    })(PepContrastRatioType || (PepContrastRatioType = {}));
-    var PepColorPickerComponent = /** @class */ (function () {
-        function PepColorPickerComponent(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,\n        hsl(0, 100%, 50%) 0%,\n        hsl(60, 100%, 50%) 17%,\n        hsl(120, 100%, 50%) 33%,\n        hsl(180, 100%, 50%) 50%,\n        hsl(240, 100%, 50%) 67%,\n        hsl(300, 100%, 50%) 83%,\n        hsl(360, 100%, 50%) 100%)";
-            this.currentHue = 100;
-            this.currentHueMin = 0;
-            this.currentHueMax = 360;
-            this.currentHueBackground = this.defaultHueBackground;
-            this.defaultSaturationBackground = "linear-gradient(to right,\n        hsl(var(--pep-color-picker-current-hue), 0.01%, 50%) 0%,\n        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,\n        hsl(var(--pep-color-picker-current-hue), 100%, 100%) 0%,\n        hsl(var(--pep-color-picker-current-hue), 100%, 50%) 50%,\n        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;
-        }
-        PepColorPickerComponent.prototype.ngOnInit = function () {
-            this.initVars();
-            this.checkAAComplient = this.data.showAAComplient;
-            this.convertValueStringToColor(this.data.value);
-        };
-        PepColorPickerComponent.prototype.initVars = function () {
-            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,\n                hsl(70, 100%, 50%) 0%,\n                hsl(150, 100%, 50%) 100%)";
-                this.currentSaturationBackground = "linear-gradient(to right,\n                hsl(var(--pep-color-picker-current-hue), 50%, 50%) 50%,\n                hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%)";
-                this.currentLightnessBackground = "linear-gradient(to right,\n                hsl(var(--pep-color-picker-current-hue), 100%, 65%) 10%,\n                hsl(var(--pep-color-picker-current-hue), 100%, 35%) 35%,\n                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,\n                hsl(340, 100%, 50%) 0%,\n                hsl(20, 100%, 50%) 100%)";
-                this.currentSaturationBackground = "linear-gradient(to right,\n                hsl(var(--pep-color-picker-current-hue), 75%, 50%) 75%,\n                hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%)";
-                this.currentLightnessBackground = "linear-gradient(to right,\n                hsl(var(--pep-color-picker-current-hue), 100%, 75%) 25%,\n                hsl(var(--pep-color-picker-current-hue), 100%, 50%) 50%,\n                hsl(var(--pep-color-picker-current-hue), 100%, 25%) 75%)";
-            }
-        };
-        PepColorPickerComponent.prototype.setCurrentHueInCss = function () {
-            document.documentElement.style.setProperty(PepColorPickerComponent.CURRENT_HUE, this.currentHue.toString());
-        };
-        PepColorPickerComponent.prototype.convertValueStringToColor = function (color) {
-            if (color.indexOf('hsl') === 0) {
-                var hsl = this.colorService.hslString2hsl(color);
-                this.convertColorToValueString(hsl);
-            }
-            else if (color.indexOf('rgb') === 0) {
-                var hsl = this.colorService.rgbString2hsl(color);
-                this.convertColorToValueString(hsl);
-            }
-            else if (color.indexOf('#') === 0) {
-                var hsl = this.colorService.hex2hsl(color);
-                this.convertColorToValueString(hsl);
-            }
-            else {
-                // Handle default.
-                var hsl = this.colorService.hex2hsl(this.defaultColor);
-                this.convertColorToValueString(hsl);
-            }
-            this.setCurrentHueInCss();
-        };
-        PepColorPickerComponent.prototype.convertColorToValueString = function (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).
-            var 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.
-            var adjustableColor = this.colorService.hsl2hex(hsl);
-            var closestHex = this.colorService.findClosestAccessibleColor(adjustableColor, this.data.textColor, this.data.contrastRatio);
-            this.isUserChooseAAComplientColor = adjustableColor === closestHex;
-            this.complientColor = this.colorService.convertHslToStringHsl(this.colorService.hex2hsl(closestHex));
-        };
-        PepColorPickerComponent.prototype.onHueChange = function (value) {
-            this.convertColorToValueString({ h: value });
-            this.setCurrentHueInCss();
-        };
-        PepColorPickerComponent.prototype.onSaturationChange = function (value) {
-            // this.currentSaturation = event.value;
-            this.convertColorToValueString({ s: value });
-        };
-        PepColorPickerComponent.prototype.onLightnessChange = function (value) {
-            // this.currentLightness = event.value;
-            this.convertColorToValueString({
-                l: this.currentLightnessMax -
-                    value +
-                    this.currentLightnessMin,
-            });
-        };
-        PepColorPickerComponent.prototype.onColorValueChange = function (event) {
-            this.convertValueStringToColor(event.value);
-        };
-        PepColorPickerComponent.prototype.onSave = function (event) {
-            var color = this.checkAAComplient
-                ? this.complientColor
-                : this.data.value;
-            // this.notify.emit({ key: this.key, value: color });
-            this.dialogRef.close(color);
-        };
-        PepColorPickerComponent.prototype.closeDialog = function (event) {
-            this.dialogRef.close(event);
-        };
-        return PepColorPickerComponent;
-    }());
-    PepColorPickerComponent.CURRENT_HUE = '--pep-color-picker-current-hue';
-    PepColorPickerComponent.decorators = [
-        { type: core.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-horizontal .mat-slider-track-fill,.mat-slider-track-background{display:none}.pep-color-picker-container ::ng-deep.mat-dialog-content,.pepperi-color-picker-container ::ng-deep.mat-dialog-content{padding:.5rem .5rem 0;padding:var(--pep-spacing-sm,.5rem) var(--pep-spacing-sm,.5rem) 0}.pep-color-picker-container .color-chooser-content,.pepperi-color-picker-container .color-chooser-content{display:-ms-grid;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(3,1fr);grid-column-gap:1.5rem;grid-column-gap:var(--pep-spacing-xl,1.5rem);grid-row-gap:.5rem;grid-row-gap:var(--pep-spacing-sm,.5rem);margin-top:.5rem;margin-top:var(--pep-spacing-sm,.5rem)}.pep-color-picker-container .color-chooser-content .current-color,.pepperi-color-picker-container .color-chooser-content .current-color{grid-row:1/span 3;grid-column:6/span 4;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);width:9.25rem;height:9.25rem}.pep-color-picker-container .color-chooser-content .slider-box,.pepperi-color-picker-container .color-chooser-content .slider-box{grid-column:1/span 5}.pep-color-picker-container .color-value-content,.pepperi-color-picker-container .color-value-content{display:-ms-grid;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(1,1fr);grid-column-gap:1.5rem;grid-column-gap:var(--pep-spacing-xl,1.5rem);grid-row-gap:.5rem;grid-row-gap:var(--pep-spacing-sm,.5rem);margin-top:1.5rem}.pep-color-picker-container .color-value-content .color-value,.pepperi-color-picker-container .color-value-content .color-value{grid-row:1/span 1;grid-column:1/span 9}.pep-color-picker-container .color-value-content .color-value.with-complient,.pepperi-color-picker-container .color-value-content .color-value.with-complient{grid-column:1/span 5}.pep-color-picker-container .color-value-content .color-complient-container,.pepperi-color-picker-container .color-value-content .color-complient-container{grid-column:6/span 4}.pep-color-picker-container .color-value-content .color-complient-container .color-complient,.pepperi-color-picker-container .color-value-content .color-complient-container .color-complient{display:flex;justify-content:center;align-items:center;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);height:2.5rem;height:var(--pep-form-field-height,2.5rem);width:9.25rem}.pep-color-picker-container ::ng-deep.mat-dialog-actions,.pepperi-color-picker-container ::ng-deep.mat-dialog-actions{display:block}.pep-color-picker-container ::ng-deep.mat-dialog-actions .color-actions,.pepperi-color-picker-container ::ng-deep.mat-dialog-actions .color-actions{display:flex;justify-content:space-between;align-items:center}", ".pep-color-picker-container .color-value-content .color-complient-container .color-complient ::ng-deep.mat-icon .svg-icon,.pepperi-color-picker-container .color-value-content .color-complient-container .color-complient ::ng-deep.mat-icon .svg-icon{fill:#fff;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%))}"]
-                },] }
-    ];
-    PepColorPickerComponent.ctorParameters = function () { return [
-        { type: ngxLib.PepColorService },
-        { type: dialog.MatDialogRef },
-        { type: undefined, decorators: [{ type: core.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
+    var PepContrastRatioType;
+    (function (PepContrastRatioType) {
+        PepContrastRatioType[PepContrastRatioType["AA"] = 4.5] = "AA";
+        PepContrastRatioType[PepContrastRatioType["AAA"] = 7] = "AAA";
+    })(PepContrastRatioType || (PepContrastRatioType = {}));
+    var PepColorPickerComponent = /** @class */ (function () {
+        function PepColorPickerComponent(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,\n        hsl(0, 100%, 50%) 0%,\n        hsl(60, 100%, 50%) 17%,\n        hsl(120, 100%, 50%) 33%,\n        hsl(180, 100%, 50%) 50%,\n        hsl(240, 100%, 50%) 67%,\n        hsl(300, 100%, 50%) 83%,\n        hsl(360, 100%, 50%) 100%)";
+            this.currentHue = 100;
+            this.currentHueMin = 0;
+            this.currentHueMax = 360;
+            this.currentHueBackground = this.defaultHueBackground;
+            this.defaultSaturationBackground = "linear-gradient(to right,\n        hsl(var(--pep-color-picker-current-hue), 0.01%, 50%) 0%,\n        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,\n        hsl(var(--pep-color-picker-current-hue), 100%, 100%) 0%,\n        hsl(var(--pep-color-picker-current-hue), 100%, 50%) 50%,\n        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;
+        }
+        PepColorPickerComponent.prototype.ngOnInit = function () {
+            this.initVars();
+            this.checkAAComplient = this.data.showAAComplient;
+            this.convertValueStringToColor(this.data.value);
+        };
+        PepColorPickerComponent.prototype.initVars = function () {
+            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,\n                hsl(70, 100%, 50%) 0%,\n                hsl(150, 100%, 50%) 100%)";
+                this.currentSaturationBackground = "linear-gradient(to right,\n                hsl(var(--pep-color-picker-current-hue), 50%, 50%) 50%,\n                hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%)";
+                this.currentLightnessBackground = "linear-gradient(to right,\n                hsl(var(--pep-color-picker-current-hue), 100%, 65%) 10%,\n                hsl(var(--pep-color-picker-current-hue), 100%, 35%) 35%,\n                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,\n                hsl(340, 100%, 50%) 0%,\n                hsl(20, 100%, 50%) 100%)";
+                this.currentSaturationBackground = "linear-gradient(to right,\n                hsl(var(--pep-color-picker-current-hue), 75%, 50%) 75%,\n                hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%)";
+                this.currentLightnessBackground = "linear-gradient(to right,\n                hsl(var(--pep-color-picker-current-hue), 100%, 75%) 25%,\n                hsl(var(--pep-color-picker-current-hue), 100%, 50%) 50%,\n                hsl(var(--pep-color-picker-current-hue), 100%, 25%) 75%)";
+            }
+        };
+        PepColorPickerComponent.prototype.setCurrentHueInCss = function () {
+            document.documentElement.style.setProperty(PepColorPickerComponent.CURRENT_HUE, this.currentHue.toString());
+        };
+        PepColorPickerComponent.prototype.convertValueStringToColor = function (color) {
+            if (color.indexOf('hsl') === 0) {
+                var hsl = this.colorService.hslString2hsl(color);
+                this.convertColorToValueString(hsl);
+            }
+            else if (color.indexOf('rgb') === 0) {
+                var hsl = this.colorService.rgbString2hsl(color);
+                this.convertColorToValueString(hsl);
+            }
+            else if (color.indexOf('#') === 0) {
+                var hsl = this.colorService.hex2hsl(color);
+                this.convertColorToValueString(hsl);
+            }
+            else {
+                // Handle default.
+                var hsl = this.colorService.hex2hsl(this.defaultColor);
+                this.convertColorToValueString(hsl);
+            }
+            this.setCurrentHueInCss();
+        };
+        PepColorPickerComponent.prototype.convertColorToValueString = function (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).
+            var 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.
+            var adjustableColor = this.colorService.hsl2hex(hsl);
+            var closestHex = this.colorService.findClosestAccessibleColor(adjustableColor, this.data.textColor, this.data.contrastRatio);
+            this.isUserChooseAAComplientColor = adjustableColor === closestHex;
+            this.complientColor = this.colorService.convertHslToStringHsl(this.colorService.hex2hsl(closestHex));
+        };
+        PepColorPickerComponent.prototype.onHueChange = function (value) {
+            this.convertColorToValueString({ h: value });
+            this.setCurrentHueInCss();
+        };
+        PepColorPickerComponent.prototype.onSaturationChange = function (value) {
+            // this.currentSaturation = event.value;
+            this.convertColorToValueString({ s: value });
+        };
+        PepColorPickerComponent.prototype.onLightnessChange = function (value) {
+            // this.currentLightness = event.value;
+            this.convertColorToValueString({
+                l: this.currentLightnessMax -
+                    value +
+                    this.currentLightnessMin,
+            });
+        };
+        PepColorPickerComponent.prototype.onColorValueChange = function (event) {
+            this.convertValueStringToColor(event.value);
+        };
+        PepColorPickerComponent.prototype.onSave = function (event) {
+            var color = this.checkAAComplient
+                ? this.complientColor
+                : this.data.value;
+            // this.notify.emit({ key: this.key, value: color });
+            this.dialogRef.close(color);
+        };
+        PepColorPickerComponent.prototype.closeDialog = function (event) {
+            this.dialogRef.close(event);
+        };
+        return PepColorPickerComponent;
+    }());
+    PepColorPickerComponent.CURRENT_HUE = '--pep-color-picker-current-hue';
+    PepColorPickerComponent.decorators = [
+        { type: core.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-horizontal .mat-slider-track-fill,.mat-slider-track-background{display:none}.pep-color-picker-container ::ng-deep.mat-dialog-content,.pepperi-color-picker-container ::ng-deep.mat-dialog-content{padding:.5rem .5rem 0;padding:var(--pep-spacing-sm,.5rem) var(--pep-spacing-sm,.5rem) 0}.pep-color-picker-container .color-chooser-content,.pepperi-color-picker-container .color-chooser-content{display:-ms-grid;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(3,1fr);grid-column-gap:1.5rem;grid-column-gap:var(--pep-spacing-xl,1.5rem);grid-row-gap:.5rem;grid-row-gap:var(--pep-spacing-sm,.5rem);margin-top:.5rem;margin-top:var(--pep-spacing-sm,.5rem)}.pep-color-picker-container .color-chooser-content .current-color,.pepperi-color-picker-container .color-chooser-content .current-color{grid-row:1/span 3;grid-column:6/span 4;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);width:9.25rem;height:9.25rem}.pep-color-picker-container .color-chooser-content .slider-box,.pepperi-color-picker-container .color-chooser-content .slider-box{grid-column:1/span 5}.pep-color-picker-container .color-value-content,.pepperi-color-picker-container .color-value-content{display:-ms-grid;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(1,1fr);grid-column-gap:1.5rem;grid-column-gap:var(--pep-spacing-xl,1.5rem);grid-row-gap:.5rem;grid-row-gap:var(--pep-spacing-sm,.5rem);margin-top:1.5rem}.pep-color-picker-container .color-value-content .color-value,.pepperi-color-picker-container .color-value-content .color-value{grid-row:1/span 1;grid-column:1/span 9}.pep-color-picker-container .color-value-content .color-value.with-complient,.pepperi-color-picker-container .color-value-content .color-value.with-complient{grid-column:1/span 5}.pep-color-picker-container .color-value-content .color-complient-container,.pepperi-color-picker-container .color-value-content .color-complient-container{grid-column:6/span 4}.pep-color-picker-container .color-value-content .color-complient-container .color-complient,.pepperi-color-picker-container .color-value-content .color-complient-container .color-complient{display:flex;justify-content:center;align-items:center;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);height:2.5rem;height:var(--pep-form-field-height,2.5rem);width:9.25rem}.pep-color-picker-container ::ng-deep.mat-dialog-actions,.pepperi-color-picker-container ::ng-deep.mat-dialog-actions{display:block}.pep-color-picker-container ::ng-deep.mat-dialog-actions .color-actions,.pepperi-color-picker-container ::ng-deep.mat-dialog-actions .color-actions{display:flex;justify-content:space-between;align-items:center}", ".pep-color-picker-container .color-value-content .color-complient-container .color-complient ::ng-deep.mat-icon .svg-icon,.pepperi-color-picker-container .color-value-content .color-complient-container .color-complient ::ng-deep.mat-icon .svg-icon{fill:#fff;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%))}"]
+                },] }
+    ];
+    PepColorPickerComponent.ctorParameters = function () { return [
+        { type: ngxLib.PepColorService },
+        { type: dialog.MatDialogRef },
+        { type: undefined, decorators: [{ type: core.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
     ]; };
 
-    var PepColorComponent = /** @class */ (function () {
-        function PepColorComponent(dialogService, renderer, element) {
-            this.dialogService = dialogService;
-            this.renderer = renderer;
-            this.element = element;
-            this.key = '';
-            this.value = '';
-            this.label = '';
-            this.disabled = false;
-            this.xAlignment = ngxLib.DEFAULT_HORIZONTAL_ALIGNMENT;
-            this.rowSpan = 1;
-            this.type = 'any';
-            this.showTitle = true;
-            this.renderTitle = true;
-            this.showAAComplient = true;
-            this.layoutType = 'form';
-            this.valueChange = new core.EventEmitter();
-        }
-        PepColorComponent.prototype.ngOnInit = function () {
-            this.renderer.addClass(this.element.nativeElement, ngxLib.PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
-            if (!this.renderTitle) {
-                this.renderer.addClass(this.element.nativeElement, ngxLib.PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME);
-            }
-        };
-        PepColorComponent.prototype.ngOnDestroy = function () {
-            //
-        };
-        PepColorComponent.prototype.changeColor = function (value) {
-            this.value = value;
-            this.valueChange.emit(value);
-        };
-        PepColorComponent.prototype.chooseColor = function () {
-            var _this = this;
-            var dialogRef = this.dialogService.openDialog(PepColorPickerComponent, {
-                value: this.value,
-                type: this.type,
-                showAAComplient: this.showAAComplient,
-            });
-            dialogRef.afterClosed().subscribe(function (value) {
-                if (value !== undefined && value !== null) {
-                    _this.changeColor(value);
-                }
-            });
-        };
-        return PepColorComponent;
-    }());
-    PepColorComponent.decorators = [
-        { type: core.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}.pep-color-container .pep-color,.pep-color-container .pepperi-color,.pepperi-color-container .pep-color,.pepperi-color-container .pepperi-color{padding:0;display:grid}.pep-color-container .pep-color .btn-edit,.pep-color-container .pepperi-color .btn-edit,.pepperi-color-container .pep-color .btn-edit,.pepperi-color-container .pepperi-color .btn-edit{width:calc(2.5rem - 1rem);width:calc(var(--pep-form-field-height, 2.5rem) - var(--pep-spacing-lg, 1rem));min-width:unset;padding:0;margin:0 .75rem;margin:0 var(--pep-spacing-md,.75rem);justify-self:end;align-self:center}.pep-color-container.right-alignment .pep-color .btn-edit,.pep-color-container.right-alignment .pepperi-color .btn-edit,.pepperi-color-container.right-alignment .pep-color .btn-edit,.pepperi-color-container.right-alignment .pepperi-color .btn-edit{justify-self:start}"]
-                },] }
-    ];
-    PepColorComponent.ctorParameters = function () { return [
-        { type: dialog$1.PepDialogService },
-        { type: core.Renderer2 },
-        { type: core.ElementRef }
-    ]; };
-    PepColorComponent.propDecorators = {
-        key: [{ type: core.Input }],
-        value: [{ type: core.Input }],
-        label: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        xAlignment: [{ type: core.Input }],
-        rowSpan: [{ type: core.Input }],
-        type: [{ type: core.Input }],
-        showTitle: [{ type: core.Input }],
-        renderTitle: [{ type: core.Input }],
-        showAAComplient: [{ type: core.Input }],
-        layoutType: [{ type: core.Input }],
-        valueChange: [{ type: core.Output }]
+    var PepColorComponent = /** @class */ (function () {
+        function PepColorComponent(dialogService, renderer, element) {
+            this.dialogService = dialogService;
+            this.renderer = renderer;
+            this.element = element;
+            this.key = '';
+            this.value = '';
+            this.label = '';
+            this.disabled = false;
+            this.xAlignment = ngxLib.DEFAULT_HORIZONTAL_ALIGNMENT;
+            this.rowSpan = 1;
+            this.type = 'any';
+            this.showTitle = true;
+            this.renderTitle = true;
+            this.showAAComplient = true;
+            this.layoutType = 'form';
+            this.valueChange = new core.EventEmitter();
+        }
+        PepColorComponent.prototype.ngOnInit = function () {
+            this.renderer.addClass(this.element.nativeElement, ngxLib.PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
+            if (!this.renderTitle) {
+                this.renderer.addClass(this.element.nativeElement, ngxLib.PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME);
+            }
+        };
+        PepColorComponent.prototype.ngOnDestroy = function () {
+            //
+        };
+        PepColorComponent.prototype.changeColor = function (value) {
+            this.value = value;
+            this.valueChange.emit(value);
+        };
+        PepColorComponent.prototype.chooseColor = function () {
+            var _this = this;
+            var dialogRef = this.dialogService.openDialog(PepColorPickerComponent, {
+                value: this.value,
+                type: this.type,
+                showAAComplient: this.showAAComplient,
+            });
+            dialogRef.afterClosed().subscribe(function (value) {
+                if (value !== undefined && value !== null) {
+                    _this.changeColor(value);
+                }
+            });
+        };
+        return PepColorComponent;
+    }());
+    PepColorComponent.decorators = [
+        { type: core.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}.pep-color-container .pep-color,.pep-color-container .pepperi-color,.pepperi-color-container .pep-color,.pepperi-color-container .pepperi-color{padding:0;display:grid}.pep-color-container .pep-color .btn-edit,.pep-color-container .pepperi-color .btn-edit,.pepperi-color-container .pep-color .btn-edit,.pepperi-color-container .pepperi-color .btn-edit{width:calc(2.5rem - 1rem);width:calc(var(--pep-form-field-height, 2.5rem) - var(--pep-spacing-lg, 1rem));min-width:unset;padding:0;margin:0 .75rem;margin:0 var(--pep-spacing-md,.75rem);justify-self:end;align-self:center}.pep-color-container.right-alignment .pep-color .btn-edit,.pep-color-container.right-alignment .pepperi-color .btn-edit,.pepperi-color-container.right-alignment .pep-color .btn-edit,.pepperi-color-container.right-alignment .pepperi-color .btn-edit{justify-self:start}"]
+                },] }
+    ];
+    PepColorComponent.ctorParameters = function () { return [
+        { type: dialog$1.PepDialogService },
+        { type: core.Renderer2 },
+        { type: core.ElementRef }
+    ]; };
+    PepColorComponent.propDecorators = {
+        key: [{ type: core.Input }],
+        value: [{ type: core.Input }],
+        label: [{ type: core.Input }],
+        disabled: [{ type: core.Input }],
+        xAlignment: [{ type: core.Input }],
+        rowSpan: [{ type: core.Input }],
+        type: [{ type: core.Input }],
+        showTitle: [{ type: core.Input }],
+        renderTitle: [{ type: core.Input }],
+        showAAComplient: [{ type: core.Input }],
+        layoutType: [{ type: core.Input }],
+        valueChange: [{ type: core.Output }]
     };
 
-    var PepColorModule = /** @class */ (function () {
-        function PepColorModule(pepIconRegistry) {
-            this.pepIconRegistry = pepIconRegistry;
-            this.pepIconRegistry.registerIcons([
-                icon.pepIconSystemEdit,
-                icon.pepIconSystemOk,
-                icon.pepIconSystemClose,
-            ]);
-        }
-        return PepColorModule;
-    }());
-    PepColorModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        forms.ReactiveFormsModule,
-                        // Material modules
-                        core$1.MatCommonModule,
-                        button.MatButtonModule,
-                        formField.MatFormFieldModule,
-                        checkbox.MatCheckboxModule,
-                        dialog.MatDialogModule,
-                        icon$1.MatIconModule,
-                        slider.MatSliderModule,
-                        // ngx-lib modules
-                        ngxLib.PepNgxLibModule,
-                        dialog$1.PepDialogModule,
-                        icon.PepIconModule,
-                        slider$1.PepSliderModule,
-                        fieldTitle.PepFieldTitleModule,
-                        textbox.PepTextboxModule,
-                    ],
-                    exports: [PepColorComponent],
-                    declarations: [PepColorComponent, PepColorPickerComponent],
-                    entryComponents: [PepColorPickerComponent],
-                },] }
-    ];
-    PepColorModule.ctorParameters = function () { return [
-        { type: icon.PepIconRegistry }
+    var PepColorModule = /** @class */ (function () {
+        function PepColorModule(pepIconRegistry) {
+            this.pepIconRegistry = pepIconRegistry;
+            this.pepIconRegistry.registerIcons([
+                icon.pepIconSystemEdit,
+                icon.pepIconSystemOk,
+                icon.pepIconSystemClose,
+            ]);
+        }
+        return PepColorModule;
+    }());
+    PepColorModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        forms.ReactiveFormsModule,
+                        // Material modules
+                        core$1.MatCommonModule,
+                        button.MatButtonModule,
+                        formField.MatFormFieldModule,
+                        checkbox.MatCheckboxModule,
+                        dialog.MatDialogModule,
+                        icon$1.MatIconModule,
+                        slider.MatSliderModule,
+                        // ngx-lib modules
+                        ngxLib.PepNgxLibModule,
+                        dialog$1.PepDialogModule,
+                        icon.PepIconModule,
+                        slider$1.PepSliderModule,
+                        fieldTitle.PepFieldTitleModule,
+                        textbox.PepTextboxModule,
+                    ],
+                    exports: [PepColorComponent],
+                    declarations: [PepColorComponent, PepColorPickerComponent],
+                    entryComponents: [PepColorPickerComponent],
+                },] }
+    ];
+    PepColorModule.ctorParameters = function () { return [
+        { type: icon.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.
      */
 
     exports.PepColorComponent = PepColorComponent;