@pepperi-addons/ngx-lib 0.3.15-loader.9 → 0.4.0-angular14.11

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

@@ -0,0 +1,552 @@
+import * as i0 from '@angular/core';
+import { TemplateRef, Component, Optional, Inject, Input, ViewChild, NgModule } from '@angular/core';
+import * as i6 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import * as i7 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatCommonModule } from '@angular/material/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i5 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import * as i1 from '@pepperi-addons/ngx-lib';
+import { DEFAULT_HORIZONTAL_ALIGNMENT, PepGuid, PepImagesField, PepCustomizationService, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
+import * as i9 from '@pepperi-addons/ngx-lib/field-title';
+import { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';
+import * as i8 from '@pepperi-addons/ngx-lib/button';
+import { PepButtonModule } from '@pepperi-addons/ngx-lib/button';
+import * as i3 from '@pepperi-addons/ngx-lib/icon';
+import { pepIconNoImage2, pepIconSystemEdit, pepIconSystemClose, pepIconArrowRightAlt, pepIconArrowLeftAlt, PepIconModule } from '@pepperi-addons/ngx-lib/icon';
+import * as i2 from '@pepperi-addons/ngx-lib/dialog';
+import { PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';
+import * as i4 from 'ng-gallery';
+import { LoadingStrategy, ImageItem, ThumbnailsPosition, SlidingDirection, GalleryModule } from 'ng-gallery';
+import 'hammerjs';
+
+// export function createViewerConfig(
+//     translate: TranslateService
+// ): ImageViewerConfig {
+//     return {
+//         // width: 850,
+//         // height: 150,
+//         bgStyle: '#FFF', // component background style
+//         // 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'), // 'Loading...',
+//         // 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: createButtonConfig(
+//             'navigate_next',
+//             'Next page',
+//             0,
+//             false
+//         ),
+//         beforePageButton: createButtonConfig(
+//             'navigate_before',
+//             'Previous page',
+//             1,
+//             false
+//         ),
+//         zoomOutButton: createButtonConfig('zoom_out', 'Zoom out', 0, false),
+//         zoomInButton: createButtonConfig('zoom_in', 'Zoom in', 1, false),
+//         rotateLeftButton: createButtonConfig(
+//             'rotate_left',
+//             'Rotate left',
+//             2,
+//             false
+//         ),
+//         rotateRightButton: createButtonConfig(
+//             'rotate_right',
+//             'Rotate right',
+//             3,
+//             false
+//         ),
+//         resetButton: createButtonConfig('autorenew', 'Reset', 4, false),
+//     };
+// }
+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;
+        // @ViewChild('ngxViewerImage') ngxViewerImage: any; // TODO: Check if we need to use this??
+        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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepImagesFilmstripComponent, deps: [{ token: i1.PepCustomizationService }, { token: i2.PepDialogService }, { token: i1.PepLayoutService }, { token: i1.PepFileService }, { token: i3.PepIconRegistry }, { token: i1.PepUtilitiesService }, { token: i4.Gallery }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT, optional: true }, { token: i5.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+PepImagesFilmstripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepImagesFilmstripComponent, selector: "pep-images-filmstrip", inputs: { key: "key", value: "value", label: "label", xAlignment: "xAlignment", rowSpan: "rowSpan", form: "form", uid: "uid", showTitle: "showTitle", renderTitle: "renderTitle", layoutType: "layoutType", currIndex: "currIndex", showThumbnails: "showThumbnails" }, providers: [
+    // {
+    //     provide: IMAGEVIEWER_CONFIG,
+    //     // useValue: IMAGEVIEWER_CONFIG_DEFAULT,
+    //     useFactory: createViewerConfig,
+    //     deps: [TranslateService],
+    // },
+    ], viewQueries: [{ propertyName: "galleryCont", first: true, predicate: ["galleryCont"], descendants: true }, { propertyName: "galleryDialogTemplate", first: true, predicate: ["galleryDialogTemplate"], descendants: true, read: TemplateRef }, { propertyName: "galleryDialogCont", first: true, predicate: ["galleryDialogCont"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"inDialog; then galleryDialogTemplate; else regularTemplate\"></ng-container>\n<ng-template #regularTemplate>\n    <ng-container [formGroup]=\"form\">\n        <div class=\"images-filmstrip-container\">\n            <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\n            </pep-field-title>\n            <div #galleryCont class=\"img-wrapper\" [ngClass]=\"isVertical ? 'vertical-gallery' : 'horizontal-gallery'\"\n                [style.height]=\"fieldHeight\">\n                <pep-button *ngIf=\"items?.length > 1\" iconName=\"arrow_left_alt\" styleType=\"weak-invert\" sizeType=\"sm\"\n                    (click)=\"formGallery.prev()\" class=\"gallery-arrow start-arrow\">\n                </pep-button>\n                <gallery #formGallery id=\"{{guid}}-gallery\" (itemClick)=\"enlargeImage($event);\" [imageSize]=\"'contain'\"\n                    (indexChange)=\"indexChange($event)\" (error)=\"onError($event)\">\n                </gallery>\n                <pep-button *ngIf=\"items?.length > 1\" iconName=\"arrow_right_alt\" styleType=\"weak-invert\" sizeType=\"sm\"\n                    (click)=\"formGallery.next()\" class=\"gallery-arrow end-arrow\">\n                </pep-button>\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #galleryDialogTemplate>\n    <div class=\"gallery-dialog\">\n        <pep-dialog [title]=\"label\" [showFooter]=\"showFooter\" [showClose]=\"showClose\"  (close)=\"closeDialog($event)\">\n            <div pep-dialog-content #galleryDialogCont class=\"gallery-dialog-content\"\n                [ngClass]=\"isVertical ? 'vertical-gallery' : 'horizontal-gallery'\">\n                <pep-button *ngIf=\"items?.length > 1\" iconName=\"arrow_left_alt\" styleType=\"weak-invert\"\n                    (click)=\"dialogGallery.prev()\" class=\"gallery-arrow start-arrow\">\n                </pep-button>\n                <gallery #dialogGallery id=\"{{guid}}-dlgGallery\" [imageSize]=\"'contain'\"\n                    (indexChange)=\"indexChange($event)\" (error)=\"onError($event)\">\n                </gallery>\n                <pep-button *ngIf=\"items?.length > 1\" iconName=\"arrow_right_alt\" styleType=\"weak-invert\"\n                    (click)=\"dialogGallery.next()\" class=\"gallery-arrow end-arrow\">\n                </pep-button>\n            </div>\n        </pep-dialog>\n    </div>\n</ng-template>\n\n<!-- Add custom template to image items -->\n<!-- <ng-template #itemTemplate let-index=\"index\" let-type=\"type\" let-data=\"data\" let-currIndex=\"currIndex\">\n    <ng-container *ngIf=\"index === currIndex\">\n        <ngx-imageviewer [src]=\"data.src\">\n        </ngx-imageviewer>\n    </ng-container>\n</ng-template> -->", styles: [":host{width:100%;height:inherit;display:block}:host>*{align-self:center}.gallery-dialog{height:inherit}.images-filmstrip-container{height:100%}.images-filmstrip-container .img-wrapper{height:100%;position:relative}.images-filmstrip-container .gallery-arrow{padding:.5rem}.images-filmstrip-container .gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.images-filmstrip-container .gallery-arrow.start-arrow{left:0}.images-filmstrip-container .gallery-arrow.end-arrow{right:0}gallery{direction:ltr;height:100%;min-height:100%}.gallery-dialog-content{position:relative}.gallery-dialog-content .gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.gallery-dialog-content .gallery-arrow.start-arrow{left:0}.gallery-dialog-content .gallery-arrow.end-arrow{right:0}.gallery-dialog-content gallery{min-width:65vw}.gallery-dialog-content ::ng-deep gallery-item gallery-image .g-image-item{background-size:content!important}.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 var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}::ng-deep gallery-thumbs gallery-thumb{padding:0!important;border-radius:var(--pep-border-radius-md, .25rem);margin:var(--pep-spacing-sm, .5rem) 0}::ng-deep gallery-thumbs gallery-thumb .g-image-item{background-size:cover!important}::ng-deep gallery-item gallery-image .g-image-item{border-radius:var(--pep-border-radius-lg, .5rem)}::ng-deep gallery-item:hover{cursor:pointer}::ng-deep gallery-dots{position:absolute!important;border-radius:var(--pep-border-radius-md, .25rem)}::ng-deep gallery-dots.pepperi-button,::ng-deep gallery-dots.pep-button{display:flex!important}::ng-deep .img-container{display:flex;align-items:center}::ng-deep gallery-nav{display:none}.vertical-gallery ::ng-deep gallery-thumbs{margin:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem) 0}.vertical-gallery ::ng-deep gallery-thumbs gallery-thumb{margin:0 var(--pep-spacing-sm, .5rem)}\n", "gallery{background-color:transparent}::ng-deep gallery-thumb{box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}::ng-deep .g-nav-prev,::ng-deep .g-nav-next{background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.5)}::ng-deep .g-nav-prev:hover,::ng-deep .g-nav-next:hover{background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.5);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);cursor:pointer}::ng-deep .g-nav-prev:focus,::ng-deep .g-nav-next:focus{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}::ng-deep .g-nav-prev:active,::ng-deep .g-nav-next:active{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}::ng-deep .g-nav-prev:disabled,::ng-deep .g-nav-next:disabled{box-shadow:unset;border:unset;color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.08)!important}::ng-deep .g-nav-prev:disabled:after,::ng-deep .g-nav-next:disabled:after{border:unset}::ng-deep .g-nav-prev:disabled .svg-icon,::ng-deep .g-nav-next:disabled .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}::ng-deep .g-nav-prev:disabled .svg-icon.stroke,::ng-deep .g-nav-next:disabled .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}::ng-deep gallery-dots{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.GalleryComponent, selector: "gallery", inputs: ["nav", "dots", "loop", "thumb", "zoomOut", "counter", "dotsSize", "autoPlay", "gestures", "thumbWidth", "thumbHeight", "disableThumb", "panSensitivity", "playerInterval", "itemTemplate", "thumbTemplate", "thumbMode", "imageSize", "dotsPosition", "counterPosition", "slidingDirection", "loadingStrategy", "thumbPosition", "thumbView", "destroyRef", "skipInitConfig", "id", "items"], outputs: ["itemClick", "thumbClick", "playingChange", "indexChange", "itemsChange", "error"] }, { kind: "component", type: i8.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i9.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength"] }, { kind: "component", type: i2.PepDialogComponent, selector: "pep-dialog", inputs: ["title", "showClose", "showHeader", "showFooter"], outputs: ["close"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepImagesFilmstripComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-images-filmstrip', providers: [
+                    // {
+                    //     provide: IMAGEVIEWER_CONFIG,
+                    //     // useValue: IMAGEVIEWER_CONFIG_DEFAULT,
+                    //     useFactory: createViewerConfig,
+                    //     deps: [TranslateService],
+                    // },
+                    ], 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>\n\n<!-- Add custom template to image items -->\n<!-- <ng-template #itemTemplate let-index=\"index\" let-type=\"type\" let-data=\"data\" let-currIndex=\"currIndex\">\n    <ng-container *ngIf=\"index === currIndex\">\n        <ngx-imageviewer [src]=\"data.src\">\n        </ngx-imageviewer>\n    </ng-container>\n</ng-template> -->", styles: [":host{width:100%;height:inherit;display:block}:host>*{align-self:center}.gallery-dialog{height:inherit}.images-filmstrip-container{height:100%}.images-filmstrip-container .img-wrapper{height:100%;position:relative}.images-filmstrip-container .gallery-arrow{padding:.5rem}.images-filmstrip-container .gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.images-filmstrip-container .gallery-arrow.start-arrow{left:0}.images-filmstrip-container .gallery-arrow.end-arrow{right:0}gallery{direction:ltr;height:100%;min-height:100%}.gallery-dialog-content{position:relative}.gallery-dialog-content .gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.gallery-dialog-content .gallery-arrow.start-arrow{left:0}.gallery-dialog-content .gallery-arrow.end-arrow{right:0}.gallery-dialog-content gallery{min-width:65vw}.gallery-dialog-content ::ng-deep gallery-item gallery-image .g-image-item{background-size:content!important}.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 var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}::ng-deep gallery-thumbs gallery-thumb{padding:0!important;border-radius:var(--pep-border-radius-md, .25rem);margin:var(--pep-spacing-sm, .5rem) 0}::ng-deep gallery-thumbs gallery-thumb .g-image-item{background-size:cover!important}::ng-deep gallery-item gallery-image .g-image-item{border-radius:var(--pep-border-radius-lg, .5rem)}::ng-deep gallery-item:hover{cursor:pointer}::ng-deep gallery-dots{position:absolute!important;border-radius:var(--pep-border-radius-md, .25rem)}::ng-deep gallery-dots.pepperi-button,::ng-deep gallery-dots.pep-button{display:flex!important}::ng-deep .img-container{display:flex;align-items:center}::ng-deep gallery-nav{display:none}.vertical-gallery ::ng-deep gallery-thumbs{margin:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem) 0}.vertical-gallery ::ng-deep gallery-thumbs gallery-thumb{margin:0 var(--pep-spacing-sm, .5rem)}\n", "gallery{background-color:transparent}::ng-deep gallery-thumb{box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}::ng-deep .g-nav-prev,::ng-deep .g-nav-next{background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.5)}::ng-deep .g-nav-prev:hover,::ng-deep .g-nav-next:hover{background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.5);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);cursor:pointer}::ng-deep .g-nav-prev:focus,::ng-deep .g-nav-next:focus{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}::ng-deep .g-nav-prev:active,::ng-deep .g-nav-next:active{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}::ng-deep .g-nav-prev:disabled,::ng-deep .g-nav-next:disabled{box-shadow:unset;border:unset;color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.08)!important}::ng-deep .g-nav-prev:disabled:after,::ng-deep .g-nav-next:disabled:after{border:unset}::ng-deep .g-nav-prev:disabled .svg-icon,::ng-deep .g-nav-next:disabled .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}::ng-deep .g-nav-prev:disabled .svg-icon.stroke,::ng-deep .g-nav-next:disabled .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}::ng-deep gallery-dots{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1.PepCustomizationService }, { type: i2.PepDialogService }, { type: i1.PepLayoutService }, { type: i1.PepFileService }, { type: i3.PepIconRegistry }, { type: i1.PepUtilitiesService }, { type: i4.Gallery }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }, { type: i5.MatDialogRef, decorators: [{
+                        type: Optional
+                    }] }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [MAT_DIALOG_DATA]
+                    }] }];
+    }, propDecorators: { key: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], xAlignment: [{
+                type: Input
+            }], rowSpan: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], uid: [{
+                type: Input
+            }], showTitle: [{
+                type: Input
+            }], renderTitle: [{
+                type: Input
+            }], layoutType: [{
+                type: Input
+            }], currIndex: [{
+                type: Input
+            }], showThumbnails: [{
+                type: Input
+            }], galleryCont: [{
+                type: ViewChild,
+                args: ['galleryCont']
+            }], galleryDialogTemplate: [{
+                type: ViewChild,
+                args: ['galleryDialogTemplate', { read: TemplateRef }]
+            }], galleryDialogCont: [{
+                type: ViewChild,
+                args: ['galleryDialogCont']
+            }] } });
+
+class PepImagesFilmstripModule {
+    constructor(pepIconRegistry) {
+        this.pepIconRegistry = pepIconRegistry;
+        this.pepIconRegistry.registerIcons([
+            pepIconSystemEdit,
+            pepIconSystemClose,
+            pepIconArrowRightAlt,
+            pepIconArrowLeftAlt,
+        ]);
+    }
+}
+PepImagesFilmstripModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepImagesFilmstripModule, deps: [{ token: i3.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
+PepImagesFilmstripModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepImagesFilmstripModule, declarations: [PepImagesFilmstripComponent], imports: [CommonModule,
+        ReactiveFormsModule,
+        // Material modules,
+        MatCommonModule,
+        MatFormFieldModule,
+        MatDialogModule,
+        MatIconModule,
+        // External modules
+        GalleryModule,
+        // 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
+        PepNgxLibModule,
+        PepButtonModule,
+        PepIconModule,
+        PepFieldTitleModule,
+        PepDialogModule], exports: [PepImagesFilmstripComponent] });
+PepImagesFilmstripModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepImagesFilmstripModule, imports: [CommonModule,
+        ReactiveFormsModule,
+        // Material modules,
+        MatCommonModule,
+        MatFormFieldModule,
+        MatDialogModule,
+        MatIconModule,
+        // External modules
+        GalleryModule,
+        // 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
+        PepNgxLibModule,
+        PepButtonModule,
+        PepIconModule,
+        PepFieldTitleModule,
+        PepDialogModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepImagesFilmstripModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        // Material modules,
+                        MatCommonModule,
+                        MatFormFieldModule,
+                        MatDialogModule,
+                        MatIconModule,
+                        // External modules
+                        GalleryModule,
+                        // 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
+                        PepNgxLibModule,
+                        PepButtonModule,
+                        PepIconModule,
+                        PepFieldTitleModule,
+                        PepDialogModule,
+                    ],
+                    exports: [PepImagesFilmstripComponent],
+                    declarations: [PepImagesFilmstripComponent],
+                }]
+        }], ctorParameters: function () { return [{ type: i3.PepIconRegistry }]; } });
+
+/*
+ * Public API Surface of ngx-lib/images-filmstrip
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PepImagesFilmstripComponent, PepImagesFilmstripModule };
+//# sourceMappingURL=pepperi-addons-ngx-lib-images-filmstrip.mjs.map