@huntsman-cancer-institute/navigation 17.0.4 → 17.0.6

package/fesm2022/huntsman-cancer-institute-navigation.mjs

@@ -1429,7 +1429,7 @@ let BrandNavComponent = class BrandNavComponent extends NavComponent {
     constructor(elementRef, renderer, resolver, navigationService, changeDetectorRef) {
         super(elementRef, renderer, resolver, navigationService, changeDetectorRef);
         this.queryParamsHandling = "merge";
-        this.aClass = "navbar-brand mr-0 mr-md-2";
+        this.aClass = "navbar-brand me-0 me-md-2";
         this.spanClass = "d-none d-md-flex";
         this.imgRight = false;
         this.aClick = (() => { });
@@ -2440,14 +2440,14 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SearchListControllerComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ComponentFactoryResolver }, { token: NavigationGlobalService }, { token: NavigationService, optional: true }, { token: i3$3.HttpClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SearchListControllerComponent, selector: "hci-search-list-controller", inputs: { showTitle: "showTitle", fields: "fields", basicSearch: "basicSearch", advancedSearch: "advancedSearch", filterByAllowedFields: "filterByAllowedFields", quickSearchFields: "quickSearchFields", advancedSearchFields: "advancedSearchFields", sortByAllowedFields: "sortByAllowedFields", sorts: "sorts", showQuickSearchOptions: "showQuickSearchOptions", showAdvancedSearchOptions: "showAdvancedSearchOptions", searchTypeArray: "searchTypeArray", searchType: "searchType", searchTypeSelected: "searchTypeSelected", basicSearchHeader: "basicSearchHeader" }, outputs: { searchListChange: "searchListChange" }, host: { listeners: { "document:click": "documentClick($event,$event.target)" } }, exportAs: ["searchListControllerComponent"], usesInheritance: true, ngImport: i0, template: `
         <div id="search-title" class="d-flex flex-column">
-          <div *ngIf="showTitle" class="d-flex pl-2">
-            <div *ngIf="showBackButton" class="mr-auto ml-1 backButton">
+          <div *ngIf="showTitle" class="d-flex ps-2">
+            <div *ngIf="showBackButton" class="me-auto ms-1 backButton">
               <button (click)="backButtonClicked()">
                 <i class="hci-white fas fa-chevron-double-left"></i>
               </button>
             </div>
             {{title}}
-            <div class="ml-auto mr-2" (click)="toggleShowOptions($event)">
+            <div class="ms-auto me-2" (click)="toggleShowOptions($event)">
               <i class="fas fa-cog"></i>
             </div>
             <div class="search-options" [class.expanded]="showOptions">
@@ -2744,7 +2744,7 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
                 {{searchType}}
               </option>
             </select>
-            <button class="pl-1 pr-1 search-button" (click)="searchButtonClicked()">
+            <button class="ps-1 pe-1 search-button" (click)="searchButtonClicked()">
               <i class="fas fa-search"></i>
             </button>
           </div>
@@ -2753,7 +2753,7 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
               <ng-container *ngFor="let filter of filters">
                 <ng-container *ngIf="filter.valid">
                   <div (click)="clearFilter(filter)" class="d-flex pill">
-                    <div class="mr-2">
+                    <div class="me-2">
                       {{filter.field}}
                     </div>
                     <div class="close-icon">
@@ -2790,14 +2790,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             type: Component,
             args: [{ selector: "hci-search-list-controller", exportAs: "searchListControllerComponent", template: `
         <div id="search-title" class="d-flex flex-column">
-          <div *ngIf="showTitle" class="d-flex pl-2">
-            <div *ngIf="showBackButton" class="mr-auto ml-1 backButton">
+          <div *ngIf="showTitle" class="d-flex ps-2">
+            <div *ngIf="showBackButton" class="me-auto ms-1 backButton">
               <button (click)="backButtonClicked()">
                 <i class="hci-white fas fa-chevron-double-left"></i>
               </button>
             </div>
             {{title}}
-            <div class="ml-auto mr-2" (click)="toggleShowOptions($event)">
+            <div class="ms-auto me-2" (click)="toggleShowOptions($event)">
               <i class="fas fa-cog"></i>
             </div>
             <div class="search-options" [class.expanded]="showOptions">
@@ -3094,7 +3094,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 {{searchType}}
               </option>
             </select>
-            <button class="pl-1 pr-1 search-button" (click)="searchButtonClicked()">
+            <button class="ps-1 pe-1 search-button" (click)="searchButtonClicked()">
               <i class="fas fa-search"></i>
             </button>
           </div>
@@ -3103,7 +3103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
               <ng-container *ngFor="let filter of filters">
                 <ng-container *ngIf="filter.valid">
                   <div (click)="clearFilter(filter)" class="d-flex pill">
-                    <div class="mr-2">
+                    <div class="me-2">
                       {{filter.field}}
                     </div>
                     <div class="close-icon">
@@ -4220,7 +4220,7 @@ let SearchListComponent = class SearchListComponent extends NavComponent {
         <div class="d-flex scrollable">
           <div id="no-results-found"></div>
           <div id="search-title" class="d-flex flex-column">
-            <div class="d-flex pl-3">
+            <div class="d-flex ps-3">
             </div>
           </div>
           <div id="result-list">
@@ -4328,7 +4328,7 @@ let SearchListComponent = class SearchListComponent extends NavComponent {
           </div>
         </div>
         <!-- Paging footer -->
-        <div *ngIf="paging.pageSize > 0" class="d-flex flex-shrink-0 paging-footer justify-content-between pl-3 pr-3"
+        <div *ngIf="paging.pageSize > 0" class="d-flex flex-shrink-0 paging-footer justify-content-between ps-3 pe-3"
              style="min-height: 1rem; align-items: center;">
           <ng-container *ngIf="!selectedRowGroup">
             <div (click)="doPageFirst()" class="d-flex mt-1 mb-1" [class.disabled]="paging.page === 0"><i
@@ -4347,15 +4347,15 @@ let SearchListComponent = class SearchListComponent extends NavComponent {
 
         <!-- Default template for a group -->
         <ng-template #defaultGroupTemplate let-rowGroup="rowGroup">
-          <div class="d-flex flex-grow-1 pl-2" style="align-items: center;">
-            <div class="font-weight-bold mr-auto">{{getGroupDisplay(rowGroup)}}</div>
-            <ng-container class="d-flex mr-1" style="align-items: center;">
+          <div class="d-flex flex-grow-1 ps-2" style="align-items: center;">
+            <div class="font-weight-bold me-auto">{{getGroupDisplay(rowGroup)}}</div>
+            <ng-container class="d-flex me-1" style="align-items: center;">
               <div *ngIf="rowGroup.rgExpanded === true; else plusTemplate">
-                <i class="fas fa-minus fa-sm mr-1"></i>
+                <i class="fas fa-minus fa-sm me-1"></i>
               </div>
               <ng-template #plusTemplate>
                 <div>
-                  <i class="fas fa-plus fa-sm mr-1"></i>
+                  <i class="fas fa-plus fa-sm me-1"></i>
                 </div>
               </ng-template>
               ({{rowGroup.rgCount}})
@@ -4365,11 +4365,11 @@ let SearchListComponent = class SearchListComponent extends NavComponent {
 
         <!-- Default template for an individual selected group -->
         <ng-template #defaultGroupSelectedTemplate let-rowGroup="rowGroup">
-          <div class="d-flex flex-grow-1 pl-2" style="align-items: center;">
-            <div class="mr-3">
+          <div class="d-flex flex-grow-1 ps-2" style="align-items: center;">
+            <div class="me-3">
               <i class="fas fa-level-up-alt" data-fa-transform="flip-h"></i>
             </div>
-            <div class="font-weight-bold mr-auto">{{getGroupDisplay(rowGroup)}}</div>
+            <div class="font-weight-bold me-auto">{{getGroupDisplay(rowGroup)}}</div>
           </div>
         </ng-template>
       `, isInline: true, styles: [".results-count{background-color:var(--greywarm-meddark);color:#fff;font-size:17.3px;padding-left:18px}.format-bottom-padding{padding-bottom:25px}:host::ng-deep div[id^=row-]:nth-child(2n){background-color:var(--white-medium)!important}:host::ng-deep div[id^=row-]{border:0!important}:host::ng-deep div.row-parent.active{color:#fff!important;background-color:var(--bluewarmvivid-lightest)!important}:host::ng-deep .ri-sidebar-cell{background-color:transparent!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i5$1.BusyComponent, selector: "hci-busy", inputs: ["busy", "busySubjects", "getBusySubjects", "parentSelector", "rootClass", "icon", "iconSize", "showIcon", "mxAuto", "myAuto", "text", "template", "config"] }] }); }
@@ -4394,7 +4394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
         <div class="d-flex scrollable">
           <div id="no-results-found"></div>
           <div id="search-title" class="d-flex flex-column">
-            <div class="d-flex pl-3">
+            <div class="d-flex ps-3">
             </div>
           </div>
           <div id="result-list">
@@ -4502,7 +4502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
           </div>
         </div>
         <!-- Paging footer -->
-        <div *ngIf="paging.pageSize > 0" class="d-flex flex-shrink-0 paging-footer justify-content-between pl-3 pr-3"
+        <div *ngIf="paging.pageSize > 0" class="d-flex flex-shrink-0 paging-footer justify-content-between ps-3 pe-3"
              style="min-height: 1rem; align-items: center;">
           <ng-container *ngIf="!selectedRowGroup">
             <div (click)="doPageFirst()" class="d-flex mt-1 mb-1" [class.disabled]="paging.page === 0"><i
@@ -4521,15 +4521,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
 
         <!-- Default template for a group -->
         <ng-template #defaultGroupTemplate let-rowGroup="rowGroup">
-          <div class="d-flex flex-grow-1 pl-2" style="align-items: center;">
-            <div class="font-weight-bold mr-auto">{{getGroupDisplay(rowGroup)}}</div>
-            <ng-container class="d-flex mr-1" style="align-items: center;">
+          <div class="d-flex flex-grow-1 ps-2" style="align-items: center;">
+            <div class="font-weight-bold me-auto">{{getGroupDisplay(rowGroup)}}</div>
+            <ng-container class="d-flex me-1" style="align-items: center;">
               <div *ngIf="rowGroup.rgExpanded === true; else plusTemplate">
-                <i class="fas fa-minus fa-sm mr-1"></i>
+                <i class="fas fa-minus fa-sm me-1"></i>
               </div>
               <ng-template #plusTemplate>
                 <div>
-                  <i class="fas fa-plus fa-sm mr-1"></i>
+                  <i class="fas fa-plus fa-sm me-1"></i>
                 </div>
               </ng-template>
               ({{rowGroup.rgCount}})
@@ -4539,11 +4539,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
 
         <!-- Default template for an individual selected group -->
         <ng-template #defaultGroupSelectedTemplate let-rowGroup="rowGroup">
-          <div class="d-flex flex-grow-1 pl-2" style="align-items: center;">
-            <div class="mr-3">
+          <div class="d-flex flex-grow-1 ps-2" style="align-items: center;">
+            <div class="me-3">
               <i class="fas fa-level-up-alt" data-fa-transform="flip-h"></i>
             </div>
-            <div class="font-weight-bold mr-auto">{{getGroupDisplay(rowGroup)}}</div>
+            <div class="font-weight-bold me-auto">{{getGroupDisplay(rowGroup)}}</div>
           </div>
         </ng-template>
       `, styles: [".results-count{background-color:var(--greywarm-meddark);color:#fff;font-size:17.3px;padding-left:18px}.format-bottom-padding{padding-bottom:25px}:host::ng-deep div[id^=row-]:nth-child(2n){background-color:var(--white-medium)!important}:host::ng-deep div[id^=row-]{border:0!important}:host::ng-deep div.row-parent.active{color:#fff!important;background-color:var(--bluewarmvivid-lightest)!important}:host::ng-deep .ri-sidebar-cell{background-color:transparent!important}\n"] }]
@@ -4849,7 +4849,7 @@ class AppHeaderComponent extends NavComponent {
     <nav [id]="id + '-nav'"
          class="navbar navbar-expand-md navbar-dark {{ navbarClasses ? ' ' + navbarClasses : '' }}"
          [style.display]="hidden ? 'none' : 'flex'">
-      <div id="leftHeaderContainer" class="mr-auto left-header">
+      <div id="leftHeaderContainer" class="me-auto left-header">
         <ng-container #leftContainer></ng-container>
       </div>
       <div id="rightHeaderContainer" class="d-none d-md-flex right-header">
@@ -4866,7 +4866,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
     <nav [id]="id + '-nav'"
          class="navbar navbar-expand-md navbar-dark {{ navbarClasses ? ' ' + navbarClasses : '' }}"
          [style.display]="hidden ? 'none' : 'flex'">
-      <div id="leftHeaderContainer" class="mr-auto left-header">
+      <div id="leftHeaderContainer" class="me-auto left-header">
         <ng-container #leftContainer></ng-container>
       </div>
       <div id="rightHeaderContainer" class="d-none d-md-flex right-header">
@@ -4970,13 +4970,13 @@ class AppFooterComponent extends NavComponent {
             NavigationService
         ], viewQueries: [{ propertyName: "leftContainerSetter", first: true, predicate: ["leftContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "middleContainerSetter", first: true, predicate: ["middleContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "rightContainerSetter", first: true, predicate: ["rightContainer"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
     <div class="hci-app-footer {{ footerClasses ? ' ' + footerClasses : '' }}">
-      <div id="footer-left-container" class="ml-3">
+      <div id="footer-left-container" class="ms-3">
         <ng-container #leftContainer></ng-container>
       </div>
-      <div id="footer-middle-container" class="ml-auto mr-auto">
+      <div id="footer-middle-container" class="ms-auto me-auto">
         <ng-container #middleContainer></ng-container>
       </div>
-      <div id="footer-right-container" class="mr-3">
+      <div id="footer-right-container" class="me-3">
         <ng-container #rightContainer></ng-container>
       </div>
     </div>
@@ -4988,13 +4988,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                     selector: "hci-app-footer",
                     template: `
     <div class="hci-app-footer {{ footerClasses ? ' ' + footerClasses : '' }}">
-      <div id="footer-left-container" class="ml-3">
+      <div id="footer-left-container" class="ms-3">
         <ng-container #leftContainer></ng-container>
       </div>
-      <div id="footer-middle-container" class="ml-auto mr-auto">
+      <div id="footer-middle-container" class="ms-auto me-auto">
         <ng-container #middleContainer></ng-container>
       </div>
-      <div id="footer-right-container" class="mr-3">
+      <div id="footer-right-container" class="me-3">
         <ng-container #rightContainer></ng-container>
       </div>
     </div>
@@ -5309,9 +5309,9 @@ let SearchTreeControllerComponent = class SearchTreeControllerComponent extends
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SearchTreeControllerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SearchTreeControllerComponent, selector: "hci-search-tree-controller", inputs: { buttonTemplate: "buttonTemplate", hideElements: "hideElements" }, exportAs: ["searchTreeControllerComponent"], usesInheritance: true, ngImport: i0, template: `
     <div *ngIf="!hideElements" id="search-title" class="d-flex flex-column">
-      <div *ngIf="showTitle" class="d-flex pl-2">
+      <div *ngIf="showTitle" class="d-flex">
         {{title}}
-        <div class="d-flex flex-row ml-auto mr-2">
+        <div class="d-flex flex-row ms-auto">
           <div *ngIf="buttonTemplate"><ng-container *ngTemplateOutlet="buttonTemplate"></ng-container></div>
           <a (click)="toggleShowOptions($event)"><i class="fas fa-cog"></i></a>
         </div>
@@ -5331,8 +5331,8 @@ let SearchTreeControllerComponent = class SearchTreeControllerComponent extends
                     </div>
                   </ng-container>
                   <div class="d-flex flex-grow-1 m-1">
-                    <button (click)="applyFilters()" class="ml-auto mr-1"><i class="fas fa-check-circle"></i></button>
-                    <button (click)="setupFilters(true)" class="mr-0"><i class="fas fa-times-circle"></i></button>
+                    <button (click)="applyFilters()" class="ms-auto me-1"><i class="fas fa-check-circle"></i></button>
+                    <button (click)="setupFilters(true)" class="me-0"><i class="fas fa-times-circle"></i></button>
                   </div>
                 </div>
               </ng-template>
@@ -5362,8 +5362,8 @@ let SearchTreeControllerComponent = class SearchTreeControllerComponent extends
         </div>
       </div>
       <div class="d-flex mb-1 global-search" style="align-items: center;">
-        <input [ngModel]="globalSearch" (keyup)="doGlobalSearch($event)" class="ml-2" placeholder="Search"/>
-        <div class="ml-1 mr-1">
+        <input [ngModel]="globalSearch" (keyup)="doGlobalSearch($event)" class="ms-2" placeholder="Search"/>
+        <div class="ms-1 me-1">
           <i class="fal fa-search"></i>
         </div>
       </div>
@@ -5372,7 +5372,7 @@ let SearchTreeControllerComponent = class SearchTreeControllerComponent extends
           <ng-container *ngFor="let filter of filters">
             <ng-container *ngIf="filter.valid">
               <div (click)="clearFilter(filter)" class="d-flex pill">
-                <div class="mr-2">
+                <div class="me-2">
                   {{filter.field}}
                 </div>
                 <div class="close-icon">
@@ -5393,7 +5393,7 @@ let SearchTreeControllerComponent = class SearchTreeControllerComponent extends
     </div>
     <div *ngIf="hideElements" class="sidebar-container">
       <div id="search-title" class="d-flex flex-column pt-1">
-          <div *ngIf="showTitle" class="d-flex pl-3">
+          <div *ngIf="showTitle" class="d-flex ps-3">
             {{title}}
           </div>
       </div>
@@ -5407,9 +5407,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             type: Component,
             args: [{ selector: "hci-search-tree-controller", exportAs: "searchTreeControllerComponent", template: `
     <div *ngIf="!hideElements" id="search-title" class="d-flex flex-column">
-      <div *ngIf="showTitle" class="d-flex pl-2">
+      <div *ngIf="showTitle" class="d-flex">
         {{title}}
-        <div class="d-flex flex-row ml-auto mr-2">
+        <div class="d-flex flex-row ms-auto">
           <div *ngIf="buttonTemplate"><ng-container *ngTemplateOutlet="buttonTemplate"></ng-container></div>
           <a (click)="toggleShowOptions($event)"><i class="fas fa-cog"></i></a>
         </div>
@@ -5429,8 +5429,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                     </div>
                   </ng-container>
                   <div class="d-flex flex-grow-1 m-1">
-                    <button (click)="applyFilters()" class="ml-auto mr-1"><i class="fas fa-check-circle"></i></button>
-                    <button (click)="setupFilters(true)" class="mr-0"><i class="fas fa-times-circle"></i></button>
+                    <button (click)="applyFilters()" class="ms-auto me-1"><i class="fas fa-check-circle"></i></button>
+                    <button (click)="setupFilters(true)" class="me-0"><i class="fas fa-times-circle"></i></button>
                   </div>
                 </div>
               </ng-template>
@@ -5460,8 +5460,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
         </div>
       </div>
       <div class="d-flex mb-1 global-search" style="align-items: center;">
-        <input [ngModel]="globalSearch" (keyup)="doGlobalSearch($event)" class="ml-2" placeholder="Search"/>
-        <div class="ml-1 mr-1">
+        <input [ngModel]="globalSearch" (keyup)="doGlobalSearch($event)" class="ms-2" placeholder="Search"/>
+        <div class="ms-1 me-1">
           <i class="fal fa-search"></i>
         </div>
       </div>
@@ -5470,7 +5470,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
           <ng-container *ngFor="let filter of filters">
             <ng-container *ngIf="filter.valid">
               <div (click)="clearFilter(filter)" class="d-flex pill">
-                <div class="mr-2">
+                <div class="me-2">
                   {{filter.field}}
                 </div>
                 <div class="close-icon">
@@ -5491,7 +5491,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
     </div>
     <div *ngIf="hideElements" class="sidebar-container">
       <div id="search-title" class="d-flex flex-column pt-1">
-          <div *ngIf="showTitle" class="d-flex pl-3">
+          <div *ngIf="showTitle" class="d-flex ps-3">
             {{title}}
           </div>
       </div>
@@ -6033,7 +6033,7 @@ let SearchTreeComponent = class SearchTreeComponent extends NavComponent {
     </div>
 
     <!-- Paging footer -->
-    <div *ngIf="paging.pageSize > 0" class="d-flex flex-shrink-0 paging-footer justify-content-between pl-3 pr-3" style="min-height: 1rem; align-items: center;">
+    <div *ngIf="paging.pageSize > 0" class="d-flex flex-shrink-0 paging-footer justify-content-between ps-3 pe-3" style="min-height: 1rem; align-items: center;">
       <ng-container *ngIf="!selectedRowGroup">
         <div (click)="doPageFirst()" class="d-flex mt-1 mb-1" [class.disabled]="paging.page === 0"><i class="fas fa-fast-backward fa-xs"></i></div>
         <div (click)="doPagePrevious()" class="d-flex mt-1 mb-1" [class.disabled]="paging.page === 0"><i class="fas fa-backward fa-xs"></i></div>
@@ -6073,7 +6073,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
     </div>
 
     <!-- Paging footer -->
-    <div *ngIf="paging.pageSize > 0" class="d-flex flex-shrink-0 paging-footer justify-content-between pl-3 pr-3" style="min-height: 1rem; align-items: center;">
+    <div *ngIf="paging.pageSize > 0" class="d-flex flex-shrink-0 paging-footer justify-content-between ps-3 pe-3" style="min-height: 1rem; align-items: center;">
       <ng-container *ngIf="!selectedRowGroup">
         <div (click)="doPageFirst()" class="d-flex mt-1 mb-1" [class.disabled]="paging.page === 0"><i class="fas fa-fast-backward fa-xs"></i></div>
         <div (click)="doPagePrevious()" class="d-flex mt-1 mb-1" [class.disabled]="paging.page === 0"><i class="fas fa-backward fa-xs"></i></div>