@pepperi-addons/ngx-lib 0.4.0-angular14.36 → 0.4.0-angular14.39

package/fesm2020/pepperi-addons-ngx-lib-images-filmstrip.mjs

@@ -23,399 +23,399 @@ import * as i4 from 'ng-gallery';
 import { LoadingStrategy, ImageItem, ThumbnailsPosition, SlidingDirection, GalleryModule } from 'ng-gallery';
 import 'hammerjs';
 
-class PepImagesFilmstripComponent {
-    constructor(customizationService, dialogService, layoutService, fileService, iconRegistry, utilitiesService, gallery, renderer, element, cd, document, dialogRef, data) {
-        this.customizationService = customizationService;
-        this.dialogService = dialogService;
-        this.layoutService = layoutService;
-        this.fileService = fileService;
-        this.iconRegistry = iconRegistry;
-        this.utilitiesService = utilitiesService;
-        this.gallery = gallery;
-        this.renderer = renderer;
-        this.element = element;
-        this.cd = cd;
-        this.document = document;
-        this.dialogRef = dialogRef;
-        this.data = data;
-        this.key = '';
-        this.value = '';
-        this.label = '';
-        this.xAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;
-        this._rowSpan = 1;
-        this.controlType = 'images';
-        this.form = null;
-        this.uid = '0';
-        this.showTitle = false;
-        this.renderTitle = true;
-        this._layoutType = 'form';
-        this.currIndex = 0;
-        this.showThumbnails = false;
-        this.items = null;
-        this.inDialog = false;
-        this.showFooter = false;
-        this.showClose = true;
-        this.mandatory = false;
-        this.readonly = false;
-        this.disabled = false;
-        this.fieldHeight = '';
-        this.standAlone = false;
-        this.galleryWidth = 0;
-        this.isVertical = false;
-        // If data exist copy all data properties into this.
-        if (dialogRef && data) {
-            this.inDialog = true;
-            Object.keys(data).forEach((key) => {
-                if (key in this) {
-                    this[key] = data[key];
-                }
-            });
-        }
-        this.config = {
-            nav: false,
-            // navIcon: pepIconArrowRightAlt.data,
-            // loop: true,
-            // zoomOut: 0,
-            // dots: false,
-            // dotsPosition: 'bottom',
-            // counterPosition: 'top',
-            // thumb: true,
-            counter: false,
-            gestures: true,
-            // autoPlay: false,
-            // thumbWidth: 120,
-            // thumbHeight: 90,
-            imageSize: 'contain',
-            // panSensitivity: 25,
-            // disableThumb: false,
-            // playerInterval: 3000,
-            // thumbMode: ThumbnailsMode.Free,
-            // thumbPosition: ThumbnailsPosition.Bottom,
-            loadingStrategy: LoadingStrategy.Preload,
-            // slidingDirection: SlidingDirection.Horizontal,
-        };
-        this.guid = PepGuid.newGuid();
-    }
-    set rowSpan(value) {
-        this._rowSpan = value;
-        this.setFieldHeight();
-    }
-    get rowSpan() {
-        return this._rowSpan;
-    }
-    set layoutType(value) {
-        this._layoutType = value;
-        this.setFieldHeight();
-    }
-    get layoutType() {
-        return this._layoutType;
-    }
-    setFieldHeight() {
-        this.fieldHeight = this.customizationService.calculateFieldHeight(this.layoutType, this.rowSpan, this.standAlone);
-    }
-    setDefaultForm() {
-        const pepField = new PepImagesField({
-            key: this.key,
-            value: this.value,
-            mandatory: this.mandatory,
-            readonly: this.readonly,
-            disabled: this.disabled,
-        });
-        this.form = this.customizationService.getDefaultFromGroup(pepField);
-    }
-    // private renderNavIcon(galleryContainer, isLeft: boolean) {
-    //     let iconName = isLeft ? pepIconArrowLeftAlt.name : pepIconArrowRightAlt.name;
-    //     const svgData = this.iconRegistry.getIcon(iconName);
-    //     const svgIcon = this.utilitiesService.getSvgElementFromString(
-    //         this.document,
-    //         svgData
-    //     );
-    //     const elementNameToFind = isLeft ? 'g-nav-prev' : 'g-nav-next'
-    //     const elementArr = galleryContainer.nativeElement.querySelectorAll(`.${elementNameToFind}`);
-    //     if (elementArr && elementArr.length > 0) {
-    //         elementArr[0].appendChild(svgIcon);
-    //         this.renderer.addClass(svgIcon, 'svg-icon');
-    //     }
-    // }
-    ngOnInit() {
-        if (!this.inDialog) {
-            if (this.form === null) {
-                this.standAlone = true;
-                this.setFieldHeight();
-                this.setDefaultForm();
-                this.renderer.addClass(this.element.nativeElement, PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
-                if (!this.renderTitle) {
-                    this.renderer.addClass(this.element.nativeElement, PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME);
-                }
-            }
-        }
-        if (this.items === null) {
-            const imgArr = this.value ? this.value.split(';') : [];
-            // add No image image when there is no images
-            if (imgArr.length === 0) {
-                const noImageSrc = this.fileService.getSvgAsImageSrc(pepIconNoImage2.data);
-                imgArr.push(noImageSrc);
-            }
-            this.items = imgArr.map((img) => new ImageItem({ src: img, thumb: img }));
-        }
-        this.config.dots = this.config.nav = this.items.length > 1;
-        this.config.thumb =
-            (this.key === 'ItemFilmstripImages' || this.showThumbnails) &&
-                this.items.length > 1
-                ? true
-                : false;
-        this.currIndex =
-            this.key === 'ItemFilmstripImages' &&
-                this.currIndex === 0 &&
-                this.items.length > 1
-                ? Math.floor(this.items.length / 2) - 1
-                : this.currIndex;
-    }
-    ngAfterViewInit() {
-        if (this.inDialog) {
-            this.afterDialogOpened();
-        }
-        else {
-            this.galleryRef = this.gallery.ref(`${this.guid}-gallery`);
-            this.initGalleryStyle(this.galleryCont, this.galleryRef);
-        }
-    }
-    ngOnChanges() {
-        if (this.standAlone) {
-            this.setDefaultForm();
-        }
-    }
-    ngOnDestroy() {
-        if (this.galleryRef) {
-            this.galleryRef.destroy();
-        }
-        if (this.dialogGalleryRef) {
-            this.dialogGalleryRef.destroy();
-        }
-        // if (this.myPinch) { this.myPinch.destroy(); }
-    }
-    initGalleryStyle(galleryContainer, galleryRef) {
-        setTimeout(() => {
-            // Set thumbnails position and sliding direction
-            this.setThumbnailDimension(galleryContainer);
-            galleryRef.setConfig(this.config);
-            // this.renderNavIcon(galleryContainer, true);
-            // this.renderNavIcon(galleryContainer, false);
-        }, 0);
-        const currentIndex = this.currIndex;
-        if (currentIndex > 0) {
-            setTimeout(() => {
-                galleryRef.load(this.items);
-                galleryRef.set(currentIndex);
-            }, 0);
-            // galleryRef.set(currentIndex);
-        }
-        else {
-            galleryRef.load(this.items);
-        }
-    }
-    onError(e) {
-        const noImageSrc = this.fileService.getSvgAsImageSrc(pepIconNoImage2.data);
-        const noimg = new ImageItem({ src: noImageSrc, thumb: noImageSrc });
-        this.items.splice(e.itemIndex, 1, noimg);
-    }
-    enlargeImage(event) {
-        const config = this.dialogService.getDialogConfig({}, 'inline');
-        config.maxWidth = '75vw';
-        config.height = '95vh';
-        this.enlargeImageDialogRef = this.dialogService.openDialog(this.galleryDialogTemplate, {
-            currIndex: this.currIndex,
-        }, config);
-        this.enlargeImageDialogRef.afterOpened().subscribe(() => {
-            this.afterDialogOpened();
-        });
-        // Update currentIndex in galleryRef
-        // dialogRef.afterClosed().subscribe(value => {
-        //     this.galleryRef.set(this.currIndex);
-        // });
-    }
-    afterDialogOpened() {
-        this.dialogGalleryRef = this.gallery.ref(`${this.guid}-dlgGallery`);
-        this.initGalleryStyle(this.galleryDialogCont, this.dialogGalleryRef);
-    }
-    closeDialog(event) {
-        if (this.inDialog) {
-            this.dialogRef?.close(event);
-        }
-        else {
-            this.enlargeImageDialogRef?.close(event);
-        }
-    }
-    setThumbnailDimension(galleryContainer) {
-        this.galleryWidth = galleryContainer.nativeElement.clientWidth;
-        // this.galleryHeight = galleryContainer.nativeElement.clientHeight - 32; // TODO - TALK WITH TOMER
-        this.galleryHeight = this.inDialog
-            ? galleryContainer.nativeElement.clientHeight - 32
-            : galleryContainer.nativeElement.clientHeight;
-        // this.galleryHeight = galleryContainer.nativeElement.clientHeight - 32;
-        this.cd.detectChanges();
-        this.isVertical = this.galleryWidth < this.galleryHeight;
-        this.cd.detectChanges();
-        if (this.isVertical) {
-            let width = (this.galleryWidth - (this.items.length - 1) * 16) /
-                this.items.length;
-            width = Math.min(Math.max(width, 24), 96);
-            this.config.thumbHeight = width;
-            this.config.thumbWidth = width + 16;
-        }
-        else {
-            let height = (this.galleryHeight - (this.items.length - 1) * 16) /
-                this.items.length;
-            height = Math.min(Math.max(height, 24), 96);
-            this.config.thumbHeight = height + 16;
-            this.config.thumbWidth = height;
-        }
-        this.config.thumbPosition = this.isVertical
-            ? ThumbnailsPosition.Bottom
-            : this.layoutService.isRtl()
-                ? ThumbnailsPosition.Right
-                : ThumbnailsPosition.Left;
-        this.config.slidingDirection =
-            this.key !== 'ItemFilmstripImages'
-                ? SlidingDirection.Horizontal
-                : this.isVertical
-                    ? SlidingDirection.Horizontal
-                    : SlidingDirection.Vertical;
-        this.config.imageSize = 'contain';
-    }
-    indexChange(item) {
-        this.currIndex = item.currIndex;
-        // if (this.ngxViewerImage && this.ngxViewerImage.scale) {
-        //     this.ngxViewerImage.scale = 1;
-        //     this.updateStyle();
-        // }
-    }
-}
-PepImagesFilmstripComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepImagesFilmstripComponent, deps: [{ token: i1.PepCustomizationService }, { token: i2.PepDialogService }, { token: i1.PepLayoutService }, { token: i1.PepFileService }, { token: i3.PepIconRegistry }, { token: i1.PepUtilitiesService }, { token: i4.Gallery }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT, optional: true }, { token: i5.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-PepImagesFilmstripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepImagesFilmstripComponent, selector: "pep-images-filmstrip", inputs: { key: "key", value: "value", label: "label", xAlignment: "xAlignment", rowSpan: "rowSpan", form: "form", uid: "uid", showTitle: "showTitle", renderTitle: "renderTitle", layoutType: "layoutType", currIndex: "currIndex", showThumbnails: "showThumbnails" }, viewQueries: [{ propertyName: "galleryCont", first: true, predicate: ["galleryCont"], descendants: true }, { propertyName: "galleryDialogTemplate", first: true, predicate: ["galleryDialogTemplate"], descendants: true, read: TemplateRef }, { propertyName: "galleryDialogCont", first: true, predicate: ["galleryDialogCont"], descendants: true }], usesOnChanges: true, ngImport: i0, 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=\"{{guid}}-gallery\" (itemClick)=\"enlargeImage($event);\" [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\" 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]=\"showFooter\" [showClose]=\"showClose\"  (close)=\"closeDialog($event)\">\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=\"{{guid}}-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>", 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}.images-filmstrip-container .gallery-arrow{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}::ng-deep gallery-thumbs{margin:0 var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}::ng-deep gallery-thumbs gallery-thumb{padding:0!important;border-radius:var(--pep-border-radius-md, .25rem);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:var(--pep-border-radius-lg, .5rem)}::ng-deep gallery-item:hover{cursor:pointer}::ng-deep gallery-dots{position:absolute!important;border-radius:var(--pep-border-radius-md, .25rem)}::ng-deep gallery-dots.pepperi-button,::ng-deep gallery-dots.pep-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:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem) 0}.vertical-gallery ::ng-deep gallery-thumbs gallery-thumb{margin:0 var(--pep-spacing-sm, .5rem)}\n", "gallery{background-color:transparent}::ng-deep gallery-thumb{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-prev,::ng-deep .g-nav-next{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-prev:hover,::ng-deep .g-nav-next:hover{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: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-prev:focus,::ng-deep .g-nav-next:focus{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 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-prev:active,::ng-deep .g-nav-next:active{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: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-prev:disabled,::ng-deep .g-nav-next:disabled{box-shadow:unset;border:unset;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(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-prev:disabled:after,::ng-deep .g-nav-next:disabled:after{border:unset}::ng-deep .g-nav-prev:disabled .svg-icon,::ng-deep .g-nav-next:disabled .svg-icon{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-prev:disabled .svg-icon.stroke,::ng-deep .g-nav-next:disabled .svg-icon.stroke{fill:unset;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:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.GalleryComponent, selector: "gallery", inputs: ["nav", "dots", "loop", "thumb", "zoomOut", "counter", "dotsSize", "autoPlay", "gestures", "thumbWidth", "thumbHeight", "disableThumb", "panSensitivity", "playerInterval", "itemTemplate", "thumbTemplate", "thumbMode", "imageSize", "dotsPosition", "counterPosition", "slidingDirection", "loadingStrategy", "thumbPosition", "thumbView", "destroyRef", "skipInitConfig", "id", "items"], outputs: ["itemClick", "thumbClick", "playingChange", "indexChange", "itemsChange", "error"] }, { kind: "component", type: i8.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i9.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength"] }, { kind: "component", type: i2.PepDialogComponent, selector: "pep-dialog", inputs: ["title", "showClose", "showHeader", "showFooter"], outputs: ["close"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepImagesFilmstripComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pep-images-filmstrip', 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=\"{{guid}}-gallery\" (itemClick)=\"enlargeImage($event);\" [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\" 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]=\"showFooter\" [showClose]=\"showClose\"  (close)=\"closeDialog($event)\">\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=\"{{guid}}-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>", 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}.images-filmstrip-container .gallery-arrow{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}::ng-deep gallery-thumbs{margin:0 var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}::ng-deep gallery-thumbs gallery-thumb{padding:0!important;border-radius:var(--pep-border-radius-md, .25rem);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:var(--pep-border-radius-lg, .5rem)}::ng-deep gallery-item:hover{cursor:pointer}::ng-deep gallery-dots{position:absolute!important;border-radius:var(--pep-border-radius-md, .25rem)}::ng-deep gallery-dots.pepperi-button,::ng-deep gallery-dots.pep-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:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem) 0}.vertical-gallery ::ng-deep gallery-thumbs gallery-thumb{margin:0 var(--pep-spacing-sm, .5rem)}\n", "gallery{background-color:transparent}::ng-deep gallery-thumb{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-prev,::ng-deep .g-nav-next{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-prev:hover,::ng-deep .g-nav-next:hover{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: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-prev:focus,::ng-deep .g-nav-next:focus{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 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-prev:active,::ng-deep .g-nav-next:active{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: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-prev:disabled,::ng-deep .g-nav-next:disabled{box-shadow:unset;border:unset;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(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-prev:disabled:after,::ng-deep .g-nav-next:disabled:after{border:unset}::ng-deep .g-nav-prev:disabled .svg-icon,::ng-deep .g-nav-next:disabled .svg-icon{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-prev:disabled .svg-icon.stroke,::ng-deep .g-nav-next:disabled .svg-icon.stroke{fill:unset;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:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.PepCustomizationService }, { type: i2.PepDialogService }, { type: i1.PepLayoutService }, { type: i1.PepFileService }, { type: i3.PepIconRegistry }, { type: i1.PepUtilitiesService }, { type: i4.Gallery }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i5.MatDialogRef, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }]; }, propDecorators: { key: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], xAlignment: [{
-                type: Input
-            }], rowSpan: [{
-                type: Input
-            }], form: [{
-                type: Input
-            }], uid: [{
-                type: Input
-            }], showTitle: [{
-                type: Input
-            }], renderTitle: [{
-                type: Input
-            }], layoutType: [{
-                type: Input
-            }], currIndex: [{
-                type: Input
-            }], showThumbnails: [{
-                type: Input
-            }], galleryCont: [{
-                type: ViewChild,
-                args: ['galleryCont']
-            }], galleryDialogTemplate: [{
-                type: ViewChild,
-                args: ['galleryDialogTemplate', { read: TemplateRef }]
-            }], galleryDialogCont: [{
-                type: ViewChild,
-                args: ['galleryDialogCont']
+class PepImagesFilmstripComponent {
+    constructor(customizationService, dialogService, layoutService, fileService, iconRegistry, utilitiesService, gallery, renderer, element, cd, document, dialogRef, data) {
+        this.customizationService = customizationService;
+        this.dialogService = dialogService;
+        this.layoutService = layoutService;
+        this.fileService = fileService;
+        this.iconRegistry = iconRegistry;
+        this.utilitiesService = utilitiesService;
+        this.gallery = gallery;
+        this.renderer = renderer;
+        this.element = element;
+        this.cd = cd;
+        this.document = document;
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.key = '';
+        this.value = '';
+        this.label = '';
+        this.xAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;
+        this._rowSpan = 1;
+        this.controlType = 'images';
+        this.form = null;
+        this.uid = '0';
+        this.showTitle = false;
+        this.renderTitle = true;
+        this._layoutType = 'form';
+        this.currIndex = 0;
+        this.showThumbnails = false;
+        this.items = null;
+        this.inDialog = false;
+        this.showFooter = false;
+        this.showClose = true;
+        this.mandatory = false;
+        this.readonly = false;
+        this.disabled = false;
+        this.fieldHeight = '';
+        this.standAlone = false;
+        this.galleryWidth = 0;
+        this.isVertical = false;
+        // If data exist copy all data properties into this.
+        if (dialogRef && data) {
+            this.inDialog = true;
+            Object.keys(data).forEach((key) => {
+                if (key in this) {
+                    this[key] = data[key];
+                }
+            });
+        }
+        this.config = {
+            nav: false,
+            // navIcon: pepIconArrowRightAlt.data,
+            // loop: true,
+            // zoomOut: 0,
+            // dots: false,
+            // dotsPosition: 'bottom',
+            // counterPosition: 'top',
+            // thumb: true,
+            counter: false,
+            gestures: true,
+            // autoPlay: false,
+            // thumbWidth: 120,
+            // thumbHeight: 90,
+            imageSize: 'contain',
+            // panSensitivity: 25,
+            // disableThumb: false,
+            // playerInterval: 3000,
+            // thumbMode: ThumbnailsMode.Free,
+            // thumbPosition: ThumbnailsPosition.Bottom,
+            loadingStrategy: LoadingStrategy.Preload,
+            // slidingDirection: SlidingDirection.Horizontal,
+        };
+        this.guid = PepGuid.newGuid();
+    }
+    set rowSpan(value) {
+        this._rowSpan = value;
+        this.setFieldHeight();
+    }
+    get rowSpan() {
+        return this._rowSpan;
+    }
+    set layoutType(value) {
+        this._layoutType = value;
+        this.setFieldHeight();
+    }
+    get layoutType() {
+        return this._layoutType;
+    }
+    setFieldHeight() {
+        this.fieldHeight = this.customizationService.calculateFieldHeight(this.layoutType, this.rowSpan, this.standAlone);
+    }
+    setDefaultForm() {
+        const pepField = new PepImagesField({
+            key: this.key,
+            value: this.value,
+            mandatory: this.mandatory,
+            readonly: this.readonly,
+            disabled: this.disabled,
+        });
+        this.form = this.customizationService.getDefaultFromGroup(pepField);
+    }
+    // private renderNavIcon(galleryContainer, isLeft: boolean) {
+    //     let iconName = isLeft ? pepIconArrowLeftAlt.name : pepIconArrowRightAlt.name;
+    //     const svgData = this.iconRegistry.getIcon(iconName);
+    //     const svgIcon = this.utilitiesService.getSvgElementFromString(
+    //         this.document,
+    //         svgData
+    //     );
+    //     const elementNameToFind = isLeft ? 'g-nav-prev' : 'g-nav-next'
+    //     const elementArr = galleryContainer.nativeElement.querySelectorAll(`.${elementNameToFind}`);
+    //     if (elementArr && elementArr.length > 0) {
+    //         elementArr[0].appendChild(svgIcon);
+    //         this.renderer.addClass(svgIcon, 'svg-icon');
+    //     }
+    // }
+    ngOnInit() {
+        if (!this.inDialog) {
+            if (this.form === null) {
+                this.standAlone = true;
+                this.setFieldHeight();
+                this.setDefaultForm();
+                this.renderer.addClass(this.element.nativeElement, PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
+                if (!this.renderTitle) {
+                    this.renderer.addClass(this.element.nativeElement, PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME);
+                }
+            }
+        }
+        if (this.items === null) {
+            const imgArr = this.value ? this.value.split(';') : [];
+            // add No image image when there is no images
+            if (imgArr.length === 0) {
+                const noImageSrc = this.fileService.getSvgAsImageSrc(pepIconNoImage2.data);
+                imgArr.push(noImageSrc);
+            }
+            this.items = imgArr.map((img) => new ImageItem({ src: img, thumb: img }));
+        }
+        this.config.dots = this.config.nav = this.items.length > 1;
+        this.config.thumb =
+            (this.key === 'ItemFilmstripImages' || this.showThumbnails) &&
+                this.items.length > 1
+                ? true
+                : false;
+        this.currIndex =
+            this.key === 'ItemFilmstripImages' &&
+                this.currIndex === 0 &&
+                this.items.length > 1
+                ? Math.floor(this.items.length / 2) - 1
+                : this.currIndex;
+    }
+    ngAfterViewInit() {
+        if (this.inDialog) {
+            this.afterDialogOpened();
+        }
+        else {
+            this.galleryRef = this.gallery.ref(`${this.guid}-gallery`);
+            this.initGalleryStyle(this.galleryCont, this.galleryRef);
+        }
+    }
+    ngOnChanges() {
+        if (this.standAlone) {
+            this.setDefaultForm();
+        }
+    }
+    ngOnDestroy() {
+        if (this.galleryRef) {
+            this.galleryRef.destroy();
+        }
+        if (this.dialogGalleryRef) {
+            this.dialogGalleryRef.destroy();
+        }
+        // if (this.myPinch) { this.myPinch.destroy(); }
+    }
+    initGalleryStyle(galleryContainer, galleryRef) {
+        setTimeout(() => {
+            // Set thumbnails position and sliding direction
+            this.setThumbnailDimension(galleryContainer);
+            galleryRef.setConfig(this.config);
+            // this.renderNavIcon(galleryContainer, true);
+            // this.renderNavIcon(galleryContainer, false);
+        }, 0);
+        const currentIndex = this.currIndex;
+        if (currentIndex > 0) {
+            setTimeout(() => {
+                galleryRef.load(this.items);
+                galleryRef.set(currentIndex);
+            }, 0);
+            // galleryRef.set(currentIndex);
+        }
+        else {
+            galleryRef.load(this.items);
+        }
+    }
+    onError(e) {
+        const noImageSrc = this.fileService.getSvgAsImageSrc(pepIconNoImage2.data);
+        const noimg = new ImageItem({ src: noImageSrc, thumb: noImageSrc });
+        this.items.splice(e.itemIndex, 1, noimg);
+    }
+    enlargeImage(event) {
+        const config = this.dialogService.getDialogConfig({}, 'inline');
+        config.maxWidth = '75vw';
+        config.height = '95vh';
+        this.enlargeImageDialogRef = this.dialogService.openDialog(this.galleryDialogTemplate, {
+            currIndex: this.currIndex,
+        }, config);
+        this.enlargeImageDialogRef.afterOpened().subscribe(() => {
+            this.afterDialogOpened();
+        });
+        // Update currentIndex in galleryRef
+        // dialogRef.afterClosed().subscribe(value => {
+        //     this.galleryRef.set(this.currIndex);
+        // });
+    }
+    afterDialogOpened() {
+        this.dialogGalleryRef = this.gallery.ref(`${this.guid}-dlgGallery`);
+        this.initGalleryStyle(this.galleryDialogCont, this.dialogGalleryRef);
+    }
+    closeDialog(event) {
+        if (this.inDialog) {
+            this.dialogRef?.close(event);
+        }
+        else {
+            this.enlargeImageDialogRef?.close(event);
+        }
+    }
+    setThumbnailDimension(galleryContainer) {
+        this.galleryWidth = galleryContainer.nativeElement.clientWidth;
+        // this.galleryHeight = galleryContainer.nativeElement.clientHeight - 32; // TODO - TALK WITH TOMER
+        this.galleryHeight = this.inDialog
+            ? galleryContainer.nativeElement.clientHeight - 32
+            : galleryContainer.nativeElement.clientHeight;
+        // this.galleryHeight = galleryContainer.nativeElement.clientHeight - 32;
+        this.cd.detectChanges();
+        this.isVertical = this.galleryWidth < this.galleryHeight;
+        this.cd.detectChanges();
+        if (this.isVertical) {
+            let width = (this.galleryWidth - (this.items.length - 1) * 16) /
+                this.items.length;
+            width = Math.min(Math.max(width, 24), 96);
+            this.config.thumbHeight = width;
+            this.config.thumbWidth = width + 16;
+        }
+        else {
+            let height = (this.galleryHeight - (this.items.length - 1) * 16) /
+                this.items.length;
+            height = Math.min(Math.max(height, 24), 96);
+            this.config.thumbHeight = height + 16;
+            this.config.thumbWidth = height;
+        }
+        this.config.thumbPosition = this.isVertical
+            ? ThumbnailsPosition.Bottom
+            : this.layoutService.isRtl()
+                ? ThumbnailsPosition.Right
+                : ThumbnailsPosition.Left;
+        this.config.slidingDirection =
+            this.key !== 'ItemFilmstripImages'
+                ? SlidingDirection.Horizontal
+                : this.isVertical
+                    ? SlidingDirection.Horizontal
+                    : SlidingDirection.Vertical;
+        this.config.imageSize = 'contain';
+    }
+    indexChange(item) {
+        this.currIndex = item.currIndex;
+        // if (this.ngxViewerImage && this.ngxViewerImage.scale) {
+        //     this.ngxViewerImage.scale = 1;
+        //     this.updateStyle();
+        // }
+    }
+}
+PepImagesFilmstripComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepImagesFilmstripComponent, deps: [{ token: i1.PepCustomizationService }, { token: i2.PepDialogService }, { token: i1.PepLayoutService }, { token: i1.PepFileService }, { token: i3.PepIconRegistry }, { token: i1.PepUtilitiesService }, { token: i4.Gallery }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT, optional: true }, { token: i5.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+PepImagesFilmstripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepImagesFilmstripComponent, selector: "pep-images-filmstrip", inputs: { key: "key", value: "value", label: "label", xAlignment: "xAlignment", rowSpan: "rowSpan", form: "form", uid: "uid", showTitle: "showTitle", renderTitle: "renderTitle", layoutType: "layoutType", currIndex: "currIndex", showThumbnails: "showThumbnails" }, viewQueries: [{ propertyName: "galleryCont", first: true, predicate: ["galleryCont"], descendants: true }, { propertyName: "galleryDialogTemplate", first: true, predicate: ["galleryDialogTemplate"], descendants: true, read: TemplateRef }, { propertyName: "galleryDialogCont", first: true, predicate: ["galleryDialogCont"], descendants: true }], usesOnChanges: true, ngImport: i0, 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=\"{{guid}}-gallery\" (itemClick)=\"enlargeImage($event);\" [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\" 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]=\"showFooter\" [showClose]=\"showClose\"  (close)=\"closeDialog($event)\">\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=\"{{guid}}-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>", 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}.images-filmstrip-container .gallery-arrow{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}::ng-deep gallery-thumbs{margin:0 var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}::ng-deep gallery-thumbs gallery-thumb{padding:0!important;border-radius:var(--pep-border-radius-md, .25rem);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:var(--pep-border-radius-lg, .5rem)}::ng-deep gallery-item:hover{cursor:pointer}::ng-deep gallery-dots{position:absolute!important;border-radius:var(--pep-border-radius-md, .25rem)}::ng-deep gallery-dots.pepperi-button,::ng-deep gallery-dots.pep-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:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem) 0}.vertical-gallery ::ng-deep gallery-thumbs gallery-thumb{margin:0 var(--pep-spacing-sm, .5rem)}\n", "gallery{background-color:transparent}::ng-deep gallery-thumb{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-prev,::ng-deep .g-nav-next{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-prev:hover,::ng-deep .g-nav-next:hover{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: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-prev:focus,::ng-deep .g-nav-next:focus{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 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-prev:active,::ng-deep .g-nav-next:active{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: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-prev:disabled,::ng-deep .g-nav-next:disabled{box-shadow:unset;border:unset;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(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-prev:disabled:after,::ng-deep .g-nav-next:disabled:after{border:unset}::ng-deep .g-nav-prev:disabled .svg-icon,::ng-deep .g-nav-next:disabled .svg-icon{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-prev:disabled .svg-icon.stroke,::ng-deep .g-nav-next:disabled .svg-icon.stroke{fill:unset;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:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.GalleryComponent, selector: "gallery", inputs: ["nav", "dots", "loop", "thumb", "zoomOut", "counter", "dotsSize", "autoPlay", "gestures", "thumbWidth", "thumbHeight", "disableThumb", "panSensitivity", "playerInterval", "itemTemplate", "thumbTemplate", "thumbMode", "imageSize", "dotsPosition", "counterPosition", "slidingDirection", "loadingStrategy", "thumbPosition", "thumbView", "destroyRef", "skipInitConfig", "id", "items"], outputs: ["itemClick", "thumbClick", "playingChange", "indexChange", "itemsChange", "error"] }, { kind: "component", type: i8.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i9.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength"] }, { kind: "component", type: i2.PepDialogComponent, selector: "pep-dialog", inputs: ["title", "showClose", "showHeader", "showFooter"], outputs: ["close"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepImagesFilmstripComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-images-filmstrip', 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=\"{{guid}}-gallery\" (itemClick)=\"enlargeImage($event);\" [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\" 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]=\"showFooter\" [showClose]=\"showClose\"  (close)=\"closeDialog($event)\">\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=\"{{guid}}-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>", 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}.images-filmstrip-container .gallery-arrow{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}::ng-deep gallery-thumbs{margin:0 var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}::ng-deep gallery-thumbs gallery-thumb{padding:0!important;border-radius:var(--pep-border-radius-md, .25rem);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:var(--pep-border-radius-lg, .5rem)}::ng-deep gallery-item:hover{cursor:pointer}::ng-deep gallery-dots{position:absolute!important;border-radius:var(--pep-border-radius-md, .25rem)}::ng-deep gallery-dots.pepperi-button,::ng-deep gallery-dots.pep-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:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem) 0}.vertical-gallery ::ng-deep gallery-thumbs gallery-thumb{margin:0 var(--pep-spacing-sm, .5rem)}\n", "gallery{background-color:transparent}::ng-deep gallery-thumb{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-prev,::ng-deep .g-nav-next{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-prev:hover,::ng-deep .g-nav-next:hover{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: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-prev:focus,::ng-deep .g-nav-next:focus{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 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-prev:active,::ng-deep .g-nav-next:active{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: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-prev:disabled,::ng-deep .g-nav-next:disabled{box-shadow:unset;border:unset;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(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-prev:disabled:after,::ng-deep .g-nav-next:disabled:after{border:unset}::ng-deep .g-nav-prev:disabled .svg-icon,::ng-deep .g-nav-next:disabled .svg-icon{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-prev:disabled .svg-icon.stroke,::ng-deep .g-nav-next:disabled .svg-icon.stroke{fill:unset;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:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.PepCustomizationService }, { type: i2.PepDialogService }, { type: i1.PepLayoutService }, { type: i1.PepFileService }, { type: i3.PepIconRegistry }, { type: i1.PepUtilitiesService }, { type: i4.Gallery }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i5.MatDialogRef, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }]; }, propDecorators: { key: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], xAlignment: [{
+                type: Input
+            }], rowSpan: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], uid: [{
+                type: Input
+            }], showTitle: [{
+                type: Input
+            }], renderTitle: [{
+                type: Input
+            }], layoutType: [{
+                type: Input
+            }], currIndex: [{
+                type: Input
+            }], showThumbnails: [{
+                type: Input
+            }], galleryCont: [{
+                type: ViewChild,
+                args: ['galleryCont']
+            }], galleryDialogTemplate: [{
+                type: ViewChild,
+                args: ['galleryDialogTemplate', { read: TemplateRef }]
+            }], galleryDialogCont: [{
+                type: ViewChild,
+                args: ['galleryDialogCont']
             }] } });
 
-class PepImagesFilmstripModule {
-    constructor(pepIconRegistry) {
-        this.pepIconRegistry = pepIconRegistry;
-        this.pepIconRegistry.registerIcons([
-            pepIconSystemEdit,
-            pepIconSystemClose,
-            pepIconArrowRightAlt,
-            pepIconArrowLeftAlt,
-        ]);
-    }
-}
-PepImagesFilmstripModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepImagesFilmstripModule, deps: [{ token: i3.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
-PepImagesFilmstripModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepImagesFilmstripModule, declarations: [PepImagesFilmstripComponent], imports: [CommonModule,
-        ReactiveFormsModule,
-        // Material modules,
-        MatCommonModule,
-        MatFormFieldModule,
-        MatDialogModule,
-        MatIconModule,
-        // External modules
-        GalleryModule,
-        // ngx-lib modules
-        PepNgxLibModule,
-        PepButtonModule,
-        PepIconModule,
-        PepFieldTitleModule,
-        PepDialogModule], exports: [PepImagesFilmstripComponent] });
-PepImagesFilmstripModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepImagesFilmstripModule, imports: [CommonModule,
-        ReactiveFormsModule,
-        // Material modules,
-        MatCommonModule,
-        MatFormFieldModule,
-        MatDialogModule,
-        MatIconModule,
-        // External modules
-        GalleryModule,
-        // ngx-lib modules
-        PepNgxLibModule,
-        PepButtonModule,
-        PepIconModule,
-        PepFieldTitleModule,
-        PepDialogModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepImagesFilmstripModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        // Material modules,
-                        MatCommonModule,
-                        MatFormFieldModule,
-                        MatDialogModule,
-                        MatIconModule,
-                        // External modules
-                        GalleryModule,
-                        // ngx-lib modules
-                        PepNgxLibModule,
-                        PepButtonModule,
-                        PepIconModule,
-                        PepFieldTitleModule,
-                        PepDialogModule,
-                    ],
-                    exports: [PepImagesFilmstripComponent],
-                    declarations: [PepImagesFilmstripComponent],
-                }]
+class PepImagesFilmstripModule {
+    constructor(pepIconRegistry) {
+        this.pepIconRegistry = pepIconRegistry;
+        this.pepIconRegistry.registerIcons([
+            pepIconSystemEdit,
+            pepIconSystemClose,
+            pepIconArrowRightAlt,
+            pepIconArrowLeftAlt,
+        ]);
+    }
+}
+PepImagesFilmstripModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepImagesFilmstripModule, deps: [{ token: i3.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
+PepImagesFilmstripModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepImagesFilmstripModule, declarations: [PepImagesFilmstripComponent], imports: [CommonModule,
+        ReactiveFormsModule,
+        // Material modules,
+        MatCommonModule,
+        MatFormFieldModule,
+        MatDialogModule,
+        MatIconModule,
+        // External modules
+        GalleryModule,
+        // ngx-lib modules
+        PepNgxLibModule,
+        PepButtonModule,
+        PepIconModule,
+        PepFieldTitleModule,
+        PepDialogModule], exports: [PepImagesFilmstripComponent] });
+PepImagesFilmstripModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepImagesFilmstripModule, imports: [CommonModule,
+        ReactiveFormsModule,
+        // Material modules,
+        MatCommonModule,
+        MatFormFieldModule,
+        MatDialogModule,
+        MatIconModule,
+        // External modules
+        GalleryModule,
+        // ngx-lib modules
+        PepNgxLibModule,
+        PepButtonModule,
+        PepIconModule,
+        PepFieldTitleModule,
+        PepDialogModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepImagesFilmstripModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        // Material modules,
+                        MatCommonModule,
+                        MatFormFieldModule,
+                        MatDialogModule,
+                        MatIconModule,
+                        // External modules
+                        GalleryModule,
+                        // ngx-lib modules
+                        PepNgxLibModule,
+                        PepButtonModule,
+                        PepIconModule,
+                        PepFieldTitleModule,
+                        PepDialogModule,
+                    ],
+                    exports: [PepImagesFilmstripComponent],
+                    declarations: [PepImagesFilmstripComponent],
+                }]
         }], ctorParameters: function () { return [{ type: i3.PepIconRegistry }]; } });
 
-/*
- * Public API Surface of ngx-lib/images-filmstrip
+/*
+ * Public API Surface of ngx-lib/images-filmstrip
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { PepImagesFilmstripComponent, PepImagesFilmstripModule };