@pepperi-addons/ngx-lib 0.3.15-beta.19 → 0.3.15-beta.21

package/bundles/pepperi-addons-ngx-lib-images-filmstrip.umd.js

@@ -4,434 +4,434 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['pepperi-addons'] = global['pepperi-addons'] || {}, global['pepperi-addons']['ngx-lib'] = global['pepperi-addons']['ngx-lib'] || {}, global['pepperi-addons']['ngx-lib']['images-filmstrip'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.material.core, global.ng.material.formField, global.ng.material.dialog, global.ng.material.icon, global['pepperi-addons']['ngx-lib'], global['pepperi-addons']['ngx-lib']['field-title'], global['pepperi-addons']['ngx-lib'].button, global['pepperi-addons']['ngx-lib'].icon, global['pepperi-addons']['ngx-lib'].dialog, global.gallery, global['image-viewer'], global.translate));
 }(this, (function (exports, core, common, forms, core$2, formField, dialog$1, icon$1, ngxLib, fieldTitle, button, icon, dialog, ngGallery, ngxImageviewer, core$1) { 'use strict';
 
-    function createViewerConfig(translate) {
-        return {
-            // width: 850,
-            // height: 150,
-            bgStyle: '#FFF',
-            // scaleStep: 0.1, // zoom scale step (using the zoom in/out buttons)
-            // rotateStepper: false, // touch rotate should rotate only 90 to 90 degrees
-            loadingMessage: translate.instant('MESSAGES.INFO_LOADING_FILE'),
-            // buttonStyle: {
-            //     iconFontFamily: 'Material Icons', // font used to render the button icons
-            //     alpha: 0.5, // buttons' transparence value
-            //     hoverAlpha: 0.7, // buttons' transparence value when mouse is over
-            //     bgStyle: '#000000', //  buttons' background style
-            //     iconStyle: '#ffffff', // buttons' icon colors
-            //     borderStyle: '#000000', // buttons' border style
-            //     borderWidth: 0, // buttons' border width (0 == disabled)
-            // },
-            // tooltips: {
-            //     enabled: true, // enable or disable tooltips for buttons
-            //     bgStyle: '#000000', // tooltip background style
-            //     bgAlpha: 0.5, // tooltip background transparence
-            //     textStyle: '#ffffff', // tooltip's text style
-            //     textAlpha: 0.9, // tooltip's text transparence
-            //     padding: 15, // tooltip padding
-            //     radius: 20, // tooltip border radius
-            // },
-            // shorter button configuration style
-            nextPageButton: ngxImageviewer.createButtonConfig('navigate_next', 'Next page', 0, false),
-            beforePageButton: ngxImageviewer.createButtonConfig('navigate_before', 'Previous page', 1, false),
-            zoomOutButton: ngxImageviewer.createButtonConfig('zoom_out', 'Zoom out', 0, false),
-            zoomInButton: ngxImageviewer.createButtonConfig('zoom_in', 'Zoom in', 1, false),
-            rotateLeftButton: ngxImageviewer.createButtonConfig('rotate_left', 'Rotate left', 2, false),
-            rotateRightButton: ngxImageviewer.createButtonConfig('rotate_right', 'Rotate right', 3, false),
-            resetButton: ngxImageviewer.createButtonConfig('autorenew', 'Reset', 4, false),
-        };
-    }
-    var PepImagesFilmstripComponent = /** @class */ (function () {
-        function PepImagesFilmstripComponent(customizationService, dialogService, layoutService, fileService, iconRegistry, utilitiesService, gallery, renderer, element, cd, document, dialogRef, data) {
-            var _this = this;
-            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;
-            // @ViewChild('ngxViewerImage') ngxViewerImage: any; // TODO: Check if we need to use this??
-            this.key = '';
-            this.value = '';
-            this.label = '';
-            this.xAlignment = ngxLib.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.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(function (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: ngGallery.LoadingStrategy.Preload,
-                // slidingDirection: SlidingDirection.Horizontal,
-            };
-            this.guid = ngxLib.PepGuid.newGuid();
-        }
-        Object.defineProperty(PepImagesFilmstripComponent.prototype, "rowSpan", {
-            get: function () {
-                return this._rowSpan;
-            },
-            set: function (value) {
-                this._rowSpan = value;
-                this.setFieldHeight();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepImagesFilmstripComponent.prototype, "layoutType", {
-            get: function () {
-                return this._layoutType;
-            },
-            set: function (value) {
-                this._layoutType = value;
-                this.setFieldHeight();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PepImagesFilmstripComponent.prototype.setFieldHeight = function () {
-            this.fieldHeight = this.customizationService.calculateFieldHeight(this.layoutType, this.rowSpan, this.standAlone);
-        };
-        PepImagesFilmstripComponent.prototype.setDefaultForm = function () {
-            var pepField = new ngxLib.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');
-        //     }
-        // }
-        PepImagesFilmstripComponent.prototype.ngOnInit = function () {
-            if (!this.inDialog) {
-                if (this.form === null) {
-                    this.standAlone = true;
-                    this.setFieldHeight();
-                    this.setDefaultForm();
-                    this.renderer.addClass(this.element.nativeElement, ngxLib.PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
-                    if (!this.renderTitle) {
-                        this.renderer.addClass(this.element.nativeElement, ngxLib.PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME);
-                    }
-                }
-            }
-            if (this.items === null) {
-                var imgArr = this.value ? this.value.split(';') : [];
-                // add No image image when there is no images
-                if (imgArr.length === 0) {
-                    var noImageSrc = this.fileService.getSvgAsImageSrc(icon.pepIconNoImage2.data);
-                    imgArr.push(noImageSrc);
-                }
-                this.items = imgArr.map(function (img) { return new ngGallery.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;
-        };
-        PepImagesFilmstripComponent.prototype.ngAfterViewInit = function () {
-            if (this.inDialog) {
-                this.afterDialogOpened();
-            }
-            else {
-                this.galleryRef = this.gallery.ref(this.guid + "-gallery");
-                this.initGalleryStyle(this.galleryCont, this.galleryRef);
-            }
-        };
-        PepImagesFilmstripComponent.prototype.ngOnChanges = function () {
-            if (this.standAlone) {
-                this.setDefaultForm();
-            }
-        };
-        PepImagesFilmstripComponent.prototype.ngOnDestroy = function () {
-            if (this.galleryRef) {
-                this.galleryRef.destroy();
-            }
-            if (this.dialogGalleryRef) {
-                this.dialogGalleryRef.destroy();
-            }
-            // if (this.myPinch) { this.myPinch.destroy(); }
-        };
-        PepImagesFilmstripComponent.prototype.initGalleryStyle = function (galleryContainer, galleryRef) {
-            var _this = this;
-            setTimeout(function () {
-                // Set thumbnails position and sliding direction
-                _this.setThumbnailDimension(galleryContainer);
-                galleryRef.setConfig(_this.config);
-                // this.renderNavIcon(galleryContainer, true);
-                // this.renderNavIcon(galleryContainer, false);
-            }, 0);
-            var currentIndex = this.currIndex;
-            if (currentIndex > 0) {
-                setTimeout(function () {
-                    galleryRef.load(_this.items);
-                    galleryRef.set(currentIndex);
-                }, 0);
-                // galleryRef.set(currentIndex);
-            }
-            else {
-                galleryRef.load(this.items);
-            }
-        };
-        PepImagesFilmstripComponent.prototype.onError = function (e) {
-            var noImageSrc = this.fileService.getSvgAsImageSrc(icon.pepIconNoImage2.data);
-            var noimg = new ngGallery.ImageItem({ src: noImageSrc, thumb: noImageSrc });
-            this.items.splice(e.itemIndex, 1, noimg);
-        };
-        PepImagesFilmstripComponent.prototype.enlargeImage = function (event) {
-            var _this = this;
-            var 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(function () {
-                _this.afterDialogOpened();
-            });
-            // Update currentIndex in galleryRef
-            // dialogRef.afterClosed().subscribe(value => {
-            //     this.galleryRef.set(this.currIndex);
-            // });
-        };
-        PepImagesFilmstripComponent.prototype.afterDialogOpened = function () {
-            this.dialogGalleryRef = this.gallery.ref(this.guid + "-dlgGallery");
-            this.initGalleryStyle(this.galleryDialogCont, this.dialogGalleryRef);
-        };
-        PepImagesFilmstripComponent.prototype.closeDialog = function (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);
-            }
-        };
-        PepImagesFilmstripComponent.prototype.setThumbnailDimension = function (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) {
-                var 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 {
-                var 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
-                ? ngGallery.ThumbnailsPosition.Bottom
-                : this.layoutService.isRtl()
-                    ? ngGallery.ThumbnailsPosition.Right
-                    : ngGallery.ThumbnailsPosition.Left;
-            this.config.slidingDirection =
-                this.key !== 'ItemFilmstripImages'
-                    ? ngGallery.SlidingDirection.Horizontal
-                    : this.isVertical
-                        ? ngGallery.SlidingDirection.Horizontal
-                        : ngGallery.SlidingDirection.Vertical;
-            this.config.imageSize = 'contain';
-        };
-        PepImagesFilmstripComponent.prototype.indexChange = function (item) {
-            this.currIndex = item.currIndex;
-            // if (this.ngxViewerImage && this.ngxViewerImage.scale) {
-            //     this.ngxViewerImage.scale = 1;
-            //     this.updateStyle();
-            // }
-        };
-        return PepImagesFilmstripComponent;
-    }());
-    PepImagesFilmstripComponent.decorators = [
-        { type: core.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]=\"false\" (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>\n\n<!-- Add custom template to image items -->\n<ng-template #itemTemplate let-index=\"index\" let-type=\"type\" let-data=\"data\" let-currIndex=\"currIndex\">\n    <ng-container *ngIf=\"index === currIndex\">\n        <ngx-imageviewer [src]=\"data.src\">\n        </ngx-imageviewer>\n    </ng-container>\n</ng-template>",
-                    // animations: [slideInAnimation],
-                    providers: [
-                        {
-                            provide: ngxImageviewer.IMAGEVIEWER_CONFIG,
-                            // useValue: IMAGEVIEWER_CONFIG_DEFAULT,
-                            useFactory: createViewerConfig,
-                            deps: [core$1.TranslateService],
-                        },
-                    ],
-                    styles: [":host{width:100%;height:inherit;display:block}:host>*{align-self:center}.gallery-dialog{height:inherit}.images-filmstrip-container{height:100%}.images-filmstrip-container .img-wrapper{height:100%;position:relative}.images-filmstrip-container .gallery-arrow{padding:.5rem;position:absolute;top:50%;transform:translateY(-50%);z-index:2}.images-filmstrip-container .gallery-arrow.start-arrow{left:0}.images-filmstrip-container .gallery-arrow.end-arrow{right:0}gallery{direction:ltr;height:100%;min-height:100%}.gallery-dialog-content{position:relative}.gallery-dialog-content .gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.gallery-dialog-content .gallery-arrow.start-arrow{left:0}.gallery-dialog-content .gallery-arrow.end-arrow{right:0}.gallery-dialog-content gallery{min-width:65vw}.gallery-dialog-content ::ng-deep gallery-item gallery-image .g-image-item{background-size:content!important}.gallery-dialog-content ::ng-deep gallery-item .g-item-template ngx-imageviewer canvas{max-width:100%!important;max-height:100%!important}::ng-deep gallery-thumbs{margin:0 1rem 0 .5rem;margin:0 var(--pep-spacing-lg,1rem) 0 var(--pep-spacing-sm,.5rem)}::ng-deep gallery-thumbs gallery-thumb{padding:0!important;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);margin:.5rem 0;margin:var(--pep-spacing-sm,.5rem) 0}::ng-deep gallery-thumbs gallery-thumb .g-image-item{background-size:cover!important}::ng-deep gallery-item gallery-image .g-image-item{border-radius:.5rem;border-radius:var(--pep-border-radius-lg,.5rem)}::ng-deep gallery-item:hover{cursor:pointer}::ng-deep gallery-dots{position:absolute!important;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem)}::ng-deep gallery-dots.pep-button,::ng-deep gallery-dots.pepperi-button{display:flex!important}::ng-deep .img-container{display:flex;align-items:center}::ng-deep gallery-nav{display:none}.vertical-gallery ::ng-deep gallery-thumbs{margin:1rem 0 .5rem;margin:var(--pep-spacing-lg,1rem) 0 var(--pep-spacing-sm,.5rem) 0}.vertical-gallery ::ng-deep gallery-thumbs gallery-thumb{margin:0 .5rem;margin:0 var(--pep-spacing-sm,.5rem)}", "gallery{background-color:transparent}::ng-deep gallery-thumb{box-shadow:0 .25rem .5rem 0 rgba(26,26,26,.32);box-shadow:var(--pep-shadow-sm-offset,0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.32)}::ng-deep .g-nav-next,::ng-deep .g-nav-prev{background:hsla(0,0%,100%,.5);background:hsla(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%),.5)}::ng-deep .g-nav-next:hover,::ng-deep .g-nav-prev:hover{background:hsla(0,0%,100%,.5);background:hsla(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%),.5);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);cursor:pointer}::ng-deep .g-nav-next:focus,::ng-deep .g-nav-prev:focus{background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%));box-shadow:0 0 0 .25rem rgba(23,102,166,.5);box-shadow:0 0 0 var(--pep-spacing-xs,.25rem) hsla(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%),.5)}::ng-deep .g-nav-next:active,::ng-deep .g-nav-prev:active{background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%));box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.16);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.16)}::ng-deep .g-nav-next:disabled,::ng-deep .g-nav-prev:disabled{box-shadow:unset;border:unset;color:rgba(26,26,26,.35)!important;color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)!important;background:hsla(0,0%,100%,.08)!important;background:hsla(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%),.08)!important}::ng-deep .g-nav-next:disabled:after,::ng-deep .g-nav-prev:disabled:after{border:unset}::ng-deep .g-nav-next:disabled .svg-icon,::ng-deep .g-nav-prev:disabled .svg-icon{fill:rgba(26,26,26,.35);fill:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}::ng-deep .g-nav-next:disabled .svg-icon.stroke,::ng-deep .g-nav-prev:disabled .svg-icon.stroke{fill:unset;stroke:rgba(26,26,26,.35);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}::ng-deep gallery-dots{background:rgba(26,26,26,.12);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.12)}"]
-                },] }
-    ];
-    PepImagesFilmstripComponent.ctorParameters = function () { return [
-        { type: ngxLib.PepCustomizationService },
-        { type: dialog.PepDialogService },
-        { type: ngxLib.PepLayoutService },
-        { type: ngxLib.PepFileService },
-        { type: icon.PepIconRegistry },
-        { type: ngxLib.PepUtilitiesService },
-        { type: ngGallery.Gallery },
-        { type: core.Renderer2 },
-        { type: core.ElementRef },
-        { type: core.ChangeDetectorRef },
-        { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [common.DOCUMENT,] }] },
-        { type: dialog$1.MatDialogRef, decorators: [{ type: core.Optional }] },
-        { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [dialog$1.MAT_DIALOG_DATA,] }] }
-    ]; };
-    PepImagesFilmstripComponent.propDecorators = {
-        key: [{ type: core.Input }],
-        value: [{ type: core.Input }],
-        label: [{ type: core.Input }],
-        xAlignment: [{ type: core.Input }],
-        rowSpan: [{ type: core.Input }],
-        form: [{ type: core.Input }],
-        uid: [{ type: core.Input }],
-        showTitle: [{ type: core.Input }],
-        renderTitle: [{ type: core.Input }],
-        layoutType: [{ type: core.Input }],
-        currIndex: [{ type: core.Input }],
-        showThumbnails: [{ type: core.Input }],
-        galleryCont: [{ type: core.ViewChild, args: ['galleryCont',] }],
-        galleryDialogTemplate: [{ type: core.ViewChild, args: ['galleryDialogTemplate', { read: core.TemplateRef },] }],
-        galleryDialogCont: [{ type: core.ViewChild, args: ['galleryDialogCont',] }]
+    function createViewerConfig(translate) {
+        return {
+            // width: 850,
+            // height: 150,
+            bgStyle: '#FFF',
+            // scaleStep: 0.1, // zoom scale step (using the zoom in/out buttons)
+            // rotateStepper: false, // touch rotate should rotate only 90 to 90 degrees
+            loadingMessage: translate.instant('MESSAGES.INFO_LOADING_FILE'),
+            // buttonStyle: {
+            //     iconFontFamily: 'Material Icons', // font used to render the button icons
+            //     alpha: 0.5, // buttons' transparence value
+            //     hoverAlpha: 0.7, // buttons' transparence value when mouse is over
+            //     bgStyle: '#000000', //  buttons' background style
+            //     iconStyle: '#ffffff', // buttons' icon colors
+            //     borderStyle: '#000000', // buttons' border style
+            //     borderWidth: 0, // buttons' border width (0 == disabled)
+            // },
+            // tooltips: {
+            //     enabled: true, // enable or disable tooltips for buttons
+            //     bgStyle: '#000000', // tooltip background style
+            //     bgAlpha: 0.5, // tooltip background transparence
+            //     textStyle: '#ffffff', // tooltip's text style
+            //     textAlpha: 0.9, // tooltip's text transparence
+            //     padding: 15, // tooltip padding
+            //     radius: 20, // tooltip border radius
+            // },
+            // shorter button configuration style
+            nextPageButton: ngxImageviewer.createButtonConfig('navigate_next', 'Next page', 0, false),
+            beforePageButton: ngxImageviewer.createButtonConfig('navigate_before', 'Previous page', 1, false),
+            zoomOutButton: ngxImageviewer.createButtonConfig('zoom_out', 'Zoom out', 0, false),
+            zoomInButton: ngxImageviewer.createButtonConfig('zoom_in', 'Zoom in', 1, false),
+            rotateLeftButton: ngxImageviewer.createButtonConfig('rotate_left', 'Rotate left', 2, false),
+            rotateRightButton: ngxImageviewer.createButtonConfig('rotate_right', 'Rotate right', 3, false),
+            resetButton: ngxImageviewer.createButtonConfig('autorenew', 'Reset', 4, false),
+        };
+    }
+    var PepImagesFilmstripComponent = /** @class */ (function () {
+        function PepImagesFilmstripComponent(customizationService, dialogService, layoutService, fileService, iconRegistry, utilitiesService, gallery, renderer, element, cd, document, dialogRef, data) {
+            var _this = this;
+            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;
+            // @ViewChild('ngxViewerImage') ngxViewerImage: any; // TODO: Check if we need to use this??
+            this.key = '';
+            this.value = '';
+            this.label = '';
+            this.xAlignment = ngxLib.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.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(function (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: ngGallery.LoadingStrategy.Preload,
+                // slidingDirection: SlidingDirection.Horizontal,
+            };
+            this.guid = ngxLib.PepGuid.newGuid();
+        }
+        Object.defineProperty(PepImagesFilmstripComponent.prototype, "rowSpan", {
+            get: function () {
+                return this._rowSpan;
+            },
+            set: function (value) {
+                this._rowSpan = value;
+                this.setFieldHeight();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepImagesFilmstripComponent.prototype, "layoutType", {
+            get: function () {
+                return this._layoutType;
+            },
+            set: function (value) {
+                this._layoutType = value;
+                this.setFieldHeight();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PepImagesFilmstripComponent.prototype.setFieldHeight = function () {
+            this.fieldHeight = this.customizationService.calculateFieldHeight(this.layoutType, this.rowSpan, this.standAlone);
+        };
+        PepImagesFilmstripComponent.prototype.setDefaultForm = function () {
+            var pepField = new ngxLib.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');
+        //     }
+        // }
+        PepImagesFilmstripComponent.prototype.ngOnInit = function () {
+            if (!this.inDialog) {
+                if (this.form === null) {
+                    this.standAlone = true;
+                    this.setFieldHeight();
+                    this.setDefaultForm();
+                    this.renderer.addClass(this.element.nativeElement, ngxLib.PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
+                    if (!this.renderTitle) {
+                        this.renderer.addClass(this.element.nativeElement, ngxLib.PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME);
+                    }
+                }
+            }
+            if (this.items === null) {
+                var imgArr = this.value ? this.value.split(';') : [];
+                // add No image image when there is no images
+                if (imgArr.length === 0) {
+                    var noImageSrc = this.fileService.getSvgAsImageSrc(icon.pepIconNoImage2.data);
+                    imgArr.push(noImageSrc);
+                }
+                this.items = imgArr.map(function (img) { return new ngGallery.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;
+        };
+        PepImagesFilmstripComponent.prototype.ngAfterViewInit = function () {
+            if (this.inDialog) {
+                this.afterDialogOpened();
+            }
+            else {
+                this.galleryRef = this.gallery.ref(this.guid + "-gallery");
+                this.initGalleryStyle(this.galleryCont, this.galleryRef);
+            }
+        };
+        PepImagesFilmstripComponent.prototype.ngOnChanges = function () {
+            if (this.standAlone) {
+                this.setDefaultForm();
+            }
+        };
+        PepImagesFilmstripComponent.prototype.ngOnDestroy = function () {
+            if (this.galleryRef) {
+                this.galleryRef.destroy();
+            }
+            if (this.dialogGalleryRef) {
+                this.dialogGalleryRef.destroy();
+            }
+            // if (this.myPinch) { this.myPinch.destroy(); }
+        };
+        PepImagesFilmstripComponent.prototype.initGalleryStyle = function (galleryContainer, galleryRef) {
+            var _this = this;
+            setTimeout(function () {
+                // Set thumbnails position and sliding direction
+                _this.setThumbnailDimension(galleryContainer);
+                galleryRef.setConfig(_this.config);
+                // this.renderNavIcon(galleryContainer, true);
+                // this.renderNavIcon(galleryContainer, false);
+            }, 0);
+            var currentIndex = this.currIndex;
+            if (currentIndex > 0) {
+                setTimeout(function () {
+                    galleryRef.load(_this.items);
+                    galleryRef.set(currentIndex);
+                }, 0);
+                // galleryRef.set(currentIndex);
+            }
+            else {
+                galleryRef.load(this.items);
+            }
+        };
+        PepImagesFilmstripComponent.prototype.onError = function (e) {
+            var noImageSrc = this.fileService.getSvgAsImageSrc(icon.pepIconNoImage2.data);
+            var noimg = new ngGallery.ImageItem({ src: noImageSrc, thumb: noImageSrc });
+            this.items.splice(e.itemIndex, 1, noimg);
+        };
+        PepImagesFilmstripComponent.prototype.enlargeImage = function (event) {
+            var _this = this;
+            var 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(function () {
+                _this.afterDialogOpened();
+            });
+            // Update currentIndex in galleryRef
+            // dialogRef.afterClosed().subscribe(value => {
+            //     this.galleryRef.set(this.currIndex);
+            // });
+        };
+        PepImagesFilmstripComponent.prototype.afterDialogOpened = function () {
+            this.dialogGalleryRef = this.gallery.ref(this.guid + "-dlgGallery");
+            this.initGalleryStyle(this.galleryDialogCont, this.dialogGalleryRef);
+        };
+        PepImagesFilmstripComponent.prototype.closeDialog = function (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);
+            }
+        };
+        PepImagesFilmstripComponent.prototype.setThumbnailDimension = function (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) {
+                var 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 {
+                var 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
+                ? ngGallery.ThumbnailsPosition.Bottom
+                : this.layoutService.isRtl()
+                    ? ngGallery.ThumbnailsPosition.Right
+                    : ngGallery.ThumbnailsPosition.Left;
+            this.config.slidingDirection =
+                this.key !== 'ItemFilmstripImages'
+                    ? ngGallery.SlidingDirection.Horizontal
+                    : this.isVertical
+                        ? ngGallery.SlidingDirection.Horizontal
+                        : ngGallery.SlidingDirection.Vertical;
+            this.config.imageSize = 'contain';
+        };
+        PepImagesFilmstripComponent.prototype.indexChange = function (item) {
+            this.currIndex = item.currIndex;
+            // if (this.ngxViewerImage && this.ngxViewerImage.scale) {
+            //     this.ngxViewerImage.scale = 1;
+            //     this.updateStyle();
+            // }
+        };
+        return PepImagesFilmstripComponent;
+    }());
+    PepImagesFilmstripComponent.decorators = [
+        { type: core.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]=\"false\" (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>\n\n<!-- Add custom template to image items -->\n<ng-template #itemTemplate let-index=\"index\" let-type=\"type\" let-data=\"data\" let-currIndex=\"currIndex\">\n    <ng-container *ngIf=\"index === currIndex\">\n        <ngx-imageviewer [src]=\"data.src\">\n        </ngx-imageviewer>\n    </ng-container>\n</ng-template>",
+                    // animations: [slideInAnimation],
+                    providers: [
+                        {
+                            provide: ngxImageviewer.IMAGEVIEWER_CONFIG,
+                            // useValue: IMAGEVIEWER_CONFIG_DEFAULT,
+                            useFactory: createViewerConfig,
+                            deps: [core$1.TranslateService],
+                        },
+                    ],
+                    styles: [":host{width:100%;height:inherit;display:block}:host>*{align-self:center}.gallery-dialog{height:inherit}.images-filmstrip-container{height:100%}.images-filmstrip-container .img-wrapper{height:100%;position:relative}.images-filmstrip-container .gallery-arrow{padding:.5rem;position:absolute;top:50%;transform:translateY(-50%);z-index:2}.images-filmstrip-container .gallery-arrow.start-arrow{left:0}.images-filmstrip-container .gallery-arrow.end-arrow{right:0}gallery{direction:ltr;height:100%;min-height:100%}.gallery-dialog-content{position:relative}.gallery-dialog-content .gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.gallery-dialog-content .gallery-arrow.start-arrow{left:0}.gallery-dialog-content .gallery-arrow.end-arrow{right:0}.gallery-dialog-content gallery{min-width:65vw}.gallery-dialog-content ::ng-deep gallery-item gallery-image .g-image-item{background-size:content!important}.gallery-dialog-content ::ng-deep gallery-item .g-item-template ngx-imageviewer canvas{max-width:100%!important;max-height:100%!important}::ng-deep gallery-thumbs{margin:0 1rem 0 .5rem;margin:0 var(--pep-spacing-lg,1rem) 0 var(--pep-spacing-sm,.5rem)}::ng-deep gallery-thumbs gallery-thumb{padding:0!important;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);margin:.5rem 0;margin:var(--pep-spacing-sm,.5rem) 0}::ng-deep gallery-thumbs gallery-thumb .g-image-item{background-size:cover!important}::ng-deep gallery-item gallery-image .g-image-item{border-radius:.5rem;border-radius:var(--pep-border-radius-lg,.5rem)}::ng-deep gallery-item:hover{cursor:pointer}::ng-deep gallery-dots{position:absolute!important;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem)}::ng-deep gallery-dots.pep-button,::ng-deep gallery-dots.pepperi-button{display:flex!important}::ng-deep .img-container{display:flex;align-items:center}::ng-deep gallery-nav{display:none}.vertical-gallery ::ng-deep gallery-thumbs{margin:1rem 0 .5rem;margin:var(--pep-spacing-lg,1rem) 0 var(--pep-spacing-sm,.5rem) 0}.vertical-gallery ::ng-deep gallery-thumbs gallery-thumb{margin:0 .5rem;margin:0 var(--pep-spacing-sm,.5rem)}", "gallery{background-color:transparent}::ng-deep gallery-thumb{box-shadow:0 .25rem .5rem 0 rgba(26,26,26,.32);box-shadow:var(--pep-shadow-sm-offset,0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.32)}::ng-deep .g-nav-next,::ng-deep .g-nav-prev{background:hsla(0,0%,100%,.5);background:hsla(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%),.5)}::ng-deep .g-nav-next:hover,::ng-deep .g-nav-prev:hover{background:hsla(0,0%,100%,.5);background:hsla(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%),.5);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);cursor:pointer}::ng-deep .g-nav-next:focus,::ng-deep .g-nav-prev:focus{background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%));box-shadow:0 0 0 .25rem rgba(23,102,166,.5);box-shadow:0 0 0 var(--pep-spacing-xs,.25rem) hsla(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%),.5)}::ng-deep .g-nav-next:active,::ng-deep .g-nav-prev:active{background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%));box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.16);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.16)}::ng-deep .g-nav-next:disabled,::ng-deep .g-nav-prev:disabled{box-shadow:unset;border:unset;color:rgba(26,26,26,.35)!important;color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)!important;background:hsla(0,0%,100%,.08)!important;background:hsla(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%),.08)!important}::ng-deep .g-nav-next:disabled:after,::ng-deep .g-nav-prev:disabled:after{border:unset}::ng-deep .g-nav-next:disabled .svg-icon,::ng-deep .g-nav-prev:disabled .svg-icon{fill:rgba(26,26,26,.35);fill:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}::ng-deep .g-nav-next:disabled .svg-icon.stroke,::ng-deep .g-nav-prev:disabled .svg-icon.stroke{fill:unset;stroke:rgba(26,26,26,.35);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}::ng-deep gallery-dots{background:rgba(26,26,26,.12);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.12)}"]
+                },] }
+    ];
+    PepImagesFilmstripComponent.ctorParameters = function () { return [
+        { type: ngxLib.PepCustomizationService },
+        { type: dialog.PepDialogService },
+        { type: ngxLib.PepLayoutService },
+        { type: ngxLib.PepFileService },
+        { type: icon.PepIconRegistry },
+        { type: ngxLib.PepUtilitiesService },
+        { type: ngGallery.Gallery },
+        { type: core.Renderer2 },
+        { type: core.ElementRef },
+        { type: core.ChangeDetectorRef },
+        { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [common.DOCUMENT,] }] },
+        { type: dialog$1.MatDialogRef, decorators: [{ type: core.Optional }] },
+        { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [dialog$1.MAT_DIALOG_DATA,] }] }
+    ]; };
+    PepImagesFilmstripComponent.propDecorators = {
+        key: [{ type: core.Input }],
+        value: [{ type: core.Input }],
+        label: [{ type: core.Input }],
+        xAlignment: [{ type: core.Input }],
+        rowSpan: [{ type: core.Input }],
+        form: [{ type: core.Input }],
+        uid: [{ type: core.Input }],
+        showTitle: [{ type: core.Input }],
+        renderTitle: [{ type: core.Input }],
+        layoutType: [{ type: core.Input }],
+        currIndex: [{ type: core.Input }],
+        showThumbnails: [{ type: core.Input }],
+        galleryCont: [{ type: core.ViewChild, args: ['galleryCont',] }],
+        galleryDialogTemplate: [{ type: core.ViewChild, args: ['galleryDialogTemplate', { read: core.TemplateRef },] }],
+        galleryDialogCont: [{ type: core.ViewChild, args: ['galleryDialogCont',] }]
     };
 
-    var PepImagesFilmstripModule = /** @class */ (function () {
-        function PepImagesFilmstripModule(pepIconRegistry) {
-            this.pepIconRegistry = pepIconRegistry;
-            this.pepIconRegistry.registerIcons([
-                icon.pepIconSystemEdit,
-                icon.pepIconSystemClose,
-                icon.pepIconArrowRightAlt,
-                icon.pepIconArrowLeftAlt,
-            ]);
-        }
-        return PepImagesFilmstripModule;
-    }());
-    PepImagesFilmstripModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        forms.ReactiveFormsModule,
-                        // Material modules,
-                        core$2.MatCommonModule,
-                        formField.MatFormFieldModule,
-                        dialog$1.MatDialogModule,
-                        icon$1.MatIconModule,
-                        // External modules
-                        ngGallery.GalleryModule,
-                        ngxImageviewer.ImageViewerModule,
-                        // ImageViewerModule.forRoot({
-                        //     btnClass: 'default', // The CSS class(es) that will apply to the buttons
-                        //     zoomFactor: 0.1, // The amount that the scale will be increased by
-                        //     containerBackgroundColor: 'transparent', // The color to use for the background. This can provided in hex, or rgb(a).
-                        //     wheelZoom: true, // If true, the mouse wheel can be used to zoom in
-                        //     allowFullscreen: false, // If true, the fullscreen button will be shown, allowing the user to entr fullscreen mode
-                        //     btnIcons: {
-                        //         // The icon classes that will apply to the buttons. By default, font-awesome is used.
-                        //         zoomIn: 'fa fa-plus',
-                        //         zoomOut: 'fa fa-minus',
-                        //         rotateClockwise: 'fa fa-repeat',
-                        //         rotateCounterClockwise: 'fa fa-undo',
-                        //         next: 'fa fa-arrow-right',
-                        //         prev: 'fa fa-arrow-left',
-                        //         fullscreen: 'fa fa-arrows-alt'
-                        //     }
-                        // }),
-                        // ngx-lib modules
-                        ngxLib.PepNgxLibModule,
-                        button.PepButtonModule,
-                        icon.PepIconModule,
-                        fieldTitle.PepFieldTitleModule,
-                        dialog.PepDialogModule,
-                    ],
-                    exports: [PepImagesFilmstripComponent],
-                    declarations: [PepImagesFilmstripComponent],
-                },] }
-    ];
-    PepImagesFilmstripModule.ctorParameters = function () { return [
-        { type: icon.PepIconRegistry }
+    var PepImagesFilmstripModule = /** @class */ (function () {
+        function PepImagesFilmstripModule(pepIconRegistry) {
+            this.pepIconRegistry = pepIconRegistry;
+            this.pepIconRegistry.registerIcons([
+                icon.pepIconSystemEdit,
+                icon.pepIconSystemClose,
+                icon.pepIconArrowRightAlt,
+                icon.pepIconArrowLeftAlt,
+            ]);
+        }
+        return PepImagesFilmstripModule;
+    }());
+    PepImagesFilmstripModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        forms.ReactiveFormsModule,
+                        // Material modules,
+                        core$2.MatCommonModule,
+                        formField.MatFormFieldModule,
+                        dialog$1.MatDialogModule,
+                        icon$1.MatIconModule,
+                        // External modules
+                        ngGallery.GalleryModule,
+                        ngxImageviewer.ImageViewerModule,
+                        // ImageViewerModule.forRoot({
+                        //     btnClass: 'default', // The CSS class(es) that will apply to the buttons
+                        //     zoomFactor: 0.1, // The amount that the scale will be increased by
+                        //     containerBackgroundColor: 'transparent', // The color to use for the background. This can provided in hex, or rgb(a).
+                        //     wheelZoom: true, // If true, the mouse wheel can be used to zoom in
+                        //     allowFullscreen: false, // If true, the fullscreen button will be shown, allowing the user to entr fullscreen mode
+                        //     btnIcons: {
+                        //         // The icon classes that will apply to the buttons. By default, font-awesome is used.
+                        //         zoomIn: 'fa fa-plus',
+                        //         zoomOut: 'fa fa-minus',
+                        //         rotateClockwise: 'fa fa-repeat',
+                        //         rotateCounterClockwise: 'fa fa-undo',
+                        //         next: 'fa fa-arrow-right',
+                        //         prev: 'fa fa-arrow-left',
+                        //         fullscreen: 'fa fa-arrows-alt'
+                        //     }
+                        // }),
+                        // ngx-lib modules
+                        ngxLib.PepNgxLibModule,
+                        button.PepButtonModule,
+                        icon.PepIconModule,
+                        fieldTitle.PepFieldTitleModule,
+                        dialog.PepDialogModule,
+                    ],
+                    exports: [PepImagesFilmstripComponent],
+                    declarations: [PepImagesFilmstripComponent],
+                },] }
+    ];
+    PepImagesFilmstripModule.ctorParameters = function () { return [
+        { type: icon.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.
      */
 
     exports.PepImagesFilmstripComponent = PepImagesFilmstripComponent;