nuxeo-development-framework 5.1.9 → 5.2.1

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.
@@ -10275,6 +10275,7 @@
10275
10275
  /** use outside custom function instead of the iner function */
10276
10276
  this.useCustomAddEditAction = false;
10277
10277
  this.disabled = false;
10278
+ this.selectDepChildren = true;
10278
10279
  this.actionClicked = new i0.EventEmitter();
10279
10280
  this.arabic = false;
10280
10281
  this.onDestroy$ = new rxjs.Subject();
@@ -10387,7 +10388,12 @@
10387
10388
  TreeviewSelectComponent.prototype.selectMultiple = function (e, item) {
10388
10389
  var _this = this;
10389
10390
  this.selectedParentWithChild = [];
10390
- this.getChildernValues(item);
10391
+ if (!this.selectDepChildren) {
10392
+ this.selectedParentWithChild.push(item.value);
10393
+ }
10394
+ else {
10395
+ this.getChildernValues(item);
10396
+ }
10391
10397
  if (e) {
10392
10398
  this.multipleSelection = this.multipleSelection.concat(this.selectedParentWithChild);
10393
10399
  }
@@ -10502,7 +10508,7 @@
10502
10508
  return TreeviewSelectComponent;
10503
10509
  }());
10504
10510
  TreeviewSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TreeviewSelectComponent, deps: [{ token: i1__namespace$6.TreeviewI18n }, { token: TranslationService }, { token: DepartmentApiService }, { token: DepartmentManagementService$1 }, { token: RolesService }, { token: NuxeoService }, { token: GlobalAdminService }], target: i0__namespace.ɵɵFactoryTarget.Component });
10505
- TreeviewSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TreeviewSelectComponent, selector: "app-dynamic-form-treeview-select", inputs: { treeview: "treeview", treeViewAsFormControl: "treeViewAsFormControl", config: "config", items: "items", value: "value", multiple: "multiple", defaultSelect: "defaultSelect", pp_departmentNestedTree: "pp_departmentNestedTree", useCustomAddEditAction: "useCustomAddEditAction", customPrefix: "customPrefix", customParentProperty: "customParentProperty", placeholder: "placeholder", defaultSelection: "defaultSelection", displayDepTypee: "displayDepTypee", disabled: "disabled", displayIsAllowRecExternal: "displayIsAllowRecExternal", fixedParentNode: "fixedParentNode" }, outputs: { valueChange: "valueChange", plusClicked: "plusClicked", actionClicked: "actionClicked" }, providers: [{ provide: i1$6.TreeviewI18n, useClass: DropdownTreeviewSelectI18n }], viewQueries: [{ propertyName: "dropdownTreeviewComponent", first: true, predicate: i1$6.DropdownTreeviewComponent, descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<ng-template\r\n #itemTemplate\r\n let-item=\"item\"\r\n let-onCollapseExpand=\"onCollapseExpand\"\r\n let-onCheckedChange=\"onCheckedChange\"\r\n>\r\n <!-- single -->\r\n <div *ngIf=\"!treeview && !multiple\">\r\n <div\r\n class=\"text-nowrap row-item\"\r\n [ngClass]=\"{ active: item.value === this.value }\"\r\n >\r\n <i\r\n *ngIf=\"item.children\"\r\n (click)=\"onCollapseExpand()\"\r\n aria-hidden=\"true\"\r\n [ngSwitch]=\"item.collapsed\"\r\n >\r\n <span\r\n *ngSwitchCase=\"true\"\r\n class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"\r\n ></span>\r\n <span\r\n *ngSwitchCase=\"false\"\r\n class=\"bi bi-caret-down-fill caret-icon\"\r\n ></span>\r\n </i>\r\n <!-- <label class=\"form-check-label\" (click)=\"select(item)\">{{\r\n item.text\r\n }}</label> -->\r\n <label *ngIf=\"item.disabled\" class=\"form-check-label\">{{\r\n item.text\r\n }}</label>\r\n <label\r\n *ngIf=\"!item.disabled\"\r\n class=\"form-check-label\"\r\n (click)=\"select(item)\"\r\n >{{ item.text }}</label\r\n >\r\n </div>\r\n </div>\r\n <!-- Multiple -->\r\n <div *ngIf=\"!treeview && multiple\">\r\n <div\r\n class=\"text-nowrap row-item\"\r\n [ngClass]=\"{ active: item.value === this.value }\"\r\n >\r\n <i\r\n *ngIf=\"item.children\"\r\n (click)=\"onCollapseExpand()\"\r\n aria-hidden=\"true\"\r\n [ngSwitch]=\"item.collapsed\"\r\n >\r\n <span\r\n *ngSwitchCase=\"true\"\r\n class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"\r\n ></span>\r\n <span\r\n *ngSwitchCase=\"false\"\r\n class=\"bi bi-caret-down-fill caret-icon\"\r\n ></span>\r\n </i>\r\n <!-- <input\r\n class=\"multiple-checkBox\"\r\n type=\"checkbox\"\r\n [checked]=\"multipleSelection.includes(item.value)\"\r\n (change)=\"selectMultiple($event.target.checked, item)\"\r\n />\r\n\r\n <label class=\"form-check-label\">{{ item.text }}</label> -->\r\n <div class=\"multiple-treeview\">\r\n <mat-checkbox\r\n [checked]=\"isItemSelected(item)\"\r\n (change)=\"selectMultiple($event.checked, item)\"\r\n >\r\n <span> {{ item.text }} </span>\r\n </mat-checkbox>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- treeView -->\r\n <div *ngIf=\"treeview && !treeViewAsFormControl\" class=\"tree-view-container\">\r\n <div\r\n (mouseenter)=\"hoverField.style.display = 'flex'\"\r\n (mouseleave)=\"hoverField.style.display = 'none'\"\r\n class=\"text-nowrap row-item treeview-row\"\r\n [ngClass]=\"{\r\n selected: item.value == selectedItem,\r\n treeParentNode: item.value === fixedParentNode?.value\r\n }\"\r\n >\r\n <i\r\n *ngIf=\"item.children\"\r\n (click)=\"onCollapsed(item)\"\r\n aria-hidden=\"true\"\r\n [ngSwitch]=\"item.collapsed\"\r\n >\r\n <span\r\n *ngSwitchCase=\"true\"\r\n class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"\r\n ></span>\r\n\r\n <span\r\n *ngSwitchCase=\"false\"\r\n class=\"bi bi-caret-down-fill caret-icon\"\r\n ></span>\r\n </i>\r\n <label class=\"form-check-label-treeview\" (click)=\"select(item)\">\r\n <ng-conteiner *ngIf=\"item.value != fixedParentNode?.value\">{{\r\n item.text\r\n }}</ng-conteiner>\r\n <ng-conteiner *ngIf=\"item.value === fixedParentNode?.value\">{{\r\n item.text | translate\r\n }}</ng-conteiner>\r\n <span #hoverField class=\"hoverField\">\r\n <span\r\n type=\"button\"\r\n matTooltip=\"{{ 'department_management.form.edit' | translate }}\"\r\n (click)=\"onAction($event, 'update', item)\"\r\n >\r\n <li class=\"bi bi-pencil\"></li>\r\n </span>\r\n\r\n <span\r\n type=\"button\"\r\n matTooltip=\"{{\r\n 'department_management.form.toolTip_message' | translate\r\n }}\"\r\n (click)=\"onAction($event, 'add', item)\"\r\n >\r\n <li class=\"bi bi-plus\"></li>\r\n </span>\r\n </span>\r\n </label>\r\n </div>\r\n </div>\r\n <!-- treeView as form control -->\r\n <div *ngIf=\"treeview && treeViewAsFormControl\" class=\"tree-view-container\">\r\n <div\r\n class=\"text-nowrap row-item treeview-row-form-control\"\r\n [ngClass]=\"{ 'selected-form-control': item.value == selectedItem }\"\r\n >\r\n <i\r\n *ngIf=\"item.children\"\r\n (click)=\"onCollapsed(item)\"\r\n aria-hidden=\"true\"\r\n [ngSwitch]=\"item.collapsed\"\r\n >\r\n <span\r\n *ngSwitchCase=\"true\"\r\n class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"\r\n ></span>\r\n\r\n <span\r\n *ngSwitchCase=\"false\"\r\n class=\"bi bi-caret-down-fill caret-icon\"\r\n ></span>\r\n </i>\r\n <label class=\"form-check-label-treeview\" (click)=\"select(item)\"\r\n >{{ item.text }}\r\n </label>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template\r\n #headerTemplate\r\n let-config=\"config\"\r\n let-item=\"item\"\r\n let-onCollapseExpand=\"onCollapseExpand\"\r\n let-onCheckedChange=\"onCheckedChange\"\r\n let-onFilterTextChange=\"onFilterTextChange\"\r\n>\r\n <div *ngIf=\"config.hasFilter\" class=\"row row-filter\">\r\n <div class=\"col-12\">\r\n <input\r\n class=\"form-control\"\r\n type=\"text\"\r\n [placeholder]=\"i18n.getFilterPlaceholder(placeholder)\"\r\n [(ngModel)]=\"filterText\"\r\n (ngModelChange)=\"onFilterTextChange($event)\"\r\n />\r\n </div>\r\n </div>\r\n <div *ngIf=\"config.hasAllCheckBox || config.hasCollapseExpand\" class=\"row\">\r\n <div class=\"col-12\">\r\n <label *ngIf=\"config.hasAllCheckBox\" (click)=\"select(item)\">\r\n <strong>{{ i18n.getAllCheckboxText() }}</strong>\r\n </label>\r\n <label\r\n *ngIf=\"config.hasCollapseExpand\"\r\n class=\"float-right\"\r\n (click)=\"onCollapseExpand()\"\r\n >\r\n <i\r\n [title]=\"i18n.getTooltipCollapseExpandText(item.collapsed)\"\r\n aria-hidden=\"true\"\r\n [ngSwitch]=\"item.collapsed\"\r\n >\r\n <span *ngSwitchCase=\"true\" class=\"bi bi-arrows-angle-expand\"></span>\r\n <span\r\n *ngSwitchCase=\"false\"\r\n class=\"bi bi-arrows-angle-contract\"\r\n ></span>\r\n </i>\r\n </label>\r\n </div>\r\n </div>\r\n <a *ngIf=\"defaultSelect\" class=\"select-default\" (click)=\"selectDefault()\">{{\r\n \"department_management.selectDefault\" | translate\r\n }}</a>\r\n <div\r\n *ngIf=\"config.hasDivider\"\r\n class=\"dropdown-divider\"\r\n [ngClass]=\"{ 'dropdown-divider-noMargin': defaultSelect }\"\r\n ></div>\r\n</ng-template>\r\n\r\n<ng-container *ngIf=\"!treeview && !multiple\">\r\n <div class=\"dropdown-wrapper\">\r\n <ngx-dropdown-treeview\r\n [config]=\"config\"\r\n [headerTemplate]=\"headerTemplate\"\r\n [items]=\"items\"\r\n [itemTemplate]=\"itemTemplate\"\r\n >\r\n </ngx-dropdown-treeview>\r\n <div class=\"disable-effect\" *ngIf=\"disabled\"></div>\r\n </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!treeview && multiple\">\r\n <div class=\"multiple-tree-view dropdown-wrapper\">\r\n <ngx-dropdown-treeview\r\n [config]=\"config\"\r\n [items]=\"items\"\r\n [itemTemplate]=\"itemTemplate\"\r\n >\r\n </ngx-dropdown-treeview>\r\n <div class=\"disable-effect\" *ngIf=\"disabled\"></div>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"treeview && !treeViewAsFormControl\">\r\n <div class=\"tree-view\">\r\n <ngx-treeview\r\n [config]=\"config\"\r\n [headerTemplate]=\"headerTemplate\"\r\n [items]=\"items\"\r\n [itemTemplate]=\"itemTemplate\"\r\n >\r\n </ngx-treeview>\r\n </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"treeview && treeViewAsFormControl\">\r\n <div class=\"tree-view-form-control\">\r\n <ngx-treeview\r\n [config]=\"config\"\r\n [headerTemplate]=\"headerTemplate\"\r\n [items]=\"items\"\r\n [itemTemplate]=\"itemTemplate\"\r\n >\r\n </ngx-treeview>\r\n </div>\r\n</ng-container>\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}.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{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}.caret-icon{color:#6c757d;font-size:14px}.dropdown-wrapper{position:relative}.dropdown-wrapper .disable-effect{position:absolute;top:0;bottom:0;left:0;right:0;z-index:99}.multiple-treeview .mat-checkbox-ripple .mat-ripple-element,.multiple-treeview .mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#33e3b7!important}.multiple-treeview .mat-checkbox-ripple .mat-ripple-element{position:fixed;left:inherit;top:inherit;transform:translate(-3px,-3px)!important}.multiple-treeview mat-checkbox .mat-checkbox-background{background-color:#d9dce2!important}.form-check-label-treeview{display:flex;align-items:center;justify-content:space-between;width:100%}.form-check-label-treeview .hoverField{display:none;align-items:center;text-align:center}.form-check-label-treeview .hoverField span{display:flex;align-items:center;justify-content:center;margin:0 3px;border:none;background-color:snow;background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:30px;width:30px;color:#fff;border-radius:5px;list-style:none;margin-inline-end:4px}.form-check-label-treeview .hoverField span .bi-plus{font-size:28px;display:flex;justify-content:center}.form-check-label-treeview .hoverField .add-btn{width:164px;padding:1px;display:flex;justify-content:center;align-items:center;font-size:13px;background-color:#0dbab5;border-radius:5px;border:0;color:#fff;--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.form-check-label-treeview .hoverField .plus-btn{display:flex;font-size:28px;align-items:center}.selected{background-color:#f5f6f8}.selected .hoverField{display:flex!important}.selected-form-control{background-color:#d9dce2}.selected-form-control .hoverField{display:flex!important}.treeview-item .row-item{display:flex;align-items:center;padding:5px 10px}.treeview-item .row-item .multiple-checkBox{margin-inline-start:4px;margin-inline-end:4px}.treeview-item .active{background-color:#f5f6f8}.treeview-row{display:flex;align-items:center}.treeview-row:hover{background-color:#f5f6f8}.treeview-row-form-control{display:flex;align-items:center}.treeview-row-form-control:hover{background-color:#d9dce2}label{margin-bottom:0;cursor:pointer}.bi{cursor:pointer;margin-right:.3rem}ngx-treeview .treeview-container{max-height:200px!important;overflow-x:hidden;scrollbar-color:#b4bac6 transparent!important;scrollbar-width:thin!important;overflow-y:auto}ngx-treeview .select-default{display:flex;justify-content:start;font-size:13px;cursor:pointer;margin-bottom:3px;margin-top:4px}ngx-treeview .dropdown-divider-noMargin{margin-top:0!important}.tree-view ngx-treeview .treeview-container{max-height:500px!important;overflow-x:hidden}.tree-view-form-control ngx-treeview .treeview-container{max-height:300px!important;overflow-x:hidden}ngx-dropdown-treeview .dropdown .dropdown-menu{margin-top:0!important;width:100%}ngx-dropdown-treeview .dropdown .btn-outline-secondary{background-color:#8f98aa1a;border:none!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:hover{color:#6c757d!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:focus{box-shadow:none!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:active{background-color:#8f98aa1a!important;border:none!important;color:#6c757d!important}ngx-dropdown-treeview .dropdown:after{position:static!important}ngx-dropdown-treeview .show .dropdown-toggle{background-color:#8f98aa1a!important;border:none!important;color:#6c757d!important}.rtl .treeview-item .treeview-item{margin-right:2rem!important;margin-left:0!important}.rtl .row-all .col-12{text-align:right}.rtl .row-all .col-12 .pull-right{float:left!important}.rtl .form-check.form-check-inline{margin-right:0!important}.rtl .btn.dropdown-toggle{margin-right:0!important}.rtl .dropdown-menu:not(ngb-datepicker){right:0px;left:unset}.rtl .dropdown :after{margin-top:.6rem;left:.6rem;right:unset!important}.rtl ngx-treeview-item{text-align:right;direction:rtl}@media (min-width: 576px){.rtl .form-inline .form-check-input{margin:3px}}.rtl .form-inline .form-check-input{margin:3px;position:inherit}.rtl .dropdown button{text-align:right!important;direction:rtl}.rtl .fa.fa-caret-right{transform:rotate(180deg)}\n"], components: [{ type: i7__namespace$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i1__namespace$6.DropdownTreeviewComponent, selector: "ngx-dropdown-treeview", inputs: ["buttonClass", "config", "headerTemplate", "itemTemplate", "items"], outputs: ["selectedChange", "filterChange"] }, { type: i1__namespace$6.TreeviewComponent, selector: "ngx-treeview", inputs: ["config", "headerTemplate", "itemTemplate", "items"], outputs: ["selectedChange", "filterChange"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4__namespace$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2__namespace$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i2__namespace$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2__namespace$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
10511
+ TreeviewSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TreeviewSelectComponent, selector: "app-dynamic-form-treeview-select", inputs: { treeview: "treeview", treeViewAsFormControl: "treeViewAsFormControl", config: "config", items: "items", value: "value", multiple: "multiple", defaultSelect: "defaultSelect", pp_departmentNestedTree: "pp_departmentNestedTree", useCustomAddEditAction: "useCustomAddEditAction", customPrefix: "customPrefix", customParentProperty: "customParentProperty", placeholder: "placeholder", defaultSelection: "defaultSelection", displayDepTypee: "displayDepTypee", disabled: "disabled", selectDepChildren: "selectDepChildren", displayIsAllowRecExternal: "displayIsAllowRecExternal", fixedParentNode: "fixedParentNode" }, outputs: { valueChange: "valueChange", plusClicked: "plusClicked", actionClicked: "actionClicked" }, providers: [{ provide: i1$6.TreeviewI18n, useClass: DropdownTreeviewSelectI18n }], viewQueries: [{ propertyName: "dropdownTreeviewComponent", first: true, predicate: i1$6.DropdownTreeviewComponent, descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<ng-template\r\n #itemTemplate\r\n let-item=\"item\"\r\n let-onCollapseExpand=\"onCollapseExpand\"\r\n let-onCheckedChange=\"onCheckedChange\"\r\n>\r\n <!-- single -->\r\n <div *ngIf=\"!treeview && !multiple\">\r\n <div\r\n class=\"text-nowrap row-item\"\r\n [ngClass]=\"{ active: item.value === this.value }\"\r\n >\r\n <i\r\n *ngIf=\"item.children\"\r\n (click)=\"onCollapseExpand()\"\r\n aria-hidden=\"true\"\r\n [ngSwitch]=\"item.collapsed\"\r\n >\r\n <span\r\n *ngSwitchCase=\"true\"\r\n class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"\r\n ></span>\r\n <span\r\n *ngSwitchCase=\"false\"\r\n class=\"bi bi-caret-down-fill caret-icon\"\r\n ></span>\r\n </i>\r\n <!-- <label class=\"form-check-label\" (click)=\"select(item)\">{{\r\n item.text\r\n }}</label> -->\r\n <label *ngIf=\"item.disabled\" class=\"form-check-label\">{{\r\n item.text\r\n }}</label>\r\n <label\r\n *ngIf=\"!item.disabled\"\r\n class=\"form-check-label\"\r\n (click)=\"select(item)\"\r\n >{{ item.text }}</label\r\n >\r\n </div>\r\n </div>\r\n <!-- Multiple -->\r\n <div *ngIf=\"!treeview && multiple\">\r\n <div\r\n class=\"text-nowrap row-item\"\r\n [ngClass]=\"{ active: item.value === this.value }\"\r\n >\r\n <i\r\n *ngIf=\"item.children\"\r\n (click)=\"onCollapseExpand()\"\r\n aria-hidden=\"true\"\r\n [ngSwitch]=\"item.collapsed\"\r\n >\r\n <span\r\n *ngSwitchCase=\"true\"\r\n class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"\r\n ></span>\r\n <span\r\n *ngSwitchCase=\"false\"\r\n class=\"bi bi-caret-down-fill caret-icon\"\r\n ></span>\r\n </i>\r\n <!-- <input\r\n class=\"multiple-checkBox\"\r\n type=\"checkbox\"\r\n [checked]=\"multipleSelection.includes(item.value)\"\r\n (change)=\"selectMultiple($event.target.checked, item)\"\r\n />\r\n\r\n <label class=\"form-check-label\">{{ item.text }}</label> -->\r\n <div class=\"multiple-treeview\">\r\n <mat-checkbox\r\n [checked]=\"isItemSelected(item)\"\r\n (change)=\"selectMultiple($event.checked, item)\"\r\n >\r\n <span> {{ item.text }} </span>\r\n </mat-checkbox>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- treeView -->\r\n <div *ngIf=\"treeview && !treeViewAsFormControl\" class=\"tree-view-container\">\r\n <div\r\n (mouseenter)=\"hoverField.style.display = 'flex'\"\r\n (mouseleave)=\"hoverField.style.display = 'none'\"\r\n class=\"text-nowrap row-item treeview-row\"\r\n [ngClass]=\"{\r\n selected: item.value == selectedItem,\r\n treeParentNode: item.value === fixedParentNode?.value\r\n }\"\r\n >\r\n <i\r\n *ngIf=\"item.children\"\r\n (click)=\"onCollapsed(item)\"\r\n aria-hidden=\"true\"\r\n [ngSwitch]=\"item.collapsed\"\r\n >\r\n <span\r\n *ngSwitchCase=\"true\"\r\n class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"\r\n ></span>\r\n\r\n <span\r\n *ngSwitchCase=\"false\"\r\n class=\"bi bi-caret-down-fill caret-icon\"\r\n ></span>\r\n </i>\r\n <label class=\"form-check-label-treeview\" (click)=\"select(item)\">\r\n <ng-conteiner *ngIf=\"item.value != fixedParentNode?.value\">{{\r\n item.text\r\n }}</ng-conteiner>\r\n <ng-conteiner *ngIf=\"item.value === fixedParentNode?.value\">{{\r\n item.text | translate\r\n }}</ng-conteiner>\r\n <span #hoverField class=\"hoverField\">\r\n <span\r\n type=\"button\"\r\n matTooltip=\"{{ 'department_management.form.edit' | translate }}\"\r\n (click)=\"onAction($event, 'update', item)\"\r\n >\r\n <li class=\"bi bi-pencil\"></li>\r\n </span>\r\n\r\n <span\r\n type=\"button\"\r\n matTooltip=\"{{\r\n 'department_management.form.toolTip_message' | translate\r\n }}\"\r\n (click)=\"onAction($event, 'add', item)\"\r\n >\r\n <li class=\"bi bi-plus\"></li>\r\n </span>\r\n </span>\r\n </label>\r\n </div>\r\n </div>\r\n <!-- treeView as form control -->\r\n <div *ngIf=\"treeview && treeViewAsFormControl\" class=\"tree-view-container\">\r\n <div\r\n class=\"text-nowrap row-item treeview-row-form-control\"\r\n [ngClass]=\"{ 'selected-form-control': item.value == selectedItem }\"\r\n >\r\n <i\r\n *ngIf=\"item.children\"\r\n (click)=\"onCollapsed(item)\"\r\n aria-hidden=\"true\"\r\n [ngSwitch]=\"item.collapsed\"\r\n >\r\n <span\r\n *ngSwitchCase=\"true\"\r\n class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"\r\n ></span>\r\n\r\n <span\r\n *ngSwitchCase=\"false\"\r\n class=\"bi bi-caret-down-fill caret-icon\"\r\n ></span>\r\n </i>\r\n <label class=\"form-check-label-treeview\" (click)=\"select(item)\"\r\n >{{ item.text }}\r\n </label>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template\r\n #headerTemplate\r\n let-config=\"config\"\r\n let-item=\"item\"\r\n let-onCollapseExpand=\"onCollapseExpand\"\r\n let-onCheckedChange=\"onCheckedChange\"\r\n let-onFilterTextChange=\"onFilterTextChange\"\r\n>\r\n <div *ngIf=\"config.hasFilter\" class=\"row row-filter\">\r\n <div class=\"col-12\">\r\n <input\r\n class=\"form-control\"\r\n type=\"text\"\r\n [placeholder]=\"i18n.getFilterPlaceholder(placeholder)\"\r\n [(ngModel)]=\"filterText\"\r\n (ngModelChange)=\"onFilterTextChange($event)\"\r\n />\r\n </div>\r\n </div>\r\n <div *ngIf=\"config.hasAllCheckBox || config.hasCollapseExpand\" class=\"row\">\r\n <div class=\"col-12\">\r\n <label *ngIf=\"config.hasAllCheckBox\" (click)=\"select(item)\">\r\n <strong>{{ i18n.getAllCheckboxText() }}</strong>\r\n </label>\r\n <label\r\n *ngIf=\"config.hasCollapseExpand\"\r\n class=\"float-right\"\r\n (click)=\"onCollapseExpand()\"\r\n >\r\n <i\r\n [title]=\"i18n.getTooltipCollapseExpandText(item.collapsed)\"\r\n aria-hidden=\"true\"\r\n [ngSwitch]=\"item.collapsed\"\r\n >\r\n <span *ngSwitchCase=\"true\" class=\"bi bi-arrows-angle-expand\"></span>\r\n <span\r\n *ngSwitchCase=\"false\"\r\n class=\"bi bi-arrows-angle-contract\"\r\n ></span>\r\n </i>\r\n </label>\r\n </div>\r\n </div>\r\n <a *ngIf=\"defaultSelect\" class=\"select-default\" (click)=\"selectDefault()\">{{\r\n \"department_management.selectDefault\" | translate\r\n }}</a>\r\n <div\r\n *ngIf=\"config.hasDivider\"\r\n class=\"dropdown-divider\"\r\n [ngClass]=\"{ 'dropdown-divider-noMargin': defaultSelect }\"\r\n ></div>\r\n</ng-template>\r\n\r\n<ng-container *ngIf=\"!treeview && !multiple\">\r\n <div class=\"dropdown-wrapper\">\r\n <ngx-dropdown-treeview\r\n [config]=\"config\"\r\n [headerTemplate]=\"headerTemplate\"\r\n [items]=\"items\"\r\n [itemTemplate]=\"itemTemplate\"\r\n >\r\n </ngx-dropdown-treeview>\r\n <div class=\"disable-effect\" *ngIf=\"disabled\"></div>\r\n </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!treeview && multiple\">\r\n <div class=\"multiple-tree-view dropdown-wrapper\">\r\n <ngx-dropdown-treeview\r\n [config]=\"config\"\r\n [items]=\"items\"\r\n [itemTemplate]=\"itemTemplate\"\r\n >\r\n </ngx-dropdown-treeview>\r\n <div class=\"disable-effect\" *ngIf=\"disabled\"></div>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"treeview && !treeViewAsFormControl\">\r\n <div class=\"tree-view\">\r\n <ngx-treeview\r\n [config]=\"config\"\r\n [headerTemplate]=\"headerTemplate\"\r\n [items]=\"items\"\r\n [itemTemplate]=\"itemTemplate\"\r\n >\r\n </ngx-treeview>\r\n </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"treeview && treeViewAsFormControl\">\r\n <div class=\"tree-view-form-control\">\r\n <ngx-treeview\r\n [config]=\"config\"\r\n [headerTemplate]=\"headerTemplate\"\r\n [items]=\"items\"\r\n [itemTemplate]=\"itemTemplate\"\r\n >\r\n </ngx-treeview>\r\n </div>\r\n</ng-container>\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}.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{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}.caret-icon{color:#6c757d;font-size:14px}.dropdown-wrapper{position:relative}.dropdown-wrapper .disable-effect{position:absolute;top:0;bottom:0;left:0;right:0;z-index:99}.multiple-treeview .mat-checkbox-ripple .mat-ripple-element,.multiple-treeview .mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#33e3b7!important}.multiple-treeview .mat-checkbox-ripple .mat-ripple-element{position:fixed;left:inherit;top:inherit;transform:translate(-3px,-3px)!important}.multiple-treeview mat-checkbox .mat-checkbox-background{background-color:#d9dce2!important}.form-check-label-treeview{display:flex;align-items:center;justify-content:space-between;width:100%}.form-check-label-treeview .hoverField{display:none;align-items:center;text-align:center}.form-check-label-treeview .hoverField span{display:flex;align-items:center;justify-content:center;margin:0 3px;border:none;background-color:snow;background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:30px;width:30px;color:#fff;border-radius:5px;list-style:none;margin-inline-end:4px}.form-check-label-treeview .hoverField span .bi-plus{font-size:28px;display:flex;justify-content:center}.form-check-label-treeview .hoverField .add-btn{width:164px;padding:1px;display:flex;justify-content:center;align-items:center;font-size:13px;background-color:#0dbab5;border-radius:5px;border:0;color:#fff;--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.form-check-label-treeview .hoverField .plus-btn{display:flex;font-size:28px;align-items:center}.selected{background-color:#f5f6f8}.selected .hoverField{display:flex!important}.selected-form-control{background-color:#d9dce2}.selected-form-control .hoverField{display:flex!important}.treeview-item .row-item{display:flex;align-items:center;padding:5px 10px}.treeview-item .row-item .multiple-checkBox{margin-inline-start:4px;margin-inline-end:4px}.treeview-item .active{background-color:#f5f6f8}.treeview-row{display:flex;align-items:center}.treeview-row:hover{background-color:#f5f6f8}.treeview-row-form-control{display:flex;align-items:center}.treeview-row-form-control:hover{background-color:#d9dce2}label{margin-bottom:0;cursor:pointer}.bi{cursor:pointer;margin-right:.3rem}ngx-treeview .treeview-container{max-height:200px!important;overflow-x:hidden;scrollbar-color:#b4bac6 transparent!important;scrollbar-width:thin!important;overflow-y:auto}ngx-treeview .select-default{display:flex;justify-content:start;font-size:13px;cursor:pointer;margin-bottom:3px;margin-top:4px}ngx-treeview .dropdown-divider-noMargin{margin-top:0!important}.tree-view ngx-treeview .treeview-container{max-height:500px!important;overflow-x:hidden}.tree-view-form-control ngx-treeview .treeview-container{max-height:300px!important;overflow-x:hidden}ngx-dropdown-treeview .dropdown .dropdown-menu{margin-top:0!important;width:100%}ngx-dropdown-treeview .dropdown .btn-outline-secondary{background-color:#8f98aa1a;border:none!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:hover{color:#6c757d!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:focus{box-shadow:none!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:active{background-color:#8f98aa1a!important;border:none!important;color:#6c757d!important}ngx-dropdown-treeview .dropdown:after{position:static!important}ngx-dropdown-treeview .show .dropdown-toggle{background-color:#8f98aa1a!important;border:none!important;color:#6c757d!important}.rtl .treeview-item .treeview-item{margin-right:2rem!important;margin-left:0!important}.rtl .row-all .col-12{text-align:right}.rtl .row-all .col-12 .pull-right{float:left!important}.rtl .form-check.form-check-inline{margin-right:0!important}.rtl .btn.dropdown-toggle{margin-right:0!important}.rtl .dropdown-menu:not(ngb-datepicker){right:0px;left:unset}.rtl .dropdown :after{margin-top:.6rem;left:.6rem;right:unset!important}.rtl ngx-treeview-item{text-align:right;direction:rtl}@media (min-width: 576px){.rtl .form-inline .form-check-input{margin:3px}}.rtl .form-inline .form-check-input{margin:3px;position:inherit}.rtl .dropdown button{text-align:right!important;direction:rtl}.rtl .fa.fa-caret-right{transform:rotate(180deg)}\n"], components: [{ type: i7__namespace$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i1__namespace$6.DropdownTreeviewComponent, selector: "ngx-dropdown-treeview", inputs: ["buttonClass", "config", "headerTemplate", "itemTemplate", "items"], outputs: ["selectedChange", "filterChange"] }, { type: i1__namespace$6.TreeviewComponent, selector: "ngx-treeview", inputs: ["config", "headerTemplate", "itemTemplate", "items"], outputs: ["selectedChange", "filterChange"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4__namespace$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2__namespace$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i2__namespace$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2__namespace$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
10506
10512
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TreeviewSelectComponent, decorators: [{
10507
10513
  type: i0.Component,
10508
10514
  args: [{
@@ -10546,6 +10552,8 @@
10546
10552
  type: i0.Input
10547
10553
  }], disabled: [{
10548
10554
  type: i0.Input
10555
+ }], selectDepChildren: [{
10556
+ type: i0.Input
10549
10557
  }], displayIsAllowRecExternal: [{
10550
10558
  type: i0.Input
10551
10559
  }], actionClicked: [{
@@ -10776,7 +10784,7 @@
10776
10784
  return DynamicFormDepartmentComponent;
10777
10785
  }());
10778
10786
  DynamicFormDepartmentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicFormDepartmentComponent, deps: [{ token: TranslationService }, { token: DepartmentApiService }, { token: i2__namespace$6.NgControl, optional: true, self: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
10779
- DynamicFormDepartmentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormDepartmentComponent, selector: "app-dynamic-form-department", inputs: { treeview: "treeview", treeViewAsFormControl: "treeViewAsFormControl", placeholder: "placeholder", multiple: "multiple", searchable: "searchable", label: "label", defaultSelect: "defaultSelect", displayDepTypee: "displayDepTypee", displayIsAllowRecExternal: "displayIsAllowRecExternal", pp_departmentNestedTree: "pp_departmentNestedTree", pp_departmentTree: "pp_departmentTree", customPrefix: "customPrefix", useCustomAddEditAction: "useCustomAddEditAction", customParentProperty: "customParentProperty", customParams: "customParams", disabled: "disabled", nodesExpandedByDefault: "nodesExpandedByDefault", fixedParentNode: "fixedParentNode" }, outputs: { onSelecting: "onSelecting", actionClicked: "actionClicked", onDataLoad: "onDataLoad" }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"label\">\r\n <div>\r\n <label class=\"select-label\"\r\n >{{ label | translate\r\n }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\">*</span></label\r\n >\r\n </div>\r\n</ng-container>\r\n<app-dynamic-form-treeview-select\r\n [treeview]=\"treeview\"\r\n [treeViewAsFormControl]=\"treeViewAsFormControl\"\r\n [defaultSelect]=\"defaultSelect\"\r\n [multiple]=\"multiple\"\r\n [items]=\"data\"\r\n [placeholder]=\"placeholder\"\r\n [displayDepTypee]=\"displayDepTypee\"\r\n [displayIsAllowRecExternal]=\"displayIsAllowRecExternal\"\r\n [pp_departmentNestedTree]=\"pp_departmentNestedTree\"\r\n [useCustomAddEditAction]=\"useCustomAddEditAction\"\r\n [fixedParentNode]=\"fixedParentNode\"\r\n [customPrefix]=\"customPrefix\"\r\n [customParentProperty]=\"customParentProperty\"\r\n (valueChange)=\"getSelecteditems($event)\"\r\n [(value)]=\"selection\"\r\n (actionClicked)=\"onAction($event)\"\r\n [disabled]=\"disabled\"\r\n class=\"dropdown-wrapper\"\r\n [ngClass]=\"{ 'input-filled': selection && selection.length > 0 }\"\r\n>\r\n</app-dynamic-form-treeview-select>\r\n<mat-error\r\n [attr.data-automation-id]=\"'card-textitem-error-'\"\r\n class=\"app-textitem-editable-error\"\r\n *ngIf=\"hasErrors()\"\r\n>\r\n <ul>\r\n <li *ngIf=\"control.errors.required\">\r\n {{ \"VALIDATORS.REQUIRED\" | translate }}\r\n </li>\r\n </ul>\r\n</mat-error>\r\n", styles: ["app-dynamic-form-department .dropdown{border:1px solid #ccc!important;border-radius:5px!important}app-dynamic-form-department .input-filled .dropdown{border-color:#1a96c6!important}\n"], components: [{ type: TreeviewSelectComponent, selector: "app-dynamic-form-treeview-select", inputs: ["treeview", "treeViewAsFormControl", "config", "items", "value", "multiple", "defaultSelect", "pp_departmentNestedTree", "useCustomAddEditAction", "customPrefix", "customParentProperty", "placeholder", "defaultSelection", "displayDepTypee", "disabled", "displayIsAllowRecExternal", "fixedParentNode"], outputs: ["valueChange", "plusClicked", "actionClicked"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
10787
+ DynamicFormDepartmentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormDepartmentComponent, selector: "app-dynamic-form-department", inputs: { treeview: "treeview", treeViewAsFormControl: "treeViewAsFormControl", placeholder: "placeholder", multiple: "multiple", searchable: "searchable", label: "label", defaultSelect: "defaultSelect", displayDepTypee: "displayDepTypee", displayIsAllowRecExternal: "displayIsAllowRecExternal", pp_departmentNestedTree: "pp_departmentNestedTree", pp_departmentTree: "pp_departmentTree", customPrefix: "customPrefix", useCustomAddEditAction: "useCustomAddEditAction", customParentProperty: "customParentProperty", customParams: "customParams", disabled: "disabled", nodesExpandedByDefault: "nodesExpandedByDefault", fixedParentNode: "fixedParentNode" }, outputs: { onSelecting: "onSelecting", actionClicked: "actionClicked", onDataLoad: "onDataLoad" }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"label\">\r\n <div>\r\n <label class=\"select-label\"\r\n >{{ label | translate\r\n }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\">*</span></label\r\n >\r\n </div>\r\n</ng-container>\r\n<app-dynamic-form-treeview-select\r\n [treeview]=\"treeview\"\r\n [treeViewAsFormControl]=\"treeViewAsFormControl\"\r\n [defaultSelect]=\"defaultSelect\"\r\n [multiple]=\"multiple\"\r\n [items]=\"data\"\r\n [placeholder]=\"placeholder\"\r\n [displayDepTypee]=\"displayDepTypee\"\r\n [displayIsAllowRecExternal]=\"displayIsAllowRecExternal\"\r\n [pp_departmentNestedTree]=\"pp_departmentNestedTree\"\r\n [useCustomAddEditAction]=\"useCustomAddEditAction\"\r\n [fixedParentNode]=\"fixedParentNode\"\r\n [customPrefix]=\"customPrefix\"\r\n [customParentProperty]=\"customParentProperty\"\r\n (valueChange)=\"getSelecteditems($event)\"\r\n [(value)]=\"selection\"\r\n (actionClicked)=\"onAction($event)\"\r\n [disabled]=\"disabled\"\r\n class=\"dropdown-wrapper\"\r\n [ngClass]=\"{ 'input-filled': selection && selection.length > 0 }\"\r\n>\r\n</app-dynamic-form-treeview-select>\r\n<mat-error\r\n [attr.data-automation-id]=\"'card-textitem-error-'\"\r\n class=\"app-textitem-editable-error\"\r\n *ngIf=\"hasErrors()\"\r\n>\r\n <ul>\r\n <li *ngIf=\"control.errors.required\">\r\n {{ \"VALIDATORS.REQUIRED\" | translate }}\r\n </li>\r\n </ul>\r\n</mat-error>\r\n", styles: ["app-dynamic-form-department .dropdown{border:1px solid #ccc!important;border-radius:5px!important}app-dynamic-form-department .input-filled .dropdown{border-color:#1a96c6!important}\n"], components: [{ type: TreeviewSelectComponent, selector: "app-dynamic-form-treeview-select", inputs: ["treeview", "treeViewAsFormControl", "config", "items", "value", "multiple", "defaultSelect", "pp_departmentNestedTree", "useCustomAddEditAction", "customPrefix", "customParentProperty", "placeholder", "defaultSelection", "displayDepTypee", "disabled", "selectDepChildren", "displayIsAllowRecExternal", "fixedParentNode"], outputs: ["valueChange", "plusClicked", "actionClicked"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
10780
10788
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicFormDepartmentComponent, decorators: [{
10781
10789
  type: i0.Component,
10782
10790
  args: [{
@@ -14755,6 +14763,7 @@
14755
14763
  type: i0.Input
14756
14764
  }] } });
14757
14765
 
14766
+ var _TableComponent_resizeObserver;
14758
14767
  var TABLE_MODE = {
14759
14768
  list: 'list',
14760
14769
  card: 'card',
@@ -14839,6 +14848,9 @@
14839
14848
  this.tableWidth = 'auto';
14840
14849
  this.tableColumnsSub = new rxjs.BehaviorSubject([]);
14841
14850
  this.tableColumns$ = this.tableColumnsSub.asObservable();
14851
+ _TableComponent_resizeObserver.set(this, void 0);
14852
+ this.defaultColumnSize = 200;
14853
+ this.sumOfColumnSizes$ = this.tableColumns$.pipe(operators.map(function (columns) { return columns.reduce(function (sum, col) { return sum + (col.size || _this.defaultColumnSize); }, 0) + (_this.multiSelectRows ? 30 : 0); }));
14842
14854
  this.selected = [];
14843
14855
  this.pageNumber = 1;
14844
14856
  this.responsiveView = false;
@@ -14869,6 +14881,21 @@
14869
14881
  enumerable: false,
14870
14882
  configurable: true
14871
14883
  });
14884
+ TableComponent.prototype.ngAfterViewInit = function () {
14885
+ var _this = this;
14886
+ var _a;
14887
+ if (!((_a = this.tableContainer) === null || _a === void 0 ? void 0 : _a.nativeElement))
14888
+ return;
14889
+ __classPrivateFieldSet(this, _TableComponent_resizeObserver, new ResizeObserver(function (entries) {
14890
+ _this.dataTable.recalculate();
14891
+ }), "f");
14892
+ __classPrivateFieldGet(this, _TableComponent_resizeObserver, "f").observe(this.tableContainer.nativeElement);
14893
+ };
14894
+ TableComponent.prototype.ngOnDestroy = function () {
14895
+ if (__classPrivateFieldGet(this, _TableComponent_resizeObserver, "f")) {
14896
+ __classPrivateFieldGet(this, _TableComponent_resizeObserver, "f").disconnect();
14897
+ }
14898
+ };
14872
14899
  TableComponent.prototype.ngOnChanges = function (changes) {
14873
14900
  var _a, _b;
14874
14901
  if (changes.columns && !((_a = changes === null || changes === void 0 ? void 0 : changes.columns) === null || _a === void 0 ? void 0 : _a.isFirstChange())) {
@@ -14951,8 +14978,9 @@
14951
14978
  };
14952
14979
  return TableComponent;
14953
14980
  }());
14981
+ _TableComponent_resizeObserver = new WeakMap();
14954
14982
  TableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TableComponent, deps: [{ token: NuxeoService }, { token: AppConfigService }, { token: TranslationService }], target: i0__namespace.ɵɵFactoryTarget.Component });
14955
- TableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", 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", componentName: "componentName", tableActions: "tableActions", format: "format", defultSort: "defultSort", highlightSelectedCard: "highlightSelectedCard", multiSelectRows: "multiSelectRows", customFirstRow: "customFirstRow", showActionsAsMenu: "showActionsAsMenu", messages: "messages" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", onIconSelected: "onIconSelected", actionOnRow: "actionOnRow", onSorting: "onSorting", onMultiRowSelected: "onMultiRowSelected" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div\r\n\tclass=\"iner-table-container\"\r\n\t[style]=\"'width:' + tableWidth\"\r\n\t*ngIf=\"tableMode === tableModes.list && !responsiveView\"\r\n>\r\n\t<ngx-datatable\r\n\t\t[ngClass]=\"{ overflowVisible: customFirstRow }\"\r\n\t\tclass=\"large-table\"\r\n\t\t[rows]=\"rows\"\r\n\t\t[summaryRow]=\"customFirstRow\"\r\n\t\t[columnMode]=\"'force'\"\r\n\t\t[externalSorting]=\"true\"\r\n\t\t(activate)=\"rowDetails($event)\"\r\n\t\t(select)=\"onSelect($event)\"\r\n\t\t(sort)=\"onSort($event)\"\r\n\t\t(window:resize)=\"assignTableColumns($event)\"\r\n\t\t[rowHeight]=\"'auto'\"\r\n\t\t[selected]=\"selected\"\r\n\t\t[selectionType]=\"multiSelectRows ? 'checkbox' : 'single'\"\r\n\t\t[sorts]=\"[{ prop: defultSort?.name, dir: defultSort?.dir }]\"\r\n\t\t[messages]=\"messages\"\r\n\r\n\t>\r\n\t\t<ngx-datatable-column\r\n\t\t\t*ngIf=\"multiSelectRows\"\r\n\t\t\t[width]=\"30\"\r\n\t\t\t[sortable]=\"false\"\r\n\t\t\t[prop]=\"''\"\r\n\t\t\t[canAutoResize]=\"false\"\r\n\t\t\t[draggable]=\"false\"\r\n\t\t\t[resizeable]=\"false\"\r\n\t\t>\r\n\t\t\t<ng-template\r\n\t\t\t\tngx-datatable-header-template\r\n\t\t\t\tlet-value=\"value\"\r\n\t\t\t\tlet-allRowsSelected=\"allRowsSelected\"\r\n\t\t\t\tlet-selectFn=\"selectFn\"\r\n\t\t\t>\r\n\t\t\t\t<mat-checkbox color=\"primary\" [checked]=\"allRowsSelected\" (change)=\"selectFn(!allRowsSelected)\"> </mat-checkbox>\r\n\t\t\t</ng-template>\r\n\t\t\t<ng-template\r\n\t\t\t\tngx-datatable-cell-template\r\n\t\t\t\tlet-value=\"value\"\r\n\t\t\t\tlet-isSelected=\"isSelected\"\r\n\t\t\t\tlet-onCheckboxChangeFn=\"onCheckboxChangeFn\"\r\n\t\t\t>\r\n\t\t\t\t<mat-checkbox color=\"primary\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\"> </mat-checkbox>\r\n\t\t\t</ng-template>\r\n\t\t</ngx-datatable-column>\r\n\t\t<!-- | translate -->\r\n\r\n\t\t<ng-container *ngIf=\"tableColumns$ | async as columns\">\r\n\t\t\t<ngx-datatable-column *ngIf=\"!columns.length\"></ngx-datatable-column>\r\n\r\n\t\t\t<ng-container *ngIf=\"!!columns?.length\">\r\n\t\t\t\t<ng-container *ngFor=\"let column of columns; let i = index\">\r\n\t\t\t\t\t<ng-container *permission=\"{ name: column.permission }\">\r\n\t\t\t\t\t\t<ngx-datatable-column\r\n\t\t\t\t\t\t\t*ngIf=\"column.display\"\r\n\t\t\t\t\t\t\t[sortable]=\"column.sortable\"\r\n\t\t\t\t\t\t\t[name]=\"prefix + column.name | translate\"\r\n\t\t\t\t\t\t\t[prop]=\"column.prop\"\r\n\t\t\t\t\t\t\t[resizeable]=\"false\"\r\n\t\t\t\t\t\t\t[draggable]=\"false\"\r\n\t\t\t\t\t\t\t[width]=\"column?.size\"\r\n\t\t\t\t\t\t\t[headerClass]=\"column.headerClass ? column.headerClass : ''\"\r\n\t\t\t\t\t\t\t[summaryTemplate]=\"customFirstRow ? customRowTemplate : null\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<ng-template let-row=\"row\" let-value=\"value\" let-index=\"index\" ngx-datatable-cell-template>\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'text'\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\" *ngIf=\"!column.withTooltip\">\r\n\t\t\t\t\t\t\t\t\t\t{{ value ? value : '--' }}\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\" matTooltip=\"{{ value ? value : '--' }}\" *ngIf=\"column.withTooltip\">\r\n\t\t\t\t\t\t\t\t\t\t{{ value ? value : '--' }}\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'vocabulary'\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t\t<cts-dropdown-viewer [withOutLabel]=\"true\" [value]=\"value\" [dropdownId]=\"column.vocabularyId\">\r\n\t\t\t\t\t\t\t\t\t\t</cts-dropdown-viewer>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'VocCell'\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t\t{{ (value ? column.vocabularyId + '.' + value : '--') | translate }}\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'VocItem'\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t\t{{ vocItemTranslationPrefix + value | translate }}\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'department'\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t\t<cts-department-viewer [noStyle]=\"true\" [value]=\"value\"> </cts-department-viewer>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'status'\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"status-wrapper\">\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"value {{ value }}\">\r\n\t\t\t\t\t\t\t\t\t\t\t<span\r\n\t\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"statusIcons && statusIcons !== {}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"status-icon {{ statusIcons[value] }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t></span>\r\n\t\t\t\t\t\t\t\t\t\t\t{{ 'STATS.' + value | translate }}\r\n\t\t\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'role'\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t\t{{ 'role.' + (value ? value : '--') | translate }}\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'actions' && rows.length !== 0\">\r\n\t\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t\t[ngClass]=\"disabledActions ? 'disabled-actions-wrapper' : 'actions-wrapper'\"\r\n\t\t\t\t\t\t\t\t\t\t*ngIf=\"!showActionsAsMenu\"\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t<!-- <span class=\"bi bi-trash delete-icon\" (click)=\"performAction(row , 'delete')\"></span> -->\r\n\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"bi bi-pencil-square edit-icon\"\r\n\t\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ 'UPDATE' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'edit')\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'voc-table'\"\r\n\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"bi bi-trash\"\r\n\t\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ 'delete' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'delete')\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'voc-table' || entityType === 'department' || entityType === 'signers'\"\r\n\t\t\t\t\t\t\t\t\t\t></i>\r\n\r\n\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"bi bi-plus-square\"\r\n\t\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ 'USER_MANGMENT.addToDepartment' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'delete')\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'users' && row.isInitial\"\r\n\t\t\t\t\t\t\t\t\t\t></i>\r\n\r\n\t\t\t\t\t\t\t\t\t\t<span *ngFor=\"let action of column.actions\">\r\n\t\t\t\t\t\t\t\t\t\t\t<ng-container *ngIf=\"action.type == 'button'; else showIcon\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ action.class }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon *ngIf=\"action.icon\" [class]=\"action.iconClass\" [svgIcon]=\"action.icon\"> </mat-icon>\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{{ action.title | translate }}\r\n\t\t\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t\t\t<ng-template #showIcon>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ action.icon }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ action.tooltip | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t\t\t\t</span>\r\n\r\n\t\t\t\t\t\t\t\t\t\t<!-- <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\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t\t[ngClass]=\"disabledActions ? 'disabled-actions-wrapper' : 'actions-wrapper'\"\r\n\t\t\t\t\t\t\t\t\t\t*ngIf=\"showActionsAsMenu\"\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t<button class=\"action-menu-trigger\" [matMenuTriggerFor]=\"menu\" [disabled]=\"disabledActions\">\r\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"bi bi-three-dots-vertical\"></i>\r\n\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t<mat-menu #menu=\"matMenu\" class=\"datatable-actions-menu\">\r\n\t\t\t\t\t\t\t\t\t\t\t<button mat-menu-item (click)=\"performAction(row, 'edit')\" *ngIf=\"entityType === 'voc-table'\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"bi bi-pencil-square edit-icon\"></i>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"action-text\">{{ 'UPDATE' | translate }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\t\t\tmat-menu-item\r\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'delete')\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'voc-table' || entityType === 'department' || entityType === 'signers'\"\r\n\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"bi bi-trash\"></i>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"action-text\">{{ 'delete' | translate }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\t\t\tmat-menu-item\r\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'delete')\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'users' && row.isInitial\"\r\n\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"bi bi-plus-square\"></i>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"action-text\">{{ 'USER_MANGMENT.addToDepartment' | translate }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t\t<ng-conttainer *ngFor=\"let action of column.actions\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"{{ action.icon }}\"></i>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"action-text\">{{ action.tooltip | translate }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t\t</ng-conttainer>\r\n\t\t\t\t\t\t\t\t\t\t</mat-menu>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'date'\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t\t<cts-date-viewer [withOutLabel]=\"true\" [value]=\"value\"></cts-date-viewer>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'custom'\">\r\n\t\t\t\t\t\t\t\t\t<cts-dynamic-column [id]=\"column.template\" [column]=\"column\" [context]=\"row\"> </cts-dynamic-column>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'direction'\">\r\n\t\t\t\t\t\t\t\t\t<div (click)=\"iconSelected($event, row)\" class=\"status-wrapper {{ value }} {{ row.state }}\">\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"iner-status-wrapper\" matTooltip=\"{{ 'STATS.' + row.state | translate }}\">\r\n\t\t\t\t\t\t\t\t\t\t\t<ng-container *permission=\"{ name: 'isFavorite', entity: row }\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"fav-icon-indicator bi bi-star-fill\"></span>\r\n\t\t\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ directionIcons ? directionIcons['incoming'] : 'bi bi-box-arrow-down' }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"row.type === 'IncomingCorrespondence'\"\r\n\t\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ directionIcons ? directionIcons['outgoing'] : 'bi bi-box-arrow-up outgoing' }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"row.type === 'OutgoingCorrespondence'\"\r\n\t\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ directionIcons ? directionIcons['internal'] : 'bi bi-box-arrow-right internal' }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"row.type === 'InternalCorrespondence'\"\r\n\t\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t\t\t<!-- <span class=\"value {{ value }}\">{{ \"STATS.\" + value | translate }}</span> -->\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t<ng-template #customRowTemplate let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\r\n\t\t\t\t\t\t\t\t<div class=\"w-full flex items-center justify-center overflow-visible\">\r\n\t\t\t\t\t\t\t\t\t<cts-dynamic-column [id]=\"column.custom1stCellTemplate\" [column]=\"column\" [context]=\"row\">\r\n\t\t\t\t\t\t\t\t\t</cts-dynamic-column>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t</ngx-datatable-column>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</ngx-datatable>\r\n</div>\r\n\r\n<div *ngIf=\"responsiveView && tableMode !== tableModes.card\" (window:resize)=\"assignTableColumns($event)\">\r\n\t<div class=\"dynamic-cards-container\">\r\n\t\t<div\r\n\t\t\tclass=\"single-card\"\r\n\t\t\t[ngClass]=\"{ 'selected-card': highlightSelectedCard && row?.isSelected }\"\r\n\t\t\t*ngFor=\"let row of rows\"\r\n\t\t>\r\n\t\t\t<div class=\"memo-title\">\r\n\t\t\t\t<span>\r\n\t\t\t\t\t{{ row.properties.referenceNumber }}\r\n\t\t\t\t</span>\r\n\t\t\t\t<span class=\"action-wrap\">\r\n\t\t\t\t\t<span class=\"action\" *ngFor=\"let action of tableActions\">\r\n\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\tclass=\"{{ action.icon }}\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ action.tooltip | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t></i>\r\n\t\t\t\t\t</span>\r\n\t\t\t\t</span>\r\n\t\t\t</div>\r\n\t\t\t<div *ngIf=\"tableColumns.length > 1\">\r\n\t\t\t\t<div class=\"memo-body\" *ngFor=\"let property of tableColumns$ | async\" (click)=\"cardSelected(row)\">\r\n\t\t\t\t\t<div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n\t\t\t\t\t<div class=\"value\">\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'owner'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.owner]?.[property.value] }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] | localizedDate: format : (isArabic ? 'ar-AR' : 'en-US') }}\r\n\t\t\t\t\t\t\t<!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div *ngIf=\"property.type === 'status'\" class=\"value {{ row[property.value] }}\">\r\n\t\t\t\t\t\t\t{{ 'STATS.' + row[property.value] | translate }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div *ngIf=\"property.type === 'department'\">\r\n\t\t\t\t\t\t\t<cts-department-viewer [noStyle]=\"true\" [value]=\"row.properties[property.value]\"> </cts-department-viewer>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div *ngIf=\"property.type === 'vocabulary'\" class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t<cts-dropdown-viewer\r\n\t\t\t\t\t\t\t\t[withOutLabel]=\"true\"\r\n\t\t\t\t\t\t\t\t[value]=\"row.properties[property.value]\"\r\n\t\t\t\t\t\t\t\t[dropdownId]=\"property.vocabularyId\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t</cts-dropdown-viewer>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t*ngIf=\"property.type === 'direction'\"\r\n\t\t\t\t\t\t\t(click)=\"iconSelected($event, row)\"\r\n\t\t\t\t\t\t\tclass=\"status-wrapper {{ property.value }} {{ row.state }}\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<span class=\"iner-status-wrapper\" matTooltip=\"{{ 'STATS.' + row.state | translate }}\">\r\n\t\t\t\t\t\t\t\t<ng-container *permission=\"{ name: 'isFavorite', entity: row }\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"fav-icon-indicator bi bi-star-fill\"></span>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t<i class=\"bi bi-box-arrow-down\" *ngIf=\"row.type === 'IncomingCorrespondence'\"></i>\r\n\t\t\t\t\t\t\t\t<i class=\"bi bi-box-arrow-up outgoing\" *ngIf=\"row.type === 'OutgoingCorrespondence'\"></i>\r\n\t\t\t\t\t\t\t\t<i class=\"bi bi-box-arrow-right internal\" *ngIf=\"row.type === 'InternalCorrespondence'\"></i>\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div *ngIf=\"property.type === 'custom'\">\r\n\t\t\t\t\t\t\t<cts-dynamic-column [id]=\"property.template\" [column]=\"property\" [context]=\"row\"> </cts-dynamic-column>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<ng-container *ngIf=\"tableColumns.length === 1\">\r\n\t\t\t<div class=\"iner-card-container {{ entityType }}\" (click)=\"cardSelected(row)\" *ngFor=\"let row of rows\">\r\n\t\t\t\t<cts-dynamic-column [id]=\"columns[0].template\" [column]=\"columns[0]\" [context]=\"row\"> </cts-dynamic-column>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.card\">\r\n\t<div class=\"cards-container\">\r\n\t\t<div class=\"single-card\" *ngFor=\"let row of rows; let i = index\">\r\n\t\t\t<div class=\"memo-title\">\r\n\t\t\t\t<span>\r\n\t\t\t\t\t{{ row.properties.referenceNumber }}\r\n\t\t\t\t</span>\r\n\t\t\t\t<span class=\"action-wrap\">\r\n\t\t\t\t\t<span class=\"action\" *ngFor=\"let action of tableActions\">\r\n\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\tclass=\"{{ action.icon }}\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ action.tooltip | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t></i>\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t<button\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'deleteMemo',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t(click)=\"performAction(row, 'deleteMemo')\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<i class=\"bi bi-trash\" matTooltip=\"{{ 'LISTING.ONLY_DELETE' | translate }}\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<button\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'terminateDelegation',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t(click)=\"performAction(row, 'terminateDelegation')\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<i class=\"bi bi-trash\" matTooltip=\"{{ 'LISTING.CANCEL' | translate }}\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<span\r\n\t\t\t\t\t\tclass=\"publish-state\"\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'memoPublished',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ 'MEMOS.PUBLISHED' | translate }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t<span\r\n\t\t\t\t\t\tclass=\"publish-state\"\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'delegationFinished',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ 'delegations.finished' | translate }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t<span\r\n\t\t\t\t\t\tclass=\"publish-state\"\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'delegationActive',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ 'delegations.active' | translate }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t</span>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"memo-body\" *ngFor=\"let property of tableColumns$ | async\" (click)=\"cardSelected(row); cardFocused(i)\">\r\n\t\t\t\t<div class=\"key\" *ngIf=\"property.type !== 'default'\">\r\n\t\t\t\t\t{{ prefix + property.key | translate }}\r\n\t\t\t\t</div>\r\n\t\t\t\t<ng-container *ngIf=\"property.type === 'default'\">\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"key\"\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'internalIsEnabled',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ prefix + property.key | translate }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</ng-container>\r\n\t\t\t\t<div class=\"value\">\r\n\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n\t\t\t\t\t\t{{ row.properties[property.value] }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'user'\">\r\n\t\t\t\t\t\t{{ row.properties[property.value].fullName }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n\t\t\t\t\t\t{{ row.properties[property.value] | localizedDate: format : (isArabic ? 'ar-AR' : 'en-US') }}\r\n\t\t\t\t\t\t<!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'boolean'\">\r\n\t\t\t\t\t\t{{ (row.properties[property.value] ? 'Yes' : 'No') | translate }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<ng-container *ngIf=\"property.type === 'default'\">\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\tclass=\"text\"\r\n\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\tname: 'internalIsEnabled',\r\n\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t<ng-container *ngIf=\"property.type === 'custom'\">\r\n\t\t\t\t\t\t<div class=\"text\" *ngFor=\"let item of row.properties[property.value]\">\r\n\t\t\t\t\t\t\t{{ item | translate }} {{ ', ' }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.dynamicCard\">\r\n\t<div class=\"cards-container\">\r\n\t\t<div\r\n\t\t\tclass=\"single-card\"\r\n\t\t\t[ngClass]=\"{ 'selected-card': highlightSelectedCard && row?.isSelected }\"\r\n\t\t\t*ngFor=\"let row of rows\"\r\n\t\t>\r\n\t\t\t<div *ngIf=\"tableColumns.length > 1\">\r\n\t\t\t\t<div class=\"memo-body\" *ngFor=\"let property of tableColumns$ | async\" (click)=\"cardSelected(row)\">\r\n\t\t\t\t\t<div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n\t\t\t\t\t<div class=\"value\">\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] | localizedDate: format : (isArabic ? 'ar-AR' : 'en-US') }}\r\n\t\t\t\t\t\t\t<!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"iner-card-container {{ entityType }}\" (click)=\"cardSelected(row)\" *ngIf=\"tableColumns.length === 1\">\r\n\t\t\t\t<cts-dynamic-column [id]=\"tableColumns[0].template\" [column]=\"tableColumns[0]\" [context]=\"row\">\r\n\t\t\t\t</cts-dynamic-column>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.custom\" class=\"table-custom-view\">\r\n\t<app-dynamic-component\r\n\t\tclass=\"table-custom-view__component\"\r\n\t\t*ngFor=\"let row of rows\"\r\n\t\t[componentName]=\"componentName\"\r\n\t\t[row]=\"row\"\r\n\t\t[rowAction]=\"actionOnRow\"\r\n\t\t[onClick]=\"onRowSelected\"\r\n\t\t(click)=\"cardSelected(row)\"\r\n\t\t[class.dynamic-selected-card]=\"highlightSelectedCard && row?.isSelected\"\r\n\t></app-dynamic-component>\r\n</div>\r\n", 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}.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{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}.iner-table-container{max-width:var(--table-container-max-width, 100%)}.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-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-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-scroll{width:100%!important}.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-summary-row .datatable-row-center{overflow:visible!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-row-center .datatable-body-cell{overflow:visible!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row{height:50px;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:100%!important;height:100%}.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{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,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .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,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .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 .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{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:#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: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:#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:#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:#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:#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:#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:#06a57e;color:#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:#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:#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:#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:#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:#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:#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;font-size:30px}.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;font-size:30px}.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{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,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .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,.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:#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(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}.rtl .ngx-datatable .datatable-body .status-wrapper .fav-icon-indicator{left:-10px;top:15px!important;right:auto!important}.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:bold;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:bold}.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:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .inProgress{background-color:#3c3cf0;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .registered{background-color:#5a1496;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .archived{background-color:#fbb62c;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .closed{background-color:#00dca5;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .approved{background-color:#06a57e;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .assigned{background-color:#fd6670;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .sent{background-color:#3c3cf0;color:#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:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .under_sign{background-color:#dda722;color:#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)));grid-gap:var(--tcv-gap, 1rem);gap:var(--tcv-gap, 1rem);padding-inline:var(--tcv-padding-inline, 1rem);padding-block:var(--tcv-padding-block, 1rem)}\n"], components: [{ type: i4__namespace$2.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: i7__namespace$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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: i3__namespace$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3__namespace$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: DateViewerComponent, selector: "cts-date-viewer", inputs: ["label", "value", "vertical", "format", "hijri", "withOutLabel"] }, { type: DynamicColumnComponent, selector: "cts-dynamic-column", inputs: ["id", "context", "column"] }, { type: DynamicCustomComponent, selector: "app-dynamic-component", inputs: ["componentName", "row", "rowAction", "onClick"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$2.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__namespace$2.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { type: i4__namespace$2.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i2__namespace$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i3__namespace$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe, "localizedDate": LocalizedDatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
14983
+ TableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", 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", componentName: "componentName", tableActions: "tableActions", format: "format", defultSort: "defultSort", highlightSelectedCard: "highlightSelectedCard", multiSelectRows: "multiSelectRows", customFirstRow: "customFirstRow", showActionsAsMenu: "showActionsAsMenu", messages: "messages", defaultColumnSize: "defaultColumnSize" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", onIconSelected: "onIconSelected", actionOnRow: "actionOnRow", onSorting: "onSorting", onMultiRowSelected: "onMultiRowSelected" }, viewQueries: [{ propertyName: "dataTable", first: true, predicate: i4$2.DatatableComponent, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\r\n\t#tableContainer\r\n\tclass=\"iner-table-container\"\r\n\t[style]=\"'width:' + tableWidth\"\r\n\t*ngIf=\"tableMode === tableModes.list && !responsiveView\"\r\n>\r\n\t<ngx-datatable\r\n\t\t[ngClass]=\"{ overflowVisible: customFirstRow }\"\r\n\t\tclass=\"large-table\"\r\n\t\t[rows]=\"rows\"\r\n\t\t[summaryRow]=\"customFirstRow\"\r\n\t\t[columnMode]=\"'standard'\"\r\n\t\t[scrollbarH]=\"true\"\r\n\t\t[style.width.%]=\"100\"\r\n\t\t[externalSorting]=\"true\"\r\n\t\t(activate)=\"rowDetails($event)\"\r\n\t\t(select)=\"onSelect($event)\"\r\n\t\t(sort)=\"onSort($event)\"\r\n\t\t(window:resize)=\"assignTableColumns($event)\"\r\n\t\t[rowHeight]=\"'auto'\"\r\n\t\t[selected]=\"selected\"\r\n\t\t[selectionType]=\"multiSelectRows ? 'checkbox' : 'single'\"\r\n\t\t[sorts]=\"[{ prop: defultSort?.name, dir: defultSort?.dir }]\"\r\n\t\t[messages]=\"messages\"\r\n\t>\r\n\t\t<ngx-datatable-column\r\n\t\t\t*ngIf=\"multiSelectRows\"\r\n\t\t\t[width]=\"30\"\r\n\t\t\t[sortable]=\"false\"\r\n\t\t\t[prop]=\"''\"\r\n\t\t\t[canAutoResize]=\"false\"\r\n\t\t\t[draggable]=\"false\"\r\n\t\t\t[resizeable]=\"false\"\r\n\t\t>\r\n\t\t\t<ng-template\r\n\t\t\t\tngx-datatable-header-template\r\n\t\t\t\tlet-value=\"value\"\r\n\t\t\t\tlet-allRowsSelected=\"allRowsSelected\"\r\n\t\t\t\tlet-selectFn=\"selectFn\"\r\n\t\t\t>\r\n\t\t\t\t<mat-checkbox color=\"primary\" [checked]=\"allRowsSelected\" (change)=\"selectFn(!allRowsSelected)\"> </mat-checkbox>\r\n\t\t\t</ng-template>\r\n\t\t\t<ng-template\r\n\t\t\t\tngx-datatable-cell-template\r\n\t\t\t\tlet-value=\"value\"\r\n\t\t\t\tlet-isSelected=\"isSelected\"\r\n\t\t\t\tlet-onCheckboxChangeFn=\"onCheckboxChangeFn\"\r\n\t\t\t>\r\n\t\t\t\t<mat-checkbox color=\"primary\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\"> </mat-checkbox>\r\n\t\t\t</ng-template>\r\n\t\t</ngx-datatable-column>\r\n\t\t<!-- | translate -->\r\n\r\n\t\t<ng-container *ngIf=\"tableColumns$ | async as columns\">\r\n\t\t\t<ngx-datatable-column *ngIf=\"!columns.length\"></ngx-datatable-column>\r\n\r\n\t\t\t<!-- [frozenRight]=\"column.type === 'actions'\" -->\r\n\t\t\t<ng-container *ngFor=\"let column of columns; let i = index\">\r\n\t\t\t\t<ng-container *permission=\"{ name: column.permission }\">\r\n\t\t\t\t\t<ngx-datatable-column\r\n\t\t\t\t\t\t*ngIf=\"column.display\"\r\n\t\t\t\t\t\t[sortable]=\"column.sortable\"\r\n\t\t\t\t\t\t[name]=\"prefix + column.name | translate\"\r\n\t\t\t\t\t\t[prop]=\"column.prop\"\r\n\t\t\t\t\t\t[resizeable]=\"false\"\r\n\t\t\t\t\t\t[draggable]=\"false\"\r\n\t\t\t\t\t\t[width]=\"column?.size || defaultColumnSize\"\r\n\t\t\t\t\t\t[headerClass]=\"column.headerClass ? column.headerClass : ''\"\r\n\t\t\t\t\t\t[summaryTemplate]=\"customFirstRow ? customRowTemplate : null\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<ng-template let-row=\"row\" let-value=\"value\" let-index=\"index\" ngx-datatable-cell-template>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'text'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\" *ngIf=\"!column.withTooltip\">\r\n\t\t\t\t\t\t\t\t\t{{ value ? value : '--' }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\" matTooltip=\"{{ value ? value : '--' }}\" *ngIf=\"column.withTooltip\">\r\n\t\t\t\t\t\t\t\t\t{{ value ? value : '--' }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'vocabulary'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t<cts-dropdown-viewer [withOutLabel]=\"true\" [value]=\"value\" [dropdownId]=\"column.vocabularyId\">\r\n\t\t\t\t\t\t\t\t\t</cts-dropdown-viewer>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'VocCell'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t{{ (value ? column.vocabularyId + '.' + value : '--') | translate }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'VocItem'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t{{ vocItemTranslationPrefix + value | translate }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'department'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t<cts-department-viewer [noStyle]=\"true\" [value]=\"value\"> </cts-department-viewer>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'status'\">\r\n\t\t\t\t\t\t\t\t<div class=\"status-wrapper\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"value {{ value }}\">\r\n\t\t\t\t\t\t\t\t\t\t<span *ngIf=\"statusIcons && statusIcons !== {}\" class=\"status-icon {{ statusIcons[value] }}\"></span>\r\n\t\t\t\t\t\t\t\t\t\t{{ 'STATS.' + value | translate }}\r\n\t\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'role'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t{{ 'role.' + (value ? value : '--') | translate }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'actions' && rows.length !== 0\">\r\n\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t[ngClass]=\"disabledActions ? 'disabled-actions-wrapper' : 'actions-wrapper'\"\r\n\t\t\t\t\t\t\t\t\t*ngIf=\"!showActionsAsMenu\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<!-- <span class=\"bi bi-trash delete-icon\" (click)=\"performAction(row , 'delete')\"></span> -->\r\n\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\tclass=\"bi bi-pencil-square edit-icon\"\r\n\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ 'UPDATE' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'edit')\"\r\n\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'voc-table'\"\r\n\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\tclass=\"bi bi-trash\"\r\n\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ 'delete' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'delete')\"\r\n\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'voc-table' || entityType === 'department' || entityType === 'signers'\"\r\n\t\t\t\t\t\t\t\t\t></i>\r\n\r\n\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\tclass=\"bi bi-plus-square\"\r\n\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ 'USER_MANGMENT.addToDepartment' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'delete')\"\r\n\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'users' && row.isInitial\"\r\n\t\t\t\t\t\t\t\t\t></i>\r\n\r\n\t\t\t\t\t\t\t\t\t<span *ngFor=\"let action of column.actions\">\r\n\t\t\t\t\t\t\t\t\t\t<ng-container *ngIf=\"action.type == 'button'; else showIcon\">\r\n\t\t\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ action.class }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon *ngIf=\"action.icon\" [class]=\"action.iconClass\" [svgIcon]=\"action.icon\"> </mat-icon>\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t\t{{ action.title | translate }}\r\n\t\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t\t<ng-template #showIcon>\r\n\t\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ action.icon }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ action.tooltip | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t\t\t</span>\r\n\r\n\t\t\t\t\t\t\t\t\t<!-- <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\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t[ngClass]=\"disabledActions ? 'disabled-actions-wrapper' : 'actions-wrapper'\"\r\n\t\t\t\t\t\t\t\t\t*ngIf=\"showActionsAsMenu\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<button class=\"action-menu-trigger\" [matMenuTriggerFor]=\"menu\" [disabled]=\"disabledActions\">\r\n\t\t\t\t\t\t\t\t\t\t<i class=\"bi bi-three-dots-vertical\"></i>\r\n\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t<mat-menu #menu=\"matMenu\" class=\"datatable-actions-menu\">\r\n\t\t\t\t\t\t\t\t\t\t<button mat-menu-item (click)=\"performAction(row, 'edit')\" *ngIf=\"entityType === 'voc-table'\">\r\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"bi bi-pencil-square edit-icon\"></i>\r\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"action-text\">{{ 'UPDATE' | translate }}</span>\r\n\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\t\tmat-menu-item\r\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'delete')\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'voc-table' || entityType === 'department' || entityType === 'signers'\"\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"bi bi-trash\"></i>\r\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"action-text\">{{ 'delete' | translate }}</span>\r\n\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\t\tmat-menu-item\r\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'delete')\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'users' && row.isInitial\"\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"bi bi-plus-square\"></i>\r\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"action-text\">{{ 'USER_MANGMENT.addToDepartment' | translate }}</span>\r\n\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t<ng-conttainer *ngFor=\"let action of column.actions\">\r\n\t\t\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"{{ action.icon }}\"></i>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"action-text\">{{ action.tooltip | translate }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t</ng-conttainer>\r\n\t\t\t\t\t\t\t\t\t</mat-menu>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'date'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t<cts-date-viewer [withOutLabel]=\"true\" [value]=\"value\"></cts-date-viewer>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'custom'\">\r\n\t\t\t\t\t\t\t\t<cts-dynamic-column [id]=\"column.template\" [column]=\"column\" [context]=\"row\"> </cts-dynamic-column>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'direction'\">\r\n\t\t\t\t\t\t\t\t<div (click)=\"iconSelected($event, row)\" class=\"status-wrapper {{ value }} {{ row.state }}\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"iner-status-wrapper\" matTooltip=\"{{ 'STATS.' + row.state | translate }}\">\r\n\t\t\t\t\t\t\t\t\t\t<ng-container *permission=\"{ name: 'isFavorite', entity: row }\">\r\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"fav-icon-indicator bi bi-star-fill\"></span>\r\n\t\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ directionIcons ? directionIcons['incoming'] : 'bi bi-box-arrow-down' }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"row.type === 'IncomingCorrespondence'\"\r\n\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ directionIcons ? directionIcons['outgoing'] : 'bi bi-box-arrow-up outgoing' }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"row.type === 'OutgoingCorrespondence'\"\r\n\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ directionIcons ? directionIcons['internal'] : 'bi bi-box-arrow-right internal' }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"row.type === 'InternalCorrespondence'\"\r\n\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t\t<!-- <span class=\"value {{ value }}\">{{ \"STATS.\" + value | translate }}</span> -->\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t<ng-template #customRowTemplate let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\r\n\t\t\t\t\t\t\t<div class=\"w-full flex items-center justify-center overflow-visible\">\r\n\t\t\t\t\t\t\t\t<cts-dynamic-column [id]=\"column.custom1stCellTemplate\" [column]=\"column\" [context]=\"row\">\r\n\t\t\t\t\t\t\t\t</cts-dynamic-column>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t</ngx-datatable-column>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</ngx-datatable>\r\n</div>\r\n\r\n<div *ngIf=\"responsiveView && tableMode !== tableModes.card\" (window:resize)=\"assignTableColumns($event)\">\r\n\t<div class=\"dynamic-cards-container\">\r\n\t\t<div\r\n\t\t\tclass=\"single-card\"\r\n\t\t\t[ngClass]=\"{ 'selected-card': highlightSelectedCard && row?.isSelected }\"\r\n\t\t\t*ngFor=\"let row of rows\"\r\n\t\t>\r\n\t\t\t<div class=\"memo-title\">\r\n\t\t\t\t<span>\r\n\t\t\t\t\t{{ row.properties.referenceNumber }}\r\n\t\t\t\t</span>\r\n\t\t\t\t<span class=\"action-wrap\">\r\n\t\t\t\t\t<span class=\"action\" *ngFor=\"let action of tableActions\">\r\n\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\tclass=\"{{ action.icon }}\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ action.tooltip | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t></i>\r\n\t\t\t\t\t</span>\r\n\t\t\t\t</span>\r\n\t\t\t</div>\r\n\t\t\t<div *ngIf=\"tableColumns.length > 1\">\r\n\t\t\t\t<div class=\"memo-body\" *ngFor=\"let property of tableColumns$ | async\" (click)=\"cardSelected(row)\">\r\n\t\t\t\t\t<div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n\t\t\t\t\t<div class=\"value\">\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'owner'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.owner]?.[property.value] }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] | localizedDate : format : (isArabic ? 'ar-AR' : 'en-US') }}\r\n\t\t\t\t\t\t\t<!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div *ngIf=\"property.type === 'status'\" class=\"value {{ row[property.value] }}\">\r\n\t\t\t\t\t\t\t{{ 'STATS.' + row[property.value] | translate }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div *ngIf=\"property.type === 'department'\">\r\n\t\t\t\t\t\t\t<cts-department-viewer [noStyle]=\"true\" [value]=\"row.properties[property.value]\"> </cts-department-viewer>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div *ngIf=\"property.type === 'vocabulary'\" class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t<cts-dropdown-viewer\r\n\t\t\t\t\t\t\t\t[withOutLabel]=\"true\"\r\n\t\t\t\t\t\t\t\t[value]=\"row.properties[property.value]\"\r\n\t\t\t\t\t\t\t\t[dropdownId]=\"property.vocabularyId\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t</cts-dropdown-viewer>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t*ngIf=\"property.type === 'direction'\"\r\n\t\t\t\t\t\t\t(click)=\"iconSelected($event, row)\"\r\n\t\t\t\t\t\t\tclass=\"status-wrapper {{ property.value }} {{ row.state }}\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<span class=\"iner-status-wrapper\" matTooltip=\"{{ 'STATS.' + row.state | translate }}\">\r\n\t\t\t\t\t\t\t\t<ng-container *permission=\"{ name: 'isFavorite', entity: row }\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"fav-icon-indicator bi bi-star-fill\"></span>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t<i class=\"bi bi-box-arrow-down\" *ngIf=\"row.type === 'IncomingCorrespondence'\"></i>\r\n\t\t\t\t\t\t\t\t<i class=\"bi bi-box-arrow-up outgoing\" *ngIf=\"row.type === 'OutgoingCorrespondence'\"></i>\r\n\t\t\t\t\t\t\t\t<i class=\"bi bi-box-arrow-right internal\" *ngIf=\"row.type === 'InternalCorrespondence'\"></i>\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div *ngIf=\"property.type === 'custom'\">\r\n\t\t\t\t\t\t\t<cts-dynamic-column [id]=\"property.template\" [column]=\"property\" [context]=\"row\"> </cts-dynamic-column>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<ng-container *ngIf=\"tableColumns.length === 1\">\r\n\t\t\t<div class=\"iner-card-container {{ entityType }}\" (click)=\"cardSelected(row)\" *ngFor=\"let row of rows\">\r\n\t\t\t\t<cts-dynamic-column [id]=\"columns[0].template\" [column]=\"columns[0]\" [context]=\"row\"> </cts-dynamic-column>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.card\">\r\n\t<div class=\"cards-container\">\r\n\t\t<div class=\"single-card\" *ngFor=\"let row of rows; let i = index\">\r\n\t\t\t<div class=\"memo-title\">\r\n\t\t\t\t<span>\r\n\t\t\t\t\t{{ row.properties.referenceNumber }}\r\n\t\t\t\t</span>\r\n\t\t\t\t<span class=\"action-wrap\">\r\n\t\t\t\t\t<span class=\"action\" *ngFor=\"let action of tableActions\">\r\n\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\tclass=\"{{ action.icon }}\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ action.tooltip | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t></i>\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t<button\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'deleteMemo',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t(click)=\"performAction(row, 'deleteMemo')\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<i class=\"bi bi-trash\" matTooltip=\"{{ 'LISTING.ONLY_DELETE' | translate }}\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<button\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'terminateDelegation',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t(click)=\"performAction(row, 'terminateDelegation')\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<i class=\"bi bi-trash\" matTooltip=\"{{ 'LISTING.CANCEL' | translate }}\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<span\r\n\t\t\t\t\t\tclass=\"publish-state\"\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'memoPublished',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ 'MEMOS.PUBLISHED' | translate }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t<span\r\n\t\t\t\t\t\tclass=\"publish-state\"\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'delegationFinished',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ 'delegations.finished' | translate }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t<span\r\n\t\t\t\t\t\tclass=\"publish-state\"\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'delegationActive',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ 'delegations.active' | translate }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t</span>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"memo-body\" *ngFor=\"let property of tableColumns$ | async\" (click)=\"cardSelected(row); cardFocused(i)\">\r\n\t\t\t\t<div class=\"key\" *ngIf=\"property.type !== 'default'\">\r\n\t\t\t\t\t{{ prefix + property.key | translate }}\r\n\t\t\t\t</div>\r\n\t\t\t\t<ng-container *ngIf=\"property.type === 'default'\">\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"key\"\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'internalIsEnabled',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ prefix + property.key | translate }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</ng-container>\r\n\t\t\t\t<div class=\"value\">\r\n\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n\t\t\t\t\t\t{{ row.properties[property.value] }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'user'\">\r\n\t\t\t\t\t\t{{ row.properties[property.value].fullName }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n\t\t\t\t\t\t{{ row.properties[property.value] | localizedDate : format : (isArabic ? 'ar-AR' : 'en-US') }}\r\n\t\t\t\t\t\t<!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'boolean'\">\r\n\t\t\t\t\t\t{{ (row.properties[property.value] ? 'Yes' : 'No') | translate }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<ng-container *ngIf=\"property.type === 'default'\">\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\tclass=\"text\"\r\n\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\tname: 'internalIsEnabled',\r\n\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t<ng-container *ngIf=\"property.type === 'custom'\">\r\n\t\t\t\t\t\t<div class=\"text\" *ngFor=\"let item of row.properties[property.value]\">\r\n\t\t\t\t\t\t\t{{ item | translate }} {{ ', ' }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.dynamicCard\">\r\n\t<div class=\"cards-container\">\r\n\t\t<div\r\n\t\t\tclass=\"single-card\"\r\n\t\t\t[ngClass]=\"{ 'selected-card': highlightSelectedCard && row?.isSelected }\"\r\n\t\t\t*ngFor=\"let row of rows\"\r\n\t\t>\r\n\t\t\t<div *ngIf=\"tableColumns.length > 1\">\r\n\t\t\t\t<div class=\"memo-body\" *ngFor=\"let property of tableColumns$ | async\" (click)=\"cardSelected(row)\">\r\n\t\t\t\t\t<div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n\t\t\t\t\t<div class=\"value\">\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] | localizedDate : format : (isArabic ? 'ar-AR' : 'en-US') }}\r\n\t\t\t\t\t\t\t<!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"iner-card-container {{ entityType }}\" (click)=\"cardSelected(row)\" *ngIf=\"tableColumns.length === 1\">\r\n\t\t\t\t<cts-dynamic-column [id]=\"tableColumns[0].template\" [column]=\"tableColumns[0]\" [context]=\"row\">\r\n\t\t\t\t</cts-dynamic-column>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.custom\" class=\"table-custom-view\">\r\n\t<app-dynamic-component\r\n\t\tclass=\"table-custom-view__component\"\r\n\t\t*ngFor=\"let row of rows\"\r\n\t\t[componentName]=\"componentName\"\r\n\t\t[row]=\"row\"\r\n\t\t[rowAction]=\"actionOnRow\"\r\n\t\t[onClick]=\"onRowSelected\"\r\n\t\t(click)=\"cardSelected(row)\"\r\n\t\t[class.dynamic-selected-card]=\"highlightSelectedCard && row?.isSelected\"\r\n\t></app-dynamic-component>\r\n</div>\r\n", 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}.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{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}.iner-table-container{max-width:var(--table-container-max-width, 100%)}.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-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-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-scroll{width:100%!important}.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-summary-row .datatable-row-center{overflow:visible!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-row-center .datatable-body-cell{overflow:visible!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row{height:50px;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:100%!important;height:100%}.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{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,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .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,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .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 .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{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:#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: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:#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:#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:#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:#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:#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:#06a57e;color:#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:#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:#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:#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:#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:#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:#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;font-size:30px}.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;font-size:30px}.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{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,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .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,.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:#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(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}.rtl .ngx-datatable .datatable-body .status-wrapper .fav-icon-indicator{left:-10px;top:15px!important;right:auto!important}.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:bold;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:bold}.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:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .inProgress{background-color:#3c3cf0;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .registered{background-color:#5a1496;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .archived{background-color:#fbb62c;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .closed{background-color:#00dca5;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .approved{background-color:#06a57e;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .assigned{background-color:#fd6670;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .sent{background-color:#3c3cf0;color:#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:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .under_sign{background-color:#dda722;color:#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)));grid-gap:var(--tcv-gap, 1rem);gap:var(--tcv-gap, 1rem);padding-inline:var(--tcv-padding-inline, 1rem);padding-block:var(--tcv-padding-block, 1rem)}.table-style .ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell{flex-shrink:0}.ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell{flex-shrink:0}\n"], components: [{ type: i4__namespace$2.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: i7__namespace$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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: i3__namespace$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3__namespace$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: DateViewerComponent, selector: "cts-date-viewer", inputs: ["label", "value", "vertical", "format", "hijri", "withOutLabel"] }, { type: DynamicColumnComponent, selector: "cts-dynamic-column", inputs: ["id", "context", "column"] }, { type: DynamicCustomComponent, selector: "app-dynamic-component", inputs: ["componentName", "row", "rowAction", "onClick"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$2.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__namespace$2.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { type: i4__namespace$2.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i2__namespace$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i3__namespace$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe, "localizedDate": LocalizedDatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
14956
14984
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TableComponent, decorators: [{
14957
14985
  type: i0.Component,
14958
14986
  args: [{
@@ -14961,7 +14989,13 @@
14961
14989
  styleUrls: ['./table.component.scss'],
14962
14990
  encapsulation: i0.ViewEncapsulation.None
14963
14991
  }]
14964
- }], ctorParameters: function () { return [{ type: NuxeoService }, { type: AppConfigService }, { type: TranslationService }]; }, propDecorators: { onRowSelected: [{
14992
+ }], ctorParameters: function () { return [{ type: NuxeoService }, { type: AppConfigService }, { type: TranslationService }]; }, propDecorators: { dataTable: [{
14993
+ type: i0.ViewChild,
14994
+ args: [i4$2.DatatableComponent]
14995
+ }], tableContainer: [{
14996
+ type: i0.ViewChild,
14997
+ args: ['tableContainer']
14998
+ }], onRowSelected: [{
14965
14999
  type: i0.Output
14966
15000
  }], onRowIndexSelected: [{
14967
15001
  type: i0.Output
@@ -15013,6 +15047,8 @@
15013
15047
  type: i0.Input
15014
15048
  }], messages: [{
15015
15049
  type: i0.Input
15050
+ }], defaultColumnSize: [{
15051
+ type: i0.Input
15016
15052
  }] } });
15017
15053
 
15018
15054
  var SkeletonComponent = /** @class */ (function () {
@@ -15327,7 +15363,7 @@
15327
15363
  return DynamicTableComponent;
15328
15364
  }());
15329
15365
  DynamicTableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicTableComponent, deps: [{ token: AdapterService }, { token: CallApiService }, { token: DynamicTableService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
15330
- DynamicTableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicTableComponent, selector: "cts-dynamic-table", inputs: { columns: "columns", responsiveColumns: "responsiveColumns", entityType: "entityType", prefix: "prefix", headers: "headers", fields: "fields", pageProvider: "pageProvider", pageSize: "pageSize", isLegacyMode: "isLegacyMode", showTotalRecord: "showTotalRecord", 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", customFirstRow: "customFirstRow", highlightSelectedCard: "highlightSelectedCard", showActionsAsMenu: "showActionsAsMenu", filterParams: "filterParams", skipAggregation: "skipAggregation", customUrl: "customUrl", format: "format", pageSizes: "pageSizes" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", actionOnRow: "actionOnRow", onGettingData: "onGettingData", onMultiRowSelected: "onMultiRowSelected", onLoading: "onLoading", 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: i0.TemplateRef, static: true }], usesOnChanges: true, ngImport: i0__namespace, 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 && rows.length\">\r\n\t\t<ng-container [ngTemplateOutlet]=\"table\"></ng-container>\r\n\t\t<ng-container\r\n\t\t\t*ngIf=\"!initialized\"\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\r\n\t\tclass=\"pagination-iner-wraper d-flex justify-content-center align-items-center my-3\"\r\n\t\t[ngClass]=\"{ relative: pageSizes?.length }\"\r\n\t\t*ngIf=\"rows.length && totalRecords > pageSize\"\r\n\t>\r\n\t\t<cts-pagination\r\n\t\t\t[page]=\"pageNum\"\r\n\t\t\t(change)=\"paginationChange($event)\"\r\n\t\t\t[size]=\"pageSize\"\r\n\t\t\t[count]=\"totalRecords\"\r\n\t\t></cts-pagination>\r\n\t\t<div class=\"absolute ndfPageSizes flex gap-x-3 items-center mt-2\">\r\n\t\t\t<ndf-page-sizes-list\r\n\t\t\t\t*ngIf=\"pageSizes?.length\"\r\n\t\t\t\t[pageSizes]=\"pageSizes\"\r\n\t\t\t\t[selectedPageSize]=\"pageSize\"\r\n\t\t\t\t(onChangePageSize)=\"onChangePageSize($event)\"\r\n\t\t\t>\r\n\t\t\t</ndf-page-sizes-list>\r\n\r\n\t\t\t<span *ngIf=\"showTotalRecord\">{{ 'TABLE.totalRecords' | translate: { count: totalRecords } }}</span>\r\n\t\t</div>\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]=\"{ $implicit: loading, rows: rows, initialized: initialized }\"\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]=\"{ $implicit: loading, rows: rows, initialized: initialized }\"\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[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[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[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", 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}.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{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}.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:auto}.empty-state{padding:200px;display:flex;justify-content:center;align-items:center;font-size:20px;font-weight:bold}::-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:absolute;inset:0;display:grid;place-items:center;background:var(--loading-content-background, rgba(255, 255, 255, .2));-webkit-backdrop-filter:var(--loading-content-backdrop-filter, blur(3px));backdrop-filter:var(--loading-content-backdrop-filter, blur(3px))}\n"], components: [{ type: SpinnerComponent, selector: "cts-spinner" }, { type: PaginationComponent, selector: "cts-pagination", inputs: ["size", "count", "page"], outputs: ["change"] }, { type: PageSizesListComponent, selector: "ndf-page-sizes-list", inputs: ["pageSizes", "selectedPageSize"], outputs: ["onChangePageSize"] }, { type: TableComponent, selector: "cts-table", inputs: ["rows", "columns", "responsiveColumns", "entityType", "prefix", "pageCount", "totalRecords", "rowCursor", "fullWidth", "vocItemTranslationPrefix", "tableMode", "componentName", "tableActions", "format", "defultSort", "highlightSelectedCard", "multiSelectRows", "customFirstRow", "showActionsAsMenu", "messages"], outputs: ["onRowSelected", "onRowIndexSelected", "onIconSelected", "actionOnRow", "onSorting", "onMultiRowSelected"] }, { type: i3__namespace$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: SkeletonComponent, selector: "app-skeleton", inputs: ["styleClass", "style", "shape", "animation", "radius", "size", "width", "height", "randomWidth"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
15366
+ DynamicTableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicTableComponent, selector: "cts-dynamic-table", inputs: { columns: "columns", responsiveColumns: "responsiveColumns", entityType: "entityType", prefix: "prefix", headers: "headers", fields: "fields", pageProvider: "pageProvider", pageSize: "pageSize", isLegacyMode: "isLegacyMode", showTotalRecord: "showTotalRecord", 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", customFirstRow: "customFirstRow", highlightSelectedCard: "highlightSelectedCard", showActionsAsMenu: "showActionsAsMenu", filterParams: "filterParams", skipAggregation: "skipAggregation", customUrl: "customUrl", format: "format", pageSizes: "pageSizes" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", actionOnRow: "actionOnRow", onGettingData: "onGettingData", onMultiRowSelected: "onMultiRowSelected", onLoading: "onLoading", 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: i0.TemplateRef, static: true }], usesOnChanges: true, ngImport: i0__namespace, 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 && rows.length\">\r\n\t\t<ng-container [ngTemplateOutlet]=\"table\"></ng-container>\r\n\t\t<ng-container\r\n\t\t\t*ngIf=\"!initialized\"\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\r\n\t\tclass=\"pagination-iner-wraper d-flex justify-content-center align-items-center my-3\"\r\n\t\t[ngClass]=\"{ relative: pageSizes?.length }\"\r\n\t\t*ngIf=\"rows.length && totalRecords > pageSize\"\r\n\t>\r\n\t\t<cts-pagination\r\n\t\t\t[page]=\"pageNum\"\r\n\t\t\t(change)=\"paginationChange($event)\"\r\n\t\t\t[size]=\"pageSize\"\r\n\t\t\t[count]=\"totalRecords\"\r\n\t\t></cts-pagination>\r\n\t\t<div class=\"absolute ndfPageSizes flex gap-x-3 items-center mt-2\">\r\n\t\t\t<ndf-page-sizes-list\r\n\t\t\t\t*ngIf=\"pageSizes?.length\"\r\n\t\t\t\t[pageSizes]=\"pageSizes\"\r\n\t\t\t\t[selectedPageSize]=\"pageSize\"\r\n\t\t\t\t(onChangePageSize)=\"onChangePageSize($event)\"\r\n\t\t\t>\r\n\t\t\t</ndf-page-sizes-list>\r\n\r\n\t\t\t<span *ngIf=\"showTotalRecord\">{{ 'TABLE.totalRecords' | translate: { count: totalRecords } }}</span>\r\n\t\t</div>\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]=\"{ $implicit: loading, rows: rows, initialized: initialized }\"\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]=\"{ $implicit: loading, rows: rows, initialized: initialized }\"\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[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[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[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", 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}.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{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}.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}.empty-state{padding:200px;display:flex;justify-content:center;align-items:center;font-size:20px;font-weight:bold}::-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:absolute;inset:0;display:grid;place-items:center;background:var(--loading-content-background, rgba(255, 255, 255, .2));-webkit-backdrop-filter:var(--loading-content-backdrop-filter, blur(3px));backdrop-filter:var(--loading-content-backdrop-filter, blur(3px))}\n"], components: [{ type: SpinnerComponent, selector: "cts-spinner" }, { type: PaginationComponent, selector: "cts-pagination", inputs: ["size", "count", "page"], outputs: ["change"] }, { type: PageSizesListComponent, selector: "ndf-page-sizes-list", inputs: ["pageSizes", "selectedPageSize"], outputs: ["onChangePageSize"] }, { type: TableComponent, selector: "cts-table", inputs: ["rows", "columns", "responsiveColumns", "entityType", "prefix", "pageCount", "totalRecords", "rowCursor", "fullWidth", "vocItemTranslationPrefix", "tableMode", "componentName", "tableActions", "format", "defultSort", "highlightSelectedCard", "multiSelectRows", "customFirstRow", "showActionsAsMenu", "messages", "defaultColumnSize"], outputs: ["onRowSelected", "onRowIndexSelected", "onIconSelected", "actionOnRow", "onSorting", "onMultiRowSelected"] }, { type: i3__namespace$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: SkeletonComponent, selector: "app-skeleton", inputs: ["styleClass", "style", "shape", "animation", "radius", "size", "width", "height", "randomWidth"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
15331
15367
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicTableComponent, decorators: [{
15332
15368
  type: i0.Component,
15333
15369
  args: [{