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

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

@@ -15,19 +15,19 @@ import { pepIconSystemEdit, pepIconSystemOk, pepIconSystemClose, PepIconModule,
 import { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';
 import { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';
 
-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%,
@@ -35,315 +35,315 @@ 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.showAAComplient;
-        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.showAAComplient;
+        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.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-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 = () => [
-    { type: PepColorService },
-    { type: 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(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.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-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 = () => [
+    { type: PepColorService },
+    { type: 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.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,
-        });
-        dialogRef.afterClosed().subscribe((value) => {
-            if (value !== undefined && value !== null) {
-                this.changeColor(value);
-            }
-        });
-    }
-}
-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}.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 = () => [
-    { type: PepDialogService },
-    { type: Renderer2 },
-    { type: ElementRef }
-];
-PepColorComponent.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 }],
-    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.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,
+        });
+        dialogRef.afterClosed().subscribe((value) => {
+            if (value !== undefined && value !== null) {
+                this.changeColor(value);
+            }
+        });
+    }
+}
+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}.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 = () => [
+    { type: PepDialogService },
+    { type: Renderer2 },
+    { type: ElementRef }
+];
+PepColorComponent.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 }],
+    layoutType: [{ type: Input }],
+    valueChange: [{ type: Output }]
 };
 
-class PepColorModule {
-    constructor(pepIconRegistry) {
-        this.pepIconRegistry = pepIconRegistry;
-        this.pepIconRegistry.registerIcons([
-            pepIconSystemEdit,
-            pepIconSystemOk,
-            pepIconSystemClose,
-        ]);
-    }
-}
-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],
-            },] }
-];
-PepColorModule.ctorParameters = () => [
-    { type: PepIconRegistry }
+class PepColorModule {
+    constructor(pepIconRegistry) {
+        this.pepIconRegistry = pepIconRegistry;
+        this.pepIconRegistry.registerIcons([
+            pepIconSystemEdit,
+            pepIconSystemOk,
+            pepIconSystemClose,
+        ]);
+    }
+}
+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],
+            },] }
+];
+PepColorModule.ctorParameters = () => [
+    { type: 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, PepColorPickerComponent as ɵa };