@pepperi-addons/ngx-lib 0.4.0-angular14.2 → 0.4.0-angular14.3

package/esm2020/images-filmstrip/images-filmstrip.component.mjs

@@ -357,8 +357,8 @@ export class PepImagesFilmstripComponent {
         // }
     }
 }
-PepImagesFilmstripComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", 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.1", 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: [
+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,
@@ -366,7 +366,7 @@ PepImagesFilmstripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
     //     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.1", ngImport: i0, type: PepImagesFilmstripComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepImagesFilmstripComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-images-filmstrip', providers: [
                     // {

package/esm2020/images-filmstrip/images-filmstrip.module.mjs

@@ -26,8 +26,8 @@ export class PepImagesFilmstripModule {
         ]);
     }
 }
-PepImagesFilmstripModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepImagesFilmstripModule, deps: [{ token: i1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
-PepImagesFilmstripModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: PepImagesFilmstripModule, declarations: [PepImagesFilmstripComponent], imports: [CommonModule,
+PepImagesFilmstripModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepImagesFilmstripModule, deps: [{ token: i1.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,
@@ -60,7 +60,7 @@ PepImagesFilmstripModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0"
         PepIconModule,
         PepFieldTitleModule,
         PepDialogModule], exports: [PepImagesFilmstripComponent] });
-PepImagesFilmstripModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepImagesFilmstripModule, imports: [CommonModule,
+PepImagesFilmstripModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepImagesFilmstripModule, imports: [CommonModule,
         ReactiveFormsModule,
         // Material modules,
         MatCommonModule,
@@ -93,7 +93,7 @@ PepImagesFilmstripModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0"
         PepIconModule,
         PepFieldTitleModule,
         PepDialogModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepImagesFilmstripModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepImagesFilmstripModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2020/link/link.component.mjs

@@ -279,9 +279,9 @@ export class PepLinkComponent {
         }, 0);
     }
 }
-PepLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepLinkComponent, deps: [{ token: i1.FormBuilder }, { token: i2.PepCustomizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i3.TranslateService }, { token: i2.PepUtilitiesService }, { token: i4.IsUrlPipe }], target: i0.ɵɵFactoryTarget.Component });
-PepLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: PepLinkComponent, selector: "pep-link", inputs: { key: "key", value: "value", formattedValue: "formattedValue", label: "label", placeholder: "placeholder", mandatory: "mandatory", disabled: "disabled", readonly: "readonly", maxFieldCharacters: "maxFieldCharacters", textColor: "textColor", xAlignment: "xAlignment", rowSpan: "rowSpan", visible: "visible", form: "form", isActive: "isActive", showTitle: "showTitle", renderTitle: "renderTitle", renderError: "renderError", renderSymbol: "renderSymbol", layoutType: "layoutType" }, outputs: { valueChange: "valueChange", formValidationChange: "formValidationChange", elementClick: "elementClick" }, host: { properties: { "attr.data-qa": "this.dataQa" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\" let-hasParent=\"hasParent\">\n        <pep-field-title *ngIf=\"renderTitle && isFormView && !hasParent\" [label]=\"label\" [mandatory]=\"mandatory\"\n            [disabled]=\"disabled\" [maxFieldCharacters]=\"maxFieldCharacters\" [xAlignment]=\"xAlignment\"\n            [showTitle]=\"showTitle\" [inputLength]=\"value.length\">\n        </pep-field-title>\n        <mat-form-field appearance=\"outline\">\n            <input #input pepTextboxValidation [id]=\"key\" [name]=\"key\" class=\" body-sm \" matInput autocomplete=\"off\"\n                maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n                [placeholder]=\"hasParent && !disabled ? placeholder : ''\"\n                [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\n                title=\"{{ formattedValue }}\" [formControlName]=\"key\" [type]=\"type\" [value]=\"displayValue\"\n                (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\"\n                (change)=\"onChange($event)\" [ngClass]=\"{'disable-hidden': disabled && formattedValue?.length > 0}\" />\n\n            <span *ngIf=\"disabled && formattedValue?.length > 0\" class=\"dis-grid\">\n                <a href=\"javascript:void(0)\" (click)=\"anchorClicked()\" [id]=\"key\" [name]=\"key\"\n                    class=\"color-link body-sm \">\n                    {{formattedValue}}</a>\n            </span>\n            <mat-error *ngIf=\"renderError\">\n                <ng-container *ngIf=\"mandatory && input.value.length == 0 then requiredError else otherError\">\n                </ng-container>\n                <ng-template #requiredError>\n                    <span class=\"body-xs\" [title]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\"\n                        [innerText]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\">\n                    </span>\n                </ng-template>\n                <ng-template #otherError>\n                    <!-- TODO: Show error if it's not a valid link -->\n                    <!-- <span class=\"body-xs\" [title]=\"(input.value | pepToNumber) > this.maxValue || (input.value | pepToNumber) < this.minValue ?\n                            ('MESSAGES.ERROR_RANGE_IS_NOT_VALID' | translate: { min: minValue, max: maxValue }) :\n                            ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\" [innerText]=\"(input.value | pepToNumber) > this.maxValue || (input.value | pepToNumber) < this.minValue ?\n                            ('MESSAGES.ERROR_RANGE_IS_NOT_VALID' | translate: { min: minValue, max: maxValue }) :\n                            ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\">\n                    </span> -->\n                </ng-template>\n            </mat-error>\n\n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && xAlignment == 'right'\" matPrefix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\n            </pep-textbox-icon>\n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && (xAlignment == 'left')\" matSuffix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\n            </pep-textbox-icon>\n        </mat-form-field>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: false }\">\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <div [ngClass]=\"{'one-row': rowSpan === 1}\">\n                <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n                </ng-container>\n            </div>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-card-input card-flex-container\" [ngStyle]=\"{ color: textColor }\"\n                [class]=\"'text-align-' + xAlignment\" [ngClass]=\"{'one-row': rowSpan === 1,\n                            'multi-rows': rowSpan > 1,\n                            'pep-button weak': isActive && !disabled}\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\">\n                <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ formattedValue }}\" class=\"body-sm value\"\n                    [ngClass]=\"{'multi-rows-text': rowSpan > 1}\" [ngStyle]=\"{ '-webkit-line-clamp': rowSpan }\">{{\n                    formattedValue }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <a *ngIf=\"formattedValue != null && (value ? value : formattedValue) | isUrl\" [id]=\"key\"\n                    class=\"color-link body-sm pep-report-input\"\n                    [ngClass]=\"{'disable': (disabled && value === '')}\" title=\"{{ formattedValue }}\"\n                    target=\"_blank\" href=\"{{ value ? value : formattedValue }}\" (click)=\"onClick()\">{{\n                    formattedValue }}</a>\n                <a *ngIf=\"formattedValue != null && !((value ? value : formattedValue) | isUrl)\" [id]=\"key\"\n                    class=\"color-link body-sm pep-report-input\"\n                    [ngClass]=\"{'disable': (disabled && value === '')}\" title=\"{{ formattedValue }}\"\n                    href=\"javascript:void(0)\" (click)=\"onClick()\">{{\n                    formattedValue }}</a>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span [id]=\"key\">&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n\n</ng-container>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center;align-items:baseline}.disable-hidden{display:none}.dis-grid{display:grid}.multi-rows-text{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal!important}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i7.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i11.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength"] }, { kind: "component", type: i12.PepTextboxIconComponent, selector: "pep-textbox-icon", inputs: ["value", "label", "type", "disabled"], outputs: ["iconClick"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: i4.IsUrlPipe, name: "isUrl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepLinkComponent, decorators: [{
+PepLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLinkComponent, deps: [{ token: i1.FormBuilder }, { token: i2.PepCustomizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i3.TranslateService }, { token: i2.PepUtilitiesService }, { token: i4.IsUrlPipe }], target: i0.ɵɵFactoryTarget.Component });
+PepLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepLinkComponent, selector: "pep-link", inputs: { key: "key", value: "value", formattedValue: "formattedValue", label: "label", placeholder: "placeholder", mandatory: "mandatory", disabled: "disabled", readonly: "readonly", maxFieldCharacters: "maxFieldCharacters", textColor: "textColor", xAlignment: "xAlignment", rowSpan: "rowSpan", visible: "visible", form: "form", isActive: "isActive", showTitle: "showTitle", renderTitle: "renderTitle", renderError: "renderError", renderSymbol: "renderSymbol", layoutType: "layoutType" }, outputs: { valueChange: "valueChange", formValidationChange: "formValidationChange", elementClick: "elementClick" }, host: { properties: { "attr.data-qa": "this.dataQa" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\" let-hasParent=\"hasParent\">\n        <pep-field-title *ngIf=\"renderTitle && isFormView && !hasParent\" [label]=\"label\" [mandatory]=\"mandatory\"\n            [disabled]=\"disabled\" [maxFieldCharacters]=\"maxFieldCharacters\" [xAlignment]=\"xAlignment\"\n            [showTitle]=\"showTitle\" [inputLength]=\"value.length\">\n        </pep-field-title>\n        <mat-form-field appearance=\"outline\">\n            <input #input pepTextboxValidation [id]=\"key\" [name]=\"key\" class=\" body-sm \" matInput autocomplete=\"off\"\n                maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n                [placeholder]=\"hasParent && !disabled ? placeholder : ''\"\n                [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\n                title=\"{{ formattedValue }}\" [formControlName]=\"key\" [type]=\"type\" [value]=\"displayValue\"\n                (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\"\n                (change)=\"onChange($event)\" [ngClass]=\"{'disable-hidden': disabled && formattedValue?.length > 0}\" />\n\n            <span *ngIf=\"disabled && formattedValue?.length > 0\" class=\"dis-grid\">\n                <a href=\"javascript:void(0)\" (click)=\"anchorClicked()\" [id]=\"key\" [name]=\"key\"\n                    class=\"color-link body-sm \">\n                    {{formattedValue}}</a>\n            </span>\n            <mat-error *ngIf=\"renderError\">\n                <ng-container *ngIf=\"mandatory && input.value.length == 0 then requiredError else otherError\">\n                </ng-container>\n                <ng-template #requiredError>\n                    <span class=\"body-xs\" [title]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\"\n                        [innerText]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\">\n                    </span>\n                </ng-template>\n                <ng-template #otherError>\n                    <!-- TODO: Show error if it's not a valid link -->\n                    <!-- <span class=\"body-xs\" [title]=\"(input.value | pepToNumber) > this.maxValue || (input.value | pepToNumber) < this.minValue ?\n                            ('MESSAGES.ERROR_RANGE_IS_NOT_VALID' | translate: { min: minValue, max: maxValue }) :\n                            ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\" [innerText]=\"(input.value | pepToNumber) > this.maxValue || (input.value | pepToNumber) < this.minValue ?\n                            ('MESSAGES.ERROR_RANGE_IS_NOT_VALID' | translate: { min: minValue, max: maxValue }) :\n                            ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\">\n                    </span> -->\n                </ng-template>\n            </mat-error>\n\n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && xAlignment == 'right'\" matPrefix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\n            </pep-textbox-icon>\n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && (xAlignment == 'left')\" matSuffix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\n            </pep-textbox-icon>\n        </mat-form-field>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: false }\">\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <div [ngClass]=\"{'one-row': rowSpan === 1}\">\n                <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n                </ng-container>\n            </div>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-card-input card-flex-container\" [ngStyle]=\"{ color: textColor }\"\n                [class]=\"'text-align-' + xAlignment\" [ngClass]=\"{'one-row': rowSpan === 1,\n                            'multi-rows': rowSpan > 1,\n                            'pep-button weak': isActive && !disabled}\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\">\n                <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ formattedValue }}\" class=\"body-sm value\"\n                    [ngClass]=\"{'multi-rows-text': rowSpan > 1}\" [ngStyle]=\"{ '-webkit-line-clamp': rowSpan }\">{{\n                    formattedValue }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <a *ngIf=\"formattedValue != null && (value ? value : formattedValue) | isUrl\" [id]=\"key\"\n                    class=\"color-link body-sm pep-report-input\"\n                    [ngClass]=\"{'disable': (disabled && value === '')}\" title=\"{{ formattedValue }}\"\n                    target=\"_blank\" href=\"{{ value ? value : formattedValue }}\" (click)=\"onClick()\">{{\n                    formattedValue }}</a>\n                <a *ngIf=\"formattedValue != null && !((value ? value : formattedValue) | isUrl)\" [id]=\"key\"\n                    class=\"color-link body-sm pep-report-input\"\n                    [ngClass]=\"{'disable': (disabled && value === '')}\" title=\"{{ formattedValue }}\"\n                    href=\"javascript:void(0)\" (click)=\"onClick()\">{{\n                    formattedValue }}</a>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span [id]=\"key\">&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n\n</ng-container>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center;align-items:baseline}.disable-hidden{display:none}.dis-grid{display:grid}.multi-rows-text{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal!important}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i7.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i11.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength"] }, { kind: "component", type: i12.PepTextboxIconComponent, selector: "pep-textbox-icon", inputs: ["value", "label", "type", "disabled"], outputs: ["iconClick"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: i4.IsUrlPipe, name: "isUrl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-link', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\" let-hasParent=\"hasParent\">\n        <pep-field-title *ngIf=\"renderTitle && isFormView && !hasParent\" [label]=\"label\" [mandatory]=\"mandatory\"\n            [disabled]=\"disabled\" [maxFieldCharacters]=\"maxFieldCharacters\" [xAlignment]=\"xAlignment\"\n            [showTitle]=\"showTitle\" [inputLength]=\"value.length\">\n        </pep-field-title>\n        <mat-form-field appearance=\"outline\">\n            <input #input pepTextboxValidation [id]=\"key\" [name]=\"key\" class=\" body-sm \" matInput autocomplete=\"off\"\n                maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n                [placeholder]=\"hasParent && !disabled ? placeholder : ''\"\n                [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\n                title=\"{{ formattedValue }}\" [formControlName]=\"key\" [type]=\"type\" [value]=\"displayValue\"\n                (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\"\n                (change)=\"onChange($event)\" [ngClass]=\"{'disable-hidden': disabled && formattedValue?.length > 0}\" />\n\n            <span *ngIf=\"disabled && formattedValue?.length > 0\" class=\"dis-grid\">\n                <a href=\"javascript:void(0)\" (click)=\"anchorClicked()\" [id]=\"key\" [name]=\"key\"\n                    class=\"color-link body-sm \">\n                    {{formattedValue}}</a>\n            </span>\n            <mat-error *ngIf=\"renderError\">\n                <ng-container *ngIf=\"mandatory && input.value.length == 0 then requiredError else otherError\">\n                </ng-container>\n                <ng-template #requiredError>\n                    <span class=\"body-xs\" [title]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\"\n                        [innerText]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\">\n                    </span>\n                </ng-template>\n                <ng-template #otherError>\n                    <!-- TODO: Show error if it's not a valid link -->\n                    <!-- <span class=\"body-xs\" [title]=\"(input.value | pepToNumber) > this.maxValue || (input.value | pepToNumber) < this.minValue ?\n                            ('MESSAGES.ERROR_RANGE_IS_NOT_VALID' | translate: { min: minValue, max: maxValue }) :\n                            ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\" [innerText]=\"(input.value | pepToNumber) > this.maxValue || (input.value | pepToNumber) < this.minValue ?\n                            ('MESSAGES.ERROR_RANGE_IS_NOT_VALID' | translate: { min: minValue, max: maxValue }) :\n                            ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\">\n                    </span> -->\n                </ng-template>\n            </mat-error>\n\n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && xAlignment == 'right'\" matPrefix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\n            </pep-textbox-icon>\n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && (xAlignment == 'left')\" matSuffix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\n            </pep-textbox-icon>\n        </mat-form-field>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: false }\">\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <div [ngClass]=\"{'one-row': rowSpan === 1}\">\n                <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n                </ng-container>\n            </div>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-card-input card-flex-container\" [ngStyle]=\"{ color: textColor }\"\n                [class]=\"'text-align-' + xAlignment\" [ngClass]=\"{'one-row': rowSpan === 1,\n                            'multi-rows': rowSpan > 1,\n                            'pep-button weak': isActive && !disabled}\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\">\n                <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ formattedValue }}\" class=\"body-sm value\"\n                    [ngClass]=\"{'multi-rows-text': rowSpan > 1}\" [ngStyle]=\"{ '-webkit-line-clamp': rowSpan }\">{{\n                    formattedValue }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <a *ngIf=\"formattedValue != null && (value ? value : formattedValue) | isUrl\" [id]=\"key\"\n                    class=\"color-link body-sm pep-report-input\"\n                    [ngClass]=\"{'disable': (disabled && value === '')}\" title=\"{{ formattedValue }}\"\n                    target=\"_blank\" href=\"{{ value ? value : formattedValue }}\" (click)=\"onClick()\">{{\n                    formattedValue }}</a>\n                <a *ngIf=\"formattedValue != null && !((value ? value : formattedValue) | isUrl)\" [id]=\"key\"\n                    class=\"color-link body-sm pep-report-input\"\n                    [ngClass]=\"{'disable': (disabled && value === '')}\" title=\"{{ formattedValue }}\"\n                    href=\"javascript:void(0)\" (click)=\"onClick()\">{{\n                    formattedValue }}</a>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span [id]=\"key\">&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n\n</ng-container>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center;align-items:baseline}.disable-hidden{display:none}.dis-grid{display:grid}.multi-rows-text{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: i2.PepCustomizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i3.TranslateService }, { type: i2.PepUtilitiesService }, { type: i4.IsUrlPipe }]; }, propDecorators: { dataQa: [{

package/esm2020/link/link.module.mjs

@@ -21,8 +21,8 @@ export class PepLinkModule {
         this.pepIconRegistry.registerIcons([pepIconSystemEdit]);
     }
 }
-PepLinkModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepLinkModule, deps: [{ token: i1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
-PepLinkModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: PepLinkModule, declarations: [PepLinkComponent,
+PepLinkModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLinkModule, deps: [{ token: i1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
+PepLinkModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepLinkModule, declarations: [PepLinkComponent,
         //   PepTextboxValidationDirective,
         IsUrlPipe], imports: [CommonModule,
         ReactiveFormsModule,
@@ -37,7 +37,7 @@ PepLinkModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         PepIconModule,
         PepFieldTitleModule,
         PepTextboxIconModule], exports: [PepLinkComponent] });
-PepLinkModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepLinkModule, providers: [IsUrlPipe], imports: [CommonModule,
+PepLinkModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLinkModule, providers: [IsUrlPipe], imports: [CommonModule,
         ReactiveFormsModule,
         // Material modules,
         MatCommonModule,
@@ -50,7 +50,7 @@ PepLinkModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         PepIconModule,
         PepFieldTitleModule,
         PepTextboxIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepLinkModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLinkModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2020/link/link.pipes.mjs

@@ -7,9 +7,9 @@ export class IsUrlPipe {
         return regex.test(value);
     }
 }
-IsUrlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: IsUrlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-IsUrlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: IsUrlPipe, name: "isUrl" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: IsUrlPipe, decorators: [{
+IsUrlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: IsUrlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+IsUrlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: IsUrlPipe, name: "isUrl" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: IsUrlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'isUrl'

package/esm2020/list/list-actions.component.mjs

@@ -18,10 +18,10 @@ export class PepListActionsComponent {
         this.stateChange.emit(menuStateChangeEvent);
     }
 }
-PepListActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepListActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepListActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: PepListActionsComponent, selector: "pep-list-actions", inputs: { actions: "actions", sizeType: "sizeType", xPosition: "xPosition", hidden: "hidden" }, outputs: { actionClick: "actionClick", stateChange: "stateChange", menuClick: "menuClick" }, ngImport: i0, template: "<pep-menu [xPosition]=\"xPosition\" [styleType]=\"'strong'\" [sizeType]=\"sizeType\" [items]=\"!hidden ? actions : null\"\n    [hideOnEmptyItems]=\"true\" [iconName]=\"'system_edit'\" (menuItemClick)=\"onActionClicked($event)\"\n    (stateChange)=\"onStateChanged($event)\" (menuClick)=\"menuClick.emit();\">\n</pep-menu>\n", styles: [""], dependencies: [{ kind: "component", type: i1.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }] });
-PepListActionsComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepListActionsComponent });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepListActionsComponent, decorators: [{
+PepListActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PepListActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListActionsComponent, selector: "pep-list-actions", inputs: { actions: "actions", sizeType: "sizeType", xPosition: "xPosition", hidden: "hidden" }, outputs: { actionClick: "actionClick", stateChange: "stateChange", menuClick: "menuClick" }, ngImport: i0, template: "<pep-menu [xPosition]=\"xPosition\" [styleType]=\"'strong'\" [sizeType]=\"sizeType\" [items]=\"!hidden ? actions : null\"\n    [hideOnEmptyItems]=\"true\" [iconName]=\"'system_edit'\" (menuItemClick)=\"onActionClicked($event)\"\n    (stateChange)=\"onStateChanged($event)\" (menuClick)=\"menuClick.emit();\">\n</pep-menu>\n", styles: [""], dependencies: [{ kind: "component", type: i1.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }] });
+PepListActionsComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListActionsComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-list-actions', template: "<pep-menu [xPosition]=\"xPosition\" [styleType]=\"'strong'\" [sizeType]=\"sizeType\" [items]=\"!hidden ? actions : null\"\n    [hideOnEmptyItems]=\"true\" [iconName]=\"'system_edit'\" (menuItemClick)=\"onActionClicked($event)\"\n    (stateChange)=\"onStateChanged($event)\" (menuClick)=\"menuClick.emit();\">\n</pep-menu>\n" }]
         }, {

package/esm2020/list/list-carousel.component.mjs

@@ -76,10 +76,10 @@ export class PepListCarouselComponent {
         this.nextDisabled = event;
     }
 }
-PepListCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepListCarouselComponent, deps: [{ token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
-PepListCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: PepListCarouselComponent, selector: "pep-list-carousel", inputs: { duration: "duration", layout: "layout", itemsToMove: "itemsToMove", lockItemInnerEvents: "lockItemInnerEvents", hideArrowsInSmallScreen: "hideArrowsInSmallScreen", items: "items", itemSize: "itemSize" }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, read: PepCarouselComponent }], ngImport: i0, template: "<div class=\"carousel-container\">\n    <ng-container *ngIf=\"items?.length > 0; then carouselBlock; else emptyBlock\"></ng-container>\n    <ng-template #emptyBlock>\n        <!-- No items -->\n    </ng-template>\n    <ng-template #carouselBlock>\n        <pep-button *ngIf=\"!(hideArrowsInSmallScreen && screenSize > PepScreenSizeType.SM)\"\n            [iconName]=\"'arrow_left_alt'\" [styleType]=\"'regular'\" [disabled]=\"prevDisabled\" (click)=\"moveLeft()\"\n            class=\"carousel-arrow start-arrow\">\n        </pep-button>\n        <pep-carousel #carousel [xWheelEnabled]=\"false\" [snapDuration]=\"duration\"\n            (reachesLeftBound)=\"onReachesLeftBound($event)\" (reachesRightBound)=\"onReachesRightBound($event)\">\n            <ng-container *ngFor=\"let item of items\">\n                <pep-form pepCarouselItem [layout]=\"layout\" [data]=\"item\" [layoutType]=\"'card'\"\n                    (click)=\"itemClicked(item)\" class=\"card-view \" [lockEvents]=\"lockItemInnerEvents\"\n                    [ngClass]=\"{ 'x-small-card': itemSize === 'xs', 'small-card': itemSize === 'sm'}\">\n                </pep-form>\n            </ng-container>\n        </pep-carousel>\n        <pep-button *ngIf=\"!(hideArrowsInSmallScreen && screenSize > PepScreenSizeType.SM)\"\n            [iconName]=\"'arrow_right_alt'\" [styleType]=\"'regular'\" [disabled]=\"nextDisabled\" (click)=\"moveRight()\"\n            class=\"carousel-arrow end-arrow\">\n        </pep-button>\n    </ng-template>\n</div>", styles: [".carousel-container{position:relative;margin:0 calc(var(--pep-spacing-sm, .5rem) * -1);display:grid}.carousel-container .carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1}.carousel-container .carousel-arrow.start-arrow{left:0}.carousel-container .carousel-arrow.end-arrow{right:0}.carousel-container ::ng-deep .carousel-content .card-view{padding:var(--pep-spacing-sm, .5rem) 0!important}.carousel-container ::ng-deep .carousel-content .card-view:first-child{padding-inline-start:var(--pep-spacing-sm, .5rem)!important}.carousel-container ::ng-deep .carousel-content .card-view:last-child{padding-inline-end:var(--pep-spacing-sm, .5rem)!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i4.PepCarouselComponent, selector: "pep-carousel", inputs: ["scrollbarHidden", "disabled", "xDisabled", "yDisabled", "xWheelEnabled", "dragDisabled", "snapDisabled", "snapOffset", "snapDuration"], outputs: ["dsInitialized", "indexChanged", "reachesLeftBound", "reachesRightBound", "snapAnimationFinished", "dragStart", "dragEnd"] }, { kind: "directive", type: i4.PepCarouselItemDirective, selector: "[pepCarouselItem]", inputs: ["dragDisabled"] }, { kind: "component", type: i5.PepFormComponent, selector: "pep-form", inputs: ["isInternal", "isReport", "layout", "lockEvents", "canEditObject", "data", "lockFields", "isActive", "layoutType", "objectId", "parentId", "searchCode", "showTitle", "firstFieldAsLink", "checkForChanges"], outputs: ["valueChange", "formValidationChange", "fieldClick", "internalFormFieldClick", "internalFormFieldChange"] }] });
-PepListCarouselComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepListCarouselComponent });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepListCarouselComponent, decorators: [{
+PepListCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListCarouselComponent, deps: [{ token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
+PepListCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListCarouselComponent, selector: "pep-list-carousel", inputs: { duration: "duration", layout: "layout", itemsToMove: "itemsToMove", lockItemInnerEvents: "lockItemInnerEvents", hideArrowsInSmallScreen: "hideArrowsInSmallScreen", items: "items", itemSize: "itemSize" }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, read: PepCarouselComponent }], ngImport: i0, template: "<div class=\"carousel-container\">\n    <ng-container *ngIf=\"items?.length > 0; then carouselBlock; else emptyBlock\"></ng-container>\n    <ng-template #emptyBlock>\n        <!-- No items -->\n    </ng-template>\n    <ng-template #carouselBlock>\n        <pep-button *ngIf=\"!(hideArrowsInSmallScreen && screenSize > PepScreenSizeType.SM)\"\n            [iconName]=\"'arrow_left_alt'\" [styleType]=\"'regular'\" [disabled]=\"prevDisabled\" (click)=\"moveLeft()\"\n            class=\"carousel-arrow start-arrow\">\n        </pep-button>\n        <pep-carousel #carousel [xWheelEnabled]=\"false\" [snapDuration]=\"duration\"\n            (reachesLeftBound)=\"onReachesLeftBound($event)\" (reachesRightBound)=\"onReachesRightBound($event)\">\n            <ng-container *ngFor=\"let item of items\">\n                <pep-form pepCarouselItem [layout]=\"layout\" [data]=\"item\" [layoutType]=\"'card'\"\n                    (click)=\"itemClicked(item)\" class=\"card-view \" [lockEvents]=\"lockItemInnerEvents\"\n                    [ngClass]=\"{ 'x-small-card': itemSize === 'xs', 'small-card': itemSize === 'sm'}\">\n                </pep-form>\n            </ng-container>\n        </pep-carousel>\n        <pep-button *ngIf=\"!(hideArrowsInSmallScreen && screenSize > PepScreenSizeType.SM)\"\n            [iconName]=\"'arrow_right_alt'\" [styleType]=\"'regular'\" [disabled]=\"nextDisabled\" (click)=\"moveRight()\"\n            class=\"carousel-arrow end-arrow\">\n        </pep-button>\n    </ng-template>\n</div>", styles: [".carousel-container{position:relative;margin:0 calc(var(--pep-spacing-sm, .5rem) * -1);display:grid}.carousel-container .carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1}.carousel-container .carousel-arrow.start-arrow{left:0}.carousel-container .carousel-arrow.end-arrow{right:0}.carousel-container ::ng-deep .carousel-content .card-view{padding:var(--pep-spacing-sm, .5rem) 0!important}.carousel-container ::ng-deep .carousel-content .card-view:first-child{padding-inline-start:var(--pep-spacing-sm, .5rem)!important}.carousel-container ::ng-deep .carousel-content .card-view:last-child{padding-inline-end:var(--pep-spacing-sm, .5rem)!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i4.PepCarouselComponent, selector: "pep-carousel", inputs: ["scrollbarHidden", "disabled", "xDisabled", "yDisabled", "xWheelEnabled", "dragDisabled", "snapDisabled", "snapOffset", "snapDuration"], outputs: ["dsInitialized", "indexChanged", "reachesLeftBound", "reachesRightBound", "snapAnimationFinished", "dragStart", "dragEnd"] }, { kind: "directive", type: i4.PepCarouselItemDirective, selector: "[pepCarouselItem]", inputs: ["dragDisabled"] }, { kind: "component", type: i5.PepFormComponent, selector: "pep-form", inputs: ["isInternal", "isReport", "layout", "lockEvents", "canEditObject", "data", "lockFields", "isActive", "layoutType", "objectId", "parentId", "searchCode", "showTitle", "firstFieldAsLink", "checkForChanges"], outputs: ["valueChange", "formValidationChange", "fieldClick", "internalFormFieldClick", "internalFormFieldChange"] }] });
+PepListCarouselComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListCarouselComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListCarouselComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-list-carousel', template: "<div class=\"carousel-container\">\n    <ng-container *ngIf=\"items?.length > 0; then carouselBlock; else emptyBlock\"></ng-container>\n    <ng-template #emptyBlock>\n        <!-- No items -->\n    </ng-template>\n    <ng-template #carouselBlock>\n        <pep-button *ngIf=\"!(hideArrowsInSmallScreen && screenSize > PepScreenSizeType.SM)\"\n            [iconName]=\"'arrow_left_alt'\" [styleType]=\"'regular'\" [disabled]=\"prevDisabled\" (click)=\"moveLeft()\"\n            class=\"carousel-arrow start-arrow\">\n        </pep-button>\n        <pep-carousel #carousel [xWheelEnabled]=\"false\" [snapDuration]=\"duration\"\n            (reachesLeftBound)=\"onReachesLeftBound($event)\" (reachesRightBound)=\"onReachesRightBound($event)\">\n            <ng-container *ngFor=\"let item of items\">\n                <pep-form pepCarouselItem [layout]=\"layout\" [data]=\"item\" [layoutType]=\"'card'\"\n                    (click)=\"itemClicked(item)\" class=\"card-view \" [lockEvents]=\"lockItemInnerEvents\"\n                    [ngClass]=\"{ 'x-small-card': itemSize === 'xs', 'small-card': itemSize === 'sm'}\">\n                </pep-form>\n            </ng-container>\n        </pep-carousel>\n        <pep-button *ngIf=\"!(hideArrowsInSmallScreen && screenSize > PepScreenSizeType.SM)\"\n            [iconName]=\"'arrow_right_alt'\" [styleType]=\"'regular'\" [disabled]=\"nextDisabled\" (click)=\"moveRight()\"\n            class=\"carousel-arrow end-arrow\">\n        </pep-button>\n    </ng-template>\n</div>", styles: [".carousel-container{position:relative;margin:0 calc(var(--pep-spacing-sm, .5rem) * -1);display:grid}.carousel-container .carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1}.carousel-container .carousel-arrow.start-arrow{left:0}.carousel-container .carousel-arrow.end-arrow{right:0}.carousel-container ::ng-deep .carousel-content .card-view{padding:var(--pep-spacing-sm, .5rem) 0!important}.carousel-container ::ng-deep .carousel-content .card-view:first-child{padding-inline-start:var(--pep-spacing-sm, .5rem)!important}.carousel-container ::ng-deep .carousel-content .card-view:last-child{padding-inline-end:var(--pep-spacing-sm, .5rem)!important}\n"] }]
         }, {

package/esm2020/list/list-chooser.component.mjs

@@ -44,10 +44,10 @@ export class PepListChooserComponent {
         this.change.emit({ source: this.currentList });
     }
 }
-PepListChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepListChooserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepListChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: PepListChooserComponent, selector: "pep-list-chooser", inputs: { options: "options", currentList: "currentList", sizeType: "sizeType" }, outputs: { change: "change" }, ngImport: i0, template: "<ng-container *ngIf=\"menuItems?.length > 1\">\n    <pep-menu [type]=\"'select'\" [sizeType]=\"sizeType\" [items]=\"menuItems\" [selectedItem]=\"currentItem\"\n        [iconName]=\"'arrow_down'\" (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\n</ng-container>\n<ng-container *ngIf=\"menuItems?.length == 1\">\n    <pep-bread-crumbs [items]=\"breadCrumbsItems\" [addSpacing]=\"true\"></pep-bread-crumbs>\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PepBreadCrumbsComponent, selector: "pep-bread-crumbs", inputs: ["items", "displayType", "addSpacing"], outputs: ["itemClick"] }, { kind: "component", type: i3.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }] });
-PepListChooserComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepListChooserComponent });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepListChooserComponent, decorators: [{
+PepListChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListChooserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PepListChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListChooserComponent, selector: "pep-list-chooser", inputs: { options: "options", currentList: "currentList", sizeType: "sizeType" }, outputs: { change: "change" }, ngImport: i0, template: "<ng-container *ngIf=\"menuItems?.length > 1\">\n    <pep-menu [type]=\"'select'\" [sizeType]=\"sizeType\" [items]=\"menuItems\" [selectedItem]=\"currentItem\"\n        [iconName]=\"'arrow_down'\" (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\n</ng-container>\n<ng-container *ngIf=\"menuItems?.length == 1\">\n    <pep-bread-crumbs [items]=\"breadCrumbsItems\" [addSpacing]=\"true\"></pep-bread-crumbs>\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PepBreadCrumbsComponent, selector: "pep-bread-crumbs", inputs: ["items", "displayType", "addSpacing"], outputs: ["itemClick"] }, { kind: "component", type: i3.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }] });
+PepListChooserComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListChooserComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListChooserComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-list-chooser', template: "<ng-container *ngIf=\"menuItems?.length > 1\">\n    <pep-menu [type]=\"'select'\" [sizeType]=\"sizeType\" [items]=\"menuItems\" [selectedItem]=\"currentItem\"\n        [iconName]=\"'arrow_down'\" (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\n</ng-container>\n<ng-container *ngIf=\"menuItems?.length == 1\">\n    <pep-bread-crumbs [items]=\"breadCrumbsItems\" [addSpacing]=\"true\"></pep-bread-crumbs>\n</ng-container>" }]
         }, {

package/esm2020/list/list-pager.component.mjs

@@ -98,10 +98,10 @@ export class PepListPagerComponent {
         });
     }
 }
-PepListPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepListPagerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
-PepListPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: PepListPagerComponent, selector: "pep-list-pager", inputs: { disabled: "disabled", pageIndex: "pageIndex", length: "length", pageSize: "pageSize" }, outputs: { pagerChange: "pagerChange" }, ngImport: i0, template: "<div class=\"pager-container body-sm\">\n    <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_PAGE' | translate }}</span>\n    <pep-textbox pepAutoWidth class=\"page-index pep-spacing-element\" [key]=\"'pageIndex'\" [type]=\"'int'\"\n        [disabled]=\"disabled\" [xAlignment]=\"'center'\" [renderTitle]=\"false\" [renderError]=\"false\" [renderSymbol]=\"false\"\n        [value]=\"pageIndex + 1\" [formattedValue]=\"pageIndex + 1\" [minValue]=\"1\" [maxValue]=\"this.getNumberOfPages()\"\n        [maxFieldCharacters]=\"6\" [mandatory]=\"true\" (valueChange)=\"onValueChange($event)\">\n    </pep-textbox>\n    <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_OUT_OF' | translate }}</span>\n    <span class=\"pep-spacing-element\">{{ getNumberOfPages() }}</span>\n    <button mat-button [disabled]=\"disabled || _previousButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _previousButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"previousPage()\"\n        [title]=\"('LIST.PAGER_PREVIOUS' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_right' : 'arrow_left'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <button mat-button [disabled]=\"disabled || _nextButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _nextButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"nextPage()\"\n        [title]=\"('LIST.PAGER_NEXT' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_left' : 'arrow_right'\"></pep-icon>\n        </mat-icon>\n    </button>\n</div>", styles: [".pager-container{display:flex;justify-content:center;align-items:center;height:calc(2rem + calc(var(--pep-spacing-sm, .5rem) * 2));padding:var(--pep-spacing-sm, .5rem)}.pager-container .page-index{min-height:unset;margin-bottom:0}.pager-container .page-index ::ng-deep .mat-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index ::ng-deep .mat-form-field-flex .mat-input-element{min-width:1.25rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.PepInputAutoWidthDirective, selector: "[pepAutoWidth]", inputs: ["includePadding"] }, { kind: "directive", type: i1.PepMenuBlurDirective, selector: "[pepMenuBlur]" }, { kind: "directive", type: i1.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i6.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "formattedValue", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey"], outputs: ["valueChange", "formValidationChange"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
-PepListPagerComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepListPagerComponent });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepListPagerComponent, decorators: [{
+PepListPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListPagerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
+PepListPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListPagerComponent, selector: "pep-list-pager", inputs: { disabled: "disabled", pageIndex: "pageIndex", length: "length", pageSize: "pageSize" }, outputs: { pagerChange: "pagerChange" }, ngImport: i0, template: "<div class=\"pager-container body-sm\">\n    <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_PAGE' | translate }}</span>\n    <pep-textbox pepAutoWidth class=\"page-index pep-spacing-element\" [key]=\"'pageIndex'\" [type]=\"'int'\"\n        [disabled]=\"disabled\" [xAlignment]=\"'center'\" [renderTitle]=\"false\" [renderError]=\"false\" [renderSymbol]=\"false\"\n        [value]=\"pageIndex + 1\" [formattedValue]=\"pageIndex + 1\" [minValue]=\"1\" [maxValue]=\"this.getNumberOfPages()\"\n        [maxFieldCharacters]=\"6\" [mandatory]=\"true\" (valueChange)=\"onValueChange($event)\">\n    </pep-textbox>\n    <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_OUT_OF' | translate }}</span>\n    <span class=\"pep-spacing-element\">{{ getNumberOfPages() }}</span>\n    <button mat-button [disabled]=\"disabled || _previousButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _previousButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"previousPage()\"\n        [title]=\"('LIST.PAGER_PREVIOUS' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_right' : 'arrow_left'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <button mat-button [disabled]=\"disabled || _nextButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _nextButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"nextPage()\"\n        [title]=\"('LIST.PAGER_NEXT' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_left' : 'arrow_right'\"></pep-icon>\n        </mat-icon>\n    </button>\n</div>", styles: [".pager-container{display:flex;justify-content:center;align-items:center;height:calc(2rem + calc(var(--pep-spacing-sm, .5rem) * 2));padding:var(--pep-spacing-sm, .5rem)}.pager-container .page-index{min-height:unset;margin-bottom:0}.pager-container .page-index ::ng-deep .mat-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index ::ng-deep .mat-form-field-flex .mat-input-element{min-width:1.25rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.PepInputAutoWidthDirective, selector: "[pepAutoWidth]", inputs: ["includePadding"] }, { kind: "directive", type: i1.PepMenuBlurDirective, selector: "[pepMenuBlur]" }, { kind: "directive", type: i1.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i6.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "formattedValue", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey"], outputs: ["valueChange", "formValidationChange"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
+PepListPagerComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListPagerComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListPagerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-list-pager', template: "<div class=\"pager-container body-sm\">\n    <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_PAGE' | translate }}</span>\n    <pep-textbox pepAutoWidth class=\"page-index pep-spacing-element\" [key]=\"'pageIndex'\" [type]=\"'int'\"\n        [disabled]=\"disabled\" [xAlignment]=\"'center'\" [renderTitle]=\"false\" [renderError]=\"false\" [renderSymbol]=\"false\"\n        [value]=\"pageIndex + 1\" [formattedValue]=\"pageIndex + 1\" [minValue]=\"1\" [maxValue]=\"this.getNumberOfPages()\"\n        [maxFieldCharacters]=\"6\" [mandatory]=\"true\" (valueChange)=\"onValueChange($event)\">\n    </pep-textbox>\n    <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_OUT_OF' | translate }}</span>\n    <span class=\"pep-spacing-element\">{{ getNumberOfPages() }}</span>\n    <button mat-button [disabled]=\"disabled || _previousButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _previousButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"previousPage()\"\n        [title]=\"('LIST.PAGER_PREVIOUS' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_right' : 'arrow_left'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <button mat-button [disabled]=\"disabled || _nextButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _nextButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"nextPage()\"\n        [title]=\"('LIST.PAGER_NEXT' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_left' : 'arrow_right'\"></pep-icon>\n        </mat-icon>\n    </button>\n</div>", styles: [".pager-container{display:flex;justify-content:center;align-items:center;height:calc(2rem + calc(var(--pep-spacing-sm, .5rem) * 2));padding:var(--pep-spacing-sm, .5rem)}.pager-container .page-index{min-height:unset;margin-bottom:0}.pager-container .page-index ::ng-deep .mat-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index ::ng-deep .mat-form-field-flex .mat-input-element{min-width:1.25rem}\n"] }]
         }, {

package/esm2020/list/list-sorting.component.mjs

@@ -41,10 +41,10 @@ export class PepListSortingComponent {
         this.change.emit({ source: this.currentSorting });
     }
 }
-PepListSortingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepListSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepListSortingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: PepListSortingComponent, selector: "pep-list-sorting", inputs: { options: "options", currentSorting: "currentSorting", sizeType: "sizeType" }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"sorting-container\">\n    <div class=\"body-xs sort-by\">\n        <span>{{ 'LIST.SORT_BY' | translate }}</span>\n    </div>\n    <pep-menu [type]=\"'select'\" [sizeType]=\"sizeType\" [items]=\"menuItems\" [selectedItem]=\"currentItem\"\n        [iconName]=\"'arrow_down'\" (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\n</div>", styles: [".sorting-container{display:flex;align-items:center}.sorting-container .sort-by{margin-inline-end:var(--pep-spacing-sm, .5rem)}\n"], dependencies: [{ kind: "component", type: i1.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
-PepListSortingComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepListSortingComponent });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepListSortingComponent, decorators: [{
+PepListSortingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PepListSortingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListSortingComponent, selector: "pep-list-sorting", inputs: { options: "options", currentSorting: "currentSorting", sizeType: "sizeType" }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"sorting-container\">\n    <div class=\"body-xs sort-by\">\n        <span>{{ 'LIST.SORT_BY' | translate }}</span>\n    </div>\n    <pep-menu [type]=\"'select'\" [sizeType]=\"sizeType\" [items]=\"menuItems\" [selectedItem]=\"currentItem\"\n        [iconName]=\"'arrow_down'\" (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\n</div>", styles: [".sorting-container{display:flex;align-items:center}.sorting-container .sort-by{margin-inline-end:var(--pep-spacing-sm, .5rem)}\n"], dependencies: [{ kind: "component", type: i1.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+PepListSortingComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListSortingComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListSortingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-list-sorting', template: "<div class=\"sorting-container\">\n    <div class=\"body-xs sort-by\">\n        <span>{{ 'LIST.SORT_BY' | translate }}</span>\n    </div>\n    <pep-menu [type]=\"'select'\" [sizeType]=\"sizeType\" [items]=\"menuItems\" [selectedItem]=\"currentItem\"\n        [iconName]=\"'arrow_down'\" (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\n</div>", styles: [".sorting-container{display:flex;align-items:center}.sorting-container .sort-by{margin-inline-end:var(--pep-spacing-sm, .5rem)}\n"] }]
         }, {

package/esm2020/list/list-total.component.mjs

@@ -10,10 +10,10 @@ export class PepListTotalComponent {
         this.sizeType = 'md';
     }
 }
-PepListTotalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepListTotalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepListTotalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: PepListTotalComponent, selector: "pep-list-total", inputs: { totalRows: "totalRows", totalAmount: "totalAmount", isMapView: "isMapView", sizeType: "sizeType" }, ngImport: i0, template: "<div class=\"total-items-container\">\n    <ng-container *ngIf=\"isMapView; then mapTemplate; else notMapTemplate\"></ng-container>\n\n    <ng-template #notMapTemplate>\n        <ng-container *ngIf=\"totalRows >= 0\">\n            <div class=\"body-{{sizeType}} total-items color-dimmed\"\n                [innerHtml]=\"(totalRows === 1 ? 'LIST.TOTAL_RESULT' : 'LIST.TOTAL_RESULTS') | translate: { totalRows: totalRows }\">\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"totalAmount > 0\"> {{ 'LIST.TOTAL_OF' | translate }} {{ totalAmount }} </ng-container>\n    </ng-template>\n\n    <ng-template #mapTemplate>\n        <ng-container *ngIf=\"totalAmount >= 0\">\n        </ng-container>\n        <ng-container *ngIf=\"totalRows >= 0\">\n            <div class=\"body-{{sizeType}} total-items color-dimmed\"\n                [innerHtml]=\"(totalRows === 1 ? 'LIST.TOTAL_RESULT_OUT_OF_RESULT' : 'LIST.TOTAL_RESULTS_OUT_OF') | translate: { xRows: totalAmount, totalRows: totalRows }\">\n            </div>\n        </ng-container>\n    </ng-template>\n</div>", styles: [":host{height:inherit}.total-items-container{height:100%;display:flex;align-items:center}\n", ""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
-PepListTotalComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepListTotalComponent });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepListTotalComponent, decorators: [{
+PepListTotalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListTotalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PepListTotalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListTotalComponent, selector: "pep-list-total", inputs: { totalRows: "totalRows", totalAmount: "totalAmount", isMapView: "isMapView", sizeType: "sizeType" }, ngImport: i0, template: "<div class=\"total-items-container\">\n    <ng-container *ngIf=\"isMapView; then mapTemplate; else notMapTemplate\"></ng-container>\n\n    <ng-template #notMapTemplate>\n        <ng-container *ngIf=\"totalRows >= 0\">\n            <div class=\"body-{{sizeType}} total-items color-dimmed\"\n                [innerHtml]=\"(totalRows === 1 ? 'LIST.TOTAL_RESULT' : 'LIST.TOTAL_RESULTS') | translate: { totalRows: totalRows }\">\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"totalAmount > 0\"> {{ 'LIST.TOTAL_OF' | translate }} {{ totalAmount }} </ng-container>\n    </ng-template>\n\n    <ng-template #mapTemplate>\n        <ng-container *ngIf=\"totalAmount >= 0\">\n        </ng-container>\n        <ng-container *ngIf=\"totalRows >= 0\">\n            <div class=\"body-{{sizeType}} total-items color-dimmed\"\n                [innerHtml]=\"(totalRows === 1 ? 'LIST.TOTAL_RESULT_OUT_OF_RESULT' : 'LIST.TOTAL_RESULTS_OUT_OF') | translate: { xRows: totalAmount, totalRows: totalRows }\">\n            </div>\n        </ng-container>\n    </ng-template>\n</div>", styles: [":host{height:inherit}.total-items-container{height:100%;display:flex;align-items:center}\n", ""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+PepListTotalComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListTotalComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListTotalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-list-total', template: "<div class=\"total-items-container\">\n    <ng-container *ngIf=\"isMapView; then mapTemplate; else notMapTemplate\"></ng-container>\n\n    <ng-template #notMapTemplate>\n        <ng-container *ngIf=\"totalRows >= 0\">\n            <div class=\"body-{{sizeType}} total-items color-dimmed\"\n                [innerHtml]=\"(totalRows === 1 ? 'LIST.TOTAL_RESULT' : 'LIST.TOTAL_RESULTS') | translate: { totalRows: totalRows }\">\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"totalAmount > 0\"> {{ 'LIST.TOTAL_OF' | translate }} {{ totalAmount }} </ng-container>\n    </ng-template>\n\n    <ng-template #mapTemplate>\n        <ng-container *ngIf=\"totalAmount >= 0\">\n        </ng-container>\n        <ng-container *ngIf=\"totalRows >= 0\">\n            <div class=\"body-{{sizeType}} total-items color-dimmed\"\n                [innerHtml]=\"(totalRows === 1 ? 'LIST.TOTAL_RESULT_OUT_OF_RESULT' : 'LIST.TOTAL_RESULTS_OUT_OF') | translate: { xRows: totalAmount, totalRows: totalRows }\">\n            </div>\n        </ng-container>\n    </ng-template>\n</div>", styles: [":host{height:inherit}.total-items-container{height:100%;display:flex;align-items:center}\n"] }]
         }, {

package/esm2020/list/list-views.component.mjs

@@ -59,10 +59,10 @@ export class PepListViewsComponent {
         this.change.emit({ source: this.currentView });
     }
 }
-PepListViewsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepListViewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepListViewsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: PepListViewsComponent, selector: "pep-list-views", inputs: { views: "views", currentView: "currentView", displayType: "displayType", styleType: "styleType", sizeType: "sizeType", classNames: "classNames" }, outputs: { change: "change" }, ngImport: i0, template: "<ng-container *ngIf=\"displayType === 'menu' then menuTemplate else buttonsTemplate\">\n</ng-container>\n<ng-template #menuTemplate>\n    <pep-menu [type]=\"'select'\" [styleType]=\"styleType\" [sizeType]=\"sizeType\" [classNames]=\"classNames\"\n        [items]=\"menuItems\" [selectedItem]=\"currentItem\"\n        [iconName]=\"currentItem?.iconName ? currentItem?.iconName : 'arrow_down'\"\n        (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\n</ng-template>\n<ng-template #buttonsTemplate>\n    <div class=\"buttons-wrapper pep-spacing-element-negative\">\n        <button *ngFor=\"let view of views\" mat-button [title]=\"view.title\" [disabled]=\"view.key === currentView?.key\"\n            class=\"pep-button icon-button pep-spacing-element {{ sizeType }} {{ styleType }} {{ classNames }}\"\n            pepRtlDirection pepMenuBlur (click)=\"onViewChanged(view)\">\n            <mat-icon>\n                <pep-icon name=\"{{ view?.iconName }}\"></pep-icon>\n            </mat-icon>\n        </button>\n    </div>\n</ng-template>", styles: [".buttons-wrapper{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.PepMenuBlurDirective, selector: "[pepMenuBlur]" }, { kind: "directive", type: i4.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i6.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }] });
-PepListViewsComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepListViewsComponent });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepListViewsComponent, decorators: [{
+PepListViewsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListViewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PepListViewsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListViewsComponent, selector: "pep-list-views", inputs: { views: "views", currentView: "currentView", displayType: "displayType", styleType: "styleType", sizeType: "sizeType", classNames: "classNames" }, outputs: { change: "change" }, ngImport: i0, template: "<ng-container *ngIf=\"displayType === 'menu' then menuTemplate else buttonsTemplate\">\n</ng-container>\n<ng-template #menuTemplate>\n    <pep-menu [type]=\"'select'\" [styleType]=\"styleType\" [sizeType]=\"sizeType\" [classNames]=\"classNames\"\n        [items]=\"menuItems\" [selectedItem]=\"currentItem\"\n        [iconName]=\"currentItem?.iconName ? currentItem?.iconName : 'arrow_down'\"\n        (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\n</ng-template>\n<ng-template #buttonsTemplate>\n    <div class=\"buttons-wrapper pep-spacing-element-negative\">\n        <button *ngFor=\"let view of views\" mat-button [title]=\"view.title\" [disabled]=\"view.key === currentView?.key\"\n            class=\"pep-button icon-button pep-spacing-element {{ sizeType }} {{ styleType }} {{ classNames }}\"\n            pepRtlDirection pepMenuBlur (click)=\"onViewChanged(view)\">\n            <mat-icon>\n                <pep-icon name=\"{{ view?.iconName }}\"></pep-icon>\n            </mat-icon>\n        </button>\n    </div>\n</ng-template>", styles: [".buttons-wrapper{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.PepMenuBlurDirective, selector: "[pepMenuBlur]" }, { kind: "directive", type: i4.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i6.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }] });
+PepListViewsComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListViewsComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListViewsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-list-views', template: "<ng-container *ngIf=\"displayType === 'menu' then menuTemplate else buttonsTemplate\">\n</ng-container>\n<ng-template #menuTemplate>\n    <pep-menu [type]=\"'select'\" [styleType]=\"styleType\" [sizeType]=\"sizeType\" [classNames]=\"classNames\"\n        [items]=\"menuItems\" [selectedItem]=\"currentItem\"\n        [iconName]=\"currentItem?.iconName ? currentItem?.iconName : 'arrow_down'\"\n        (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\n</ng-template>\n<ng-template #buttonsTemplate>\n    <div class=\"buttons-wrapper pep-spacing-element-negative\">\n        <button *ngFor=\"let view of views\" mat-button [title]=\"view.title\" [disabled]=\"view.key === currentView?.key\"\n            class=\"pep-button icon-button pep-spacing-element {{ sizeType }} {{ styleType }} {{ classNames }}\"\n            pepRtlDirection pepMenuBlur (click)=\"onViewChanged(view)\">\n            <mat-icon>\n                <pep-icon name=\"{{ view?.iconName }}\"></pep-icon>\n            </mat-icon>\n        </button>\n    </div>\n</ng-template>", styles: [".buttons-wrapper{display:flex}\n"] }]
         }, {

package/esm2020/list/list.component.mjs

@@ -1071,9 +1071,9 @@ PepListComponent.ALL_SELECTED_STATE_KEY = 'AllSelected';
 PepListComponent.SORT_BY_STATE_KEY = 'SortBy';
 PepListComponent.ASCENDING_STATE_KEY = 'IsAscending';
 PepListComponent.MINIMUM_COLUMN_WIDTH = 48;
-PepListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepListComponent, deps: [{ token: i0.ElementRef }, { token: i1.PepLayoutService }, { token: i1.PepSessionService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PepListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: PepListComponent, selector: "pep-list", inputs: { noDataFoundMsg: "noDataFoundMsg", selectionTypeForActions: "selectionTypeForActions", showCardSelection: "showCardSelection", hideAllSelectionInMulti: "hideAllSelectionInMulti", cardSize: "cardSize", tableViewType: "tableViewType", viewType: "viewType", firstFieldAsLink: "firstFieldAsLink", supportSorting: "supportSorting", supportResizing: "supportResizing", parentScroll: "parentScroll", disabled: "disabled", lockEvents: "lockEvents", lockItemInnerEvents: "lockItemInnerEvents", printMode: "printMode", isReport: "isReport", zebraStripes: "zebraStripes", totalsRow: "totalsRow", pagerType: "pagerType", pageSize: "pageSize", pageIndex: "pageIndex", scrollAnimationTime: "scrollAnimationTime", scrollDebounceTime: "scrollDebounceTime", scrollThrottlingTime: "scrollThrottlingTime", useAsWebComponent: "useAsWebComponent" }, outputs: { itemClick: "itemClick", fieldClick: "fieldClick", valueChange: "valueChange", sortingChange: "sortingChange", selectedItemsChange: "selectedItemsChange", selectedItemChange: "selectedItemChange", selectAllClick: "selectAllClick", listLoad: "listLoad", loadItems: "loadItems", loadPage: "loadPage", startIndexChange: "startIndexChange" }, host: { listeners: { "window:resize": "onWinResize($event)" } }, viewQueries: [{ propertyName: "virtualScroller", first: true, predicate: VirtualScrollerComponent, descendants: true }, { propertyName: "selectAllCB", first: true, predicate: ["selectAllCB"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"totalRows == 0\">\n    <ng-container *ngIf=\"noDataFoundMsg; then noDataMsgInputBlock; else noDataMsgDefaultBlock\"></ng-container>\n    <ng-template #noDataMsgInputBlock>\n        <div class=\"pep-border-bottom\">\n            <p class=\"title-xl no-data\">\n                {{ noDataFoundMsg }}\n            </p>\n        </div>\n    </ng-template>\n    <ng-template #noDataMsgDefaultBlock>\n        <div class=\"pep-border-bottom\">\n            <p class=\"title-xl no-data\">\n                {{ 'LIST.NO_DATA_FOUND' | translate}}\n            </p>\n        </div>\n        <div class=\"no-data-suggestions\">\n            <p class=\"suggestions-title title-lg\">\n                {{ 'LIST.NO_DATA_FOUND_SUGGESTIONS_TITLE' | translate}}\n            </p>\n            <ul class=\"suggestions-list body-lg\" [innerHtml]=\"'LIST.NO_DATA_FOUND_SUGGESTIONS_LIST' | translate\"></ul>\n        </div>\n    </ng-template>\n</ng-container>\n<ng-container *ngIf=\"totalRows > 0\">\n    <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n\n    <virtual-scroller #scroller [items]=\"pagerType === 'pages' ? currentPageItems : items\"\n        [scrollDebounceTime]=\"scrollDebounceTime\" [scrollThrottlingTime]=\"scrollThrottlingTime\"\n        [bufferAmount]=\"printMode ? totalRows : -1\" [parentScroll]=\"parentScroll\" [disable]=\"loadingItemsFromApi\"\n        class=\"virtual-scroller\" [ngClass]=\"{ 'table-body': isTable, 'cards-body': !isTable }\"\n        (vsChange)=\"onVirtualScrollerChange($event)\" (vsChildRectChange)=\"onChildRectChange($event)\">\n        <ng-container *ngFor=\"let item of scroller.viewPortItems; let index = index; let isFirst = first;\">\n            <ng-container *ngTemplateOutlet=\"listData; context: {item: item, index:index}\"></ng-container>\n        </ng-container>\n    </virtual-scroller>\n\n    <pep-list-pager *ngIf=\"pagerType === 'pages'\" class=\" list-pager\" [disabled]=\"loadingItemsFromApi\"\n        [length]=\"totalRows\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" (pagerChange)=\"onPagerChange($event)\">\n    </pep-list-pager>\n\n    <ng-container *ngTemplateOutlet=\"tableTotal\"></ng-container>\n</ng-container>\n\n<ng-template #listData let-item=\"item\" let-index=\"index\">\n    <ng-container *ngIf=\"isTable\">\n        <!-- getIsItemSelected(item) -> item | isItemSelected: selectionTypeForActions : selectedItemId : isAllSelected : selectedItems : unSelectedItems -->\n        <div class=\"table-row\" (mouseenter)=\"onTableRowMouseEnter($event, item?.UID, item?.Type)\" \n            (mouseleave)=\"onTableRowMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                'compact-view': tableViewType === 'compact',\n                even: zebraStripes && index % 2 !== 0,\n                selected: getIsItemSelected(item),\n                highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId}\" [ngStyle]=\"{ visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n            <fieldset class=\"table-row-fieldset\" [ngStyle]=\"{ 'background-color': item?.BackgroundColor }\">\n                <mat-checkbox *ngIf=\"selectionTypeForActions == 'multi'\" type=\"checkbox\"\n                    class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                    [disabled]=\"item | isItemDisabled: lockItemInnerEvents : printMode\" [ngStyle]=\"{\n                            visibility: !deviceHasMouse ||\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId || isAllSelected || selectedItems.size > 0 ? 'visible' : 'hidden'\n                        }\" [checked]=\"getIsItemSelected(item)\"\n                    (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n                </mat-checkbox>\n                <mat-radio-button *ngIf=\"selectionTypeForActions == 'single'\" name=\"selection\"\n                    class=\"pull-left flip row-selection pep-radio-button\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                    [disabled]=\"item | isItemDisabled: lockItemInnerEvents : printMode\"\n                    [checked]=\"getIsItemSelected(item)\"\n                    (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n                </mat-radio-button>\n                <pep-form [layoutType]=\"'table'\" [checkForChanges]=\"checkForChanges\" [layout]=\"layout\"\n                    [firstFieldAsLink]=\"firstFieldAsLink\" [data]=\"item\" [canEditObject]=\"!disabled\"\n                    [lockEvents]=\"lockItemInnerEvents || printMode\" [isReport]=\"isReport\" [isActive]=\"\n                            (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n                        \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n                    (click)=\"itemClicked($event, item)\">\n                </pep-form>\n            </fieldset>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!isTable\">\n        <div (mouseenter)=\"onCardMouseEnter($event, item?.UID, item?.Type)\"\n            (mouseleave)=\"onCardMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                    selected: getIsItemSelected(item),\n                    highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId,\n                    'line-view': viewType === 'lines',\n                    'card-view': viewType === 'cards',\n                    'small-card': cardSize === 'sm'\n                }\" class=\"pull-left flip\"\n            [ngStyle]=\"{ height: 'initial', visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n            <mat-checkbox *ngIf=\"showCardSelection\" class=\"pull-left flip card-selection\"\n                [disabled]=\"item | isItemDisabled: lockItemInnerEvents : printMode\" [checked]=\"getIsItemSelected(item)\"\n                (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n            </mat-checkbox>\n            <pep-form [layoutType]=\"'card'\" [firstFieldAsLink]=\"firstFieldAsLink\" [checkForChanges]=\"checkForChanges\"\n                [layout]=\"layout\" [data]=\"item\" [canEditObject]=\"!disabled\"\n                [lockEvents]=\"lockItemInnerEvents || printMode\" [isActive]=\"\n                        (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n                        item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n                    \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n                (click)=\"itemClicked($event, item)\">\n            </pep-form>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #tableHeader>\n    <div *ngIf=\"isTable\" class=\"table-header\" (mouseup)=\"onListResizeEnd($event)\"\n        (mouseenter)=\"onListHeaderMouseEnter($event)\" (mouseleave)=\"onListHeaderMouseLeave($event)\"\n        (mousemove)=\"onListResize($event)\">\n\n        <div class=\"table-header-padding-top\"></div>\n        <fieldset class=\"table-header-fieldset\">\n            <mat-checkbox *ngIf=\"selectionTypeForActions !== 'none'\" #selectAllCB class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                type=\"checkbox\" [ngStyle]=\"{\n                        visibility:\n                            selectionTypeForActions == 'single' || \n                            (selectionTypeForActions == 'multi' && hideAllSelectionInMulti) ? 'hidden' : 'visible'\n                    }\"\n                [indeterminate]=\"isAllSelected ? unSelectedItems.size > 0 && unSelectedItems.size < totalRows : (selectedItems.size > 0 && !getIsAllSelectedForActions())\"\n                [disabled]=\"disabled || selectionTypeForActions === 'single'\" [checked]=\"getIsAllSelectedForActions()\"\n                (change)=\"selectAllItemsForActions($event)\"></mat-checkbox>\n            <fieldset>\n                <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"header-column pull-left flip\"\n                    [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\" [ngClass]=\"{\n                            'compact-view': tableViewType === 'compact',\n                            'support-sorting': supportSorting,\n                            'has-sorting': field.ApiName === sortBy,\n                            'is-resizing': field.ApiName === pressedColumn,\n                            'is-first': j === 0 && selectionTypeForActions !== 'multi',\n                            'is-last': j === layout?.ControlFields?.length - 1\n                        }\"\n                    (click)=\"supportSorting ? (onListSortingChange(field.ApiName, sortBy !== null && sortBy != field.ApiName ? true : !isAsc, $event)) : false\">\n\n                    <label id=\"{{ field.ApiName }}\"\n                        class=\"header-label body-sm pull-left flip text-align-{{ field.Layout.XAlignment }}\"\n                        title=\"{{ field.Title }}\">\n                        <span *ngIf=\"field.Mandatory\" class=\"mandatory\">\n                            <pep-icon name=\"system_must\"></pep-icon>\n                        </span>\n                        {{ field.Title != '' ? field.Title : ' '}}\n                    </label>\n\n                    <div *ngIf=\"supportResizing\" class=\"resize-box pull-right flip\"\n                        (mousedown)=\"onListResizeStart($event, field.ApiName)\">\n                        <div class=\"splitter\"></div>\n                    </div>\n\n                    <div *ngIf=\"supportSorting\" class=\"sorting-box pull-left flip\"\n                        [ngClass]=\"{ 'has-sorting': field.ApiName === sortBy }\">\n                        <mat-icon *ngIf=\"field.ApiName !== sortBy\">\n                            <pep-icon name=\"arrow_either\" class=\"asc\"></pep-icon>\n                        </mat-icon>\n                        <ng-container *ngIf=\"field.ApiName === sortBy\">\n                            <mat-icon *ngIf=\"!isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && isAsc }\"\n                                title=\"{{ 'LIST.SORT_ASC' | translate }}\">\n                                <pep-icon name=\"arrow_up\" class=\"asc\"></pep-icon>\n                            </mat-icon>\n                            <mat-icon *ngIf=\"isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && !isAsc }\"\n                                title=\"{{ 'LIST.SORT_DESC' | translate }}\">\n                                <pep-icon name=\"arrow_down\" class=\"desc\"></pep-icon>\n                            </mat-icon>\n                        </ng-container>\n                    </div>\n                </div>\n            </fieldset>\n        </fieldset>\n    </div>\n</ng-template>\n\n<ng-template #tableTotal>\n    <div *ngIf=\"isTable && totalsRow?.length > 0 && totalsRow.length <= layout?.ControlFields.length\"\n        class=\"table-total\">\n        <fieldset class=\"table-header-fieldset\">\n            <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"total-column pull-left flip\"\n                [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\">\n                <label class=\"total-label body-sm text-align-{{ field.Layout.XAlignment }}\">\n                    {{ totalsRow[j] }}\n                </label>\n            </div>\n        </fieldset>\n    </div>\n</ng-template>", styles: [":host{height:inherit;display:flex;flex-direction:column}.no-data{margin:var(--pep-spacing-2xl, 2rem) 0}.no-data-suggestions .suggestions-title{margin:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}.no-data-suggestions .suggestions-list{margin:0;padding:0;padding-inline-start:var(--pep-spacing-2xl, 2rem)}.virtual-scroller{min-height:5rem;height:inherit}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i7.PepFormComponent, selector: "pep-form", inputs: ["isInternal", "isReport", "layout", "lockEvents", "canEditObject", "data", "lockFields", "isActive", "layoutType", "objectId", "parentId", "searchCode", "showTitle", "firstFieldAsLink", "checkForChanges"], outputs: ["valueChange", "formValidationChange", "fieldClick", "internalFormFieldClick", "internalFormFieldChange"] }, { kind: "component", type: i8.VirtualScrollerComponent, selector: "virtual-scroller,[virtualScroller]", inputs: ["disable", "executeRefreshOutsideAngularZone", "enableUnequalChildrenSizes", "RTL", "useMarginInsteadOfTranslate", "modifyOverflowStyleOfParentScroll", "stripedTable", "scrollbarWidth", "scrollbarHeight", "childWidth", "childHeight", "ssrChildWidth", "ssrChildHeight", "ssrViewportWidth", "ssrViewportHeight", "bufferAmount", "scrollAnimationTime", "resizeBypassRefreshThreshold", "scrollThrottlingTime", "scrollDebounceTime", "checkResizeInterval", "items", "compareItems", "horizontal", "parentScroll"], outputs: ["vsChildRectChange", "vsUpdate", "vsChange", "vsStart", "vsEnd"], exportAs: ["virtualScroller"] }, { kind: "component", type: i9.PepListPagerComponent, selector: "pep-list-pager", inputs: ["disabled", "pageIndex", "length", "pageSize"], outputs: ["pagerChange"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }, { kind: "pipe", type: i11.IsItemDisabledPipe, name: "isItemDisabled" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepListComponent, decorators: [{
+PepListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListComponent, deps: [{ token: i0.ElementRef }, { token: i1.PepLayoutService }, { token: i1.PepSessionService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+PepListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListComponent, selector: "pep-list", inputs: { noDataFoundMsg: "noDataFoundMsg", selectionTypeForActions: "selectionTypeForActions", showCardSelection: "showCardSelection", hideAllSelectionInMulti: "hideAllSelectionInMulti", cardSize: "cardSize", tableViewType: "tableViewType", viewType: "viewType", firstFieldAsLink: "firstFieldAsLink", supportSorting: "supportSorting", supportResizing: "supportResizing", parentScroll: "parentScroll", disabled: "disabled", lockEvents: "lockEvents", lockItemInnerEvents: "lockItemInnerEvents", printMode: "printMode", isReport: "isReport", zebraStripes: "zebraStripes", totalsRow: "totalsRow", pagerType: "pagerType", pageSize: "pageSize", pageIndex: "pageIndex", scrollAnimationTime: "scrollAnimationTime", scrollDebounceTime: "scrollDebounceTime", scrollThrottlingTime: "scrollThrottlingTime", useAsWebComponent: "useAsWebComponent" }, outputs: { itemClick: "itemClick", fieldClick: "fieldClick", valueChange: "valueChange", sortingChange: "sortingChange", selectedItemsChange: "selectedItemsChange", selectedItemChange: "selectedItemChange", selectAllClick: "selectAllClick", listLoad: "listLoad", loadItems: "loadItems", loadPage: "loadPage", startIndexChange: "startIndexChange" }, host: { listeners: { "window:resize": "onWinResize($event)" } }, viewQueries: [{ propertyName: "virtualScroller", first: true, predicate: VirtualScrollerComponent, descendants: true }, { propertyName: "selectAllCB", first: true, predicate: ["selectAllCB"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"totalRows == 0\">\n    <ng-container *ngIf=\"noDataFoundMsg; then noDataMsgInputBlock; else noDataMsgDefaultBlock\"></ng-container>\n    <ng-template #noDataMsgInputBlock>\n        <div class=\"pep-border-bottom\">\n            <p class=\"title-xl no-data\">\n                {{ noDataFoundMsg }}\n            </p>\n        </div>\n    </ng-template>\n    <ng-template #noDataMsgDefaultBlock>\n        <div class=\"pep-border-bottom\">\n            <p class=\"title-xl no-data\">\n                {{ 'LIST.NO_DATA_FOUND' | translate}}\n            </p>\n        </div>\n        <div class=\"no-data-suggestions\">\n            <p class=\"suggestions-title title-lg\">\n                {{ 'LIST.NO_DATA_FOUND_SUGGESTIONS_TITLE' | translate}}\n            </p>\n            <ul class=\"suggestions-list body-lg\" [innerHtml]=\"'LIST.NO_DATA_FOUND_SUGGESTIONS_LIST' | translate\"></ul>\n        </div>\n    </ng-template>\n</ng-container>\n<ng-container *ngIf=\"totalRows > 0\">\n    <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n\n    <virtual-scroller #scroller [items]=\"pagerType === 'pages' ? currentPageItems : items\"\n        [scrollDebounceTime]=\"scrollDebounceTime\" [scrollThrottlingTime]=\"scrollThrottlingTime\"\n        [bufferAmount]=\"printMode ? totalRows : -1\" [parentScroll]=\"parentScroll\" [disable]=\"loadingItemsFromApi\"\n        class=\"virtual-scroller\" [ngClass]=\"{ 'table-body': isTable, 'cards-body': !isTable }\"\n        (vsChange)=\"onVirtualScrollerChange($event)\" (vsChildRectChange)=\"onChildRectChange($event)\">\n        <ng-container *ngFor=\"let item of scroller.viewPortItems; let index = index; let isFirst = first;\">\n            <ng-container *ngTemplateOutlet=\"listData; context: {item: item, index:index}\"></ng-container>\n        </ng-container>\n    </virtual-scroller>\n\n    <pep-list-pager *ngIf=\"pagerType === 'pages'\" class=\" list-pager\" [disabled]=\"loadingItemsFromApi\"\n        [length]=\"totalRows\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" (pagerChange)=\"onPagerChange($event)\">\n    </pep-list-pager>\n\n    <ng-container *ngTemplateOutlet=\"tableTotal\"></ng-container>\n</ng-container>\n\n<ng-template #listData let-item=\"item\" let-index=\"index\">\n    <ng-container *ngIf=\"isTable\">\n        <!-- getIsItemSelected(item) -> item | isItemSelected: selectionTypeForActions : selectedItemId : isAllSelected : selectedItems : unSelectedItems -->\n        <div class=\"table-row\" (mouseenter)=\"onTableRowMouseEnter($event, item?.UID, item?.Type)\" \n            (mouseleave)=\"onTableRowMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                'compact-view': tableViewType === 'compact',\n                even: zebraStripes && index % 2 !== 0,\n                selected: getIsItemSelected(item),\n                highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId}\" [ngStyle]=\"{ visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n            <fieldset class=\"table-row-fieldset\" [ngStyle]=\"{ 'background-color': item?.BackgroundColor }\">\n                <mat-checkbox *ngIf=\"selectionTypeForActions == 'multi'\" type=\"checkbox\"\n                    class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                    [disabled]=\"item | isItemDisabled: lockItemInnerEvents : printMode\" [ngStyle]=\"{\n                            visibility: !deviceHasMouse ||\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId || isAllSelected || selectedItems.size > 0 ? 'visible' : 'hidden'\n                        }\" [checked]=\"getIsItemSelected(item)\"\n                    (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n                </mat-checkbox>\n                <mat-radio-button *ngIf=\"selectionTypeForActions == 'single'\" name=\"selection\"\n                    class=\"pull-left flip row-selection pep-radio-button\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                    [disabled]=\"item | isItemDisabled: lockItemInnerEvents : printMode\"\n                    [checked]=\"getIsItemSelected(item)\"\n                    (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n                </mat-radio-button>\n                <pep-form [layoutType]=\"'table'\" [checkForChanges]=\"checkForChanges\" [layout]=\"layout\"\n                    [firstFieldAsLink]=\"firstFieldAsLink\" [data]=\"item\" [canEditObject]=\"!disabled\"\n                    [lockEvents]=\"lockItemInnerEvents || printMode\" [isReport]=\"isReport\" [isActive]=\"\n                            (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n                        \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n                    (click)=\"itemClicked($event, item)\">\n                </pep-form>\n            </fieldset>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!isTable\">\n        <div (mouseenter)=\"onCardMouseEnter($event, item?.UID, item?.Type)\"\n            (mouseleave)=\"onCardMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                    selected: getIsItemSelected(item),\n                    highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId,\n                    'line-view': viewType === 'lines',\n                    'card-view': viewType === 'cards',\n                    'small-card': cardSize === 'sm'\n                }\" class=\"pull-left flip\"\n            [ngStyle]=\"{ height: 'initial', visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n            <mat-checkbox *ngIf=\"showCardSelection\" class=\"pull-left flip card-selection\"\n                [disabled]=\"item | isItemDisabled: lockItemInnerEvents : printMode\" [checked]=\"getIsItemSelected(item)\"\n                (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n            </mat-checkbox>\n            <pep-form [layoutType]=\"'card'\" [firstFieldAsLink]=\"firstFieldAsLink\" [checkForChanges]=\"checkForChanges\"\n                [layout]=\"layout\" [data]=\"item\" [canEditObject]=\"!disabled\"\n                [lockEvents]=\"lockItemInnerEvents || printMode\" [isActive]=\"\n                        (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n                        item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n                    \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n                (click)=\"itemClicked($event, item)\">\n            </pep-form>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #tableHeader>\n    <div *ngIf=\"isTable\" class=\"table-header\" (mouseup)=\"onListResizeEnd($event)\"\n        (mouseenter)=\"onListHeaderMouseEnter($event)\" (mouseleave)=\"onListHeaderMouseLeave($event)\"\n        (mousemove)=\"onListResize($event)\">\n\n        <div class=\"table-header-padding-top\"></div>\n        <fieldset class=\"table-header-fieldset\">\n            <mat-checkbox *ngIf=\"selectionTypeForActions !== 'none'\" #selectAllCB class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                type=\"checkbox\" [ngStyle]=\"{\n                        visibility:\n                            selectionTypeForActions == 'single' || \n                            (selectionTypeForActions == 'multi' && hideAllSelectionInMulti) ? 'hidden' : 'visible'\n                    }\"\n                [indeterminate]=\"isAllSelected ? unSelectedItems.size > 0 && unSelectedItems.size < totalRows : (selectedItems.size > 0 && !getIsAllSelectedForActions())\"\n                [disabled]=\"disabled || selectionTypeForActions === 'single'\" [checked]=\"getIsAllSelectedForActions()\"\n                (change)=\"selectAllItemsForActions($event)\"></mat-checkbox>\n            <fieldset>\n                <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"header-column pull-left flip\"\n                    [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\" [ngClass]=\"{\n                            'compact-view': tableViewType === 'compact',\n                            'support-sorting': supportSorting,\n                            'has-sorting': field.ApiName === sortBy,\n                            'is-resizing': field.ApiName === pressedColumn,\n                            'is-first': j === 0 && selectionTypeForActions !== 'multi',\n                            'is-last': j === layout?.ControlFields?.length - 1\n                        }\"\n                    (click)=\"supportSorting ? (onListSortingChange(field.ApiName, sortBy !== null && sortBy != field.ApiName ? true : !isAsc, $event)) : false\">\n\n                    <label id=\"{{ field.ApiName }}\"\n                        class=\"header-label body-sm pull-left flip text-align-{{ field.Layout.XAlignment }}\"\n                        title=\"{{ field.Title }}\">\n                        <span *ngIf=\"field.Mandatory\" class=\"mandatory\">\n                            <pep-icon name=\"system_must\"></pep-icon>\n                        </span>\n                        {{ field.Title != '' ? field.Title : ' '}}\n                    </label>\n\n                    <div *ngIf=\"supportResizing\" class=\"resize-box pull-right flip\"\n                        (mousedown)=\"onListResizeStart($event, field.ApiName)\">\n                        <div class=\"splitter\"></div>\n                    </div>\n\n                    <div *ngIf=\"supportSorting\" class=\"sorting-box pull-left flip\"\n                        [ngClass]=\"{ 'has-sorting': field.ApiName === sortBy }\">\n                        <mat-icon *ngIf=\"field.ApiName !== sortBy\">\n                            <pep-icon name=\"arrow_either\" class=\"asc\"></pep-icon>\n                        </mat-icon>\n                        <ng-container *ngIf=\"field.ApiName === sortBy\">\n                            <mat-icon *ngIf=\"!isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && isAsc }\"\n                                title=\"{{ 'LIST.SORT_ASC' | translate }}\">\n                                <pep-icon name=\"arrow_up\" class=\"asc\"></pep-icon>\n                            </mat-icon>\n                            <mat-icon *ngIf=\"isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && !isAsc }\"\n                                title=\"{{ 'LIST.SORT_DESC' | translate }}\">\n                                <pep-icon name=\"arrow_down\" class=\"desc\"></pep-icon>\n                            </mat-icon>\n                        </ng-container>\n                    </div>\n                </div>\n            </fieldset>\n        </fieldset>\n    </div>\n</ng-template>\n\n<ng-template #tableTotal>\n    <div *ngIf=\"isTable && totalsRow?.length > 0 && totalsRow.length <= layout?.ControlFields.length\"\n        class=\"table-total\">\n        <fieldset class=\"table-header-fieldset\">\n            <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"total-column pull-left flip\"\n                [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\">\n                <label class=\"total-label body-sm text-align-{{ field.Layout.XAlignment }}\">\n                    {{ totalsRow[j] }}\n                </label>\n            </div>\n        </fieldset>\n    </div>\n</ng-template>", styles: [":host{height:inherit;display:flex;flex-direction:column}.no-data{margin:var(--pep-spacing-2xl, 2rem) 0}.no-data-suggestions .suggestions-title{margin:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}.no-data-suggestions .suggestions-list{margin:0;padding:0;padding-inline-start:var(--pep-spacing-2xl, 2rem)}.virtual-scroller{min-height:5rem;height:inherit}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i7.PepFormComponent, selector: "pep-form", inputs: ["isInternal", "isReport", "layout", "lockEvents", "canEditObject", "data", "lockFields", "isActive", "layoutType", "objectId", "parentId", "searchCode", "showTitle", "firstFieldAsLink", "checkForChanges"], outputs: ["valueChange", "formValidationChange", "fieldClick", "internalFormFieldClick", "internalFormFieldChange"] }, { kind: "component", type: i8.VirtualScrollerComponent, selector: "virtual-scroller,[virtualScroller]", inputs: ["disable", "executeRefreshOutsideAngularZone", "enableUnequalChildrenSizes", "RTL", "useMarginInsteadOfTranslate", "modifyOverflowStyleOfParentScroll", "stripedTable", "scrollbarWidth", "scrollbarHeight", "childWidth", "childHeight", "ssrChildWidth", "ssrChildHeight", "ssrViewportWidth", "ssrViewportHeight", "bufferAmount", "scrollAnimationTime", "resizeBypassRefreshThreshold", "scrollThrottlingTime", "scrollDebounceTime", "checkResizeInterval", "items", "compareItems", "horizontal", "parentScroll"], outputs: ["vsChildRectChange", "vsUpdate", "vsChange", "vsStart", "vsEnd"], exportAs: ["virtualScroller"] }, { kind: "component", type: i9.PepListPagerComponent, selector: "pep-list-pager", inputs: ["disabled", "pageIndex", "length", "pageSize"], outputs: ["pagerChange"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }, { kind: "pipe", type: i11.IsItemDisabledPipe, name: "isItemDisabled" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-list', host: {
                         '(window:resize)': 'onWinResize($event)',