UNPKG

@pepperi/ngx-lib

Version:

Pepperi Angular Components and Services

815 lines (812 loc) 211 kB
import { ɵɵelementContainerStart, ɵɵelement, ɵɵelementContainerEnd, ɵɵadvance, ɵɵproperty, ɵɵdefineComponent, ɵɵelementStart, ɵɵtemplate, ɵɵelementEnd, ɵɵpureFunction1, ɵsetClassMetadata, Component, ChangeDetectionStrategy, Input, ɵɵinject, ɵɵdefineInjectable, Injectable, ɵɵtext, ɵɵnextContext, ɵɵtextInterpolate, ɵɵclassMapInterpolate1, ɵɵpropertyInterpolate, ɵɵtextInterpolate1, ɵɵgetCurrentView, ɵɵlistener, ɵɵrestoreView, ɵɵpureFunction3, ɵɵelementContainer, ɵɵreference, ɵɵpureFunction2, ɵɵclassMap, EventEmitter, ɵɵdirectiveInject, ElementRef, ChangeDetectorRef, Renderer2, ɵɵviewQuery, ɵɵqueryRefresh, ɵɵloadQuery, ɵɵresolveWindow, ɵɵNgOnChangesFeature, ɵɵtemplateRefExtractor, Output, ViewChild, ɵɵpipe, ɵɵpipeBind1, ViewContainerRef, ɵɵProvidersFeature, ViewEncapsulation, ɵɵsanitizeUrl, KeyValueDiffers, ɵɵdefineNgModule, ɵɵdefineInjector, ɵɵsetNgModuleScope, NgModule, ɵɵsetComponentScope } from '@angular/core'; import { NgClass, NgForOf, NgIf, NgStyle, NgSwitch, NgSwitchCase, NgTemplateOutlet, NgSwitchDefault, CommonModule, NgComponentOutlet, NgPlural, NgPluralCase, AsyncPipe, UpperCasePipe, LowerCasePipe, JsonPipe, SlicePipe, DecimalPipe, PercentPipe, TitleCasePipe, CurrencyPipe, DatePipe, I18nPluralPipe, I18nSelectPipe, KeyValuePipe } from '@angular/common'; import { FormBuilder, NgControlStatusGroup, FormGroupDirective, Validators, ReactiveFormsModule, FormsModule, ɵangular_packages_forms_forms_y, NgSelectOption, ɵangular_packages_forms_forms_x, DefaultValueAccessor, NumberValueAccessor, RangeValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor, SelectMultipleControlValueAccessor, RadioControlValueAccessor, NgControlStatus, RequiredValidator, MinLengthValidator, MaxLengthValidator, PatternValidator, CheckboxRequiredValidator, EmailValidator, FormControlDirective, FormControlName, FormGroupName, FormArrayName, NgModel, NgModelGroup, NgForm } from '@angular/forms'; import { MatCommonModule, MatLine } from '@angular/material/core'; import { MatGridList, MatGridTile, MatGridListModule, MatGridTileText, MatGridTileHeaderCssMatStyler, MatGridTileFooterCssMatStyler, MatGridAvatarCssMatStyler } from '@angular/material/grid-list'; import { MatIcon, MatIconModule } from '@angular/material/icon'; import { MatMenuTrigger, _MatMenu, MatMenuItem, MatMenuModule, MatMenuContent } from '@angular/material/menu'; import { SignaturePadModule, SignaturePad } from 'angular2-signaturepad'; import { LAYOUT_TYPE, HttpService, FIELD_TYPE, LayoutService, ObjectSingleData, CustomizationService, PepperiTextboxField, PepperiSelectField, PepperiMenuField, PepperiQuantitySelectorField, PepperiSeparatorField, PepperiButtonField, PepperiCheckboxField, PepperiDateField, PepperiRichHtmlTextareaField, PepperiTextareaField, PepperiImagesField, PepperiImageField, PepperiSignatureField, PepperiAttachmentField, PepperiInternalPageField, PepperiIndicatorsField, PepperiAddressField, PepperiPlaceholderField, PepperiObjectChangedData, PepperiFieldClickedData, PepperiModule, ButtonBlurDirective, MenuBlurDirective, RtlClassDirective, RtlDirectionDirective, AttachDirective, TargetDirective, CapitalizePipe, EncodePipe, EscapePipe, ReplaceLineBreaks, DateFormatter, DateStringFormatter, SafeHtmlPipe, SafePipe, SplitUppercase, ToNumber } from '@pepperi/ngx-lib'; import { PepperiIconComponent, pepperiIconIndicatorDotPlaceholder, PepperiIconRegistry, PepperiIconModule } from '@pepperi/ngx-lib/icon'; import { DialogData, DialogDataType, DialogService, PepperiDialogModule } from '@pepperi/ngx-lib/dialog'; import { PepperiAddressComponent, PepperiAddressModule } from '@pepperi/ngx-lib/address'; import { PepperiAttachmentComponent, PepperiAttachmentModule } from '@pepperi/ngx-lib/attachment'; import { PepperiCheckboxComponent, PepperiCheckboxModule } from '@pepperi/ngx-lib/checkbox'; import { PepperiDateComponent, PepperiDateModule } from '@pepperi/ngx-lib/date'; import { PepperiImageComponent, PepperiImageModule } from '@pepperi/ngx-lib/image'; import { PepperiImagesFilmstripComponent, PepperiImagesFilmstripModule } from '@pepperi/ngx-lib/images-filmstrip'; import { PepperiInternalButtonComponent, PepperiInternalButtonModule } from '@pepperi/ngx-lib/internal-button'; import { PepperiMenuComponent, PepperiMenuModule } from '@pepperi/ngx-lib/menu'; import { PepperiQuantitySelectorComponent, PepperiQuantitySelectorModule } from '@pepperi/ngx-lib/quantity-selector'; import { PepperiRichHtmlTextareaComponent, PepperiRichHtmlTextareaModule } from '@pepperi/ngx-lib/rich-html-textarea'; import { PepperiSelectComponent, PepperiSelectModule } from '@pepperi/ngx-lib/select'; import { PepperiSeparatorComponent, PepperiSeparatorModule } from '@pepperi/ngx-lib/separator'; import { PepperiSignatureComponent, PepperiSignatureModule } from '@pepperi/ngx-lib/signature'; import { PepperiTextareaComponent, PepperiTextareaModule } from '@pepperi/ngx-lib/textarea'; import { PepperiTextboxComponent, PepperiTextboxModule } from '@pepperi/ngx-lib/textbox'; import { TranslatePipe, TranslateService, TranslateDirective } from '@ngx-translate/core'; import { delay } from 'rxjs/operators'; import * as $$1 from 'jquery'; import { Dir } from '@angular/cdk/bidi'; import { CdkScrollable } from '@angular/cdk/scrolling'; function PepperiIndicatorsComponent_ng_container_1_Template(rf, ctx) { if (rf & 1) { ɵɵelementContainerStart(0); ɵɵelement(1, "pep-icon", 3); ɵɵelementContainerEnd(); } if (rf & 2) { const value_r2 = ctx.$implicit; ɵɵadvance(1); ɵɵproperty("fill", value_r2); } } function PepperiIndicatorsComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) { ɵɵelementContainerStart(0); ɵɵelement(1, "pep-icon", 4); ɵɵelementContainerEnd(); } } const _c0 = function (a0) { return { "is-inside-table": a0 }; }; class PepperiIndicatorsComponent { constructor() { this.controlType = 'indicators'; this.layoutType = LAYOUT_TYPE.PepperiTable; this.LAYOUT_TYPE = LAYOUT_TYPE; } } PepperiIndicatorsComponent.ɵfac = function PepperiIndicatorsComponent_Factory(t) { return new (t || PepperiIndicatorsComponent)(); }; PepperiIndicatorsComponent.ɵcmp = ɵɵdefineComponent({ type: PepperiIndicatorsComponent, selectors: [["pep-indicators"]], inputs: { key: "key", value: "value", layoutType: "layoutType" }, decls: 3, vars: 5, consts: [[1, "indicators-container", 3, "ngClass"], [4, "ngFor", "ngForOf"], [4, "ngIf"], ["name", "indicator_dot_placeholder", 1, "pull-left", "flip", 3, "fill"], ["name", "indicator_dot_placeholder", 1, "pull-left", "flip"]], template: function PepperiIndicatorsComponent_Template(rf, ctx) { if (rf & 1) { ɵɵelementStart(0, "div", 0); ɵɵtemplate(1, PepperiIndicatorsComponent_ng_container_1_Template, 2, 1, "ng-container", 1); ɵɵtemplate(2, PepperiIndicatorsComponent_ng_container_2_Template, 2, 0, "ng-container", 2); ɵɵelementEnd(); } if (rf & 2) { ɵɵproperty("ngClass", ɵɵpureFunction1(3, _c0, ctx.layoutType === ctx.LAYOUT_TYPE.PepperiTable)); ɵɵadvance(1); ɵɵproperty("ngForOf", ctx.value == null ? null : ctx.value.split(";")); ɵɵadvance(1); ɵɵproperty("ngIf", ctx.key != "ItemIndicatorsWithoutCampaign" && (ctx.value == null ? null : ctx.value.split(";").length) < 4); } }, directives: [NgClass, NgForOf, NgIf, PepperiIconComponent], styles: ["[_nghost-%COMP%]{display:-ms-grid;display:grid;height:inherit}[_nghost-%COMP%] > *[_ngcontent-%COMP%]{-ms-grid-row-align:center;align-self:center}.indicators-container[_ngcontent-%COMP%]{height:2.5rem}.indicators-container[_ngcontent-%COMP%] .svg-icon[_ngcontent-%COMP%]{height:1rem;margin:.05rem;width:1rem}.indicators-container.is-inside-table[_ngcontent-%COMP%]{align-items:center;display:flex;justify-content:center}"], changeDetection: 0 }); /*@__PURE__*/ (function () { ɵsetClassMetadata(PepperiIndicatorsComponent, [{ type: Component, args: [{ selector: 'pep-indicators', templateUrl: './indicators.component.html', styleUrls: ['./indicators.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }] }], function () { return []; }, { key: [{ type: Input }], value: [{ type: Input }], layoutType: [{ type: Input }] }); })(); class PepperiInternalPageService { constructor(httpService) { this.httpService = httpService; this.parentId = '0'; this.additionalApiName = ''; this.transactionUrl = 'Service1.svc/v1/OrderCenter/Transaction/'; } getBaseParentUrl() { const url = `${this.transactionUrl}${this.objectId}/ParentLine/${this.parentId}/`; return url; } getChildren(callbackFunc) { const body = JSON.stringify({ TransactionUID: this.objectId, SearchCode: this.searchCode, AdditionalApiName: this.additionalApiName, ParentTransactionLineID: this.parentId, ViewType: this.viewType }); // Set the additional api name with view type string. const moreParams = this.additionalApiName.length > 0 ? `${this.additionalApiName}/${this.viewType}` : `''/${this.viewType}`; const url = `${this.getBaseParentUrl()}Items/${moreParams}`; this.httpService.postWapiApiCall(url, body).subscribe((res) => { callbackFunc(res); }, (error) => { }, () => { }); } initDetails(objectId, parentId, searchCode, callbackFunc) { if (!objectId || !parentId) { return; } this.objectId = objectId; this.parentId = parentId; this.searchCode = searchCode; this.httpService.getWapiApiCall(`${this.getBaseParentUrl()}ViewTypes`).subscribe((res) => { callbackFunc(res); }, (error) => { }, () => { }); } changeChildrenViewType(viewType, callbackFunc) { this.viewType = viewType; this.getChildren(callbackFunc); } changeAdditionalApiName(additionalApiName, callbackFunc) { this.additionalApiName = additionalApiName; this.getChildren(callbackFunc); } childPlusClick(itemId, fieldApiName, callbackFunc) { const body = JSON.stringify({ TransactionUID: this.objectId, SearchCode: this.searchCode, ParentTransactionLineID: this.parentId, TransactionLineUID: itemId, FieldApiName: fieldApiName, ViewType: this.viewType }); this.httpService.postWapiApiCall(`${this.getBaseParentUrl()}IncrementValue`, body).subscribe((res) => { callbackFunc(res); }, (error) => { }, () => { }); } childMinusClick(itemId, fieldApiName, callbackFunc) { const body = JSON.stringify({ TransactionUID: this.objectId, SearchCode: this.searchCode, ParentTransactionLineID: this.parentId, TransactionLineUID: itemId, FieldApiName: fieldApiName, ViewType: this.viewType }); this.httpService.postWapiApiCall(`${this.getBaseParentUrl()}DecrementValue`, body).subscribe((res) => { callbackFunc(res); }, (error) => { }, () => { }); } childValueChanged(itemId, fieldApiName, value, callbackFunc) { const body = JSON.stringify({ TransactionUID: this.objectId, SearchCode: this.searchCode, ParentTransactionLineID: this.parentId, TransactionLineUID: itemId, FieldApiName: fieldApiName, FieldValue: value, ViewType: this.viewType }); this.httpService.postWapiApiCall(`${this.getBaseParentUrl()}SetFieldValue`, body).subscribe((res) => { callbackFunc(res); }, (error) => { }, () => { }); } } PepperiInternalPageService.ɵfac = function PepperiInternalPageService_Factory(t) { return new (t || PepperiInternalPageService)(ɵɵinject(HttpService)); }; PepperiInternalPageService.ɵprov = ɵɵdefineInjectable({ token: PepperiInternalPageService, factory: PepperiInternalPageService.ɵfac }); /*@__PURE__*/ (function () { ɵsetClassMetadata(PepperiInternalPageService, [{ type: Injectable }], function () { return [{ type: HttpService }]; }, null); })(); const _c0$1 = ["noVirtualScrollCont"]; const _c1 = ["tableHeader"]; const _c2 = ["selectAllCB"]; function PepperiInternalListComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) { ɵɵelementContainerStart(0); ɵɵelementStart(1, "div", 3); ɵɵtext(2); ɵɵelementEnd(); ɵɵelementContainerEnd(); } if (rf & 2) { const ctx_r0 = ɵɵnextContext(); ɵɵadvance(2); ɵɵtextInterpolate(ctx_r0.noDataFoundMsg); } } function PepperiInternalListComponent_ng_container_1_div_1_div_4_label_1_Template(rf, ctx) { if (rf & 1) { ɵɵelementStart(0, "label", 16); ɵɵtext(1); ɵɵelementEnd(); } if (rf & 2) { const field_r12 = ɵɵnextContext().$implicit; ɵɵclassMapInterpolate1("header-label body-sm pull-left flip text-align-", field_r12.Layout.XAlignment, ""); ɵɵpropertyInterpolate("id", field_r12.ApiName); ɵɵpropertyInterpolate("title", field_r12.Title); ɵɵadvance(1); ɵɵtextInterpolate1(" ", field_r12.Title, " "); } } function PepperiInternalListComponent_ng_container_1_div_1_div_4_label_2_Template(rf, ctx) { if (rf & 1) { ɵɵelementStart(0, "label", 17); ɵɵtext(1, "\u00A0"); ɵɵelementEnd(); } if (rf & 2) { const field_r12 = ɵɵnextContext().$implicit; ɵɵpropertyInterpolate("id", field_r12.ApiName); } } function PepperiInternalListComponent_ng_container_1_div_1_div_4_div_3_Template(rf, ctx) { if (rf & 1) { const _r20 = ɵɵgetCurrentView(); ɵɵelementStart(0, "div", 18); ɵɵlistener("mousedown", function PepperiInternalListComponent_ng_container_1_div_1_div_4_div_3_Template_div_mousedown_0_listener($event) { ɵɵrestoreView(_r20); const field_r12 = ɵɵnextContext().$implicit; const ctx_r19 = ɵɵnextContext(3); return ctx_r19.onListResizeStart($event, field_r12.ApiName); }); ɵɵelementStart(1, "mat-icon"); ɵɵelement(2, "pep-icon", 19); ɵɵelementEnd(); ɵɵelementEnd(); } } const _c3 = function (a0) { return { width: a0 }; }; const _c4 = function (a0, a1, a2) { return { "is-resizing": a0, "is-first": a1, "is-last": a2 }; }; function PepperiInternalListComponent_ng_container_1_div_1_div_4_Template(rf, ctx) { if (rf & 1) { ɵɵelementStart(0, "div", 12); ɵɵtemplate(1, PepperiInternalListComponent_ng_container_1_div_1_div_4_label_1_Template, 2, 6, "label", 13); ɵɵtemplate(2, PepperiInternalListComponent_ng_container_1_div_1_div_4_label_2_Template, 2, 1, "label", 14); ɵɵtemplate(3, PepperiInternalListComponent_ng_container_1_div_1_div_4_div_3_Template, 3, 0, "div", 15); ɵɵelementEnd(); } if (rf & 2) { const field_r12 = ctx.$implicit; const j_r13 = ctx.index; const ctx_r11 = ɵɵnextContext(3); ɵɵproperty("ngStyle", ɵɵpureFunction1(5, _c3, field_r12.calcTitleColumnWidthString))("ngClass", ɵɵpureFunction3(7, _c4, field_r12.ApiName === ctx_r11.pressedColumn, j_r13 === 0, j_r13 === (ctx_r11.uiControl == null ? null : ctx_r11.uiControl.ControlFields == null ? null : ctx_r11.uiControl.ControlFields.length) - 1)); ɵɵadvance(1); ɵɵproperty("ngIf", field_r12.Title != ""); ɵɵadvance(1); ɵɵproperty("ngIf", field_r12.Title == ""); ɵɵadvance(1); ɵɵproperty("ngIf", ctx_r11.supportResizing); } } const _c5 = function (a0) { return { "below-header-and-top-bar": a0 }; }; function PepperiInternalListComponent_ng_container_1_div_1_Template(rf, ctx) { if (rf & 1) { const _r23 = ɵɵgetCurrentView(); ɵɵelementStart(0, "div", 8, 9); ɵɵlistener("mouseup", function PepperiInternalListComponent_ng_container_1_div_1_Template_div_mouseup_0_listener($event) { ɵɵrestoreView(_r23); const ctx_r22 = ɵɵnextContext(2); return ctx_r22.onListResizeEnd($event); })("mouseenter", function PepperiInternalListComponent_ng_container_1_div_1_Template_div_mouseenter_0_listener($event) { ɵɵrestoreView(_r23); const ctx_r24 = ɵɵnextContext(2); return ctx_r24.onListHeaderMouseEnter($event); })("mouseleave", function PepperiInternalListComponent_ng_container_1_div_1_Template_div_mouseleave_0_listener($event) { ɵɵrestoreView(_r23); const ctx_r25 = ɵɵnextContext(2); return ctx_r25.onListHeaderMouseLeave($event); })("mousemove", function PepperiInternalListComponent_ng_container_1_div_1_Template_div_mousemove_0_listener($event) { ɵɵrestoreView(_r23); const ctx_r26 = ɵɵnextContext(2); return ctx_r26.onListResize($event); }); ɵɵelementStart(2, "fieldset", 10); ɵɵelementStart(3, "fieldset"); ɵɵtemplate(4, PepperiInternalListComponent_ng_container_1_div_1_div_4_Template, 4, 11, "div", 11); ɵɵelementEnd(); ɵɵelementEnd(); ɵɵelementEnd(); } if (rf & 2) { const ctx_r6 = ɵɵnextContext(2); ɵɵproperty("ngClass", ɵɵpureFunction1(2, _c5, ctx_r6.parentScroll == null)); ɵɵadvance(4); ɵɵproperty("ngForOf", ctx_r6.uiControl == null ? null : ctx_r6.uiControl.ControlFields); } } function PepperiInternalListComponent_ng_container_1_ng_container_4_Template(rf, ctx) { if (rf & 1) { ɵɵelementContainer(0); } } function PepperiInternalListComponent_ng_container_1_ng_container_5_Template(rf, ctx) { if (rf & 1) { ɵɵelementContainer(0); } } const _c6 = function (a0, a1) { return { "table-body": a0, "cards-body": a1 }; }; function PepperiInternalListComponent_ng_container_1_Template(rf, ctx) { if (rf & 1) { ɵɵelementContainerStart(0); ɵɵtemplate(1, PepperiInternalListComponent_ng_container_1_div_1_Template, 5, 4, "div", 4); ɵɵelementStart(2, "div", 5, 6); ɵɵtemplate(4, PepperiInternalListComponent_ng_container_1_ng_container_4_Template, 1, 0, "ng-container", 7); ɵɵelementEnd(); ɵɵtemplate(5, PepperiInternalListComponent_ng_container_1_ng_container_5_Template, 1, 0, "ng-container", 7); ɵɵelementContainerEnd(); } if (rf & 2) { const ctx_r1 = ɵɵnextContext(); const _r2 = ɵɵreference(3); const _r4 = ɵɵreference(5); ɵɵadvance(1); ɵɵproperty("ngIf", ctx_r1.isTable); ɵɵadvance(1); ɵɵproperty("ngClass", ɵɵpureFunction2(4, _c6, ctx_r1.isTable, !ctx_r1.isTable)); ɵɵadvance(2); ɵɵproperty("ngTemplateOutlet", _r2); ɵɵadvance(1); ɵɵproperty("ngTemplateOutlet", _r4); } } const _c7 = function (a0) { return { highlighted: a0 }; }; const _c8 = function (a0, a1) { return { height: a0, visibility: a1 }; }; const _c9 = function (a0) { return { "background-color": a0 }; }; function PepperiInternalListComponent_ng_template_2_ng_container_0_ng_container_1_Template(rf, ctx) { if (rf & 1) { const _r34 = ɵɵgetCurrentView(); ɵɵelementContainerStart(0); ɵɵelementStart(1, "div", 21); ɵɵlistener("mouseenter", function PepperiInternalListComponent_ng_template_2_ng_container_0_ng_container_1_Template_div_mouseenter_1_listener($event) { ɵɵrestoreView(_r34); const pepperiObjectInput_r28 = ɵɵnextContext().$implicit; const ctx_r33 = ɵɵnextContext(2); return ctx_r33.onTableRowMouseEnter($event, pepperiObjectInput_r28 == null ? null : pepperiObjectInput_r28.Data == null ? null : pepperiObjectInput_r28.Data.UID, pepperiObjectInput_r28 == null ? null : pepperiObjectInput_r28.Data == null ? null : pepperiObjectInput_r28.Data.Type); })("mouseleave", function PepperiInternalListComponent_ng_template_2_ng_container_0_ng_container_1_Template_div_mouseleave_1_listener($event) { ɵɵrestoreView(_r34); const pepperiObjectInput_r28 = ɵɵnextContext().$implicit; const ctx_r36 = ɵɵnextContext(2); return ctx_r36.onTableRowMouseLeave($event, pepperiObjectInput_r28 == null ? null : pepperiObjectInput_r28.Data == null ? null : pepperiObjectInput_r28.Data.UID, pepperiObjectInput_r28 == null ? null : pepperiObjectInput_r28.Data == null ? null : pepperiObjectInput_r28.Data.Type); }); ɵɵelementStart(2, "fieldset", 22); ɵɵelementStart(3, "pep-form", 23); ɵɵlistener("notifyValueChanged", function PepperiInternalListComponent_ng_template_2_ng_container_0_ng_container_1_Template_pep_form_notifyValueChanged_3_listener($event) { ɵɵrestoreView(_r34); const ctx_r38 = ɵɵnextContext(3); return ctx_r38.onValueChanged($event); })("notifyFieldClicked", function PepperiInternalListComponent_ng_template_2_ng_container_0_ng_container_1_Template_pep_form_notifyFieldClicked_3_listener($event) { ɵɵrestoreView(_r34); const ctx_r39 = ɵɵnextContext(3); return ctx_r39.onCustomizeFieldClick($event); })("notifyMenuItemClicked", function PepperiInternalListComponent_ng_template_2_ng_container_0_ng_container_1_Template_pep_form_notifyMenuItemClicked_3_listener($event) { ɵɵrestoreView(_r34); const ctx_r40 = ɵɵnextContext(3); return ctx_r40.onCustomizeFieldMenuClicked($event); })("click", function PepperiInternalListComponent_ng_template_2_ng_container_0_ng_container_1_Template_pep_form_click_3_listener($event) { ɵɵrestoreView(_r34); const pepperiObjectInput_r28 = ɵɵnextContext().$implicit; const ctx_r41 = ɵɵnextContext(2); return ctx_r41.itemClicked($event, pepperiObjectInput_r28); }); ɵɵelementEnd(); ɵɵelementEnd(); ɵɵelementEnd(); ɵɵelementContainerEnd(); } if (rf & 2) { const pepperiObjectInput_r28 = ɵɵnextContext().$implicit; const ctx_r31 = ɵɵnextContext(2); ɵɵadvance(1); ɵɵproperty("ngClass", ɵɵpureFunction1(16, _c7, (pepperiObjectInput_r28 == null ? null : pepperiObjectInput_r28.Data == null ? null : pepperiObjectInput_r28.Data.UID) + ctx_r31.SEPARATOR + (pepperiObjectInput_r28 == null ? null : pepperiObjectInput_r28.Data == null ? null : pepperiObjectInput_r28.Data.Type) === ctx_r31.selectedItemId))("ngStyle", ɵɵpureFunction2(18, _c8, ctx_r31.calculatedObjectHeight, ctx_r31.showItems || pepperiObjectInput_r28 ? "visible" : "hidden")); ɵɵadvance(1); ɵɵproperty("ngStyle", ɵɵpureFunction1(21, _c9, pepperiObjectInput_r28 == null ? null : pepperiObjectInput_r28.Data == null ? null : pepperiObjectInput_r28.Data.BackgroundColor)); ɵɵadvance(1); ɵɵproperty("checkForChanges", ctx_r31.checkForChanges)("uiControlHeader", ctx_r31.uiControl)("firstFieldAsLink", ctx_r31.firstFieldAsLink)("pepperiObjectInput", pepperiObjectInput_r28)("canEditObject", !ctx_r31.disabled && (pepperiObjectInput_r28 == null ? null : pepperiObjectInput_r28.IsEditable))("objectId", ctx_r31.objectId)("parentId", ctx_r31.parentId)("searchCode", ctx_r31.searchCode)("lockEvents", ctx_r31.disableSelectionItems)("layoutType", ctx_r31.LAYOUT_TYPE.PepperiTable)("listType", ctx_r31.listType)("isActive", ((pepperiObjectInput_r28 == null ? null : pepperiObjectInput_r28.Data == null ? null : pepperiObjectInput_r28.Data.UID) + ctx_r31.SEPARATOR + (pepperiObjectInput_r28 == null ? null : pepperiObjectInput_r28.Data == null ? null : pepperiObjectInput_r28.Data.Type) === ctx_r31.selectedItemId || (pepperiObjectInput_r28 == null ? null : pepperiObjectInput_r28.Data == null ? null : pepperiObjectInput_r28.Data.UID) + ctx_r31.SEPARATOR + (pepperiObjectInput_r28 == null ? null : pepperiObjectInput_r28.Data == null ? null : pepperiObjectInput_r28.Data.Type) === ctx_r31.hoveredItemId) && !ctx_r31.isTouchDevice)("pageType", ctx_r31.pageType); } } const _c10 = function (a0, a1) { return { highlighted: a0, cardView: a1 }; }; function PepperiInternalListComponent_ng_template_2_ng_container_0_ng_container_2_Template(rf, ctx) { if (rf & 1) { const _r45 = ɵɵgetCurrentView(); ɵɵelementContainerStart(0); ɵɵelementStart(1, "div", 24); ɵɵlistener("mouseenter", function PepperiInternalListComponent_ng_template_2_ng_container_0_ng_container_2_Template_div_mouseenter_1_listener($event) { ɵɵrestoreView(_r45); const pepperiObjectInput_r28 = ɵɵnextContext().$implicit; const ctx_r44 = ɵɵnextContext(2); return ctx_r44.onCardMouseEnter($event, pepperiObjectInput_r28 == null ? null : pepperiObjectInput_r28.Data == null ? null : pepperiObjectInput_r28.Data.UID, pepperiObjectInput_r28 == null ? null : pepperiObjectInput_r28.Data == null ? null : pepperiObjectInput_r28.Data.Type); })("mouseleave", function PepperiInternalListComponent_ng_template_2_ng_container_0_ng_container_2_Template_div_mouseleave_1_listener($event) { ɵɵrestoreView(_r45); const pepperiObjectInput_r28 = ɵɵnextContext().$implicit; const ctx_r47 = ɵɵnextContext(2); return ctx_r47.onCardMouseLeave($event, pepperiObjectInput_r28 == null ? null : pepperiObjectInput_r28.Data == null ? null : pepperiObjectInput_r28.Data.UID, pepperiObjectInput_r28 == null ? null : pepperiObjectInput_r28.Data == null ? null : pepperiObjectInput_r28.Data.Type); }); ɵɵelementStart(2, "pep-form", 25); ɵɵlistener("notifyValueChanged", function PepperiInternalListComponent_ng_template_2_ng_container_0_ng_container_2_Template_pep_form_notifyValueChanged_2_listener($event) { ɵɵrestoreView(_r45); const ctx_r49 = ɵɵnextContext(3); return ctx_r49.onValueChanged($event); })("notifyFieldClicked", function PepperiInternalListComponent_ng_template_2_ng_container_0_ng_container_2_Template_pep_form_notifyFieldClicked_2_listener($event) { ɵɵrestoreView(_r45); const ctx_r50 = ɵɵnextContext(3); return ctx_r50.onCustomizeFieldClick($event); })("notifyMenuItemClicked", function PepperiInternalListComponent_ng_template_2_ng_container_0_ng_container_2_Template_pep_form_notifyMenuItemClicked_2_listener($event) { ɵɵrestoreView(_r45); const ctx_r51 = ɵɵnextContext(3); return ctx_r51.onCustomizeFieldMenuClicked($event); })("click", function PepperiInternalListComponent_ng_template_2_ng_container_0_ng_container_2_Template_pep_form_click_2_listener($event) { ɵɵrestoreView(_r45); const pepperiObjectInput_r28 = ɵɵnextContext().$implicit; const ctx_r52 = ɵɵnextContext(2); return ctx_r52.itemClicked($event, pepperiObjectInput_r28); }); ɵɵelementEnd(); ɵɵelementEnd(); ɵɵelementContainerEnd(); } if (rf & 2) { const pepperiObjectInput_r28 = ɵɵnextContext().$implicit; const ctx_r32 = ɵɵnextContext(2); ɵɵadvance(1); ɵɵclassMap(ctx_r32.itemClass); ɵɵproperty("ngClass", ɵɵpureFunction2(18, _c10, (pepperiObjectInput_r28 == null ? null : pepperiObjectInput_r28.Data == null ? null : pepperiObjectInput_r28.Data.UID) + ctx_r32.SEPARATOR + (pepperiObjectInput_r28 == null ? null : pepperiObjectInput_r28.Data == null ? null : pepperiObjectInput_r28.Data.Type) === ctx_r32.selectedItemId, ctx_r32.isCardView))("ngStyle", ɵɵpureFunction2(21, _c8, ctx_r32.calculatedObjectHeight, ctx_r32.showItems || pepperiObjectInput_r28 ? "visible" : "hidden")); ɵɵadvance(1); ɵɵproperty("firstFieldAsLink", ctx_r32.isCardView ? ctx_r32.firstFieldAsLink : false)("checkForChanges", ctx_r32.checkForChanges)("uiControlHeader", ctx_r32.uiControl)("pepperiObjectInput", pepperiObjectInput_r28)("isCardView", ctx_r32.isCardView)("canEditObject", !ctx_r32.disabled && (pepperiObjectInput_r28 == null ? null : pepperiObjectInput_r28.IsEditable))("objectId", ctx_r32.objectId)("parentId", ctx_r32.parentId)("searchCode", ctx_r32.searchCode)("lockEvents", ctx_r32.disableSelectionItems)("layoutType", ctx_r32.getThumbnailsLayout())("listType", ctx_r32.listType)("isActive", ((pepperiObjectInput_r28 == null ? null : pepperiObjectInput_r28.Data == null ? null : pepperiObjectInput_r28.Data.UID) + ctx_r32.SEPARATOR + (pepperiObjectInput_r28 == null ? null : pepperiObjectInput_r28.Data == null ? null : pepperiObjectInput_r28.Data.Type) === ctx_r32.selectedItemId || (pepperiObjectInput_r28 == null ? null : pepperiObjectInput_r28.Data == null ? null : pepperiObjectInput_r28.Data.UID) + ctx_r32.SEPARATOR + (pepperiObjectInput_r28 == null ? null : pepperiObjectInput_r28.Data == null ? null : pepperiObjectInput_r28.Data.Type) === ctx_r32.hoveredItemId) && !ctx_r32.isTouchDevice)("pageType", ctx_r32.pageType); } } function PepperiInternalListComponent_ng_template_2_ng_container_0_Template(rf, ctx) { if (rf & 1) { ɵɵelementContainerStart(0); ɵɵtemplate(1, PepperiInternalListComponent_ng_template_2_ng_container_0_ng_container_1_Template, 4, 23, "ng-container", 0); ɵɵtemplate(2, PepperiInternalListComponent_ng_template_2_ng_container_0_ng_container_2_Template, 3, 24, "ng-container", 0); ɵɵelementContainerEnd(); } if (rf & 2) { const ctx_r27 = ɵɵnextContext(2); ɵɵadvance(1); ɵɵproperty("ngIf", ctx_r27.isTable); ɵɵadvance(1); ɵɵproperty("ngIf", !ctx_r27.isTable); } } function PepperiInternalListComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) { ɵɵtemplate(0, PepperiInternalListComponent_ng_template_2_ng_container_0_Template, 3, 2, "ng-container", 20); } if (rf & 2) { const ctx_r3 = ɵɵnextContext(); ɵɵproperty("ngForOf", ctx_r3.scrollItems)("ngForTrackBy", ctx_r3.trackByFunc); } } function PepperiInternalListComponent_ng_template_4_div_0_div_2_Template(rf, ctx) { if (rf & 1) { ɵɵelementStart(0, "div", 29); ɵɵelementStart(1, "label"); ɵɵtext(2); ɵɵelementEnd(); ɵɵelementEnd(); } if (rf & 2) { const field_r57 = ctx.$implicit; const j_r58 = ctx.index; const ctx_r56 = ɵɵnextContext(3); ɵɵproperty("ngStyle", ɵɵpureFunction1(5, _c3, field_r57.calcTitleColumnWidthString)); ɵɵadvance(1); ɵɵclassMapInterpolate1("total-label body-sm text-align-", field_r57.Layout.XAlignment, ""); ɵɵadvance(1); ɵɵtextInterpolate1(" ", ctx_r56.totalsRow[j_r58], " "); } } function PepperiInternalListComponent_ng_template_4_div_0_Template(rf, ctx) { if (rf & 1) { ɵɵelementStart(0, "div", 27); ɵɵelementStart(1, "fieldset", 10); ɵɵtemplate(2, PepperiInternalListComponent_ng_template_4_div_0_div_2_Template, 3, 7, "div", 28); ɵɵelementEnd(); ɵɵelementEnd(); } if (rf & 2) { const ctx_r55 = ɵɵnextContext(2); ɵɵadvance(2); ɵɵproperty("ngForOf", ctx_r55.uiControl == null ? null : ctx_r55.uiControl.ControlFields); } } function PepperiInternalListComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) { ɵɵtemplate(0, PepperiInternalListComponent_ng_template_4_div_0_Template, 3, 1, "div", 26); } if (rf & 2) { const ctx_r5 = ɵɵnextContext(); ɵɵproperty("ngIf", (ctx_r5.totalsRow == null ? null : ctx_r5.totalsRow.length) > 0 && ctx_r5.totalsRow.length <= (ctx_r5.uiControl == null ? null : ctx_r5.uiControl.ControlFields.length)); } } var VIEW_TYPE; (function (VIEW_TYPE) { VIEW_TYPE[VIEW_TYPE["Card"] = 0] = "Card"; VIEW_TYPE[VIEW_TYPE["Line"] = 1] = "Line"; VIEW_TYPE[VIEW_TYPE["Table"] = 2] = "Table"; })(VIEW_TYPE || (VIEW_TYPE = {})); class PepperiInternalListComponent { constructor(element, layoutService, cd, renderer) { this.element = element; this.layoutService = layoutService; this.cd = cd; this.renderer = renderer; this.currentListTypeTranslation = ''; this.noDataFoundMsg = 'Items not found'; this.hideAllSelectionInMulti = false; this.top = -1; this.listType = ''; this.objectId = '0'; this.parentId = '0'; this.searchCode = '0'; // @Input() showTopBorder = false; this.firstFieldAsLink = false; this.supportResizing = true; this.parentScroll = null; this.disabled = false; this.isPrinting = false; this.disableSelectionItems = false; this.layoutType = null; this.pageType = ''; this.totalsRow = []; this.isTouchDevice = false; this.notifyThumbnailClicked = new EventEmitter(); this.notifyFieldClicked = new EventEmitter(); this.notifyMenuItemClicked = new EventEmitter(); this.notifyValueChanged = new EventEmitter(); this.notifySelectAllSingleActionClicked = new EventEmitter(); this.notifySingleActionClicked = new EventEmitter(); this.notifyListLoad = new EventEmitter(); this.LAYOUT_TYPE = LAYOUT_TYPE; this.uiControl = null; this.totalRows = -1; this.isTable = false; this.hasColumnWidthOfTypePercentage = true; this.items = null; this.isCardView = false; this.itemsCounter = 0; this.showItems = true; this.SEPARATOR = ','; this.nativeWindow = null; this.selectedItemId = ''; this.hoveredItemId = ''; this.lockEvents = false; this.containerWidth = 0; // headerIsInFocus = false; // For resize this.pressedColumn = ''; this.startX = 0; this.startWidth = 0; this.tableStartWidth = 0; this.isUserSelected = false; this.checkForChanges = null; this.useVirtualScroll = true; this.layoutService.onResize$ .pipe(delay(0)) .subscribe(size => { this.screenSize = size; }); this.nativeWindow = window; } ngOnInit() { this.containerWidth = 0; } ngOnChanges(changes) { if (this.containerWidth <= 0) { this.setContainerWidth(); } } ngOnDestroy() { if (this.notifyValueChanged) { this.notifyValueChanged.unsubscribe(); } if (this.notifyFieldClicked) { this.notifyFieldClicked.unsubscribe(); } if (this.notifyMenuItemClicked) { this.notifyMenuItemClicked.unsubscribe(); } if (this.notifyThumbnailClicked) { this.notifyThumbnailClicked.unsubscribe(); } } setContainerWidth() { const selectionCheckBoxWidth = 0; const rowHeight = 40; // the table row height (2.5rem * 16font-size). const style = window.getComputedStyle(this.element.nativeElement.parentElement); // The container-fluid class padding left + right + border const containerFluidSpacing = parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10); const parentContainer = this.element.nativeElement.parentElement.parentElement > 0 ? this.element.nativeElement.parentElement.parentElement : this.element.nativeElement.parentElement; // Calculate if vertical scroll should appear, if so set the scroll width. (this.totalRows + 1) + 1 is for the header row. const scrollWidth = parentContainer.clientHeight < rowHeight * (this.totalRows + 1) ? 18 : 0; // 18 is the default scroll width. // The selectionCheckBoxWidth width + containerFluidSpacing + scrollWidth. const rowHeaderWidthToSub = containerFluidSpacing + selectionCheckBoxWidth + scrollWidth; this.containerWidth = parentContainer.offsetWidth - rowHeaderWidthToSub; } removeTable() { this.cleanItems(); this.uiControl = null; } toggleItems(isVisible) { this.showItems = isVisible; this.lockEvents = !isVisible; } updateScrollItems(startIndex, endIndex, loadInChunks = true) { this.scrollItems = this.items.slice(startIndex, endIndex); } getUniqItemId(itemId, itemType = '') { return itemId + this.SEPARATOR + itemType; } setLayout() { const self = this; if (this.totalRows === 0 || !this.uiControl || !this.uiControl.ControlFields || this.uiControl.ControlFields.length === 0) { return; } this.uiControl.ControlFields.forEach((cf) => { if (cf.ColumnWidth === 0) { cf.ColumnWidth = 10; } if (self.isTable && (cf.FieldType === FIELD_TYPE.Image || // cf.FieldType === FIELD_TYPE.Indicators || ??? cf.FieldType === FIELD_TYPE.Signature || cf.FieldType === FIELD_TYPE.NumberIntegerQuantitySelector || cf.FieldType === FIELD_TYPE.NumberRealQuantitySelector || cf.FieldType === FIELD_TYPE.NumberIntegerForMatrix || cf.FieldType === FIELD_TYPE.NumberRealForMatrix || cf.FieldType === FIELD_TYPE.Package || cf.ApiName === 'UnitsQuantity' || cf.ApiName === 'QuantitySelector')) { cf.Layout.XAlignment = 3; } }); if (!this.cd['destroyed']) { this.cd.detectChanges(); } // Set the columns width. if (this.containerWidth <= 0) { this.setContainerWidth(); } this.calcColumnsWidth(); this.checkForChanges = new Date().getTime(); } calcColumnsWidth() { const fixedMultiple = 3.78; // for converting em to pixel. const length = this.uiControl.ControlFields.length; const selectionCheckBoxWidth = 0; // Is table AND there is at least one column of width type of percentage. if (this.isTable) { if (this.uiControl && this.uiControl.ControlFields) { this.hasColumnWidthOfTypePercentage = this.uiControl.ControlFields.filter(cf => cf.ColumnWidthType === 1).length === 0; } } // If the columns size is fixed and the total is small then the container change it to percentage. if (!this.hasColumnWidthOfTypePercentage) { const totalFixedColsWidth = this.uiControl.ControlFields .map(cf => cf.ColumnWidth * fixedMultiple) .reduce((sum, current) => sum + current); if (window.innerWidth > totalFixedColsWidth) { this.hasColumnWidthOfTypePercentage = true; } } let totalCalcColsWidth = 0; // Calc by percentage if (this.hasColumnWidthOfTypePercentage) { const totalColsWidth = this.uiControl.ControlFields.map(cf => cf.ColumnWidth).reduce((sum, current) => sum + current); for (let index = 0; index < length; index++) { const uiControlField = this.uiControl.ControlFields[index]; const calcColumnWidthPercentage = (100 / totalColsWidth) * uiControlField.ColumnWidth; uiControlField.calcColumnWidth = Math.floor((this.containerWidth * calcColumnWidthPercentage) / 100); if (index === length - 1) { uiControlField.calcTitleColumnWidthString = uiControlField.calcColumnWidthString = 'calc(100% - ' + totalCalcColsWidth + 'px)'; // For 100% } else { uiControlField.calcTitleColumnWidthString = uiControlField.calcColumnWidthString = uiControlField.calcColumnWidth + 'px'; totalCalcColsWidth += uiControlField.calcColumnWidth; } } this.renderer.setStyle(this.element.nativeElement, 'width', 'inherit'); } else { for (let index = 0; index < length; index++) { const uiControlField = this.uiControl.ControlFields[index]; const currentFixedWidth = Math.floor(uiControlField.ColumnWidth * fixedMultiple); if (index === length - 1) { uiControlField.calcTitleColumnWidthString = currentFixedWidth + 'px'; uiControlField.calcColumnWidthString = currentFixedWidth - 4 + 'px'; // -4 for the row padding. } else { uiControlField.calcTitleColumnWidthString = uiControlField.calcColumnWidthString = currentFixedWidth + 'px'; } totalCalcColsWidth += currentFixedWidth; } this.renderer.setStyle(this.element.nativeElement, 'width', totalCalcColsWidth + selectionCheckBoxWidth + 'px'); } } initResizeData() { this.startX = 0; this.startWidth = 0; this.tableStartWidth = 0; this.pressedColumn = ''; } onListResizeStart(event, apiName) { this.pressedColumn = apiName; this.startX = event.x; this.startWidth = event.target.closest('.header-column').offsetWidth; // Set the tableStartWidth to the container offsetWidth this.tableStartWidth = this.noVirtualScrollCont.nativeElement.offsetWidth; } onListResize(event) { if (this.pressedColumn.length > 0) { const widthToAdd = this.layoutService.isRtl() ? this.startX - event.x : event.x - this.startX; // Set the width of the column and the container of the whole columns. if (this.startWidth + widthToAdd >= 48 || widthToAdd > 0) { const length = this.uiControl.ControlFields.length; let totalCalcColsWidth = 0; for (let index = 0; index < length; index++) { const uiControlField = this.uiControl.ControlFields[index]; if (index === length - 1) { // Calc the last column only in percentage type. if (this.hasColumnWidthOfTypePercentage) { uiControlField.calcTitleColumnWidthString = uiControlField.calcColumnWidthString = 'calc(100% - ' + totalCalcColsWidth + 'px)'; // For 100% } else { if (uiControlField.ApiName === this.pressedColumn) { uiControlField.calcColumnWidth = this.startWidth + widthToAdd; uiControlField.calcTitleColumnWidthString = uiControlField.calcColumnWidth + 'px'; uiControlField.calcColumnWidthString = uiControlField.calcColumnWidth - 4 + 'px'; } } } else if (uiControlField.ApiName === this.pressedColumn) { uiControlField.calcColumnWidth = this.startWidth + widthToAdd; uiControlField.calcTitleColumnWidthString = uiControlField.calcColumnWidthString = uiControlField.calcColumnWidth + 'px'; } totalCalcColsWidth += uiControlField.calcColumnWidth; } this.renderer.setStyle(this.element.nativeElement, 'width', this.tableStartWidth + widthToAdd + 'px'); } this.checkForChanges = new Date().getTime(); } } onListResizeEnd(event) { if (this.pressedColumn.length > 0) { if (event && $(event.srcElement).parents('.resizeBox').length > 0) { this.initResizeData(); } else { const self = this; setTimeout(() => { self.initResizeData(); }, 0); } } } onListHeaderMouseEnter(event) { // this.headerIsInFocus = true; } onListHeaderMouseLeave(event) { // this.headerIsInFocus = false; this.onListResizeEnd(event); this.initResizeData(); } onListChange(event) { if (this.isPrinting) { return; } // For other events do nothing. if (typeof event.start === 'undefined' || typeof event.end === 'undefined') { return; } this.calculatedObjectHeight = event.calculatedChildHeight + 'px'; if (!this.lockEvents) { this.toggleItems(false); this.updateScrollItems(event.start, event.end, false); this.toggleItems(true); } } onListLoad(event) { this.notifyListLoad.emit(event); } getParentContainer() { return this.parentScroll ? this.parentScroll : window; } onValueChanged(valueChanged) { if (this.disabled) { return; } this.notifyValueChanged.emit(valueChanged); } onCustomizeFieldClick(customizeFieldClickedData) { if (this.disabled) { return; } this.notifyFieldClicked.emit(customizeFieldClickedData); } onCustomizeFieldMenuClicked(customizeFieldClickedData) { if (this.disabled) { return; } this.notifyMenuItemClicked.emit(customizeFieldClickedData); } getIsDisabled(pepperiObjectInput) { if (this.disableSelectionItems) { return true; } else { const IsNotSelectableForActions = (pepperiObjectInput === null || pepperiObjectInput === void 0 ? void 0 : pepperiObjectInput.Data) && !pepperiObjectInput.Data.IsSelectableForActions; return IsNotSelectableForActions; } } itemClicked(e, objectSingleData) { // Set seleted item const itemId = objectSingleData.Data.UID.toString(); const itemType = objectSingleData.Data.Type.toString(); let isChecked = false; if (objectSingleData && objectSingleData.Data && objectSingleData.Data.IsSelectableForActions) { this.selectedItemId = this.getUniqItemId(itemId, itemType); isChecked = true; } if (!this.isTable) { if (this.disabled) { return; } this.notifyThumbnailClicked.emit(objectSingleData); } } onTableRowMouseEnter(event, itemId, itemType) { if (this.isTouchDevice) { return; } const uniqItemId = this.getUniqItemId(itemId, itemType); this.hoveredItemId = uniqItemId; } onTableRowMouseLeave(event, itemId, itemType) { this.hoveredItemId = ''; } onCardMouseEnter(event, itemId, itemType) { if (this.isTouchDevice) { return; } const uniqItemId = this.getUniqItemId(itemId, itemType); this.hoveredItemId = uniqItemId; } onCardMouseLeave(event, itemId, itemType) { this.hoveredItemId = ''; } getThumbnailsLayout() { return this.layoutType == null ? LAYOUT_TYPE.PepperiCard : this.layoutType; } // call this function after resize + animation end winResize(e) { this.containerWidth = 0; this.setLayout(); } trackByFunc(index, item) { return item && item.Data && item.Data.UID ? item.Data.UID : index; } cleanItems() { this.itemsCounter = 0; this.items = this.totalRows > 0 ? Array(this.totalRows) : []; this.scrollItems = []; this.calculatedObjectHeight = ''; } getUIControl() { return this.uiControl; } initListData(uiControl, totalRows, items, viewType = VIEW_TYPE.Table, itemClass = '') { this.isCardView = viewType === VIEW_TYPE.Card; this.uiControl = uiControl; this.itemClass = itemClass; this.selectedItemId = ''; this.isTable = viewType === VIEW_TYPE.Table; this.totalRows = totalRows; // fix bug for the scrollTo that doesn't work on edge div , not window const scrollingElement = this.getParentContainer(); scrollingElement.scrollTo(0, 0); this.cleanItems(); this.updateListItems(items, null); this.onListLoad(null); this.setLayout(); } updateListItems(items, event) { this.scrollItems = this.items = items; this.itemsCounter = items.length; } updateListItem(data) { let index = 0; // Update items list index = this.items.findIndex(i => i && i.Data && i.Data.UID === data.UID); if (index >= 0 && index < this.items.length) { this.items[index].Data = data; } // Update scrollItems list index = this.scrollItems.findIndex(i => i && i.Data && i.Data.UID === data.UID); if (index >= 0 && index < this.scrollItems.length) { this.scrollItems[index].Data = data; this.checkForChanges = new Date().getTime(); } } getIsItemEditable(uid) { const item = this.items.filter(x => x.Data.UID.toString() === uid); if (item.length > 0) { return item[0].Data.IsEditable; } else { return false; } } getItemDataByID(uid) { var _a; return (_a = this.items.find(item => item.Data.UID.toString() === uid)) === null || _a === void 0 ? void 0 : _a.Data; } } PepperiInternalListComponent.ɵfac = function PepperiInternalListComponent_Factory(t) { return new (t || PepperiInternalListComponent)(ɵɵdirectiveInject(ElementRef), ɵɵdirectiveInject(LayoutService), ɵɵdirectiveInject(ChangeDetectorRef), ɵɵdirectiveInject(Renderer2)); }; PepperiInternalListComponent.ɵcmp = ɵɵdefineComponent({ type: PepperiInternalListComponent, selectors: [["pep-internal-list"]], viewQuery: function PepperiInternalListComponent_Query(rf, ctx) { if (rf & 1) { ɵɵviewQuery(_c0$1, true); ɵɵviewQuery(_c1, true); ɵɵviewQuery(_c2, true); } if (rf & 2) { var _t; ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.noVirtualScrollCont = _t.first); ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.tableHeader = _t.first); ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.selectAllCB = _t.first); } }, hostBindings: function PepperiInternalListComponent_HostBindings(rf, ctx) { if (rf & 1) { ɵɵlistener("resize", function PepperiInternalListComponent_resize_HostBindingHandler($event) { return ctx.winResize($event); }, false, ɵɵresolveWindow); } }, inputs: { currentListTypeTranslation: "currentListTypeTranslation", noDataFoundMsg: "noDa