npm - nuxeo-development-framework - Versions diffs - 0.0.20-bos → 0.0.21-bos - Mend

nuxeo-development-framework 0.0.20-bos → 0.0.21-bos

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/fesm2022/nuxeo-development-framework.mjs CHANGED Viewed

@@ -16470,11 +16470,11 @@ class TableComponent {
         return this.defaultColumnSize;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TableComponent, deps: [{ token: NuxeoService }, { token: AppConfigService }, { token: TranslationService }, { token: i0.ChangeDetectorRef }, { token: i0.DestroyRef }, { token: EvaluatorsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TableComponent, isStandalone: false, selector: "cts-table", inputs: { rows: "rows", selectionKey: "selectionKey", selectedRowsKeys: "selectedRowsKeys", columns: "columns", responsiveColumns: "responsiveColumns", entityType: "entityType", prefix: "prefix", pageCount: "pageCount", totalRecords: "totalRecords", rowCursor: "rowCursor", fullWidth: "fullWidth", vocItemTranslationPrefix: "vocItemTranslationPrefix", tableMode: "tableMode", componentName: "componentName", columnMode: "columnMode", tableActions: "tableActions", format: "format", defultSort: "defultSort", highlightSelectedCard: "highlightSelectedCard", multiSelectRows: "multiSelectRows", singleSelectRow: "singleSelectRow", rowCheckboxPermission: "rowCheckboxPermission", customFirstRow: "customFirstRow", showActionsAsMenu: "showActionsAsMenu", messages: "messages", defaultColumnSize: "defaultColumnSize", selectionModel: "selectionModel" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", onIconSelected: "onIconSelected", actionOnRow: "actionOnRow", onSorting: "onSorting", onMultiRowSelected: "onMultiRowSelected" }, viewQueries: [{ propertyName: "dataTable", first: true, predicate: DatatableComponent, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n  #tableContainer\r\n  class=\"iner-table-container\"\r\n  [style]=\"'width:' + tableWidth\"\r\n  *ngIf=\"tableMode === tableModes.list && !responsiveView\"\r\n>\r\n  <ngx-datatable\r\n    [ngClass]=\"{ overflowVisible: customFirstRow }\"\r\n    class=\"large-table\"\r\n    [rows]=\"rows\"\r\n    [summaryRow]=\"customFirstRow\"\r\n    [columnMode]=\"columnMode\"\r\n    [scrollbarH]=\"true\"\r\n    [style.width.%]=\"100\"\r\n    [externalSorting]=\"true\"\r\n    (activate)=\"rowDetails($event)\"\r\n    (select)=\"onSelect($event)\"\r\n    (sort)=\"onSort($event)\"\r\n    (window:resize)=\"assignTableColumns($event)\"\r\n    [rowHeight]=\"isFixedOptionColumns ? '3rem' : 'auto'\"\r\n    [selected]=\"selected\"\r\n    [selectionType]=\"multiSelectRows ? 'checkbox' : 'single'\"\r\n    [sorts]=\"[{ prop: defultSort?.name, dir: defultSort?.dir }]\"\r\n    [messages]=\"messages\"\r\n    [disableRowCheck]=\"disableRowCheck\"\r\n  >\r\n    <ngx-datatable-column\r\n      *ngIf=\"\r\n        (multiSelectRows || singleSelectRow) &&\r\n        (!rowCheckboxPermission || someRowsHasEnabledCheckbox)\r\n      \"\r\n      [width]=\"50\"\r\n      [sortable]=\"false\"\r\n      [prop]=\"''\"\r\n      [canAutoResize]=\"false\"\r\n      [draggable]=\"false\"\r\n      [resizeable]=\"false\"\r\n    >\r\n      <ng-template\r\n        ngx-datatable-header-template\r\n        let-value=\"value\"\r\n        let-allRowsSelected=\"allRowsSelected\"\r\n        let-selectFn=\"selectFn\"\r\n      >\r\n        @if (multiSelectRows) {\r\n          <mat-checkbox\r\n            [checked]=\"allRowsSelected\"\r\n            (change)=\"selectFn(!allRowsSelected)\"\r\n          >\r\n          </mat-checkbox>\r\n        }\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        ngx-datatable-cell-template\r\n        let-row=\"row\"\r\n        let-value=\"value\"\r\n        let-isSelected=\"isSelected\"\r\n        let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\r\n      >\r\n        @if (!row[\"__checkboxDisabled\"]) {\r\n          <mat-checkbox\r\n            [checked]=\"isSelected\"\r\n            (change)=\"onCheckboxChangeFn($event)\"\r\n          >\r\n          </mat-checkbox>\r\n        }\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n    <!-- | translate -->\r\n\r\n    <ng-container *ngIf=\"tableColumns$ | async as columns\">\r\n      <ngx-datatable-column *ngIf=\"!columns.length\"></ngx-datatable-column>\r\n\r\n      <!-- [frozenRight]=\"column.type === 'actions'\" -->\r\n      <ng-container *ngFor=\"let column of columns; let i = index\">\r\n        <ng-container *permission=\"{ name: column.permission }\">\r\n          <ngx-datatable-column\r\n            *ngIf=\"column.display\"\r\n            [sortable]=\"column.sortable\"\r\n            [name]=\"prefix + column.name | translate\"\r\n            [prop]=\"column.prop\"\r\n            [resizeable]=\"false\"\r\n            [draggable]=\"false\"\r\n            [frozenLeft]=\"\r\n              (isFixedOptionColumns && column.type === 'actions') ||\r\n              column?.frozenLeft\r\n            \"\r\n            [headerClass]=\"column.headerClass ? column.headerClass : ''\"\r\n            [summaryTemplate]=\"customFirstRow ? customRowTemplate : null\"\r\n            [cellClass]=\"getCellClass(column)\"\r\n            [width]=\"getWidth(column)\"\r\n            [flexGrow]=\"column?.flexGrow\"\r\n            [minWidth]=\"column?.minWidth\"\r\n            [maxWidth]=\"column?.maxWidth\"\r\n          >\r\n            <ng-template\r\n              let-row=\"row\"\r\n              let-value=\"value\"\r\n              let-index=\"index\"\r\n              ngx-datatable-cell-template\r\n            >\r\n              <ng-container *ngIf=\"column.type === 'text'\">\r\n                <div\r\n                  class=\"cell-text-wrapper\"\r\n                  *ngIf=\"!column.withTooltip\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"value\"\r\n                >\r\n                  {{ value ? value : \"--\" }}\r\n                </div>\r\n                <div\r\n                  class=\"cell-text-wrapper\"\r\n                  matTooltip=\"{{ value ? value : '--' }}\"\r\n                  *ngIf=\"column.withTooltip\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"value\"\r\n                >\r\n                  {{ value ? value : \"--\" }}\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'vocabulary'\">\r\n                <div class=\"cell-text-wrapper\">\r\n                  <cts-dropdown-viewer\r\n                    [withOutLabel]=\"true\"\r\n                    [value]=\"value\"\r\n                    [dropdownId]=\"column.vocabularyId\"\r\n                  >\r\n                  </cts-dropdown-viewer>\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'VocCell'\">\r\n                @let _value =\r\n                  value\r\n                    ? (column.vocabularyId + \".\" + value | translate)\r\n                    : \"--\";\r\n                <div\r\n                  class=\"cell-text-wrapper\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value | translate }}\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'VocItem'\">\r\n                @let _value = vocItemTranslationPrefix + value | translate;\r\n                <div\r\n                  class=\"cell-text-wrapper\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"column.type === 'department'\">\r\n                <div class=\"cell-text-wrapper\">\r\n                  <cts-department-viewer [noStyle]=\"true\" [value]=\"value\">\r\n                  </cts-department-viewer>\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'status'\">\r\n                <div class=\"status-wrapper\">\r\n                  <span class=\"value {{ value }}\">\r\n                    <i\r\n                      *ngIf=\"statusIcons && statusIcons !== {}\"\r\n                      class=\"status-icon {{ statusIcons[value] }}\"\r\n                    ></i>\r\n                    <span\r\n                      tooltipIfOverflow\r\n                      [tooltipIfOverflowText]=\"'STATS.' + value | translate\"\r\n                    >\r\n                    </span>\r\n                  </span>\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'role'\">\r\n                @let _value = value ? (\"role.\" + value | translate) : \"--\";\r\n                <div\r\n                  class=\"cell-text-wrapper\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container\r\n                *ngIf=\"column.type === 'actions' && rows.length !== 0\"\r\n              >\r\n                <div\r\n                  [ngClass]=\"\r\n                    disabledActions\r\n                      ? 'disabled-actions-wrapper'\r\n                      : 'actions-wrapper'\r\n                  \"\r\n                  *ngIf=\"!showActionsAsMenu\"\r\n                >\r\n                  <!-- <span class=\"bi bi-trash delete-icon\" (click)=\"performAction(row , 'delete')\"></span> -->\r\n                  <i\r\n                    class=\"bi bi-pencil-square edit-icon\"\r\n                    matTooltip=\"{{ 'UPDATE' | translate }}\"\r\n                    (click)=\"performAction(row, 'edit')\"\r\n                    *ngIf=\"entityType === 'voc-table'\"\r\n                  ></i>\r\n                  <i\r\n                    class=\"bi bi-trash\"\r\n                    matTooltip=\"{{ 'delete' | translate }}\"\r\n                    (click)=\"performAction(row, 'delete')\"\r\n                    *ngIf=\"\r\n                      entityType === 'voc-table' ||\r\n                      entityType === 'department' ||\r\n                      entityType === 'signers'\r\n                    \"\r\n                  ></i>\r\n\r\n                  <i\r\n                    class=\"bi bi-plus-square\"\r\n                    matTooltip=\"{{\r\n                      'USER_MANGMENT.addToDepartment' | translate\r\n                    }}\"\r\n                    (click)=\"performAction(row, 'delete')\"\r\n                    *ngIf=\"entityType === 'users' && row.isInitial\"\r\n                  ></i>\r\n\r\n                  <span *ngFor=\"let action of column.actions\">\r\n                    <ng-container\r\n                      *ngIf=\"action.type == 'button'; else showIcon\"\r\n                    >\r\n                      <button\r\n                        *permission=\"{\r\n                          name: action.permission,\r\n                          entity: row,\r\n                          user: nuxeoService.nuxeoClient.user,\r\n                        }\"\r\n                        class=\"{{ action.class }}\"\r\n                        matTooltip=\"{{ action.tooltip | translate }}\"\r\n                        (click)=\"performAction(row, action.actionName)\"\r\n                      >\r\n                        <mat-icon\r\n                          *ngIf=\"action.icon\"\r\n                          [class]=\"action.iconClass\"\r\n                          [svgIcon]=\"action.icon\"\r\n                        >\r\n                        </mat-icon>\r\n\r\n                        {{ action.title | translate }}\r\n                      </button>\r\n                    </ng-container>\r\n                    <ng-template #showIcon>\r\n                      <i\r\n                        *permission=\"{\r\n                          name: action.permission,\r\n                          entity: row,\r\n                          user: nuxeoService.nuxeoClient.user,\r\n                        }\"\r\n                        class=\"{{ action.icon }}\"\r\n                        matTooltip=\"{{ action.tooltip | translate }}\"\r\n                        (click)=\"performAction(row, action.actionName)\"\r\n                      ></i>\r\n                    </ng-template>\r\n                  </span>\r\n\r\n                  <!-- <i\r\n                *permission=\"{ name: 'registerCorrespondance', entity: row }\"\r\n                class=\"bi bi-box-arrow-in-right\"\r\n                matTooltip=\"{{ 'LISTING.REGISTER' | translate }}\"\r\n                (click)=\"performAction(row, 'register')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'sendCorrespondance', entity: row }\"\r\n                class=\"bi bi-envelope\"\r\n                matTooltip=\"{{ 'LISTING.SEND' | translate }}\"\r\n                (click)=\"performAction(row, 'send')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'closeCorrespondance', entity: row }\"\r\n                class=\"bi bi-x-circle\"\r\n                matTooltip=\"{{ 'LISTING.CLOSE' | translate }}\"\r\n                (click)=\"performAction(row, 'close')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'archiveCorrespondance', entity: row }\"\r\n                class=\"bi bi-folder-symlink\"\r\n                matTooltip=\"{{ 'LISTING.ARCHIVE' | translate }}\"\r\n                (click)=\"performAction(row, 'archive')\"\r\n              ></i> -->\r\n                </div>\r\n                <div\r\n                  [ngClass]=\"\r\n                    disabledActions\r\n                      ? 'disabled-actions-wrapper'\r\n                      : 'actions-wrapper'\r\n                  \"\r\n                  *ngIf=\"showActionsAsMenu\"\r\n                >\r\n                  <button\r\n                    class=\"action-menu-trigger\"\r\n                    [matMenuTriggerFor]=\"menu\"\r\n                    [disabled]=\"disabledActions\"\r\n                  >\r\n                    <i class=\"bi bi-three-dots-vertical\"></i>\r\n                  </button>\r\n                  <mat-menu #menu=\"matMenu\" class=\"datatable-actions-menu\">\r\n                    <button\r\n                      mat-menu-item\r\n                      (click)=\"performAction(row, 'edit')\"\r\n                      *ngIf=\"entityType === 'voc-table'\"\r\n                    >\r\n                      <i class=\"bi bi-pencil-square edit-icon\"></i>\r\n                      <span class=\"action-text\">{{\r\n                        \"UPDATE\" | translate\r\n                      }}</span>\r\n                    </button>\r\n                    <button\r\n                      mat-menu-item\r\n                      (click)=\"performAction(row, 'delete')\"\r\n                      *ngIf=\"\r\n                        entityType === 'voc-table' ||\r\n                        entityType === 'department' ||\r\n                        entityType === 'signers'\r\n                      \"\r\n                    >\r\n                      <i class=\"bi bi-trash\"></i>\r\n                      <span class=\"action-text\">{{\r\n                        \"delete\" | translate\r\n                      }}</span>\r\n                    </button>\r\n                    <button\r\n                      mat-menu-item\r\n                      (click)=\"performAction(row, 'delete')\"\r\n                      *ngIf=\"entityType === 'users' && row.isInitial\"\r\n                    >\r\n                      <i class=\"bi bi-plus-square\"></i>\r\n                      <span class=\"action-text\">{{\r\n                        \"USER_MANGMENT.addToDepartment\" | translate\r\n                      }}</span>\r\n                    </button>\r\n                    <ng-conttainer *ngFor=\"let action of column.actions\">\r\n                      <button\r\n                        (click)=\"performAction(row, action.actionName)\"\r\n                        *permission=\"{\r\n                          name: action.permission,\r\n                          entity: row,\r\n                          user: nuxeoService.nuxeoClient.user,\r\n                        }\"\r\n                      >\r\n                        <i class=\"{{ action.icon }}\"></i>\r\n                        <span class=\"action-text\">{{\r\n                          action.tooltip | translate\r\n                        }}</span>\r\n                      </button>\r\n                    </ng-conttainer>\r\n                  </mat-menu>\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'date'\">\r\n                <div class=\"cell-text-wrapper\">\r\n                  <cts-date-viewer\r\n                    [withOutLabel]=\"true\"\r\n                    [value]=\"value\"\r\n                  ></cts-date-viewer>\r\n                </div>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"column.type === 'custom'\">\r\n                <ng-container\r\n                  *permission=\"{\r\n                    name: column.permission,\r\n                    entity: row,\r\n                    user: nuxeoService.nuxeoClient.user,\r\n                  }\"\r\n                >\r\n                  <cts-dynamic-column\r\n                    [id]=\"column.template\"\r\n                    [column]=\"column\"\r\n                    [context]=\"row\"\r\n                    (performAction)=\"performAction(row, column?.name, $event)\"\r\n                  >\r\n                  </cts-dynamic-column>\r\n                </ng-container>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'direction'\">\r\n                <div\r\n                  (click)=\"iconSelected($event, row)\"\r\n                  class=\"status-wrapper {{ value }} {{ row.state }}\"\r\n                >\r\n                  <span\r\n                    class=\"iner-status-wrapper\"\r\n                    matTooltip=\"{{ 'STATS.' + row.state | translate }}\"\r\n                  >\r\n                    <ng-container\r\n                      *permission=\"{ name: 'isFavorite', entity: row }\"\r\n                    >\r\n                      <span class=\"fav-icon-indicator bi bi-star-fill\"></span>\r\n                    </ng-container>\r\n                    <i\r\n                      class=\"{{\r\n                        directionIcons\r\n                          ? directionIcons['incoming']\r\n                          : 'bi bi-box-arrow-down'\r\n                      }}\"\r\n                      *ngIf=\"row.type === 'IncomingCorrespondence'\"\r\n                    ></i>\r\n                    <i\r\n                      class=\"{{\r\n                        directionIcons\r\n                          ? directionIcons['outgoing']\r\n                          : 'bi bi-box-arrow-up outgoing'\r\n                      }}\"\r\n                      *ngIf=\"row.type === 'OutgoingCorrespondence'\"\r\n                    ></i>\r\n                    <i\r\n                      class=\"{{\r\n                        directionIcons\r\n                          ? directionIcons['internal']\r\n                          : 'bi bi-box-arrow-right internal'\r\n                      }}\"\r\n                      *ngIf=\"row.type === 'InternalCorrespondence'\"\r\n                    ></i>\r\n                  </span>\r\n                  <!-- <span class=\"value {{ value }}\">{{ \"STATS.\" + value | translate }}</span> -->\r\n                </div>\r\n              </ng-container>\r\n            </ng-template>\r\n            <ng-template\r\n              #customRowTemplate\r\n              let-row=\"row\"\r\n              let-value=\"value\"\r\n              ngx-datatable-cell-template\r\n            >\r\n              <div\r\n                class=\"w-full flex items-center justify-center overflow-visible\"\r\n              >\r\n                <cts-dynamic-column\r\n                  [id]=\"column.custom1stCellTemplate\"\r\n                  [column]=\"column\"\r\n                  [context]=\"row\"\r\n                  (performAction)=\"performAction(row, column?.name, $event)\"\r\n                >\r\n                </cts-dynamic-column>\r\n              </div>\r\n            </ng-template>\r\n          </ngx-datatable-column>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ngx-datatable>\r\n</div>\r\n\r\n<div\r\n  *ngIf=\"responsiveView && tableMode !== tableModes.card\"\r\n  (window:resize)=\"assignTableColumns($event)\"\r\n>\r\n  <div class=\"dynamic-cards-container\">\r\n    <div\r\n      class=\"single-card\"\r\n      [ngClass]=\"{ 'selected-card': highlightSelectedCard && row?.isSelected }\"\r\n      *ngFor=\"let row of rows\"\r\n    >\r\n      <div class=\"memo-title\">\r\n        <span\r\n          tooltipIfOverflow\r\n          [tooltipIfOverflowText]=\"row.properties.referenceNumber\"\r\n        >\r\n          {{ row.properties.referenceNumber }}\r\n        </span>\r\n        <span class=\"action-wrap\">\r\n          <span class=\"action\" *ngFor=\"let action of tableActions\">\r\n            <i\r\n              *permission=\"{\r\n                name: action.permission,\r\n                entity: row,\r\n                user: nuxeoService.nuxeoClient.user,\r\n              }\"\r\n              class=\"{{ action.icon }}\"\r\n              matTooltip=\"{{ action.tooltip | translate }}\"\r\n              (click)=\"performAction(row, action.actionName)\"\r\n            ></i>\r\n          </span>\r\n        </span>\r\n      </div>\r\n      <div *ngIf=\"tableColumns.length > 1\">\r\n        <div\r\n          class=\"memo-body\"\r\n          *ngFor=\"let property of tableColumns$ | async\"\r\n          (click)=\"cardSelected(row)\"\r\n        >\r\n          <div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n          <div class=\"value\">\r\n            @switch (property.type) {\r\n              @case (\"text\") {\r\n                @let _value = row.properties[property.value];\r\n                <div\r\n                  class=\"text\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              }\r\n              @case (\"owner\") {\r\n                @let _value = row.properties[property.owner]?.[property.value];\r\n                <div\r\n                  class=\"text\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              }\r\n              @case (\"date\") {\r\n                @let _value =\r\n                  row.properties[property.value]\r\n                    | localizedDate: format : (isArabic ? \"ar-AR\" : \"en-US\");\r\n                <div\r\n                  class=\"text\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              }\r\n              @case (\"status\") {\r\n                @let _value = \"STATS.\" + row[property.value] | translate;\r\n                <div\r\n                  class=\"value {{ row[property.value] }}\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              }\r\n              @case (\"department\") {\r\n                <cts-department-viewer\r\n                  [noStyle]=\"true\"\r\n                  [value]=\"row.properties[property.value]\"\r\n                >\r\n                </cts-department-viewer>\r\n              }\r\n              @case (\"vocabulary\") {\r\n                <div class=\"cell-text-wrapper\">\r\n                  <cts-dropdown-viewer\r\n                    [withOutLabel]=\"true\"\r\n                    [value]=\"row.properties[property.value]\"\r\n                    [dropdownId]=\"property.vocabularyId\"\r\n                  >\r\n                  </cts-dropdown-viewer>\r\n                </div>\r\n              }\r\n              @case (\"direction\") {\r\n                <div\r\n                  (click)=\"iconSelected($event, row)\"\r\n                  class=\"status-wrapper {{ property.value }} {{ row.state }}\"\r\n                >\r\n                  <span\r\n                    class=\"iner-status-wrapper\"\r\n                    matTooltip=\"{{ 'STATS.' + row.state | translate }}\"\r\n                  >\r\n                    <ng-container\r\n                      *permission=\"{ name: 'isFavorite', entity: row }\"\r\n                    >\r\n                      <span class=\"fav-icon-indicator bi bi-star-fill\"></span>\r\n                    </ng-container>\r\n                    <i\r\n                      class=\"bi bi-box-arrow-down\"\r\n                      *ngIf=\"row.type === 'IncomingCorrespondence'\"\r\n                    ></i>\r\n                    <i\r\n                      class=\"bi bi-box-arrow-up outgoing\"\r\n                      *ngIf=\"row.type === 'OutgoingCorrespondence'\"\r\n                    ></i>\r\n                    <i\r\n                      class=\"bi bi-box-arrow-right internal\"\r\n                      *ngIf=\"row.type === 'InternalCorrespondence'\"\r\n                    ></i>\r\n                  </span>\r\n                </div>\r\n              }\r\n              @case (\"custom\") {\r\n                <div\r\n                  *permission=\"{\r\n                    name: column.permission,\r\n                    entity: row,\r\n                    user: nuxeoService.nuxeoClient.user,\r\n                  }\"\r\n                >\r\n                  <cts-dynamic-column\r\n                    [id]=\"property.template\"\r\n                    [column]=\"property\"\r\n                    [context]=\"row\"\r\n                    (performAction)=\"performAction(row, property?.name, $event)\"\r\n                  >\r\n                  </cts-dynamic-column>\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <ng-container *ngIf=\"tableColumns.length === 1\">\r\n      <div\r\n        class=\"iner-card-container {{ entityType }}\"\r\n        (click)=\"cardSelected(row)\"\r\n        *ngFor=\"let row of rows\"\r\n      >\r\n        <cts-dynamic-column\r\n          [id]=\"columns[0].template\"\r\n          [column]=\"columns[0]\"\r\n          [context]=\"row\"\r\n          (performAction)=\"performAction(row, columns[0]?.name, $event)\"\r\n        >\r\n        </cts-dynamic-column>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.card\">\r\n  <div class=\"cards-container\">\r\n    <div class=\"single-card\" *ngFor=\"let row of rows; let i = index\">\r\n      <div class=\"memo-title\">\r\n        <span\r\n          tooltipIfOverflow\r\n          [tooltipIfOverflowText]=\"row.properties.referenceNumber\"\r\n        >\r\n          {{ row.properties.referenceNumber }}\r\n        </span>\r\n        <span class=\"action-wrap\">\r\n          <span class=\"action\" *ngFor=\"let action of tableActions\">\r\n            <i\r\n              *permission=\"{\r\n                name: action.permission,\r\n                entity: row,\r\n                user: nuxeoService.nuxeoClient.user,\r\n              }\"\r\n              class=\"{{ action.icon }}\"\r\n              matTooltip=\"{{ action.tooltip | translate }}\"\r\n              (click)=\"performAction(row, action.actionName)\"\r\n            ></i>\r\n          </span>\r\n          <button\r\n            *permission=\"{\r\n              name: 'deleteMemo',\r\n              entity: row,\r\n              user: nuxeoService.nuxeoClient.user,\r\n            }\"\r\n            (click)=\"performAction(row, 'deleteMemo')\"\r\n          >\r\n            <i\r\n              class=\"bi bi-trash\"\r\n              matTooltip=\"{{ 'LISTING.ONLY_DELETE' | translate }}\"\r\n            ></i>\r\n          </button>\r\n          <button\r\n            *permission=\"{\r\n              name: 'terminateDelegation',\r\n              entity: row,\r\n              user: nuxeoService.nuxeoClient.user,\r\n            }\"\r\n            (click)=\"performAction(row, 'terminateDelegation')\"\r\n          >\r\n            <i\r\n              class=\"bi bi-trash\"\r\n              matTooltip=\"{{ 'LISTING.CANCEL' | translate }}\"\r\n            ></i>\r\n          </button>\r\n          <span\r\n            class=\"publish-state\"\r\n            *permission=\"{\r\n              name: 'memoPublished',\r\n              entity: row,\r\n              user: nuxeoService.nuxeoClient.user,\r\n            }\"\r\n            tooltipIfOverflow\r\n            [tooltipIfOverflowText]=\"'MEMOS.PUBLISHED' | translate\"\r\n          >\r\n            {{ \"MEMOS.PUBLISHED\" | translate }}\r\n          </span>\r\n          <span\r\n            class=\"publish-state\"\r\n            *permission=\"{\r\n              name: 'delegationFinished',\r\n              entity: row,\r\n              user: nuxeoService.nuxeoClient.user,\r\n            }\"\r\n            tooltipIfOverflow\r\n            [tooltipIfOverflowText]=\"'delegations.finished' | translate\"\r\n          >\r\n            {{ \"delegations.finished\" | translate }}\r\n          </span>\r\n          <span\r\n            class=\"publish-state\"\r\n            *permission=\"{\r\n              name: 'delegationActive',\r\n              entity: row,\r\n              user: nuxeoService.nuxeoClient.user,\r\n            }\"\r\n            tooltipIfOverflow\r\n            [tooltipIfOverflowText]=\"'delegations.active' | translate\"\r\n          >\r\n            {{ \"delegations.active\" | translate }}\r\n          </span>\r\n        </span>\r\n      </div>\r\n      <div\r\n        class=\"memo-body\"\r\n        *ngFor=\"let property of tableColumns$ | async\"\r\n        (click)=\"cardSelected(row); cardFocused(i)\"\r\n      >\r\n        <div\r\n          class=\"key\"\r\n          *ngIf=\"property.type !== 'default'\"\r\n          tooltipIfOverflow\r\n          [tooltipIfOverflowText]=\"prefix + property.key | translate\"\r\n        >\r\n          {{ prefix + property.key | translate }}\r\n        </div>\r\n        <ng-container *ngIf=\"property.type === 'default'\">\r\n          <div\r\n            class=\"key\"\r\n            *permission=\"{\r\n              name: 'internalIsEnabled',\r\n              entity: row,\r\n              user: nuxeoService.nuxeoClient.user,\r\n            }\"\r\n            tooltipIfOverflow\r\n            [tooltipIfOverflowText]=\"prefix + property.key | translate\"\r\n          >\r\n            {{ prefix + property.key | translate }}\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"value\">\r\n          @switch (property.type) {\r\n            @case (\"text\") {\r\n              @let _value = row.properties[property.value];\r\n              <div\r\n                class=\"text\"\r\n                tooltipIfOverflow\r\n                [tooltipIfOverflowText]=\"_value\"\r\n              >\r\n                {{ _value }}\r\n              </div>\r\n            }\r\n            @case (\"user\") {\r\n              @let _value = row.properties[property.value].fullName;\r\n              <div\r\n                class=\"text\"\r\n                tooltipIfOverflow\r\n                [tooltipIfOverflowText]=\"_value\"\r\n              >\r\n                {{ _value }}\r\n              </div>\r\n            }\r\n            @case (\"date\") {\r\n              @let _value =\r\n                row.properties[property.value]\r\n                  | localizedDate: format : (isArabic ? \"ar-AR\" : \"en-US\");\r\n              <div\r\n                class=\"text\"\r\n                tooltipIfOverflow\r\n                [tooltipIfOverflowText]=\"_value\"\r\n              >\r\n                {{ _value }}\r\n              </div>\r\n            }\r\n            @case (\"boolean\") {\r\n              @let _value =\r\n                (row.properties[property.value] ? \"Yes\" : \"No\") | translate;\r\n              <div\r\n                class=\"text\"\r\n                tooltipIfOverflow\r\n                [tooltipIfOverflowText]=\"_value\"\r\n              >\r\n                {{ _value }}\r\n              </div>\r\n            }\r\n            @case (\"default\") {\r\n              @let _value = row.properties[property.value];\r\n              <div\r\n                class=\"text\"\r\n                *permission=\"{\r\n                  name: 'internalIsEnabled',\r\n                  entity: row,\r\n                  user: nuxeoService.nuxeoClient.user,\r\n                }\"\r\n                tooltipIfOverflow\r\n                [tooltipIfOverflowText]=\"_value\"\r\n              >\r\n                {{ _value }}\r\n              </div>\r\n            }\r\n            @case (\"custom\") {\r\n              <div\r\n                class=\"text\"\r\n                *ngFor=\"let item of row.properties[property.value]\"\r\n                tooltipIfOverflow\r\n                [tooltipIfOverflowText]=\"item | translate\"\r\n              >\r\n                {{ item | translate }} {{ \", \" }}\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.dynamicCard\">\r\n  <div class=\"cards-container\">\r\n    <div\r\n      class=\"single-card\"\r\n      [ngClass]=\"{ 'selected-card': highlightSelectedCard && row?.isSelected }\"\r\n      *ngFor=\"let row of rows\"\r\n    >\r\n      <div *ngIf=\"tableColumns.length > 1\">\r\n        <div\r\n          class=\"memo-body\"\r\n          *ngFor=\"let property of tableColumns$ | async\"\r\n          (click)=\"cardSelected(row)\"\r\n        >\r\n          <div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n          <div class=\"value\">\r\n            @switch (property.type) {\r\n              @case (\"text\") {\r\n                @let _value = row.properties[property.value];\r\n                <div\r\n                  class=\"text\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              }\r\n              @case (\"date\") {\r\n                @let _value =\r\n                  row.properties[property.value]\r\n                    | localizedDate: format : (isArabic ? \"ar-AR\" : \"en-US\");\r\n                <div\r\n                  class=\"text\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"iner-card-container {{ entityType }}\"\r\n        (click)=\"cardSelected(row)\"\r\n        *ngIf=\"tableColumns.length === 1\"\r\n      >\r\n        <cts-dynamic-column\r\n          [id]=\"tableColumns[0].template\"\r\n          [column]=\"tableColumns[0]\"\r\n          [context]=\"row\"\r\n          (performAction)=\"performAction(row, tableColumns[0]?.name, $event)\"\r\n        >\r\n        </cts-dynamic-column>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.custom\" class=\"table-custom-view\">\r\n  <app-dynamic-component\r\n    class=\"table-custom-view__component\"\r\n    *ngFor=\"let row of rows\"\r\n    [componentName]=\"componentName\"\r\n    [row]=\"row\"\r\n    [rowAction]=\"actionOnRow\"\r\n    [selectionModel]=\"selectionModel\"\r\n    [onClick]=\"onRowSelected\"\r\n    (click)=\"cardSelected(row)\"\r\n    [class.dynamic-selected-card]=\"highlightSelectedCard && row?.isSelected\"\r\n  ></app-dynamic-component>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.ngx-datatable{border:var(--ngx-datatable-border, 1px solid #eef1f5);border-radius:5px}.ngx-datatable .datatable-header-inner{min-width:var(--datatable-header-inner-min-width, 0)}.ngx-datatable .datatable-header-cell-template-wrap{width:var(--datatable-header-cell-wrap-width, 100%);height:var(--datatable-header-cell-wrap-height, 100%);display:var(--datatable-header-cell-wrap-display, flex);align-items:var(--datatable-header-cell-wrap-align-items, center);justify-content:var(--datatable-header-cell-wrap-justify-content, center);white-space:var(--datatable-header-cell-wrap-white-space, pre)}.ngx-datatable .datatable-header-cell-template-wrap .datatable-header-cell-wrapper{display:var(--datatable-header-cell-wrapper-display, flex)}.ngx-datatable .datatable-header-cell-template-wrap .datatable-header-cell-wrapper .datatable-header-cell-label{text-align:var(--datatable-header-cell-label-align, center)}.ngx-datatable .datatable-header{font-weight:var(--datatable-header-weight, bold);height:var(--datatable-header-height, 50px);background:var(--datatable-header-background, #eef1f5);color:var(--datatable-header-color, #9aa4ac);font-size:var(--datatable-header-font-size, 14px);padding:var(--datatable-header-padding, 0);border:0px solid var(--datatable-header-border-color);border-width:var(--datatable-header-border-width, 0 0 1px 0)}.ngx-datatable .datatable-header .datatable-header-inner{min-width:var(--datatable-header-inner-min-width)!important;height:var(--datatable-header-inner-height, 100%);padding:var(--datatable-header-inner-padding, 0px 20px)}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center{display:var(--datatable-row-display, flex);justify-content:var(--datatable-row-justify, space-between);padding:var(--datatable-row-padding);align-items:var(--datatable-row-align, center);flex-grow:var(--datatable-row-flex-grow);min-width:var(--datatable-row-min-width);grid-template-columns:var(--datatable-row-columns);gap:var(--datatable-row-gap, 0)}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell{width:var(--datatable--header-cell-width);min-width:var(--datatable-header-cell-min-width);min-height:var(--datatable-header-cell-min-height, var(--datatable-cell-min-height, 50px));flex-grow:var(--datatable-header-cell-grow);flex-shrink:var(--datatable-header-cell-shrink)}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn{margin:var(--sort-btn-margin, 5px 5px 0px);width:var(--sort-btn-width, 16px);height:var(--sort-btn-height, 16px)}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn:before{content:var(--sort-btn-icon, \"\\f127\");display:inline-block;font-family:bootstrap-icons!important;font-style:normal;font-weight:400!important;font-variant:normal;font-size:var(--sort-btn-icon-size, 16px);text-transform:none;line-height:1;vertical-align:-.125em;-webkit-font-smoothing:antialiased;color:var(--sort-btn-icon-color, black)}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn.datatable-icon-up{--sort-btn-icon: \"\\f57b\"}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn.datatable-icon-down{--sort-btn-icon: \"\\f574\"}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-header-cell-template-wrap .checkbox-input{z-index:99}.ngx-datatable .datatable-body .empty-row{text-align:center}.ngx-datatable .datatable-body .datatable-row-left .datatable-body-cell{display:var(--datatable-body-left-cell-display, flex);justify-content:var(--datatable-body-left-cell-justify, flex-start);align-items:var(--datatable-body-left-cell-align-items, center);padding-inline:var(--datatable-body-left-cell-padding-inline)}.ngx-datatable .datatable-body .datatable-scroll{min-width:var(--datatable-scroll-min-width, 100%)!important;--datatable-body-cell-overflow: visible}.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row{display:flex!important;min-height:50px!important;overflow:visible!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row{height:var(--datatable-summary-row-height, 50px);font-size:var(--datatable-summary-row-font-size, 14px)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row{min-width:var(--datatable-body-row-min-width, 100%)!important;height:var(--datatable-body-row-height, 100%);padding:var(--datatable-body-row-padding, 0)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center{display:var(--datatable-row-display, flex);justify-content:var(--datatable-row-justify, space-between);align-items:var(--datatable-row-align, center);padding:var(--datatable-row-padding, 0px 20px);flex-grow:var(--datatable-row-flex-grow);min-width:var(--datatable-row-min-width);overflow:var(--datatable-row-overflow, visible);grid-template-columns:var(--datatable-row-columns);gap:var(--datatable-row-gap, 0)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell{display:var(--datatable-body-cell-display, flex);align-items:var(--datatable-body-cell-align-items, center);justify-content:var(--datatable-body-cell-justify-content, center);gap:var(--datatable-body-cell-gap);flex-grow:var(--datatable-body-cell-grow);flex-shrink:var(--datatable-body-cell-shrink);overflow:var(--datatable-body-cell-overflow, hidden);width:var(--datatable--body-cell-width, var(--datatable-cell-width, auto));min-width:var(--datatable-body-cell-min-width, var(--datatable-cell-min-width, 0));min-height:var(--datatable-body-cell-min-height, var(--datatable-cell-min-height, 50px))}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label{display:var(--datatable-body-cell-label-display, flex);justify-content:var(--datatable-body-cell-label-justify, center);font-size:var(--datatable-body-cell-label-font-size, inherit);font-weight:var(--datatable-body-cell-label-font-weight);line-height:var(--datatable-body-cell-label-line-height);width:var(--datatable-body-cell-label-width, 100%);color:var(--datatable-body-cell-label-color, inherit)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .checkbox-input,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .checkbox-input{z-index:99}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .cell-text-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .cell-text-wrapper{width:auto;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 5px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper{position:relative}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper .fav-icon-indicator,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper .fav-icon-indicator{font-size:12px;position:absolute;top:-5px;right:-10px;color:var(--yellow-200, #ebb98e)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value{display:flex;justify-content:center;align-items:center;border-radius:5px;width:100px;height:25px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value .status-icon,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value .status-icon{margin-inline-end:5px;font-size:var(--status-icon-size, 16px)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .draft,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .draft{background-color:#596973;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .inProgress,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .inProgress{background-color:#3c3cf0;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .registered,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .registered{background-color:#5a1496;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .archived,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .archived{background-color:#fbb62c;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .closed,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .closed{background-color:#00dca5;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .approved,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .approved{background-color:var(--green-600, #06a57e);color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .assigned,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .assigned{background-color:#fd6670;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .sent,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .sent{background-color:#3c3cf0;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_revision,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_revision{background:#689be7;color:#e9f1fd}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .rejected,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .rejected{background-color:#fd6670;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_sign,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_sign{background-color:#dda722;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirectSelection,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirectSelection{background-color:#28b994;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirect,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirect{background-color:#e38888;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Incoming,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Incoming{color:#00dca5}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Outgoing,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Outgoing{color:#fbb62c}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Internal,.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.internal,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Internal,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.internal{color:#3c3cf0}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper{width:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi{font-size:25px;cursor:pointer;color:#465573;margin:0 5px!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi:hover,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi:hover{color:var(--blue, #2e62df)!important;font-size:26px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button{display:flex;color:#5171a6;font-size:16px;height:45px;align-items:center;padding:0 10px;width:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button i,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button i{font-size:20px;padding:0;display:flex;align-items:center}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button .action-text,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button .action-text{padding:0 5px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button:hover,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button:hover{background-color:#e6ebf2}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper{width:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper .bi,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper .bi{font-size:25px;cursor:not-allowed;color:#465573;margin:0 5px!important;opacity:.7}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper:nth-child(2n){background-color:var(--even-row-background, #f4f6f8)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper:hover{background-color:var(--even-row-hover-background, #eef1f5)}.ngx-datatable div.datatable-row-left{order:1;margin-inline-start:auto;inset-inline:var(--datatable-row-left-inline, 0 auto);position:var(--datatable-row-left-position, sticky)!important}.ngx-datatable div.datatable-row-left .datatable-body-cell{overflow:hidden;background:var(--table-options-body-cell-color, #fff)}.ngx-datatable div.datatable-row-left .datatable-header-cell{overflow:hidden;background:var(--table-options-header-cell-color, #fff)}.iner-table-container{max-width:var(--table-container-max-width, 100%)}.rtl .ngx-datatable .datatable-body .status-wrapper .fav-icon-indicator{left:-10px;top:15px!important;right:auto!important}.cards-container{display:flex;flex-wrap:wrap;justify-content:center}.cards-container .single-card{padding-inline:var(--tbl-card-inline-padding, 1rem);padding-block:var(--tbl-card-block-padding, 1rem);margin-inline:var(--tbl-card-inline-margin, 5px);margin-block:var(--tbl-card-block-margin, 0px 10px);min-width:var(--tbl-card-min-width, 250px);width:var(--tbl-card-width, 24%);background:var(--tbl-card-background, #fff);border:var(--tbl-card-border, 1px solid rgba(180, 186, 198, .2));border-radius:var(--tbl-card-radius, 4px);box-shadow:var(--tbl-card-shadow, 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12));cursor:pointer}.cards-container .single-card .memo-title{font-size:14px;font-weight:700;color:#465573;border-bottom:1px solid lightgray;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}.cards-container .single-card .memo-title .action-wrap .action{margin:0 5px;cursor:pointer}.cards-container .single-card .memo-title .action-wrap .action i{font-size:16px}.cards-container .single-card .memo-title .action-wrap .action i:hover{color:#00f}.cards-container .single-card .memo-title .action-wrap .publish-state{font-size:12px;color:#00dca5;font-weight:700}.cards-container .single-card .memo-title .action-wrap button{border:none;color:#465573;background-color:transparent}.cards-container .single-card .memo-title .action-wrap button i{font-size:16px}.cards-container .single-card .memo-title .action-wrap button i:hover{color:#00f}.cards-container .single-card .memo-body{display:flex;padding:0 10px}.cards-container .single-card .memo-body .key{width:50%;font-size:12px;color:#9aa4ac}.cards-container .single-card .memo-body .value{width:50%;font-size:12px}.cards-container .single-card .memo-body .value .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cards-container .single-card:hover{background-color:#f6f7f8}.cards-container .single-card:focus{background-color:#f6f7f8}.cards-container .selected-card{background-color:#f6f7f8}.dynamic-cards-container{display:flex;flex-wrap:wrap;justify-content:center}.dynamic-cards-container .single-card{padding:15px;border:1px solid rgba(180,186,198,.2);border-radius:3px;min-width:306px;width:24%;margin:0 5px 10px;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;cursor:pointer}.dynamic-cards-container .single-card .memo-title{font-size:14px;font-weight:700;color:#465573;border-bottom:1px solid lightgray;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}.dynamic-cards-container .single-card .memo-title .action-wrap .action{cursor:pointer}.dynamic-cards-container .single-card .memo-title .action-wrap .action i{font-size:16px}.dynamic-cards-container .single-card .memo-title .action-wrap .action i:hover{color:#00f}.dynamic-cards-container .single-card .memo-title .action-wrap .publish-state{font-size:12px;color:#00dca5;font-weight:700}.dynamic-cards-container .single-card .memo-title .action-wrap button{border:none;color:#465573;background-color:transparent}.dynamic-cards-container .single-card .memo-title .action-wrap button i{font-size:16px}.dynamic-cards-container .single-card .memo-title .action-wrap button i:hover{color:#00f}.dynamic-cards-container .single-card .memo-body{display:flex;padding:0 10px}.dynamic-cards-container .single-card .memo-body .key{width:58%;font-size:12px;color:#9aa4ac;margin-bottom:4px}.dynamic-cards-container .single-card .memo-body .value{width:58%;font-size:12px}.dynamic-cards-container .single-card .memo-body .value .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dynamic-cards-container .single-card .memo-body .draft{background-color:#596973;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .inProgress{background-color:#3c3cf0;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .registered{background-color:#5a1496;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .archived{background-color:#fbb62c;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .closed{background-color:#00dca5;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .approved{background-color:var(--green-600, #06a57e);color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .assigned{background-color:#fd6670;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .sent{background-color:#3c3cf0;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .under_revision{background:#689be7;color:#e9f1fd;text-align:center}.dynamic-cards-container .single-card .memo-body .rejected{background-color:#fd6670;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .under_sign{background-color:#dda722;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card:hover{background-color:#f6f7f8}.dynamic-cards-container .single-card:focus{background-color:#f6f7f8}.dynamic-cards-container .selected-card{background-color:#f6f7f8}.overflowVisible{overflow:visible!important}.table-custom-view{display:var(--tcv-display, grid);grid-template-columns:var(--tcv-display-columns, repeat(var(--tcv-columns-count, auto-fit), minmax(350px, 1fr)));gap:var(--tcv-gap, 1rem);padding-inline:var(--tcv-padding-inline, 1rem);padding-block:var(--tcv-padding-block, 1rem)}.actions-wrapper i{font-size:var(--table-options-font-size, 2rem)!important}\n"], dependencies: [{ kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarVDynamic", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "ghostLoadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "disableRowCheck", "rowDraggable", "enableClearingSortState", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction", "rowDragEvents"] }, { kind: "directive", type: i6$1.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "bindAsUnsafeHtml", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate", "ghostCellTemplate"] }, { kind: "directive", type: i6$1.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i6$1.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "directive", type: i3$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { kind: "directive", type: TooltipIfOverflowDirective, selector: "[tooltipIfOverflow]", inputs: ["tooltipIfOverflowText"] }, { kind: "component", type: DateViewerComponent, selector: "cts-date-viewer", inputs: ["label", "value", "vertical", "format", "hijri", "withOutLabel"] }, { kind: "component", type: DropdownViewerComponent, selector: "cts-dropdown-viewer", inputs: ["label", "value", "dropdownId", "vertical", "withOutLabel"] }, { kind: "component", type: DepartmentViewerComponent, selector: "cts-department-viewer", inputs: ["label", "value", "dropdownId", "vertical", "withOutLabel", "noStyle"] }, { kind: "component", type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i3$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: DynamicColumnComponent, selector: "cts-dynamic-column", inputs: ["id", "context", "column"], outputs: ["performAction"] }, { kind: "component", type: DynamicCustomComponent, selector: "app-dynamic-component", inputs: ["componentName", "row", "selectionModel", "rowAction", "onClick"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: LocalizedDatePipe, name: "localizedDate" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TableComponent, isStandalone: false, selector: "cts-table", inputs: { rows: "rows", selectionKey: "selectionKey", selectedRowsKeys: "selectedRowsKeys", columns: "columns", responsiveColumns: "responsiveColumns", entityType: "entityType", prefix: "prefix", pageCount: "pageCount", totalRecords: "totalRecords", rowCursor: "rowCursor", fullWidth: "fullWidth", vocItemTranslationPrefix: "vocItemTranslationPrefix", tableMode: "tableMode", componentName: "componentName", columnMode: "columnMode", tableActions: "tableActions", format: "format", defultSort: "defultSort", highlightSelectedCard: "highlightSelectedCard", multiSelectRows: "multiSelectRows", singleSelectRow: "singleSelectRow", rowCheckboxPermission: "rowCheckboxPermission", customFirstRow: "customFirstRow", showActionsAsMenu: "showActionsAsMenu", messages: "messages", rowClass: "rowClass", defaultColumnSize: "defaultColumnSize", selectionModel: "selectionModel" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", onIconSelected: "onIconSelected", actionOnRow: "actionOnRow", onSorting: "onSorting", onMultiRowSelected: "onMultiRowSelected" }, viewQueries: [{ propertyName: "dataTable", first: true, predicate: DatatableComponent, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n  #tableContainer\r\n  class=\"iner-table-container\"\r\n  [style]=\"'width:' + tableWidth\"\r\n  *ngIf=\"tableMode === tableModes.list && !responsiveView\"\r\n>\r\n  <ngx-datatable\r\n    [ngClass]=\"{ overflowVisible: customFirstRow }\"\r\n    class=\"large-table\"\r\n    [rows]=\"rows\"\r\n    [summaryRow]=\"customFirstRow\"\r\n    [columnMode]=\"columnMode\"\r\n    [scrollbarH]=\"true\"\r\n    [style.width.%]=\"100\"\r\n    [rowClass]=\"rowClass\"\r\n    [externalSorting]=\"true\"\r\n    (activate)=\"rowDetails($event)\"\r\n    (select)=\"onSelect($event)\"\r\n    (sort)=\"onSort($event)\"\r\n    (window:resize)=\"assignTableColumns($event)\"\r\n    [rowHeight]=\"isFixedOptionColumns ? '3rem' : 'auto'\"\r\n    [selected]=\"selected\"\r\n    [selectionType]=\"multiSelectRows ? 'checkbox' : 'single'\"\r\n    [sorts]=\"[{ prop: defultSort?.name, dir: defultSort?.dir }]\"\r\n    [messages]=\"messages\"\r\n    [disableRowCheck]=\"disableRowCheck\"\r\n  >\r\n    <ngx-datatable-column\r\n      *ngIf=\"\r\n        (multiSelectRows || singleSelectRow) &&\r\n        (!rowCheckboxPermission || someRowsHasEnabledCheckbox)\r\n      \"\r\n      [width]=\"50\"\r\n      [sortable]=\"false\"\r\n      [prop]=\"''\"\r\n      [canAutoResize]=\"false\"\r\n      [draggable]=\"false\"\r\n      [resizeable]=\"false\"\r\n    >\r\n      <ng-template\r\n        ngx-datatable-header-template\r\n        let-value=\"value\"\r\n        let-allRowsSelected=\"allRowsSelected\"\r\n        let-selectFn=\"selectFn\"\r\n      >\r\n        @if (multiSelectRows) {\r\n          <mat-checkbox\r\n            [checked]=\"allRowsSelected\"\r\n            (change)=\"selectFn(!allRowsSelected)\"\r\n          >\r\n          </mat-checkbox>\r\n        }\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        ngx-datatable-cell-template\r\n        let-row=\"row\"\r\n        let-value=\"value\"\r\n        let-isSelected=\"isSelected\"\r\n        let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\r\n      >\r\n        @if (!row[\"__checkboxDisabled\"]) {\r\n          <mat-checkbox\r\n            [checked]=\"isSelected\"\r\n            (change)=\"onCheckboxChangeFn($event)\"\r\n          >\r\n          </mat-checkbox>\r\n        }\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n    <!-- | translate -->\r\n\r\n    <ng-container *ngIf=\"tableColumns$ | async as columns\">\r\n      <ngx-datatable-column *ngIf=\"!columns.length\"></ngx-datatable-column>\r\n\r\n      <!-- [frozenRight]=\"column.type === 'actions'\" -->\r\n      <ng-container *ngFor=\"let column of columns; let i = index\">\r\n        <ng-container *permission=\"{ name: column.permission }\">\r\n          <ngx-datatable-column\r\n            *ngIf=\"column.display\"\r\n            [sortable]=\"column.sortable\"\r\n            [name]=\"prefix + column.name | translate\"\r\n            [prop]=\"column.prop\"\r\n            [resizeable]=\"false\"\r\n            [draggable]=\"false\"\r\n            [frozenLeft]=\"\r\n              (isFixedOptionColumns && column.type === 'actions') ||\r\n              column?.frozenLeft\r\n            \"\r\n            [headerClass]=\"column.headerClass ? column.headerClass : ''\"\r\n            [summaryTemplate]=\"customFirstRow ? customRowTemplate : null\"\r\n            [cellClass]=\"getCellClass(column)\"\r\n            [width]=\"getWidth(column)\"\r\n            [flexGrow]=\"column?.flexGrow\"\r\n            [minWidth]=\"column?.minWidth\"\r\n            [maxWidth]=\"column?.maxWidth\"\r\n          >\r\n            <ng-template\r\n              let-row=\"row\"\r\n              let-value=\"value\"\r\n              let-index=\"index\"\r\n              ngx-datatable-cell-template\r\n            >\r\n              <ng-container *ngIf=\"column.type === 'text'\">\r\n                <div\r\n                  class=\"cell-text-wrapper\"\r\n                  *ngIf=\"!column.withTooltip\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"value\"\r\n                >\r\n                  {{ value ? value : \"--\" }}\r\n                </div>\r\n                <div\r\n                  class=\"cell-text-wrapper\"\r\n                  matTooltip=\"{{ value ? value : '--' }}\"\r\n                  *ngIf=\"column.withTooltip\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"value\"\r\n                >\r\n                  {{ value ? value : \"--\" }}\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'vocabulary'\">\r\n                <div class=\"cell-text-wrapper\">\r\n                  <cts-dropdown-viewer\r\n                    [withOutLabel]=\"true\"\r\n                    [value]=\"value\"\r\n                    [dropdownId]=\"column.vocabularyId\"\r\n                  >\r\n                  </cts-dropdown-viewer>\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'VocCell'\">\r\n                @let _value =\r\n                  value\r\n                    ? (column.vocabularyId + \".\" + value | translate)\r\n                    : \"--\";\r\n                <div\r\n                  class=\"cell-text-wrapper\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value | translate }}\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'VocItem'\">\r\n                @let _value = vocItemTranslationPrefix + value | translate;\r\n                <div\r\n                  class=\"cell-text-wrapper\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"column.type === 'department'\">\r\n                <div class=\"cell-text-wrapper\">\r\n                  <cts-department-viewer [noStyle]=\"true\" [value]=\"value\">\r\n                  </cts-department-viewer>\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'status'\">\r\n                <div class=\"status-wrapper\">\r\n                  <span class=\"value {{ value }}\">\r\n                    <i\r\n                      *ngIf=\"statusIcons && statusIcons !== {}\"\r\n                      class=\"status-icon {{ statusIcons[value] }}\"\r\n                    ></i>\r\n                    <span\r\n                      tooltipIfOverflow\r\n                      [tooltipIfOverflowText]=\"'STATS.' + value | translate\"\r\n                    >\r\n                    </span>\r\n                  </span>\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'role'\">\r\n                @let _value = value ? (\"role.\" + value | translate) : \"--\";\r\n                <div\r\n                  class=\"cell-text-wrapper\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container\r\n                *ngIf=\"column.type === 'actions' && rows.length !== 0\"\r\n              >\r\n                <div\r\n                  [ngClass]=\"\r\n                    disabledActions\r\n                      ? 'disabled-actions-wrapper'\r\n                      : 'actions-wrapper'\r\n                  \"\r\n                  *ngIf=\"!showActionsAsMenu\"\r\n                >\r\n                  <!-- <span class=\"bi bi-trash delete-icon\" (click)=\"performAction(row , 'delete')\"></span> -->\r\n                  <i\r\n                    class=\"bi bi-pencil-square edit-icon\"\r\n                    matTooltip=\"{{ 'UPDATE' | translate }}\"\r\n                    (click)=\"performAction(row, 'edit')\"\r\n                    *ngIf=\"entityType === 'voc-table'\"\r\n                  ></i>\r\n                  <i\r\n                    class=\"bi bi-trash\"\r\n                    matTooltip=\"{{ 'delete' | translate }}\"\r\n                    (click)=\"performAction(row, 'delete')\"\r\n                    *ngIf=\"\r\n                      entityType === 'voc-table' ||\r\n                      entityType === 'department' ||\r\n                      entityType === 'signers'\r\n                    \"\r\n                  ></i>\r\n\r\n                  <i\r\n                    class=\"bi bi-plus-square\"\r\n                    matTooltip=\"{{\r\n                      'USER_MANGMENT.addToDepartment' | translate\r\n                    }}\"\r\n                    (click)=\"performAction(row, 'delete')\"\r\n                    *ngIf=\"entityType === 'users' && row.isInitial\"\r\n                  ></i>\r\n\r\n                  <span *ngFor=\"let action of column.actions\">\r\n                    <ng-container\r\n                      *ngIf=\"action.type == 'button'; else showIcon\"\r\n                    >\r\n                      <button\r\n                        *permission=\"{\r\n                          name: action.permission,\r\n                          entity: row,\r\n                          user: nuxeoService.nuxeoClient.user,\r\n                        }\"\r\n                        class=\"{{ action.class }}\"\r\n                        matTooltip=\"{{ action.tooltip | translate }}\"\r\n                        (click)=\"performAction(row, action.actionName)\"\r\n                      >\r\n                        <mat-icon\r\n                          *ngIf=\"action.icon\"\r\n                          [class]=\"action.iconClass\"\r\n                          [svgIcon]=\"action.icon\"\r\n                        >\r\n                        </mat-icon>\r\n\r\n                        {{ action.title | translate }}\r\n                      </button>\r\n                    </ng-container>\r\n                    <ng-template #showIcon>\r\n                      <i\r\n                        *permission=\"{\r\n                          name: action.permission,\r\n                          entity: row,\r\n                          user: nuxeoService.nuxeoClient.user,\r\n                        }\"\r\n                        class=\"{{ action.icon }}\"\r\n                        matTooltip=\"{{ action.tooltip | translate }}\"\r\n                        (click)=\"performAction(row, action.actionName)\"\r\n                      ></i>\r\n                    </ng-template>\r\n                  </span>\r\n\r\n                  <!-- <i\r\n                *permission=\"{ name: 'registerCorrespondance', entity: row }\"\r\n                class=\"bi bi-box-arrow-in-right\"\r\n                matTooltip=\"{{ 'LISTING.REGISTER' | translate }}\"\r\n                (click)=\"performAction(row, 'register')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'sendCorrespondance', entity: row }\"\r\n                class=\"bi bi-envelope\"\r\n                matTooltip=\"{{ 'LISTING.SEND' | translate }}\"\r\n                (click)=\"performAction(row, 'send')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'closeCorrespondance', entity: row }\"\r\n                class=\"bi bi-x-circle\"\r\n                matTooltip=\"{{ 'LISTING.CLOSE' | translate }}\"\r\n                (click)=\"performAction(row, 'close')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'archiveCorrespondance', entity: row }\"\r\n                class=\"bi bi-folder-symlink\"\r\n                matTooltip=\"{{ 'LISTING.ARCHIVE' | translate }}\"\r\n                (click)=\"performAction(row, 'archive')\"\r\n              ></i> -->\r\n                </div>\r\n                <div\r\n                  [ngClass]=\"\r\n                    disabledActions\r\n                      ? 'disabled-actions-wrapper'\r\n                      : 'actions-wrapper'\r\n                  \"\r\n                  *ngIf=\"showActionsAsMenu\"\r\n                >\r\n                  <button\r\n                    class=\"action-menu-trigger\"\r\n                    [matMenuTriggerFor]=\"menu\"\r\n                    [disabled]=\"disabledActions\"\r\n                  >\r\n                    <i class=\"bi bi-three-dots-vertical\"></i>\r\n                  </button>\r\n                  <mat-menu #menu=\"matMenu\" class=\"datatable-actions-menu\">\r\n                    <button\r\n                      mat-menu-item\r\n                      (click)=\"performAction(row, 'edit')\"\r\n                      *ngIf=\"entityType === 'voc-table'\"\r\n                    >\r\n                      <i class=\"bi bi-pencil-square edit-icon\"></i>\r\n                      <span class=\"action-text\">{{\r\n                        \"UPDATE\" | translate\r\n                      }}</span>\r\n                    </button>\r\n                    <button\r\n                      mat-menu-item\r\n                      (click)=\"performAction(row, 'delete')\"\r\n                      *ngIf=\"\r\n                        entityType === 'voc-table' ||\r\n                        entityType === 'department' ||\r\n                        entityType === 'signers'\r\n                      \"\r\n                    >\r\n                      <i class=\"bi bi-trash\"></i>\r\n                      <span class=\"action-text\">{{\r\n                        \"delete\" | translate\r\n                      }}</span>\r\n                    </button>\r\n                    <button\r\n                      mat-menu-item\r\n                      (click)=\"performAction(row, 'delete')\"\r\n                      *ngIf=\"entityType === 'users' && row.isInitial\"\r\n                    >\r\n                      <i class=\"bi bi-plus-square\"></i>\r\n                      <span class=\"action-text\">{{\r\n                        \"USER_MANGMENT.addToDepartment\" | translate\r\n                      }}</span>\r\n                    </button>\r\n                    <ng-conttainer *ngFor=\"let action of column.actions\">\r\n                      <button\r\n                        (click)=\"performAction(row, action.actionName)\"\r\n                        *permission=\"{\r\n                          name: action.permission,\r\n                          entity: row,\r\n                          user: nuxeoService.nuxeoClient.user,\r\n                        }\"\r\n                      >\r\n                        <i class=\"{{ action.icon }}\"></i>\r\n                        <span class=\"action-text\">{{\r\n                          action.tooltip | translate\r\n                        }}</span>\r\n                      </button>\r\n                    </ng-conttainer>\r\n                  </mat-menu>\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'date'\">\r\n                <div class=\"cell-text-wrapper\">\r\n                  <cts-date-viewer\r\n                    [withOutLabel]=\"true\"\r\n                    [value]=\"value\"\r\n                  ></cts-date-viewer>\r\n                </div>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"column.type === 'custom'\">\r\n                <ng-container\r\n                  *permission=\"{\r\n                    name: column.permission,\r\n                    entity: row,\r\n                    user: nuxeoService.nuxeoClient.user,\r\n                  }\"\r\n                >\r\n                  <cts-dynamic-column\r\n                    [id]=\"column.template\"\r\n                    [column]=\"column\"\r\n                    [context]=\"row\"\r\n                    (performAction)=\"performAction(row, column?.name, $event)\"\r\n                  >\r\n                  </cts-dynamic-column>\r\n                </ng-container>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'direction'\">\r\n                <div\r\n                  (click)=\"iconSelected($event, row)\"\r\n                  class=\"status-wrapper {{ value }} {{ row.state }}\"\r\n                >\r\n                  <span\r\n                    class=\"iner-status-wrapper\"\r\n                    matTooltip=\"{{ 'STATS.' + row.state | translate }}\"\r\n                  >\r\n                    <ng-container\r\n                      *permission=\"{ name: 'isFavorite', entity: row }\"\r\n                    >\r\n                      <span class=\"fav-icon-indicator bi bi-star-fill\"></span>\r\n                    </ng-container>\r\n                    <i\r\n                      class=\"{{\r\n                        directionIcons\r\n                          ? directionIcons['incoming']\r\n                          : 'bi bi-box-arrow-down'\r\n                      }}\"\r\n                      *ngIf=\"row.type === 'IncomingCorrespondence'\"\r\n                    ></i>\r\n                    <i\r\n                      class=\"{{\r\n                        directionIcons\r\n                          ? directionIcons['outgoing']\r\n                          : 'bi bi-box-arrow-up outgoing'\r\n                      }}\"\r\n                      *ngIf=\"row.type === 'OutgoingCorrespondence'\"\r\n                    ></i>\r\n                    <i\r\n                      class=\"{{\r\n                        directionIcons\r\n                          ? directionIcons['internal']\r\n                          : 'bi bi-box-arrow-right internal'\r\n                      }}\"\r\n                      *ngIf=\"row.type === 'InternalCorrespondence'\"\r\n                    ></i>\r\n                  </span>\r\n                  <!-- <span class=\"value {{ value }}\">{{ \"STATS.\" + value | translate }}</span> -->\r\n                </div>\r\n              </ng-container>\r\n            </ng-template>\r\n            <ng-template\r\n              #customRowTemplate\r\n              let-row=\"row\"\r\n              let-value=\"value\"\r\n              ngx-datatable-cell-template\r\n            >\r\n              <div\r\n                class=\"w-full flex items-center justify-center overflow-visible\"\r\n              >\r\n                <cts-dynamic-column\r\n                  [id]=\"column.custom1stCellTemplate\"\r\n                  [column]=\"column\"\r\n                  [context]=\"row\"\r\n                  (performAction)=\"performAction(row, column?.name, $event)\"\r\n                >\r\n                </cts-dynamic-column>\r\n              </div>\r\n            </ng-template>\r\n          </ngx-datatable-column>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ngx-datatable>\r\n</div>\r\n\r\n<div\r\n  *ngIf=\"responsiveView && tableMode !== tableModes.card\"\r\n  (window:resize)=\"assignTableColumns($event)\"\r\n>\r\n  <div class=\"dynamic-cards-container\">\r\n    <div\r\n      class=\"single-card\"\r\n      [ngClass]=\"{ 'selected-card': highlightSelectedCard && row?.isSelected }\"\r\n      *ngFor=\"let row of rows\"\r\n    >\r\n      <div class=\"memo-title\">\r\n        <span\r\n          tooltipIfOverflow\r\n          [tooltipIfOverflowText]=\"row.properties.referenceNumber\"\r\n        >\r\n          {{ row.properties.referenceNumber }}\r\n        </span>\r\n        <span class=\"action-wrap\">\r\n          <span class=\"action\" *ngFor=\"let action of tableActions\">\r\n            <i\r\n              *permission=\"{\r\n                name: action.permission,\r\n                entity: row,\r\n                user: nuxeoService.nuxeoClient.user,\r\n              }\"\r\n              class=\"{{ action.icon }}\"\r\n              matTooltip=\"{{ action.tooltip | translate }}\"\r\n              (click)=\"performAction(row, action.actionName)\"\r\n            ></i>\r\n          </span>\r\n        </span>\r\n      </div>\r\n      <div *ngIf=\"tableColumns.length > 1\">\r\n        <div\r\n          class=\"memo-body\"\r\n          *ngFor=\"let property of tableColumns$ | async\"\r\n          (click)=\"cardSelected(row)\"\r\n        >\r\n          <div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n          <div class=\"value\">\r\n            @switch (property.type) {\r\n              @case (\"text\") {\r\n                @let _value = row.properties[property.value];\r\n                <div\r\n                  class=\"text\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              }\r\n              @case (\"owner\") {\r\n                @let _value = row.properties[property.owner]?.[property.value];\r\n                <div\r\n                  class=\"text\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              }\r\n              @case (\"date\") {\r\n                @let _value =\r\n                  row.properties[property.value]\r\n                    | localizedDate: format : (isArabic ? \"ar-AR\" : \"en-US\");\r\n                <div\r\n                  class=\"text\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              }\r\n              @case (\"status\") {\r\n                @let _value = \"STATS.\" + row[property.value] | translate;\r\n                <div\r\n                  class=\"value {{ row[property.value] }}\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              }\r\n              @case (\"department\") {\r\n                <cts-department-viewer\r\n                  [noStyle]=\"true\"\r\n                  [value]=\"row.properties[property.value]\"\r\n                >\r\n                </cts-department-viewer>\r\n              }\r\n              @case (\"vocabulary\") {\r\n                <div class=\"cell-text-wrapper\">\r\n                  <cts-dropdown-viewer\r\n                    [withOutLabel]=\"true\"\r\n                    [value]=\"row.properties[property.value]\"\r\n                    [dropdownId]=\"property.vocabularyId\"\r\n                  >\r\n                  </cts-dropdown-viewer>\r\n                </div>\r\n              }\r\n              @case (\"direction\") {\r\n                <div\r\n                  (click)=\"iconSelected($event, row)\"\r\n                  class=\"status-wrapper {{ property.value }} {{ row.state }}\"\r\n                >\r\n                  <span\r\n                    class=\"iner-status-wrapper\"\r\n                    matTooltip=\"{{ 'STATS.' + row.state | translate }}\"\r\n                  >\r\n                    <ng-container\r\n                      *permission=\"{ name: 'isFavorite', entity: row }\"\r\n                    >\r\n                      <span class=\"fav-icon-indicator bi bi-star-fill\"></span>\r\n                    </ng-container>\r\n                    <i\r\n                      class=\"bi bi-box-arrow-down\"\r\n                      *ngIf=\"row.type === 'IncomingCorrespondence'\"\r\n                    ></i>\r\n                    <i\r\n                      class=\"bi bi-box-arrow-up outgoing\"\r\n                      *ngIf=\"row.type === 'OutgoingCorrespondence'\"\r\n                    ></i>\r\n                    <i\r\n                      class=\"bi bi-box-arrow-right internal\"\r\n                      *ngIf=\"row.type === 'InternalCorrespondence'\"\r\n                    ></i>\r\n                  </span>\r\n                </div>\r\n              }\r\n              @case (\"custom\") {\r\n                <div\r\n                  *permission=\"{\r\n                    name: column.permission,\r\n                    entity: row,\r\n                    user: nuxeoService.nuxeoClient.user,\r\n                  }\"\r\n                >\r\n                  <cts-dynamic-column\r\n                    [id]=\"property.template\"\r\n                    [column]=\"property\"\r\n                    [context]=\"row\"\r\n                    (performAction)=\"performAction(row, property?.name, $event)\"\r\n                  >\r\n                  </cts-dynamic-column>\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <ng-container *ngIf=\"tableColumns.length === 1\">\r\n      <div\r\n        class=\"iner-card-container {{ entityType }}\"\r\n        (click)=\"cardSelected(row)\"\r\n        *ngFor=\"let row of rows\"\r\n      >\r\n        <cts-dynamic-column\r\n          [id]=\"columns[0].template\"\r\n          [column]=\"columns[0]\"\r\n          [context]=\"row\"\r\n          (performAction)=\"performAction(row, columns[0]?.name, $event)\"\r\n        >\r\n        </cts-dynamic-column>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.card\">\r\n  <div class=\"cards-container\">\r\n    <div class=\"single-card\" *ngFor=\"let row of rows; let i = index\">\r\n      <div class=\"memo-title\">\r\n        <span\r\n          tooltipIfOverflow\r\n          [tooltipIfOverflowText]=\"row.properties.referenceNumber\"\r\n        >\r\n          {{ row.properties.referenceNumber }}\r\n        </span>\r\n        <span class=\"action-wrap\">\r\n          <span class=\"action\" *ngFor=\"let action of tableActions\">\r\n            <i\r\n              *permission=\"{\r\n                name: action.permission,\r\n                entity: row,\r\n                user: nuxeoService.nuxeoClient.user,\r\n              }\"\r\n              class=\"{{ action.icon }}\"\r\n              matTooltip=\"{{ action.tooltip | translate }}\"\r\n              (click)=\"performAction(row, action.actionName)\"\r\n            ></i>\r\n          </span>\r\n          <button\r\n            *permission=\"{\r\n              name: 'deleteMemo',\r\n              entity: row,\r\n              user: nuxeoService.nuxeoClient.user,\r\n            }\"\r\n            (click)=\"performAction(row, 'deleteMemo')\"\r\n          >\r\n            <i\r\n              class=\"bi bi-trash\"\r\n              matTooltip=\"{{ 'LISTING.ONLY_DELETE' | translate }}\"\r\n            ></i>\r\n          </button>\r\n          <button\r\n            *permission=\"{\r\n              name: 'terminateDelegation',\r\n              entity: row,\r\n              user: nuxeoService.nuxeoClient.user,\r\n            }\"\r\n            (click)=\"performAction(row, 'terminateDelegation')\"\r\n          >\r\n            <i\r\n              class=\"bi bi-trash\"\r\n              matTooltip=\"{{ 'LISTING.CANCEL' | translate }}\"\r\n            ></i>\r\n          </button>\r\n          <span\r\n            class=\"publish-state\"\r\n            *permission=\"{\r\n              name: 'memoPublished',\r\n              entity: row,\r\n              user: nuxeoService.nuxeoClient.user,\r\n            }\"\r\n            tooltipIfOverflow\r\n            [tooltipIfOverflowText]=\"'MEMOS.PUBLISHED' | translate\"\r\n          >\r\n            {{ \"MEMOS.PUBLISHED\" | translate }}\r\n          </span>\r\n          <span\r\n            class=\"publish-state\"\r\n            *permission=\"{\r\n              name: 'delegationFinished',\r\n              entity: row,\r\n              user: nuxeoService.nuxeoClient.user,\r\n            }\"\r\n            tooltipIfOverflow\r\n            [tooltipIfOverflowText]=\"'delegations.finished' | translate\"\r\n          >\r\n            {{ \"delegations.finished\" | translate }}\r\n          </span>\r\n          <span\r\n            class=\"publish-state\"\r\n            *permission=\"{\r\n              name: 'delegationActive',\r\n              entity: row,\r\n              user: nuxeoService.nuxeoClient.user,\r\n            }\"\r\n            tooltipIfOverflow\r\n            [tooltipIfOverflowText]=\"'delegations.active' | translate\"\r\n          >\r\n            {{ \"delegations.active\" | translate }}\r\n          </span>\r\n        </span>\r\n      </div>\r\n      <div\r\n        class=\"memo-body\"\r\n        *ngFor=\"let property of tableColumns$ | async\"\r\n        (click)=\"cardSelected(row); cardFocused(i)\"\r\n      >\r\n        <div\r\n          class=\"key\"\r\n          *ngIf=\"property.type !== 'default'\"\r\n          tooltipIfOverflow\r\n          [tooltipIfOverflowText]=\"prefix + property.key | translate\"\r\n        >\r\n          {{ prefix + property.key | translate }}\r\n        </div>\r\n        <ng-container *ngIf=\"property.type === 'default'\">\r\n          <div\r\n            class=\"key\"\r\n            *permission=\"{\r\n              name: 'internalIsEnabled',\r\n              entity: row,\r\n              user: nuxeoService.nuxeoClient.user,\r\n            }\"\r\n            tooltipIfOverflow\r\n            [tooltipIfOverflowText]=\"prefix + property.key | translate\"\r\n          >\r\n            {{ prefix + property.key | translate }}\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"value\">\r\n          @switch (property.type) {\r\n            @case (\"text\") {\r\n              @let _value = row.properties[property.value];\r\n              <div\r\n                class=\"text\"\r\n                tooltipIfOverflow\r\n                [tooltipIfOverflowText]=\"_value\"\r\n              >\r\n                {{ _value }}\r\n              </div>\r\n            }\r\n            @case (\"user\") {\r\n              @let _value = row.properties[property.value].fullName;\r\n              <div\r\n                class=\"text\"\r\n                tooltipIfOverflow\r\n                [tooltipIfOverflowText]=\"_value\"\r\n              >\r\n                {{ _value }}\r\n              </div>\r\n            }\r\n            @case (\"date\") {\r\n              @let _value =\r\n                row.properties[property.value]\r\n                  | localizedDate: format : (isArabic ? \"ar-AR\" : \"en-US\");\r\n              <div\r\n                class=\"text\"\r\n                tooltipIfOverflow\r\n                [tooltipIfOverflowText]=\"_value\"\r\n              >\r\n                {{ _value }}\r\n              </div>\r\n            }\r\n            @case (\"boolean\") {\r\n              @let _value =\r\n                (row.properties[property.value] ? \"Yes\" : \"No\") | translate;\r\n              <div\r\n                class=\"text\"\r\n                tooltipIfOverflow\r\n                [tooltipIfOverflowText]=\"_value\"\r\n              >\r\n                {{ _value }}\r\n              </div>\r\n            }\r\n            @case (\"default\") {\r\n              @let _value = row.properties[property.value];\r\n              <div\r\n                class=\"text\"\r\n                *permission=\"{\r\n                  name: 'internalIsEnabled',\r\n                  entity: row,\r\n                  user: nuxeoService.nuxeoClient.user,\r\n                }\"\r\n                tooltipIfOverflow\r\n                [tooltipIfOverflowText]=\"_value\"\r\n              >\r\n                {{ _value }}\r\n              </div>\r\n            }\r\n            @case (\"custom\") {\r\n              <div\r\n                class=\"text\"\r\n                *ngFor=\"let item of row.properties[property.value]\"\r\n                tooltipIfOverflow\r\n                [tooltipIfOverflowText]=\"item | translate\"\r\n              >\r\n                {{ item | translate }} {{ \", \" }}\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.dynamicCard\">\r\n  <div class=\"cards-container\">\r\n    <div\r\n      class=\"single-card\"\r\n      [ngClass]=\"{ 'selected-card': highlightSelectedCard && row?.isSelected }\"\r\n      *ngFor=\"let row of rows\"\r\n    >\r\n      <div *ngIf=\"tableColumns.length > 1\">\r\n        <div\r\n          class=\"memo-body\"\r\n          *ngFor=\"let property of tableColumns$ | async\"\r\n          (click)=\"cardSelected(row)\"\r\n        >\r\n          <div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n          <div class=\"value\">\r\n            @switch (property.type) {\r\n              @case (\"text\") {\r\n                @let _value = row.properties[property.value];\r\n                <div\r\n                  class=\"text\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              }\r\n              @case (\"date\") {\r\n                @let _value =\r\n                  row.properties[property.value]\r\n                    | localizedDate: format : (isArabic ? \"ar-AR\" : \"en-US\");\r\n                <div\r\n                  class=\"text\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"iner-card-container {{ entityType }}\"\r\n        (click)=\"cardSelected(row)\"\r\n        *ngIf=\"tableColumns.length === 1\"\r\n      >\r\n        <cts-dynamic-column\r\n          [id]=\"tableColumns[0].template\"\r\n          [column]=\"tableColumns[0]\"\r\n          [context]=\"row\"\r\n          (performAction)=\"performAction(row, tableColumns[0]?.name, $event)\"\r\n        >\r\n        </cts-dynamic-column>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.custom\" class=\"table-custom-view\">\r\n  <app-dynamic-component\r\n    class=\"table-custom-view__component\"\r\n    *ngFor=\"let row of rows\"\r\n    [componentName]=\"componentName\"\r\n    [row]=\"row\"\r\n    [rowAction]=\"actionOnRow\"\r\n    [selectionModel]=\"selectionModel\"\r\n    [onClick]=\"onRowSelected\"\r\n    (click)=\"cardSelected(row)\"\r\n    [class.dynamic-selected-card]=\"highlightSelectedCard && row?.isSelected\"\r\n  ></app-dynamic-component>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.ngx-datatable{border:var(--ngx-datatable-border, 1px solid #eef1f5);border-radius:5px}.ngx-datatable .datatable-header-inner{min-width:var(--datatable-header-inner-min-width, 0)}.ngx-datatable .datatable-header-cell-template-wrap{width:var(--datatable-header-cell-wrap-width, 100%);height:var(--datatable-header-cell-wrap-height, 100%);display:var(--datatable-header-cell-wrap-display, flex);align-items:var(--datatable-header-cell-wrap-align-items, center);justify-content:var(--datatable-header-cell-wrap-justify-content, center);white-space:var(--datatable-header-cell-wrap-white-space, pre)}.ngx-datatable .datatable-header-cell-template-wrap .datatable-header-cell-wrapper{display:var(--datatable-header-cell-wrapper-display, flex)}.ngx-datatable .datatable-header-cell-template-wrap .datatable-header-cell-wrapper .datatable-header-cell-label{text-align:var(--datatable-header-cell-label-align, center)}.ngx-datatable .datatable-header{font-weight:var(--datatable-header-weight, bold);height:var(--datatable-header-height, 50px);background:var(--datatable-header-background, #eef1f5);color:var(--datatable-header-color, #9aa4ac);font-size:var(--datatable-header-font-size, 14px);padding:var(--datatable-header-padding, 0);border:0px solid var(--datatable-header-border-color);border-width:var(--datatable-header-border-width, 0 0 1px 0)}.ngx-datatable .datatable-header .datatable-header-inner{min-width:var(--datatable-header-inner-min-width)!important;height:var(--datatable-header-inner-height, 100%);padding:var(--datatable-header-inner-padding, 0px 20px)}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center{display:var(--datatable-row-display, flex);justify-content:var(--datatable-row-justify, space-between);padding:var(--datatable-row-padding);align-items:var(--datatable-row-align, center);flex-grow:var(--datatable-row-flex-grow);min-width:var(--datatable-row-min-width);grid-template-columns:var(--datatable-row-columns);gap:var(--datatable-row-gap, 0)}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell{width:var(--datatable--header-cell-width);min-width:var(--datatable-header-cell-min-width);min-height:var(--datatable-header-cell-min-height, var(--datatable-cell-min-height, 50px));flex-grow:var(--datatable-header-cell-grow);flex-shrink:var(--datatable-header-cell-shrink)}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn{margin:var(--sort-btn-margin, 5px 5px 0px);width:var(--sort-btn-width, 16px);height:var(--sort-btn-height, 16px)}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn:before{content:var(--sort-btn-icon, \"\\f127\");display:inline-block;font-family:bootstrap-icons!important;font-style:normal;font-weight:400!important;font-variant:normal;font-size:var(--sort-btn-icon-size, 16px);text-transform:none;line-height:1;vertical-align:-.125em;-webkit-font-smoothing:antialiased;color:var(--sort-btn-icon-color, black)}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn.datatable-icon-up{--sort-btn-icon: \"\\f57b\"}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn.datatable-icon-down{--sort-btn-icon: \"\\f574\"}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-header-cell-template-wrap .checkbox-input{z-index:99}.ngx-datatable .datatable-body .empty-row{text-align:center}.ngx-datatable .datatable-body .datatable-row-left .datatable-body-cell{display:var(--datatable-body-left-cell-display, flex);justify-content:var(--datatable-body-left-cell-justify, flex-start);align-items:var(--datatable-body-left-cell-align-items, center);padding-inline:var(--datatable-body-left-cell-padding-inline)}.ngx-datatable .datatable-body .datatable-scroll{min-width:var(--datatable-scroll-min-width, 100%)!important;--datatable-body-cell-overflow: visible}.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row{display:flex!important;min-height:50px!important;overflow:visible!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row{height:var(--datatable-summary-row-height, 50px);font-size:var(--datatable-summary-row-font-size, 14px)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row{min-width:var(--datatable-body-row-min-width, 100%)!important;height:var(--datatable-body-row-height, 100%);padding:var(--datatable-body-row-padding, 0)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center{display:var(--datatable-row-display, flex);justify-content:var(--datatable-row-justify, space-between);align-items:var(--datatable-row-align, center);padding:var(--datatable-row-padding, 0px 20px);flex-grow:var(--datatable-row-flex-grow);min-width:var(--datatable-row-min-width);overflow:var(--datatable-row-overflow, visible);grid-template-columns:var(--datatable-row-columns);gap:var(--datatable-row-gap, 0)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell{display:var(--datatable-body-cell-display, flex);align-items:var(--datatable-body-cell-align-items, center);justify-content:var(--datatable-body-cell-justify-content, center);gap:var(--datatable-body-cell-gap);flex-grow:var(--datatable-body-cell-grow);flex-shrink:var(--datatable-body-cell-shrink);overflow:var(--datatable-body-cell-overflow, hidden);width:var(--datatable--body-cell-width, var(--datatable-cell-width, auto));min-width:var(--datatable-body-cell-min-width, var(--datatable-cell-min-width, 0));min-height:var(--datatable-body-cell-min-height, var(--datatable-cell-min-height, 50px))}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label{display:var(--datatable-body-cell-label-display, flex);justify-content:var(--datatable-body-cell-label-justify, center);font-size:var(--datatable-body-cell-label-font-size, inherit);font-weight:var(--datatable-body-cell-label-font-weight);line-height:var(--datatable-body-cell-label-line-height);width:var(--datatable-body-cell-label-width, 100%);color:var(--datatable-body-cell-label-color, inherit)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .checkbox-input,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .checkbox-input{z-index:99}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .cell-text-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .cell-text-wrapper{width:auto;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 5px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper{position:relative}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper .fav-icon-indicator,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper .fav-icon-indicator{font-size:12px;position:absolute;top:-5px;right:-10px;color:var(--yellow-200, #ebb98e)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value{display:flex;justify-content:center;align-items:center;border-radius:5px;width:100px;height:25px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value .status-icon,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value .status-icon{margin-inline-end:5px;font-size:var(--status-icon-size, 16px)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .draft,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .draft{background-color:#596973;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .inProgress,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .inProgress{background-color:#3c3cf0;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .registered,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .registered{background-color:#5a1496;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .archived,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .archived{background-color:#fbb62c;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .closed,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .closed{background-color:#00dca5;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .approved,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .approved{background-color:var(--green-600, #06a57e);color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .assigned,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .assigned{background-color:#fd6670;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .sent,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .sent{background-color:#3c3cf0;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_revision,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_revision{background:#689be7;color:#e9f1fd}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .rejected,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .rejected{background-color:#fd6670;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_sign,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_sign{background-color:#dda722;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirectSelection,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirectSelection{background-color:#28b994;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirect,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirect{background-color:#e38888;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Incoming,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Incoming{color:#00dca5}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Outgoing,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Outgoing{color:#fbb62c}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Internal,.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.internal,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Internal,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.internal{color:#3c3cf0}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper{width:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi{font-size:25px;cursor:pointer;color:#465573;margin:0 5px!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi:hover,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi:hover{color:var(--blue, #2e62df)!important;font-size:26px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button{display:flex;color:#5171a6;font-size:16px;height:45px;align-items:center;padding:0 10px;width:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button i,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button i{font-size:20px;padding:0;display:flex;align-items:center}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button .action-text,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button .action-text{padding:0 5px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button:hover,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button:hover{background-color:#e6ebf2}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper{width:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper .bi,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper .bi{font-size:25px;cursor:not-allowed;color:#465573;margin:0 5px!important;opacity:.7}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper:nth-child(2n){background-color:var(--even-row-background, #f4f6f8)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper:hover{background-color:var(--even-row-hover-background, #eef1f5)}.ngx-datatable div.datatable-row-left{order:1;margin-inline-start:auto;inset-inline:var(--datatable-row-left-inline, 0 auto);position:var(--datatable-row-left-position, sticky)!important}.ngx-datatable div.datatable-row-left .datatable-body-cell{overflow:hidden;background:var(--table-options-body-cell-color, #fff)}.ngx-datatable div.datatable-row-left .datatable-header-cell{overflow:hidden;background:var(--table-options-header-cell-color, #fff)}.iner-table-container{max-width:var(--table-container-max-width, 100%)}.rtl .ngx-datatable .datatable-body .status-wrapper .fav-icon-indicator{left:-10px;top:15px!important;right:auto!important}.cards-container{display:flex;flex-wrap:wrap;justify-content:center}.cards-container .single-card{padding-inline:var(--tbl-card-inline-padding, 1rem);padding-block:var(--tbl-card-block-padding, 1rem);margin-inline:var(--tbl-card-inline-margin, 5px);margin-block:var(--tbl-card-block-margin, 0px 10px);min-width:var(--tbl-card-min-width, 250px);width:var(--tbl-card-width, 24%);background:var(--tbl-card-background, #fff);border:var(--tbl-card-border, 1px solid rgba(180, 186, 198, .2));border-radius:var(--tbl-card-radius, 4px);box-shadow:var(--tbl-card-shadow, 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12));cursor:pointer}.cards-container .single-card .memo-title{font-size:14px;font-weight:700;color:#465573;border-bottom:1px solid lightgray;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}.cards-container .single-card .memo-title .action-wrap .action{margin:0 5px;cursor:pointer}.cards-container .single-card .memo-title .action-wrap .action i{font-size:16px}.cards-container .single-card .memo-title .action-wrap .action i:hover{color:#00f}.cards-container .single-card .memo-title .action-wrap .publish-state{font-size:12px;color:#00dca5;font-weight:700}.cards-container .single-card .memo-title .action-wrap button{border:none;color:#465573;background-color:transparent}.cards-container .single-card .memo-title .action-wrap button i{font-size:16px}.cards-container .single-card .memo-title .action-wrap button i:hover{color:#00f}.cards-container .single-card .memo-body{display:flex;padding:0 10px}.cards-container .single-card .memo-body .key{width:50%;font-size:12px;color:#9aa4ac}.cards-container .single-card .memo-body .value{width:50%;font-size:12px}.cards-container .single-card .memo-body .value .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cards-container .single-card:hover{background-color:#f6f7f8}.cards-container .single-card:focus{background-color:#f6f7f8}.cards-container .selected-card{background-color:#f6f7f8}.dynamic-cards-container{display:flex;flex-wrap:wrap;justify-content:center}.dynamic-cards-container .single-card{padding:15px;border:1px solid rgba(180,186,198,.2);border-radius:3px;min-width:306px;width:24%;margin:0 5px 10px;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;cursor:pointer}.dynamic-cards-container .single-card .memo-title{font-size:14px;font-weight:700;color:#465573;border-bottom:1px solid lightgray;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}.dynamic-cards-container .single-card .memo-title .action-wrap .action{cursor:pointer}.dynamic-cards-container .single-card .memo-title .action-wrap .action i{font-size:16px}.dynamic-cards-container .single-card .memo-title .action-wrap .action i:hover{color:#00f}.dynamic-cards-container .single-card .memo-title .action-wrap .publish-state{font-size:12px;color:#00dca5;font-weight:700}.dynamic-cards-container .single-card .memo-title .action-wrap button{border:none;color:#465573;background-color:transparent}.dynamic-cards-container .single-card .memo-title .action-wrap button i{font-size:16px}.dynamic-cards-container .single-card .memo-title .action-wrap button i:hover{color:#00f}.dynamic-cards-container .single-card .memo-body{display:flex;padding:0 10px}.dynamic-cards-container .single-card .memo-body .key{width:58%;font-size:12px;color:#9aa4ac;margin-bottom:4px}.dynamic-cards-container .single-card .memo-body .value{width:58%;font-size:12px}.dynamic-cards-container .single-card .memo-body .value .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dynamic-cards-container .single-card .memo-body .draft{background-color:#596973;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .inProgress{background-color:#3c3cf0;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .registered{background-color:#5a1496;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .archived{background-color:#fbb62c;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .closed{background-color:#00dca5;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .approved{background-color:var(--green-600, #06a57e);color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .assigned{background-color:#fd6670;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .sent{background-color:#3c3cf0;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .under_revision{background:#689be7;color:#e9f1fd;text-align:center}.dynamic-cards-container .single-card .memo-body .rejected{background-color:#fd6670;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .under_sign{background-color:#dda722;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card:hover{background-color:#f6f7f8}.dynamic-cards-container .single-card:focus{background-color:#f6f7f8}.dynamic-cards-container .selected-card{background-color:#f6f7f8}.overflowVisible{overflow:visible!important}.table-custom-view{display:var(--tcv-display, grid);grid-template-columns:var(--tcv-display-columns, repeat(var(--tcv-columns-count, auto-fit), minmax(350px, 1fr)));gap:var(--tcv-gap, 1rem);padding-inline:var(--tcv-padding-inline, 1rem);padding-block:var(--tcv-padding-block, 1rem)}.actions-wrapper i{font-size:var(--table-options-font-size, 2rem)!important}\n"], dependencies: [{ kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarVDynamic", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "ghostLoadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "disableRowCheck", "rowDraggable", "enableClearingSortState", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction", "rowDragEvents"] }, { kind: "directive", type: i6$1.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "bindAsUnsafeHtml", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate", "ghostCellTemplate"] }, { kind: "directive", type: i6$1.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i6$1.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "directive", type: i3$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { kind: "directive", type: TooltipIfOverflowDirective, selector: "[tooltipIfOverflow]", inputs: ["tooltipIfOverflowText"] }, { kind: "component", type: DateViewerComponent, selector: "cts-date-viewer", inputs: ["label", "value", "vertical", "format", "hijri", "withOutLabel"] }, { kind: "component", type: DropdownViewerComponent, selector: "cts-dropdown-viewer", inputs: ["label", "value", "dropdownId", "vertical", "withOutLabel"] }, { kind: "component", type: DepartmentViewerComponent, selector: "cts-department-viewer", inputs: ["label", "value", "dropdownId", "vertical", "withOutLabel", "noStyle"] }, { kind: "component", type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i3$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: DynamicColumnComponent, selector: "cts-dynamic-column", inputs: ["id", "context", "column"], outputs: ["performAction"] }, { kind: "component", type: DynamicCustomComponent, selector: "app-dynamic-component", inputs: ["componentName", "row", "selectionModel", "rowAction", "onClick"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: LocalizedDatePipe, name: "localizedDate" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cts-table', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div\r\n  #tableContainer\r\n  class=\"iner-table-container\"\r\n  [style]=\"'width:' + tableWidth\"\r\n  *ngIf=\"tableMode === tableModes.list && !responsiveView\"\r\n>\r\n  <ngx-datatable\r\n    [ngClass]=\"{ overflowVisible: customFirstRow }\"\r\n    class=\"large-table\"\r\n    [rows]=\"rows\"\r\n    [summaryRow]=\"customFirstRow\"\r\n    [columnMode]=\"columnMode\"\r\n    [scrollbarH]=\"true\"\r\n    [style.width.%]=\"100\"\r\n    [externalSorting]=\"true\"\r\n    (activate)=\"rowDetails($event)\"\r\n    (select)=\"onSelect($event)\"\r\n    (sort)=\"onSort($event)\"\r\n    (window:resize)=\"assignTableColumns($event)\"\r\n    [rowHeight]=\"isFixedOptionColumns ? '3rem' : 'auto'\"\r\n    [selected]=\"selected\"\r\n    [selectionType]=\"multiSelectRows ? 'checkbox' : 'single'\"\r\n    [sorts]=\"[{ prop: defultSort?.name, dir: defultSort?.dir }]\"\r\n    [messages]=\"messages\"\r\n    [disableRowCheck]=\"disableRowCheck\"\r\n  >\r\n    <ngx-datatable-column\r\n      *ngIf=\"\r\n        (multiSelectRows || singleSelectRow) &&\r\n        (!rowCheckboxPermission || someRowsHasEnabledCheckbox)\r\n      \"\r\n      [width]=\"50\"\r\n      [sortable]=\"false\"\r\n      [prop]=\"''\"\r\n      [canAutoResize]=\"false\"\r\n      [draggable]=\"false\"\r\n      [resizeable]=\"false\"\r\n    >\r\n      <ng-template\r\n        ngx-datatable-header-template\r\n        let-value=\"value\"\r\n        let-allRowsSelected=\"allRowsSelected\"\r\n        let-selectFn=\"selectFn\"\r\n      >\r\n        @if (multiSelectRows) {\r\n          <mat-checkbox\r\n            [checked]=\"allRowsSelected\"\r\n            (change)=\"selectFn(!allRowsSelected)\"\r\n          >\r\n          </mat-checkbox>\r\n        }\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        ngx-datatable-cell-template\r\n        let-row=\"row\"\r\n        let-value=\"value\"\r\n        let-isSelected=\"isSelected\"\r\n        let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\r\n      >\r\n        @if (!row[\"__checkboxDisabled\"]) {\r\n          <mat-checkbox\r\n            [checked]=\"isSelected\"\r\n            (change)=\"onCheckboxChangeFn($event)\"\r\n          >\r\n          </mat-checkbox>\r\n        }\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n    <!-- | translate -->\r\n\r\n    <ng-container *ngIf=\"tableColumns$ | async as columns\">\r\n      <ngx-datatable-column *ngIf=\"!columns.length\"></ngx-datatable-column>\r\n\r\n      <!-- [frozenRight]=\"column.type === 'actions'\" -->\r\n      <ng-container *ngFor=\"let column of columns; let i = index\">\r\n        <ng-container *permission=\"{ name: column.permission }\">\r\n          <ngx-datatable-column\r\n            *ngIf=\"column.display\"\r\n            [sortable]=\"column.sortable\"\r\n            [name]=\"prefix + column.name | translate\"\r\n            [prop]=\"column.prop\"\r\n            [resizeable]=\"false\"\r\n            [draggable]=\"false\"\r\n            [frozenLeft]=\"\r\n              (isFixedOptionColumns && column.type === 'actions') ||\r\n              column?.frozenLeft\r\n            \"\r\n            [headerClass]=\"column.headerClass ? column.headerClass : ''\"\r\n            [summaryTemplate]=\"customFirstRow ? customRowTemplate : null\"\r\n            [cellClass]=\"getCellClass(column)\"\r\n            [width]=\"getWidth(column)\"\r\n            [flexGrow]=\"column?.flexGrow\"\r\n            [minWidth]=\"column?.minWidth\"\r\n            [maxWidth]=\"column?.maxWidth\"\r\n          >\r\n            <ng-template\r\n              let-row=\"row\"\r\n              let-value=\"value\"\r\n              let-index=\"index\"\r\n              ngx-datatable-cell-template\r\n            >\r\n              <ng-container *ngIf=\"column.type === 'text'\">\r\n                <div\r\n                  class=\"cell-text-wrapper\"\r\n                  *ngIf=\"!column.withTooltip\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"value\"\r\n                >\r\n                  {{ value ? value : \"--\" }}\r\n                </div>\r\n                <div\r\n                  class=\"cell-text-wrapper\"\r\n                  matTooltip=\"{{ value ? value : '--' }}\"\r\n                  *ngIf=\"column.withTooltip\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"value\"\r\n                >\r\n                  {{ value ? value : \"--\" }}\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'vocabulary'\">\r\n                <div class=\"cell-text-wrapper\">\r\n                  <cts-dropdown-viewer\r\n                    [withOutLabel]=\"true\"\r\n                    [value]=\"value\"\r\n                    [dropdownId]=\"column.vocabularyId\"\r\n                  >\r\n                  </cts-dropdown-viewer>\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'VocCell'\">\r\n                @let _value =\r\n                  value\r\n                    ? (column.vocabularyId + \".\" + value | translate)\r\n                    : \"--\";\r\n                <div\r\n                  class=\"cell-text-wrapper\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value | translate }}\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'VocItem'\">\r\n                @let _value = vocItemTranslationPrefix + value | translate;\r\n                <div\r\n                  class=\"cell-text-wrapper\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"column.type === 'department'\">\r\n                <div class=\"cell-text-wrapper\">\r\n                  <cts-department-viewer [noStyle]=\"true\" [value]=\"value\">\r\n                  </cts-department-viewer>\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'status'\">\r\n                <div class=\"status-wrapper\">\r\n                  <span class=\"value {{ value }}\">\r\n                    <i\r\n                      *ngIf=\"statusIcons && statusIcons !== {}\"\r\n                      class=\"status-icon {{ statusIcons[value] }}\"\r\n                    ></i>\r\n                    <span\r\n                      tooltipIfOverflow\r\n                      [tooltipIfOverflowText]=\"'STATS.' + value | translate\"\r\n                    >\r\n                    </span>\r\n                  </span>\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'role'\">\r\n                @let _value = value ? (\"role.\" + value | translate) : \"--\";\r\n                <div\r\n                  class=\"cell-text-wrapper\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container\r\n                *ngIf=\"column.type === 'actions' && rows.length !== 0\"\r\n              >\r\n                <div\r\n                  [ngClass]=\"\r\n                    disabledActions\r\n                      ? 'disabled-actions-wrapper'\r\n                      : 'actions-wrapper'\r\n                  \"\r\n                  *ngIf=\"!showActionsAsMenu\"\r\n                >\r\n                  <!-- <span class=\"bi bi-trash delete-icon\" (click)=\"performAction(row , 'delete')\"></span> -->\r\n                  <i\r\n                    class=\"bi bi-pencil-square edit-icon\"\r\n                    matTooltip=\"{{ 'UPDATE' | translate }}\"\r\n                    (click)=\"performAction(row, 'edit')\"\r\n                    *ngIf=\"entityType === 'voc-table'\"\r\n                  ></i>\r\n                  <i\r\n                    class=\"bi bi-trash\"\r\n                    matTooltip=\"{{ 'delete' | translate }}\"\r\n                    (click)=\"performAction(row, 'delete')\"\r\n                    *ngIf=\"\r\n                      entityType === 'voc-table' ||\r\n                      entityType === 'department' ||\r\n                      entityType === 'signers'\r\n                    \"\r\n                  ></i>\r\n\r\n                  <i\r\n                    class=\"bi bi-plus-square\"\r\n                    matTooltip=\"{{\r\n                      'USER_MANGMENT.addToDepartment' | translate\r\n                    }}\"\r\n                    (click)=\"performAction(row, 'delete')\"\r\n                    *ngIf=\"entityType === 'users' && row.isInitial\"\r\n                  ></i>\r\n\r\n                  <span *ngFor=\"let action of column.actions\">\r\n                    <ng-container\r\n                      *ngIf=\"action.type == 'button'; else showIcon\"\r\n                    >\r\n                      <button\r\n                        *permission=\"{\r\n                          name: action.permission,\r\n                          entity: row,\r\n                          user: nuxeoService.nuxeoClient.user,\r\n                        }\"\r\n                        class=\"{{ action.class }}\"\r\n                        matTooltip=\"{{ action.tooltip | translate }}\"\r\n                        (click)=\"performAction(row, action.actionName)\"\r\n                      >\r\n                        <mat-icon\r\n                          *ngIf=\"action.icon\"\r\n                          [class]=\"action.iconClass\"\r\n                          [svgIcon]=\"action.icon\"\r\n                        >\r\n                        </mat-icon>\r\n\r\n                        {{ action.title | translate }}\r\n                      </button>\r\n                    </ng-container>\r\n                    <ng-template #showIcon>\r\n                      <i\r\n                        *permission=\"{\r\n                          name: action.permission,\r\n                          entity: row,\r\n                          user: nuxeoService.nuxeoClient.user,\r\n                        }\"\r\n                        class=\"{{ action.icon }}\"\r\n                        matTooltip=\"{{ action.tooltip | translate }}\"\r\n                        (click)=\"performAction(row, action.actionName)\"\r\n                      ></i>\r\n                    </ng-template>\r\n                  </span>\r\n\r\n                  <!-- <i\r\n                *permission=\"{ name: 'registerCorrespondance', entity: row }\"\r\n                class=\"bi bi-box-arrow-in-right\"\r\n                matTooltip=\"{{ 'LISTING.REGISTER' | translate }}\"\r\n                (click)=\"performAction(row, 'register')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'sendCorrespondance', entity: row }\"\r\n                class=\"bi bi-envelope\"\r\n                matTooltip=\"{{ 'LISTING.SEND' | translate }}\"\r\n                (click)=\"performAction(row, 'send')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'closeCorrespondance', entity: row }\"\r\n                class=\"bi bi-x-circle\"\r\n                matTooltip=\"{{ 'LISTING.CLOSE' | translate }}\"\r\n                (click)=\"performAction(row, 'close')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'archiveCorrespondance', entity: row }\"\r\n                class=\"bi bi-folder-symlink\"\r\n                matTooltip=\"{{ 'LISTING.ARCHIVE' | translate }}\"\r\n                (click)=\"performAction(row, 'archive')\"\r\n              ></i> -->\r\n                </div>\r\n                <div\r\n                  [ngClass]=\"\r\n                    disabledActions\r\n                      ? 'disabled-actions-wrapper'\r\n                      : 'actions-wrapper'\r\n                  \"\r\n                  *ngIf=\"showActionsAsMenu\"\r\n                >\r\n                  <button\r\n                    class=\"action-menu-trigger\"\r\n                    [matMenuTriggerFor]=\"menu\"\r\n                    [disabled]=\"disabledActions\"\r\n                  >\r\n                    <i class=\"bi bi-three-dots-vertical\"></i>\r\n                  </button>\r\n                  <mat-menu #menu=\"matMenu\" class=\"datatable-actions-menu\">\r\n                    <button\r\n                      mat-menu-item\r\n                      (click)=\"performAction(row, 'edit')\"\r\n                      *ngIf=\"entityType === 'voc-table'\"\r\n                    >\r\n                      <i class=\"bi bi-pencil-square edit-icon\"></i>\r\n                      <span class=\"action-text\">{{\r\n                        \"UPDATE\" | translate\r\n                      }}</span>\r\n                    </button>\r\n                    <button\r\n                      mat-menu-item\r\n                      (click)=\"performAction(row, 'delete')\"\r\n                      *ngIf=\"\r\n                        entityType === 'voc-table' ||\r\n                        entityType === 'department' ||\r\n                        entityType === 'signers'\r\n                      \"\r\n                    >\r\n                      <i class=\"bi bi-trash\"></i>\r\n                      <span class=\"action-text\">{{\r\n                        \"delete\" | translate\r\n                      }}</span>\r\n                    </button>\r\n                    <button\r\n                      mat-menu-item\r\n                      (click)=\"performAction(row, 'delete')\"\r\n                      *ngIf=\"entityType === 'users' && row.isInitial\"\r\n                    >\r\n                      <i class=\"bi bi-plus-square\"></i>\r\n                      <span class=\"action-text\">{{\r\n                        \"USER_MANGMENT.addToDepartment\" | translate\r\n                      }}</span>\r\n                    </button>\r\n                    <ng-conttainer *ngFor=\"let action of column.actions\">\r\n                      <button\r\n                        (click)=\"performAction(row, action.actionName)\"\r\n                        *permission=\"{\r\n                          name: action.permission,\r\n                          entity: row,\r\n                          user: nuxeoService.nuxeoClient.user,\r\n                        }\"\r\n                      >\r\n                        <i class=\"{{ action.icon }}\"></i>\r\n                        <span class=\"action-text\">{{\r\n                          action.tooltip | translate\r\n                        }}</span>\r\n                      </button>\r\n                    </ng-conttainer>\r\n                  </mat-menu>\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'date'\">\r\n                <div class=\"cell-text-wrapper\">\r\n                  <cts-date-viewer\r\n                    [withOutLabel]=\"true\"\r\n                    [value]=\"value\"\r\n                  ></cts-date-viewer>\r\n                </div>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"column.type === 'custom'\">\r\n                <ng-container\r\n                  *permission=\"{\r\n                    name: column.permission,\r\n                    entity: row,\r\n                    user: nuxeoService.nuxeoClient.user,\r\n                  }\"\r\n                >\r\n                  <cts-dynamic-column\r\n                    [id]=\"column.template\"\r\n                    [column]=\"column\"\r\n                    [context]=\"row\"\r\n                    (performAction)=\"performAction(row, column?.name, $event)\"\r\n                  >\r\n                  </cts-dynamic-column>\r\n                </ng-container>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'direction'\">\r\n                <div\r\n                  (click)=\"iconSelected($event, row)\"\r\n                  class=\"status-wrapper {{ value }} {{ row.state }}\"\r\n                >\r\n                  <span\r\n                    class=\"iner-status-wrapper\"\r\n                    matTooltip=\"{{ 'STATS.' + row.state | translate }}\"\r\n                  >\r\n                    <ng-container\r\n                      *permission=\"{ name: 'isFavorite', entity: row }\"\r\n                    >\r\n                      <span class=\"fav-icon-indicator bi bi-star-fill\"></span>\r\n                    </ng-container>\r\n                    <i\r\n                      class=\"{{\r\n                        directionIcons\r\n                          ? directionIcons['incoming']\r\n                          : 'bi bi-box-arrow-down'\r\n                      }}\"\r\n                      *ngIf=\"row.type === 'IncomingCorrespondence'\"\r\n                    ></i>\r\n                    <i\r\n                      class=\"{{\r\n                        directionIcons\r\n                          ? directionIcons['outgoing']\r\n                          : 'bi bi-box-arrow-up outgoing'\r\n                      }}\"\r\n                      *ngIf=\"row.type === 'OutgoingCorrespondence'\"\r\n                    ></i>\r\n                    <i\r\n                      class=\"{{\r\n                        directionIcons\r\n                          ? directionIcons['internal']\r\n                          : 'bi bi-box-arrow-right internal'\r\n                      }}\"\r\n                      *ngIf=\"row.type === 'InternalCorrespondence'\"\r\n                    ></i>\r\n                  </span>\r\n                  <!-- <span class=\"value {{ value }}\">{{ \"STATS.\" + value | translate }}</span> -->\r\n                </div>\r\n              </ng-container>\r\n            </ng-template>\r\n            <ng-template\r\n              #customRowTemplate\r\n              let-row=\"row\"\r\n              let-value=\"value\"\r\n              ngx-datatable-cell-template\r\n            >\r\n              <div\r\n                class=\"w-full flex items-center justify-center overflow-visible\"\r\n              >\r\n                <cts-dynamic-column\r\n                  [id]=\"column.custom1stCellTemplate\"\r\n                  [column]=\"column\"\r\n                  [context]=\"row\"\r\n                  (performAction)=\"performAction(row, column?.name, $event)\"\r\n                >\r\n                </cts-dynamic-column>\r\n              </div>\r\n            </ng-template>\r\n          </ngx-datatable-column>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ngx-datatable>\r\n</div>\r\n\r\n<div\r\n  *ngIf=\"responsiveView && tableMode !== tableModes.card\"\r\n  (window:resize)=\"assignTableColumns($event)\"\r\n>\r\n  <div class=\"dynamic-cards-container\">\r\n    <div\r\n      class=\"single-card\"\r\n      [ngClass]=\"{ 'selected-card': highlightSelectedCard && row?.isSelected }\"\r\n      *ngFor=\"let row of rows\"\r\n    >\r\n      <div class=\"memo-title\">\r\n        <span\r\n          tooltipIfOverflow\r\n          [tooltipIfOverflowText]=\"row.properties.referenceNumber\"\r\n        >\r\n          {{ row.properties.referenceNumber }}\r\n        </span>\r\n        <span class=\"action-wrap\">\r\n          <span class=\"action\" *ngFor=\"let action of tableActions\">\r\n            <i\r\n              *permission=\"{\r\n                name: action.permission,\r\n                entity: row,\r\n                user: nuxeoService.nuxeoClient.user,\r\n              }\"\r\n              class=\"{{ action.icon }}\"\r\n              matTooltip=\"{{ action.tooltip | translate }}\"\r\n              (click)=\"performAction(row, action.actionName)\"\r\n            ></i>\r\n          </span>\r\n        </span>\r\n      </div>\r\n      <div *ngIf=\"tableColumns.length > 1\">\r\n        <div\r\n          class=\"memo-body\"\r\n          *ngFor=\"let property of tableColumns$ | async\"\r\n          (click)=\"cardSelected(row)\"\r\n        >\r\n          <div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n          <div class=\"value\">\r\n            @switch (property.type) {\r\n              @case (\"text\") {\r\n                @let _value = row.properties[property.value];\r\n                <div\r\n                  class=\"text\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              }\r\n              @case (\"owner\") {\r\n                @let _value = row.properties[property.owner]?.[property.value];\r\n                <div\r\n                  class=\"text\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              }\r\n              @case (\"date\") {\r\n                @let _value =\r\n                  row.properties[property.value]\r\n                    | localizedDate: format : (isArabic ? \"ar-AR\" : \"en-US\");\r\n                <div\r\n                  class=\"text\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              }\r\n              @case (\"status\") {\r\n                @let _value = \"STATS.\" + row[property.value] | translate;\r\n                <div\r\n                  class=\"value {{ row[property.value] }}\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              }\r\n              @case (\"department\") {\r\n                <cts-department-viewer\r\n                  [noStyle]=\"true\"\r\n                  [value]=\"row.properties[property.value]\"\r\n                >\r\n                </cts-department-viewer>\r\n              }\r\n              @case (\"vocabulary\") {\r\n                <div class=\"cell-text-wrapper\">\r\n                  <cts-dropdown-viewer\r\n                    [withOutLabel]=\"true\"\r\n                    [value]=\"row.properties[property.value]\"\r\n                    [dropdownId]=\"property.vocabularyId\"\r\n                  >\r\n                  </cts-dropdown-viewer>\r\n                </div>\r\n              }\r\n              @case (\"direction\") {\r\n                <div\r\n                  (click)=\"iconSelected($event, row)\"\r\n                  class=\"status-wrapper {{ property.value }} {{ row.state }}\"\r\n                >\r\n                  <span\r\n                    class=\"iner-status-wrapper\"\r\n                    matTooltip=\"{{ 'STATS.' + row.state | translate }}\"\r\n                  >\r\n                    <ng-container\r\n                      *permission=\"{ name: 'isFavorite', entity: row }\"\r\n                    >\r\n                      <span class=\"fav-icon-indicator bi bi-star-fill\"></span>\r\n                    </ng-container>\r\n                    <i\r\n                      class=\"bi bi-box-arrow-down\"\r\n                      *ngIf=\"row.type === 'IncomingCorrespondence'\"\r\n                    ></i>\r\n                    <i\r\n                      class=\"bi bi-box-arrow-up outgoing\"\r\n                      *ngIf=\"row.type === 'OutgoingCorrespondence'\"\r\n                    ></i>\r\n                    <i\r\n                      class=\"bi bi-box-arrow-right internal\"\r\n                      *ngIf=\"row.type === 'InternalCorrespondence'\"\r\n                    ></i>\r\n                  </span>\r\n                </div>\r\n              }\r\n              @case (\"custom\") {\r\n                <div\r\n                  *permission=\"{\r\n                    name: column.permission,\r\n                    entity: row,\r\n                    user: nuxeoService.nuxeoClient.user,\r\n                  }\"\r\n                >\r\n                  <cts-dynamic-column\r\n                    [id]=\"property.template\"\r\n                    [column]=\"property\"\r\n                    [context]=\"row\"\r\n                    (performAction)=\"performAction(row, property?.name, $event)\"\r\n                  >\r\n                  </cts-dynamic-column>\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <ng-container *ngIf=\"tableColumns.length === 1\">\r\n      <div\r\n        class=\"iner-card-container {{ entityType }}\"\r\n        (click)=\"cardSelected(row)\"\r\n        *ngFor=\"let row of rows\"\r\n      >\r\n        <cts-dynamic-column\r\n          [id]=\"columns[0].template\"\r\n          [column]=\"columns[0]\"\r\n          [context]=\"row\"\r\n          (performAction)=\"performAction(row, columns[0]?.name, $event)\"\r\n        >\r\n        </cts-dynamic-column>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.card\">\r\n  <div class=\"cards-container\">\r\n    <div class=\"single-card\" *ngFor=\"let row of rows; let i = index\">\r\n      <div class=\"memo-title\">\r\n        <span\r\n          tooltipIfOverflow\r\n          [tooltipIfOverflowText]=\"row.properties.referenceNumber\"\r\n        >\r\n          {{ row.properties.referenceNumber }}\r\n        </span>\r\n        <span class=\"action-wrap\">\r\n          <span class=\"action\" *ngFor=\"let action of tableActions\">\r\n            <i\r\n              *permission=\"{\r\n                name: action.permission,\r\n                entity: row,\r\n                user: nuxeoService.nuxeoClient.user,\r\n              }\"\r\n              class=\"{{ action.icon }}\"\r\n              matTooltip=\"{{ action.tooltip | translate }}\"\r\n              (click)=\"performAction(row, action.actionName)\"\r\n            ></i>\r\n          </span>\r\n          <button\r\n            *permission=\"{\r\n              name: 'deleteMemo',\r\n              entity: row,\r\n              user: nuxeoService.nuxeoClient.user,\r\n            }\"\r\n            (click)=\"performAction(row, 'deleteMemo')\"\r\n          >\r\n            <i\r\n              class=\"bi bi-trash\"\r\n              matTooltip=\"{{ 'LISTING.ONLY_DELETE' | translate }}\"\r\n            ></i>\r\n          </button>\r\n          <button\r\n            *permission=\"{\r\n              name: 'terminateDelegation',\r\n              entity: row,\r\n              user: nuxeoService.nuxeoClient.user,\r\n            }\"\r\n            (click)=\"performAction(row, 'terminateDelegation')\"\r\n          >\r\n            <i\r\n              class=\"bi bi-trash\"\r\n              matTooltip=\"{{ 'LISTING.CANCEL' | translate }}\"\r\n            ></i>\r\n          </button>\r\n          <span\r\n            class=\"publish-state\"\r\n            *permission=\"{\r\n              name: 'memoPublished',\r\n              entity: row,\r\n              user: nuxeoService.nuxeoClient.user,\r\n            }\"\r\n            tooltipIfOverflow\r\n            [tooltipIfOverflowText]=\"'MEMOS.PUBLISHED' | translate\"\r\n          >\r\n            {{ \"MEMOS.PUBLISHED\" | translate }}\r\n          </span>\r\n          <span\r\n            class=\"publish-state\"\r\n            *permission=\"{\r\n              name: 'delegationFinished',\r\n              entity: row,\r\n              user: nuxeoService.nuxeoClient.user,\r\n            }\"\r\n            tooltipIfOverflow\r\n            [tooltipIfOverflowText]=\"'delegations.finished' | translate\"\r\n          >\r\n            {{ \"delegations.finished\" | translate }}\r\n          </span>\r\n          <span\r\n            class=\"publish-state\"\r\n            *permission=\"{\r\n              name: 'delegationActive',\r\n              entity: row,\r\n              user: nuxeoService.nuxeoClient.user,\r\n            }\"\r\n            tooltipIfOverflow\r\n            [tooltipIfOverflowText]=\"'delegations.active' | translate\"\r\n          >\r\n            {{ \"delegations.active\" | translate }}\r\n          </span>\r\n        </span>\r\n      </div>\r\n      <div\r\n        class=\"memo-body\"\r\n        *ngFor=\"let property of tableColumns$ | async\"\r\n        (click)=\"cardSelected(row); cardFocused(i)\"\r\n      >\r\n        <div\r\n          class=\"key\"\r\n          *ngIf=\"property.type !== 'default'\"\r\n          tooltipIfOverflow\r\n          [tooltipIfOverflowText]=\"prefix + property.key | translate\"\r\n        >\r\n          {{ prefix + property.key | translate }}\r\n        </div>\r\n        <ng-container *ngIf=\"property.type === 'default'\">\r\n          <div\r\n            class=\"key\"\r\n            *permission=\"{\r\n              name: 'internalIsEnabled',\r\n              entity: row,\r\n              user: nuxeoService.nuxeoClient.user,\r\n            }\"\r\n            tooltipIfOverflow\r\n            [tooltipIfOverflowText]=\"prefix + property.key | translate\"\r\n          >\r\n            {{ prefix + property.key | translate }}\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"value\">\r\n          @switch (property.type) {\r\n            @case (\"text\") {\r\n              @let _value = row.properties[property.value];\r\n              <div\r\n                class=\"text\"\r\n                tooltipIfOverflow\r\n                [tooltipIfOverflowText]=\"_value\"\r\n              >\r\n                {{ _value }}\r\n              </div>\r\n            }\r\n            @case (\"user\") {\r\n              @let _value = row.properties[property.value].fullName;\r\n              <div\r\n                class=\"text\"\r\n                tooltipIfOverflow\r\n                [tooltipIfOverflowText]=\"_value\"\r\n              >\r\n                {{ _value }}\r\n              </div>\r\n            }\r\n            @case (\"date\") {\r\n              @let _value =\r\n                row.properties[property.value]\r\n                  | localizedDate: format : (isArabic ? \"ar-AR\" : \"en-US\");\r\n              <div\r\n                class=\"text\"\r\n                tooltipIfOverflow\r\n                [tooltipIfOverflowText]=\"_value\"\r\n              >\r\n                {{ _value }}\r\n              </div>\r\n            }\r\n            @case (\"boolean\") {\r\n              @let _value =\r\n                (row.properties[property.value] ? \"Yes\" : \"No\") | translate;\r\n              <div\r\n                class=\"text\"\r\n                tooltipIfOverflow\r\n                [tooltipIfOverflowText]=\"_value\"\r\n              >\r\n                {{ _value }}\r\n              </div>\r\n            }\r\n            @case (\"default\") {\r\n              @let _value = row.properties[property.value];\r\n              <div\r\n                class=\"text\"\r\n                *permission=\"{\r\n                  name: 'internalIsEnabled',\r\n                  entity: row,\r\n                  user: nuxeoService.nuxeoClient.user,\r\n                }\"\r\n                tooltipIfOverflow\r\n                [tooltipIfOverflowText]=\"_value\"\r\n              >\r\n                {{ _value }}\r\n              </div>\r\n            }\r\n            @case (\"custom\") {\r\n              <div\r\n                class=\"text\"\r\n                *ngFor=\"let item of row.properties[property.value]\"\r\n                tooltipIfOverflow\r\n                [tooltipIfOverflowText]=\"item | translate\"\r\n              >\r\n                {{ item | translate }} {{ \", \" }}\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.dynamicCard\">\r\n  <div class=\"cards-container\">\r\n    <div\r\n      class=\"single-card\"\r\n      [ngClass]=\"{ 'selected-card': highlightSelectedCard && row?.isSelected }\"\r\n      *ngFor=\"let row of rows\"\r\n    >\r\n      <div *ngIf=\"tableColumns.length > 1\">\r\n        <div\r\n          class=\"memo-body\"\r\n          *ngFor=\"let property of tableColumns$ | async\"\r\n          (click)=\"cardSelected(row)\"\r\n        >\r\n          <div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n          <div class=\"value\">\r\n            @switch (property.type) {\r\n              @case (\"text\") {\r\n                @let _value = row.properties[property.value];\r\n                <div\r\n                  class=\"text\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              }\r\n              @case (\"date\") {\r\n                @let _value =\r\n                  row.properties[property.value]\r\n                    | localizedDate: format : (isArabic ? \"ar-AR\" : \"en-US\");\r\n                <div\r\n                  class=\"text\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"iner-card-container {{ entityType }}\"\r\n        (click)=\"cardSelected(row)\"\r\n        *ngIf=\"tableColumns.length === 1\"\r\n      >\r\n        <cts-dynamic-column\r\n          [id]=\"tableColumns[0].template\"\r\n          [column]=\"tableColumns[0]\"\r\n          [context]=\"row\"\r\n          (performAction)=\"performAction(row, tableColumns[0]?.name, $event)\"\r\n        >\r\n        </cts-dynamic-column>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.custom\" class=\"table-custom-view\">\r\n  <app-dynamic-component\r\n    class=\"table-custom-view__component\"\r\n    *ngFor=\"let row of rows\"\r\n    [componentName]=\"componentName\"\r\n    [row]=\"row\"\r\n    [rowAction]=\"actionOnRow\"\r\n    [selectionModel]=\"selectionModel\"\r\n    [onClick]=\"onRowSelected\"\r\n    (click)=\"cardSelected(row)\"\r\n    [class.dynamic-selected-card]=\"highlightSelectedCard && row?.isSelected\"\r\n  ></app-dynamic-component>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.ngx-datatable{border:var(--ngx-datatable-border, 1px solid #eef1f5);border-radius:5px}.ngx-datatable .datatable-header-inner{min-width:var(--datatable-header-inner-min-width, 0)}.ngx-datatable .datatable-header-cell-template-wrap{width:var(--datatable-header-cell-wrap-width, 100%);height:var(--datatable-header-cell-wrap-height, 100%);display:var(--datatable-header-cell-wrap-display, flex);align-items:var(--datatable-header-cell-wrap-align-items, center);justify-content:var(--datatable-header-cell-wrap-justify-content, center);white-space:var(--datatable-header-cell-wrap-white-space, pre)}.ngx-datatable .datatable-header-cell-template-wrap .datatable-header-cell-wrapper{display:var(--datatable-header-cell-wrapper-display, flex)}.ngx-datatable .datatable-header-cell-template-wrap .datatable-header-cell-wrapper .datatable-header-cell-label{text-align:var(--datatable-header-cell-label-align, center)}.ngx-datatable .datatable-header{font-weight:var(--datatable-header-weight, bold);height:var(--datatable-header-height, 50px);background:var(--datatable-header-background, #eef1f5);color:var(--datatable-header-color, #9aa4ac);font-size:var(--datatable-header-font-size, 14px);padding:var(--datatable-header-padding, 0);border:0px solid var(--datatable-header-border-color);border-width:var(--datatable-header-border-width, 0 0 1px 0)}.ngx-datatable .datatable-header .datatable-header-inner{min-width:var(--datatable-header-inner-min-width)!important;height:var(--datatable-header-inner-height, 100%);padding:var(--datatable-header-inner-padding, 0px 20px)}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center{display:var(--datatable-row-display, flex);justify-content:var(--datatable-row-justify, space-between);padding:var(--datatable-row-padding);align-items:var(--datatable-row-align, center);flex-grow:var(--datatable-row-flex-grow);min-width:var(--datatable-row-min-width);grid-template-columns:var(--datatable-row-columns);gap:var(--datatable-row-gap, 0)}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell{width:var(--datatable--header-cell-width);min-width:var(--datatable-header-cell-min-width);min-height:var(--datatable-header-cell-min-height, var(--datatable-cell-min-height, 50px));flex-grow:var(--datatable-header-cell-grow);flex-shrink:var(--datatable-header-cell-shrink)}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn{margin:var(--sort-btn-margin, 5px 5px 0px);width:var(--sort-btn-width, 16px);height:var(--sort-btn-height, 16px)}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn:before{content:var(--sort-btn-icon, \"\\f127\");display:inline-block;font-family:bootstrap-icons!important;font-style:normal;font-weight:400!important;font-variant:normal;font-size:var(--sort-btn-icon-size, 16px);text-transform:none;line-height:1;vertical-align:-.125em;-webkit-font-smoothing:antialiased;color:var(--sort-btn-icon-color, black)}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn.datatable-icon-up{--sort-btn-icon: \"\\f57b\"}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn.datatable-icon-down{--sort-btn-icon: \"\\f574\"}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-header-cell-template-wrap .checkbox-input{z-index:99}.ngx-datatable .datatable-body .empty-row{text-align:center}.ngx-datatable .datatable-body .datatable-row-left .datatable-body-cell{display:var(--datatable-body-left-cell-display, flex);justify-content:var(--datatable-body-left-cell-justify, flex-start);align-items:var(--datatable-body-left-cell-align-items, center);padding-inline:var(--datatable-body-left-cell-padding-inline)}.ngx-datatable .datatable-body .datatable-scroll{min-width:var(--datatable-scroll-min-width, 100%)!important;--datatable-body-cell-overflow: visible}.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row{display:flex!important;min-height:50px!important;overflow:visible!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row{height:var(--datatable-summary-row-height, 50px);font-size:var(--datatable-summary-row-font-size, 14px)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row{min-width:var(--datatable-body-row-min-width, 100%)!important;height:var(--datatable-body-row-height, 100%);padding:var(--datatable-body-row-padding, 0)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center{display:var(--datatable-row-display, flex);justify-content:var(--datatable-row-justify, space-between);align-items:var(--datatable-row-align, center);padding:var(--datatable-row-padding, 0px 20px);flex-grow:var(--datatable-row-flex-grow);min-width:var(--datatable-row-min-width);overflow:var(--datatable-row-overflow, visible);grid-template-columns:var(--datatable-row-columns);gap:var(--datatable-row-gap, 0)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell{display:var(--datatable-body-cell-display, flex);align-items:var(--datatable-body-cell-align-items, center);justify-content:var(--datatable-body-cell-justify-content, center);gap:var(--datatable-body-cell-gap);flex-grow:var(--datatable-body-cell-grow);flex-shrink:var(--datatable-body-cell-shrink);overflow:var(--datatable-body-cell-overflow, hidden);width:var(--datatable--body-cell-width, var(--datatable-cell-width, auto));min-width:var(--datatable-body-cell-min-width, var(--datatable-cell-min-width, 0));min-height:var(--datatable-body-cell-min-height, var(--datatable-cell-min-height, 50px))}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label{display:var(--datatable-body-cell-label-display, flex);justify-content:var(--datatable-body-cell-label-justify, center);font-size:var(--datatable-body-cell-label-font-size, inherit);font-weight:var(--datatable-body-cell-label-font-weight);line-height:var(--datatable-body-cell-label-line-height);width:var(--datatable-body-cell-label-width, 100%);color:var(--datatable-body-cell-label-color, inherit)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .checkbox-input,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .checkbox-input{z-index:99}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .cell-text-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .cell-text-wrapper{width:auto;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 5px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper{position:relative}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper .fav-icon-indicator,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper .fav-icon-indicator{font-size:12px;position:absolute;top:-5px;right:-10px;color:var(--yellow-200, #ebb98e)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value{display:flex;justify-content:center;align-items:center;border-radius:5px;width:100px;height:25px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value .status-icon,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value .status-icon{margin-inline-end:5px;font-size:var(--status-icon-size, 16px)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .draft,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .draft{background-color:#596973;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .inProgress,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .inProgress{background-color:#3c3cf0;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .registered,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .registered{background-color:#5a1496;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .archived,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .archived{background-color:#fbb62c;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .closed,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .closed{background-color:#00dca5;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .approved,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .approved{background-color:var(--green-600, #06a57e);color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .assigned,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .assigned{background-color:#fd6670;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .sent,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .sent{background-color:#3c3cf0;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_revision,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_revision{background:#689be7;color:#e9f1fd}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .rejected,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .rejected{background-color:#fd6670;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_sign,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_sign{background-color:#dda722;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirectSelection,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirectSelection{background-color:#28b994;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirect,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirect{background-color:#e38888;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Incoming,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Incoming{color:#00dca5}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Outgoing,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Outgoing{color:#fbb62c}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Internal,.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.internal,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Internal,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.internal{color:#3c3cf0}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper{width:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi{font-size:25px;cursor:pointer;color:#465573;margin:0 5px!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi:hover,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi:hover{color:var(--blue, #2e62df)!important;font-size:26px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button{display:flex;color:#5171a6;font-size:16px;height:45px;align-items:center;padding:0 10px;width:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button i,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button i{font-size:20px;padding:0;display:flex;align-items:center}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button .action-text,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button .action-text{padding:0 5px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button:hover,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button:hover{background-color:#e6ebf2}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper{width:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper .bi,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper .bi{font-size:25px;cursor:not-allowed;color:#465573;margin:0 5px!important;opacity:.7}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper:nth-child(2n){background-color:var(--even-row-background, #f4f6f8)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper:hover{background-color:var(--even-row-hover-background, #eef1f5)}.ngx-datatable div.datatable-row-left{order:1;margin-inline-start:auto;inset-inline:var(--datatable-row-left-inline, 0 auto);position:var(--datatable-row-left-position, sticky)!important}.ngx-datatable div.datatable-row-left .datatable-body-cell{overflow:hidden;background:var(--table-options-body-cell-color, #fff)}.ngx-datatable div.datatable-row-left .datatable-header-cell{overflow:hidden;background:var(--table-options-header-cell-color, #fff)}.iner-table-container{max-width:var(--table-container-max-width, 100%)}.rtl .ngx-datatable .datatable-body .status-wrapper .fav-icon-indicator{left:-10px;top:15px!important;right:auto!important}.cards-container{display:flex;flex-wrap:wrap;justify-content:center}.cards-container .single-card{padding-inline:var(--tbl-card-inline-padding, 1rem);padding-block:var(--tbl-card-block-padding, 1rem);margin-inline:var(--tbl-card-inline-margin, 5px);margin-block:var(--tbl-card-block-margin, 0px 10px);min-width:var(--tbl-card-min-width, 250px);width:var(--tbl-card-width, 24%);background:var(--tbl-card-background, #fff);border:var(--tbl-card-border, 1px solid rgba(180, 186, 198, .2));border-radius:var(--tbl-card-radius, 4px);box-shadow:var(--tbl-card-shadow, 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12));cursor:pointer}.cards-container .single-card .memo-title{font-size:14px;font-weight:700;color:#465573;border-bottom:1px solid lightgray;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}.cards-container .single-card .memo-title .action-wrap .action{margin:0 5px;cursor:pointer}.cards-container .single-card .memo-title .action-wrap .action i{font-size:16px}.cards-container .single-card .memo-title .action-wrap .action i:hover{color:#00f}.cards-container .single-card .memo-title .action-wrap .publish-state{font-size:12px;color:#00dca5;font-weight:700}.cards-container .single-card .memo-title .action-wrap button{border:none;color:#465573;background-color:transparent}.cards-container .single-card .memo-title .action-wrap button i{font-size:16px}.cards-container .single-card .memo-title .action-wrap button i:hover{color:#00f}.cards-container .single-card .memo-body{display:flex;padding:0 10px}.cards-container .single-card .memo-body .key{width:50%;font-size:12px;color:#9aa4ac}.cards-container .single-card .memo-body .value{width:50%;font-size:12px}.cards-container .single-card .memo-body .value .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cards-container .single-card:hover{background-color:#f6f7f8}.cards-container .single-card:focus{background-color:#f6f7f8}.cards-container .selected-card{background-color:#f6f7f8}.dynamic-cards-container{display:flex;flex-wrap:wrap;justify-content:center}.dynamic-cards-container .single-card{padding:15px;border:1px solid rgba(180,186,198,.2);border-radius:3px;min-width:306px;width:24%;margin:0 5px 10px;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;cursor:pointer}.dynamic-cards-container .single-card .memo-title{font-size:14px;font-weight:700;color:#465573;border-bottom:1px solid lightgray;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}.dynamic-cards-container .single-card .memo-title .action-wrap .action{cursor:pointer}.dynamic-cards-container .single-card .memo-title .action-wrap .action i{font-size:16px}.dynamic-cards-container .single-card .memo-title .action-wrap .action i:hover{color:#00f}.dynamic-cards-container .single-card .memo-title .action-wrap .publish-state{font-size:12px;color:#00dca5;font-weight:700}.dynamic-cards-container .single-card .memo-title .action-wrap button{border:none;color:#465573;background-color:transparent}.dynamic-cards-container .single-card .memo-title .action-wrap button i{font-size:16px}.dynamic-cards-container .single-card .memo-title .action-wrap button i:hover{color:#00f}.dynamic-cards-container .single-card .memo-body{display:flex;padding:0 10px}.dynamic-cards-container .single-card .memo-body .key{width:58%;font-size:12px;color:#9aa4ac;margin-bottom:4px}.dynamic-cards-container .single-card .memo-body .value{width:58%;font-size:12px}.dynamic-cards-container .single-card .memo-body .value .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dynamic-cards-container .single-card .memo-body .draft{background-color:#596973;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .inProgress{background-color:#3c3cf0;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .registered{background-color:#5a1496;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .archived{background-color:#fbb62c;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .closed{background-color:#00dca5;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .approved{background-color:var(--green-600, #06a57e);color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .assigned{background-color:#fd6670;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .sent{background-color:#3c3cf0;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .under_revision{background:#689be7;color:#e9f1fd;text-align:center}.dynamic-cards-container .single-card .memo-body .rejected{background-color:#fd6670;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .under_sign{background-color:#dda722;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card:hover{background-color:#f6f7f8}.dynamic-cards-container .single-card:focus{background-color:#f6f7f8}.dynamic-cards-container .selected-card{background-color:#f6f7f8}.overflowVisible{overflow:visible!important}.table-custom-view{display:var(--tcv-display, grid);grid-template-columns:var(--tcv-display-columns, repeat(var(--tcv-columns-count, auto-fit), minmax(350px, 1fr)));gap:var(--tcv-gap, 1rem);padding-inline:var(--tcv-padding-inline, 1rem);padding-block:var(--tcv-padding-block, 1rem)}.actions-wrapper i{font-size:var(--table-options-font-size, 2rem)!important}\n"] }]
+            args: [{ selector: 'cts-table', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div\r\n  #tableContainer\r\n  class=\"iner-table-container\"\r\n  [style]=\"'width:' + tableWidth\"\r\n  *ngIf=\"tableMode === tableModes.list && !responsiveView\"\r\n>\r\n  <ngx-datatable\r\n    [ngClass]=\"{ overflowVisible: customFirstRow }\"\r\n    class=\"large-table\"\r\n    [rows]=\"rows\"\r\n    [summaryRow]=\"customFirstRow\"\r\n    [columnMode]=\"columnMode\"\r\n    [scrollbarH]=\"true\"\r\n    [style.width.%]=\"100\"\r\n    [rowClass]=\"rowClass\"\r\n    [externalSorting]=\"true\"\r\n    (activate)=\"rowDetails($event)\"\r\n    (select)=\"onSelect($event)\"\r\n    (sort)=\"onSort($event)\"\r\n    (window:resize)=\"assignTableColumns($event)\"\r\n    [rowHeight]=\"isFixedOptionColumns ? '3rem' : 'auto'\"\r\n    [selected]=\"selected\"\r\n    [selectionType]=\"multiSelectRows ? 'checkbox' : 'single'\"\r\n    [sorts]=\"[{ prop: defultSort?.name, dir: defultSort?.dir }]\"\r\n    [messages]=\"messages\"\r\n    [disableRowCheck]=\"disableRowCheck\"\r\n  >\r\n    <ngx-datatable-column\r\n      *ngIf=\"\r\n        (multiSelectRows || singleSelectRow) &&\r\n        (!rowCheckboxPermission || someRowsHasEnabledCheckbox)\r\n      \"\r\n      [width]=\"50\"\r\n      [sortable]=\"false\"\r\n      [prop]=\"''\"\r\n      [canAutoResize]=\"false\"\r\n      [draggable]=\"false\"\r\n      [resizeable]=\"false\"\r\n    >\r\n      <ng-template\r\n        ngx-datatable-header-template\r\n        let-value=\"value\"\r\n        let-allRowsSelected=\"allRowsSelected\"\r\n        let-selectFn=\"selectFn\"\r\n      >\r\n        @if (multiSelectRows) {\r\n          <mat-checkbox\r\n            [checked]=\"allRowsSelected\"\r\n            (change)=\"selectFn(!allRowsSelected)\"\r\n          >\r\n          </mat-checkbox>\r\n        }\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        ngx-datatable-cell-template\r\n        let-row=\"row\"\r\n        let-value=\"value\"\r\n        let-isSelected=\"isSelected\"\r\n        let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\r\n      >\r\n        @if (!row[\"__checkboxDisabled\"]) {\r\n          <mat-checkbox\r\n            [checked]=\"isSelected\"\r\n            (change)=\"onCheckboxChangeFn($event)\"\r\n          >\r\n          </mat-checkbox>\r\n        }\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n    <!-- | translate -->\r\n\r\n    <ng-container *ngIf=\"tableColumns$ | async as columns\">\r\n      <ngx-datatable-column *ngIf=\"!columns.length\"></ngx-datatable-column>\r\n\r\n      <!-- [frozenRight]=\"column.type === 'actions'\" -->\r\n      <ng-container *ngFor=\"let column of columns; let i = index\">\r\n        <ng-container *permission=\"{ name: column.permission }\">\r\n          <ngx-datatable-column\r\n            *ngIf=\"column.display\"\r\n            [sortable]=\"column.sortable\"\r\n            [name]=\"prefix + column.name | translate\"\r\n            [prop]=\"column.prop\"\r\n            [resizeable]=\"false\"\r\n            [draggable]=\"false\"\r\n            [frozenLeft]=\"\r\n              (isFixedOptionColumns && column.type === 'actions') ||\r\n              column?.frozenLeft\r\n            \"\r\n            [headerClass]=\"column.headerClass ? column.headerClass : ''\"\r\n            [summaryTemplate]=\"customFirstRow ? customRowTemplate : null\"\r\n            [cellClass]=\"getCellClass(column)\"\r\n            [width]=\"getWidth(column)\"\r\n            [flexGrow]=\"column?.flexGrow\"\r\n            [minWidth]=\"column?.minWidth\"\r\n            [maxWidth]=\"column?.maxWidth\"\r\n          >\r\n            <ng-template\r\n              let-row=\"row\"\r\n              let-value=\"value\"\r\n              let-index=\"index\"\r\n              ngx-datatable-cell-template\r\n            >\r\n              <ng-container *ngIf=\"column.type === 'text'\">\r\n                <div\r\n                  class=\"cell-text-wrapper\"\r\n                  *ngIf=\"!column.withTooltip\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"value\"\r\n                >\r\n                  {{ value ? value : \"--\" }}\r\n                </div>\r\n                <div\r\n                  class=\"cell-text-wrapper\"\r\n                  matTooltip=\"{{ value ? value : '--' }}\"\r\n                  *ngIf=\"column.withTooltip\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"value\"\r\n                >\r\n                  {{ value ? value : \"--\" }}\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'vocabulary'\">\r\n                <div class=\"cell-text-wrapper\">\r\n                  <cts-dropdown-viewer\r\n                    [withOutLabel]=\"true\"\r\n                    [value]=\"value\"\r\n                    [dropdownId]=\"column.vocabularyId\"\r\n                  >\r\n                  </cts-dropdown-viewer>\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'VocCell'\">\r\n                @let _value =\r\n                  value\r\n                    ? (column.vocabularyId + \".\" + value | translate)\r\n                    : \"--\";\r\n                <div\r\n                  class=\"cell-text-wrapper\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value | translate }}\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'VocItem'\">\r\n                @let _value = vocItemTranslationPrefix + value | translate;\r\n                <div\r\n                  class=\"cell-text-wrapper\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"column.type === 'department'\">\r\n                <div class=\"cell-text-wrapper\">\r\n                  <cts-department-viewer [noStyle]=\"true\" [value]=\"value\">\r\n                  </cts-department-viewer>\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'status'\">\r\n                <div class=\"status-wrapper\">\r\n                  <span class=\"value {{ value }}\">\r\n                    <i\r\n                      *ngIf=\"statusIcons && statusIcons !== {}\"\r\n                      class=\"status-icon {{ statusIcons[value] }}\"\r\n                    ></i>\r\n                    <span\r\n                      tooltipIfOverflow\r\n                      [tooltipIfOverflowText]=\"'STATS.' + value | translate\"\r\n                    >\r\n                    </span>\r\n                  </span>\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'role'\">\r\n                @let _value = value ? (\"role.\" + value | translate) : \"--\";\r\n                <div\r\n                  class=\"cell-text-wrapper\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container\r\n                *ngIf=\"column.type === 'actions' && rows.length !== 0\"\r\n              >\r\n                <div\r\n                  [ngClass]=\"\r\n                    disabledActions\r\n                      ? 'disabled-actions-wrapper'\r\n                      : 'actions-wrapper'\r\n                  \"\r\n                  *ngIf=\"!showActionsAsMenu\"\r\n                >\r\n                  <!-- <span class=\"bi bi-trash delete-icon\" (click)=\"performAction(row , 'delete')\"></span> -->\r\n                  <i\r\n                    class=\"bi bi-pencil-square edit-icon\"\r\n                    matTooltip=\"{{ 'UPDATE' | translate }}\"\r\n                    (click)=\"performAction(row, 'edit')\"\r\n                    *ngIf=\"entityType === 'voc-table'\"\r\n                  ></i>\r\n                  <i\r\n                    class=\"bi bi-trash\"\r\n                    matTooltip=\"{{ 'delete' | translate }}\"\r\n                    (click)=\"performAction(row, 'delete')\"\r\n                    *ngIf=\"\r\n                      entityType === 'voc-table' ||\r\n                      entityType === 'department' ||\r\n                      entityType === 'signers'\r\n                    \"\r\n                  ></i>\r\n\r\n                  <i\r\n                    class=\"bi bi-plus-square\"\r\n                    matTooltip=\"{{\r\n                      'USER_MANGMENT.addToDepartment' | translate\r\n                    }}\"\r\n                    (click)=\"performAction(row, 'delete')\"\r\n                    *ngIf=\"entityType === 'users' && row.isInitial\"\r\n                  ></i>\r\n\r\n                  <span *ngFor=\"let action of column.actions\">\r\n                    <ng-container\r\n                      *ngIf=\"action.type == 'button'; else showIcon\"\r\n                    >\r\n                      <button\r\n                        *permission=\"{\r\n                          name: action.permission,\r\n                          entity: row,\r\n                          user: nuxeoService.nuxeoClient.user,\r\n                        }\"\r\n                        class=\"{{ action.class }}\"\r\n                        matTooltip=\"{{ action.tooltip | translate }}\"\r\n                        (click)=\"performAction(row, action.actionName)\"\r\n                      >\r\n                        <mat-icon\r\n                          *ngIf=\"action.icon\"\r\n                          [class]=\"action.iconClass\"\r\n                          [svgIcon]=\"action.icon\"\r\n                        >\r\n                        </mat-icon>\r\n\r\n                        {{ action.title | translate }}\r\n                      </button>\r\n                    </ng-container>\r\n                    <ng-template #showIcon>\r\n                      <i\r\n                        *permission=\"{\r\n                          name: action.permission,\r\n                          entity: row,\r\n                          user: nuxeoService.nuxeoClient.user,\r\n                        }\"\r\n                        class=\"{{ action.icon }}\"\r\n                        matTooltip=\"{{ action.tooltip | translate }}\"\r\n                        (click)=\"performAction(row, action.actionName)\"\r\n                      ></i>\r\n                    </ng-template>\r\n                  </span>\r\n\r\n                  <!-- <i\r\n                *permission=\"{ name: 'registerCorrespondance', entity: row }\"\r\n                class=\"bi bi-box-arrow-in-right\"\r\n                matTooltip=\"{{ 'LISTING.REGISTER' | translate }}\"\r\n                (click)=\"performAction(row, 'register')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'sendCorrespondance', entity: row }\"\r\n                class=\"bi bi-envelope\"\r\n                matTooltip=\"{{ 'LISTING.SEND' | translate }}\"\r\n                (click)=\"performAction(row, 'send')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'closeCorrespondance', entity: row }\"\r\n                class=\"bi bi-x-circle\"\r\n                matTooltip=\"{{ 'LISTING.CLOSE' | translate }}\"\r\n                (click)=\"performAction(row, 'close')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'archiveCorrespondance', entity: row }\"\r\n                class=\"bi bi-folder-symlink\"\r\n                matTooltip=\"{{ 'LISTING.ARCHIVE' | translate }}\"\r\n                (click)=\"performAction(row, 'archive')\"\r\n              ></i> -->\r\n                </div>\r\n                <div\r\n                  [ngClass]=\"\r\n                    disabledActions\r\n                      ? 'disabled-actions-wrapper'\r\n                      : 'actions-wrapper'\r\n                  \"\r\n                  *ngIf=\"showActionsAsMenu\"\r\n                >\r\n                  <button\r\n                    class=\"action-menu-trigger\"\r\n                    [matMenuTriggerFor]=\"menu\"\r\n                    [disabled]=\"disabledActions\"\r\n                  >\r\n                    <i class=\"bi bi-three-dots-vertical\"></i>\r\n                  </button>\r\n                  <mat-menu #menu=\"matMenu\" class=\"datatable-actions-menu\">\r\n                    <button\r\n                      mat-menu-item\r\n                      (click)=\"performAction(row, 'edit')\"\r\n                      *ngIf=\"entityType === 'voc-table'\"\r\n                    >\r\n                      <i class=\"bi bi-pencil-square edit-icon\"></i>\r\n                      <span class=\"action-text\">{{\r\n                        \"UPDATE\" | translate\r\n                      }}</span>\r\n                    </button>\r\n                    <button\r\n                      mat-menu-item\r\n                      (click)=\"performAction(row, 'delete')\"\r\n                      *ngIf=\"\r\n                        entityType === 'voc-table' ||\r\n                        entityType === 'department' ||\r\n                        entityType === 'signers'\r\n                      \"\r\n                    >\r\n                      <i class=\"bi bi-trash\"></i>\r\n                      <span class=\"action-text\">{{\r\n                        \"delete\" | translate\r\n                      }}</span>\r\n                    </button>\r\n                    <button\r\n                      mat-menu-item\r\n                      (click)=\"performAction(row, 'delete')\"\r\n                      *ngIf=\"entityType === 'users' && row.isInitial\"\r\n                    >\r\n                      <i class=\"bi bi-plus-square\"></i>\r\n                      <span class=\"action-text\">{{\r\n                        \"USER_MANGMENT.addToDepartment\" | translate\r\n                      }}</span>\r\n                    </button>\r\n                    <ng-conttainer *ngFor=\"let action of column.actions\">\r\n                      <button\r\n                        (click)=\"performAction(row, action.actionName)\"\r\n                        *permission=\"{\r\n                          name: action.permission,\r\n                          entity: row,\r\n                          user: nuxeoService.nuxeoClient.user,\r\n                        }\"\r\n                      >\r\n                        <i class=\"{{ action.icon }}\"></i>\r\n                        <span class=\"action-text\">{{\r\n                          action.tooltip | translate\r\n                        }}</span>\r\n                      </button>\r\n                    </ng-conttainer>\r\n                  </mat-menu>\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'date'\">\r\n                <div class=\"cell-text-wrapper\">\r\n                  <cts-date-viewer\r\n                    [withOutLabel]=\"true\"\r\n                    [value]=\"value\"\r\n                  ></cts-date-viewer>\r\n                </div>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"column.type === 'custom'\">\r\n                <ng-container\r\n                  *permission=\"{\r\n                    name: column.permission,\r\n                    entity: row,\r\n                    user: nuxeoService.nuxeoClient.user,\r\n                  }\"\r\n                >\r\n                  <cts-dynamic-column\r\n                    [id]=\"column.template\"\r\n                    [column]=\"column\"\r\n                    [context]=\"row\"\r\n                    (performAction)=\"performAction(row, column?.name, $event)\"\r\n                  >\r\n                  </cts-dynamic-column>\r\n                </ng-container>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"column.type === 'direction'\">\r\n                <div\r\n                  (click)=\"iconSelected($event, row)\"\r\n                  class=\"status-wrapper {{ value }} {{ row.state }}\"\r\n                >\r\n                  <span\r\n                    class=\"iner-status-wrapper\"\r\n                    matTooltip=\"{{ 'STATS.' + row.state | translate }}\"\r\n                  >\r\n                    <ng-container\r\n                      *permission=\"{ name: 'isFavorite', entity: row }\"\r\n                    >\r\n                      <span class=\"fav-icon-indicator bi bi-star-fill\"></span>\r\n                    </ng-container>\r\n                    <i\r\n                      class=\"{{\r\n                        directionIcons\r\n                          ? directionIcons['incoming']\r\n                          : 'bi bi-box-arrow-down'\r\n                      }}\"\r\n                      *ngIf=\"row.type === 'IncomingCorrespondence'\"\r\n                    ></i>\r\n                    <i\r\n                      class=\"{{\r\n                        directionIcons\r\n                          ? directionIcons['outgoing']\r\n                          : 'bi bi-box-arrow-up outgoing'\r\n                      }}\"\r\n                      *ngIf=\"row.type === 'OutgoingCorrespondence'\"\r\n                    ></i>\r\n                    <i\r\n                      class=\"{{\r\n                        directionIcons\r\n                          ? directionIcons['internal']\r\n                          : 'bi bi-box-arrow-right internal'\r\n                      }}\"\r\n                      *ngIf=\"row.type === 'InternalCorrespondence'\"\r\n                    ></i>\r\n                  </span>\r\n                  <!-- <span class=\"value {{ value }}\">{{ \"STATS.\" + value | translate }}</span> -->\r\n                </div>\r\n              </ng-container>\r\n            </ng-template>\r\n            <ng-template\r\n              #customRowTemplate\r\n              let-row=\"row\"\r\n              let-value=\"value\"\r\n              ngx-datatable-cell-template\r\n            >\r\n              <div\r\n                class=\"w-full flex items-center justify-center overflow-visible\"\r\n              >\r\n                <cts-dynamic-column\r\n                  [id]=\"column.custom1stCellTemplate\"\r\n                  [column]=\"column\"\r\n                  [context]=\"row\"\r\n                  (performAction)=\"performAction(row, column?.name, $event)\"\r\n                >\r\n                </cts-dynamic-column>\r\n              </div>\r\n            </ng-template>\r\n          </ngx-datatable-column>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ngx-datatable>\r\n</div>\r\n\r\n<div\r\n  *ngIf=\"responsiveView && tableMode !== tableModes.card\"\r\n  (window:resize)=\"assignTableColumns($event)\"\r\n>\r\n  <div class=\"dynamic-cards-container\">\r\n    <div\r\n      class=\"single-card\"\r\n      [ngClass]=\"{ 'selected-card': highlightSelectedCard && row?.isSelected }\"\r\n      *ngFor=\"let row of rows\"\r\n    >\r\n      <div class=\"memo-title\">\r\n        <span\r\n          tooltipIfOverflow\r\n          [tooltipIfOverflowText]=\"row.properties.referenceNumber\"\r\n        >\r\n          {{ row.properties.referenceNumber }}\r\n        </span>\r\n        <span class=\"action-wrap\">\r\n          <span class=\"action\" *ngFor=\"let action of tableActions\">\r\n            <i\r\n              *permission=\"{\r\n                name: action.permission,\r\n                entity: row,\r\n                user: nuxeoService.nuxeoClient.user,\r\n              }\"\r\n              class=\"{{ action.icon }}\"\r\n              matTooltip=\"{{ action.tooltip | translate }}\"\r\n              (click)=\"performAction(row, action.actionName)\"\r\n            ></i>\r\n          </span>\r\n        </span>\r\n      </div>\r\n      <div *ngIf=\"tableColumns.length > 1\">\r\n        <div\r\n          class=\"memo-body\"\r\n          *ngFor=\"let property of tableColumns$ | async\"\r\n          (click)=\"cardSelected(row)\"\r\n        >\r\n          <div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n          <div class=\"value\">\r\n            @switch (property.type) {\r\n              @case (\"text\") {\r\n                @let _value = row.properties[property.value];\r\n                <div\r\n                  class=\"text\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              }\r\n              @case (\"owner\") {\r\n                @let _value = row.properties[property.owner]?.[property.value];\r\n                <div\r\n                  class=\"text\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              }\r\n              @case (\"date\") {\r\n                @let _value =\r\n                  row.properties[property.value]\r\n                    | localizedDate: format : (isArabic ? \"ar-AR\" : \"en-US\");\r\n                <div\r\n                  class=\"text\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              }\r\n              @case (\"status\") {\r\n                @let _value = \"STATS.\" + row[property.value] | translate;\r\n                <div\r\n                  class=\"value {{ row[property.value] }}\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              }\r\n              @case (\"department\") {\r\n                <cts-department-viewer\r\n                  [noStyle]=\"true\"\r\n                  [value]=\"row.properties[property.value]\"\r\n                >\r\n                </cts-department-viewer>\r\n              }\r\n              @case (\"vocabulary\") {\r\n                <div class=\"cell-text-wrapper\">\r\n                  <cts-dropdown-viewer\r\n                    [withOutLabel]=\"true\"\r\n                    [value]=\"row.properties[property.value]\"\r\n                    [dropdownId]=\"property.vocabularyId\"\r\n                  >\r\n                  </cts-dropdown-viewer>\r\n                </div>\r\n              }\r\n              @case (\"direction\") {\r\n                <div\r\n                  (click)=\"iconSelected($event, row)\"\r\n                  class=\"status-wrapper {{ property.value }} {{ row.state }}\"\r\n                >\r\n                  <span\r\n                    class=\"iner-status-wrapper\"\r\n                    matTooltip=\"{{ 'STATS.' + row.state | translate }}\"\r\n                  >\r\n                    <ng-container\r\n                      *permission=\"{ name: 'isFavorite', entity: row }\"\r\n                    >\r\n                      <span class=\"fav-icon-indicator bi bi-star-fill\"></span>\r\n                    </ng-container>\r\n                    <i\r\n                      class=\"bi bi-box-arrow-down\"\r\n                      *ngIf=\"row.type === 'IncomingCorrespondence'\"\r\n                    ></i>\r\n                    <i\r\n                      class=\"bi bi-box-arrow-up outgoing\"\r\n                      *ngIf=\"row.type === 'OutgoingCorrespondence'\"\r\n                    ></i>\r\n                    <i\r\n                      class=\"bi bi-box-arrow-right internal\"\r\n                      *ngIf=\"row.type === 'InternalCorrespondence'\"\r\n                    ></i>\r\n                  </span>\r\n                </div>\r\n              }\r\n              @case (\"custom\") {\r\n                <div\r\n                  *permission=\"{\r\n                    name: column.permission,\r\n                    entity: row,\r\n                    user: nuxeoService.nuxeoClient.user,\r\n                  }\"\r\n                >\r\n                  <cts-dynamic-column\r\n                    [id]=\"property.template\"\r\n                    [column]=\"property\"\r\n                    [context]=\"row\"\r\n                    (performAction)=\"performAction(row, property?.name, $event)\"\r\n                  >\r\n                  </cts-dynamic-column>\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <ng-container *ngIf=\"tableColumns.length === 1\">\r\n      <div\r\n        class=\"iner-card-container {{ entityType }}\"\r\n        (click)=\"cardSelected(row)\"\r\n        *ngFor=\"let row of rows\"\r\n      >\r\n        <cts-dynamic-column\r\n          [id]=\"columns[0].template\"\r\n          [column]=\"columns[0]\"\r\n          [context]=\"row\"\r\n          (performAction)=\"performAction(row, columns[0]?.name, $event)\"\r\n        >\r\n        </cts-dynamic-column>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.card\">\r\n  <div class=\"cards-container\">\r\n    <div class=\"single-card\" *ngFor=\"let row of rows; let i = index\">\r\n      <div class=\"memo-title\">\r\n        <span\r\n          tooltipIfOverflow\r\n          [tooltipIfOverflowText]=\"row.properties.referenceNumber\"\r\n        >\r\n          {{ row.properties.referenceNumber }}\r\n        </span>\r\n        <span class=\"action-wrap\">\r\n          <span class=\"action\" *ngFor=\"let action of tableActions\">\r\n            <i\r\n              *permission=\"{\r\n                name: action.permission,\r\n                entity: row,\r\n                user: nuxeoService.nuxeoClient.user,\r\n              }\"\r\n              class=\"{{ action.icon }}\"\r\n              matTooltip=\"{{ action.tooltip | translate }}\"\r\n              (click)=\"performAction(row, action.actionName)\"\r\n            ></i>\r\n          </span>\r\n          <button\r\n            *permission=\"{\r\n              name: 'deleteMemo',\r\n              entity: row,\r\n              user: nuxeoService.nuxeoClient.user,\r\n            }\"\r\n            (click)=\"performAction(row, 'deleteMemo')\"\r\n          >\r\n            <i\r\n              class=\"bi bi-trash\"\r\n              matTooltip=\"{{ 'LISTING.ONLY_DELETE' | translate }}\"\r\n            ></i>\r\n          </button>\r\n          <button\r\n            *permission=\"{\r\n              name: 'terminateDelegation',\r\n              entity: row,\r\n              user: nuxeoService.nuxeoClient.user,\r\n            }\"\r\n            (click)=\"performAction(row, 'terminateDelegation')\"\r\n          >\r\n            <i\r\n              class=\"bi bi-trash\"\r\n              matTooltip=\"{{ 'LISTING.CANCEL' | translate }}\"\r\n            ></i>\r\n          </button>\r\n          <span\r\n            class=\"publish-state\"\r\n            *permission=\"{\r\n              name: 'memoPublished',\r\n              entity: row,\r\n              user: nuxeoService.nuxeoClient.user,\r\n            }\"\r\n            tooltipIfOverflow\r\n            [tooltipIfOverflowText]=\"'MEMOS.PUBLISHED' | translate\"\r\n          >\r\n            {{ \"MEMOS.PUBLISHED\" | translate }}\r\n          </span>\r\n          <span\r\n            class=\"publish-state\"\r\n            *permission=\"{\r\n              name: 'delegationFinished',\r\n              entity: row,\r\n              user: nuxeoService.nuxeoClient.user,\r\n            }\"\r\n            tooltipIfOverflow\r\n            [tooltipIfOverflowText]=\"'delegations.finished' | translate\"\r\n          >\r\n            {{ \"delegations.finished\" | translate }}\r\n          </span>\r\n          <span\r\n            class=\"publish-state\"\r\n            *permission=\"{\r\n              name: 'delegationActive',\r\n              entity: row,\r\n              user: nuxeoService.nuxeoClient.user,\r\n            }\"\r\n            tooltipIfOverflow\r\n            [tooltipIfOverflowText]=\"'delegations.active' | translate\"\r\n          >\r\n            {{ \"delegations.active\" | translate }}\r\n          </span>\r\n        </span>\r\n      </div>\r\n      <div\r\n        class=\"memo-body\"\r\n        *ngFor=\"let property of tableColumns$ | async\"\r\n        (click)=\"cardSelected(row); cardFocused(i)\"\r\n      >\r\n        <div\r\n          class=\"key\"\r\n          *ngIf=\"property.type !== 'default'\"\r\n          tooltipIfOverflow\r\n          [tooltipIfOverflowText]=\"prefix + property.key | translate\"\r\n        >\r\n          {{ prefix + property.key | translate }}\r\n        </div>\r\n        <ng-container *ngIf=\"property.type === 'default'\">\r\n          <div\r\n            class=\"key\"\r\n            *permission=\"{\r\n              name: 'internalIsEnabled',\r\n              entity: row,\r\n              user: nuxeoService.nuxeoClient.user,\r\n            }\"\r\n            tooltipIfOverflow\r\n            [tooltipIfOverflowText]=\"prefix + property.key | translate\"\r\n          >\r\n            {{ prefix + property.key | translate }}\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"value\">\r\n          @switch (property.type) {\r\n            @case (\"text\") {\r\n              @let _value = row.properties[property.value];\r\n              <div\r\n                class=\"text\"\r\n                tooltipIfOverflow\r\n                [tooltipIfOverflowText]=\"_value\"\r\n              >\r\n                {{ _value }}\r\n              </div>\r\n            }\r\n            @case (\"user\") {\r\n              @let _value = row.properties[property.value].fullName;\r\n              <div\r\n                class=\"text\"\r\n                tooltipIfOverflow\r\n                [tooltipIfOverflowText]=\"_value\"\r\n              >\r\n                {{ _value }}\r\n              </div>\r\n            }\r\n            @case (\"date\") {\r\n              @let _value =\r\n                row.properties[property.value]\r\n                  | localizedDate: format : (isArabic ? \"ar-AR\" : \"en-US\");\r\n              <div\r\n                class=\"text\"\r\n                tooltipIfOverflow\r\n                [tooltipIfOverflowText]=\"_value\"\r\n              >\r\n                {{ _value }}\r\n              </div>\r\n            }\r\n            @case (\"boolean\") {\r\n              @let _value =\r\n                (row.properties[property.value] ? \"Yes\" : \"No\") | translate;\r\n              <div\r\n                class=\"text\"\r\n                tooltipIfOverflow\r\n                [tooltipIfOverflowText]=\"_value\"\r\n              >\r\n                {{ _value }}\r\n              </div>\r\n            }\r\n            @case (\"default\") {\r\n              @let _value = row.properties[property.value];\r\n              <div\r\n                class=\"text\"\r\n                *permission=\"{\r\n                  name: 'internalIsEnabled',\r\n                  entity: row,\r\n                  user: nuxeoService.nuxeoClient.user,\r\n                }\"\r\n                tooltipIfOverflow\r\n                [tooltipIfOverflowText]=\"_value\"\r\n              >\r\n                {{ _value }}\r\n              </div>\r\n            }\r\n            @case (\"custom\") {\r\n              <div\r\n                class=\"text\"\r\n                *ngFor=\"let item of row.properties[property.value]\"\r\n                tooltipIfOverflow\r\n                [tooltipIfOverflowText]=\"item | translate\"\r\n              >\r\n                {{ item | translate }} {{ \", \" }}\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.dynamicCard\">\r\n  <div class=\"cards-container\">\r\n    <div\r\n      class=\"single-card\"\r\n      [ngClass]=\"{ 'selected-card': highlightSelectedCard && row?.isSelected }\"\r\n      *ngFor=\"let row of rows\"\r\n    >\r\n      <div *ngIf=\"tableColumns.length > 1\">\r\n        <div\r\n          class=\"memo-body\"\r\n          *ngFor=\"let property of tableColumns$ | async\"\r\n          (click)=\"cardSelected(row)\"\r\n        >\r\n          <div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n          <div class=\"value\">\r\n            @switch (property.type) {\r\n              @case (\"text\") {\r\n                @let _value = row.properties[property.value];\r\n                <div\r\n                  class=\"text\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              }\r\n              @case (\"date\") {\r\n                @let _value =\r\n                  row.properties[property.value]\r\n                    | localizedDate: format : (isArabic ? \"ar-AR\" : \"en-US\");\r\n                <div\r\n                  class=\"text\"\r\n                  tooltipIfOverflow\r\n                  [tooltipIfOverflowText]=\"_value\"\r\n                >\r\n                  {{ _value }}\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"iner-card-container {{ entityType }}\"\r\n        (click)=\"cardSelected(row)\"\r\n        *ngIf=\"tableColumns.length === 1\"\r\n      >\r\n        <cts-dynamic-column\r\n          [id]=\"tableColumns[0].template\"\r\n          [column]=\"tableColumns[0]\"\r\n          [context]=\"row\"\r\n          (performAction)=\"performAction(row, tableColumns[0]?.name, $event)\"\r\n        >\r\n        </cts-dynamic-column>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.custom\" class=\"table-custom-view\">\r\n  <app-dynamic-component\r\n    class=\"table-custom-view__component\"\r\n    *ngFor=\"let row of rows\"\r\n    [componentName]=\"componentName\"\r\n    [row]=\"row\"\r\n    [rowAction]=\"actionOnRow\"\r\n    [selectionModel]=\"selectionModel\"\r\n    [onClick]=\"onRowSelected\"\r\n    (click)=\"cardSelected(row)\"\r\n    [class.dynamic-selected-card]=\"highlightSelectedCard && row?.isSelected\"\r\n  ></app-dynamic-component>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.ngx-datatable{border:var(--ngx-datatable-border, 1px solid #eef1f5);border-radius:5px}.ngx-datatable .datatable-header-inner{min-width:var(--datatable-header-inner-min-width, 0)}.ngx-datatable .datatable-header-cell-template-wrap{width:var(--datatable-header-cell-wrap-width, 100%);height:var(--datatable-header-cell-wrap-height, 100%);display:var(--datatable-header-cell-wrap-display, flex);align-items:var(--datatable-header-cell-wrap-align-items, center);justify-content:var(--datatable-header-cell-wrap-justify-content, center);white-space:var(--datatable-header-cell-wrap-white-space, pre)}.ngx-datatable .datatable-header-cell-template-wrap .datatable-header-cell-wrapper{display:var(--datatable-header-cell-wrapper-display, flex)}.ngx-datatable .datatable-header-cell-template-wrap .datatable-header-cell-wrapper .datatable-header-cell-label{text-align:var(--datatable-header-cell-label-align, center)}.ngx-datatable .datatable-header{font-weight:var(--datatable-header-weight, bold);height:var(--datatable-header-height, 50px);background:var(--datatable-header-background, #eef1f5);color:var(--datatable-header-color, #9aa4ac);font-size:var(--datatable-header-font-size, 14px);padding:var(--datatable-header-padding, 0);border:0px solid var(--datatable-header-border-color);border-width:var(--datatable-header-border-width, 0 0 1px 0)}.ngx-datatable .datatable-header .datatable-header-inner{min-width:var(--datatable-header-inner-min-width)!important;height:var(--datatable-header-inner-height, 100%);padding:var(--datatable-header-inner-padding, 0px 20px)}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center{display:var(--datatable-row-display, flex);justify-content:var(--datatable-row-justify, space-between);padding:var(--datatable-row-padding);align-items:var(--datatable-row-align, center);flex-grow:var(--datatable-row-flex-grow);min-width:var(--datatable-row-min-width);grid-template-columns:var(--datatable-row-columns);gap:var(--datatable-row-gap, 0)}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell{width:var(--datatable--header-cell-width);min-width:var(--datatable-header-cell-min-width);min-height:var(--datatable-header-cell-min-height, var(--datatable-cell-min-height, 50px));flex-grow:var(--datatable-header-cell-grow);flex-shrink:var(--datatable-header-cell-shrink)}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn{margin:var(--sort-btn-margin, 5px 5px 0px);width:var(--sort-btn-width, 16px);height:var(--sort-btn-height, 16px)}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn:before{content:var(--sort-btn-icon, \"\\f127\");display:inline-block;font-family:bootstrap-icons!important;font-style:normal;font-weight:400!important;font-variant:normal;font-size:var(--sort-btn-icon-size, 16px);text-transform:none;line-height:1;vertical-align:-.125em;-webkit-font-smoothing:antialiased;color:var(--sort-btn-icon-color, black)}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn.datatable-icon-up{--sort-btn-icon: \"\\f57b\"}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn.datatable-icon-down{--sort-btn-icon: \"\\f574\"}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-header-cell-template-wrap .checkbox-input{z-index:99}.ngx-datatable .datatable-body .empty-row{text-align:center}.ngx-datatable .datatable-body .datatable-row-left .datatable-body-cell{display:var(--datatable-body-left-cell-display, flex);justify-content:var(--datatable-body-left-cell-justify, flex-start);align-items:var(--datatable-body-left-cell-align-items, center);padding-inline:var(--datatable-body-left-cell-padding-inline)}.ngx-datatable .datatable-body .datatable-scroll{min-width:var(--datatable-scroll-min-width, 100%)!important;--datatable-body-cell-overflow: visible}.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row{display:flex!important;min-height:50px!important;overflow:visible!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row{height:var(--datatable-summary-row-height, 50px);font-size:var(--datatable-summary-row-font-size, 14px)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row{min-width:var(--datatable-body-row-min-width, 100%)!important;height:var(--datatable-body-row-height, 100%);padding:var(--datatable-body-row-padding, 0)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center{display:var(--datatable-row-display, flex);justify-content:var(--datatable-row-justify, space-between);align-items:var(--datatable-row-align, center);padding:var(--datatable-row-padding, 0px 20px);flex-grow:var(--datatable-row-flex-grow);min-width:var(--datatable-row-min-width);overflow:var(--datatable-row-overflow, visible);grid-template-columns:var(--datatable-row-columns);gap:var(--datatable-row-gap, 0)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell{display:var(--datatable-body-cell-display, flex);align-items:var(--datatable-body-cell-align-items, center);justify-content:var(--datatable-body-cell-justify-content, center);gap:var(--datatable-body-cell-gap);flex-grow:var(--datatable-body-cell-grow);flex-shrink:var(--datatable-body-cell-shrink);overflow:var(--datatable-body-cell-overflow, hidden);width:var(--datatable--body-cell-width, var(--datatable-cell-width, auto));min-width:var(--datatable-body-cell-min-width, var(--datatable-cell-min-width, 0));min-height:var(--datatable-body-cell-min-height, var(--datatable-cell-min-height, 50px))}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label{display:var(--datatable-body-cell-label-display, flex);justify-content:var(--datatable-body-cell-label-justify, center);font-size:var(--datatable-body-cell-label-font-size, inherit);font-weight:var(--datatable-body-cell-label-font-weight);line-height:var(--datatable-body-cell-label-line-height);width:var(--datatable-body-cell-label-width, 100%);color:var(--datatable-body-cell-label-color, inherit)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .checkbox-input,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .checkbox-input{z-index:99}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .cell-text-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .cell-text-wrapper{width:auto;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 5px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper{position:relative}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper .fav-icon-indicator,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper .fav-icon-indicator{font-size:12px;position:absolute;top:-5px;right:-10px;color:var(--yellow-200, #ebb98e)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value{display:flex;justify-content:center;align-items:center;border-radius:5px;width:100px;height:25px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value .status-icon,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value .status-icon{margin-inline-end:5px;font-size:var(--status-icon-size, 16px)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .draft,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .draft{background-color:#596973;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .inProgress,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .inProgress{background-color:#3c3cf0;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .registered,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .registered{background-color:#5a1496;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .archived,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .archived{background-color:#fbb62c;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .closed,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .closed{background-color:#00dca5;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .approved,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .approved{background-color:var(--green-600, #06a57e);color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .assigned,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .assigned{background-color:#fd6670;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .sent,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .sent{background-color:#3c3cf0;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_revision,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_revision{background:#689be7;color:#e9f1fd}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .rejected,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .rejected{background-color:#fd6670;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_sign,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_sign{background-color:#dda722;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirectSelection,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirectSelection{background-color:#28b994;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirect,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirect{background-color:#e38888;color:var(--white, #fff)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Incoming,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Incoming{color:#00dca5}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Outgoing,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Outgoing{color:#fbb62c}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Internal,.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.internal,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Internal,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.internal{color:#3c3cf0}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper{width:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi{font-size:25px;cursor:pointer;color:#465573;margin:0 5px!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi:hover,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi:hover{color:var(--blue, #2e62df)!important;font-size:26px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button{display:flex;color:#5171a6;font-size:16px;height:45px;align-items:center;padding:0 10px;width:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button i,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button i{font-size:20px;padding:0;display:flex;align-items:center}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button .action-text,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button .action-text{padding:0 5px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button:hover,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button:hover{background-color:#e6ebf2}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper{width:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper .bi,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper .bi{font-size:25px;cursor:not-allowed;color:#465573;margin:0 5px!important;opacity:.7}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper:nth-child(2n){background-color:var(--even-row-background, #f4f6f8)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper:hover{background-color:var(--even-row-hover-background, #eef1f5)}.ngx-datatable div.datatable-row-left{order:1;margin-inline-start:auto;inset-inline:var(--datatable-row-left-inline, 0 auto);position:var(--datatable-row-left-position, sticky)!important}.ngx-datatable div.datatable-row-left .datatable-body-cell{overflow:hidden;background:var(--table-options-body-cell-color, #fff)}.ngx-datatable div.datatable-row-left .datatable-header-cell{overflow:hidden;background:var(--table-options-header-cell-color, #fff)}.iner-table-container{max-width:var(--table-container-max-width, 100%)}.rtl .ngx-datatable .datatable-body .status-wrapper .fav-icon-indicator{left:-10px;top:15px!important;right:auto!important}.cards-container{display:flex;flex-wrap:wrap;justify-content:center}.cards-container .single-card{padding-inline:var(--tbl-card-inline-padding, 1rem);padding-block:var(--tbl-card-block-padding, 1rem);margin-inline:var(--tbl-card-inline-margin, 5px);margin-block:var(--tbl-card-block-margin, 0px 10px);min-width:var(--tbl-card-min-width, 250px);width:var(--tbl-card-width, 24%);background:var(--tbl-card-background, #fff);border:var(--tbl-card-border, 1px solid rgba(180, 186, 198, .2));border-radius:var(--tbl-card-radius, 4px);box-shadow:var(--tbl-card-shadow, 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12));cursor:pointer}.cards-container .single-card .memo-title{font-size:14px;font-weight:700;color:#465573;border-bottom:1px solid lightgray;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}.cards-container .single-card .memo-title .action-wrap .action{margin:0 5px;cursor:pointer}.cards-container .single-card .memo-title .action-wrap .action i{font-size:16px}.cards-container .single-card .memo-title .action-wrap .action i:hover{color:#00f}.cards-container .single-card .memo-title .action-wrap .publish-state{font-size:12px;color:#00dca5;font-weight:700}.cards-container .single-card .memo-title .action-wrap button{border:none;color:#465573;background-color:transparent}.cards-container .single-card .memo-title .action-wrap button i{font-size:16px}.cards-container .single-card .memo-title .action-wrap button i:hover{color:#00f}.cards-container .single-card .memo-body{display:flex;padding:0 10px}.cards-container .single-card .memo-body .key{width:50%;font-size:12px;color:#9aa4ac}.cards-container .single-card .memo-body .value{width:50%;font-size:12px}.cards-container .single-card .memo-body .value .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cards-container .single-card:hover{background-color:#f6f7f8}.cards-container .single-card:focus{background-color:#f6f7f8}.cards-container .selected-card{background-color:#f6f7f8}.dynamic-cards-container{display:flex;flex-wrap:wrap;justify-content:center}.dynamic-cards-container .single-card{padding:15px;border:1px solid rgba(180,186,198,.2);border-radius:3px;min-width:306px;width:24%;margin:0 5px 10px;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;cursor:pointer}.dynamic-cards-container .single-card .memo-title{font-size:14px;font-weight:700;color:#465573;border-bottom:1px solid lightgray;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}.dynamic-cards-container .single-card .memo-title .action-wrap .action{cursor:pointer}.dynamic-cards-container .single-card .memo-title .action-wrap .action i{font-size:16px}.dynamic-cards-container .single-card .memo-title .action-wrap .action i:hover{color:#00f}.dynamic-cards-container .single-card .memo-title .action-wrap .publish-state{font-size:12px;color:#00dca5;font-weight:700}.dynamic-cards-container .single-card .memo-title .action-wrap button{border:none;color:#465573;background-color:transparent}.dynamic-cards-container .single-card .memo-title .action-wrap button i{font-size:16px}.dynamic-cards-container .single-card .memo-title .action-wrap button i:hover{color:#00f}.dynamic-cards-container .single-card .memo-body{display:flex;padding:0 10px}.dynamic-cards-container .single-card .memo-body .key{width:58%;font-size:12px;color:#9aa4ac;margin-bottom:4px}.dynamic-cards-container .single-card .memo-body .value{width:58%;font-size:12px}.dynamic-cards-container .single-card .memo-body .value .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dynamic-cards-container .single-card .memo-body .draft{background-color:#596973;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .inProgress{background-color:#3c3cf0;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .registered{background-color:#5a1496;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .archived{background-color:#fbb62c;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .closed{background-color:#00dca5;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .approved{background-color:var(--green-600, #06a57e);color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .assigned{background-color:#fd6670;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .sent{background-color:#3c3cf0;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .under_revision{background:#689be7;color:#e9f1fd;text-align:center}.dynamic-cards-container .single-card .memo-body .rejected{background-color:#fd6670;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card .memo-body .under_sign{background-color:#dda722;color:var(--white, #fff);text-align:center}.dynamic-cards-container .single-card:hover{background-color:#f6f7f8}.dynamic-cards-container .single-card:focus{background-color:#f6f7f8}.dynamic-cards-container .selected-card{background-color:#f6f7f8}.overflowVisible{overflow:visible!important}.table-custom-view{display:var(--tcv-display, grid);grid-template-columns:var(--tcv-display-columns, repeat(var(--tcv-columns-count, auto-fit), minmax(350px, 1fr)));gap:var(--tcv-gap, 1rem);padding-inline:var(--tcv-padding-inline, 1rem);padding-block:var(--tcv-padding-block, 1rem)}.actions-wrapper i{font-size:var(--table-options-font-size, 2rem)!important}\n"] }]
         }], ctorParameters: () => [{ type: NuxeoService }, { type: AppConfigService }, { type: TranslationService }, { type: i0.ChangeDetectorRef }, { type: i0.DestroyRef }, { type: EvaluatorsService }], propDecorators: { dataTable: [{
                 type: ViewChild,
                 args: [DatatableComponent]
@@ -16543,6 +16543,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Input
             }], messages: [{
                 type: Input
+            }], rowClass: [{
+                type: Input
             }], defaultColumnSize: [{
                 type: Input
             }], selectionModel: [{
@@ -22621,14 +22623,14 @@ class DynamicTableComponent {
         this.onMultiRowSelected.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicTableComponent, deps: [{ token: AdapterService }, { token: CallApiService }, { token: DynamicTableService }, { token: TableHooksService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: DynamicTableComponent, isStandalone: false, selector: "cts-dynamic-table", inputs: { columns: "columns", responsiveColumns: "responsiveColumns", entityType: "entityType", prefix: "prefix", headers: "headers", fields: "fields", pageProvider: "pageProvider", pageSize: "pageSize", columnMode: "columnMode", isLegacyMode: "isLegacyMode", showTotalRecord: "showTotalRecord", selectedRowsKeys: "selectedRowsKeys", paginationCustomTemplate: "paginationCustomTemplate", pageNumber: "pageNumber", sortingBy: "sortingBy", queryParam: "queryParam", customFilters: "customFilters", quickFilter: "quickFilter", report: "report", rowCursor: "rowCursor", fullWidth: "fullWidth", tableMode: "tableMode", componentName: "componentName", tableActions: "tableActions", defultSort: "defultSort", range: "range", isSearchPage: "isSearchPage", multiSelectRows: "multiSelectRows", singleSelectRow: "singleSelectRow", rowCheckboxPermission: "rowCheckboxPermission", customFirstRow: "customFirstRow", highlightSelectedCard: "highlightSelectedCard", showActionsAsMenu: "showActionsAsMenu", filterParams: "filterParams", skipAggregation: "skipAggregation", customUrl: "customUrl", format: "format", requestActions: "requestActions", pageSizes: "pageSizes" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", actionOnRow: "actionOnRow", onGettingData: "onGettingData", onMultiRowSelected: "onMultiRowSelected", onLoading: "onLoading", sortChanged: "sortChanged", onPageChange: "onPageChange", onPage: "onPage", onLoad: "onLoad", onInitialize: "onInitialize" }, host: { properties: { "class.loading-results": "loading", "class.no-data": "rows.length <= 0" } }, queries: [{ propertyName: "emptyTemplate", first: true, predicate: EMPTY_TEMPLATE, descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"wrapping table-wrapping\">\r\n\t<ng-container *ngIf=\"isLegacyMode\">\r\n\t\t<div class=\"table-reposition\">\r\n\t\t\t<ng-container *ngIf=\"rows.length\" [ngTemplateOutlet]=\"table\"></ng-container>\r\n\t\t</div>\r\n\t\t<ng-container *ngIf=\"loading\">\r\n\t\t\t<cts-spinner></cts-spinner>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n\r\n\t<div class=\"table-reposition\" *ngIf=\"!isLegacyMode\">\r\n\t\t<ng-container *ngIf=\"rows.length\" [ngTemplateOutlet]=\"table\"></ng-container>\r\n\t\t<ng-container\r\n\t\t\t*ngIf=\"!initialized && tableMode == 'list'\"\r\n\t\t\t[ngTemplateOutlet]=\"skeleton\"\r\n\t\t\t[ngTemplateOutletContext]=\"{ $implicit: 10 }\"\r\n\t\t></ng-container>\r\n\t</div>\r\n\r\n\t<div class=\"pagination-iner-wraper my-3\" [ngClass]=\"{ 'relative min-h-10': pageSizes?.length }\" *ngIf=\"rows.length\">\r\n\t\t<ng-container\r\n\t\t\t[ngTemplateOutlet]=\"paginationCustomTemplate || paginationDefaultTemplate\"\r\n\t\t\t[ngTemplateOutletContext]=\"{\r\n\t\t\t\t$implicit: pageSize,\r\n\t\t\t\ttotalRecords: totalRecords,\r\n\t\t\t\tpageNum: pageNum,\r\n\t\t\t\tpaginationChange: paginationChange,\r\n\t\t\t\tpageSizes: pageSizes,\r\n\t\t\t\tonChangePageSize: onChangePageSize,\r\n\t\t\t\tshowTotalRecord: showTotalRecord\r\n\t\t\t}\"\r\n\t\t></ng-container>\r\n\t</div>\r\n\r\n\t<ng-container\r\n\t\t*ngIf=\"isLegacyMode\"\r\n\t\t[ngTemplateOutlet]=\"emptyTemplate || legacyDefaultEmptyState\"\r\n\t\t[ngTemplateOutletContext]=\"{\r\n\t\t\t$implicit: loading,\r\n\t\t\trows: rows,\r\n\t\t\tinitialized: initialized\r\n\t\t}\"\r\n\t></ng-container>\r\n\r\n\t<ng-container\r\n\t\t*ngIf=\"!isLegacyMode\"\r\n\t\t[ngTemplateOutlet]=\"emptyTemplate || defaultEmptyState\"\r\n\t\t[ngTemplateOutletContext]=\"{\r\n\t\t\t$implicit: loading,\r\n\t\t\trows: rows,\r\n\t\t\tinitialized: initialized\r\n\t\t}\"\r\n\t></ng-container>\r\n</div>\r\n\r\n<ng-template #table>\r\n\t<cts-table\r\n\t\t[rows]=\"rows\"\r\n\t\t[selectedRowsKeys]=\"selectedRowsKeys\"\r\n\t\t[columns]=\"columns\"\r\n\t\t[responsiveColumns]=\"responsiveColumns\"\r\n\t\t[rowCursor]=\"rowCursor\"\r\n\t\t[fullWidth]=\"fullWidth\"\r\n\t\t[entityType]=\"entityType\"\r\n\t\t[prefix]=\"prefix\"\r\n\t\t[totalRecords]=\"totalRecords\"\r\n\t\t[tableMode]=\"tableMode\"\r\n\t\t[componentName]=\"componentName\"\r\n\t\t[multiSelectRows]=\"multiSelectRows\"\r\n\t\t[singleSelectRow]=\"singleSelectRow\"\r\n    [rowCheckboxPermission]=\"rowCheckboxPermission\"\r\n\t\t[tableActions]=\"tableActions\"\r\n\t\t[showActionsAsMenu]=\"showActionsAsMenu\"\r\n\t\t[defultSort]=\"defultSort\"\r\n\t\t[format]=\"format\"\r\n\t\t[highlightSelectedCard]=\"highlightSelectedCard\"\r\n\t\t[columnMode]=\"columnMode\"\r\n\t\t[customFirstRow]=\"customFirstRow\"\r\n\t\t(onRowSelected)=\"rowDetails($event)\"\r\n\t\t(onRowIndexSelected)=\"indexDetails($event)\"\r\n\t\t(onMultiRowSelected)=\"onMultiRowSelectValue($event)\"\r\n\t\t(actionOnRow)=\"performAction($event)\"\r\n\t\t(onSorting)=\"onSort($event)\"\r\n\t></cts-table>\r\n</ng-template>\r\n\r\n<ng-template #legacyDefaultEmptyState>\r\n\t<div class=\"empty-state\" *ngIf=\"!loading && rows.length === 0\">\r\n\t\t<div class=\"text\">\r\n\t\t\t{{ (prefix ? prefix + 'noData' : 'noData') | translate }}\r\n\t\t</div>\r\n\t</div>\r\n\t<div class=\"empty-state\" *ngIf=\"loading && rows.length === 0\">\r\n\t\t<div class=\"text\">\r\n\t\t\t{{ (prefix ? prefix + 'gettingData' : 'gettingData') | translate }}\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #defaultEmptyState>\r\n\t<div class=\"empty-state\" *ngIf=\"!loading && rows.length === 0\">\r\n\t\t<div class=\"text\">\r\n\t\t\t{{ (prefix ? prefix + 'noData' : 'noData') | translate }}\r\n\t\t</div>\r\n\t</div>\r\n\t<div *ngIf=\"loading && initialized\" class=\"loading-content\">\r\n\t\t<mat-spinner [diameter]=\"100\"></mat-spinner>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #skeleton let-rows>\r\n\t<table class=\"w-full\">\r\n\t\t<thead *ngIf=\"false\">\r\n\t\t\t<tr class=\"border-b border-green-900\">\r\n\t\t\t\t<th *ngIf=\"multiSelectRows\" class=\"p-3 py-4\" style=\"width: 60px\">\r\n\t\t\t\t\t<app-skeleton width=\"60px\" height=\"1.3rem\"></app-skeleton>\r\n\t\t\t\t</th>\r\n\t\t\t\t<th *ngFor=\"let num of [].constructor(columns?.length || 4); let i = index\" class=\"px-3 py-4\">\r\n\t\t\t\t\t<app-skeleton [randomWidth]=\"true\" height=\"1.7rem\"></app-skeleton>\r\n\t\t\t\t</th>\r\n\t\t\t</tr>\r\n\t\t</thead>\r\n\t\t<tbody>\r\n\t\t\t<tr *ngFor=\"let row of [].constructor(rows || 10); let index = index\" class=\"border-b border-gray-200\">\r\n\t\t\t\t<td *ngIf=\"multiSelectRows\" class=\"p-3 py-4\" style=\"width: 50px\">\r\n\t\t\t\t\t<app-skeleton width=\"50px\" height=\"1.3rem\"></app-skeleton>\r\n\t\t\t\t</td>\r\n\t\t\t\t<td *ngFor=\"let col of [].constructor(columns?.length || 4); let i = index\" class=\"p-3 py-4\">\r\n\t\t\t\t\t<app-skeleton [randomWidth]=\"true\" height=\"1.3rem\"></app-skeleton>\r\n\t\t\t\t</td>\r\n\t\t\t</tr>\r\n\t\t</tbody>\r\n\t</table>\r\n</ng-template>\r\n\r\n<ng-template #paginationDefaultTemplate>\r\n\t<cts-pagination\r\n\t\t*ngIf=\"totalRecords > pageSize\"\r\n\t\t[page]=\"pageNum\"\r\n\t\t(change)=\"paginationChange($event)\"\r\n\t\t[size]=\"pageSize\"\r\n\t\t[count]=\"totalRecords\"\r\n\t></cts-pagination>\r\n\t<div class=\"absolute ndfPageSizes flex gap-x-3 items-center mt-2\">\r\n\t\t<ndf-page-sizes-list\r\n\t\t\t*ngIf=\"pageSizes?.length\"\r\n\t\t\t[pageSizes]=\"pageSizes\"\r\n\t\t\t[selectedPageSize]=\"pageSize\"\r\n\t\t\t(onChangePageSize)=\"onChangePageSize($event)\"\r\n\t\t>\r\n\t\t</ndf-page-sizes-list>\r\n\r\n\t\t<span *ngIf=\"showTotalRecord\">{{ 'TABLE.totalRecords' | translate: { count: totalRecords } }}</span>\r\n\t</div>\r\n</ng-template>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:700;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming,.my-dynamic-viewer .direction-img .outgoing,.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label,.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.wrapping{position:relative}.wrapping .table-reposition{overflow-y:var(--table-reposition-overflow-y, hidden);scrollbar-color:#b4bac6 transparent!important;scrollbar-width:thin!important;overflow-x:hidden;max-height:var(--table-reposition-max-height)}.empty-state{padding:200px;display:flex;justify-content:center;align-items:center;font-size:20px;font-weight:700}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#b4bac6}.dark-scroll::-webkit-scrollbar-thumb{background:#8f98aa}.ndfPageSizes{right:0;left:unset}.rtl .ndfPageSizes{right:unset;left:0}.loading-content{position:var(--loading-content-position, absolute);inset:0;display:grid;place-items:center;background:var(--loading-content-background, rgba(255, 255, 255, .2));backdrop-filter:var(--loading-content-backdrop-filter, blur(3px))}.pagination-iner-wraper{display:var(--pagination-inner-display, flex);justify-content:var(--pagination-inner-justify, center);align-items:var(--pagination-inner-align, center)}\n"], dependencies: [{ kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TableComponent, selector: "cts-table", inputs: ["rows", "selectionKey", "selectedRowsKeys", "columns", "responsiveColumns", "entityType", "prefix", "pageCount", "totalRecords", "rowCursor", "fullWidth", "vocItemTranslationPrefix", "tableMode", "componentName", "columnMode", "tableActions", "format", "defultSort", "highlightSelectedCard", "multiSelectRows", "singleSelectRow", "rowCheckboxPermission", "customFirstRow", "showActionsAsMenu", "messages", "defaultColumnSize", "selectionModel"], outputs: ["onRowSelected", "onRowIndexSelected", "onIconSelected", "actionOnRow", "onSorting", "onMultiRowSelected"] }, { kind: "component", type: PageSizesListComponent, selector: "ndf-page-sizes-list", inputs: ["pageSizes", "selectedPageSize"], outputs: ["onChangePageSize"] }, { kind: "component", type: PaginationComponent, selector: "cts-pagination", inputs: ["size", "count", "page"], outputs: ["change"] }, { kind: "component", type: SpinnerComponent, selector: "cts-spinner" }, { kind: "component", type: SkeletonComponent, selector: "app-skeleton", inputs: ["styleClass", "style", "shape", "animation", "radius", "size", "width", "height", "randomWidth"] }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: DynamicTableComponent, isStandalone: false, selector: "cts-dynamic-table", inputs: { columns: "columns", responsiveColumns: "responsiveColumns", entityType: "entityType", prefix: "prefix", headers: "headers", fields: "fields", pageProvider: "pageProvider", pageSize: "pageSize", columnMode: "columnMode", isLegacyMode: "isLegacyMode", showTotalRecord: "showTotalRecord", selectedRowsKeys: "selectedRowsKeys", paginationCustomTemplate: "paginationCustomTemplate", pageNumber: "pageNumber", sortingBy: "sortingBy", queryParam: "queryParam", customFilters: "customFilters", quickFilter: "quickFilter", report: "report", rowCursor: "rowCursor", fullWidth: "fullWidth", tableMode: "tableMode", componentName: "componentName", tableActions: "tableActions", defultSort: "defultSort", range: "range", isSearchPage: "isSearchPage", multiSelectRows: "multiSelectRows", singleSelectRow: "singleSelectRow", rowCheckboxPermission: "rowCheckboxPermission", customFirstRow: "customFirstRow", highlightSelectedCard: "highlightSelectedCard", showActionsAsMenu: "showActionsAsMenu", filterParams: "filterParams", skipAggregation: "skipAggregation", customUrl: "customUrl", format: "format", requestActions: "requestActions", pageSizes: "pageSizes", rowClass: "rowClass" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", actionOnRow: "actionOnRow", onGettingData: "onGettingData", onMultiRowSelected: "onMultiRowSelected", onLoading: "onLoading", sortChanged: "sortChanged", onPageChange: "onPageChange", onPage: "onPage", onLoad: "onLoad", onInitialize: "onInitialize" }, host: { properties: { "class.loading-results": "loading", "class.no-data": "rows.length <= 0" } }, queries: [{ propertyName: "emptyTemplate", first: true, predicate: EMPTY_TEMPLATE, descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"wrapping table-wrapping\">\r\n\t<ng-container *ngIf=\"isLegacyMode\">\r\n\t\t<div class=\"table-reposition\">\r\n\t\t\t<ng-container *ngIf=\"rows.length\" [ngTemplateOutlet]=\"table\"></ng-container>\r\n\t\t</div>\r\n\t\t<ng-container *ngIf=\"loading\">\r\n\t\t\t<cts-spinner></cts-spinner>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n\r\n\t<div class=\"table-reposition\" *ngIf=\"!isLegacyMode\">\r\n\t\t<ng-container *ngIf=\"rows.length\" [ngTemplateOutlet]=\"table\"></ng-container>\r\n\t\t<ng-container\r\n\t\t\t*ngIf=\"!initialized && tableMode == 'list'\"\r\n\t\t\t[ngTemplateOutlet]=\"skeleton\"\r\n\t\t\t[ngTemplateOutletContext]=\"{ $implicit: 10 }\"\r\n\t\t></ng-container>\r\n\t</div>\r\n\r\n\t<div class=\"pagination-iner-wraper my-3\" [ngClass]=\"{ 'relative min-h-10': pageSizes?.length }\" *ngIf=\"rows.length\">\r\n\t\t<ng-container\r\n\t\t\t[ngTemplateOutlet]=\"paginationCustomTemplate || paginationDefaultTemplate\"\r\n\t\t\t[ngTemplateOutletContext]=\"{\r\n\t\t\t\t$implicit: pageSize,\r\n\t\t\t\ttotalRecords: totalRecords,\r\n\t\t\t\tpageNum: pageNum,\r\n\t\t\t\tpaginationChange: paginationChange,\r\n\t\t\t\tpageSizes: pageSizes,\r\n\t\t\t\tonChangePageSize: onChangePageSize,\r\n\t\t\t\tshowTotalRecord: showTotalRecord\r\n\t\t\t}\"\r\n\t\t></ng-container>\r\n\t</div>\r\n\r\n\t<ng-container\r\n\t\t*ngIf=\"isLegacyMode\"\r\n\t\t[ngTemplateOutlet]=\"emptyTemplate || legacyDefaultEmptyState\"\r\n\t\t[ngTemplateOutletContext]=\"{\r\n\t\t\t$implicit: loading,\r\n\t\t\trows: rows,\r\n\t\t\tinitialized: initialized\r\n\t\t}\"\r\n\t></ng-container>\r\n\r\n\t<ng-container\r\n\t\t*ngIf=\"!isLegacyMode\"\r\n\t\t[ngTemplateOutlet]=\"emptyTemplate || defaultEmptyState\"\r\n\t\t[ngTemplateOutletContext]=\"{\r\n\t\t\t$implicit: loading,\r\n\t\t\trows: rows,\r\n\t\t\tinitialized: initialized\r\n\t\t}\"\r\n\t></ng-container>\r\n</div>\r\n\r\n<ng-template #table>\r\n\t<cts-table\r\n\t\t[rows]=\"rows\"\r\n\t\t[selectedRowsKeys]=\"selectedRowsKeys\"\r\n\t\t[columns]=\"columns\"\r\n\t\t[responsiveColumns]=\"responsiveColumns\"\r\n\t\t[rowCursor]=\"rowCursor\"\r\n\t\t[fullWidth]=\"fullWidth\"\r\n\t\t[entityType]=\"entityType\"\r\n\t\t[prefix]=\"prefix\"\r\n\t\t[totalRecords]=\"totalRecords\"\r\n\t\t[tableMode]=\"tableMode\"\r\n\t\t[componentName]=\"componentName\"\r\n\t\t[multiSelectRows]=\"multiSelectRows\"\r\n\t\t[singleSelectRow]=\"singleSelectRow\"\r\n    [rowCheckboxPermission]=\"rowCheckboxPermission\"\r\n\t\t[tableActions]=\"tableActions\"\r\n\t\t[showActionsAsMenu]=\"showActionsAsMenu\"\r\n\t\t[defultSort]=\"defultSort\"\r\n\t\t[format]=\"format\"\r\n\t\t[rowClass]=\"rowClass\"\r\n\t\t[highlightSelectedCard]=\"highlightSelectedCard\"\r\n\t\t[columnMode]=\"columnMode\"\r\n\t\t[customFirstRow]=\"customFirstRow\"\r\n\t\t(onRowSelected)=\"rowDetails($event)\"\r\n\t\t(onRowIndexSelected)=\"indexDetails($event)\"\r\n\t\t(onMultiRowSelected)=\"onMultiRowSelectValue($event)\"\r\n\t\t(actionOnRow)=\"performAction($event)\"\r\n\t\t(onSorting)=\"onSort($event)\"\r\n\t></cts-table>\r\n</ng-template>\r\n\r\n<ng-template #legacyDefaultEmptyState>\r\n\t<div class=\"empty-state\" *ngIf=\"!loading && rows.length === 0\">\r\n\t\t<div class=\"text\">\r\n\t\t\t{{ (prefix ? prefix + 'noData' : 'noData') | translate }}\r\n\t\t</div>\r\n\t</div>\r\n\t<div class=\"empty-state\" *ngIf=\"loading && rows.length === 0\">\r\n\t\t<div class=\"text\">\r\n\t\t\t{{ (prefix ? prefix + 'gettingData' : 'gettingData') | translate }}\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #defaultEmptyState>\r\n\t<div class=\"empty-state\" *ngIf=\"!loading && rows.length === 0\">\r\n\t\t<div class=\"text\">\r\n\t\t\t{{ (prefix ? prefix + 'noData' : 'noData') | translate }}\r\n\t\t</div>\r\n\t</div>\r\n\t<div *ngIf=\"loading && initialized\" class=\"loading-content\">\r\n\t\t<mat-spinner [diameter]=\"100\"></mat-spinner>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #skeleton let-rows>\r\n\t<table class=\"w-full\">\r\n\t\t<thead *ngIf=\"false\">\r\n\t\t\t<tr class=\"border-b border-green-900\">\r\n\t\t\t\t<th *ngIf=\"multiSelectRows\" class=\"p-3 py-4\" style=\"width: 60px\">\r\n\t\t\t\t\t<app-skeleton width=\"60px\" height=\"1.3rem\"></app-skeleton>\r\n\t\t\t\t</th>\r\n\t\t\t\t<th *ngFor=\"let num of [].constructor(columns?.length || 4); let i = index\" class=\"px-3 py-4\">\r\n\t\t\t\t\t<app-skeleton [randomWidth]=\"true\" height=\"1.7rem\"></app-skeleton>\r\n\t\t\t\t</th>\r\n\t\t\t</tr>\r\n\t\t</thead>\r\n\t\t<tbody>\r\n\t\t\t<tr *ngFor=\"let row of [].constructor(rows || 10); let index = index\" class=\"border-b border-gray-200\">\r\n\t\t\t\t<td *ngIf=\"multiSelectRows\" class=\"p-3 py-4\" style=\"width: 50px\">\r\n\t\t\t\t\t<app-skeleton width=\"50px\" height=\"1.3rem\"></app-skeleton>\r\n\t\t\t\t</td>\r\n\t\t\t\t<td *ngFor=\"let col of [].constructor(columns?.length || 4); let i = index\" class=\"p-3 py-4\">\r\n\t\t\t\t\t<app-skeleton [randomWidth]=\"true\" height=\"1.3rem\"></app-skeleton>\r\n\t\t\t\t</td>\r\n\t\t\t</tr>\r\n\t\t</tbody>\r\n\t</table>\r\n</ng-template>\r\n\r\n<ng-template #paginationDefaultTemplate>\r\n\t<cts-pagination\r\n\t\t*ngIf=\"totalRecords > pageSize\"\r\n\t\t[page]=\"pageNum\"\r\n\t\t(change)=\"paginationChange($event)\"\r\n\t\t[size]=\"pageSize\"\r\n\t\t[count]=\"totalRecords\"\r\n\t></cts-pagination>\r\n\t<div class=\"absolute ndfPageSizes flex gap-x-3 items-center mt-2\">\r\n\t\t<ndf-page-sizes-list\r\n\t\t\t*ngIf=\"pageSizes?.length\"\r\n\t\t\t[pageSizes]=\"pageSizes\"\r\n\t\t\t[selectedPageSize]=\"pageSize\"\r\n\t\t\t(onChangePageSize)=\"onChangePageSize($event)\"\r\n\t\t>\r\n\t\t</ndf-page-sizes-list>\r\n\r\n\t\t<span *ngIf=\"showTotalRecord\">{{ 'TABLE.totalRecords' | translate: { count: totalRecords } }}</span>\r\n\t</div>\r\n</ng-template>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:700;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming,.my-dynamic-viewer .direction-img .outgoing,.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label,.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.wrapping{position:relative}.wrapping .table-reposition{overflow-y:var(--table-reposition-overflow-y, hidden);scrollbar-color:#b4bac6 transparent!important;scrollbar-width:thin!important;overflow-x:hidden;max-height:var(--table-reposition-max-height)}.empty-state{padding:200px;display:flex;justify-content:center;align-items:center;font-size:20px;font-weight:700}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#b4bac6}.dark-scroll::-webkit-scrollbar-thumb{background:#8f98aa}.ndfPageSizes{right:0;left:unset}.rtl .ndfPageSizes{right:unset;left:0}.loading-content{position:var(--loading-content-position, absolute);inset:0;display:grid;place-items:center;background:var(--loading-content-background, rgba(255, 255, 255, .2));backdrop-filter:var(--loading-content-backdrop-filter, blur(3px))}.pagination-iner-wraper{display:var(--pagination-inner-display, flex);justify-content:var(--pagination-inner-justify, center);align-items:var(--pagination-inner-align, center)}\n"], dependencies: [{ kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TableComponent, selector: "cts-table", inputs: ["rows", "selectionKey", "selectedRowsKeys", "columns", "responsiveColumns", "entityType", "prefix", "pageCount", "totalRecords", "rowCursor", "fullWidth", "vocItemTranslationPrefix", "tableMode", "componentName", "columnMode", "tableActions", "format", "defultSort", "highlightSelectedCard", "multiSelectRows", "singleSelectRow", "rowCheckboxPermission", "customFirstRow", "showActionsAsMenu", "messages", "rowClass", "defaultColumnSize", "selectionModel"], outputs: ["onRowSelected", "onRowIndexSelected", "onIconSelected", "actionOnRow", "onSorting", "onMultiRowSelected"] }, { kind: "component", type: PageSizesListComponent, selector: "ndf-page-sizes-list", inputs: ["pageSizes", "selectedPageSize"], outputs: ["onChangePageSize"] }, { kind: "component", type: PaginationComponent, selector: "cts-pagination", inputs: ["size", "count", "page"], outputs: ["change"] }, { kind: "component", type: SpinnerComponent, selector: "cts-spinner" }, { kind: "component", type: SkeletonComponent, selector: "app-skeleton", inputs: ["styleClass", "style", "shape", "animation", "radius", "size", "width", "height", "randomWidth"] }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cts-dynamic-table', encapsulation: ViewEncapsulation.None, host: {
                         '[class.loading-results]': 'loading',
                         '[class.no-data]': 'rows.length <= 0',
-                    }, standalone: false, template: "<div class=\"wrapping table-wrapping\">\r\n\t<ng-container *ngIf=\"isLegacyMode\">\r\n\t\t<div class=\"table-reposition\">\r\n\t\t\t<ng-container *ngIf=\"rows.length\" [ngTemplateOutlet]=\"table\"></ng-container>\r\n\t\t</div>\r\n\t\t<ng-container *ngIf=\"loading\">\r\n\t\t\t<cts-spinner></cts-spinner>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n\r\n\t<div class=\"table-reposition\" *ngIf=\"!isLegacyMode\">\r\n\t\t<ng-container *ngIf=\"rows.length\" [ngTemplateOutlet]=\"table\"></ng-container>\r\n\t\t<ng-container\r\n\t\t\t*ngIf=\"!initialized && tableMode == 'list'\"\r\n\t\t\t[ngTemplateOutlet]=\"skeleton\"\r\n\t\t\t[ngTemplateOutletContext]=\"{ $implicit: 10 }\"\r\n\t\t></ng-container>\r\n\t</div>\r\n\r\n\t<div class=\"pagination-iner-wraper my-3\" [ngClass]=\"{ 'relative min-h-10': pageSizes?.length }\" *ngIf=\"rows.length\">\r\n\t\t<ng-container\r\n\t\t\t[ngTemplateOutlet]=\"paginationCustomTemplate || paginationDefaultTemplate\"\r\n\t\t\t[ngTemplateOutletContext]=\"{\r\n\t\t\t\t$implicit: pageSize,\r\n\t\t\t\ttotalRecords: totalRecords,\r\n\t\t\t\tpageNum: pageNum,\r\n\t\t\t\tpaginationChange: paginationChange,\r\n\t\t\t\tpageSizes: pageSizes,\r\n\t\t\t\tonChangePageSize: onChangePageSize,\r\n\t\t\t\tshowTotalRecord: showTotalRecord\r\n\t\t\t}\"\r\n\t\t></ng-container>\r\n\t</div>\r\n\r\n\t<ng-container\r\n\t\t*ngIf=\"isLegacyMode\"\r\n\t\t[ngTemplateOutlet]=\"emptyTemplate || legacyDefaultEmptyState\"\r\n\t\t[ngTemplateOutletContext]=\"{\r\n\t\t\t$implicit: loading,\r\n\t\t\trows: rows,\r\n\t\t\tinitialized: initialized\r\n\t\t}\"\r\n\t></ng-container>\r\n\r\n\t<ng-container\r\n\t\t*ngIf=\"!isLegacyMode\"\r\n\t\t[ngTemplateOutlet]=\"emptyTemplate || defaultEmptyState\"\r\n\t\t[ngTemplateOutletContext]=\"{\r\n\t\t\t$implicit: loading,\r\n\t\t\trows: rows,\r\n\t\t\tinitialized: initialized\r\n\t\t}\"\r\n\t></ng-container>\r\n</div>\r\n\r\n<ng-template #table>\r\n\t<cts-table\r\n\t\t[rows]=\"rows\"\r\n\t\t[selectedRowsKeys]=\"selectedRowsKeys\"\r\n\t\t[columns]=\"columns\"\r\n\t\t[responsiveColumns]=\"responsiveColumns\"\r\n\t\t[rowCursor]=\"rowCursor\"\r\n\t\t[fullWidth]=\"fullWidth\"\r\n\t\t[entityType]=\"entityType\"\r\n\t\t[prefix]=\"prefix\"\r\n\t\t[totalRecords]=\"totalRecords\"\r\n\t\t[tableMode]=\"tableMode\"\r\n\t\t[componentName]=\"componentName\"\r\n\t\t[multiSelectRows]=\"multiSelectRows\"\r\n\t\t[singleSelectRow]=\"singleSelectRow\"\r\n    [rowCheckboxPermission]=\"rowCheckboxPermission\"\r\n\t\t[tableActions]=\"tableActions\"\r\n\t\t[showActionsAsMenu]=\"showActionsAsMenu\"\r\n\t\t[defultSort]=\"defultSort\"\r\n\t\t[format]=\"format\"\r\n\t\t[highlightSelectedCard]=\"highlightSelectedCard\"\r\n\t\t[columnMode]=\"columnMode\"\r\n\t\t[customFirstRow]=\"customFirstRow\"\r\n\t\t(onRowSelected)=\"rowDetails($event)\"\r\n\t\t(onRowIndexSelected)=\"indexDetails($event)\"\r\n\t\t(onMultiRowSelected)=\"onMultiRowSelectValue($event)\"\r\n\t\t(actionOnRow)=\"performAction($event)\"\r\n\t\t(onSorting)=\"onSort($event)\"\r\n\t></cts-table>\r\n</ng-template>\r\n\r\n<ng-template #legacyDefaultEmptyState>\r\n\t<div class=\"empty-state\" *ngIf=\"!loading && rows.length === 0\">\r\n\t\t<div class=\"text\">\r\n\t\t\t{{ (prefix ? prefix + 'noData' : 'noData') | translate }}\r\n\t\t</div>\r\n\t</div>\r\n\t<div class=\"empty-state\" *ngIf=\"loading && rows.length === 0\">\r\n\t\t<div class=\"text\">\r\n\t\t\t{{ (prefix ? prefix + 'gettingData' : 'gettingData') | translate }}\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #defaultEmptyState>\r\n\t<div class=\"empty-state\" *ngIf=\"!loading && rows.length === 0\">\r\n\t\t<div class=\"text\">\r\n\t\t\t{{ (prefix ? prefix + 'noData' : 'noData') | translate }}\r\n\t\t</div>\r\n\t</div>\r\n\t<div *ngIf=\"loading && initialized\" class=\"loading-content\">\r\n\t\t<mat-spinner [diameter]=\"100\"></mat-spinner>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #skeleton let-rows>\r\n\t<table class=\"w-full\">\r\n\t\t<thead *ngIf=\"false\">\r\n\t\t\t<tr class=\"border-b border-green-900\">\r\n\t\t\t\t<th *ngIf=\"multiSelectRows\" class=\"p-3 py-4\" style=\"width: 60px\">\r\n\t\t\t\t\t<app-skeleton width=\"60px\" height=\"1.3rem\"></app-skeleton>\r\n\t\t\t\t</th>\r\n\t\t\t\t<th *ngFor=\"let num of [].constructor(columns?.length || 4); let i = index\" class=\"px-3 py-4\">\r\n\t\t\t\t\t<app-skeleton [randomWidth]=\"true\" height=\"1.7rem\"></app-skeleton>\r\n\t\t\t\t</th>\r\n\t\t\t</tr>\r\n\t\t</thead>\r\n\t\t<tbody>\r\n\t\t\t<tr *ngFor=\"let row of [].constructor(rows || 10); let index = index\" class=\"border-b border-gray-200\">\r\n\t\t\t\t<td *ngIf=\"multiSelectRows\" class=\"p-3 py-4\" style=\"width: 50px\">\r\n\t\t\t\t\t<app-skeleton width=\"50px\" height=\"1.3rem\"></app-skeleton>\r\n\t\t\t\t</td>\r\n\t\t\t\t<td *ngFor=\"let col of [].constructor(columns?.length || 4); let i = index\" class=\"p-3 py-4\">\r\n\t\t\t\t\t<app-skeleton [randomWidth]=\"true\" height=\"1.3rem\"></app-skeleton>\r\n\t\t\t\t</td>\r\n\t\t\t</tr>\r\n\t\t</tbody>\r\n\t</table>\r\n</ng-template>\r\n\r\n<ng-template #paginationDefaultTemplate>\r\n\t<cts-pagination\r\n\t\t*ngIf=\"totalRecords > pageSize\"\r\n\t\t[page]=\"pageNum\"\r\n\t\t(change)=\"paginationChange($event)\"\r\n\t\t[size]=\"pageSize\"\r\n\t\t[count]=\"totalRecords\"\r\n\t></cts-pagination>\r\n\t<div class=\"absolute ndfPageSizes flex gap-x-3 items-center mt-2\">\r\n\t\t<ndf-page-sizes-list\r\n\t\t\t*ngIf=\"pageSizes?.length\"\r\n\t\t\t[pageSizes]=\"pageSizes\"\r\n\t\t\t[selectedPageSize]=\"pageSize\"\r\n\t\t\t(onChangePageSize)=\"onChangePageSize($event)\"\r\n\t\t>\r\n\t\t</ndf-page-sizes-list>\r\n\r\n\t\t<span *ngIf=\"showTotalRecord\">{{ 'TABLE.totalRecords' | translate: { count: totalRecords } }}</span>\r\n\t</div>\r\n</ng-template>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:700;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming,.my-dynamic-viewer .direction-img .outgoing,.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label,.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.wrapping{position:relative}.wrapping .table-reposition{overflow-y:var(--table-reposition-overflow-y, hidden);scrollbar-color:#b4bac6 transparent!important;scrollbar-width:thin!important;overflow-x:hidden;max-height:var(--table-reposition-max-height)}.empty-state{padding:200px;display:flex;justify-content:center;align-items:center;font-size:20px;font-weight:700}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#b4bac6}.dark-scroll::-webkit-scrollbar-thumb{background:#8f98aa}.ndfPageSizes{right:0;left:unset}.rtl .ndfPageSizes{right:unset;left:0}.loading-content{position:var(--loading-content-position, absolute);inset:0;display:grid;place-items:center;background:var(--loading-content-background, rgba(255, 255, 255, .2));backdrop-filter:var(--loading-content-backdrop-filter, blur(3px))}.pagination-iner-wraper{display:var(--pagination-inner-display, flex);justify-content:var(--pagination-inner-justify, center);align-items:var(--pagination-inner-align, center)}\n"] }]
+                    }, standalone: false, template: "<div class=\"wrapping table-wrapping\">\r\n\t<ng-container *ngIf=\"isLegacyMode\">\r\n\t\t<div class=\"table-reposition\">\r\n\t\t\t<ng-container *ngIf=\"rows.length\" [ngTemplateOutlet]=\"table\"></ng-container>\r\n\t\t</div>\r\n\t\t<ng-container *ngIf=\"loading\">\r\n\t\t\t<cts-spinner></cts-spinner>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n\r\n\t<div class=\"table-reposition\" *ngIf=\"!isLegacyMode\">\r\n\t\t<ng-container *ngIf=\"rows.length\" [ngTemplateOutlet]=\"table\"></ng-container>\r\n\t\t<ng-container\r\n\t\t\t*ngIf=\"!initialized && tableMode == 'list'\"\r\n\t\t\t[ngTemplateOutlet]=\"skeleton\"\r\n\t\t\t[ngTemplateOutletContext]=\"{ $implicit: 10 }\"\r\n\t\t></ng-container>\r\n\t</div>\r\n\r\n\t<div class=\"pagination-iner-wraper my-3\" [ngClass]=\"{ 'relative min-h-10': pageSizes?.length }\" *ngIf=\"rows.length\">\r\n\t\t<ng-container\r\n\t\t\t[ngTemplateOutlet]=\"paginationCustomTemplate || paginationDefaultTemplate\"\r\n\t\t\t[ngTemplateOutletContext]=\"{\r\n\t\t\t\t$implicit: pageSize,\r\n\t\t\t\ttotalRecords: totalRecords,\r\n\t\t\t\tpageNum: pageNum,\r\n\t\t\t\tpaginationChange: paginationChange,\r\n\t\t\t\tpageSizes: pageSizes,\r\n\t\t\t\tonChangePageSize: onChangePageSize,\r\n\t\t\t\tshowTotalRecord: showTotalRecord\r\n\t\t\t}\"\r\n\t\t></ng-container>\r\n\t</div>\r\n\r\n\t<ng-container\r\n\t\t*ngIf=\"isLegacyMode\"\r\n\t\t[ngTemplateOutlet]=\"emptyTemplate || legacyDefaultEmptyState\"\r\n\t\t[ngTemplateOutletContext]=\"{\r\n\t\t\t$implicit: loading,\r\n\t\t\trows: rows,\r\n\t\t\tinitialized: initialized\r\n\t\t}\"\r\n\t></ng-container>\r\n\r\n\t<ng-container\r\n\t\t*ngIf=\"!isLegacyMode\"\r\n\t\t[ngTemplateOutlet]=\"emptyTemplate || defaultEmptyState\"\r\n\t\t[ngTemplateOutletContext]=\"{\r\n\t\t\t$implicit: loading,\r\n\t\t\trows: rows,\r\n\t\t\tinitialized: initialized\r\n\t\t}\"\r\n\t></ng-container>\r\n</div>\r\n\r\n<ng-template #table>\r\n\t<cts-table\r\n\t\t[rows]=\"rows\"\r\n\t\t[selectedRowsKeys]=\"selectedRowsKeys\"\r\n\t\t[columns]=\"columns\"\r\n\t\t[responsiveColumns]=\"responsiveColumns\"\r\n\t\t[rowCursor]=\"rowCursor\"\r\n\t\t[fullWidth]=\"fullWidth\"\r\n\t\t[entityType]=\"entityType\"\r\n\t\t[prefix]=\"prefix\"\r\n\t\t[totalRecords]=\"totalRecords\"\r\n\t\t[tableMode]=\"tableMode\"\r\n\t\t[componentName]=\"componentName\"\r\n\t\t[multiSelectRows]=\"multiSelectRows\"\r\n\t\t[singleSelectRow]=\"singleSelectRow\"\r\n    [rowCheckboxPermission]=\"rowCheckboxPermission\"\r\n\t\t[tableActions]=\"tableActions\"\r\n\t\t[showActionsAsMenu]=\"showActionsAsMenu\"\r\n\t\t[defultSort]=\"defultSort\"\r\n\t\t[format]=\"format\"\r\n\t\t[rowClass]=\"rowClass\"\r\n\t\t[highlightSelectedCard]=\"highlightSelectedCard\"\r\n\t\t[columnMode]=\"columnMode\"\r\n\t\t[customFirstRow]=\"customFirstRow\"\r\n\t\t(onRowSelected)=\"rowDetails($event)\"\r\n\t\t(onRowIndexSelected)=\"indexDetails($event)\"\r\n\t\t(onMultiRowSelected)=\"onMultiRowSelectValue($event)\"\r\n\t\t(actionOnRow)=\"performAction($event)\"\r\n\t\t(onSorting)=\"onSort($event)\"\r\n\t></cts-table>\r\n</ng-template>\r\n\r\n<ng-template #legacyDefaultEmptyState>\r\n\t<div class=\"empty-state\" *ngIf=\"!loading && rows.length === 0\">\r\n\t\t<div class=\"text\">\r\n\t\t\t{{ (prefix ? prefix + 'noData' : 'noData') | translate }}\r\n\t\t</div>\r\n\t</div>\r\n\t<div class=\"empty-state\" *ngIf=\"loading && rows.length === 0\">\r\n\t\t<div class=\"text\">\r\n\t\t\t{{ (prefix ? prefix + 'gettingData' : 'gettingData') | translate }}\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #defaultEmptyState>\r\n\t<div class=\"empty-state\" *ngIf=\"!loading && rows.length === 0\">\r\n\t\t<div class=\"text\">\r\n\t\t\t{{ (prefix ? prefix + 'noData' : 'noData') | translate }}\r\n\t\t</div>\r\n\t</div>\r\n\t<div *ngIf=\"loading && initialized\" class=\"loading-content\">\r\n\t\t<mat-spinner [diameter]=\"100\"></mat-spinner>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #skeleton let-rows>\r\n\t<table class=\"w-full\">\r\n\t\t<thead *ngIf=\"false\">\r\n\t\t\t<tr class=\"border-b border-green-900\">\r\n\t\t\t\t<th *ngIf=\"multiSelectRows\" class=\"p-3 py-4\" style=\"width: 60px\">\r\n\t\t\t\t\t<app-skeleton width=\"60px\" height=\"1.3rem\"></app-skeleton>\r\n\t\t\t\t</th>\r\n\t\t\t\t<th *ngFor=\"let num of [].constructor(columns?.length || 4); let i = index\" class=\"px-3 py-4\">\r\n\t\t\t\t\t<app-skeleton [randomWidth]=\"true\" height=\"1.7rem\"></app-skeleton>\r\n\t\t\t\t</th>\r\n\t\t\t</tr>\r\n\t\t</thead>\r\n\t\t<tbody>\r\n\t\t\t<tr *ngFor=\"let row of [].constructor(rows || 10); let index = index\" class=\"border-b border-gray-200\">\r\n\t\t\t\t<td *ngIf=\"multiSelectRows\" class=\"p-3 py-4\" style=\"width: 50px\">\r\n\t\t\t\t\t<app-skeleton width=\"50px\" height=\"1.3rem\"></app-skeleton>\r\n\t\t\t\t</td>\r\n\t\t\t\t<td *ngFor=\"let col of [].constructor(columns?.length || 4); let i = index\" class=\"p-3 py-4\">\r\n\t\t\t\t\t<app-skeleton [randomWidth]=\"true\" height=\"1.3rem\"></app-skeleton>\r\n\t\t\t\t</td>\r\n\t\t\t</tr>\r\n\t\t</tbody>\r\n\t</table>\r\n</ng-template>\r\n\r\n<ng-template #paginationDefaultTemplate>\r\n\t<cts-pagination\r\n\t\t*ngIf=\"totalRecords > pageSize\"\r\n\t\t[page]=\"pageNum\"\r\n\t\t(change)=\"paginationChange($event)\"\r\n\t\t[size]=\"pageSize\"\r\n\t\t[count]=\"totalRecords\"\r\n\t></cts-pagination>\r\n\t<div class=\"absolute ndfPageSizes flex gap-x-3 items-center mt-2\">\r\n\t\t<ndf-page-sizes-list\r\n\t\t\t*ngIf=\"pageSizes?.length\"\r\n\t\t\t[pageSizes]=\"pageSizes\"\r\n\t\t\t[selectedPageSize]=\"pageSize\"\r\n\t\t\t(onChangePageSize)=\"onChangePageSize($event)\"\r\n\t\t>\r\n\t\t</ndf-page-sizes-list>\r\n\r\n\t\t<span *ngIf=\"showTotalRecord\">{{ 'TABLE.totalRecords' | translate: { count: totalRecords } }}</span>\r\n\t</div>\r\n</ng-template>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:700;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming,.my-dynamic-viewer .direction-img .outgoing,.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label,.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.wrapping{position:relative}.wrapping .table-reposition{overflow-y:var(--table-reposition-overflow-y, hidden);scrollbar-color:#b4bac6 transparent!important;scrollbar-width:thin!important;overflow-x:hidden;max-height:var(--table-reposition-max-height)}.empty-state{padding:200px;display:flex;justify-content:center;align-items:center;font-size:20px;font-weight:700}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#b4bac6}.dark-scroll::-webkit-scrollbar-thumb{background:#8f98aa}.ndfPageSizes{right:0;left:unset}.rtl .ndfPageSizes{right:unset;left:0}.loading-content{position:var(--loading-content-position, absolute);inset:0;display:grid;place-items:center;background:var(--loading-content-background, rgba(255, 255, 255, .2));backdrop-filter:var(--loading-content-backdrop-filter, blur(3px))}.pagination-iner-wraper{display:var(--pagination-inner-display, flex);justify-content:var(--pagination-inner-justify, center);align-items:var(--pagination-inner-align, center)}\n"] }]
         }], ctorParameters: () => [{ type: AdapterService }, { type: CallApiService }, { type: DynamicTableService }, { type: TableHooksService }, { type: i0.ChangeDetectorRef }], propDecorators: { onRowSelected: [{
                 type: Output
             }], onRowIndexSelected: [{
@@ -22732,6 +22734,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Input
             }], pageSizes: [{
                 type: Input
+            }], rowClass: [{
+                type: Input
             }] } });
 /**
@@ -23471,7 +23475,7 @@ class NdfTableComponent extends DestroySubject {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NdfTableComponent, deps: [{ token: FiltersMapperService }, { token: DynamicTableService }, { token: i1$1.TranslateService }, { token: NdfTableService }, { token: CustomToastrService }, { token: NdfTableConfigurationService }, { token: i1$6.MatDialog }, { token: NuxeoDialogService }, { token: NDF_TABLE_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: NdfTableComponent, isStandalone: false, selector: "app-ndf-table", inputs: { rows: "rows", totalRecords: "totalRecords", autoCalculateHeight: "autoCalculateHeight", emptyMessage: "emptyMessage", activeQuery: "activeQuery", configPath: "configPath", styleClass: "styleClass", configTransformer: "configTransformer", tableKey: "tableKey", jsonEditorEnabled: "jsonEditorEnabled", isWaitingData: "isWaitingData", config: "config", customCriteria: "customCriteria", searchTerm: "searchTerm", selectedRowsKeys: "selectedRowsKeys" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", actionOnRow: "actionOnRow", onGettingData: "onGettingData", onMultiRowSelected: "onMultiRowSelected", onLoading: "onLoading", onPage: "onPage", onInitialized: "onInitialized", onLoaded: "onLoaded", onQueryChange: "onQueryChange", onSearchChange: "onSearchChange", onSort: "onSort" }, host: { properties: { "dir": "direction" }, classAttribute: "ndf-table" }, queries: [{ propertyName: "actionsTableTemplate", first: true, predicate: ACTIONS_TABLE_TEMPLATE, descendants: true, read: TemplateRef }, { propertyName: "searchTableTemplate", first: true, predicate: SEARCH_TABLE_TEMPLATE, descendants: true, read: TemplateRef }, { propertyName: "filterCustomTemplate", first: true, predicate: FILTER_CUSTOM_TEMPLATE, descendants: true, read: TemplateRef }, { propertyName: "paginationCustomTemplate", first: true, predicate: PAGINATION_TABLE_TEMPLATE, descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  *ngIf=\"tableConfig\"\r\n  class=\"ndf-table__container\"\r\n  [class.panel-opened]=\"isPanelOpened && filtersConfig\"\r\n  [dir]=\"direction\"\r\n  ndfFluidHeight\r\n  cssVar=\"--ndf-table-height\"\r\n  [calculate]=\"autoCalculateHeight\"\r\n>\r\n  <div class=\"ndf-table__panel\" *ngIf=\"filtersConfig?.fields\">\r\n    <app-filters-panel\r\n      [fields]=\"filtersConfig.fields\"\r\n      [aggregations]=\"aggregations$ | async\"\r\n      (filterChanged)=\"filterChanged($event)\"\r\n      [activeQuery]=\"activeQuery\"\r\n      class=\"ndf-table__filters\"\r\n      [customTemplateRef]=\"filterCustomTemplate\"\r\n    ></app-filters-panel>\r\n  </div>\r\n  <div class=\"ndf-table__content\">\r\n    <div class=\"ndf-table__header flex\">\r\n      <div class=\"ndf-table__header__custom-actions flex gap-x-4 items-center\">\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"searchTableTemplate || defaultActionTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: tableConfig,\r\n            panelOpened: isPanelOpened,\r\n            togglePanel: togglePanel,\r\n            openModal: openSearchModal,\r\n            search: onTextSearch,\r\n            clear: onClearSearch,\r\n            searchTerm: searchTerm,\r\n          }\"\r\n        ></ng-container>\r\n\r\n        <ng-template #defaultActionTemplate>\r\n          <button\r\n            mat-stroked-button\r\n            *ngIf=\"isPanelToggleAvailable && !!filtersConfig?.fields?.length\"\r\n            class=\"toggle-button\"\r\n            (click)=\"togglePanel()\"\r\n          >\r\n            <mat-icon> filter_alt</mat-icon>\r\n          </button>\r\n          <app-text-search\r\n            *ngIf=\"textSearchConfig && !textSearchConfig?.hidden\"\r\n            [searchConfig]=\"textSearchConfig\"\r\n            (openModal)=\"openSearchModal()\"\r\n            [search]=\"textSearch$ | async\"\r\n            (searchChange)=\"onTextSearch($event)\"\r\n            (clear)=\"onClearSearch()\"\r\n          ></app-text-search>\r\n        </ng-template>\r\n      </div>\r\n      <div class=\"ndf-table__header__actions flex gap-3 items-center\">\r\n        <app-editor-button\r\n          *ngIf=\"jsonEditorEnabled && (tableKey || tableConfig?.key)\"\r\n          [key]=\"tableKey || tableConfig?.key\"\r\n          [type]=\"editorType\"\r\n        ></app-editor-button>\r\n        <ndf-table-export\r\n          *ngIf=\"exportTableConfig?.enabled\"\r\n          [config]=\"exportTableConfig\"\r\n          (onExport)=\"exportTable($event)\"\r\n        ></ndf-table-export>\r\n\r\n        <table-sorting-list\r\n          *ngIf=\"!!sortList?.length\"\r\n          [sortList]=\"sortList\"\r\n          (sortChanged)=\"sortChanged($event)\"\r\n        ></table-sorting-list>\r\n        <table-columns-toggler\r\n          *ngIf=\"columnToggle\"\r\n          [columns]=\"tableConfig.columns\"\r\n          [prefix]=\"tableConfig.prefix\"\r\n          [sortable]=\"columnsOptions?.sortable\"\r\n          (columnsChanged)=\"columnsChanged($event)\"\r\n        ></table-columns-toggler>\r\n        <mode-toggler\r\n          *ngIf=\"tableMode?.toggleMode\"\r\n          [mode]=\"tableMode.mode || 'list'\"\r\n          [modesList]=\"tableMode?.availableMode\"\r\n          (modeChanged)=\"modeChanged($event)\"\r\n        ></mode-toggler>\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"actionsTableTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: tableConfig,\r\n            panelOpened: isPanelOpened,\r\n            togglePanel: togglePanel,\r\n            openModal: openSearchModal,\r\n            search: onTextSearch,\r\n            clear: onClearSearch,\r\n            searchTerm: searchTerm,\r\n          }\"\r\n        ></ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <cts-dynamic-table\r\n      *ngIf=\"!tableConfig.isDataProvided\"\r\n      class=\"ndf-table__table table-style\"\r\n      [selectedRowsKeys]=\"selectedRowsKeys\"\r\n      [ngClass]=\"styleClass\"\r\n      [columnMode]=\"tableConfig?.columnMode || 'standard'\"\r\n      [columns]=\"displayedColumns$ | async\"\r\n      [responsiveColumns]=\"displayedColumns$ | async\"\r\n      [fullWidth]=\"tableConfig.fullWidth || 'auto'\"\r\n      [pageSize]=\"tableConfig.pageSize || 10\"\r\n      [pageNumber]=\"tableConfig.pageNumber || 1\"\r\n      [pageProvider]=\"tableConfig.pageProvider\"\r\n      [customUrl]=\"tableConfig.customUrl\"\r\n      [quickFilter]=\"\r\n        tableConfig.quickFilters\r\n          ? { quickFilters: tableConfig.quickFilters }\r\n          : undefined\r\n      \"\r\n      [defultSort]=\"tableConfig.defaultSort || defaultSort\"\r\n      [sortingBy]=\"sortOption$ | async\"\r\n      [entityType]=\"'all'\"\r\n      [fields]=\"tableConfig.fields\"\r\n      [tableMode]=\"viewMode$ | async\"\r\n      [componentName]=\"tableMode?.['componentName']\"\r\n      [range]=\"tableConfig?.range\"\r\n      [isSearchPage]=\"tableConfig?.isSearchPage\"\r\n      [multiSelectRows]=\"tableConfig?.multiSelectRows\"\r\n      [singleSelectRow]=\"tableConfig?.singleSelectRow\"\r\n      [rowCheckboxPermission]=\"tableConfig?.rowCheckboxPermission\"\r\n      [customFirstRow]=\"tableConfig?.customFirstRow\"\r\n      [highlightSelectedCard]=\"tableConfig?.highlightSelectedCard\"\r\n      [showActionsAsMenu]=\"tableConfig?.showActionsAsMenu\"\r\n      [filterParams]=\"tableConfig?.filterParams\"\r\n      [format]=\"tableConfig?.format || 'MMMM d, y'\"\r\n      [pageSizes]=\"tableConfig?.pageSizes || defaultPageSizes\"\r\n      [prefix]=\"tableConfig.prefix || ''\"\r\n      [rowCursor]=\"true\"\r\n      [queryParam]=\"tableConfig.queryParam\"\r\n      [customFilters]=\"searchAndFilters$ | async\"\r\n      [tableActions]=\"tableConfig.tableActions\"\r\n      [requestActions]=\"tableConfig?.requestActions\"\r\n      [headers]=\"tableConfig.headers\"\r\n      (onRowSelected)=\"onRowSelected.emit($event)\"\r\n      (onRowIndexSelected)=\"onRowIndexSelected.emit($event)\"\r\n      (actionOnRow)=\"actionOnRow.emit($event)\"\r\n      (onGettingData)=\"onGettingData.emit($event)\"\r\n      (onLoad)=\"onLoad($event)\"\r\n      (onInitialize)=\"onInitialize($event)\"\r\n      (onMultiRowSelected)=\"onMultiRowSelected.emit($event)\"\r\n      (onLoading)=\"onLoading.emit($event)\"\r\n      (onPage)=\"onPageChanged($event)\"\r\n      [isLegacyMode]=\"false\"\r\n      [showTotalRecord]=\"true\"\r\n      [paginationCustomTemplate]=\"paginationCustomTemplate\"\r\n      (sortChanged)=\"onSortChanged($event)\"\r\n    >\r\n      <ng-template\r\n        emptyTemplate\r\n        let-isLoading\r\n        let-rows=\"rows\"\r\n        let-initialized=\"initialized\"\r\n      >\r\n        <div class=\"loading-data\" *ngIf=\"isLoading && initialized\">\r\n          <mat-spinner></mat-spinner>\r\n        </div>\r\n\r\n        <div\r\n          class=\"flex items-center justify-center h-5/6\"\r\n          *ngIf=\"!isLoading && !rows.length\"\r\n        >\r\n          <app-no-data-found\r\n            class=\"mt-4\"\r\n            [message]=\"emptyMessage\"\r\n          ></app-no-data-found>\r\n        </div>\r\n      </ng-template>\r\n    </cts-dynamic-table>\r\n\r\n    <cts-table\r\n      *ngIf=\"tableConfig.isDataProvided\"\r\n      class=\"ndf-table__table table-style\"\r\n      [ngClass]=\"styleClass\"\r\n      [rows]=\"rows\"\r\n      [totalRecords]=\"totalRecords\"\r\n      [columns]=\"displayedColumns$ | async\"\r\n      [columnMode]=\"tableConfig?.columnMode || 'standard'\"\r\n      [responsiveColumns]=\"displayedColumns$ | async\"\r\n      [rowCursor]=\"true\"\r\n      [fullWidth]=\"tableConfig.fullWidth || 'auto'\"\r\n      [entityType]=\"'all'\"\r\n      [prefix]=\"tableConfig.prefix || ''\"\r\n      [tableMode]=\"viewMode$ | async\"\r\n      [componentName]=\"tableMode?.['componentName']\"\r\n      [multiSelectRows]=\"tableConfig?.multiSelectRows\"\r\n      [singleSelectRow]=\"tableConfig?.singleSelectRow\"\r\n      [rowCheckboxPermission]=\"tableConfig?.rowCheckboxPermission\"\r\n      [customFirstRow]=\"tableConfig?.customFirstRow\"\r\n      [tableActions]=\"tableConfig.tableActions\"\r\n      [showActionsAsMenu]=\"tableConfig?.showActionsAsMenu\"\r\n      [defultSort]=\"tableConfig.defaultSort || defaultSort\"\r\n      [format]=\"tableConfig?.format || 'MMMM d, y'\"\r\n      [highlightSelectedCard]=\"tableConfig?.highlightSelectedCard\"\r\n      (onRowSelected)=\"onRowSelected.emit($event)\"\r\n      (onRowIndexSelected)=\"onRowIndexSelected.emit($event)\"\r\n      (onMultiRowSelected)=\"onMultiRowSelected.emit($event)\"\r\n      (actionOnRow)=\"actionOnRow.emit($event)\"\r\n      (onSorting)=\"onSortChanged($event)\"\r\n      [selectedRowsKeys]=\"selectedRowsKeys\"\r\n    ></cts-table>\r\n    <div class=\"loading-data\" *ngIf=\"isWaitingData\">\r\n      <mat-spinner></mat-spinner>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{--mat-outlined-button-icon-offset: 0;--mat-outlined-button-icon-spacing: 0;padding-inline:var(--ndf-tbl-inline-padding, 1rem);padding-block:var(--ndf-tbl-block-padding, 1rem);border:var(--ndf-tbl-border, solid transparent);border-width:var(--ndf-table-border-width, 0);border-radius:var(--ndf-tbl-border-radius, 0);height:var(--ndf-tbl-height, 100%);position:relative;display:flex;flex-direction:column;background-color:var(--ndf-tbl-background, #fff);box-sizing:border-box;max-width:100%;flex:0 0 100%}:host [dir=ltr]{--ndf-tbl-panel-translateX: -100%}:host:before,:host:after{box-sizing:border-box}::ng-deep .wrapping,::ng-deep .wrapping .table-reposition{overflow:visible}.ndf-table__container{--table-div-height: auto;--table-reposition-overflow-y: visible;--table-div-overflow: visible;--panel-width: var(--ndf-tbl-panel-width, 18rem);position:relative;overflow:hidden;display:grid;transition:all .2s;max-width:100%;width:100%;height:var(--ndf-tbl-height, calc(var(--ndf-table-height, auto) - var(--ndf-tbl-block-padding, 1rem) * 2.5));flex-grow:1;gap:var(--ndf-table-container-gap, .5rem)}.ndf-table__container.panel-opened{--ndf-tbl-panel-translateX: 0;--ndf-tbl-content-pis: var(--panel-width)}.ndf-table__panel,.ndf-table__content{overflow:auto;transition:all .2s}.ndf-table__panel{--border-width: var(--ndf-tbl-panel-border-width, 0);position:absolute;width:var(--panel-width);height:var(--ndf-table-panel-height, calc(var(--ndf-table-height, auto) - var(--ndf-tbl-block-padding, 1rem) * 2));transform:translate(var(--ndf-tbl-panel-translateX, 100%));padding-inline:var(--ndf-tbl-panel-inline-padding, .5rem);padding-block:var(--ndf-tbl-panel-block-padding, .5rem);background:var(--ndf-tbl-panel-background, #fff);border-style:solid;border-inline-width:var(--ndf-tbl-panel-border-inline-width, var(--border-width));border-block-width:var(--ndf-tbl-panel-border--block-width, var(--border-width));border-color:var(--ndf-tbl-panel-border-color);z-index:1}.ndf-table__content{flex-grow:1;padding-inline-start:var(--ndf-tbl-content-pis, 0);padding-block-end:var(--ndf-tbl-content-pbe, 1rem);overflow-y:var(--ndf-tbl-content-overflow-y, auto);max-height:var(--ndf-tbl-content-max-height, var(--ndf-table-height));display:flex;flex-direction:column;height:var(--ndf-tbl-content-height, auto)}.ndf-table__header{background-color:var(--ndf-tbl-background, #fff);flex-direction:var(--ndf-tbl-header-direction, row);justify-content:var(--ndf-tbl-header-justify, space-between);align-items:var(--ndf-tbl-header-items, center);padding-inline:var(--ndf-tbl-header-padding-inline, .5rem);padding-block:var(--ndf-tbl-header-padding-block, 0 .5rem);position:var(--ndf-tbl-header-position, sticky);top:0;z-index:1}.ndf-table__header__actions{width:var(--ndf-tbl-actions-width);justify-content:var(--ndf-tbl-actions-justify, flex-end)}.ndf-table__header__custom-actions{width:var(--ndf-tbl-custom-actions-width)}.ndf-table__header__custom-actions .toggle-button{min-width:0;padding:0 10px}.ndf-table__table{flex-grow:1;display:flex;flex-direction:column;border:var(--ndf-tbl-border, 0 solid);padding-inline:var(--ndf-tbl-padding-inline);padding-block:var(--ndf-tbl-padding-block)}.ndf-table__table.no-data{--table-div-height: auto}.loading-data{position:absolute;inset:0;display:grid;place-items:start center;padding-top:calc(var(--ndf-table-height, 5vh) / 2 - 50px);background:var(--loading-data-background, rgba(255, 255, 255, .2));backdrop-filter:var(--loading-data-backdrop-filter, blur(3px))}\n"], dependencies: [{ kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FiltersPanelComponent, selector: "app-filters-panel", inputs: ["aggregations", "fields", "activeQuery"], outputs: ["filterChanged"] }, { kind: "component", type: DynamicTableComponent, selector: "cts-dynamic-table", inputs: ["columns", "responsiveColumns", "entityType", "prefix", "headers", "fields", "pageProvider", "pageSize", "columnMode", "isLegacyMode", "showTotalRecord", "selectedRowsKeys", "paginationCustomTemplate", "pageNumber", "sortingBy", "queryParam", "customFilters", "quickFilter", "report", "rowCursor", "fullWidth", "tableMode", "componentName", "tableActions", "defultSort", "range", "isSearchPage", "multiSelectRows", "singleSelectRow", "rowCheckboxPermission", "customFirstRow", "highlightSelectedCard", "showActionsAsMenu", "filterParams", "skipAggregation", "customUrl", "format", "requestActions", "pageSizes"], outputs: ["onRowSelected", "onRowIndexSelected", "actionOnRow", "onGettingData", "onMultiRowSelected", "onLoading", "sortChanged", "onPageChange", "onPage", "onLoad", "onInitialize"] }, { kind: "directive", type: EmptyTemplateDirective, selector: "[emptyTemplate]" }, { kind: "directive", type: i2$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i4$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: FluidHeightDirective, selector: "[ndfFluidHeight]", inputs: ["minHeight", "ndfFluidHeight", "subtractItems", "decrease", "delay", "cssVar", "calculate", "inlineStyle"], exportAs: ["ndfFluidHeight"] }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: TableComponent, selector: "cts-table", inputs: ["rows", "selectionKey", "selectedRowsKeys", "columns", "responsiveColumns", "entityType", "prefix", "pageCount", "totalRecords", "rowCursor", "fullWidth", "vocItemTranslationPrefix", "tableMode", "componentName", "columnMode", "tableActions", "format", "defultSort", "highlightSelectedCard", "multiSelectRows", "singleSelectRow", "rowCheckboxPermission", "customFirstRow", "showActionsAsMenu", "messages", "defaultColumnSize", "selectionModel"], outputs: ["onRowSelected", "onRowIndexSelected", "onIconSelected", "actionOnRow", "onSorting", "onMultiRowSelected"] }, { kind: "component", type: NoDataFoundComponent, selector: "app-no-data-found", inputs: ["message", "width", "height"] }, { kind: "component", type: EditorButtonComponent, selector: "app-editor-button", inputs: ["type", "key"] }, { kind: "component", type: SortingListComponent, selector: "table-sorting-list", inputs: ["sortList"], outputs: ["sortChanged"] }, { kind: "component", type: TableColumnsTogglerComponent, selector: "table-columns-toggler", inputs: ["prefix", "sortable", "columns"], outputs: ["columnsChanged"] }, { kind: "component", type: ModeTogglerComponent, selector: "mode-toggler", inputs: ["modesList", "mode"], outputs: ["modeChanged"] }, { kind: "component", type: TextSearchComponent, selector: "app-text-search", inputs: ["searchConfig", "search"], outputs: ["searchChange", "openModal", "clear"] }, { kind: "component", type: TableExportComponent, selector: "ndf-table-export", inputs: ["config"], outputs: ["onExport"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: NdfTableComponent, isStandalone: false, selector: "app-ndf-table", inputs: { rows: "rows", totalRecords: "totalRecords", autoCalculateHeight: "autoCalculateHeight", emptyMessage: "emptyMessage", activeQuery: "activeQuery", configPath: "configPath", styleClass: "styleClass", configTransformer: "configTransformer", tableKey: "tableKey", jsonEditorEnabled: "jsonEditorEnabled", isWaitingData: "isWaitingData", config: "config", customCriteria: "customCriteria", searchTerm: "searchTerm", selectedRowsKeys: "selectedRowsKeys" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", actionOnRow: "actionOnRow", onGettingData: "onGettingData", onMultiRowSelected: "onMultiRowSelected", onLoading: "onLoading", onPage: "onPage", onInitialized: "onInitialized", onLoaded: "onLoaded", onQueryChange: "onQueryChange", onSearchChange: "onSearchChange", onSort: "onSort" }, host: { properties: { "dir": "direction" }, classAttribute: "ndf-table" }, queries: [{ propertyName: "actionsTableTemplate", first: true, predicate: ACTIONS_TABLE_TEMPLATE, descendants: true, read: TemplateRef }, { propertyName: "searchTableTemplate", first: true, predicate: SEARCH_TABLE_TEMPLATE, descendants: true, read: TemplateRef }, { propertyName: "filterCustomTemplate", first: true, predicate: FILTER_CUSTOM_TEMPLATE, descendants: true, read: TemplateRef }, { propertyName: "paginationCustomTemplate", first: true, predicate: PAGINATION_TABLE_TEMPLATE, descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  *ngIf=\"tableConfig\"\r\n  class=\"ndf-table__container\"\r\n  [class.panel-opened]=\"isPanelOpened && filtersConfig\"\r\n  [dir]=\"direction\"\r\n  ndfFluidHeight\r\n  cssVar=\"--ndf-table-height\"\r\n  [calculate]=\"autoCalculateHeight\"\r\n>\r\n  <div class=\"ndf-table__panel\" *ngIf=\"filtersConfig?.fields\">\r\n    <app-filters-panel\r\n      [fields]=\"filtersConfig.fields\"\r\n      [aggregations]=\"aggregations$ | async\"\r\n      (filterChanged)=\"filterChanged($event)\"\r\n      [activeQuery]=\"activeQuery\"\r\n      class=\"ndf-table__filters\"\r\n      [customTemplateRef]=\"filterCustomTemplate\"\r\n    ></app-filters-panel>\r\n  </div>\r\n  <div class=\"ndf-table__content\">\r\n    <div class=\"ndf-table__header flex\">\r\n      <div class=\"ndf-table__header__custom-actions flex gap-x-4 items-center\">\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"searchTableTemplate || defaultActionTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: tableConfig,\r\n            panelOpened: isPanelOpened,\r\n            togglePanel: togglePanel,\r\n            openModal: openSearchModal,\r\n            search: onTextSearch,\r\n            clear: onClearSearch,\r\n            searchTerm: searchTerm,\r\n          }\"\r\n        ></ng-container>\r\n\r\n        <ng-template #defaultActionTemplate>\r\n          <button\r\n            mat-stroked-button\r\n            *ngIf=\"isPanelToggleAvailable && !!filtersConfig?.fields?.length\"\r\n            class=\"toggle-button\"\r\n            (click)=\"togglePanel()\"\r\n          >\r\n            <mat-icon> filter_alt</mat-icon>\r\n          </button>\r\n          <app-text-search\r\n            *ngIf=\"textSearchConfig && !textSearchConfig?.hidden\"\r\n            [searchConfig]=\"textSearchConfig\"\r\n            (openModal)=\"openSearchModal()\"\r\n            [search]=\"textSearch$ | async\"\r\n            (searchChange)=\"onTextSearch($event)\"\r\n            (clear)=\"onClearSearch()\"\r\n          ></app-text-search>\r\n        </ng-template>\r\n      </div>\r\n      <div class=\"ndf-table__header__actions flex gap-3 items-center\">\r\n        <app-editor-button\r\n          *ngIf=\"jsonEditorEnabled && (tableKey || tableConfig?.key)\"\r\n          [key]=\"tableKey || tableConfig?.key\"\r\n          [type]=\"editorType\"\r\n        ></app-editor-button>\r\n        <ndf-table-export\r\n          *ngIf=\"exportTableConfig?.enabled\"\r\n          [config]=\"exportTableConfig\"\r\n          (onExport)=\"exportTable($event)\"\r\n        ></ndf-table-export>\r\n\r\n        <table-sorting-list\r\n          *ngIf=\"!!sortList?.length\"\r\n          [sortList]=\"sortList\"\r\n          (sortChanged)=\"sortChanged($event)\"\r\n        ></table-sorting-list>\r\n        <table-columns-toggler\r\n          *ngIf=\"columnToggle\"\r\n          [columns]=\"tableConfig.columns\"\r\n          [prefix]=\"tableConfig.prefix\"\r\n          [sortable]=\"columnsOptions?.sortable\"\r\n          (columnsChanged)=\"columnsChanged($event)\"\r\n        ></table-columns-toggler>\r\n        <mode-toggler\r\n          *ngIf=\"tableMode?.toggleMode\"\r\n          [mode]=\"tableMode.mode || 'list'\"\r\n          [modesList]=\"tableMode?.availableMode\"\r\n          (modeChanged)=\"modeChanged($event)\"\r\n        ></mode-toggler>\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"actionsTableTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: tableConfig,\r\n            panelOpened: isPanelOpened,\r\n            togglePanel: togglePanel,\r\n            openModal: openSearchModal,\r\n            search: onTextSearch,\r\n            clear: onClearSearch,\r\n            searchTerm: searchTerm,\r\n          }\"\r\n        ></ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <cts-dynamic-table\r\n      *ngIf=\"!tableConfig.isDataProvided\"\r\n      class=\"ndf-table__table table-style\"\r\n      [selectedRowsKeys]=\"selectedRowsKeys\"\r\n      [ngClass]=\"styleClass\"\r\n      [columnMode]=\"tableConfig?.columnMode || 'standard'\"\r\n      [columns]=\"displayedColumns$ | async\"\r\n      [responsiveColumns]=\"displayedColumns$ | async\"\r\n      [fullWidth]=\"tableConfig.fullWidth || 'auto'\"\r\n      [pageSize]=\"tableConfig.pageSize || 10\"\r\n      [pageNumber]=\"tableConfig.pageNumber || 1\"\r\n      [pageProvider]=\"tableConfig.pageProvider\"\r\n      [customUrl]=\"tableConfig.customUrl\"\r\n      [quickFilter]=\"\r\n        tableConfig.quickFilters\r\n          ? { quickFilters: tableConfig.quickFilters }\r\n          : undefined\r\n      \"\r\n      [defultSort]=\"tableConfig.defaultSort || defaultSort\"\r\n      [sortingBy]=\"sortOption$ | async\"\r\n      [entityType]=\"'all'\"\r\n      [fields]=\"tableConfig.fields\"\r\n      [tableMode]=\"viewMode$ | async\"\r\n      [componentName]=\"tableMode?.['componentName']\"\r\n      [range]=\"tableConfig?.range\"\r\n      [isSearchPage]=\"tableConfig?.isSearchPage\"\r\n      [multiSelectRows]=\"tableConfig?.multiSelectRows\"\r\n      [singleSelectRow]=\"tableConfig?.singleSelectRow\"\r\n      [rowCheckboxPermission]=\"tableConfig?.rowCheckboxPermission\"\r\n      [customFirstRow]=\"tableConfig?.customFirstRow\"\r\n      [highlightSelectedCard]=\"tableConfig?.highlightSelectedCard\"\r\n      [showActionsAsMenu]=\"tableConfig?.showActionsAsMenu\"\r\n      [filterParams]=\"tableConfig?.filterParams\"\r\n      [format]=\"tableConfig?.format || 'MMMM d, y'\"\r\n      [pageSizes]=\"tableConfig?.pageSizes || defaultPageSizes\"\r\n      [prefix]=\"tableConfig.prefix || ''\"\r\n      [rowCursor]=\"true\"\r\n      [queryParam]=\"tableConfig.queryParam\"\r\n      [customFilters]=\"searchAndFilters$ | async\"\r\n      [tableActions]=\"tableConfig.tableActions\"\r\n      [requestActions]=\"tableConfig?.requestActions\"\r\n      [headers]=\"tableConfig.headers\"\r\n      (onRowSelected)=\"onRowSelected.emit($event)\"\r\n      (onRowIndexSelected)=\"onRowIndexSelected.emit($event)\"\r\n      (actionOnRow)=\"actionOnRow.emit($event)\"\r\n      (onGettingData)=\"onGettingData.emit($event)\"\r\n      (onLoad)=\"onLoad($event)\"\r\n      (onInitialize)=\"onInitialize($event)\"\r\n      (onMultiRowSelected)=\"onMultiRowSelected.emit($event)\"\r\n      (onLoading)=\"onLoading.emit($event)\"\r\n      (onPage)=\"onPageChanged($event)\"\r\n      [isLegacyMode]=\"false\"\r\n      [showTotalRecord]=\"true\"\r\n      [paginationCustomTemplate]=\"paginationCustomTemplate\"\r\n      (sortChanged)=\"onSortChanged($event)\"\r\n    >\r\n      <ng-template\r\n        emptyTemplate\r\n        let-isLoading\r\n        let-rows=\"rows\"\r\n        let-initialized=\"initialized\"\r\n      >\r\n        <div class=\"loading-data\" *ngIf=\"isLoading && initialized\">\r\n          <mat-spinner></mat-spinner>\r\n        </div>\r\n\r\n        <div\r\n          class=\"flex items-center justify-center h-5/6\"\r\n          *ngIf=\"!isLoading && !rows.length\"\r\n        >\r\n          <app-no-data-found\r\n            class=\"mt-4\"\r\n            [message]=\"emptyMessage\"\r\n          ></app-no-data-found>\r\n        </div>\r\n      </ng-template>\r\n    </cts-dynamic-table>\r\n\r\n    <cts-table\r\n      *ngIf=\"tableConfig.isDataProvided\"\r\n      class=\"ndf-table__table table-style\"\r\n      [ngClass]=\"styleClass\"\r\n      [rows]=\"rows\"\r\n      [totalRecords]=\"totalRecords\"\r\n      [columns]=\"displayedColumns$ | async\"\r\n      [columnMode]=\"tableConfig?.columnMode || 'standard'\"\r\n      [responsiveColumns]=\"displayedColumns$ | async\"\r\n      [rowCursor]=\"true\"\r\n      [fullWidth]=\"tableConfig.fullWidth || 'auto'\"\r\n      [entityType]=\"'all'\"\r\n      [prefix]=\"tableConfig.prefix || ''\"\r\n      [tableMode]=\"viewMode$ | async\"\r\n      [componentName]=\"tableMode?.['componentName']\"\r\n      [multiSelectRows]=\"tableConfig?.multiSelectRows\"\r\n      [singleSelectRow]=\"tableConfig?.singleSelectRow\"\r\n      [rowCheckboxPermission]=\"tableConfig?.rowCheckboxPermission\"\r\n      [customFirstRow]=\"tableConfig?.customFirstRow\"\r\n      [tableActions]=\"tableConfig.tableActions\"\r\n      [showActionsAsMenu]=\"tableConfig?.showActionsAsMenu\"\r\n      [defultSort]=\"tableConfig.defaultSort || defaultSort\"\r\n      [format]=\"tableConfig?.format || 'MMMM d, y'\"\r\n      [highlightSelectedCard]=\"tableConfig?.highlightSelectedCard\"\r\n      (onRowSelected)=\"onRowSelected.emit($event)\"\r\n      (onRowIndexSelected)=\"onRowIndexSelected.emit($event)\"\r\n      (onMultiRowSelected)=\"onMultiRowSelected.emit($event)\"\r\n      (actionOnRow)=\"actionOnRow.emit($event)\"\r\n      (onSorting)=\"onSortChanged($event)\"\r\n      [selectedRowsKeys]=\"selectedRowsKeys\"\r\n    ></cts-table>\r\n    <div class=\"loading-data\" *ngIf=\"isWaitingData\">\r\n      <mat-spinner></mat-spinner>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{--mat-outlined-button-icon-offset: 0;--mat-outlined-button-icon-spacing: 0;padding-inline:var(--ndf-tbl-inline-padding, 1rem);padding-block:var(--ndf-tbl-block-padding, 1rem);border:var(--ndf-tbl-border, solid transparent);border-width:var(--ndf-table-border-width, 0);border-radius:var(--ndf-tbl-border-radius, 0);height:var(--ndf-tbl-height, 100%);position:relative;display:flex;flex-direction:column;background-color:var(--ndf-tbl-background, #fff);box-sizing:border-box;max-width:100%;flex:0 0 100%}:host [dir=ltr]{--ndf-tbl-panel-translateX: -100%}:host:before,:host:after{box-sizing:border-box}::ng-deep .wrapping,::ng-deep .wrapping .table-reposition{overflow:visible}.ndf-table__container{--table-div-height: auto;--table-reposition-overflow-y: visible;--table-div-overflow: visible;--panel-width: var(--ndf-tbl-panel-width, 18rem);position:relative;overflow:hidden;display:grid;transition:all .2s;max-width:100%;width:100%;height:var(--ndf-tbl-height, calc(var(--ndf-table-height, auto) - var(--ndf-tbl-block-padding, 1rem) * 2.5));flex-grow:1;gap:var(--ndf-table-container-gap, .5rem)}.ndf-table__container.panel-opened{--ndf-tbl-panel-translateX: 0;--ndf-tbl-content-pis: var(--panel-width)}.ndf-table__panel,.ndf-table__content{overflow:auto;transition:all .2s}.ndf-table__panel{--border-width: var(--ndf-tbl-panel-border-width, 0);position:absolute;width:var(--panel-width);height:var(--ndf-table-panel-height, calc(var(--ndf-table-height, auto) - var(--ndf-tbl-block-padding, 1rem) * 2));transform:translate(var(--ndf-tbl-panel-translateX, 100%));padding-inline:var(--ndf-tbl-panel-inline-padding, .5rem);padding-block:var(--ndf-tbl-panel-block-padding, .5rem);background:var(--ndf-tbl-panel-background, #fff);border-style:solid;border-inline-width:var(--ndf-tbl-panel-border-inline-width, var(--border-width));border-block-width:var(--ndf-tbl-panel-border--block-width, var(--border-width));border-color:var(--ndf-tbl-panel-border-color);z-index:1}.ndf-table__content{flex-grow:1;padding-inline-start:var(--ndf-tbl-content-pis, 0);padding-block-end:var(--ndf-tbl-content-pbe, 1rem);overflow-y:var(--ndf-tbl-content-overflow-y, auto);max-height:var(--ndf-tbl-content-max-height, var(--ndf-table-height));display:flex;flex-direction:column;height:var(--ndf-tbl-content-height, auto)}.ndf-table__header{background-color:var(--ndf-tbl-background, #fff);flex-direction:var(--ndf-tbl-header-direction, row);justify-content:var(--ndf-tbl-header-justify, space-between);align-items:var(--ndf-tbl-header-items, center);padding-inline:var(--ndf-tbl-header-padding-inline, .5rem);padding-block:var(--ndf-tbl-header-padding-block, 0 .5rem);position:var(--ndf-tbl-header-position, sticky);top:0;z-index:1}.ndf-table__header__actions{width:var(--ndf-tbl-actions-width);justify-content:var(--ndf-tbl-actions-justify, flex-end)}.ndf-table__header__custom-actions{width:var(--ndf-tbl-custom-actions-width)}.ndf-table__header__custom-actions .toggle-button{min-width:0;padding:0 10px}.ndf-table__table{flex-grow:1;display:flex;flex-direction:column;border:var(--ndf-tbl-border, 0 solid);padding-inline:var(--ndf-tbl-padding-inline);padding-block:var(--ndf-tbl-padding-block)}.ndf-table__table.no-data{--table-div-height: auto}.loading-data{position:absolute;inset:0;display:grid;place-items:start center;padding-top:calc(var(--ndf-table-height, 5vh) / 2 - 50px);background:var(--loading-data-background, rgba(255, 255, 255, .2));backdrop-filter:var(--loading-data-backdrop-filter, blur(3px))}\n"], dependencies: [{ kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FiltersPanelComponent, selector: "app-filters-panel", inputs: ["aggregations", "fields", "activeQuery"], outputs: ["filterChanged"] }, { kind: "component", type: DynamicTableComponent, selector: "cts-dynamic-table", inputs: ["columns", "responsiveColumns", "entityType", "prefix", "headers", "fields", "pageProvider", "pageSize", "columnMode", "isLegacyMode", "showTotalRecord", "selectedRowsKeys", "paginationCustomTemplate", "pageNumber", "sortingBy", "queryParam", "customFilters", "quickFilter", "report", "rowCursor", "fullWidth", "tableMode", "componentName", "tableActions", "defultSort", "range", "isSearchPage", "multiSelectRows", "singleSelectRow", "rowCheckboxPermission", "customFirstRow", "highlightSelectedCard", "showActionsAsMenu", "filterParams", "skipAggregation", "customUrl", "format", "requestActions", "pageSizes", "rowClass"], outputs: ["onRowSelected", "onRowIndexSelected", "actionOnRow", "onGettingData", "onMultiRowSelected", "onLoading", "sortChanged", "onPageChange", "onPage", "onLoad", "onInitialize"] }, { kind: "directive", type: EmptyTemplateDirective, selector: "[emptyTemplate]" }, { kind: "directive", type: i2$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i4$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: FluidHeightDirective, selector: "[ndfFluidHeight]", inputs: ["minHeight", "ndfFluidHeight", "subtractItems", "decrease", "delay", "cssVar", "calculate", "inlineStyle"], exportAs: ["ndfFluidHeight"] }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: TableComponent, selector: "cts-table", inputs: ["rows", "selectionKey", "selectedRowsKeys", "columns", "responsiveColumns", "entityType", "prefix", "pageCount", "totalRecords", "rowCursor", "fullWidth", "vocItemTranslationPrefix", "tableMode", "componentName", "columnMode", "tableActions", "format", "defultSort", "highlightSelectedCard", "multiSelectRows", "singleSelectRow", "rowCheckboxPermission", "customFirstRow", "showActionsAsMenu", "messages", "rowClass", "defaultColumnSize", "selectionModel"], outputs: ["onRowSelected", "onRowIndexSelected", "onIconSelected", "actionOnRow", "onSorting", "onMultiRowSelected"] }, { kind: "component", type: NoDataFoundComponent, selector: "app-no-data-found", inputs: ["message", "width", "height"] }, { kind: "component", type: EditorButtonComponent, selector: "app-editor-button", inputs: ["type", "key"] }, { kind: "component", type: SortingListComponent, selector: "table-sorting-list", inputs: ["sortList"], outputs: ["sortChanged"] }, { kind: "component", type: TableColumnsTogglerComponent, selector: "table-columns-toggler", inputs: ["prefix", "sortable", "columns"], outputs: ["columnsChanged"] }, { kind: "component", type: ModeTogglerComponent, selector: "mode-toggler", inputs: ["modesList", "mode"], outputs: ["modeChanged"] }, { kind: "component", type: TextSearchComponent, selector: "app-text-search", inputs: ["searchConfig", "search"], outputs: ["searchChange", "openModal", "clear"] }, { kind: "component", type: TableExportComponent, selector: "ndf-table-export", inputs: ["config"], outputs: ["onExport"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NdfTableComponent, decorators: [{
             type: Component,
@@ -23952,7 +23956,7 @@ class DynamicSearchComponent {
             .execute());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicSearchComponent, deps: [{ token: i1$4.ActivatedRoute }, { token: i1$4.Router }, { token: EvaluatorsService }, { token: NuxeoService }, { token: GlobalAdminService }, { token: 'environment' }, { token: i5.BreakpointObserver }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: DynamicSearchComponent, isStandalone: false, selector: "cts-dynamic-search", inputs: { columns: "columns", responsiveColumns: "responsiveColumns", entityType: "entityType", prefix: "prefix", headers: "headers", fields: "fields", pageProvider: "pageProvider", pageSize: "pageSize", tableMode: "tableMode", sortingBy: "sortingBy", fullTextParamName: "fullTextParamName", filter: "filter", suggesterApi: "suggesterApi", onRowSelected: "onRowSelected", sortingArray: "sortingArray", customResponsiveStyle: "customResponsiveStyle", openCloseFilterFromOutside: "openCloseFilterFromOutside", theme: "theme" }, outputs: { actionOnRow: "actionOnRow" }, viewQueries: [{ propertyName: "dynamicTable", first: true, predicate: ["dynamicTable"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!customResponsiveStyle\">\r\n  <div class=\"search-toolbar d-md-flex d-xl-none mx-3\">\r\n    <button (click)=\"onOpenFilter()\" class=\"my-button\">\r\n      <span> {{ \"FILTER\" | translate }}</span>\r\n      <i class=\"bi bi-filter\" *ngIf=\"!openFilter\"></i>\r\n      <i class=\"bi bi-x\" *ngIf=\"openFilter\"></i>\r\n    </button>\r\n    <div *ngIf=\"openFilter\">\r\n      <i class=\"bi bi-caret-up-fill arrow-up\"></i>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"customResponsiveStyle\">\r\n  <div\r\n    class=\"customStyle -mt-12 px-8 flex flex-col\"\r\n    [ngClass]=\"{\r\n      'bg-accent-200': theme === 'dgda',\r\n      'bg-accent-100': theme === 'ksreleif' || theme === 'comptechco'\r\n    }\"\r\n    [@collapse]=\"!openFilter\"\r\n  >\r\n    <!-- <form\r\n        [formGroup]=\"searchForm\"\r\n        class=\"search-form\"\r\n        (ngSubmit)=\"submitForm()\"\r\n      >\r\n        <input\r\n          class=\"search-input\"\r\n          type=\"text\"\r\n          formControlName=\"text\"\r\n          [placeholder]=\"'search.search' | translate\"\r\n        />\r\n        <div (click)=\"submitForm()\" class=\"search-icon bi bi-search\"></div>\r\n      </form> -->\r\n    <div class=\"flex gap-x-18 flex-row mt-5 pb-3 overflow-x-auto\">\r\n      <ng-container *ngIf=\"aggregations; else progressSpinner\">\r\n        <ng-container *ngIf=\"aggregations.length; else noAggregations\">\r\n          <ng-container *ngFor=\"let aggregation of aggregations\">\r\n            <ng-container *ngIf=\"aggregation.buckets.length > 0\">\r\n              <cts-dynamic-filter\r\n                [entityType]=\"entityType\"\r\n                [filters]=\"aggregation.buckets\"\r\n                [id]=\"aggregation.id\"\r\n                [selections]=\"aggregation.selection\"\r\n                [title]=\"aggregation.field\"\r\n                [prefix]=\"'search'\"\r\n                [department]=\"\r\n                  aggregation.field === 'corr:to' ||\r\n                  aggregation.field === 'corr:from'\r\n                \"\r\n                [componentType]=\"\r\n                  aggregation.componentType\r\n                    ? aggregation.componentType\r\n                    : 'defult'\r\n                \"\r\n                [customPageProvider]=\"\r\n                  aggregation.customPageProvider\r\n                    ? aggregation.customPageProvider\r\n                    : ''\r\n                \"\r\n                [config]=\"aggregation.config ? aggregation.config : {}\"\r\n                (onFilterSelected)=\"FilterSelected($event)\"\r\n              >\r\n              </cts-dynamic-filter>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n\r\n<div class=\"row  d-search-wrapper wrapper\">\r\n  <div class=\"wrapper-overlay\" *ngIf=\"loading\"></div>\r\n\r\n  <ng-container *ngIf=\"!customResponsiveStyle\">\r\n    <div class=\"popup-filter px-3 d-flex d-xl-none\" *ngIf=\"openFilter\">\r\n      <form\r\n        [formGroup]=\"searchForm\"\r\n        class=\"search-form\"\r\n        (ngSubmit)=\"submitForm()\"\r\n      >\r\n        <input\r\n          class=\"search-input\"\r\n          type=\"text\"\r\n          formControlName=\"text\"\r\n          [matAutocomplete]=\"matAutocomplete1\"\r\n          [placeholder]=\"'search.search' | translate\"\r\n        />\r\n        <div (click)=\"submitForm()\" class=\"search-icon bi bi-search\"></div>\r\n      </form>\r\n      <mat-autocomplete\r\n        class=\"auto-complete-iner-wrapper auto-complete-wrapper\"\r\n        [disableRipple]=\"true\"\r\n        #matAutocomplete1=\"matAutocomplete\"\r\n      >\r\n        <mat-option class=\"no-text\" *ngIf=\"resultSets && !resultSets.length\">\r\n          {{ \"no_result_found\" | translate }}\r\n        </mat-option>\r\n        <ng-container *ngFor=\"let resultSet of resultSets\">\r\n          <mat-option (click)=\"setOptionValue(resultSet.label)\">\r\n            <span class=\"option-iner-text\">{{ resultSet.label }}</span>\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-autocomplete>\r\n      <ng-container *ngIf=\"aggregations; else progressSpinner\">\r\n        <ng-container *ngIf=\"aggregations.length; else noAggregations\">\r\n          <div *ngFor=\"let aggregation of aggregations\">\r\n            <ng-container *ngIf=\"aggregation.buckets.length > 0\">\r\n              <cts-dynamic-filter\r\n                [entityType]=\"entityType\"\r\n                [filters]=\"aggregation.buckets\"\r\n                [id]=\"aggregation.id\"\r\n                [selections]=\"aggregation.selection\"\r\n                [title]=\"aggregation.field\"\r\n                [prefix]=\"'search'\"\r\n                [department]=\"\r\n                  aggregation.field === 'corr:to' ||\r\n                  aggregation.field === 'corr:from'\r\n                \"\r\n                [componentType]=\"\r\n                  aggregation.componentType\r\n                    ? aggregation.componentType\r\n                    : 'defult'\r\n                \"\r\n                [customPageProvider]=\"\r\n                  aggregation.customPageProvider\r\n                    ? aggregation.customPageProvider\r\n                    : ''\r\n                \"\r\n                [config]=\"aggregation.config ? aggregation.config : {}\"\r\n                (onFilterSelected)=\"FilterSelected($event)\"\r\n              >\r\n              </cts-dynamic-filter>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <div class=\"col-xl-3 search-sideMenu d-none d-xl-block\">\r\n    <form\r\n      [formGroup]=\"searchForm\"\r\n      class=\"search-form\"\r\n      (ngSubmit)=\"submitForm()\"\r\n      [dir]=\"direction\"\r\n    >\r\n      <input\r\n        class=\"search-input\"\r\n        type=\"text\"\r\n        formControlName=\"text\"\r\n        [matAutocomplete]=\"matAutocomplete2\"\r\n        [placeholder]=\"'search.search' | translate\"\r\n      />\r\n      <div (click)=\"submitForm()\" class=\"search-icon bi bi-search\"></div>\r\n       <mat-autocomplete\r\n      class=\"auto-complete-iner-wrapper auto-complete-wrapper\"\r\n      [disableRipple]=\"true\"\r\n      #matAutocomplete2=\"matAutocomplete\"\r\n    >\r\n      <mat-option class=\"no-text\" *ngIf=\"resultSets && !resultSets.length\">\r\n        {{ \"no_result_found\" | translate }}\r\n      </mat-option>\r\n      <ng-container *ngFor=\"let resultSet of resultSets\">\r\n        <mat-option (click)=\"setOptionValue(resultSet.label)\">\r\n          <span class=\"option-iner-text\">{{ resultSet.label }}</span>\r\n        </mat-option>\r\n      </ng-container>\r\n    </mat-autocomplete>\r\n    </form>\r\n\r\n    <ng-container *ngIf=\"aggregations; else progressSpinner\">\r\n      <div *ngFor=\"let aggregation of aggregations\">\r\n        <ng-container *ngIf=\"aggregation.buckets.length > 0\">\r\n          <cts-dynamic-filter\r\n            [entityType]=\"entityType\"\r\n            [filters]=\"aggregation.buckets\"\r\n            [id]=\"aggregation.id\"\r\n            [selections]=\"aggregation.selection\"\r\n            [title]=\"aggregation.field\"\r\n            [prefix]=\"'search'\"\r\n            [department]=\"\r\n              aggregation.field === 'corr:to' ||\r\n              aggregation.field === 'corr:from'\r\n            \"\r\n            [componentType]=\"\r\n              aggregation.componentType ? aggregation.componentType : 'defult'\r\n            \"\r\n            [customPageProvider]=\"\r\n              aggregation.customPageProvider\r\n                ? aggregation.customPageProvider\r\n                : ''\r\n            \"\r\n            [config]=\"aggregation.config ? aggregation.config : {}\"\r\n            (onFilterSelected)=\"FilterSelected($event)\"\r\n          >\r\n          </cts-dynamic-filter>\r\n        </ng-container>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <div class=\"col-12 col-xl-9\">\r\n    <app-card>\r\n      <div class=\"title\">\r\n        <h3>\r\n          {{ \"search.header\" | translate }}\r\n        </h3>\r\n      </div>\r\n      <div class=\"body\">\r\n        <div *ngIf=\"aggregations\" class=\"table-toolbar\">\r\n          <div class=\"result-count\">\r\n            <span>\r\n              {{\r\n                \"search.\" + \"resultsNumber\"\r\n                  | translate : { value: totalRecords ? totalRecords : 0 }\r\n              }}\r\n            </span>\r\n          </div>\r\n          <div>\r\n            <form\r\n              class=\"d-flex justify-between\"\r\n              [formGroup]=\"searchForm\"\r\n              (ngSubmit)=\"submitForm()\"\r\n            >\r\n              <div *ngIf=\"useToggleFilters && !customResponsiveStyle\"></div>\r\n              <div *ngIf=\"customResponsiveStyle\">\r\n                <div class=\"search-form custom-responsive-search\">\r\n                  <input\r\n                    class=\"search-input\"\r\n                    type=\"text\"\r\n                    formControlName=\"text\"\r\n                    [matAutocomplete]=\"matAutocomplete\"\r\n                    [placeholder]=\"'search.search' | translate\"\r\n                  />\r\n                  <div\r\n                    (click)=\"submitForm()\"\r\n                    class=\"search-icon bi bi-search\"\r\n                  ></div>\r\n                </div>\r\n                <mat-autocomplete\r\n                  class=\"auto-complete-iner-wrapper auto-complete-wrapper\"\r\n                  [disableRipple]=\"true\"\r\n                  #matAutocomplete=\"matAutocomplete\"\r\n                >\r\n                  <mat-option\r\n                    class=\"no-text\"\r\n                    *ngIf=\"resultSets && !resultSets.length\"\r\n                  >\r\n                    {{ no_result_found | translate }}\r\n                  </mat-option>\r\n                  <ng-container *ngFor=\"let resultSet of resultSets\">\r\n                    <mat-option (click)=\"setOptionValue(resultSet.label)\">\r\n                      <span class=\"option-iner-text\">{{\r\n                        resultSet.label\r\n                      }}</span>\r\n                    </mat-option>\r\n                  </ng-container>\r\n                </mat-autocomplete>\r\n              </div>\r\n              <div class=\"d-flex\" *ngIf=\"useToggleFilters\">\r\n                <cts-dynamic-form-slide-toggleitem\r\n                  class=\"mx-2 small-font\"\r\n                  [label]=\"'search.PERSONAL_FILES'\"\r\n                  (onToggle)=\"submitForm()\"\r\n                  formControlName=\"personalFiles\"\r\n                >\r\n                </cts-dynamic-form-slide-toggleitem>\r\n                <cts-dynamic-form-slide-toggleitem\r\n                  class=\"mx-2 small-font\"\r\n                  [label]=\"'search.DEP_FILES'\"\r\n                  formControlName=\"depFiles\"\r\n                  (onToggle)=\"submitForm()\"\r\n                >\r\n                </cts-dynamic-form-slide-toggleitem>\r\n                <cts-dynamic-form-slide-toggleitem\r\n                  class=\"mx-2 small-font\"\r\n                  [label]=\"'search.WORKSPACE_FILES'\"\r\n                  formControlName=\"workSpaceFiles\"\r\n                  (onToggle)=\"submitForm()\"\r\n                >\r\n                </cts-dynamic-form-slide-toggleitem>\r\n              </div>\r\n            </form>\r\n          </div>\r\n        </div>\r\n        <cts-dynamic-table\r\n          #dynamicTable\r\n          [pageSize]=\"pageSize\"\r\n          [columns]=\"columns\"\r\n          [responsiveColumns]=\"responsiveColumns\"\r\n          [pageProvider]=\"pageProvider\"\r\n          [quickFilter]=\"filter\"\r\n          [entityType]=\"entityType\"\r\n          [fields]=\"fields\"\r\n          [queryParam]=\"queryParams\"\r\n          [headers]=\"headers\"\r\n          [prefix]=\"prefix\"\r\n          [sortingBy]=\"sortingBy\"\r\n          [tableMode]=\"tableMode?.mode || 'list'\"\r\n          [componentName]=\"tableMode?.componentName\"\r\n          [isSearchPage]=\"true\"\r\n          (onRowSelected)=\"onRowSelected($event)\"\r\n          (actionOnRow)=\"performAction($event)\"\r\n          (onGettingData)=\"getTableData($event)\"\r\n        ></cts-dynamic-table>\r\n      </div>\r\n    </app-card>\r\n  </div>\r\n\r\n  <ng-template #progressSpinner>\r\n    <div class=\"progress-spinner\">\r\n      <mat-spinner color=\"warn\" [diameter]=\"25\"></mat-spinner>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #noAggregations>\r\n    <div class=\"progress-spinner\">\r\n      {{ \"search.noAggregations\" | translate }}\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:700;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming,.my-dynamic-viewer .direction-img .outgoing,.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label,.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}:root{--mat-option-hover-state-layer-color: #f0f0f0}.result-count{color:#8f98aa;font-size:14px}.search-sideMenu{background-color:#fff;padding-top:22px;padding-bottom:22px;border-radius:5px}.auto-complete-iner-wrapper{max-height:350px;border-radius:4px}.auto-complete-iner-wrapper .no-text{font-size:14px;color:#465573}.auto-complete-iner-wrapper .mat-option{text-align:start;color:#465573;font-weight:700;font-size:14px}.auto-complete-iner-wrapper .mat-option .mat-option-text{text-align:flex-start}.search-form{display:flex;color:#6a768e;width:100%}.search-form .search-input{width:100%;border:1px solid #d9dce2;border-inline-end:0;border-start-start-radius:5px;border-end-start-radius:5px;border:1px solid #ccc;height:32px;font-size:16px;padding-inline-start:4px}.search-form .search-input::-webkit-input-placeholder{font-size:14px}.search-form .search-input:focus-visible{border:2px solid #465573;outline:transparent}.search-form .search-icon{background:#465573;color:#fff;width:12%;display:flex;align-items:center;justify-content:center;border-radius:0;cursor:pointer;border:1px solid #d9dce2;border-start-end-radius:6px;border-end-end-radius:6px;border-inline-start:0}.small-font{font-size:14px}.custom-responsive-search{width:300px!important;margin:0 35px}.search-toolbar{position:relative;display:flex;justify-content:flex-end;margin-bottom:16px}.search-toolbar .my-button{width:90px}.search-toolbar .arrow-up{position:absolute;top:26px;right:28px;font-size:25px;color:#8f98aab3}.wrapper{position:relative}.wrapper .popup-filter{flex-direction:column;position:absolute;right:0;z-index:9999;max-height:70vh;max-width:400px;background-color:#fff;overflow:scroll;box-shadow:0 1px 10px 2px #00000054;top:-4px;border-radius:5px}.wrapper .popup-filter .search-form{margin-top:10px!important}.wrapper .popup-filter .search-input{width:100%!important}.wrapper .search-container{background-color:#fff;border-radius:5px;border:0px;padding:16px;height:max-content}.wrapper .search-container .table-toolbar{display:flex;align-items:center;margin-bottom:8px;justify-content:space-between}.wrapper .wrapper-overlay{position:absolute;inset:0;z-index:9}.progress-spinner{margin-top:10px;margin-block-end:0;display:grid;place-items:center;width:100%}.rtl .popup-filter{left:0;right:unset!important}.rtl .arrow-up{position:absolute;top:33px;left:28px;right:unset!important}@media (width: 1180px),(width: 820px){.customStyle cts-dynamic-filter .aggregation-container{width:176px!important}}.customStyle .search-form{display:flex;color:#6a768e;width:100%}.customStyle .search-form .search-input{width:288px;border:1px solid #d9dce2;border-inline-end:0;border-start-start-radius:5px;border-end-start-radius:5px;border:1px solid #ccc;height:32px;font-size:16px;padding-inline-start:4px}.customStyle .search-form .search-input::-webkit-input-placeholder{font-size:14px}.customStyle .search-form .search-input:focus-visible{border:2px solid #465573;outline:transparent}.customStyle .search-form .search-icon{background:#465573;color:#fff;width:40px;display:flex;align-items:center;justify-content:center;border-radius:0;cursor:pointer;border:1px solid #d9dce2;border-start-end-radius:6px;border-end-end-radius:6px;border-inline-start:0}\n"], dependencies: [{ kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CardComponent, selector: "app-card", inputs: ["styleClass", "noBody", "dark"] }, { kind: "component", type: DynamicTableComponent, selector: "cts-dynamic-table", inputs: ["columns", "responsiveColumns", "entityType", "prefix", "headers", "fields", "pageProvider", "pageSize", "columnMode", "isLegacyMode", "showTotalRecord", "selectedRowsKeys", "paginationCustomTemplate", "pageNumber", "sortingBy", "queryParam", "customFilters", "quickFilter", "report", "rowCursor", "fullWidth", "tableMode", "componentName", "tableActions", "defultSort", "range", "isSearchPage", "multiSelectRows", "singleSelectRow", "rowCheckboxPermission", "customFirstRow", "highlightSelectedCard", "showActionsAsMenu", "filterParams", "skipAggregation", "customUrl", "format", "requestActions", "pageSizes"], outputs: ["onRowSelected", "onRowIndexSelected", "actionOnRow", "onGettingData", "onMultiRowSelected", "onLoading", "sortChanged", "onPageChange", "onPage", "onLoad", "onInitialize"] }, { kind: "component", type: DynamicFilterComponent, selector: "cts-dynamic-filter", inputs: ["title", "filters", "selections", "id", "entityType", "prefix", "department", "componentType", "customPageProvider", "config"], outputs: ["onFilterSelected"] }, { kind: "component", type: DynamicFormSlideToggleitemComponent, selector: "cts-dynamic-form-slide-toggleitem", inputs: ["label", "disabled", "checked", "theme"], outputs: ["onToggle"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i6$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: DynamicSearchComponent, isStandalone: false, selector: "cts-dynamic-search", inputs: { columns: "columns", responsiveColumns: "responsiveColumns", entityType: "entityType", prefix: "prefix", headers: "headers", fields: "fields", pageProvider: "pageProvider", pageSize: "pageSize", tableMode: "tableMode", sortingBy: "sortingBy", fullTextParamName: "fullTextParamName", filter: "filter", suggesterApi: "suggesterApi", onRowSelected: "onRowSelected", sortingArray: "sortingArray", customResponsiveStyle: "customResponsiveStyle", openCloseFilterFromOutside: "openCloseFilterFromOutside", theme: "theme" }, outputs: { actionOnRow: "actionOnRow" }, viewQueries: [{ propertyName: "dynamicTable", first: true, predicate: ["dynamicTable"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!customResponsiveStyle\">\r\n  <div class=\"search-toolbar d-md-flex d-xl-none mx-3\">\r\n    <button (click)=\"onOpenFilter()\" class=\"my-button\">\r\n      <span> {{ \"FILTER\" | translate }}</span>\r\n      <i class=\"bi bi-filter\" *ngIf=\"!openFilter\"></i>\r\n      <i class=\"bi bi-x\" *ngIf=\"openFilter\"></i>\r\n    </button>\r\n    <div *ngIf=\"openFilter\">\r\n      <i class=\"bi bi-caret-up-fill arrow-up\"></i>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"customResponsiveStyle\">\r\n  <div\r\n    class=\"customStyle -mt-12 px-8 flex flex-col\"\r\n    [ngClass]=\"{\r\n      'bg-accent-200': theme === 'dgda',\r\n      'bg-accent-100': theme === 'ksreleif' || theme === 'comptechco'\r\n    }\"\r\n    [@collapse]=\"!openFilter\"\r\n  >\r\n    <!-- <form\r\n        [formGroup]=\"searchForm\"\r\n        class=\"search-form\"\r\n        (ngSubmit)=\"submitForm()\"\r\n      >\r\n        <input\r\n          class=\"search-input\"\r\n          type=\"text\"\r\n          formControlName=\"text\"\r\n          [placeholder]=\"'search.search' | translate\"\r\n        />\r\n        <div (click)=\"submitForm()\" class=\"search-icon bi bi-search\"></div>\r\n      </form> -->\r\n    <div class=\"flex gap-x-18 flex-row mt-5 pb-3 overflow-x-auto\">\r\n      <ng-container *ngIf=\"aggregations; else progressSpinner\">\r\n        <ng-container *ngIf=\"aggregations.length; else noAggregations\">\r\n          <ng-container *ngFor=\"let aggregation of aggregations\">\r\n            <ng-container *ngIf=\"aggregation.buckets.length > 0\">\r\n              <cts-dynamic-filter\r\n                [entityType]=\"entityType\"\r\n                [filters]=\"aggregation.buckets\"\r\n                [id]=\"aggregation.id\"\r\n                [selections]=\"aggregation.selection\"\r\n                [title]=\"aggregation.field\"\r\n                [prefix]=\"'search'\"\r\n                [department]=\"\r\n                  aggregation.field === 'corr:to' ||\r\n                  aggregation.field === 'corr:from'\r\n                \"\r\n                [componentType]=\"\r\n                  aggregation.componentType\r\n                    ? aggregation.componentType\r\n                    : 'defult'\r\n                \"\r\n                [customPageProvider]=\"\r\n                  aggregation.customPageProvider\r\n                    ? aggregation.customPageProvider\r\n                    : ''\r\n                \"\r\n                [config]=\"aggregation.config ? aggregation.config : {}\"\r\n                (onFilterSelected)=\"FilterSelected($event)\"\r\n              >\r\n              </cts-dynamic-filter>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n\r\n<div class=\"row  d-search-wrapper wrapper\">\r\n  <div class=\"wrapper-overlay\" *ngIf=\"loading\"></div>\r\n\r\n  <ng-container *ngIf=\"!customResponsiveStyle\">\r\n    <div class=\"popup-filter px-3 d-flex d-xl-none\" *ngIf=\"openFilter\">\r\n      <form\r\n        [formGroup]=\"searchForm\"\r\n        class=\"search-form\"\r\n        (ngSubmit)=\"submitForm()\"\r\n      >\r\n        <input\r\n          class=\"search-input\"\r\n          type=\"text\"\r\n          formControlName=\"text\"\r\n          [matAutocomplete]=\"matAutocomplete1\"\r\n          [placeholder]=\"'search.search' | translate\"\r\n        />\r\n        <div (click)=\"submitForm()\" class=\"search-icon bi bi-search\"></div>\r\n      </form>\r\n      <mat-autocomplete\r\n        class=\"auto-complete-iner-wrapper auto-complete-wrapper\"\r\n        [disableRipple]=\"true\"\r\n        #matAutocomplete1=\"matAutocomplete\"\r\n      >\r\n        <mat-option class=\"no-text\" *ngIf=\"resultSets && !resultSets.length\">\r\n          {{ \"no_result_found\" | translate }}\r\n        </mat-option>\r\n        <ng-container *ngFor=\"let resultSet of resultSets\">\r\n          <mat-option (click)=\"setOptionValue(resultSet.label)\">\r\n            <span class=\"option-iner-text\">{{ resultSet.label }}</span>\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-autocomplete>\r\n      <ng-container *ngIf=\"aggregations; else progressSpinner\">\r\n        <ng-container *ngIf=\"aggregations.length; else noAggregations\">\r\n          <div *ngFor=\"let aggregation of aggregations\">\r\n            <ng-container *ngIf=\"aggregation.buckets.length > 0\">\r\n              <cts-dynamic-filter\r\n                [entityType]=\"entityType\"\r\n                [filters]=\"aggregation.buckets\"\r\n                [id]=\"aggregation.id\"\r\n                [selections]=\"aggregation.selection\"\r\n                [title]=\"aggregation.field\"\r\n                [prefix]=\"'search'\"\r\n                [department]=\"\r\n                  aggregation.field === 'corr:to' ||\r\n                  aggregation.field === 'corr:from'\r\n                \"\r\n                [componentType]=\"\r\n                  aggregation.componentType\r\n                    ? aggregation.componentType\r\n                    : 'defult'\r\n                \"\r\n                [customPageProvider]=\"\r\n                  aggregation.customPageProvider\r\n                    ? aggregation.customPageProvider\r\n                    : ''\r\n                \"\r\n                [config]=\"aggregation.config ? aggregation.config : {}\"\r\n                (onFilterSelected)=\"FilterSelected($event)\"\r\n              >\r\n              </cts-dynamic-filter>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <div class=\"col-xl-3 search-sideMenu d-none d-xl-block\">\r\n    <form\r\n      [formGroup]=\"searchForm\"\r\n      class=\"search-form\"\r\n      (ngSubmit)=\"submitForm()\"\r\n      [dir]=\"direction\"\r\n    >\r\n      <input\r\n        class=\"search-input\"\r\n        type=\"text\"\r\n        formControlName=\"text\"\r\n        [matAutocomplete]=\"matAutocomplete2\"\r\n        [placeholder]=\"'search.search' | translate\"\r\n      />\r\n      <div (click)=\"submitForm()\" class=\"search-icon bi bi-search\"></div>\r\n       <mat-autocomplete\r\n      class=\"auto-complete-iner-wrapper auto-complete-wrapper\"\r\n      [disableRipple]=\"true\"\r\n      #matAutocomplete2=\"matAutocomplete\"\r\n    >\r\n      <mat-option class=\"no-text\" *ngIf=\"resultSets && !resultSets.length\">\r\n        {{ \"no_result_found\" | translate }}\r\n      </mat-option>\r\n      <ng-container *ngFor=\"let resultSet of resultSets\">\r\n        <mat-option (click)=\"setOptionValue(resultSet.label)\">\r\n          <span class=\"option-iner-text\">{{ resultSet.label }}</span>\r\n        </mat-option>\r\n      </ng-container>\r\n    </mat-autocomplete>\r\n    </form>\r\n\r\n    <ng-container *ngIf=\"aggregations; else progressSpinner\">\r\n      <div *ngFor=\"let aggregation of aggregations\">\r\n        <ng-container *ngIf=\"aggregation.buckets.length > 0\">\r\n          <cts-dynamic-filter\r\n            [entityType]=\"entityType\"\r\n            [filters]=\"aggregation.buckets\"\r\n            [id]=\"aggregation.id\"\r\n            [selections]=\"aggregation.selection\"\r\n            [title]=\"aggregation.field\"\r\n            [prefix]=\"'search'\"\r\n            [department]=\"\r\n              aggregation.field === 'corr:to' ||\r\n              aggregation.field === 'corr:from'\r\n            \"\r\n            [componentType]=\"\r\n              aggregation.componentType ? aggregation.componentType : 'defult'\r\n            \"\r\n            [customPageProvider]=\"\r\n              aggregation.customPageProvider\r\n                ? aggregation.customPageProvider\r\n                : ''\r\n            \"\r\n            [config]=\"aggregation.config ? aggregation.config : {}\"\r\n            (onFilterSelected)=\"FilterSelected($event)\"\r\n          >\r\n          </cts-dynamic-filter>\r\n        </ng-container>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <div class=\"col-12 col-xl-9\">\r\n    <app-card>\r\n      <div class=\"title\">\r\n        <h3>\r\n          {{ \"search.header\" | translate }}\r\n        </h3>\r\n      </div>\r\n      <div class=\"body\">\r\n        <div *ngIf=\"aggregations\" class=\"table-toolbar\">\r\n          <div class=\"result-count\">\r\n            <span>\r\n              {{\r\n                \"search.\" + \"resultsNumber\"\r\n                  | translate : { value: totalRecords ? totalRecords : 0 }\r\n              }}\r\n            </span>\r\n          </div>\r\n          <div>\r\n            <form\r\n              class=\"d-flex justify-between\"\r\n              [formGroup]=\"searchForm\"\r\n              (ngSubmit)=\"submitForm()\"\r\n            >\r\n              <div *ngIf=\"useToggleFilters && !customResponsiveStyle\"></div>\r\n              <div *ngIf=\"customResponsiveStyle\">\r\n                <div class=\"search-form custom-responsive-search\">\r\n                  <input\r\n                    class=\"search-input\"\r\n                    type=\"text\"\r\n                    formControlName=\"text\"\r\n                    [matAutocomplete]=\"matAutocomplete\"\r\n                    [placeholder]=\"'search.search' | translate\"\r\n                  />\r\n                  <div\r\n                    (click)=\"submitForm()\"\r\n                    class=\"search-icon bi bi-search\"\r\n                  ></div>\r\n                </div>\r\n                <mat-autocomplete\r\n                  class=\"auto-complete-iner-wrapper auto-complete-wrapper\"\r\n                  [disableRipple]=\"true\"\r\n                  #matAutocomplete=\"matAutocomplete\"\r\n                >\r\n                  <mat-option\r\n                    class=\"no-text\"\r\n                    *ngIf=\"resultSets && !resultSets.length\"\r\n                  >\r\n                    {{ no_result_found | translate }}\r\n                  </mat-option>\r\n                  <ng-container *ngFor=\"let resultSet of resultSets\">\r\n                    <mat-option (click)=\"setOptionValue(resultSet.label)\">\r\n                      <span class=\"option-iner-text\">{{\r\n                        resultSet.label\r\n                      }}</span>\r\n                    </mat-option>\r\n                  </ng-container>\r\n                </mat-autocomplete>\r\n              </div>\r\n              <div class=\"d-flex\" *ngIf=\"useToggleFilters\">\r\n                <cts-dynamic-form-slide-toggleitem\r\n                  class=\"mx-2 small-font\"\r\n                  [label]=\"'search.PERSONAL_FILES'\"\r\n                  (onToggle)=\"submitForm()\"\r\n                  formControlName=\"personalFiles\"\r\n                >\r\n                </cts-dynamic-form-slide-toggleitem>\r\n                <cts-dynamic-form-slide-toggleitem\r\n                  class=\"mx-2 small-font\"\r\n                  [label]=\"'search.DEP_FILES'\"\r\n                  formControlName=\"depFiles\"\r\n                  (onToggle)=\"submitForm()\"\r\n                >\r\n                </cts-dynamic-form-slide-toggleitem>\r\n                <cts-dynamic-form-slide-toggleitem\r\n                  class=\"mx-2 small-font\"\r\n                  [label]=\"'search.WORKSPACE_FILES'\"\r\n                  formControlName=\"workSpaceFiles\"\r\n                  (onToggle)=\"submitForm()\"\r\n                >\r\n                </cts-dynamic-form-slide-toggleitem>\r\n              </div>\r\n            </form>\r\n          </div>\r\n        </div>\r\n        <cts-dynamic-table\r\n          #dynamicTable\r\n          [pageSize]=\"pageSize\"\r\n          [columns]=\"columns\"\r\n          [responsiveColumns]=\"responsiveColumns\"\r\n          [pageProvider]=\"pageProvider\"\r\n          [quickFilter]=\"filter\"\r\n          [entityType]=\"entityType\"\r\n          [fields]=\"fields\"\r\n          [queryParam]=\"queryParams\"\r\n          [headers]=\"headers\"\r\n          [prefix]=\"prefix\"\r\n          [sortingBy]=\"sortingBy\"\r\n          [tableMode]=\"tableMode?.mode || 'list'\"\r\n          [componentName]=\"tableMode?.componentName\"\r\n          [isSearchPage]=\"true\"\r\n          (onRowSelected)=\"onRowSelected($event)\"\r\n          (actionOnRow)=\"performAction($event)\"\r\n          (onGettingData)=\"getTableData($event)\"\r\n        ></cts-dynamic-table>\r\n      </div>\r\n    </app-card>\r\n  </div>\r\n\r\n  <ng-template #progressSpinner>\r\n    <div class=\"progress-spinner\">\r\n      <mat-spinner color=\"warn\" [diameter]=\"25\"></mat-spinner>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #noAggregations>\r\n    <div class=\"progress-spinner\">\r\n      {{ \"search.noAggregations\" | translate }}\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:700;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming,.my-dynamic-viewer .direction-img .outgoing,.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label,.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}:root{--mat-option-hover-state-layer-color: #f0f0f0}.result-count{color:#8f98aa;font-size:14px}.search-sideMenu{background-color:#fff;padding-top:22px;padding-bottom:22px;border-radius:5px}.auto-complete-iner-wrapper{max-height:350px;border-radius:4px}.auto-complete-iner-wrapper .no-text{font-size:14px;color:#465573}.auto-complete-iner-wrapper .mat-option{text-align:start;color:#465573;font-weight:700;font-size:14px}.auto-complete-iner-wrapper .mat-option .mat-option-text{text-align:flex-start}.search-form{display:flex;color:#6a768e;width:100%}.search-form .search-input{width:100%;border:1px solid #d9dce2;border-inline-end:0;border-start-start-radius:5px;border-end-start-radius:5px;border:1px solid #ccc;height:32px;font-size:16px;padding-inline-start:4px}.search-form .search-input::-webkit-input-placeholder{font-size:14px}.search-form .search-input:focus-visible{border:2px solid #465573;outline:transparent}.search-form .search-icon{background:#465573;color:#fff;width:12%;display:flex;align-items:center;justify-content:center;border-radius:0;cursor:pointer;border:1px solid #d9dce2;border-start-end-radius:6px;border-end-end-radius:6px;border-inline-start:0}.small-font{font-size:14px}.custom-responsive-search{width:300px!important;margin:0 35px}.search-toolbar{position:relative;display:flex;justify-content:flex-end;margin-bottom:16px}.search-toolbar .my-button{width:90px}.search-toolbar .arrow-up{position:absolute;top:26px;right:28px;font-size:25px;color:#8f98aab3}.wrapper{position:relative}.wrapper .popup-filter{flex-direction:column;position:absolute;right:0;z-index:9999;max-height:70vh;max-width:400px;background-color:#fff;overflow:scroll;box-shadow:0 1px 10px 2px #00000054;top:-4px;border-radius:5px}.wrapper .popup-filter .search-form{margin-top:10px!important}.wrapper .popup-filter .search-input{width:100%!important}.wrapper .search-container{background-color:#fff;border-radius:5px;border:0px;padding:16px;height:max-content}.wrapper .search-container .table-toolbar{display:flex;align-items:center;margin-bottom:8px;justify-content:space-between}.wrapper .wrapper-overlay{position:absolute;inset:0;z-index:9}.progress-spinner{margin-top:10px;margin-block-end:0;display:grid;place-items:center;width:100%}.rtl .popup-filter{left:0;right:unset!important}.rtl .arrow-up{position:absolute;top:33px;left:28px;right:unset!important}@media (width: 1180px),(width: 820px){.customStyle cts-dynamic-filter .aggregation-container{width:176px!important}}.customStyle .search-form{display:flex;color:#6a768e;width:100%}.customStyle .search-form .search-input{width:288px;border:1px solid #d9dce2;border-inline-end:0;border-start-start-radius:5px;border-end-start-radius:5px;border:1px solid #ccc;height:32px;font-size:16px;padding-inline-start:4px}.customStyle .search-form .search-input::-webkit-input-placeholder{font-size:14px}.customStyle .search-form .search-input:focus-visible{border:2px solid #465573;outline:transparent}.customStyle .search-form .search-icon{background:#465573;color:#fff;width:40px;display:flex;align-items:center;justify-content:center;border-radius:0;cursor:pointer;border:1px solid #d9dce2;border-start-end-radius:6px;border-end-end-radius:6px;border-inline-start:0}\n"], dependencies: [{ kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CardComponent, selector: "app-card", inputs: ["styleClass", "noBody", "dark"] }, { kind: "component", type: DynamicTableComponent, selector: "cts-dynamic-table", inputs: ["columns", "responsiveColumns", "entityType", "prefix", "headers", "fields", "pageProvider", "pageSize", "columnMode", "isLegacyMode", "showTotalRecord", "selectedRowsKeys", "paginationCustomTemplate", "pageNumber", "sortingBy", "queryParam", "customFilters", "quickFilter", "report", "rowCursor", "fullWidth", "tableMode", "componentName", "tableActions", "defultSort", "range", "isSearchPage", "multiSelectRows", "singleSelectRow", "rowCheckboxPermission", "customFirstRow", "highlightSelectedCard", "showActionsAsMenu", "filterParams", "skipAggregation", "customUrl", "format", "requestActions", "pageSizes", "rowClass"], outputs: ["onRowSelected", "onRowIndexSelected", "actionOnRow", "onGettingData", "onMultiRowSelected", "onLoading", "sortChanged", "onPageChange", "onPage", "onLoad", "onInitialize"] }, { kind: "component", type: DynamicFilterComponent, selector: "cts-dynamic-filter", inputs: ["title", "filters", "selections", "id", "entityType", "prefix", "department", "componentType", "customPageProvider", "config"], outputs: ["onFilterSelected"] }, { kind: "component", type: DynamicFormSlideToggleitemComponent, selector: "cts-dynamic-form-slide-toggleitem", inputs: ["label", "disabled", "checked", "theme"], outputs: ["onToggle"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i6$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [
             trigger('collapse', [
                 state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
                 state('true', style({ height: '0', visibility: 'hidden' })),