@pepperi-addons/ngx-composite-lib 0.4.1-beta.12 → 0.4.1-beta.13

package/fesm2020/pepperi-addons-ngx-composite-lib-group-buttons-settings.mjs

@@ -11,175 +11,175 @@ import { PepNgxLibModule } from '@pepperi-addons/ngx-lib';
 import * as i1$1 from '@pepperi-addons/ngx-lib/icon';
 import { pepIconTextAlignCenter, pepIconTextAlignLeft, pepIconTextAlignRight, PepIconModule } from '@pepperi-addons/ngx-lib/icon';
 
-class GroupButtonsSettingsComponent {
-    // pepB: PepSizeType | 'none' = "xs";
-    constructor(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.dir = 'ltr';
-        this.btnkeyChange = new EventEmitter();
-        this.none = { key: 'none' };
-        this.sizes = [];
-    }
-    set btnKey(value) {
-        if (!value) {
-            this._btnKey = '';
-        }
-        else {
-            this._btnKey = value;
-        }
-    }
-    get btnKey() {
-        return this._btnKey;
-    }
-    ngOnInit() {
-        // Get the first translation for load all translations.
-        this.translate.get('SHADOW_SETTINGS.INTENSITY_SOFT').toPromise().then((typeSoft) => {
-            this.none = { key: 'none', value: this.translate.instant('GENERAL.NONE'), callback: () => this.onKeyChange(null) };
-            this.arrayMerge();
-        });
-    }
-    arrayMerge() {
-        this.btnsArray = this.getButtonsArray();
-        // check if need to remove items from the buttons array
-        if (this.excludeKeys) {
-            this.btnsArray = this.btnsArray.filter(i => !this.excludeKeys.find(f => f === i.key));
-        }
-        // check if need to add the None button
-        if (this.useNone) {
-            this.btnsArray = [this.none].concat(this.btnsArray);
-        }
-    }
-    onKeyChange(event) {
-        this.btnKey = event?.source?.key || 'none';
-        this.btnkeyChange.emit(this.btnKey);
-    }
-    getButtonsArray() {
-        switch (this.groupType) {
-            case 'custom': {
-                return this.btnsArray;
-            }
-            case 'sizes': {
-                return [
-                    { key: 'xs', value: this.translate.instant('GENERAL.XS'), callback: (event) => this.onKeyChange(event) },
-                    { key: 'sm', value: this.translate.instant('GENERAL.SM'), callback: (event) => this.onKeyChange(event) },
-                    { key: 'md', value: this.translate.instant('GENERAL.MD'), callback: (event) => this.onKeyChange(event) },
-                    { key: 'lg', value: this.translate.instant('GENERAL.LG'), callback: (event) => this.onKeyChange(event) },
-                    { key: 'xl', value: this.translate.instant('GENERAL.XL'), callback: (event) => this.onKeyChange(event) }
-                ];
-            }
-            case 'vertical-align': {
-                return [
-                    { key: 'start', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.TOP'), callback: (event) => this.onKeyChange(event) },
-                    { key: 'middle', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.MIDDLE'), callback: (event) => this.onKeyChange(event) },
-                    { key: 'end', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.BOTTOM'), callback: (event) => this.onKeyChange(event) }
-                ];
-            }
-            case 'horizontal-align': {
-                return [
-                    { key: 'left', iconName: 'text_align_right', callback: (event) => this.onKeyChange(event) },
-                    { key: 'center', iconName: 'text_align_center', callback: (event) => this.onKeyChange(event) },
-                    { key: 'right', iconName: 'text_align_left', callback: (event) => this.onKeyChange(event) },
-                ];
-            }
-            case 'font-weight': {
-                return [
-                    { key: 'regular', value: this.translate.instant('GENERAL.FONT_WEIGHT.REGULAR'), callback: (event) => this.onKeyChange(event) },
-                    { key: 'bold', value: this.translate.instant('GENERAL.FONT_WEIGHT.BOLD'), callback: (event) => this.onKeyChange(event) },
-                    { key: 'bolder', value: this.translate.instant('GENERAL.FONT_WEIGHT.BOLDER'), callback: (event) => this.onKeyChange(event) }
-                ];
-            }
-            case 'width-sizes': {
-                return [
-                    { key: 'narrow', value: this.translate.instant('GENERAL.WIDTH_SIZE.NARROW'), callback: (event) => this.onKeyChange(event) },
-                    { key: 'regular', value: this.translate.instant('GENERAL.WIDTH_SIZE.REGULAR'), callback: (event) => this.onKeyChange(event) },
-                    { key: 'wide', value: this.translate.instant('GENERAL.WIDTH_SIZE.WIDE'), callback: (event) => this.onKeyChange(event) }
-                ];
-            }
-            default: {
-                return [];
-            }
-        }
-    }
-}
-GroupButtonsSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GroupButtonsSettingsComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-GroupButtonsSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: GroupButtonsSettingsComponent, selector: "pep-group-buttons-settings", inputs: { header: "header", subHeader: "subHeader", groupType: "groupType", btnsArray: "btnsArray", excludeKeys: "excludeKeys", useNone: "useNone", disabled: "disabled", dir: "dir", btnKey: "btnKey" }, outputs: { btnkeyChange: "btnkeyChange" }, ngImport: i0, template: "<label *ngIf=\"header != ''\" class=\"body-xl bold ellipsis\">{{header}}</label>\n<pep-field-title *ngIf=\"subHeader !=''\" [label]=\"subHeader\" [disabled]=\"disabled\" [xAlignment]=\"dir === 'rtl' ? 'right' : 'left'\"></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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType"] }, { kind: "component", type: i4.PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: ["viewType", "styleType", "sizeType", "buttons", "buttonsDisabled", "supportUnselect", "selectedButtonKey", "stretch"], outputs: ["buttonClick"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GroupButtonsSettingsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pep-group-buttons-settings', template: "<label *ngIf=\"header != ''\" class=\"body-xl bold ellipsis\">{{header}}</label>\n<pep-field-title *ngIf=\"subHeader !=''\" [label]=\"subHeader\" [disabled]=\"disabled\" [xAlignment]=\"dir === 'rtl' ? 'right' : 'left'\"></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"] }]
-        }], ctorParameters: function () { return [{ type: i1.TranslateService }]; }, propDecorators: { header: [{
-                type: Input
-            }], subHeader: [{
-                type: Input
-            }], groupType: [{
-                type: Input
-            }], btnsArray: [{
-                type: Input
-            }], excludeKeys: [{
-                type: Input
-            }], useNone: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], dir: [{
-                type: Input
-            }], btnKey: [{
-                type: Input
-            }], btnkeyChange: [{
-                type: Output
+class GroupButtonsSettingsComponent {
+    // pepB: PepSizeType | 'none' = "xs";
+    constructor(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.dir = 'ltr';
+        this.btnkeyChange = new EventEmitter();
+        this.none = { key: 'none' };
+        this.sizes = [];
+    }
+    set btnKey(value) {
+        if (!value) {
+            this._btnKey = '';
+        }
+        else {
+            this._btnKey = value;
+        }
+    }
+    get btnKey() {
+        return this._btnKey;
+    }
+    ngOnInit() {
+        // Get the first translation for load all translations.
+        this.translate.get('SHADOW_SETTINGS.INTENSITY_SOFT').toPromise().then((typeSoft) => {
+            this.none = { key: 'none', value: this.translate.instant('GENERAL.NONE'), callback: () => this.onKeyChange(null) };
+            this.arrayMerge();
+        });
+    }
+    arrayMerge() {
+        this.btnsArray = this.getButtonsArray();
+        // check if need to remove items from the buttons array
+        if (this.excludeKeys) {
+            this.btnsArray = this.btnsArray.filter(i => !this.excludeKeys.find(f => f === i.key));
+        }
+        // check if need to add the None button
+        if (this.useNone) {
+            this.btnsArray = [this.none].concat(this.btnsArray);
+        }
+    }
+    onKeyChange(event) {
+        this.btnKey = event?.source?.key || 'none';
+        this.btnkeyChange.emit(this.btnKey);
+    }
+    getButtonsArray() {
+        switch (this.groupType) {
+            case 'custom': {
+                return this.btnsArray;
+            }
+            case 'sizes': {
+                return [
+                    { key: 'xs', value: this.translate.instant('GENERAL.XS'), callback: (event) => this.onKeyChange(event) },
+                    { key: 'sm', value: this.translate.instant('GENERAL.SM'), callback: (event) => this.onKeyChange(event) },
+                    { key: 'md', value: this.translate.instant('GENERAL.MD'), callback: (event) => this.onKeyChange(event) },
+                    { key: 'lg', value: this.translate.instant('GENERAL.LG'), callback: (event) => this.onKeyChange(event) },
+                    { key: 'xl', value: this.translate.instant('GENERAL.XL'), callback: (event) => this.onKeyChange(event) }
+                ];
+            }
+            case 'vertical-align': {
+                return [
+                    { key: 'start', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.TOP'), callback: (event) => this.onKeyChange(event) },
+                    { key: 'middle', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.MIDDLE'), callback: (event) => this.onKeyChange(event) },
+                    { key: 'end', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.BOTTOM'), callback: (event) => this.onKeyChange(event) }
+                ];
+            }
+            case 'horizontal-align': {
+                return [
+                    { key: 'left', iconName: 'text_align_right', callback: (event) => this.onKeyChange(event) },
+                    { key: 'center', iconName: 'text_align_center', callback: (event) => this.onKeyChange(event) },
+                    { key: 'right', iconName: 'text_align_left', callback: (event) => this.onKeyChange(event) },
+                ];
+            }
+            case 'font-weight': {
+                return [
+                    { key: 'regular', value: this.translate.instant('GENERAL.FONT_WEIGHT.REGULAR'), callback: (event) => this.onKeyChange(event) },
+                    { key: 'bold', value: this.translate.instant('GENERAL.FONT_WEIGHT.BOLD'), callback: (event) => this.onKeyChange(event) },
+                    { key: 'bolder', value: this.translate.instant('GENERAL.FONT_WEIGHT.BOLDER'), callback: (event) => this.onKeyChange(event) }
+                ];
+            }
+            case 'width-sizes': {
+                return [
+                    { key: 'narrow', value: this.translate.instant('GENERAL.WIDTH_SIZE.NARROW'), callback: (event) => this.onKeyChange(event) },
+                    { key: 'regular', value: this.translate.instant('GENERAL.WIDTH_SIZE.REGULAR'), callback: (event) => this.onKeyChange(event) },
+                    { key: 'wide', value: this.translate.instant('GENERAL.WIDTH_SIZE.WIDE'), callback: (event) => this.onKeyChange(event) }
+                ];
+            }
+            default: {
+                return [];
+            }
+        }
+    }
+}
+GroupButtonsSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GroupButtonsSettingsComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+GroupButtonsSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: GroupButtonsSettingsComponent, selector: "pep-group-buttons-settings", inputs: { header: "header", subHeader: "subHeader", groupType: "groupType", btnsArray: "btnsArray", excludeKeys: "excludeKeys", useNone: "useNone", disabled: "disabled", dir: "dir", btnKey: "btnKey" }, outputs: { btnkeyChange: "btnkeyChange" }, ngImport: i0, template: "<label *ngIf=\"header != ''\" class=\"body-xl bold ellipsis\">{{header}}</label>\n<pep-field-title *ngIf=\"subHeader !=''\" [label]=\"subHeader\" [disabled]=\"disabled\" [xAlignment]=\"dir === 'rtl' ? 'right' : 'left'\"></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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType"] }, { kind: "component", type: i4.PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: ["viewType", "styleType", "sizeType", "buttons", "buttonsDisabled", "supportUnselect", "selectedButtonKey", "stretch"], outputs: ["buttonClick"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GroupButtonsSettingsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-group-buttons-settings', template: "<label *ngIf=\"header != ''\" class=\"body-xl bold ellipsis\">{{header}}</label>\n<pep-field-title *ngIf=\"subHeader !=''\" [label]=\"subHeader\" [disabled]=\"disabled\" [xAlignment]=\"dir === 'rtl' ? 'right' : 'left'\"></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"] }]
+        }], ctorParameters: function () { return [{ type: i1.TranslateService }]; }, propDecorators: { header: [{
+                type: Input
+            }], subHeader: [{
+                type: Input
+            }], groupType: [{
+                type: Input
+            }], btnsArray: [{
+                type: Input
+            }], excludeKeys: [{
+                type: Input
+            }], useNone: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], dir: [{
+                type: Input
+            }], btnKey: [{
+                type: Input
+            }], btnkeyChange: [{
+                type: Output
             }] } });
 
-const pepIcons = [
-    pepIconTextAlignCenter,
-    pepIconTextAlignLeft,
-    pepIconTextAlignRight
-];
-class PepGroupButtonsSettingsModule {
-    constructor(pepIconRegistry) {
-        this.pepIconRegistry = pepIconRegistry;
-        this.pepIconRegistry.registerIcons(pepIcons);
-    }
-}
-PepGroupButtonsSettingsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGroupButtonsSettingsModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
-PepGroupButtonsSettingsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepGroupButtonsSettingsModule, declarations: [GroupButtonsSettingsComponent], imports: [CommonModule,
-        PepNgxLibModule,
-        PepFieldTitleModule,
-        PepGroupButtonsModule,
-        PepIconModule], exports: [GroupButtonsSettingsComponent] });
-PepGroupButtonsSettingsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGroupButtonsSettingsModule, imports: [CommonModule,
-        PepNgxLibModule,
-        PepFieldTitleModule,
-        PepGroupButtonsModule,
-        PepIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGroupButtonsSettingsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        GroupButtonsSettingsComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        PepNgxLibModule,
-                        PepFieldTitleModule,
-                        PepGroupButtonsModule,
-                        PepIconModule
-                    ],
-                    exports: [GroupButtonsSettingsComponent]
-                }]
+const pepIcons = [
+    pepIconTextAlignCenter,
+    pepIconTextAlignLeft,
+    pepIconTextAlignRight
+];
+class PepGroupButtonsSettingsModule {
+    constructor(pepIconRegistry) {
+        this.pepIconRegistry = pepIconRegistry;
+        this.pepIconRegistry.registerIcons(pepIcons);
+    }
+}
+PepGroupButtonsSettingsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGroupButtonsSettingsModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
+PepGroupButtonsSettingsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepGroupButtonsSettingsModule, declarations: [GroupButtonsSettingsComponent], imports: [CommonModule,
+        PepNgxLibModule,
+        PepFieldTitleModule,
+        PepGroupButtonsModule,
+        PepIconModule], exports: [GroupButtonsSettingsComponent] });
+PepGroupButtonsSettingsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGroupButtonsSettingsModule, imports: [CommonModule,
+        PepNgxLibModule,
+        PepFieldTitleModule,
+        PepGroupButtonsModule,
+        PepIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGroupButtonsSettingsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        GroupButtonsSettingsComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        PepNgxLibModule,
+                        PepFieldTitleModule,
+                        PepGroupButtonsModule,
+                        PepIconModule
+                    ],
+                    exports: [GroupButtonsSettingsComponent]
+                }]
         }], ctorParameters: function () { return [{ type: i1$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.
  */
 
 export { GroupButtonsSettingsComponent, PepGroupButtonsSettingsModule };

package/fesm2020/pepperi-addons-ngx-composite-lib-shadow-settings.mjs

@@ -11,115 +11,115 @@ import { PepGroupButtonsModule } from '@pepperi-addons/ngx-lib/group-buttons';
 import { PepNgxLibModule } from '@pepperi-addons/ngx-lib';
 import { PepSliderModule } from '@pepperi-addons/ngx-lib/slider';
 
-class PepShadowSettings {
-    constructor(use = false, size = 'md', intensity = 'soft') {
-        this.use = use;
-        this.size = size;
-        this.intensity = intensity;
-    }
+class PepShadowSettings {
+    constructor(use = false, size = 'md', intensity = 'soft') {
+        this.use = use;
+        this.size = size;
+        this.intensity = intensity;
+    }
 }
 
-class ShadowSettingsComponent {
-    constructor(translate) {
-        this.translate = translate;
-        this._shadow = new PepShadowSettings();
-        this.shadowChange = new EventEmitter();
-        this.shadowSizes = [];
-        this.shadowIntensities = [];
-    }
-    set shadow(value) {
-        if (!value) {
-            this._shadow = new PepShadowSettings();
-        }
-        else {
-            this._shadow = value;
-        }
-    }
-    get shadow() {
-        return this._shadow;
-    }
-    ngOnInit() {
-        // Get the first translation for load all translations.
-        this.translate.get('SHADOW_SETTINGS.INTENSITY_SOFT').toPromise().then((typeSoft) => {
-            this.shadowSizes = [
-                { key: 'sm', value: this.translate.instant('GENERAL.SM'), callback: () => this.onSizeChange('sm') },
-                { key: 'md', value: this.translate.instant('GENERAL.MD'), callback: () => this.onSizeChange('md') },
-                { key: 'lg', value: this.translate.instant('GENERAL.LG'), callback: () => this.onSizeChange('lg') },
-                { key: 'xl', value: this.translate.instant('GENERAL.XL'), callback: () => this.onSizeChange('xl') }
-            ];
-            this.shadowIntensities = [
-                { key: 'soft', value: typeSoft, callback: () => this.onIntensityChange('soft') },
-                { key: 'regular', value: this.translate.instant('SHADOW_SETTINGS.INTENSITY_REGULAR'), callback: () => this.onIntensityChange('regular') },
-                { key: 'hard', value: this.translate.instant('SHADOW_SETTINGS.INTENSITY_HARD'), callback: () => this.onIntensityChange('hard') }
-            ];
-        });
-    }
-    raiseShadowChange() {
-        this.shadowChange.emit(this.shadow);
-    }
-    onUseChanged(value) {
-        this.shadow.use = value;
-        this.raiseShadowChange();
-    }
-    onSizeChange(value) {
-        this.shadow.size = value;
-        this.raiseShadowChange();
-    }
-    onIntensityChange(value) {
-        this.shadow.intensity = value;
-        this.raiseShadowChange();
-    }
-}
-ShadowSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ShadowSettingsComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-ShadowSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ShadowSettingsComponent, selector: "pep-shadow-settings", inputs: { shadow: "shadow" }, outputs: { shadowChange: "shadowChange" }, ngImport: i0, template: "<pep-checkbox class=\"checkbox-as-title\" [label]=\"'SHADOW_SETTINGS.TITLE' | translate\" [renderTitle]=\"false\" [value]=\"shadow.use\" (valueChange)=\"onUseChanged($event)\"></pep-checkbox>\n<pep-field-title [label]=\"'SHADOW_SETTINGS.SIZE' | translate\" [disabled]=\"!shadow.use\"></pep-field-title>\n<pep-group-buttons class=\"shadow-size-group\" [buttons]=\"shadowSizes\" [selectedButtonKey]=\"shadow.size\" [stretch]=\"true\" buttonsClass=\"md regular\" [buttonsDisabled]=\"!shadow.use\" viewType=\"toggle\">\n</pep-group-buttons>\n<pep-field-title [label]=\"'SHADOW_SETTINGS.INTENSITY' | translate\" [disabled]=\"!shadow.use\"></pep-field-title>\n<pep-group-buttons class=\"shadow-intensity-group\" [buttons]=\"shadowIntensities\" [selectedButtonKey]=\"shadow.intensity\" [stretch]=\"true\" buttonsClass=\"md regular\" [buttonsDisabled]=\"!shadow.use\" viewType=\"toggle\">\n</pep-group-buttons>", styles: [":host{width:100%}:host .shadow-size-group,:host .shadow-type-group{display:block;margin-bottom:var(--pep-form-spacing, 1rem)}\n"], dependencies: [{ kind: "component", type: i2.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange"] }, { kind: "component", type: i3.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType"] }, { kind: "component", type: i4.PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: ["viewType", "styleType", "sizeType", "buttons", "buttonsDisabled", "supportUnselect", "selectedButtonKey", "stretch"], outputs: ["buttonClick"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ShadowSettingsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pep-shadow-settings', 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"] }]
-        }], ctorParameters: function () { return [{ type: i1.TranslateService }]; }, propDecorators: { shadow: [{
-                type: Input
-            }], shadowChange: [{
-                type: Output
+class ShadowSettingsComponent {
+    constructor(translate) {
+        this.translate = translate;
+        this._shadow = new PepShadowSettings();
+        this.shadowChange = new EventEmitter();
+        this.shadowSizes = [];
+        this.shadowIntensities = [];
+    }
+    set shadow(value) {
+        if (!value) {
+            this._shadow = new PepShadowSettings();
+        }
+        else {
+            this._shadow = value;
+        }
+    }
+    get shadow() {
+        return this._shadow;
+    }
+    ngOnInit() {
+        // Get the first translation for load all translations.
+        this.translate.get('SHADOW_SETTINGS.INTENSITY_SOFT').toPromise().then((typeSoft) => {
+            this.shadowSizes = [
+                { key: 'sm', value: this.translate.instant('GENERAL.SM'), callback: () => this.onSizeChange('sm') },
+                { key: 'md', value: this.translate.instant('GENERAL.MD'), callback: () => this.onSizeChange('md') },
+                { key: 'lg', value: this.translate.instant('GENERAL.LG'), callback: () => this.onSizeChange('lg') },
+                { key: 'xl', value: this.translate.instant('GENERAL.XL'), callback: () => this.onSizeChange('xl') }
+            ];
+            this.shadowIntensities = [
+                { key: 'soft', value: typeSoft, callback: () => this.onIntensityChange('soft') },
+                { key: 'regular', value: this.translate.instant('SHADOW_SETTINGS.INTENSITY_REGULAR'), callback: () => this.onIntensityChange('regular') },
+                { key: 'hard', value: this.translate.instant('SHADOW_SETTINGS.INTENSITY_HARD'), callback: () => this.onIntensityChange('hard') }
+            ];
+        });
+    }
+    raiseShadowChange() {
+        this.shadowChange.emit(this.shadow);
+    }
+    onUseChanged(value) {
+        this.shadow.use = value;
+        this.raiseShadowChange();
+    }
+    onSizeChange(value) {
+        this.shadow.size = value;
+        this.raiseShadowChange();
+    }
+    onIntensityChange(value) {
+        this.shadow.intensity = value;
+        this.raiseShadowChange();
+    }
+}
+ShadowSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ShadowSettingsComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+ShadowSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ShadowSettingsComponent, selector: "pep-shadow-settings", inputs: { shadow: "shadow" }, outputs: { shadowChange: "shadowChange" }, ngImport: i0, template: "<pep-checkbox class=\"checkbox-as-title\" [label]=\"'SHADOW_SETTINGS.TITLE' | translate\" [renderTitle]=\"false\" [value]=\"shadow.use\" (valueChange)=\"onUseChanged($event)\"></pep-checkbox>\n<pep-field-title [label]=\"'SHADOW_SETTINGS.SIZE' | translate\" [disabled]=\"!shadow.use\"></pep-field-title>\n<pep-group-buttons class=\"shadow-size-group\" [buttons]=\"shadowSizes\" [selectedButtonKey]=\"shadow.size\" [stretch]=\"true\" buttonsClass=\"md regular\" [buttonsDisabled]=\"!shadow.use\" viewType=\"toggle\">\n</pep-group-buttons>\n<pep-field-title [label]=\"'SHADOW_SETTINGS.INTENSITY' | translate\" [disabled]=\"!shadow.use\"></pep-field-title>\n<pep-group-buttons class=\"shadow-intensity-group\" [buttons]=\"shadowIntensities\" [selectedButtonKey]=\"shadow.intensity\" [stretch]=\"true\" buttonsClass=\"md regular\" [buttonsDisabled]=\"!shadow.use\" viewType=\"toggle\">\n</pep-group-buttons>", styles: [":host{width:100%}:host .shadow-size-group,:host .shadow-type-group{display:block;margin-bottom:var(--pep-form-spacing, 1rem)}\n"], dependencies: [{ kind: "component", type: i2.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange"] }, { kind: "component", type: i3.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType"] }, { kind: "component", type: i4.PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: ["viewType", "styleType", "sizeType", "buttons", "buttonsDisabled", "supportUnselect", "selectedButtonKey", "stretch"], outputs: ["buttonClick"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ShadowSettingsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-shadow-settings', 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"] }]
+        }], ctorParameters: function () { return [{ type: i1.TranslateService }]; }, propDecorators: { shadow: [{
+                type: Input
+            }], shadowChange: [{
+                type: Output
             }] } });
 
-class PepShadowSettingsModule {
-}
-PepShadowSettingsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepShadowSettingsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PepShadowSettingsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepShadowSettingsModule, declarations: [ShadowSettingsComponent], imports: [CommonModule,
-        PepNgxLibModule,
-        PepCheckboxModule,
-        PepFieldTitleModule,
-        PepGroupButtonsModule,
-        PepSliderModule], exports: [ShadowSettingsComponent] });
-PepShadowSettingsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepShadowSettingsModule, imports: [CommonModule,
-        PepNgxLibModule,
-        PepCheckboxModule,
-        PepFieldTitleModule,
-        PepGroupButtonsModule,
-        PepSliderModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepShadowSettingsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        ShadowSettingsComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        PepNgxLibModule,
-                        PepCheckboxModule,
-                        PepFieldTitleModule,
-                        PepGroupButtonsModule,
-                        PepSliderModule
-                    ],
-                    exports: [ShadowSettingsComponent],
-                }]
+class PepShadowSettingsModule {
+}
+PepShadowSettingsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepShadowSettingsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PepShadowSettingsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepShadowSettingsModule, declarations: [ShadowSettingsComponent], imports: [CommonModule,
+        PepNgxLibModule,
+        PepCheckboxModule,
+        PepFieldTitleModule,
+        PepGroupButtonsModule,
+        PepSliderModule], exports: [ShadowSettingsComponent] });
+PepShadowSettingsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepShadowSettingsModule, imports: [CommonModule,
+        PepNgxLibModule,
+        PepCheckboxModule,
+        PepFieldTitleModule,
+        PepGroupButtonsModule,
+        PepSliderModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepShadowSettingsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ShadowSettingsComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        PepNgxLibModule,
+                        PepCheckboxModule,
+                        PepFieldTitleModule,
+                        PepGroupButtonsModule,
+                        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.
  */
 
 export { PepShadowSettings, PepShadowSettingsModule, ShadowSettingsComponent };