@pepperi-addons/ngx-lib 0.4.2-beta.137 → 0.4.2-beta.139

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

@@ -0,0 +1,401 @@
+import * as i0 from '@angular/core';
+import { Component, Inject, EventEmitter, Input, Output, NgModule } from '@angular/core';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatCommonModule } from '@angular/material/core';
+import * as i4 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i5 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i2 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i6 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSliderModule } from '@angular/material/slider';
+import * as i1 from '@pepperi-addons/ngx-lib';
+import { DEFAULT_HORIZONTAL_ALIGNMENT, PepCustomizationService, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
+import * as i1$1 from '@pepperi-addons/ngx-lib/dialog';
+import { PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';
+import * as i9 from '@pepperi-addons/ngx-lib/slider';
+import { PepSliderModule } from '@pepperi-addons/ngx-lib/slider';
+import * as i1$2 from '@pepperi-addons/ngx-lib/icon';
+import { pepIconSystemEdit, pepIconSystemOk, pepIconSystemClose, PepIconModule } from '@pepperi-addons/ngx-lib/icon';
+import * as i10 from '@pepperi-addons/ngx-lib/field-title';
+import { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';
+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) {
+        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%,
+        hsl(120, 100%, 50%) 33%,
+        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;
+        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;
+        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
+            : data.showAAComplient ?? 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%)`;
+            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%)`;
+            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;
+            this.currentHueBackground = `linear-gradient(to right,
+                hsl(340, 100%, 50%) 0%,
+                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%)`;
+            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(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                        [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", "fontBodyType"] }, { kind: "component", type: i11.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "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", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup"] }, { 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                        [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", "fontBodyType"] }] });
+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],
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.PepIconRegistry }]; } });
+
+/*
+ * Public API Surface of ngx-lib/color
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PepColorComponent, PepColorModule };
+//# sourceMappingURL=pepperi-addons-ngx-lib-color.mjs.map

package/fesm2020/pepperi-addons-ngx-lib-color.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pepperi-addons-ngx-lib-color.mjs","sources":["../../../projects/ngx-lib/color/color-picker.component.ts","../../../projects/ngx-lib/color/color-picker.component.html","../../../projects/ngx-lib/color/color.component.ts","../../../projects/ngx-lib/color/color.component.html","../../../projects/ngx-lib/color/color.module.ts","../../../projects/ngx-lib/color/public-api.ts","../../../projects/ngx-lib/color/pepperi-addons-ngx-lib-color.ts"],"sourcesContent":["import { Component, OnInit, Inject } from '@angular/core';\nimport { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';\n// import {\n//     hex2hsl,\n//     hslString2hsl,\n//     rgbString2hsl,\n//     IPepHslColor,\n//     findClosestAccessibleColor,\n//     hsl2hex,\n//     convertHslToStringHsl,\n// } from './color-utils';\nimport { PepColorService, IPepHslColor } from '@pepperi-addons/ngx-lib';\n\nimport { PepColorType } from './color.model';\n\nenum PepContrastRatioType {\n    AA = 4.5,\n    AAA = 7,\n}\n\ninterface IPepColorPickerDialogData {\n    value: string;\n    type: PepColorType;\n    // TODO fix typo Complient -> Compliant\n    showAAComplient: boolean;\n    checkAAComplient: boolean;\n    textColor: string;\n    contrastRatio: PepContrastRatioType;\n}\n\n@Component({\n    templateUrl: './color-picker.component.html',\n    styleUrls: ['./color-picker.component.scss', './color-picker.component.theme.scss'],\n})\nexport class PepColorPickerComponent implements OnInit {\n    static CURRENT_HUE = '--pep-color-picker-current-hue';\n    private readonly defaultColor = '#ccc';\n\n    checkAAComplient = true;\n\n    constructor(\n        private colorService: PepColorService,\n        private dialogRef: MatDialogRef<PepColorPickerComponent>,\n        @Inject(MAT_DIALOG_DATA) public data: IPepColorPickerDialogData\n    ) {\n        this.data.type = data ? data.type : 'any';\n        this.data.showAAComplient = !data\n            ? false\n            : data.showAAComplient ?? true;\n        this.data.textColor = data && data.textColor ? data.textColor : '#fff';\n        this.data.contrastRatio =\n            data && data.contrastRatio\n                ? data.contrastRatio\n                : PepContrastRatioType.AA;\n    }\n\n    private 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%)`;\n\n    currentHue = 100;\n    currentHueMin = 0;\n    currentHueMax = 360;\n    currentHueBackground = this.defaultHueBackground;\n\n    private 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%)`;\n\n    currentSaturation = 50;\n    currentSaturationMin = 0;\n    currentSaturationMax = 100;\n    currentSaturationBackground = this.defaultSaturationBackground;\n\n    private 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%)`;\n\n    currentLightness = 50;\n    currentLightnessMin = 0;\n    currentLightnessMax = 100;\n    currentLightnessBackground = this.defaultLightnessBackground;\n\n    complientColor: string;\n    isUserChooseAAComplientColor: boolean;\n\n    ngOnInit(): void {\n        this.initVars();\n        this.checkAAComplient = this.data.checkAAComplient;\n        this.convertValueStringToColor(this.data.value);\n    }\n\n    initVars(): void {\n        if (this.data.type === 'main') {\n            this.currentLightnessMax = 10;\n            this.currentLightness = 5;\n            this.currentHueBackground = this.defaultHueBackground;\n            this.currentSaturationBackground = this.defaultSaturationBackground;\n            this.currentLightnessBackground = this.defaultLightnessBackground;\n        } else if (this.data.type === 'success') {\n            this.currentHueMin = 70;\n            this.currentHueMax = 150;\n            this.currentHue = 100;\n\n            this.currentSaturationMin = 50;\n            this.currentSaturationMax = 100;\n            this.currentSaturation = 50;\n\n            this.currentLightnessMin = 10;\n            this.currentLightnessMax = 65;\n            this.currentLightness = 50;\n\n            this.currentHueBackground = `linear-gradient(to right,\n                hsl(70, 100%, 50%) 0%,\n                hsl(150, 100%, 50%) 100%)`;\n            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%)`;\n            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%)`;\n\n        } else if (this.data.type === 'caution') {\n            this.currentHueMin = -20;\n            this.currentHueMax = 20;\n            this.currentHue = 10;\n\n            this.currentSaturationMin = 75;\n            this.currentSaturationMax = 100;\n            this.currentSaturation = 75;\n\n            this.currentLightnessMin = 25;\n            this.currentLightnessMax = 75;\n            this.currentLightness = 50;\n\n            this.currentHueBackground = `linear-gradient(to right,\n                hsl(340, 100%, 50%) 0%,\n                hsl(20, 100%, 50%) 100%)`;\n            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%)`;\n            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%)`;\n        }\n    }\n\n    setCurrentHueInCss(): void {\n        document.documentElement.style.setProperty(\n            PepColorPickerComponent.CURRENT_HUE,\n            this.currentHue.toString()\n        );\n    }\n\n    convertValueStringToColor(color): void {\n        if (color.indexOf('hsl') === 0) {\n            const hsl = this.colorService.hslString2hsl(color);\n            this.convertColorToValueString(hsl);\n        } else if (color.indexOf('rgb') === 0) {\n            const hsl = this.colorService.rgbString2hsl(color);\n            this.convertColorToValueString(hsl);\n        } else if (color.indexOf('#') === 0) {\n            const hsl = this.colorService.hex2hsl(color);\n            this.convertColorToValueString(hsl);\n        } else {\n            // Handle default.\n            const hsl = this.colorService.hex2hsl(this.defaultColor);\n            this.convertColorToValueString(hsl);\n        }\n\n        this.setCurrentHueInCss();\n    }\n\n    convertColorToValueString(hslColor: IPepHslColor): void {\n        // Regular hue\n        if (\n            hslColor.h >= this.currentHueMin &&\n            hslColor.h <= this.currentHueMax\n        ) {\n            this.currentHue = hslColor.h;\n        } else if (\n            this.currentHueMin < 0 &&\n            hslColor.h >= 0 &&\n            hslColor.h <= 360\n        ) {\n            // For min with - (change to the other side of the circle)\n            hslColor.h = hslColor.h - 360;\n\n            if (\n                hslColor.h >= this.currentHueMin &&\n                hslColor.h <= this.currentHueMax\n            ) {\n                this.currentHue = hslColor.h;\n            }\n        }\n\n        this.currentSaturation =\n            hslColor.s >= this.currentSaturationMin &&\n                hslColor.s <= this.currentSaturationMax\n                ? hslColor.s\n                : this.currentSaturation;\n\n        this.currentLightness =\n            hslColor.l >= this.currentLightnessMin &&\n                hslColor.l <= this.currentLightnessMax\n                ? hslColor.l\n                : this.currentLightness;\n\n        // Write the value (if hue is changed to the other side of the circle return it back).\n        const hsl = {\n            h: this.currentHue,\n            s: this.currentSaturation,\n            l: this.currentLightness,\n        };\n        this.data.value = this.colorService.convertHslToStringHsl(hsl);\n\n        // Check the contrast ratio - set the closest accessible color to complientColor\n        // and update isUserChooseAAComplientColor.\n        const adjustableColor = this.colorService.hsl2hex(hsl);\n        const closestHex = this.colorService.findClosestAccessibleColor(\n            adjustableColor,\n            this.data.textColor,\n            this.data.contrastRatio\n        );\n\n        this.isUserChooseAAComplientColor = adjustableColor === closestHex;\n        this.complientColor = this.colorService.convertHslToStringHsl(\n            this.colorService.hex2hsl(closestHex)\n        );\n    }\n\n    onHueChange(value): void {\n        this.convertColorToValueString({ h: value });\n        this.setCurrentHueInCss();\n    }\n\n    onSaturationChange(value): void {\n        // this.currentSaturation = event.value;\n        this.convertColorToValueString({ s: value });\n    }\n\n    onLightnessChange(value): void {\n        // this.currentLightness = event.value;\n        this.convertColorToValueString({\n            l:\n                this.currentLightnessMax -\n                value +\n                this.currentLightnessMin,\n        });\n    }\n\n    onColorValueChange(color): void {\n        this.convertValueStringToColor(color);\n    }\n\n    onSave(event): void {\n        const color = this.checkAAComplient\n            ? this.complientColor\n            : this.data.value;\n\n        // this.notify.emit({ key: this.key, value: color });\n        this.dialogRef.close(color);\n    }\n\n    closeDialog(event) {\n        this.dialogRef.close(event);\n    }\n}\n","<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                        [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>","import {\n    Component,\n    OnInit,\n    Input,\n    Output,\n    Renderer2,\n    ElementRef,\n    EventEmitter,\n    OnChanges,\n    OnDestroy,\n} from '@angular/core';\nimport {\n    PepCustomizationService,\n    PepLayoutType,\n    PepHorizontalAlignment,\n    DEFAULT_HORIZONTAL_ALIGNMENT,\n} from '@pepperi-addons/ngx-lib';\nimport { PepDialogService } from '@pepperi-addons/ngx-lib/dialog';\nimport { PepColorPickerComponent } from './color-picker.component';\nimport { PepColorType } from './color.model';\n\n@Component({\n    selector: 'pep-color',\n    templateUrl: './color.component.html',\n    styleUrls: ['./color.component.scss'],\n})\nexport class PepColorComponent implements OnInit, OnDestroy {\n    @Input() key = '';\n    @Input() value = '';\n    @Input() label = '';\n    @Input() disabled = false;\n    @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n    @Input() rowSpan = 1;\n    @Input() type: PepColorType = 'any';\n\n    @Input() showTitle = true;\n    @Input() renderTitle = true;\n\n    @Input() showAAComplient = true;\n    @Input() checkAAComplient = true;\n    @Input() layoutType: PepLayoutType = 'form';\n\n    @Output()\n    valueChange: EventEmitter<string> = new EventEmitter<string>();\n\n    constructor(\n        private dialogService: PepDialogService,\n        private renderer: Renderer2,\n        private element: ElementRef\n    ) { }\n\n    ngOnInit(): void {\n        this.renderer.addClass(\n            this.element.nativeElement,\n            PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME\n        );\n\n        if (!this.renderTitle) {\n            this.renderer.addClass(\n                this.element.nativeElement,\n                PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME\n            );\n        }\n    }\n\n    ngOnDestroy(): void {\n        //\n    }\n\n    changeColor(value: any): void {\n        this.value = value;\n        this.valueChange.emit(value);\n    }\n\n    chooseColor(): void {\n        const dialogRef = this.dialogService.openDialog(\n            PepColorPickerComponent,\n            {\n                value: this.value,\n                type: this.type,\n                showAAComplient: this.showAAComplient,\n                checkAAComplient: this.checkAAComplient\n            }\n        );\n\n        dialogRef.afterClosed().subscribe((value) => {\n            if (value !== undefined && value !== null) {\n                this.changeColor(value);\n            }\n        });\n    }\n}\n","<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>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { MatDialogModule } from '@angular/material/dialog';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatSliderModule } from '@angular/material/slider';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';\nimport { PepSliderModule } from '@pepperi-addons/ngx-lib/slider';\n\nimport {\n    PepIconModule,\n    PepIconRegistry,\n    pepIconSystemEdit,\n    pepIconSystemOk,\n    pepIconSystemClose,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';\n\nimport { PepColorComponent } from './color.component';\nimport { PepColorPickerComponent } from './color-picker.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        ReactiveFormsModule,\n        // Material modules\n        MatCommonModule,\n        MatButtonModule,\n        MatFormFieldModule,\n        MatCheckboxModule,\n        MatDialogModule,\n        MatIconModule,\n        MatSliderModule,\n        // ngx-lib modules\n        PepNgxLibModule,\n        PepDialogModule,\n        PepIconModule,\n        PepSliderModule,\n        PepFieldTitleModule,\n        PepTextboxModule,\n    ],\n    exports: [PepColorComponent],\n    declarations: [PepColorComponent, PepColorPickerComponent],\n    entryComponents: [PepColorPickerComponent],\n})\nexport class PepColorModule {\n    constructor(private pepIconRegistry: PepIconRegistry) {\n        this.pepIconRegistry.registerIcons([\n            pepIconSystemEdit,\n            pepIconSystemOk,\n            pepIconSystemClose,\n        ]);\n    }\n}\n","/*\n * Public API Surface of ngx-lib/color\n */\nexport * from './color.module';\nexport * from './color.model';\nexport * from './color.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i7","i8","i1","i2","i3","i4","i5","i6"],"mappings":"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"}