@pepperi-addons/ngx-lib 0.3.9-beta.7 → 0.3.9

package/fesm2015/pepperi-addons-ngx-lib-date.js

@@ -57,6 +57,11 @@ const MY_DATE_FORMATS = {
     },
 };
 
+// Set the calture for the adapter.
+function getCalture(layoutService) {
+    const culture = layoutService.getCurrentLanguage();
+    return culture;
+}
 const ɵ0 = MY_DATE_FORMATS, ɵ1 = MY_DATE_FORMATS;
 class PepDateComponent {
     constructor(adapter, element, layoutService, utilitiesService, customizationService, renderer) {
@@ -157,8 +162,9 @@ class PepDateComponent {
                 this.renderer.addClass(this.element.nativeElement, PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME);
             }
         }
-        const culture = this.layoutService.getCurrentLanguage();
-        this.adapter.setLocale(culture);
+        // This is not working for the dateModel so I use set calure in the useFactory: getCalture function.
+        // const culture = this.layoutService.getCurrentLanguage();
+        // this.adapter.setLocale(culture);
         this.setDateModel();
     }
     ngOnChanges(changes) {
@@ -243,7 +249,8 @@ PepDateComponent.decorators = [
                     // CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR,
                     // The locale would typically be provided on the root module of your application. We do it at
                     // the component level here, due to limitations of our example generation script.
-                    //{ provide: MAT_DATE_LOCALE, useValue: 'en-US' },
+                    // { provide: MAT_DATE_LOCALE, useValue: 'he' },
+                    { provide: MAT_DATE_LOCALE, useFactory: getCalture, deps: [PepLayoutService] },
                     // `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing
                     // `MatMomentDateModule` in your applications root module. We provide it at the component level
                     // here, due to limitations of our example generation script.
@@ -339,5 +346,5 @@ PepDateModule.ctorParameters = () => [
  * Generated bundle index. Do not edit.
  */
 
-export { PepDateComponent, PepDateModule, ɵ0, ɵ1, MomentUtcDateAdapter as ɵa, MomentUtcDateTimeAdapter as ɵb, MY_DATE_FORMATS as ɵc };
+export { PepDateComponent, PepDateModule, getCalture, ɵ0, ɵ1, MomentUtcDateAdapter as ɵa, MomentUtcDateTimeAdapter as ɵb, MY_DATE_FORMATS as ɵc };
 //# sourceMappingURL=pepperi-addons-ngx-lib-date.js.map

package/fesm2015/pepperi-addons-ngx-lib-date.js.map

@@ -1 +1 @@
-{"version":3,"file":"pepperi-addons-ngx-lib-date.js","sources":["../../../projects/ngx-lib/date/date.model.ts","../../../projects/ngx-lib/date/date.component.ts","../../../projects/ngx-lib/date/date.module.ts","../../../projects/ngx-lib/date/public-api.ts","../../../projects/ngx-lib/date/pepperi-addons-ngx-lib-date.ts"],"sourcesContent":["import { Inject, Injectable, Optional } from \"@angular/core\";\r\nimport { MAT_DATE_LOCALE } from \"@angular/material/core\";\r\nimport { MomentDateAdapter } from \"@angular/material-moment-adapter\";\r\nimport { MomentDatetimeAdapter } from '@mat-datetimepicker/moment';\r\n\r\n@Injectable()\r\nexport class MomentUtcDateAdapter extends MomentDateAdapter {\r\n    constructor(@Optional() @Inject(MAT_DATE_LOCALE) dateLocale: string) {\r\n        super(dateLocale);\r\n    }\r\n}\r\n\r\n@Injectable()\r\nexport class MomentUtcDateTimeAdapter extends MomentDatetimeAdapter {\r\n    constructor(@Optional() @Inject(MAT_DATE_LOCALE) dateLocale: string) {\r\n        super(dateLocale, { strict: false, useUtc: false }, new MomentUtcDateAdapter(dateLocale));\r\n    }\r\n}\r\n\r\nexport const MY_DATE_FORMATS = {\r\n    parse: {\r\n        dateInput: 'L',\r\n        monthInput: 'MMMM',\r\n        timeInput: 'LT',\r\n        datetimeInput: 'L LT',\r\n    },\r\n    display: {\r\n        dateInput: 'L',\r\n        monthInput: 'MMMM',\r\n        timeInput: 'LT',\r\n        datetimeInput: 'L LT',\r\n        monthYearLabel: 'MMM YYYY',\r\n        dateA11yLabel: 'LL',\r\n        monthYearA11yLabel: 'MMMM YYYY',\r\n        popupHeaderDateLabel: 'ddd, DD MMM',\r\n    },\r\n};\r\n","import {\n    Component,\n    ElementRef,\n    OnInit,\n    Input,\n    Output,\n    EventEmitter,\n    ChangeDetectionStrategy,\n    ViewChild,\n    Renderer2,\n    OnDestroy,\n    OnChanges,\n    Optional,\n} from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport { MomentDateAdapter } from '@angular/material-moment-adapter';\nimport { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';\nimport {\n    DatetimeAdapter,\n    MatDatetimepickerInputEvent,\n    MAT_DATETIME_FORMATS,\n} from '@mat-datetimepicker/core';\nimport { MomentDatetimeAdapter } from '@mat-datetimepicker/moment';\nimport {\n    PepLayoutService,\n    PepUtilitiesService,\n    PepLayoutType,\n    PepCustomizationService,\n    PepHorizontalAlignment,\n    DEFAULT_HORIZONTAL_ALIGNMENT,\n    PepDateFieldType,\n    PepDateField,\n} from '@pepperi-addons/ngx-lib';\nimport { Moment, utc } from 'moment/moment';\nimport { MomentUtcDateAdapter, MomentUtcDateTimeAdapter, MY_DATE_FORMATS } from './date.model';\n\n@Component({\n    selector: 'pep-date',\n    templateUrl: './date.component.html',\n    styleUrls: ['./date.component.scss', './date.component.theme.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [\n        // CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR,\n        // The locale would typically be provided on the root module of your application. We do it at\n        // the component level here, due to limitations of our example generation script.\n        //{ provide: MAT_DATE_LOCALE, useValue: 'en-US' },\n\n        // `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing\n        // `MatMomentDateModule` in your applications root module. We provide it at the component level\n        // here, due to limitations of our example generation script.\n        //{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },\n        //{ provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },\n        { provide: DateAdapter, useClass: MomentUtcDateAdapter },\n        { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },\n        { provide: DatetimeAdapter, useClass: MomentUtcDateTimeAdapter },\n        //{ provide: MAT_DATETIME_FORMATS, useValue: MAT_NATIVE_DATETIME_FORMATS }\n        { provide: MAT_DATETIME_FORMATS, useValue: MY_DATE_FORMATS },\n    ],\n})\nexport class PepDateComponent implements OnInit, OnChanges, OnDestroy {\n    @Input() key = '';\n\n    private _value = '';\n    @Input()\n    set value(value: string) {\n        this._value = value;\n        this.setDateModel();\n    }\n    get value() {\n        return this._value;\n    }\n\n    @Input() formattedValue = '';\n    @Input() label = '';\n\n    private _type: PepDateFieldType = 'date';\n    @Input()\n    set type(type: PepDateFieldType) {\n        this._type = type;\n        this.showTime = type === 'datetime';\n    }\n    get type(): PepDateFieldType {\n        return this._type;\n    }\n\n    @Input() mandatory = false;\n    @Input() disabled = false;\n    @Input() readonly = false;\n    @Input() textColor = '';\n    @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n    @Input() rowSpan = 1;\n\n    private _visible = true;\n    @Input()\n    set visible(visible: boolean) {\n        this._visible = visible;\n        if (visible) {\n            this.renderer.removeClass(\n                this.element.nativeElement,\n                'hidden-element'\n            );\n        } else {\n            this.renderer.addClass(\n                this.element.nativeElement,\n                'hidden-element'\n            );\n        }\n    }\n    get visible(): boolean {\n        return this._visible;\n    }\n\n    // Minimum in thicks\n    @Input()\n    set minValue(value: number) {\n        if (value > 0) {\n            this.minDate = new Date(value * 1000 * 60 * 60 * 24);\n        }\n    }\n\n    // Maximum in thicks\n    @Input()\n    set maxValue(value: number) {\n        if (value > 0) {\n            this.maxDate = new Date(value * 1000 * 60 * 60 * 24);\n        }\n    }\n\n    // Minimum in date\n    @Input()\n    set minDateValue(date: string) {\n        this.minDate = date ? new Date(date) : null;\n    }\n\n    // Maximum in date\n    @Input()\n    set maxDateValue(date: string) {\n        this.maxDate = date ? new Date(date) : null;\n    }\n\n    controlType = 'date';\n\n    @Input() form: FormGroup = null;\n    @Input() isActive = false;\n    @Input() showTitle = true;\n    @Input() renderTitle = true;\n    @Input() renderError = true;\n    @Input() renderSymbol = true;\n    @Input() layoutType: PepLayoutType = 'form';\n\n    @Output()\n    valueChange: EventEmitter<string> = new EventEmitter<string>();\n    @ViewChild('datetimePicker') datetimePicker: any;\n\n    @ViewChild('input') input: ElementRef;\n\n    standAlone = false;\n    isInEditMode = false;\n    dateModel: Moment;\n    minDate: Date;\n    maxDate: Date;\n    showDatepicker = false;\n    showTime = false;\n\n    constructor(\n        private adapter: DateAdapter<any>,\n        private element: ElementRef,\n        private layoutService: PepLayoutService,\n        private utilitiesService: PepUtilitiesService,\n        private customizationService: PepCustomizationService,\n        private renderer: Renderer2\n    ) { }\n\n    private setDefaultForm(): void {\n        const pepField = new PepDateField({\n            key: this.key,\n            value: this.value,\n            mandatory: this.mandatory,\n            readonly: this.readonly,\n            disabled: this.disabled,\n        });\n        this.form = this.customizationService.getDefaultFromGroup(pepField);\n    }\n\n    ngOnInit(): void {\n        if (this.form === null) {\n            this.standAlone = true;\n            this.setDefaultForm();\n\n            this.renderer.addClass(\n                this.element.nativeElement,\n                PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME\n            );\n\n            if (!this.renderTitle) {\n                this.renderer.addClass(\n                    this.element.nativeElement,\n                    PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME\n                );\n            }\n        }\n\n        const culture = this.layoutService.getCurrentLanguage();\n        this.adapter.setLocale(culture);\n\n        this.setDateModel();\n    }\n\n    ngOnChanges(changes: any): void {\n        if (this.standAlone) {\n            this.setDefaultForm();\n        }\n    }\n\n    ngOnDestroy(): void {\n        //\n    }\n\n    private setFormattedValueFromModel(): void {\n        if (this.dateModel === null || !this.dateModel.isValid()) {\n            this.formattedValue = '';\n        } else {\n            const format = this.showTime\n                ? MY_DATE_FORMATS.display.datetimeInput\n                : MY_DATE_FORMATS.display.dateInput;\n            this.formattedValue = this.adapter.format(this.dateModel, format);\n        }\n    }\n\n    private setDateModel(): void {\n        if (\n            this.value === null ||\n            this.value === '' ||\n            this.value.indexOf('1900-1-1') >= 0 ||\n            this.value.indexOf('1900-01-01') >= 0 ||\n            this.value.indexOf('1970-1-1') >= 0 ||\n            this.value.indexOf('1970-01-01') >= 0\n        ) {\n            this._value = '';\n            this.dateModel = null;\n        } else {\n            const parseDate = this.utilitiesService.parseDate(this.value, this.showTime);\n            this.dateModel = utc(parseDate);\n        }\n\n        this.setFormattedValueFromModel();\n    }\n\n    openDatetimePicker(datetimePicker): void {\n        datetimePicker.opened = false;\n        datetimePicker.open();\n    }\n\n    onBlur(event: any): void {\n        // Don't remove the timeout cause a bug DI-17819.\n        setTimeout(() => {\n            if (this.isInEditMode && !this.datetimePicker.opened) {\n                this.isInEditMode = false;\n            }\n        }, 0);\n    }\n\n    onDateChange(event: MatDatetimepickerInputEvent<Moment>): void {\n        let value = '';\n        if (event.value != null) {\n            const date: Date = event.value.toDate();\n\n            value = this.utilitiesService.stringifyDate(date, this.showTime);\n\n            // Update the formatted value.\n            this.setFormattedValueFromModel();\n        }\n\n        this.customizationService.updateFormFieldValue(\n            this.form,\n            this.key,\n            // this.formattedValue\n            value\n        );\n\n        this.valueChange.emit(value);\n\n        setTimeout(() => {\n            if (this.isInEditMode) {\n                this.isInEditMode = false;\n            }\n        }, 0);\n    }\n\n    cardTemplateClicked(event): void {\n        this.isInEditMode = true;\n\n        setTimeout(() => {\n            this.input.nativeElement.focus();\n            this.openDatetimePicker(this.datetimePicker);\n        }, 0);\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule, FormsModule } from '@angular/forms';\n\nimport { MatCommonModule, MatNativeDateModule } from '@angular/material/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport {\n    MatDatetimepickerModule,\n    MatNativeDatetimeModule,\n} from '@mat-datetimepicker/core';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n    PepIconModule,\n    PepIconRegistry,\n    pepIconSystemEdit,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepTextboxIconModule } from '@pepperi-addons/ngx-lib/textbox-icon';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\n\nimport { PepDateComponent } from './date.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        ReactiveFormsModule,\n        FormsModule,\n        // Material modules,\n        MatCommonModule,\n        MatButtonModule,\n        MatNativeDateModule,\n        MatDatepickerModule,\n        MatDatetimepickerModule,\n        MatNativeDatetimeModule,\n        MatFormFieldModule,\n        MatInputModule,\n        MatIconModule,\n        // ngx-lib modules\n        PepNgxLibModule,\n        PepIconModule,\n        PepFieldTitleModule,\n        PepTextboxIconModule,\n    ],\n    exports: [PepDateComponent],\n    declarations: [PepDateComponent],\n})\nexport class PepDateModule {\n    constructor(private pepIconRegistry: PepIconRegistry) {\n        this.pepIconRegistry.registerIcons([pepIconSystemEdit]);\n    }\n}\n","/*\n * Public API Surface of ngx-lib/date\n */\nexport * from './date.module';\nexport * from './date.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n\nexport {MY_DATE_FORMATS as ɵc,MomentUtcDateAdapter as ɵa,MomentUtcDateTimeAdapter as ɵb} from './date.model';"],"names":[],"mappings":"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"}
+{"version":3,"file":"pepperi-addons-ngx-lib-date.js","sources":["../../../projects/ngx-lib/date/date.model.ts","../../../projects/ngx-lib/date/date.component.ts","../../../projects/ngx-lib/date/date.module.ts","../../../projects/ngx-lib/date/public-api.ts","../../../projects/ngx-lib/date/pepperi-addons-ngx-lib-date.ts"],"sourcesContent":["import { Inject, Injectable, Optional } from \"@angular/core\";\r\nimport { MAT_DATE_LOCALE } from \"@angular/material/core\";\r\nimport { MomentDateAdapter } from \"@angular/material-moment-adapter\";\r\nimport { MomentDatetimeAdapter } from '@mat-datetimepicker/moment';\r\n\r\n@Injectable()\r\nexport class MomentUtcDateAdapter extends MomentDateAdapter {\r\n    constructor(@Optional() @Inject(MAT_DATE_LOCALE) dateLocale: string) {\r\n        super(dateLocale);\r\n    }\r\n}\r\n\r\n@Injectable()\r\nexport class MomentUtcDateTimeAdapter extends MomentDatetimeAdapter {\r\n    constructor(@Optional() @Inject(MAT_DATE_LOCALE) dateLocale: string) {\r\n        super(dateLocale, { strict: false, useUtc: false }, new MomentUtcDateAdapter(dateLocale));\r\n    }\r\n}\r\n\r\nexport const MY_DATE_FORMATS = {\r\n    parse: {\r\n        dateInput: 'L',\r\n        monthInput: 'MMMM',\r\n        timeInput: 'LT',\r\n        datetimeInput: 'L LT',\r\n    },\r\n    display: {\r\n        dateInput: 'L',\r\n        monthInput: 'MMMM',\r\n        timeInput: 'LT',\r\n        datetimeInput: 'L LT',\r\n        monthYearLabel: 'MMM YYYY',\r\n        dateA11yLabel: 'LL',\r\n        monthYearA11yLabel: 'MMMM YYYY',\r\n        popupHeaderDateLabel: 'ddd, DD MMM',\r\n    },\r\n};\r\n","import {\n    Component,\n    ElementRef,\n    OnInit,\n    Input,\n    Output,\n    EventEmitter,\n    ChangeDetectionStrategy,\n    ViewChild,\n    Renderer2,\n    OnDestroy,\n    OnChanges,\n    Optional,\n} from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport { MomentDateAdapter } from '@angular/material-moment-adapter';\nimport { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';\nimport {\n    DatetimeAdapter,\n    MatDatetimepickerInputEvent,\n    MAT_DATETIME_FORMATS,\n} from '@mat-datetimepicker/core';\nimport { MomentDatetimeAdapter } from '@mat-datetimepicker/moment';\nimport {\n    PepLayoutService,\n    PepUtilitiesService,\n    PepLayoutType,\n    PepCustomizationService,\n    PepHorizontalAlignment,\n    DEFAULT_HORIZONTAL_ALIGNMENT,\n    PepDateFieldType,\n    PepDateField,\n} from '@pepperi-addons/ngx-lib';\nimport { Moment, utc } from 'moment/moment';\nimport { MomentUtcDateAdapter, MomentUtcDateTimeAdapter, MY_DATE_FORMATS } from './date.model';\n\n// Set the calture for the adapter.\nexport function getCalture(layoutService: PepLayoutService) {\n    const culture = layoutService.getCurrentLanguage();\n    return culture;\n}\n\n@Component({\n    selector: 'pep-date',\n    templateUrl: './date.component.html',\n    styleUrls: ['./date.component.scss', './date.component.theme.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [\n        // CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR,\n        // The locale would typically be provided on the root module of your application. We do it at\n        // the component level here, due to limitations of our example generation script.\n        // { provide: MAT_DATE_LOCALE, useValue: 'he' },\n        { provide: MAT_DATE_LOCALE, useFactory: getCalture, deps:[PepLayoutService] },\n\n        // `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing\n        // `MatMomentDateModule` in your applications root module. We provide it at the component level\n        // here, due to limitations of our example generation script.\n        //{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },\n        //{ provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },\n        { provide: DateAdapter, useClass: MomentUtcDateAdapter },\n        { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },\n        { provide: DatetimeAdapter, useClass: MomentUtcDateTimeAdapter },\n        //{ provide: MAT_DATETIME_FORMATS, useValue: MAT_NATIVE_DATETIME_FORMATS }\n        { provide: MAT_DATETIME_FORMATS, useValue: MY_DATE_FORMATS },\n    ],\n})\nexport class PepDateComponent implements OnInit, OnChanges, OnDestroy {\n    @Input() key = '';\n\n    private _value = '';\n    @Input()\n    set value(value: string) {\n        this._value = value;\n        this.setDateModel();\n    }\n    get value() {\n        return this._value;\n    }\n\n    @Input() formattedValue = '';\n    @Input() label = '';\n\n    private _type: PepDateFieldType = 'date';\n    @Input()\n    set type(type: PepDateFieldType) {\n        this._type = type;\n        this.showTime = type === 'datetime';\n    }\n    get type(): PepDateFieldType {\n        return this._type;\n    }\n\n    @Input() mandatory = false;\n    @Input() disabled = false;\n    @Input() readonly = false;\n    @Input() textColor = '';\n    @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n    @Input() rowSpan = 1;\n\n    private _visible = true;\n    @Input()\n    set visible(visible: boolean) {\n        this._visible = visible;\n        if (visible) {\n            this.renderer.removeClass(\n                this.element.nativeElement,\n                'hidden-element'\n            );\n        } else {\n            this.renderer.addClass(\n                this.element.nativeElement,\n                'hidden-element'\n            );\n        }\n    }\n    get visible(): boolean {\n        return this._visible;\n    }\n\n    // Minimum in thicks\n    @Input()\n    set minValue(value: number) {\n        if (value > 0) {\n            this.minDate = new Date(value * 1000 * 60 * 60 * 24);\n        }\n    }\n\n    // Maximum in thicks\n    @Input()\n    set maxValue(value: number) {\n        if (value > 0) {\n            this.maxDate = new Date(value * 1000 * 60 * 60 * 24);\n        }\n    }\n\n    // Minimum in date\n    @Input()\n    set minDateValue(date: string) {\n        this.minDate = date ? new Date(date) : null;\n    }\n\n    // Maximum in date\n    @Input()\n    set maxDateValue(date: string) {\n        this.maxDate = date ? new Date(date) : null;\n    }\n\n    controlType = 'date';\n\n    @Input() form: FormGroup = null;\n    @Input() isActive = false;\n    @Input() showTitle = true;\n    @Input() renderTitle = true;\n    @Input() renderError = true;\n    @Input() renderSymbol = true;\n    @Input() layoutType: PepLayoutType = 'form';\n\n    @Output()\n    valueChange: EventEmitter<string> = new EventEmitter<string>();\n    @ViewChild('datetimePicker') datetimePicker: any;\n\n    @ViewChild('input') input: ElementRef;\n\n    standAlone = false;\n    isInEditMode = false;\n    dateModel: Moment;\n    minDate: Date;\n    maxDate: Date;\n    showDatepicker = false;\n    showTime = false;\n\n    constructor(\n        private adapter: DateAdapter<any>,\n        private element: ElementRef,\n        private layoutService: PepLayoutService,\n        private utilitiesService: PepUtilitiesService,\n        private customizationService: PepCustomizationService,\n        private renderer: Renderer2\n    ) { }\n\n    private setDefaultForm(): void {\n        const pepField = new PepDateField({\n            key: this.key,\n            value: this.value,\n            mandatory: this.mandatory,\n            readonly: this.readonly,\n            disabled: this.disabled,\n        });\n        this.form = this.customizationService.getDefaultFromGroup(pepField);\n    }\n\n    ngOnInit(): void {\n        if (this.form === null) {\n            this.standAlone = true;\n            this.setDefaultForm();\n\n            this.renderer.addClass(\n                this.element.nativeElement,\n                PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME\n            );\n\n            if (!this.renderTitle) {\n                this.renderer.addClass(\n                    this.element.nativeElement,\n                    PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME\n                );\n            }\n        }\n\n        // This is not working for the dateModel so I use set calure in the useFactory: getCalture function.\n        // const culture = this.layoutService.getCurrentLanguage();\n        // this.adapter.setLocale(culture);\n\n        this.setDateModel();\n    }\n\n    ngOnChanges(changes: any): void {\n        if (this.standAlone) {\n            this.setDefaultForm();\n        }\n    }\n\n    ngOnDestroy(): void {\n        //\n    }\n\n    private setFormattedValueFromModel(): void {\n        if (this.dateModel === null || !this.dateModel.isValid()) {\n            this.formattedValue = '';\n        } else {\n            const format = this.showTime\n                ? MY_DATE_FORMATS.display.datetimeInput\n                : MY_DATE_FORMATS.display.dateInput;\n            this.formattedValue = this.adapter.format(this.dateModel, format);\n        }\n    }\n\n    private setDateModel(): void {\n        if (\n            this.value === null ||\n            this.value === '' ||\n            this.value.indexOf('1900-1-1') >= 0 ||\n            this.value.indexOf('1900-01-01') >= 0 ||\n            this.value.indexOf('1970-1-1') >= 0 ||\n            this.value.indexOf('1970-01-01') >= 0\n        ) {\n            this._value = '';\n            this.dateModel = null;\n        } else {\n            const parseDate = this.utilitiesService.parseDate(this.value, this.showTime);\n            this.dateModel = utc(parseDate);\n        }\n\n        this.setFormattedValueFromModel();\n    }\n\n    openDatetimePicker(datetimePicker): void {\n        datetimePicker.opened = false;\n        datetimePicker.open();\n    }\n\n    onBlur(event: any): void {\n        // Don't remove the timeout cause a bug DI-17819.\n        setTimeout(() => {\n            if (this.isInEditMode && !this.datetimePicker.opened) {\n                this.isInEditMode = false;\n            }\n        }, 0);\n    }\n\n    onDateChange(event: MatDatetimepickerInputEvent<Moment>): void {\n        let value = '';\n        if (event.value != null) {\n            const date: Date = event.value.toDate();\n\n            value = this.utilitiesService.stringifyDate(date, this.showTime);\n\n            // Update the formatted value.\n            this.setFormattedValueFromModel();\n        }\n\n        this.customizationService.updateFormFieldValue(\n            this.form,\n            this.key,\n            // this.formattedValue\n            value\n        );\n\n        this.valueChange.emit(value);\n\n        setTimeout(() => {\n            if (this.isInEditMode) {\n                this.isInEditMode = false;\n            }\n        }, 0);\n    }\n\n    cardTemplateClicked(event): void {\n        this.isInEditMode = true;\n\n        setTimeout(() => {\n            this.input.nativeElement.focus();\n            this.openDatetimePicker(this.datetimePicker);\n        }, 0);\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule, FormsModule } from '@angular/forms';\n\nimport { MatCommonModule, MatNativeDateModule } from '@angular/material/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport {\n    MatDatetimepickerModule,\n    MatNativeDatetimeModule,\n} from '@mat-datetimepicker/core';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n    PepIconModule,\n    PepIconRegistry,\n    pepIconSystemEdit,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepTextboxIconModule } from '@pepperi-addons/ngx-lib/textbox-icon';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\n\nimport { PepDateComponent } from './date.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        ReactiveFormsModule,\n        FormsModule,\n        // Material modules,\n        MatCommonModule,\n        MatButtonModule,\n        MatNativeDateModule,\n        MatDatepickerModule,\n        MatDatetimepickerModule,\n        MatNativeDatetimeModule,\n        MatFormFieldModule,\n        MatInputModule,\n        MatIconModule,\n        // ngx-lib modules\n        PepNgxLibModule,\n        PepIconModule,\n        PepFieldTitleModule,\n        PepTextboxIconModule,\n    ],\n    exports: [PepDateComponent],\n    declarations: [PepDateComponent],\n})\nexport class PepDateModule {\n    constructor(private pepIconRegistry: PepIconRegistry) {\n        this.pepIconRegistry.registerIcons([pepIconSystemEdit]);\n    }\n}\n","/*\n * Public API Surface of ngx-lib/date\n */\nexport * from './date.module';\nexport * from './date.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n\nexport {MY_DATE_FORMATS as ɵc,MomentUtcDateAdapter as ɵa,MomentUtcDateTimeAdapter as ɵb} from './date.model';"],"names":[],"mappings":"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"}

package/fesm2015/pepperi-addons-ngx-lib-draggable-items.js

@@ -39,6 +39,7 @@ class DraggableItemsComponent {
         this.showSearch = false;
         this.title = '';
         this.titleType = 'regular';
+        this.titleSizeType = 'xl';
         this.itemPlaceholderType = 'none';
         this.dropAreaIds = [];
         this._items = [];
@@ -102,8 +103,8 @@ class DraggableItemsComponent {
 DraggableItemsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'pep-draggable-items',
-                template: "<div [id]=\"containerId\" class=\"pep-draggable-items-container\" cdkDropList [cdkDropListData]=\"filteredItems$ | async\"\r\n    cdkDropListSortingDisabled [cdkDropListConnectedTo]=\"dropAreaIds\">\r\n\r\n    <div *ngIf=\"titleType !== 'none'\" class=\"title-container\"\r\n        [ngClass]=\"{ 'pep-border-bottom': titleType === 'with-bottom-border'}\">\r\n        <label class=\"body-xl bold ellipsis\">{{title}}</label>\r\n        <pep-search *ngIf=\"showSearch && items?.length > numberItemsToShowSearch\" sizeType=\"sm\" shrink=\"always\"\r\n            [searchControl]=\"searchControl\" triggerOn=\"keydown\"></pep-search>\r\n    </div>\r\n\r\n    <pep-draggable-item *ngFor=\"let item of filteredItems$ | async; let i=index;\" class=\"draggble-item\"\r\n        [title]=\"item.title\" [data]=\"item.data\" [disabled]=\"item.disabled\" cdkDrag [cdkDragData]=\"item.data\"\r\n        [cdkDragDisabled]=\"item.disabled\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\">\r\n\r\n        <ng-container *ngIf=\"itemPlaceholderType !== 'regular'\">\r\n            <div class=\"placeholder-item {{itemPlaceholderType}}\" *cdkDragPlaceholder></div>\r\n        </ng-container>\r\n    </pep-draggable-item>\r\n</div>",
-                styles: [".draggble-item{margin-bottom:.5rem;margin-bottom:var(--pep-spacing-sm,.5rem);cursor:-webkit-grab;cursor:grab}.draggble-item.cdk-drag-disabled{cursor:not-allowed}.title-container{height:2.5rem;display:flex;flex-flow:row;justify-content:space-between}.title-container.pep-border-bottom{margin-bottom:1rem;margin-bottom:var(--pep-spacing-lg,1rem)}.placeholder-item{height:2.5rem;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);width:100%;margin-bottom:.5rem;margin-bottom:var(--pep-spacing-sm,.5rem)}.placeholder-item.none{opacity:0}.placeholder-item.weak{background:rgba(26,26,26,.12);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.12)}", ".placeholder-item.none{opacity:0}.placeholder-item.weak{background:rgba(26,26,26,.12);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.12)}"]
+                template: "<div [id]=\"containerId\" class=\"pep-draggable-items-container\" cdkDropList [cdkDropListData]=\"filteredItems$ | async\"\r\n    cdkDropListSortingDisabled [cdkDropListConnectedTo]=\"dropAreaIds\">\r\n\r\n    <div *ngIf=\"titleType !== 'none'\" class=\"title-container\"\r\n        [ngClass]=\"{ 'pep-border-bottom': titleType === 'with-bottom-border'}\">\r\n        <label class=\"title body-{{ titleSizeType }} bold ellipsis \" >{{title}}</label>\r\n        <pep-search *ngIf=\"showSearch && items?.length > numberItemsToShowSearch\" sizeType=\"sm\" shrink=\"always\"\r\n            [searchControl]=\"searchControl\" triggerOn=\"keydown\"></pep-search>\r\n    </div>\r\n\r\n    <div class=\"dragable-items-container\">\r\n        <pep-draggable-item *ngFor=\"let item of filteredItems$ | async; let i=index;\" class=\"draggble-item\"\r\n            [title]=\"item.title\" [data]=\"item.data\" [disabled]=\"item.disabled\" cdkDrag [cdkDragData]=\"item.data\"\r\n            [cdkDragDisabled]=\"item.disabled\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\">\r\n    \r\n            <ng-container *ngIf=\"itemPlaceholderType !== 'regular'\">\r\n                <div class=\"placeholder-item {{itemPlaceholderType}}\" *cdkDragPlaceholder></div>\r\n            </ng-container>\r\n        </pep-draggable-item>\r\n    </div>\r\n</div>",
+                styles: [".dragable-items-container{display:flex;flex-direction:column;grid-gap:.5rem;gap:.5rem;grid-gap:var(--pep-spacing-sm,.5rem);gap:var(--pep-spacing-sm,.5rem)}.dragable-items-container .draggble-item{cursor:-webkit-grab;cursor:grab}.dragable-items-container .draggble-item.cdk-drag-disabled{cursor:not-allowed}.title-container{height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);display:flex;flex-flow:row;justify-content:space-between}.title-container .title{align-self:center}.title-container.pep-border-bottom{margin-bottom:1rem;margin-bottom:var(--pep-spacing-lg,1rem)}.placeholder-item{height:2.5rem;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);width:100%}", ".placeholder-item.none{opacity:0}.placeholder-item.weak{background:rgba(26,26,26,.12);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.12)}"]
             },] }
 ];
 DraggableItemsComponent.ctorParameters = () => [];
@@ -112,6 +113,7 @@ DraggableItemsComponent.propDecorators = {
     showSearch: [{ type: Input }],
     title: [{ type: Input }],
     titleType: [{ type: Input }],
+    titleSizeType: [{ type: Input }],
     itemPlaceholderType: [{ type: Input }],
     dropAreaIds: [{ type: Input }],
     items: [{ type: Input }],

package/fesm2015/pepperi-addons-ngx-lib-draggable-items.js.map

@@ -1 +1 @@
-{"version":3,"file":"pepperi-addons-ngx-lib-draggable-items.js","sources":["../../../projects/ngx-lib/draggable-items/draggable-item/draggable-item.component.ts","../../../projects/ngx-lib/draggable-items/draggable-items.component.ts","../../../projects/ngx-lib/draggable-items/draggable-items.module.ts","../../../projects/ngx-lib/draggable-items/public-api.ts","../../../projects/ngx-lib/draggable-items/pepperi-addons-ngx-lib-draggable-items.ts"],"sourcesContent":["import { Component, EventEmitter, HostBinding, Input, OnInit, Output } from '@angular/core';\n\n@Component({\n    selector: 'pep-draggable-item',\n    templateUrl: './draggable-item.component.html',\n    styleUrls: ['./draggable-item.component.scss']\n})\nexport class DraggableItemComponent implements OnInit {\n    @Input() title = '';\n    @Input() data: any;\n    @Input() disabled = false;\n\n    constructor() {\n        //\n    }\n\n    ngOnInit(): void {\n        //\n    }\n}\n","import { CdkDragEnd, CdkDragStart } from '@angular/cdk/drag-drop';\nimport { Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { Observable, Subject } from 'rxjs';\nimport { map, startWith, takeUntil } from 'rxjs/operators';\nimport { IPepDraggableItem, PepDraggableItemPlaceholderType, PepDraggableItemsTitleType } from './draggable-items.model';\n\n@Component({\n    selector: 'pep-draggable-items',\n    templateUrl: './draggable-items.component.html',\n    styleUrls: ['./draggable-items.component.scss', './draggable-items.component.theme.scss']\n})\nexport class DraggableItemsComponent implements OnInit, OnDestroy {\n\n    @Input() containerId = 'draggable-container';\n    @Input() showSearch = false;\n    @Input() title = '';\n    @Input() titleType: PepDraggableItemsTitleType = 'regular';\n\n    @Input() itemPlaceholderType: PepDraggableItemPlaceholderType = 'none';\n\n    @Input() dropAreaIds = [];\n\n    private _items: Array<IPepDraggableItem> = [];\n    @Input()\n    set items(value: Array<IPepDraggableItem>) {\n        this._items = value;\n\n        if (this.items?.length > 0) {\n            this.searchControl.enable();\n        } else {\n            this.searchControl.disable();\n        }\n    }\n    get items(): Array<IPepDraggableItem> {\n        return this._items;\n    }\n\n    @Output() itemDragStarted: EventEmitter<CdkDragStart<IPepDraggableItem>> = new EventEmitter<CdkDragStart<IPepDraggableItem>>();\n    @Output() itemDragEnded: EventEmitter<CdkDragEnd<IPepDraggableItem>> = new EventEmitter<CdkDragEnd<IPepDraggableItem>>();\n\n    filteredItems$: Observable<any>;\n    searchControl = new FormControl();\n    numberItemsToShowSearch = 5;\n    private readonly _destroyed: Subject<void>;\n\n    constructor() {\n        //\n        this._destroyed = new Subject();\n    }\n\n    private filterItems(value: string): any[] {\n        const filterValue = value.toLowerCase();\n        return this.items.filter(\n            (opt) =>\n                opt.title &&\n                opt.title.toLowerCase().includes(filterValue.toLowerCase())\n        );\n    }\n\n    private changeCursorOnDragStart() {\n        document.body.classList.add('inheritCursors');\n        document.body.style.cursor = 'grabbing';\n    }\n\n    private changeCursorOnDragEnd() {\n        document.body.classList.remove('inheritCursors');\n        document.body.style.cursor = 'unset';\n    }\n\n    protected getDestroyer() {\n        return takeUntil(this._destroyed);\n    }\n\n    ngOnInit(): void {\n        // If there is no item disable the search.\n        if (this.items.length === 0) {\n            this.searchControl.disable();\n        }\n\n        // Filter the draggableItems by the search control.\n        this.filteredItems$ = this.searchControl.valueChanges.pipe(\n            this.getDestroyer(),\n            startWith<any>(''),\n            map((option) =>\n                typeof option === 'string' ? option : option && option.value\n            ),\n            map((value) => (value ? this.filterItems(value) : this.items))\n        );\n    }\n\n    ngOnDestroy(): void {\n        this._destroyed.next();\n        this._destroyed.complete();\n    }\n\n    onDragStart(event: CdkDragStart) {\n        this.changeCursorOnDragStart();\n        this.itemDragStarted.emit(event);\n    }\n\n    onDragEnd(event: CdkDragEnd) {\n        this.changeCursorOnDragEnd();\n        this.itemDragEnded.emit(event);\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\nimport { PepSearchModule } from '@pepperi-addons/ngx-lib/search';\n\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { DraggableItemsComponent } from './draggable-items.component';\nimport { DraggableItemComponent } from './draggable-item/draggable-item.component';\nimport {\n    PepIconModule,\n    PepIconRegistry,\n    pepIconSystemMove,\n} from '@pepperi-addons/ngx-lib/icon';\n\n@NgModule({\n    declarations: [\n        DraggableItemsComponent,\n        DraggableItemComponent\n    ],\n    imports: [\n        CommonModule,\n        ReactiveFormsModule,\n        PepNgxLibModule,\n        PepButtonModule,\n        PepIconModule,\n        PepSearchModule,\n        DragDropModule\n    ],\n    exports: [\n        DraggableItemsComponent,\n        DraggableItemComponent\n    ],\n})\nexport class PepDraggableItemsModule {\n    constructor(private pepIconRegistry: PepIconRegistry) {\n        this.pepIconRegistry.registerIcons([\n            pepIconSystemMove,\n        ]);\n    }\n}\n","/*\n * Public API Surface of ngx-lib/draggable-items\n */\nexport * from './draggable-item/draggable-item.component';\n\nexport * from './draggable-items.module';\nexport * from './draggable-items.model';\nexport * from './draggable-items.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"pepperi-addons-ngx-lib-draggable-items.js","sources":["../../../projects/ngx-lib/draggable-items/draggable-item/draggable-item.component.ts","../../../projects/ngx-lib/draggable-items/draggable-items.component.ts","../../../projects/ngx-lib/draggable-items/draggable-items.module.ts","../../../projects/ngx-lib/draggable-items/public-api.ts","../../../projects/ngx-lib/draggable-items/pepperi-addons-ngx-lib-draggable-items.ts"],"sourcesContent":["import { Component, EventEmitter, HostBinding, Input, OnInit, Output } from '@angular/core';\n\n@Component({\n    selector: 'pep-draggable-item',\n    templateUrl: './draggable-item.component.html',\n    styleUrls: ['./draggable-item.component.scss']\n})\nexport class DraggableItemComponent implements OnInit {\n    @Input() title = '';\n    @Input() data: any;\n    @Input() disabled = false;\n\n    constructor() {\n        //\n    }\n\n    ngOnInit(): void {\n        //\n    }\n}\n","import { CdkDragEnd, CdkDragStart } from '@angular/cdk/drag-drop';\nimport { Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { Observable, Subject } from 'rxjs';\nimport { map, startWith, takeUntil } from 'rxjs/operators';\nimport { IPepDraggableItem, PepDraggableItemPlaceholderType, PepDraggableItemsTitleType } from './draggable-items.model';\nimport { PepSizeType } from '@pepperi-addons/ngx-lib';\n@Component({\n    selector: 'pep-draggable-items',\n    templateUrl: './draggable-items.component.html',\n    styleUrls: ['./draggable-items.component.scss', './draggable-items.component.theme.scss']\n})\nexport class DraggableItemsComponent implements OnInit, OnDestroy {\n\n    @Input() containerId = 'draggable-container';\n    @Input() showSearch = false;\n    @Input() title = '';\n    @Input() titleType: PepDraggableItemsTitleType = 'regular';\n    @Input() titleSizeType: PepSizeType = 'xl';\n\n    @Input() itemPlaceholderType: PepDraggableItemPlaceholderType = 'none';\n\n    @Input() dropAreaIds = [];\n\n    private _items: Array<IPepDraggableItem> = [];\n    @Input()\n    set items(value: Array<IPepDraggableItem>) {\n        this._items = value;\n\n        if (this.items?.length > 0) {\n            this.searchControl.enable();\n        } else {\n            this.searchControl.disable();\n        }\n    }\n    get items(): Array<IPepDraggableItem> {\n        return this._items;\n    }\n\n    @Output() itemDragStarted: EventEmitter<CdkDragStart<IPepDraggableItem>> = new EventEmitter<CdkDragStart<IPepDraggableItem>>();\n    @Output() itemDragEnded: EventEmitter<CdkDragEnd<IPepDraggableItem>> = new EventEmitter<CdkDragEnd<IPepDraggableItem>>();\n\n    filteredItems$: Observable<any>;\n    searchControl = new FormControl();\n    numberItemsToShowSearch = 5;\n    private readonly _destroyed: Subject<void>;\n\n    constructor() {\n        //\n        this._destroyed = new Subject();\n    }\n\n    private filterItems(value: string): any[] {\n        const filterValue = value.toLowerCase();\n        return this.items.filter(\n            (opt) =>\n                opt.title &&\n                opt.title.toLowerCase().includes(filterValue.toLowerCase())\n        );\n    }\n\n    private changeCursorOnDragStart() {\n        document.body.classList.add('inheritCursors');\n        document.body.style.cursor = 'grabbing';\n    }\n\n    private changeCursorOnDragEnd() {\n        document.body.classList.remove('inheritCursors');\n        document.body.style.cursor = 'unset';\n    }\n\n    protected getDestroyer() {\n        return takeUntil(this._destroyed);\n    }\n\n    ngOnInit(): void {\n        // If there is no item disable the search.\n        if (this.items.length === 0) {\n            this.searchControl.disable();\n        }\n\n        // Filter the draggableItems by the search control.\n        this.filteredItems$ = this.searchControl.valueChanges.pipe(\n            this.getDestroyer(),\n            startWith<any>(''),\n            map((option) =>\n                typeof option === 'string' ? option : option && option.value\n            ),\n            map((value) => (value ? this.filterItems(value) : this.items))\n        );\n    }\n\n    ngOnDestroy(): void {\n        this._destroyed.next();\n        this._destroyed.complete();\n    }\n\n    onDragStart(event: CdkDragStart) {\n        this.changeCursorOnDragStart();\n        this.itemDragStarted.emit(event);\n    }\n\n    onDragEnd(event: CdkDragEnd) {\n        this.changeCursorOnDragEnd();\n        this.itemDragEnded.emit(event);\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\nimport { PepSearchModule } from '@pepperi-addons/ngx-lib/search';\n\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { DraggableItemsComponent } from './draggable-items.component';\nimport { DraggableItemComponent } from './draggable-item/draggable-item.component';\nimport {\n    PepIconModule,\n    PepIconRegistry,\n    pepIconSystemMove,\n} from '@pepperi-addons/ngx-lib/icon';\n\n@NgModule({\n    declarations: [\n        DraggableItemsComponent,\n        DraggableItemComponent\n    ],\n    imports: [\n        CommonModule,\n        ReactiveFormsModule,\n        PepNgxLibModule,\n        PepButtonModule,\n        PepIconModule,\n        PepSearchModule,\n        DragDropModule\n    ],\n    exports: [\n        DraggableItemsComponent,\n        DraggableItemComponent\n    ],\n})\nexport class PepDraggableItemsModule {\n    constructor(private pepIconRegistry: PepIconRegistry) {\n        this.pepIconRegistry.registerIcons([\n            pepIconSystemMove,\n        ]);\n    }\n}\n","/*\n * Public API Surface of ngx-lib/draggable-items\n */\nexport * from './draggable-item/draggable-item.component';\n\nexport * from './draggable-items.module';\nexport * from './draggable-items.model';\nexport * from './draggable-items.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2015/pepperi-addons-ngx-lib-files-uploader.js

@@ -44,9 +44,10 @@ class PepFilesUploaderComponent {
             }
             const reader = new FileReader();
             reader.onload = (event) => {
-                const fileNameArray = item._file.name.split('.');
-                const fileName = fileNameArray[0];
-                const fileExt = fileNameArray[1]; // item._file.name.split('.').pop();
+                // fix for DI-19376 - when there is a dot on the file name (not include the extantion one)
+                //const fileNameArray = item._file.name.split('.');
+                const fileName = this.getFileName(item._file.name); //fileNameArray[0];
+                const fileExt = this.getFileExtension(item._file.name); //fileNameArray[1]; // item._file.name.split('.').pop();
                 const target = event.target || event.srcElement;
                 const fileStr = target.result;
                 const errorMsg = this.isValidFile(fileStr, fileExt, this.acceptedExtensions, this.sizeLimitMB);
@@ -79,6 +80,16 @@ class PepFilesUploaderComponent {
     get rowSpan() {
         return this._rowSpan;
     }
+    getFileName(filename) {
+        // get file name
+        const fileName = filename.substring(0, filename.lastIndexOf('.'));
+        return fileName;
+    }
+    getFileExtension(filename) {
+        // get file extension
+        const extension = filename.substring(filename.lastIndexOf('.') + 1, filename.length);
+        return extension;
+    }
     ngOnInit() {
         /*this.uploader.onCompleteAll = () => {
             this.fileInput.nativeElement.value = '';

package/fesm2015/pepperi-addons-ngx-lib-files-uploader.js.map

@@ -1 +1 @@
-{"version":3,"file":"pepperi-addons-ngx-lib-files-uploader.js","sources":["../../../projects/ngx-lib/files-uploader/files-uploader.component.ts","../../../projects/ngx-lib/files-uploader/files-uploader.module.ts","../../../projects/ngx-lib/files-uploader/public-api.ts","../../../projects/ngx-lib/files-uploader/pepperi-addons-ngx-lib-files-uploader.ts"],"sourcesContent":["import { Observable } from 'rxjs';\nimport {\n    Component,\n    OnInit,\n    Injectable,\n    Input,\n    Output,\n    EventEmitter,\n    ViewChild,\n    ChangeDetectorRef,\n    ChangeDetectionStrategy,\n    Optional,\n} from '@angular/core';\nimport { TranslateService } from '@ngx-translate/core';\nimport { FileUploader } from 'ng2-file-upload';\nimport { FormGroup } from '@angular/forms';\nimport {\n    PepFileService,\n    PepLayoutType,\n    PepCustomizationService,\n    PepHorizontalAlignment,\n    DEFAULT_HORIZONTAL_ALIGNMENT,\n    IPepFieldClickEvent,\n} from '@pepperi-addons/ngx-lib';\nimport {\n    PepDialogService,\n    PepDialogData,\n} from '@pepperi-addons/ngx-lib/dialog';\nimport { pepIconNoImage2 } from '@pepperi-addons/ngx-lib/icon';\n\nexport interface IPepFileChangeEvent {\n    acceptedExtensions?: string;\n    fileStr?: string;\n    fileName?: string;\n    fileExt?: string;\n}\n\n@Component({\n    selector: 'pep-files-uploader',\n    templateUrl: './files-uploader.component.html',\n    styleUrls: ['./files-uploader.component.scss', './files-uploader.component.theme.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\n@Injectable()\nexport class PepFilesUploaderComponent implements OnInit {\n    @Input() key = '';\n    @Input() src = '';\n    @Input() label = '';\n    @Input() mandatory = false;\n    @Input() disabled = false;\n    @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n\n    private _rowSpan = 1;\n    @Input()\n    set rowSpan(value) {\n        this._rowSpan = value;\n    }\n    get rowSpan(): number {\n        return this._rowSpan;\n    }\n\n    @Input() controlType = '';\n    @Input() sizeLimitMB = 5;\n\n    @Input() form: FormGroup;\n    @Input() standAlone = false;\n    @Input() acceptedExtensions = 'bmp,jpg,jpeg,png,gif,ico,svg,html,css';\n    @Input() layoutType: PepLayoutType = 'form';\n\n    @Output()\n    fileChange: EventEmitter<IPepFileChangeEvent> = new EventEmitter<IPepFileChangeEvent>();\n    @Output()\n    elementClick: EventEmitter<IPepFieldClickEvent> = new EventEmitter<IPepFieldClickEvent>();\n\n    @ViewChild('fileInput') fileInput: any;\n    @ViewChild('imagePreview') imagePreview: any;\n\n    @Input() fieldHeight = '';\n\n    // multiple = false;\n    uploader: FileUploader;\n    progress = 0;\n    // response: string;\n    intervalID: any = null;\n\n    constructor(\n        private dialogService: PepDialogService,\n        private customizationService: PepCustomizationService,\n        private fileService: PepFileService,\n        private translate: TranslateService\n    ) {\n        this.uploader = new FileUploader({ removeAfterUpload: true });\n\n        this.uploader.onAfterAddingFile = (item) => {\n            if (this.fileInput?.nativeElement) {\n                this.fileInput.nativeElement.value = '';\n            }\n            const reader = new FileReader();\n\n            reader.onload = (event: any) => {\n                const fileNameArray = item._file.name.split('.');\n                const fileName = fileNameArray[0];\n                const fileExt = fileNameArray[1]; // item._file.name.split('.').pop();\n                const target = event.target || event.srcElement;\n                const fileStr = target.result;\n                const errorMsg = this.isValidFile(\n                    fileStr,\n                    fileExt,\n                    this.acceptedExtensions,\n                    this.sizeLimitMB\n                );\n                if (errorMsg === '') {\n                    this.src = fileStr;\n                    // this.setIntervalX(25, 75);\n                    // this.setProgress(5);\n                    this.fileChange.emit({\n                        acceptedExtensions: this.acceptedExtensions,\n                        fileStr,\n                        fileName,\n                        fileExt,\n                    });\n                } else {\n                    const title = this.translate.instant(\n                        'MESSAGES.TITLE_NOTICE'\n                    );\n                    const data = new PepDialogData({\n                        title,\n                        content: errorMsg,\n                    });\n                    this.dialogService.openDefaultDialog(data);\n                }\n            };\n            reader.readAsDataURL(item._file);\n        };\n    }\n\n    ngOnInit(): void {\n        /*this.uploader.onCompleteAll = () => {\n            this.fileInput.nativeElement.value = '';\n        }*/\n    }\n\n    isValidFile(\n        fileStr,\n        fileExtension,\n        acceptedExtensions,\n        sizeLimitMB = 5\n    ): string {\n        const file: any = fileStr;\n        let fileSize = 0;\n        let content = '';\n        // check if got file as Base64\n        if (typeof fileStr === 'string' && fileStr.indexOf('data:') > -1) {\n            fileSize = this.getBase64FileSize(fileStr);\n        } else {\n            fileSize = file.size;\n        }\n        // check the size and the extension\n        const sizeOK: boolean =\n            fileSize !== -1 && file != null && fileSize < sizeLimitMB * 1048576;\n        const extensionOK =\n            acceptedExtensions === '' ||\n            acceptedExtensions.indexOf(fileExtension.toLowerCase()) !== -1;\n        if (!extensionOK) {\n            content = this.translate.instant(\n                'MESSAGES.ERROR_FAILD_TO_LOAD_EXTENSION',\n                {\n                    fileExtension:\n                        \"<label class='uppercase bold'>\" +\n                        fileExtension +\n                        '</label>',\n                }\n            );\n        } else if (!sizeOK) {\n            content = this.translate.instant(\n                'MESSAGES.ERROR_FAILD_TO_LOAD_SIZE',\n                {\n                    fileSize:\n                        \"<label class='uppercase bold'>\" +\n                        sizeLimitMB.toString() +\n                        '</label>',\n                }\n            );\n        }\n        return content;\n    }\n\n    getBase64FileSize(base64String: string): number {\n        let fileSize: number;\n\n        try {\n            base64String = base64String.substr(base64String.indexOf(',') + 1);\n            fileSize = atob(base64String).length;\n        } catch (e) {\n            fileSize = -1;\n        }\n\n        return fileSize; // return size in bytes;\n    }\n\n    // setIntervalX(delay, repetitions): void {\n    //     let x = 0;\n    //     this.intervalID = window.setInterval(() => {\n    //         // this.setProgress(this.progress + 5);\n    //         if (++x === repetitions || this.uploader.progress >= 100) {\n    //             window.clearInterval(this.intervalID);\n    //         }\n    //     }, delay);\n    // }\n\n    errorHandler(event): void {\n        event.target.src = this.fileService.getSvgAsImageSrc(\n            pepIconNoImage2.data\n        );\n        event.target.title = this.translate.instant('IMAGE.NO_IMAGE');\n    }\n\n    private setProgress(progress): void {\n        this.progress = progress;\n        this.uploader.progress = progress;\n    }\n\n    deleteFile(): void {\n        this.uploader.clearQueue();\n        window.clearInterval(this.intervalID);\n        this.setProgress(0);\n\n        const empltValue = '';\n        this.src = empltValue;\n\n        this.fileChange.emit(null);\n\n        // this.fileChange.emit({\n        //     acceptedExtensions: this.acceptedExtensions,\n        //     fileStr: null,\n        //     fileExt: null,\n        // });\n    }\n\n    onElementClicked(event): void {\n        this.elementClick.emit({\n            key: this.key,\n            controlType: this.controlType,\n            eventWhich: event.which,\n        });\n    }\n\n    onClick_ChooseFile(event): void {\n        if (this.fileInput?.nativeElement) {\n            this.fileInput.nativeElement.click();\n        }\n    }\n\n    onKeyPress_ChooseFile(event): void {\n        const e = event as KeyboardEvent;\n\n        if ([13, 32].indexOf(e.which) !== -1) {\n            if (this.fileInput?.nativeElement) {\n                this.fileInput.nativeElement.click();\n            }\n        }\n        e.preventDefault();\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { FileUploadModule } from 'ng2-file-upload';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n    PepIconModule,\n    PepIconRegistry,\n    pepIconSystemBin,\n    pepIconSystemAttach,\n    pepIconSystemFileUploadCloud,\n    pepIconSystemProcessing,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';\n\nimport { PepFilesUploaderComponent } from './files-uploader.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        ReactiveFormsModule,\n        // Material modules,\n        MatCommonModule,\n        MatButtonModule,\n        MatFormFieldModule,\n        MatInputModule,\n        MatIconModule,\n        // External modules\n        FileUploadModule,\n        // ngx-lib modules\n        PepNgxLibModule,\n        PepIconModule,\n        PepDialogModule,\n    ],\n    exports: [PepFilesUploaderComponent],\n    declarations: [PepFilesUploaderComponent],\n})\nexport class PepFilesUploaderModule {\n    constructor(private pepIconRegistry: PepIconRegistry) {\n        this.pepIconRegistry.registerIcons([\n            pepIconSystemBin,\n            pepIconSystemAttach,\n            pepIconSystemFileUploadCloud,\n            pepIconSystemProcessing,\n        ]);\n    }\n}\n","/*\n * Public API Surface of ngx-lib/files-uploader\n */\nexport * from './files-uploader.module';\nexport * from './files-uploader.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"pepperi-addons-ngx-lib-files-uploader.js","sources":["../../../projects/ngx-lib/files-uploader/files-uploader.component.ts","../../../projects/ngx-lib/files-uploader/files-uploader.module.ts","../../../projects/ngx-lib/files-uploader/public-api.ts","../../../projects/ngx-lib/files-uploader/pepperi-addons-ngx-lib-files-uploader.ts"],"sourcesContent":["import { Observable } from 'rxjs';\nimport {\n    Component,\n    OnInit,\n    Injectable,\n    Input,\n    Output,\n    EventEmitter,\n    ViewChild,\n    ChangeDetectorRef,\n    ChangeDetectionStrategy,\n    Optional,\n} from '@angular/core';\nimport { TranslateService } from '@ngx-translate/core';\nimport { FileUploader } from 'ng2-file-upload';\nimport { FormGroup } from '@angular/forms';\nimport {\n    PepFileService,\n    PepLayoutType,\n    PepCustomizationService,\n    PepHorizontalAlignment,\n    DEFAULT_HORIZONTAL_ALIGNMENT,\n    IPepFieldClickEvent,\n} from '@pepperi-addons/ngx-lib';\nimport {\n    PepDialogService,\n    PepDialogData,\n} from '@pepperi-addons/ngx-lib/dialog';\nimport { pepIconNoImage2 } from '@pepperi-addons/ngx-lib/icon';\n\nexport interface IPepFileChangeEvent {\n    acceptedExtensions?: string;\n    fileStr?: string;\n    fileName?: string;\n    fileExt?: string;\n}\n\n@Component({\n    selector: 'pep-files-uploader',\n    templateUrl: './files-uploader.component.html',\n    styleUrls: ['./files-uploader.component.scss', './files-uploader.component.theme.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\n@Injectable()\nexport class PepFilesUploaderComponent implements OnInit {\n    @Input() key = '';\n    @Input() src = '';\n    @Input() label = '';\n    @Input() mandatory = false;\n    @Input() disabled = false;\n    @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n\n    private _rowSpan = 1;\n    @Input()\n    set rowSpan(value) {\n        this._rowSpan = value;\n    }\n    get rowSpan(): number {\n        return this._rowSpan;\n    }\n\n    @Input() controlType = '';\n    @Input() sizeLimitMB = 5;\n\n    @Input() form: FormGroup;\n    @Input() standAlone = false;\n    @Input() acceptedExtensions = 'bmp,jpg,jpeg,png,gif,ico,svg,html,css';\n    @Input() layoutType: PepLayoutType = 'form';\n\n    @Output()\n    fileChange: EventEmitter<IPepFileChangeEvent> = new EventEmitter<IPepFileChangeEvent>();\n    @Output()\n    elementClick: EventEmitter<IPepFieldClickEvent> = new EventEmitter<IPepFieldClickEvent>();\n\n    @ViewChild('fileInput') fileInput: any;\n    @ViewChild('imagePreview') imagePreview: any;\n\n    @Input() fieldHeight = '';\n\n    // multiple = false;\n    uploader: FileUploader;\n    progress = 0;\n    // response: string;\n    intervalID: any = null;\n\n    constructor(\n        private dialogService: PepDialogService,\n        private customizationService: PepCustomizationService,\n        private fileService: PepFileService,\n        private translate: TranslateService\n    ) {\n        this.uploader = new FileUploader({ removeAfterUpload: true });\n\n        this.uploader.onAfterAddingFile = (item) => {\n            if (this.fileInput?.nativeElement) {\n                this.fileInput.nativeElement.value = '';\n            }\n            const reader = new FileReader();\n\n            reader.onload = (event: any) => {\n                // fix for DI-19376 - when there is a dot on the file name (not include the extantion one)\n                //const fileNameArray = item._file.name.split('.');\n                const fileName = this.getFileName(item._file.name); //fileNameArray[0];\n                const fileExt = this.getFileExtension(item._file.name); //fileNameArray[1]; // item._file.name.split('.').pop();\n                const target = event.target || event.srcElement;\n                const fileStr = target.result;\n                const errorMsg = this.isValidFile(\n                    fileStr,\n                    fileExt,\n                    this.acceptedExtensions,\n                    this.sizeLimitMB\n                );\n                if (errorMsg === '') {\n                    this.src = fileStr;\n                    // this.setIntervalX(25, 75);\n                    // this.setProgress(5);\n                    this.fileChange.emit({\n                        acceptedExtensions: this.acceptedExtensions,\n                        fileStr,\n                        fileName,\n                        fileExt,\n                    });\n                } else {\n                    const title = this.translate.instant(\n                        'MESSAGES.TITLE_NOTICE'\n                    );\n                    const data = new PepDialogData({\n                        title,\n                        content: errorMsg,\n                    });\n                    this.dialogService.openDefaultDialog(data);\n                }\n            };\n            reader.readAsDataURL(item._file);\n        };\n    }\n\n    getFileName(filename){\n        // get file name\n        const fileName = filename.substring(0,filename.lastIndexOf('.'));\n        return fileName;\n    }\n\n    getFileExtension(filename){\n        // get file extension\n        const extension = filename.substring(filename.lastIndexOf('.') + 1, filename.length);\n        return extension;\n    }\n    ngOnInit(): void {\n        /*this.uploader.onCompleteAll = () => {\n            this.fileInput.nativeElement.value = '';\n        }*/\n    }\n\n    isValidFile(\n        fileStr,\n        fileExtension,\n        acceptedExtensions,\n        sizeLimitMB = 5\n    ): string {\n        const file: any = fileStr;\n        let fileSize = 0;\n        let content = '';\n        // check if got file as Base64\n        if (typeof fileStr === 'string' && fileStr.indexOf('data:') > -1) {\n            fileSize = this.getBase64FileSize(fileStr);\n        } else {\n            fileSize = file.size;\n        }\n        // check the size and the extension\n        const sizeOK: boolean =\n            fileSize !== -1 && file != null && fileSize < sizeLimitMB * 1048576;\n        const extensionOK =\n            acceptedExtensions === '' ||\n            acceptedExtensions.indexOf(fileExtension.toLowerCase()) !== -1;\n        if (!extensionOK) {\n            content = this.translate.instant(\n                'MESSAGES.ERROR_FAILD_TO_LOAD_EXTENSION',\n                {\n                    fileExtension:\n                        \"<label class='uppercase bold'>\" +\n                        fileExtension +\n                        '</label>',\n                }\n            );\n        } else if (!sizeOK) {\n            content = this.translate.instant(\n                'MESSAGES.ERROR_FAILD_TO_LOAD_SIZE',\n                {\n                    fileSize:\n                        \"<label class='uppercase bold'>\" +\n                        sizeLimitMB.toString() +\n                        '</label>',\n                }\n            );\n        }\n        return content;\n    }\n\n    getBase64FileSize(base64String: string): number {\n        let fileSize: number;\n\n        try {\n            base64String = base64String.substr(base64String.indexOf(',') + 1);\n            fileSize = atob(base64String).length;\n        } catch (e) {\n            fileSize = -1;\n        }\n\n        return fileSize; // return size in bytes;\n    }\n\n    // setIntervalX(delay, repetitions): void {\n    //     let x = 0;\n    //     this.intervalID = window.setInterval(() => {\n    //         // this.setProgress(this.progress + 5);\n    //         if (++x === repetitions || this.uploader.progress >= 100) {\n    //             window.clearInterval(this.intervalID);\n    //         }\n    //     }, delay);\n    // }\n\n    errorHandler(event): void {\n        event.target.src = this.fileService.getSvgAsImageSrc(\n            pepIconNoImage2.data\n        );\n        event.target.title = this.translate.instant('IMAGE.NO_IMAGE');\n    }\n\n    private setProgress(progress): void {\n        this.progress = progress;\n        this.uploader.progress = progress;\n    }\n\n    deleteFile(): void {\n        this.uploader.clearQueue();\n        window.clearInterval(this.intervalID);\n        this.setProgress(0);\n\n        const empltValue = '';\n        this.src = empltValue;\n\n        this.fileChange.emit(null);\n\n        // this.fileChange.emit({\n        //     acceptedExtensions: this.acceptedExtensions,\n        //     fileStr: null,\n        //     fileExt: null,\n        // });\n    }\n\n    onElementClicked(event): void {\n        this.elementClick.emit({\n            key: this.key,\n            controlType: this.controlType,\n            eventWhich: event.which,\n        });\n    }\n\n    onClick_ChooseFile(event): void {\n        if (this.fileInput?.nativeElement) {\n            this.fileInput.nativeElement.click();\n        }\n    }\n\n    onKeyPress_ChooseFile(event): void {\n        const e = event as KeyboardEvent;\n\n        if ([13, 32].indexOf(e.which) !== -1) {\n            if (this.fileInput?.nativeElement) {\n                this.fileInput.nativeElement.click();\n            }\n        }\n        e.preventDefault();\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { FileUploadModule } from 'ng2-file-upload';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n    PepIconModule,\n    PepIconRegistry,\n    pepIconSystemBin,\n    pepIconSystemAttach,\n    pepIconSystemFileUploadCloud,\n    pepIconSystemProcessing,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';\n\nimport { PepFilesUploaderComponent } from './files-uploader.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        ReactiveFormsModule,\n        // Material modules,\n        MatCommonModule,\n        MatButtonModule,\n        MatFormFieldModule,\n        MatInputModule,\n        MatIconModule,\n        // External modules\n        FileUploadModule,\n        // ngx-lib modules\n        PepNgxLibModule,\n        PepIconModule,\n        PepDialogModule,\n    ],\n    exports: [PepFilesUploaderComponent],\n    declarations: [PepFilesUploaderComponent],\n})\nexport class PepFilesUploaderModule {\n    constructor(private pepIconRegistry: PepIconRegistry) {\n        this.pepIconRegistry.registerIcons([\n            pepIconSystemBin,\n            pepIconSystemAttach,\n            pepIconSystemFileUploadCloud,\n            pepIconSystemProcessing,\n        ]);\n    }\n}\n","/*\n * Public API Surface of ngx-lib/files-uploader\n */\nexport * from './files-uploader.module';\nexport * from './files-uploader.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2015/pepperi-addons-ngx-lib-form.js

@@ -8,7 +8,7 @@ import { MatGridListModule } from '@angular/material/grid-list';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { SignaturePadModule } from 'ngx-signaturepad';
-import { DEFAULT_HORIZONTAL_ALIGNMENT, X_ALIGNMENT_TYPE, DEFAULT_VERTICAL_ALIGNMENT, Y_ALIGNMENT_TYPE, PepTextboxField, PepSelectField, PepInternalMenuField, FIELD_TYPE, PepQuantitySelectorField, PepSeparatorField, PepInternalButtonField, PepCheckboxField, PepDateField, PepRichHtmlTextareaField, PepTextareaField, PepImagesField, PepImageField, PepSignatureField, PepAttachmentField, PepInternalCaruselField, PepInternalPageField, PepIndicatorsField, PepAddressField, PepCustomizationService, PepPlaceholderField, PepLayoutService, PepHttpService, PepScreenSizeType, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
+import { DEFAULT_HORIZONTAL_ALIGNMENT, X_ALIGNMENT_TYPE, DEFAULT_VERTICAL_ALIGNMENT, Y_ALIGNMENT_TYPE, PepTextboxField, PepSelectField, PepInternalMenuField, FIELD_TYPE, PepQuantitySelectorField, PepSeparatorField, PepInternalButtonField, PepCheckboxField, PepDateField, PepRichHtmlTextareaField, PepTextareaField, PepLinkField, PepImagesField, PepImageField, PepSignatureField, PepAttachmentField, PepInternalCaruselField, PepInternalPageField, PepIndicatorsField, PepAddressField, PepCustomizationService, PepPlaceholderField, PepLayoutService, PepHttpService, PepScreenSizeType, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
 import { pepIconSystemBin, pepIconSystemEdit, pepIconSystemMenu, pepIconNumberPlus, pepIconIndicatorDotPlaceholder, PepIconModule, PepIconRegistry } from '@pepperi-addons/ngx-lib/icon';
 import { PepDialogData, PepDialogService, PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';
 import { PepAddressModule } from '@pepperi-addons/ngx-lib/address';
@@ -26,6 +26,7 @@ import { PepSeparatorModule } from '@pepperi-addons/ngx-lib/separator';
 import { PepSignatureModule } from '@pepperi-addons/ngx-lib/signature';
 import { PepTextareaModule } from '@pepperi-addons/ngx-lib/textarea';
 import { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';
+import { PepLinkModule } from '@pepperi-addons/ngx-lib/link';
 import { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';
 import { PepGroupButtonsModule } from '@pepperi-addons/ngx-lib/group-buttons';
 import { TranslateService } from '@ngx-translate/core';
@@ -376,7 +377,7 @@ class PepFormComponent {
                 }
                 case FIELD_TYPE.Link: {
                     options.type = 'link';
-                    customField = new PepTextboxField(options);
+                    customField = new PepLinkField(options);
                     break;
                 }
                 case FIELD_TYPE.InternalLink:
@@ -423,12 +424,12 @@ class PepFormComponent {
                 }
                 case FIELD_TYPE.Email: {
                     options.type = 'email';
-                    customField = new PepTextboxField(options);
+                    customField = new PepLinkField(options);
                     break;
                 }
                 case FIELD_TYPE.Phone: {
                     options.type = 'phone';
-                    customField = new PepTextboxField(options);
+                    customField = new PepLinkField(options);
                     break;
                 }
                 case FIELD_TYPE.Duration: {
@@ -909,6 +910,14 @@ class PepFormComponent {
         if (customField instanceof PepQuantitySelectorField) {
             const notificationInfo = updatedField.NotificationInfo;
             options.notificationInfo = notificationInfo;
+            // Change type if it's change (only for allowDecimal).
+            let allowDecimal = false;
+            if (updatedField.FieldType === FIELD_TYPE.NumberRealQuantitySelector ||
+                updatedField.FieldType === FIELD_TYPE.NumberReal ||
+                updatedField.FieldType === FIELD_TYPE.NumberRealForMatrix) {
+                allowDecimal = true;
+            }
+            options.allowDecimal = allowDecimal;
         }
         else if (customField instanceof PepSelectField) {
             options.options = this.convertOptionalValues(updatedField.OptionalValues);
@@ -1305,7 +1314,7 @@ class PepFieldGeneratorComponent {
 PepFieldGeneratorComponent.decorators = [
     { type: Component, args: [{
                 selector: 'pep-field-generator',
-                template: "<ng-container [ngSwitch]=\"field.controlType\" [formGroup]=\"form\">\n\n    <pep-address *ngSwitchCase=\"'address'\" [form]=\"form\" [key]=\"field.key\" [formattedValue]=\"field.formattedValue\"\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [groupFields]=\"field.groupFields\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (addressValueChange)=\"onAddressValueChanged($event, field)\">\n    </pep-address>\n\n    <pep-attachment *ngSwitchCase=\"'attachment'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\"\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [isActive]=\"isActive\" [showTitle]=\"showTitle\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\n        (fileChange)=\"onFileChanged($event, field)\">\n    </pep-attachment>\n\n    <pep-checkbox *ngSwitchCase=\"'checkbox'\" [form]=\"form\" [key]=\"field.key\"\n        [value]=\"(field.value | lowercase) == 'true' || field.value == '1' ? true : false\" [label]=\"field.label\"\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [additionalValue]=\"field.additionalValue\"\n        [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-checkbox>\n\n    <pep-date *ngSwitchCase=\"'date'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [textColor]=\"field.textColor\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [minValue]=\"field.minValue\"\n        [maxValue]=\"field.maxValue\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-date>\n\n    <pep-images-filmstrip *ngSwitchCase=\"'images'\" [uid]=\"uid\" [form]=\"form\" [key]=\"field.key\" [label]=\"field.label\"\n        [showTitle]=\"showTitle\" [rowSpan]=\"field.rowSpan\" [value]=\"field.value\" [layoutType]=\"layoutType\">\n    </pep-images-filmstrip>\n\n    <pep-image *ngSwitchCase=\"'image'\" [uid]=\"uid\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.formattedValue\"\n        [srcLarge]=\"field.value\" [options]=\"field.options\" [label]=\"field.label\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [indicatorsField]=\"field.indicatorsField\" [menuField]=\"field.menuField\"\n        [hasCampaignField]=\"field.hasCampaignField\" [sizeLimitMB]=\"field.sizeLimitMB\" [isActive]=\"isActive\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\n        (fileChange)=\"onFileChanged($event, field)\">\n    </pep-image>\n\n    <pep-quantity-selector *ngSwitchCase=\"'qs'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [textColor]=\"field.textColor\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [allowDecimal]=\"field.allowDecimal\"\n        [additionalValue]=\"field.additionalValue\" [notificationInfo]=\"field.notificationInfo\" [isActive]=\"isActive\"\n        [layoutType]=\"layoutType\" [showTitle]=\"showTitle\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" (formValidationChange)=\"onFormValidationChanged($event)\"\n        (elementClick)=\"onClick($event)\">\n    </pep-quantity-selector>\n\n    <pep-rich-html-textarea *ngSwitchCase=\"'richhtmltextarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n        [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-rich-html-textarea>\n\n    <pep-select *ngSwitchCase=\"'select'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [label]=\"field.label\"\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [options]=\"field.options\" [showTitle]=\"showTitle\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (valueChange)=\"onValueChanged($event, field)\"\n        (formValidationChange)=\"onFormValidationChanged($event)\" [isActive]=\"isActive\">\n    </pep-select>\n\n    <pep-separator *ngSwitchCase=\"'separator'\" [form]=\"form\" [key]=\"field.key\" [label]=\"field.label\"\n        [xAlignment]=\"field.xAlignment\" [layoutType]=\"layoutType\" [visible]=\"field.visible\">\n    </pep-separator>\n\n    <pep-signature *ngSwitchCase=\"'signature'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\" [label]=\"field.label\"\n        [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [isActive]=\"isActive\" [layoutType]=\"layoutType\"\n        [visible]=\"field.visible\" (fileChange)=\"onFileChanged($event, field)\">\n    </pep-signature>\n\n    <pep-textarea *ngSwitchCase=\"'textarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [label]=\"field.label\"\n        [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-textarea>\n\n    <pep-textbox *ngSwitchCase=\"'textbox'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [placeholder]=\"field.placeholder\"\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\"\n        (valueChange)=\"onValueChanged($event, field)\" (formValidationChange)=\"onFormValidationChanged($event)\"\n        [isActive]=\"isActive\" [visible]=\"field.visible\">\n    </pep-textbox>\n\n    <pep-indicators *ngSwitchCase=\"'indicators'\" [key]=\"field.key\" [value]=\"field.value\" [layoutType]=\"layoutType\">\n    </pep-indicators>\n    <pep-internal-button *ngSwitchCase=\"'button'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\"\n        [referenceObjectInternalType]=\"field.referenceObjectInternalType\" [type]=\"field.type\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\n        (valueChange)=\"onValueChanged($event, field)\">\n    </pep-internal-button>\n    <pep-internal-menu *ngSwitchCase=\"'menu'\" [key]=\"field.key\" [label]=\"field.label\" [disabled]=\"field.disabled\"\n        [xAlignment]=\"field.xAlignment\" [options]=\"field.options\" [layoutType]=\"layoutType\"\n        (elementClick)=\"onClick($event)\">\n    </pep-internal-menu>\n    <pep-internal-page *ngSwitchCase=\"'internalPage'\" [field]=\"field\" [layoutType]=\"layoutType\"\n        (internalFormFieldClick)=\"onInternalFormFieldClick($event)\"\n        (internalFormFieldChange)=\"onInternalFormFieldChanged($event)\">\n    </pep-internal-page>\n\n    <pep-internal-carusel *ngSwitchCase=\"'internalCarusel'\" [field]=\"field\"\n        (internalFormFieldClick)=\"onInternalFormFieldClick($event)\"\n        (internalFormFieldChange)=\"onInternalFormFieldChanged($event)\">\n    </pep-internal-carusel>\n\n    <ng-container *ngSwitchCase=\"'placeholder'\">\n    </ng-container>\n</ng-container>",
+                template: "<ng-container [ngSwitch]=\"field.controlType\" [formGroup]=\"form\">\n\n    <pep-address *ngSwitchCase=\"'address'\" [form]=\"form\" [key]=\"field.key\" [formattedValue]=\"field.formattedValue\"\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [groupFields]=\"field.groupFields\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (addressValueChange)=\"onAddressValueChanged($event, field)\">\n    </pep-address>\n\n    <pep-attachment *ngSwitchCase=\"'attachment'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\"\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [isActive]=\"isActive\" [showTitle]=\"showTitle\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\n        (fileChange)=\"onFileChanged($event, field)\">\n    </pep-attachment>\n\n    <pep-checkbox *ngSwitchCase=\"'checkbox'\" [form]=\"form\" [key]=\"field.key\"\n        [value]=\"(field.value | lowercase) == 'true' || field.value == '1' ? true : false\" [label]=\"field.label\"\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [additionalValue]=\"field.additionalValue\"\n        [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-checkbox>\n\n    <pep-date *ngSwitchCase=\"'date'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [textColor]=\"field.textColor\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [minValue]=\"field.minValue\"\n        [maxValue]=\"field.maxValue\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-date>\n\n    <pep-images-filmstrip *ngSwitchCase=\"'images'\" [uid]=\"uid\" [form]=\"form\" [key]=\"field.key\" [label]=\"field.label\"\n        [showTitle]=\"showTitle\" [rowSpan]=\"field.rowSpan\" [value]=\"field.value\" [layoutType]=\"layoutType\">\n    </pep-images-filmstrip>\n\n    <pep-image *ngSwitchCase=\"'image'\" [uid]=\"uid\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.formattedValue\"\n        [srcLarge]=\"field.value\" [options]=\"field.options\" [label]=\"field.label\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [indicatorsField]=\"field.indicatorsField\" [menuField]=\"field.menuField\"\n        [hasCampaignField]=\"field.hasCampaignField\" [sizeLimitMB]=\"field.sizeLimitMB\" [isActive]=\"isActive\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\n        (fileChange)=\"onFileChanged($event, field)\">\n    </pep-image>\n\n    <pep-quantity-selector *ngSwitchCase=\"'qs'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [textColor]=\"field.textColor\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [allowDecimal]=\"field.allowDecimal\"\n        [additionalValue]=\"field.additionalValue\" [notificationInfo]=\"field.notificationInfo\" [isActive]=\"isActive\"\n        [layoutType]=\"layoutType\" [showTitle]=\"showTitle\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" (formValidationChange)=\"onFormValidationChanged($event)\"\n        (elementClick)=\"onClick($event)\">\n    </pep-quantity-selector>\n\n    <pep-rich-html-textarea *ngSwitchCase=\"'richhtmltextarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n        [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-rich-html-textarea>\n\n    <pep-select *ngSwitchCase=\"'select'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [label]=\"field.label\"\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [options]=\"field.options\" [showTitle]=\"showTitle\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (valueChange)=\"onValueChanged($event, field)\"\n        (formValidationChange)=\"onFormValidationChanged($event)\" [isActive]=\"isActive\">\n    </pep-select>\n\n    <pep-separator *ngSwitchCase=\"'separator'\" [form]=\"form\" [key]=\"field.key\" [label]=\"field.label\"\n        [xAlignment]=\"field.xAlignment\" [layoutType]=\"layoutType\" [visible]=\"field.visible\">\n    </pep-separator>\n\n    <pep-signature *ngSwitchCase=\"'signature'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\" [label]=\"field.label\"\n        [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [isActive]=\"isActive\" [layoutType]=\"layoutType\"\n        [visible]=\"field.visible\" (fileChange)=\"onFileChanged($event, field)\">\n    </pep-signature>\n\n    <pep-textarea *ngSwitchCase=\"'textarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [label]=\"field.label\"\n        [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-textarea>\n\n    <pep-textbox *ngSwitchCase=\"'textbox'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [placeholder]=\"field.placeholder\"\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\"\n        (valueChange)=\"onValueChanged($event, field)\" (formValidationChange)=\"onFormValidationChanged($event)\"\n        [isActive]=\"isActive\" [visible]=\"field.visible\">\n    </pep-textbox>\n\n    <pep-link *ngSwitchCase=\"'link'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [placeholder]=\"field.placeholder\"\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\" [visible]=\"field.visible\"\n        (formValidationChange)=\"onFormValidationChanged($event)\" (elementClick)=\"onClick($event)\">\n    </pep-link>\n\n    <pep-indicators *ngSwitchCase=\"'indicators'\" [key]=\"field.key\" [value]=\"field.value\" [layoutType]=\"layoutType\">\n    </pep-indicators>\n    <pep-internal-button *ngSwitchCase=\"'button'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\"\n        [referenceObjectInternalType]=\"field.referenceObjectInternalType\" [type]=\"field.type\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\n        (valueChange)=\"onValueChanged($event, field)\">\n    </pep-internal-button>\n    <pep-internal-menu *ngSwitchCase=\"'menu'\" [key]=\"field.key\" [label]=\"field.label\" [disabled]=\"field.disabled\"\n        [xAlignment]=\"field.xAlignment\" [options]=\"field.options\" [layoutType]=\"layoutType\"\n        (elementClick)=\"onClick($event)\">\n    </pep-internal-menu>\n    <pep-internal-page *ngSwitchCase=\"'internalPage'\" [field]=\"field\" [layoutType]=\"layoutType\"\n        (internalFormFieldClick)=\"onInternalFormFieldClick($event)\"\n        (internalFormFieldChange)=\"onInternalFormFieldChanged($event)\">\n    </pep-internal-page>\n\n    <pep-internal-carusel *ngSwitchCase=\"'internalCarusel'\" [field]=\"field\"\n        (internalFormFieldClick)=\"onInternalFormFieldClick($event)\"\n        (internalFormFieldChange)=\"onInternalFormFieldChanged($event)\">\n    </pep-internal-carusel>\n\n    <ng-container *ngSwitchCase=\"'placeholder'\">\n    </ng-container>\n</ng-container>",
                 encapsulation: ViewEncapsulation.Emulated,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [":host{width:100%;height:100%}"]
@@ -2674,6 +2683,7 @@ const pepComponentsModules = [
     PepSignatureModule,
     PepTextareaModule,
     PepTextboxModule,
+    PepLinkModule
 ];
 class PepFormModule {
     constructor(pepIconRegistry) {