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

package/bundles/pepperi-addons-ngx-lib-list.umd.js

@@ -2578,7 +2578,7 @@
     PepListComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-list',
-                    template: "<ng-container *ngIf=\"totalRows == 0\">\r\n    <ng-container *ngIf=\"noDataFoundMsg; then noDataMsgInputBlock; else noDataMsgDefaultBlock\"></ng-container>\r\n    <ng-template #noDataMsgInputBlock>\r\n        <div class=\"pep-border-bottom\">\r\n            <p class=\"title-xl no-data\">\r\n                {{ noDataFoundMsg }}\r\n            </p>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template #noDataMsgDefaultBlock>\r\n        <div class=\"pep-border-bottom\">\r\n            <p class=\"title-xl no-data\">\r\n                {{ '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-template>\r\n</ng-container>\r\n<ng-container *ngIf=\"totalRows > 0\">\r\n    <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\r\n\r\n    <virtual-scroller #scroller [items]=\"pagerType === 'pages' ? currentPageItems : items\"\r\n        [scrollDebounceTime]=\"scrollDebounceTime\" [scrollThrottlingTime]=\"scrollThrottlingTime\"\r\n        [bufferAmount]=\"printMode ? totalRows : -1\" [parentScroll]=\"parentScroll\" [disable]=\"loadingItemsFromApi\"\r\n        class=\"virtual-scroller\" [ngClass]=\"{ 'table-body': isTable, 'cards-body': !isTable }\"\r\n        (vsChange)=\"onVirtualScrollerChange($event)\" (vsChildRectChange)=\"onChildRectChange($event)\">\r\n        <ng-container *ngFor=\"let item of scroller.viewPortItems; let index; let isFirst = first;\">\r\n            <ng-container *ngTemplateOutlet=\"listData; context: {item: item}\"></ng-container>\r\n        </ng-container>\r\n    </virtual-scroller>\r\n\r\n    <pep-list-pager *ngIf=\"pagerType === 'pages'\" class=\" list-pager\" [disabled]=\"loadingItemsFromApi\"\r\n        [length]=\"totalRows\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" (pagerChange)=\"onPagerChange($event)\">\r\n    </pep-list-pager>\r\n\r\n    <ng-container *ngTemplateOutlet=\"tableTotal\"></ng-container>\r\n</ng-container>\r\n\r\n<ng-template #listData let-item=\"item\">\r\n    <ng-container *ngIf=\"isTable\">\r\n        <!-- getIsItemSelected(item) -> item | isItemSelected: selectionTypeForActions : selectedItemId : isAllSelected : selectedItems : unSelectedItems -->\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),\r\n                    highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId\r\n                }\" [ngStyle]=\"{ visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\r\n            <fieldset class=\"table-row-fieldset\" [ngStyle]=\"{ 'background-color': item?.BackgroundColor }\">\r\n                <mat-checkbox *ngIf=\"selectionTypeForActions == 'multi'\" type=\"checkbox\"\r\n                    class=\"pull-left flip row-selection\"\r\n                    [disabled]=\"item | isItemDisabled: lockItemInnerEvents : printMode\" [ngStyle]=\"{\r\n                            visibility: !deviceHasMouse ||\r\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId || isAllSelected || selectedItems.size > 0 ? 'visible' : 'hidden'\r\n                        }\" [checked]=\"getIsItemSelected(item)\"\r\n                    (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\r\n                </mat-checkbox>\r\n                <mat-radio-button *ngIf=\"selectionTypeForActions == 'single'\" name=\"selection\"\r\n                    class=\"pull-left flip row-selection pep-radio-button\"\r\n                    [disabled]=\"item | isItemDisabled: lockItemInnerEvents : printMode\"\r\n                    [checked]=\"getIsItemSelected(item)\"\r\n                    (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\r\n                </mat-radio-button>\r\n                <pep-form [layoutType]=\"'table'\" [checkForChanges]=\"checkForChanges\" [layout]=\"layout\"\r\n                    [firstFieldAsLink]=\"firstFieldAsLink\" [data]=\"item\" [canEditObject]=\"!disabled\"\r\n                    [lockEvents]=\"lockItemInnerEvents || printMode\" [isReport]=\"isReport\" [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 (mouseenter)=\"onCardMouseEnter($event, item?.UID, item?.Type)\"\r\n            (mouseleave)=\"onCardMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\r\n                    selected: getIsItemSelected(item),\r\n                    highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId,\r\n                    'line-view': viewType === 'lines',\r\n                    'card-view': viewType === 'cards',\r\n                    'small-card': cardSize === 'sm'\r\n                }\" class=\"pull-left flip\"\r\n            [ngStyle]=\"{ height: calculatedObjectHeight, visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\r\n            <mat-checkbox *ngIf=\"showCardSelection\" class=\"pull-left flip card-selection\"\r\n                [disabled]=\"item | isItemDisabled: lockItemInnerEvents : printMode\" [checked]=\"getIsItemSelected(item)\"\r\n                (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\r\n            </mat-checkbox>\r\n            <pep-form [layoutType]=\"'card'\" [firstFieldAsLink]=\"firstFieldAsLink\" [checkForChanges]=\"checkForChanges\"\r\n                [layout]=\"layout\" [data]=\"item\" [canEditObject]=\"!disabled\"\r\n                [lockEvents]=\"lockItemInnerEvents || printMode\" [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-template>\r\n\r\n<ng-template #tableHeader>\r\n    <div *ngIf=\"isTable\" 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            <mat-checkbox *ngIf=\"selectionTypeForActions !== 'none'\" #selectAllCB class=\"pull-left flip row-selection\"\r\n                type=\"checkbox\" [ngStyle]=\"{\r\n                        visibility:\r\n                            selectionTypeForActions == 'single' || \r\n                            (selectionTypeForActions == 'multi' && hideAllSelectionInMulti) ? 'hidden' : 'visible'\r\n                    }\"\r\n                [indeterminate]=\"isAllSelected ? unSelectedItems.size > 0 && unSelectedItems.size < totalRows : (selectedItems.size > 0 && !getIsAllSelectedForActions())\"\r\n                [disabled]=\"disabled || selectionTypeForActions === 'single'\" [checked]=\"getIsAllSelectedForActions()\"\r\n                (change)=\"selectAllItemsForActions($event)\"></mat-checkbox>\r\n            <fieldset>\r\n                <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"header-column pull-left flip\"\r\n                    [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\" [ngClass]=\"{\r\n                            'support-sorting': supportSorting,\r\n                            'has-sorting': field.ApiName === sortBy,\r\n                            'is-resizing': field.ApiName === pressedColumn,\r\n                            'is-first': j === 0 && selectionTypeForActions !== 'multi',\r\n                            'is-last': j === layout?.ControlFields?.length - 1\r\n                        }\"\r\n                    (click)=\"supportSorting ? (onListSortingChange(field.ApiName, sortBy !== null && sortBy != field.ApiName ? true : !isAsc, $event)) : false\">\r\n\r\n                    <label 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                        <span *ngIf=\"field.Mandatory\" class=\"mandatory\">\r\n                            <pep-icon name=\"system_must\"></pep-icon>\r\n                        </span>\r\n                        {{ field.Title != '' ? field.Title : ' '}}\r\n                    </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\r\n                    <div *ngIf=\"supportSorting\" class=\"sorting-box pull-left flip\"\r\n                        [ngClass]=\"{ 'has-sorting': field.ApiName === sortBy }\">\r\n                        <mat-icon *ngIf=\"field.ApiName !== sortBy\">\r\n                            <pep-icon name=\"arrow_either\" class=\"asc\"></pep-icon>\r\n                        </mat-icon>\r\n                        <ng-container *ngIf=\"field.ApiName === sortBy\">\r\n                            <mat-icon *ngIf=\"!isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && isAsc }\"\r\n                                title=\"{{ 'LIST.SORT_ASC' | translate }}\">\r\n                                <pep-icon name=\"arrow_up\" class=\"asc\"></pep-icon>\r\n                            </mat-icon>\r\n                            <mat-icon *ngIf=\"isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && !isAsc }\"\r\n                                title=\"{{ 'LIST.SORT_DESC' | translate }}\">\r\n                                <pep-icon name=\"arrow_down\" class=\"desc\"></pep-icon>\r\n                            </mat-icon>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </fieldset>\r\n        </fieldset>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #tableTotal>\r\n    <div *ngIf=\"isTable && totalsRow?.length > 0 && totalsRow.length <= layout?.ControlFields.length\"\r\n        class=\"table-total\">\r\n        <fieldset class=\"table-header-fieldset\">\r\n            <div *ngFor=\"let field of layout?.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>",
+                    template: "<ng-container *ngIf=\"totalRows == 0\">\n    <ng-container *ngIf=\"noDataFoundMsg; then noDataMsgInputBlock; else noDataMsgDefaultBlock\"></ng-container>\n    <ng-template #noDataMsgInputBlock>\n        <div class=\"pep-border-bottom\">\n            <p class=\"title-xl no-data\">\n                {{ noDataFoundMsg }}\n            </p>\n        </div>\n    </ng-template>\n    <ng-template #noDataMsgDefaultBlock>\n        <div class=\"pep-border-bottom\">\n            <p class=\"title-xl no-data\">\n                {{ 'LIST.NO_DATA_FOUND' | translate}}\n            </p>\n        </div>\n        <div class=\"no-data-suggestions\">\n            <p class=\"suggestions-title title-lg\">\n                {{ 'LIST.NO_DATA_FOUND_SUGGESTIONS_TITLE' | translate}}\n            </p>\n            <ul class=\"suggestions-list body-lg\" [innerHtml]=\"'LIST.NO_DATA_FOUND_SUGGESTIONS_LIST' | translate\"></ul>\n        </div>\n    </ng-template>\n</ng-container>\n<ng-container *ngIf=\"totalRows > 0\">\n    <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n\n    <virtual-scroller #scroller [items]=\"pagerType === 'pages' ? currentPageItems : items\"\n        [scrollDebounceTime]=\"scrollDebounceTime\" [scrollThrottlingTime]=\"scrollThrottlingTime\"\n        [bufferAmount]=\"printMode ? totalRows : -1\" [parentScroll]=\"parentScroll\" [disable]=\"loadingItemsFromApi\"\n        class=\"virtual-scroller\" [ngClass]=\"{ 'table-body': isTable, 'cards-body': !isTable }\"\n        (vsChange)=\"onVirtualScrollerChange($event)\" (vsChildRectChange)=\"onChildRectChange($event)\">\n        <ng-container *ngFor=\"let item of scroller.viewPortItems; let index; let isFirst = first;\">\n            <ng-container *ngTemplateOutlet=\"listData; context: {item: item}\"></ng-container>\n        </ng-container>\n    </virtual-scroller>\n\n    <pep-list-pager *ngIf=\"pagerType === 'pages'\" class=\" list-pager\" [disabled]=\"loadingItemsFromApi\"\n        [length]=\"totalRows\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" (pagerChange)=\"onPagerChange($event)\">\n    </pep-list-pager>\n\n    <ng-container *ngTemplateOutlet=\"tableTotal\"></ng-container>\n</ng-container>\n\n<ng-template #listData let-item=\"item\">\n    <ng-container *ngIf=\"isTable\">\n        <!-- getIsItemSelected(item) -> item | isItemSelected: selectionTypeForActions : selectedItemId : isAllSelected : selectedItems : unSelectedItems -->\n        <div class=\"table-row\" (mouseenter)=\"onTableRowMouseEnter($event, item?.UID, item?.Type)\"\n            (mouseleave)=\"onTableRowMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                    selected: getIsItemSelected(item),\n                    highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId\n                }\" [ngStyle]=\"{ visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n            <fieldset class=\"table-row-fieldset\" [ngStyle]=\"{ 'background-color': item?.BackgroundColor }\">\n                <mat-checkbox *ngIf=\"selectionTypeForActions == 'multi'\" type=\"checkbox\"\n                    class=\"pull-left flip row-selection\"\n                    [disabled]=\"item | isItemDisabled: lockItemInnerEvents : printMode\" [ngStyle]=\"{\n                            visibility: !deviceHasMouse ||\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId || isAllSelected || selectedItems.size > 0 ? 'visible' : 'hidden'\n                        }\" [checked]=\"getIsItemSelected(item)\"\n                    (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n                </mat-checkbox>\n                <mat-radio-button *ngIf=\"selectionTypeForActions == 'single'\" name=\"selection\"\n                    class=\"pull-left flip row-selection pep-radio-button\"\n                    [disabled]=\"item | isItemDisabled: lockItemInnerEvents : printMode\"\n                    [checked]=\"getIsItemSelected(item)\"\n                    (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n                </mat-radio-button>\n                <pep-form [layoutType]=\"'table'\" [checkForChanges]=\"checkForChanges\" [layout]=\"layout\"\n                    [firstFieldAsLink]=\"firstFieldAsLink\" [data]=\"item\" [canEditObject]=\"!disabled\"\n                    [lockEvents]=\"lockItemInnerEvents || printMode\" [isReport]=\"isReport\" [isActive]=\"\n                            (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n                        \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n                    (click)=\"itemClicked($event, item)\">\n                </pep-form>\n            </fieldset>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!isTable\">\n        <div (mouseenter)=\"onCardMouseEnter($event, item?.UID, item?.Type)\"\n            (mouseleave)=\"onCardMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                    selected: getIsItemSelected(item),\n                    highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId,\n                    'line-view': viewType === 'lines',\n                    'card-view': viewType === 'cards',\n                    'small-card': cardSize === 'sm'\n                }\" class=\"pull-left flip\"\n            [ngStyle]=\"{ height: calculatedObjectHeight, visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n            <mat-checkbox *ngIf=\"showCardSelection\" class=\"pull-left flip card-selection\"\n                [disabled]=\"item | isItemDisabled: lockItemInnerEvents : printMode\" [checked]=\"getIsItemSelected(item)\"\n                (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n            </mat-checkbox>\n            <pep-form [layoutType]=\"'card'\" [firstFieldAsLink]=\"firstFieldAsLink\" [checkForChanges]=\"checkForChanges\"\n                [layout]=\"layout\" [data]=\"item\" [canEditObject]=\"!disabled\"\n                [lockEvents]=\"lockItemInnerEvents || printMode\" [isActive]=\"\n                        (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n                        item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n                    \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n                (click)=\"itemClicked($event, item)\">\n            </pep-form>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #tableHeader>\n    <div *ngIf=\"isTable\" class=\"table-header\" (mouseup)=\"onListResizeEnd($event)\"\n        (mouseenter)=\"onListHeaderMouseEnter($event)\" (mouseleave)=\"onListHeaderMouseLeave($event)\"\n        (mousemove)=\"onListResize($event)\">\n\n        <div class=\"table-header-padding-top\"></div>\n        <fieldset class=\"table-header-fieldset\">\n            <mat-checkbox *ngIf=\"selectionTypeForActions !== 'none'\" #selectAllCB class=\"pull-left flip row-selection\"\n                type=\"checkbox\" [ngStyle]=\"{\n                        visibility:\n                            selectionTypeForActions == 'single' || \n                            (selectionTypeForActions == 'multi' && hideAllSelectionInMulti) ? 'hidden' : 'visible'\n                    }\"\n                [indeterminate]=\"isAllSelected ? unSelectedItems.size > 0 && unSelectedItems.size < totalRows : (selectedItems.size > 0 && !getIsAllSelectedForActions())\"\n                [disabled]=\"disabled || selectionTypeForActions === 'single'\" [checked]=\"getIsAllSelectedForActions()\"\n                (change)=\"selectAllItemsForActions($event)\"></mat-checkbox>\n            <fieldset>\n                <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"header-column pull-left flip\"\n                    [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\" [ngClass]=\"{\n                            'support-sorting': supportSorting,\n                            'has-sorting': field.ApiName === sortBy,\n                            'is-resizing': field.ApiName === pressedColumn,\n                            'is-first': j === 0 && selectionTypeForActions !== 'multi',\n                            'is-last': j === layout?.ControlFields?.length - 1\n                        }\"\n                    (click)=\"supportSorting ? (onListSortingChange(field.ApiName, sortBy !== null && sortBy != field.ApiName ? true : !isAsc, $event)) : false\">\n\n                    <label id=\"{{ field.ApiName }}\"\n                        class=\"header-label body-sm pull-left flip text-align-{{ field.Layout.XAlignment }}\"\n                        title=\"{{ field.Title }}\">\n                        <span *ngIf=\"field.Mandatory\" class=\"mandatory\">\n                            <pep-icon name=\"system_must\"></pep-icon>\n                        </span>\n                        {{ field.Title != '' ? field.Title : ' '}}\n                    </label>\n\n                    <div *ngIf=\"supportResizing\" class=\"resize-box pull-right flip\"\n                        (mousedown)=\"onListResizeStart($event, field.ApiName)\">\n                        <div class=\"splitter\"></div>\n                    </div>\n\n                    <div *ngIf=\"supportSorting\" class=\"sorting-box pull-left flip\"\n                        [ngClass]=\"{ 'has-sorting': field.ApiName === sortBy }\">\n                        <mat-icon *ngIf=\"field.ApiName !== sortBy\">\n                            <pep-icon name=\"arrow_either\" class=\"asc\"></pep-icon>\n                        </mat-icon>\n                        <ng-container *ngIf=\"field.ApiName === sortBy\">\n                            <mat-icon *ngIf=\"!isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && isAsc }\"\n                                title=\"{{ 'LIST.SORT_ASC' | translate }}\">\n                                <pep-icon name=\"arrow_up\" class=\"asc\"></pep-icon>\n                            </mat-icon>\n                            <mat-icon *ngIf=\"isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && !isAsc }\"\n                                title=\"{{ 'LIST.SORT_DESC' | translate }}\">\n                                <pep-icon name=\"arrow_down\" class=\"desc\"></pep-icon>\n                            </mat-icon>\n                        </ng-container>\n                    </div>\n                </div>\n            </fieldset>\n        </fieldset>\n    </div>\n</ng-template>\n\n<ng-template #tableTotal>\n    <div *ngIf=\"isTable && totalsRow?.length > 0 && totalsRow.length <= layout?.ControlFields.length\"\n        class=\"table-total\">\n        <fieldset class=\"table-header-fieldset\">\n            <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"total-column pull-left flip\"\n                [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\">\n                <label class=\"total-label body-sm text-align-{{ field.Layout.XAlignment }}\">\n                    {{ totalsRow[j] }}\n                </label>\n            </div>\n        </fieldset>\n    </div>\n</ng-template>",
                     host: {
                         '(window:resize)': 'onWinResize($event)',
                     },
@@ -2653,7 +2653,7 @@
     PepListActionsComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-list-actions',
-                    template: "<pep-menu [xPosition]=\"xPosition\" [styleType]=\"'strong'\" [sizeType]=\"sizeType\" [items]=\"!hidden ? actions : null\"\r\n    [hideOnEmptyItems]=\"true\" [iconName]=\"'system_edit'\" (menuItemClick)=\"onActionClicked($event)\"\r\n    (stateChange)=\"onStateChanged($event)\" (menuClick)=\"menuClick.emit();\">\r\n</pep-menu>\r\n",
+                    template: "<pep-menu [xPosition]=\"xPosition\" [styleType]=\"'strong'\" [sizeType]=\"sizeType\" [items]=\"!hidden ? actions : null\"\n    [hideOnEmptyItems]=\"true\" [iconName]=\"'system_edit'\" (menuItemClick)=\"onActionClicked($event)\"\n    (stateChange)=\"onStateChanged($event)\" (menuClick)=\"menuClick.emit();\">\n</pep-menu>\n",
                     styles: [""]
                 },] },
         { type: core.Injectable }
@@ -2750,7 +2750,7 @@
     PepListCarouselComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-list-carousel',
-                    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=\"!(hideArrowsInSmallScreen && screenSize > PepScreenSizeType.SM)\"\r\n            [iconName]=\"'arrow_left_alt'\" [styleType]=\"'regular'\" [disabled]=\"prevDisabled\" (click)=\"moveLeft()\"\r\n            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'\"\r\n                    (click)=\"itemClicked(item)\" class=\"card-view \" [lockEvents]=\"lockItemInnerEvents\"\r\n                    [ngClass]=\"{ 'x-small-card': itemSize === 'xs', 'small-card': itemSize === 'sm'}\">\r\n                </pep-form>\r\n            </ng-container>\r\n        </pep-carousel>\r\n        <pep-button *ngIf=\"!(hideArrowsInSmallScreen && screenSize > PepScreenSizeType.SM)\"\r\n            [iconName]=\"'arrow_right_alt'\" [styleType]=\"'regular'\" [disabled]=\"nextDisabled\" (click)=\"moveRight()\"\r\n            class=\"carousel-arrow end-arrow\">\r\n        </pep-button>\r\n    </ng-template>\r\n</div>",
+                    template: "<div class=\"carousel-container\">\n    <ng-container *ngIf=\"items?.length > 0; then carouselBlock; else emptyBlock\"></ng-container>\n    <ng-template #emptyBlock>\n        <!-- No items -->\n    </ng-template>\n    <ng-template #carouselBlock>\n        <pep-button *ngIf=\"!(hideArrowsInSmallScreen && screenSize > PepScreenSizeType.SM)\"\n            [iconName]=\"'arrow_left_alt'\" [styleType]=\"'regular'\" [disabled]=\"prevDisabled\" (click)=\"moveLeft()\"\n            class=\"carousel-arrow start-arrow\">\n        </pep-button>\n        <pep-carousel #carousel [xWheelEnabled]=\"false\" [snapDuration]=\"duration\"\n            (reachesLeftBound)=\"onReachesLeftBound($event)\" (reachesRightBound)=\"onReachesRightBound($event)\">\n            <ng-container *ngFor=\"let item of items\">\n                <pep-form pepCarouselItem [layout]=\"layout\" [data]=\"item\" [layoutType]=\"'card'\"\n                    (click)=\"itemClicked(item)\" class=\"card-view \" [lockEvents]=\"lockItemInnerEvents\"\n                    [ngClass]=\"{ 'x-small-card': itemSize === 'xs', 'small-card': itemSize === 'sm'}\">\n                </pep-form>\n            </ng-container>\n        </pep-carousel>\n        <pep-button *ngIf=\"!(hideArrowsInSmallScreen && screenSize > PepScreenSizeType.SM)\"\n            [iconName]=\"'arrow_right_alt'\" [styleType]=\"'regular'\" [disabled]=\"nextDisabled\" (click)=\"moveRight()\"\n            class=\"carousel-arrow end-arrow\">\n        </pep-button>\n    </ng-template>\n</div>",
                     styles: [".carousel-container{position:relative;margin:0 calc(.5rem * -1);margin:0 calc(var(--pep-spacing-sm, .5rem) * -1);display:grid}.carousel-container .carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1}.carousel-container .carousel-arrow.start-arrow{left:0}.carousel-container .carousel-arrow.end-arrow{right:0}.carousel-container ::ng-deep.carousel-content .card-view{padding:.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}"]
                 },] },
         { type: core.Injectable }
@@ -2826,7 +2826,7 @@
     PepListChooserComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-list-chooser',
-                    template: "<ng-container *ngIf=\"menuItems?.length > 1\">\r\n    <pep-menu [type]=\"'select'\" [sizeType]=\"sizeType\" [items]=\"menuItems\" [selectedItem]=\"currentItem\"\r\n        [iconName]=\"'arrow_down'\" (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\r\n</ng-container>\r\n<ng-container *ngIf=\"menuItems?.length == 1\">\r\n    <pep-bread-crumbs [items]=\"breadCrumbsItems\" [addSpacing]=\"true\"></pep-bread-crumbs>\r\n</ng-container>",
+                    template: "<ng-container *ngIf=\"menuItems?.length > 1\">\n    <pep-menu [type]=\"'select'\" [sizeType]=\"sizeType\" [items]=\"menuItems\" [selectedItem]=\"currentItem\"\n        [iconName]=\"'arrow_down'\" (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\n</ng-container>\n<ng-container *ngIf=\"menuItems?.length == 1\">\n    <pep-bread-crumbs [items]=\"breadCrumbsItems\" [addSpacing]=\"true\"></pep-bread-crumbs>\n</ng-container>",
                     styles: [""]
                 },] },
         { type: core.Injectable }
@@ -2938,7 +2938,7 @@
     PepListPagerComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-list-pager',
-                    template: "<div class=\"pager-container body-sm\">\r\n    <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_PAGE' | translate }}</span>\r\n    <pep-textbox pepAutoWidth class=\"page-index pep-spacing-element\" [key]=\"'pageIndex'\" [type]=\"'int'\"\r\n        [disabled]=\"disabled\" [xAlignment]=\"'center'\" [renderTitle]=\"false\" [renderError]=\"false\" [renderSymbol]=\"false\"\r\n        [value]=\"pageIndex + 1\" [formattedValue]=\"pageIndex + 1\" [minValue]=\"1\" [maxValue]=\"this.getNumberOfPages()\"\r\n        [maxFieldCharacters]=\"6\" [mandatory]=\"true\" (valueChange)=\"onValueChange($event)\">\r\n    </pep-textbox>\r\n    <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_OUT_OF' | translate }}</span>\r\n    <span class=\"pep-spacing-element\">{{ getNumberOfPages() }}</span>\r\n    <button mat-button [disabled]=\"disabled || _previousButtonsDisabled()\"\r\n        [ngClass]=\"{ disabled: disabled || _previousButtonsDisabled() }\"\r\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"previousPage()\"\r\n        [title]=\"('LIST.PAGER_PREVIOUS' | translate)\">\r\n        <mat-icon>\r\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_right' : 'arrow_left'\"></pep-icon>\r\n        </mat-icon>\r\n    </button>\r\n    <button mat-button [disabled]=\"disabled || _nextButtonsDisabled()\"\r\n        [ngClass]=\"{ disabled: disabled || _nextButtonsDisabled() }\"\r\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"nextPage()\"\r\n        [title]=\"('LIST.PAGER_NEXT' | translate)\">\r\n        <mat-icon>\r\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_left' : 'arrow_right'\"></pep-icon>\r\n        </mat-icon>\r\n    </button>\r\n</div>",
+                    template: "<div class=\"pager-container body-sm\">\n    <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_PAGE' | translate }}</span>\n    <pep-textbox pepAutoWidth class=\"page-index pep-spacing-element\" [key]=\"'pageIndex'\" [type]=\"'int'\"\n        [disabled]=\"disabled\" [xAlignment]=\"'center'\" [renderTitle]=\"false\" [renderError]=\"false\" [renderSymbol]=\"false\"\n        [value]=\"pageIndex + 1\" [formattedValue]=\"pageIndex + 1\" [minValue]=\"1\" [maxValue]=\"this.getNumberOfPages()\"\n        [maxFieldCharacters]=\"6\" [mandatory]=\"true\" (valueChange)=\"onValueChange($event)\">\n    </pep-textbox>\n    <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_OUT_OF' | translate }}</span>\n    <span class=\"pep-spacing-element\">{{ getNumberOfPages() }}</span>\n    <button mat-button [disabled]=\"disabled || _previousButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _previousButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"previousPage()\"\n        [title]=\"('LIST.PAGER_PREVIOUS' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_right' : 'arrow_left'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <button mat-button [disabled]=\"disabled || _nextButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _nextButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"nextPage()\"\n        [title]=\"('LIST.PAGER_NEXT' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_left' : 'arrow_right'\"></pep-icon>\n        </mat-icon>\n    </button>\n</div>",
                     styles: [".pager-container{display:flex;justify-content:center;align-items:center;height:calc(2rem + calc(.5rem * 2));height:calc(2rem + calc(var(--pep-spacing-sm, .5rem) * 2));padding:.5rem;padding:var(--pep-spacing-sm,.5rem)}.pager-container .page-index{min-height:unset;margin-bottom:0}.pager-container .page-index ::ng-deep .mat-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index ::ng-deep .mat-form-field-flex .mat-input-element{min-width:1.25rem}"]
                 },] },
         { type: core.Injectable }
@@ -3009,7 +3009,7 @@
     PepListSortingComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-list-sorting',
-                    template: "<div class=\"sorting-container\">\r\n    <div class=\"body-xs sort-by\">\r\n        <span>{{ 'LIST.SORT_BY' | translate }}</span>\r\n    </div>\r\n    <pep-menu [type]=\"'select'\" [sizeType]=\"sizeType\" [items]=\"menuItems\" [selectedItem]=\"currentItem\"\r\n        [iconName]=\"'arrow_down'\" (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\r\n</div>",
+                    template: "<div class=\"sorting-container\">\n    <div class=\"body-xs sort-by\">\n        <span>{{ 'LIST.SORT_BY' | translate }}</span>\n    </div>\n    <pep-menu [type]=\"'select'\" [sizeType]=\"sizeType\" [items]=\"menuItems\" [selectedItem]=\"currentItem\"\n        [iconName]=\"'arrow_down'\" (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\n</div>",
                     styles: [".sorting-container{display:flex;align-items:center}.sorting-container .sort-by{-webkit-margin-end:.5rem;margin-inline-end:.5rem;-webkit-margin-end:var(--pep-spacing-sm,.5rem);margin-inline-end:var(--pep-spacing-sm,.5rem)}"]
                 },] },
         { type: core.Injectable }
@@ -3033,7 +3033,7 @@
     PepListTotalComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-list-total',
-                    template: "<div class=\"total-items-container\">\r\n    <ng-container *ngIf=\"isMapView; then mapTemplate; else notMapTemplate\"></ng-container>\r\n\r\n    <ng-template #notMapTemplate>\r\n        <ng-container *ngIf=\"totalRows >= 0\">\r\n            <div class=\"body-{{sizeType}} total-items\"\r\n                [innerHtml]=\"(totalRows === 1 ? 'LIST.TOTAL_RESULT' : 'LIST.TOTAL_RESULTS') | translate: { totalRows: totalRows }\">\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"totalAmount > 0\"> {{ 'LIST.TOTAL_OF' | translate }} {{ totalAmount }} </ng-container>\r\n    </ng-template>\r\n\r\n    <ng-template #mapTemplate>\r\n        <ng-container *ngIf=\"totalAmount >= 0\">\r\n        </ng-container>\r\n        <ng-container *ngIf=\"totalRows >= 0\">\r\n            <div class=\"body-{{sizeType}} total-items\"\r\n                [innerHtml]=\"(totalRows === 1 ? 'LIST.TOTAL_RESULT_OUT_OF_RESULT' : 'LIST.TOTAL_RESULTS_OUT_OF') | translate: { xRows: totalAmount, totalRows: totalRows }\">\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n</div>",
+                    template: "<div class=\"total-items-container\">\n    <ng-container *ngIf=\"isMapView; then mapTemplate; else notMapTemplate\"></ng-container>\n\n    <ng-template #notMapTemplate>\n        <ng-container *ngIf=\"totalRows >= 0\">\n            <div class=\"body-{{sizeType}} total-items\"\n                [innerHtml]=\"(totalRows === 1 ? 'LIST.TOTAL_RESULT' : 'LIST.TOTAL_RESULTS') | translate: { totalRows: totalRows }\">\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"totalAmount > 0\"> {{ 'LIST.TOTAL_OF' | translate }} {{ totalAmount }} </ng-container>\n    </ng-template>\n\n    <ng-template #mapTemplate>\n        <ng-container *ngIf=\"totalAmount >= 0\">\n        </ng-container>\n        <ng-container *ngIf=\"totalRows >= 0\">\n            <div class=\"body-{{sizeType}} total-items\"\n                [innerHtml]=\"(totalRows === 1 ? 'LIST.TOTAL_RESULT_OUT_OF_RESULT' : 'LIST.TOTAL_RESULTS_OUT_OF') | translate: { xRows: totalAmount, totalRows: totalRows }\">\n            </div>\n        </ng-container>\n    </ng-template>\n</div>",
                     styles: [".total-items-container{height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;align-items:center}", ".total-items{color:rgba(26,26,26,.7);color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.7)}.total-items .number{color:#1a1a1a;color:hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%))}"]
                 },] },
         { type: core.Injectable }
@@ -3113,7 +3113,7 @@
     PepListViewsComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-list-views',
-                    template: "<ng-container *ngIf=\"displayType === 'menu' then menuTemplate else buttonsTemplate\">\r\n</ng-container>\r\n<ng-template #menuTemplate>\r\n    <pep-menu [type]=\"'select'\" [styleType]=\"styleType\" [sizeType]=\"sizeType\" [classNames]=\"classNames\"\r\n        [items]=\"menuItems\" [selectedItem]=\"currentItem\"\r\n        [iconName]=\"currentItem?.iconName ? currentItem?.iconName : 'arrow_down'\"\r\n        (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\r\n</ng-template>\r\n<ng-template #buttonsTemplate>\r\n    <div class=\"buttons-wrapper pep-spacing-element-negative\">\r\n        <button *ngFor=\"let view of views\" mat-button [title]=\"view.title\" [disabled]=\"view.key === currentView?.key\"\r\n            class=\"pep-button icon-button pep-spacing-element {{ sizeType }} {{ styleType }} {{ classNames }}\"\r\n            pepRtlDirection pepMenuBlur (click)=\"onViewChanged(view)\">\r\n            <mat-icon>\r\n                <pep-icon name=\"{{ view?.iconName }}\"></pep-icon>\r\n            </mat-icon>\r\n        </button>\r\n    </div>\r\n</ng-template>",
+                    template: "<ng-container *ngIf=\"displayType === 'menu' then menuTemplate else buttonsTemplate\">\n</ng-container>\n<ng-template #menuTemplate>\n    <pep-menu [type]=\"'select'\" [styleType]=\"styleType\" [sizeType]=\"sizeType\" [classNames]=\"classNames\"\n        [items]=\"menuItems\" [selectedItem]=\"currentItem\"\n        [iconName]=\"currentItem?.iconName ? currentItem?.iconName : 'arrow_down'\"\n        (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\n</ng-template>\n<ng-template #buttonsTemplate>\n    <div class=\"buttons-wrapper pep-spacing-element-negative\">\n        <button *ngFor=\"let view of views\" mat-button [title]=\"view.title\" [disabled]=\"view.key === currentView?.key\"\n            class=\"pep-button icon-button pep-spacing-element {{ sizeType }} {{ styleType }} {{ classNames }}\"\n            pepRtlDirection pepMenuBlur (click)=\"onViewChanged(view)\">\n            <mat-icon>\n                <pep-icon name=\"{{ view?.iconName }}\"></pep-icon>\n            </mat-icon>\n        </button>\n    </div>\n</ng-template>",
                     styles: [".buttons-wrapper{display:flex}"]
                 },] },
         { type: core.Injectable }