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

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

@@ -29,185 +29,185 @@
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
 
-    var GroupButtonsSettingsComponent = /** @class */ (function () {
-        // pepB: PepSizeType | 'none' = "xs";
-        function GroupButtonsSettingsComponent(translate) {
-            this.translate = translate;
-            this.header = '';
-            this.subHeader = '';
-            this.groupType = 'sizes';
-            this.btnsArray = [];
-            this.excludeKeys = []; // for example ['xs','xl']
-            this.useNone = false;
-            this.disabled = false;
-            this.btnkeyChange = new i0.EventEmitter();
-            this.none = { key: 'none' };
-            this.sizes = [];
-        }
-        Object.defineProperty(GroupButtonsSettingsComponent.prototype, "btnKey", {
-            get: function () {
-                return this._btnKey;
-            },
-            set: function (value) {
-                if (!value) {
-                    this._btnKey = '';
-                }
-                else {
-                    this._btnKey = value;
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        GroupButtonsSettingsComponent.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.none = { key: 'none', value: _this.translate.instant('GENERAL.NONE'), callback: function () { return _this.onKeyChange(null); } };
-                _this.arrayMerge();
-            });
-        };
-        GroupButtonsSettingsComponent.prototype.arrayMerge = function () {
-            var _this = this;
-            this.btnsArray = this.getButtonsArray();
-            // check if need to remove items from the buttons array
-            if (this.excludeKeys) {
-                this.btnsArray = this.btnsArray.filter(function (i) { return !_this.excludeKeys.find(function (f) { return f === i.key; }); });
-            }
-            // check if need to add the None button
-            if (this.useNone) {
-                this.btnsArray = [this.none].concat(this.btnsArray);
-            }
-        };
-        GroupButtonsSettingsComponent.prototype.onKeyChange = function (event) {
-            var _a;
-            this.btnKey = ((_a = event === null || event === void 0 ? void 0 : event.source) === null || _a === void 0 ? void 0 : _a.key) || 'none';
-            this.btnkeyChange.emit(this.btnKey);
-        };
-        GroupButtonsSettingsComponent.prototype.getButtonsArray = function () {
-            var _this = this;
-            switch (this.groupType) {
-                case 'custom': {
-                    return this.btnsArray;
-                }
-                case 'sizes': {
-                    return [
-                        { key: 'xs', value: this.translate.instant('GENERAL.XS'), callback: function (event) { return _this.onKeyChange(event); } },
-                        { key: 'sm', value: this.translate.instant('GENERAL.SM'), callback: function (event) { return _this.onKeyChange(event); } },
-                        { key: 'md', value: this.translate.instant('GENERAL.MD'), callback: function (event) { return _this.onKeyChange(event); } },
-                        { key: 'lg', value: this.translate.instant('GENERAL.LG'), callback: function (event) { return _this.onKeyChange(event); } },
-                        { key: 'xl', value: this.translate.instant('GENERAL.XL'), callback: function (event) { return _this.onKeyChange(event); } }
-                    ];
-                }
-                case 'vertical-align': {
-                    return [
-                        { key: 'start', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.TOP'), callback: function (event) { return _this.onKeyChange(event); } },
-                        { key: 'center', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.MIDDLE'), callback: function (event) { return _this.onKeyChange(event); } },
-                        { key: 'end', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.BOTTOM'), callback: function (event) { return _this.onKeyChange(event); } }
-                    ];
-                }
-                case 'horizontal-align': {
-                    return [
-                        { key: 'left', iconName: 'text_align_right', callback: function (event) { return _this.onKeyChange(event); } },
-                        { key: 'center', iconName: 'text_align_center', callback: function (event) { return _this.onKeyChange(event); } },
-                        { key: 'right', iconName: 'text_align_left', callback: function (event) { return _this.onKeyChange(event); } },
-                    ];
-                }
-                case 'font-weight': {
-                    return [
-                        { key: 'normal', value: this.translate.instant('GENERAL.FONT_WEIGHT.NORMAL'), callback: function (event) { return _this.onKeyChange(event); } },
-                        { key: 'bold', value: this.translate.instant('GENERAL.FONT_WEIGHT.BOLD'), callback: function (event) { return _this.onKeyChange(event); } },
-                        { key: 'bolder', value: this.translate.instant('GENERAL.FONT_WEIGHT.BOLDER'), callback: function (event) { return _this.onKeyChange(event); } }
-                    ];
-                }
-                case 'width-sizes': {
-                    return [
-                        { key: 'narrow', value: this.translate.instant('GENERAL.WIDTH_SIZE.NARROW'), callback: function (event) { return _this.onKeyChange(event); } },
-                        { key: 'regular', value: this.translate.instant('GENERAL.WIDTH_SIZE.REGULAR'), callback: function (event) { return _this.onKeyChange(event); } },
-                        { key: 'wide', value: this.translate.instant('GENERAL.WIDTH_SIZE.WIDE'), callback: function (event) { return _this.onKeyChange(event); } }
-                    ];
-                }
-                default: {
-                    return [];
-                }
-            }
-        };
-        return GroupButtonsSettingsComponent;
-    }());
-    GroupButtonsSettingsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: GroupButtonsSettingsComponent, deps: [{ token: i1__namespace.TranslateService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    GroupButtonsSettingsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: GroupButtonsSettingsComponent, selector: "pep-group-buttons-settings", inputs: { header: "header", subHeader: "subHeader", groupType: "groupType", btnsArray: "btnsArray", excludeKeys: "excludeKeys", useNone: "useNone", disabled: "disabled", btnKey: "btnKey" }, outputs: { btnkeyChange: "btnkeyChange" }, ngImport: i0__namespace, template: "<label *ngIf=\"header != ''\" class=\"body-xl bold ellipsis\">{{header}}</label>\n<pep-field-title *ngIf=\"subHeader !=''\" [label]=\"subHeader\" [disabled]=\"disabled\"></pep-field-title>\n<pep-group-buttons [buttons]=\"btnsArray\" \n                   [selectedButtonKey]=\"btnKey\" \n                   [stretch]=\"true\" \n                   buttonsClass=\"md regular\" \n                   [buttonsDisabled]=\"disabled\" \n                   viewType=\"toggle\">\n</pep-group-buttons>\n", 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.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength"] }, { type: i3__namespace.PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: ["viewType", "styleType", "sizeType", "buttons", "buttonsDisabled", "selectedButtonKey", "stretch"], outputs: ["buttonClick"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: GroupButtonsSettingsComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'pep-group-buttons-settings',
-                        templateUrl: './group-buttons-settings.component.html',
-                        styleUrls: ['./group-buttons-settings.component.scss']
-                    }]
-            }], ctorParameters: function () { return [{ type: i1__namespace.TranslateService }]; }, propDecorators: { header: [{
-                    type: i0.Input
-                }], subHeader: [{
-                    type: i0.Input
-                }], groupType: [{
-                    type: i0.Input
-                }], btnsArray: [{
-                    type: i0.Input
-                }], excludeKeys: [{
-                    type: i0.Input
-                }], useNone: [{
-                    type: i0.Input
-                }], disabled: [{
-                    type: i0.Input
-                }], btnKey: [{
-                    type: i0.Input
-                }], btnkeyChange: [{
-                    type: i0.Output
+    var GroupButtonsSettingsComponent = /** @class */ (function () {
+        // pepB: PepSizeType | 'none' = "xs";
+        function GroupButtonsSettingsComponent(translate) {
+            this.translate = translate;
+            this.header = '';
+            this.subHeader = '';
+            this.groupType = 'sizes';
+            this.btnsArray = [];
+            this.excludeKeys = []; // for example ['xs','xl']
+            this.useNone = false;
+            this.disabled = false;
+            this.btnkeyChange = new i0.EventEmitter();
+            this.none = { key: 'none' };
+            this.sizes = [];
+        }
+        Object.defineProperty(GroupButtonsSettingsComponent.prototype, "btnKey", {
+            get: function () {
+                return this._btnKey;
+            },
+            set: function (value) {
+                if (!value) {
+                    this._btnKey = '';
+                }
+                else {
+                    this._btnKey = value;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        GroupButtonsSettingsComponent.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.none = { key: 'none', value: _this.translate.instant('GENERAL.NONE'), callback: function () { return _this.onKeyChange(null); } };
+                _this.arrayMerge();
+            });
+        };
+        GroupButtonsSettingsComponent.prototype.arrayMerge = function () {
+            var _this = this;
+            this.btnsArray = this.getButtonsArray();
+            // check if need to remove items from the buttons array
+            if (this.excludeKeys) {
+                this.btnsArray = this.btnsArray.filter(function (i) { return !_this.excludeKeys.find(function (f) { return f === i.key; }); });
+            }
+            // check if need to add the None button
+            if (this.useNone) {
+                this.btnsArray = [this.none].concat(this.btnsArray);
+            }
+        };
+        GroupButtonsSettingsComponent.prototype.onKeyChange = function (event) {
+            var _a;
+            this.btnKey = ((_a = event === null || event === void 0 ? void 0 : event.source) === null || _a === void 0 ? void 0 : _a.key) || 'none';
+            this.btnkeyChange.emit(this.btnKey);
+        };
+        GroupButtonsSettingsComponent.prototype.getButtonsArray = function () {
+            var _this = this;
+            switch (this.groupType) {
+                case 'custom': {
+                    return this.btnsArray;
+                }
+                case 'sizes': {
+                    return [
+                        { key: 'xs', value: this.translate.instant('GENERAL.XS'), callback: function (event) { return _this.onKeyChange(event); } },
+                        { key: 'sm', value: this.translate.instant('GENERAL.SM'), callback: function (event) { return _this.onKeyChange(event); } },
+                        { key: 'md', value: this.translate.instant('GENERAL.MD'), callback: function (event) { return _this.onKeyChange(event); } },
+                        { key: 'lg', value: this.translate.instant('GENERAL.LG'), callback: function (event) { return _this.onKeyChange(event); } },
+                        { key: 'xl', value: this.translate.instant('GENERAL.XL'), callback: function (event) { return _this.onKeyChange(event); } }
+                    ];
+                }
+                case 'vertical-align': {
+                    return [
+                        { key: 'start', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.TOP'), callback: function (event) { return _this.onKeyChange(event); } },
+                        { key: 'center', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.MIDDLE'), callback: function (event) { return _this.onKeyChange(event); } },
+                        { key: 'end', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.BOTTOM'), callback: function (event) { return _this.onKeyChange(event); } }
+                    ];
+                }
+                case 'horizontal-align': {
+                    return [
+                        { key: 'left', iconName: 'text_align_right', callback: function (event) { return _this.onKeyChange(event); } },
+                        { key: 'center', iconName: 'text_align_center', callback: function (event) { return _this.onKeyChange(event); } },
+                        { key: 'right', iconName: 'text_align_left', callback: function (event) { return _this.onKeyChange(event); } },
+                    ];
+                }
+                case 'font-weight': {
+                    return [
+                        { key: 'normal', value: this.translate.instant('GENERAL.FONT_WEIGHT.NORMAL'), callback: function (event) { return _this.onKeyChange(event); } },
+                        { key: 'bold', value: this.translate.instant('GENERAL.FONT_WEIGHT.BOLD'), callback: function (event) { return _this.onKeyChange(event); } },
+                        { key: 'bolder', value: this.translate.instant('GENERAL.FONT_WEIGHT.BOLDER'), callback: function (event) { return _this.onKeyChange(event); } }
+                    ];
+                }
+                case 'width-sizes': {
+                    return [
+                        { key: 'narrow', value: this.translate.instant('GENERAL.WIDTH_SIZE.NARROW'), callback: function (event) { return _this.onKeyChange(event); } },
+                        { key: 'regular', value: this.translate.instant('GENERAL.WIDTH_SIZE.REGULAR'), callback: function (event) { return _this.onKeyChange(event); } },
+                        { key: 'wide', value: this.translate.instant('GENERAL.WIDTH_SIZE.WIDE'), callback: function (event) { return _this.onKeyChange(event); } }
+                    ];
+                }
+                default: {
+                    return [];
+                }
+            }
+        };
+        return GroupButtonsSettingsComponent;
+    }());
+    GroupButtonsSettingsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: GroupButtonsSettingsComponent, deps: [{ token: i1__namespace.TranslateService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    GroupButtonsSettingsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: GroupButtonsSettingsComponent, selector: "pep-group-buttons-settings", inputs: { header: "header", subHeader: "subHeader", groupType: "groupType", btnsArray: "btnsArray", excludeKeys: "excludeKeys", useNone: "useNone", disabled: "disabled", btnKey: "btnKey" }, outputs: { btnkeyChange: "btnkeyChange" }, ngImport: i0__namespace, template: "<label *ngIf=\"header != ''\" class=\"body-xl bold ellipsis\">{{header}}</label>\n<pep-field-title *ngIf=\"subHeader !=''\" [label]=\"subHeader\" [disabled]=\"disabled\"></pep-field-title>\n<pep-group-buttons [buttons]=\"btnsArray\" \n                   [selectedButtonKey]=\"btnKey\" \n                   [stretch]=\"true\" \n                   buttonsClass=\"md regular\" \n                   [buttonsDisabled]=\"disabled\" \n                   viewType=\"toggle\">\n</pep-group-buttons>\n", 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.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength"] }, { type: i3__namespace.PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: ["viewType", "styleType", "sizeType", "buttons", "buttonsDisabled", "selectedButtonKey", "stretch"], outputs: ["buttonClick"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: GroupButtonsSettingsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'pep-group-buttons-settings',
+                        templateUrl: './group-buttons-settings.component.html',
+                        styleUrls: ['./group-buttons-settings.component.scss']
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace.TranslateService }]; }, propDecorators: { header: [{
+                    type: i0.Input
+                }], subHeader: [{
+                    type: i0.Input
+                }], groupType: [{
+                    type: i0.Input
+                }], btnsArray: [{
+                    type: i0.Input
+                }], excludeKeys: [{
+                    type: i0.Input
+                }], useNone: [{
+                    type: i0.Input
+                }], disabled: [{
+                    type: i0.Input
+                }], btnKey: [{
+                    type: i0.Input
+                }], btnkeyChange: [{
+                    type: i0.Output
                 }] } });
 
-    var pepIcons = [
-        i1$1.pepIconTextAlignCenter,
-        i1$1.pepIconTextAlignLeft,
-        i1$1.pepIconTextAlignRight
-    ];
-    var PepGroupButtonsSettingsModule = /** @class */ (function () {
-        function PepGroupButtonsSettingsModule(pepIconRegistry) {
-            this.pepIconRegistry = pepIconRegistry;
-            this.pepIconRegistry.registerIcons(pepIcons);
-        }
-        return PepGroupButtonsSettingsModule;
-    }());
-    PepGroupButtonsSettingsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepGroupButtonsSettingsModule, deps: [{ token: i1__namespace$1.PepIconRegistry }], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    PepGroupButtonsSettingsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepGroupButtonsSettingsModule, declarations: [GroupButtonsSettingsComponent], imports: [i4.CommonModule,
-            ngxLib.PepNgxLibModule,
-            i2.PepFieldTitleModule,
-            i3.PepGroupButtonsModule], exports: [GroupButtonsSettingsComponent] });
-    PepGroupButtonsSettingsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepGroupButtonsSettingsModule, imports: [[
-                i4.CommonModule,
-                ngxLib.PepNgxLibModule,
-                i2.PepFieldTitleModule,
-                i3.PepGroupButtonsModule,
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepGroupButtonsSettingsModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        declarations: [
-                            GroupButtonsSettingsComponent
-                        ],
-                        imports: [
-                            i4.CommonModule,
-                            ngxLib.PepNgxLibModule,
-                            i2.PepFieldTitleModule,
-                            i3.PepGroupButtonsModule,
-                        ],
-                        exports: [GroupButtonsSettingsComponent]
-                    }]
+    var pepIcons = [
+        i1$1.pepIconTextAlignCenter,
+        i1$1.pepIconTextAlignLeft,
+        i1$1.pepIconTextAlignRight
+    ];
+    var PepGroupButtonsSettingsModule = /** @class */ (function () {
+        function PepGroupButtonsSettingsModule(pepIconRegistry) {
+            this.pepIconRegistry = pepIconRegistry;
+            this.pepIconRegistry.registerIcons(pepIcons);
+        }
+        return PepGroupButtonsSettingsModule;
+    }());
+    PepGroupButtonsSettingsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepGroupButtonsSettingsModule, deps: [{ token: i1__namespace$1.PepIconRegistry }], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    PepGroupButtonsSettingsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepGroupButtonsSettingsModule, declarations: [GroupButtonsSettingsComponent], imports: [i4.CommonModule,
+            ngxLib.PepNgxLibModule,
+            i2.PepFieldTitleModule,
+            i3.PepGroupButtonsModule], exports: [GroupButtonsSettingsComponent] });
+    PepGroupButtonsSettingsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepGroupButtonsSettingsModule, imports: [[
+                i4.CommonModule,
+                ngxLib.PepNgxLibModule,
+                i2.PepFieldTitleModule,
+                i3.PepGroupButtonsModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepGroupButtonsSettingsModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [
+                            GroupButtonsSettingsComponent
+                        ],
+                        imports: [
+                            i4.CommonModule,
+                            ngxLib.PepNgxLibModule,
+                            i2.PepFieldTitleModule,
+                            i3.PepGroupButtonsModule,
+                        ],
+                        exports: [GroupButtonsSettingsComponent]
+                    }]
             }], ctorParameters: function () { return [{ type: i1__namespace$1.PepIconRegistry }]; } });
 
-    /*
-     * Public API Surface of ngx-composite-lib/shadow-settings
+    /*
+     * Public API Surface of ngx-composite-lib/shadow-settings
      */
 
-    /**
-     * Generated bundle index. Do not edit.
+    /**
+     * Generated bundle index. Do not edit.
      */
 
     exports.GroupButtonsSettingsComponent = GroupButtonsSettingsComponent;

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

@@ -28,131 +28,131 @@
     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 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 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],
-                    }]
+    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
+    /*
+     * Public API Surface of ngx-composite-lib/shadow-settings
      */
 
-    /**
-     * Generated bundle index. Do not edit.
+    /**
+     * Generated bundle index. Do not edit.
      */
 
     exports.PepShadowSettings = PepShadowSettings;