@bnsights/bbsf-controls 1.0.174 → 1.0.176

package/fesm2022/bnsights-bbsf-controls.mjs

@@ -1085,7 +1085,7 @@ class AutocompleteTextBoxComponent {
     }
     selectEvent(item) {
         if (this.options.allowNewSelection == true) {
-            if (typeof (item) == 'object') {
+            if (typeof item == 'object') {
                 this.autoCompleteTextBoxControl.setValue(item);
                 this.autoCompleteTextBoxControl.updateValueAndValidity();
             }
@@ -1098,7 +1098,9 @@ class AutocompleteTextBoxComponent {
         }
         else {
             if (this.autoCompleteTextBoxControl.value == item.value) {
-                this.autoCompleteTextBoxControl.setErrors({ errorMassage: this.utilityService.getResourceValue('NewSelectionValidationKey') });
+                this.autoCompleteTextBoxControl.setErrors({
+                    errorMassage: this.utilityService.getResourceValue('NewSelectionValidationKey')
+                });
                 this.autoCompleteTextBoxControl.markAsTouched();
                 this.autoCompleteTextBoxControl.invalid;
                 return;
@@ -1107,7 +1109,9 @@ class AutocompleteTextBoxComponent {
                 this.autoCompleteTextBoxControl.setValue(item);
                 this.autoCompleteTextBoxControl.updateValueAndValidity();
                 let originalValue = this.autoCompleteTextBoxControl.value;
-                if (this.options.patchFunction && this.options.patchPath && this.group.get(this.name).valid) {
+                if (this.options.patchFunction &&
+                    this.options.patchPath &&
+                    this.group.get(this.name).valid) {
                     this.controlUtility.patchControlValue(originalValue, this.options.patchFunction, this.options.patchPath);
                 }
             }
@@ -1702,10 +1706,18 @@ class DateInputComponent {
     }
     //#region events
     ngOnInit() {
-        this.textDir = this.options.forceDirection ? (this.options.forceDirection == ForceDirection.Arabic ? 'rtl' : 'ltr') : (localStorage.getItem('language') == 'ar' ? 'rtl' : 'ltr');
-        this.startView = (this.options.startView == StartView.MultiYear ? 'multi-year' : StartView[this.options.startView].toLowerCase());
+        this.textDir = this.options.forceDirection
+            ? this.options.forceDirection == ForceDirection.Arabic
+                ? 'rtl'
+                : 'ltr'
+            : localStorage.getItem('language') == 'ar'
+                ? 'rtl'
+                : 'ltr';
+        this.startView = (this.options.startView == StartView.MultiYear
+            ? 'multi-year'
+            : StartView[this.options.startView].toLowerCase());
         // Update the DateTimeAdapter Language with the current thread langauge
-        this.dateTimeAdapter.setLocale(this.utilityService.getCurrentLanguage() == "ar" ? "ar" : "en-UK");
+        this.dateTimeAdapter.setLocale(this.utilityService.getCurrentLanguage() == 'ar' ? 'ar' : 'en-UK');
         this.controlValidationService.isCreatedBefor = false;
         this.group.addControl(this.options.name, new FormControl(''));
         this.datePickerFormControl = this.group.controls[this.options.name];
@@ -1719,7 +1731,7 @@ class DateInputComponent {
         }
         if (this.options.isRequired)
             this.validationRules.push(Validators.required);
-        if (this.options.labelKey != null && this.options.labelKey != "")
+        if (this.options.labelKey != null && this.options.labelKey != '')
             this.options.labelValue = this.utilityService.getResourceValue(this.options.labelKey);
         if (this.options.isDisabled)
             this.datePickerFormControl.disable();
@@ -1769,8 +1781,9 @@ class DateInputComponent {
         }
     }
     onDateSelect(item) {
-        if (!item)
+        if (!item) {
             return;
+        }
         let dateValue = new Date(item.value);
         // var tzOffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds
         if (this.options.selectMode == SelectMode.Range) {
@@ -1786,7 +1799,9 @@ class DateInputComponent {
         this.datePickerFormControl.setValue(dateValue);
         this.onChangeService.ChangeValue(this.options.name);
         let originalValue = dateValue;
-        if (this.options.patchFunction && this.options.patchPath && this.group.get(this.options.name).valid) {
+        if (this.options.patchFunction &&
+            this.options.patchPath &&
+            this.group.get(this.options.name).valid) {
             this.controlUtility.patchControlValue(originalValue, this.options.patchFunction, this.options.patchPath);
         }
         //Use this line to enable two way binding.
@@ -1796,11 +1811,11 @@ class DateInputComponent {
     subscribeDateChanges() {
         const startDateChanges = this.comparedControl.valueChanges;
         const endDateChanges = this.group.get(this.options.name).valueChanges;
-        startDateChanges.subscribe(start => {
+        startDateChanges.subscribe((start) => {
             this.comparedControl.addValidators(this.checkIfStartDateBeForEndDate);
             this.comparedControl.updateValueAndValidity();
         });
-        endDateChanges.subscribe(end => {
+        endDateChanges.subscribe((end) => {
             this.datePickerFormControl.addValidators(this.checkIfEndDateAfterStartDate);
             this.datePickerFormControl.updateValueAndValidity();
         });
@@ -1899,7 +1914,7 @@ class DropdownListComponent {
         this.SelectedList = this.options.selectedItems;
         this.dropdownSettings = {
             singleSelection: this.options.singleSelection,
-            text: "Select",
+            text: 'Select',
             selectAllText: 'Select All',
             unSelectAllText: 'UnSelect All',
             enableSearchFilter: this.options.allowSearchFilter,
@@ -1912,8 +1927,8 @@ class DropdownListComponent {
             showSelectedItemsAtTop: true,
             limitSelection: this.options.limitSelection,
             searchPlaceholderText: this.options.placeholder,
-            labelKey: "value",
-            primaryKey: "key"
+            labelKey: 'value',
+            primaryKey: 'key'
         };
         this.group.addControl(this.options.name, new FormControl(''));
         this.dropdownListFormControl = this.group.controls[this.options.name]; //  new FormControl('',validationRules);
@@ -1929,7 +1944,7 @@ class DropdownListComponent {
         if (this.options.isRequired) {
             this.validationRules.push(Validators.required);
         }
-        if (this.options.labelKey != null && this.options.labelKey != "")
+        if (this.options.labelKey != null && this.options.labelKey != '')
             this.options.labelValue = this.utilityService.getResourceValue(this.options.labelKey);
         this.dropdownListFormControl.setValidators(this.validationRules);
         this.dropdownListFormControl.setAsyncValidators(this.validationRulesasync);
@@ -1956,10 +1971,23 @@ class DropdownListComponent {
     }
     getSelectedItemValue() {
         if (this.options.selectedItems) {
-            if (this.options.singleSelection)
-                return this.options.dataSource.filter(item => item[this.options.itemTempletkey] == this.options.selectedItems)[0][this.options.itemTempletvalue];
-            else
-                return this.options.dataSource.filter(item => this.options.selectedItems.includes(item[this.options.itemTempletkey])).map(item => item[this.options.itemTempletvalue]);
+            if (this.options.singleSelection) {
+                // Handle single selection - selectedItems could be a string or array with one item
+                const selectedItem = Array.isArray(this.options.selectedItems)
+                    ? this.options.selectedItems[0]
+                    : this.options.selectedItems;
+                const foundItem = this.options.dataSource.find((item) => item[this.options.itemTempletkey] == selectedItem);
+                return foundItem ? foundItem[this.options.itemTempletvalue] : '';
+            }
+            else {
+                // Handle multiple selection - ensure selectedItems is treated as array
+                const itemsArray = Array.isArray(this.options.selectedItems)
+                    ? this.options.selectedItems
+                    : [this.options.selectedItems];
+                return this.options.dataSource
+                    .filter((item) => itemsArray.includes(item[this.options.itemTempletkey]))
+                    .map((item) => item[this.options.itemTempletvalue]);
+            }
         }
         else
             return this.utilityService.getResourceValue('NA');
@@ -1967,14 +1995,18 @@ class DropdownListComponent {
     onItemSelect() {
         this.onChangeService.ChangeValue(this.options.name);
         let originalValue = this.options.selectedItems;
-        if (this.options.patchFunction && this.options.patchPath && this.group.get(this.options.name).valid) {
+        if (this.options.patchFunction &&
+            this.options.patchPath &&
+            this.group.get(this.options.name).valid) {
             this.controlUtility.patchControlValue(originalValue, this.options.patchFunction, this.options.patchPath);
         }
         this.onChange.emit(originalValue);
         //console.log(this.dropdownListFormControl.value)
     }
     Clear() {
-        //console.log("Clear")
+        // Clear the selected items
+        this.selectedItems = [];
+        this.options.selectedItems = null;
         this.dropdownListFormControl.setValue(this.selectedItems);
         this.onChangeService.ChangeValue(this.options.name);
         this.onChange.emit();
@@ -1990,21 +2022,29 @@ class DropdownListComponent {
         this.dropdownListFormControl.setValue(this.selectedItems);
     }
     onDeselect(items) {
+        // If no items are selected after deselect, clear options.selectedItems
+        if (this.selectedItems.length == 0) {
+            this.options.selectedItems = null;
+        }
         this.dropdownListFormControl.setValue(this.selectedItems);
-        if ((this.selectedItems.length == 0) && this.options.isRequired == true) {
+        if (this.selectedItems.length == 0 && this.options.isRequired == true) {
             this.dropdownListFormControl.markAsTouched();
             this.dropdownListFormControl.invalid;
         }
     }
     onDeselectAll(items) {
+        // Clear the selected items when all are deselected
+        this.selectedItems = [];
+        this.options.selectedItems = null;
         this.dropdownListFormControl.setValue(this.selectedItems);
-        if ((this.selectedItems.length == 0) && this.options.isRequired == true) {
+        if (this.selectedItems.length == 0 && this.options.isRequired == true) {
             this.dropdownListFormControl.markAsTouched();
             this.dropdownListFormControl.invalid;
         }
     }
     onDropDownClose() {
-        if ((this.selectedItems == undefined || this.selectedItems.length == 0) && this.options.isRequired == true) {
+        if ((this.selectedItems == undefined || this.selectedItems.length == 0) &&
+            this.options.isRequired == true) {
             this.dropdownListFormControl.markAsTouched();
             this.dropdownListFormControl.invalid;
         }
@@ -2302,6 +2342,11 @@ class FileUploadComponent {
                 this.validationMessage +
                     `<br /> ${this.UtilityService.getResourceValue('MinFileCountValidationKey') + this.options.minNoOfFiles}`;
         }
+        if (this.options.maxNoOfFiles > 0) {
+            this.validationMessage =
+                this.validationMessage +
+                    `<br /> ${this.UtilityService.getResourceValue('MaxFileCountValidationKey') + this.options.maxNoOfFiles}`;
+        }
         if (this.options.fileUploadAcceptsTypes != null &&
             this.options.fileUploadAcceptsTypes.length > 0) {
         }
@@ -2381,6 +2426,18 @@ class FileUploadComponent {
             this.uploader.queue = [];
             return;
         }
+        if (this.options.isMultipleFile &&
+            this.options.maxNoOfFiles != null &&
+            this.options.maxNoOfFiles > 0 &&
+            this.options.maxNoOfFiles < this.uploader.queue.length) {
+            const formControl = this.fileUploadFormControl;
+            formControl.setErrors({
+                MaxFileCountValidationKey: this.options.maxNoOfFiles
+            });
+            formControl.markAsTouched();
+            this.uploader.queue = [];
+            return;
+        }
         if (this.options.isMultipleFile &&
             this.options.maxSizeForAllFilesInMB != null &&
             this.options.maxSizeForAllFilesInMB > 0) {
@@ -4766,21 +4823,23 @@ class MultiLingualTextBoxComponent {
     }
     onTextChange() {
         // this.trimControlValue(type)
-        let arabicValue = "";
-        let englishValue = "";
-        if (this.englishFormControl.value == "") {
+        let arabicValue = '';
+        let englishValue = '';
+        if (this.englishFormControl.value == '') {
             this.englishWordCountArray = 0;
             this.englishWordCount = 0;
         }
         else {
             if (this.englishFormControl.value != null && this.englishFormControl.value != undefined) {
-                this.englishWordCountArray = this.englishFormControl.value.split(" ").length;
+                this.englishWordCountArray = this.englishFormControl.value.split(' ').length;
                 if (this.englishWordCountArray > 0) {
                     if (this.englishWordCountArray > this.options.maxWordCount) {
                         this.englishWordCount = this.options.maxWordCount;
-                        this.multiLanguageGroup.controls["English"].setErrors({ MaxWordCountValidationKey: this.options.maxWordCount });
-                        this.multiLanguageGroup.controls["English"].markAsTouched();
-                        this.multiLanguageGroup.controls["English"].invalid;
+                        this.multiLanguageGroup.controls['English'].setErrors({
+                            MaxWordCountValidationKey: this.options.maxWordCount
+                        });
+                        this.multiLanguageGroup.controls['English'].markAsTouched();
+                        this.multiLanguageGroup.controls['English'].invalid;
                     }
                     else {
                         this.englishWordCount = this.englishWordCountArray;
@@ -4796,9 +4855,9 @@ class MultiLingualTextBoxComponent {
                     this.showEnglishCharsLimitMsg = true;
                     this.hasEnglishCharsLimitValidationError = true;
                     if (this.englishCurrentCharsCount == this.options.maxLength)
-                        this.englishCharsLimitMsgClass = "danger";
+                        this.englishCharsLimitMsgClass = 'danger';
                     else
-                        this.englishCharsLimitMsgClass = "warning";
+                        this.englishCharsLimitMsgClass = 'warning';
                 }
                 else {
                     this.showEnglishCharsLimitMsg = false;
@@ -4806,24 +4865,28 @@ class MultiLingualTextBoxComponent {
                 }
                 let max = this.options.maxLength;
                 let current = this.englishCurrentCharsCount;
-                let msg = this.utilityService.getResourceValue("MaxLengthLimitWarning");
+                let msg = this.utilityService.getResourceValue('MaxLengthLimitWarning');
                 // Replace placeholders with actual values
-                this.englishMaxLimitWarningMsg = msg.replace("${max}", max.toString()).replace("${current}", current.toString());
+                this.englishMaxLimitWarningMsg = msg
+                    .replace('${max}', max.toString())
+                    .replace('${current}', current.toString());
             }
         }
-        if (this.arabicFormControl.value == "") {
+        if (this.arabicFormControl.value == '') {
             this.arabicWordCountArray = 0;
             this.arabicWordCount = 0;
         }
         else {
             if (this.arabicFormControl.value != null && this.arabicFormControl.value != undefined) {
-                this.arabicWordCountArray = this.arabicFormControl.value.split(" ").length;
+                this.arabicWordCountArray = this.arabicFormControl.value.split(' ').length;
                 if (this.arabicWordCountArray > 0) {
                     if (this.arabicWordCountArray > this.options.maxWordCount) {
                         this.arabicWordCount = this.options.maxWordCount;
-                        this.multiLanguageGroup.controls["Arabic"].setErrors({ MaxWordCountValidationKey: this.options.maxWordCount });
-                        this.multiLanguageGroup.controls["Arabic"].markAsTouched();
-                        this.multiLanguageGroup.controls["Arabic"].invalid;
+                        this.multiLanguageGroup.controls['Arabic'].setErrors({
+                            MaxWordCountValidationKey: this.options.maxWordCount
+                        });
+                        this.multiLanguageGroup.controls['Arabic'].markAsTouched();
+                        this.multiLanguageGroup.controls['Arabic'].invalid;
                     }
                     else {
                         this.arabicWordCount = this.arabicWordCountArray;
@@ -4839,9 +4902,9 @@ class MultiLingualTextBoxComponent {
                     this.showArabicCharsLimitMsg = true;
                     this.hasArabicCharsLimitValidationError = true;
                     if (this.arabicCurrentCharsCount == this.options.maxLength)
-                        this.arabicCharsLimitMsgClass = "danger";
+                        this.arabicCharsLimitMsgClass = 'danger';
                     else
-                        this.arabicCharsLimitMsgClass = "warning";
+                        this.arabicCharsLimitMsgClass = 'warning';
                 }
                 else {
                     this.showArabicCharsLimitMsg = false;
@@ -4849,9 +4912,11 @@ class MultiLingualTextBoxComponent {
                 }
                 let max = this.options.maxLength;
                 let current = this.arabicCurrentCharsCount;
-                let msg = this.utilityService.getResourceValue("MaxLengthLimitWarning");
+                let msg = this.utilityService.getResourceValue('MaxLengthLimitWarning');
                 // Replace placeholders with actual values
-                this.arabicMaxLimitWarningMsg = msg.replace("${max}", max.toString()).replace("${current}", current.toString());
+                this.arabicMaxLimitWarningMsg = msg
+                    .replace('${max}', max.toString())
+                    .replace('${current}', current.toString());
             }
         }
         let multiLangModel = new EnglishArabicDTO();
@@ -7299,6 +7364,10 @@ class ControlOptionsBase {
         /** Sets an attribute readonly  */
         this.isReadonly = false;
     }
+    get displayValue() {
+        // Default implementation - override in components
+        return null;
+    }
 }
 
 class DatePickerOptions extends ControlOptionsBase {
@@ -7319,6 +7388,21 @@ class DatePickerOptions extends ControlOptionsBase {
         this.startControlToCompareWith = null;
         this.validationClasses = null;
     }
+    get displayValue() {
+        if (!this.value) {
+            return "";
+        }
+        // Format displayValue to DD-MM-YYYY
+        if (this.selectMode == SelectMode.Range && Array.isArray(this.value)) {
+            // For date range, format both dates
+            const formattedDates = this.value.map(date => moment(date).format('DD-MM-YYYY'));
+            return formattedDates.join(' - ');
+        }
+        else {
+            // For single date
+            return moment(this.value).format('DD-MM-YYYY');
+        }
+    }
 }
 
 class DropdownOptions extends ControlOptionsBase {
@@ -7333,6 +7417,28 @@ class DropdownOptions extends ControlOptionsBase {
         this.forceDirection = ForceDirection.English;
         this.notFoundText = "";
     }
+    get displayValue() {
+        let result = "";
+        if (this.selectedItems) {
+            // Handle case where selectedItems could be a single string or an array of strings
+            const itemsArray = Array.isArray(this.selectedItems)
+                ? this.selectedItems
+                : [this.selectedItems];
+            // Only process if the array is not empty
+            if (itemsArray.length > 0) {
+                itemsArray.forEach((item, index) => {
+                    const foundItem = this.dataSource?.find((i) => i.key == item);
+                    if (foundItem) {
+                        result += foundItem.value;
+                        if (index < itemsArray.length - 1) {
+                            result += ',';
+                        }
+                    }
+                });
+            }
+        }
+        return result;
+    }
 }
 
 class FileUploadOptions extends ControlOptionsBase {
@@ -7399,6 +7505,9 @@ class PhoneOptions extends ControlOptionsBase {
         this.onlyCountries = [];
         this.forceDirection = ForceDirection.English;
     }
+    get displayValue() {
+        return this.value;
+    }
 }
 
 class RangeNumber {
@@ -7417,6 +7526,9 @@ class TextAreaOptions extends ControlOptionsBase {
         //Enable auto save speech language into local storage
         this.autoSaveSpeechLanguagetoLocalStorage = true;
     }
+    get displayValue() {
+        return this.value;
+    }
 }
 
 class TextBoxOptions extends ControlOptionsBase {
@@ -7436,6 +7548,9 @@ class TextBoxOptions extends ControlOptionsBase {
         this.noMargin = false;
         this.validationRules = [];
     }
+    get displayValue() {
+        return this.value;
+    }
 }
 
 class ToggleSlideOptions extends ControlOptionsBase {
@@ -9570,6 +9685,11 @@ class MultilingualControlOptionsBase {
         /** Sets an attribute readonly  */
         this.isReadonly = false;
     }
+    /** Sets an display value  */
+    get displayValue() {
+        // Default implementation - override in components
+        return null;
+    }
 }
 
 class MultiLingualTextBoxOptions extends MultilingualControlOptionsBase {
@@ -9582,6 +9702,9 @@ class MultiLingualTextBoxOptions extends MultilingualControlOptionsBase {
         /**Prevent AutoComplete of inputs default value is "on" available values "on" and "off"*/
         this.autoComplete = "on";
     }
+    get displayValue() {
+        return this.value;
+    }
 }
 
 class Attribute {
@@ -9705,6 +9828,21 @@ class AutocompleteOptions extends ControlOptionsBase {
         this.selectedValue = null;
         this.itemWithImage = false;
     }
+    get displayValue() {
+        let result = "";
+        if (this.value && Array.isArray(this.value)) {
+            const displayValues = this.value;
+            displayValues.forEach((element, index) => {
+                if (element && element.Value) {
+                    result += element.Value;
+                    if (index < displayValues.length - 1) {
+                        result += ',';
+                    }
+                }
+            });
+        }
+        return result;
+    }
 }
 
 class TagsInputDTO {
@@ -9746,6 +9884,21 @@ class TagsInputOptions extends ControlOptionsBase {
         this.tagInputMode = TagInputView.WithoutImage;
         this.showDescription = true;
     }
+    get displayValue() {
+        let result = "";
+        if (this.value && Array.isArray(this.value)) {
+            const displayValues = this.value;
+            displayValues.forEach((tag, index) => {
+                if (tag && tag.name) {
+                    result += tag.name;
+                    if (index < displayValues.length - 1) {
+                        result += ',';
+                    }
+                }
+            });
+        }
+        return result;
+    }
 }
 
 class FilterItem {
@@ -9805,6 +9958,9 @@ class PagingOptions {
 }
 
 class RadioButtonOptions extends ControlOptionsBase {
+    get displayValue() {
+        return this.value;
+    }
 }
 
 class RadioButtonItem {