@pepperi-addons/ngx-composite-lib 0.0.10-beta.1 → 0.0.10-beta.6

package/esm2015/shadow-settings/shadow-settings.component.js

@@ -1,73 +1,73 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { PepShadowSettings } from './shadow-settings.model';
-import * as i0 from "@angular/core";
-import * as i1 from "@ngx-translate/core";
-import * as i2 from "@pepperi-addons/ngx-lib/checkbox";
-import * as i3 from "@pepperi-addons/ngx-lib/field-title";
-import * as i4 from "@pepperi-addons/ngx-lib/group-buttons";
-export class ShadowSettingsComponent {
-    constructor(translate) {
-        this.translate = translate;
-        this._shadow = new PepShadowSettings();
-        this.shadowChange = new EventEmitter();
-        this.shadowSizes = [];
-        this.shadowIntensities = [];
-    }
-    set shadow(value) {
-        if (!value) {
-            this._shadow = new PepShadowSettings();
-        }
-        else {
-            this._shadow = value;
-        }
-    }
-    get shadow() {
-        return this._shadow;
-    }
-    ngOnInit() {
-        // Get the first translation for load all translations.
-        this.translate.get('SHADOW_SETTINGS.INTENSITY_SOFT').toPromise().then((typeSoft) => {
-            this.shadowSizes = [
-                { key: 'sm', value: this.translate.instant('GENERAL.SM'), callback: () => this.onSizeChange('sm') },
-                { key: 'md', value: this.translate.instant('GENERAL.MD'), callback: () => this.onSizeChange('md') },
-                { key: 'lg', value: this.translate.instant('GENERAL.LG'), callback: () => this.onSizeChange('lg') },
-                { key: 'xl', value: this.translate.instant('GENERAL.XL'), callback: () => this.onSizeChange('xl') }
-            ];
-            this.shadowIntensities = [
-                { key: 'soft', value: typeSoft, callback: () => this.onIntensityChange('soft') },
-                { key: 'regular', value: this.translate.instant('SHADOW_SETTINGS.INTENSITY_REGULAR'), callback: () => this.onIntensityChange('regular') },
-                { key: 'hard', value: this.translate.instant('SHADOW_SETTINGS.INTENSITY_HARD'), callback: () => this.onIntensityChange('hard') }
-            ];
-        });
-    }
-    raiseShadowChange() {
-        this.shadowChange.emit(this.shadow);
-    }
-    onUseChanged(value) {
-        this.shadow.use = value;
-        this.raiseShadowChange();
-    }
-    onSizeChange(value) {
-        this.shadow.size = value;
-        this.raiseShadowChange();
-    }
-    onIntensityChange(value) {
-        this.shadow.intensity = value;
-        this.raiseShadowChange();
-    }
-}
-ShadowSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ShadowSettingsComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-ShadowSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: ShadowSettingsComponent, selector: "pep-shadow-settings", inputs: { shadow: "shadow" }, outputs: { shadowChange: "shadowChange" }, ngImport: i0, template: "<pep-checkbox class=\"checkbox-as-title\" [label]=\"'SHADOW_SETTINGS.TITLE' | translate\" [renderTitle]=\"false\" [value]=\"shadow.use\" (valueChange)=\"onUseChanged($event)\"></pep-checkbox>\n<pep-field-title [label]=\"'SHADOW_SETTINGS.SIZE' | translate\" [disabled]=\"!shadow.use\"></pep-field-title>\n<pep-group-buttons class=\"shadow-size-group\" [buttons]=\"shadowSizes\" [selectedButtonKey]=\"shadow.size\" [stretch]=\"true\" buttonsClass=\"md regular\" [buttonsDisabled]=\"!shadow.use\" viewType=\"toggle\">\n</pep-group-buttons>\n<pep-field-title [label]=\"'SHADOW_SETTINGS.INTENSITY' | translate\" [disabled]=\"!shadow.use\"></pep-field-title>\n<pep-group-buttons class=\"shadow-intensity-group\" [buttons]=\"shadowIntensities\" [selectedButtonKey]=\"shadow.intensity\" [stretch]=\"true\" buttonsClass=\"md regular\" [buttonsDisabled]=\"!shadow.use\" viewType=\"toggle\">\n</pep-group-buttons>", styles: [":host{width:100%}:host .shadow-size-group,:host .shadow-type-group{display:block;margin-bottom:var(--pep-form-spacing, 1rem)}\n"], components: [{ type: i2.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "form", "isActive", "showTitle", "renderTitle", "layoutType", "type", "additionalValue", "visible"], outputs: ["valueChange"] }, { type: i3.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength"] }, { type: i4.PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: ["viewType", "styleType", "sizeType", "buttons", "buttonsDisabled", "selectedButtonKey", "stretch"], outputs: ["buttonClick"] }], pipes: { "translate": i1.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ShadowSettingsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'pep-shadow-settings',
-                    templateUrl: './shadow-settings.component.html',
-                    styleUrls: ['./shadow-settings.component.scss']
-                }]
-        }], ctorParameters: function () { return [{ type: i1.TranslateService }]; }, propDecorators: { shadow: [{
-                type: Input
-            }], shadowChange: [{
-                type: Output
-            }] } });
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { PepShadowSettings } from './shadow-settings.model';
+import * as i0 from "@angular/core";
+import * as i1 from "@ngx-translate/core";
+import * as i2 from "@pepperi-addons/ngx-lib/checkbox";
+import * as i3 from "@pepperi-addons/ngx-lib/field-title";
+import * as i4 from "@pepperi-addons/ngx-lib/group-buttons";
+export class ShadowSettingsComponent {
+    constructor(translate) {
+        this.translate = translate;
+        this._shadow = new PepShadowSettings();
+        this.shadowChange = new EventEmitter();
+        this.shadowSizes = [];
+        this.shadowIntensities = [];
+    }
+    set shadow(value) {
+        if (!value) {
+            this._shadow = new PepShadowSettings();
+        }
+        else {
+            this._shadow = value;
+        }
+    }
+    get shadow() {
+        return this._shadow;
+    }
+    ngOnInit() {
+        // Get the first translation for load all translations.
+        this.translate.get('SHADOW_SETTINGS.INTENSITY_SOFT').toPromise().then((typeSoft) => {
+            this.shadowSizes = [
+                { key: 'sm', value: this.translate.instant('GENERAL.SM'), callback: () => this.onSizeChange('sm') },
+                { key: 'md', value: this.translate.instant('GENERAL.MD'), callback: () => this.onSizeChange('md') },
+                { key: 'lg', value: this.translate.instant('GENERAL.LG'), callback: () => this.onSizeChange('lg') },
+                { key: 'xl', value: this.translate.instant('GENERAL.XL'), callback: () => this.onSizeChange('xl') }
+            ];
+            this.shadowIntensities = [
+                { key: 'soft', value: typeSoft, callback: () => this.onIntensityChange('soft') },
+                { key: 'regular', value: this.translate.instant('SHADOW_SETTINGS.INTENSITY_REGULAR'), callback: () => this.onIntensityChange('regular') },
+                { key: 'hard', value: this.translate.instant('SHADOW_SETTINGS.INTENSITY_HARD'), callback: () => this.onIntensityChange('hard') }
+            ];
+        });
+    }
+    raiseShadowChange() {
+        this.shadowChange.emit(this.shadow);
+    }
+    onUseChanged(value) {
+        this.shadow.use = value;
+        this.raiseShadowChange();
+    }
+    onSizeChange(value) {
+        this.shadow.size = value;
+        this.raiseShadowChange();
+    }
+    onIntensityChange(value) {
+        this.shadow.intensity = value;
+        this.raiseShadowChange();
+    }
+}
+ShadowSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ShadowSettingsComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+ShadowSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: ShadowSettingsComponent, selector: "pep-shadow-settings", inputs: { shadow: "shadow" }, outputs: { shadowChange: "shadowChange" }, ngImport: i0, template: "<pep-checkbox class=\"checkbox-as-title\" [label]=\"'SHADOW_SETTINGS.TITLE' | translate\" [renderTitle]=\"false\" [value]=\"shadow.use\" (valueChange)=\"onUseChanged($event)\"></pep-checkbox>\n<pep-field-title [label]=\"'SHADOW_SETTINGS.SIZE' | translate\" [disabled]=\"!shadow.use\"></pep-field-title>\n<pep-group-buttons class=\"shadow-size-group\" [buttons]=\"shadowSizes\" [selectedButtonKey]=\"shadow.size\" [stretch]=\"true\" buttonsClass=\"md regular\" [buttonsDisabled]=\"!shadow.use\" viewType=\"toggle\">\n</pep-group-buttons>\n<pep-field-title [label]=\"'SHADOW_SETTINGS.INTENSITY' | translate\" [disabled]=\"!shadow.use\"></pep-field-title>\n<pep-group-buttons class=\"shadow-intensity-group\" [buttons]=\"shadowIntensities\" [selectedButtonKey]=\"shadow.intensity\" [stretch]=\"true\" buttonsClass=\"md regular\" [buttonsDisabled]=\"!shadow.use\" viewType=\"toggle\">\n</pep-group-buttons>", styles: [":host{width:100%}:host .shadow-size-group,:host .shadow-type-group{display:block;margin-bottom:var(--pep-form-spacing, 1rem)}\n"], components: [{ type: i2.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "form", "isActive", "showTitle", "renderTitle", "layoutType", "type", "additionalValue", "visible"], outputs: ["valueChange"] }, { type: i3.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength"] }, { type: i4.PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: ["viewType", "styleType", "sizeType", "buttons", "buttonsDisabled", "selectedButtonKey", "stretch"], outputs: ["buttonClick"] }], pipes: { "translate": i1.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ShadowSettingsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'pep-shadow-settings',
+                    templateUrl: './shadow-settings.component.html',
+                    styleUrls: ['./shadow-settings.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: i1.TranslateService }]; }, propDecorators: { shadow: [{
+                type: Input
+            }], shadowChange: [{
+                type: Output
+            }] } });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hhZG93LXNldHRpbmdzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1jb21wb3NpdGUtbGliL3NoYWRvdy1zZXR0aW5ncy9zaGFkb3ctc2V0dGluZ3MuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWNvbXBvc2l0ZS1saWIvc2hhZG93LXNldHRpbmdzL3NoYWRvdy1zZXR0aW5ncy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBSS9FLE9BQU8sRUFBMEIsaUJBQWlCLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQzs7Ozs7O0FBT3BGLE1BQU0sT0FBTyx1QkFBdUI7SUFxQmhDLFlBQ1ksU0FBMkI7UUFBM0IsY0FBUyxHQUFULFNBQVMsQ0FBa0I7UUFwQi9CLFlBQU8sR0FBc0IsSUFBSSxpQkFBaUIsRUFBRSxDQUFDO1FBYzdELGlCQUFZLEdBQW9DLElBQUksWUFBWSxFQUFxQixDQUFDO1FBRXRGLGdCQUFXLEdBQXFCLEVBQUUsQ0FBQztRQUNuQyxzQkFBaUIsR0FBcUIsRUFBRSxDQUFDO0lBS3pDLENBQUM7SUFyQkQsSUFDSSxNQUFNLENBQUMsS0FBd0I7UUFDL0IsSUFBSSxDQUFDLEtBQUssRUFBRTtZQUNSLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxpQkFBaUIsRUFBRSxDQUFDO1NBQzFDO2FBQU07WUFDSCxJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQztTQUN4QjtJQUNMLENBQUM7SUFDRCxJQUFJLE1BQU07UUFDTixPQUFPLElBQUksQ0FBQyxPQUFPLENBQUM7SUFDeEIsQ0FBQztJQWFELFFBQVE7UUFDSix1REFBdUQ7UUFDdkQsSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsZ0NBQWdDLENBQUMs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OlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVHJhbnNsYXRlU2VydmljZSB9IGZyb20gJ0BuZ3gtdHJhbnNsYXRlL2NvcmUnO1xuaW1wb3J0IHsgUGVwU2l6ZVR5cGUgfSBmcm9tICdAcGVwcGVyaS1hZGRvbnMvbmd4LWxpYic7XG5pbXBvcnQgeyBJUGVwQnV0dG9uQ2xpY2tFdmVudCwgUGVwQnV0dG9uIH0gZnJvbSAnQHBlcHBlcmktYWRkb25zL25neC1saWIvYnV0dG9uJztcbmltcG9ydCB7IFBlcFNoYWRvd0ludGVuc2l0eVR5cGUsIFBlcFNoYWRvd1NldHRpbmdzIH0gZnJvbSAnLi9zaGFkb3ctc2V0dGluZ3MubW9kZWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3BlcC1zaGFkb3ctc2V0dGluZ3MnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9zaGFkb3ctc2V0dGluZ3MuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3NoYWRvdy1zZXR0aW5ncy5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFNoYWRvd1NldHRpbmdzQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICAgIHByaXZhdGUgX3NoYWRvdzogUGVwU2hhZG93U2V0dGluZ3MgPSBuZXcgUGVwU2hhZG93U2V0dGluZ3MoKTtcbiAgICBASW5wdXQoKVxuICAgIHNldCBzaGFkb3codmFsdWU6IFBlcFNoYWRvd1NldHRpbmdzKSB7XG4gICAgICAgIGlmICghdmFsdWUpIHtcbiAgICAgICAgICAgIHRoaXMuX3NoYWRvdyA9IG5ldyBQZXBTaGFkb3dTZXR0aW5ncygpO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgdGhpcy5fc2hhZG93ID0gdmFsdWU7XG4gICAgICAgIH1cbiAgICB9XG4gICAgZ2V0IHNoYWRvdygpOiBQZXBTaGFkb3dTZXR0aW5ncyB7XG4gICAgICAgIHJldHVybiB0aGlzLl9zaGFkb3c7XG4gICAgfVxuXG4gICAgQE91dHB1dCgpXG4gICAgc2hhZG93Q2hhbmdlOiBFdmVudEVtaXR0ZXI8UGVwU2hhZG93U2V0dGluZ3M+ID0gbmV3IEV2ZW50RW1pdHRlcjxQZXBTaGFkb3dTZXR0aW5ncz4oKTtcbiAgICBcbiAgICBzaGFkb3dTaXplczogQXJyYXk8UGVwQnV0dG9uPiA9IFtdO1xuICAgIHNoYWRvd0ludGVuc2l0aWVzOiBBcnJheTxQZXBCdXR0b24+ID0gW107XG5cbiAgICBjb25zdHJ1Y3RvcihcbiAgICAgICAgcHJpdmF0ZSB0cmFuc2xhdGU6IFRyYW5zbGF0ZVNlcnZpY2UsXG4gICAgKSB7XG4gICAgfVxuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7IFxuICAgICAgICAvLyBHZXQgdGhlIGZpcnN0IHRyYW5zbGF0aW9uIGZvciBsb2FkIGFsbCB0cmFuc2xhdGlvbnMuXG4gICAgICAgIHRoaXMudHJhbnNsYXRlLmdldCgnU0hBRE9XX1NFVFRJTkdTLklOVEVOU0lUWV9TT0ZUJykudG9Qcm9taXNlKCkudGhlbigodHlwZVNvZnQpID0+IHtcbiAgICAgICAgICAgIHRoaXMuc2hhZG93U2l6ZXMgPSBbXG4gICAgICAgICAgICAgICAgeyBrZXk6ICdzbScsIHZhbHVlOiB0aGlzLnRyYW5zbGF0ZS5pbnN0YW50KCdHRU5FUkFMLlNNJyksIGNhbGxiYWNrOiAoKSA9PiB0aGlzLm9uU2l6ZUNoYW5nZSgnc20nKSB9LFxuICAgICAgICAgICAgICAgIHsga2V5OiAnbWQnLCB2YWx1ZTogdGhpcy50cmFuc2xhdGUuaW5zdGFudCgnR0VORVJBTC5NRCcpLCBjYWxsYmFjazogKCkgPT4gdGhpcy5vblNpemVDaGFuZ2UoJ21kJykgfSxcbiAgICAgICAgICAgICAgICB7IGtleTogJ2xnJywgdmFsdWU6IHRoaXMudHJhbnNsYXRlLmluc3RhbnQoJ0dFTkVSQUwuTEcnKSwgY2FsbGJhY2s6ICgpID0+IHRoaXMub25TaXplQ2hhbmdlKCdsZycpIH0sXG4gICAgICAgICAgICAgICAgeyBrZXk6ICd4bCcsIHZhbHVlOiB0aGlzLnRyYW5zbGF0ZS5pbnN0YW50KCdHRU5FUkFMLlhMJyksIGNhbGxiYWNrOiAoKSA9PiB0aGlzLm9uU2l6ZUNoYW5nZSgneGwnKSB9XG4gICAgICAgICAgICBdO1xuXG4gICAgICAgICAgICB0aGlzLnNoYWRvd0ludGVuc2l0aWVzID0gW1xuICAgICAgICAgICAgICAgIHsga2V5OiAnc29mdCcsIHZhbHVlOiB0eXBlU29mdCwgY2FsbGJhY2s6ICgpID0+IHRoaXMub25JbnRlbnNpdHlDaGFuZ2UoJ3NvZnQnKSB9LFxuICAgICAgICAgICAgICAgIHsga2V5OiAncmVndWxhcicsIHZhbHVlOiB0aGlzLnRyYW5zbGF0ZS5pbnN0YW50KCdTSEFET1dfU0VUVElOR1MuSU5URU5TSVRZX1JFR1VMQVInKSwgY2FsbGJhY2s6ICgpID0+IHRoaXMub25JbnRlbnNpdHlDaGFuZ2UoJ3JlZ3VsYXInKSB9LFxuICAgICAgICAgICAgICAgIHsga2V5OiAnaGFyZCcsIHZhbHVlOiB0aGlzLnRyYW5zbGF0ZS5pbnN0YW50KCdTSEFET1dfU0VUVElOR1MuSU5URU5TSVRZX0hBUkQnKSwgY2FsbGJhY2s6ICgpID0+IHRoaXMub25JbnRlbnNpdHlDaGFuZ2UoJ2hhcmQnKSB9XG4gICAgICAgICAgICBdO1xuICAgICAgICB9KTtcbiAgICB9XG5cblxuICAgIHByaXZhdGUgcmFpc2VTaGFkb3dDaGFuZ2UoKSB7XG4gICAgICAgIHRoaXMuc2hhZG93Q2hhbmdlLmVtaXQodGhpcy5zaGFkb3cpO1xuICAgIH1cblxuICAgIG9uVXNlQ2hhbmdlZCh2YWx1ZTogYm9vbGVhbikge1xuICAgICAgICB0aGlzLnNoYWRvdy51c2UgPSB2YWx1ZTtcbiAgICAgICAgdGhpcy5yYWlzZVNoYWRvd0NoYW5nZSgpO1xuICAgIH1cblxuICAgIG9uU2l6ZUNoYW5nZSh2YWx1ZTogUGVwU2l6ZVR5cGUpIHtcbiAgICAgICAgdGhpcy5zaGFkb3cuc2l6ZSA9IHZhbHVlO1xuICAgICAgICB0aGlzLnJhaXNlU2hhZG93Q2hhbmdlKCk7XG4gICAgfVxuXG4gICAgb25JbnRlbnNpdHlDaGFuZ2UodmFsdWU6IFBlcFNoYWRvd0ludGVuc2l0eVR5cGUpIHtcbiAgICAgICAgdGhpcy5zaGFkb3cuaW50ZW5zaXR5ID0gdmFsdWU7XG4gICAgICAgIHRoaXMucmFpc2VTaGFkb3dDaGFuZ2UoKTtcbiAgICB9XG59XG4iLCI8cGVwLWNoZWNrYm94IGNsYXNzPVwiY2hlY2tib3gtYXMtdGl0bGVcIiBbbGFiZWxdPVwiJ1NIQURPV19TRVRUSU5HUy5USVRMRScgfCB0cmFuc2xhdGVcIiBbcmVuZGVyVGl0bGVdPVwiZmFsc2VcIiBbdmFsdWVdPVwic2hhZG93LnVzZVwiICh2YWx1ZUNoYW5nZSk9XCJvblVzZUNoYW5nZWQoJGV2ZW50KVwiPjwvcGVwLWNoZWNrYm94PlxuPHBlcC1maWVsZC10aXRsZSBbbGFiZWxdPVwiJ1NIQURPV19TRVRUSU5HUy5TSVpFJyB8IHRyYW5zbGF0ZVwiIFtkaXNhYmxlZF09XCIhc2hhZG93LnVzZVwiPjwvcGVwLWZpZWxkLXRpdGxlPlxuPHBlcC1ncm91cC1idXR0b25zIGNsYXNzPVwic2hhZG93LXNpemUtZ3JvdXBcIiBbYnV0dG9uc109XCJzaGFkb3dTaXplc1wiIFtzZWxlY3RlZEJ1dHRvbktleV09XCJzaGFkb3cuc2l6ZVwiIFtzdHJldGNoXT1cInRydWVcIiBidXR0b25zQ2xhc3M9XCJtZCByZWd1bGFyXCIgW2J1dHRvbnNEaXNhYmxlZF09XCIhc2hhZG93LnVzZVwiIHZpZXdUeXBlPVwidG9nZ2xlXCI+XG48L3BlcC1ncm91cC1idXR0b25zPlxuPHBlcC1maWVsZC10aXRsZSBbbGFiZWxdPVwiJ1NIQURPV19TRVRUSU5HUy5JTlRFTlNJVFknIHwgdHJhbnNsYXRlXCIgW2Rpc2FibGVkXT1cIiFzaGFkb3cudXNlXCI+PC9wZXAtZmllbGQtdGl0bGU+XG48cGVwLWdyb3VwLWJ1dHRvbnMgY2xhc3M9XCJzaGFkb3ctaW50ZW5zaXR5LWdyb3VwXCIgW2J1dHRvbnNdPVwic2hhZG93SW50ZW5zaXRpZXNcIiBbc2VsZWN0ZWRCdXR0b25LZXldPVwic2hhZG93LmludGVuc2l0eVwiIFtzdHJldGNoXT1cInRydWVcIiBidXR0b25zQ2xhc3M9XCJtZCByZWd1bGFyXCIgW2J1dHRvbnNEaXNhYmxlZF09XCIhc2hhZG93LnVzZVwiIHZpZXdUeXBlPVwidG9nZ2xlXCI+XG48L3BlcC1ncm91cC1idXR0b25zPiJdfQ==

package/esm2015/shadow-settings/shadow-settings.model.js

@@ -1,8 +1,8 @@
-export class PepShadowSettings {
-    constructor() {
-        this.use = false;
-        this.size = 'md';
-        this.intensity = 'regular';
-    }
-}
+export class PepShadowSettings {
+    constructor() {
+        this.use = false;
+        this.size = 'md';
+        this.intensity = 'regular';
+    }
+}
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hhZG93LXNldHRpbmdzLm1vZGVsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWNvbXBvc2l0ZS1saWIvc2hhZG93LXNldHRpbmdzL3NoYWRvdy1zZXR0aW5ncy5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJQSxNQUFNLE9BQU8saUJBQWlCO0lBQTlCO1FBQ0ksUUFBRyxHQUFZLEtBQUssQ0FBQztRQUNyQixTQUFJLEdBQWdCLElBQUksQ0FBQztRQUN6QixjQUFTLEdBQTJCLFNBQVMsQ0FBQztJQUNsRCxDQUFDO0NBQUEiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQZXBTaXplVHlwZSB9IGZyb20gXCJAcGVwcGVyaS1hZGRvbnMvbmd4LWxpYlwiO1xyXG5cclxuZXhwb3J0IHR5cGUgUGVwU2hhZG93SW50ZW5zaXR5VHlwZSA9ICdzb2Z0JyB8ICdyZWd1bGFyJyB8ICdoYXJkJztcclxuXHJcbmV4cG9ydCBjbGFzcyBQZXBTaGFkb3dTZXR0aW5ncyB7XHJcbiAgICB1c2U6IGJvb2xlYW4gPSBmYWxzZTtcclxuICAgIHNpemU6IFBlcFNpemVUeXBlID0gJ21kJztcclxuICAgIGludGVuc2l0eTogUGVwU2hhZG93SW50ZW5zaXR5VHlwZSA9ICdyZWd1bGFyJztcclxufSJdfQ==

package/esm2015/shadow-settings/shadow-settings.module.js

@@ -1,44 +1,44 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ShadowSettingsComponent } from './shadow-settings.component';
-import { PepNgxLibModule } from '@pepperi-addons/ngx-lib';
-import { PepCheckboxModule } from '@pepperi-addons/ngx-lib/checkbox';
-import { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';
-import { PepGroupButtonsModule } from '@pepperi-addons/ngx-lib/group-buttons';
-import { PepSliderModule } from '@pepperi-addons/ngx-lib/slider';
-import * as i0 from "@angular/core";
-export class PepShadowSettingsModule {
-}
-PepShadowSettingsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepShadowSettingsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PepShadowSettingsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepShadowSettingsModule, declarations: [ShadowSettingsComponent], imports: [CommonModule,
-        PepNgxLibModule,
-        PepCheckboxModule,
-        PepFieldTitleModule,
-        PepGroupButtonsModule,
-        PepSliderModule], exports: [ShadowSettingsComponent] });
-PepShadowSettingsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepShadowSettingsModule, imports: [[
-            CommonModule,
-            PepNgxLibModule,
-            PepCheckboxModule,
-            PepFieldTitleModule,
-            PepGroupButtonsModule,
-            PepSliderModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepShadowSettingsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        ShadowSettingsComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        PepNgxLibModule,
-                        PepCheckboxModule,
-                        PepFieldTitleModule,
-                        PepGroupButtonsModule,
-                        PepSliderModule
-                    ],
-                    exports: [ShadowSettingsComponent],
-                }]
-        }] });
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ShadowSettingsComponent } from './shadow-settings.component';
+import { PepNgxLibModule } from '@pepperi-addons/ngx-lib';
+import { PepCheckboxModule } from '@pepperi-addons/ngx-lib/checkbox';
+import { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';
+import { PepGroupButtonsModule } from '@pepperi-addons/ngx-lib/group-buttons';
+import { PepSliderModule } from '@pepperi-addons/ngx-lib/slider';
+import * as i0 from "@angular/core";
+export class PepShadowSettingsModule {
+}
+PepShadowSettingsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepShadowSettingsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PepShadowSettingsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepShadowSettingsModule, declarations: [ShadowSettingsComponent], imports: [CommonModule,
+        PepNgxLibModule,
+        PepCheckboxModule,
+        PepFieldTitleModule,
+        PepGroupButtonsModule,
+        PepSliderModule], exports: [ShadowSettingsComponent] });
+PepShadowSettingsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepShadowSettingsModule, imports: [[
+            CommonModule,
+            PepNgxLibModule,
+            PepCheckboxModule,
+            PepFieldTitleModule,
+            PepGroupButtonsModule,
+            PepSliderModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepShadowSettingsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ShadowSettingsComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        PepNgxLibModule,
+                        PepCheckboxModule,
+                        PepFieldTitleModule,
+                        PepGroupButtonsModule,
+                        PepSliderModule
+                    ],
+                    exports: [ShadowSettingsComponent],
+                }]
+        }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hhZG93LXNldHRpbmdzLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1jb21wb3NpdGUtbGliL3NoYWRvdy1zZXR0aW5ncy9zaGFkb3ctc2V0dGluZ3MubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ3RFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUMxRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUNyRSxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQztBQUMxRSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSx1Q0FBdUMsQ0FBQztBQUM5RSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sZ0NBQWdDLENBQUM7O0FBZ0JqRSxNQUFNLE9BQU8sdUJBQXVCOztvSEFBdkIsdUJBQXVCO3FIQUF2Qix1QkFBdUIsaUJBWjVCLHVCQUF1QixhQUd2QixZQUFZO1FBQ1osZUFBZTtRQUNmLGlCQUFpQjtRQUNqQixtQkFBbUI7UUFDbkIscUJBQXFCO1FBQ3JCLGVBQWUsYUFFVCx1QkFBdUI7cUhBRXhCLHVCQUF1QixZQVZ2QjtZQUNMLFlBQVk7WUFDWixlQUFlO1lBQ2YsaUJBQWlCO1lBQ2pCLG1CQUFtQjtZQUNuQixxQkFBcUI7WUFDckIsZUFBZTtTQUNsQjsyRkFHUSx1QkFBdUI7a0JBZG5DLFFBQVE7bUJBQUM7b0JBQ04sWUFBWSxFQUFFO3dCQUNWLHVCQUF1QjtxQkFDMUI7b0JBQ0QsT0FBTyxFQUFFO3dCQUNMLFlBQVk7d0JBQ1osZUFBZTt3QkFDZixpQkFBaUI7d0JBQ2pCLG1CQUFtQjt3QkFDbkIscUJBQXFCO3dCQUNyQixlQUFlO3FCQUNsQjtvQkFDRCxPQUFPLEVBQUUsQ0FBQyx1QkFBdUIsQ0FBQztpQkFDckMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IFNoYWRvd1NldHRpbmdzQ29tcG9uZW50IH0gZnJvbSAnLi9zaGFkb3ctc2V0dGluZ3MuY29tcG9uZW50JztcbmltcG9ydCB7IFBlcE5neExpYk1vZHVsZSB9IGZyb20gJ0BwZXBwZXJpLWFkZG9ucy9uZ3gtbGliJztcbmltcG9ydCB7IFBlcENoZWNrYm94TW9kdWxlIH0gZnJvbSAnQHBlcHBlcmktYWRkb25zL25neC1saWIvY2hlY2tib3gnO1xuaW1wb3J0IHsgUGVwRmllbGRUaXRsZU1vZHVsZSB9IGZyb20gJ0BwZXBwZXJpLWFkZG9ucy9uZ3gtbGliL2ZpZWxkLXRpdGxlJztcbmltcG9ydCB7IFBlcEdyb3VwQnV0dG9uc01vZHVsZSB9IGZyb20gJ0BwZXBwZXJpLWFkZG9ucy9uZ3gtbGliL2dyb3VwLWJ1dHRvbnMnO1xuaW1wb3J0IHsgUGVwU2xpZGVyTW9kdWxlIH0gZnJvbSAnQHBlcHBlcmktYWRkb25zL25neC1saWIvc2xpZGVyJztcblxuQE5nTW9kdWxlKHtcbiAgICBkZWNsYXJhdGlvbnM6IFtcbiAgICAgICAgU2hhZG93U2V0dGluZ3NDb21wb25lbnRcbiAgICBdLFxuICAgIGltcG9ydHM6IFtcbiAgICAgICAgQ29tbW9uTW9kdWxlLFxuICAgICAgICBQZXBOZ3hMaWJNb2R1bGUsXG4gICAgICAgIFBlcENoZWNrYm94TW9kdWxlLFxuICAgICAgICBQZXBGaWVsZFRpdGxlTW9kdWxlLFxuICAgICAgICBQZXBHcm91cEJ1dHRvbnNNb2R1bGUsXG4gICAgICAgIFBlcFNsaWRlck1vZHVsZVxuICAgIF0sXG4gICAgZXhwb3J0czogW1NoYWRvd1NldHRpbmdzQ29tcG9uZW50XSxcbn0pXG5leHBvcnQgY2xhc3MgUGVwU2hhZG93U2V0dGluZ3NNb2R1bGUgeyB9XG4iXX0=

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

@@ -11,126 +11,126 @@ import * as i4 from '@pepperi-addons/ngx-lib/slider';
 import { PepSliderModule } from '@pepperi-addons/ngx-lib/slider';
 import * as i5 from '@ngx-translate/core';
 
-class PepColorSettings {
-    constructor() {
-        this.use = false;
-        this.value = 'hsl(0, 0%, 57%)';
-        this.opacity = 50;
-        // useGradientOverlay?: boolean = true;
-    }
+class PepColorSettings {
+    constructor() {
+        this.use = false;
+        this.value = 'hsl(0, 0%, 57%)';
+        this.opacity = 50;
+        // useGradientOverlay?: boolean = true;
+    }
 }
 
-class ColorSettingsComponent {
-    constructor(pepColorService) {
-        this.pepColorService = pepColorService;
-        this.title = '';
-        this._color = new PepColorSettings();
-        this.colorChange = new EventEmitter();
-    }
-    set color(value) {
-        if (!value) {
-            this._color = new PepColorSettings();
-        }
-        else {
-            this._color = value;
-        }
-    }
-    get color() {
-        return this._color;
-    }
-    ngOnInit() {
-    }
-    getRGBAcolor(colorObj, opac = null) {
-        let rgba = 'rgba(255,255,255,0)';
-        if (colorObj) {
-            let color = colorObj.value;
-            let opacity = opac != null ? opac : colorObj.opacity;
-            opacity = opacity > 0 ? opacity / 100 : 0;
-            let hsl = this.pepColorService.hslString2hsl(color);
-            let rgb = this.pepColorService.hsl2rgb(hsl);
-            rgba = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + opacity + ')';
-        }
-        return rgba;
-    }
-    raiseColorChange() {
-        this.colorChange.emit(this.color);
-    }
-    getSliderBackground() {
-        let alignTo = 'right';
-        let colorObj = new PepColorSettings();
-        colorObj.value = this.color.value;
-        colorObj.opacity = 100;
-        let gradStr = this.getRGBAcolor(colorObj, 0) + ' , ' + this.getRGBAcolor(colorObj);
-        return 'linear-gradient(to ' + alignTo + ', ' + gradStr + ')';
-    }
-    onUseChanged(value) {
-        this.color.use = value;
-        this.raiseColorChange();
-    }
-    onColorChanged(value) {
-        this.color.value = value;
-        this.raiseColorChange();
-    }
-    onSliderValueChanged(value) {
-        this.color.opacity = value;
-        this.raiseColorChange();
-    }
-}
-ColorSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ColorSettingsComponent, deps: [{ token: i1.PepColorService }], target: i0.ɵɵFactoryTarget.Component });
-ColorSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: ColorSettingsComponent, selector: "pep-color-settings", inputs: { title: "title", color: "color" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<pep-checkbox class=\"checkbox-as-title\" [label]=\"title\" [renderTitle]=\"false\" [value]=\"color.use\" (valueChange)=\"onUseChanged($event)\"></pep-checkbox>\n<pep-color [value]=\"color.value\" [label]=\"title + ' ' + ('COLOR_SETTINGS.COLOR' | translate)\" [disabled]=\"!color.use\" (valueChange)=\"onColorChanged($event)\">\n</pep-color>\n<pep-slider [label]=\"title + ' ' + ('COLOR_SETTINGS.OPACITY' | translate)\" [hint]=\"color.opacity.toString() || ''\" [minValue]=\"0\" [maxValue]=\"100\" [disabled]=\"!color.use\" [value]=\"color.opacity\" \n    [background]=\"getSliderBackground()\" (inputChange)=\"onSliderValueChanged($event)\">\n</pep-slider>\n", styles: [":host{width:100%}\n"], components: [{ type: i2.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "form", "isActive", "showTitle", "renderTitle", "layoutType", "type", "additionalValue", "visible"], outputs: ["valueChange"] }, { type: i3.PepColorComponent, selector: "pep-color", inputs: ["key", "value", "label", "disabled", "xAlignment", "rowSpan", "type", "showTitle", "showAAComplient", "layoutType"], outputs: ["valueChange"] }, { type: i4.PepSliderComponent, selector: "pep-slider", inputs: ["label", "disabled", "hint", "step", "minValue", "maxValue", "background", "value"], outputs: ["valueChange", "inputChange"] }], pipes: { "translate": i5.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ColorSettingsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'pep-color-settings',
-                    templateUrl: './color-settings.component.html',
-                    styleUrls: ['./color-settings.component.scss']
-                }]
-        }], ctorParameters: function () { return [{ type: i1.PepColorService }]; }, propDecorators: { title: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], colorChange: [{
-                type: Output
+class ColorSettingsComponent {
+    constructor(pepColorService) {
+        this.pepColorService = pepColorService;
+        this.title = '';
+        this._color = new PepColorSettings();
+        this.colorChange = new EventEmitter();
+    }
+    set color(value) {
+        if (!value) {
+            this._color = new PepColorSettings();
+        }
+        else {
+            this._color = value;
+        }
+    }
+    get color() {
+        return this._color;
+    }
+    ngOnInit() {
+    }
+    getRGBAcolor(colorObj, opac = null) {
+        let rgba = 'rgba(255,255,255,0)';
+        if (colorObj) {
+            let color = colorObj.value;
+            let opacity = opac != null ? opac : colorObj.opacity;
+            opacity = opacity > 0 ? opacity / 100 : 0;
+            let hsl = this.pepColorService.hslString2hsl(color);
+            let rgb = this.pepColorService.hsl2rgb(hsl);
+            rgba = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + opacity + ')';
+        }
+        return rgba;
+    }
+    raiseColorChange() {
+        this.colorChange.emit(this.color);
+    }
+    getSliderBackground() {
+        let alignTo = 'right';
+        let colorObj = new PepColorSettings();
+        colorObj.value = this.color.value;
+        colorObj.opacity = 100;
+        let gradStr = this.getRGBAcolor(colorObj, 0) + ' , ' + this.getRGBAcolor(colorObj);
+        return 'linear-gradient(to ' + alignTo + ', ' + gradStr + ')';
+    }
+    onUseChanged(value) {
+        this.color.use = value;
+        this.raiseColorChange();
+    }
+    onColorChanged(value) {
+        this.color.value = value;
+        this.raiseColorChange();
+    }
+    onSliderValueChanged(value) {
+        this.color.opacity = value;
+        this.raiseColorChange();
+    }
+}
+ColorSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ColorSettingsComponent, deps: [{ token: i1.PepColorService }], target: i0.ɵɵFactoryTarget.Component });
+ColorSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: ColorSettingsComponent, selector: "pep-color-settings", inputs: { title: "title", color: "color" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<pep-checkbox class=\"checkbox-as-title\" [label]=\"title\" [renderTitle]=\"false\" [value]=\"color.use\" (valueChange)=\"onUseChanged($event)\"></pep-checkbox>\n<pep-color [value]=\"color.value\" [label]=\"title + ' ' + ('COLOR_SETTINGS.COLOR' | translate)\" [disabled]=\"!color.use\" (valueChange)=\"onColorChanged($event)\">\n</pep-color>\n<pep-slider [label]=\"title + ' ' + ('COLOR_SETTINGS.OPACITY' | translate)\" [hint]=\"color.opacity.toString() || ''\" [minValue]=\"0\" [maxValue]=\"100\" [disabled]=\"!color.use\" [value]=\"color.opacity\" \n    [background]=\"getSliderBackground()\" (inputChange)=\"onSliderValueChanged($event)\">\n</pep-slider>\n", styles: [":host{width:100%}\n"], components: [{ type: i2.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "form", "isActive", "showTitle", "renderTitle", "layoutType", "type", "additionalValue", "visible"], outputs: ["valueChange"] }, { type: i3.PepColorComponent, selector: "pep-color", inputs: ["key", "value", "label", "disabled", "xAlignment", "rowSpan", "type", "showTitle", "showAAComplient", "layoutType"], outputs: ["valueChange"] }, { type: i4.PepSliderComponent, selector: "pep-slider", inputs: ["label", "disabled", "hint", "step", "minValue", "maxValue", "background", "value"], outputs: ["valueChange", "inputChange"] }], pipes: { "translate": i5.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ColorSettingsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'pep-color-settings',
+                    templateUrl: './color-settings.component.html',
+                    styleUrls: ['./color-settings.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: i1.PepColorService }]; }, propDecorators: { title: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], colorChange: [{
+                type: Output
             }] } });
 
-class PepColorSettingsModule {
-}
-PepColorSettingsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepColorSettingsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PepColorSettingsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepColorSettingsModule, declarations: [ColorSettingsComponent], imports: [CommonModule,
-        PepNgxLibModule,
-        PepCheckboxModule,
-        PepColorModule,
-        PepSliderModule], exports: [ColorSettingsComponent] });
-PepColorSettingsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepColorSettingsModule, imports: [[
-            CommonModule,
-            PepNgxLibModule,
-            PepCheckboxModule,
-            PepColorModule,
-            PepSliderModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepColorSettingsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        ColorSettingsComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        PepNgxLibModule,
-                        PepCheckboxModule,
-                        PepColorModule,
-                        PepSliderModule
-                    ],
-                    exports: [ColorSettingsComponent],
-                }]
+class PepColorSettingsModule {
+}
+PepColorSettingsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepColorSettingsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PepColorSettingsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepColorSettingsModule, declarations: [ColorSettingsComponent], imports: [CommonModule,
+        PepNgxLibModule,
+        PepCheckboxModule,
+        PepColorModule,
+        PepSliderModule], exports: [ColorSettingsComponent] });
+PepColorSettingsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepColorSettingsModule, imports: [[
+            CommonModule,
+            PepNgxLibModule,
+            PepCheckboxModule,
+            PepColorModule,
+            PepSliderModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepColorSettingsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ColorSettingsComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        PepNgxLibModule,
+                        PepCheckboxModule,
+                        PepColorModule,
+                        PepSliderModule
+                    ],
+                    exports: [ColorSettingsComponent],
+                }]
         }] });
 
-/*
- * Public API Surface of ngx-composite-lib/color-settings
+/*
+ * Public API Surface of ngx-composite-lib/color-settings
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { ColorSettingsComponent, PepColorSettings, PepColorSettingsModule };