nuxeo-development-framework 1.5.2 → 1.5.5

package/fesm2015/nuxeo-development-framework.js

@@ -13181,7 +13181,7 @@ class TableComponent {
     }
 }
 TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: TableComponent, deps: [{ token: NuxeoService$1 }, { token: AppConfigService }, { token: TranslationService$1 }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: TableComponent, selector: "cts-table", inputs: { rows: "rows", columns: "columns", responsiveColumns: "responsiveColumns", entityType: "entityType", prefix: "prefix", pageCount: "pageCount", totalRecords: "totalRecords", rowCursor: "rowCursor", fullWidth: "fullWidth", vocItemTranslationPrefix: "vocItemTranslationPrefix", tableMode: "tableMode", tableActions: "tableActions", format: "format", defultSort: "defultSort", highlightSelectedCard: "highlightSelectedCard" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", onIconSelected: "onIconSelected", actionOnRow: "actionOnRow", onSorting: "onSorting" }, ngImport: i0, template: "<div [style]=\"'width:' + tableWidth\" *ngIf=\"tableMode === 'list'\">\r\n  <ngx-datatable\r\n    class=\"large-table\"\r\n    [rows]=\"rows\"\r\n    [columnMode]=\"'force'\"\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]=\"'auto'\"\r\n    [selected]=\"selected\"\r\n    [selectionType]=\"'single'\"\r\n    [sorts]=\"[{ prop: defultSort?.name, dir: defultSort?.dir }]\"\r\n  >\r\n    <!-- | translate -->\r\n    <ng-container *ngFor=\"let column of tableColumns; 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        [maxWidth]=\"column.size\"\r\n        [headerClass]=\"column.headerClass ? column.headerClass : ''\"\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 class=\"cell-text-wrapper\">\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              ></cts-dropdown-viewer>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"column.type === 'VocCell'\">\r\n            <div class=\"cell-text-wrapper\">\r\n              {{ (value ? column.vocabularyId + '.' + value : \"--\") | translate }}\r\n            </div>\r\n          </ng-container>\r\n          \r\n          <ng-container *ngIf=\"column.type === 'VocItem'\">\r\n            <div class=\"cell-text-wrapper\">\r\n              {{ vocItemTranslationPrefix + value | translate }}\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\r\n                [noStyle]=\"true\"\r\n                [value]=\"value\"\r\n              >\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                \"STATS.\" + value | translate\r\n              }}</span>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"column.type === 'role'\">\r\n            <div class=\"cell-text-wrapper\">\r\n              {{ \"role.\" + (value ? value : \"--\") | translate }}\r\n            </div>\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 matTooltip=\"{{ 'STATS.' + row.state | translate }}\">\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              <!-- <span class=\"value {{ value }}\">{{ \"STATS.\" + value | translate }}</span> -->\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"column.type === 'actions' && rows.length !== 0\">\r\n            <div class=\"actions-wrapper\">\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' || 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=\"{{ 'USER_MANGMENT.addToDepartment' | translate }}\"\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                <i\r\n                  *permission=\"{ name: action.permission, entity: row , user: nuxeoService.nuxeoClient.user}\"\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\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          </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            <cts-dynamic-column\r\n            [id]=\"column.template\"\r\n            [column]=\"column\"\r\n            [context]=\"row\"\r\n          >\r\n          </cts-dynamic-column>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    </ng-container>\r\n  </ng-container>\r\n  </ngx-datatable>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === '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          {{ 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=\"{ name: action.permission, entity: row , user: nuxeoService.nuxeoClient.user}\"\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=\"{ name: 'deleteMemo', entity: row , user: nuxeoService.nuxeoClient.user}\"\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=\"{ name: 'terminateDelegation', entity: row , user: nuxeoService.nuxeoClient.user}\"\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=\"{ name: 'memoPublished', entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n          >\r\n            {{ \"MEMOS.PUBLISHED\" | translate }}\r\n          </span>\r\n          <span\r\n            class=\"publish-state\"\r\n            *permission=\"{ name: 'delegationFinished', entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n          >\r\n            {{ \"delegations.finished\" | translate }}\r\n          </span>\r\n          <span\r\n            class=\"publish-state\"\r\n            *permission=\"{ name: 'delegationActive', entity: row , user: nuxeoService.nuxeoClient.user}\"\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 columns\"\r\n        (click)=\"cardSelected(row);cardFocused(i)\"\r\n      >\r\n        <div class=\"key\" *ngIf=\"property.type !== 'default'\">{{ prefix + property.key | translate }}</div>\r\n        <ng-container *ngIf=\"property.type === 'default'\">\r\n          <div class=\"key\" *permission=\"{ name: 'internalIsEnabled', entity: row , user: nuxeoService.nuxeoClient.user}\">\r\n            {{ prefix + property.key | translate }}\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"value\">\r\n          <div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n            {{ row.properties[property.value] }}\r\n          </div>\r\n          <div class=\"text\" *ngIf=\"property.type === 'user'\">\r\n            {{ row.properties[property.value].fullName }}\r\n          </div>\r\n          <div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n            {{row.properties[property.value] | localizedDate:format:(isArabic? 'ar-AR' : 'en-US')}}\r\n            <!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n          </div>\r\n          <div class=\"text\" *ngIf=\"property.type === 'boolean'\">\r\n            {{ (row.properties[property.value] ? 'Yes':'No') | translate }}\r\n          </div>\r\n          <ng-container *ngIf=\"property.type === 'default'\">\r\n            <div class=\"text\" *permission=\"{ name: 'internalIsEnabled', entity: row , user: nuxeoService.nuxeoClient.user}\">\r\n              {{ row.properties[property.value] }}\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"property.type === 'custom'\">\r\n              <div class=\"text\" *ngFor=\"let item of row.properties[property.value]\">\r\n                {{ item | translate }} {{\", \" }}\r\n                <div [matTooltip]=\"item | translate\" class=\"inner-content\"></div>\r\n              </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === 'dynamicCard'\">\r\n  <div class=\"cards-container\">\r\n    <div class=\"single-card\" [ngClass]=\"{'selected-card': highlightSelectedCard && row?.isSelected}\" *ngFor=\"let row of rows\">\r\n      <div *ngIf=\"columns.length > 1\">\r\n        <div\r\n          class=\"memo-body\"\r\n          *ngFor=\"let property of columns\"\r\n          (click)=\"cardSelected(row)\"\r\n        >\r\n          <div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n          <div class=\"value\">\r\n            <div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n              {{ row.properties[property.value] }}\r\n            </div>\r\n            <div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n              {{ row.properties[property.value] | localizedDate: \"MMMM d, y\" }}\r\n              <!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"iner-card-container\" (click)=\"cardSelected(row)\" *ngIf=\"columns.length === 1\">\r\n        <cts-dynamic-column\r\n        [id]=\"columns[0].template\"\r\n        [column]=\"columns[0]\"\r\n        [context]=\"row\"\r\n      >\r\n      </cts-dynamic-column>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.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:bold;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;height:40px}.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}.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{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.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{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.inner-content{flex-direction:column;display:flex}.ngx-datatable{border:1px solid #eef1f5;border-radius:5px}.ngx-datatable .datatable-header{font-weight:bold;width:100%!important;height:50px!important;background-color:#eef1f5;color:#9aa4ac;font-size:14px}.ngx-datatable .datatable-header .datatable-header-inner{width:100%!important;height:100%;padding:0 20px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center{width:100%!important;display:flex;justify-content:space-between;align-items:center}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn{margin:5px 5px 0;width:16px;height:16px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn:before{content:\"\\f127\";display:inline-block;font-family:bootstrap-icons!important;font-style:normal;font-weight:normal!important;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;vertical-align:-.125em;-webkit-font-smoothing:antialiased}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-icon-up.sort-btn:before{content:\"\\f57b\";color:#000;font-size:16px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-icon-down.sort-btn:before{content:\"\\f574\";color:#000;font-size:16px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-header-cell-template-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;white-space:pre-wrap}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-header-cell-template-wrap .datatable-header-cell-wrapper{display:flex}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-header-cell-template-wrap .datatable-header-cell-wrapper .datatable-header-cell-label{text-align:center}.ngx-datatable .datatable-body .empty-row{text-align:center}.ngx-datatable .datatable-body .datatable-scroll{width:100%!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper{height:50px;font-size:14px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row{width:100%!important;height:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center{width:100%!important;display:flex;justify-content:space-between;padding:0 20px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell{min-height:50px;display:flex;align-items:center;overflow:hidden}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label{width:100%;display:flex;justify-content:center}.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{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 .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 .draft{background-color:#596973;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .inProgress{background-color:#3c3cf0;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .registered{background-color:#5a1496;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .archived{background-color:#fbb62c;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .closed{background-color:#00dca5;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .approved{background-color:#06a57e;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .assigned{background-color:#fd6670;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .sent{background-color:#3c3cf0;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .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{background-color:#fd6670;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Incoming{color:#00dca5;font-size:30px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Outgoing{color:#fbb62c;font-size:30px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Internal{color:#3c3cf0;font-size:30px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.internal{color:#3c3cf0;font-size:30px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .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{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{color:#2e62df!important;font-size:26px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper:nth-child(even){background-color:#f4f6f8}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper:hover{background-color:#eef1f5}.cards-container{display:flex;flex-wrap:wrap;justify-content:center}.cards-container .single-card{padding:15px;border:1px solid rgba(180,186,198,.2);border-radius:3px;min-width:270px;width:24%;margin:0 5px 10px;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;cursor:pointer}.cards-container .single-card .memo-title{font-size:14px;font-weight:bold;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:bold}.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}\n"], components: [{ type: i4$3.DatatableComponent, selector: "ngx-datatable", inputs: ["selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "loadingIndicator", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "groupExpansionDefault", "selectAllRowsOnPage", "virtualization", "summaryRow", "summaryHeight", "summaryPosition", "rowIdentity", "rows", "groupedRows", "groupRowsBy", "columns", "limit", "count", "offset", "targetMarkerTemplate", "selectionType", "rowClass", "selectCheck", "displayCheck", "trackByProp", "treeFromRelation", "treeToRelation"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { type: DropdownViewerComponent, selector: "cts-dropdown-viewer", inputs: ["label", "value", "dropdownId", "vertical", "withOutLabel"] }, { type: DepartmentViewerComponent, selector: "cts-department-viewer", inputs: ["label", "value", "dropdownId", "vertical", "withOutLabel", "noStyle"] }, { type: DateViewerComponent, selector: "cts-date-viewer", inputs: ["label", "value", "vertical", "format", "hijri", "withOutLabel"] }, { type: DynamicColumnComponent, selector: "cts-dynamic-column", inputs: ["id", "context", "column"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i4$3.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate"] }, { type: i4$3.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i1$1.TranslatePipe, "localizedDate": LocalizedDatePipe }, encapsulation: i0.ViewEncapsulation.None });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: TableComponent, selector: "cts-table", inputs: { rows: "rows", columns: "columns", responsiveColumns: "responsiveColumns", entityType: "entityType", prefix: "prefix", pageCount: "pageCount", totalRecords: "totalRecords", rowCursor: "rowCursor", fullWidth: "fullWidth", vocItemTranslationPrefix: "vocItemTranslationPrefix", tableMode: "tableMode", tableActions: "tableActions", format: "format", defultSort: "defultSort", highlightSelectedCard: "highlightSelectedCard" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", onIconSelected: "onIconSelected", actionOnRow: "actionOnRow", onSorting: "onSorting" }, ngImport: i0, template: "<div [style]=\"'width:' + tableWidth\" *ngIf=\"tableMode === 'list'\">\r\n  <ngx-datatable\r\n    class=\"large-table\"\r\n    [rows]=\"rows\"\r\n    [columnMode]=\"'force'\"\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]=\"'auto'\"\r\n    [selected]=\"selected\"\r\n    [selectionType]=\"'single'\"\r\n    [sorts]=\"[{ prop: defultSort?.name, dir: defultSort?.dir }]\"\r\n  >\r\n    <!-- | translate -->\r\n    <ng-container *ngFor=\"let column of tableColumns; 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        [maxWidth]=\"column.size\"\r\n        [headerClass]=\"column.headerClass ? column.headerClass : ''\"\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 class=\"cell-text-wrapper\">\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              ></cts-dropdown-viewer>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"column.type === 'VocCell'\">\r\n            <div class=\"cell-text-wrapper\">\r\n              {{ (value ? column.vocabularyId + '.' + value : \"--\") | translate }}\r\n            </div>\r\n          </ng-container>\r\n          \r\n          <ng-container *ngIf=\"column.type === 'VocItem'\">\r\n            <div class=\"cell-text-wrapper\">\r\n              {{ vocItemTranslationPrefix + value | translate }}\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\r\n                [noStyle]=\"true\"\r\n                [value]=\"value\"\r\n              >\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                \"STATS.\" + value | translate\r\n              }}</span>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"column.type === 'role'\">\r\n            <div class=\"cell-text-wrapper\">\r\n              {{ \"role.\" + (value ? value : \"--\") | translate }}\r\n            </div>\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 matTooltip=\"{{ 'STATS.' + row.state | translate }}\">\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              <!-- <span class=\"value {{ value }}\">{{ \"STATS.\" + value | translate }}</span> -->\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"column.type === 'actions' && rows.length !== 0\">\r\n            <div class=\"actions-wrapper\">\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' || 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=\"{{ 'USER_MANGMENT.addToDepartment' | translate }}\"\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                <i\r\n                  *permission=\"{ name: action.permission, entity: row , user: nuxeoService.nuxeoClient.user}\"\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\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          </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            <cts-dynamic-column\r\n            [id]=\"column.template\"\r\n            [column]=\"column\"\r\n            [context]=\"row\"\r\n          >\r\n          </cts-dynamic-column>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    </ng-container>\r\n  </ng-container>\r\n  </ngx-datatable>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === '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          {{ 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=\"{ name: action.permission, entity: row , user: nuxeoService.nuxeoClient.user}\"\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=\"{ name: 'deleteMemo', entity: row , user: nuxeoService.nuxeoClient.user}\"\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=\"{ name: 'terminateDelegation', entity: row , user: nuxeoService.nuxeoClient.user}\"\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=\"{ name: 'memoPublished', entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n          >\r\n            {{ \"MEMOS.PUBLISHED\" | translate }}\r\n          </span>\r\n          <span\r\n            class=\"publish-state\"\r\n            *permission=\"{ name: 'delegationFinished', entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n          >\r\n            {{ \"delegations.finished\" | translate }}\r\n          </span>\r\n          <span\r\n            class=\"publish-state\"\r\n            *permission=\"{ name: 'delegationActive', entity: row , user: nuxeoService.nuxeoClient.user}\"\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 columns\"\r\n        (click)=\"cardSelected(row);cardFocused(i)\"\r\n      >\r\n        <div class=\"key\" *ngIf=\"property.type !== 'default'\">{{ prefix + property.key | translate }}</div>\r\n        <ng-container *ngIf=\"property.type === 'default'\">\r\n          <div class=\"key\" *permission=\"{ name: 'internalIsEnabled', entity: row , user: nuxeoService.nuxeoClient.user}\">\r\n            {{ prefix + property.key | translate }}\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"value\">\r\n          <div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n            {{ row.properties[property.value] }}\r\n          </div>\r\n          <div class=\"text\" *ngIf=\"property.type === 'user'\">\r\n            {{ row.properties[property.value].fullName }}\r\n          </div>\r\n          <div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n            {{row.properties[property.value] | localizedDate:format:(isArabic? 'ar-AR' : 'en-US')}}\r\n            <!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n          </div>\r\n          <div class=\"text\" *ngIf=\"property.type === 'boolean'\">\r\n            {{ (row.properties[property.value] ? 'Yes':'No') | translate }}\r\n          </div>\r\n          <ng-container *ngIf=\"property.type === 'default'\">\r\n            <div class=\"text\" *permission=\"{ name: 'internalIsEnabled', entity: row , user: nuxeoService.nuxeoClient.user}\">\r\n              {{ row.properties[property.value] }}\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"property.type === 'custom'\">\r\n              <div class=\"text\" *ngFor=\"let item of row.properties[property.value]\">\r\n                {{ item | translate }} {{\", \" }}\r\n              </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === 'dynamicCard'\">\r\n  <div class=\"cards-container\">\r\n    <div class=\"single-card\" [ngClass]=\"{'selected-card': highlightSelectedCard && row?.isSelected}\" *ngFor=\"let row of rows\">\r\n      <div *ngIf=\"columns.length > 1\">\r\n        <div\r\n          class=\"memo-body\"\r\n          *ngFor=\"let property of columns\"\r\n          (click)=\"cardSelected(row)\"\r\n        >\r\n          <div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n          <div class=\"value\">\r\n            <div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n              {{ row.properties[property.value] }}\r\n            </div>\r\n            <div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n              {{ row.properties[property.value] | localizedDate: \"MMMM d, y\" }}\r\n              <!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"iner-card-container\" (click)=\"cardSelected(row)\" *ngIf=\"columns.length === 1\">\r\n        <cts-dynamic-column\r\n        [id]=\"columns[0].template\"\r\n        [column]=\"columns[0]\"\r\n        [context]=\"row\"\r\n      >\r\n      </cts-dynamic-column>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.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:bold;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;height:40px}.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}.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{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.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{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.ngx-datatable{border:1px solid #eef1f5;border-radius:5px}.ngx-datatable .datatable-header{font-weight:bold;width:100%!important;height:50px!important;background-color:#eef1f5;color:#9aa4ac;font-size:14px}.ngx-datatable .datatable-header .datatable-header-inner{width:100%!important;height:100%;padding:0 20px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center{width:100%!important;display:flex;justify-content:space-between;align-items:center}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn{margin:5px 5px 0;width:16px;height:16px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn:before{content:\"\\f127\";display:inline-block;font-family:bootstrap-icons!important;font-style:normal;font-weight:normal!important;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;vertical-align:-.125em;-webkit-font-smoothing:antialiased}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-icon-up.sort-btn:before{content:\"\\f57b\";color:#000;font-size:16px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-icon-down.sort-btn:before{content:\"\\f574\";color:#000;font-size:16px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-header-cell-template-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;white-space:pre-wrap}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-header-cell-template-wrap .datatable-header-cell-wrapper{display:flex}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-header-cell-template-wrap .datatable-header-cell-wrapper .datatable-header-cell-label{text-align:center}.ngx-datatable .datatable-body .empty-row{text-align:center}.ngx-datatable .datatable-body .datatable-scroll{width:100%!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper{height:50px;font-size:14px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row{width:100%!important;height:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center{width:100%!important;display:flex;justify-content:space-between;padding:0 20px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell{min-height:50px;display:flex;align-items:center;overflow:hidden}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label{width:100%;display:flex;justify-content:center}.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{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 .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 .draft{background-color:#596973;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .inProgress{background-color:#3c3cf0;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .registered{background-color:#5a1496;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .archived{background-color:#fbb62c;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .closed{background-color:#00dca5;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .approved{background-color:#06a57e;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .assigned{background-color:#fd6670;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .sent{background-color:#3c3cf0;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .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{background-color:#fd6670;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Incoming{color:#00dca5;font-size:30px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Outgoing{color:#fbb62c;font-size:30px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Internal{color:#3c3cf0;font-size:30px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.internal{color:#3c3cf0;font-size:30px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .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{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{color:#2e62df!important;font-size:26px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper:nth-child(even){background-color:#f4f6f8}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper:hover{background-color:#eef1f5}.cards-container{display:flex;flex-wrap:wrap;justify-content:center}.cards-container .single-card{padding:15px;border:1px solid rgba(180,186,198,.2);border-radius:3px;min-width:270px;width:24%;margin:0 5px 10px;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;cursor:pointer}.cards-container .single-card .memo-title{font-size:14px;font-weight:bold;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:bold}.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}\n"], components: [{ type: i4$3.DatatableComponent, selector: "ngx-datatable", inputs: ["selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "loadingIndicator", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "groupExpansionDefault", "selectAllRowsOnPage", "virtualization", "summaryRow", "summaryHeight", "summaryPosition", "rowIdentity", "rows", "groupedRows", "groupRowsBy", "columns", "limit", "count", "offset", "targetMarkerTemplate", "selectionType", "rowClass", "selectCheck", "displayCheck", "trackByProp", "treeFromRelation", "treeToRelation"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { type: DropdownViewerComponent, selector: "cts-dropdown-viewer", inputs: ["label", "value", "dropdownId", "vertical", "withOutLabel"] }, { type: DepartmentViewerComponent, selector: "cts-department-viewer", inputs: ["label", "value", "dropdownId", "vertical", "withOutLabel", "noStyle"] }, { type: DateViewerComponent, selector: "cts-date-viewer", inputs: ["label", "value", "vertical", "format", "hijri", "withOutLabel"] }, { type: DynamicColumnComponent, selector: "cts-dynamic-column", inputs: ["id", "context", "column"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i4$3.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate"] }, { type: i4$3.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i1$1.TranslatePipe, "localizedDate": LocalizedDatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{
@@ -14833,7 +14833,7 @@ class DynamicChartComponent {
     getData() {
         this.isFetching = true;
         if (this.combinedData) {
-            return this.getCombinedData(this.pageProvider, this.quickFilters, this.range, this.pageProviderTwo, this.quickFilterTwo, this.statusOne, this.statusTwo);
+            return this.getCombinedData(this.pageProvider, this.quickFilters, this.range, this.pageProviderTwo, this.quickFilterTwo, this.quickFilterThree, this.statusOne, this.statusTwo, this.statusThree);
         }
         else {
             return this.callApi
@@ -14867,7 +14867,7 @@ class DynamicChartComponent {
             }));
         }
     }
-    getCombinedData(pageProviderOne, quickFilterOne, selectedRange, pageProviderTwo, quickFilterTwo, statusOne, statusTwo) {
+    getCombinedData(pageProviderOne, quickFilterOne, selectedRange, pageProviderTwo, quickFilterTwo, quickFilterThree, statusOne, statusTwo, statusThree) {
         const getOutgoing$ = this.callApi
             .query({
             pageProvider: pageProviderOne,
@@ -14930,8 +14930,39 @@ class DynamicChartComponent {
                 totalItems: data.totalSize,
             };
         }));
-        return forkJoin([getOutgoing$, getIncoming$]).pipe(map((data) => {
-            let combinedData = [...data[0].data, ...data[1].data];
+        const getInternal$ = this.callApi
+            .query({
+            pageProvider: pageProviderTwo,
+            currentPageIndex: 0,
+            offset: 0,
+            pageSize: 1,
+            dublincore_created_agg: selectedRange,
+            quickFilters: quickFilterThree,
+            dublincore_created_min: this.min,
+            dublincore_created_max: this.max,
+            system_currentLifeCycleState_3: JSON.stringify(this.systemCurrentLifeCycleState),
+        }, {
+            headers: this.headers,
+        })
+            .pipe(map((data) => {
+            const items = data.aggregations[this.aggregations].buckets
+                ? data.aggregations[this.aggregations].buckets.map((item) => ({
+                    label: this.fetchedKey
+                        ? _.get(item, this.fetchedKey)
+                        : item.key,
+                    count: item.docCount,
+                    id: item.key,
+                    status: statusThree,
+                    totalItems: data.totalSize,
+                }))
+                : [];
+            return {
+                data: items,
+                totalItems: data.totalSize,
+            };
+        }));
+        return forkJoin([getOutgoing$, getIncoming$, getInternal$]).pipe(map((data) => {
+            let combinedData = [...data[0].data, ...data[1].data, ...data[2].data];
             this.isFetching = false;
             return combinedData;
         }));
@@ -14948,9 +14979,11 @@ class DynamicChartComponent {
                 aggregations: this.aggregations,
                 quickFilterOne: this.quickFilters,
                 quickFilterTwo: this.quickFilterTwo,
+                quickFilterThree: this.quickFilterThree,
                 systemCurrentLifeCycleState: this.systemCurrentLifeCycleState,
                 statusOne: this.statusOne,
                 statusTwo: this.statusTwo,
+                statusThree: this.statusThree,
                 min: this.min,
                 max: this.max,
             };
@@ -14982,7 +15015,7 @@ class DynamicChartComponent {
     }
 }
 DynamicChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: DynamicChartComponent, deps: [{ token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }, { token: CallApiService }, { token: i1$5.Router }, { token: ChartDataService }], target: i0.ɵɵFactoryTarget.Component });
-DynamicChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: DynamicChartComponent, selector: "cts-dynamic-chart", inputs: { prefix: "prefix", chartType: "chartType", randomColors: "randomColors", pageProvider: "pageProvider", headers: "headers", observable: "observable", aggregations: "aggregations", quickFilters: "quickFilters", systemCurrentLifeCycleState: "systemCurrentLifeCycleState", range: "range", label: "label", selectedRange: "selectedRange", colors: "colors", randomColor: "randomColor", fetchedKey: "fetchedKey", pageProviderTwo: "pageProviderTwo", quickFilterTwo: "quickFilterTwo", combinedData: "combinedData", statusOne: "statusOne", statusTwo: "statusTwo", min: "min", max: "max", width: "width", height: "height", card: "card", cardTitle: "cardTitle" }, viewQueries: [{ propertyName: "chart", first: true, predicate: ["revenueLineChart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"card-continer\" *ngIf=\"card; else test\">\r\n  <div class=\"chart-card-header\">\r\n    <div class=\"chart-card-title\">{{ cardTitle | translate }}</div>\r\n    <button class=\"chart-card-button\" (click)=\"previewCorrespondences()\">\r\n      {{ \"report.Preview\" | translate }}\r\n    </button>\r\n  </div>\r\n  <ng-container *ngIf=\"isFetching\">\r\n    <cts-spinner></cts-spinner>\r\n  </ng-container>\r\n  <div class=\"stat\" [style.height.px]=\"height\">\r\n    <div [hidden]=\"data.data?.length == 0 || data.length == 0\">\r\n      <canvas #revenueLineChart [height]=\"height\" [width]=\"width\"></canvas>\r\n    </div>\r\n    <div class=\"no-stats\" *ngIf=\"data.data?.length == 0 || data.length == 0\">\r\n      <span>{{ \"STATS.noData\" | translate }}</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #test>\r\n  <div class=\"stat\">\r\n    <canvas #revenueLineChart [height]=\"height\" [width]=\"width\"></canvas>\r\n  </div>\r\n</ng-template>\r\n\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:bold;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;height:40px}.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}.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{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.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{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.no-stats{width:100%;height:100%;display:grid;place-items:center}.card-continer{background:#ffffff;border-radius:5px;width:100%;padding:16px 20px;box-shadow:0 1px 1px #00000017}.card-continer .chart-card-header{display:flex;justify-content:space-between;align-items:center}.card-continer .chart-card-header .chart-card-title{font-weight:500}.card-continer .chart-card-header .chart-card-button{all:unset;background:#3341551a;color:#465573;padding:6px 18px;border-radius:24px;font-size:16px;cursor:pointer}.card-continer .chart-card-header .chart-card-button:hover{background:#8f98aa;color:#fff}\n"], components: [{ type: SpinnerComponent, selector: "cts-spinner" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1$1.TranslatePipe } });
+DynamicChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: DynamicChartComponent, selector: "cts-dynamic-chart", inputs: { prefix: "prefix", chartType: "chartType", randomColors: "randomColors", pageProvider: "pageProvider", headers: "headers", observable: "observable", aggregations: "aggregations", quickFilters: "quickFilters", systemCurrentLifeCycleState: "systemCurrentLifeCycleState", range: "range", label: "label", selectedRange: "selectedRange", colors: "colors", randomColor: "randomColor", fetchedKey: "fetchedKey", pageProviderTwo: "pageProviderTwo", quickFilterTwo: "quickFilterTwo", quickFilterThree: "quickFilterThree", combinedData: "combinedData", statusOne: "statusOne", statusTwo: "statusTwo", statusThree: "statusThree", min: "min", max: "max", width: "width", height: "height", card: "card", cardTitle: "cardTitle" }, viewQueries: [{ propertyName: "chart", first: true, predicate: ["revenueLineChart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"card-continer\" *ngIf=\"card; else test\">\r\n  <div class=\"chart-card-header\">\r\n    <div class=\"chart-card-title\">{{ cardTitle | translate }}</div>\r\n    <button class=\"chart-card-button\" (click)=\"previewCorrespondences()\">\r\n      {{ \"report.Preview\" | translate }}\r\n    </button>\r\n  </div>\r\n  <ng-container *ngIf=\"isFetching\">\r\n    <cts-spinner></cts-spinner>\r\n  </ng-container>\r\n  <div class=\"stat\" [style.height.px]=\"height\">\r\n    <div [hidden]=\"data.data?.length == 0 || data.length == 0\">\r\n      <canvas #revenueLineChart [height]=\"height\" [width]=\"width\"></canvas>\r\n    </div>\r\n    <div class=\"no-stats\" *ngIf=\"data.data?.length == 0 || data.length == 0\">\r\n      <span>{{ \"STATS.noData\" | translate }}</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #test>\r\n  <div class=\"stat\">\r\n    <canvas #revenueLineChart [height]=\"height\" [width]=\"width\"></canvas>\r\n  </div>\r\n</ng-template>\r\n\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:bold;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;height:40px}.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}.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{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.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{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.no-stats{width:100%;height:100%;display:grid;place-items:center}.card-continer{background:#ffffff;border-radius:5px;width:100%;padding:16px 20px;box-shadow:0 1px 1px #00000017}.card-continer .chart-card-header{display:flex;justify-content:space-between;align-items:center}.card-continer .chart-card-header .chart-card-title{font-weight:500}.card-continer .chart-card-header .chart-card-button{all:unset;background:#3341551a;color:#465573;padding:6px 18px;border-radius:24px;font-size:16px;cursor:pointer}.card-continer .chart-card-header .chart-card-button:hover{background:#8f98aa;color:#fff}\n"], components: [{ type: SpinnerComponent, selector: "cts-spinner" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1$1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: DynamicChartComponent, decorators: [{
             type: Component,
             args: [{
@@ -15027,12 +15060,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImpor
                 type: Input
             }], quickFilterTwo: [{
                 type: Input
+            }], quickFilterThree: [{
+                type: Input
             }], combinedData: [{
                 type: Input
             }], statusOne: [{
                 type: Input
             }], statusTwo: [{
                 type: Input
+            }], statusThree: [{
+                type: Input
             }], min: [{
                 type: Input
             }], max: [{