npm - @pepperi-addons/ngx-lib - Versions diffs - 0.3.9-beta.7 → 0.3.9 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (109) hide show

package/fesm2015/pepperi-addons-ngx-lib-image.js CHANGED Viewed

@@ -151,6 +151,13 @@ class PepImageComponent {
         });
         this.form = this.customizationService.getDefaultFromGroup(pepField);
     }
+    getOtherData() {
+        return {
+            imageSrc: this.srcLarge || this.src,
+            options: this.options,
+            title: this.label
+        };
+    }
     ngOnChanges(changes) {
         var _a, _b;
         if (this.standAlone) {
@@ -207,6 +214,8 @@ class PepImageComponent {
             this.src.indexOf('no-image') > -1) {
             hasParentImage = false;
         }
+        // Add the other data object for let the client open the image dialog eazy.
+        event.otherData = this.getOtherData();
         this.elementClick.emit(event);
     }
     itemImageClick(event) {
@@ -225,16 +234,13 @@ class PepImageComponent {
         // } else {
         //     this.imageService.openImageDialog(this.srcLarge || this.src, this.options, this.label);
         // }
-        this.elementClick.emit({
+        const eventToRaise = {
             key: this.key,
             controlType: this.controlType,
-            eventWhich: event.which,
-            otherData: {
-                imageSrc: this.srcLarge || this.src,
-                options: this.options,
-                title: this.label
-            }
-        });
+            eventWhich: event.which
+        };
+        eventToRaise.otherData = this.getOtherData();
+        this.elementClick.emit(eventToRaise);
     }
 }
 PepImageComponent.MENU_CLICKED = '[MenuClicked]';

package/fesm2015/pepperi-addons-ngx-lib-image.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pepperi-addons-ngx-lib-image.js","sources":["../../../projects/ngx-lib/image/image.service.ts","../../../projects/ngx-lib/image/image.component.ts","../../../projects/ngx-lib/image/image.module.ts","../../../projects/ngx-lib/image/public-api.ts","../../../projects/ngx-lib/image/pepperi-addons-ngx-lib-image.ts"],"sourcesContent":["import { Injectable, TemplateRef } from '@angular/core';\r\nimport {\r\n PepFileService,\r\n PepCustomizationService,\r\n IPepOption,\r\n} from '@pepperi-addons/ngx-lib';\r\nimport { PepDialogService } from '@pepperi-addons/ngx-lib/dialog';\r\nimport { PepImagesFilmstripComponent } from '@pepperi-addons/ngx-lib/images-filmstrip';\r\nimport { IPepFileChangeEvent } from '@pepperi-addons/ngx-lib/files-uploader';\r\n\r\n@Injectable({\r\n providedIn: 'root',\r\n})\r\nexport class PepImageService {\r\n constructor(\r\n private dialogService: PepDialogService,\r\n private customizationService: PepCustomizationService,\r\n private fileService: PepFileService,\r\n ) { }\r\n\r\n openImageDialog(imageSrc: string, options: IPepOption[], title = ''): void {\r\n const arr = [imageSrc].concat(\r\n (options \|\| []).map((opt) => opt.value)\r\n );\r\n const imagesValue = arr.join(';');\r\n\r\n // Show image in modal.\r\n const config = this.dialogService.getDialogConfig({}, 'inline');\r\n config.maxWidth = '75vw';\r\n config.height = '95vh';\r\n\r\n this.dialogService.openDialog(\r\n PepImagesFilmstripComponent,\r\n {\r\n currIndex: 0,\r\n key: new Date().getDate(),\r\n value: imagesValue,\r\n label: title,\r\n uid: '',\r\n showThumbnails: arr.length > 1,\r\n },\r\n config\r\n );\r\n }\r\n\r\n openFromURI(event: IPepFileChangeEvent) {\r\n if (event) {\r\n const fileStrArr = event.fileStr.split(';');\r\n if (fileStrArr.length === 2) {\r\n const win = window.open('', '_blank');\r\n const contentType = fileStrArr[0].split(':')[1];\r\n const base64 = fileStrArr[1].split(',')[1];\r\n const blob = this.fileService.convertFromb64toBlob(\r\n base64,\r\n contentType\r\n );\r\n const url = URL.createObjectURL(blob);\r\n win.location.href = url;\r\n }\r\n }\r\n }\r\n}\r\n","import {\n Component,\n OnInit,\n OnChanges,\n Input,\n Output,\n EventEmitter,\n ChangeDetectorRef,\n ChangeDetectionStrategy,\n ElementRef,\n OnDestroy,\n Renderer2,\n Optional,\n} from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport { TranslateService } from '@ngx-translate/core';\nimport {\n PepFileService,\n PepLayoutType,\n PepCustomizationService,\n PepHorizontalAlignment,\n DEFAULT_HORIZONTAL_ALIGNMENT,\n IPepFieldClickEvent,\n IPepOption,\n PepImageField,\n} from '@pepperi-addons/ngx-lib';\n\nimport { pepIconNoImage2 } from '@pepperi-addons/ngx-lib/icon';\nimport { PepImageService } from './image.service';\nimport { IPepFileChangeEvent } from '@pepperi-addons/ngx-lib/files-uploader';\n\n@Component({\n selector: 'pep-image',\n templateUrl: './image.component.html',\n styleUrls: ['./image.component.scss', './image.component.theme.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PepImageComponent implements OnChanges, OnInit, OnDestroy {\n public static MENU_CLICKED = '[MenuClicked]';\n\n @Input() key = '';\n @Input() srcLarge = '';\n @Input() src = '';\n @Input() options: IPepOption[] = [];\n @Input() label = '';\n // @Input() type = 'image';\n @Input() mandatory = false;\n @Input() disabled = false;\n @Input() readonly = false;\n @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n\n private _rowSpan = 1;\n @Input()\n set rowSpan(value) {\n this._rowSpan = value;\n this.setFieldHeight();\n }\n get rowSpan(): number {\n return this._rowSpan;\n }\n\n @Input() indicatorsField: any = null;\n @Input() menuField: any = null;\n @Input() hasCampaignField: any = null;\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 controlType = 'image';\n\n @Input() form: FormGroup = null;\n @Input() uid = '';\n @Input() showTitle = true;\n @Input() renderTitle = true;\n\n private _layoutType: PepLayoutType = 'form';\n @Input()\n set layoutType(value: PepLayoutType) {\n this._layoutType = value;\n this.setFieldHeight();\n }\n get layoutType(): PepLayoutType {\n return this._layoutType;\n }\n\n @Input() isActive = false;\n @Input() sizeLimitMB = 5;\n @Input() acceptImagesType = 'bmp,jpg,jpeg,png,gif'; // \"image/bmp, image/jpg, image/jpeg, image/png, image/tif, image/tiff\";\n\n @Output()\n fileChange: EventEmitter<any> = new EventEmitter<any>();\n\n @Output()\n elementClick: EventEmitter<IPepFieldClickEvent> = new EventEmitter<IPepFieldClickEvent>();\n\n fieldHeight = '';\n standAlone = false;\n dataURI = null;\n\n constructor(\n private imageService: PepImageService,\n private customizationService: PepCustomizationService,\n private fileService: PepFileService,\n private renderer: Renderer2,\n private element: ElementRef,\n private translate: TranslateService\n ) { }\n\n ngOnInit(): void {\n if (this.form === null) {\n this.standAlone = true;\n this.setFieldHeight();\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\n private setFieldHeight(): void {\n this.fieldHeight = this.customizationService.calculateFieldHeight(\n this.layoutType,\n this.rowSpan,\n this.standAlone\n );\n }\n\n private setDefaultForm(): void {\n const pepField = new PepImageField({\n key: this.key,\n value: this.src,\n mandatory: this.mandatory,\n readonly: this.readonly,\n disabled: this.disabled,\n });\n this.form = this.customizationService.getDefaultFromGroup(pepField);\n }\n\n ngOnChanges(changes: any): void {\n if (this.standAlone) {\n this.setDefaultForm();\n }\n\n if (changes.src?.currentValue?.length > 0) {\n // Empty dataURI if there is change in the src.\n this.dataURI = null;\n }\n }\n\n ngOnDestroy(): void {\n //\n }\n\n errorHandler(event: any): 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 onImageLoad(event: any): void {\n event.target.style.visibility = 'visible';\n event.target.title =\n event.target.title.length === 0\n ? this.translate.instant('IMAGE.CLICK_TO_ENLARGE')\n : event.target.title;\n }\n\n onMenuClick(event: any): void {\n this.elementClick.emit({\n key: this.key,\n value: PepImageComponent.MENU_CLICKED,\n controlType: this.controlType,\n eventWhich: event.which,\n });\n }\n\n onFileChanged(fileData: IPepFileChangeEvent): void {\n this.dataURI = fileData;\n this.src = this.srcLarge =\n this.standAlone && this.dataURI ? this.dataURI.fileStr : '';\n\n this.customizationService.updateFormFieldValue(\n this.form,\n this.key,\n this.dataURI ? this.dataURI.fileExt : ''\n );\n // this.valueChange.emit({\n // key: this.key,\n // value,\n // });\n\n this.fileChange.emit(fileData);\n // this.fileChange.emit(value.length > 0 ? JSON.parse(value) : value);\n }\n\n objectIdIsNotEmpty(): boolean {\n return this.uid?.length > 0 && this.uid !== '0';\n }\n\n onFileClicked(event: IPepFieldClickEvent): void {\n let hasParentImage = true;\n if (\n // this.objectIdIsNotEmpty() &&\n this.src &&\n this.src.indexOf('no-image') > -1\n ) {\n hasParentImage = false;\n }\n\n this.elementClick.emit(event);\n }\n\n itemImageClick(event: any): void {\n let hasParentImage = true;\n const elemTarget = event.target \|\| event.srcElement;\n const nextElement = elemTarget.nextElementSibling \|\| null;\n const imageSRC = elemTarget.src \|\| null;\n const nextElementSRC =\n nextElement && nextElement.src ? nextElement.src : null;\n\n if (\n (imageSRC && imageSRC.indexOf('no-image') > -1) \|\|\n (nextElementSRC && nextElementSRC.src.indexOf('no-image') > -1)\n ) {\n hasParentImage = false;\n }\n\n // this.openImageModal(hasParentImage);\n // if (this.dataURI) {\n // this.imageService.openFromURI(this.dataURI);\n // } else {\n // this.imageService.openImageDialog(this.srcLarge \|\| this.src, this.options, this.label);\n // }\n\n this.elementClick.emit({\n key: this.key,\n controlType: this.controlType,\n eventWhich: event.which,\n otherData: {\n imageSrc: this.srcLarge \|\| this.src,\n options: this.options,\n title: this.label\n }\n });\n }\n\n // openImageModal(hasParentImage: boolean): void {\n // if (this.dataURI) {\n // const fileStrArr = this.dataURI.fileStr.split(';');\n // if (fileStrArr.length === 2) {\n // const win = window.open('', '_blank');\n // const contentType = fileStrArr[0].split(':')[1];\n // const base64 = fileStrArr[1].split(',')[1];\n // const blob = this.fileService.convertFromb64toBlob(\n // base64,\n // contentType\n // );\n // const url = URL.createObjectURL(blob);\n // win.location.href = url;\n // }\n // } else {\n // const arr = [this.srcLarge \|\| this.src].concat(\n // (this.options \|\| []).map((opt) => opt.value)\n // );\n // const imagesValue = arr.join(';');\n\n // // Show image in modal.\n // const config = this.dialogService.getDialogConfig({}, 'inline');\n // config.maxWidth = '75vw';\n // config.height = '95vh';\n\n // this.dialogService.openDialog(\n // PepImagesFilmstripComponent,\n // {\n // currIndex: 0,\n // key: this.key,\n // value: imagesValue,\n // label: this.label,\n // uid: this.uid,\n // showThumbnails: arr.length > 1,\n // },\n // config\n // );\n // }\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 { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemMenu,\n pepIconSystemBolt,\n pepIconIndicatorDotPlaceholder,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepFilesUploaderModule } from '@pepperi-addons/ngx-lib/files-uploader';\nimport {\n PepImagesFilmstripModule,\n PepImagesFilmstripComponent,\n} from '@pepperi-addons/ngx-lib/images-filmstrip';\n\nimport { PepImageComponent } from './image.component';\nimport { PepImageService } from './image.service';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n // Material modules,\n MatCommonModule,\n MatFormFieldModule,\n MatIconModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepIconModule,\n PepFieldTitleModule,\n PepImagesFilmstripModule,\n PepFilesUploaderModule,\n ],\n exports: [PepImageComponent],\n declarations: [PepImageComponent],\n entryComponents: [PepImagesFilmstripComponent],\n providers: [PepImageService]\n})\nexport class PepImageModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([\n pepIconSystemMenu,\n pepIconSystemBolt,\n pepIconIndicatorDotPlaceholder,\n ]);\n }\n}\n","/\n Public API Surface of ngx-lib/image\n /\nexport from './image.module';\nexport * from './image.component';\nexport * from './image.service';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"pepperi-addons-ngx-lib-image.js","sources":["../../../projects/ngx-lib/image/image.service.ts","../../../projects/ngx-lib/image/image.component.ts","../../../projects/ngx-lib/image/image.module.ts","../../../projects/ngx-lib/image/public-api.ts","../../../projects/ngx-lib/image/pepperi-addons-ngx-lib-image.ts"],"sourcesContent":["import { Injectable, TemplateRef } from '@angular/core';\r\nimport {\r\n PepFileService,\r\n PepCustomizationService,\r\n IPepOption,\r\n} from '@pepperi-addons/ngx-lib';\r\nimport { PepDialogService } from '@pepperi-addons/ngx-lib/dialog';\r\nimport { PepImagesFilmstripComponent } from '@pepperi-addons/ngx-lib/images-filmstrip';\r\nimport { IPepFileChangeEvent } from '@pepperi-addons/ngx-lib/files-uploader';\r\n\r\n@Injectable({\r\n providedIn: 'root',\r\n})\r\nexport class PepImageService {\r\n constructor(\r\n private dialogService: PepDialogService,\r\n private customizationService: PepCustomizationService,\r\n private fileService: PepFileService,\r\n ) { }\r\n\r\n openImageDialog(imageSrc: string, options: IPepOption[], title = ''): void {\r\n const arr = [imageSrc].concat(\r\n (options \|\| []).map((opt) => opt.value)\r\n );\r\n const imagesValue = arr.join(';');\r\n\r\n // Show image in modal.\r\n const config = this.dialogService.getDialogConfig({}, 'inline');\r\n config.maxWidth = '75vw';\r\n config.height = '95vh';\r\n\r\n this.dialogService.openDialog(\r\n PepImagesFilmstripComponent,\r\n {\r\n currIndex: 0,\r\n key: new Date().getDate(),\r\n value: imagesValue,\r\n label: title,\r\n uid: '',\r\n showThumbnails: arr.length > 1,\r\n },\r\n config\r\n );\r\n }\r\n\r\n openFromURI(event: IPepFileChangeEvent) {\r\n if (event) {\r\n const fileStrArr = event.fileStr.split(';');\r\n if (fileStrArr.length === 2) {\r\n const win = window.open('', '_blank');\r\n const contentType = fileStrArr[0].split(':')[1];\r\n const base64 = fileStrArr[1].split(',')[1];\r\n const blob = this.fileService.convertFromb64toBlob(\r\n base64,\r\n contentType\r\n );\r\n const url = URL.createObjectURL(blob);\r\n win.location.href = url;\r\n }\r\n }\r\n }\r\n}\r\n","import {\n Component,\n OnInit,\n OnChanges,\n Input,\n Output,\n EventEmitter,\n ChangeDetectorRef,\n ChangeDetectionStrategy,\n ElementRef,\n OnDestroy,\n Renderer2,\n Optional,\n} from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport { TranslateService } from '@ngx-translate/core';\nimport {\n PepFileService,\n PepLayoutType,\n PepCustomizationService,\n PepHorizontalAlignment,\n DEFAULT_HORIZONTAL_ALIGNMENT,\n IPepFieldClickEvent,\n IPepOption,\n PepImageField,\n} from '@pepperi-addons/ngx-lib';\n\nimport { pepIconNoImage2 } from '@pepperi-addons/ngx-lib/icon';\nimport { PepImageService } from './image.service';\nimport { IPepFileChangeEvent } from '@pepperi-addons/ngx-lib/files-uploader';\n\n@Component({\n selector: 'pep-image',\n templateUrl: './image.component.html',\n styleUrls: ['./image.component.scss', './image.component.theme.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PepImageComponent implements OnChanges, OnInit, OnDestroy {\n public static MENU_CLICKED = '[MenuClicked]';\n\n @Input() key = '';\n @Input() srcLarge = '';\n @Input() src = '';\n @Input() options: IPepOption[] = [];\n @Input() label = '';\n // @Input() type = 'image';\n @Input() mandatory = false;\n @Input() disabled = false;\n @Input() readonly = false;\n @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n\n private _rowSpan = 1;\n @Input()\n set rowSpan(value) {\n this._rowSpan = value;\n this.setFieldHeight();\n }\n get rowSpan(): number {\n return this._rowSpan;\n }\n\n @Input() indicatorsField: any = null;\n @Input() menuField: any = null;\n @Input() hasCampaignField: any = null;\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 controlType = 'image';\n\n @Input() form: FormGroup = null;\n @Input() uid = '';\n @Input() showTitle = true;\n @Input() renderTitle = true;\n\n private _layoutType: PepLayoutType = 'form';\n @Input()\n set layoutType(value: PepLayoutType) {\n this._layoutType = value;\n this.setFieldHeight();\n }\n get layoutType(): PepLayoutType {\n return this._layoutType;\n }\n\n @Input() isActive = false;\n @Input() sizeLimitMB = 5;\n @Input() acceptImagesType = 'bmp,jpg,jpeg,png,gif'; // \"image/bmp, image/jpg, image/jpeg, image/png, image/tif, image/tiff\";\n\n @Output()\n fileChange: EventEmitter<any> = new EventEmitter<any>();\n\n @Output()\n elementClick: EventEmitter<IPepFieldClickEvent> = new EventEmitter<IPepFieldClickEvent>();\n\n fieldHeight = '';\n standAlone = false;\n dataURI = null;\n\n constructor(\n private imageService: PepImageService,\n private customizationService: PepCustomizationService,\n private fileService: PepFileService,\n private renderer: Renderer2,\n private element: ElementRef,\n private translate: TranslateService\n ) { }\n\n ngOnInit(): void {\n if (this.form === null) {\n this.standAlone = true;\n this.setFieldHeight();\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\n private setFieldHeight(): void {\n this.fieldHeight = this.customizationService.calculateFieldHeight(\n this.layoutType,\n this.rowSpan,\n this.standAlone\n );\n }\n\n private setDefaultForm(): void {\n const pepField = new PepImageField({\n key: this.key,\n value: this.src,\n mandatory: this.mandatory,\n readonly: this.readonly,\n disabled: this.disabled,\n });\n this.form = this.customizationService.getDefaultFromGroup(pepField);\n }\n\n private getOtherData() {\n return {\n imageSrc: this.srcLarge \|\| this.src,\n options: this.options,\n title: this.label\n };\n }\n\n ngOnChanges(changes: any): void {\n if (this.standAlone) {\n this.setDefaultForm();\n }\n\n if (changes.src?.currentValue?.length > 0) {\n // Empty dataURI if there is change in the src.\n this.dataURI = null;\n }\n }\n\n ngOnDestroy(): void {\n //\n }\n\n errorHandler(event: any): 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 onImageLoad(event: any): void {\n event.target.style.visibility = 'visible';\n event.target.title =\n event.target.title.length === 0\n ? this.translate.instant('IMAGE.CLICK_TO_ENLARGE')\n : event.target.title;\n }\n\n onMenuClick(event: any): void {\n this.elementClick.emit({\n key: this.key,\n value: PepImageComponent.MENU_CLICKED,\n controlType: this.controlType,\n eventWhich: event.which,\n });\n }\n\n onFileChanged(fileData: IPepFileChangeEvent): void {\n this.dataURI = fileData;\n this.src = this.srcLarge =\n this.standAlone && this.dataURI ? this.dataURI.fileStr : '';\n\n this.customizationService.updateFormFieldValue(\n this.form,\n this.key,\n this.dataURI ? this.dataURI.fileExt : ''\n );\n // this.valueChange.emit({\n // key: this.key,\n // value,\n // });\n\n this.fileChange.emit(fileData);\n // this.fileChange.emit(value.length > 0 ? JSON.parse(value) : value);\n }\n\n objectIdIsNotEmpty(): boolean {\n return this.uid?.length > 0 && this.uid !== '0';\n }\n\n onFileClicked(event: IPepFieldClickEvent): void {\n let hasParentImage = true;\n if (\n // this.objectIdIsNotEmpty() &&\n this.src &&\n this.src.indexOf('no-image') > -1\n ) {\n hasParentImage = false;\n }\n\n // Add the other data object for let the client open the image dialog eazy.\n event.otherData = this.getOtherData();\n\n this.elementClick.emit(event);\n }\n\n itemImageClick(event: any): void {\n let hasParentImage = true;\n const elemTarget = event.target \|\| event.srcElement;\n const nextElement = elemTarget.nextElementSibling \|\| null;\n const imageSRC = elemTarget.src \|\| null;\n const nextElementSRC =\n nextElement && nextElement.src ? nextElement.src : null;\n\n if (\n (imageSRC && imageSRC.indexOf('no-image') > -1) \|\|\n (nextElementSRC && nextElementSRC.src.indexOf('no-image') > -1)\n ) {\n hasParentImage = false;\n }\n\n // this.openImageModal(hasParentImage);\n // if (this.dataURI) {\n // this.imageService.openFromURI(this.dataURI);\n // } else {\n // this.imageService.openImageDialog(this.srcLarge \|\| this.src, this.options, this.label);\n // }\n const eventToRaise: IPepFieldClickEvent = {\n key: this.key,\n controlType: this.controlType,\n eventWhich: event.which\n };\n eventToRaise.otherData = this.getOtherData();\n this.elementClick.emit(eventToRaise);\n }\n\n // openImageModal(hasParentImage: boolean): void {\n // if (this.dataURI) {\n // const fileStrArr = this.dataURI.fileStr.split(';');\n // if (fileStrArr.length === 2) {\n // const win = window.open('', '_blank');\n // const contentType = fileStrArr[0].split(':')[1];\n // const base64 = fileStrArr[1].split(',')[1];\n // const blob = this.fileService.convertFromb64toBlob(\n // base64,\n // contentType\n // );\n // const url = URL.createObjectURL(blob);\n // win.location.href = url;\n // }\n // } else {\n // const arr = [this.srcLarge \|\| this.src].concat(\n // (this.options \|\| []).map((opt) => opt.value)\n // );\n // const imagesValue = arr.join(';');\n\n // // Show image in modal.\n // const config = this.dialogService.getDialogConfig({}, 'inline');\n // config.maxWidth = '75vw';\n // config.height = '95vh';\n\n // this.dialogService.openDialog(\n // PepImagesFilmstripComponent,\n // {\n // currIndex: 0,\n // key: this.key,\n // value: imagesValue,\n // label: this.label,\n // uid: this.uid,\n // showThumbnails: arr.length > 1,\n // },\n // config\n // );\n // }\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 { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemMenu,\n pepIconSystemBolt,\n pepIconIndicatorDotPlaceholder,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepFilesUploaderModule } from '@pepperi-addons/ngx-lib/files-uploader';\nimport {\n PepImagesFilmstripModule,\n PepImagesFilmstripComponent,\n} from '@pepperi-addons/ngx-lib/images-filmstrip';\n\nimport { PepImageComponent } from './image.component';\nimport { PepImageService } from './image.service';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n // Material modules,\n MatCommonModule,\n MatFormFieldModule,\n MatIconModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepIconModule,\n PepFieldTitleModule,\n PepImagesFilmstripModule,\n PepFilesUploaderModule,\n ],\n exports: [PepImageComponent],\n declarations: [PepImageComponent],\n entryComponents: [PepImagesFilmstripComponent],\n providers: [PepImageService]\n})\nexport class PepImageModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([\n pepIconSystemMenu,\n pepIconSystemBolt,\n pepIconIndicatorDotPlaceholder,\n ]);\n }\n}\n","/\n Public API Surface of ngx-lib/image\n /\nexport from './image.module';\nexport * from './image.component';\nexport * from './image.service';\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-link.js ADDED Viewed

@@ -0,0 +1,460 @@
+import { Pipe, EventEmitter, Component, ChangeDetectionStrategy, Renderer2, ElementRef, HostBinding, Input, Output, ViewChild, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { MatCommonModule } from '@angular/material/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
+import { DEFAULT_HORIZONTAL_ALIGNMENT, PepTextboxField, PepCustomizationService, PepUtilitiesService, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
+import { pepIconSystemEdit, PepIconModule, PepIconRegistry } from '@pepperi-addons/ngx-lib/icon';
+import { PepTextboxIconModule } from '@pepperi-addons/ngx-lib/textbox-icon';
+import { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';
+import { TranslateService } from '@ngx-translate/core';
+class IsUrlPipe {
+    transform(value) {
+        // const regex = /^((ht|f)tp(s?):\/\/)?([w]{3}[\.])?/;
+        const regex = /^((http(s?)|ftp)\:\/\/)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)(.*)/;
+        //console.log(`pipe - value - ${value} is valid url - ${regex.test(value)}`);
+        return regex.test(value);
+    }
+}
+IsUrlPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'isUrl'
+            },] }
+];
+/**
+ * This is a text box input component that can be use to
+ *
+ * @export
+ * @class PepTextboxComponent
+ * @implements {OnChanges}
+ * @implements {OnInit}
+ * @implements {OnDestroy}
+ */
+class PepLinkComponent {
+    constructor(fb, customizationService, renderer, element, translate, utilitiesService, isUrlPipe) {
+        this.fb = fb;
+        this.customizationService = customizationService;
+        this.renderer = renderer;
+        this.element = element;
+        this.translate = translate;
+        this.utilitiesService = utilitiesService;
+        this.isUrlPipe = isUrlPipe;
+        this.dataQa = '';
+        this._key = '';
+        this._value = '';
+        this._formattedValue = null;
+        /**
+         * The title of the textbox.
+         *
+         * @memberof PepTextboxComponent
+         */
+        this.label = '';
+        /**
+         * The placeholder (relevant only for children - if parent isn't null).
+         *
+         * @memberof PepTextboxComponent
+         */
+        this.placeholder = '';
+        /**
+         * The type of the textbox.
+         *
+         * @type {PepTextboxFieldType}
+         * @memberof PepTextboxComponent
+         */
+        this.type = 'text';
+        /**
+         * If the textbox is mandatory
+         *
+         * @memberof PepTextboxComponent
+         */
+        this.mandatory = false;
+        // TODO: Check if should remove disabled and keep only readonly.
+        /**
+         * If the textbox is disabled.
+         *
+         * @memberof PepTextboxComponent
+         */
+        this.disabled = false;
+        /**
+         * If the textbox is readonly
+         *
+         * @memberof PepTextboxComponent
+         */
+        this.readonly = false;
+        this.textColor = '';
+        this.xAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;
+        this.rowSpan = 1;
+        // @Input() lastFocusField: any;
+        this.minValue = NaN;
+        this.maxValue = NaN;
+        this._visible = true;
+        this.form = null;
+        this.isActive = false;
+        this.showTitle = true;
+        this.renderTitle = true;
+        this.renderError = true;
+        this.renderSymbol = true;
+        this.layoutType = 'form';
+        this.parentFieldKey = null;
+        /**
+         * The value change event.
+         *
+         * @type {EventEmitter<string>}
+         * @memberof PepTextboxComponent
+         */
+        this.valueChange = new EventEmitter();
+        this.formValidationChange = new EventEmitter();
+        this.elementClick = new EventEmitter();
+        this._calculateFormattedValue = true;
+        this.controlType = 'link';
+        this.standAlone = false;
+        this.isInEditMode = false;
+        this.isUrl = false;
+        this.isInFocus = false;
+    }
+    /**
+     * The text box key
+     *
+     * @memberof PepTextboxComponent
+     */
+    set key(value) {
+        this._key = value;
+        this.dataQa = value;
+    }
+    get key() {
+        return this._key;
+    }
+    /**
+     * The value of the text box.
+     *
+     * @memberof PepTextboxComponent
+     */
+    set value(value) {
+        if (!value) {
+            value = '';
+        }
+        this._value = value;
+        if (this._calculateFormattedValue) {
+            this.setFormattedValue(value);
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    /**
+     * The formatted value.
+     *
+     * @memberof PepTextboxComponent
+     */
+    set formattedValue(value) {
+        if (!value) {
+            value = '';
+        }
+        if (this._calculateFormattedValue) {
+            this._calculateFormattedValue = false;
+        }
+        this.setFormattedValue(value);
+    }
+    get formattedValue() {
+        return this._formattedValue;
+    }
+    set visible(visible) {
+        this._visible = visible;
+        if (visible) {
+            this.renderer.removeClass(this.element.nativeElement, 'hidden-element');
+        }
+        else {
+            this.renderer.addClass(this.element.nativeElement, 'hidden-element');
+        }
+    }
+    get visible() {
+        return this._visible;
+    }
+    get calculateFormattedValue() {
+        return this._calculateFormattedValue;
+    }
+    setFormattedValue(value) {
+        if (this._calculateFormattedValue) {
+            this._formattedValue = this.isNumberType()
+                ? this.utilitiesService.formatNumber(value)
+                : value;
+        }
+        else {
+            this._formattedValue = value;
+        }
+        this.updateFormFieldValue();
+    }
+    updateFormFieldValue() {
+        this.customizationService.updateFormFieldValue(this.form, this.key, this.formattedValue, this.parentFieldKey);
+    }
+    get displayValue() {
+        let res = '';
+        if (this.type == 'link') {
+            res = this.formattedValue;
+        }
+        else {
+            res = this.isInFocus ? this.value : this.formattedValue;
+        }
+        return res;
+    }
+    setDefaultForm() {
+        const pepField = new PepTextboxField({
+            key: this.key,
+            value: this.value,
+            mandatory: this.mandatory,
+            readonly: this.readonly,
+            disabled: this.disabled,
+            maxFieldCharacters: this.maxFieldCharacters,
+            type: this.type,
+            minValue: this.minValue,
+            maxValue: this.maxValue,
+        });
+        this.form = this.customizationService.getDefaultFromGroup(pepField, this.renderError);
+    }
+    ngOnInit() {
+        if (this.form === null) {
+            this.standAlone = true;
+            this.minValue =
+                isNaN(this.minValue) && !isNaN(this.maxValue)
+                    ? 0
+                    : this.minValue;
+            this.maxValue =
+                isNaN(this.maxValue) && !isNaN(this.minValue)
+                    ? 99999
+                    : this.maxValue;
+            this.setDefaultForm();
+            this.renderer.addClass(this.element.nativeElement, PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
+            if (!this.renderTitle) {
+                this.renderer.addClass(this.element.nativeElement, PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME);
+            }
+        }
+        this.readonly = this.type === 'duration' ? true : this.readonly; // Hack until we develop Timer UI for editing Duration field
+        this.updateFormFieldValue();
+    }
+    ngOnChanges(changes) {
+        if (this.standAlone) {
+            this.setDefaultForm();
+        }
+        this.readonly = this.type === 'duration' ? true : this.readonly; // Hack until we develop Timer UI for editing Duration field
+    }
+    ngOnDestroy() {
+        //
+    }
+    onFocus(event) {
+        this.isInFocus = true;
+        // select the value in focus (DI-18246 improvement)
+        setTimeout(() => {
+            const eventTarget = event.target || event.srcElement;
+            if (eventTarget) {
+                eventTarget.select();
+            }
+        }, 0);
+    }
+    isNumberType() {
+        return (this.type === 'percentage' ||
+            this.type === 'currency' ||
+            this.type === 'int' ||
+            this.type === 'real');
+    }
+    isValueValid(value) {
+        let res = false;
+        if (this.isNumberType()) {
+            if (value === '') {
+                res = this.mandatory ? false : true;
+            }
+            else {
+                const numberValue = this.utilitiesService.coerceNumberProperty(value);
+                res =
+                    numberValue >= this.minValue &&
+                        numberValue <= this.maxValue;
+            }
+        }
+        else {
+            // TODO: Maybe need to check other types.
+            res = true;
+        }
+        return res;
+    }
+    isDifferentValue(value) {
+        let res = false;
+        if (this.isNumberType()) {
+            if (this.value === '' || value === '') {
+                res = true;
+            }
+            else {
+                const currentValue = this.utilitiesService.coerceNumberProperty(this.value);
+                const newValue = this.utilitiesService.coerceNumberProperty(value);
+                res = currentValue !== newValue;
+            }
+        }
+        else {
+            res = true;
+        }
+        return res;
+    }
+    onChange(e) {
+        const value = e.target ? e.target.value : e;
+        this.valueChange.emit(value);
+    }
+    onBlur(e) {
+        this.isInFocus = false;
+        const value = e.target ? e.target.value : e;
+        if (value !== this.value && this.isDifferentValue(value)) {
+            // If renderError is false and the new value is not valid.
+            if (!this.renderError && !this.isValueValid(value)) {
+                this.renderer.setProperty(this.input.nativeElement, 'value', this.value);
+            }
+            else {
+                this.value = value;
+                // If the user is setting the formatted value then set the value till the user format it and return it back.
+                if (!this._calculateFormattedValue) {
+                    this._formattedValue = value;
+                }
+                this.valueChange.emit(value);
+            }
+        }
+        if (this.isInEditMode) {
+            this.isInEditMode = false;
+        }
+    }
+    onClick() {
+        const output = {
+            key: this.key,
+            value: this.value,
+            controlType: this.controlType
+        };
+        this.elementClick.emit(output);
+    }
+    anchorClicked() {
+        const currentValue = this.value;
+        if (currentValue.trim().length > 0) {
+            switch (this.type) {
+                case 'email':
+                    window.open('mailto:' + currentValue, 'email');
+                    break;
+                case 'phone':
+                    window.open('tel:' + currentValue, 'tel');
+                    break;
+                case 'link':
+                    const output = {
+                        key: this.key,
+                        value: this.value,
+                        controlType: this.controlType
+                    };
+                    this.elementClick.emit(output);
+                    if (this.isUrlPipe.transform(currentValue)) {
+                        window.open(currentValue);
+                    }
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    cardTemplateClicked(event) {
+        this.isInEditMode = true;
+        setTimeout(() => {
+            this.input.nativeElement.focus();
+        }, 0);
+    }
+}
+PepLinkComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pep-link',
+                template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\" let-hasParent=\"hasParent\">\n        <pep-field-title *ngIf=\"renderTitle && isFormView && !hasParent\" [label]=\"label\" [mandatory]=\"mandatory\"\n            [disabled]=\"disabled\" [maxFieldCharacters]=\"maxFieldCharacters\" [xAlignment]=\"xAlignment\"\n            [showTitle]=\"showTitle\" [inputLength]=\"value.length\">\n        </pep-field-title>\n        <mat-form-field appearance=\"outline\">\n            <input #input pepTextboxValidation [id]=\"key\" [name]=\"key\" class=\" body-sm \" matInput autocomplete=\"off\"\n                maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n                [placeholder]=\"hasParent && !disabled ? placeholder : ''\"\n                [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\n                title=\"{{ formattedValue }}\" [formControlName]=\"key\" [type]=\"type\" [value]=\"displayValue\"\n                (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\"\n                (change)=\"onChange($event)\" [ngClass]=\"{'disable-hidden': disabled && formattedValue?.length > 0}\" />\n\n            <span *ngIf=\"disabled && formattedValue?.length > 0\" class=\"dis-grid\">\n                <a href=\"javascript:void(0)\" (click)=\"anchorClicked()\" [id]=\"key\" [name]=\"key\"\n                    class=\"color-link body-sm \">\n                    {{formattedValue}}</a>\n            </span>\n            <mat-error *ngIf=\"renderError\">\n                <ng-container *ngIf=\"mandatory && input.value.length == 0 then requiredError else otherError\">\n                </ng-container>\n                <ng-template #requiredError>\n                    <span class=\"body-xs\" [title]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\"\n                        [innerText]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\">\n                    </span>\n                </ng-template>\n                <ng-template #otherError>\n                    <span class=\"body-xs\" [title]=\"(input.value | pepToNumber) > this.maxValue || (input.value | pepToNumber) < this.minValue ?\n                            ('MESSAGES.ERROR_RANGE_IS_NOT_VALID' | translate: { min: minValue, max: maxValue }) :\n                            ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\" [innerText]=\"(input.value | pepToNumber) > this.maxValue || (input.value | pepToNumber) < this.minValue ?\n                            ('MESSAGES.ERROR_RANGE_IS_NOT_VALID' | translate: { min: minValue, max: maxValue }) :\n                            ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\">\n                    </span>\n                </ng-template>\n            </mat-error>\n\n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && xAlignment == 'right'\" matPrefix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\n            </pep-textbox-icon>\n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && (xAlignment == 'left')\" matSuffix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\n            </pep-textbox-icon>\n        </mat-form-field>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: false }\">\n        </ng-container>\n        <ng-container *ngIf=\"parentFieldKey; then groupedBlock; else regularBlock\"></ng-container>\n        <ng-template #regularBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #groupedBlock>\n            <ng-container [formGroupName]=\"parentFieldKey\">\n                <mat-form-field appearance=\"outline\">\n                    <input pepTextboxValidation [id]=\"key\" [name]=\"key\" class=\" body-sm \" matInput autocomplete=\"off\"\n                        [placeholder]=\"!disabled ? placeholder : ''\" title=\"{{ formattedValue }}\"\n                        [formControlName]=\"key\" [value]=\"value\" (blur)=\"onBlur($event)\" (change)=\"onChange($event)\"\n                        (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event)\" />\n                </mat-form-field>\n            </ng-container>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <div [ngClass]=\"{'one-row': rowSpan === 1}\">\n                <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n                </ng-container>\n            </div>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-card-input card-flex-container\" [ngStyle]=\"{ color: textColor }\"\n                [class]=\"'text-align-' + xAlignment\" [ngClass]=\"{'one-row': rowSpan === 1,\n                            'multi-rows': rowSpan > 1,\n                            'pep-button weak': isActive && !disabled}\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\">\n                <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ formattedValue }}\" class=\"body-sm value\"\n                    [ngClass]=\"{'multi-rows-text': rowSpan > 1}\" [ngStyle]=\"{ '-webkit-line-clamp': rowSpan }\">{{\n                    formattedValue }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <ng-container [ngSwitch]=\"type\">\n                    <ng-container *ngSwitchCase=\"'link'\">\n                        <a *ngIf=\"formattedValue != null && (value ? value : formattedValue) | isUrl\" [id]=\"key\"\n                            class=\"color-link body-sm pep-report-input\"\n                            [ngClass]=\"{'disable': (disabled && value === '')}\" title=\"{{ formattedValue }}\"\n                            target=\"_blank\" href=\"{{ value ? value : formattedValue }}\" (click)=\"onClick()\">{{\n                            formattedValue }}</a>\n                        <a *ngIf=\"formattedValue != null && !((value ? value : formattedValue) | isUrl)\" [id]=\"key\"\n                            class=\"color-link body-sm pep-report-input\"\n                            [ngClass]=\"{'disable': (disabled && value === '')}\" title=\"{{ formattedValue }}\"\n                            href=\"javascript:void(0)\" (click)=\"onClick()\">{{\n                            formattedValue }}</a>\n                    </ng-container>\n                    <ng-container *ngSwitchDefault>\n                        <span [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{'readonly': disabled}\"\n                            title=\"{{ formattedValue }}\" [ngStyle]=\"{ color: textColor }\">{{ formattedValue }}</span>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span [id]=\"key\">&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n\n</ng-container>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host{height:inherit;display:grid}:host>*{align-self:center;align-items:baseline}.disable-hidden{display:none}.dis-grid{display:grid}.multi-rows-text{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal!important}"]
+            },] }
+];
+PepLinkComponent.ctorParameters = () => [
+    { type: FormBuilder },
+    { type: PepCustomizationService },
+    { type: Renderer2 },
+    { type: ElementRef },
+    { type: TranslateService },
+    { type: PepUtilitiesService },
+    { type: IsUrlPipe }
+];
+PepLinkComponent.propDecorators = {
+    dataQa: [{ type: HostBinding, args: ['attr.data-qa',] }],
+    key: [{ type: Input }],
+    value: [{ type: Input }],
+    formattedValue: [{ type: Input }],
+    label: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    type: [{ type: Input }],
+    mandatory: [{ type: Input }],
+    disabled: [{ type: Input }],
+    readonly: [{ type: Input }],
+    maxFieldCharacters: [{ type: Input }],
+    textColor: [{ type: Input }],
+    xAlignment: [{ type: Input }],
+    rowSpan: [{ type: Input }],
+    minValue: [{ type: Input }],
+    maxValue: [{ type: Input }],
+    visible: [{ type: Input }],
+    form: [{ type: Input }],
+    isActive: [{ type: Input }],
+    showTitle: [{ type: Input }],
+    renderTitle: [{ type: Input }],
+    renderError: [{ type: Input }],
+    renderSymbol: [{ type: Input }],
+    layoutType: [{ type: Input }],
+    parentFieldKey: [{ type: Input }],
+    valueChange: [{ type: Output }],
+    formValidationChange: [{ type: Output }],
+    elementClick: [{ type: Output }],
+    input: [{ type: ViewChild, args: ['input',] }]
+};
+class PepLinkModule {
+    constructor(pepIconRegistry) {
+        this.pepIconRegistry = pepIconRegistry;
+        this.pepIconRegistry.registerIcons([pepIconSystemEdit]);
+    }
+}
+PepLinkModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    ReactiveFormsModule,
+                    // Material modules,
+                    MatCommonModule,
+                    MatButtonModule,
+                    MatFormFieldModule,
+                    MatInputModule,
+                    MatIconModule,
+                    // ngx-lib modules
+                    PepNgxLibModule,
+                    PepIconModule,
+                    PepFieldTitleModule,
+                    PepTextboxIconModule,
+                ],
+                exports: [PepLinkComponent],
+                declarations: [
+                    PepLinkComponent,
+                    //   PepTextboxValidationDirective,
+                    IsUrlPipe
+                ],
+                providers: [IsUrlPipe]
+            },] }
+];
+PepLinkModule.ctorParameters = () => [
+    { type: PepIconRegistry }
+];
+/*
+ * Public API Surface of ngx-lib/link
+ */
+/**
+ * Generated bundle index. Do not edit.
+ */
+export { PepLinkComponent, PepLinkModule, IsUrlPipe as ɵa };
+//# sourceMappingURL=pepperi-addons-ngx-lib-link.js.map