nuxeo-development-framework 5.7.6 → 5.7.8

package/fesm2015/nuxeo-development-framework.js

@@ -11003,6 +11003,9 @@ class DynamicFormSelectUsersComponent {
             /*Empty*/
         };
         this.pageIndex = 0;
+        this.fetchUsersByCustomApi = false;
+        this.onSearch = new EventEmitter();
+        this.searchFn = (term, item) => true;
         if (this.control) {
             this.control.valueAccessor = this;
         }
@@ -11017,6 +11020,17 @@ class DynamicFormSelectUsersComponent {
         const { dirty, touched } = this.control;
         return this.invalid ? dirty || touched : false;
     }
+    set fetchedUsers(res) {
+        this.loading = true;
+        let newData = this.constructUserArray(res, 'id');
+        this.data = this.data.concat(newData);
+        this.isNextPageAvailable = false;
+        this.buffer = (this.data || []).slice(0, this.bufferSize);
+        this.buffer.map((item) => {
+            item.isSelected = false;
+        });
+        this.loading = false;
+    }
     emitSelection(event) {
         if (this.multiple) {
             this.selectionstrg = `${this.selection.length} ${this.suffix}`;
@@ -11047,12 +11061,21 @@ class DynamicFormSelectUsersComponent {
         }
     }
     ngOnInit() {
+        var _a;
         this.allUsers = this.deptTitle === 'all' ? true : false;
-        this.selection = (this.multiple ? [] : undefined);
-        if (this.allUsers) {
-            this.loadUsers();
+        this.selection = (_a = this.selection) !== null && _a !== void 0 ? _a : (this.multiple ? [] : undefined);
+        if (!this.fetchUsersByCustomApi) {
+            if (this.allUsers) {
+                this.loadUsers();
+            }
+            this.getDepartments();
+        }
+        else {
+            this.searchFn = (term, item) => {
+                const fullName = `${item.properties.firstName} ${item.properties.lastName}`.toLowerCase();
+                return fullName.includes(term.toLowerCase());
+            };
         }
-        this.getDepartments();
         this.translation.isArabic.subscribe((ar) => {
             this.isArabic = ar;
             ar
@@ -11141,13 +11164,12 @@ class DynamicFormSelectUsersComponent {
     }
     writeValue(value) {
         if (value) {
-            this.writedValue = value;
+            this.selection = value;
             if (this.multiple) {
-                this.selectionstrg = `${this.writedValue.length} ${this.suffix}`;
+                this.selectionstrg = `${this.selection.length} ${this.suffix}`;
             }
         }
         else {
-            this.writedValue = null;
             this.selection = null;
             this.selectionstrg = null;
         }
@@ -11193,23 +11215,8 @@ class DynamicFormSelectUsersComponent {
             ConstructedData = this.insertFUllName(data);
         }
         ConstructedData = this.filterUsers(data, filterValue);
-        // Due to not using bindValue, we need to hold the selected value as the full user object, not just the username
-        if (this.writedValue) {
-            this.handleWrittedValue(ConstructedData);
-        }
         return ConstructedData;
     }
-    handleWrittedValue(users) {
-        const userId = (value) => {
-            return (typeof (value) === 'string') ? value : value.id;
-        };
-        this.selection = (this.multiple) ? users.filter(user => this.writedValue.some(value => user.properties.username === userId(value)))
-            : users.filter(user => user.properties.username === userId(this.writedValue))[0];
-        if (this.selection) {
-            this.writedValue = null;
-            this.emitSelection(this.selection);
-        }
-    }
     insertFUllName(data) {
         return data.map((user) => {
             var _a, _b;
@@ -11234,7 +11241,7 @@ class DynamicFormSelectUsersComponent {
     }
 }
 DynamicFormSelectUsersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormSelectUsersComponent, deps: [{ token: UsersInDepartmentsApiService }, { token: i1.TranslateService }, { token: TranslationService }, { token: i2$4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-DynamicFormSelectUsersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormSelectUsersComponent, selector: "cts-dynamic-form-select-users", inputs: { deptTitle: "deptTitle", groupName: "groupName", label: "label", bindValue: "bindValue", bindLabel: "bindLabel", arabicBindLabel: "arabicBindLabel", placeholder: "placeholder", multiple: "multiple", searchable: "searchable", closeOnSelect: "closeOnSelect", hideSelectedItems: "hideSelectedItems", preSelectedValues: "preSelectedValues", usePreSelectedValue: "usePreSelectedValue", disabled: "disabled", filter: "filter", useArabicName: "useArabicName" }, outputs: { onSelectItems: "onSelectItems" }, viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: ["ngSelectComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"label\">\r\n\t<div>\r\n\t\t<label class=\"select-label\"\r\n\t\t\t>{{ label | translate }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\">*</span></label\r\n\t\t>\r\n\t</div>\r\n</ng-container>\r\n<div class=\"user-select\" [ngClass]=\"{ 'multiple-wrapper': multiple }\" SetRtl>\r\n\t<ng-select\r\n\t\t#ngSelectComponent\r\n\t\t[items]=\"buffer\"\r\n\t\t[bindLabel]=\"useArabicName ? (isArabic ? arabicBindLabel : bindLabel) : bindLabel\"\r\n\t\t[placeholder]=\"multiple && selection && selection.length > 0 ? selectionstrg : placeholder\"\r\n\t\t[multiple]=\"multiple\"\r\n\t\t[searchable]=\"searchable\"\r\n\t\t[closeOnSelect]=\"closeOnSelect\"\r\n\t\t[hideSelected]=\"hideSelectedItems\"\r\n\t\t[loading]=\"loading\"\r\n\t\t(scrollToEnd)=\"onScrollToEnd()\"\r\n\t\t[disabled]=\"disabled\"\r\n\t\t[typeahead]=\"userNameInput$\"\r\n\t\t[compareWith]=\"compareFn\"\r\n\t\t[(ngModel)]=\"selection\"\r\n\t\t(change)=\"emitSelection($event)\"\r\n\t>\r\n\t\t<ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" *ngIf=\"!loading\">\r\n\t\t\t<span style=\"display: flex; align-items: center; column-gap: 4px; font-size: 16px\">\r\n\t\t\t\t<div style=\"width: 30px; height: 30px\">\r\n\t\t\t\t\t<cts-avatar [user]=\"item\"></cts-avatar>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div class=\"user-name\">\r\n\t\t\t\t\t{{\r\n\t\t\t\t\t\titem?.id === 'system'\r\n\t\t\t\t\t\t\t? ('SYSTEM_ADMIN' | translate)\r\n\t\t\t\t\t\t\t: useArabicName\r\n\t\t\t\t\t\t\t? isArabic\r\n\t\t\t\t\t\t\t\t? item?.fullNameAr\r\n\t\t\t\t\t\t\t\t\t? item?.fullNameAr\r\n\t\t\t\t\t\t\t\t\t: item?.fullName\r\n\t\t\t\t\t\t\t\t: item?.fullName\r\n\t\t\t\t\t\t\t: item?.properties?.firstName + ' ' + item?.properties?.lastName\r\n\t\t\t\t\t}}\r\n\t\t\t\t</div>\r\n\t\t\t\t<div>\r\n\t\t\t\t\t<span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\u00D7</span>\r\n\t\t\t\t</div>\r\n\t\t\t</span>\r\n\t\t</ng-template>\r\n\r\n\t\t<ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n\t\t\t<span style=\"display: flex; align-items: center; column-gap: 4px; font-size: 16px\">\r\n\t\t\t\t<mat-checkbox\r\n\t\t\t\t\t*ngIf=\"multiple\"\r\n\t\t\t\t\tid=\"item-{{ index }}\"\r\n\t\t\t\t\t[ngModel]=\"item$.selected\"\r\n\t\t\t\t\t(click)=\"(false)\"\r\n\t\t\t\t></mat-checkbox>\r\n\t\t\t\t<div style=\"width: 30px; height: 30px\">\r\n\t\t\t\t\t<cts-avatar [user]=\"item\"></cts-avatar>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div>\r\n\t\t\t\t\t{{\r\n\t\t\t\t\t\titem?.id === 'system'\r\n\t\t\t\t\t\t\t? ('SYSTEM_ADMIN' | translate)\r\n\t\t\t\t\t\t\t: useArabicName\r\n\t\t\t\t\t\t\t? isArabic\r\n\t\t\t\t\t\t\t\t? item?.fullNameAr\r\n\t\t\t\t\t\t\t\t\t? item?.fullNameAr\r\n\t\t\t\t\t\t\t\t\t: item?.fullName\r\n\t\t\t\t\t\t\t\t: item?.fullName\r\n\t\t\t\t\t\t\t: item?.properties?.firstName + ' ' + item?.properties?.lastName\r\n\t\t\t\t\t}}\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div></div>\r\n\t\t\t</span>\r\n\t\t</ng-template>\r\n\t</ng-select>\r\n</div>\r\n<mat-error [attr.data-automation-id]=\"'card-textitem-error-'\" class=\"app-textitem-editable-error\" *ngIf=\"hasErrors()\">\r\n\t<ul>\r\n\t\t<li *ngIf=\"control.errors.required\">\r\n\t\t\t{{ 'VALIDATORS.REQUIRED' | translate }}\r\n\t\t</li>\r\n\t</ul>\r\n</mat-error>\r\n", styles: [".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}.select-label{color:#8f98aa;font-size:12px;margin-bottom:0}.user-select .ng-select-container{border:1px solid #ccc!important;border-radius:5px!important;background-color:#8f98aa1a!important}.user-select .ng-select-container .ng-value-container{padding:5px 7px 0!important}.user-select .ng-select-container .ng-value-container .ng-placeholder{padding:0 5px;font-size:12px}.user-select .ng-select-container .ng-value-container .ng-value{color:#495057}.user-select .ng-select-container .ng-arrow-wrapper{padding:0 20px}.user-select .ng-select-container .ng-input{left:10px;right:10px;width:auto}.user-select .mat-checkbox-ripple .mat-ripple-element,.user-select .mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#33e3b7!important}.user-select .mat-checkbox-ripple .mat-ripple-element{position:fixed;left:inherit;top:inherit;transform:translate(-3px,-3px)!important}.user-select mat-checkbox .mat-checkbox-background{background-color:#d9dce2!important}.multiple-wrapper .ng-select-container{overflow:visible!important}.multiple-wrapper .ng-select-container.ng-has-value{margin-bottom:65px}.multiple-wrapper .ng-select-container .ng-value-container{position:absolute;top:40px;width:100%;max-height:65px;overflow-y:auto}.multiple-wrapper .ng-select-container .ng-value-container .ng-placeholder{display:block;position:absolute;top:-26px!important}.multiple-wrapper .ng-select-container .ng-value-container .ng-value{padding:5px 10px}.multiple-wrapper .ng-select-container .ng-value-container .ng-value .user-name{font-size:12px}.multiple-wrapper .ng-select-container .ng-value-container .ng-input{position:absolute;top:-35px!important}.multiple-wrapper .ng-select-container .ng-clear-wrapper{display:none}.multiple-wrapper .ng-select-container .ng-arrow-wrapper{position:absolute;right:5px}.multiple-wrapper .ng-select-filtered .ng-value-container .ng-placeholder{display:none!important}.multiple-wrapper.rtl .ng-select-container .ng-value-container .ng-value{padding:5px 10px}.multiple-wrapper.rtl .ng-select-container .ng-value-container .ng-value .ng-value-icon{border-left:none!important;border-right:1px solid #b8dbff}.multiple-wrapper.rtl .ng-select-container .ng-arrow-wrapper{left:5px;right:auto}.ng-select-disabled .ng-select-container{background-color:#e9ecef!important}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper{position:relative}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper input{visibility:hidden;width:20px;height:20px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper .icon-wrapper{position:absolute;top:0px;left:0px;width:20px;height:20px;border:1px solid #2e62df;display:flex;justify-content:center;align-items:center}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper .icon-wrapper .icon{color:#2e62df;display:none;justify-content:center;align-items:center;font-weight:bold}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option-selected .option-wrapper .check-box-wrapper .icon-wrapper .icon{display:flex}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option-selected .option-wrapper .label-wrapper{color:#2e62df}.ng-select .ng-select-focused:not(.ng-select-opened) .ng-select-container{border-color:#ccc;box-shadow:none}\n"], components: [{ type: i5.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: AvatarComponent, selector: "cts-avatar", inputs: ["user"] }, { type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SetRtlDirective, selector: "[SetRtl]" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.ɵh, selector: "[ng-label-tmp]" }, { type: i5.ɵf, selector: "[ng-option-tmp]" }, { type: i1$7.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+DynamicFormSelectUsersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormSelectUsersComponent, selector: "cts-dynamic-form-select-users", inputs: { deptTitle: "deptTitle", groupName: "groupName", label: "label", bindValue: "bindValue", bindLabel: "bindLabel", arabicBindLabel: "arabicBindLabel", placeholder: "placeholder", multiple: "multiple", searchable: "searchable", closeOnSelect: "closeOnSelect", hideSelectedItems: "hideSelectedItems", preSelectedValues: "preSelectedValues", usePreSelectedValue: "usePreSelectedValue", disabled: "disabled", filter: "filter", useArabicName: "useArabicName", fetchUsersByCustomApi: "fetchUsersByCustomApi", fetchedUsers: "fetchedUsers" }, outputs: { onSelectItems: "onSelectItems", onSearch: "onSearch" }, viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: ["ngSelectComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"label\">\r\n\t<div>\r\n\t\t<label class=\"select-label\"\r\n\t\t\t>{{ label | translate }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\">*</span></label\r\n\t\t>\r\n\t</div>\r\n</ng-container>\r\n<div class=\"user-select\" [ngClass]=\"{ 'multiple-wrapper': multiple }\" SetRtl>\r\n\t<ng-select\r\n\t\t#ngSelectComponent\r\n\t\t[items]=\"buffer\"\r\n\t\t[bindLabel]=\"useArabicName ? (isArabic ? arabicBindLabel : bindLabel) : bindLabel\"\r\n\t\t[placeholder]=\"multiple && selection && selection.length > 0 ? selectionstrg : placeholder\"\r\n\t\t[multiple]=\"multiple\"\r\n\t\t[searchable]=\"searchable\"\r\n\t\t[closeOnSelect]=\"closeOnSelect\"\r\n\t\t[hideSelected]=\"hideSelectedItems\"\r\n\t\t[loading]=\"loading\"\r\n\t\t(scrollToEnd)=\"onScrollToEnd()\"\r\n\t\t[disabled]=\"disabled\"\r\n\t\t[typeahead]=\"userNameInput$\"\r\n\t\t[compareWith]=\"compareFn\"\r\n\t\t[(ngModel)]=\"selection\"\r\n\t\t[searchFn]=\"searchFn\"\r\n\t\t(change)=\"emitSelection($event)\"\r\n\t>\r\n\t\t<ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" *ngIf=\"!loading\">\r\n\t\t\t<span style=\"display: flex; align-items: center; column-gap: 4px; font-size: 16px\">\r\n\t\t\t\t<div style=\"width: 30px; height: 30px\">\r\n\t\t\t\t\t<cts-avatar [user]=\"item\"></cts-avatar>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div class=\"user-name\">\r\n\t\t\t\t\t{{\r\n\t\t\t\t\t\titem?.id === 'system'\r\n\t\t\t\t\t\t\t? ('SYSTEM_ADMIN' | translate)\r\n\t\t\t\t\t\t\t: useArabicName\r\n\t\t\t\t\t\t\t? isArabic\r\n\t\t\t\t\t\t\t\t? item?.fullNameAr\r\n\t\t\t\t\t\t\t\t\t? item?.fullNameAr\r\n\t\t\t\t\t\t\t\t\t: item?.fullName\r\n\t\t\t\t\t\t\t\t: item?.fullName\r\n\t\t\t\t\t\t\t: item?.properties?.firstName + ' ' + item?.properties?.lastName\r\n\t\t\t\t\t}}\r\n\t\t\t\t</div>\r\n\t\t\t\t<div>\r\n\t\t\t\t\t<span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\u00D7</span>\r\n\t\t\t\t</div>\r\n\t\t\t</span>\r\n\t\t</ng-template>\r\n\r\n\t\t<ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n\t\t\t<span style=\"display: flex; align-items: center; column-gap: 4px; font-size: 16px\">\r\n\t\t\t\t<mat-checkbox\r\n\t\t\t\t\t*ngIf=\"multiple\"\r\n\t\t\t\t\tid=\"item-{{ index }}\"\r\n\t\t\t\t\t[ngModel]=\"item$.selected\"\r\n\t\t\t\t\t(click)=\"(false)\"\r\n\t\t\t\t></mat-checkbox>\r\n\t\t\t\t<div style=\"width: 30px; height: 30px\">\r\n\t\t\t\t\t<cts-avatar [user]=\"item\"></cts-avatar>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div>\r\n\t\t\t\t\t{{\r\n\t\t\t\t\t\titem?.id === 'system'\r\n\t\t\t\t\t\t\t? ('SYSTEM_ADMIN' | translate)\r\n\t\t\t\t\t\t\t: useArabicName\r\n\t\t\t\t\t\t\t? isArabic\r\n\t\t\t\t\t\t\t\t? item?.fullNameAr\r\n\t\t\t\t\t\t\t\t\t? item?.fullNameAr\r\n\t\t\t\t\t\t\t\t\t: item?.fullName\r\n\t\t\t\t\t\t\t\t: item?.fullName\r\n\t\t\t\t\t\t\t: item?.properties?.firstName + ' ' + item?.properties?.lastName\r\n\t\t\t\t\t}}\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div></div>\r\n\t\t\t</span>\r\n\t\t</ng-template>\r\n\t</ng-select>\r\n</div>\r\n<mat-error [attr.data-automation-id]=\"'card-textitem-error-'\" class=\"app-textitem-editable-error\" *ngIf=\"hasErrors()\">\r\n\t<ul>\r\n\t\t<li *ngIf=\"control.errors.required\">\r\n\t\t\t{{ 'VALIDATORS.REQUIRED' | translate }}\r\n\t\t</li>\r\n\t</ul>\r\n</mat-error>\r\n", styles: [".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}.select-label{color:#8f98aa;font-size:12px;margin-bottom:0}.user-select .ng-select-container{border:1px solid #ccc!important;border-radius:5px!important;background-color:#8f98aa1a!important}.user-select .ng-select-container .ng-value-container{padding:5px 7px 0!important}.user-select .ng-select-container .ng-value-container .ng-placeholder{padding:0 5px;font-size:12px}.user-select .ng-select-container .ng-value-container .ng-value{color:#495057}.user-select .ng-select-container .ng-arrow-wrapper{padding:0 20px}.user-select .ng-select-container .ng-input{left:10px;right:10px;width:auto}.user-select .mat-checkbox-ripple .mat-ripple-element,.user-select .mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#33e3b7!important}.user-select .mat-checkbox-ripple .mat-ripple-element{position:fixed;left:inherit;top:inherit;transform:translate(-3px,-3px)!important}.user-select mat-checkbox .mat-checkbox-background{background-color:#d9dce2!important}.multiple-wrapper .ng-select-container{overflow:visible!important}.multiple-wrapper .ng-select-container.ng-has-value{margin-bottom:65px}.multiple-wrapper .ng-select-container .ng-value-container{position:absolute;top:40px;width:100%;max-height:65px;overflow-y:auto}.multiple-wrapper .ng-select-container .ng-value-container .ng-placeholder{display:block;position:absolute;top:-26px!important}.multiple-wrapper .ng-select-container .ng-value-container .ng-value{padding:5px 10px}.multiple-wrapper .ng-select-container .ng-value-container .ng-value .user-name{font-size:12px}.multiple-wrapper .ng-select-container .ng-value-container .ng-input{position:absolute;top:-35px!important}.multiple-wrapper .ng-select-container .ng-clear-wrapper{display:none}.multiple-wrapper .ng-select-container .ng-arrow-wrapper{position:absolute;right:5px}.multiple-wrapper .ng-select-filtered .ng-value-container .ng-placeholder{display:none!important}.multiple-wrapper.rtl .ng-select-container .ng-value-container .ng-value{padding:5px 10px}.multiple-wrapper.rtl .ng-select-container .ng-value-container .ng-value .ng-value-icon{border-left:none!important;border-right:1px solid #b8dbff}.multiple-wrapper.rtl .ng-select-container .ng-arrow-wrapper{left:5px;right:auto}.ng-select-disabled .ng-select-container{background-color:#e9ecef!important}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper{position:relative}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper input{visibility:hidden;width:20px;height:20px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper .icon-wrapper{position:absolute;top:0px;left:0px;width:20px;height:20px;border:1px solid #2e62df;display:flex;justify-content:center;align-items:center}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper .icon-wrapper .icon{color:#2e62df;display:none;justify-content:center;align-items:center;font-weight:bold}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option-selected .option-wrapper .check-box-wrapper .icon-wrapper .icon{display:flex}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option-selected .option-wrapper .label-wrapper{color:#2e62df}.ng-select .ng-select-focused:not(.ng-select-opened) .ng-select-container{border-color:#ccc;box-shadow:none}\n"], components: [{ type: i5.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: AvatarComponent, selector: "cts-avatar", inputs: ["user"] }, { type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SetRtlDirective, selector: "[SetRtl]" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.ɵh, selector: "[ng-label-tmp]" }, { type: i5.ɵf, selector: "[ng-option-tmp]" }, { type: i1$7.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     Cacheable({
         maxCacheCount: 1000,
@@ -11290,6 +11297,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], onSelectItems: [{
                 type: Output
+            }], fetchUsersByCustomApi: [{
+                type: Input
+            }], fetchedUsers: [{
+                type: Input
+            }], onSearch: [{
+                type: Output
             }], getUsersSuggestions: [] } });
 
 /**
@@ -11430,7 +11443,7 @@ class DynamicFormTextareaComponent {
 }
 DynamicFormTextareaComponent.DEFAULT_SEPARATOR = ', ';
 DynamicFormTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormTextareaComponent, deps: [{ token: DynamicFormUpdateService }, { token: i1.TranslateService }, { token: i2$4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-DynamicFormTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormTextareaComponent, selector: "app-dynamic-form-textarea", inputs: { property: "property", label: "label", editable: "editable", disabled: "disabled", id: "id", placeholder: "placeholder", displayEmpty: "displayEmpty", horizontalAlign: "horizontalAlign" }, viewQueries: [{ propertyName: "editorInput", first: true, predicate: ["editorInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"app-property-value\">\r\n\t<div class=\"app-input-wrapper\" [ngClass]=\"{ row: horizontalAlign }\">\r\n\t\t<label\r\n\t\t\t*ngIf=\"label\"\r\n\t\t\tfor=\"formGroupInputSmall\"\r\n\t\t\t[ngClass]=\"{ 'col-3': horizontalAlign }\"\r\n\t\t\t>{{ label | translate\r\n\t\t\t}}<span *ngIf=\"isRequired()\" class=\"text-danger\">*</span></label\r\n\t\t>\r\n\t\t<div [ngClass]=\"{ 'col-9': horizontalAlign }\">\r\n\t\t\t<ng-container *ngIf=\"isEditable(); else readOnly\">\r\n\t\t\t\t<textarea\r\n\t\t\t\t\t[id]=\"id\"\r\n\t\t\t\t\tclass=\"form-control field-style\"\r\n\t\t\t\t\tplaceholder=\"{{ placeholder | translate }}\"\r\n\t\t\t\t\t[attr.disabled]=\"isDisabled() || null\"\r\n\t\t\t\t\t#editorInput\r\n\t\t\t\t\tmatTextareaAutosize\r\n\t\t\t\t\tmatAutosizeMinRows=\"3\"\r\n\t\t\t\t\tmatAutosizeMaxRows=\"5\"\r\n\t\t\t\t\t[(ngModel)]=\"editedValue\"\r\n\t\t\t\t\t(input)=\"onTextAreaInputChange()\"\r\n\t\t\t\t\t(keyup)=\"update($event)\"\r\n\t\t\t\t\t[attr.data-automation-id]=\"'card-textitem-edittextarea-'\"\r\n\t\t\t\t></textarea>\r\n\t\t\t\t<mat-error\r\n\t\t\t\t\t[attr.data-automation-id]=\"'card-textitem-error-'\"\r\n\t\t\t\t\tclass=\"app-textitem-editable-error\"\r\n\t\t\t\t\t*ngIf=\"hasErrors()\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ul>\r\n\t\t\t\t\t\t<li *ngIf=\"control.errors.required\">\r\n\t\t\t\t\t\t\t{{ label | translate }} {{ 'VALIDATORS.REQUIRED' | translate }}\r\n\t\t\t\t\t\t</li>\r\n\t\t\t\t\t</ul>\r\n\t\t\t\t</mat-error>\r\n\t\t\t</ng-container>\r\n\t\t\t<ng-template #readOnly>\r\n\t\t\t\t{{ editedValue }}\r\n\t\t\t</ng-template>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n", styles: [".app-textitem-editable-error{margin-top:-15px;padding-top:0}textarea::placeholder{font-size:12px}\n"], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.MatTextareaAutosize, selector: "textarea[mat-autosize], textarea[matTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "matAutosizeMinRows", "matAutosizeMaxRows", "mat-autosize", "matTextareaAutosize"], exportAs: ["matTextareaAutosize"] }, { type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$7.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+DynamicFormTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormTextareaComponent, selector: "app-dynamic-form-textarea", inputs: { property: "property", label: "label", editable: "editable", disabled: "disabled", id: "id", placeholder: "placeholder", displayEmpty: "displayEmpty", horizontalAlign: "horizontalAlign" }, viewQueries: [{ propertyName: "editorInput", first: true, predicate: ["editorInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"app-property-value\">\r\n\t<div class=\"app-input-wrapper\" [ngClass]=\"{ row: horizontalAlign }\">\r\n\t\t<label\r\n\t\t\t*ngIf=\"label\"\r\n\t\t\tfor=\"formGroupInputSmall\"\r\n\t\t\t[ngClass]=\"{ 'col-3': horizontalAlign }\"\r\n\t\t\t>{{ label | translate\r\n\t\t\t}}<span *ngIf=\"isRequired()\" class=\"text-danger\">*</span></label\r\n\t\t>\r\n\t\t<div [ngClass]=\"{ 'col-9': horizontalAlign }\">\r\n\t\t\t<ng-container *ngIf=\"isEditable(); else readOnly\">\r\n\t\t\t\t<textarea\r\n\t\t\t\t\t[id]=\"id\"\r\n\t\t\t\t\tclass=\"form-control field-style\"\r\n\t\t\t\t\tplaceholder=\"{{ placeholder | translate }}\"\r\n\t\t\t\t\t[attr.disabled]=\"isDisabled() || null\"\r\n\t\t\t\t\t#editorInput\r\n\t\t\t\t\tmatTextareaAutosize\r\n\t\t\t\t\tmatAutosizeMinRows=\"3\"\r\n\t\t\t\t\tmatAutosizeMaxRows=\"5\"\r\n\t\t\t\t\t[(ngModel)]=\"editedValue\"\r\n\t\t\t\t\t(input)=\"onTextAreaInputChange()\"\r\n\t\t\t\t\t(keyup)=\"update($event)\"\r\n\t\t\t\t\t[attr.data-automation-id]=\"'card-textitem-edittextarea-'\"\r\n\t\t\t\t></textarea>\r\n\t\t\t\t<mat-error\r\n\t\t\t\t\t[attr.data-automation-id]=\"'card-textitem-error-'\"\r\n\t\t\t\t\tclass=\"app-textitem-editable-error\"\r\n\t\t\t\t\t*ngIf=\"hasErrors()\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ul>\r\n\t\t\t\t\t\t<li *ngIf=\"control.errors.required\">\r\n\t\t\t\t\t\t\t{{ label | translate }} {{ 'VALIDATORS.REQUIRED' | translate }}\r\n\t\t\t\t\t\t</li>\r\n\t\t\t\t\t</ul>\r\n\t\t\t\t</mat-error>\r\n\t\t\t</ng-container>\r\n\t\t\t<ng-template #readOnly>\r\n\t\t\t\t{{ editedValue }}\r\n\t\t\t</ng-template>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n", styles: ["textarea::placeholder{font-size:12px}\n"], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.MatTextareaAutosize, selector: "textarea[mat-autosize], textarea[matTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "matAutosizeMinRows", "matAutosizeMaxRows", "mat-autosize", "matTextareaAutosize"], exportAs: ["matTextareaAutosize"] }, { type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$7.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormTextareaComponent, decorators: [{
             type: Component,
             args: [{
@@ -12107,7 +12120,7 @@ class UserSelectorWrapperComponent {
     }
 }
 UserSelectorWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: UserSelectorWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UserSelectorWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: UserSelectorWrapperComponent, selector: "lib-user-selector-wrapper", inputs: { value: "value", multipleMode: "multipleMode", customOptions: "customOptions" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<cts-dynamic-form-select-users placeholder=\"{{ 'CREATE.PLACE_HOLDER' | translate }} {{'CREATE.USER' | translate}}\"\r\n  [multiple]=\"multipleMode\"\r\n  [searchable]=\"true\"\r\n  [bindLabel]=\"'fullName'\"\r\n  [closeOnSelect]=\"!multipleMode\"\r\n  [searchable]=\"true\"\r\n  [deptTitle]=\"'all'\"\r\n  [preSelectedValues]=\"[]\"\r\n  [usePreSelectedValue]=\"true\"\r\n  (onSelectItems)=\"executeFunction($event)\"\r\n  (ngModelChange)=\"checkChange($event)\"\r\n  [(ngModel)]=\"bindedValue\" >\r\n</cts-dynamic-form-select-users>\r\n  <!--  -->\r\n\r\n<!-- <div>{{customOptions | json}}</div>\r\n<div>{{multipleMode}}</div> -->", styles: [""], components: [{ type: DynamicFormSelectUsersComponent, selector: "cts-dynamic-form-select-users", inputs: ["deptTitle", "groupName", "label", "bindValue", "bindLabel", "arabicBindLabel", "placeholder", "multiple", "searchable", "closeOnSelect", "hideSelectedItems", "preSelectedValues", "usePreSelectedValue", "disabled", "filter", "useArabicName"], outputs: ["onSelectItems"] }], directives: [{ type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i1.TranslatePipe } });
+UserSelectorWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: UserSelectorWrapperComponent, selector: "lib-user-selector-wrapper", inputs: { value: "value", multipleMode: "multipleMode", customOptions: "customOptions" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<cts-dynamic-form-select-users placeholder=\"{{ 'CREATE.PLACE_HOLDER' | translate }} {{'CREATE.USER' | translate}}\"\r\n  [multiple]=\"multipleMode\"\r\n  [searchable]=\"true\"\r\n  [bindLabel]=\"'fullName'\"\r\n  [closeOnSelect]=\"!multipleMode\"\r\n  [searchable]=\"true\"\r\n  [deptTitle]=\"'all'\"\r\n  [preSelectedValues]=\"[]\"\r\n  [usePreSelectedValue]=\"true\"\r\n  (onSelectItems)=\"executeFunction($event)\"\r\n  (ngModelChange)=\"checkChange($event)\"\r\n  [(ngModel)]=\"bindedValue\" >\r\n</cts-dynamic-form-select-users>\r\n  <!--  -->\r\n\r\n<!-- <div>{{customOptions | json}}</div>\r\n<div>{{multipleMode}}</div> -->", styles: [""], components: [{ type: DynamicFormSelectUsersComponent, selector: "cts-dynamic-form-select-users", inputs: ["deptTitle", "groupName", "label", "bindValue", "bindLabel", "arabicBindLabel", "placeholder", "multiple", "searchable", "closeOnSelect", "hideSelectedItems", "preSelectedValues", "usePreSelectedValue", "disabled", "filter", "useArabicName", "fetchUsersByCustomApi", "fetchedUsers"], outputs: ["onSelectItems", "onSearch"] }], directives: [{ type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: UserSelectorWrapperComponent, decorators: [{
             type: Component,
             args: [{