@pepperi-addons/ngx-composite-lib 0.0.3 → 0.0.4

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

@@ -0,0 +1,171 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@pepperi-addons/ngx-lib'), require('@pepperi-addons/ngx-lib/color'), require('@pepperi-addons/ngx-lib/checkbox'), require('@pepperi-addons/ngx-lib/slider'), require('@ngx-translate/core')) :
+    typeof define === 'function' && define.amd ? define('@pepperi-addons/ngx-composite-lib/color-settings', ['exports', '@angular/core', '@angular/common', '@pepperi-addons/ngx-lib', '@pepperi-addons/ngx-lib/color', '@pepperi-addons/ngx-lib/checkbox', '@pepperi-addons/ngx-lib/slider', '@ngx-translate/core'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["pepperi-addons"] = global["pepperi-addons"] || {}, global["pepperi-addons"]["ngx-composite-lib"] = global["pepperi-addons"]["ngx-composite-lib"] || {}, global["pepperi-addons"]["ngx-composite-lib"]["color-settings"] = {}), global.ng.core, global.ng.common, global["ngx-lib"], global["ngx-lib/color"], global["ngx-lib/checkbox"], global["ngx-lib/slider"], global.translate));
+})(this, (function (exports, i0, common, i1, i3, i2, i4, i5) { 'use strict';
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n["default"] = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+
+    var PepColorSettings = /** @class */ (function () {
+        function PepColorSettings() {
+            this.use = false;
+            this.value = 'hsl(0, 0%, 57%)';
+            this.opacity = 50;
+            // useGradientOverlay?: boolean = true;
+        }
+        return PepColorSettings;
+    }());
+
+    var ColorSettingsComponent = /** @class */ (function () {
+        function ColorSettingsComponent(pepColorService) {
+            this.pepColorService = pepColorService;
+            this.title = '';
+            this._color = new PepColorSettings();
+            this.colorChange = new i0.EventEmitter();
+        }
+        Object.defineProperty(ColorSettingsComponent.prototype, "color", {
+            get: function () {
+                return this._color;
+            },
+            set: function (value) {
+                if (!value) {
+                    this._color = new PepColorSettings();
+                }
+                else {
+                    this._color = value;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ColorSettingsComponent.prototype.ngOnInit = function () {
+        };
+        ColorSettingsComponent.prototype.getRGBAcolor = function (colorObj, opac) {
+            if (opac === void 0) { opac = null; }
+            var rgba = 'rgba(255,255,255,0';
+            if (colorObj) {
+                var color = colorObj.value;
+                var opacity = opac != null ? opac : colorObj.opacity;
+                opacity = opacity > 0 ? opacity / 100 : 0;
+                var hsl = this.pepColorService.hslString2hsl(color);
+                var rgb = this.pepColorService.hsl2rgb(hsl);
+                rgba = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + opacity + ')';
+            }
+            return rgba;
+        };
+        ColorSettingsComponent.prototype.raiseColorChange = function () {
+            this.colorChange.emit(this.color);
+        };
+        ColorSettingsComponent.prototype.getSliderBackground = function () {
+            var alignTo = 'right';
+            var colorObj = new PepColorSettings();
+            colorObj.value = this.color.value;
+            colorObj.opacity = 100;
+            var gradStr = this.getRGBAcolor(colorObj, 0) + ' , ' + this.getRGBAcolor(colorObj);
+            return 'linear-gradient(to ' + alignTo + ', ' + gradStr + ')';
+        };
+        ColorSettingsComponent.prototype.onUseChanged = function (value) {
+            this.color.use = value;
+            this.raiseColorChange();
+        };
+        ColorSettingsComponent.prototype.onColorChanged = function (value) {
+            this.color.value = value;
+            this.raiseColorChange();
+        };
+        ColorSettingsComponent.prototype.onSliderValueChanged = function (value) {
+            this.color.opacity = value;
+            this.raiseColorChange();
+        };
+        return ColorSettingsComponent;
+    }());
+    ColorSettingsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: ColorSettingsComponent, deps: [{ token: i1__namespace.PepColorService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ColorSettingsComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.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__namespace.PepColorComponent, selector: "pep-color", inputs: ["key", "value", "label", "disabled", "xAlignment", "rowSpan", "type", "showTitle", "showAAComplient", "layoutType"], outputs: ["valueChange"] }, { type: i4__namespace.PepSliderComponent, selector: "pep-slider", inputs: ["label", "disabled", "hint", "step", "minValue", "maxValue", "background", "value"], outputs: ["valueChange", "inputChange"] }], pipes: { "translate": i5__namespace.TranslatePipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: ColorSettingsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'pep-color-settings',
+                        templateUrl: './color-settings.component.html',
+                        styleUrls: ['./color-settings.component.scss']
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace.PepColorService }]; }, propDecorators: { title: [{
+                    type: i0.Input
+                }], color: [{
+                    type: i0.Input
+                }], colorChange: [{
+                    type: i0.Output
+                }] } });
+
+    var PepColorSettingsModule = /** @class */ (function () {
+        function PepColorSettingsModule() {
+        }
+        return PepColorSettingsModule;
+    }());
+    PepColorSettingsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepColorSettingsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    PepColorSettingsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepColorSettingsModule, declarations: [ColorSettingsComponent], imports: [common.CommonModule,
+            i1.PepNgxLibModule,
+            i2.PepCheckboxModule,
+            i3.PepColorModule,
+            i4.PepSliderModule], exports: [ColorSettingsComponent] });
+    PepColorSettingsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepColorSettingsModule, imports: [[
+                common.CommonModule,
+                i1.PepNgxLibModule,
+                i2.PepCheckboxModule,
+                i3.PepColorModule,
+                i4.PepSliderModule
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepColorSettingsModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [
+                            ColorSettingsComponent
+                        ],
+                        imports: [
+                            common.CommonModule,
+                            i1.PepNgxLibModule,
+                            i2.PepCheckboxModule,
+                            i3.PepColorModule,
+                            i4.PepSliderModule
+                        ],
+                        exports: [ColorSettingsComponent],
+                    }]
+            }] });
+
+    /*
+     * Public API Surface of ngx-composite-lib/color-settings
+     */
+
+    /**
+     * Generated bundle index. Do not edit.
+     */
+
+    exports.ColorSettingsComponent = ColorSettingsComponent;
+    exports.PepColorSettings = PepColorSettings;
+    exports.PepColorSettingsModule = PepColorSettingsModule;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=pepperi-addons-ngx-composite-lib-color-settings.umd.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pepperi-addons-ngx-composite-lib-color-settings.umd.js","sources":["../../../projects/ngx-composite-lib/color-settings/color-settings.model.ts","../../../projects/ngx-composite-lib/color-settings/color-settings.component.ts","../../../projects/ngx-composite-lib/color-settings/color-settings.component.html","../../../projects/ngx-composite-lib/color-settings/color-settings.module.ts","../../../projects/ngx-composite-lib/color-settings/public-api.ts","../../../projects/ngx-composite-lib/color-settings/pepperi-addons-ngx-composite-lib-color-settings.ts"],"sourcesContent":["export class PepColorSettings {\r\n    use: boolean = false;\r\n    value: string = 'hsl(0, 0%, 57%)';\r\n    opacity: number = 50;\r\n    // useGradientOverlay?: boolean = true;\r\n}","import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { PepColorService } from '@pepperi-addons/ngx-lib';\nimport { PepColorSettings } from './color-settings.model';\n\n@Component({\n    selector: 'pep-color-settings',\n    templateUrl: './color-settings.component.html',\n    styleUrls: ['./color-settings.component.scss']\n})\nexport class ColorSettingsComponent implements OnInit {\n\n    @Input() title: string = '';\n\n    private _color: PepColorSettings = new PepColorSettings();\n    @Input()\n    set color(value: PepColorSettings) {\n        if (!value) {\n            this._color = new PepColorSettings();\n        } else {\n            this._color = value;\n        }\n    }\n    get color(): PepColorSettings {\n        return this._color;\n    }\n\n    @Output()\n    colorChange: EventEmitter<PepColorSettings> = new EventEmitter<PepColorSettings>();\n    \n    constructor(private pepColorService: PepColorService) { }\n\n    ngOnInit(): void {\n    }\n\n    private getRGBAcolor(colorObj: PepColorSettings, opac: number | null = null) {\n        let rgba = 'rgba(255,255,255,0';\n\n        if (colorObj) {\n            let color = colorObj.value;\n            let opacity = opac != null ? opac : colorObj.opacity;\n\n            opacity = opacity > 0 ? opacity / 100 : 0;\n\n            let hsl = this.pepColorService.hslString2hsl(color);\n            let rgb = this.pepColorService.hsl2rgb(hsl);\n            rgba = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + opacity + ')';\n        }\n\n        return rgba;\n    }\n\n    private raiseColorChange() {\n        this.colorChange.emit(this.color);\n    }\n\n    getSliderBackground() {\n        let alignTo = 'right';\n    \n        let colorObj = new PepColorSettings();\n    \n        colorObj.value = this.color.value;\n        colorObj.opacity = 100;\n    \n        let gradStr = this.getRGBAcolor(colorObj, 0) + ' , ' + this.getRGBAcolor(colorObj);\n    \n        return 'linear-gradient(to ' + alignTo + ', ' + gradStr + ')';\n    }\n\n    onUseChanged(value: boolean) {\n        this.color.use = value;\n        this.raiseColorChange();\n    }\n\n    onColorChanged(value: string) {\n        this.color.value = value;\n        this.raiseColorChange();\n    }\n\n    onSliderValueChanged(value: number) {\n        this.color.opacity = value;\n        this.raiseColorChange();\n    }\n}\n","<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","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepColorModule } from '@pepperi-addons/ngx-lib/color';\nimport { PepCheckboxModule } from '@pepperi-addons/ngx-lib/checkbox';\nimport { PepSliderModule } from '@pepperi-addons/ngx-lib/slider';\n\nimport { ColorSettingsComponent } from './color-settings.component';\n\n@NgModule({\n    declarations: [\n        ColorSettingsComponent\n    ],\n    imports: [\n        CommonModule,\n        PepNgxLibModule,\n        PepCheckboxModule,\n        PepColorModule,\n        PepSliderModule\n    ],\n    exports: [ColorSettingsComponent],\n})\nexport class PepColorSettingsModule { }\n","/*\n * Public API Surface of ngx-composite-lib/color-settings\n */\nexport * from './color-settings.module';\nexport * from './color-settings.component';\nexport * from './color-settings.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["EventEmitter","Component","Input","Output","CommonModule","PepNgxLibModule","PepCheckboxModule","PepColorModule","PepSliderModule","NgModule"],"mappings":"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"}

package/bundles/pepperi-addons-ngx-composite-lib-shadow-settings.umd.js

@@ -0,0 +1,165 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@ngx-translate/core'), require('@pepperi-addons/ngx-lib/checkbox'), require('@pepperi-addons/ngx-lib/field-title'), require('@pepperi-addons/ngx-lib/group-buttons'), require('@pepperi-addons/ngx-lib'), require('@pepperi-addons/ngx-lib/slider')) :
+    typeof define === 'function' && define.amd ? define('@pepperi-addons/ngx-composite-lib/shadow-settings', ['exports', '@angular/core', '@angular/common', '@ngx-translate/core', '@pepperi-addons/ngx-lib/checkbox', '@pepperi-addons/ngx-lib/field-title', '@pepperi-addons/ngx-lib/group-buttons', '@pepperi-addons/ngx-lib', '@pepperi-addons/ngx-lib/slider'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["pepperi-addons"] = global["pepperi-addons"] || {}, global["pepperi-addons"]["ngx-composite-lib"] = global["pepperi-addons"]["ngx-composite-lib"] || {}, global["pepperi-addons"]["ngx-composite-lib"]["shadow-settings"] = {}), global.ng.core, global.ng.common, global.translate, global["ngx-lib/checkbox"], global["ngx-lib/field-title"], global["ngx-lib/group-buttons"], global["ngx-lib"], global["ngx-lib/slider"]));
+})(this, (function (exports, i0, common, i1, i2, i3, i4, ngxLib, slider) { 'use strict';
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n["default"] = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+
+    var PepShadowSettings = /** @class */ (function () {
+        function PepShadowSettings() {
+            this.use = false;
+            this.size = 'md';
+            this.intensity = 'regular';
+        }
+        return PepShadowSettings;
+    }());
+
+    var ShadowSettingsComponent = /** @class */ (function () {
+        function ShadowSettingsComponent(translate) {
+            this.translate = translate;
+            this._shadow = new PepShadowSettings();
+            this.shadowChange = new i0.EventEmitter();
+            this.shadowSizes = [];
+            this.shadowIntensities = [];
+        }
+        Object.defineProperty(ShadowSettingsComponent.prototype, "shadow", {
+            get: function () {
+                return this._shadow;
+            },
+            set: function (value) {
+                if (!value) {
+                    this._shadow = new PepShadowSettings();
+                }
+                else {
+                    this._shadow = value;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ShadowSettingsComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            // Get the first translation for load all translations.
+            this.translate.get('SHADOW_SETTINGS.INTENSITY_SOFT').toPromise().then(function (typeSoft) {
+                _this.shadowSizes = [
+                    { key: 'sm', value: _this.translate.instant('GENERAL.SM'), callback: function () { return _this.onSizeChange('sm'); } },
+                    { key: 'md', value: _this.translate.instant('GENERAL.MD'), callback: function () { return _this.onSizeChange('md'); } },
+                    { key: 'lg', value: _this.translate.instant('GENERAL.LG'), callback: function () { return _this.onSizeChange('lg'); } },
+                    { key: 'xl', value: _this.translate.instant('GENERAL.XL'), callback: function () { return _this.onSizeChange('xl'); } }
+                ];
+                _this.shadowIntensities = [
+                    { key: 'soft', value: typeSoft, callback: function () { return _this.onIntensityChange('soft'); } },
+                    { key: 'regular', value: _this.translate.instant('SHADOW_SETTINGS.INTENSITY_REGULAR'), callback: function () { return _this.onIntensityChange('regular'); } },
+                    { key: 'hard', value: _this.translate.instant('SHADOW_SETTINGS.INTENSITY_HARD'), callback: function () { return _this.onIntensityChange('hard'); } }
+                ];
+            });
+        };
+        ShadowSettingsComponent.prototype.raiseShadowChange = function () {
+            this.shadowChange.emit(this.shadow);
+        };
+        ShadowSettingsComponent.prototype.onUseChanged = function (value) {
+            this.shadow.use = value;
+            this.raiseShadowChange();
+        };
+        ShadowSettingsComponent.prototype.onSizeChange = function (value) {
+            this.shadow.size = value;
+            this.raiseShadowChange();
+        };
+        ShadowSettingsComponent.prototype.onIntensityChange = function (value) {
+            this.shadow.intensity = value;
+            this.raiseShadowChange();
+        };
+        return ShadowSettingsComponent;
+    }());
+    ShadowSettingsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: ShadowSettingsComponent, deps: [{ token: i1__namespace.TranslateService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ShadowSettingsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: ShadowSettingsComponent, selector: "pep-shadow-settings", inputs: { shadow: "shadow" }, outputs: { shadowChange: "shadowChange" }, ngImport: i0__namespace, 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__namespace.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__namespace.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength"] }, { type: i4__namespace.PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: ["viewType", "styleType", "sizeType", "buttons", "buttonsDisabled", "selectedButtonKey", "stretch"], outputs: ["buttonClick"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: ShadowSettingsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'pep-shadow-settings',
+                        templateUrl: './shadow-settings.component.html',
+                        styleUrls: ['./shadow-settings.component.scss']
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace.TranslateService }]; }, propDecorators: { shadow: [{
+                    type: i0.Input
+                }], shadowChange: [{
+                    type: i0.Output
+                }] } });
+
+    var PepShadowSettingsModule = /** @class */ (function () {
+        function PepShadowSettingsModule() {
+        }
+        return PepShadowSettingsModule;
+    }());
+    PepShadowSettingsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepShadowSettingsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    PepShadowSettingsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepShadowSettingsModule, declarations: [ShadowSettingsComponent], imports: [common.CommonModule,
+            ngxLib.PepNgxLibModule,
+            i2.PepCheckboxModule,
+            i3.PepFieldTitleModule,
+            i4.PepGroupButtonsModule,
+            slider.PepSliderModule], exports: [ShadowSettingsComponent] });
+    PepShadowSettingsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepShadowSettingsModule, imports: [[
+                common.CommonModule,
+                ngxLib.PepNgxLibModule,
+                i2.PepCheckboxModule,
+                i3.PepFieldTitleModule,
+                i4.PepGroupButtonsModule,
+                slider.PepSliderModule
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepShadowSettingsModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [
+                            ShadowSettingsComponent
+                        ],
+                        imports: [
+                            common.CommonModule,
+                            ngxLib.PepNgxLibModule,
+                            i2.PepCheckboxModule,
+                            i3.PepFieldTitleModule,
+                            i4.PepGroupButtonsModule,
+                            slider.PepSliderModule
+                        ],
+                        exports: [ShadowSettingsComponent],
+                    }]
+            }] });
+
+    /*
+     * Public API Surface of ngx-composite-lib/shadow-settings
+     */
+
+    /**
+     * Generated bundle index. Do not edit.
+     */
+
+    exports.PepShadowSettings = PepShadowSettings;
+    exports.PepShadowSettingsModule = PepShadowSettingsModule;
+    exports.ShadowSettingsComponent = ShadowSettingsComponent;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=pepperi-addons-ngx-composite-lib-shadow-settings.umd.js.map

package/bundles/pepperi-addons-ngx-composite-lib-shadow-settings.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pepperi-addons-ngx-composite-lib-shadow-settings.umd.js","sources":["../../../projects/ngx-composite-lib/shadow-settings/shadow-settings.model.ts","../../../projects/ngx-composite-lib/shadow-settings/shadow-settings.component.ts","../../../projects/ngx-composite-lib/shadow-settings/shadow-settings.component.html","../../../projects/ngx-composite-lib/shadow-settings/shadow-settings.module.ts","../../../projects/ngx-composite-lib/shadow-settings/public-api.ts","../../../projects/ngx-composite-lib/shadow-settings/pepperi-addons-ngx-composite-lib-shadow-settings.ts"],"sourcesContent":["import { PepSizeType } from \"@pepperi-addons/ngx-lib\";\r\n\r\nexport type PepShadowIntensityType = 'soft' | 'regular' | 'hard';\r\n\r\nexport class PepShadowSettings {\r\n    use: boolean = false;\r\n    size: PepSizeType = 'md';\r\n    intensity: PepShadowIntensityType = 'regular';\r\n}","import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { TranslateService } from '@ngx-translate/core';\nimport { PepSizeType } from '@pepperi-addons/ngx-lib';\nimport { IPepButtonClickEvent, PepButton } from '@pepperi-addons/ngx-lib/button';\nimport { PepShadowIntensityType, PepShadowSettings } from './shadow-settings.model';\n\n@Component({\n    selector: 'pep-shadow-settings',\n    templateUrl: './shadow-settings.component.html',\n    styleUrls: ['./shadow-settings.component.scss']\n})\nexport class ShadowSettingsComponent implements OnInit {\n\n    private _shadow: PepShadowSettings = new PepShadowSettings();\n    @Input()\n    set shadow(value: PepShadowSettings) {\n        if (!value) {\n            this._shadow = new PepShadowSettings();\n        } else {\n            this._shadow = value;\n        }\n    }\n    get shadow(): PepShadowSettings {\n        return this._shadow;\n    }\n\n    @Output()\n    shadowChange: EventEmitter<PepShadowSettings> = new EventEmitter<PepShadowSettings>();\n    \n    shadowSizes: Array<PepButton> = [];\n    shadowIntensities: Array<PepButton> = [];\n\n    constructor(\n        private translate: TranslateService,\n    ) {\n    }\n\n    ngOnInit(): void { \n        // Get the first translation for load all translations.\n        this.translate.get('SHADOW_SETTINGS.INTENSITY_SOFT').toPromise().then((typeSoft) => {\n            this.shadowSizes = [\n                { key: 'sm', value: this.translate.instant('GENERAL.SM'), callback: () => this.onSizeChange('sm') },\n                { key: 'md', value: this.translate.instant('GENERAL.MD'), callback: () => this.onSizeChange('md') },\n                { key: 'lg', value: this.translate.instant('GENERAL.LG'), callback: () => this.onSizeChange('lg') },\n                { key: 'xl', value: this.translate.instant('GENERAL.XL'), callback: () => this.onSizeChange('xl') }\n            ];\n\n            this.shadowIntensities = [\n                { key: 'soft', value: typeSoft, callback: () => this.onIntensityChange('soft') },\n                { key: 'regular', value: this.translate.instant('SHADOW_SETTINGS.INTENSITY_REGULAR'), callback: () => this.onIntensityChange('regular') },\n                { key: 'hard', value: this.translate.instant('SHADOW_SETTINGS.INTENSITY_HARD'), callback: () => this.onIntensityChange('hard') }\n            ];\n        });\n    }\n\n\n    private raiseShadowChange() {\n        this.shadowChange.emit(this.shadow);\n    }\n\n    onUseChanged(value: boolean) {\n        this.shadow.use = value;\n        this.raiseShadowChange();\n    }\n\n    onSizeChange(value: PepSizeType) {\n        this.shadow.size = value;\n        this.raiseShadowChange();\n    }\n\n    onIntensityChange(value: PepShadowIntensityType) {\n        this.shadow.intensity = value;\n        this.raiseShadowChange();\n    }\n}\n","<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>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ShadowSettingsComponent } from './shadow-settings.component';\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepCheckboxModule } from '@pepperi-addons/ngx-lib/checkbox';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepGroupButtonsModule } from '@pepperi-addons/ngx-lib/group-buttons';\nimport { PepSliderModule } from '@pepperi-addons/ngx-lib/slider';\n\n@NgModule({\n    declarations: [\n        ShadowSettingsComponent\n    ],\n    imports: [\n        CommonModule,\n        PepNgxLibModule,\n        PepCheckboxModule,\n        PepFieldTitleModule,\n        PepGroupButtonsModule,\n        PepSliderModule\n    ],\n    exports: [ShadowSettingsComponent],\n})\nexport class PepShadowSettingsModule { }\n","/*\n * Public API Surface of ngx-composite-lib/shadow-settings\n */\nexport * from './shadow-settings.module';\nexport * from './shadow-settings.component';\nexport * from './shadow-settings.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["EventEmitter","Component","Input","Output","CommonModule","PepNgxLibModule","PepCheckboxModule","PepFieldTitleModule","PepGroupButtonsModule","PepSliderModule","NgModule"],"mappings":"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"}

package/color-settings/color-settings.component.d.ts

@@ -0,0 +1,22 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { PepColorService } from '@pepperi-addons/ngx-lib';
+import { PepColorSettings } from './color-settings.model';
+import * as i0 from "@angular/core";
+export declare class ColorSettingsComponent implements OnInit {
+    private pepColorService;
+    title: string;
+    private _color;
+    set color(value: PepColorSettings);
+    get color(): PepColorSettings;
+    colorChange: EventEmitter<PepColorSettings>;
+    constructor(pepColorService: PepColorService);
+    ngOnInit(): void;
+    private getRGBAcolor;
+    private raiseColorChange;
+    getSliderBackground(): string;
+    onUseChanged(value: boolean): void;
+    onColorChanged(value: string): void;
+    onSliderValueChanged(value: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColorSettingsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColorSettingsComponent, "pep-color-settings", never, { "title": "title"; "color": "color"; }, { "colorChange": "colorChange"; }, never, never>;
+}

package/color-settings/color-settings.model.d.ts

@@ -0,0 +1,5 @@
+export declare class PepColorSettings {
+    use: boolean;
+    value: string;
+    opacity: number;
+}

package/color-settings/color-settings.module.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./color-settings.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@pepperi-addons/ngx-lib";
+import * as i4 from "@pepperi-addons/ngx-lib/checkbox";
+import * as i5 from "@pepperi-addons/ngx-lib/color";
+import * as i6 from "@pepperi-addons/ngx-lib/slider";
+export declare class PepColorSettingsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PepColorSettingsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PepColorSettingsModule, [typeof i1.ColorSettingsComponent], [typeof i2.CommonModule, typeof i3.PepNgxLibModule, typeof i4.PepCheckboxModule, typeof i5.PepColorModule, typeof i6.PepSliderModule], [typeof i1.ColorSettingsComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PepColorSettingsModule>;
+}

package/color-settings/package.json

@@ -0,0 +1,13 @@
+{
+  "peerDependencies": {
+    "@pepperi-addons/ngx-lib": "^0.2.56"
+  },
+  "main": "../bundles/pepperi-addons-ngx-composite-lib-color-settings.umd.js",
+  "module": "../fesm2015/pepperi-addons-ngx-composite-lib-color-settings.js",
+  "es2015": "../fesm2015/pepperi-addons-ngx-composite-lib-color-settings.js",
+  "esm2015": "../esm2015/color-settings/pepperi-addons-ngx-composite-lib-color-settings.js",
+  "fesm2015": "../fesm2015/pepperi-addons-ngx-composite-lib-color-settings.js",
+  "typings": "pepperi-addons-ngx-composite-lib-color-settings.d.ts",
+  "sideEffects": false,
+  "name": "@pepperi-addons/ngx-composite-lib/color-settings"
+}

package/color-settings/pepperi-addons-ngx-composite-lib-color-settings.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@pepperi-addons/ngx-composite-lib/color-settings" />
+export * from './public-api';

package/color-settings/public-api.d.ts

@@ -0,0 +1,3 @@
+export * from './color-settings.module';
+export * from './color-settings.component';
+export * from './color-settings.model';

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

@@ -0,0 +1,81 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { PepColorSettings } from './color-settings.model';
+import * as i0 from "@angular/core";
+import * as i1 from "@pepperi-addons/ngx-lib";
+import * as i2 from "@pepperi-addons/ngx-lib/checkbox";
+import * as i3 from "@pepperi-addons/ngx-lib/color";
+import * as i4 from "@pepperi-addons/ngx-lib/slider";
+import * as i5 from "@ngx-translate/core";
+export 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
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3Itc2V0dGluZ3MuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWNvbXBvc2l0ZS1saWIvY29sb3Itc2V0dGluZ3MvY29sb3Itc2V0dGluZ3MuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWNvbXBvc2l0ZS1saWIvY29sb3Itc2V0dGluZ3MvY29sb3Itc2V0dGluZ3MuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUUvRSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQzs7Ozs7OztBQU8xRCxNQUFNLE9BQU8sc0JBQXNCO0lBb0IvQixZQUFvQixlQUFnQztRQUFoQyxvQkFBZSxHQUFmLGVBQWUsQ0FBaUI7UUFsQjNDLFVBQUssR0FBVyxFQUFFLENBQUM7UUFFcEIsV0FBTSxHQUFxQixJQUFJLGdCQUFnQixFQUFFLENBQUM7UUFjMUQsZ0JBQVcsR0FBbUMsSUFBSSxZQUFZLEVBQW9CLENBQUM7SUFFM0IsQ0FBQztJQWZ6RCxJQUNJLEtBQUssQ0FBQyxLQUF1QjtRQUM3QixJQUFJLENBQUMsS0FBSyxFQUFFO1lBQ1IsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLGdCQUFnQixFQUFFLENBQUM7U0FDeEM7YUFBTTtZQUNILElBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO1NBQ3ZCO0lBQ0wsQ0FBQztJQUNELElBQUksS0FBSztRQUNMLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUN2QixDQUFDO0lBT0QsUUFBUTtJQUNSLENBQUM7SUFFTyxZQUFZLENBQUMsUUFBMEIsRUFBRSxPQUFzQixJQUFJO1FBQ3ZFLElBQUksSUFBSSxHQUFHLG9CQUFvQixDQUFDO1FBRWhDLElBQUksUUFBUSxFQUFFO1lBQ1YsSUFBSSxLQUFLLEdBQUcsUUFBUSxDQUFDLEtBQUssQ0FBQztZQUMzQixJQUFJLE9BQU8sR0FBRyxJQUFJLElBQUksSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUM7WUFFckQsT0FBTyxHQUFHLE9BQU8sR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLE9BQU8sR0FBRyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUUxQyxJQUFJLEdBQUcsR0FBRyxJQUFJLENBQUMsZUFBZSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUNwRCxJQUFJLEdBQUcsR0FBRyxJQUFJLENBQUMsZUFBZSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsQ0FBQztZQUM1QyxJQUFJLEdBQUcsT0FBTyxHQUFHLEdBQUcsQ0FBQyxDQUFDLEdBQUcsR0FBRyxHQUFHLEdBQUcsQ0FBQyxDQUFDLEdBQUcsR0FBRyxHQUFHLEdBQUcsQ0FBQyxDQUFDLEdBQUcsR0FBRyxHQUFHLE9BQU8sR0FBRyxHQUFHLENBQUM7U0FDNUU7UUFFRCxPQUFPLElBQUksQ0FBQztJQUNoQixDQUFDO0lBRU8sZ0JBQWdCO1FBQ3BCLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN0QyxDQUFDO0lBRUQsbUJBQW1CO1FBQ2YsSUFBSSxPQUFPLEdBQUcsT0FBTyxDQUFDO1FBRXRCLElBQUksUUFBUSxHQUFHLElBQUksZ0JBQWdCLEVBQUUsQ0FBQztRQUV0QyxRQUFRLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDO1FBQ2xDLFFBQVEsQ0FBQyxPQUFPLEdBQUcsR0FBRyxDQUFDO1FBRXZCLElBQUksT0FBTyxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FBQyxHQUFHLEtBQUssR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBRW5GLE9BQU8scUJBQXFCLEdBQUcsT0FBTyxHQUFHLElBQUksR0FBRyxPQUFPLEdBQUcsR0FBRyxDQUFDO0lBQ2xFLENBQUM7SUFFRCxZQUFZLENBQUMsS0FBYztRQUN2QixJQUFJLENBQUMsS0FBSyxDQUFDLEdBQUcsR0FBRyxLQUFLLENBQUM7UUFDdkIsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7SUFDNUIsQ0FBQztJQUVELGNBQWMsQ0FBQyxLQUFhO1FBQ3hCLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQztRQUN6QixJQUFJLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBRUQsb0JBQW9CLENBQUMsS0FBYTtRQUM5QixJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7UUFDM0IsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7SUFDNUIsQ0FBQzs7bUhBeEVRLHNCQUFzQjt1R0FBdEIsc0JBQXNCLCtJQ1RuQyxxcEJBTUE7MkZER2Esc0JBQXNCO2tCQUxsQyxTQUFTO21CQUFDO29CQUNQLFFBQVEsRUFBRSxvQkFBb0I7b0JBQzlCLFdBQVcsRUFBRSxpQ0FBaUM7b0JBQzlDLFNBQVMsRUFBRSxDQUFDLGlDQUFpQyxDQUFDO2lCQUNqRDtzR0FHWSxLQUFLO3NCQUFiLEtBQUs7Z0JBSUYsS0FBSztzQkFEUixLQUFLO2dCQWFOLFdBQVc7c0JBRFYsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFBlcENvbG9yU2VydmljZSB9IGZyb20gJ0BwZXBwZXJpLWFkZG9ucy9uZ3gtbGliJztcbmltcG9ydCB7IFBlcENvbG9yU2V0dGluZ3MgfSBmcm9tICcuL2NvbG9yLXNldHRpbmdzLm1vZGVsJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdwZXAtY29sb3Itc2V0dGluZ3MnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9jb2xvci1zZXR0aW5ncy5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vY29sb3Itc2V0dGluZ3MuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBDb2xvclNldHRpbmdzQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICAgIEBJbnB1dCgpIHRpdGxlOiBzdHJpbmcgPSAnJztcblxuICAgIHByaXZhdGUgX2NvbG9yOiBQZXBDb2xvclNldHRpbmdzID0gbmV3IFBlcENvbG9yU2V0dGluZ3MoKTtcbiAgICBASW5wdXQoKVxuICAgIHNldCBjb2xvcih2YWx1ZTogUGVwQ29sb3JTZXR0aW5ncykge1xuICAgICAgICBpZiAoIXZhbHVlKSB7XG4gICAgICAgICAgICB0aGlzLl9jb2xvciA9IG5ldyBQZXBDb2xvclNldHRpbmdzKCk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICB0aGlzLl9jb2xvciA9IHZhbHVlO1xuICAgICAgICB9XG4gICAgfVxuICAgIGdldCBjb2xvcigpOiBQZXBDb2xvclNldHRpbmdzIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuX2NvbG9yO1xuICAgIH1cblxuICAgIEBPdXRwdXQoKVxuICAgIGNvbG9yQ2hhbmdlOiBFdmVudEVtaXR0ZXI8UGVwQ29sb3JTZXR0aW5ncz4gPSBuZXcgRXZlbnRFbWl0dGVyPFBlcENvbG9yU2V0dGluZ3M+KCk7XG4gICAgXG4gICAgY29uc3RydWN0b3IocHJpdmF0ZSBwZXBDb2xvclNlcnZpY2U6IFBlcENvbG9yU2VydmljZSkgeyB9XG5cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB9XG5cbiAgICBwcml2YXRlIGdldFJHQkFjb2xvcihjb2xvck9iajogUGVwQ29sb3JTZXR0aW5ncywgb3BhYzogbnVtYmVyIHwgbnVsbCA9IG51bGwpIHtcbiAgICAgICAgbGV0IHJnYmEgPSAncmdiYSgyNTUsMjU1LDI1NSwwJztcblxuICAgICAgICBpZiAoY29sb3JPYmopIHtcbiAgICAgICAgICAgIGxldCBjb2xvciA9IGNvbG9yT2JqLnZhbHVlO1xuICAgICAgICAgICAgbGV0IG9wYWNpdHkgPSBvcGFjICE9IG51bGwgPyBvcGFjIDogY29sb3JPYmoub3BhY2l0eTtcblxuICAgICAgICAgICAgb3BhY2l0eSA9IG9wYWNpdHkgPiAwID8gb3BhY2l0eSAvIDEwMCA6IDA7XG5cbiAgICAgICAgICAgIGxldCBoc2wgPSB0aGlzLnBlcENvbG9yU2VydmljZS5oc2xTdHJpbmcyaHNsKGNvbG9yKTtcbiAgICAgICAgICAgIGxldCByZ2IgPSB0aGlzLnBlcENvbG9yU2VydmljZS5oc2wycmdiKGhzbCk7XG4gICAgICAgICAgICByZ2JhID0gJ3JnYmEoJyArIHJnYi5yICsgJywnICsgcmdiLmcgKyAnLCcgKyByZ2IuYiArICcsJyArIG9wYWNpdHkgKyAnKSc7XG4gICAgICAgIH1cblxuICAgICAgICByZXR1cm4gcmdiYTtcbiAgICB9XG5cbiAgICBwcml2YXRlIHJhaXNlQ29sb3JDaGFuZ2UoKSB7XG4gICAgICAgIHRoaXMuY29sb3JDaGFuZ2UuZW1pdCh0aGlzLmNvbG9yKTtcbiAgICB9XG5cbiAgICBnZXRTbGlkZXJCYWNrZ3JvdW5kKCkge1xuICAgICAgICBsZXQgYWxpZ25UbyA9ICdyaWdodCc7XG4gICAgXG4gICAgICAgIGxldCBjb2xvck9iaiA9IG5ldyBQZXBDb2xvclNldHRpbmdzKCk7XG4gICAgXG4gICAgICAgIGNvbG9yT2JqLnZhbHVlID0gdGhpcy5jb2xvci52YWx1ZTtcbiAgICAgICAgY29sb3JPYmoub3BhY2l0eSA9IDEwMDtcbiAgICBcbiAgICAgICAgbGV0IGdyYWRTdHIgPSB0aGlzLmdldFJHQkFjb2xvcihjb2xvck9iaiwgMCkgKyAnICwgJyArIHRoaXMuZ2V0UkdCQWNvbG9yKGNvbG9yT2JqKTtcbiAgICBcbiAgICAgICAgcmV0dXJuICdsaW5lYXItZ3JhZGllbnQodG8gJyArIGFsaWduVG8gKyAnLCAnICsgZ3JhZFN0ciArICcpJztcbiAgICB9XG5cbiAgICBvblVzZUNoYW5nZWQodmFsdWU6IGJvb2xlYW4pIHtcbiAgICAgICAgdGhpcy5jb2xvci51c2UgPSB2YWx1ZTtcbiAgICAgICAgdGhpcy5yYWlzZUNvbG9yQ2hhbmdlKCk7XG4gICAgfVxuXG4gICAgb25Db2xvckNoYW5nZWQodmFsdWU6IHN0cmluZykge1xuICAgICAgICB0aGlzLmNvbG9yLnZhbHVlID0gdmFsdWU7XG4gICAgICAgIHRoaXMucmFpc2VDb2xvckNoYW5nZSgpO1xuICAgIH1cblxuICAgIG9uU2xpZGVyVmFsdWVDaGFuZ2VkKHZhbHVlOiBudW1iZXIpIHtcbiAgICAgICAgdGhpcy5jb2xvci5vcGFjaXR5ID0gdmFsdWU7XG4gICAgICAgIHRoaXMucmFpc2VDb2xvckNoYW5nZSgpO1xuICAgIH1cbn1cbiIsIjxwZXAtY2hlY2tib3ggY2xhc3M9XCJjaGVja2JveC1hcy10aXRsZVwiIFtsYWJlbF09XCJ0aXRsZVwiIFtyZW5kZXJUaXRsZV09XCJmYWxzZVwiIFt2YWx1ZV09XCJjb2xvci51c2VcIiAodmFsdWVDaGFuZ2UpPVwib25Vc2VDaGFuZ2VkKCRldmVudClcIj48L3BlcC1jaGVja2JveD5cbjxwZXAtY29sb3IgW3ZhbHVlXT1cImNvbG9yLnZhbHVlXCIgW2xhYmVsXT1cInRpdGxlICsgJyAnICsgKCdDT0xPUl9TRVRUSU5HUy5DT0xPUicgfCB0cmFuc2xhdGUpXCIgW2Rpc2FibGVkXT1cIiFjb2xvci51c2VcIiAodmFsdWVDaGFuZ2UpPVwib25Db2xvckNoYW5nZWQoJGV2ZW50KVwiPlxuPC9wZXAtY29sb3I+XG48cGVwLXNsaWRlciBbbGFiZWxdPVwidGl0bGUgKyAnICcgKyAoJ0NPTE9SX1NFVFRJTkdTLk9QQUNJVFknIHwgdHJhbnNsYXRlKVwiIFtoaW50XT1cImNvbG9yLm9wYWNpdHkudG9TdHJpbmcoKSB8fCAnJ1wiIFttaW5WYWx1ZV09XCIwXCIgW21heFZhbHVlXT1cIjEwMFwiIFtkaXNhYmxlZF09XCIhY29sb3IudXNlXCIgW3ZhbHVlXT1cImNvbG9yLm9wYWNpdHlcIiBcbiAgICBbYmFja2dyb3VuZF09XCJnZXRTbGlkZXJCYWNrZ3JvdW5kKClcIiAoaW5wdXRDaGFuZ2UpPVwib25TbGlkZXJWYWx1ZUNoYW5nZWQoJGV2ZW50KVwiPlxuPC9wZXAtc2xpZGVyPlxuIl19

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

@@ -0,0 +1,9 @@
+export class PepColorSettings {
+    constructor() {
+        this.use = false;
+        this.value = 'hsl(0, 0%, 57%)';
+        this.opacity = 50;
+        // useGradientOverlay?: boolean = true;
+    }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3Itc2V0dGluZ3MubW9kZWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtY29tcG9zaXRlLWxpYi9jb2xvci1zZXR0aW5ncy9jb2xvci1zZXR0aW5ncy5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLE9BQU8sZ0JBQWdCO0lBQTdCO1FBQ0ksUUFBRyxHQUFZLEtBQUssQ0FBQztRQUNyQixVQUFLLEdBQVcsaUJBQWlCLENBQUM7UUFDbEMsWUFBTyxHQUFXLEVBQUUsQ0FBQztRQUNyQix1Q0FBdUM7SUFDM0MsQ0FBQztDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGNsYXNzIFBlcENvbG9yU2V0dGluZ3Mge1xyXG4gICAgdXNlOiBib29sZWFuID0gZmFsc2U7XHJcbiAgICB2YWx1ZTogc3RyaW5nID0gJ2hzbCgwLCAwJSwgNTclKSc7XHJcbiAgICBvcGFjaXR5OiBudW1iZXIgPSA1MDtcclxuICAgIC8vIHVzZUdyYWRpZW50T3ZlcmxheT86IGJvb2xlYW4gPSB0cnVlO1xyXG59Il19

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

@@ -0,0 +1,40 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PepNgxLibModule } from '@pepperi-addons/ngx-lib';
+import { PepColorModule } from '@pepperi-addons/ngx-lib/color';
+import { PepCheckboxModule } from '@pepperi-addons/ngx-lib/checkbox';
+import { PepSliderModule } from '@pepperi-addons/ngx-lib/slider';
+import { ColorSettingsComponent } from './color-settings.component';
+import * as i0 from "@angular/core";
+export 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],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3Itc2V0dGluZ3MubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWNvbXBvc2l0ZS1saWIvY29sb3Itc2V0dGluZ3MvY29sb3Itc2V0dGluZ3MubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUMxRCxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFDL0QsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDckUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBRWpFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLDRCQUE0QixDQUFDOztBQWVwRSxNQUFNLE9BQU8sc0JBQXNCOzttSEFBdEIsc0JBQXNCO29IQUF0QixzQkFBc0IsaUJBWDNCLHNCQUFzQixhQUd0QixZQUFZO1FBQ1osZUFBZTtRQUNmLGlCQUFpQjtRQUNqQixjQUFjO1FBQ2QsZUFBZSxhQUVULHNCQUFzQjtvSEFFdkIsc0JBQXNCLFlBVHRCO1lBQ0wsWUFBWTtZQUNaLGVBQWU7WUFDZixpQkFBaUI7WUFDakIsY0FBYztZQUNkLGVBQWU7U0FDbEI7MkZBR1Esc0JBQXNCO2tCQWJsQyxRQUFRO21CQUFDO29CQUNOLFlBQVksRUFBRTt3QkFDVixzQkFBc0I7cUJBQ3pCO29CQUNELE9BQU8sRUFBRTt3QkFDTCxZQUFZO3dCQUNaLGVBQWU7d0JBQ2YsaUJBQWlCO3dCQUNqQixjQUFjO3dCQUNkLGVBQWU7cUJBQ2xCO29CQUNELE9BQU8sRUFBRSxDQUFDLHNCQUFzQixDQUFDO2lCQUNwQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgUGVwTmd4TGliTW9kdWxlIH0gZnJvbSAnQHBlcHBlcmktYWRkb25zL25neC1saWInO1xuaW1wb3J0IHsgUGVwQ29sb3JNb2R1bGUgfSBmcm9tICdAcGVwcGVyaS1hZGRvbnMvbmd4LWxpYi9jb2xvcic7XG5pbXBvcnQgeyBQZXBDaGVja2JveE1vZHVsZSB9IGZyb20gJ0BwZXBwZXJpLWFkZG9ucy9uZ3gtbGliL2NoZWNrYm94JztcbmltcG9ydCB7IFBlcFNsaWRlck1vZHVsZSB9IGZyb20gJ0BwZXBwZXJpLWFkZG9ucy9uZ3gtbGliL3NsaWRlcic7XG5cbmltcG9ydCB7IENvbG9yU2V0dGluZ3NDb21wb25lbnQgfSBmcm9tICcuL2NvbG9yLXNldHRpbmdzLmNvbXBvbmVudCc7XG5cbkBOZ01vZHVsZSh7XG4gICAgZGVjbGFyYXRpb25zOiBbXG4gICAgICAgIENvbG9yU2V0dGluZ3NDb21wb25lbnRcbiAgICBdLFxuICAgIGltcG9ydHM6IFtcbiAgICAgICAgQ29tbW9uTW9kdWxlLFxuICAgICAgICBQZXBOZ3hMaWJNb2R1bGUsXG4gICAgICAgIFBlcENoZWNrYm94TW9kdWxlLFxuICAgICAgICBQZXBDb2xvck1vZHVsZSxcbiAgICAgICAgUGVwU2xpZGVyTW9kdWxlXG4gICAgXSxcbiAgICBleHBvcnRzOiBbQ29sb3JTZXR0aW5nc0NvbXBvbmVudF0sXG59KVxuZXhwb3J0IGNsYXNzIFBlcENvbG9yU2V0dGluZ3NNb2R1bGUgeyB9XG4iXX0=

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

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public-api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGVwcGVyaS1hZGRvbnMtbmd4LWNvbXBvc2l0ZS1saWItY29sb3Itc2V0dGluZ3MuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtY29tcG9zaXRlLWxpYi9jb2xvci1zZXR0aW5ncy9wZXBwZXJpLWFkZG9ucy1uZ3gtY29tcG9zaXRlLWxpYi1jb2xvci1zZXR0aW5ncy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsY0FBYyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL3B1YmxpYy1hcGknO1xuIl19

package/esm2015/color-settings/public-api.js

@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ngx-composite-lib/color-settings
+ */
+export * from './color-settings.module';
+export * from './color-settings.component';
+export * from './color-settings.model';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1jb21wb3NpdGUtbGliL2NvbG9yLXNldHRpbmdzL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFDSCxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsNEJBQTRCLENBQUM7QUFDM0MsY0FBYyx3QkFBd0IsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2Ygbmd4LWNvbXBvc2l0ZS1saWIvY29sb3Itc2V0dGluZ3NcbiAqL1xuZXhwb3J0ICogZnJvbSAnLi9jb2xvci1zZXR0aW5ncy5tb2R1bGUnO1xuZXhwb3J0ICogZnJvbSAnLi9jb2xvci1zZXR0aW5ncy5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9jb2xvci1zZXR0aW5ncy5tb2RlbCc7XG4iXX0=