nuxeo-development-framework 5.0.5 → 5.0.7

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

@@ -3340,6 +3340,7 @@
       EXCLUDE_KEYS_WHEN_UPDATE: ["contextParameters"],
       CHILDREN_PATH: "contextParameters.children.entries",
       PARENT_KEY: "parentRef",
+      ENABLE_QUICK_REFRESH: false,
       REQUEST: function () {
           return rxjs.of();
       },
@@ -3371,10 +3372,12 @@
       TTL: 3,
       UNIT: exports.CachingExpiryUnit.MONTHS,
       AUTO_CHECK: true,
-      RETRY: 3
+      RETRY: 3,
+      QUICK_REFRESH: 1,
+      QUICK_REFRESH_UNIT: exports.CachingExpiryUnit.HOURS
   };
 
-  var _CacheBaseService_instances, _CacheBaseService_fetchedItems, _CacheBaseService_handleCacheItems, _CacheBaseService_findNode, _CacheBaseService_findLargestDate, _CacheBaseService_handleFetchedItems, _CacheBaseService_addItemsTo, _CacheBaseService_prepareOptions, _CacheBaseService_prepareConfig, _CacheBaseService_add1SecondToModifiedDate, _CacheBaseService_clear, _CacheBaseService_validateTTLForKey, _CacheBaseService_setItemInMap, _CacheBaseService_getItem, _CacheBaseService_setItem;
+  var _CacheBaseService_instances, _CacheBaseService_fetchedItems, _CacheBaseService_handleCacheItems, _CacheBaseService_findNode, _CacheBaseService_findLargestDate, _CacheBaseService_handleFetchedItems, _CacheBaseService_addItemsTo, _CacheBaseService_prepareOptions, _CacheBaseService_prepareConfig, _CacheBaseService_add1SecondToModifiedDate, _CacheBaseService_clear, _CacheBaseService_validateTTLForKey, _CacheBaseService_validateQuickRefresh, _CacheBaseService_validateTimeDifference, _CacheBaseService_setItemInMap, _CacheBaseService_getItem, _CacheBaseService_setItem;
   var CacheBaseService = /** @class */ (function () {
       function CacheBaseService(userPreferencesService, utilityService) {
           this.userPreferencesService = userPreferencesService;
@@ -3428,35 +3431,42 @@
           }
       };
       CacheBaseService.prototype.validateTTLForKey = function (firstFetchingDate) {
-          if (!firstFetchingDate)
-              return;
-          var momentDate1 = moment__namespace(new Date(firstFetchingDate));
-          var momentDate2 = moment__namespace(new Date());
-          var difference = momentDate2.diff(momentDate1, DEFAULT_TTL_CONFIG.UNIT);
-          return difference >= DEFAULT_TTL_CONFIG.TTL;
+          return __classPrivateFieldGet(this, _CacheBaseService_instances, "m", _CacheBaseService_validateTimeDifference).call(this, firstFetchingDate, DEFAULT_TTL_CONFIG.UNIT, DEFAULT_TTL_CONFIG.TTL);
       };
       return CacheBaseService;
   }());
   _CacheBaseService_fetchedItems = new WeakMap(), _CacheBaseService_instances = new WeakSet(), _CacheBaseService_handleCacheItems = function _CacheBaseService_handleCacheItems(options) {
-      var _j, _k;
+      var _l, _m, _o;
       var _this = this;
       var observable;
       __classPrivateFieldGet(this, _CacheBaseService_instances, "m", _CacheBaseService_prepareOptions).call(this, options);
       var cachedItem = __classPrivateFieldGet(this, _CacheBaseService_instances, "m", _CacheBaseService_getItem).call(this, options);
       if (cachedItem) {
           __classPrivateFieldGet(this, _CacheBaseService_instances, "m", _CacheBaseService_setItemInMap).call(this, options.cacheKey, Object.assign(Object.assign({}, cachedItem), { fetchingItemsFromTheServer: false, onFinishFetching: new rxjs.Subject(), request: options.request }));
-          var params = (_j = {},
-              _j[options.pageKey] = 0,
-              _j[options.minCompareDateKey] = __classPrivateFieldGet(this, _CacheBaseService_instances, "m", _CacheBaseService_add1SecondToModifiedDate).call(this, new Date(__classPrivateFieldGet(this, _CacheBaseService_fetchedItems, "f")[options.cacheKey].lastModifiedDate)).toISOString(),
-              _j);
-          __classPrivateFieldGet(this, _CacheBaseService_fetchedItems, "f")[options.cacheKey].params = params;
-          observable = options.request(params);
+          var shouldRefresh = __classPrivateFieldGet(this, _CacheBaseService_instances, "m", _CacheBaseService_validateQuickRefresh).call(this, __classPrivateFieldGet(this, _CacheBaseService_fetchedItems, "f")[options.cacheKey].firstFetchingDate);
+          if (options.enableQuickRefresh || shouldRefresh) {
+              __classPrivateFieldGet(this, _CacheBaseService_fetchedItems, "f")[options.cacheKey].firstFetchingDate = new Date().toISOString();
+              var params = (_l = {},
+                  _l[options.pageKey] = 0,
+                  _l[options.minCompareDateKey] = __classPrivateFieldGet(this, _CacheBaseService_instances, "m", _CacheBaseService_add1SecondToModifiedDate).call(this, new Date(__classPrivateFieldGet(this, _CacheBaseService_fetchedItems, "f")[options.cacheKey].lastModifiedDate)).toISOString(),
+                  _l);
+              __classPrivateFieldGet(this, _CacheBaseService_fetchedItems, "f")[options.cacheKey].params = params;
+              observable = options.request(params);
+          }
+          else {
+              var item = __classPrivateFieldGet(this, _CacheBaseService_fetchedItems, "f")[options.cacheKey];
+              observable = rxjs.of(_cloneDeep__default["default"]((_m = {},
+                  _m[options.mappedDataKey] = item.data,
+                  _m[options.lastModifiedDateKey] = item.lastModifiedDate,
+                  _m[options.resultsCount] = item[options.resultsCount],
+                  _m))).pipe(operators.delay(100));
+          }
       }
       else {
           __classPrivateFieldGet(this, _CacheBaseService_instances, "m", _CacheBaseService_setItemInMap).call(this, options.cacheKey);
           __classPrivateFieldGet(this, _CacheBaseService_fetchedItems, "f")[options.cacheKey].request = options.request;
           __classPrivateFieldGet(this, _CacheBaseService_fetchedItems, "f")[options.cacheKey].firstFetchingDate = new Date().toISOString();
-          observable = options.request((_k = {}, _k[options.pageKey] = 0, _k));
+          observable = options.request((_o = {}, _o[options.pageKey] = 0, _o));
       }
       __classPrivateFieldGet(this, _CacheBaseService_fetchedItems, "f")[options.cacheKey].fetchingItemsFromTheServer = true;
       return observable.pipe(operators.retry(DEFAULT_TTL_CONFIG.RETRY), operators.expand(function (results) {
@@ -3481,12 +3491,12 @@
           }
           return _fetchedItems;
       }), operators.map(function (res) {
-          var _j;
-          var result = _cloneDeep__default["default"]((_j = {},
-              _j[options.mappedDataKey] = res.data,
-              _j[options.lastModifiedDateKey] = res.lastModifiedDate,
-              _j[options.resultsCount] = res[options.resultsCount],
-              _j));
+          var _l;
+          var result = _cloneDeep__default["default"]((_l = {},
+              _l[options.mappedDataKey] = res.data,
+              _l[options.lastModifiedDateKey] = res.lastModifiedDate,
+              _l[options.resultsCount] = res[options.resultsCount],
+              _l));
           res.onFinishFetching.next(result);
           res.onFinishFetching.complete();
           return result;
@@ -3494,7 +3504,7 @@
           throw er;
       }));
   }, _CacheBaseService_findNode = function _CacheBaseService_findNode(items, uniqueCompareKey, childrenPath, value) {
-      var e_1, _j;
+      var e_1, _l;
       try {
           for (var items_1 = __values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
               var node = items_1_1.value;
@@ -3513,7 +3523,7 @@
       catch (e_1_1) { e_1 = { error: e_1_1 }; }
       finally {
           try {
-              if (items_1_1 && !items_1_1.done && (_j = items_1.return)) _j.call(items_1);
+              if (items_1_1 && !items_1_1.done && (_l = items_1.return)) _l.call(items_1);
           }
           finally { if (e_1) throw e_1.error; }
       }
@@ -3522,7 +3532,7 @@
       var _this = this;
       var largestDate = null;
       var traverse = function (node) {
-          var e_2, _j;
+          var e_2, _l;
           if (!node)
               return;
           var children = _this.utilityService.getValue(node, childrenPath);
@@ -3540,7 +3550,7 @@
               catch (e_2_1) { e_2 = { error: e_2_1 }; }
               finally {
                   try {
-                      if (children_1_1 && !children_1_1.done && (_j = children_1.return)) _j.call(children_1);
+                      if (children_1_1 && !children_1_1.done && (_l = children_1.return)) _l.call(children_1);
                   }
                   finally { if (e_2) throw e_2.error; }
               }
@@ -3549,7 +3559,7 @@
       nodeList.forEach(function (node) { return traverse(node); });
       return largestDate;
   }, _CacheBaseService_handleFetchedItems = function _CacheBaseService_handleFetchedItems(options, res) {
-      var _j;
+      var _l;
       var _this = this;
       var _a;
       if ((_a = __classPrivateFieldGet(this, _CacheBaseService_fetchedItems, "f")[options.cacheKey].data) === null || _a === void 0 ? void 0 : _a.length) {
@@ -3588,7 +3598,7 @@
           __classPrivateFieldGet(this, _CacheBaseService_fetchedItems, "f")[options.cacheKey].resultsCount = res[options.resultsCount];
       }
       if (res[options.totalPageKey] - res[options.pageKey] > 1) {
-          return __classPrivateFieldGet(this, _CacheBaseService_fetchedItems, "f")[options.cacheKey].request(Object.assign(Object.assign({}, (__classPrivateFieldGet(this, _CacheBaseService_fetchedItems, "f")[options.cacheKey].params || {})), (_j = {}, _j[options.pageKey] = res[options.pageKey] + 1, _j)));
+          return __classPrivateFieldGet(this, _CacheBaseService_fetchedItems, "f")[options.cacheKey].request(Object.assign(Object.assign({}, (__classPrivateFieldGet(this, _CacheBaseService_fetchedItems, "f")[options.cacheKey].params || {})), (_l = {}, _l[options.pageKey] = res[options.pageKey] + 1, _l)));
       }
       else {
           return null;
@@ -3615,12 +3625,15 @@
       options.excludeKeysWhenUpdate = options.excludeKeysWhenUpdate || DEFAULT_CACHE_OPTIONS.EXCLUDE_KEYS_WHEN_UPDATE;
       options.childrenPath = options.childrenPath || DEFAULT_CACHE_OPTIONS.CHILDREN_PATH;
       options.parentKey = options.parentKey || DEFAULT_CACHE_OPTIONS.PARENT_KEY;
+      options.enableQuickRefresh = options.enableQuickRefresh || DEFAULT_CACHE_OPTIONS.ENABLE_QUICK_REFRESH;
   }, _CacheBaseService_prepareConfig = function _CacheBaseService_prepareConfig() {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
       DEFAULT_TTL_CONFIG.TTL = ((_b = (_a = EnvManager.environment) === null || _a === void 0 ? void 0 : _a.cache) === null || _b === void 0 ? void 0 : _b.ttl) || DEFAULT_TTL_CONFIG.TTL;
       DEFAULT_TTL_CONFIG.UNIT = ((_d = (_c = EnvManager.environment) === null || _c === void 0 ? void 0 : _c.cache) === null || _d === void 0 ? void 0 : _d.ttlUnit) || DEFAULT_TTL_CONFIG.UNIT;
       DEFAULT_TTL_CONFIG.AUTO_CHECK = ((_f = (_e = EnvManager.environment) === null || _e === void 0 ? void 0 : _e.cache) === null || _f === void 0 ? void 0 : _f.autoCheck) == 'YES';
-      DEFAULT_TTL_CONFIG.RETRY = ((_h = (_g = EnvManager.environment) === null || _g === void 0 ? void 0 : _g.cache) === null || _h === void 0 ? void 0 : _h.retry) || DEFAULT_TTL_CONFIG.RETRY;
+      DEFAULT_TTL_CONFIG.QUICK_REFRESH = ((_h = (_g = EnvManager.environment) === null || _g === void 0 ? void 0 : _g.cache) === null || _h === void 0 ? void 0 : _h.quickRefresh) || DEFAULT_TTL_CONFIG.QUICK_REFRESH;
+      DEFAULT_TTL_CONFIG.QUICK_REFRESH_UNIT =
+          ((_k = (_j = EnvManager.environment) === null || _j === void 0 ? void 0 : _j.cache) === null || _k === void 0 ? void 0 : _k.quickRefreshUnit) || DEFAULT_TTL_CONFIG.QUICK_REFRESH_UNIT;
   }, _CacheBaseService_add1SecondToModifiedDate = function _CacheBaseService_add1SecondToModifiedDate(date) {
       var newDate = new Date(date.getTime());
       newDate.setSeconds(newDate.getSeconds() + 1);
@@ -3636,6 +3649,14 @@
       var _a;
       if (this.validateTTLForKey((_a = __classPrivateFieldGet(this, _CacheBaseService_instances, "m", _CacheBaseService_getItem).call(this, options)) === null || _a === void 0 ? void 0 : _a.firstFetchingDate))
           __classPrivateFieldGet(this, _CacheBaseService_instances, "m", _CacheBaseService_clear).call(this, options.userName, options.cacheKey);
+  }, _CacheBaseService_validateQuickRefresh = function _CacheBaseService_validateQuickRefresh(date) {
+      return __classPrivateFieldGet(this, _CacheBaseService_instances, "m", _CacheBaseService_validateTimeDifference).call(this, date, DEFAULT_TTL_CONFIG.QUICK_REFRESH_UNIT, DEFAULT_TTL_CONFIG.QUICK_REFRESH);
+  }, _CacheBaseService_validateTimeDifference = function _CacheBaseService_validateTimeDifference(date, unit, threshold) {
+      if (!date)
+          return;
+      var momentDate1 = moment__namespace(new Date(date));
+      var momentDate2 = moment__namespace();
+      return momentDate2.diff(momentDate1, unit) >= threshold;
   }, _CacheBaseService_setItemInMap = function _CacheBaseService_setItemInMap(key, val) {
       var empty = {
           data: [],
@@ -7283,18 +7304,31 @@
           this.disabled = false;
           this.range = false;
           this.vertical = false;
+          this.emitOnBlur = true;
           this.hoveredDate = null;
           // this.selectedDate.from = calendar.getToday();
       }
       GregorianDatepickerComponent.prototype.isHovered = function (date) {
-          return this.selectedDate && (this.selectedDate.from && !this.selectedDate.to && this.hoveredDate && date.after(this.selectedDate.from) && date.before(this.hoveredDate));
+          return (this.selectedDate &&
+              this.selectedDate.from &&
+              !this.selectedDate.to &&
+              this.hoveredDate &&
+              date.after(this.selectedDate.from) &&
+              date.before(this.hoveredDate));
       };
       GregorianDatepickerComponent.prototype.isInside = function (date) {
-          return this.selectedDate && (this.selectedDate.to && date.after(this.selectedDate.from) && date.before(this.selectedDate.to));
+          return (this.selectedDate &&
+              this.selectedDate.to &&
+              date.after(this.selectedDate.from) &&
+              date.before(this.selectedDate.to));
       };
       GregorianDatepickerComponent.prototype.isRange = function (date) {
           if (this.range) {
-              return this.selectedDate && (date.equals(this.selectedDate.from) || (this.selectedDate.to && date.equals(this.selectedDate.to)) || this.isInside(date) || this.isHovered(date));
+              return (this.selectedDate &&
+                  (date.equals(this.selectedDate.from) ||
+                      (this.selectedDate.to && date.equals(this.selectedDate.to)) ||
+                      this.isInside(date) ||
+                      this.isHovered(date)));
           }
           else {
               return false;
@@ -7331,7 +7365,7 @@
           return parsed && this.calendar.isValid(i1$5.NgbDate.from(parsed)) ? i1$5.NgbDate.from(parsed) : currentValue;
       };
       GregorianDatepickerComponent.prototype.onBlur = function () {
-          if (!this.selectedDate) {
+          if (!this.selectedDate && this.emitOnBlur) {
               this.selectedDateChange.emit(null);
           }
       };
@@ -7351,15 +7385,13 @@
       return GregorianDatepickerComponent;
   }());
   GregorianDatepickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GregorianDatepickerComponent, deps: [{ token: i1__namespace$5.NgbCalendar }, { token: i1__namespace$5.NgbDateParserFormatter }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  GregorianDatepickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GregorianDatepickerComponent, selector: "gregorian-date-picker", inputs: { selectedDate: "selectedDate", readonly: "readonly", isRequired: "isRequired", disabled: "disabled", min: "min", max: "max", name: "name", range: "range", vertical: "vertical", placeHolder: "placeHolder" }, outputs: { selectedDateChange: "selectedDateChange" }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["d"], descendants: true }], ngImport: i0__namespace, template: "<div provideParentForm>\r\n\t<input\r\n\t\tclass=\"form-control\"\r\n\t\t[ngClass]=\"{ hidden: range, 'input-filled': selectedDate }\"\r\n\t\t[ngModel]=\"!range && selectedDate\"\r\n\t\t(ngModelChange)=\"!range && (selectedDate = $event)\"\r\n\t\t[placeholder]=\"placeHolder ? placeHolder : 'd/M/yyyy'\"\r\n\t\tngbDatepicker\r\n\t\t(click)=\"d.toggle()\"\r\n\t\t(keyup.enter)=\"openDatePicker()\"\r\n\t\t(dateSelect)=\"onDateSelection($event)\"\r\n\t\t#d=\"ngbDatepicker\"\r\n\t\tfirstDayOfWeek=\"7\"\r\n\t\t[readonly]=\"readonly\"\r\n\t\t[autoClose]=\"range ? 'outside' : true\"\r\n\t\t[minDate]=\"min\"\r\n\t\t[maxDate]=\"max\"\r\n\t\t[required]=\"isRequired\"\r\n\t\t[displayMonths]=\"range ? 2 : 1\"\r\n\t\t[name]=\"name\"\r\n\t\t[startDate]=\"range ? selectedDate.from! : selectedDate!\"\r\n\t\t[dayTemplate]=\"t\"\r\n\t\t(blur)=\"onBlur()\"\r\n\t\t[footerTemplate]=\"footerTemplate\"\r\n\t\t[disabled]=\"disabled\"\r\n\t\tcontainer=\"body\"\r\n\t/>\r\n\t<ng-container *ngIf=\"range\">\r\n\t\t<div class=\"form-group ranger\" [ngClass]=\"{ vertical: vertical }\">\r\n\t\t\t<div class=\"input-group\">\r\n\t\t\t\t<input\r\n\t\t\t\t\t#dpFromDate\r\n\t\t\t\t\tclass=\"form-control\"\r\n\t\t\t\t\t(click)=\"d.toggle()\"\r\n\t\t\t\t\t[placeholder]=\"placeHolder ? placeHolder : 'd/M/yyyy'\"\r\n\t\t\t\t\tname=\"dpFromDate\"\r\n\t\t\t\t\t[value]=\"formatter.format(selectedDate.from)\"\r\n\t\t\t\t\t(input)=\"fromDate = validateInput(selectedDate.from, dpFromDate.value)\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div class=\"input-group-append\">\r\n\t\t\t\t\t<button class=\"btn btn-outline-secondary\" (click)=\"d.toggle()\" type=\"button\">\r\n\t\t\t\t\t\t<i class=\"bi bi-calendar-week icon\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"form-group ranger\" [ngClass]=\"{ vertical: vertical }\">\r\n\t\t\t<div class=\"input-group\">\r\n\t\t\t\t<input\r\n\t\t\t\t\t#dpToDate\r\n\t\t\t\t\tclass=\"form-control\"\r\n\t\t\t\t\t(click)=\"d.toggle()\"\r\n\t\t\t\t\t[placeholder]=\"placeHolder ? placeHolder : 'd/M/yyyy'\"\r\n\t\t\t\t\tname=\"dpToDate\"\r\n\t\t\t\t\t[value]=\"formatter.format(selectedDate.to)\"\r\n\t\t\t\t\t(input)=\"selectedDate.to = validateInput(selectedDate.to, dpToDate.value)\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div class=\"input-group-append\">\r\n\t\t\t\t\t<button class=\"btn btn-outline-secondary\" (click)=\"d.toggle()\" type=\"button\">\r\n\t\t\t\t\t\t<i class=\"bi bi-calendar-week icon\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-container>\r\n</div>\r\n<ng-template #t let-date let-focused=\"focused\">\r\n\t<span\r\n\t\tclass=\"custom-day\"\r\n\t\t[class.focused]=\"focused || isToday(date)\"\r\n\t\t[class.range]=\"isRange(date) || isSelectedDate(date)\"\r\n\t\t[class.faded]=\"isHovered(date) || (isInside(date) && range)\"\r\n\t\t(mouseenter)=\"hoveredDate = date\"\r\n\t\t(mouseleave)=\"hoveredDate = null\"\r\n\t>\r\n\t\t{{ date.day }}\r\n\t</span>\r\n</ng-template>\r\n\r\n<ng-template #footerTemplate>\r\n\t<hr class=\"my-0\" />\r\n\t<button class=\"btn btn-secondary btn-sm m-2 float-right\" type=\"button\" (click)=\"d.close()\">\r\n\t\t{{ 'BUTTONS.CLOSE' | translate }}\r\n\t</button>\r\n\t<button class=\"btn btn-primary btn-sm m-2 float-left\" type=\"button\" (click)=\"clear()\">\r\n\t\t{{ 'BUTTONS.CLEAR' | translate }}\r\n\t</button>\r\n</ng-template>\r\n", styles: [".date-input-container{position:relative}.date-input-container .date-input-wrapper{position:absolute;width:100%;height:100%;z-index:999999}.hijriInput{border-top-left-radius:0;border-bottom-left-radius:0}.input-filled{border-color:#1a96c6!important}.ngb-dp-weekday{width:2.1rem!important}.custom-day{text-align:center;padding:.185rem .25rem;display:inline-block;height:2rem;width:2rem}.custom-day.focused{background-color:#e6e6e6}.custom-day.range,.custom-day:hover{background-color:#0275d8;color:#fff}.custom-day.faded{background-color:#0275d880}.ranger{width:calc(50% - 5px);margin:0 2px;float:left}.ranger.vertical{width:calc(100% - 5px);margin:8px 2px}.ranger.vertical:nth-child(2){margin-top:0}.ranger.vertical:last-child{margin-bottom:0}.rtl .custom-select{background:#ffffff url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e\") left .75rem center/8px 10px no-repeat}.rtl .ngb-dp-arrow-btn{transform:rotate(180deg)}.rtl .ranger{float:right}\n"], directives: [{ type: ProvideParentFormDirective, selector: "[provideParentForm]" }, { type: i1__namespace$5.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["disabled", "autoClose", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekdays", "showWeekNumbers", "startDate", "container", "positionTarget"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { type: i2__namespace$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  GregorianDatepickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GregorianDatepickerComponent, selector: "gregorian-date-picker", inputs: { selectedDate: "selectedDate", readonly: "readonly", isRequired: "isRequired", disabled: "disabled", min: "min", max: "max", name: "name", range: "range", vertical: "vertical", emitOnBlur: "emitOnBlur", placeHolder: "placeHolder" }, outputs: { selectedDateChange: "selectedDateChange" }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["d"], descendants: true }], ngImport: i0__namespace, template: "<div provideParentForm>\r\n\t<input\r\n\t\tclass=\"form-control\"\r\n\t\t[ngClass]=\"{ hidden: range, 'input-filled': selectedDate }\"\r\n\t\t[ngModel]=\"!range && selectedDate\"\r\n\t\t(ngModelChange)=\"!range && (selectedDate = $event)\"\r\n\t\t[placeholder]=\"placeHolder ? placeHolder : 'd/M/yyyy'\"\r\n\t\tngbDatepicker\r\n\t\t(click)=\"d.toggle()\"\r\n\t\t(keyup.enter)=\"openDatePicker()\"\r\n\t\t(dateSelect)=\"onDateSelection($event)\"\r\n\t\t#d=\"ngbDatepicker\"\r\n\t\tfirstDayOfWeek=\"7\"\r\n\t\t[readonly]=\"readonly\"\r\n\t\t[autoClose]=\"range ? 'outside' : true\"\r\n\t\t[minDate]=\"min\"\r\n\t\t[maxDate]=\"max\"\r\n\t\t[required]=\"isRequired\"\r\n\t\t[displayMonths]=\"range ? 2 : 1\"\r\n\t\t[name]=\"name\"\r\n\t\t[startDate]=\"range ? selectedDate.from! : selectedDate!\"\r\n\t\t[dayTemplate]=\"t\"\r\n\t\t(blur)=\"onBlur()\"\r\n\t\t[footerTemplate]=\"footerTemplate\"\r\n\t\t[disabled]=\"disabled\"\r\n\t\tcontainer=\"body\"\r\n\t/>\r\n\t<ng-container *ngIf=\"range\">\r\n\t\t<div class=\"form-group ranger\" [ngClass]=\"{ vertical: vertical }\">\r\n\t\t\t<div class=\"input-group\">\r\n\t\t\t\t<input\r\n\t\t\t\t\t#dpFromDate\r\n\t\t\t\t\tclass=\"form-control\"\r\n\t\t\t\t\t(click)=\"d.toggle()\"\r\n\t\t\t\t\t[placeholder]=\"placeHolder ? placeHolder : 'd/M/yyyy'\"\r\n\t\t\t\t\tname=\"dpFromDate\"\r\n\t\t\t\t\t[value]=\"formatter.format(selectedDate.from)\"\r\n\t\t\t\t\t(input)=\"fromDate = validateInput(selectedDate.from, dpFromDate.value)\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div class=\"input-group-append\">\r\n\t\t\t\t\t<button class=\"btn btn-outline-secondary\" (click)=\"d.toggle()\" type=\"button\">\r\n\t\t\t\t\t\t<i class=\"bi bi-calendar-week icon\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"form-group ranger\" [ngClass]=\"{ vertical: vertical }\">\r\n\t\t\t<div class=\"input-group\">\r\n\t\t\t\t<input\r\n\t\t\t\t\t#dpToDate\r\n\t\t\t\t\tclass=\"form-control\"\r\n\t\t\t\t\t(click)=\"d.toggle()\"\r\n\t\t\t\t\t[placeholder]=\"placeHolder ? placeHolder : 'd/M/yyyy'\"\r\n\t\t\t\t\tname=\"dpToDate\"\r\n\t\t\t\t\t[value]=\"formatter.format(selectedDate.to)\"\r\n\t\t\t\t\t(input)=\"selectedDate.to = validateInput(selectedDate.to, dpToDate.value)\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div class=\"input-group-append\">\r\n\t\t\t\t\t<button class=\"btn btn-outline-secondary\" (click)=\"d.toggle()\" type=\"button\">\r\n\t\t\t\t\t\t<i class=\"bi bi-calendar-week icon\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-container>\r\n</div>\r\n<ng-template #t let-date let-focused=\"focused\">\r\n\t<span\r\n\t\tclass=\"custom-day\"\r\n\t\t[class.focused]=\"focused || isToday(date)\"\r\n\t\t[class.range]=\"isRange(date) || isSelectedDate(date)\"\r\n\t\t[class.faded]=\"isHovered(date) || (isInside(date) && range)\"\r\n\t\t(mouseenter)=\"hoveredDate = date\"\r\n\t\t(mouseleave)=\"hoveredDate = null\"\r\n\t>\r\n\t\t{{ date.day }}\r\n\t</span>\r\n</ng-template>\r\n\r\n<ng-template #footerTemplate>\r\n\t<hr class=\"my-0\" />\r\n\t<button class=\"btn btn-secondary btn-sm m-2 float-right\" type=\"button\" (click)=\"d.close()\">\r\n\t\t{{ 'BUTTONS.CLOSE' | translate }}\r\n\t</button>\r\n\t<button class=\"btn btn-primary btn-sm m-2 float-left\" type=\"button\" (click)=\"clear()\">\r\n\t\t{{ 'BUTTONS.CLEAR' | translate }}\r\n\t</button>\r\n</ng-template>\r\n", styles: [".date-input-container{position:relative}.date-input-container .date-input-wrapper{position:absolute;width:100%;height:100%;z-index:999999}.hijriInput{border-top-left-radius:0;border-bottom-left-radius:0}.input-filled{border-color:#1a96c6!important}.ngb-dp-weekday{width:2.1rem!important}.custom-day{text-align:center;padding:.185rem .25rem;display:inline-block;height:2rem;width:2rem}.custom-day.focused{background-color:#e6e6e6}.custom-day.range,.custom-day:hover{background-color:#0275d8;color:#fff}.custom-day.faded{background-color:#0275d880}.ranger{width:calc(50% - 5px);margin:0 2px;float:left}.ranger.vertical{width:calc(100% - 5px);margin:8px 2px}.ranger.vertical:nth-child(2){margin-top:0}.ranger.vertical:last-child{margin-bottom:0}.rtl .custom-select{background:#ffffff url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e\") left .75rem center/8px 10px no-repeat}.rtl .ngb-dp-arrow-btn{transform:rotate(180deg)}.rtl .ranger{float:right}\n"], directives: [{ type: ProvideParentFormDirective, selector: "[provideParentForm]" }, { type: i1__namespace$5.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["disabled", "autoClose", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekdays", "showWeekNumbers", "startDate", "container", "positionTarget"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { type: i2__namespace$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], 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: GregorianDatepickerComponent, decorators: [{
               type: i0.Component,
               args: [{
                       selector: 'gregorian-date-picker',
                       templateUrl: './gregorian-datepicker.component.html',
-                      styleUrls: [
-                          './gregorian-date-picker.component.scss'
-                      ],
+                      styleUrls: ['./gregorian-date-picker.component.scss'],
                       encapsulation: i0.ViewEncapsulation.None
                   }]
           }], ctorParameters: function () { return [{ type: i1__namespace$5.NgbCalendar }, { type: i1__namespace$5.NgbDateParserFormatter }]; }, propDecorators: { datePicker: [{
@@ -7385,6 +7417,8 @@
                   type: i0.Input
               }], vertical: [{
                   type: i0.Input
+              }], emitOnBlur: [{
+                  type: i0.Input
               }], placeHolder: [{
                   type: i0.Input
               }] } });
@@ -7427,14 +7461,23 @@
           this.disabled = false;
           this.range = false;
           this.vertical = false;
+          this.emitOnBlur = true;
           this.hoveredDate = null;
           // this.fromDate = calendar.getToday();
       }
       HijriDatepickerComponent.prototype.isHovered = function (date) {
-          return this.selectedDate && (this.selectedDate.from && !this.selectedDate.to && this.hoveredDate && date.after(this.selectedDate.from) && date.before(this.hoveredDate));
+          return (this.selectedDate &&
+              this.selectedDate.from &&
+              !this.selectedDate.to &&
+              this.hoveredDate &&
+              date.after(this.selectedDate.from) &&
+              date.before(this.hoveredDate));
       };
       HijriDatepickerComponent.prototype.isInside = function (date) {
-          return this.selectedDate && (this.selectedDate.to && date.after(this.selectedDate.from) && date.before(this.selectedDate.to));
+          return (this.selectedDate &&
+              this.selectedDate.to &&
+              date.after(this.selectedDate.from) &&
+              date.before(this.selectedDate.to));
       };
       HijriDatepickerComponent.prototype.isToday = function (date) {
           return date.equals(this.calendar.getToday());
@@ -7443,7 +7486,11 @@
           return this.selectedDate && !this.range && date.equals(this.selectedDate);
       };
       HijriDatepickerComponent.prototype.isRange = function (date) {
-          return this.selectedDate && (date.equals(this.selectedDate.from) || (this.selectedDate.to && date.equals(this.selectedDate.to)) || this.isInside(date) || this.isHovered(date));
+          return (this.selectedDate &&
+              (date.equals(this.selectedDate.from) ||
+                  (this.selectedDate.to && date.equals(this.selectedDate.to)) ||
+                  this.isInside(date) ||
+                  this.isHovered(date)));
       };
       HijriDatepickerComponent.prototype.onDateSelection = function (date) {
           if (this.range) {
@@ -7470,7 +7517,7 @@
           return parsed && this.calendar.isValid(i1$5.NgbDate.from(parsed)) ? i1$5.NgbDate.from(parsed) : currentValue;
       };
       HijriDatepickerComponent.prototype.onBlur = function () {
-          if (!this.selectedDate) {
+          if (!this.selectedDate && this.emitOnBlur) {
               this.selectedDateChange.emit(null);
           }
       };
@@ -7490,7 +7537,7 @@
       return HijriDatepickerComponent;
   }());
   HijriDatepickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HijriDatepickerComponent, deps: [{ token: i1__namespace$5.NgbCalendar }, { token: i1__namespace$5.NgbDateParserFormatter }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  HijriDatepickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: HijriDatepickerComponent, selector: "hijri-date-picker", inputs: { selectedDate: "selectedDate", readonly: "readonly", isRequired: "isRequired", disabled: "disabled", min: "min", max: "max", name: "name", range: "range", vertical: "vertical", placeHolder: "placeHolder" }, outputs: { selectedDateChange: "selectedDateChange" }, providers: [
+  HijriDatepickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: HijriDatepickerComponent, selector: "hijri-date-picker", inputs: { selectedDate: "selectedDate", readonly: "readonly", isRequired: "isRequired", disabled: "disabled", min: "min", max: "max", name: "name", range: "range", vertical: "vertical", emitOnBlur: "emitOnBlur", placeHolder: "placeHolder" }, outputs: { selectedDateChange: "selectedDateChange" }, providers: [
           { provide: i1$5.NgbCalendar, useClass: i1$5.NgbCalendarIslamicUmalqura },
           { provide: i1$5.NgbDatepickerI18n, useClass: IslamicI18n }
       ], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["d"], descendants: true }], ngImport: i0__namespace, template: "<div provideParentForm>\r\n\t<input\r\n\t\tclass=\"form-control\"\r\n\t\t[ngClass]=\"{ hidden: range, 'input-filled': selectedDate }\"\r\n\t\t[ngModel]=\"!range && selectedDate\"\r\n\t\t(ngModelChange)=\"!range && (selectedDate = $event)\"\r\n\t\t[placeholder]=\"placeHolder ? placeHolder : 'd/M/yyyy'\"\r\n\t\tngbDatepicker\r\n\t\t(click)=\"d.toggle()\"\r\n\t\t(keyup.enter)=\"openDatePicker()\"\r\n\t\t(dateSelect)=\"onDateSelection($event)\"\r\n\t\t#d=\"ngbDatepicker\"\r\n\t\tfirstDayOfWeek=\"7\"\r\n\t\t[readonly]=\"readonly\"\r\n\t\t[autoClose]=\"range ? 'outside' : true\"\r\n\t\t[minDate]=\"min\"\r\n\t\t[maxDate]=\"max\"\r\n\t\t[required]=\"isRequired\"\r\n\t\t[displayMonths]=\"range ? 2 : 1\"\r\n\t\t[name]=\"name\"\r\n\t\t[startDate]=\"range ? selectedDate.from! : selectedDate!\"\r\n\t\t[dayTemplate]=\"t\"\r\n\t\t(blur)=\"onBlur()\"\r\n\t\t[footerTemplate]=\"footerTemplate\"\r\n\t\t[disabled]=\"disabled\"\r\n\t\tcontainer=\"body\"\r\n\t/>\r\n\t<ng-container *ngIf=\"range\">\r\n\t\t<div class=\"form-group ranger\" [ngClass]=\"{ vertical: vertical }\">\r\n\t\t\t<div class=\"input-group\">\r\n\t\t\t\t<input\r\n\t\t\t\t\t#dpFromDate\r\n\t\t\t\t\tclass=\"form-control\"\r\n\t\t\t\t\t(click)=\"d.toggle()\"\r\n\t\t\t\t\t[placeholder]=\"placeHolder ? placeHolder : 'd/M/yyyy'\"\r\n\t\t\t\t\tname=\"dpFromDate\"\r\n\t\t\t\t\t[value]=\"formatter.format(selectedDate.from)\"\r\n\t\t\t\t\t(input)=\"fromDate = validateInput(selectedDate.from, dpFromDate.value)\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div class=\"input-group-append\">\r\n\t\t\t\t\t<button class=\"btn btn-outline-secondary\" (click)=\"d.toggle()\" type=\"button\">\r\n\t\t\t\t\t\t<i class=\"bi bi-calendar-week icon\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"form-group ranger\" [ngClass]=\"{ vertical: vertical }\">\r\n\t\t\t<div class=\"input-group\">\r\n\t\t\t\t<input\r\n\t\t\t\t\t#dpToDate\r\n\t\t\t\t\tclass=\"form-control\"\r\n\t\t\t\t\t(click)=\"d.toggle()\"\r\n\t\t\t\t\t[placeholder]=\"placeHolder ? placeHolder : 'd/M/yyyy'\"\r\n\t\t\t\t\tname=\"dpToDate\"\r\n\t\t\t\t\t[value]=\"formatter.format(selectedDate.to)\"\r\n\t\t\t\t\t(input)=\"selectedDate.to = validateInput(selectedDate.to, dpToDate.value)\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div class=\"input-group-append\">\r\n\t\t\t\t\t<button class=\"btn btn-outline-secondary\" (click)=\"d.toggle()\" type=\"button\">\r\n\t\t\t\t\t\t<i class=\"bi bi-calendar-week icon\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-container>\r\n</div>\r\n<ng-template #t let-date let-focused=\"focused\">\r\n\t<span\r\n\t\tclass=\"custom-day\"\r\n\t\t[class.focused]=\"focused || isToday(date)\"\r\n\t\t[class.range]=\"isRange(date) || isSelectedDate(date)\"\r\n\t\t[class.faded]=\"isHovered(date) || (isInside(date) && range)\"\r\n\t\t(mouseenter)=\"hoveredDate = date\"\r\n\t\t(mouseleave)=\"hoveredDate = null\"\r\n\t>\r\n\t\t{{ date.day }}\r\n\t</span>\r\n</ng-template>\r\n\r\n<ng-template #footerTemplate>\r\n\t<hr class=\"my-0\" />\r\n\t<button class=\"btn btn-secondary btn-sm m-2 float-right\" type=\"button\" (click)=\"d.close()\">\r\n\t\t{{ 'BUTTONS.CLOSE' | translate }}\r\n\t</button>\r\n\t<button class=\"btn btn-primary btn-sm m-2 float-left\" type=\"button\" (click)=\"clear()\">\r\n\t\t{{ 'BUTTONS.CLEAR' | translate }}\r\n\t</button>\r\n</ng-template>\r\n", styles: [".date-input-container{position:relative}.date-input-container .date-input-wrapper{position:absolute;width:100%;height:100%;z-index:999999}.hijriInput{border-top-left-radius:0;border-bottom-left-radius:0}.input-filled{border-color:#1a96c6!important}.ngb-dp-weekday{width:2.1rem!important}.custom-day{text-align:center;padding:.185rem .25rem;display:inline-block;height:2rem;width:2rem}.custom-day.focused{background-color:#e6e6e6}.custom-day.range,.custom-day:hover{background-color:#0275d8;color:#fff}.custom-day.faded{background-color:#0275d880}.ranger{width:calc(50% - 5px);margin:0 2px;float:left}.ranger.vertical{width:calc(100% - 5px);margin:8px 2px}.ranger.vertical:nth-child(2){margin-top:0}.ranger.vertical:last-child{margin-bottom:0}.rtl .custom-select{background:#ffffff url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e\") left .75rem center/8px 10px no-repeat}.rtl .ngb-dp-arrow-btn{transform:rotate(180deg)}.rtl .ranger{float:right}\n"], directives: [{ type: ProvideParentFormDirective, selector: "[provideParentForm]" }, { type: i1__namespace$5.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["disabled", "autoClose", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekdays", "showWeekNumbers", "startDate", "container", "positionTarget"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { type: i2__namespace$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
@@ -7503,9 +7550,7 @@
                           { provide: i1$5.NgbCalendar, useClass: i1$5.NgbCalendarIslamicUmalqura },
                           { provide: i1$5.NgbDatepickerI18n, useClass: IslamicI18n }
                       ],
-                      styleUrls: [
-                          './hijri-date-picker.component.scss'
-                      ],
+                      styleUrls: ['./hijri-date-picker.component.scss'],
                       encapsulation: i0.ViewEncapsulation.None
                   }]
           }], ctorParameters: function () { return [{ type: i1__namespace$5.NgbCalendar }, { type: i1__namespace$5.NgbDateParserFormatter }]; }, propDecorators: { datePicker: [{
@@ -7531,6 +7576,8 @@
                   type: i0.Input
               }], vertical: [{
                   type: i0.Input
+              }], emitOnBlur: [{
+                  type: i0.Input
               }], placeHolder: [{
                   type: i0.Input
               }] } });
@@ -7556,7 +7603,18 @@
           this.disabledbtn = false;
           this.range = false;
           this.vertical = false;
+          this.emitOnBlur = true;
       }
+      Object.defineProperty(HijriGregorianDatepickerComponent.prototype, "selectedDate", {
+          get: function () {
+              return this._selectedDate;
+          },
+          set: function (value) {
+              this._selectedDate = value;
+          },
+          enumerable: false,
+          configurable: true
+      });
       Object.defineProperty(HijriGregorianDatepickerComponent.prototype, "DateType", {
           get: function () {
               return DateType;
@@ -7572,7 +7630,7 @@
               this.selectedDateType = DateType.Hijri;
           }
       };
-      HijriGregorianDatepickerComponent.prototype.ngOnChanges = function () {
+      HijriGregorianDatepickerComponent.prototype.ngOnChanges = function (changes) {
           if (this.range && !this.selectedDate) {
               this.selectedDate = { from: undefined, to: undefined };
           }
@@ -7619,43 +7677,56 @@
           this.selectedDateChange.emit(this.selectedDate);
       };
       HijriGregorianDatepickerComponent.prototype.hijriClick = function () {
-          if (this.selectedDateType == DateType.Hijri) {
+          if (this.selectedDateType === DateType.Hijri) {
               return;
           }
           this.selectedDateType = DateType.Hijri;
-          //to hijri
+          if (this.hasValidDate()) {
+              this.convertToHijri();
+              this.selectedDateChange.emit(this.selectedDate);
+          }
+      };
+      HijriGregorianDatepickerComponent.prototype.gregClick = function () {
+          if (this.selectedDateType === DateType.Gregorian) {
+              return;
+          }
+          this.selectedDateType = DateType.Gregorian;
+          if (this.hasValidDate()) {
+              this.convertToGregorian();
+              this.selectedDateChange.emit(this.selectedDate);
+          }
+      };
+      HijriGregorianDatepickerComponent.prototype.hasValidDate = function () {
+          return !!this.selectedDate && Object.keys(this.selectedDate).length > 0;
+      };
+      HijriGregorianDatepickerComponent.prototype.convertToHijri = function () {
+          var _a, _b, _c, _d;
           if (this.range) {
               this.selectedDate = {
-                  from: this.dateFormatterService.ToHijri(this.selectedDate.from || null),
-                  to: this.dateFormatterService.ToHijri(this.selectedDate.to || null)
+                  from: this.dateFormatterService.ToHijri((_b = (_a = this.selectedDate) === null || _a === void 0 ? void 0 : _a.from) !== null && _b !== void 0 ? _b : null),
+                  to: this.dateFormatterService.ToHijri((_d = (_c = this.selectedDate) === null || _c === void 0 ? void 0 : _c.to) !== null && _d !== void 0 ? _d : null)
               };
           }
           else {
               this.selectedDate = this.dateFormatterService.ToHijri(this.selectedDate);
           }
-          this.selectedDateChange.emit(this.selectedDate);
       };
-      HijriGregorianDatepickerComponent.prototype.gregClick = function () {
-          if (this.selectedDateType == DateType.Gregorian) {
-              return;
-          }
-          this.selectedDateType = DateType.Gregorian;
-          //to Gregorian
+      HijriGregorianDatepickerComponent.prototype.convertToGregorian = function () {
+          var _a, _b, _c, _d;
           if (this.range) {
               this.selectedDate = {
-                  from: this.dateFormatterService.ToGregorian(this.selectedDate.from || null),
-                  to: this.dateFormatterService.ToGregorian(this.selectedDate.to || null)
+                  from: this.dateFormatterService.ToGregorian((_b = (_a = this.selectedDate) === null || _a === void 0 ? void 0 : _a.from) !== null && _b !== void 0 ? _b : null),
+                  to: this.dateFormatterService.ToGregorian((_d = (_c = this.selectedDate) === null || _c === void 0 ? void 0 : _c.to) !== null && _d !== void 0 ? _d : null)
               };
           }
           else {
               this.selectedDate = this.dateFormatterService.ToGregorian(this.selectedDate);
           }
-          this.selectedDateChange.emit(this.selectedDate);
       };
       return HijriGregorianDatepickerComponent;
   }());
   HijriGregorianDatepickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HijriGregorianDatepickerComponent, deps: [{ token: DateFormatterService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  HijriGregorianDatepickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: HijriGregorianDatepickerComponent, selector: "hijri-gregorian-datepicker", inputs: { selectedDateType: "selectedDateType", selectedDate: "selectedDate", label: "label", showLabel: "showLabel", readonly: "readonly", isRequired: "isRequired", disabled: "disabled", disabledbtn: "disabledbtn", minHijri: "minHijri", maxHijri: "maxHijri", minGreg: "minGreg", maxGreg: "maxGreg", hijriLabel: "hijriLabel", GregLabel: "GregLabel", placeHolder: "placeHolder", range: "range", vertical: "vertical" }, outputs: { selectedDateChange: "selectedDateChange" }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["d"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"form-group\" provideParentForm>\r\n\t<label class=\"requiredInput\" *ngIf=\"showLabel\" for=\"input-birth-Date\">{{ label }} </label>\r\n\r\n\t<div class=\"input-group\">\r\n\t\t<gregorian-date-picker\r\n\t\t\t[vertical]=\"vertical\"\r\n\t\t\t*ngIf=\"selectedDateType == DateType.Gregorian\"\r\n\t\t\t[range]=\"range\"\r\n\t\t\t[(selectedDate)]=\"selectedDate\"\r\n\t\t\t(selectedDateChange)=\"dateSelected($event)\"\r\n\t\t\t[readonly]=\"readonly\"\r\n\t\t\t[min]=\"minGreg\"\r\n\t\t\t[max]=\"maxGreg\"\r\n\t\t\tstyle=\"flex: 1 1 auto\"\r\n\t\t\t[name]=\"label\"\r\n\t\t\t[isRequired]=\"isRequired\"\r\n\t\t\t[placeHolder]=\"placeHolder\"\r\n\t\t\t[disabled]=\"disabled\"\r\n\t\t>\r\n\t\t</gregorian-date-picker>\r\n\t\t<hijri-date-picker\r\n\t\t\t[vertical]=\"vertical\"\r\n\t\t\t*ngIf=\"selectedDateType == DateType.Hijri\"\r\n\t\t\t[range]=\"range\"\r\n\t\t\t[(selectedDate)]=\"selectedDate\"\r\n\t\t\t(selectedDateChange)=\"dateSelected($event)\"\r\n\t\t\t[readonly]=\"readonly\"\r\n\t\t\t[min]=\"minHijri\"\r\n\t\t\t[max]=\"maxHijri\"\r\n\t\t\tstyle=\"flex: 1 1 auto\"\r\n\t\t\t[name]=\"label\"\r\n\t\t\t[isRequired]=\"isRequired\"\r\n\t\t\t[placeHolder]=\"placeHolder\"\r\n\t\t\t[disabled]=\"disabled\"\r\n\t\t>\r\n\t\t</hijri-date-picker>\r\n\r\n\t\t<div class=\"input-group-append\">\r\n\t\t\t<button\r\n\t\t\t\tclass=\"btn btn-sm {{ selectedDateType == DateType.Hijri ? 'btn-info focus active' : 'btn-outline-info' }}\"\r\n\t\t\t\t(click)=\"hijriClick()\"\r\n\t\t\t\t[disabled]=\"disabledbtn\"\r\n\t\t\t\ttype=\"button\"\r\n\t\t\t>\r\n\t\t\t\t{{ hijriLabel ? hijriLabel : 'Hijri' }}\r\n\t\t\t</button>\r\n\t\t\t<button\r\n\t\t\t\tclass=\"btn btn-sm {{ selectedDateType == DateType.Gregorian ? 'btn-info focus active' : 'btn-outline-info' }}\"\r\n\t\t\t\t(click)=\"gregClick()\"\r\n\t\t\t\t[disabled]=\"disabledbtn\"\r\n\t\t\t\ttype=\"button\"\r\n\t\t\t>\r\n\t\t\t\t{{ GregLabel ? GregLabel : 'Gregorian' }}\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n", components: [{ type: GregorianDatepickerComponent, selector: "gregorian-date-picker", inputs: ["selectedDate", "readonly", "isRequired", "disabled", "min", "max", "name", "range", "vertical", "placeHolder"], outputs: ["selectedDateChange"] }, { type: HijriDatepickerComponent, selector: "hijri-date-picker", inputs: ["selectedDate", "readonly", "isRequired", "disabled", "min", "max", "name", "range", "vertical", "placeHolder"], outputs: ["selectedDateChange"] }], directives: [{ type: ProvideParentFormDirective, selector: "[provideParentForm]" }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  HijriGregorianDatepickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: HijriGregorianDatepickerComponent, selector: "hijri-gregorian-datepicker", inputs: { selectedDateType: "selectedDateType", selectedDate: "selectedDate", label: "label", showLabel: "showLabel", readonly: "readonly", isRequired: "isRequired", disabled: "disabled", disabledbtn: "disabledbtn", minHijri: "minHijri", maxHijri: "maxHijri", minGreg: "minGreg", maxGreg: "maxGreg", hijriLabel: "hijriLabel", GregLabel: "GregLabel", placeHolder: "placeHolder", range: "range", vertical: "vertical", emitOnBlur: "emitOnBlur" }, outputs: { selectedDateChange: "selectedDateChange" }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["d"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"form-group\" provideParentForm>\r\n\t<label class=\"requiredInput\" *ngIf=\"showLabel\" for=\"input-birth-Date\">{{ label }} </label>\r\n\r\n\t<div class=\"input-group\">\r\n\t\t<gregorian-date-picker\r\n\t\t\t[vertical]=\"vertical\"\r\n\t\t\t*ngIf=\"selectedDateType == DateType.Gregorian\"\r\n\t\t\t[range]=\"range\"\r\n\t\t\t[(selectedDate)]=\"selectedDate\"\r\n\t\t\t(selectedDateChange)=\"dateSelected($event)\"\r\n\t\t\t[readonly]=\"readonly\"\r\n\t\t\t[min]=\"minGreg\"\r\n\t\t\t[max]=\"maxGreg\"\r\n\t\t\t[emitOnBlur]=\"emitOnBlur\"\r\n\t\t\tstyle=\"flex: 1 1 auto\"\r\n\t\t\t[name]=\"label\"\r\n\t\t\t[isRequired]=\"isRequired\"\r\n\t\t\t[placeHolder]=\"placeHolder\"\r\n\t\t\t[disabled]=\"disabled\"\r\n\t\t>\r\n\t\t</gregorian-date-picker>\r\n\t\t<hijri-date-picker\r\n\t\t\t[vertical]=\"vertical\"\r\n\t\t\t*ngIf=\"selectedDateType == DateType.Hijri\"\r\n\t\t\t[range]=\"range\"\r\n\t\t\t[(selectedDate)]=\"selectedDate\"\r\n\t\t\t(selectedDateChange)=\"dateSelected($event)\"\r\n\t\t\t[readonly]=\"readonly\"\r\n\t\t\t[min]=\"minHijri\"\r\n\t\t\t[max]=\"maxHijri\"\r\n\t\t\tstyle=\"flex: 1 1 auto\"\r\n\t\t\t[name]=\"label\"\r\n\t\t\t[isRequired]=\"isRequired\"\r\n\t\t\t[placeHolder]=\"placeHolder\"\r\n\t\t\t[disabled]=\"disabled\"\r\n      [emitOnBlur]=\"emitOnBlur\"\r\n\t\t>\r\n\t\t</hijri-date-picker>\r\n\r\n\t\t<div class=\"input-group-append\">\r\n\t\t\t<button\r\n\t\t\t\tclass=\"btn btn-sm {{ selectedDateType == DateType.Hijri ? 'btn-info focus active' : 'btn-outline-info' }}\"\r\n\t\t\t\t(click)=\"hijriClick()\"\r\n\t\t\t\t[disabled]=\"disabledbtn\"\r\n\t\t\t\ttype=\"button\"\r\n\t\t\t>\r\n\t\t\t\t{{ hijriLabel ? hijriLabel : 'Hijri' }}\r\n\t\t\t</button>\r\n\t\t\t<button\r\n\t\t\t\tclass=\"btn btn-sm {{ selectedDateType == DateType.Gregorian ? 'btn-info focus active' : 'btn-outline-info' }}\"\r\n\t\t\t\t(click)=\"gregClick()\"\r\n\t\t\t\t[disabled]=\"disabledbtn\"\r\n\t\t\t\ttype=\"button\"\r\n\t\t\t>\r\n\t\t\t\t{{ GregLabel ? GregLabel : 'Gregorian' }}\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n", components: [{ type: GregorianDatepickerComponent, selector: "gregorian-date-picker", inputs: ["selectedDate", "readonly", "isRequired", "disabled", "min", "max", "name", "range", "vertical", "emitOnBlur", "placeHolder"], outputs: ["selectedDateChange"] }, { type: HijriDatepickerComponent, selector: "hijri-date-picker", inputs: ["selectedDate", "readonly", "isRequired", "disabled", "min", "max", "name", "range", "vertical", "emitOnBlur", "placeHolder"], outputs: ["selectedDateChange"] }], directives: [{ type: ProvideParentFormDirective, selector: "[provideParentForm]" }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HijriGregorianDatepickerComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -7701,6 +7772,8 @@
                   type: i0.Input
               }], vertical: [{
                   type: i0.Input
+              }], emitOnBlur: [{
+                  type: i0.Input
               }] } });
 
   /** @ignore */
@@ -10764,9 +10837,10 @@
    *   </cts-dynamic-form-hijri-dateitem>
    */
   var DynamicFormHijriDateitemComponent = /** @class */ (function () {
-      function DynamicFormHijriDateitemComponent(dateFormatterService, control) {
+      function DynamicFormHijriDateitemComponent(dateFormatterService, control, _cdr) {
           this.dateFormatterService = dateFormatterService;
           this.control = control;
+          this._cdr = _cdr;
           /** Minimum Hijri Date */
           this.minHijri = this.getHijriDateMinusYears(50);
           /** Minimum Gregorian Date */
@@ -10777,13 +10851,12 @@
           this.isReadOnly = true;
           /** Emitted when the value changes */
           this.valueChanged = new i0.EventEmitter();
+          this.date = null;
           this.selectedDateType = DateType.Gregorian;
+          this.emitOnBlur = true;
           this.onChange = function () { };
           this.onTouched = function () { };
           this.control.valueAccessor = this;
-          if (!this.range) {
-              // this.date = this.dateFormatterService.GetTodayGregorian();
-          }
       }
       DynamicFormHijriDateitemComponent.prototype.getGregDateMinusYears = function (years) {
           var today = this.dateFormatterService.GetTodayGregorian();
@@ -10794,20 +10867,14 @@
           return new i1$5.NgbDate(today.year - years, today.month, today.day);
       };
       DynamicFormHijriDateitemComponent.prototype.writeValue = function (obj) {
-          if (obj) {
-              if (!this.range) {
-                  this.date = this.dateFormatterService.ToGregorianDateStruct(obj, '');
-              }
-              else if (obj.from && obj.to) {
-                  this.date = {
-                      from: this.dateFormatterService.ToGregorianDateStruct(obj.from, ''),
-                      to: this.dateFormatterService.ToGregorianDateStruct(obj.to, '')
-                  };
-              }
-          }
-          else {
-              this.date = null; // to reset ui too
+          if (!obj) {
+              this.date = null;
+              this._cdr.markForCheck();
+              return;
           }
+          this.date = this.range
+              ? this._convertRangeToGregorian(obj)
+              : this.dateFormatterService.ToGregorianDateStruct(obj, '');
       };
       DynamicFormHijriDateitemComponent.prototype.registerOnChange = function (fn) {
           this.onChange = fn;
@@ -10815,27 +10882,23 @@
       DynamicFormHijriDateitemComponent.prototype.registerOnTouched = function (fn) {
           this.onTouched = fn;
       };
-      DynamicFormHijriDateitemComponent.prototype.setDisabledState = function (isDisabled) { };
+      DynamicFormHijriDateitemComponent.prototype.setDisabledState = function (isDisabled) {
+          this.isDisabled = isDisabled;
+      };
       DynamicFormHijriDateitemComponent.prototype.ngOnInit = function () {
           this.placeHolder = this.placeholder ? this.placeholder : 'datePlaceHolder';
       };
-      DynamicFormHijriDateitemComponent.prototype.ngAfterViewInit = function () {
-          //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
-          //Add 'implements AfterViewInit' to the class.
-          //  console.log('startDatePicker', this.startDatePicker);
-      };
-      DynamicFormHijriDateitemComponent.prototype.removelable = function () { };
       DynamicFormHijriDateitemComponent.prototype.setValue = function (event) {
-          this.dateString = this.startDatePicker.getSelectedDate();
-          if (this.dateString !== 'Invalid date') {
-              this.onChange(this.dateString);
-              this.valueChanged.emit(this.dateString);
-          }
-          else {
-              // set value to null when clear date
+          var dateString = this.startDatePicker.getSelectedDate();
+          if (!event || dateString === 'Invalid date') {
+              this.dateString = null;
               this.onChange(null);
               this.valueChanged.emit(null);
+              return;
           }
+          this.dateString = dateString;
+          this.onChange(this.dateString);
+          this.valueChanged.emit(this.dateString);
       };
       DynamicFormHijriDateitemComponent.prototype.isRequired = function () {
           var _a;
@@ -10845,10 +10908,18 @@
           var validator = this.control.control.validator({});
           return validator && validator.required;
       };
+      DynamicFormHijriDateitemComponent.prototype._convertRangeToGregorian = function (obj) {
+          return obj.from && obj.to
+              ? {
+                  from: this.dateFormatterService.ToGregorianDateStruct(obj.from, ''),
+                  to: this.dateFormatterService.ToGregorianDateStruct(obj.to, '')
+              }
+              : null;
+      };
       return DynamicFormHijriDateitemComponent;
   }());
-  DynamicFormHijriDateitemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicFormHijriDateitemComponent, deps: [{ token: DateFormatterService }, { token: i2__namespace$6.NgControl, optional: true, self: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  DynamicFormHijriDateitemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormHijriDateitemComponent, selector: "cts-dynamic-form-hijri-dateitem", inputs: { minHijri: "minHijri", maxHijri: "maxHijri", minGreg: "minGreg", maxGreg: "maxGreg", label: "label", isDisabled: "isDisabled", range: "range", vertical: "vertical", isReadOnly: "isReadOnly", placeholder: "placeholder" }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "startDatePicker", first: true, predicate: ["datePicker"], descendants: true }], ngImport: i0__namespace, template: "<ng-container *ngIf=\"label\">\r\n  <div>\r\n    <label class=\"hijri-date-lable\"\r\n      >{{ label | translate\r\n      }}<span *ngIf=\"isRequired()\" class=\"text-danger m-1\">*</span></label\r\n    >\r\n  </div>\r\n</ng-container>\r\n<div class=\"hijri-date-container\">\r\n  <hijri-gregorian-datepicker\r\n    [placeHolder]=\"placeHolder | translate\"\r\n    [(selectedDate)]=\"date\"\r\n    [isRequired]=\"true\"\r\n    [GregLabel]=\"'gregorian' | translate\"\r\n    [hijriLabel]=\"'hijri' |translate\"\r\n    [selectedDateType]=\"selectedDateType\"\r\n    [disabled]=\"isDisabled\"\r\n    [readonly]=\"isReadOnly\"\r\n    [minHijri]=\"minHijri\"\r\n    [maxHijri]=\"maxHijri\"\r\n    [minGreg]=\"minGreg\"\r\n    [maxGreg]=\"maxGreg\"\r\n    [range]=\"range\"\r\n    [vertical]=\"vertical\"\r\n    (selectedDateChange)=\"setValue($event)\"\r\n    #datePicker\r\n  >\r\n  </hijri-gregorian-datepicker>\r\n</div>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight: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}.hijri-date-lable{color:#646f85;font-size:13px;margin-bottom:5px}hijri-gregorian-datepicker .form-group .requiredInput{display:none}hijri-gregorian-datepicker .form-group .input-group{display:flex;flex-wrap:nowrap;align-items:stretch;width:100%}hijri-gregorian-datepicker .form-group .input-group hijri-date-picker{display:block}hijri-gregorian-datepicker .form-group .input-group .form-control{border:1px solid #ccc;border-start-start-radius:5px;border-end-start-radius:5px;border-start-end-radius:0;border-end-end-radius:0;background-color:#8f98aa1a;height:40px}hijri-gregorian-datepicker .form-group .input-group .input-group-append{margin:0}hijri-gregorian-datepicker .form-group .input-group .input-group-append .btn{border-start-end-radius:5px!important;border-end-end-radius:5px!important;border-start-start-radius:0!important;border-end-start-radius:0!important;display:block;margin:0;border:none;color:#fff;background-color:#b4bac6}hijri-gregorian-datepicker .form-group .input-group .input-group-append .btn:hover{background-color:#8f98aa}hijri-gregorian-datepicker .form-group .input-group .input-group-append .active{display:none}\n"], components: [{ type: HijriGregorianDatepickerComponent, selector: "hijri-gregorian-datepicker", inputs: ["selectedDateType", "selectedDate", "label", "showLabel", "readonly", "isRequired", "disabled", "disabledbtn", "minHijri", "maxHijri", "minGreg", "maxGreg", "hijriLabel", "GregLabel", "placeHolder", "range", "vertical"], outputs: ["selectedDateChange"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  DynamicFormHijriDateitemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicFormHijriDateitemComponent, deps: [{ token: DateFormatterService }, { token: i2__namespace$6.NgControl, optional: true, self: true }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  DynamicFormHijriDateitemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormHijriDateitemComponent, selector: "cts-dynamic-form-hijri-dateitem", inputs: { minHijri: "minHijri", maxHijri: "maxHijri", minGreg: "minGreg", maxGreg: "maxGreg", label: "label", isDisabled: "isDisabled", range: "range", vertical: "vertical", isReadOnly: "isReadOnly", placeholder: "placeholder", emitOnBlur: "emitOnBlur" }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "startDatePicker", first: true, predicate: ["datePicker"], descendants: true }], ngImport: i0__namespace, template: "<ng-container *ngIf=\"label\">\r\n  <div>\r\n    <label class=\"hijri-date-lable\"\r\n      >{{ label | translate\r\n      }}<span *ngIf=\"isRequired()\" class=\"text-danger m-1\">*</span></label\r\n    >\r\n  </div>\r\n</ng-container>\r\n<div class=\"hijri-date-container\">\r\n  <hijri-gregorian-datepicker\r\n    [placeHolder]=\"placeHolder | translate\"\r\n    [(selectedDate)]=\"date\"\r\n    [isRequired]=\"true\"\r\n    [GregLabel]=\"'gregorian' | translate\"\r\n    [hijriLabel]=\"'hijri' |translate\"\r\n    [selectedDateType]=\"selectedDateType\"\r\n    [disabled]=\"isDisabled\"\r\n    [readonly]=\"isReadOnly\"\r\n    [minHijri]=\"minHijri\"\r\n    [maxHijri]=\"maxHijri\"\r\n    [minGreg]=\"minGreg\"\r\n    [maxGreg]=\"maxGreg\"\r\n    [range]=\"range\"\r\n    [emitOnBlur]=\"emitOnBlur\"\r\n    [vertical]=\"vertical\"\r\n    (selectedDateChange)=\"setValue($event)\"\r\n    #datePicker\r\n  >\r\n  </hijri-gregorian-datepicker>\r\n</div>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight: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}.hijri-date-lable{color:#646f85;font-size:13px;margin-bottom:5px}hijri-gregorian-datepicker .form-group .requiredInput{display:none}hijri-gregorian-datepicker .form-group .input-group{display:flex;flex-wrap:nowrap;align-items:stretch;width:100%}hijri-gregorian-datepicker .form-group .input-group hijri-date-picker{display:block}hijri-gregorian-datepicker .form-group .input-group .form-control{border:1px solid #ccc;border-start-start-radius:5px;border-end-start-radius:5px;border-start-end-radius:0;border-end-end-radius:0;background-color:#8f98aa1a;height:40px}hijri-gregorian-datepicker .form-group .input-group .input-group-append{margin:0}hijri-gregorian-datepicker .form-group .input-group .input-group-append .btn{border-start-end-radius:5px!important;border-end-end-radius:5px!important;border-start-start-radius:0!important;border-end-start-radius:0!important;display:block;margin:0;border:none;color:#fff;background-color:#b4bac6}hijri-gregorian-datepicker .form-group .input-group .input-group-append .btn:hover{background-color:#8f98aa}hijri-gregorian-datepicker .form-group .input-group .input-group-append .active{display:none}\n"], components: [{ type: HijriGregorianDatepickerComponent, selector: "hijri-gregorian-datepicker", inputs: ["selectedDateType", "selectedDate", "label", "showLabel", "readonly", "isRequired", "disabled", "disabledbtn", "minHijri", "maxHijri", "minGreg", "maxGreg", "hijriLabel", "GregLabel", "placeHolder", "range", "vertical", "emitOnBlur"], outputs: ["selectedDateChange"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], 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: DynamicFormHijriDateitemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -10862,7 +10933,7 @@
                           type: i0.Self
                       }, {
                           type: i0.Optional
-                      }] }];
+                      }] }, { type: i0__namespace.ChangeDetectorRef }];
       }, propDecorators: { minHijri: [{
                   type: i0.Input
               }], maxHijri: [{
@@ -10885,6 +10956,8 @@
                   type: i0.Input
               }], valueChanged: [{
                   type: i0.Output
+              }], emitOnBlur: [{
+                  type: i0.Input
               }], startDatePicker: [{
                   type: i0.ViewChild,
                   args: ['datePicker']
@@ -12564,7 +12637,7 @@
       return DateWrapperComponent;
   }());
   DateWrapperComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DateWrapperComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  DateWrapperComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DateWrapperComponent, selector: "app-date-wrapper", inputs: { value: "value", fixedKey: "fixedKey", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0__namespace, template: "<cts-dynamic-form-hijri-dateitem [(ngModel)]=\"value\" (valueChanged)=\"excuteFunction($event)\">\r\n</cts-dynamic-form-hijri-dateitem>\r\n", styles: [""], components: [{ type: DynamicFormHijriDateitemComponent, selector: "cts-dynamic-form-hijri-dateitem", inputs: ["minHijri", "maxHijri", "minGreg", "maxGreg", "label", "isDisabled", "range", "vertical", "isReadOnly", "placeholder"], outputs: ["valueChanged"] }], directives: [{ type: i2__namespace$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+  DateWrapperComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DateWrapperComponent, selector: "app-date-wrapper", inputs: { value: "value", fixedKey: "fixedKey", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0__namespace, template: "<cts-dynamic-form-hijri-dateitem [(ngModel)]=\"value\" (valueChanged)=\"excuteFunction($event)\">\r\n</cts-dynamic-form-hijri-dateitem>\r\n", styles: [""], components: [{ type: DynamicFormHijriDateitemComponent, selector: "cts-dynamic-form-hijri-dateitem", inputs: ["minHijri", "maxHijri", "minGreg", "maxGreg", "label", "isDisabled", "range", "vertical", "isReadOnly", "placeholder", "emitOnBlur"], outputs: ["valueChanged"] }], directives: [{ type: i2__namespace$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DateWrapperComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -22746,7 +22819,7 @@
       return DynamicFieldsRendererComponent;
   }());
   DynamicFieldsRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicFieldsRendererComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  DynamicFieldsRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFieldsRendererComponent, selector: "app-dynamic-fields-renderer", inputs: { form: "form", agencyNameFilter: "agencyNameFilter", countryNameFilter: "countryNameFilter", orgNameFilter: "orgNameFilter", ngoNameFilter: "ngoNameFilter", disableInitSecrecyLevel: "disableInitSecrecyLevel", mode: "mode", fields: "fields" }, outputs: { checkTextSpellCheckerField: "checkTextSpellCheckerField" }, ngImport: i0__namespace, template: "<div [formGroup]=\"form\" *ngIf=\"form\">\r\n\t<div class=\"renderer-container\">\r\n\t\t<div class=\"field-container\" *ngFor=\"let field of fields\">\r\n\t\t\t<div class=\"flex gap-x-2 items-center\" *permission=\"{ name: field.permission, entity: field.formControlName }\">\r\n\t\t\t\t<div class=\"single-field mb-3\" *ngIf=\"field.type === 'text'\">\r\n\t\t\t\t\t<div class=\"label-style\">\r\n\t\t\t\t\t\t{{ field.label | translate }}\r\n\t\t\t\t\t\t<span class=\"text-red-500\" *ngIf=\"field.required\">*</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<input\r\n\t\t\t\t\t\tclass=\"field-style\"\r\n\t\t\t\t\t\tid=\"{{ field.formControlName }}\"\r\n\t\t\t\t\t\t[formControlName]=\"field.formControlName\"\r\n\t\t\t\t\t\tplaceholder=\" {{ field.placeholder | translate }}\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div class=\"single-field mb-3\" *ngIf=\"field.type === 'number'\">\r\n\t\t\t\t\t<div class=\"label-style\">\r\n\t\t\t\t\t\t{{ field.label | translate }}\r\n\t\t\t\t\t\t<span class=\"text-red-500\" *ngIf=\"field.required\">*</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<input\r\n\t\t\t\t\t\tmin=\"1\"\r\n\t\t\t\t\t\ttype=\"number\"\r\n\t\t\t\t\t\tclass=\"field-style\"\r\n\t\t\t\t\t\t[formControlName]=\"field.formControlName\"\r\n\t\t\t\t\t\tplaceholder=\" {{ field.placeholder | translate }}\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div class=\"single-field mb-3\" *ngIf=\"field.type === 'textarea'\">\r\n\t\t\t\t\t<app-dynamic-form-textarea\r\n\t\t\t\t\t\t[id]=\"field.formControlName\"\r\n\t\t\t\t\t\t[label]=\"field.label\"\r\n\t\t\t\t\t\tplaceholder=\"{{ field.placeholder | translate }}\"\r\n\t\t\t\t\t\t[disabled]=\"field.disabled\"\r\n\t\t\t\t\t\t[formControlName]=\"field.formControlName\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t</app-dynamic-form-textarea>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div class=\"single-field mb-3\" *ngIf=\"field.type === 'date'\">\r\n\t\t\t\t\t<cts-dynamic-form-hijri-dateitem\r\n\t\t\t\t\t\t[formControlName]=\"field.formControlName\"\r\n\t\t\t\t\t\t[label]=\"field.label\"\r\n\t\t\t\t\t\t[minHijri]=\"field.minHijri\"\r\n\t\t\t\t\t\t[maxHijri]=\"field.maxHijri\"\r\n\t\t\t\t\t\t[minGreg]=\"field.minGreg\"\r\n\t\t\t\t\t\t[maxGreg]=\"field.maxGreg\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t</cts-dynamic-form-hijri-dateitem>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div class=\"single-field mb-3\" *ngIf=\"field.type === 'spellCheckerField'\">\r\n\t\t\t\t\t<ndf-spell-checker-text-field\r\n\t\t\t\t\t\t[id]=\"field.formControlName\"\r\n\t\t\t\t\t\t[formControlName]=\"field.formControlName\"\r\n\t\t\t\t\t\t[placeholder]=\"field.placeholder\"\r\n\t\t\t\t\t\t[fieldType]=\"field.fieldType\"\r\n\t\t\t\t\t\t[label]=\"field.label\"\r\n\t\t\t\t\t\t(checkFromText)=\"checkTextOfSpellCheckField(field.formControlName)\"\r\n\t\t\t\t\t></ndf-spell-checker-text-field>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div class=\"single-field mb-3\" *ngIf=\"field.type === 'dynamic-vocabulary'\">\r\n\t\t\t\t\t<app-dynamic-form-vocabulary-item\r\n\t\t\t\t\t\t[label]=\"field.label\"\r\n\t\t\t\t\t\t[bindLabel]=\"field.bindLabel\"\r\n\t\t\t\t\t\t[bindValue]=\"field.bindValue\"\r\n\t\t\t\t\t\tplaceholder=\"{{ field.placeholder | translate }}\"\r\n\t\t\t\t\t\t[multiple]=\"field.multiple\"\r\n\t\t\t\t\t\t[searchable]=\"field.searchable\"\r\n\t\t\t\t\t\t[closeOnSelect]=\"field.closeOnSelect\"\r\n\t\t\t\t\t\t[disabled]=\"field.disabled\"\r\n\t\t\t\t\t\t[hideSelectedItems]=\"field.hideSelectedItems\"\r\n\t\t\t\t\t\t[vocabularyType]=\"field.vocabularyType\"\r\n\t\t\t\t\t\t[onlyIds]=\"field.onlyIds\"\r\n\t\t\t\t\t\t[formControlName]=\"field.formControlName\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t</app-dynamic-form-vocabulary-item>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<!-- <div class=\"single-field mb-3\" *ngIf=\"field.type === 'department-selector'\">\r\n                    <div class=\"label-style\">\r\n                        {{ field.label | translate }}\r\n                        <span class=\"text-red-500\" *ngIf=\"field.required\">*</span>\r\n                    </div>\r\n                    <app-dynamic-form-department\r\n                    [formControlName]=\"field.formControlName\"\r\n                    [placeholder]=\"field.placeholder\"\r\n                    [pp_departmentNestedTree]=\"field.pp_departmentNestedTree\"\r\n                    [pp_departmentTree]=\"field.pp_departmentTree\"\r\n                    [customPrefix]=\"field.customPrefix\"\r\n                    [customParentProperty]=\"field.customParentProperty\"\r\n                    [useCustomAddEditAction]=\"field.useCustomAddEditAction\"\r\n                  >\r\n                  </app-dynamic-form-department>\r\n                </div> -->\r\n\r\n\t\t\t\t<div class=\"single-field mb-3\" *ngIf=\"field.type === 'translated-vocabulary'\">\r\n\t\t\t\t\t<app-translated-vocabulary-select\r\n\t\t\t\t\t\t[label]=\"field.label\"\r\n\t\t\t\t\t\t[arbBindLabel]=\"field.arbBindLabel\"\r\n\t\t\t\t\t\t[engBindLabel]=\"field.engBindLabel\"\r\n\t\t\t\t\t\t[bindValue]=\"field.bindValue\"\r\n\t\t\t\t\t\tplaceholder=\"{{ field.placeholder | translate }}\"\r\n\t\t\t\t\t\t[multiple]=\"field.multiple\"\r\n\t\t\t\t\t\t[searchable]=\"field.searchable\"\r\n\t\t\t\t\t\t[closeOnSelect]=\"field.closeOnSelect\"\r\n\t\t\t\t\t\t[hideSelectedItems]=\"field.hideSelectedItems\"\r\n\t\t\t\t\t\t[formControlName]=\"field.formControlName\"\r\n\t\t\t\t\t\t[vocbularyId]=\"field.vocbularyId\"\r\n\t\t\t\t\t\t[useFilter]=\"field.useFilter\"\r\n\t\t\t\t\t\t[filter]=\"\r\n\t\t\t\t\t\t\tfield.filter === 'agencyName'\r\n\t\t\t\t\t\t\t\t? agencyNameFilter\r\n\t\t\t\t\t\t\t\t: field.filter === 'countryName'\r\n\t\t\t\t\t\t\t\t? countryNameFilter\r\n\t\t\t\t\t\t\t\t: field.filter === 'orgName'\r\n\t\t\t\t\t\t\t\t? orgNameFilter\r\n\t\t\t\t\t\t\t\t: field.filter === 'ngoName'\r\n\t\t\t\t\t\t\t\t? ngoNameFilter\r\n\t\t\t\t\t\t\t\t: {}\r\n\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t[params]=\"field.params || {}\"\r\n\t\t\t\t\t\t[getByDirectorySuggestion]=\"field.getByDirectorySuggestion\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t</app-translated-vocabulary-select>\r\n\t\t\t\t</div>\r\n\t\t\t\t<ng-container *ngIf=\"field.selectable\">\r\n\t\t\t\t\t<ng-container\r\n\t\t\t\t\t\t*ngTemplateOutlet=\"\r\n\t\t\t\t\t\t\tfieldsCheckBox;\r\n\t\t\t\t\t\t\tcontext: {\r\n\t\t\t\t\t\t\t\tcheckBoxTemplate: field.template,\r\n\t\t\t\t\t\t\t\tcontrolName: field.formControlName\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\"\r\n\t\t\t\t\t></ng-container>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</div>\r\n\r\n\t\t\t<!-- template in client -->\r\n\t\t\t<ng-container *ngIf=\"field.suggest\">\r\n\t\t\t\t<ng-container\r\n\t\t\t\t\t*ngTemplateOutlet=\"\r\n\t\t\t\t\t\tsuggest;\r\n\t\t\t\t\t\tcontext: {\r\n\t\t\t\t\t\t\tfield: field.label,\r\n\t\t\t\t\t\t\tsuggestName: field.suggest,\r\n\t\t\t\t\t\t\tcontrolName: field.formControlName,\r\n\t\t\t\t\t\t\ttemplate: field.suggestTemplate\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\"\r\n\t\t\t\t></ng-container>\r\n\t\t\t</ng-container>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n\r\n<ng-template #fieldsCheckBox let-checkBoxTemplate=\"checkBoxTemplate\" let-controlName=\"controlName\">\r\n\t<ng-container *ngTemplateOutlet=\"checkBoxTemplate; context: { controlName: controlName }\"> </ng-container>\r\n</ng-template>\r\n\r\n<ng-template\r\n\t#suggest\r\n\tlet-field=\"field\"\r\n\tlet-suggestName=\"suggestName\"\r\n\tlet-controlName=\"controlName\"\r\n\tlet-template=\"template\"\r\n>\r\n\t<ng-container\r\n\t\t*ngTemplateOutlet=\"\r\n\t\t\ttemplate;\r\n\t\t\tcontext: {\r\n\t\t\t\tfield: field,\r\n\t\t\t\tsuggestName: suggestName,\r\n\t\t\t\tcontrolName: controlName\r\n\t\t\t}\r\n\t\t\"\r\n\t>\r\n\t</ng-container>\r\n</ng-template>\r\n", styles: [".single-field{width:100%}\n"], components: [{ type: DynamicFormTextareaComponent, selector: "app-dynamic-form-textarea", inputs: ["property", "label", "editable", "disabled", "id", "placeholder", "displayEmpty", "horizontalAlign"] }, { type: DynamicFormHijriDateitemComponent, selector: "cts-dynamic-form-hijri-dateitem", inputs: ["minHijri", "maxHijri", "minGreg", "maxGreg", "label", "isDisabled", "range", "vertical", "isReadOnly", "placeholder"], outputs: ["valueChanged"] }, { type: SpellCheckerTextFieldComponent, selector: "ndf-spell-checker-text-field", inputs: ["id", "placeholder", "fieldType", "label"], outputs: ["checkFromText"] }, { 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: TranslatedVocabularySelectComponent, selector: "app-translated-vocabulary-select", inputs: ["label", "bindValue", "arbBindLabel", "engBindLabel", "placeholder", "multiple", "searchable", "closeOnSelect", "hideSelectedItems", "disabled", "clear", "filter", "useFilter", "vocbularyId", "mapingResponse", "params", "getByDirectorySuggestion"], outputs: ["onSelectItems"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i2__namespace$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2__namespace$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$6.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2__namespace$6.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i2__namespace$6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i4__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  DynamicFieldsRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFieldsRendererComponent, selector: "app-dynamic-fields-renderer", inputs: { form: "form", agencyNameFilter: "agencyNameFilter", countryNameFilter: "countryNameFilter", orgNameFilter: "orgNameFilter", ngoNameFilter: "ngoNameFilter", disableInitSecrecyLevel: "disableInitSecrecyLevel", mode: "mode", fields: "fields" }, outputs: { checkTextSpellCheckerField: "checkTextSpellCheckerField" }, ngImport: i0__namespace, template: "<div [formGroup]=\"form\" *ngIf=\"form\">\r\n\t<div class=\"renderer-container\">\r\n\t\t<div class=\"field-container\" *ngFor=\"let field of fields\">\r\n\t\t\t<div class=\"flex gap-x-2 items-center\" *permission=\"{ name: field.permission, entity: field.formControlName }\">\r\n\t\t\t\t<div class=\"single-field mb-3\" *ngIf=\"field.type === 'text'\">\r\n\t\t\t\t\t<div class=\"label-style\">\r\n\t\t\t\t\t\t{{ field.label | translate }}\r\n\t\t\t\t\t\t<span class=\"text-red-500\" *ngIf=\"field.required\">*</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<input\r\n\t\t\t\t\t\tclass=\"field-style\"\r\n\t\t\t\t\t\tid=\"{{ field.formControlName }}\"\r\n\t\t\t\t\t\t[formControlName]=\"field.formControlName\"\r\n\t\t\t\t\t\tplaceholder=\" {{ field.placeholder | translate }}\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div class=\"single-field mb-3\" *ngIf=\"field.type === 'number'\">\r\n\t\t\t\t\t<div class=\"label-style\">\r\n\t\t\t\t\t\t{{ field.label | translate }}\r\n\t\t\t\t\t\t<span class=\"text-red-500\" *ngIf=\"field.required\">*</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<input\r\n\t\t\t\t\t\tmin=\"1\"\r\n\t\t\t\t\t\ttype=\"number\"\r\n\t\t\t\t\t\tclass=\"field-style\"\r\n\t\t\t\t\t\t[formControlName]=\"field.formControlName\"\r\n\t\t\t\t\t\tplaceholder=\" {{ field.placeholder | translate }}\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div class=\"single-field mb-3\" *ngIf=\"field.type === 'textarea'\">\r\n\t\t\t\t\t<app-dynamic-form-textarea\r\n\t\t\t\t\t\t[id]=\"field.formControlName\"\r\n\t\t\t\t\t\t[label]=\"field.label\"\r\n\t\t\t\t\t\tplaceholder=\"{{ field.placeholder | translate }}\"\r\n\t\t\t\t\t\t[disabled]=\"field.disabled\"\r\n\t\t\t\t\t\t[formControlName]=\"field.formControlName\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t</app-dynamic-form-textarea>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div class=\"single-field mb-3\" *ngIf=\"field.type === 'date'\">\r\n\t\t\t\t\t<cts-dynamic-form-hijri-dateitem\r\n\t\t\t\t\t\t[formControlName]=\"field.formControlName\"\r\n\t\t\t\t\t\t[label]=\"field.label\"\r\n\t\t\t\t\t\t[minHijri]=\"field.minHijri\"\r\n\t\t\t\t\t\t[maxHijri]=\"field.maxHijri\"\r\n\t\t\t\t\t\t[minGreg]=\"field.minGreg\"\r\n\t\t\t\t\t\t[maxGreg]=\"field.maxGreg\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t</cts-dynamic-form-hijri-dateitem>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div class=\"single-field mb-3\" *ngIf=\"field.type === 'spellCheckerField'\">\r\n\t\t\t\t\t<ndf-spell-checker-text-field\r\n\t\t\t\t\t\t[id]=\"field.formControlName\"\r\n\t\t\t\t\t\t[formControlName]=\"field.formControlName\"\r\n\t\t\t\t\t\t[placeholder]=\"field.placeholder\"\r\n\t\t\t\t\t\t[fieldType]=\"field.fieldType\"\r\n\t\t\t\t\t\t[label]=\"field.label\"\r\n\t\t\t\t\t\t(checkFromText)=\"checkTextOfSpellCheckField(field.formControlName)\"\r\n\t\t\t\t\t></ndf-spell-checker-text-field>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div class=\"single-field mb-3\" *ngIf=\"field.type === 'dynamic-vocabulary'\">\r\n\t\t\t\t\t<app-dynamic-form-vocabulary-item\r\n\t\t\t\t\t\t[label]=\"field.label\"\r\n\t\t\t\t\t\t[bindLabel]=\"field.bindLabel\"\r\n\t\t\t\t\t\t[bindValue]=\"field.bindValue\"\r\n\t\t\t\t\t\tplaceholder=\"{{ field.placeholder | translate }}\"\r\n\t\t\t\t\t\t[multiple]=\"field.multiple\"\r\n\t\t\t\t\t\t[searchable]=\"field.searchable\"\r\n\t\t\t\t\t\t[closeOnSelect]=\"field.closeOnSelect\"\r\n\t\t\t\t\t\t[disabled]=\"field.disabled\"\r\n\t\t\t\t\t\t[hideSelectedItems]=\"field.hideSelectedItems\"\r\n\t\t\t\t\t\t[vocabularyType]=\"field.vocabularyType\"\r\n\t\t\t\t\t\t[onlyIds]=\"field.onlyIds\"\r\n\t\t\t\t\t\t[formControlName]=\"field.formControlName\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t</app-dynamic-form-vocabulary-item>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<!-- <div class=\"single-field mb-3\" *ngIf=\"field.type === 'department-selector'\">\r\n                    <div class=\"label-style\">\r\n                        {{ field.label | translate }}\r\n                        <span class=\"text-red-500\" *ngIf=\"field.required\">*</span>\r\n                    </div>\r\n                    <app-dynamic-form-department\r\n                    [formControlName]=\"field.formControlName\"\r\n                    [placeholder]=\"field.placeholder\"\r\n                    [pp_departmentNestedTree]=\"field.pp_departmentNestedTree\"\r\n                    [pp_departmentTree]=\"field.pp_departmentTree\"\r\n                    [customPrefix]=\"field.customPrefix\"\r\n                    [customParentProperty]=\"field.customParentProperty\"\r\n                    [useCustomAddEditAction]=\"field.useCustomAddEditAction\"\r\n                  >\r\n                  </app-dynamic-form-department>\r\n                </div> -->\r\n\r\n\t\t\t\t<div class=\"single-field mb-3\" *ngIf=\"field.type === 'translated-vocabulary'\">\r\n\t\t\t\t\t<app-translated-vocabulary-select\r\n\t\t\t\t\t\t[label]=\"field.label\"\r\n\t\t\t\t\t\t[arbBindLabel]=\"field.arbBindLabel\"\r\n\t\t\t\t\t\t[engBindLabel]=\"field.engBindLabel\"\r\n\t\t\t\t\t\t[bindValue]=\"field.bindValue\"\r\n\t\t\t\t\t\tplaceholder=\"{{ field.placeholder | translate }}\"\r\n\t\t\t\t\t\t[multiple]=\"field.multiple\"\r\n\t\t\t\t\t\t[searchable]=\"field.searchable\"\r\n\t\t\t\t\t\t[closeOnSelect]=\"field.closeOnSelect\"\r\n\t\t\t\t\t\t[hideSelectedItems]=\"field.hideSelectedItems\"\r\n\t\t\t\t\t\t[formControlName]=\"field.formControlName\"\r\n\t\t\t\t\t\t[vocbularyId]=\"field.vocbularyId\"\r\n\t\t\t\t\t\t[useFilter]=\"field.useFilter\"\r\n\t\t\t\t\t\t[filter]=\"\r\n\t\t\t\t\t\t\tfield.filter === 'agencyName'\r\n\t\t\t\t\t\t\t\t? agencyNameFilter\r\n\t\t\t\t\t\t\t\t: field.filter === 'countryName'\r\n\t\t\t\t\t\t\t\t? countryNameFilter\r\n\t\t\t\t\t\t\t\t: field.filter === 'orgName'\r\n\t\t\t\t\t\t\t\t? orgNameFilter\r\n\t\t\t\t\t\t\t\t: field.filter === 'ngoName'\r\n\t\t\t\t\t\t\t\t? ngoNameFilter\r\n\t\t\t\t\t\t\t\t: {}\r\n\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t[params]=\"field.params || {}\"\r\n\t\t\t\t\t\t[getByDirectorySuggestion]=\"field.getByDirectorySuggestion\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t</app-translated-vocabulary-select>\r\n\t\t\t\t</div>\r\n\t\t\t\t<ng-container *ngIf=\"field.selectable\">\r\n\t\t\t\t\t<ng-container\r\n\t\t\t\t\t\t*ngTemplateOutlet=\"\r\n\t\t\t\t\t\t\tfieldsCheckBox;\r\n\t\t\t\t\t\t\tcontext: {\r\n\t\t\t\t\t\t\t\tcheckBoxTemplate: field.template,\r\n\t\t\t\t\t\t\t\tcontrolName: field.formControlName\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\"\r\n\t\t\t\t\t></ng-container>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</div>\r\n\r\n\t\t\t<!-- template in client -->\r\n\t\t\t<ng-container *ngIf=\"field.suggest\">\r\n\t\t\t\t<ng-container\r\n\t\t\t\t\t*ngTemplateOutlet=\"\r\n\t\t\t\t\t\tsuggest;\r\n\t\t\t\t\t\tcontext: {\r\n\t\t\t\t\t\t\tfield: field.label,\r\n\t\t\t\t\t\t\tsuggestName: field.suggest,\r\n\t\t\t\t\t\t\tcontrolName: field.formControlName,\r\n\t\t\t\t\t\t\ttemplate: field.suggestTemplate\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\"\r\n\t\t\t\t></ng-container>\r\n\t\t\t</ng-container>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n\r\n<ng-template #fieldsCheckBox let-checkBoxTemplate=\"checkBoxTemplate\" let-controlName=\"controlName\">\r\n\t<ng-container *ngTemplateOutlet=\"checkBoxTemplate; context: { controlName: controlName }\"> </ng-container>\r\n</ng-template>\r\n\r\n<ng-template\r\n\t#suggest\r\n\tlet-field=\"field\"\r\n\tlet-suggestName=\"suggestName\"\r\n\tlet-controlName=\"controlName\"\r\n\tlet-template=\"template\"\r\n>\r\n\t<ng-container\r\n\t\t*ngTemplateOutlet=\"\r\n\t\t\ttemplate;\r\n\t\t\tcontext: {\r\n\t\t\t\tfield: field,\r\n\t\t\t\tsuggestName: suggestName,\r\n\t\t\t\tcontrolName: controlName\r\n\t\t\t}\r\n\t\t\"\r\n\t>\r\n\t</ng-container>\r\n</ng-template>\r\n", styles: [".single-field{width:100%}\n"], components: [{ type: DynamicFormTextareaComponent, selector: "app-dynamic-form-textarea", inputs: ["property", "label", "editable", "disabled", "id", "placeholder", "displayEmpty", "horizontalAlign"] }, { type: DynamicFormHijriDateitemComponent, selector: "cts-dynamic-form-hijri-dateitem", inputs: ["minHijri", "maxHijri", "minGreg", "maxGreg", "label", "isDisabled", "range", "vertical", "isReadOnly", "placeholder", "emitOnBlur"], outputs: ["valueChanged"] }, { type: SpellCheckerTextFieldComponent, selector: "ndf-spell-checker-text-field", inputs: ["id", "placeholder", "fieldType", "label"], outputs: ["checkFromText"] }, { 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: TranslatedVocabularySelectComponent, selector: "app-translated-vocabulary-select", inputs: ["label", "bindValue", "arbBindLabel", "engBindLabel", "placeholder", "multiple", "searchable", "closeOnSelect", "hideSelectedItems", "disabled", "clear", "filter", "useFilter", "vocbularyId", "mapingResponse", "params", "getByDirectorySuggestion"], outputs: ["onSelectItems"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i2__namespace$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2__namespace$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$6.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2__namespace$6.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i2__namespace$6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i4__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], 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: DynamicFieldsRendererComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -29648,7 +29721,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$6.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"], 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$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2__namespace$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$6.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"], 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$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2__namespace$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$6.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: [{