@pepperi-addons/ngx-lib 0.2.61-query-builder.2 → 0.3.0

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

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PepFormModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":73,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":75,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":76,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":78,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":79,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":80,"character":8},{"__symbolic":"reference","module":"@angular/material/grid-list","name":"MatGridListModule","line":81,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":82,"character":8},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":83,"character":8},{"__symbolic":"reference","module":"ngx-signaturepad","name":"SignaturePadModule","line":85,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":87,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogModule","line":88,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":89,"character":8},[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/address","name":"PepAddressModule","line":46,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/attachment","name":"PepAttachmentModule","line":47,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/button","name":"PepButtonModule","line":48,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/carousel","name":"PepCarouselModule","line":49,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/checkbox","name":"PepCheckboxModule","line":50,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/date","name":"PepDateModule","line":51,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/image","name":"PepImageModule","line":52,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/images-filmstrip","name":"PepImagesFilmstripModule","line":53,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/quantity-selector","name":"PepQuantitySelectorModule","line":54,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/rich-html-textarea","name":"PepRichHtmlTextareaModule","line":55,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/select","name":"PepSelectModule","line":56,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/separator","name":"PepSeparatorModule","line":57,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/signature","name":"PepSignatureModule","line":58,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/textarea","name":"PepTextareaModule","line":59,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/textbox","name":"PepTextboxModule","line":60,"character":4}],{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":91,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/group-buttons","name":"PepGroupButtonsModule","line":92,"character":8}],"exports":[{"__symbolic":"reference","name":"PepFormComponent"}],"declarations":[{"__symbolic":"reference","name":"PepFormComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵh"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":107,"character":41}]}]}},"IPepFormFieldValueChangeEvent":{"__symbolic":"interface"},"IPepFormFieldClickEvent":{"__symbolic":"interface"},"PepFormComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":86,"character":1},"arguments":[{"selector":"pep-form","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":90,"character":21},"member":"OnPush"},"template":"<fieldset *ngIf=\"form\" [formGroup]=\"form\" [disabled]=\"isLocked\" class=\"pep-form\"\r\n    [ngStyle]=\"{ 'background-color': layoutType == 'card' && data?.BackgroundColor }\">\r\n    <!-- New Form -->\r\n    <mat-grid-list *ngIf=\"layoutType == 'form'\" [cols]=\"columns\" [rowHeight]=\"rowHeight + 'rem'\"\r\n        [gutterSize]=\"formGutterSize\">\r\n        <mat-grid-tile *ngFor=\"let field of fields$ | async\" [rowspan]=\"field.rowSpan\" [colspan]=\"field.colSpan\">\r\n            <pep-field-generator *ngIf=\"field.controlType != 'placeholder'\" [form]=\"form\" [layoutType]=\"layoutType\"\r\n                [checkForChanges]=\"checkForChanges\" [uid]=\"data?.UID\" [field]=\"field\" [showTitle]=\"showTitle\"\r\n                (valueChange)=\"onValueChanged($event)\" (elementClick)=\"onClick($event)\"\r\n                (internalFormFieldClick)=\"onInternalFormFieldClicked($event)\"\r\n                (internalFormFieldChange)=\"onInternalFormFieldChanged($event)\"\r\n                (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\"\r\n                (formValidationChange)=\"onFormValidationChanged($event)\">\r\n            </pep-field-generator>\r\n        </mat-grid-tile>\r\n    </mat-grid-list>\r\n\r\n    <!-- Thumbnails -->\r\n    <mat-grid-list *ngIf=\"layoutType == 'card'\" [cols]=\"columns\" [rowHeight]=\"rowHeight + 'rem'\"\r\n        [gutterSize]=\"cardGutterSize\" class=\"card-spacing\">\r\n        <mat-grid-tile *ngFor=\"let field of fields$ | async\" [rowspan]=\"field.rowSpan\" [colspan]=\"field.colSpan\"\r\n            [ngStyle]=\"{ overflow: field.type == 'qs' ? 'unset' : 'hidden' }\">\r\n            <pep-field-generator *ngIf=\"field.controlType != 'placeholder'\" [form]=\"form\" [layoutType]=\"layoutType\"\r\n                [ngClass]=\"{ 'lock-events': lockEvents }\" [isActive]=\"isActive\" [checkForChanges]=\"checkForChanges\"\r\n                [uid]=\"data?.UID\" [field]=\"field\" [showTitle]=\"showTitle\" (valueChange)=\"onValueChanged($event)\"\r\n                (elementClick)=\"onClick($event)\" (internalFormFieldClick)=\"onInternalFormFieldClicked($event)\"\r\n                (internalFormFieldChange)=\"onInternalFormFieldChanged($event)\"\r\n                (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\">\r\n            </pep-field-generator>\r\n        </mat-grid-tile>\r\n    </mat-grid-list>\r\n\r\n    <ng-container *ngIf=\"layoutType == 'table'\">\r\n        <ng-container *ngIf=\"isReport; then reportBlock; else notReportBlock\"></ng-container>\r\n        <ng-template #reportBlock>\r\n            <ng-container *ngTemplateOutlet=\"report\"></ng-container>\r\n        </ng-template>\r\n        <ng-template #notReportBlock>\r\n            <div *ngFor=\"let field of fields$ | async; let j = index\" class=\"pull-left flip table-cell \"\r\n                [ngClass]=\"['text-align-' + field.xAlignment]\" style=\"height: 100%\"\r\n                [ngStyle]=\"{ width: (layout?.ControlFields)[j]?.calcColumnWidthString}\">\r\n                <pep-field-generator *ngIf=\"field.controlType != 'placeholder'\" [checkForChanges]=\"checkForChanges\"\r\n                    [uid]=\"data?.UID\" [field]=\"field\" [form]=\"form\" [layoutType]=\"layoutType\" [showTitle]=\"false\"\r\n                    (elementClick)=\"onClick($event)\" (valueChange)=\"onValueChanged($event)\"\r\n                    (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\"\r\n                    [isActive]=\"isActive\">\r\n                </pep-field-generator>\r\n            </div>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <!------- For testing ------------\r\n    {{ form.value | json }}\r\n    {{ form.valid }}\r\n    ---------------------------------->\r\n</fieldset>\r\n\r\n<ng-template #report>\r\n    <div *ngFor=\"let field of fields$ | async; let j = index\" class=\"pull-left flip pep-report-fields\"\r\n        [ngStyle]=\"{ width: (layout?.ControlFields)[j]?.calcColumnWidthString }\"\r\n        [ngClass]=\"['text-align-' + field.xAlignment]\">\r\n        <ng-container [ngSwitch]=\"field.controlType\">\r\n            <pep-image *ngSwitchCase=\"'image'\" [uid]=\"data?.UID\" [form]=\"form\" [key]=\"field.key\"\r\n                [src]=\"field.formattedValue\" [srcLarge]=\"field.value\" [options]=\"field.options\" [label]=\"field.label\"\r\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\r\n                [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [layoutType]=\"layoutType\"\r\n                (elementClick)=\"onClick($event)\">\r\n            </pep-image>\r\n\r\n            <pep-signature *ngSwitchCase=\"'signature'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\"\r\n                [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\r\n                [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\r\n                [layoutType]=\"layoutType\">\r\n            </pep-signature>\r\n\r\n            <pep-checkbox *ngSwitchCase=\"'checkbox'\" [form]=\"form\" [key]=\"field.key\"\r\n                [value]=\"(field.value | lowercase) == 'true' || field.value == '1' ? true : false\" [label]=\"field.label\"\r\n                [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\r\n                [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\r\n                [additionalValue]=\"field.additionalValue\" [layoutType]=\"layoutType\">\r\n            </pep-checkbox>\r\n\r\n            <pep-date *ngSwitchCase=\"'date'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\r\n                [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\r\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\r\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\r\n                [minValue]=\"field.minValue\" [maxValue]=\"field.maxValue\" [layoutType]=\"layoutType\">\r\n            </pep-date>\r\n\r\n            <pep-internal-button *ngSwitchCase=\"'button'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\r\n                [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\r\n                [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\r\n                [layoutType]=\"layoutType\" (elementClick)=\"onClick($event)\">\r\n            </pep-internal-button>\r\n\r\n            <pep-textarea *ngSwitchCase=\"'textarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\r\n                [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\r\n                [readonly]=\"field.readonly\" [maxFieldCharacters]=\"field.maxFieldCharacters\"\r\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\r\n                [layoutType]=\"layoutType\">\r\n            </pep-textarea>\r\n\r\n            <pep-quantity-selector *ngSwitchCase=\"'qs'\" [id]=\"field.key\" [form]=\"form\" [key]=\"field.key\"\r\n                [value]=\"field.value\" [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\r\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\r\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\r\n                [layoutType]=\"layoutType\" (valueChange)=\"onValueChanged($event)\" (elementClick)=\"onClick($event)\">\r\n            </pep-quantity-selector>\r\n\r\n            <ng-container *ngSwitchDefault>\r\n                <ng-container *ngIf=\"field.formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\">\r\n                </ng-container>\r\n                <ng-template #notEmptyBlock>\r\n                    <ng-container\r\n                        *ngIf=\"field.controlType === 'attachment' || field.type === 'link'; then linkBlock; else notLinkBlock\">\r\n                    </ng-container>\r\n                    <ng-template #linkBlock>\r\n                        <a [id]=\"field.key\" class=\"color-link body-sm pep-report-input readonly\"\r\n                            *ngIf=\"field.formattedValue != null\" title=\"{{ field.formattedValue }}\" target=\"_blank\"\r\n                            href=\"{{ field.value }}\">{{ field.formattedValue }}</a>\r\n                    </ng-template>\r\n                    <ng-template #notLinkBlock>\r\n                        <span [id]=\"field.key\" class=\"body-sm pep-report-input readonly\"\r\n                            title=\"{{ field.formattedValue }}\" [ngStyle]=\"{ color: field.textColor }\">{{\r\n                            field.formattedValue }}</span>\r\n                    </ng-template>\r\n                </ng-template>\r\n                <ng-template #emptyBlock>\r\n                    <span>&nbsp;</span>\r\n                </ng-template>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>","styles":[":host{display:grid}"]}]}],"members":{"isReport":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"layout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":94,"character":5}}]}],"lockEvents":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":5}}]}],"canEditObject":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":5}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":116,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":117,"character":5}}]}],"objectId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":5}}]}],"parentId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":5}}]}],"searchCode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":121,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":122,"character":5}}]}],"firstFieldAsLink":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":123,"character":5}}]}],"checkForChanges":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":126,"character":5}}]}],"formValidationChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":128,"character":5}}]}],"fieldClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":131,"character":5}}]}],"internalFormFieldClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":134,"character":5}}]}],"internalFormFieldChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":135,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":174,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":175,"character":38},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":176,"character":31},{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":177,"character":20},{"__symbolic":"reference","module":"@angular/core","name":"KeyValueDiffers","line":178,"character":17},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":179,"character":27}]}],"convertXAlignToHorizontalAlign":[{"__symbolic":"method"}],"convertYAlignToVerticalAlign":[{"__symbolic":"method"}],"convertOptionalValues":[{"__symbolic":"method"}],"convertAddressFields":[{"__symbolic":"method"}],"isMatrixField":[{"__symbolic":"method"}],"doesFieldHavaFloatingField":[{"__symbolic":"method"}],"getOptionsForCustomField":[{"__symbolic":"method"}],"convertToCustomField":[{"__symbolic":"method"}],"getFieldFormattedValue":[{"__symbolic":"method"}],"toControlGroup":[{"__symbolic":"method"}],"createBaseField":[{"__symbolic":"method"}],"showFormValidationMessage":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"getUiControlFields":[{"__symbolic":"method"}],"initFieldsStructure":[{"__symbolic":"method"}],"setForm":[{"__symbolic":"method"}],"initForm":[{"__symbolic":"method"}],"updateField":[{"__symbolic":"method"}],"updateForm":[{"__symbolic":"method"}],"ReloadForm":[{"__symbolic":"method"}],"getFormControlById":[{"__symbolic":"method"}],"setSpecialFields":[{"__symbolic":"method"}],"convertCustomFields":[{"__symbolic":"method"}],"onFormValidationChanged":[{"__symbolic":"method"}],"onValueChanged":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"onInternalFormFieldClicked":[{"__symbolic":"method"}],"onInternalFormFieldChanged":[{"__symbolic":"method"}],"onFormValueChanged":[{"__symbolic":"method"}],"onFormFieldClick":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"selector":"pep-field-generator","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":23,"character":19},"member":"Emulated"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":24,"character":21},"member":"OnPush"},"template":"<ng-container [ngSwitch]=\"field.controlType\" [formGroup]=\"form\">\r\n\r\n    <pep-address *ngSwitchCase=\"'address'\" [form]=\"form\" [key]=\"field.key\" [formattedValue]=\"field.formattedValue\"\r\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\r\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [groupFields]=\"field.groupFields\"\r\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (addressValueChange)=\"onAddressValueChanged($event, field)\">\r\n    </pep-address>\r\n\r\n    <pep-attachment *ngSwitchCase=\"'attachment'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\"\r\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\r\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [isActive]=\"isActive\" [showTitle]=\"showTitle\"\r\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\r\n        (fileChange)=\"onFileChanged($event, field)\">\r\n    </pep-attachment>\r\n\r\n    <pep-checkbox *ngSwitchCase=\"'checkbox'\" [form]=\"form\" [key]=\"field.key\"\r\n        [value]=\"(field.value | lowercase) == 'true' || field.value == '1' ? true : false\" [label]=\"field.label\"\r\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\r\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [additionalValue]=\"field.additionalValue\"\r\n        [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\r\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\r\n    </pep-checkbox>\r\n\r\n    <pep-date *ngSwitchCase=\"'date'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\r\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\" [mandatory]=\"field.mandatory\"\r\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [textColor]=\"field.textColor\"\r\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [minValue]=\"field.minValue\"\r\n        [maxValue]=\"field.maxValue\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\r\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\r\n    </pep-date>\r\n\r\n    <pep-images-filmstrip *ngSwitchCase=\"'images'\" [uid]=\"uid\" [form]=\"form\" [key]=\"field.key\" [label]=\"field.label\"\r\n        [showTitle]=\"showTitle\" [rowSpan]=\"field.rowSpan\" [value]=\"field.value\" [layoutType]=\"layoutType\">\r\n    </pep-images-filmstrip>\r\n\r\n    <pep-image *ngSwitchCase=\"'image'\" [uid]=\"uid\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.formattedValue\"\r\n        [srcLarge]=\"field.value\" [options]=\"field.options\" [label]=\"field.label\" [mandatory]=\"field.mandatory\"\r\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\r\n        [rowSpan]=\"field.rowSpan\" [indicatorsField]=\"field.indicatorsField\" [menuField]=\"field.menuField\"\r\n        [hasCampaignField]=\"field.hasCampaignField\" [sizeLimitMB]=\"field.sizeLimitMB\" [isActive]=\"isActive\"\r\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\r\n        (fileChange)=\"onFileChanged($event, field)\">\r\n    </pep-image>\r\n\r\n    <pep-quantity-selector *ngSwitchCase=\"'qs'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\r\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\" [mandatory]=\"field.mandatory\"\r\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [textColor]=\"field.textColor\"\r\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [allowDecimal]=\"field.allowDecimal\"\r\n        [additionalValue]=\"field.additionalValue\" [notificationInfo]=\"field.notificationInfo\" [isActive]=\"isActive\"\r\n        [layoutType]=\"layoutType\" [showTitle]=\"showTitle\" [visible]=\"field.visible\"\r\n        (valueChange)=\"onValueChanged($event, field)\" (formValidationChange)=\"onFormValidationChanged($event)\"\r\n        (elementClick)=\"onClick($event)\">\r\n    </pep-quantity-selector>\r\n\r\n    <pep-rich-html-textarea *ngSwitchCase=\"'richhtmltextarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\r\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\r\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\r\n        [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\r\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\r\n    </pep-rich-html-textarea>\r\n\r\n    <pep-select *ngSwitchCase=\"'select'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [label]=\"field.label\"\r\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\r\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [options]=\"field.options\" [showTitle]=\"showTitle\"\r\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (valueChange)=\"onValueChanged($event, field)\"\r\n        (formValidationChange)=\"onFormValidationChanged($event)\" [isActive]=\"isActive\">\r\n    </pep-select>\r\n\r\n    <pep-separator *ngSwitchCase=\"'separator'\" [form]=\"form\" [key]=\"field.key\" [label]=\"field.label\"\r\n        [xAlignment]=\"field.xAlignment\" [layoutType]=\"layoutType\" [visible]=\"field.visible\">\r\n    </pep-separator>\r\n\r\n    <pep-signature *ngSwitchCase=\"'signature'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\" [label]=\"field.label\"\r\n        [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\r\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [isActive]=\"isActive\" [layoutType]=\"layoutType\"\r\n        [visible]=\"field.visible\" (fileChange)=\"onFileChanged($event, field)\">\r\n    </pep-signature>\r\n\r\n    <pep-textarea *ngSwitchCase=\"'textarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [label]=\"field.label\"\r\n        [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\r\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\"\r\n        [rowSpan]=\"field.rowSpan\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\r\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\r\n    </pep-textarea>\r\n\r\n    <pep-textbox *ngSwitchCase=\"'textbox'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\r\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [placeholder]=\"field.placeholder\"\r\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\r\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\"\r\n        [rowSpan]=\"field.rowSpan\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\"\r\n        (valueChange)=\"onValueChanged($event, field)\" (formValidationChange)=\"onFormValidationChanged($event)\"\r\n        [isActive]=\"isActive\" [visible]=\"field.visible\">\r\n    </pep-textbox>\r\n\r\n    <pep-indicators *ngSwitchCase=\"'indicators'\" [key]=\"field.key\" [value]=\"field.value\" [layoutType]=\"layoutType\">\r\n    </pep-indicators>\r\n    <pep-internal-button *ngSwitchCase=\"'button'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\r\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\"\r\n        [referenceObjectInternalType]=\"field.referenceObjectInternalType\" [type]=\"field.type\"\r\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\r\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\r\n        (valueChange)=\"onValueChanged($event, field)\">\r\n    </pep-internal-button>\r\n    <pep-internal-menu *ngSwitchCase=\"'menu'\" [key]=\"field.key\" [label]=\"field.label\" [disabled]=\"field.disabled\"\r\n        [xAlignment]=\"field.xAlignment\" [options]=\"field.options\" [layoutType]=\"layoutType\"\r\n        (elementClick)=\"onClick($event)\">\r\n    </pep-internal-menu>\r\n    <pep-internal-page *ngSwitchCase=\"'internalPage'\" [field]=\"field\" [layoutType]=\"layoutType\"\r\n        (internalFormFieldClick)=\"onInternalFormFieldClick($event)\"\r\n        (internalFormFieldChange)=\"onInternalFormFieldChanged($event)\">\r\n    </pep-internal-page>\r\n\r\n    <pep-internal-carusel *ngSwitchCase=\"'internalCarusel'\" [field]=\"field\"\r\n        (internalFormFieldClick)=\"onInternalFormFieldClick($event)\"\r\n        (internalFormFieldChange)=\"onInternalFormFieldChanged($event)\">\r\n    </pep-internal-carusel>\r\n\r\n    <ng-container *ngSwitchCase=\"'placeholder'\">\r\n    </ng-container>\r\n</ng-container>","styles":[":host{width:100%;height:100%}"]}]}],"members":{"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"uid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"checkForChanges":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":43,"character":5}}]}],"formValidationChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":45,"character":5}}]}],"elementClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":5}}]}],"internalFormFieldChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":50,"character":5}}]}],"internalFormFieldClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":51,"character":5}}]}],"formValueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":53,"character":5}}]}],"formFieldClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":5}}]}],"ngOnDestroy":[{"__symbolic":"method"}],"onFileChanged":[{"__symbolic":"method"}],"onAddressValueChanged":[{"__symbolic":"method"}],"onValueChanged":[{"__symbolic":"method"}],"onInternalFormFieldChanged":[{"__symbolic":"method"}],"onFormValidationChanged":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"onInternalFormFieldClick":[{"__symbolic":"method"}],"onFormValueChanged":[{"__symbolic":"method"}],"onFormFieldClick":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"pep-indicators","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":7,"character":21},"member":"OnPush"},"template":"<div class=\"indicators-container\" [ngClass]=\"{ 'is-inside-table': layoutType === 'table' }\">\r\n    <ng-container *ngFor=\"let value of value?.split(';')\">\r\n        <pep-icon name=\"indicator_dot_placeholder\" class=\"pull-left flip\" [fill]=\"value\"></pep-icon>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"key != 'ItemIndicatorsWithoutCampaign' && value?.split(';').length < 4\">\r\n        <pep-icon name=\"indicator_dot_placeholder\" class=\"pull-left flip\"></pep-icon>\r\n    </ng-container>\r\n</div>","styles":[":host{height:inherit;display:grid}:host>*{align-self:center}.indicators-container{height:2.5rem}.indicators-container pep-icon{height:1rem;width:1rem;margin:.05rem}.indicators-container.is-inside-table{height:1rem;display:flex;justify-content:center;align-items:center}",".indicators-container .svg-icon{fill:hsla(0,0%,100%,.5);fill: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)}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":5}}]}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":28,"character":1},"arguments":[{"selector":"pep-internal-button","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":32,"character":21},"member":"OnPush"},"template":"<ng-container [ngSwitch]=\"type\">\r\n    <ng-container *ngSwitchCase=\"'reference'\">\r\n        <ng-container *ngIf=\"layoutType === 'form'; then formBlock; else notFormBlock\"></ng-container>\r\n        <ng-template #formBlock>\r\n            <div class=\"pep-button-container reference-button\">\r\n                <pep-field-title [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\" [xAlignment]=\"xAlignment\"\r\n                    [showTitle]=\"showTitle\">\r\n                </pep-field-title>\r\n                <ng-container *ngIf=\"createNewReference; then newBlock; else existingBlock\"></ng-container>\r\n                <ng-template #newBlock>\r\n                    <button mat-button [id]=\"key\" title=\"{{ formattedValue }}\" class=\"pep-button md regular\"\r\n                        (click)=\"onButtonClicked($event)\" [ngClass]=\"{\r\n                            disabled: disabled,\r\n                            'pull-left': xAlignment == 'left',\r\n                            'pull-right': xAlignment == 'right',\r\n                            'center-alignment': xAlignment == 'center'\r\n                        }\">\r\n                        <span class=\"ellipsis pull-left flip button-title-with-icon\">{{ 'ACTIONS.CREATE_NEW' | translate\r\n                            }}</span>\r\n                        <mat-icon class=\"pull-right flip\" pepRtlClass>\r\n                            <pep-icon name=\"number_plus\" (click)=\"onButtonClicked($event)\">\r\n                            </pep-icon>\r\n                        </mat-icon>\r\n                    </button>\r\n                </ng-template>\r\n                <ng-template #existingBlock>\r\n                    <pep-group-buttons [buttons]=\"referenceButtons\" styleType=\"regular\" viewType=\"split\">\r\n                    </pep-group-buttons>\r\n                </ng-template>\r\n            </div>\r\n        </ng-template>\r\n        <ng-template #notFormBlock>\r\n            <ng-container *ngTemplateOutlet=\"linkTemplate\"></ng-container>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <ng-container *ngSwitchCase=\"'listofobjects'\">\r\n        <ng-container *ngIf=\"layoutType === 'form'; then formBlock; else notFormBlock\"></ng-container>\r\n        <ng-template #formBlock>\r\n            <ng-container *ngTemplateOutlet=\"buttonTemplate; context: {internal: true}\"></ng-container>\r\n        </ng-template>\r\n        <ng-template #notFormBlock>\r\n            <ng-container *ngTemplateOutlet=\"linkTemplate\"></ng-container>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <ng-container *ngSwitchCase=\"'button'\">\r\n        <ng-container [ngSwitch]=\"key\">\r\n            <ng-container *ngSwitchCase=\"'ObjectMenu'\">\r\n                <span (click)=\"onButtonClicked($event)\" title=\"{{ key }}\">\r\n                    <mat-icon>\r\n                        <pep-icon *ngIf=\"key == 'ObjectMenu'\" name=\"system_menu\">\r\n                        </pep-icon>\r\n                    </mat-icon>\r\n                </span>\r\n            </ng-container>\r\n\r\n            <ng-container *ngSwitchCase=\"'Agents' || 'ContactPersons' || 'Buyers'\">\r\n                <ng-container *ngIf=\"layoutType === 'table'; then tableBlock; else nonTableBlock\">\r\n                </ng-container>\r\n                <ng-template #nonTableBlock>\r\n                    <ng-container *ngTemplateOutlet=\"buttonTemplate; context: {internal: true}\"></ng-container>\r\n                </ng-template>\r\n                <ng-template #tableBlock>\r\n                    <span [id]=\"key\" title=\"{{ formattedValue }}\" class=\"pep-report-input readonly body-sm\">{{\r\n                        formattedValue }}</span>\r\n                </ng-template>\r\n            </ng-container>\r\n\r\n            <ng-container *ngSwitchDefault>\r\n                <ng-container *ngIf=\"layoutType === 'form'; then buttonBlock; else linkBlock\">\r\n                </ng-container>\r\n\r\n                <ng-template #buttonBlock>\r\n                    <ng-container *ngTemplateOutlet=\"buttonTemplate; context: {internal: false}\"></ng-container>\r\n                </ng-template>\r\n                <ng-template #linkBlock>\r\n                    <ng-container *ngTemplateOutlet=\"linkTemplate\"></ng-container>\r\n                </ng-template>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #buttonTemplate let-internal=\"internal\">\r\n    <div class=\"pep-button-container\">\r\n        <pep-field-title [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\" [xAlignment]=\"xAlignment\"\r\n            [showTitle]=\"showTitle\">\r\n        </pep-field-title>\r\n\r\n        <ng-container *ngIf=\"internal; then internalButtonTemplate; else regularButtonTemplate\"></ng-container>\r\n        <ng-template #regularButtonTemplate>\r\n            <button [id]=\"key\" title=\"{{ formattedValue }}\" mat-button class=\"pep-button md regular\"\r\n                dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\" (click)=\"onButtonClicked($event)\"\r\n                [disabled]=\"disabled\"\r\n                [ngClass]=\"{disabled: disabled, 'pull-left': xAlignment == 'left', 'pull-right': xAlignment == 'right', 'center-alignment': xAlignment == 'center'}\">\r\n                {{ formattedValue }}\r\n            </button>\r\n        </ng-template>\r\n\r\n        <ng-template #internalButtonTemplate>\r\n            <button [id]=\"key\" title=\"{{ formattedValue }}\" mat-button class=\"pep-button md regular\"\r\n                dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\" (click)=\"openReferenceObjectInternal($event)\"\r\n                [disabled]=\"disabled\"\r\n                [ngClass]=\"{disabled: disabled, 'pull-left': xAlignment == 'left', 'pull-right': xAlignment == 'right', 'center-alignment': xAlignment == 'center'}\">\r\n                <ng-container *ngIf=\"formattedValue == '0' || formattedValue == ''; then newBlock; else existingBlock\">\r\n                </ng-container>\r\n                <ng-template #newBlock>\r\n                    <span class=\"pull-left flip button-title-with-icon\">{{ 'LIST.SELECT' | translate }}&nbsp;</span>\r\n                    <mat-icon>\r\n                        <pep-icon name=\"number_plus\">\r\n                        </pep-icon>\r\n                    </mat-icon>\r\n                </ng-template>\r\n                <ng-template #existingBlock>\r\n                    <span class=\"pull-left flip button-title-with-icon\">{{ formattedValue }}&nbsp;{{ 'LIST.SELECTED' |\r\n                        translate\r\n                        }}&nbsp;</span>\r\n                    <mat-icon>\r\n                        <pep-icon name=\"system_edit\">\r\n                        </pep-icon>\r\n                    </mat-icon>\r\n                </ng-template>\r\n            </button>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #linkTemplate>\r\n    <ng-container *ngIf=\"formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\r\n    <ng-template #notEmptyBlock>\r\n        <a href=\"{{ value }}\" (mousedown)=\"hrefFunction($event)\" class=\"color-link\">\r\n            <span *ngIf=\"layoutType === 'table'\" [id]=\"key\" title=\"{{ formattedValue }}\"\r\n                class=\"body-sm pep-report-input readonly\">\r\n                {{ formattedValue }}\r\n            </span>\r\n            <span *ngIf=\"layoutType !== 'table'\" [id]=\"key\" title=\"{{ formattedValue }}\" class=\"body-sm pep-card-input\"\r\n                style=\"display: block;\">\r\n                {{ formattedValue }}\r\n            </span>\r\n        </a>\r\n    </ng-template>\r\n    <ng-template #emptyBlock>\r\n        <span>&nbsp;</span>\r\n    </ng-template>\r\n</ng-template>","styles":[":host{height:inherit;display:grid}:host>*{align-self:center}.pep-button-container,.pepperi-button-container{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.pep-button-container .center-alignment,.pepperi-button-container .center-alignment{position:absolute;left:50%;transform:translate(-50%)}.pep-button-container.reference-button .split-buttons,.pep-button-container.reference-button ::ng-deep.split-buttons,.pepperi-button-container.reference-button .split-buttons,.pepperi-button-container.reference-button ::ng-deep.split-buttons{float:left}.pep-button-container.reference-button .split-buttons button:last-of-type,.pep-button-container.reference-button ::ng-deep.split-buttons button:last-of-type,.pepperi-button-container.reference-button .split-buttons button:last-of-type,.pepperi-button-container.reference-button ::ng-deep.split-buttons button:last-of-type{width:1.5rem;padding:0}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"formattedValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"referenceObjectInternalType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":5}}]}],"elementClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":74,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":76,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":96,"character":38},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":97,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":98,"character":25}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onButtonClicked":[{"__symbolic":"method"}],"hrefFunction":[{"__symbolic":"method"}],"openReferenceObjectInternal":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":28,"character":1},"arguments":[{"selector":"pep-internal-list","host":{"(window:resize)":"winResize($event)","$quoted$":["(window:resize)"]},"template":"<ng-container *ngIf=\"totalRows == 0\">\r\n    <div class=\"pep-border-bottom\">\r\n        <p class=\"title-xl no-data\">\r\n            {{ (noDataFoundMsg ? noDataFoundMsg : 'LIST.NO_DATA_FOUND') | translate}}\r\n        </p>\r\n    </div>\r\n    <div class=\"no-data-suggestions\">\r\n        <p class=\"suggestions-title title-lg\">\r\n            {{ 'LIST.NO_DATA_FOUND_SUGGESTIONS_TITLE' | translate}}\r\n        </p>\r\n        <ul class=\"suggestions-list body-lg\" [innerHtml]=\"'LIST.NO_DATA_FOUND_SUGGESTIONS_LIST' | translate\"></ul>\r\n    </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"totalRows > 0\">\r\n    <div *ngIf=\"isTable\" #tableHeader class=\"table-header\" (mouseup)=\"onListResizeEnd($event)\"\r\n        (mouseenter)=\"onListHeaderMouseEnter($event)\" (mouseleave)=\"onListHeaderMouseLeave($event)\"\r\n        (mousemove)=\"onListResize($event)\">\r\n\r\n        <div class=\"table-header-padding-top\"></div>\r\n        <fieldset class=\"table-header-fieldset\">\r\n            <fieldset>\r\n                <div *ngFor=\"let field of uiControl?.ControlFields; let j = index\" class=\"header-column pull-left flip\"\r\n                    [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\" [ngClass]=\"{\r\n                            'is-resizing': field.ApiName === pressedColumn,\r\n                            'is-first': j === 0,\r\n                            'is-last': j === uiControl?.ControlFields?.length - 1\r\n                        }\">\r\n                    <label *ngIf=\"field.Title != ''\" id=\"{{ field.ApiName }}\"\r\n                        class=\"header-label body-sm pull-left flip text-align-{{ field.Layout.XAlignment }}\"\r\n                        title=\"{{ field.Title }}\">\r\n                        {{ field.Title }}\r\n                    </label>\r\n                    <label *ngIf=\"field.Title == ''\" id=\"{{ field.ApiName }}\"\r\n                        class=\"header-label body-sm pull-left flip\">&nbsp;</label>\r\n\r\n                    <div *ngIf=\"supportResizing\" class=\"resize-box pull-right flip\"\r\n                        (mousedown)=\"onListResizeStart($event, field.ApiName)\">\r\n                        <div class=\"splitter\"></div>\r\n                    </div>\r\n                </div>\r\n            </fieldset>\r\n        </fieldset>\r\n    </div>\r\n\r\n    <div #noVirtualScrollCont [ngClass]=\"{ 'table-body': isTable, 'cards-body': !isTable }\">\r\n        <ng-container *ngTemplateOutlet=\"listData\"></ng-container>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"listTotals\"></ng-container>\r\n</ng-container>\r\n\r\n<ng-template #listData>\r\n    <ng-container *ngFor=\"let item of scrollItems; let i = index; let isFirst = first; trackBy: trackByFunc\">\r\n        <ng-container *ngIf=\"isTable\">\r\n            <div class=\"table-row\" (mouseenter)=\"onTableRowMouseEnter($event, item?.UID, item?.Type)\"\r\n                (mouseleave)=\"onTableRowMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\r\n                        selected: getIsItemSelected(item?.UID, item?.Type),\r\n                        highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId\r\n                    }\"\r\n                [ngStyle]=\"{ height: calculatedObjectHeight, visibility: showItems || item ? 'visible' : 'hidden' }\">\r\n                <fieldset class=\"table-row-fieldset\" [ngStyle]=\"{ 'background-color': item?.BackgroundColor }\">\r\n                    <!-- [canEditObject]=\"!disabled && item?.IsEditable\" -->\r\n                    <pep-form [checkForChanges]=\"checkForChanges\" [layout]=\"uiControl\" [data]=\"item\"\r\n                        [canEditObject]=\"!disabled\" [objectId]=\"objectId\" [parentId]=\"parentId\"\r\n                        [searchCode]=\"searchCode\" [lockEvents]=\"disableSelectionItems\" [layoutType]=\"'table'\"\r\n                        [isActive]=\"\r\n                                (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\r\n                                item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\r\n                            \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\r\n                        (click)=\"itemClicked($event, item)\">\r\n                    </pep-form>\r\n                </fieldset>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"!isTable\">\r\n            <div [class]=\"itemClass\" (mouseenter)=\"onCardMouseEnter($event, item?.UID, item?.Type)\"\r\n                (mouseleave)=\"onCardMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\r\n                        selected: getIsItemSelected(item?.UID, item?.Type),\r\n                        highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId,\r\n                        'card-view': viewType === 'cards',\r\n                        'line-view': viewType === 'lines'\r\n                    }\" class=\"pull-left flip\"\r\n                [ngStyle]=\"{ height: calculatedObjectHeight, visibility: showItems || item ? 'visible' : 'hidden' }\">\r\n                <!-- [canEditObject]=\"!disabled && item?.IsEditable\" -->\r\n                <pep-form [checkForChanges]=\"checkForChanges\" [layout]=\"uiControl\" [data]=\"item\"\r\n                    [canEditObject]=\"!disabled\" [objectId]=\" objectId\" [parentId]=\"parentId\" [searchCode]=\"searchCode\"\r\n                    [lockEvents]=\"disableSelectionItems\" [layoutType]=\"'card'\" [isActive]=\"\r\n                            (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\r\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\r\n                        \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\r\n                    (click)=\"itemClicked($event, item)\">\r\n                </pep-form>\r\n            </div>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #listTotals>\r\n    <div *ngIf=\"totalsRow?.length > 0 && totalsRow.length <= uiControl?.ControlFields.length\" class=\"table-total\">\r\n        <fieldset class=\"table-header-fieldset\">\r\n            <div *ngFor=\"let field of uiControl?.ControlFields; let j = index\" class=\"total-column pull-left flip\"\r\n                [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\">\r\n                <label class=\"total-label body-sm text-align-{{ field.Layout.XAlignment }}\">\r\n                    {{ totalsRow[j] }}\r\n                </label>\r\n            </div>\r\n        </fieldset>\r\n    </div>\r\n</ng-template>","styles":[":host{height:inherit;display:grid}.no-data{margin:2rem 0;margin:var(--pep-spacing-2xl,2rem) 0}.no-data-suggestions .suggestions-title{margin:1rem 0 .5rem;margin:var(--pep-spacing-lg,1rem) 0 var(--pep-spacing-sm,.5rem)}.no-data-suggestions .suggestions-list{margin:0;padding:0;-webkit-padding-start:2rem;padding-inline-start:2rem;-webkit-padding-start:var(--pep-spacing-2xl,2rem);padding-inline-start:var(--pep-spacing-2xl,2rem)}.table-header{top:0}"]}]}],"members":{"noDataFoundMsg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"hideAllSelectionInMulti":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"top":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"objectId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"parentId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"searchCode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"supportResizing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"parentScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"disableEvents":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"disableSelectionItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"totalsRow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"fieldClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":5}}]}],"noVirtualScrollCont":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":59,"character":5},"arguments":["noVirtualScrollCont"]}]}],"tableHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":60,"character":5},"arguments":["tableHeader"]}]}],"selectAllCB":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":61,"character":5},"arguments":["selectAllCB"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":106,"character":25},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":107,"character":31},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":108,"character":20},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":109,"character":26}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"setContainerWidth":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"toggleItems":[{"__symbolic":"method"}],"updateScrollItems":[{"__symbolic":"method"}],"getUniqItemId":[{"__symbolic":"method"}],"setLayout":[{"__symbolic":"method"}],"calcColumnsWidth":[{"__symbolic":"method"}],"initResizeData":[{"__symbolic":"method"}],"onListResizeStart":[{"__symbolic":"method"}],"onListResize":[{"__symbolic":"method"}],"getParent":[{"__symbolic":"method"}],"onListResizeEnd":[{"__symbolic":"method"}],"onListHeaderMouseEnter":[{"__symbolic":"method"}],"onListHeaderMouseLeave":[{"__symbolic":"method"}],"onListChange":[{"__symbolic":"method"}],"getParentContainer":[{"__symbolic":"method"}],"onValueChanged":[{"__symbolic":"method"}],"onCustomizeFieldClick":[{"__symbolic":"method"}],"getIsDisabled":[{"__symbolic":"method"}],"getIsItemSelected":[{"__symbolic":"method"}],"setItemClicked":[{"__symbolic":"method"}],"itemClicked":[{"__symbolic":"method"}],"onTableRowMouseEnter":[{"__symbolic":"method"}],"onTableRowMouseLeave":[{"__symbolic":"method"}],"onCardMouseEnter":[{"__symbolic":"method"}],"onCardMouseLeave":[{"__symbolic":"method"}],"winResize":[{"__symbolic":"method"}],"trackByFunc":[{"__symbolic":"method"}],"cleanItems":[{"__symbolic":"method"}],"getUIControl":[{"__symbolic":"method"}],"initListData":[{"__symbolic":"method"}],"updateItems":[{"__symbolic":"method"}],"updateItem":[{"__symbolic":"method"}],"getIsItemEditable":[{"__symbolic":"method"}],"getItemDataByID":[{"__symbolic":"method"}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":17,"character":1},"arguments":[{"selector":"pep-internal-menu","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":21,"character":21},"member":"OnPush"},"template":"<ng-container *ngIf=\"options?.length > 0; then subMenuBlock; else noSubMenuBlock\"></ng-container>\r\n<ng-template #noSubMenuBlock>\r\n    <button (click)=\"menuClicked($event)\" title=\"{{ label }}\" mat-button\r\n        class=\"pep-button icon-button weak {{ layoutType === 'table' ? 'sm' : 'md' }}\" [ngClass]=\"{\r\n            'lock-events': disabled,\r\n            'left-alignment': xAlignment == 'left',\r\n            'right-alignment': xAlignment == 'right',\r\n            'center-alignment': xAlignment == 'center',\r\n            'invert': invertClass\r\n        }\">\r\n        <mat-icon>\r\n            <pep-icon name=\"system_menu\">\r\n            </pep-icon>\r\n        </mat-icon>\r\n    </button>\r\n</ng-template>\r\n\r\n<ng-template #subMenuBlock>\r\n    <button mat-button [matMenuTriggerFor]=\"menu\" menu-blur\r\n        class=\"pep-button icon-button weak {{ layoutType === 'table' ? 'sm' : 'md' }}\" [ngClass]=\"{\r\n            'left-alignment': xAlignment == 'left',\r\n            'right-alignment': xAlignment == 'right',\r\n            'center-alignment': xAlignment == 'center',\r\n            'invert': invertClass\r\n        }\" title=\"{{ label }}\">\r\n        <mat-icon>\r\n            <pep-icon name=\"system_menu\">\r\n            </pep-icon>\r\n        </mat-icon>\r\n    </button>\r\n\r\n    <mat-menu #menu=\"matMenu\" xPosition=\"{{xAlignment == 'right' ? 'after' : 'before'}}\"\r\n        [ngClass]=\"{ rtlMenu: xAlignment == 'right' }\">\r\n        <button *ngFor=\"let option of options\" mat-menu-item (click)=\"menuItemClicked(option.key)\">\r\n            <span>{{ option.value | translate }}</span>\r\n        </button>\r\n    </mat-menu>\r\n\r\n</ng-template>","styles":[":host{height:inherit;display:grid}:host>*{align-self:center}.pep-button,.pepperi-button{cursor:pointer}.pep-button.left-alignment,.pepperi-button.left-alignment{justify-self:flex-start}.pep-button.center-alignment,.pepperi-button.center-alignment{justify-self:center}.pep-button.right-alignment,.pepperi-button.right-alignment{justify-self:flex-end}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"invertClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"elementClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":35,"character":5}}]}],"ngOnDestroy":[{"__symbolic":"method"}],"menuClicked":[{"__symbolic":"method"}],"menuItemClicked":[{"__symbolic":"method"}]}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":39,"character":1},"arguments":[{"selector":"pep-internal-page","providers":[{"__symbolic":"reference","name":"ɵg"}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":44,"character":21},"member":"OnPush"},"template":"<ng-template #matrixHeaderTemplate>\r\n    <div class=\"matrix-title-container pep-border-bottom align-{{\r\n            field.xAlignment\r\n        }}\" title=\"{{ field.label }}\">\r\n        <span class=\"block-with-text body-md\">{{ field.label }}</span>\r\n\r\n        <div class=\"buttons-container pep-spacing-element-negative pull-right flip\">\r\n            <ng-container *ngIf=\"\r\n                    currentViewType?.Key == 'OrderCenterMatrix' &&\r\n                    additionalApiNames &&\r\n                    additionalApiNames.length > 0\r\n                \">\r\n                <button class=\"pep-spacing-element pep-button icon-button sm weak\" mat-button [matMenuTriggerFor]=\"menu\"\r\n                    menu-blur>\r\n                    <span class=\"pull-left flip\" *ngIf=\"currentAdditionalApiName\">&nbsp;{{\r\n                        currentAdditionalApiName?.Value }}&nbsp;</span>\r\n\r\n                    <mat-icon [ngClass]=\"{'pull-left flip': currentAdditionalApiName}\">\r\n                        <pep-icon name=\"system_info\"></pep-icon>\r\n                    </mat-icon>\r\n                </button>\r\n                <mat-menu #menu=\"matMenu\" xPosition=\"before\">\r\n                    <button mat-menu-item [ngClass]=\"{\r\n                            selected: currentAdditionalApiName === null\r\n                        }\" (click)=\"changeAdditionalApiName(null)\">\r\n                        <span>{{ \"LIST.NONE\" | translate }}</span>\r\n                    </button>\r\n                    <button mat-menu-item [ngClass]=\"{\r\n                            selected:\r\n                                currentAdditionalApiName?.Key ==\r\n                                additionalApiName?.Key\r\n                        }\" *ngFor=\"let additionalApiName of additionalApiNames\"\r\n                        (click)=\"changeAdditionalApiName(additionalApiName)\">\r\n                        <span>{{ additionalApiName.Value }}</span>\r\n                    </button>\r\n                </mat-menu>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"childViewTypes && childViewTypes.length > 1\">\r\n                <button class=\"pep-spacing-element pep-button icon-button sm weak\" mat-button\r\n                    [matMenuTriggerFor]=\"viewsMenu\" menu-blur>\r\n                    <mat-icon>\r\n                        <pep-icon name=\"view_card_md\"></pep-icon>\r\n                    </mat-icon>\r\n                </button>\r\n\r\n                <mat-menu #viewsMenu=\"matMenu\" xPosition=\"before\">\r\n                    <button mat-menu-item [ngClass]=\"{\r\n                            selected: currentViewType?.Key == viewType?.Key\r\n                        }\" *ngFor=\"let viewType of childViewTypes\" (click)=\"changeChildrenViewType(viewType?.Key)\">\r\n                        <mat-icon [ngSwitch]=\"viewType?.Key\">\r\n                            <pep-icon *ngSwitchCase=\"'OrderCenterMatrix'\" name=\"view_matrix\"></pep-icon>\r\n                            <pep-icon *ngSwitchCase=\"'OrderCenterFlatMatrixGrid'\" name=\"view_table\"></pep-icon>\r\n                            <pep-icon *ngSwitchCase=\"'OrderCenterFlatMatrixLine'\" name=\"view_line\"></pep-icon>\r\n                        </mat-icon>\r\n                        <span>{{ viewType?.Value }}</span>\r\n                    </button>\r\n                </mat-menu>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #matrixTemplate>\r\n    <div #matrixContainer class=\"matrix-container\">\r\n        <pep-internal-list (valueChange)=\"onCustomizeObjectChanged($event)\" [parentScroll]=\"matrixContainer\"\r\n            (fieldClick)=\"onCustomizeFieldClick($event)\" [totalsRow]=\"totalsRow\"></pep-internal-list>\r\n    </div>\r\n</ng-template>\r\n\r\n<div #mainViewCont id=\"mainViewCont\" [ngStyle]=\"{ 'max-width': viewWidth, 'max-height': viewHeight }\">\r\n    <div #my1mm id=\"my1_mm\" style=\"height:1mm;width:1mm;visibility: hidden;\"></div>\r\n    <ng-container *ngIf=\"coverChildTable && uiControl != null\">\r\n        <div class=\"table-cover\"></div>\r\n        <button (click)=\"showMatrixDialog()\" class=\"pep-button strong sm table-cover-button\"\r\n            [ngClass]=\"{ 'lineview-btn': currentViewType?.Key == 'OrderCenterFlatMatrixLine'}\">\r\n            {{ \"INTERNAL_PAGE.CLICK_TO_ORDER\" | translate }}\r\n        </button>\r\n    </ng-container>\r\n\r\n    <ng-container *ngTemplateOutlet=\"matrixHeaderTemplate\"></ng-container>\r\n    <ng-container #orgCont></ng-container>\r\n</div>\r\n\r\n<ng-template #matrixDialogTemplate>\r\n\r\n    <div mat-dialog-title>\r\n        <ng-container *ngTemplateOutlet=\"matrixHeaderTemplate\"></ng-container>\r\n    </div>\r\n\r\n    <div mat-dialog-content>\r\n        <ng-container #dialogCont></ng-container>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- <div id=\"childGridModal\" bsModal (onShown)=\"onShown()\" (onHidden)=\"onHidden()\" #childModal=\"bs-modal\" class=\"modal\"\r\n    tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"gridModalLabel\" aria-hidden=\"true\">\r\n    <div class=\"modal-dialog\" role=\"document\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-body matrix-dialog-body\">\r\n                <ng-container #modalCont></ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div> -->","styles":[":host{display:grid;width:inherit;height:inherit}.matrix-title-container{padding:0;height:2.5rem;height:var(--pep-form-field-height,2.5rem);display:flex;align-items:flex-end}.matrix-title-container .block-with-text{width:100%;max-height:inherit;font-weight:600;font-weight:var(--pep-font-weight-bold,600);display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.matrix-title-container .buttons-container{display:flex;align-self:center}.matrix-title-container .buttons-container .pep-button,.matrix-title-container .buttons-container .pepperi-button{width:-webkit-max-content;width:-moz-max-content;width:max-content}#mainViewCont{width:100%;height:inherit;overflow:hidden;padding:0 .25rem;padding:0 var(--pep-spacing-xs,.25rem)}#mainViewCont .table-cover{background-color:#fff;z-index:98;position:absolute;top:0;width:100%;height:inherit;opacity:.5}#mainViewCont .table-cover-button{position:absolute;left:50%;transform:translate(-50%,-50%);top:calc(50% + 2.5rem);top:calc(50% + var(--pep-form-field-height, 2.5rem));z-index:99}#mainViewCont .table-cover-button.lineview-btn{top:calc(2 * 2.5rem);top:calc(2 * var(--pep-form-field-height, 2.5rem));transform:translate(-50%)}#mainViewCont .underCover{max-height:inherit;overflow:hidden}#mainViewCont ::ng-deep.table-header{top:unset!important}"]}]}],"members":{"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"internalFormFieldChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":5}}]}],"internalFormFieldClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":57,"character":5}}]}],"my1mm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":60,"character":5},"arguments":["my1mm"]}]}],"mainViewCont":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":61,"character":5},"arguments":["mainViewCont"]}]}],"orgCont":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":63,"character":5},"arguments":["orgCont",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":63,"character":34}}]}]}],"dialogCont":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":64,"character":5},"arguments":["dialogCont",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":64,"character":37}}]}]}],"matrixTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":66,"character":5},"arguments":["matrixTemplate"]}]}],"matrixDialogTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":67,"character":5},"arguments":["matrixDialogTemplate",{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":67,"character":47}}]}]}],"customList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":70,"character":5},"arguments":[{"__symbolic":"reference","name":"ɵd"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":102,"character":22},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":103,"character":31},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":105,"character":37},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":106,"character":28},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":107,"character":35}]}],"fillData":[{"__symbolic":"method"}],"fillChildData":[{"__symbolic":"method"}],"mmToPx":[{"__symbolic":"method"}],"isMatrixView":[{"__symbolic":"method"}],"isFlatMatrixView":[{"__symbolic":"method"}],"isTableView":[{"__symbolic":"method"}],"changeChildrenViewType":[{"__symbolic":"method"}],"setViewCover":[{"__symbolic":"method"}],"showMatrixDialog":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"loadLastAdditionalApiName":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"changeAdditionalApiName":[{"__symbolic":"method"}],"setTotalsRow":[{"__symbolic":"method"}],"updateChanges":[{"__symbolic":"method"}],"setValueCallback":[{"__symbolic":"method"}],"onCustomizeObjectChanged":[{"__symbolic":"method"}],"onCustomizeFieldClick":[{"__symbolic":"method"}]},"statics":{"CURRENT_ADDITIONAL_API_NAME":"item_details_currentAdditionalApiName"}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepHttpService","line":12,"character":37}]}],"getBaseParentUrl":[{"__symbolic":"method"}],"getChildren":[{"__symbolic":"method"}],"initDetails":[{"__symbolic":"method"}],"changeChildrenViewType":[{"__symbolic":"method"}],"changeAdditionalApiName":[{"__symbolic":"method"}],"childPlusClick":[{"__symbolic":"method"}],"childMinusClick":[{"__symbolic":"method"}],"childValueChanged":[{"__symbolic":"method"}]}},"ɵh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":32,"character":1},"arguments":[{"selector":"pep-internal-carusel","providers":[{"__symbolic":"reference","name":"ɵi"}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":37,"character":21},"member":"OnPush"},"template":"<div class=\"carousel-container\">\r\n    <ng-container *ngIf=\"items?.length > 0; then carouselBlock; else emptyBlock\"></ng-container>\r\n    <ng-template #emptyBlock>\r\n        <!-- No items -->\r\n    </ng-template>\r\n    <ng-template #carouselBlock>\r\n        <pep-button *ngIf=\"screenSize <= PepScreenSizeType.SM\" [iconName]=\"'arrow_left_alt'\" [styleType]=\"'regular'\"\r\n            [disabled]=\"prevDisabled\" (click)=\"moveLeft()\" class=\"carousel-arrow start-arrow\">\r\n        </pep-button>\r\n        <pep-carousel #carousel [xWheelEnabled]=\"false\" [snapDuration]=\"duration\"\r\n            (reachesLeftBound)=\"onReachesLeftBound($event)\" (reachesRightBound)=\"onReachesRightBound($event)\">\r\n            <ng-container *ngFor=\"let item of items\">\r\n                <pep-form pepCarouselItem [layout]=\"layout\" [data]=\"item\" [layoutType]=\"'card'\" class=\"card-view \"\r\n                    (valueChange)=\"onCustomizeObjectChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\">\r\n                </pep-form>\r\n            </ng-container>\r\n        </pep-carousel>\r\n        <pep-button *ngIf=\"screenSize <= PepScreenSizeType.SM\" [iconName]=\"'arrow_right_alt'\" [styleType]=\"'regular'\"\r\n            [disabled]=\"nextDisabled\" (click)=\"moveRight()\" class=\"carousel-arrow end-arrow\">\r\n        </pep-button>\r\n    </ng-template>\r\n</div>","styles":[".carousel-container{position:relative;margin:0;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:.5rem 0!important;padding:var(--pep-spacing-sm,.5rem) 0!important}.carousel-container ::ng-deep.carousel-content .card-view:first-child{-webkit-padding-start:.5rem!important;padding-inline-start:.5rem!important;-webkit-padding-start:var(--pep-spacing-sm,.5rem)!important;padding-inline-start:var(--pep-spacing-sm,.5rem)!important}.carousel-container ::ng-deep.carousel-content .card-view:last-child{-webkit-padding-end:.5rem!important;padding-inline-end:.5rem!important;-webkit-padding-end:var(--pep-spacing-sm,.5rem)!important;padding-inline-end:var(--pep-spacing-sm,.5rem)!important}"]}]}],"members":{"carousel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":40,"character":5},"arguments":["carousel",{"read":{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/carousel","name":"PepCarouselComponent","line":40,"character":35}}]}]}],"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5}}]}],"internalFormFieldChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":60,"character":5}}]}],"internalFormFieldClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":62,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":85,"character":22},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":86,"character":31},{"__symbolic":"reference","name":"ɵi"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onCustomizeObjectChanged":[{"__symbolic":"method"}],"onCustomizeFieldClick":[{"__symbolic":"method"}],"moveLeft":[{"__symbolic":"method"}],"moveRight":[{"__symbolic":"method"}],"moveTo":[{"__symbolic":"method"}],"onReachesLeftBound":[{"__symbolic":"method"}],"onReachesRightBound":[{"__symbolic":"method"}]}},"ɵi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepHttpService","line":7,"character":37}]}],"emitEvent":[{"__symbolic":"method"}]}}},"origins":{"PepFormModule":"./form.module","IPepFormFieldValueChangeEvent":"./form.component","IPepFormFieldClickEvent":"./form.component","PepFormComponent":"./form.component","ɵa":"./field-generator.component","ɵb":"./indicators.component","ɵc":"./internal-button.component","ɵd":"./internal-list.component","ɵe":"./internal-menu.component","ɵf":"./internal-page.component","ɵg":"./internal-page.service","ɵh":"./internal-carusel.component","ɵi":"./internal-carusel.service"},"importAs":"@pepperi-addons/ngx-lib/form"}
+{"__symbolic":"module","version":4,"metadata":{"PepFormModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":73,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":75,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":76,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":78,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":79,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":80,"character":8},{"__symbolic":"reference","module":"@angular/material/grid-list","name":"MatGridListModule","line":81,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":82,"character":8},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":83,"character":8},{"__symbolic":"reference","module":"ngx-signaturepad","name":"SignaturePadModule","line":85,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":87,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogModule","line":88,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":89,"character":8},[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/address","name":"PepAddressModule","line":46,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/attachment","name":"PepAttachmentModule","line":47,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/button","name":"PepButtonModule","line":48,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/carousel","name":"PepCarouselModule","line":49,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/checkbox","name":"PepCheckboxModule","line":50,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/date","name":"PepDateModule","line":51,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/image","name":"PepImageModule","line":52,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/images-filmstrip","name":"PepImagesFilmstripModule","line":53,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/quantity-selector","name":"PepQuantitySelectorModule","line":54,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/rich-html-textarea","name":"PepRichHtmlTextareaModule","line":55,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/select","name":"PepSelectModule","line":56,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/separator","name":"PepSeparatorModule","line":57,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/signature","name":"PepSignatureModule","line":58,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/textarea","name":"PepTextareaModule","line":59,"character":4},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/textbox","name":"PepTextboxModule","line":60,"character":4}],{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":91,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/group-buttons","name":"PepGroupButtonsModule","line":92,"character":8}],"exports":[{"__symbolic":"reference","name":"PepFormComponent"}],"declarations":[{"__symbolic":"reference","name":"PepFormComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵh"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":107,"character":41}]}]}},"IPepFormFieldValueChangeEvent":{"__symbolic":"interface"},"IPepFormFieldClickEvent":{"__symbolic":"interface"},"PepFormComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":86,"character":1},"arguments":[{"selector":"pep-form","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":90,"character":21},"member":"OnPush"},"template":"<fieldset *ngIf=\"form\" [formGroup]=\"form\" [disabled]=\"isLocked\" class=\"pep-form\"\n    [ngStyle]=\"{ 'background-color': layoutType == 'card' && data?.BackgroundColor }\">\n    <!-- New Form -->\n    <mat-grid-list *ngIf=\"layoutType == 'form'\" [cols]=\"columns\" [rowHeight]=\"rowHeight + 'rem'\"\n        [gutterSize]=\"formGutterSize\">\n        <mat-grid-tile *ngFor=\"let field of fields$ | async\" [rowspan]=\"field.rowSpan\" [colspan]=\"field.colSpan\">\n            <pep-field-generator *ngIf=\"field.controlType != 'placeholder'\" [form]=\"form\" [layoutType]=\"layoutType\"\n                [checkForChanges]=\"checkForChanges\" [uid]=\"data?.UID\" [field]=\"field\" [showTitle]=\"showTitle\"\n                (valueChange)=\"onValueChanged($event)\" (elementClick)=\"onClick($event)\"\n                (internalFormFieldClick)=\"onInternalFormFieldClicked($event)\"\n                (internalFormFieldChange)=\"onInternalFormFieldChanged($event)\"\n                (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\"\n                (formValidationChange)=\"onFormValidationChanged($event)\">\n            </pep-field-generator>\n        </mat-grid-tile>\n    </mat-grid-list>\n\n    <!-- Thumbnails -->\n    <mat-grid-list *ngIf=\"layoutType == 'card'\" [cols]=\"columns\" [rowHeight]=\"rowHeight + 'rem'\"\n        [gutterSize]=\"cardGutterSize\" class=\"card-spacing\">\n        <mat-grid-tile *ngFor=\"let field of fields$ | async\" [rowspan]=\"field.rowSpan\" [colspan]=\"field.colSpan\"\n            [ngStyle]=\"{ overflow: field.type == 'qs' ? 'unset' : 'hidden' }\">\n            <pep-field-generator *ngIf=\"field.controlType != 'placeholder'\" [form]=\"form\" [layoutType]=\"layoutType\"\n                [ngClass]=\"{ 'lock-events': lockEvents }\" [isActive]=\"isActive\" [checkForChanges]=\"checkForChanges\"\n                [uid]=\"data?.UID\" [field]=\"field\" [showTitle]=\"showTitle\" (valueChange)=\"onValueChanged($event)\"\n                (elementClick)=\"onClick($event)\" (internalFormFieldClick)=\"onInternalFormFieldClicked($event)\"\n                (internalFormFieldChange)=\"onInternalFormFieldChanged($event)\"\n                (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\">\n            </pep-field-generator>\n        </mat-grid-tile>\n    </mat-grid-list>\n\n    <ng-container *ngIf=\"layoutType == 'table'\">\n        <ng-container *ngIf=\"isReport; then reportBlock; else notReportBlock\"></ng-container>\n        <ng-template #reportBlock>\n            <ng-container *ngTemplateOutlet=\"report\"></ng-container>\n        </ng-template>\n        <ng-template #notReportBlock>\n            <div *ngFor=\"let field of fields$ | async; let j = index\" class=\"pull-left flip table-cell \"\n                [ngClass]=\"['text-align-' + field.xAlignment]\" style=\"height: 100%\"\n                [ngStyle]=\"{ width: (layout?.ControlFields)[j]?.calcColumnWidthString}\">\n                <pep-field-generator *ngIf=\"field.controlType != 'placeholder'\" [checkForChanges]=\"checkForChanges\"\n                    [uid]=\"data?.UID\" [field]=\"field\" [form]=\"form\" [layoutType]=\"layoutType\" [showTitle]=\"false\"\n                    (elementClick)=\"onClick($event)\" (valueChange)=\"onValueChanged($event)\"\n                    (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\"\n                    [isActive]=\"isActive\">\n                </pep-field-generator>\n            </div>\n        </ng-template>\n    </ng-container>\n\n    <!------- For testing ------------\n    {{ form.value | json }}\n    {{ form.valid }}\n    ---------------------------------->\n</fieldset>\n\n<ng-template #report>\n    <div *ngFor=\"let field of fields$ | async; let j = index\" class=\"pull-left flip pep-report-fields\"\n        [ngStyle]=\"{ width: (layout?.ControlFields)[j]?.calcColumnWidthString }\"\n        [ngClass]=\"['text-align-' + field.xAlignment]\">\n        <ng-container [ngSwitch]=\"field.controlType\">\n            <pep-image *ngSwitchCase=\"'image'\" [uid]=\"data?.UID\" [form]=\"form\" [key]=\"field.key\"\n                [src]=\"field.formattedValue\" [srcLarge]=\"field.value\" [options]=\"field.options\" [label]=\"field.label\"\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n                [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [layoutType]=\"layoutType\"\n                (elementClick)=\"onClick($event)\">\n            </pep-image>\n\n            <pep-signature *ngSwitchCase=\"'signature'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\"\n                [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\n                [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [layoutType]=\"layoutType\">\n            </pep-signature>\n\n            <pep-checkbox *ngSwitchCase=\"'checkbox'\" [form]=\"form\" [key]=\"field.key\"\n                [value]=\"(field.value | lowercase) == 'true' || field.value == '1' ? true : false\" [label]=\"field.label\"\n                [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\n                [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [additionalValue]=\"field.additionalValue\" [layoutType]=\"layoutType\">\n            </pep-checkbox>\n\n            <pep-date *ngSwitchCase=\"'date'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n                [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [minValue]=\"field.minValue\" [maxValue]=\"field.maxValue\" [layoutType]=\"layoutType\">\n            </pep-date>\n\n            <pep-internal-button *ngSwitchCase=\"'button'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n                [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\n                [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\n                [layoutType]=\"layoutType\" (elementClick)=\"onClick($event)\">\n            </pep-internal-button>\n\n            <pep-textarea *ngSwitchCase=\"'textarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n                [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\n                [readonly]=\"field.readonly\" [maxFieldCharacters]=\"field.maxFieldCharacters\"\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [layoutType]=\"layoutType\">\n            </pep-textarea>\n\n            <pep-quantity-selector *ngSwitchCase=\"'qs'\" [id]=\"field.key\" [form]=\"form\" [key]=\"field.key\"\n                [value]=\"field.value\" [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [layoutType]=\"layoutType\" (valueChange)=\"onValueChanged($event)\" (elementClick)=\"onClick($event)\">\n            </pep-quantity-selector>\n\n            <ng-container *ngSwitchDefault>\n                <ng-container *ngIf=\"field.formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\">\n                </ng-container>\n                <ng-template #notEmptyBlock>\n                    <ng-container\n                        *ngIf=\"field.controlType === 'attachment' || field.type === 'link'; then linkBlock; else notLinkBlock\">\n                    </ng-container>\n                    <ng-template #linkBlock>\n                        <a [id]=\"field.key\" class=\"color-link body-sm pep-report-input readonly\"\n                            *ngIf=\"field.formattedValue != null\" title=\"{{ field.formattedValue }}\" target=\"_blank\"\n                            href=\"{{ field.value }}\">{{ field.formattedValue }}</a>\n                    </ng-template>\n                    <ng-template #notLinkBlock>\n                        <span [id]=\"field.key\" class=\"body-sm pep-report-input readonly\"\n                            title=\"{{ field.formattedValue }}\" [ngStyle]=\"{ color: field.textColor }\">{{\n                            field.formattedValue }}</span>\n                    </ng-template>\n                </ng-template>\n                <ng-template #emptyBlock>\n                    <span>&nbsp;</span>\n                </ng-template>\n            </ng-container>\n        </ng-container>\n    </div>\n</ng-template>","styles":[":host{display:grid}"]}]}],"members":{"isReport":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"layout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":94,"character":5}}]}],"lockEvents":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":5}}]}],"canEditObject":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":5}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":116,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":117,"character":5}}]}],"objectId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":5}}]}],"parentId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":5}}]}],"searchCode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":121,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":122,"character":5}}]}],"firstFieldAsLink":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":123,"character":5}}]}],"checkForChanges":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":126,"character":5}}]}],"formValidationChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":128,"character":5}}]}],"fieldClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":131,"character":5}}]}],"internalFormFieldClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":134,"character":5}}]}],"internalFormFieldChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":135,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":174,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":175,"character":38},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":176,"character":31},{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":177,"character":20},{"__symbolic":"reference","module":"@angular/core","name":"KeyValueDiffers","line":178,"character":17},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":179,"character":27}]}],"convertXAlignToHorizontalAlign":[{"__symbolic":"method"}],"convertYAlignToVerticalAlign":[{"__symbolic":"method"}],"convertOptionalValues":[{"__symbolic":"method"}],"convertAddressFields":[{"__symbolic":"method"}],"isMatrixField":[{"__symbolic":"method"}],"doesFieldHavaFloatingField":[{"__symbolic":"method"}],"getOptionsForCustomField":[{"__symbolic":"method"}],"convertToCustomField":[{"__symbolic":"method"}],"getFieldFormattedValue":[{"__symbolic":"method"}],"toControlGroup":[{"__symbolic":"method"}],"createBaseField":[{"__symbolic":"method"}],"showFormValidationMessage":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"getUiControlFields":[{"__symbolic":"method"}],"initFieldsStructure":[{"__symbolic":"method"}],"setForm":[{"__symbolic":"method"}],"initForm":[{"__symbolic":"method"}],"updateField":[{"__symbolic":"method"}],"updateForm":[{"__symbolic":"method"}],"ReloadForm":[{"__symbolic":"method"}],"getFormControlById":[{"__symbolic":"method"}],"setSpecialFields":[{"__symbolic":"method"}],"convertCustomFields":[{"__symbolic":"method"}],"onFormValidationChanged":[{"__symbolic":"method"}],"onValueChanged":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"onInternalFormFieldClicked":[{"__symbolic":"method"}],"onInternalFormFieldChanged":[{"__symbolic":"method"}],"onFormValueChanged":[{"__symbolic":"method"}],"onFormFieldClick":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"selector":"pep-field-generator","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":23,"character":19},"member":"Emulated"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":24,"character":21},"member":"OnPush"},"template":"<ng-container [ngSwitch]=\"field.controlType\" [formGroup]=\"form\">\n\n    <pep-address *ngSwitchCase=\"'address'\" [form]=\"form\" [key]=\"field.key\" [formattedValue]=\"field.formattedValue\"\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [groupFields]=\"field.groupFields\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (addressValueChange)=\"onAddressValueChanged($event, field)\">\n    </pep-address>\n\n    <pep-attachment *ngSwitchCase=\"'attachment'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\"\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [isActive]=\"isActive\" [showTitle]=\"showTitle\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\n        (fileChange)=\"onFileChanged($event, field)\">\n    </pep-attachment>\n\n    <pep-checkbox *ngSwitchCase=\"'checkbox'\" [form]=\"form\" [key]=\"field.key\"\n        [value]=\"(field.value | lowercase) == 'true' || field.value == '1' ? true : false\" [label]=\"field.label\"\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [additionalValue]=\"field.additionalValue\"\n        [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-checkbox>\n\n    <pep-date *ngSwitchCase=\"'date'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [textColor]=\"field.textColor\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [minValue]=\"field.minValue\"\n        [maxValue]=\"field.maxValue\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-date>\n\n    <pep-images-filmstrip *ngSwitchCase=\"'images'\" [uid]=\"uid\" [form]=\"form\" [key]=\"field.key\" [label]=\"field.label\"\n        [showTitle]=\"showTitle\" [rowSpan]=\"field.rowSpan\" [value]=\"field.value\" [layoutType]=\"layoutType\">\n    </pep-images-filmstrip>\n\n    <pep-image *ngSwitchCase=\"'image'\" [uid]=\"uid\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.formattedValue\"\n        [srcLarge]=\"field.value\" [options]=\"field.options\" [label]=\"field.label\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [indicatorsField]=\"field.indicatorsField\" [menuField]=\"field.menuField\"\n        [hasCampaignField]=\"field.hasCampaignField\" [sizeLimitMB]=\"field.sizeLimitMB\" [isActive]=\"isActive\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\n        (fileChange)=\"onFileChanged($event, field)\">\n    </pep-image>\n\n    <pep-quantity-selector *ngSwitchCase=\"'qs'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [textColor]=\"field.textColor\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [allowDecimal]=\"field.allowDecimal\"\n        [additionalValue]=\"field.additionalValue\" [notificationInfo]=\"field.notificationInfo\" [isActive]=\"isActive\"\n        [layoutType]=\"layoutType\" [showTitle]=\"showTitle\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" (formValidationChange)=\"onFormValidationChanged($event)\"\n        (elementClick)=\"onClick($event)\">\n    </pep-quantity-selector>\n\n    <pep-rich-html-textarea *ngSwitchCase=\"'richhtmltextarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n        [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-rich-html-textarea>\n\n    <pep-select *ngSwitchCase=\"'select'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [label]=\"field.label\"\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [options]=\"field.options\" [showTitle]=\"showTitle\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (valueChange)=\"onValueChanged($event, field)\"\n        (formValidationChange)=\"onFormValidationChanged($event)\" [isActive]=\"isActive\">\n    </pep-select>\n\n    <pep-separator *ngSwitchCase=\"'separator'\" [form]=\"form\" [key]=\"field.key\" [label]=\"field.label\"\n        [xAlignment]=\"field.xAlignment\" [layoutType]=\"layoutType\" [visible]=\"field.visible\">\n    </pep-separator>\n\n    <pep-signature *ngSwitchCase=\"'signature'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\" [label]=\"field.label\"\n        [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [isActive]=\"isActive\" [layoutType]=\"layoutType\"\n        [visible]=\"field.visible\" (fileChange)=\"onFileChanged($event, field)\">\n    </pep-signature>\n\n    <pep-textarea *ngSwitchCase=\"'textarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [label]=\"field.label\"\n        [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-textarea>\n\n    <pep-textbox *ngSwitchCase=\"'textbox'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [placeholder]=\"field.placeholder\"\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\"\n        (valueChange)=\"onValueChanged($event, field)\" (formValidationChange)=\"onFormValidationChanged($event)\"\n        [isActive]=\"isActive\" [visible]=\"field.visible\">\n    </pep-textbox>\n\n    <pep-indicators *ngSwitchCase=\"'indicators'\" [key]=\"field.key\" [value]=\"field.value\" [layoutType]=\"layoutType\">\n    </pep-indicators>\n    <pep-internal-button *ngSwitchCase=\"'button'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\"\n        [referenceObjectInternalType]=\"field.referenceObjectInternalType\" [type]=\"field.type\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\n        (valueChange)=\"onValueChanged($event, field)\">\n    </pep-internal-button>\n    <pep-internal-menu *ngSwitchCase=\"'menu'\" [key]=\"field.key\" [label]=\"field.label\" [disabled]=\"field.disabled\"\n        [xAlignment]=\"field.xAlignment\" [options]=\"field.options\" [layoutType]=\"layoutType\"\n        (elementClick)=\"onClick($event)\">\n    </pep-internal-menu>\n    <pep-internal-page *ngSwitchCase=\"'internalPage'\" [field]=\"field\" [layoutType]=\"layoutType\"\n        (internalFormFieldClick)=\"onInternalFormFieldClick($event)\"\n        (internalFormFieldChange)=\"onInternalFormFieldChanged($event)\">\n    </pep-internal-page>\n\n    <pep-internal-carusel *ngSwitchCase=\"'internalCarusel'\" [field]=\"field\"\n        (internalFormFieldClick)=\"onInternalFormFieldClick($event)\"\n        (internalFormFieldChange)=\"onInternalFormFieldChanged($event)\">\n    </pep-internal-carusel>\n\n    <ng-container *ngSwitchCase=\"'placeholder'\">\n    </ng-container>\n</ng-container>","styles":[":host{width:100%;height:100%}"]}]}],"members":{"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"uid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"checkForChanges":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":43,"character":5}}]}],"formValidationChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":45,"character":5}}]}],"elementClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":5}}]}],"internalFormFieldChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":50,"character":5}}]}],"internalFormFieldClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":51,"character":5}}]}],"formValueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":53,"character":5}}]}],"formFieldClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":5}}]}],"ngOnDestroy":[{"__symbolic":"method"}],"onFileChanged":[{"__symbolic":"method"}],"onAddressValueChanged":[{"__symbolic":"method"}],"onValueChanged":[{"__symbolic":"method"}],"onInternalFormFieldChanged":[{"__symbolic":"method"}],"onFormValidationChanged":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"onInternalFormFieldClick":[{"__symbolic":"method"}],"onFormValueChanged":[{"__symbolic":"method"}],"onFormFieldClick":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"pep-indicators","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":7,"character":21},"member":"OnPush"},"template":"<div class=\"indicators-container\" [ngClass]=\"{ 'is-inside-table': layoutType === 'table' }\">\n    <ng-container *ngFor=\"let value of value?.split(';')\">\n        <pep-icon name=\"indicator_dot_placeholder\" class=\"pull-left flip\" [fill]=\"value\"></pep-icon>\n    </ng-container>\n    <ng-container *ngIf=\"key != 'ItemIndicatorsWithoutCampaign' && value?.split(';').length < 4\">\n        <pep-icon name=\"indicator_dot_placeholder\" class=\"pull-left flip\"></pep-icon>\n    </ng-container>\n</div>","styles":[":host{height:inherit;display:grid}:host>*{align-self:center}.indicators-container{height:2.5rem}.indicators-container pep-icon{height:1rem;width:1rem;margin:.05rem}.indicators-container.is-inside-table{height:1rem;display:flex;justify-content:center;align-items:center}",".indicators-container .svg-icon{fill:hsla(0,0%,100%,.5);fill: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)}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":5}}]}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":28,"character":1},"arguments":[{"selector":"pep-internal-button","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":32,"character":21},"member":"OnPush"},"template":"<ng-container [ngSwitch]=\"type\">\n    <ng-container *ngSwitchCase=\"'reference'\">\n        <ng-container *ngIf=\"layoutType === 'form'; then formBlock; else notFormBlock\"></ng-container>\n        <ng-template #formBlock>\n            <div class=\"pep-button-container reference-button\">\n                <pep-field-title [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\" [xAlignment]=\"xAlignment\"\n                    [showTitle]=\"showTitle\">\n                </pep-field-title>\n                <ng-container *ngIf=\"createNewReference; then newBlock; else existingBlock\"></ng-container>\n                <ng-template #newBlock>\n                    <button mat-button [id]=\"key\" title=\"{{ formattedValue }}\" class=\"pep-button md regular\"\n                        (click)=\"onButtonClicked($event)\" [ngClass]=\"{\n                            disabled: disabled,\n                            'pull-left': xAlignment == 'left',\n                            'pull-right': xAlignment == 'right',\n                            'center-alignment': xAlignment == 'center'\n                        }\">\n                        <span class=\"ellipsis pull-left flip button-title-with-icon\">{{ 'ACTIONS.CREATE_NEW' | translate\n                            }}</span>\n                        <mat-icon class=\"pull-right flip\" pepRtlClass>\n                            <pep-icon name=\"number_plus\" (click)=\"onButtonClicked($event)\">\n                            </pep-icon>\n                        </mat-icon>\n                    </button>\n                </ng-template>\n                <ng-template #existingBlock>\n                    <pep-group-buttons [buttons]=\"referenceButtons\" styleType=\"regular\" viewType=\"split\">\n                    </pep-group-buttons>\n                </ng-template>\n            </div>\n        </ng-template>\n        <ng-template #notFormBlock>\n            <ng-container *ngTemplateOutlet=\"linkTemplate\"></ng-container>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'listofobjects'\">\n        <ng-container *ngIf=\"layoutType === 'form'; then formBlock; else notFormBlock\"></ng-container>\n        <ng-template #formBlock>\n            <ng-container *ngTemplateOutlet=\"buttonTemplate; context: {internal: true}\"></ng-container>\n        </ng-template>\n        <ng-template #notFormBlock>\n            <ng-container *ngTemplateOutlet=\"linkTemplate\"></ng-container>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'button'\">\n        <ng-container [ngSwitch]=\"key\">\n            <ng-container *ngSwitchCase=\"'ObjectMenu'\">\n                <span (click)=\"onButtonClicked($event)\" title=\"{{ key }}\">\n                    <mat-icon>\n                        <pep-icon *ngIf=\"key == 'ObjectMenu'\" name=\"system_menu\">\n                        </pep-icon>\n                    </mat-icon>\n                </span>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'Agents' || 'ContactPersons' || 'Buyers'\">\n                <ng-container *ngIf=\"layoutType === 'table'; then tableBlock; else nonTableBlock\">\n                </ng-container>\n                <ng-template #nonTableBlock>\n                    <ng-container *ngTemplateOutlet=\"buttonTemplate; context: {internal: true}\"></ng-container>\n                </ng-template>\n                <ng-template #tableBlock>\n                    <span [id]=\"key\" title=\"{{ formattedValue }}\" class=\"pep-report-input readonly body-sm\">{{\n                        formattedValue }}</span>\n                </ng-template>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n                <ng-container *ngIf=\"layoutType === 'form'; then buttonBlock; else linkBlock\">\n                </ng-container>\n\n                <ng-template #buttonBlock>\n                    <ng-container *ngTemplateOutlet=\"buttonTemplate; context: {internal: false}\"></ng-container>\n                </ng-template>\n                <ng-template #linkBlock>\n                    <ng-container *ngTemplateOutlet=\"linkTemplate\"></ng-container>\n                </ng-template>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</ng-container>\n\n<ng-template #buttonTemplate let-internal=\"internal\">\n    <div class=\"pep-button-container\">\n        <pep-field-title [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\" [xAlignment]=\"xAlignment\"\n            [showTitle]=\"showTitle\">\n        </pep-field-title>\n\n        <ng-container *ngIf=\"internal; then internalButtonTemplate; else regularButtonTemplate\"></ng-container>\n        <ng-template #regularButtonTemplate>\n            <button [id]=\"key\" title=\"{{ formattedValue }}\" mat-button class=\"pep-button md regular\"\n                dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\" (click)=\"onButtonClicked($event)\"\n                [disabled]=\"disabled\"\n                [ngClass]=\"{disabled: disabled, 'pull-left': xAlignment == 'left', 'pull-right': xAlignment == 'right', 'center-alignment': xAlignment == 'center'}\">\n                {{ formattedValue }}\n            </button>\n        </ng-template>\n\n        <ng-template #internalButtonTemplate>\n            <button [id]=\"key\" title=\"{{ formattedValue }}\" mat-button class=\"pep-button md regular\"\n                dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\" (click)=\"openReferenceObjectInternal($event)\"\n                [disabled]=\"disabled\"\n                [ngClass]=\"{disabled: disabled, 'pull-left': xAlignment == 'left', 'pull-right': xAlignment == 'right', 'center-alignment': xAlignment == 'center'}\">\n                <ng-container *ngIf=\"formattedValue == '0' || formattedValue == ''; then newBlock; else existingBlock\">\n                </ng-container>\n                <ng-template #newBlock>\n                    <span class=\"pull-left flip button-title-with-icon\">{{ 'LIST.SELECT' | translate }}&nbsp;</span>\n                    <mat-icon>\n                        <pep-icon name=\"number_plus\">\n                        </pep-icon>\n                    </mat-icon>\n                </ng-template>\n                <ng-template #existingBlock>\n                    <span class=\"pull-left flip button-title-with-icon\">{{ formattedValue }}&nbsp;{{ 'LIST.SELECTED' |\n                        translate\n                        }}&nbsp;</span>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </ng-template>\n            </button>\n        </ng-template>\n    </div>\n</ng-template>\n\n<ng-template #linkTemplate>\n    <ng-container *ngIf=\"formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n    <ng-template #notEmptyBlock>\n        <a href=\"{{ value }}\" (mousedown)=\"hrefFunction($event)\" class=\"color-link\">\n            <span *ngIf=\"layoutType === 'table'\" [id]=\"key\" title=\"{{ formattedValue }}\"\n                class=\"body-sm pep-report-input readonly\">\n                {{ formattedValue }}\n            </span>\n            <span *ngIf=\"layoutType !== 'table'\" [id]=\"key\" title=\"{{ formattedValue }}\" class=\"body-sm pep-card-input\"\n                style=\"display: block;\">\n                {{ formattedValue }}\n            </span>\n        </a>\n    </ng-template>\n    <ng-template #emptyBlock>\n        <span>&nbsp;</span>\n    </ng-template>\n</ng-template>","styles":[":host{height:inherit;display:grid}:host>*{align-self:center}.pep-button-container,.pepperi-button-container{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.pep-button-container .center-alignment,.pepperi-button-container .center-alignment{position:absolute;left:50%;transform:translate(-50%)}.pep-button-container.reference-button .split-buttons,.pep-button-container.reference-button ::ng-deep.split-buttons,.pepperi-button-container.reference-button .split-buttons,.pepperi-button-container.reference-button ::ng-deep.split-buttons{float:left}.pep-button-container.reference-button .split-buttons button:last-of-type,.pep-button-container.reference-button ::ng-deep.split-buttons button:last-of-type,.pepperi-button-container.reference-button .split-buttons button:last-of-type,.pepperi-button-container.reference-button ::ng-deep.split-buttons button:last-of-type{width:1.5rem;padding:0}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"formattedValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"referenceObjectInternalType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":5}}]}],"elementClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":74,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":76,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":96,"character":38},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":97,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":98,"character":25}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onButtonClicked":[{"__symbolic":"method"}],"hrefFunction":[{"__symbolic":"method"}],"openReferenceObjectInternal":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":28,"character":1},"arguments":[{"selector":"pep-internal-list","host":{"(window:resize)":"winResize($event)","$quoted$":["(window:resize)"]},"template":"<ng-container *ngIf=\"totalRows == 0\">\n    <div class=\"pep-border-bottom\">\n        <p class=\"title-xl no-data\">\n            {{ (noDataFoundMsg ? noDataFoundMsg : '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-container>\n<ng-container *ngIf=\"totalRows > 0\">\n    <div *ngIf=\"isTable\" #tableHeader 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            <fieldset>\n                <div *ngFor=\"let field of uiControl?.ControlFields; let j = index\" class=\"header-column pull-left flip\"\n                    [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\" [ngClass]=\"{\n                            'is-resizing': field.ApiName === pressedColumn,\n                            'is-first': j === 0,\n                            'is-last': j === uiControl?.ControlFields?.length - 1\n                        }\">\n                    <label *ngIf=\"field.Title != ''\" id=\"{{ field.ApiName }}\"\n                        class=\"header-label body-sm pull-left flip text-align-{{ field.Layout.XAlignment }}\"\n                        title=\"{{ field.Title }}\">\n                        {{ field.Title }}\n                    </label>\n                    <label *ngIf=\"field.Title == ''\" id=\"{{ field.ApiName }}\"\n                        class=\"header-label body-sm pull-left flip\">&nbsp;</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                </div>\n            </fieldset>\n        </fieldset>\n    </div>\n\n    <div #noVirtualScrollCont [ngClass]=\"{ 'table-body': isTable, 'cards-body': !isTable }\">\n        <ng-container *ngTemplateOutlet=\"listData\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"listTotals\"></ng-container>\n</ng-container>\n\n<ng-template #listData>\n    <ng-container *ngFor=\"let item of scrollItems; let i = index; let isFirst = first; trackBy: trackByFunc\">\n        <ng-container *ngIf=\"isTable\">\n            <div class=\"table-row\" (mouseenter)=\"onTableRowMouseEnter($event, item?.UID, item?.Type)\"\n                (mouseleave)=\"onTableRowMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                        selected: getIsItemSelected(item?.UID, item?.Type),\n                        highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId\n                    }\"\n                [ngStyle]=\"{ height: calculatedObjectHeight, visibility: showItems || item ? 'visible' : 'hidden' }\">\n                <fieldset class=\"table-row-fieldset\" [ngStyle]=\"{ 'background-color': item?.BackgroundColor }\">\n                    <!-- [canEditObject]=\"!disabled && item?.IsEditable\" -->\n                    <pep-form [checkForChanges]=\"checkForChanges\" [layout]=\"uiControl\" [data]=\"item\"\n                        [canEditObject]=\"!disabled\" [objectId]=\"objectId\" [parentId]=\"parentId\"\n                        [searchCode]=\"searchCode\" [lockEvents]=\"disableSelectionItems\" [layoutType]=\"'table'\"\n                        [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 [class]=\"itemClass\" (mouseenter)=\"onCardMouseEnter($event, item?.UID, item?.Type)\"\n                (mouseleave)=\"onCardMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                        selected: getIsItemSelected(item?.UID, item?.Type),\n                        highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId,\n                        'card-view': viewType === 'cards',\n                        'line-view': viewType === 'lines'\n                    }\" class=\"pull-left flip\"\n                [ngStyle]=\"{ height: calculatedObjectHeight, visibility: showItems || item ? 'visible' : 'hidden' }\">\n                <!-- [canEditObject]=\"!disabled && item?.IsEditable\" -->\n                <pep-form [checkForChanges]=\"checkForChanges\" [layout]=\"uiControl\" [data]=\"item\"\n                    [canEditObject]=\"!disabled\" [objectId]=\" objectId\" [parentId]=\"parentId\" [searchCode]=\"searchCode\"\n                    [lockEvents]=\"disableSelectionItems\" [layoutType]=\"'card'\" [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-container>\n</ng-template>\n\n<ng-template #listTotals>\n    <div *ngIf=\"totalsRow?.length > 0 && totalsRow.length <= uiControl?.ControlFields.length\" class=\"table-total\">\n        <fieldset class=\"table-header-fieldset\">\n            <div *ngFor=\"let field of uiControl?.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:grid}.no-data{margin:2rem 0;margin:var(--pep-spacing-2xl,2rem) 0}.no-data-suggestions .suggestions-title{margin:1rem 0 .5rem;margin:var(--pep-spacing-lg,1rem) 0 var(--pep-spacing-sm,.5rem)}.no-data-suggestions .suggestions-list{margin:0;padding:0;-webkit-padding-start:2rem;padding-inline-start:2rem;-webkit-padding-start:var(--pep-spacing-2xl,2rem);padding-inline-start:var(--pep-spacing-2xl,2rem)}.table-header{top:0}"]}]}],"members":{"noDataFoundMsg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"hideAllSelectionInMulti":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"top":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"objectId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"parentId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"searchCode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"supportResizing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"parentScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"disableEvents":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"disableSelectionItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"totalsRow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"fieldClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":5}}]}],"noVirtualScrollCont":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":59,"character":5},"arguments":["noVirtualScrollCont"]}]}],"tableHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":60,"character":5},"arguments":["tableHeader"]}]}],"selectAllCB":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":61,"character":5},"arguments":["selectAllCB"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":106,"character":25},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":107,"character":31},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":108,"character":20},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":109,"character":26}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"setContainerWidth":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"toggleItems":[{"__symbolic":"method"}],"updateScrollItems":[{"__symbolic":"method"}],"getUniqItemId":[{"__symbolic":"method"}],"setLayout":[{"__symbolic":"method"}],"calcColumnsWidth":[{"__symbolic":"method"}],"initResizeData":[{"__symbolic":"method"}],"onListResizeStart":[{"__symbolic":"method"}],"onListResize":[{"__symbolic":"method"}],"getParent":[{"__symbolic":"method"}],"onListResizeEnd":[{"__symbolic":"method"}],"onListHeaderMouseEnter":[{"__symbolic":"method"}],"onListHeaderMouseLeave":[{"__symbolic":"method"}],"onListChange":[{"__symbolic":"method"}],"getParentContainer":[{"__symbolic":"method"}],"onValueChanged":[{"__symbolic":"method"}],"onCustomizeFieldClick":[{"__symbolic":"method"}],"getIsDisabled":[{"__symbolic":"method"}],"getIsItemSelected":[{"__symbolic":"method"}],"setItemClicked":[{"__symbolic":"method"}],"itemClicked":[{"__symbolic":"method"}],"onTableRowMouseEnter":[{"__symbolic":"method"}],"onTableRowMouseLeave":[{"__symbolic":"method"}],"onCardMouseEnter":[{"__symbolic":"method"}],"onCardMouseLeave":[{"__symbolic":"method"}],"winResize":[{"__symbolic":"method"}],"trackByFunc":[{"__symbolic":"method"}],"cleanItems":[{"__symbolic":"method"}],"getUIControl":[{"__symbolic":"method"}],"initListData":[{"__symbolic":"method"}],"updateItems":[{"__symbolic":"method"}],"updateItem":[{"__symbolic":"method"}],"getIsItemEditable":[{"__symbolic":"method"}],"getItemDataByID":[{"__symbolic":"method"}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":17,"character":1},"arguments":[{"selector":"pep-internal-menu","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":21,"character":21},"member":"OnPush"},"template":"<ng-container *ngIf=\"options?.length > 0; then subMenuBlock; else noSubMenuBlock\"></ng-container>\n<ng-template #noSubMenuBlock>\n    <button (click)=\"menuClicked($event)\" title=\"{{ label }}\" mat-button\n        class=\"pep-button icon-button weak {{ layoutType === 'table' ? 'sm' : 'md' }}\" [ngClass]=\"{\n            'lock-events': disabled,\n            'left-alignment': xAlignment == 'left',\n            'right-alignment': xAlignment == 'right',\n            'center-alignment': xAlignment == 'center',\n            'invert': invertClass\n        }\">\n        <mat-icon>\n            <pep-icon name=\"system_menu\">\n            </pep-icon>\n        </mat-icon>\n    </button>\n</ng-template>\n\n<ng-template #subMenuBlock>\n    <button mat-button [matMenuTriggerFor]=\"menu\" menu-blur\n        class=\"pep-button icon-button weak {{ layoutType === 'table' ? 'sm' : 'md' }}\" [ngClass]=\"{\n            'left-alignment': xAlignment == 'left',\n            'right-alignment': xAlignment == 'right',\n            'center-alignment': xAlignment == 'center',\n            'invert': invertClass\n        }\" title=\"{{ label }}\">\n        <mat-icon>\n            <pep-icon name=\"system_menu\">\n            </pep-icon>\n        </mat-icon>\n    </button>\n\n    <mat-menu #menu=\"matMenu\" xPosition=\"{{xAlignment == 'right' ? 'after' : 'before'}}\"\n        [ngClass]=\"{ rtlMenu: xAlignment == 'right' }\">\n        <button *ngFor=\"let option of options\" mat-menu-item (click)=\"menuItemClicked(option.key)\">\n            <span>{{ option.value | translate }}</span>\n        </button>\n    </mat-menu>\n\n</ng-template>","styles":[":host{height:inherit;display:grid}:host>*{align-self:center}.pep-button,.pepperi-button{cursor:pointer}.pep-button.left-alignment,.pepperi-button.left-alignment{justify-self:flex-start}.pep-button.center-alignment,.pepperi-button.center-alignment{justify-self:center}.pep-button.right-alignment,.pepperi-button.right-alignment{justify-self:flex-end}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"invertClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"elementClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":35,"character":5}}]}],"ngOnDestroy":[{"__symbolic":"method"}],"menuClicked":[{"__symbolic":"method"}],"menuItemClicked":[{"__symbolic":"method"}]}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":39,"character":1},"arguments":[{"selector":"pep-internal-page","providers":[{"__symbolic":"reference","name":"ɵg"}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":44,"character":21},"member":"OnPush"},"template":"<ng-template #matrixHeaderTemplate>\n    <div class=\"matrix-title-container pep-border-bottom align-{{\n            field.xAlignment\n        }}\" title=\"{{ field.label }}\">\n        <span class=\"block-with-text body-md\">{{ field.label }}</span>\n\n        <div class=\"buttons-container pep-spacing-element-negative pull-right flip\">\n            <ng-container *ngIf=\"\n                    currentViewType?.Key == 'OrderCenterMatrix' &&\n                    additionalApiNames &&\n                    additionalApiNames.length > 0\n                \">\n                <button class=\"pep-spacing-element pep-button icon-button sm weak\" mat-button [matMenuTriggerFor]=\"menu\"\n                    menu-blur>\n                    <span class=\"pull-left flip\" *ngIf=\"currentAdditionalApiName\">&nbsp;{{\n                        currentAdditionalApiName?.Value }}&nbsp;</span>\n\n                    <mat-icon [ngClass]=\"{'pull-left flip': currentAdditionalApiName}\">\n                        <pep-icon name=\"system_info\"></pep-icon>\n                    </mat-icon>\n                </button>\n                <mat-menu #menu=\"matMenu\" xPosition=\"before\">\n                    <button mat-menu-item [ngClass]=\"{\n                            selected: currentAdditionalApiName === null\n                        }\" (click)=\"changeAdditionalApiName(null)\">\n                        <span>{{ \"LIST.NONE\" | translate }}</span>\n                    </button>\n                    <button mat-menu-item [ngClass]=\"{\n                            selected:\n                                currentAdditionalApiName?.Key ==\n                                additionalApiName?.Key\n                        }\" *ngFor=\"let additionalApiName of additionalApiNames\"\n                        (click)=\"changeAdditionalApiName(additionalApiName)\">\n                        <span>{{ additionalApiName.Value }}</span>\n                    </button>\n                </mat-menu>\n            </ng-container>\n            <ng-container *ngIf=\"childViewTypes && childViewTypes.length > 1\">\n                <button class=\"pep-spacing-element pep-button icon-button sm weak\" mat-button\n                    [matMenuTriggerFor]=\"viewsMenu\" menu-blur>\n                    <mat-icon>\n                        <pep-icon name=\"view_card_md\"></pep-icon>\n                    </mat-icon>\n                </button>\n\n                <mat-menu #viewsMenu=\"matMenu\" xPosition=\"before\">\n                    <button mat-menu-item [ngClass]=\"{\n                            selected: currentViewType?.Key == viewType?.Key\n                        }\" *ngFor=\"let viewType of childViewTypes\" (click)=\"changeChildrenViewType(viewType?.Key)\">\n                        <mat-icon [ngSwitch]=\"viewType?.Key\">\n                            <pep-icon *ngSwitchCase=\"'OrderCenterMatrix'\" name=\"view_matrix\"></pep-icon>\n                            <pep-icon *ngSwitchCase=\"'OrderCenterFlatMatrixGrid'\" name=\"view_table\"></pep-icon>\n                            <pep-icon *ngSwitchCase=\"'OrderCenterFlatMatrixLine'\" name=\"view_line\"></pep-icon>\n                        </mat-icon>\n                        <span>{{ viewType?.Value }}</span>\n                    </button>\n                </mat-menu>\n            </ng-container>\n        </div>\n    </div>\n\n</ng-template>\n\n<ng-template #matrixTemplate>\n    <div #matrixContainer class=\"matrix-container\">\n        <pep-internal-list (valueChange)=\"onCustomizeObjectChanged($event)\" [parentScroll]=\"matrixContainer\"\n            (fieldClick)=\"onCustomizeFieldClick($event)\" [totalsRow]=\"totalsRow\"></pep-internal-list>\n    </div>\n</ng-template>\n\n<div #mainViewCont id=\"mainViewCont\" [ngStyle]=\"{ 'max-width': viewWidth, 'max-height': viewHeight }\">\n    <div #my1mm id=\"my1_mm\" style=\"height:1mm;width:1mm;visibility: hidden;\"></div>\n    <ng-container *ngIf=\"coverChildTable && uiControl != null\">\n        <div class=\"table-cover\"></div>\n        <button (click)=\"showMatrixDialog()\" class=\"pep-button strong sm table-cover-button\"\n            [ngClass]=\"{ 'lineview-btn': currentViewType?.Key == 'OrderCenterFlatMatrixLine'}\">\n            {{ \"INTERNAL_PAGE.CLICK_TO_ORDER\" | translate }}\n        </button>\n    </ng-container>\n\n    <ng-container *ngTemplateOutlet=\"matrixHeaderTemplate\"></ng-container>\n    <ng-container #orgCont></ng-container>\n</div>\n\n<ng-template #matrixDialogTemplate>\n\n    <div mat-dialog-title>\n        <ng-container *ngTemplateOutlet=\"matrixHeaderTemplate\"></ng-container>\n    </div>\n\n    <div mat-dialog-content>\n        <ng-container #dialogCont></ng-container>\n    </div>\n</ng-template>\n\n<!-- <div id=\"childGridModal\" bsModal (onShown)=\"onShown()\" (onHidden)=\"onHidden()\" #childModal=\"bs-modal\" class=\"modal\"\n    tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"gridModalLabel\" aria-hidden=\"true\">\n    <div class=\"modal-dialog\" role=\"document\">\n        <div class=\"modal-content\">\n            <div class=\"modal-body matrix-dialog-body\">\n                <ng-container #modalCont></ng-container>\n            </div>\n        </div>\n    </div>\n</div> -->","styles":[":host{display:grid;width:inherit;height:inherit}.matrix-title-container{padding:0;height:2.5rem;height:var(--pep-form-field-height,2.5rem);display:flex;align-items:flex-end}.matrix-title-container .block-with-text{width:100%;max-height:inherit;font-weight:600;font-weight:var(--pep-font-weight-bold,600);display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.matrix-title-container .buttons-container{display:flex;align-self:center}.matrix-title-container .buttons-container .pep-button,.matrix-title-container .buttons-container .pepperi-button{width:-webkit-max-content;width:-moz-max-content;width:max-content}#mainViewCont{width:100%;height:inherit;overflow:hidden;padding:0 .25rem;padding:0 var(--pep-spacing-xs,.25rem)}#mainViewCont .table-cover{background-color:#fff;z-index:98;position:absolute;top:0;width:100%;height:inherit;opacity:.5}#mainViewCont .table-cover-button{position:absolute;left:50%;transform:translate(-50%,-50%);top:calc(50% + 2.5rem);top:calc(50% + var(--pep-form-field-height, 2.5rem));z-index:99}#mainViewCont .table-cover-button.lineview-btn{top:calc(2 * 2.5rem);top:calc(2 * var(--pep-form-field-height, 2.5rem));transform:translate(-50%)}#mainViewCont .underCover{max-height:inherit;overflow:hidden}#mainViewCont ::ng-deep.table-header{top:unset!important}"]}]}],"members":{"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"internalFormFieldChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":5}}]}],"internalFormFieldClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":57,"character":5}}]}],"my1mm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":60,"character":5},"arguments":["my1mm"]}]}],"mainViewCont":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":61,"character":5},"arguments":["mainViewCont"]}]}],"orgCont":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":63,"character":5},"arguments":["orgCont",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":63,"character":34}}]}]}],"dialogCont":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":64,"character":5},"arguments":["dialogCont",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":64,"character":37}}]}]}],"matrixTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":66,"character":5},"arguments":["matrixTemplate"]}]}],"matrixDialogTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":67,"character":5},"arguments":["matrixDialogTemplate",{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":67,"character":47}}]}]}],"customList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":70,"character":5},"arguments":[{"__symbolic":"reference","name":"ɵd"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":102,"character":22},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":103,"character":31},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":105,"character":37},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":106,"character":28},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":107,"character":35}]}],"fillData":[{"__symbolic":"method"}],"fillChildData":[{"__symbolic":"method"}],"mmToPx":[{"__symbolic":"method"}],"isMatrixView":[{"__symbolic":"method"}],"isFlatMatrixView":[{"__symbolic":"method"}],"isTableView":[{"__symbolic":"method"}],"changeChildrenViewType":[{"__symbolic":"method"}],"setViewCover":[{"__symbolic":"method"}],"showMatrixDialog":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"loadLastAdditionalApiName":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"changeAdditionalApiName":[{"__symbolic":"method"}],"setTotalsRow":[{"__symbolic":"method"}],"updateChanges":[{"__symbolic":"method"}],"setValueCallback":[{"__symbolic":"method"}],"onCustomizeObjectChanged":[{"__symbolic":"method"}],"onCustomizeFieldClick":[{"__symbolic":"method"}]},"statics":{"CURRENT_ADDITIONAL_API_NAME":"item_details_currentAdditionalApiName"}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepHttpService","line":12,"character":37}]}],"getBaseParentUrl":[{"__symbolic":"method"}],"getChildren":[{"__symbolic":"method"}],"initDetails":[{"__symbolic":"method"}],"changeChildrenViewType":[{"__symbolic":"method"}],"changeAdditionalApiName":[{"__symbolic":"method"}],"childPlusClick":[{"__symbolic":"method"}],"childMinusClick":[{"__symbolic":"method"}],"childValueChanged":[{"__symbolic":"method"}]}},"ɵh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":32,"character":1},"arguments":[{"selector":"pep-internal-carusel","providers":[{"__symbolic":"reference","name":"ɵi"}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":37,"character":21},"member":"OnPush"},"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=\"screenSize <= PepScreenSizeType.SM\" [iconName]=\"'arrow_left_alt'\" [styleType]=\"'regular'\"\n            [disabled]=\"prevDisabled\" (click)=\"moveLeft()\" 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'\" class=\"card-view \"\n                    (valueChange)=\"onCustomizeObjectChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\">\n                </pep-form>\n            </ng-container>\n        </pep-carousel>\n        <pep-button *ngIf=\"screenSize <= PepScreenSizeType.SM\" [iconName]=\"'arrow_right_alt'\" [styleType]=\"'regular'\"\n            [disabled]=\"nextDisabled\" (click)=\"moveRight()\" class=\"carousel-arrow end-arrow\">\n        </pep-button>\n    </ng-template>\n</div>","styles":[".carousel-container{position:relative;margin:0;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:.5rem 0!important;padding:var(--pep-spacing-sm,.5rem) 0!important}.carousel-container ::ng-deep.carousel-content .card-view:first-child{-webkit-padding-start:.5rem!important;padding-inline-start:.5rem!important;-webkit-padding-start:var(--pep-spacing-sm,.5rem)!important;padding-inline-start:var(--pep-spacing-sm,.5rem)!important}.carousel-container ::ng-deep.carousel-content .card-view:last-child{-webkit-padding-end:.5rem!important;padding-inline-end:.5rem!important;-webkit-padding-end:var(--pep-spacing-sm,.5rem)!important;padding-inline-end:var(--pep-spacing-sm,.5rem)!important}"]}]}],"members":{"carousel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":40,"character":5},"arguments":["carousel",{"read":{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/carousel","name":"PepCarouselComponent","line":40,"character":35}}]}]}],"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5}}]}],"internalFormFieldChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":60,"character":5}}]}],"internalFormFieldClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":62,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":85,"character":22},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":86,"character":31},{"__symbolic":"reference","name":"ɵi"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onCustomizeObjectChanged":[{"__symbolic":"method"}],"onCustomizeFieldClick":[{"__symbolic":"method"}],"moveLeft":[{"__symbolic":"method"}],"moveRight":[{"__symbolic":"method"}],"moveTo":[{"__symbolic":"method"}],"onReachesLeftBound":[{"__symbolic":"method"}],"onReachesRightBound":[{"__symbolic":"method"}]}},"ɵi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepHttpService","line":7,"character":37}]}],"emitEvent":[{"__symbolic":"method"}]}}},"origins":{"PepFormModule":"./form.module","IPepFormFieldValueChangeEvent":"./form.component","IPepFormFieldClickEvent":"./form.component","PepFormComponent":"./form.component","ɵa":"./field-generator.component","ɵb":"./indicators.component","ɵc":"./internal-button.component","ɵd":"./internal-list.component","ɵe":"./internal-menu.component","ɵf":"./internal-page.component","ɵg":"./internal-page.service","ɵh":"./internal-carusel.component","ɵi":"./internal-carusel.service"},"importAs":"@pepperi-addons/ngx-lib/form"}

package/group-buttons/group-buttons.component.theme.scss

@@ -1,15 +1,15 @@
-@use '../src/core/style/abstracts/mixins';
-
-.group-buttons-container {
-    .toggle-buttons {
-        .is-selected {
-            &.weak {
-                @include mixins.pep-button-states(regular);
-            }
-
-            &.regular {
-                @include mixins.pep-button-states(weak);
-            }
-        }
-    }
-}
+@use '../src/core/style/abstracts/mixins';
+
+.group-buttons-container {
+    .toggle-buttons {
+        .is-selected {
+            &.weak {
+                @include mixins.pep-button-states(regular);
+            }
+
+            &.regular {
+                @include mixins.pep-button-states(weak);
+            }
+        }
+    }
+}