npm - @pepperi-addons/ngx-lib - Versions diffs - 0.3.4 → 0.3.5-beta.1 - Mend

@pepperi-addons/ngx-lib 0.3.4 → 0.3.5-beta.1

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 (17) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"pepperi-addons-ngx-lib-images-filmstrip.js","sources":["../../../projects/ngx-lib/images-filmstrip/images-filmstrip.component.ts","../../../projects/ngx-lib/images-filmstrip/images-filmstrip.module.ts","../../../projects/ngx-lib/images-filmstrip/public-api.ts","../../../projects/ngx-lib/images-filmstrip/pepperi-addons-ngx-lib-images-filmstrip.ts"],"sourcesContent":["import {\n Component,\n ViewChild,\n OnInit,\n OnDestroy,\n AfterViewInit,\n ElementRef,\n Input,\n TemplateRef,\n Renderer2,\n ChangeDetectorRef,\n Inject,\n Optional,\n ViewContainerRef,\n OnChanges,\n} from '@angular/core';\nimport {\n trigger,\n state,\n style,\n transition,\n animate,\n} from '@angular/animations';\nimport { FormGroup } from '@angular/forms';\nimport { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';\nimport { TranslateService } from '@ngx-translate/core';\nimport {\n Gallery,\n GalleryConfig,\n LoadingStrategy,\n SlidingDirection,\n ThumbnailsPosition,\n GalleryItem,\n ImageItem,\n GalleryRef,\n} from 'ng-gallery';\nimport {\n PepCustomizationService,\n PepLayoutType,\n PepLayoutService,\n PepFileService,\n PepHorizontalAlignment,\n DEFAULT_HORIZONTAL_ALIGNMENT,\n PepImagesField,\n PepUtilitiesService\n} from '@pepperi-addons/ngx-lib';\nimport { PepDialogService } from '@pepperi-addons/ngx-lib/dialog';\nimport { pepIconArrowRightAlt, pepIconArrowLeftAlt, PepIconRegistry, pepIconNoImage2 } from '@pepperi-addons/ngx-lib/icon';\n\nimport 'hammerjs';\n\ninterface IPepImagesFilmstripDialogData {\n currIndex: number;\n key: string;\n value: string;\n label: string;\n uid: string;\n showThumbnails: boolean;\n}\n\n// export const slideInAnimation = trigger('slideAnimation', [\n// state('in', style({ transform: 'translateY(0)', opacity: 1 })),\n// transition(':enter', [\n// style({ transform: 'translateY(-100%)', opacity: 0 }),\n// animate(400)\n// ]),\n// transition(':leave', [\n// animate(400, style({ transform: 'translateY(-100%)', opacity: 0 }))\n// ])\n// ]);\n\nimport {\n IMAGEVIEWER_CONFIG,\n ImageViewerConfig,\n createButtonConfig,\n} from '@hallysonh/ngx-imageviewer';\nimport { DOCUMENT } from '@angular/common';\n\nexport function createViewerConfig(\n translate: TranslateService\n): ImageViewerConfig {\n return {\n // width: 850,\n // height: 150,\n bgStyle: '#FFF', // component background style\n // scaleStep: 0.1, // zoom scale step (using the zoom in/out buttons)\n // rotateStepper: false, // touch rotate should rotate only 90 to 90 degrees\n loadingMessage: translate.instant('MESSAGES.INFO_LOADING_FILE'), // 'Loading...',\n // buttonStyle: {\n // iconFontFamily: 'Material Icons', // font used to render the button icons\n // alpha: 0.5, // buttons' transparence value\n // hoverAlpha: 0.7, // buttons' transparence value when mouse is over\n // bgStyle: '#000000', // buttons' background style\n // iconStyle: '#ffffff', // buttons' icon colors\n // borderStyle: '#000000', // buttons' border style\n // borderWidth: 0, // buttons' border width (0 == disabled)\n // },\n // tooltips: {\n // enabled: true, // enable or disable tooltips for buttons\n // bgStyle: '#000000', // tooltip background style\n // bgAlpha: 0.5, // tooltip background transparence\n // textStyle: '#ffffff', // tooltip's text style\n // textAlpha: 0.9, // tooltip's text transparence\n // padding: 15, // tooltip padding\n // radius: 20, // tooltip border radius\n // },\n // shorter button configuration style\n nextPageButton: createButtonConfig(\n 'navigate_next',\n 'Next page',\n 0,\n false\n ),\n beforePageButton: createButtonConfig(\n 'navigate_before',\n 'Previous page',\n 1,\n false\n ),\n zoomOutButton: createButtonConfig('zoom_out', 'Zoom out', 0, false),\n zoomInButton: createButtonConfig('zoom_in', 'Zoom in', 1, false),\n rotateLeftButton: createButtonConfig(\n 'rotate_left',\n 'Rotate left',\n 2,\n false\n ),\n rotateRightButton: createButtonConfig(\n 'rotate_right',\n 'Rotate right',\n 3,\n false\n ),\n resetButton: createButtonConfig('autorenew', 'Reset', 4, false),\n };\n}\n\n@Component({\n selector: 'pep-images-filmstrip',\n templateUrl: './images-filmstrip.component.html',\n styleUrls: ['./images-filmstrip.component.scss', './images-filmstrip.component.theme.scss'],\n // animations: [slideInAnimation],\n providers: [\n {\n provide: IMAGEVIEWER_CONFIG,\n // useValue: IMAGEVIEWER_CONFIG_DEFAULT,\n useFactory: createViewerConfig,\n deps: [TranslateService],\n },\n ],\n})\nexport class PepImagesFilmstripComponent\n implements OnInit, OnChanges, AfterViewInit, OnDestroy {\n // @ViewChild('ngxViewerImage') ngxViewerImage: any; // TODO: Check if we need to use this??\n @Input() key = '';\n @Input() value = '';\n @Input() label = '';\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 controlType = 'images';\n\n @Input() form: FormGroup = null;\n @Input() uid = '0';\n @Input() showTitle = false;\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() currIndex = 0;\n @Input() showThumbnails = false;\n\n @ViewChild('galleryCont') galleryCont: ElementRef;\n @ViewChild('galleryDialogTemplate', { read: TemplateRef })\n galleryDialogTemplate: TemplateRef<any>;\n @ViewChild('galleryDialogCont') galleryDialogCont: ElementRef;\n\n config: GalleryConfig;\n items: GalleryItem[] = null;\n inDialog = false;\n\n mandatory = false;\n readonly = false;\n disabled = false;\n fieldHeight = '';\n standAlone = false;\n\n galleryWidth = 0;\n galleryHeight;\n isVertical = false;\n galleryRef: GalleryRef;\n dialogGalleryRef: GalleryRef;\n\n constructor(\n private customizationService: PepCustomizationService,\n private dialogService: PepDialogService,\n private layoutService: PepLayoutService,\n private fileService: PepFileService,\n private iconRegistry: PepIconRegistry,\n private utilitiesService: PepUtilitiesService,\n private gallery: Gallery,\n private renderer: Renderer2,\n private element: ElementRef,\n private cd: ChangeDetectorRef,\n @Optional() @Inject(DOCUMENT) private document: any,\n @Optional()\n private dialogRef: MatDialogRef<PepImagesFilmstripComponent>,\n @Optional()\n @Inject(MAT_DIALOG_DATA)\n private data: IPepImagesFilmstripDialogData\n ) {\n // If data exist copy all data properties into this.\n if (dialogRef && data) {\n this.inDialog = true;\n\n Object.keys(data).forEach((key) => {\n if (key in this) {\n this[key] = data[key];\n }\n });\n }\n\n this.config = {\n nav: false, // Show navigation buttons\n // navIcon: pepIconArrowRightAlt.data,\n // loop: true,\n // zoomOut: 0,\n // dots: false,\n // dotsPosition: 'bottom',\n // counterPosition: 'top',\n // thumb: true,\n counter: false, // Show counter\n gestures: true, // Use touch events (requires hammer.js)\n // autoPlay: false,\n // thumbWidth: 120,\n // thumbHeight: 90,\n imageSize: 'contain',\n // panSensitivity: 25,\n // disableThumb: false,\n // playerInterval: 3000,\n // thumbMode: ThumbnailsMode.Free,\n // thumbPosition: ThumbnailsPosition.Bottom,\n loadingStrategy: LoadingStrategy.Preload,\n // slidingDirection: SlidingDirection.Horizontal,\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 PepImagesField({\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 // private renderNavIcon(galleryContainer, isLeft: boolean) {\n // let iconName = isLeft ? pepIconArrowLeftAlt.name : pepIconArrowRightAlt.name;\n // const svgData = this.iconRegistry.getIcon(iconName);\n // const svgIcon = this.utilitiesService.getSvgElementFromString(\n // this.document,\n // svgData\n // );\n\n // const elementNameToFind = isLeft ? 'g-nav-prev' : 'g-nav-next'\n\n // const elementArr = galleryContainer.nativeElement.querySelectorAll(`.${elementNameToFind}`);\n // if (elementArr && elementArr.length > 0) {\n // elementArr[0].appendChild(svgIcon);\n // this.renderer.addClass(svgIcon, 'svg-icon');\n // }\n // }\n\n ngOnInit(): void {\n if (!this.inDialog) {\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 if (this.items === null) {\n const imgArr = this.value ? this.value.split(';') : [];\n // add No image image when there is no images\n if (imgArr.length === 0) {\n const noImageSrc = this.fileService.getSvgAsImageSrc(\n pepIconNoImage2.data\n );\n imgArr.push(noImageSrc);\n }\n\n this.items = imgArr.map(\n (img) => new ImageItem({ src: img, thumb: img })\n );\n }\n\n this.config.dots = this.config.nav = this.items.length > 1;\n this.config.thumb =\n (this.key === 'ItemFilmstripImages' \|\| this.showThumbnails) &&\n this.items.length > 1\n ? true\n : false;\n this.currIndex =\n this.key === 'ItemFilmstripImages' &&\n this.currIndex === 0 &&\n this.items.length > 1\n ? Math.floor(this.items.length / 2) - 1\n : this.currIndex;\n }\n\n ngAfterViewInit(): void {\n if (this.inDialog) {\n this.afterDialogOpened();\n } else {\n this.galleryRef = this.gallery.ref(\n `${this.key}-${this.uid}-gallery`\n );\n this.initGalleryStyle(this.galleryCont, this.galleryRef);\n }\n }\n\n ngOnChanges(): void {\n if (this.standAlone) {\n this.setDefaultForm();\n }\n }\n\n ngOnDestroy(): void {\n if (this.galleryRef) {\n this.galleryRef.destroy();\n }\n if (this.dialogGalleryRef) {\n this.dialogGalleryRef.destroy();\n }\n // if (this.myPinch) { this.myPinch.destroy(); }\n }\n\n initGalleryStyle(galleryContainer, galleryRef): void {\n setTimeout(() => {\n // Set thumbnails position and sliding direction\n this.setThumbnailDimension(galleryContainer);\n galleryRef.setConfig(this.config);\n // this.renderNavIcon(galleryContainer, true);\n // this.renderNavIcon(galleryContainer, false);\n }, 0);\n\n const currentIndex = this.currIndex;\n if (currentIndex > 0) {\n setTimeout(() => {\n galleryRef.load(this.items);\n galleryRef.set(currentIndex);\n }, 0);\n // galleryRef.set(currentIndex);\n } else {\n galleryRef.load(this.items);\n }\n }\n\n onError(e): void {\n const noImageSrc = this.fileService.getSvgAsImageSrc(\n pepIconNoImage2.data\n );\n const noimg = new ImageItem({ src: noImageSrc, thumb: noImageSrc });\n this.items.splice(e.itemIndex, 1, noimg);\n }\n\n enlargeImage(event: any): void {\n const config = this.dialogService.getDialogConfig({}, 'inline');\n config.maxWidth = '75vw';\n config.height = '95vh';\n\n const dialogRef = this.dialogService.openDialog(\n this.galleryDialogTemplate,\n {\n currIndex: this.currIndex,\n },\n config\n );\n\n dialogRef.afterOpened().subscribe(() => {\n this.afterDialogOpened();\n });\n\n // Update currentIndex in galleryRef\n // dialogRef.afterClosed().subscribe(value => {\n // this.galleryRef.set(this.currIndex);\n // });\n }\n\n afterDialogOpened(): void {\n this.dialogGalleryRef = this.gallery.ref(\n `${this.key}-${this.uid}-dlgGallery`\n );\n this.initGalleryStyle(this.galleryDialogCont, this.dialogGalleryRef);\n }\n\n setThumbnailDimension(galleryContainer): void {\n this.galleryWidth = galleryContainer.nativeElement.clientWidth;\n // this.galleryHeight = galleryContainer.nativeElement.clientHeight - 32; // TODO - TALK WITH TOMER\n this.galleryHeight = this.inDialog\n ? galleryContainer.nativeElement.clientHeight - 32\n : galleryContainer.nativeElement.clientHeight;\n // this.galleryHeight = galleryContainer.nativeElement.clientHeight - 32;\n this.cd.detectChanges();\n\n this.isVertical = this.galleryWidth < this.galleryHeight;\n this.cd.detectChanges();\n if (this.isVertical) {\n let width =\n (this.galleryWidth - (this.items.length - 1) * 16) /\n this.items.length;\n width = Math.min(Math.max(width, 24), 96);\n\n this.config.thumbHeight = width;\n this.config.thumbWidth = width + 16;\n } else {\n let height =\n (this.galleryHeight - (this.items.length - 1) * 16) /\n this.items.length;\n height = Math.min(Math.max(height, 24), 96);\n\n this.config.thumbHeight = height + 16;\n this.config.thumbWidth = height;\n }\n\n this.config.thumbPosition = this.isVertical\n ? ThumbnailsPosition.Bottom\n : this.layoutService.isRtl()\n ? ThumbnailsPosition.Right\n : ThumbnailsPosition.Left;\n this.config.slidingDirection =\n this.key !== 'ItemFilmstripImages'\n ? SlidingDirection.Horizontal\n : this.isVertical\n ? SlidingDirection.Horizontal\n : SlidingDirection.Vertical;\n\n this.config.imageSize = 'contain';\n }\n\n indexChange(item: any): void {\n this.currIndex = item.currIndex;\n // if (this.ngxViewerImage && this.ngxViewerImage.scale) {\n // this.ngxViewerImage.scale = 1;\n // this.updateStyle();\n // }\n }\n\n // scrollFunction(e: any): boolean {\n // e.deltaY > 0 ? this.zoomOut() : this.zoomIn();\n // return false;\n // }\n\n // zoomIn(): void {\n // if (this.ngxViewerImage.scale < 2) {\n // this.ngxViewerImage.scale = (1 + this.ngxViewerImage.config.zoomFactor);\n // } else {\n // this.ngxViewerImage.scale = 2;\n // }\n // this.updateStyle();\n // }\n\n // zoomOut(): void {\n // if (this.ngxViewerImage.scale > this.ngxViewerImage.config.zoomFactor) {\n // this.ngxViewerImage.scale /= (1 + this.ngxViewerImage.config.zoomFactor);\n // }\n // this.updateStyle();\n // }\n\n // private updateStyle(): void {\n // this.ngxViewerImage.style.transform = `translate(${this.ngxViewerImage.translateX}px,\n // ${this.ngxViewerImage.translateY}px) rotate(${this.ngxViewerImage.rotation}deg) scale(${this.ngxViewerImage.scale})`;\n\n // this.cd.detectChanges();\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 { MatDialogModule } from '@angular/material/dialog';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemEdit,\n pepIconSystemClose,\n pepIconArrowRightAlt,\n pepIconArrowLeftAlt,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';\n\nimport { GalleryModule } from 'ng-gallery';\nimport { ImageViewerModule } from '@hallysonh/ngx-imageviewer';\n\nimport { PepImagesFilmstripComponent } from './images-filmstrip.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n // Material modules,\n MatCommonModule,\n MatFormFieldModule,\n MatDialogModule,\n MatIconModule,\n // External modules\n GalleryModule,\n ImageViewerModule,\n // ImageViewerModule.forRoot({\n // btnClass: 'default', // The CSS class(es) that will apply to the buttons\n // zoomFactor: 0.1, // The amount that the scale will be increased by\n // containerBackgroundColor: 'transparent', // The color to use for the background. This can provided in hex, or rgb(a).\n // wheelZoom: true, // If true, the mouse wheel can be used to zoom in\n // allowFullscreen: false, // If true, the fullscreen button will be shown, allowing the user to entr fullscreen mode\n // btnIcons: {\n // // The icon classes that will apply to the buttons. By default, font-awesome is used.\n // zoomIn: 'fa fa-plus',\n // zoomOut: 'fa fa-minus',\n // rotateClockwise: 'fa fa-repeat',\n // rotateCounterClockwise: 'fa fa-undo',\n // next: 'fa fa-arrow-right',\n // prev: 'fa fa-arrow-left',\n // fullscreen: 'fa fa-arrows-alt'\n // }\n // }),\n // ngx-lib modules\n PepNgxLibModule,\n PepButtonModule,\n PepIconModule,\n PepFieldTitleModule,\n PepDialogModule,\n ],\n exports: [PepImagesFilmstripComponent],\n declarations: [PepImagesFilmstripComponent],\n})\nexport class PepImagesFilmstripModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([\n pepIconSystemEdit,\n pepIconSystemClose,\n pepIconArrowRightAlt,\n pepIconArrowLeftAlt,\n ]);\n }\n}\n","/\n * Public API Surface of ngx-lib/images-filmstrip\n /\nexport from './images-filmstrip.module';\nexport * from './images-filmstrip.component';\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-images-filmstrip.js","sources":["../../../projects/ngx-lib/images-filmstrip/images-filmstrip.component.ts","../../../projects/ngx-lib/images-filmstrip/images-filmstrip.module.ts","../../../projects/ngx-lib/images-filmstrip/public-api.ts","../../../projects/ngx-lib/images-filmstrip/pepperi-addons-ngx-lib-images-filmstrip.ts"],"sourcesContent":["import {\n Component,\n ViewChild,\n OnInit,\n OnDestroy,\n AfterViewInit,\n ElementRef,\n Input,\n TemplateRef,\n Renderer2,\n ChangeDetectorRef,\n Inject,\n Optional,\n ViewContainerRef,\n OnChanges,\n} from '@angular/core';\nimport {\n trigger,\n state,\n style,\n transition,\n animate,\n} from '@angular/animations';\nimport { FormGroup } from '@angular/forms';\nimport { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';\nimport { TranslateService } from '@ngx-translate/core';\nimport {\n Gallery,\n GalleryConfig,\n LoadingStrategy,\n SlidingDirection,\n ThumbnailsPosition,\n GalleryItem,\n ImageItem,\n GalleryRef,\n} from 'ng-gallery';\nimport {\n PepCustomizationService,\n PepLayoutType,\n PepLayoutService,\n PepFileService,\n PepHorizontalAlignment,\n DEFAULT_HORIZONTAL_ALIGNMENT,\n PepImagesField,\n PepUtilitiesService\n} from '@pepperi-addons/ngx-lib';\nimport { PepDialogService } from '@pepperi-addons/ngx-lib/dialog';\nimport { pepIconArrowRightAlt, pepIconArrowLeftAlt, PepIconRegistry, pepIconNoImage2 } from '@pepperi-addons/ngx-lib/icon';\n\nimport 'hammerjs';\n\ninterface IPepImagesFilmstripDialogData {\n currIndex: number;\n key: string;\n value: string;\n label: string;\n uid: string;\n showThumbnails: boolean;\n}\n\n// export const slideInAnimation = trigger('slideAnimation', [\n// state('in', style({ transform: 'translateY(0)', opacity: 1 })),\n// transition(':enter', [\n// style({ transform: 'translateY(-100%)', opacity: 0 }),\n// animate(400)\n// ]),\n// transition(':leave', [\n// animate(400, style({ transform: 'translateY(-100%)', opacity: 0 }))\n// ])\n// ]);\n\nimport {\n IMAGEVIEWER_CONFIG,\n ImageViewerConfig,\n createButtonConfig,\n} from '@hallysonh/ngx-imageviewer';\nimport { DOCUMENT } from '@angular/common';\n\nexport function createViewerConfig(\n translate: TranslateService\n): ImageViewerConfig {\n return {\n // width: 850,\n // height: 150,\n bgStyle: '#FFF', // component background style\n // scaleStep: 0.1, // zoom scale step (using the zoom in/out buttons)\n // rotateStepper: false, // touch rotate should rotate only 90 to 90 degrees\n loadingMessage: translate.instant('MESSAGES.INFO_LOADING_FILE'), // 'Loading...',\n // buttonStyle: {\n // iconFontFamily: 'Material Icons', // font used to render the button icons\n // alpha: 0.5, // buttons' transparence value\n // hoverAlpha: 0.7, // buttons' transparence value when mouse is over\n // bgStyle: '#000000', // buttons' background style\n // iconStyle: '#ffffff', // buttons' icon colors\n // borderStyle: '#000000', // buttons' border style\n // borderWidth: 0, // buttons' border width (0 == disabled)\n // },\n // tooltips: {\n // enabled: true, // enable or disable tooltips for buttons\n // bgStyle: '#000000', // tooltip background style\n // bgAlpha: 0.5, // tooltip background transparence\n // textStyle: '#ffffff', // tooltip's text style\n // textAlpha: 0.9, // tooltip's text transparence\n // padding: 15, // tooltip padding\n // radius: 20, // tooltip border radius\n // },\n // shorter button configuration style\n nextPageButton: createButtonConfig(\n 'navigate_next',\n 'Next page',\n 0,\n false\n ),\n beforePageButton: createButtonConfig(\n 'navigate_before',\n 'Previous page',\n 1,\n false\n ),\n zoomOutButton: createButtonConfig('zoom_out', 'Zoom out', 0, false),\n zoomInButton: createButtonConfig('zoom_in', 'Zoom in', 1, false),\n rotateLeftButton: createButtonConfig(\n 'rotate_left',\n 'Rotate left',\n 2,\n false\n ),\n rotateRightButton: createButtonConfig(\n 'rotate_right',\n 'Rotate right',\n 3,\n false\n ),\n resetButton: createButtonConfig('autorenew', 'Reset', 4, false),\n };\n}\n\n@Component({\n selector: 'pep-images-filmstrip',\n templateUrl: './images-filmstrip.component.html',\n styleUrls: ['./images-filmstrip.component.scss', './images-filmstrip.component.theme.scss'],\n // animations: [slideInAnimation],\n providers: [\n {\n provide: IMAGEVIEWER_CONFIG,\n // useValue: IMAGEVIEWER_CONFIG_DEFAULT,\n useFactory: createViewerConfig,\n deps: [TranslateService],\n },\n ],\n})\nexport class PepImagesFilmstripComponent\n implements OnInit, OnChanges, AfterViewInit, OnDestroy {\n // @ViewChild('ngxViewerImage') ngxViewerImage: any; // TODO: Check if we need to use this??\n @Input() key = '';\n @Input() value = '';\n @Input() label = '';\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 controlType = 'images';\n\n @Input() form: FormGroup = null;\n @Input() uid = '0';\n @Input() showTitle = false;\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() currIndex = 0;\n @Input() showThumbnails = false;\n\n @ViewChild('galleryCont') galleryCont: ElementRef;\n @ViewChild('galleryDialogTemplate', { read: TemplateRef })\n galleryDialogTemplate: TemplateRef<any>;\n @ViewChild('galleryDialogCont') galleryDialogCont: ElementRef;\n\n config: GalleryConfig;\n items: GalleryItem[] = null;\n inDialog = false;\n\n mandatory = false;\n readonly = false;\n disabled = false;\n fieldHeight = '';\n standAlone = false;\n\n galleryWidth = 0;\n galleryHeight;\n isVertical = false;\n galleryRef: GalleryRef;\n dialogGalleryRef: GalleryRef;\n\n constructor(\n private customizationService: PepCustomizationService,\n private dialogService: PepDialogService,\n private layoutService: PepLayoutService,\n private fileService: PepFileService,\n private iconRegistry: PepIconRegistry,\n private utilitiesService: PepUtilitiesService,\n private gallery: Gallery,\n private renderer: Renderer2,\n private element: ElementRef,\n private cd: ChangeDetectorRef,\n @Optional() @Inject(DOCUMENT) private document: any,\n @Optional()\n private dialogRef: MatDialogRef<PepImagesFilmstripComponent>,\n @Optional()\n @Inject(MAT_DIALOG_DATA)\n private data: IPepImagesFilmstripDialogData\n ) {\n // If data exist copy all data properties into this.\n if (dialogRef && data) {\n this.inDialog = true;\n\n Object.keys(data).forEach((key) => {\n if (key in this) {\n this[key] = data[key];\n }\n });\n }\n\n this.config = {\n nav: false, // Show navigation buttons\n // navIcon: pepIconArrowRightAlt.data,\n // loop: true,\n // zoomOut: 0,\n // dots: false,\n // dotsPosition: 'bottom',\n // counterPosition: 'top',\n // thumb: true,\n counter: false, // Show counter\n gestures: true, // Use touch events (requires hammer.js)\n // autoPlay: false,\n // thumbWidth: 120,\n // thumbHeight: 90,\n imageSize: 'contain',\n // panSensitivity: 25,\n // disableThumb: false,\n // playerInterval: 3000,\n // thumbMode: ThumbnailsMode.Free,\n // thumbPosition: ThumbnailsPosition.Bottom,\n loadingStrategy: LoadingStrategy.Preload,\n // slidingDirection: SlidingDirection.Horizontal,\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 PepImagesField({\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 // private renderNavIcon(galleryContainer, isLeft: boolean) {\n // let iconName = isLeft ? pepIconArrowLeftAlt.name : pepIconArrowRightAlt.name;\n // const svgData = this.iconRegistry.getIcon(iconName);\n // const svgIcon = this.utilitiesService.getSvgElementFromString(\n // this.document,\n // svgData\n // );\n\n // const elementNameToFind = isLeft ? 'g-nav-prev' : 'g-nav-next'\n\n // const elementArr = galleryContainer.nativeElement.querySelectorAll(`.${elementNameToFind}`);\n // if (elementArr && elementArr.length > 0) {\n // elementArr[0].appendChild(svgIcon);\n // this.renderer.addClass(svgIcon, 'svg-icon');\n // }\n // }\n\n ngOnInit(): void {\n if (!this.inDialog) {\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 if (this.items === null) {\n const imgArr = this.value ? this.value.split(';') : [];\n // add No image image when there is no images\n if (imgArr.length === 0) {\n const noImageSrc = this.fileService.getSvgAsImageSrc(\n pepIconNoImage2.data\n );\n imgArr.push(noImageSrc);\n }\n\n this.items = imgArr.map(\n (img) => new ImageItem({ src: img, thumb: img })\n );\n }\n\n this.config.dots = this.config.nav = this.items.length > 1;\n this.config.thumb =\n (this.key === 'ItemFilmstripImages' \|\| this.showThumbnails) &&\n this.items.length > 1\n ? true\n : false;\n this.currIndex =\n this.key === 'ItemFilmstripImages' &&\n this.currIndex === 0 &&\n this.items.length > 1\n ? Math.floor(this.items.length / 2) - 1\n : this.currIndex;\n }\n\n ngAfterViewInit(): void {\n if (this.inDialog) {\n this.afterDialogOpened();\n } else {\n this.galleryRef = this.gallery.ref(\n `${this.key}-${this.uid}-gallery`\n );\n this.initGalleryStyle(this.galleryCont, this.galleryRef);\n }\n }\n\n ngOnChanges(): void {\n if (this.standAlone) {\n this.setDefaultForm();\n }\n }\n\n ngOnDestroy(): void {\n if (this.galleryRef) {\n this.galleryRef.destroy();\n }\n if (this.dialogGalleryRef) {\n this.dialogGalleryRef.destroy();\n }\n // if (this.myPinch) { this.myPinch.destroy(); }\n }\n\n initGalleryStyle(galleryContainer, galleryRef): void {\n setTimeout(() => {\n // Set thumbnails position and sliding direction\n this.setThumbnailDimension(galleryContainer);\n galleryRef.setConfig(this.config);\n // this.renderNavIcon(galleryContainer, true);\n // this.renderNavIcon(galleryContainer, false);\n }, 0);\n\n const currentIndex = this.currIndex;\n if (currentIndex > 0) {\n setTimeout(() => {\n galleryRef.load(this.items);\n galleryRef.set(currentIndex);\n }, 0);\n // galleryRef.set(currentIndex);\n } else {\n galleryRef.load(this.items);\n }\n }\n\n onError(e): void {\n const noImageSrc = this.fileService.getSvgAsImageSrc(\n pepIconNoImage2.data\n );\n const noimg = new ImageItem({ src: noImageSrc, thumb: noImageSrc });\n this.items.splice(e.itemIndex, 1, noimg);\n }\n\n enlargeImage(event: any): void {\n const config = this.dialogService.getDialogConfig({}, 'inline');\n config.maxWidth = '75vw';\n config.height = '95vh';\n\n const dialogRef = this.dialogService.openDialog(\n this.galleryDialogTemplate,\n {\n currIndex: this.currIndex,\n },\n config\n );\n\n dialogRef.afterOpened().subscribe(() => {\n this.afterDialogOpened();\n });\n\n // Update currentIndex in galleryRef\n // dialogRef.afterClosed().subscribe(value => {\n // this.galleryRef.set(this.currIndex);\n // });\n }\n\n afterDialogOpened(): void {\n this.dialogGalleryRef = this.gallery.ref(\n `${this.key}-${this.uid}-dlgGallery`\n );\n this.initGalleryStyle(this.galleryDialogCont, this.dialogGalleryRef);\n }\n\n setThumbnailDimension(galleryContainer): void {\n this.galleryWidth = galleryContainer.nativeElement.clientWidth;\n // this.galleryHeight = galleryContainer.nativeElement.clientHeight - 32; // TODO - TALK WITH TOMER\n this.galleryHeight = this.inDialog\n ? galleryContainer.nativeElement.clientHeight - 32\n : galleryContainer.nativeElement.clientHeight;\n // this.galleryHeight = galleryContainer.nativeElement.clientHeight - 32;\n this.cd.detectChanges();\n\n this.isVertical = this.galleryWidth < this.galleryHeight;\n this.cd.detectChanges();\n if (this.isVertical) {\n let width =\n (this.galleryWidth - (this.items.length - 1) * 16) /\n this.items.length;\n width = Math.min(Math.max(width, 24), 96);\n\n this.config.thumbHeight = width;\n this.config.thumbWidth = width + 16;\n } else {\n let height =\n (this.galleryHeight - (this.items.length - 1) * 16) /\n this.items.length;\n height = Math.min(Math.max(height, 24), 96);\n\n this.config.thumbHeight = height + 16;\n this.config.thumbWidth = height;\n }\n\n this.config.thumbPosition = this.isVertical\n ? ThumbnailsPosition.Bottom\n : this.layoutService.isRtl()\n ? ThumbnailsPosition.Right\n : ThumbnailsPosition.Left;\n this.config.slidingDirection =\n this.key !== 'ItemFilmstripImages'\n ? SlidingDirection.Horizontal\n : this.isVertical\n ? SlidingDirection.Horizontal\n : SlidingDirection.Vertical;\n\n this.config.imageSize = 'contain';\n }\n\n indexChange(item: any): void {\n this.currIndex = item.currIndex;\n // if (this.ngxViewerImage && this.ngxViewerImage.scale) {\n // this.ngxViewerImage.scale = 1;\n // this.updateStyle();\n // }\n }\n\n // scrollFunction(e: any): boolean {\n // e.deltaY > 0 ? this.zoomOut() : this.zoomIn();\n // return false;\n // }\n\n // zoomIn(): void {\n // if (this.ngxViewerImage.scale < 2) {\n // this.ngxViewerImage.scale = (1 + this.ngxViewerImage.config.zoomFactor);\n // } else {\n // this.ngxViewerImage.scale = 2;\n // }\n // this.updateStyle();\n // }\n\n // zoomOut(): void {\n // if (this.ngxViewerImage.scale > this.ngxViewerImage.config.zoomFactor) {\n // this.ngxViewerImage.scale /= (1 + this.ngxViewerImage.config.zoomFactor);\n // }\n // this.updateStyle();\n // }\n\n // private updateStyle(): void {\n // this.ngxViewerImage.style.transform = `translate(${this.ngxViewerImage.translateX}px,\n // ${this.ngxViewerImage.translateY}px) rotate(${this.ngxViewerImage.rotation}deg) scale(${this.ngxViewerImage.scale})`;\n\n // this.cd.detectChanges();\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 { MatDialogModule } from '@angular/material/dialog';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemEdit,\n pepIconSystemClose,\n pepIconArrowRightAlt,\n pepIconArrowLeftAlt,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';\n\nimport { GalleryModule } from 'ng-gallery';\nimport { ImageViewerModule } from '@hallysonh/ngx-imageviewer';\n\nimport { PepImagesFilmstripComponent } from './images-filmstrip.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n // Material modules,\n MatCommonModule,\n MatFormFieldModule,\n MatDialogModule,\n MatIconModule,\n // External modules\n GalleryModule,\n ImageViewerModule,\n // ImageViewerModule.forRoot({\n // btnClass: 'default', // The CSS class(es) that will apply to the buttons\n // zoomFactor: 0.1, // The amount that the scale will be increased by\n // containerBackgroundColor: 'transparent', // The color to use for the background. This can provided in hex, or rgb(a).\n // wheelZoom: true, // If true, the mouse wheel can be used to zoom in\n // allowFullscreen: false, // If true, the fullscreen button will be shown, allowing the user to entr fullscreen mode\n // btnIcons: {\n // // The icon classes that will apply to the buttons. By default, font-awesome is used.\n // zoomIn: 'fa fa-plus',\n // zoomOut: 'fa fa-minus',\n // rotateClockwise: 'fa fa-repeat',\n // rotateCounterClockwise: 'fa fa-undo',\n // next: 'fa fa-arrow-right',\n // prev: 'fa fa-arrow-left',\n // fullscreen: 'fa fa-arrows-alt'\n // }\n // }),\n // ngx-lib modules\n PepNgxLibModule,\n PepButtonModule,\n PepIconModule,\n PepFieldTitleModule,\n PepDialogModule,\n ],\n exports: [PepImagesFilmstripComponent],\n declarations: [PepImagesFilmstripComponent],\n})\nexport class PepImagesFilmstripModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([\n pepIconSystemEdit,\n pepIconSystemClose,\n pepIconArrowRightAlt,\n pepIconArrowLeftAlt,\n ]);\n }\n}\n","/\n * Public API Surface of ngx-lib/images-filmstrip\n /\nexport from './images-filmstrip.module';\nexport * from './images-filmstrip.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-rich-html-textarea.js CHANGED Viewed

@@ -200,7 +200,7 @@ PepRichHtmlTextareaComponent.decorators = [
                 selector: 'pep-rich-html-textarea',
                 template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\">\n        <div class=\"pep-textarea-container pep-report-textarea\" [ngClass]=\"{ 'stand-alone': standAlone,\n            'right-alignment': xAlignment == 'right', 'one-row': !isFormView && rowSpan === 1,\n            'pep-textarea-card-container': layoutType === 'card'}\">\n            <pep-field-title *ngIf=\"renderTitle && isFormView\" [label]=\"label\" [mandatory]=\"mandatory\"\n                [disabled]=\"disabled\"\n                [maxFieldCharacters]=\"inlineMode && !disabled && !readonly ? maxFieldCharacters : 0\"\n                [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\" [inputLength]=\"quillContent?.length\">\n            </pep-field-title>\n            <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n                [ngClass]=\"{ 'pep-table-textarea': layoutType === 'table', 'active': active, 'ignore-disabled': disabled }\">\n                <textarea [hidden]=\"true\" matInput [formControlName]=\"key\"></textarea>\n\n                <ng-container *ngIf=\"inlineMode; then inlineBlock; else notInlineBlock\"></ng-container>\n\n                <ng-template #inlineBlock>\n                    <ng-container *ngTemplateOutlet=\"quilTemplate; context: {inDialog: false}\"></ng-container>\n                </ng-template>\n                <ng-template #notInlineBlock>\n\n                    <!-- We can use the quill-view-html\n                    <quill-view-html class=\"body-sm rich-text-cont \"\n                    [ngStyle]=\"{ 'text-align': xAlignment == 'right' ? 'right' : 'left' }\" [content]=\"value | pepSafeHtml\"\n                    theme=\"snow\" [style.height]=\"fieldHeight\"></quill-view-html> \n                -->\n\n                    <div class=\"body-sm rich-text-cont \"\n                        [ngStyle]=\"{ 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                        [innerHtml]=\"value | pepSafeHtml\" [style.height]=\"fieldHeight\">\n                    </div>\n                </ng-template>\n                <pep-textbox-icon matSuffix [value]=\"value\" [label]=\"label\" [type]=\"controlType\"\n                    [disabled]=\"disabled || readonly\"\n                    [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\"\n                    (iconClick)=\"openDialog()\">\n                </pep-textbox-icon>\n                <mat-error>\n                    <span class=\"body-xs\"\n                        [title]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"\n                        [innerText]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"></span>\n                </mat-error>\n\n            </mat-form-field>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true }\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <div class=\"pep-textarea-card-container card-flex-container\"\n            [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\n            [ngStyle]=\"{ '-webkit-line-clamp': rowSpan }\" [class]=\"'text-align-' + xAlignment\"\n            (click)=\"!disabled ? cardTemplateClicked($event) : ''\" [style.height]=\"fieldHeight\">\n            <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title no-shrink\" title=\"{{ label }}\">{{ label\n                }}:&nbsp;</span>\n            <span [id]=\"key\" class=\"body-sm value wrap\" [innerHtml]=\"value | pepSafeHtml\"></span>\n            <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button self-start\"\n                [ngClass]=\"{'self-end' : value && value !== ''}\" mat-button>\n                <mat-icon>\n                    <pep-icon name=\"system_edit\">\n                    </pep-icon>\n                </mat-icon>\n            </button>\n        </div>\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 }\"></ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"value?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <div class=\"pep-textarea-card-container card-flex-container one-row\">\n                    <span [id]=\"key\" class=\"wrap\" [innerHtml]=\"value | pepSafeHtml\"></span>\n                </div>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span>&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n</ng-container>\n\n<ng-template #richTextEditorDialogTemplate>\n    <div class=\"rich-text-editor-container\">\n        <button mat-button [mat-dialog-close]=\"null\" class=\"pep-button icon-button md weak pull-right flip\">\n            <mat-icon>\n                <pep-icon name=\"system_close\">\n                </pep-icon>\n            </mat-icon>\n        </button>\n        <ng-container *ngTemplateOutlet=\"quilTemplate; context: {inDialog: true}\"></ng-container>\n        <div mat-dialog-actions class=\" pep-border-top\">\n            <div class=\"pep-spacing-element-negative\">\n                <button mat-button [mat-dialog-close]=\"null\" class=\"pep-spacing-element pep-button md weak\">\n                    {{'ACTIONS.CANCEL' | translate}}\n                </button>\n                <button mat-button [mat-dialog-close]=\"quillContentDialog || ''\" [disabled]=\"disabled\"\n                    class=\"pep-spacing-element pep-button md strong \">\n                    {{'ACTIONS.SAVE' | translate}}\n                </button>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #quilTemplate let-inDialog=\"inDialog\">\n    <quill-editor id=\"{{inDialog ? 'quill-editor-dialog' : 'quill-editor-inline'}}\"\n        [class]=\"inDialog ? 'dialog-quill' : 'inline-quill'\" [ngClass]=\"{ 'rich-text-cont': !inDialog }\"\n        placeholder=\"{{'RICH_TEXTAREA.HINT' | translate}}\" [ngModel]=\"inDialog ? quillContentDialog : quillContent\"\n        [sanitize]=\"true\" [readOnly]=\"disabled\" [maxLength]=\"maxFieldCharacters\" [required]=\"mandatory\"\n        (onEditorCreated)=\"onEditorCreated($event, inDialog)\" (onContentChanged)=\"onContentChanged($event, inDialog)\"\n        (onBlur)=\"onBlur($event, inDialog)\" (onFocus)=\"onFocus($event, inDialog)\" theme=\"\">\n        <div *ngIf=\"!disabled\" quill-editor-toolbar>\n            <div class=\"pep-spacing-element-negative\">\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.font\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-font select-arrow\">\n                        <option selected></option>\n                        <option value=\"serif\"></option>\n                        <option value=\"monospace\"></option>\n                    </select>\n                    <select *ngIf=\"toolbarOptions?.size\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-size select-arrow\">\n                        <option value=\"small\"></option>\n                        <option selected></option>\n                        <option value=\"large\"></option>\n                        <option value=\"huge\"></option>\n                    </select>\n                </span>\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.header\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-header select-arrow\">\n                        <option value=\"1\"></option>\n                        <option value=\"2\"></option>\n                        <option value=\"3\"></option>\n                        <!-- \n                        <option value=\"4\"></option>\n                        <option value=\"5\"></option>\n                        <option value=\"6\"></option> \n                        -->\n                        <option value=\"false\" selected></option>\n                    </select>\n                </span>\n                <!-- <hr class=\"vertical-separator\" /> -->\n                <span class=\"ql-formats\">\n                    <button mat-button *ngIf=\"toolbarOptions?.bold\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-bold\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.italic\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-italic\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.underline\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-underline\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.strike\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-strike\"></button>\n                </span>\n                <span class=\"ql-formats\">\n                    <button mat-button *ngIf=\"toolbarOptions?.link\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-link\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.image\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-image\"></button>\n                </span>\n                <!-- <hr class=\"vertical-separator\" /> -->\n                <span class=\"ql-formats\">\n                    <button mat-button *ngIf=\"toolbarOptions?.ordered\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-list\" value=\"ordered\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.bullet\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-list\" value=\"bullet\"></button>\n                </span>\n                <!-- <hr class=\"vertical-separator\" /> -->\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.color\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-color\"></select>\n                    <select *ngIf=\"toolbarOptions?.background\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-background\"></select>\n                </span>\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.align\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-align\">\n                        <option selected></option>\n                        <option value=\"center\"></option>\n                        <option value=\"right\"></option>\n                        <option value=\"justify\"></option>\n                    </select>\n                </span>\n            </div>\n        </div>\n    </quill-editor>\n</ng-template>",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".pep-textarea-container,.pepperi-textarea-container{height:inherit;display:grid;align-items:center}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{margin:0;padding:.5rem 1.5rem .5rem 0;vertical-align:unset;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-prefix,.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-prefix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button{width:1rem!important;height:1rem!important}.pep-textarea-container.one-row ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pep-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .mat-input-element{padding-top:.135rem!important}.pep-textarea-container .rich-text-cont,.pepperi-textarea-container .rich-text-cont{overflow-x:hidden;display:inline-block;vertical-align:unset;margin:0;padding:.5rem 1.5rem .5rem 0;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-container.right-alignment .rich-text-cont,.pepperi-textarea-container.right-alignment .rich-text-cont{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pep-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pepperi-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-input-element{padding:.25rem 1.5rem .5rem 0}.pep-textarea-card-container.card-flex-container,.pepperi-textarea-card-container.card-flex-container{height:inherit;display:flex;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset;padding:.25rem;max-width:100%}.pep-textarea-card-container.card-flex-container.one-row .title,.pepperi-textarea-card-container.card-flex-container.one-row .title{padding-top:.25rem}.pep-textarea-card-container.card-flex-container span.value,.pepperi-textarea-card-container.card-flex-container span.value{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset}.pep-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pep-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pep-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pep-report-textarea .mat-form-field-suffix,.pepperi-report-textarea .mat-form-field-suffix{right:0!important}.pep-report-textarea.readonly .mat-form-field-wrapper .mat-form-field-flex,.pepperi-report-textarea.readonly .mat-form-field-wrapper .mat-form-field-flex{padding:0}:host{height:inherit;display:block}.pep-textarea-container ::ng-deep.mat-form-field-infix,.pepperi-textarea-container ::ng-deep.mat-form-field-infix{margin-left:calc(.75rem * -1);margin-left:calc(var(--pep-spacing-md, .75rem) * -1)}.pep-textarea-container.right-alignment ::ng-deep.mat-form-field-infix,.pepperi-textarea-container.right-alignment ::ng-deep.mat-form-field-infix{margin-left:unset;margin-right:calc(.75rem * -1);margin-right:calc(var(--pep-spacing-md, .75rem) * -1)}.vertical-separator{display:none}", ".pep-textarea-container,.pepperi-textarea-container{height:inherit;display:grid;align-items:center}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{margin:0;padding:.5rem 1.5rem .5rem 0;vertical-align:unset;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-prefix,.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-prefix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button{width:1rem!important;height:1rem!important}.pep-textarea-container.one-row ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pep-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .mat-input-element{padding-top:.135rem!important}.pep-textarea-container .rich-text-cont,.pepperi-textarea-container .rich-text-cont{overflow-x:hidden;display:inline-block;vertical-align:unset;margin:0;padding:.5rem 1.5rem .5rem 0;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-container.right-alignment .rich-text-cont,.pepperi-textarea-container.right-alignment .rich-text-cont{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pep-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pepperi-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-input-element{padding:.25rem 1.5rem .5rem 0}.pep-textarea-card-container.card-flex-container,.pepperi-textarea-card-container.card-flex-container{height:inherit;display:flex;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset;padding:.25rem;max-width:100%}.pep-textarea-card-container.card-flex-container.one-row .title,.pepperi-textarea-card-container.card-flex-container.one-row .title{padding-top:.25rem}.pep-textarea-card-container.card-flex-container span.value,.pepperi-textarea-card-container.card-flex-container span.value{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset}.pep-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pep-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pep-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pep-report-textarea .mat-form-field-suffix,.pepperi-report-textarea .mat-form-field-suffix{right:0!important}.pep-report-textarea.readonly .mat-form-field-wrapper .mat-form-field-flex,.pepperi-report-textarea.readonly .mat-form-field-wrapper .mat-form-field-flex{padding:0}.pep-report-textarea ::ng-deep.mat-form-field-flex,.pepperi-report-textarea ::ng-deep.mat-form-field-flex{background:transparent!important}.mat-form-field.mat-form-field-disabled .mat-form-field-flex{color:#1a1a1a;color:hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%))}.right-alignment quill-editor.inline-quill::ng-deep .ql-container .ql-editor{padding-right:unset;padding-left:calc(.5rem + 1rem);padding-left:calc(var(--pep-spacing-sm, .5rem) + 1rem)}quill-editor.inline-quill::ng-deep .ql-container .ql-editor{width:calc(100% + 1rem);padding-right:calc(.5rem + 1rem);padding-right:calc(var(--pep-spacing-sm, .5rem) + 1rem)}quill-editor ::ng-deep .ql-toolbar{display:flex;padding:0!important;border:unset}quill-editor ::ng-deep .ql-toolbar .ql-transparent{opacity:.9}quill-editor ::ng-deep .ql-toolbar .ql-formats{margin-right:0!important;margin-bottom:.5rem}quill-editor ::ng-deep .ql-toolbar .ql-formats button{height:2.5rem}quill-editor ::ng-deep .ql-toolbar .ql-formats button svg{width:1.25rem!important;float:unset!important}quill-editor ::ng-deep .ql-toolbar .ql-formats button.ql-active{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative}quill-editor ::ng-deep .ql-toolbar .ql-formats button.ql-active:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}quill-editor ::ng-deep .ql-toolbar .ql-formats button.ql-active:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}quill-editor ::ng-deep .ql-toolbar .ql-formats button:focus{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative}quill-editor ::ng-deep .ql-toolbar .ql-formats button:focus:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}quill-editor ::ng-deep .ql-toolbar .ql-formats button:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}quill-editor ::ng-deep .ql-toolbar .ql-formats button:active{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative}quill-editor ::ng-deep .ql-toolbar .ql-formats button:active:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}quill-editor ::ng-deep .ql-toolbar .ql-formats button:active:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-stroke{stroke:rgba(26,26,26,.8);stroke:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.8)}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-fill{fill:rgba(26,26,26,.8);fill:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.8)}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item{outline:unset!important;width:100%;height:auto;padding:.25rem .5rem;padding:var(--pep-spacing-xs,.25rem) var(--pep-spacing-sm,.5rem);display:grid}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:hover{background:rgba(26,26,26,.16);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.16)}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:active{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);background:rgba(26,26,26,.24)!important;background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.24)!important}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:active:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:disabled{box-shadow:unset;border:unset;color:rgba(26,26,26,.35)!important;color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)!important;background:rgba(26,26,26,.04)!important;background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.04)!important}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:disabled:after{border:unset}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:disabled .svg-icon{fill:rgba(26,26,26,.35);fill:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:disabled .svg-icon.stroke{fill:unset;stroke:rgba(26,26,26,.35);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-color-picker,quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-icon-picker{width:unset}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker .ql-picker-label{outline:none;display:grid;grid-auto-flow:column;align-items:center;line-height:1rem;border:unset}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker .ql-picker-label svg{width:1.5rem}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker .ql-picker-label:after{content:url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDI0IDI0IgogICBoZWlnaHQ9IjE2IgogICB3aWR0aD0iMTYiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTEwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzOCIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoMiIKICAgICBkPSJNNS44MDAzMjE0OCw5LjI4Njc0MzU0IEwxMS4yNTQyODI0LDEzLjIwMjc1ODMgQzExLjY2NjEzMDksMTMuNTg1MDgzIDEyLjMzMzg2OTEsMTMuNTg1MDgzIDEyLjc0NTcxNzYsMTMuMjAyNzU4MyBMMTguMTk5Njc4NSw5LjI4Njc0MzU0IEMxOC42MTE1MjcsOC45MDQ0MTg4MiAxOS4yNzkyNjUyLDguOTA0NDE4ODIgMTkuNjkxMTEzNyw5LjI4Njc0MzU0IEMyMC4xMDI5NjIxLDkuNjY5MDY4MjYgMjAuMTAyOTYyMSwxMC4yODg5MzkxIDE5LjY5MTExMzcsMTAuNjcxMjYzOCBMMTMuNDkxNDM1MSwxNi40MjY1MTI5IEMxMi42Njc3MzgzLDE3LjE5MTE2MjQgMTEuMzMyMjYxNywxNy4xOTExNjI0IDEwLjUwODU2NDksMTYuNDI2NTEyOSBMNC4zMDg4ODYzMywxMC42NzEyNjM4IEMzLjg5NzAzNzg5LDEwLjI4ODkzOTEgMy44OTcwMzc4OSw5LjY2OTA2ODI2IDQuMzA4ODg2MzMsOS4yODY3NDM1NCBDNC43MjA3MzQ3OCw4LjkwNDQxODgyIDUuMzg4NDczMDMsOC45MDQ0MTg4MiA1LjgwMDMyMTQ4LDkuMjg2NzQzNTQgWiIKICAgICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgICAgZmlsbC1vcGFjaXR5PSIuNSIgLz4KPC9zdmc+Cg==\");cursor:pointer;display:grid;height:inherit;justify-content:center;align-content:center}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.select-arrow .ql-picker-label:before{line-height:unset}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.select-arrow .ql-picker-label svg{display:none}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker .ql-picker-options{border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);box-sizing:content-box;padding:unset;box-shadow:0 .25rem .5rem 0 rgba(26,26,26,.32);box-shadow:var(--pep-shadow-sm-offset,0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.32);border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-color-picker .ql-picker-options{padding:.25rem .5rem;padding:var(--pep-spacing-xs,.25rem) var(--pep-spacing-sm,.5rem);width:140px}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-color-picker .ql-picker-options:focus{outline:unset!important}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-color-picker .ql-picker-options .ql-picker-item:focus{outline:unset!important}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#1766a6;stroke:hsl(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#1766a6;fill:hsl(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded .ql-picker-label{border:unset}quill-editor ::ng-deep .ql-toolbar .vertical-separator{border-color:rgba(26,26,26,.24);border-color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.24)}@media (max-width:568px){quill-editor ::ng-deep .ql-toolbar .ql-list{display:none}}@media (max-width:599px){quill-editor ::ng-deep .ql-toolbar .ql-italic,quill-editor ::ng-deep .ql-toolbar .ql-underline{display:none}}@media (max-width:460px){quill-editor ::ng-deep .ql-toolbar .ql-header,quill-editor ::ng-deep .ql-toolbar .ql-image,quill-editor ::ng-deep .ql-toolbar .ql-italic,quill-editor ::ng-deep .ql-toolbar .ql-list,quill-editor ::ng-deep .ql-toolbar .ql-underline{display:none}}quill-editor ::ng-deep .ql-container{height:16rem;border:unset;border-top:1px solid rgba(26,26,26,.24)!important;border-top:1px solid hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.24)!important}quill-editor ::ng-deep .ql-container .ql-editor{padding:.5rem 0;padding:var(--pep-spacing-sm,.5rem) 0}quill-editor ::ng-deep .ql-container .ql-editor.ql-blank:before{right:0;left:0}quill-editor ::ng-deep .ql-container .ql-tooltip.ql-flip{left:0!important}"]
+                styles: [".pep-textarea-container,.pepperi-textarea-container{height:inherit;display:grid;align-items:center}.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{margin:0;padding:.5rem 1.5rem .5rem 0;vertical-align:unset;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-suffix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button{width:1rem!important;height:1rem!important}.pep-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep.mat-input-element,.pep-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep.mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep.mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep.mat-input-element{padding-top:.135rem!important}.pep-textarea-container .rich-text-cont,.pepperi-textarea-container .rich-text-cont{overflow-x:hidden;display:inline-block;vertical-align:unset;margin:0;padding:.5rem 1.5rem .5rem 0;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-container.right-alignment .rich-text-cont,.pepperi-textarea-container.right-alignment .rich-text-cont{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pep-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pepperi-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element{padding:.25rem 1.5rem .5rem 0}.pep-textarea-card-container.card-flex-container,.pepperi-textarea-card-container.card-flex-container{height:inherit;display:flex;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset;padding:.25rem;max-width:100%}.pep-textarea-card-container.card-flex-container.one-row .title,.pepperi-textarea-card-container.card-flex-container.one-row .title{padding-top:.25rem}.pep-textarea-card-container.card-flex-container span.value,.pepperi-textarea-card-container.card-flex-container span.value{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset}.pep-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pep-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pep-textarea-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pep-report-textarea ::ng-deep .mat-form-field-suffix,.pepperi-report-textarea ::ng-deep .mat-form-field-suffix{right:0!important}.pep-report-textarea.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pepperi-report-textarea.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{padding:0}:host{height:inherit;display:block}.pep-textarea-container ::ng-deep.mat-form-field-infix,.pepperi-textarea-container ::ng-deep.mat-form-field-infix{margin-left:calc(.75rem * -1);margin-left:calc(var(--pep-spacing-md, .75rem) * -1)}.pep-textarea-container.right-alignment ::ng-deep.mat-form-field-infix,.pepperi-textarea-container.right-alignment ::ng-deep.mat-form-field-infix{margin-left:unset;margin-right:calc(.75rem * -1);margin-right:calc(var(--pep-spacing-md, .75rem) * -1)}.vertical-separator{display:none}", ".pep-textarea-container,.pepperi-textarea-container{height:inherit;display:grid;align-items:center}.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{margin:0;padding:.5rem 1.5rem .5rem 0;vertical-align:unset;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-suffix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button{width:1rem!important;height:1rem!important}.pep-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep.mat-input-element,.pep-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep.mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep.mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep.mat-input-element{padding-top:.135rem!important}.pep-textarea-container .rich-text-cont,.pepperi-textarea-container .rich-text-cont{overflow-x:hidden;display:inline-block;vertical-align:unset;margin:0;padding:.5rem 1.5rem .5rem 0;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-container.right-alignment .rich-text-cont,.pepperi-textarea-container.right-alignment .rich-text-cont{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pep-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pepperi-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element{padding:.25rem 1.5rem .5rem 0}.pep-textarea-card-container.card-flex-container,.pepperi-textarea-card-container.card-flex-container{height:inherit;display:flex;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset;padding:.25rem;max-width:100%}.pep-textarea-card-container.card-flex-container.one-row .title,.pepperi-textarea-card-container.card-flex-container.one-row .title{padding-top:.25rem}.pep-textarea-card-container.card-flex-container span.value,.pepperi-textarea-card-container.card-flex-container span.value{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset}.pep-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pep-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pep-textarea-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pep-report-textarea ::ng-deep .mat-form-field-suffix,.pepperi-report-textarea ::ng-deep .mat-form-field-suffix{right:0!important}.pep-report-textarea.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pepperi-report-textarea.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{padding:0}.pep-report-textarea ::ng-deep.mat-form-field-flex,.pepperi-report-textarea ::ng-deep.mat-form-field-flex{background:transparent!important}.mat-form-field.mat-form-field-disabled ::ng-deep.mat-form-field-flex{color:#1a1a1a;color:hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%))}.right-alignment quill-editor.inline-quill::ng-deep .ql-container .ql-editor{padding-right:unset;padding-left:calc(.5rem + 1rem);padding-left:calc(var(--pep-spacing-sm, .5rem) + 1rem)}quill-editor.inline-quill::ng-deep .ql-container .ql-editor{width:calc(100% + 1rem);padding-right:calc(.5rem + 1rem);padding-right:calc(var(--pep-spacing-sm, .5rem) + 1rem)}quill-editor ::ng-deep .ql-toolbar{display:flex;padding:0!important;border:unset}quill-editor ::ng-deep .ql-toolbar .ql-transparent{opacity:.9}quill-editor ::ng-deep .ql-toolbar .ql-formats{margin-right:0!important;margin-bottom:.5rem}quill-editor ::ng-deep .ql-toolbar .ql-formats button{height:2.5rem}quill-editor ::ng-deep .ql-toolbar .ql-formats button svg{width:1.25rem!important;float:unset!important}quill-editor ::ng-deep .ql-toolbar .ql-formats button.ql-active{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative}quill-editor ::ng-deep .ql-toolbar .ql-formats button.ql-active:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}quill-editor ::ng-deep .ql-toolbar .ql-formats button.ql-active:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}quill-editor ::ng-deep .ql-toolbar .ql-formats button:focus{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative}quill-editor ::ng-deep .ql-toolbar .ql-formats button:focus:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}quill-editor ::ng-deep .ql-toolbar .ql-formats button:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}quill-editor ::ng-deep .ql-toolbar .ql-formats button:active{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative}quill-editor ::ng-deep .ql-toolbar .ql-formats button:active:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}quill-editor ::ng-deep .ql-toolbar .ql-formats button:active:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-stroke{stroke:rgba(26,26,26,.8);stroke:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.8)}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-fill{fill:rgba(26,26,26,.8);fill:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.8)}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item{outline:unset!important;width:100%;height:auto;padding:.25rem .5rem;padding:var(--pep-spacing-xs,.25rem) var(--pep-spacing-sm,.5rem);display:grid}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:hover{background:rgba(26,26,26,.16);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.16)}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:active{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);background:rgba(26,26,26,.24)!important;background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.24)!important}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:active:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:disabled{box-shadow:unset;border:unset;color:rgba(26,26,26,.35)!important;color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)!important;background:rgba(26,26,26,.04)!important;background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.04)!important}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:disabled:after{border:unset}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:disabled .svg-icon{fill:rgba(26,26,26,.35);fill:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:disabled .svg-icon.stroke{fill:unset;stroke:rgba(26,26,26,.35);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-color-picker,quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-icon-picker{width:unset}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker .ql-picker-label{outline:none;display:grid;grid-auto-flow:column;align-items:center;line-height:1rem;border:unset}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker .ql-picker-label svg{width:1.5rem}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker .ql-picker-label:after{content:url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDI0IDI0IgogICBoZWlnaHQ9IjE2IgogICB3aWR0aD0iMTYiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTEwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzOCIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoMiIKICAgICBkPSJNNS44MDAzMjE0OCw5LjI4Njc0MzU0IEwxMS4yNTQyODI0LDEzLjIwMjc1ODMgQzExLjY2NjEzMDksMTMuNTg1MDgzIDEyLjMzMzg2OTEsMTMuNTg1MDgzIDEyLjc0NTcxNzYsMTMuMjAyNzU4MyBMMTguMTk5Njc4NSw5LjI4Njc0MzU0IEMxOC42MTE1MjcsOC45MDQ0MTg4MiAxOS4yNzkyNjUyLDguOTA0NDE4ODIgMTkuNjkxMTEzNyw5LjI4Njc0MzU0IEMyMC4xMDI5NjIxLDkuNjY5MDY4MjYgMjAuMTAyOTYyMSwxMC4yODg5MzkxIDE5LjY5MTExMzcsMTAuNjcxMjYzOCBMMTMuNDkxNDM1MSwxNi40MjY1MTI5IEMxMi42Njc3MzgzLDE3LjE5MTE2MjQgMTEuMzMyMjYxNywxNy4xOTExNjI0IDEwLjUwODU2NDksMTYuNDI2NTEyOSBMNC4zMDg4ODYzMywxMC42NzEyNjM4IEMzLjg5NzAzNzg5LDEwLjI4ODkzOTEgMy44OTcwMzc4OSw5LjY2OTA2ODI2IDQuMzA4ODg2MzMsOS4yODY3NDM1NCBDNC43MjA3MzQ3OCw4LjkwNDQxODgyIDUuMzg4NDczMDMsOC45MDQ0MTg4MiA1LjgwMDMyMTQ4LDkuMjg2NzQzNTQgWiIKICAgICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgICAgZmlsbC1vcGFjaXR5PSIuNSIgLz4KPC9zdmc+Cg==\");cursor:pointer;display:grid;height:inherit;justify-content:center;align-content:center}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.select-arrow .ql-picker-label:before{line-height:unset}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.select-arrow .ql-picker-label svg{display:none}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker .ql-picker-options{border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);box-sizing:content-box;padding:unset;box-shadow:0 .25rem .5rem 0 rgba(26,26,26,.32);box-shadow:var(--pep-shadow-sm-offset,0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.32);border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-color-picker .ql-picker-options{padding:.25rem .5rem;padding:var(--pep-spacing-xs,.25rem) var(--pep-spacing-sm,.5rem);width:140px}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-color-picker .ql-picker-options:focus{outline:unset!important}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-color-picker .ql-picker-options .ql-picker-item:focus{outline:unset!important}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#1766a6;stroke:hsl(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#1766a6;fill:hsl(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded .ql-picker-label{border:unset}quill-editor ::ng-deep .ql-toolbar .vertical-separator{border-color:rgba(26,26,26,.24);border-color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.24)}@media (max-width:568px){quill-editor ::ng-deep .ql-toolbar .ql-list{display:none}}@media (max-width:599px){quill-editor ::ng-deep .ql-toolbar .ql-italic,quill-editor ::ng-deep .ql-toolbar .ql-underline{display:none}}@media (max-width:460px){quill-editor ::ng-deep .ql-toolbar .ql-header,quill-editor ::ng-deep .ql-toolbar .ql-image,quill-editor ::ng-deep .ql-toolbar .ql-italic,quill-editor ::ng-deep .ql-toolbar .ql-list,quill-editor ::ng-deep .ql-toolbar .ql-underline{display:none}}quill-editor ::ng-deep .ql-container{height:16rem;border:unset;border-top:1px solid rgba(26,26,26,.24)!important;border-top:1px solid hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.24)!important}quill-editor ::ng-deep .ql-container .ql-editor{padding:.5rem 0;padding:var(--pep-spacing-sm,.5rem) 0}quill-editor ::ng-deep .ql-container .ql-editor.ql-blank:before{right:0;left:0}quill-editor ::ng-deep .ql-container .ql-tooltip.ql-flip{left:0!important}"]
             },] }
 ];
 PepRichHtmlTextareaComponent.ctorParameters = () => [

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

@@ -141,7 +141,7 @@ PepTextareaComponent.decorators = [
                 selector: 'pep-textarea',
                 template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\">\n        <div class=\"pep-textarea-container\" [ngClass]=\"{ 'stand-alone': standAlone,\n            'right-alignment': xAlignment == 'right', 'one-row': rowSpan === 1,\n            'pep-textarea-card-container': layoutType === 'card'}\">\n            <pep-field-title *ngIf=\"renderTitle && isFormView\" [label]=\"label\" [mandatory]=\"mandatory\"\n                [disabled]=\"disabled\" [maxFieldCharacters]=\"disabled || readonly ? 0 : maxFieldCharacters\"\n                [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\" [inputLength]=\"input.value?.length\">\n            </pep-field-title>\n            <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n                [ngClass]=\"{ 'pep-table-textarea': layoutType === 'table' }\">\n                <textarea #input [hidden]=\"readonly\" [id]=\"key\" class=\"body-sm\" matInput (blur)=\"onBlur($event)\"\n                    title=\"{{ value }}\" [value]=\"value\"\n                    maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n                    [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                    [formControlName]=\"key\" [style.height]=\"fieldHeight\">\n                </textarea>\n                <div *ngIf=\"readonly\" class=\"body-sm disable-text-div\" title=\"{{ value }}\"\n                    [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                    [innerHtml]=\"value | pepSafeHtml\" [style.height]=\"fieldHeight\">\n                </div>\n                <!-- <pep-textbox-icon *ngIf=\"xAlignment == 'right'\" matPrefix [value]=\"value\" [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\"\n                    [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\" (iconClick)=\"openDialog()\">\n                </pep-textbox-icon> -->\n                <pep-textbox-icon matSuffix [value]=\"value\" [label]=\"label\" [type]=\"controlType\"\n                    [disabled]=\"disabled || readonly\"\n                    [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\"\n                    (iconClick)=\"openDialog()\">\n                </pep-textbox-icon>\n                <mat-error>\n                    <span class=\"body-xs\"\n                        [title]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"\n                        [innerText]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"></span>\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true }\"></ng-container>\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            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-textarea-card-container card-flex-container\"\n                [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\n                [ngStyle]=\"{ color: textColor, '-webkit-line-clamp': rowSpan }\" [class]=\"'text-align-' + xAlignment\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\" [style.height]=\"fieldHeight\">\n                <span *ngIf=\" showTitle && label !=''\" class=\" body-xs title no-shrink\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ value }}\" class=\"body-sm value wrap\">{{ value }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button self-start\"\n                    [ngClass]=\"{'self-end' : value && value !== ''}\" 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    </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 }\"></ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"value?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n                    class=\"pep-report-textarea\" [ngClass]=\"{ readonly: disabled }\">\n                    <input matInput [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{ readonly: disabled}\"\n                        [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\n                        title=\"{{ value }}\" [formControlName]=\"key\" type=\"text\" [value]=\"value\" [disabled]=\"true\" />\n                    <pep-textbox-icon *ngIf=\"disabled && xAlignment == 'right'\" matPrefix [value]=\"value\"\n                        [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\n                    </pep-textbox-icon>\n                    <pep-textbox-icon *ngIf=\"disabled && (xAlignment == 'left')\" matSuffix [value]=\"value\"\n                        [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\n                    </pep-textbox-icon>\n                </mat-form-field>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span>&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n</ng-container>\n\n<ng-template #textAreaDialogTemplate>\n    <pep-dialog class=\"dialog-textarea-container\" [title]=\"label\">\n        <ng-container pep-dialog-content>\n            <textarea #dialogTextarea [readonly]=\"disabled || readonly\">{{ value }}</textarea>\n        </ng-container>\n        <div pep-dialog-actions class=\"pep-spacing-element-negative\">\n            <ng-container *ngIf=\"disabled || readonly; then notEditableBlock; else editableBlock\">\n            </ng-container>\n            <ng-template #editableBlock>\n                <button mat-button (click)=\"closeDialog()\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CANCEL' | translate }}\n                </button>\n                <button mat-button class=\"pep-spacing-element pep-button md strong\"\n                    (click)=\"closeDialog(dialogTextarea.value)\">\n                    {{ 'ACTIONS.SAVE' | translate }}\n                </button>\n            </ng-template>\n            <ng-template #notEditableBlock>\n                <button mat-button (click)=\"closeDialog()\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CLOSE' | translate }}\n                </button>\n            </ng-template>\n        </div>\n    </pep-dialog>\n</ng-template>",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".pep-textarea-container,.pepperi-textarea-container{height:inherit;display:grid;align-items:center}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{margin:0;padding:.5rem 1.5rem .5rem 0;vertical-align:unset;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-prefix,.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-prefix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button{width:1rem!important;height:1rem!important}.pep-textarea-container.one-row ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pep-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .mat-input-element{padding-top:.135rem!important}.pep-textarea-container .rich-text-cont,.pepperi-textarea-container .rich-text-cont{overflow-x:hidden;display:inline-block;vertical-align:unset;margin:0;padding:.5rem 1.5rem .5rem 0;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-container.right-alignment .rich-text-cont,.pepperi-textarea-container.right-alignment .rich-text-cont{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pep-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pepperi-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-input-element{padding:.25rem 1.5rem .5rem 0}.pep-textarea-card-container.card-flex-container,.pepperi-textarea-card-container.card-flex-container{height:inherit;display:flex;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset;padding:.25rem;max-width:100%}.pep-textarea-card-container.card-flex-container.one-row .title,.pepperi-textarea-card-container.card-flex-container.one-row .title{padding-top:.25rem}.pep-textarea-card-container.card-flex-container span.value,.pepperi-textarea-card-container.card-flex-container span.value{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset}.pep-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pep-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pep-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pep-report-textarea .mat-form-field-suffix,.pepperi-report-textarea .mat-form-field-suffix{right:0!important}.pep-report-textarea.readonly .mat-form-field-wrapper .mat-form-field-flex,.pepperi-report-textarea.readonly .mat-form-field-wrapper .mat-form-field-flex{padding:0}:host{height:inherit;display:grid}:host>*{align-self:center}.disable-text-div{display:inline-block;vertical-align:middle;margin:0;padding:.5rem 1.5rem .5rem 0;overflow-y:hidden}.right-alignment .disable-text-div{padding:.5rem 0 .5rem 1.5rem}.dialog-textarea-container textarea{border:none;resize:none;width:25rem;height:13rem}.dialog-textarea-container textarea:focus{outline:none}", ".pep-textarea-container,.pepperi-textarea-container{height:inherit;display:grid;align-items:center}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{margin:0;padding:.5rem 1.5rem .5rem 0;vertical-align:unset;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-prefix,.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-prefix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button{width:1rem!important;height:1rem!important}.pep-textarea-container.one-row ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pep-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .mat-input-element{padding-top:.135rem!important}.pep-textarea-container .rich-text-cont,.pepperi-textarea-container .rich-text-cont{overflow-x:hidden;display:inline-block;vertical-align:unset;margin:0;padding:.5rem 1.5rem .5rem 0;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-container.right-alignment .rich-text-cont,.pepperi-textarea-container.right-alignment .rich-text-cont{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pep-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pepperi-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-input-element{padding:.25rem 1.5rem .5rem 0}.pep-textarea-card-container.card-flex-container,.pepperi-textarea-card-container.card-flex-container{height:inherit;display:flex;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset;padding:.25rem;max-width:100%}.pep-textarea-card-container.card-flex-container.one-row .title,.pepperi-textarea-card-container.card-flex-container.one-row .title{padding-top:.25rem}.pep-textarea-card-container.card-flex-container span.value,.pepperi-textarea-card-container.card-flex-container span.value{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset}.pep-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pep-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pep-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pep-report-textarea .mat-form-field-suffix,.pepperi-report-textarea .mat-form-field-suffix{right:0!important}.pep-report-textarea.readonly .mat-form-field-wrapper .mat-form-field-flex,.pepperi-report-textarea.readonly .mat-form-field-wrapper .mat-form-field-flex{padding:0}.pep-report-textarea ::ng-deep.mat-form-field-flex,.pepperi-report-textarea ::ng-deep.mat-form-field-flex{background:transparent!important}"]
+                styles: [".pep-textarea-container,.pepperi-textarea-container{height:inherit;display:grid;align-items:center}.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{margin:0;padding:.5rem 1.5rem .5rem 0;vertical-align:unset;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-suffix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button{width:1rem!important;height:1rem!important}.pep-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep.mat-input-element,.pep-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep.mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep.mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep.mat-input-element{padding-top:.135rem!important}.pep-textarea-container .rich-text-cont,.pepperi-textarea-container .rich-text-cont{overflow-x:hidden;display:inline-block;vertical-align:unset;margin:0;padding:.5rem 1.5rem .5rem 0;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-container.right-alignment .rich-text-cont,.pepperi-textarea-container.right-alignment .rich-text-cont{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pep-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pepperi-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element{padding:.25rem 1.5rem .5rem 0}.pep-textarea-card-container.card-flex-container,.pepperi-textarea-card-container.card-flex-container{height:inherit;display:flex;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset;padding:.25rem;max-width:100%}.pep-textarea-card-container.card-flex-container.one-row .title,.pepperi-textarea-card-container.card-flex-container.one-row .title{padding-top:.25rem}.pep-textarea-card-container.card-flex-container span.value,.pepperi-textarea-card-container.card-flex-container span.value{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset}.pep-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pep-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pep-textarea-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pep-report-textarea ::ng-deep .mat-form-field-suffix,.pepperi-report-textarea ::ng-deep .mat-form-field-suffix{right:0!important}.pep-report-textarea.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pepperi-report-textarea.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{padding:0}:host{height:inherit;display:grid}:host>*{align-self:center}.disable-text-div{display:inline-block;vertical-align:middle;margin:0;padding:.5rem 1.5rem .5rem 0;overflow-y:hidden}.right-alignment .disable-text-div{padding:.5rem 0 .5rem 1.5rem}.dialog-textarea-container textarea{border:none;resize:none;width:25rem;height:13rem}.dialog-textarea-container textarea:focus{outline:none}", ".pep-textarea-container,.pepperi-textarea-container{height:inherit;display:grid;align-items:center}.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{margin:0;padding:.5rem 1.5rem .5rem 0;vertical-align:unset;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-suffix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button{width:1rem!important;height:1rem!important}.pep-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep.mat-input-element,.pep-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep.mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep.mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep.mat-input-element{padding-top:.135rem!important}.pep-textarea-container .rich-text-cont,.pepperi-textarea-container .rich-text-cont{overflow-x:hidden;display:inline-block;vertical-align:unset;margin:0;padding:.5rem 1.5rem .5rem 0;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-container.right-alignment .rich-text-cont,.pepperi-textarea-container.right-alignment .rich-text-cont{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pep-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pepperi-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element{padding:.25rem 1.5rem .5rem 0}.pep-textarea-card-container.card-flex-container,.pepperi-textarea-card-container.card-flex-container{height:inherit;display:flex;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset;padding:.25rem;max-width:100%}.pep-textarea-card-container.card-flex-container.one-row .title,.pepperi-textarea-card-container.card-flex-container.one-row .title{padding-top:.25rem}.pep-textarea-card-container.card-flex-container span.value,.pepperi-textarea-card-container.card-flex-container span.value{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset}.pep-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pep-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pep-textarea-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pep-report-textarea ::ng-deep .mat-form-field-suffix,.pepperi-report-textarea ::ng-deep .mat-form-field-suffix{right:0!important}.pep-report-textarea.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pepperi-report-textarea.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{padding:0}.pep-report-textarea ::ng-deep.mat-form-field-flex,.pepperi-report-textarea ::ng-deep.mat-form-field-flex{background:transparent!important}"]
             },] }
 ];
 PepTextareaComponent.ctorParameters = () => [

package/images-filmstrip/pepperi-addons-ngx-lib-images-filmstrip.metadata.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"__symbolic":"module","version":4,"metadata":{"PepImagesFilmstripModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":27,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":30,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":32,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":33,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":34,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":35,"character":8},{"__symbolic":"reference","module":"ng-gallery","name":"GalleryModule","line":37,"character":8},{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"ImageViewerModule","line":38,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":57,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/button","name":"PepButtonModule","line":58,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":59,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":60,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogModule","line":61,"character":8}],"exports":[{"__symbolic":"reference","name":"PepImagesFilmstripComponent"}],"declarations":[{"__symbolic":"reference","name":"PepImagesFilmstripComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":67,"character":41}]}]}},"createViewerConfig":{"__symbolic":"function","parameters":["translate"],"value":{"bgStyle":"#FFF","loadingMessage":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"translate"},"member":"instant"},"arguments":["MESSAGES.INFO_LOADING_FILE"]},"nextPageButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":107,"character":24},"arguments":["navigate_next","Next page",0,false]},"beforePageButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":113,"character":26},"arguments":["navigate_before","Previous page",1,false]},"zoomOutButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":119,"character":23},"arguments":["zoom_out","Zoom out",0,false]},"zoomInButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":120,"character":22},"arguments":["zoom_in","Zoom in",1,false]},"rotateLeftButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":121,"character":26},"arguments":["rotate_left","Rotate left",2,false]},"rotateRightButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":127,"character":27},"arguments":["rotate_right","Rotate right",3,false]},"resetButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":133,"character":21},"arguments":["autorenew","Reset",4,false]}}},"PepImagesFilmstripComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":137,"character":1},"arguments":[{"selector":"pep-images-filmstrip","providers":[{"provide":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"IMAGEVIEWER_CONFIG","line":144,"character":21},"useFactory":{"__symbolic":"reference","name":"createViewerConfig"},"deps":[{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":147,"character":19}]}],"template":"<ng-container ngIf=\"inDialog; then galleryDialogTemplate; else regularTemplate\"></ng-container>\n<ng-template #regularTemplate>\n <ng-container [formGroup]=\"form\">\n <div class=\"images-filmstrip-container\">\n <pep-field-title ngIf=\"renderTitle\" [label]=\"label\" [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\n </pep-field-title>\n <div #galleryCont class=\"img-wrapper\" [ngClass]=\"isVertical ? 'vertical-gallery' : 'horizontal-gallery'\"\n [style.height]=\"fieldHeight\">\n <pep-button iconName=\"arrow_left_alt\" styleType=\"weak-invert\" sizeType=\"sm\" (click)=\"formGallery.prev()\"\n class=\"gallery-arrow start-arrow\">\n </pep-button>\n <gallery #formGallery id=\"{{key}}-{{uid}}-gallery\" (itemClick)=\"enlargeImage($event);\"\n [imageSize]=\"'contain'\" (indexChange)=\"indexChange($event)\" (error)=\"onError($event)\">\n </gallery>\n <pep-button iconName=\"arrow_right_alt\" styleType=\"weak-invert\" sizeType=\"sm\"\n (click)=\"formGallery.next()\" class=\"gallery-arrow end-arrow\">\n </pep-button>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #galleryDialogTemplate>\n <div class=\"gallery-dialog\">\n <pep-dialog [title]=\"label\" [showFooter]=\"false\">\n <div pep-dialog-content #galleryDialogCont class=\"gallery-dialog-content\"\n [ngClass]=\"isVertical ? 'vertical-gallery' : 'horizontal-gallery'\">\n <pep-button iconName=\"arrow_left_alt\" styleType=\"weak-invert\" (click)=\"dialogGallery.prev()\"\n class=\"gallery-arrow start-arrow\">\n </pep-button>\n <gallery #dialogGallery id=\"{{key}}-{{uid}}-dlgGallery\" [imageSize]=\"'contain'\"\n (indexChange)=\"indexChange($event)\" (error)=\"onError($event)\">\n </gallery>\n <pep-button iconName=\"arrow_right_alt\" styleType=\"weak-invert\" (click)=\"dialogGallery.next()\"\n class=\"gallery-arrow end-arrow\">\n </pep-button>\n </div>\n </pep-dialog>\n </div>\n</ng-template>\n\n<!-- Add custom template to image items -->\n<ng-template #itemTemplate let-index=\"index\" let-type=\"type\" let-data=\"data\" let-currIndex=\"currIndex\">\n <ng-container ngIf=\"index === currIndex\">\n <ngx-imageviewer [src]=\"data.src\">\n </ngx-imageviewer>\n </ng-container>\n</ng-template>","styles":[":host{width:100%;height:inherit;display:block}:host>{align-self:center}.gallery-dialog{height:inherit}.images-filmstrip-container{height:100%}.images-filmstrip-container .img-wrapper{height:100%;position:relative}.images-filmstrip-container .gallery-arrow{padding:.5rem;position:absolute;top:50%;transform:translateY(-50%);z-index:2}.images-filmstrip-container .gallery-arrow.start-arrow{left:0}.images-filmstrip-container .gallery-arrow.end-arrow{right:0}gallery{direction:ltr;height:100%;min-height:100%}.gallery-dialog-content{position:relative}.gallery-dialog-content .gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.gallery-dialog-content .gallery-arrow.start-arrow{left:0}.gallery-dialog-content .gallery-arrow.end-arrow{right:0}.gallery-dialog-content gallery{min-width:65vw}.gallery-dialog-content ::ng-deep gallery-item gallery-image .g-image-item{background-size:content!important}.gallery-dialog-content ::ng-deep gallery-item .g-item-template ngx-imageviewer canvas{max-width:100%!important;max-height:100%!important}::ng-deep gallery-thumbs{margin:0 1rem 0 .5rem;margin:0 var(--pep-spacing-lg,1rem) 0 var(--pep-spacing-sm,.5rem)}::ng-deep gallery-thumbs gallery-thumb{padding:0!important;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);margin:.5rem 0;margin:var(--pep-spacing-sm,.5rem) 0}::ng-deep gallery-thumbs gallery-thumb .g-image-item{background-size:cover!important}::ng-deep gallery-item gallery-image .g-image-item{border-radius:.5rem;border-radius:var(--pep-border-radius-lg,.5rem)}::ng-deep gallery-item:hover{cursor:pointer}::ng-deep gallery-dots{position:absolute!important;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem)}::ng-deep gallery-dots.pep-button,::ng-deep gallery-dots.pepperi-button{display:flex!important}::ng-deep .img-container{display:flex;align-items:center}::ng-deep gallery-nav{display:none}.vertical-gallery ::ng-deep gallery-thumbs{margin:1rem 0 .5rem;margin:var(--pep-spacing-lg,1rem) 0 var(--pep-spacing-sm,.5rem) 0}.vertical-gallery ::ng-deep gallery-thumbs gallery-thumb{margin:0 .5rem;margin:0 var(--pep-spacing-sm,.5rem)}","gallery{background-color:transparent}::ng-deep gallery-thumb{box-shadow:0 .25rem .5rem 0 rgba(26,26,26,.32);box-shadow:var(--pep-shadow-sm-offset,0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.32)}::ng-deep .g-nav-next,::ng-deep .g-nav-prev{background:hsla(0,0%,100%,.5);background:hsla(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%),.5)}::ng-deep .g-nav-next:hover,::ng-deep .g-nav-prev:hover{background:hsla(0,0%,100%,.5);background:hsla(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%),.5);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);cursor:pointer}::ng-deep .g-nav-next:focus,::ng-deep .g-nav-prev:focus{background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%));box-shadow:0 0 0 .25rem rgba(23,102,166,.5);box-shadow:0 0 0 var(--pep-spacing-xs,.25rem) hsla(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%),.5)}::ng-deep .g-nav-next:active,::ng-deep .g-nav-prev:active{background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%));box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.16);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.16)}::ng-deep .g-nav-next:disabled,::ng-deep .g-nav-prev:disabled{box-shadow:unset;border:unset;color:rgba(26,26,26,.35)!important;color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)!important;background:hsla(0,0%,100%,.08)!important;background:hsla(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%),.08)!important}::ng-deep .g-nav-next:disabled:after,::ng-deep .g-nav-prev:disabled:after{border:unset}::ng-deep .g-nav-next:disabled .svg-icon,::ng-deep .g-nav-prev:disabled .svg-icon{fill:rgba(26,26,26,.35);fill:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}::ng-deep .g-nav-next:disabled .svg-icon.stroke,::ng-deep .g-nav-prev:disabled .svg-icon.stroke{fill:unset;stroke:rgba(26,26,26,.35);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}::ng-deep gallery-dots{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)}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":154,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":155,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":156,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":157,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":160,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":171,"character":5}}]}],"uid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":172,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":173,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":174,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":177,"character":5}}]}],"currIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":186,"character":5}}]}],"showThumbnails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":187,"character":5}}]}],"galleryCont":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":189,"character":5},"arguments":["galleryCont"]}]}],"galleryDialogTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":190,"character":5},"arguments":["galleryDialogTemplate",{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":190,"character":48}}]}]}],"galleryDialogCont":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":192,"character":5},"arguments":["galleryDialogCont"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,null,null,null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":221,"character":9}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":221,"character":21},"arguments":[{"__symbolic":"reference","module":"@angular/common","name":"DOCUMENT","line":221,"character":28}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":222,"character":9}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":224,"character":9}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":225,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MAT_DIALOG_DATA","line":225,"character":16}]}]],"parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":211,"character":38},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":212,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":213,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepFileService","line":214,"character":29},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":215,"character":30},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepUtilitiesService","line":216,"character":34},{"__symbolic":"reference","module":"ng-gallery","name":"Gallery","line":217,"character":25},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":218,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":219,"character":25},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":220,"character":20},{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material/dialog","arguments":[{"__symbolic":"reference","name":"PepImagesFilmstripComponent"}]},{"__symbolic":"reference","name":"any"}]}],"setFieldHeight":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"initGalleryStyle":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}],"enlargeImage":[{"__symbolic":"method"}],"afterDialogOpened":[{"__symbolic":"method"}],"setThumbnailDimension":[{"__symbolic":"method"}],"indexChange":[{"__symbolic":"method"}]}}},"origins":{"PepImagesFilmstripModule":"./images-filmstrip.module","createViewerConfig":"./images-filmstrip.component","PepImagesFilmstripComponent":"./images-filmstrip.component"},"importAs":"@pepperi-addons/ngx-lib/images-filmstrip"}
1	+ {"__symbolic":"module","version":4,"metadata":{"PepImagesFilmstripModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":27,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":30,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":32,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":33,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":34,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":35,"character":8},{"__symbolic":"reference","module":"ng-gallery","name":"GalleryModule","line":37,"character":8},{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"ImageViewerModule","line":38,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":57,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/button","name":"PepButtonModule","line":58,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":59,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":60,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogModule","line":61,"character":8}],"exports":[{"__symbolic":"reference","name":"PepImagesFilmstripComponent"}],"declarations":[{"__symbolic":"reference","name":"PepImagesFilmstripComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":67,"character":41}]}]}},"createViewerConfig":{"__symbolic":"function","parameters":["translate"],"value":{"bgStyle":"#FFF","loadingMessage":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"translate"},"member":"instant"},"arguments":["MESSAGES.INFO_LOADING_FILE"]},"nextPageButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":107,"character":24},"arguments":["navigate_next","Next page",0,false]},"beforePageButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":113,"character":26},"arguments":["navigate_before","Previous page",1,false]},"zoomOutButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":119,"character":23},"arguments":["zoom_out","Zoom out",0,false]},"zoomInButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":120,"character":22},"arguments":["zoom_in","Zoom in",1,false]},"rotateLeftButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":121,"character":26},"arguments":["rotate_left","Rotate left",2,false]},"rotateRightButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":127,"character":27},"arguments":["rotate_right","Rotate right",3,false]},"resetButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":133,"character":21},"arguments":["autorenew","Reset",4,false]}}},"PepImagesFilmstripComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":137,"character":1},"arguments":[{"selector":"pep-images-filmstrip","providers":[{"provide":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"IMAGEVIEWER_CONFIG","line":144,"character":21},"useFactory":{"__symbolic":"reference","name":"createViewerConfig"},"deps":[{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":147,"character":19}]}],"template":"<ng-container ngIf=\"inDialog; then galleryDialogTemplate; else regularTemplate\"></ng-container>\n<ng-template #regularTemplate>\n <ng-container [formGroup]=\"form\">\n <div class=\"images-filmstrip-container\">\n <pep-field-title ngIf=\"renderTitle\" [label]=\"label\" [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\n </pep-field-title>\n <div #galleryCont class=\"img-wrapper\" [ngClass]=\"isVertical ? 'vertical-gallery' : 'horizontal-gallery'\"\n [style.height]=\"fieldHeight\">\n <pep-button ngIf=\"items?.length > 1\" iconName=\"arrow_left_alt\" styleType=\"weak-invert\" sizeType=\"sm\"\n (click)=\"formGallery.prev()\" class=\"gallery-arrow start-arrow\">\n </pep-button>\n <gallery #formGallery id=\"{{key}}-{{uid}}-gallery\" (itemClick)=\"enlargeImage($event);\"\n [imageSize]=\"'contain'\" (indexChange)=\"indexChange($event)\" (error)=\"onError($event)\">\n </gallery>\n <pep-button ngIf=\"items?.length > 1\" iconName=\"arrow_right_alt\" styleType=\"weak-invert\" sizeType=\"sm\"\n (click)=\"formGallery.next()\" class=\"gallery-arrow end-arrow\">\n </pep-button>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #galleryDialogTemplate>\n <div class=\"gallery-dialog\">\n <pep-dialog [title]=\"label\" [showFooter]=\"false\">\n <div pep-dialog-content #galleryDialogCont class=\"gallery-dialog-content\"\n [ngClass]=\"isVertical ? 'vertical-gallery' : 'horizontal-gallery'\">\n <pep-button ngIf=\"items?.length > 1\" iconName=\"arrow_left_alt\" styleType=\"weak-invert\"\n (click)=\"dialogGallery.prev()\" class=\"gallery-arrow start-arrow\">\n </pep-button>\n <gallery #dialogGallery id=\"{{key}}-{{uid}}-dlgGallery\" [imageSize]=\"'contain'\"\n (indexChange)=\"indexChange($event)\" (error)=\"onError($event)\">\n </gallery>\n <pep-button ngIf=\"items?.length > 1\" iconName=\"arrow_right_alt\" styleType=\"weak-invert\"\n (click)=\"dialogGallery.next()\" class=\"gallery-arrow end-arrow\">\n </pep-button>\n </div>\n </pep-dialog>\n </div>\n</ng-template>\n\n<!-- Add custom template to image items -->\n<ng-template #itemTemplate let-index=\"index\" let-type=\"type\" let-data=\"data\" let-currIndex=\"currIndex\">\n <ng-container ngIf=\"index === currIndex\">\n <ngx-imageviewer [src]=\"data.src\">\n </ngx-imageviewer>\n </ng-container>\n</ng-template>","styles":[":host{width:100%;height:inherit;display:block}:host>{align-self:center}.gallery-dialog{height:inherit}.images-filmstrip-container{height:100%}.images-filmstrip-container .img-wrapper{height:100%;position:relative}.images-filmstrip-container .gallery-arrow{padding:.5rem;position:absolute;top:50%;transform:translateY(-50%);z-index:2}.images-filmstrip-container .gallery-arrow.start-arrow{left:0}.images-filmstrip-container .gallery-arrow.end-arrow{right:0}gallery{direction:ltr;height:100%;min-height:100%}.gallery-dialog-content{position:relative}.gallery-dialog-content .gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.gallery-dialog-content .gallery-arrow.start-arrow{left:0}.gallery-dialog-content .gallery-arrow.end-arrow{right:0}.gallery-dialog-content gallery{min-width:65vw}.gallery-dialog-content ::ng-deep gallery-item gallery-image .g-image-item{background-size:content!important}.gallery-dialog-content ::ng-deep gallery-item .g-item-template ngx-imageviewer canvas{max-width:100%!important;max-height:100%!important}::ng-deep gallery-thumbs{margin:0 1rem 0 .5rem;margin:0 var(--pep-spacing-lg,1rem) 0 var(--pep-spacing-sm,.5rem)}::ng-deep gallery-thumbs gallery-thumb{padding:0!important;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);margin:.5rem 0;margin:var(--pep-spacing-sm,.5rem) 0}::ng-deep gallery-thumbs gallery-thumb .g-image-item{background-size:cover!important}::ng-deep gallery-item gallery-image .g-image-item{border-radius:.5rem;border-radius:var(--pep-border-radius-lg,.5rem)}::ng-deep gallery-item:hover{cursor:pointer}::ng-deep gallery-dots{position:absolute!important;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem)}::ng-deep gallery-dots.pep-button,::ng-deep gallery-dots.pepperi-button{display:flex!important}::ng-deep .img-container{display:flex;align-items:center}::ng-deep gallery-nav{display:none}.vertical-gallery ::ng-deep gallery-thumbs{margin:1rem 0 .5rem;margin:var(--pep-spacing-lg,1rem) 0 var(--pep-spacing-sm,.5rem) 0}.vertical-gallery ::ng-deep gallery-thumbs gallery-thumb{margin:0 .5rem;margin:0 var(--pep-spacing-sm,.5rem)}","gallery{background-color:transparent}::ng-deep gallery-thumb{box-shadow:0 .25rem .5rem 0 rgba(26,26,26,.32);box-shadow:var(--pep-shadow-sm-offset,0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.32)}::ng-deep .g-nav-next,::ng-deep .g-nav-prev{background:hsla(0,0%,100%,.5);background:hsla(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%),.5)}::ng-deep .g-nav-next:hover,::ng-deep .g-nav-prev:hover{background:hsla(0,0%,100%,.5);background:hsla(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%),.5);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);cursor:pointer}::ng-deep .g-nav-next:focus,::ng-deep .g-nav-prev:focus{background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%));box-shadow:0 0 0 .25rem rgba(23,102,166,.5);box-shadow:0 0 0 var(--pep-spacing-xs,.25rem) hsla(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%),.5)}::ng-deep .g-nav-next:active,::ng-deep .g-nav-prev:active{background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%));box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.16);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.16)}::ng-deep .g-nav-next:disabled,::ng-deep .g-nav-prev:disabled{box-shadow:unset;border:unset;color:rgba(26,26,26,.35)!important;color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)!important;background:hsla(0,0%,100%,.08)!important;background:hsla(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%),.08)!important}::ng-deep .g-nav-next:disabled:after,::ng-deep .g-nav-prev:disabled:after{border:unset}::ng-deep .g-nav-next:disabled .svg-icon,::ng-deep .g-nav-prev:disabled .svg-icon{fill:rgba(26,26,26,.35);fill:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}::ng-deep .g-nav-next:disabled .svg-icon.stroke,::ng-deep .g-nav-prev:disabled .svg-icon.stroke{fill:unset;stroke:rgba(26,26,26,.35);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}::ng-deep gallery-dots{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)}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":154,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":155,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":156,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":157,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":160,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":171,"character":5}}]}],"uid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":172,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":173,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":174,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":177,"character":5}}]}],"currIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":186,"character":5}}]}],"showThumbnails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":187,"character":5}}]}],"galleryCont":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":189,"character":5},"arguments":["galleryCont"]}]}],"galleryDialogTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":190,"character":5},"arguments":["galleryDialogTemplate",{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":190,"character":48}}]}]}],"galleryDialogCont":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":192,"character":5},"arguments":["galleryDialogCont"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,null,null,null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":221,"character":9}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":221,"character":21},"arguments":[{"__symbolic":"reference","module":"@angular/common","name":"DOCUMENT","line":221,"character":28}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":222,"character":9}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":224,"character":9}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":225,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MAT_DIALOG_DATA","line":225,"character":16}]}]],"parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":211,"character":38},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":212,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":213,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepFileService","line":214,"character":29},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":215,"character":30},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepUtilitiesService","line":216,"character":34},{"__symbolic":"reference","module":"ng-gallery","name":"Gallery","line":217,"character":25},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":218,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":219,"character":25},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":220,"character":20},{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material/dialog","arguments":[{"__symbolic":"reference","name":"PepImagesFilmstripComponent"}]},{"__symbolic":"reference","name":"any"}]}],"setFieldHeight":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"initGalleryStyle":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}],"enlargeImage":[{"__symbolic":"method"}],"afterDialogOpened":[{"__symbolic":"method"}],"setThumbnailDimension":[{"__symbolic":"method"}],"indexChange":[{"__symbolic":"method"}]}}},"origins":{"PepImagesFilmstripModule":"./images-filmstrip.module","createViewerConfig":"./images-filmstrip.component","PepImagesFilmstripComponent":"./images-filmstrip.component"},"importAs":"@pepperi-addons/ngx-lib/images-filmstrip"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pepperi-addons/ngx-lib",
-  "version": "0.3.4",
+  "version": "0.3.5-beta.1",
   "peerDependencies": {
     "@angular/animations": ">= 12.0.0",
     "@angular/cdk": ">= 12.0.0",