nuxeo-development-framework 5.0.5 → 5.0.7

package/fesm2015/nuxeo-development-framework.js

@@ -11,7 +11,7 @@ import * as i1$4 from '@angular/router';
 import { ActivatedRoute, Router, RouterModule, RoutesRecognized } from '@angular/router';
 import * as i1 from '@ngx-translate/core';
 import { TranslateService, TranslateModule, TranslateStore, TranslateLoader } from '@ngx-translate/core';
-import { map, distinctUntilChanged, takeUntil, catchError, take, tap, switchMap, first, retry, expand, last, debounceTime, startWith, mergeMap, toArray, delay, reduce, concatMap, finalize, filter as filter$1 } from 'rxjs/operators';
+import { map, distinctUntilChanged, takeUntil, catchError, take, tap, switchMap, first, delay, retry, expand, last, debounceTime, startWith, mergeMap, toArray, reduce, concatMap, finalize, filter as filter$1 } from 'rxjs/operators';
 import { BehaviorSubject, Subject, ReplaySubject, iif, of, combineLatest, Observable, from, forkJoin, isObservable, pipe, EMPTY, concat, fromEvent, interval, throwError } from 'rxjs';
 import { trigger, state, style, transition, animate, AUTO_STYLE, animation, useAnimation } from '@angular/animations';
 import * as i1$1 from 'ngx-toastr';
@@ -2531,6 +2531,7 @@ const DEFAULT_CACHE_OPTIONS = {
     EXCLUDE_KEYS_WHEN_UPDATE: [`contextParameters`],
     CHILDREN_PATH: `contextParameters.children.entries`,
     PARENT_KEY: `parentRef`,
+    ENABLE_QUICK_REFRESH: false,
     REQUEST: () => {
         return of();
     },
@@ -2562,10 +2563,12 @@ const DEFAULT_TTL_CONFIG = {
     TTL: 3,
     UNIT: CachingExpiryUnit.MONTHS,
     AUTO_CHECK: true,
-    RETRY: 3
+    RETRY: 3,
+    QUICK_REFRESH: 1,
+    QUICK_REFRESH_UNIT: 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;
 class CacheBaseService {
     constructor(userPreferencesService, utilityService) {
         this.userPreferencesService = userPreferencesService;
@@ -2618,12 +2621,7 @@ class CacheBaseService {
         }
     }
     validateTTLForKey(firstFetchingDate) {
-        if (!firstFetchingDate)
-            return;
-        const momentDate1 = moment$4(new Date(firstFetchingDate));
-        const momentDate2 = moment$4(new Date());
-        const 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);
     }
 }
 _CacheBaseService_fetchedItems = new WeakMap(), _CacheBaseService_instances = new WeakSet(), _CacheBaseService_handleCacheItems = function _CacheBaseService_handleCacheItems(options) {
@@ -2632,12 +2630,24 @@ _CacheBaseService_fetchedItems = new WeakMap(), _CacheBaseService_instances = ne
     const 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 Subject(), request: options.request }));
-        const params = {
-            [options.pageKey]: 0,
-            [options.minCompareDateKey]: __classPrivateFieldGet(this, _CacheBaseService_instances, "m", _CacheBaseService_add1SecondToModifiedDate).call(this, new Date(__classPrivateFieldGet(this, _CacheBaseService_fetchedItems, "f")[options.cacheKey].lastModifiedDate)).toISOString()
-        };
-        __classPrivateFieldGet(this, _CacheBaseService_fetchedItems, "f")[options.cacheKey].params = params;
-        observable = options.request(params);
+        const 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();
+            const params = {
+                [options.pageKey]: 0,
+                [options.minCompareDateKey]: __classPrivateFieldGet(this, _CacheBaseService_instances, "m", _CacheBaseService_add1SecondToModifiedDate).call(this, new Date(__classPrivateFieldGet(this, _CacheBaseService_fetchedItems, "f")[options.cacheKey].lastModifiedDate)).toISOString()
+            };
+            __classPrivateFieldGet(this, _CacheBaseService_fetchedItems, "f")[options.cacheKey].params = params;
+            observable = options.request(params);
+        }
+        else {
+            const item = __classPrivateFieldGet(this, _CacheBaseService_fetchedItems, "f")[options.cacheKey];
+            observable = of(_cloneDeep({
+                [options.mappedDataKey]: item.data,
+                [options.lastModifiedDateKey]: item.lastModifiedDate,
+                [options.resultsCount]: item[options.resultsCount]
+            })).pipe(delay(100));
+        }
     }
     else {
         __classPrivateFieldGet(this, _CacheBaseService_instances, "m", _CacheBaseService_setItemInMap).call(this, options.cacheKey);
@@ -2776,12 +2786,15 @@ _CacheBaseService_fetchedItems = new WeakMap(), _CacheBaseService_instances = ne
     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) {
     let newDate = new Date(date.getTime());
     newDate.setSeconds(newDate.getSeconds() + 1);
@@ -2796,6 +2809,14 @@ _CacheBaseService_fetchedItems = new WeakMap(), _CacheBaseService_instances = ne
     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;
+    const momentDate1 = moment$4(new Date(date));
+    const momentDate2 = moment$4();
+    return momentDate2.diff(momentDate1, unit) >= threshold;
 }, _CacheBaseService_setItemInMap = function _CacheBaseService_setItemInMap(key, val) {
     const empty = {
         data: [],
@@ -6239,18 +6260,31 @@ class GregorianDatepickerComponent {
         this.disabled = false;
         this.range = false;
         this.vertical = false;
+        this.emitOnBlur = true;
         this.hoveredDate = null;
         // this.selectedDate.from = calendar.getToday();
     }
     isHovered(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));
     }
     isInside(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));
     }
     isRange(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;
@@ -6287,7 +6321,7 @@ class GregorianDatepickerComponent {
         return parsed && this.calendar.isValid(NgbDate.from(parsed)) ? NgbDate.from(parsed) : currentValue;
     }
     onBlur() {
-        if (!this.selectedDate) {
+        if (!this.selectedDate && this.emitOnBlur) {
             this.selectedDateChange.emit(null);
         }
     }
@@ -6306,15 +6340,13 @@ class GregorianDatepickerComponent {
     }
 }
 GregorianDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GregorianDatepickerComponent, deps: [{ token: i1$5.NgbCalendar }, { token: i1$5.NgbDateParserFormatter }], target: i0.ɵɵFactoryTarget.Component });
-GregorianDatepickerComponent.ɵcmp = i0.ɵɵ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, 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$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$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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+GregorianDatepickerComponent.ɵcmp = i0.ɵɵ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, 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$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$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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GregorianDatepickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'gregorian-date-picker',
                     templateUrl: './gregorian-datepicker.component.html',
-                    styleUrls: [
-                        './gregorian-date-picker.component.scss'
-                    ],
+                    styleUrls: ['./gregorian-date-picker.component.scss'],
                     encapsulation: ViewEncapsulation.None
                 }]
         }], ctorParameters: function () { return [{ type: i1$5.NgbCalendar }, { type: i1$5.NgbDateParserFormatter }]; }, propDecorators: { datePicker: [{
@@ -6340,6 +6372,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], vertical: [{
                 type: Input
+            }], emitOnBlur: [{
+                type: Input
             }], placeHolder: [{
                 type: Input
             }] } });
@@ -6377,14 +6411,23 @@ class HijriDatepickerComponent {
         this.disabled = false;
         this.range = false;
         this.vertical = false;
+        this.emitOnBlur = true;
         this.hoveredDate = null;
         // this.fromDate = calendar.getToday();
     }
     isHovered(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));
     }
     isInside(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));
     }
     isToday(date) {
         return date.equals(this.calendar.getToday());
@@ -6393,7 +6436,11 @@ class HijriDatepickerComponent {
         return this.selectedDate && !this.range && date.equals(this.selectedDate);
     }
     isRange(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)));
     }
     onDateSelection(date) {
         if (this.range) {
@@ -6420,7 +6467,7 @@ class HijriDatepickerComponent {
         return parsed && this.calendar.isValid(NgbDate.from(parsed)) ? NgbDate.from(parsed) : currentValue;
     }
     onBlur() {
-        if (!this.selectedDate) {
+        if (!this.selectedDate && this.emitOnBlur) {
             this.selectedDateChange.emit(null);
         }
     }
@@ -6439,7 +6486,7 @@ class HijriDatepickerComponent {
     }
 }
 HijriDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HijriDatepickerComponent, deps: [{ token: i1$5.NgbCalendar }, { token: i1$5.NgbDateParserFormatter }], target: i0.ɵɵFactoryTarget.Component });
-HijriDatepickerComponent.ɵcmp = i0.ɵɵ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.ɵɵ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: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
         { provide: NgbDatepickerI18n, useClass: IslamicI18n }
     ], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["d"], descendants: true }], ngImport: i0, 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$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$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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
@@ -6452,9 +6499,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
                         { provide: NgbDatepickerI18n, useClass: IslamicI18n }
                     ],
-                    styleUrls: [
-                        './hijri-date-picker.component.scss'
-                    ],
+                    styleUrls: ['./hijri-date-picker.component.scss'],
                     encapsulation: ViewEncapsulation.None
                 }]
         }], ctorParameters: function () { return [{ type: i1$5.NgbCalendar }, { type: i1$5.NgbDateParserFormatter }]; }, propDecorators: { datePicker: [{
@@ -6480,6 +6525,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], vertical: [{
                 type: Input
+            }], emitOnBlur: [{
+                type: Input
             }], placeHolder: [{
                 type: Input
             }] } });
@@ -6502,6 +6549,13 @@ class HijriGregorianDatepickerComponent {
         this.disabledbtn = false;
         this.range = false;
         this.vertical = false;
+        this.emitOnBlur = true;
+    }
+    set selectedDate(value) {
+        this._selectedDate = value;
+    }
+    get selectedDate() {
+        return this._selectedDate;
     }
     get DateType() {
         return DateType;
@@ -6514,7 +6568,7 @@ class HijriGregorianDatepickerComponent {
             this.selectedDateType = DateType.Hijri;
         }
     }
-    ngOnChanges() {
+    ngOnChanges(changes) {
         if (this.range && !this.selectedDate) {
             this.selectedDate = { from: undefined, to: undefined };
         }
@@ -6561,42 +6615,55 @@ class HijriGregorianDatepickerComponent {
         this.selectedDateChange.emit(this.selectedDate);
     }
     hijriClick() {
-        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);
+        }
+    }
+    gregClick() {
+        if (this.selectedDateType === DateType.Gregorian) {
+            return;
+        }
+        this.selectedDateType = DateType.Gregorian;
+        if (this.hasValidDate()) {
+            this.convertToGregorian();
+            this.selectedDateChange.emit(this.selectedDate);
+        }
+    }
+    hasValidDate() {
+        return !!this.selectedDate && Object.keys(this.selectedDate).length > 0;
+    }
+    convertToHijri() {
+        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);
     }
-    gregClick() {
-        if (this.selectedDateType == DateType.Gregorian) {
-            return;
-        }
-        this.selectedDateType = DateType.Gregorian;
-        //to Gregorian
+    convertToGregorian() {
+        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);
     }
 }
 HijriGregorianDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HijriGregorianDatepickerComponent, deps: [{ token: DateFormatterService }], target: i0.ɵɵFactoryTarget.Component });
-HijriGregorianDatepickerComponent.ɵcmp = i0.ɵɵ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, 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+HijriGregorianDatepickerComponent.ɵcmp = i0.ɵɵ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, 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HijriGregorianDatepickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -6642,6 +6709,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], vertical: [{
                 type: Input
+            }], emitOnBlur: [{
+                type: Input
             }] } });
 
 /** @ignore */
@@ -9552,9 +9621,10 @@ const momentHijri$1 = moment_;
  *   </cts-dynamic-form-hijri-dateitem>
  */
 class DynamicFormHijriDateitemComponent {
-    constructor(dateFormatterService, control) {
+    constructor(dateFormatterService, control, _cdr) {
         this.dateFormatterService = dateFormatterService;
         this.control = control;
+        this._cdr = _cdr;
         /** Minimum Hijri Date */
         this.minHijri = this.getHijriDateMinusYears(50);
         /** Minimum Gregorian Date */
@@ -9565,13 +9635,12 @@ class DynamicFormHijriDateitemComponent {
         this.isReadOnly = true;
         /** Emitted when the value changes */
         this.valueChanged = new EventEmitter();
+        this.date = null;
         this.selectedDateType = DateType.Gregorian;
+        this.emitOnBlur = true;
         this.onChange = () => { };
         this.onTouched = () => { };
         this.control.valueAccessor = this;
-        if (!this.range) {
-            // this.date = this.dateFormatterService.GetTodayGregorian();
-        }
     }
     getGregDateMinusYears(years) {
         const today = this.dateFormatterService.GetTodayGregorian();
@@ -9582,20 +9651,14 @@ class DynamicFormHijriDateitemComponent {
         return new NgbDate(today.year - years, today.month, today.day);
     }
     writeValue(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, '');
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -9603,27 +9666,23 @@ class DynamicFormHijriDateitemComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    setDisabledState(isDisabled) { }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+    }
     ngOnInit() {
         this.placeHolder = this.placeholder ? this.placeholder : 'datePlaceHolder';
     }
-    ngAfterViewInit() {
-        //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);
-    }
-    removelable() { }
     setValue(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
+        const 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);
     }
     isRequired() {
         var _a;
@@ -9633,9 +9692,17 @@ class DynamicFormHijriDateitemComponent {
         const validator = this.control.control.validator({});
         return validator && validator.required;
     }
+    _convertRangeToGregorian(obj) {
+        return obj.from && obj.to
+            ? {
+                from: this.dateFormatterService.ToGregorianDateStruct(obj.from, ''),
+                to: this.dateFormatterService.ToGregorianDateStruct(obj.to, '')
+            }
+            : null;
+    }
 }
-DynamicFormHijriDateitemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormHijriDateitemComponent, deps: [{ token: DateFormatterService }, { token: i2$6.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-DynamicFormHijriDateitemComponent.ɵcmp = i0.ɵɵ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, 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+DynamicFormHijriDateitemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormHijriDateitemComponent, deps: [{ token: DateFormatterService }, { token: i2$6.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DynamicFormHijriDateitemComponent.ɵcmp = i0.ɵɵ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, 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormHijriDateitemComponent, decorators: [{
             type: Component,
             args: [{
@@ -9648,7 +9715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     type: Self
                 }, {
                     type: Optional
-                }] }]; }, propDecorators: { minHijri: [{
+                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { minHijri: [{
                 type: Input
             }], maxHijri: [{
                 type: Input
@@ -9670,6 +9737,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], valueChanged: [{
                 type: Output
+            }], emitOnBlur: [{
+                type: Input
             }], startDatePicker: [{
                 type: ViewChild,
                 args: ['datePicker']
@@ -11255,7 +11324,7 @@ class DateWrapperComponent {
     }
 }
 DateWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DateWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DateWrapperComponent.ɵcmp = i0.ɵɵ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, 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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+DateWrapperComponent.ɵcmp = i0.ɵɵ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, 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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DateWrapperComponent, decorators: [{
             type: Component,
             args: [{
@@ -21085,7 +21154,7 @@ class DynamicFieldsRendererComponent {
     }
 }
 DynamicFieldsRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFieldsRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DynamicFieldsRendererComponent.ɵcmp = i0.ɵɵ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, 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i2$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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$6.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$6.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i2$6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+DynamicFieldsRendererComponent.ɵcmp = i0.ɵɵ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, 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i2$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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$6.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$6.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i2$6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFieldsRendererComponent, decorators: [{
             type: Component,
             args: [{
@@ -27675,7 +27744,7 @@ class FilterComponent {
     }
 }
 FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FilterComponent, deps: [{ token: i2$6.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FilterComponent, selector: "cts-filter", inputs: { fields: "fields", filterTitle: "filterTitle" }, outputs: { onFiltering: "onFiltering" }, ngImport: i0, 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$6.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i1.TranslatePipe } });
+FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FilterComponent, selector: "cts-filter", inputs: { fields: "fields", filterTitle: "filterTitle" }, outputs: { onFiltering: "onFiltering" }, ngImport: i0, 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$6.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
             args: [{