@pepperi-addons/ngx-lib 0.2.55 → 0.2.58-beta.1

package/form/internal-button.component.d.ts

@@ -26,7 +26,6 @@ export declare class PepInternalButtonComponent implements OnInit, OnChanges, On
     layoutType: PepLayoutType;
     elementClick: EventEmitter<IPepFieldClickEvent>;
     valueChange: EventEmitter<string>;
-    standAlone: boolean;
     createNewReference: boolean;
     referenceButtons: Array<PepButton>;
     constructor(customizationService: PepCustomizationService, renderer: Renderer2, element: ElementRef);

package/image/image.component.d.ts

@@ -34,6 +34,7 @@ export declare class PepImageComponent implements OnChanges, OnInit, OnDestroy {
     form: FormGroup;
     uid: string;
     showTitle: boolean;
+    renderTitle: boolean;
     private _layoutType;
     set layoutType(value: PepLayoutType);
     get layoutType(): PepLayoutType;

package/image/pepperi-addons-ngx-lib-image.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PepImageModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":26,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":28,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":31,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":32,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":33,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":35,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":36,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":37,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/images-filmstrip","name":"PepImagesFilmstripModule","line":38,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/files-uploader","name":"PepFilesUploaderModule","line":39,"character":8}],"exports":[{"__symbolic":"reference","name":"PepImageComponent"}],"declarations":[{"__symbolic":"reference","name":"PepImageComponent"}],"entryComponents":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/images-filmstrip","name":"PepImagesFilmstripComponent","line":43,"character":22}],"providers":[{"__symbolic":"reference","name":"PepImageService"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":47,"character":41}]}]}},"PepImageComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":31,"character":1},"arguments":[{"selector":"pep-image","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":35,"character":21},"member":"OnPush"},"template":"<ng-container [formGroup]=\"form\">\n    <ng-container>\n        <ng-template #readonlyTemplate>\n            <div class=\"img-wrapper\" [ngClass]=\"{\n                'left-alignment': xAlignment == 'left',\n                'right-alignment': xAlignment == 'right',\n                'center-alignment': xAlignment == 'center'\n            }\">\n                <img [id]=\"key\" [style.max-height]=\"fieldHeight\" class=\"pep-report-file\" [alt]=\"label\" [src]=\"src\"\n                    (click)=\"itemImageClick($event)\" (error)=\"errorHandler($event)\" (load)=\"onImageLoad($event)\" />\n            </div>\n        </ng-template>\n\n        <ng-container *ngIf=\"layoutType === 'form'\">\n            <pep-field-title [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\" [xAlignment]=\"xAlignment\"\n                [showTitle]=\"showTitle\">\n            </pep-field-title>\n            <ng-container *ngIf=\"disabled || readonly; then disabledTemplate; else editableTemplate\"></ng-container>\n            <ng-template #disabledTemplate>\n                <div class=\"pep-file body-sm\" [style.height]=\"fieldHeight\" [ngClass]=\"{'one-row': rowSpan == 1}\">\n                    <ng-container *ngTemplateOutlet=\"readonlyTemplate\"></ng-container>\n                </div>\n            </ng-template>\n            <ng-template #editableTemplate>\n                <div class=\"pep-file-container image-container\" [ngClass]=\"{ 'one-row': rowSpan == 1}\">\n                    <pep-files-uploader [id]=\"key\" [key]=\"key\" [fieldHeight]=\"fieldHeight\" [layoutType]=\"layoutType\"\n                        [standAlone]=\"standAlone\" [src]=\"srcLarge || src\" [label]=\"label\" [mandatory]=\"mandatory\"\n                        [disabled]=\"disabled\" [xAlignment]=\"xAlignment\" [rowSpan]=\"rowSpan\" [controlType]=\"controlType\"\n                        [form]=\"form\" [acceptedExtensions]=\"acceptImagesType\" (fileChange)=\"onFileChanged($event)\"\n                        (elementClick)=\"onFileClicked($event)\" [sizeLimitMB]=\"sizeLimitMB\">\n                    </pep-files-uploader>\n                </div>\n            </ng-template>\n        </ng-container>\n\n        <ng-container *ngIf=\"layoutType === 'card'\">\n            <ng-container *ngTemplateOutlet=\"readonlyTemplate\"></ng-container>\n            <!-- <div class=\"img-wrapper\"\n                [ngClass]=\"{\n                    'left-alignment': xAlignment == 'left',\n                    'right-alignment': xAlignment == 'right',\n                    'center-alignment': xAlignment == 'center'\n                }\">\n                <img [id]=\"key\" [style.max-height]=\"fieldHeight\" class=\"pep-report-file\" [alt]=\"label\" [src]=\"src\"\n                    (click)=\"itemImageClick($event)\" (error)=\"errorHandler($event)\" />\n            </div> -->\n        </ng-container>\n\n        <ng-container *ngIf=\"layoutType === 'table'\">\n            <ng-container *ngTemplateOutlet=\"readonlyTemplate\"></ng-container>\n            <!-- <div class=\"img-wrapper\" [ngClass]=\"{\n                    'left-alignment': xAlignment == 'left',\n                    'right-alignment': xAlignment == 'right',\n                    'center-alignment': xAlignment == 'center'\n                }\">\n                <img [id]=\"key\" [style.max-height]=\"fieldHeight\" class=\"pep-report-file pep-report-img\"\n                    [ngClass]=\"['text-align-' + xAlignment]\" [alt]=\"label\" [src]=\"src\" (click)=\"itemImageClick($event)\"\n                    (error)=\"errorHandler($event)\" (load)=\"onImageLoad($event)\" />\n            </div> -->\n        </ng-container>\n    </ng-container>\n\n    <!-- Menu -->\n    <ng-container *ngIf=\"menuField\">\n        <button [id]=\"key\" (click)=\"onMenuClick($event)\" class=\"floating-field pep-button icon-button weak invert\"\n            [ngClass]=\"{\n                bottom: menuField?.Layout?.YAlignment == '2',\n                top: menuField?.Layout?.YAlignment == '1',\n                left: menuField?.Layout?.XAlignment == '1',\n                right: menuField?.Layout?.XAlignment == '2'\n            }\">\n            <mat-icon>\n                <pep-icon name=\"system_menu\"></pep-icon>\n            </mat-icon>\n        </button>\n    </ng-container>\n\n    <!-- Campaign -->\n    <ng-container *ngIf=\"hasCampaignField && hasCampaignField?.FormattedValue\">\n        <span [id]=\"key\" class=\"campaign floating-field\" title=\"{{ hasCampaignField?.FormattedValue }}\" [ngClass]=\"{\n                bottom: hasCampaignField?.Layout?.YAlignment == '2',\n                top: hasCampaignField?.Layout?.YAlignment == '1',\n                left: hasCampaignField?.Layout?.XAlignment == '1',\n                right: hasCampaignField?.Layout?.XAlignment == '2'\n            }\">\n            <mat-icon class=\"has-active-campaign\">\n                <pep-icon name=\"system_bolt\"></pep-icon>\n            </mat-icon>\n        </span>\n    </ng-container>\n\n    <!-- Indicators -->\n    <ng-container *ngIf=\"indicatorsField && indicatorsField?.FormattedValue != ''\">\n        <span [id]=\"key\" class=\"indicators-container floating-field\" [ngClass]=\"{\n                bottom: indicatorsField?.Layout?.YAlignment == '2',\n                top: indicatorsField?.Layout?.YAlignment == '1',\n                left: indicatorsField?.Layout?.XAlignment == '1',\n                right: indicatorsField?.Layout?.XAlignment == '2'\n            }\">\n            <mat-icon>\n                <ng-container *ngFor=\"let value of indicatorsField?.FormattedValue?.split(';')\">\n                    <pep-icon class=\"pull-left flip\" name=\"indicator_dot_placeholder\" [fill]=\"value\"></pep-icon>\n                </ng-container>\n                <ng-container *ngIf=\"indicatorsField?.FormattedValue?.split(';').length < 4\">\n                    <pep-icon class=\"pull-left flip\" name=\"indicator_dot_placeholder\"></pep-icon>\n                </ng-container>\n            </mat-icon>\n        </span>\n    </ng-container>\n</ng-container>","styles":[":host{width:100%;height:inherit;display:grid}:host>*{align-self:center}.img-wrapper{display:flex;align-items:center;height:100%;max-width:100%}.img-wrapper.left-alignment{justify-content:flex-start}.img-wrapper.center-alignment{justify-content:center}.img-wrapper.right-alignment{justify-content:flex-end}.img-wrapper img{max-width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.pep-file-container,.pepperi-file-container{height:100%}.pep-file-container .img-wrapper,.pepperi-file-container .img-wrapper{height:calc(100% - 1.5rem)}.pep-file-container img,.pepperi-file-container img{cursor:pointer}.indicators-container{padding:0!important}.indicators-container mat-icon{height:100%;width:100%;padding:.4rem}.indicators-container mat-icon pep-icon{height:.75rem!important;width:.75rem!important;margin:.05rem}.floating-field{width:2.5rem;height:2.5rem;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);padding:.5rem;cursor:pointer;position:absolute!important}.top{top:0}.bottom{bottom:0}.left{left:0}.right{right:0}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"srcLarge":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"indicatorsField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":5}}]}],"menuField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":5}}]}],"hasCampaignField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"uid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":5}}]}],"sizeLimitMB":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":102,"character":5}}]}],"acceptImagesType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":103,"character":5}}]}],"fileChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":105,"character":5}}]}],"elementClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":108,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"PepImageService"},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":117,"character":38},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepFileService","line":118,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":119,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":120,"character":25},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":121,"character":27}]}],"ngOnInit":[{"__symbolic":"method"}],"setFieldHeight":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"errorHandler":[{"__symbolic":"method"}],"onImageLoad":[{"__symbolic":"method"}],"onMenuClick":[{"__symbolic":"method"}],"onFileChanged":[{"__symbolic":"method"}],"objectIdIsNotEmpty":[{"__symbolic":"method"}],"onFileClicked":[{"__symbolic":"method"}],"itemImageClick":[{"__symbolic":"method"}]},"statics":{"MENU_CLICKED":"[MenuClicked]"}},"PepImageService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":10,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":15,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":16,"character":38},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepFileService","line":17,"character":29}]}],"openImageDialog":[{"__symbolic":"method"}],"openFromURI":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}}},"origins":{"PepImageModule":"./image.module","PepImageComponent":"./image.component","PepImageService":"./image.service"},"importAs":"@pepperi-addons/ngx-lib/image"}
+{"__symbolic":"module","version":4,"metadata":{"PepImageModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":26,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":28,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":31,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":32,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":33,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":35,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":36,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":37,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/images-filmstrip","name":"PepImagesFilmstripModule","line":38,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/files-uploader","name":"PepFilesUploaderModule","line":39,"character":8}],"exports":[{"__symbolic":"reference","name":"PepImageComponent"}],"declarations":[{"__symbolic":"reference","name":"PepImageComponent"}],"entryComponents":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/images-filmstrip","name":"PepImagesFilmstripComponent","line":43,"character":22}],"providers":[{"__symbolic":"reference","name":"PepImageService"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":47,"character":41}]}]}},"PepImageComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":31,"character":1},"arguments":[{"selector":"pep-image","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":35,"character":21},"member":"OnPush"},"template":"<ng-container [formGroup]=\"form\">\n    <ng-container>\n        <ng-template #readonlyTemplate>\n            <div class=\"img-wrapper\" [ngClass]=\"{\n                'left-alignment': xAlignment == 'left',\n                'right-alignment': xAlignment == 'right',\n                'center-alignment': xAlignment == 'center'\n            }\">\n                <img [id]=\"key\" [style.max-height]=\"fieldHeight\" class=\"pep-report-file\" [alt]=\"label\" [src]=\"src\"\n                    (click)=\"itemImageClick($event)\" (error)=\"errorHandler($event)\" (load)=\"onImageLoad($event)\" />\n            </div>\n        </ng-template>\n\n        <ng-container *ngIf=\"layoutType === 'form'\">\n            <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n                [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\n            </pep-field-title>\n            <ng-container *ngIf=\"disabled || readonly; then disabledTemplate; else editableTemplate\"></ng-container>\n            <ng-template #disabledTemplate>\n                <div class=\"pep-file body-sm\" [style.height]=\"fieldHeight\" [ngClass]=\"{'one-row': rowSpan == 1}\">\n                    <ng-container *ngTemplateOutlet=\"readonlyTemplate\"></ng-container>\n                </div>\n            </ng-template>\n            <ng-template #editableTemplate>\n                <div class=\"pep-file-container image-container\" [ngClass]=\"{ 'one-row': rowSpan == 1}\">\n                    <pep-files-uploader [id]=\"key\" [key]=\"key\" [fieldHeight]=\"fieldHeight\" [layoutType]=\"layoutType\"\n                        [standAlone]=\"standAlone\" [src]=\"srcLarge || src\" [label]=\"label\" [mandatory]=\"mandatory\"\n                        [disabled]=\"disabled\" [xAlignment]=\"xAlignment\" [rowSpan]=\"rowSpan\" [controlType]=\"controlType\"\n                        [form]=\"form\" [acceptedExtensions]=\"acceptImagesType\" (fileChange)=\"onFileChanged($event)\"\n                        (elementClick)=\"onFileClicked($event)\" [sizeLimitMB]=\"sizeLimitMB\">\n                    </pep-files-uploader>\n                </div>\n            </ng-template>\n        </ng-container>\n\n        <ng-container *ngIf=\"layoutType === 'card'\">\n            <ng-container *ngTemplateOutlet=\"readonlyTemplate\"></ng-container>\n            <!-- <div class=\"img-wrapper\"\n                [ngClass]=\"{\n                    'left-alignment': xAlignment == 'left',\n                    'right-alignment': xAlignment == 'right',\n                    'center-alignment': xAlignment == 'center'\n                }\">\n                <img [id]=\"key\" [style.max-height]=\"fieldHeight\" class=\"pep-report-file\" [alt]=\"label\" [src]=\"src\"\n                    (click)=\"itemImageClick($event)\" (error)=\"errorHandler($event)\" />\n            </div> -->\n        </ng-container>\n\n        <ng-container *ngIf=\"layoutType === 'table'\">\n            <ng-container *ngTemplateOutlet=\"readonlyTemplate\"></ng-container>\n            <!-- <div class=\"img-wrapper\" [ngClass]=\"{\n                    'left-alignment': xAlignment == 'left',\n                    'right-alignment': xAlignment == 'right',\n                    'center-alignment': xAlignment == 'center'\n                }\">\n                <img [id]=\"key\" [style.max-height]=\"fieldHeight\" class=\"pep-report-file pep-report-img\"\n                    [ngClass]=\"['text-align-' + xAlignment]\" [alt]=\"label\" [src]=\"src\" (click)=\"itemImageClick($event)\"\n                    (error)=\"errorHandler($event)\" (load)=\"onImageLoad($event)\" />\n            </div> -->\n        </ng-container>\n    </ng-container>\n\n    <!-- Menu -->\n    <ng-container *ngIf=\"menuField\">\n        <button [id]=\"key\" (click)=\"onMenuClick($event)\" class=\"floating-field pep-button icon-button weak invert\"\n            [ngClass]=\"{\n                bottom: menuField?.Layout?.YAlignment == '2',\n                top: menuField?.Layout?.YAlignment == '1',\n                left: menuField?.Layout?.XAlignment == '1',\n                right: menuField?.Layout?.XAlignment == '2'\n            }\">\n            <mat-icon>\n                <pep-icon name=\"system_menu\"></pep-icon>\n            </mat-icon>\n        </button>\n    </ng-container>\n\n    <!-- Campaign -->\n    <ng-container *ngIf=\"hasCampaignField && hasCampaignField?.FormattedValue\">\n        <span [id]=\"key\" class=\"campaign floating-field\" title=\"{{ hasCampaignField?.FormattedValue }}\" [ngClass]=\"{\n                bottom: hasCampaignField?.Layout?.YAlignment == '2',\n                top: hasCampaignField?.Layout?.YAlignment == '1',\n                left: hasCampaignField?.Layout?.XAlignment == '1',\n                right: hasCampaignField?.Layout?.XAlignment == '2'\n            }\">\n            <mat-icon class=\"has-active-campaign\">\n                <pep-icon name=\"system_bolt\"></pep-icon>\n            </mat-icon>\n        </span>\n    </ng-container>\n\n    <!-- Indicators -->\n    <ng-container *ngIf=\"indicatorsField && indicatorsField?.FormattedValue != ''\">\n        <span [id]=\"key\" class=\"indicators-container floating-field\" [ngClass]=\"{\n                bottom: indicatorsField?.Layout?.YAlignment == '2',\n                top: indicatorsField?.Layout?.YAlignment == '1',\n                left: indicatorsField?.Layout?.XAlignment == '1',\n                right: indicatorsField?.Layout?.XAlignment == '2'\n            }\">\n            <mat-icon>\n                <ng-container *ngFor=\"let value of indicatorsField?.FormattedValue?.split(';')\">\n                    <pep-icon class=\"pull-left flip\" name=\"indicator_dot_placeholder\" [fill]=\"value\"></pep-icon>\n                </ng-container>\n                <ng-container *ngIf=\"indicatorsField?.FormattedValue?.split(';').length < 4\">\n                    <pep-icon class=\"pull-left flip\" name=\"indicator_dot_placeholder\"></pep-icon>\n                </ng-container>\n            </mat-icon>\n        </span>\n    </ng-container>\n</ng-container>","styles":[":host{width:100%;height:inherit;display:grid}:host>*{align-self:center}.img-wrapper{display:flex;align-items:center;height:100%;max-width:100%}.img-wrapper.left-alignment{justify-content:flex-start}.img-wrapper.center-alignment{justify-content:center}.img-wrapper.right-alignment{justify-content:flex-end}.img-wrapper img{max-width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.pep-file-container,.pepperi-file-container{height:100%}.pep-file-container .img-wrapper,.pepperi-file-container .img-wrapper{height:calc(100% - 1.5rem)}.pep-file-container img,.pepperi-file-container img{cursor:pointer}.indicators-container{padding:0!important}.indicators-container mat-icon{height:100%;width:100%;padding:.4rem}.indicators-container mat-icon pep-icon{height:.75rem!important;width:.75rem!important;margin:.05rem}.floating-field{width:2.5rem;height:2.5rem;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);padding:.5rem;cursor:pointer;position:absolute!important}.top{top:0}.bottom{bottom:0}.left{left:0}.right{right:0}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"srcLarge":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"indicatorsField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":5}}]}],"menuField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":5}}]}],"hasCampaignField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"uid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":102,"character":5}}]}],"sizeLimitMB":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":103,"character":5}}]}],"acceptImagesType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":5}}]}],"fileChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":106,"character":5}}]}],"elementClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":109,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"PepImageService"},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":118,"character":38},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepFileService","line":119,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":120,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":121,"character":25},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":122,"character":27}]}],"ngOnInit":[{"__symbolic":"method"}],"setFieldHeight":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"errorHandler":[{"__symbolic":"method"}],"onImageLoad":[{"__symbolic":"method"}],"onMenuClick":[{"__symbolic":"method"}],"onFileChanged":[{"__symbolic":"method"}],"objectIdIsNotEmpty":[{"__symbolic":"method"}],"onFileClicked":[{"__symbolic":"method"}],"itemImageClick":[{"__symbolic":"method"}]},"statics":{"MENU_CLICKED":"[MenuClicked]"}},"PepImageService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":10,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":15,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":16,"character":38},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepFileService","line":17,"character":29}]}],"openImageDialog":[{"__symbolic":"method"}],"openFromURI":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}}},"origins":{"PepImageModule":"./image.module","PepImageComponent":"./image.component","PepImageService":"./image.service"},"importAs":"@pepperi-addons/ngx-lib/image"}

package/images-filmstrip/images-filmstrip.component.d.ts

@@ -38,6 +38,7 @@ export declare class PepImagesFilmstripComponent implements OnInit, OnChanges, A
     form: FormGroup;
     uid: string;
     showTitle: boolean;
+    renderTitle: boolean;
     private _layoutType;
     set layoutType(value: PepLayoutType);
     get layoutType(): PepLayoutType;

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

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PepImagesFilmstripModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":26,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":28,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":31,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":32,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":33,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":34,"character":8},{"__symbolic":"reference","module":"ng-gallery","name":"GalleryModule","line":36,"character":8},{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"ImageViewerModule","line":37,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":56,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":57,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":58,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogModule","line":59,"character":8}],"exports":[{"__symbolic":"reference","name":"PepImagesFilmstripComponent"}],"declarations":[{"__symbolic":"reference","name":"PepImagesFilmstripComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":65,"character":41}]}]}},"createViewerConfig":{"__symbolic":"function","parameters":["translate"],"value":{"bgStyle":"#FFF","loadingMessage":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"translate"},"member":"instant"},"arguments":["MESSAGES.INFO_LOADING_FILE"]},"nextPageButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":106,"character":24},"arguments":["navigate_next","Next page",0,false]},"beforePageButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":112,"character":26},"arguments":["navigate_before","Previous page",1,false]},"zoomOutButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":118,"character":23},"arguments":["zoom_out","Zoom out",0,false]},"zoomInButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":119,"character":22},"arguments":["zoom_in","Zoom in",1,false]},"rotateLeftButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":120,"character":26},"arguments":["rotate_left","Rotate left",2,false]},"rotateRightButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":126,"character":27},"arguments":["rotate_right","Rotate right",3,false]},"resetButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":132,"character":21},"arguments":["autorenew","Reset",4,false]}}},"PepImagesFilmstripComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":136,"character":1},"arguments":[{"selector":"pep-images-filmstrip","providers":[{"provide":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"IMAGEVIEWER_CONFIG","line":143,"character":21},"useFactory":{"__symbolic":"reference","name":"createViewerConfig"},"deps":[{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":146,"character":19}]}],"template":"<ng-container *ngIf=\"inDialog; then galleryDialogTemplate; else regularTemplate\"></ng-container>\n<ng-template #regularTemplate>\n    <ng-container [formGroup]=\"form\">\n        <div class=\"images-filmstrip-container\">\n            <pep-field-title [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                <gallery id=\"{{key}}-{{uid}}-gallery\" (itemClick)=\"enlargeImage($event);\" [imageSize]=\"'contain'\"\n                    (indexChange)=\"indexChange($event)\" (error)=\"onError($event)\">\n                </gallery>\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #galleryDialogTemplate>\n    <div class=\"gallery-dialog\">\n        <pep-dialog [title]=\"label\" [showFooter]=\"false\">\n            <div pep-dialog-content #galleryDialogCont class=\"gallery-dialog-content\"\n                [ngClass]=\"isVertical ? 'vertical-gallery' : 'horizontal-gallery'\">\n                <gallery id=\"{{key}}-{{uid}}-dlgGallery\" [imageSize]=\"'contain'\" (indexChange)=\"indexChange($event)\"\n                    (error)=\"onError($event)\">\n                </gallery>\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,.images-filmstrip-container .img-wrapper,gallery{height:100%}gallery{direction:ltr;min-height:100%}.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 .g-nav-next,::ng-deep .g-nav-prev{width:2rem!important;height:2rem!important;padding:.25rem;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem)}::ng-deep .g-nav-next .mat-icon,::ng-deep .g-nav-prev .mat-icon{display:inline-block!important}::ng-deep .g-nav-prev{transform:translateY(-50%) perspective(1px) scaleX(-1)!important}.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)}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":153,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":154,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":155,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":156,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":159,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":170,"character":5}}]}],"uid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":171,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":172,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":175,"character":5}}]}],"currIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":184,"character":5}}]}],"showThumbnails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":185,"character":5}}]}],"galleryCont":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":187,"character":5},"arguments":["galleryCont"]}]}],"galleryDialogTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":188,"character":5},"arguments":["galleryDialogTemplate",{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":188,"character":48}}]}]}],"galleryDialogCont":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":190,"character":5},"arguments":["galleryDialogCont"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":217,"character":9}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":219,"character":9}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":220,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MAT_DIALOG_DATA","line":220,"character":16}]}]],"parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":209,"character":38},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":210,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":211,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepFileService","line":212,"character":29},{"__symbolic":"reference","module":"ng-gallery","name":"Gallery","line":213,"character":25},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":214,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":215,"character":25},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":216,"character":20},{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material/dialog","arguments":[{"__symbolic":"reference","name":"PepImagesFilmstripComponent"}]},{"__symbolic":"reference","name":"any"}]}],"setFieldHeight":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"initGalleryStyle":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}],"enlargeImage":[{"__symbolic":"method"}],"afterDialogOpened":[{"__symbolic":"method"}],"setThumbnailDimension":[{"__symbolic":"method"}],"indexChange":[{"__symbolic":"method"}]}}},"origins":{"PepImagesFilmstripModule":"./images-filmstrip.module","createViewerConfig":"./images-filmstrip.component","PepImagesFilmstripComponent":"./images-filmstrip.component"},"importAs":"@pepperi-addons/ngx-lib/images-filmstrip"}
+{"__symbolic":"module","version":4,"metadata":{"PepImagesFilmstripModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":26,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":28,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":31,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":32,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":33,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":34,"character":8},{"__symbolic":"reference","module":"ng-gallery","name":"GalleryModule","line":36,"character":8},{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"ImageViewerModule","line":37,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":56,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":57,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":58,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogModule","line":59,"character":8}],"exports":[{"__symbolic":"reference","name":"PepImagesFilmstripComponent"}],"declarations":[{"__symbolic":"reference","name":"PepImagesFilmstripComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":65,"character":41}]}]}},"createViewerConfig":{"__symbolic":"function","parameters":["translate"],"value":{"bgStyle":"#FFF","loadingMessage":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"translate"},"member":"instant"},"arguments":["MESSAGES.INFO_LOADING_FILE"]},"nextPageButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":106,"character":24},"arguments":["navigate_next","Next page",0,false]},"beforePageButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":112,"character":26},"arguments":["navigate_before","Previous page",1,false]},"zoomOutButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":118,"character":23},"arguments":["zoom_out","Zoom out",0,false]},"zoomInButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":119,"character":22},"arguments":["zoom_in","Zoom in",1,false]},"rotateLeftButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":120,"character":26},"arguments":["rotate_left","Rotate left",2,false]},"rotateRightButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":126,"character":27},"arguments":["rotate_right","Rotate right",3,false]},"resetButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":132,"character":21},"arguments":["autorenew","Reset",4,false]}}},"PepImagesFilmstripComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":136,"character":1},"arguments":[{"selector":"pep-images-filmstrip","providers":[{"provide":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"IMAGEVIEWER_CONFIG","line":143,"character":21},"useFactory":{"__symbolic":"reference","name":"createViewerConfig"},"deps":[{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":146,"character":19}]}],"template":"<ng-container *ngIf=\"inDialog; then galleryDialogTemplate; else regularTemplate\"></ng-container>\n<ng-template #regularTemplate>\n    <ng-container [formGroup]=\"form\">\n        <div class=\"images-filmstrip-container\">\n            <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\n            </pep-field-title>\n            <div #galleryCont class=\"img-wrapper\" [ngClass]=\"isVertical ? 'vertical-gallery' : 'horizontal-gallery'\"\n                [style.height]=\"fieldHeight\">\n                <gallery id=\"{{key}}-{{uid}}-gallery\" (itemClick)=\"enlargeImage($event);\" [imageSize]=\"'contain'\"\n                    (indexChange)=\"indexChange($event)\" (error)=\"onError($event)\">\n                </gallery>\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #galleryDialogTemplate>\n    <div class=\"gallery-dialog\">\n        <pep-dialog [title]=\"label\" [showFooter]=\"false\">\n            <div pep-dialog-content #galleryDialogCont class=\"gallery-dialog-content\"\n                [ngClass]=\"isVertical ? 'vertical-gallery' : 'horizontal-gallery'\">\n                <gallery id=\"{{key}}-{{uid}}-dlgGallery\" [imageSize]=\"'contain'\" (indexChange)=\"indexChange($event)\"\n                    (error)=\"onError($event)\">\n                </gallery>\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,.images-filmstrip-container .img-wrapper,gallery{height:100%}gallery{direction:ltr;min-height:100%}.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 .g-nav-next,::ng-deep .g-nav-prev{width:2rem!important;height:2rem!important;padding:.25rem;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem)}::ng-deep .g-nav-next .mat-icon,::ng-deep .g-nav-prev .mat-icon{display:inline-block!important}::ng-deep .g-nav-prev{transform:translateY(-50%) perspective(1px) scaleX(-1)!important}.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)}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":153,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":154,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":155,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":156,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":159,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":170,"character":5}}]}],"uid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":171,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":172,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":173,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":176,"character":5}}]}],"currIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":185,"character":5}}]}],"showThumbnails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":186,"character":5}}]}],"galleryCont":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":188,"character":5},"arguments":["galleryCont"]}]}],"galleryDialogTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":189,"character":5},"arguments":["galleryDialogTemplate",{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":189,"character":48}}]}]}],"galleryDialogCont":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":191,"character":5},"arguments":["galleryDialogCont"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":218,"character":9}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":220,"character":9}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":221,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MAT_DIALOG_DATA","line":221,"character":16}]}]],"parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":210,"character":38},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":211,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":212,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepFileService","line":213,"character":29},{"__symbolic":"reference","module":"ng-gallery","name":"Gallery","line":214,"character":25},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":215,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":216,"character":25},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":217,"character":20},{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material/dialog","arguments":[{"__symbolic":"reference","name":"PepImagesFilmstripComponent"}]},{"__symbolic":"reference","name":"any"}]}],"setFieldHeight":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"initGalleryStyle":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}],"enlargeImage":[{"__symbolic":"method"}],"afterDialogOpened":[{"__symbolic":"method"}],"setThumbnailDimension":[{"__symbolic":"method"}],"indexChange":[{"__symbolic":"method"}]}}},"origins":{"PepImagesFilmstripModule":"./images-filmstrip.module","createViewerConfig":"./images-filmstrip.component","PepImagesFilmstripComponent":"./images-filmstrip.component"},"importAs":"@pepperi-addons/ngx-lib/images-filmstrip"}

package/list/list-total.component.d.ts

@@ -1,5 +1,7 @@
+import { PepSizeType } from '@pepperi-addons/ngx-lib';
 export declare class PepListTotalComponent {
     totalRows: number;
     totalAmount: number;
     isMapView: boolean;
+    sizeType: PepSizeType;
 }