@colijnit/corecomponents_v12 259.1.12 → 259.1.14

package/fesm2015/colijnit-corecomponents_v12.js

@@ -1039,6 +1039,8 @@ var CoreComponentsIcon;
     CoreComponentsIcon["Cancel"] = "cancel";
     CoreComponentsIcon["CancelRoundFilled"] = "cancel_round_filled";
     CoreComponentsIcon["CancelRoundOpen"] = "cancel_round_open";
+    CoreComponentsIcon["CaretDownSolid"] = "caret_down_solid";
+    CoreComponentsIcon["CaretUpSolid"] = "caret_up_solid";
     CoreComponentsIcon["Cart"] = "cart";
     CoreComponentsIcon["CartOpen"] = "cart_open";
     CoreComponentsIcon["CaseManager"] = "case_manager";
@@ -1343,6 +1345,8 @@ const CoreComponentsIconSvg = {
     "cancel": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><polygon points=\"36 35.16 30.45 35.16 14 14.84 19.55 14.84 36 35.16\" fill=\"#484f60\"/><polygon points=\"14 35.16 19.55 35.16 36 14.84 30.45 14.84 14 35.16\" fill=\"#484f60\"/></svg>",
     "cancel_round_filled": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M25,10A15,15,0,1,0,40,25,15,15,0,0,0,25,10Zm9.38,23.32h-5.3L25,28.27l-4.08,5.05H15.63L22.35,25l-6.72-8.32h5.29L25,21.73l4.08-5.05h5.3L27.64,25Z\" fill=\"#484f60\"/></svg>",
     "cancel_round_open": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M25,40.17a15,15,0,1,1,15-15A15,15,0,0,1,25,40.17Zm0-29a14,14,0,1,0,14,14A14,14,0,0,0,25,11.13Z\" fill=\"#484f60\"/><polygon points=\"29.41 32.25 25 26.79 20.59 32.25 17.96 32.25 23.68 25.17 17.96 18.09 20.59 18.09 25 23.54 29.41 18.09 32.04 18.09 26.32 25.17 32.04 32.25 29.41 32.25\" fill=\"#484f60\"/></svg>",
+    "caret_down_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><path d=\"M480 224C492.9 224 504.6 231.8 509.6 243.8C514.6 255.8 511.8 269.5 502.7 278.7L342.7 438.7C330.2 451.2 309.9 451.2 297.4 438.7L137.4 278.7C128.2 269.5 125.5 255.8 130.5 243.8C135.5 231.8 147.1 224 160 224L480 224z\"/></svg>",
+    "caret_up_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><path d=\"M160 416C147.1 416 135.4 408.2 130.4 396.2C125.4 384.2 128.2 370.5 137.4 361.4L297.4 201.4C309.9 188.9 330.2 188.9 342.7 201.4L502.7 361.4C511.9 370.6 514.6 384.3 509.6 396.3C504.6 408.3 492.9 416 480 416L160 416z\"/></svg>",
     "cart": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M16.58,34.84a1.8,1.8,0,1,0,1.8,1.8A1.79,1.79,0,0,0,16.58,34.84Z\" fill=\"#484f60\"/><path d=\"M31.49,34.84a1.8,1.8,0,1,0,1.8,1.8A1.79,1.79,0,0,0,31.49,34.84Z\" fill=\"#484f60\"/><path d=\"M13.39,31.55A1.73,1.73,0,0,0,15,32.72H32.64a1.51,1.51,0,0,0,1.43-1.2L36.6,19a.89.89,0,0,0-1-1.09L10.92,20.83a1,1,0,0,0-.87,1.28Zm19-2.05a1.52,1.52,0,0,1-1.44,1.2H16.51a1.75,1.75,0,0,1-1.57-1.17l-2.31-5.6a1,1,0,0,1,.85-1.29l19.71-2.51a.88.88,0,0,1,1,1.08Z\" fill=\"#484f60\"/><path d=\"M39,17a1.87,1.87,0,0,0-1.36,1.46l-.42,2.89c-.1.67.31,1,.9.7a2.75,2.75,0,0,0,1.33-1.7L40,18A.73.73,0,0,0,39,17Z\" fill=\"#484f60\"/></svg>",
     "cart_open": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 51 51\"><circle cx=\"17.08\" cy=\"34.14\" r=\"1.8\" fill=\"#4d5050\"/><circle cx=\"31.99\" cy=\"34.14\" r=\"1.8\" fill=\"#4d5050\"/><path d=\"M672.39,388.55a1.73,1.73,0,0,0,1.56,1.17h17.69a1.51,1.51,0,0,0,1.43-1.2L695.6,376a.88.88,0,0,0-1-1.08l-24.68,2.93a1,1,0,0,0-.87,1.28Zm19-2.05a1.52,1.52,0,0,1-1.43,1.2h-14.4a1.75,1.75,0,0,1-1.57-1.16l-2.31-5.61a1,1,0,0,1,.86-1.28l19.71-2.51a.87.87,0,0,1,1,1.08Z\" transform=\"translate(-658.5 -359.5)\" fill=\"#4d5050\"/><path d=\"M698,374a1.88,1.88,0,0,0-1.37,1.46l-.42,2.9c-.1.66.31,1,.9.7a2.74,2.74,0,0,0,1.33-1.7L699,375A.74.74,0,0,0,698,374Z\" transform=\"translate(-658.5 -359.5)\" fill=\"#4d5050\"/></svg>",
     "case_manager": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M26.85,29H23.46a.89.89,0,0,0-.88.88v5.28L24,32.3c.08-.74.69-1.32,2.86-1.36H36v-1.1a.89.89,0,0,0-.88-.88H26.85Z\" fill=\"#484f60\" opacity=\"0.5\"/><path d=\"M35.38,38.29a.88.88,0,0,1-.88.88H23.76a.88.88,0,0,1-.88-.88l2.2-5.38A.88.88,0,0,1,26,32H36.7a.88.88,0,0,1,.88.88Z\" fill=\"#484f60\" opacity=\"0.75\"/><path d=\"M20.58,35.11V29.83A2.89,2.89,0,0,1,23.46,27h7.4l1.72-1.89a4.22,4.22,0,0,0-4-3.87h-.49c-1.11,1.57-3.41,3.44-5.56,3.44S18,22.76,16.94,21.19h-.49a4.21,4.21,0,0,0-4,3.87l2.68,3c0,1.77,1.81,8.15,4,8.15h1.44Z\" fill=\"#484f60\"/><path d=\"M28.68,16.31c0,2.71-2.77,5.77-6.18,5.77S16.31,19,16.31,16.31s2.77-5.14,6.19-5.14S28.68,13.59,28.68,16.31Z\" fill=\"#484f60\"/></svg>",
@@ -4533,7 +4537,7 @@ CoDialogWizardComponent.decorators = [
       <div class="dialog-header">
         <ng-content select="[header]"></ng-content>
         <div class="dialog-close-button" *ngIf="showCloseIcon" (click)="closeClick.emit($event)">
-          <co-icon [icon]="icons.Cancel"></co-icon>
+          <co-icon [icon]="icons.CrossSkinny"></co-icon>
         </div>
       </div>
 
@@ -6989,6 +6993,7 @@ class DoubleCalendarComponent extends BaseInputDatePickerDirective {
             }
         }
         this.outputRangeIfValid();
+        this._closeIfRangeComplete();
     }
     handleSecondDateSelected(date) {
         this.selectedSecondDate = date;
@@ -7004,6 +7009,7 @@ class DoubleCalendarComponent extends BaseInputDatePickerDirective {
             this.outputRangeIfValid();
             this.secondDateSelected.next();
         }
+        this._closeIfRangeComplete();
     }
     outputRangeIfValid() {
         if (this.selectedDates[0] instanceof Date && this.selectedDates[1] instanceof Date) {
@@ -7020,6 +7026,16 @@ class DoubleCalendarComponent extends BaseInputDatePickerDirective {
         // Emit updated state to parent
         this.datesSelected.emit(this.selectedDates);
     }
+    _closeIfRangeComplete() {
+        if (this.selectedFirstDate instanceof Date && this.selectedSecondDate instanceof Date) {
+            // emit the selected range (keeps current behavior)
+            this.outputRangeIfValid();
+            // optional: keep your “second date chosen” signal
+            this.secondDateSelected.next();
+            // close the overlay/popup
+            this.clickedOutside.emit();
+        }
+    }
 }
 DoubleCalendarComponent.decorators = [
     { type: Component, args: [{
@@ -9632,6 +9648,7 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
                         this.rowToEdit = this._newRowReference;
                         this.editCellIndex = yield this._nextAvailableCellToEdit(true);
                     }
+                    this.addRow.next();
                     this._detectChanges();
                 }
             }
@@ -10059,177 +10076,177 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
 SimpleGridComponent.decorators = [
     { type: Component, args: [{
                 selector: 'co-simple-grid',
-                template: `
-    <co-grid-toolbar
-      *ngIf="showToolbar" [class.right]="rightToolbar"
-      [showEdit]="showEdit"
-      [showAdd]="showAdd"
-      [showDelete]="showDelete"
-      [deleteEnabled]="selectedRowIndex > -1"
-      (addClick)="addNewRow()"
-      (editClick)="editRow($event)"
-      (saveClick)="validateAndSave()"
-      (cancelClick)="cancelEditRow()"
-      (deleteClick)="removeRow()">
-    </co-grid-toolbar>
-
-    <table
-      id="simple-grid-table"
-      class="simple-grid-table"
-      [clickOutside]="editing"
-      (clickOutside)="handleClickOutsideRow()">
-      <colgroup>
-        <col
-          *ngFor="let column of headerColumnsCopy; let index = index"
-          [class.simple-grid-column-auto-fit]="column.autoFit"
-          [style.width.px]="column.width"
-          [style.min-width.px]="MIN_COLUMN_WIDTH">
-      </colgroup>
-      <thead>
-      <tr>
-        <th
-          scope="col"
-          #headerCell
-          class="simple-grid-column-header"
-          *ngFor="let column of headerColumnsCopy; let index = index">
-          <div
-            class="simple-grid-column-header-wrapper"
-            [class.resizable]="resizable"
-            [class.selected]="column.isSelected"
-            [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign">
-            <ng-container *ngIf="column.headerTemplate; else noHeaderTemplate">
-              <ng-container [ngTemplateOutlet]="column.headerTemplate"></ng-container>
-            </ng-container>
-            <ng-template #noHeaderTemplate>
-              <div
-                class="simple-grid-column-header-label"
-                [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign"
-                [class.with-menu]="showGridSettings"
-                [class.with-sort]="showColumnSort"
-                [textContent]="column.headerText || '&nbsp;'"
-                (click)="showColumnSort ? sortColumn(column, column.field) : toggleColumnMenu(column)">
-              </div>
-
-              <div class="sort-column" *ngIf="showColumnSort">
-                <co-button
-                  (click)="sortColumn(column, column?.field)"
-                  [iconData]="icons.getIcon(Icons.ArrowUpArrowDown)">
-                </co-button>
-              </div>
-
-              <div class="column-menu" *ngIf="column.isSelected">
-                <h3 [textContent]="'COLUMN_OPTIONS' | coreLocalize"></h3>
-                <ul>
-                  <li (click)="hideColumn(column)">Hide Column</li>
-                  <li (click)="sortColumn(column, column.field)">Sort Column</li>
-                </ul>
-              </div>
-            </ng-template>
-            <div
-              *ngIf="resizable && column.resizable"
-              class="simple-grid-column-sizer"
-              (mousedown)="handleSizerMouseDown($event, column)">
-            </div>
-          </div>
-        </th>
-      </tr>
-
-      <div *ngIf="showGridSettings" class="grid-settings">
-        <co-button
-          [class.selected]="isSettingsMenuOpen"
-          [iconData]="icons.getIcon(Icons.CogWheels)"
-          (click)="toggleSettingsMenu()">
-        </co-button>
-
-        <div class="settings-menu" *ngIf="isSettingsMenuOpen">
-          <h3 [textContent]="'GRID_OPTIONS' | coreLocalize"></h3>
-          <ul>
-            <li (click)="exportToExcel()">Export to Excel</li>
-            <li *ngIf="headerColumnsCopy.length !== headerColumns.length" (click)="showAllColumns()">
-              Show All Columns
-            </li>
-          </ul>
-        </div>
-      </div>
-      </thead>
-      <tbody
-        #dropList cdkDropList cdkDropListOrientation="vertical"
-        class="simple-grid-drag-drop-list"
-        [cdkDropListDisabled]="!dragDropEnabled || editing"
-        [cdkDropListData]="data"
-        [cdkDropListEnterPredicate]="handleCanDragDrop"
-        (cdkDropListDropped)="handleDrop($event)">
-      <co-form class="simple-grid-row-form">
-        <tr
-          #rowElement
-          class="simple-grid-row"
-          [class.selected]="rowIndex === selectedRowIndex && !editing" observeVisibility
-          [class.disabled]="getIsRowDisabled(rowIndex)"
-          [class.editing]="rowIndex === editRowIndex"
-          *ngFor="let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index"
-          cdkDrag
-          (click)="handleClickRow($event, rowIndex)" (dblclick)="handleDblClickRow($event, rowIndex, row)"
-          (visibilityChange)="rowVisible.next(row)"
-          (mouseenter)="hoveredRowIndex = rowIndex"
-          (mouseleave)="hoveredRowIndex = -1"
-        >
-          <ng-container *ngIf="isSingleColumnRow(row)">
-            <td class="simple-grid-single-column-cell" [attr.colspan]="headerColumnsCopy.length">
-              <co-simple-grid-cell
-                [column]="columns[singleColumnIndex(row)]"
-                [row]="row"
-                [editMode]="false">
-              </co-simple-grid-cell>
-            </td>
-          </ng-container>
-          <ng-container *ngIf="!isSingleColumnRow(row)">
-            <ng-container *ngFor="let column of headerColumnsCopy; let columnIndex = index">
-              <td class="simple-grid-column-cell" *ngIf="columnIndex !== singleColumnIndex(row)">
-                <co-simple-grid-cell
-                  [column]="column"
-                  [row]="row"
-                  [editMode]="inlineEdit && editing && rowIndex === editRowIndex"
-                  [fieldEditMode]="editCellIndex === columnIndex && rowIndex === editRowIndex"
-                  (cellClick)="handleCellClick($event, row, rowIndex, columnIndex)">
-                </co-simple-grid-cell>
-                <div *ngIf="column.resizable" class="simple-grid-column-sizer-placeholder"></div>
-              </td>
-            </ng-container>
-            <ng-container *ngIf="inlineEdit && showRowButtons">
-              <div class="icons-container" *ngIf="!editing">
-                <co-icon class="icon-item icon-edit"
-                         [iconData]="icons.getIcon(Icons.PenToSquareSolid)" *ngIf="hoveredRowIndex === rowIndex"
-                         (click)="editRow($event, true, rowIndex); $event.stopPropagation()"></co-icon>
-                <co-icon class="icon-item icon-delete"
-                         [iconData]="icons.getIcon(Icons.TrashBin)" *ngIf="hoveredRowIndex === rowIndex"
-                         (click)="selectTheRow(rowIndex); removeRow();"></co-icon>
-              </div>
-              <div class="icons-container">
-                <co-button class="save-button"
-                           *ngIf="editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))"
-                           [iconData]="icons.getIcon(Icons.CheckDuotone)"
-                           (click)="validateAndSave(); $event.stopPropagation()"></co-button>
-                <co-button class="close-button"
-                           *ngIf="editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))"
-                           [iconData]="icons.getIcon(Icons.CrossSkinny)"
-                           (click)="cancelEditRow(); $event.stopPropagation() "></co-button>
-              </div>
-            </ng-container>
-          </ng-container>
-        </tr>
-      </co-form>
-      </tbody>
-    </table>
-    <co-pagination-bar
-      *ngIf="data?.length > rowsPerPage" class="pagination-bar"
-      [itemsPerPage]="rowsPerPage"
-      [currentPage]="currentPage"
-      [totalItems]="data.length"
-      [autoHide]="true"
-      (previousClick)="goToPreviousPage()"
-      (nextClick)="goToNextPage()"
-      (pageClick)="setCurrentPage($event)">
-    </co-pagination-bar>
+                template: `
+    <co-grid-toolbar
+      *ngIf="showToolbar" [class.right]="rightToolbar"
+      [showEdit]="showEdit"
+      [showAdd]="showAdd"
+      [showDelete]="showDelete"
+      [deleteEnabled]="selectedRowIndex > -1"
+      (addClick)="addNewRow()"
+      (editClick)="editRow($event)"
+      (saveClick)="validateAndSave()"
+      (cancelClick)="cancelEditRow()"
+      (deleteClick)="removeRow()">
+    </co-grid-toolbar>
+
+    <table
+      id="simple-grid-table"
+      class="simple-grid-table"
+      [clickOutside]="editing"
+      (clickOutside)="handleClickOutsideRow()">
+      <colgroup>
+        <col
+          *ngFor="let column of headerColumnsCopy; let index = index"
+          [class.simple-grid-column-auto-fit]="column.autoFit"
+          [style.width.px]="column.width"
+          [style.min-width.px]="MIN_COLUMN_WIDTH">
+      </colgroup>
+      <thead>
+      <tr>
+        <th
+          scope="col"
+          #headerCell
+          class="simple-grid-column-header"
+          *ngFor="let column of headerColumnsCopy; let index = index">
+          <div
+            class="simple-grid-column-header-wrapper"
+            [class.resizable]="resizable"
+            [class.selected]="column.isSelected"
+            [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign">
+            <ng-container *ngIf="column.headerTemplate; else noHeaderTemplate">
+              <ng-container [ngTemplateOutlet]="column.headerTemplate"></ng-container>
+            </ng-container>
+            <ng-template #noHeaderTemplate>
+              <div
+                class="simple-grid-column-header-label"
+                [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign"
+                [class.with-menu]="showGridSettings"
+                [class.with-sort]="showColumnSort"
+                [textContent]="column.headerText || '&nbsp;'"
+                (click)="showColumnSort ? sortColumn(column, column.field) : toggleColumnMenu(column)">
+              </div>
+
+              <div class="sort-column" *ngIf="showColumnSort">
+                <co-button
+                  (click)="sortColumn(column, column?.field)"
+                  [iconData]="icons.getIcon(Icons.ArrowUpArrowDown)">
+                </co-button>
+              </div>
+
+              <div class="column-menu" *ngIf="column.isSelected">
+                <h3 [textContent]="'COLUMN_OPTIONS' | coreLocalize"></h3>
+                <ul>
+                  <li (click)="hideColumn(column)">Hide Column</li>
+                  <li (click)="sortColumn(column, column.field)">Sort Column</li>
+                </ul>
+              </div>
+            </ng-template>
+            <div
+              *ngIf="resizable && column.resizable"
+              class="simple-grid-column-sizer"
+              (mousedown)="handleSizerMouseDown($event, column)">
+            </div>
+          </div>
+        </th>
+      </tr>
+
+      <div *ngIf="showGridSettings" class="grid-settings">
+        <co-button
+          [class.selected]="isSettingsMenuOpen"
+          [iconData]="icons.getIcon(Icons.CogWheels)"
+          (click)="toggleSettingsMenu()">
+        </co-button>
+
+        <div class="settings-menu" *ngIf="isSettingsMenuOpen">
+          <h3 [textContent]="'GRID_OPTIONS' | coreLocalize"></h3>
+          <ul>
+            <li (click)="exportToExcel()">Export to Excel</li>
+            <li *ngIf="headerColumnsCopy.length !== headerColumns.length" (click)="showAllColumns()">
+              Show All Columns
+            </li>
+          </ul>
+        </div>
+      </div>
+      </thead>
+      <tbody
+        #dropList cdkDropList cdkDropListOrientation="vertical"
+        class="simple-grid-drag-drop-list"
+        [cdkDropListDisabled]="!dragDropEnabled || editing"
+        [cdkDropListData]="data"
+        [cdkDropListEnterPredicate]="handleCanDragDrop"
+        (cdkDropListDropped)="handleDrop($event)">
+      <co-form class="simple-grid-row-form">
+        <tr
+          #rowElement
+          class="simple-grid-row"
+          [class.selected]="rowIndex === selectedRowIndex && !editing" observeVisibility
+          [class.disabled]="getIsRowDisabled(rowIndex)"
+          [class.editing]="rowIndex === editRowIndex"
+          *ngFor="let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index"
+          cdkDrag
+          (click)="handleClickRow($event, rowIndex)" (dblclick)="handleDblClickRow($event, rowIndex, row)"
+          (visibilityChange)="rowVisible.next(row)"
+          (mouseenter)="hoveredRowIndex = rowIndex"
+          (mouseleave)="hoveredRowIndex = -1"
+        >
+          <ng-container *ngIf="isSingleColumnRow(row)">
+            <td class="simple-grid-single-column-cell" [attr.colspan]="headerColumnsCopy.length">
+              <co-simple-grid-cell
+                [column]="columns[singleColumnIndex(row)]"
+                [row]="row"
+                [editMode]="false">
+              </co-simple-grid-cell>
+            </td>
+          </ng-container>
+          <ng-container *ngIf="!isSingleColumnRow(row)">
+            <ng-container *ngFor="let column of headerColumnsCopy; let columnIndex = index">
+              <td class="simple-grid-column-cell" *ngIf="columnIndex !== singleColumnIndex(row)">
+                <co-simple-grid-cell
+                  [column]="column"
+                  [row]="row"
+                  [editMode]="inlineEdit && editing && rowIndex === editRowIndex"
+                  [fieldEditMode]="editCellIndex === columnIndex && rowIndex === editRowIndex"
+                  (cellClick)="handleCellClick($event, row, rowIndex, columnIndex)">
+                </co-simple-grid-cell>
+                <div *ngIf="column.resizable" class="simple-grid-column-sizer-placeholder"></div>
+              </td>
+            </ng-container>
+            <ng-container *ngIf="inlineEdit && showRowButtons">
+              <div class="icons-container" *ngIf="!editing">
+                <co-icon class="icon-item icon-edit"
+                         [iconData]="icons.getIcon(Icons.PenToSquareSolid)" *ngIf="hoveredRowIndex === rowIndex"
+                         (click)="editRow($event, true, rowIndex); $event.stopPropagation()"></co-icon>
+                <co-icon class="icon-item icon-delete"
+                         [iconData]="icons.getIcon(Icons.TrashBin)" *ngIf="hoveredRowIndex === rowIndex"
+                         (click)="selectTheRow(rowIndex); removeRow();"></co-icon>
+              </div>
+              <div class="icons-container">
+                <co-button class="save-button"
+                           *ngIf="editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))"
+                           [iconData]="icons.getIcon(Icons.CheckDuotone)"
+                           (click)="validateAndSave(); $event.stopPropagation()"></co-button>
+                <co-button class="close-button"
+                           *ngIf="editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))"
+                           [iconData]="icons.getIcon(Icons.CrossSkinny)"
+                           (click)="cancelEditRow(); $event.stopPropagation() "></co-button>
+              </div>
+            </ng-container>
+          </ng-container>
+        </tr>
+      </co-form>
+      </tbody>
+    </table>
+    <co-pagination-bar
+      *ngIf="data?.length > rowsPerPage" class="pagination-bar"
+      [itemsPerPage]="rowsPerPage"
+      [currentPage]="currentPage"
+      [totalItems]="data.length"
+      [autoHide]="true"
+      (previousClick)="goToPreviousPage()"
+      (nextClick)="goToNextPage()"
+      (pageClick)="setCurrentPage($event)">
+    </co-pagination-bar>
   `,
                 providers: [FormMasterService],
                 changeDetection: ChangeDetectionStrategy.OnPush,
@@ -11863,7 +11880,8 @@ ListOfIconsComponent.decorators = [
                 template: `
     <div class="icon-item active" [class.menu-opened]="showMenu" (click)="toggleMenu()">
       <co-icon [iconData]="activeItem.icon" [style.width.px]="iconSize" [style.height.px]="iconSize"></co-icon>
-      <co-icon class="drop-arrow" [iconData]="icons.getIcon(Icon.ArrowPointDown)"></co-icon>
+      <co-icon *ngIf="!showMenu" class="drop-arrow" [iconData]="icons.getIcon(Icon.CaretDownSolid)"></co-icon>
+      <co-icon *ngIf="showMenu" class="drop-arrow" [iconData]="icons.getIcon(Icon.CaretUpSolid)"></co-icon>
     </div>
     <div class="dropdown-menu" *ngIf="showMenu" (clickOutside)="onClickOutside()">
       <div class="icon-item" *ngFor="let item of collection" (click)="selectItem(item)"