nuxeo-development-framework 5.3.4 → 5.3.5

package/bundles/nuxeo-development-framework.umd.js

@@ -791,6 +791,7 @@
               expandedSidenav: true
           };
           this.userPreferenceStatus = this.defaults;
+          this.clientCustomTranslateFiles = { arFile: rxjs.of({}), enFile: rxjs.of({}) };
           this.onChangeSubject = new rxjs.BehaviorSubject(this.userPreferenceStatus);
           this.onChange = this.onChangeSubject.asObservable();
       }
@@ -1603,6 +1604,7 @@
                       }] }, { type: i3__namespace.CookieService }, { type: RolesService }];
       } });
 
+  var _TranslationService_instances, _TranslationService_ClientTranslationFiles_get;
   var TRANSLATION_PROVIDER = new i0.InjectionToken('Injection token for translation providers.');
   var TranslationService = /** @class */ (function () {
       function TranslationService(translate, rendererFactory, localStorage, userPreferencesService, appConfig, nuxeoService, environment, providers) {
@@ -1611,9 +1613,11 @@
           this.translate = translate;
           this.rendererFactory = rendererFactory;
           this.localStorage = localStorage;
+          this.userPreferencesService = userPreferencesService;
           this.appConfig = appConfig;
           this.nuxeoService = nuxeoService;
           this.environment = environment;
+          _TranslationService_instances.add(this);
           this.isArabic = new rxjs.BehaviorSubject(false);
           this.isArabic$ = this.isArabic.asObservable();
           this.translationApiName = this.appConfig.myConfiguration['translationApi'] ? this.appConfig.myConfiguration['translationApi'] : null;
@@ -1672,13 +1676,16 @@
        */
       TranslationService.prototype.loadTranslation = function (lang, fallback) {
           var _this = this;
+          var clientTranslation;
           if (lang === exports.Lang.Arabic) {
               this.renderer.addClass(document.body, 'rtl');
               this.isArabic.next(true);
+              clientTranslation = __classPrivateFieldGet(this, _TranslationService_instances, "a", _TranslationService_ClientTranslationFiles_get).arFile;
           }
           else {
               this.renderer.removeClass(document.body, 'rtl');
               this.isArabic.next(false);
+              clientTranslation = __classPrivateFieldGet(this, _TranslationService_instances, "a", _TranslationService_ClientTranslationFiles_get).enFile;
           }
           var arabicFile$ = this.getOrCreateTranslationFile('ar');
           var englishFile$ = this.getOrCreateTranslationFile('en');
@@ -1686,6 +1693,7 @@
               arabicFile$,
               englishFile$,
               this.translate.getTranslation(lang),
+              clientTranslation
           ]).subscribe(function (res) {
               _this.arabicFile = res[0];
               _this.englishFile = res[1];
@@ -1693,7 +1701,7 @@
               var ArorEnFile = lang === 'en'
                   ? JSON.parse(res[1].properties['note:note'])
                   : JSON.parse(res[0].properties['note:note']);
-              _this.translate.setTranslation(_this.translate.currentLang, Object.assign({}, ArorEnFile), true);
+              _this.translate.setTranslation(_this.translate.currentLang, Object.assign(Object.assign({}, (res[3] || {})), ArorEnFile), true);
               _this.onTranslationChanged(lang);
           }, function () {
               if (fallback && fallback !== lang) {
@@ -1768,6 +1776,9 @@
       };
       return TranslationService;
   }());
+  _TranslationService_instances = new WeakSet(), _TranslationService_ClientTranslationFiles_get = function _TranslationService_ClientTranslationFiles_get() {
+      return this.userPreferencesService.clientCustomTranslateFiles;
+  };
   TranslationService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TranslationService, deps: [{ token: i1__namespace.TranslateService }, { token: i0__namespace.RendererFactory2 }, { token: LocalStoragService }, { token: UserPreferencesService }, { token: AppConfigService }, { token: NuxeoService }, { token: 'environment' }, { token: TRANSLATION_PROVIDER, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
   TranslationService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TranslationService, providedIn: 'root' });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TranslationService, decorators: [{
@@ -10606,6 +10617,7 @@
           this.actionClicked = new i0.EventEmitter();
           this.arabic = false;
           this.onDestroy$ = new rxjs.Subject();
+          this.showTreeActions = true;
           this.config = i1$9.TreeviewConfig.create({
               hasAllCheckBox: false,
               hasCollapseExpand: false,
@@ -10835,7 +10847,7 @@
       return TreeviewSelectComponent;
   }());
   TreeviewSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TreeviewSelectComponent, deps: [{ token: i1__namespace$a.TreeviewI18n }, { token: TranslationService }, { token: DepartmentApiService }, { token: DepartmentManagementService$1 }, { token: RolesService }, { token: NuxeoService }, { token: GlobalAdminService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  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$9.TreeviewI18n, useClass: DropdownTreeviewSelectI18n }], viewQueries: [{ propertyName: "dropdownTreeviewComponent", first: true, predicate: i1$9.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: i5__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$a.DropdownTreeviewComponent, selector: "ngx-dropdown-treeview", inputs: ["buttonClass", "config", "headerTemplate", "itemTemplate", "items"], outputs: ["selectedChange", "filterChange"] }, { type: i1__namespace$a.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: i6__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i2__namespace$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$4.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 });
+  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", showTreeActions: "showTreeActions" }, outputs: { valueChange: "valueChange", plusClicked: "plusClicked", actionClicked: "actionClicked" }, providers: [{ provide: i1$9.TreeviewI18n, useClass: DropdownTreeviewSelectI18n }], viewQueries: [{ propertyName: "dropdownTreeviewComponent", first: true, predicate: i1$9.DropdownTreeviewComponent, descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<ng-template\r\n\t#itemTemplate\r\n\tlet-item=\"item\"\r\n\tlet-onCollapseExpand=\"onCollapseExpand\"\r\n\tlet-onCheckedChange=\"onCheckedChange\"\r\n>\r\n\t<!-- single -->\r\n\t<div *ngIf=\"!treeview && !multiple\">\r\n\t\t<div class=\"text-nowrap row-item\" [ngClass]=\"{ active: item.value === this.value }\">\r\n\t\t\t<i *ngIf=\"item.children\" (click)=\"onCollapseExpand()\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n\t\t\t</i>\r\n\t\t\t<!-- <label class=\"form-check-label\" (click)=\"select(item)\">{{\r\n        item.text\r\n      }}</label> -->\r\n\t\t\t<label *ngIf=\"item.disabled\" class=\"form-check-label\">{{ item.text }}</label>\r\n\t\t\t<label *ngIf=\"!item.disabled\" class=\"form-check-label\" (click)=\"select(item)\">{{ item.text }}</label>\r\n\t\t</div>\r\n\t</div>\r\n\t<!-- Multiple -->\r\n\t<div *ngIf=\"!treeview && multiple\">\r\n\t\t<div class=\"text-nowrap row-item\" [ngClass]=\"{ active: item.value === this.value }\">\r\n\t\t\t<i *ngIf=\"item.children\" (click)=\"onCollapseExpand()\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n\t\t\t</i>\r\n\t\t\t<!-- <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\t\t\t<div class=\"multiple-treeview\">\r\n\t\t\t\t<mat-checkbox [checked]=\"isItemSelected(item)\" (change)=\"selectMultiple($event.checked, item)\">\r\n\t\t\t\t\t<span> {{ item.text }} </span>\r\n\t\t\t\t</mat-checkbox>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n\t<!-- treeView -->\r\n\t<div *ngIf=\"treeview && !treeViewAsFormControl\" class=\"tree-view-container\">\r\n\t\t<div\r\n\t\t\t(mouseenter)=\"hoverField.style.display = 'flex'\"\r\n\t\t\t(mouseleave)=\"hoverField.style.display = 'none'\"\r\n\t\t\tclass=\"text-nowrap row-item treeview-row\"\r\n\t\t\t[ngClass]=\"{\r\n\t\t\t\tselected: item.value == selectedItem,\r\n\t\t\t\ttreeParentNode: item.value === fixedParentNode?.value\r\n\t\t\t}\"\r\n\t\t>\r\n\t\t\t<i *ngIf=\"item.children\" (click)=\"onCollapsed(item)\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\r\n\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n\t\t\t</i>\r\n\t\t\t<label class=\"form-check-label-treeview\" (click)=\"select(item)\">\r\n\t\t\t\t<ng-conteiner *ngIf=\"item.value != fixedParentNode?.value\">{{ item.text }}</ng-conteiner>\r\n\t\t\t\t<ng-conteiner *ngIf=\"item.value === fixedParentNode?.value\">{{ item.text | translate }}</ng-conteiner>\r\n\t\t\t\t<span #hoverField class=\"hoverField\">\r\n\t\t\t\t\t<ng-container *ngIf=\"showTreeActions\">\r\n\t\t\t\t\t\t<span\r\n\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ 'department_management.form.edit' | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"onAction($event, 'update', item)\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<li class=\"bi bi-pencil\"></li>\r\n\t\t\t\t\t\t</span>\r\n\r\n\t\t\t\t\t\t<span\r\n\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ 'department_management.form.toolTip_message' | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"onAction($event, 'add', item)\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<li class=\"bi bi-plus\"></li>\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</span>\r\n\t\t\t</label>\r\n\t\t</div>\r\n\t</div>\r\n\t<!-- treeView as form control -->\r\n\t<div *ngIf=\"treeview && treeViewAsFormControl\" class=\"tree-view-container\">\r\n\t\t<div\r\n\t\t\tclass=\"text-nowrap row-item treeview-row-form-control\"\r\n\t\t\t[ngClass]=\"{ 'selected-form-control': item.value == selectedItem }\"\r\n\t\t>\r\n\t\t\t<i *ngIf=\"item.children\" (click)=\"onCollapsed(item)\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\r\n\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n\t\t\t</i>\r\n\t\t\t<label class=\"form-check-label-treeview\" (click)=\"select(item)\">{{ item.text }} </label>\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>\r\n<ng-template\r\n\t#headerTemplate\r\n\tlet-config=\"config\"\r\n\tlet-item=\"item\"\r\n\tlet-onCollapseExpand=\"onCollapseExpand\"\r\n\tlet-onCheckedChange=\"onCheckedChange\"\r\n\tlet-onFilterTextChange=\"onFilterTextChange\"\r\n>\r\n\t<div *ngIf=\"config.hasFilter\" class=\"row row-filter\">\r\n\t\t<div class=\"col-12\">\r\n\t\t\t<input\r\n\t\t\t\tclass=\"form-control\"\r\n\t\t\t\ttype=\"text\"\r\n\t\t\t\t[placeholder]=\"i18n.getFilterPlaceholder(placeholder)\"\r\n\t\t\t\t[(ngModel)]=\"filterText\"\r\n\t\t\t\t(ngModelChange)=\"onFilterTextChange($event)\"\r\n\t\t\t/>\r\n\t\t</div>\r\n\t</div>\r\n\t<div *ngIf=\"config.hasAllCheckBox || config.hasCollapseExpand\" class=\"row\">\r\n\t\t<div class=\"col-12\">\r\n\t\t\t<label *ngIf=\"config.hasAllCheckBox\" (click)=\"select(item)\">\r\n\t\t\t\t<strong>{{ i18n.getAllCheckboxText() }}</strong>\r\n\t\t\t</label>\r\n\t\t\t<label *ngIf=\"config.hasCollapseExpand\" class=\"float-right\" (click)=\"onCollapseExpand()\">\r\n\t\t\t\t<i [title]=\"i18n.getTooltipCollapseExpandText(item.collapsed)\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-arrows-angle-expand\"></span>\r\n\t\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-arrows-angle-contract\"></span>\r\n\t\t\t\t</i>\r\n\t\t\t</label>\r\n\t\t</div>\r\n\t</div>\r\n\t<a *ngIf=\"defaultSelect\" class=\"select-default\" (click)=\"selectDefault()\">{{\r\n\t\t'department_management.selectDefault' | translate\r\n\t}}</a>\r\n\t<div\r\n\t\t*ngIf=\"config.hasDivider\"\r\n\t\tclass=\"dropdown-divider\"\r\n\t\t[ngClass]=\"{ 'dropdown-divider-noMargin': defaultSelect }\"\r\n\t></div>\r\n</ng-template>\r\n\r\n<ng-container *ngIf=\"!treeview && !multiple\">\r\n\t<div class=\"dropdown-wrapper\">\r\n\t\t<ngx-dropdown-treeview\r\n\t\t\t[config]=\"config\"\r\n\t\t\t[headerTemplate]=\"headerTemplate\"\r\n\t\t\t[items]=\"items\"\r\n\t\t\t[itemTemplate]=\"itemTemplate\"\r\n\t\t>\r\n\t\t</ngx-dropdown-treeview>\r\n\t\t<div class=\"disable-effect\" *ngIf=\"disabled\"></div>\r\n\t</div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!treeview && multiple\">\r\n\t<div class=\"multiple-tree-view dropdown-wrapper\">\r\n\t\t<ngx-dropdown-treeview [config]=\"config\" [items]=\"items\" [itemTemplate]=\"itemTemplate\"> </ngx-dropdown-treeview>\r\n\t\t<div class=\"disable-effect\" *ngIf=\"disabled\"></div>\r\n\t</div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"treeview && !treeViewAsFormControl\">\r\n\t<div class=\"tree-view\">\r\n\t\t<ngx-treeview [config]=\"config\" [headerTemplate]=\"headerTemplate\" [items]=\"items\" [itemTemplate]=\"itemTemplate\">\r\n\t\t</ngx-treeview>\r\n\t</div>\r\n</ng-container>\r\n<ng-container *ngIf=\"treeview && treeViewAsFormControl\">\r\n\t<div class=\"tree-view-form-control\">\r\n\t\t<ngx-treeview [config]=\"config\" [headerTemplate]=\"headerTemplate\" [items]=\"items\" [itemTemplate]=\"itemTemplate\">\r\n\t\t</ngx-treeview>\r\n\t</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: i5__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$a.DropdownTreeviewComponent, selector: "ngx-dropdown-treeview", inputs: ["buttonClass", "config", "headerTemplate", "itemTemplate", "items"], outputs: ["selectedChange", "filterChange"] }, { type: i1__namespace$a.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: i6__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i2__namespace$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$4.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 });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TreeviewSelectComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -10890,6 +10902,8 @@
                   args: [i1$9.DropdownTreeviewComponent, { static: false }]
               }], fixedParentNode: [{
                   type: i0.Input
+              }], showTreeActions: [{
+                  type: i0.Input
               }] } });
 
   /**
@@ -10931,6 +10945,7 @@
           /** emitted when action is clicked */
           this.actionClicked = new i0.EventEmitter();
           this.onDataLoad = new i0.EventEmitter();
+          this.showTreeActions = true;
           this.loading = false;
           this.arabic = false;
           // function related to value accessor
@@ -11111,7 +11126,7 @@
       return DynamicFormDepartmentComponent;
   }());
   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$4.NgControl, optional: true, self: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  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: i1__namespace$7.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  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", showTreeActions: "showTreeActions" }, outputs: { onSelecting: "onSelecting", actionClicked: "actionClicked", onDataLoad: "onDataLoad" }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"label\">\r\n\t<div>\r\n\t\t<label class=\"select-label\"\r\n\t\t\t>{{ label | translate }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\">*</span></label\r\n\t\t>\r\n\t</div>\r\n</ng-container>\r\n<app-dynamic-form-treeview-select\r\n\t[treeview]=\"treeview\"\r\n\t[treeViewAsFormControl]=\"treeViewAsFormControl\"\r\n\t[defaultSelect]=\"defaultSelect\"\r\n\t[multiple]=\"multiple\"\r\n\t[items]=\"data\"\r\n\t[placeholder]=\"placeholder\"\r\n\t[displayDepTypee]=\"displayDepTypee\"\r\n\t[displayIsAllowRecExternal]=\"displayIsAllowRecExternal\"\r\n\t[pp_departmentNestedTree]=\"pp_departmentNestedTree\"\r\n\t[useCustomAddEditAction]=\"useCustomAddEditAction\"\r\n\t[fixedParentNode]=\"fixedParentNode\"\r\n\t[customPrefix]=\"customPrefix\"\r\n\t[customParentProperty]=\"customParentProperty\"\r\n\t(valueChange)=\"getSelecteditems($event)\"\r\n\t[(value)]=\"selection\"\r\n\t(actionClicked)=\"onAction($event)\"\r\n\t[disabled]=\"disabled\"\r\n\t[showTreeActions]=\"showTreeActions\"\r\n\tclass=\"dropdown-wrapper\"\r\n\t[ngClass]=\"{ 'input-filled': selection && selection.length > 0 }\"\r\n>\r\n</app-dynamic-form-treeview-select>\r\n<mat-error [attr.data-automation-id]=\"'card-textitem-error-'\" class=\"app-textitem-editable-error\" *ngIf=\"hasErrors()\">\r\n\t<ul>\r\n\t\t<li *ngIf=\"control.errors.required\">\r\n\t\t\t{{ 'VALIDATORS.REQUIRED' | translate }}\r\n\t\t</li>\r\n\t</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", "showTreeActions"], 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: i1__namespace$7.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicFormDepartmentComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -11168,6 +11183,8 @@
                   type: i0.Output
               }], onDataLoad: [{
                   type: i0.Output
+              }], showTreeActions: [{
+                  type: i0.Input
               }] } });
 
   var moment$3 = moment__namespace;
@@ -31802,7 +31819,7 @@
       return SelectUsersByDepartmentsComponent;
   }(BaseComponent));
   SelectUsersByDepartmentsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SelectUsersByDepartmentsComponent, deps: [{ token: DepartmentManagementService }, { token: i2__namespace$4.NgControl, optional: true, self: true }, { token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  SelectUsersByDepartmentsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectUsersByDepartmentsComponent, selector: "app-select-users-by-departments", inputs: { display: "display", depLabel: "depLabel", userLabel: "userLabel", allowMultipleUsers: "allowMultipleUsers", fetchDepUsersByCustomApi: "fetchDepUsersByCustomApi", fetchedUsers: "fetchedUsers" }, outputs: { formChanged: "formChanged", onDataLoad: "onDataLoad" }, host: { classAttribute: "userByDepSelectors" }, usesInheritance: true, ngImport: i0__namespace, template: "<form [formGroup]=\"depAnditsUsers\">\r\n  <div\r\n    class=\"w-full flex justify-between\"\r\n    [ngClass]=\"{\r\n      'flex-row': display === 'row',\r\n      'flex-col': display === 'column'\r\n    }\"\r\n  >\r\n    <div class=\"flex flex-col w-full flex-1 depWrapper\">\r\n      <label class=\"dep-label\">\r\n        {{ depLabel }}\r\n        <span class=\"text-danger\" *ngIf=\"isRequired()\">*</span>\r\n      </label>\r\n      <ng-container *ngIf=\"!reseting\">\r\n        <app-dynamic-form-department\r\n          #depRef\r\n          formControlName=\"dep\"\r\n          placeholder=\"placeholder\"\r\n          [treeview]=\"false\"\r\n          [pp_departmentNestedTree]=\"'PP_OS_Departments'\"\r\n          [pp_departmentTree]=\"'PP_OS_Departments'\"\r\n          [customPrefix]=\"'osdept'\"\r\n          [customParentProperty]=\"'osdepartment_parentDepartmentCode'\"\r\n          [useCustomAddEditAction]=\"true\"\r\n          (onSelecting)=\"getDepMembers($event)\"\r\n          (onDataLoad)=\"onDataLoad.emit($event)\"\r\n        >\r\n        </app-dynamic-form-department>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"reseting\">\r\n        <app-dynamic-form-department\r\n          #depRef\r\n          formControlName=\"dep\"\r\n          placeholder=\"placeholder\"\r\n          [treeview]=\"false\"\r\n          [pp_departmentNestedTree]=\"'PP_OS_Departments'\"\r\n          [pp_departmentTree]=\"'PP_OS_Departments'\"\r\n          [customPrefix]=\"'osdept'\"\r\n          [customParentProperty]=\"'osdepartment_parentDepartmentCode'\"\r\n          [useCustomAddEditAction]=\"true\"\r\n          (onSelecting)=\"getDepMembers($event)\"\r\n          (onDataLoad)=\"onDataLoad.emit($event)\"\r\n        >\r\n        </app-dynamic-form-department>\r\n      </ng-container>\r\n    </div>\r\n    <div\r\n      class=\"flex flex-col w-full flex-1 usersWrapper\"\r\n      [ngClass]=\"{ 'mt-4': display === 'column' }\"\r\n    >\r\n      <label class=\"users-label\">\r\n        {{ userLabel }}\r\n        <span class=\"text-danger\" *ngIf=\"isRequired()\">*</span>\r\n      </label>\r\n      <ng-select\r\n        formControlName=\"users\"\r\n        #ngSelectComponent\r\n        [items]=\"depUsers\"\r\n        bindLabel=\"properties.fullName\"\r\n        [multiple]=\"allowMultipleUsers\"\r\n        [placeholder]=\"'share.placeholder' | translate\"\r\n        [loading]=\"loading\"\r\n        (change)=\"onSetUser()\"\r\n      >\r\n        <ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\r\n          <div\r\n            class=\"ng-option disabled\"\r\n            *ngIf=\"!depAnditsUsers?.get('dep').value; else notFound\"\r\n          >\r\n            {{ \"archiveSearch.select_dep\" | translate }}\r\n          </div>\r\n          <ng-template #notFound>\r\n            <div class=\"ng-option disabled\">\r\n              {{ \"archiveSearch.noUsers\" | translate }}\r\n            </div>\r\n          </ng-template>\r\n        </ng-template>\r\n        <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\r\n          <div class=\"flex flex-col h-full\">\r\n            <div *ngIf=\"item\" class=\"flex flex-row items-center\">\r\n              <div class=\"flex-0 w-8 h-8 rounded-full overflow-hidden\">\r\n                <cts-avatar\r\n                  [user]=\"{\r\n                    properties: {\r\n                      firstName: item.properties?.firstName,\r\n                      lastName: item.properties?.lastName\r\n                    }\r\n                  }\"\r\n                >\r\n                </cts-avatar>\r\n              </div>\r\n              <div class=\"flex flex-col pt-0 px-2\">\r\n                <span>{{ item.properties?.fullName }}</span>\r\n                <span *ngIf=\"item.properties?.email\">{{\r\n                  item.properties?.email\r\n                }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n      </ng-select>\r\n    </div>\r\n  </div>\r\n</form>\r\n", styles: [".userByDepSelectors ngx-dropdown-treeview>.dropdown{@apply bg-primary-50 border-primary-100 !important;}.userByDepSelectors .ng-select .ng-select-container .ng-value-container .ng-placeholder{font-size:12px!important;margin-top:4px!important}\n"], components: [{ type: DynamicFormDepartmentComponent, selector: "app-dynamic-form-department", inputs: ["treeview", "treeViewAsFormControl", "placeholder", "multiple", "searchable", "label", "defaultSelect", "displayDepTypee", "displayIsAllowRecExternal", "pp_departmentNestedTree", "pp_departmentTree", "customPrefix", "useCustomAddEditAction", "customParentProperty", "customParams", "disabled", "nodesExpandedByDefault", "fixedParentNode"], outputs: ["onSelecting", "actionClicked", "onDataLoad"] }, { type: i5__namespace.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: AvatarComponent, selector: "cts-avatar", inputs: ["user"] }], directives: [{ type: i2__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i5__namespace.ɵl, selector: "[ng-notfound-tmp]" }, { type: i5__namespace.ɵf, selector: "[ng-option-tmp]" }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  SelectUsersByDepartmentsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectUsersByDepartmentsComponent, selector: "app-select-users-by-departments", inputs: { display: "display", depLabel: "depLabel", userLabel: "userLabel", allowMultipleUsers: "allowMultipleUsers", fetchDepUsersByCustomApi: "fetchDepUsersByCustomApi", fetchedUsers: "fetchedUsers" }, outputs: { formChanged: "formChanged", onDataLoad: "onDataLoad" }, host: { classAttribute: "userByDepSelectors" }, usesInheritance: true, ngImport: i0__namespace, template: "<form [formGroup]=\"depAnditsUsers\">\r\n  <div\r\n    class=\"w-full flex justify-between\"\r\n    [ngClass]=\"{\r\n      'flex-row': display === 'row',\r\n      'flex-col': display === 'column'\r\n    }\"\r\n  >\r\n    <div class=\"flex flex-col w-full flex-1 depWrapper\">\r\n      <label class=\"dep-label\">\r\n        {{ depLabel }}\r\n        <span class=\"text-danger\" *ngIf=\"isRequired()\">*</span>\r\n      </label>\r\n      <ng-container *ngIf=\"!reseting\">\r\n        <app-dynamic-form-department\r\n          #depRef\r\n          formControlName=\"dep\"\r\n          placeholder=\"placeholder\"\r\n          [treeview]=\"false\"\r\n          [pp_departmentNestedTree]=\"'PP_OS_Departments'\"\r\n          [pp_departmentTree]=\"'PP_OS_Departments'\"\r\n          [customPrefix]=\"'osdept'\"\r\n          [customParentProperty]=\"'osdepartment_parentDepartmentCode'\"\r\n          [useCustomAddEditAction]=\"true\"\r\n          (onSelecting)=\"getDepMembers($event)\"\r\n          (onDataLoad)=\"onDataLoad.emit($event)\"\r\n        >\r\n        </app-dynamic-form-department>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"reseting\">\r\n        <app-dynamic-form-department\r\n          #depRef\r\n          formControlName=\"dep\"\r\n          placeholder=\"placeholder\"\r\n          [treeview]=\"false\"\r\n          [pp_departmentNestedTree]=\"'PP_OS_Departments'\"\r\n          [pp_departmentTree]=\"'PP_OS_Departments'\"\r\n          [customPrefix]=\"'osdept'\"\r\n          [customParentProperty]=\"'osdepartment_parentDepartmentCode'\"\r\n          [useCustomAddEditAction]=\"true\"\r\n          (onSelecting)=\"getDepMembers($event)\"\r\n          (onDataLoad)=\"onDataLoad.emit($event)\"\r\n        >\r\n        </app-dynamic-form-department>\r\n      </ng-container>\r\n    </div>\r\n    <div\r\n      class=\"flex flex-col w-full flex-1 usersWrapper\"\r\n      [ngClass]=\"{ 'mt-4': display === 'column' }\"\r\n    >\r\n      <label class=\"users-label\">\r\n        {{ userLabel }}\r\n        <span class=\"text-danger\" *ngIf=\"isRequired()\">*</span>\r\n      </label>\r\n      <ng-select\r\n        formControlName=\"users\"\r\n        #ngSelectComponent\r\n        [items]=\"depUsers\"\r\n        bindLabel=\"properties.fullName\"\r\n        [multiple]=\"allowMultipleUsers\"\r\n        [placeholder]=\"'share.placeholder' | translate\"\r\n        [loading]=\"loading\"\r\n        (change)=\"onSetUser()\"\r\n      >\r\n        <ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\r\n          <div\r\n            class=\"ng-option disabled\"\r\n            *ngIf=\"!depAnditsUsers?.get('dep').value; else notFound\"\r\n          >\r\n            {{ \"archiveSearch.select_dep\" | translate }}\r\n          </div>\r\n          <ng-template #notFound>\r\n            <div class=\"ng-option disabled\">\r\n              {{ \"archiveSearch.noUsers\" | translate }}\r\n            </div>\r\n          </ng-template>\r\n        </ng-template>\r\n        <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\r\n          <div class=\"flex flex-col h-full\">\r\n            <div *ngIf=\"item\" class=\"flex flex-row items-center\">\r\n              <div class=\"flex-0 w-8 h-8 rounded-full overflow-hidden\">\r\n                <cts-avatar\r\n                  [user]=\"{\r\n                    properties: {\r\n                      firstName: item.properties?.firstName,\r\n                      lastName: item.properties?.lastName\r\n                    }\r\n                  }\"\r\n                >\r\n                </cts-avatar>\r\n              </div>\r\n              <div class=\"flex flex-col pt-0 px-2\">\r\n                <span>{{ item.properties?.fullName }}</span>\r\n                <span *ngIf=\"item.properties?.email\">{{\r\n                  item.properties?.email\r\n                }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n      </ng-select>\r\n    </div>\r\n  </div>\r\n</form>\r\n", styles: [".userByDepSelectors ngx-dropdown-treeview>.dropdown{@apply bg-primary-50 border-primary-100 !important;}.userByDepSelectors .ng-select .ng-select-container .ng-value-container .ng-placeholder{font-size:12px!important;margin-top:4px!important}\n"], components: [{ type: DynamicFormDepartmentComponent, selector: "app-dynamic-form-department", inputs: ["treeview", "treeViewAsFormControl", "placeholder", "multiple", "searchable", "label", "defaultSelect", "displayDepTypee", "displayIsAllowRecExternal", "pp_departmentNestedTree", "pp_departmentTree", "customPrefix", "useCustomAddEditAction", "customParentProperty", "customParams", "disabled", "nodesExpandedByDefault", "fixedParentNode", "showTreeActions"], outputs: ["onSelecting", "actionClicked", "onDataLoad"] }, { type: i5__namespace.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: AvatarComponent, selector: "cts-avatar", inputs: ["user"] }], directives: [{ type: i2__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i5__namespace.ɵl, selector: "[ng-notfound-tmp]" }, { type: i5__namespace.ɵf, selector: "[ng-option-tmp]" }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SelectUsersByDepartmentsComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -36480,7 +36497,7 @@
       return FilterComponent;
   }());
   FilterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FilterComponent, deps: [{ token: i2__namespace$4.FormBuilder }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  FilterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FilterComponent, selector: "cts-filter", inputs: { fields: "fields", filterTitle: "filterTitle" }, outputs: { onFiltering: "onFiltering" }, ngImport: i0__namespace, template: "<div class=\"filter-wrapper\">\r\n    <div class=\"filter-title\">\r\n        <!-- {{filterTitle | translate}} -->\r\n    </div>\r\n    <div class=\"iner-filter-wrapper\" *ngIf=\"filterForm\">\r\n        <form [formGroup]=\"filterForm\">\r\n            <div class=\"single-control-wrapper\" *ngFor=\"let field of fields\">\r\n\r\n                <div class=\"control\" *ngIf=\"field.type === 'text'\">\r\n                    <app-dynamic-form-textitem\r\n                    [label]=\"field.label\"\r\n                    [formControlName]=\"field.formControlName\"\r\n                    placeholder=\"{{ 'CREATE.PLACE_HOLDER' | translate }} {{\r\n                        field.placeholder | translate\r\n                      }}\"\r\n                  >\r\n                  </app-dynamic-form-textitem>\r\n                </div>\r\n\r\n                <div class=\"control\" *ngIf=\"field.type === 'dropdown'\">\r\n                    <app-dynamic-form-vocabulary-item\r\n                    [shwoAllValues]=\"field.shwoAllValues ? field.shwoAllValues : false\"\r\n                    [label]=\"field.label\"\r\n                    [bindLabel]=\"field.bindLabel\"\r\n                    [bindValue]=\"field.bindValue\"\r\n                    [placeholder]=\"field.placeholder | translate\"\r\n                    [multiple]=\"field.multiple\"\r\n                    [searchable]=\"field.searchable\"\r\n                    [closeOnSelect]=\"field.closeOnSelect\"\r\n                    [hideSelectedItems]=\"field.hideSelectedItems\"\r\n                    [vocabularyType]=\"field.vocabularyType\"\r\n                    [formControlName]=\"field.formControlName\"\r\n                  >\r\n                  </app-dynamic-form-vocabulary-item>\r\n                </div>\r\n\r\n                <div class=\"control\" *ngIf=\"field.type === 'rang'\">\r\n                    <cts-dynamic-form-hijri-dateitem [label]=\"field.label\" [formControlName]=\"field.formControlName\"[range]=\"true\" [vertical]=\"false\" >\r\n                    </cts-dynamic-form-hijri-dateitem>\r\n                </div>\r\n\r\n                <div  class=\"control\" *ngIf=\"field.type === 'department'\">\r\n                    <app-dynamic-form-department\r\n                    [label]=\"field.label\"\r\n                    placeholder=\"{{ 'CREATE.PLACE_HOLDER' | translate }} {{\r\n                        field.placeholder | translate\r\n                    }}\"\r\n                    [formControlName]=\"field.formControlName\"\r\n                  >\r\n                  </app-dynamic-form-department>\r\n                </div>\r\n\r\n                <div  class=\"control\" *ngIf=\"field.type === 'toggle'\">\r\n                    <cts-dynamic-form-slide-toggleitem\r\n                    [label]=\"field.label\"\r\n                    [formControlName]=\"field.formControlName\"\r\n                  ></cts-dynamic-form-slide-toggleitem>\r\n                </div>\r\n\r\n                <div   class=\"control\" *ngIf=\"field.type === 'date'\">\r\n                    <cts-dynamic-form-hijri-dateitem\r\n                    [formControlName]=\"field.formControlName\"\r\n                    [label]=\"field.label\"\r\n                  >\r\n                  </cts-dynamic-form-hijri-dateitem>\r\n                </div>\r\n  \r\n\r\n            </div>\r\n\r\n        </form>\r\n           \r\n    </div>\r\n    <div class=\"form-actions\">\r\n        <button class=\"my-button mx-2\" type=\"button\" (click)=\"filter()\"> {{'FILTER' | translate}}</button>\r\n        <button class=\"my-button reset mx-2\" type=\"button\" (click)=\"reset()\"> {{'reset' | translate}}</button>\r\n    </div>\r\n</div>\r\n\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.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}.filter-wrapper .filter-title{font-size:18px;font-weight:bold;margin-bottom:15px}.filter-wrapper .iner-filter-wrapper{height:320px;overflow:auto;scrollbar-color:#b4bac6 transparent!important;scrollbar-width:thin!important;padding:15px 15px 0}.filter-wrapper .iner-filter-wrapper .single-control-wrapper{margin-bottom:15px}.filter-wrapper .form-actions{display:flex;justify-content:flex-start;align-content:center;padding:10px 15px}.filter-wrapper .form-actions .filter{border:none;background-color:transparent;font-weight:bold;width:80px;height:40px;background-image:linear-gradient(to bottom,#0dbab5,#2e62df);color:#fff;border-radius:5px}\n"], components: [{ type: DynamicFormTextItemComponent, selector: "app-dynamic-form-textitem", inputs: ["autoComplete", "nativeAutoComplete", "autoComplete_pageProvider", "autoComplete_propertyName", "autoComplete_propertyKey", "autoCompleteValueKey", "autoCompleteType", "tenantId", "emitFullObject", "outsideParams", "type", "property", "label", "editable", "placeholder", "disabled", "displayEmpty", "preventSpace", "id", "maxCharsNum"] }, { type: DynamicFormVocabularyItemComponent, selector: "app-dynamic-form-vocabulary-item", inputs: ["onlyIds", "bindValue", "bindLabel", "placeholder", "multiple", "searchable", "closeOnSelect", "hideSelectedItems", "disabled", "vocabularyType", "label", "cacheable", "shwoAllValues"], outputs: ["onSelecting"] }, { type: DynamicFormHijriDateitemComponent, selector: "cts-dynamic-form-hijri-dateitem", inputs: ["minHijri", "maxHijri", "minGreg", "maxGreg", "label", "isDisabled", "range", "vertical", "isReadOnly", "placeholder", "emitOnBlur"], outputs: ["valueChanged"] }, { type: DynamicFormDepartmentComponent, selector: "app-dynamic-form-department", inputs: ["treeview", "treeViewAsFormControl", "placeholder", "multiple", "searchable", "label", "defaultSelect", "displayDepTypee", "displayIsAllowRecExternal", "pp_departmentNestedTree", "pp_departmentTree", "customPrefix", "useCustomAddEditAction", "customParentProperty", "customParams", "disabled", "nodesExpandedByDefault", "fixedParentNode"], outputs: ["onSelecting", "actionClicked", "onDataLoad"] }, { type: DynamicFormSlideToggleitemComponent, selector: "cts-dynamic-form-slide-toggleitem", inputs: ["label", "disabled", "checked", "theme"], outputs: ["onToggle"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  FilterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FilterComponent, selector: "cts-filter", inputs: { fields: "fields", filterTitle: "filterTitle" }, outputs: { onFiltering: "onFiltering" }, ngImport: i0__namespace, template: "<div class=\"filter-wrapper\">\r\n    <div class=\"filter-title\">\r\n        <!-- {{filterTitle | translate}} -->\r\n    </div>\r\n    <div class=\"iner-filter-wrapper\" *ngIf=\"filterForm\">\r\n        <form [formGroup]=\"filterForm\">\r\n            <div class=\"single-control-wrapper\" *ngFor=\"let field of fields\">\r\n\r\n                <div class=\"control\" *ngIf=\"field.type === 'text'\">\r\n                    <app-dynamic-form-textitem\r\n                    [label]=\"field.label\"\r\n                    [formControlName]=\"field.formControlName\"\r\n                    placeholder=\"{{ 'CREATE.PLACE_HOLDER' | translate }} {{\r\n                        field.placeholder | translate\r\n                      }}\"\r\n                  >\r\n                  </app-dynamic-form-textitem>\r\n                </div>\r\n\r\n                <div class=\"control\" *ngIf=\"field.type === 'dropdown'\">\r\n                    <app-dynamic-form-vocabulary-item\r\n                    [shwoAllValues]=\"field.shwoAllValues ? field.shwoAllValues : false\"\r\n                    [label]=\"field.label\"\r\n                    [bindLabel]=\"field.bindLabel\"\r\n                    [bindValue]=\"field.bindValue\"\r\n                    [placeholder]=\"field.placeholder | translate\"\r\n                    [multiple]=\"field.multiple\"\r\n                    [searchable]=\"field.searchable\"\r\n                    [closeOnSelect]=\"field.closeOnSelect\"\r\n                    [hideSelectedItems]=\"field.hideSelectedItems\"\r\n                    [vocabularyType]=\"field.vocabularyType\"\r\n                    [formControlName]=\"field.formControlName\"\r\n                  >\r\n                  </app-dynamic-form-vocabulary-item>\r\n                </div>\r\n\r\n                <div class=\"control\" *ngIf=\"field.type === 'rang'\">\r\n                    <cts-dynamic-form-hijri-dateitem [label]=\"field.label\" [formControlName]=\"field.formControlName\"[range]=\"true\" [vertical]=\"false\" >\r\n                    </cts-dynamic-form-hijri-dateitem>\r\n                </div>\r\n\r\n                <div  class=\"control\" *ngIf=\"field.type === 'department'\">\r\n                    <app-dynamic-form-department\r\n                    [label]=\"field.label\"\r\n                    placeholder=\"{{ 'CREATE.PLACE_HOLDER' | translate }} {{\r\n                        field.placeholder | translate\r\n                    }}\"\r\n                    [formControlName]=\"field.formControlName\"\r\n                  >\r\n                  </app-dynamic-form-department>\r\n                </div>\r\n\r\n                <div  class=\"control\" *ngIf=\"field.type === 'toggle'\">\r\n                    <cts-dynamic-form-slide-toggleitem\r\n                    [label]=\"field.label\"\r\n                    [formControlName]=\"field.formControlName\"\r\n                  ></cts-dynamic-form-slide-toggleitem>\r\n                </div>\r\n\r\n                <div   class=\"control\" *ngIf=\"field.type === 'date'\">\r\n                    <cts-dynamic-form-hijri-dateitem\r\n                    [formControlName]=\"field.formControlName\"\r\n                    [label]=\"field.label\"\r\n                  >\r\n                  </cts-dynamic-form-hijri-dateitem>\r\n                </div>\r\n  \r\n\r\n            </div>\r\n\r\n        </form>\r\n           \r\n    </div>\r\n    <div class=\"form-actions\">\r\n        <button class=\"my-button mx-2\" type=\"button\" (click)=\"filter()\"> {{'FILTER' | translate}}</button>\r\n        <button class=\"my-button reset mx-2\" type=\"button\" (click)=\"reset()\"> {{'reset' | translate}}</button>\r\n    </div>\r\n</div>\r\n\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.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}.filter-wrapper .filter-title{font-size:18px;font-weight:bold;margin-bottom:15px}.filter-wrapper .iner-filter-wrapper{height:320px;overflow:auto;scrollbar-color:#b4bac6 transparent!important;scrollbar-width:thin!important;padding:15px 15px 0}.filter-wrapper .iner-filter-wrapper .single-control-wrapper{margin-bottom:15px}.filter-wrapper .form-actions{display:flex;justify-content:flex-start;align-content:center;padding:10px 15px}.filter-wrapper .form-actions .filter{border:none;background-color:transparent;font-weight:bold;width:80px;height:40px;background-image:linear-gradient(to bottom,#0dbab5,#2e62df);color:#fff;border-radius:5px}\n"], components: [{ type: DynamicFormTextItemComponent, selector: "app-dynamic-form-textitem", inputs: ["autoComplete", "nativeAutoComplete", "autoComplete_pageProvider", "autoComplete_propertyName", "autoComplete_propertyKey", "autoCompleteValueKey", "autoCompleteType", "tenantId", "emitFullObject", "outsideParams", "type", "property", "label", "editable", "placeholder", "disabled", "displayEmpty", "preventSpace", "id", "maxCharsNum"] }, { type: DynamicFormVocabularyItemComponent, selector: "app-dynamic-form-vocabulary-item", inputs: ["onlyIds", "bindValue", "bindLabel", "placeholder", "multiple", "searchable", "closeOnSelect", "hideSelectedItems", "disabled", "vocabularyType", "label", "cacheable", "shwoAllValues"], outputs: ["onSelecting"] }, { type: DynamicFormHijriDateitemComponent, selector: "cts-dynamic-form-hijri-dateitem", inputs: ["minHijri", "maxHijri", "minGreg", "maxGreg", "label", "isDisabled", "range", "vertical", "isReadOnly", "placeholder", "emitOnBlur"], outputs: ["valueChanged"] }, { type: DynamicFormDepartmentComponent, selector: "app-dynamic-form-department", inputs: ["treeview", "treeViewAsFormControl", "placeholder", "multiple", "searchable", "label", "defaultSelect", "displayDepTypee", "displayIsAllowRecExternal", "pp_departmentNestedTree", "pp_departmentTree", "customPrefix", "useCustomAddEditAction", "customParentProperty", "customParams", "disabled", "nodesExpandedByDefault", "fixedParentNode", "showTreeActions"], outputs: ["onSelecting", "actionClicked", "onDataLoad"] }, { type: DynamicFormSlideToggleitemComponent, selector: "cts-dynamic-form-slide-toggleitem", inputs: ["label", "disabled", "checked", "theme"], outputs: ["onToggle"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FilterComponent, decorators: [{
               type: i0.Component,
               args: [{