@pepperi-addons/ngx-lib 0.3.15-beta.60 → 0.3.15-beta.61

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

@@ -13,359 +13,359 @@ import { PepDialogService, PepDialogModule } from '@pepperi-addons/ngx-lib/dialo
 import { LoadingStrategy, ImageItem, ThumbnailsPosition, SlidingDirection, Gallery, 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) {
-        var _a, _b;
-        if (this.inDialog) {
-            (_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.close(event);
-        }
-        else {
-            (_b = this.enlargeImageDialogRef) === null || _b === void 0 ? void 0 : _b.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.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;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 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)}"]
-            },] }
-];
-PepImagesFilmstripComponent.ctorParameters = () => [
-    { type: PepCustomizationService },
-    { type: PepDialogService },
-    { type: PepLayoutService },
-    { type: PepFileService },
-    { type: PepIconRegistry },
-    { type: PepUtilitiesService },
-    { type: Gallery },
-    { type: Renderer2 },
-    { type: ElementRef },
-    { type: ChangeDetectorRef },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] },
-    { type: MatDialogRef, decorators: [{ type: Optional }] },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DIALOG_DATA,] }] }
-];
-PepImagesFilmstripComponent.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) {
+        var _a, _b;
+        if (this.inDialog) {
+            (_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.close(event);
+        }
+        else {
+            (_b = this.enlargeImageDialogRef) === null || _b === void 0 ? void 0 : _b.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.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;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 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)}"]
+            },] }
+];
+PepImagesFilmstripComponent.ctorParameters = () => [
+    { type: PepCustomizationService },
+    { type: PepDialogService },
+    { type: PepLayoutService },
+    { type: PepFileService },
+    { type: PepIconRegistry },
+    { type: PepUtilitiesService },
+    { type: Gallery },
+    { type: Renderer2 },
+    { type: ElementRef },
+    { type: ChangeDetectorRef },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] },
+    { type: MatDialogRef, decorators: [{ type: Optional }] },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DIALOG_DATA,] }] }
+];
+PepImagesFilmstripComponent.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.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],
-            },] }
-];
-PepImagesFilmstripModule.ctorParameters = () => [
-    { type: PepIconRegistry }
+class PepImagesFilmstripModule {
+    constructor(pepIconRegistry) {
+        this.pepIconRegistry = pepIconRegistry;
+        this.pepIconRegistry.registerIcons([
+            pepIconSystemEdit,
+            pepIconSystemClose,
+            pepIconArrowRightAlt,
+            pepIconArrowLeftAlt,
+        ]);
+    }
+}
+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],
+            },] }
+];
+PepImagesFilmstripModule.ctorParameters = () => [
+    { type: 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 };