@bnsights/bbsf-controls 1.0.184 → 1.0.186

package/fesm2022/bnsights-bbsf-controls.mjs

@@ -466,34 +466,19 @@ var InputType;
 })(InputType || (InputType = {}));
 
 class ErrorMassageValidation {
-    static { this.controlContainerstatic = null; }
-    // tslint:disable-next-line: deprecation
+    static { this.controlContainerStatic = null; }
     constructor(controlContainer, utilityService) {
         this.controlContainer = controlContainer;
         this.utilityService = utilityService;
         this.url = 'CheckEmailValidation';
-        ErrorMassageValidation.controlContainerstatic = this.controlContainer;
+        ErrorMassageValidation.controlContainerStatic = this.controlContainer;
     }
-    // tslint:disable-next-line: deprecation
     static showerror(FormControlName) {
-        let form = ErrorMassageValidation.controlContainerstatic
-            .control;
+        let form = ErrorMassageValidation.controlContainerStatic.control;
         let control = form.get(FormControlName);
-        //console.log(control)
         control.setErrors({ minlength: true });
         control.markAsTouched();
     }
-    //  isEmailRegisterd(Email: string)
-    //  {
-    //    let resource:object={
-    //      email:Email
-    //    };
-    //    let body = JSON.stringify(resource);
-    //    let headers = new Headers({ 'Content-Type': 'application/json' });
-    //    let options = new RequestOptions({ headers: headers });
-    //    return this.http.post(environment.baseUrl+this.url,body,options)
-    //    .pipe(map(response => response.json()))
-    //  }
     getErrorMassageValidation(error) {
         let result = '';
         switch (error.key) {
@@ -513,28 +498,16 @@ class ErrorMassageValidation {
                 result = this.utilityService.getResourceValue('NumberValidationKey');
                 break;
             case 'maxlength':
-                result =
-                    this.utilityService.getResourceValue('MaxLenghtValidationKey') +
-                        ' ' +
-                        error.value.requiredLength;
+                result = `${this.utilityService.getResourceValue('MaxLenghtValidationKey')} ${error.value.requiredLength}`;
                 break;
             case 'minlength':
-                result =
-                    this.utilityService.getResourceValue('MinLenghtValidationKey') +
-                        ' ' +
-                        error.value.requiredLength;
+                result = `${this.utilityService.getResourceValue('MinLenghtValidationKey')} ${error.value.requiredLength}`;
                 break;
             case 'min':
-                result =
-                    this.utilityService.getResourceValue('MinValueValidationKey') +
-                        ' ' +
-                        error.value.min;
+                result = `${this.utilityService.getResourceValue('MinValueValidationKey')} ${error.value.min}`;
                 break;
             case 'max':
-                result =
-                    this.utilityService.getResourceValue('MaxValueValidationKey') +
-                        ' ' +
-                        error.value.max;
+                result = `${this.utilityService.getResourceValue('MaxValueValidationKey')} ${error.value.max}`;
                 break;
             case 'IntegerNumberValidationKey':
                 result = this.utilityService.getResourceValue('IntegerNumberValidationKey');
@@ -546,12 +519,9 @@ class ErrorMassageValidation {
                 result = this.utilityService.getResourceValue('PhoneNumberValidationKey');
                 break;
             case 'mask':
-                result =
-                    this.utilityService.getResourceValue('MaskValidationKey') +
-                        ' ' +
-                        error.value.requiredMask;
+                result = `${this.utilityService.getResourceValue('MaskValidationKey')} ${error.value.requiredMask}`;
                 break;
-            case 'PasswordComplexityHasNumber':
+            case 'passwordComplexityHasNumber':
                 result = this.utilityService.getResourceValue('PasswordComplexityHasNumber');
                 break;
             case 'ArabicLetterOnly':
@@ -563,53 +533,35 @@ class ErrorMassageValidation {
             case 'ArabicIsRequiredAndOnly50CharactersEnglish':
                 result = this.utilityService.getResourceValue('VAL_ArabicIsRequiredAndOnly50CharactersEnglish');
                 break;
-            case 'PasswordComplexityHasCapitalLetter':
+            case 'passwordComplexityHasCapitalLetter':
                 result = this.utilityService.getResourceValue('PasswordComplexityHasCapitalLetter');
                 break;
-            case 'PasswordComplexityHasSmallLetter':
+            case 'passwordComplexityHasSmallLetter':
                 result = this.utilityService.getResourceValue('PasswordComplexityHasSmallLetter');
                 break;
-            case 'PasswordComplexityHasSpecialLetter':
+            case 'passwordComplexityHasSpecialLetter':
                 result = this.utilityService.getResourceValue('PasswordComplexityHasSpecialLetter');
                 break;
             case 'MaxWordCountValidationKey':
-                result =
-                    this.utilityService.getResourceValue('MaxWordCountValidationKey') +
-                        ' ' +
-                        error.value;
+                result = `${this.utilityService.getResourceValue('MaxWordCountValidationKey')} ${error.value}`;
                 break;
             case 'NewSelectionValidationKey':
                 result = this.utilityService.getResourceValue('NewSelectionValidationKey');
                 break;
             case 'MaxFileCountValidationKey':
-                result =
-                    this.utilityService.getResourceValue('MaxFileCountValidationKey') +
-                        ' ' +
-                        error.value;
+                result = `${this.utilityService.getResourceValue('MaxFileCountValidationKey')} ${error.value}`;
                 break;
             case 'MinFileCountValidationKey':
-                result =
-                    this.utilityService.getResourceValue('MinFileCountValidationKey') +
-                        ' ' +
-                        error.value;
+                result = `${this.utilityService.getResourceValue('MinFileCountValidationKey')} ${error.value}`;
                 break;
             case 'MaxSizeForAllFilesInMB':
-                result =
-                    this.utilityService.getResourceValue('MaxSizeForAllFilesInMB') +
-                        ' ' +
-                        error.value;
+                result = `${this.utilityService.getResourceValue('MaxSizeForAllFilesInMB')} ${error.value}`;
                 break;
             case 'FileMaxSizeInMB':
-                result =
-                    this.utilityService.getResourceValue('FileMaxSizeInMB') +
-                        ' ' +
-                        error.value;
+                result = `${this.utilityService.getResourceValue('FileMaxSizeInMB')} ${error.value}`;
                 break;
             case 'ToolTipTypeError':
-                result =
-                    this.utilityService.getResourceValue('ToolTipTypeError') +
-                        ' ' +
-                        error.value;
+                result = `${this.utilityService.getResourceValue('ToolTipTypeError')} ${error.value}`;
                 break;
             case 'InvalidEndDate':
                 result = this.utilityService.getResourceValue('InvalidEndDate');
@@ -640,26 +592,26 @@ class ControlUtility {
         this.controlValidationService = controlValidationService;
         this.utilityService = utilityService;
     }
-    getErrorValidation(Errorsitem, customValidation) {
-        let resulte = '';
-        Errorsitem.forEach(element => {
-            if (element.key === 'customerError' && Errorsitem.length === 1) {
-                resulte = customValidation[0].massage;
+    getErrorValidation(ErrorsItem, customValidation) {
+        let result = '';
+        ErrorsItem.forEach(element => {
+            if (element.key === 'customerError' && ErrorsItem.length === 1) {
+                result = customValidation[0].massage;
             }
             else if (element.key === 'EmailValidation') {
-                resulte = element.value;
+                result = element.value;
             }
             else if (element.key === 'FluentApi') {
-                resulte = element.value;
+                result = element.value;
             }
             else if (element.key === 'errorMassage') {
-                resulte = element.value;
+                result = element.value;
             }
             else {
-                resulte = this.ErrorHandler.getErrorMassageValidation(element);
+                result = this.ErrorHandler.getErrorMassageValidation(element);
             }
         });
-        return resulte;
+        return result;
     }
     patternValidator(regex, error) {
         return (control) => {
@@ -1915,6 +1867,16 @@ class DropdownListComponent {
             this.textDir = localStorage.getItem('language') == 'ar' ? 'rtl' : 'ltr';
         this.controlValidationService.isCreatedBefor = false;
         this.SelectedList = this.options.selectedItems;
+        // Initialize selectedItems array for proper binding with ng-select
+        if (this.options.selectedItems && this.options.dataSource) {
+            if (!this.options.singleSelection) {
+                // For multi-select, ensure selectedItems contains the full objects
+                const selectedKeys = Array.isArray(this.options.selectedItems)
+                    ? this.options.selectedItems
+                    : [this.options.selectedItems];
+                this.selectedItems = this.options.dataSource.filter(item => selectedKeys.includes(item[this.options.itemTempletkey]));
+            }
+        }
         this.dropdownSettings = {
             singleSelection: this.options.singleSelection,
             text: 'Select',
@@ -2020,29 +1982,59 @@ class DropdownListComponent {
             }, 0);
         }
     }
-    onSelectAll(items) {
-        this.selectedItems = items;
-        this.dropdownListFormControl.setValue(this.selectedItems);
+    // Select All functionality for header template
+    selectAllItems() {
+        if (this.options.singleSelection || this.options.isDisabled) {
+            return;
+        }
+        // Get all selectable items (non-disabled)
+        const selectableItems = this.options.dataSource.filter(item => !item.disabled);
+        // Apply limit selection if specified
+        const itemsToSelect = this.options.limitSelection
+            ? selectableItems.slice(0, this.options.limitSelection)
+            : selectableItems;
+        // Update selected items with the keys
+        this.options.selectedItems = itemsToSelect.map(item => item[this.options.itemTempletkey]);
+        // Update form control
+        this.dropdownListFormControl.setValue(this.options.selectedItems);
+        // Trigger change events
+        this.onChangeService.ChangeValue(this.options.name);
+        this.onChange.emit(this.options.selectedItems);
     }
     onDeselect(items) {
-        // If no items are selected after deselect, clear options.selectedItems
+        // Update options.selectedItems to keep it in sync
         if (this.selectedItems.length == 0) {
             this.options.selectedItems = null;
         }
+        else {
+            this.options.selectedItems = this.selectedItems.map(item => item[this.options.itemTempletkey]);
+        }
         this.dropdownListFormControl.setValue(this.selectedItems);
+        // Trigger change events
+        this.onChangeService.ChangeValue(this.options.name);
+        this.onChange.emit(this.options.selectedItems);
+        // Handle validation for required fields
         if (this.selectedItems.length == 0 && this.options.isRequired == true) {
             this.dropdownListFormControl.markAsTouched();
-            this.dropdownListFormControl.invalid;
+            this.dropdownListFormControl.updateValueAndValidity();
         }
     }
-    onDeselectAll(items) {
-        // Clear the selected items when all are deselected
-        this.selectedItems = [];
+    // Deselect All functionality for header template
+    deselectAllItems() {
+        if (this.options.singleSelection || this.options.isDisabled) {
+            return;
+        }
+        // Clear selected items
         this.options.selectedItems = null;
-        this.dropdownListFormControl.setValue(this.selectedItems);
-        if (this.selectedItems.length == 0 && this.options.isRequired == true) {
+        // Update form control
+        this.dropdownListFormControl.setValue(null);
+        // Trigger change events
+        this.onChangeService.ChangeValue(this.options.name);
+        this.onChange.emit(this.options.selectedItems);
+        // Handle validation for required fields
+        if (this.options.isRequired) {
             this.dropdownListFormControl.markAsTouched();
-            this.dropdownListFormControl.invalid;
+            this.dropdownListFormControl.updateValueAndValidity();
         }
     }
     onDropDownClose() {
@@ -2052,12 +2044,32 @@ class DropdownListComponent {
             this.dropdownListFormControl.invalid;
         }
     }
+    // Helper methods for select all functionality
+    isAllSelected() {
+        if (!this.options.dataSource || this.options.dataSource.length === 0) {
+            return false;
+        }
+        const selectableItems = this.options.dataSource.filter(item => !item.disabled);
+        const selectedItems = this.options.selectedItems;
+        if (!selectedItems || selectedItems.length === 0) {
+            return false;
+        }
+        // Check if we've reached the limit selection
+        if (this.options.limitSelection && selectedItems.length >= this.options.limitSelection) {
+            return true;
+        }
+        // Check if all selectable items are selected
+        return selectableItems.length === selectedItems.length;
+    }
+    hasSelectedItems() {
+        return this.options.selectedItems && this.options.selectedItems.length > 0;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownListComponent, deps: [{ token: OnPagingFiltersChangeService }, { token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DropdownListComponent, selector: "BBSF-DropdownList", inputs: { group: "group", options: "options", DropdownTemplateVariable: "DropdownTemplateVariable" }, outputs: { onChange: "onChange", onClear: "onClear" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-dropdown\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{options.labelExtraClasses}}\">\r\n      {{options.labelValue}}\r\n      <!--Asterisk-->\r\n      <span *ngIf=\"((options.showAsterisk&&options.isRequired)||(options.isRequired))&&!options.isReadonly\"\r\n        class=\"text-danger\" aria-required=\"true\">*</span>\r\n    </label>\r\n\r\n\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input enabled bootstrap select-->\r\n      <ng-select class=\"form-control\" *ngIf=\"options.disableBootstrapSelect==false&&!options.isReadonly\"\r\n        [attr.dir]=\"options.forceDirection==2?'rtl':'auto'\" [bindValue]=\"options.itemTempletkey\" groupBy=\"group\"\r\n        [bindLabel]=\"options.itemTempletvalue\" [items]=\"options.dataSource\" [notFoundText]=\"options.notFoundText\"\r\n        [maxSelectedItems]=\"options.limitSelection\" [searchable]=\"options.allowSearchFilter\"\r\n        [multiple]=\"!options.singleSelection\" [readonly]=\"options.isDisabled\" [clearable]=\"true\"\r\n        placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\" [selectableGroup]=\"true\"\r\n        [selectableGroupAsModel]=\"false\" formControlName=\"{{options.name}}\" [(ngModel)]=\"options.selectedItems\"\r\n        (change)=\"onItemSelect()\" (clear)=\"Clear()\"\r\n        [class.is-invalid]=\"dropdownListFormControl.invalid && dropdownListFormControl.touched\"\r\n        [closeOnSelect]=\"options.singleSelection  ? true : false\">\r\n        <!--No checkbox, Customize item template-->\r\n        <ng-template *ngIf=\"!options.showCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <label class=\"bbsf-label\" title=\"{{item.disabled ? options.disabledItemsTooltipValue : ''}}\"\r\n            id={{item.key}}>{{item.value}}</label>\r\n        </ng-template>\r\n        <!--checkbox, Customize item template-->\r\n        <ng-template *ngIf=\"options.showCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <div class=\" bbsf-checkbox\">\r\n            <div class=\"bbsf-input-container align-items-center\">\r\n              <input class=\"bbsf-checkbox-input\" id=\"item-{{index}}\" type=\"checkbox\"\r\n                [ngModelOptions]=\"{standalone: true}\" [ngModel]=\"item$.selected\" />\r\n              <div class=\"label-subtext-container\">\r\n                <label class=\"bbsf-label\" id={{item.key}}>{{item.value}}</label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n        <!--Has group, Customize group template-->\r\n        <ng-template *ngIf=\"options.hasGroup\" ng-optgroup-tmp let-item=\"item\" let-item$=\"item$\">\r\n          <label class=\"bbsf-label bbsf-group-label\">{{item.group}}</label>\r\n        </ng-template>\r\n\r\n      </ng-select>\r\n\r\n      <!--input disabled bootstrap select-->\r\n      <select *ngIf=\"options.disableBootstrapSelect&&!options.isReadonly\" class=\"form-control\"\r\n        [attr.dir]=\"options.forceDirection==2?'rtl':'auto'\" (change)=\"onItemSelect()\"\r\n        [(ngModel)]=\"options.selectedItems\" [disabled]=\"options.isDisabled\" formControlName=\"{{options.name}}\">\r\n        <option value=\"\" disabled>--{{utilityService.getResourceValue(\"select\")}}--</option>\r\n        <option *ngFor=\"let item of options.dataSource\" value=\"{{item.key}}\" [ngValue]=\"item.key\">\r\n          {{item.value}}\r\n        </option>\r\n      </select>\r\n      <!-- readonly -->\r\n      <div *ngIf=\"options.isReadonly\">\r\n        <span class=\"readonly-view\">{{getSelectedItemValue()}}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n      <!-- LabelDescription-->\r\n      <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n      <!-- requiredText-->\r\n      <div class=\"bbsf-validation\" *ngIf=\"(dropdownListFormControl.invalid && dropdownListFormControl.touched)\">\r\n        {{getErrorValidation(dropdownListFormControl.errors|keyvalue)}}\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n      {{resetError()}}\r\n    </div>\r\n  </div>\r\n</div>", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i7$1.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i7$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i7.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DropdownListComponent, selector: "BBSF-DropdownList", inputs: { group: "group", options: "options", DropdownTemplateVariable: "DropdownTemplateVariable" }, outputs: { onChange: "onChange", onClear: "onClear" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-dropdown\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{options.labelExtraClasses}}\">\r\n      {{options.labelValue}}\r\n      <!--Asterisk-->\r\n      <span *ngIf=\"((options.showAsterisk&&options.isRequired)||(options.isRequired))&&!options.isReadonly\"\r\n        class=\"text-danger\" aria-required=\"true\">*</span>\r\n    </label>\r\n\r\n\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input enabled bootstrap select-->\r\n      <ng-select class=\"form-control\" *ngIf=\"options.disableBootstrapSelect==false&&!options.isReadonly\"\r\n        [attr.dir]=\"options.forceDirection==2?'rtl':'auto'\" [bindValue]=\"options.itemTempletkey\" groupBy=\"group\"\r\n        [bindLabel]=\"options.itemTempletvalue\" [items]=\"options.dataSource\" [notFoundText]=\"options.notFoundText\"\r\n        [maxSelectedItems]=\"options.limitSelection\" [searchable]=\"options.allowSearchFilter\"\r\n        [multiple]=\"!options.singleSelection\" [readonly]=\"options.isDisabled\" [clearable]=\"true\"\r\n        placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\" [selectableGroup]=\"true\"\r\n        [selectableGroupAsModel]=\"false\" formControlName=\"{{options.name}}\" [(ngModel)]=\"options.selectedItems\"\r\n        (change)=\"onItemSelect()\" (clear)=\"Clear()\"\r\n        [class.is-invalid]=\"dropdownListFormControl.invalid && dropdownListFormControl.touched\"\r\n        [closeOnSelect]=\"options.singleSelection  ? true : false\">\r\n\r\n        <!--Header template for Select All / Deselect All when enableCheckAll is true and not single selection-->\r\n        <ng-template ng-header-tmp *ngIf=\"options.enableCheckAll && !options.singleSelection\">\r\n          <div class=\"bbsf-select-all-header\">\r\n            <button type=\"button\" class=\"btn btn-link btn-sm bbsf-select-all-btn\" (click)=\"selectAllItems()\"\r\n              [disabled]=\"options.isDisabled || isAllSelected()\">\r\n              {{utilityService.getResourceValue('selectAll') || 'Select All'}}\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-link btn-sm bbsf-deselect-all-btn\" (click)=\"deselectAllItems()\"\r\n              [disabled]=\"options.isDisabled || !hasSelectedItems()\">\r\n              {{utilityService.getResourceValue('deselectAll') || 'Deselect All'}}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n        <!--No checkbox, Customize item template-->\r\n        <ng-template *ngIf=\"!options.showCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <label class=\"bbsf-label\" title=\"{{item.disabled ? options.disabledItemsTooltipValue : ''}}\"\r\n            id={{item.key}}>{{item.value}}</label>\r\n        </ng-template>\r\n        <!--checkbox, Customize item template-->\r\n        <ng-template *ngIf=\"options.showCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <div class=\" bbsf-checkbox\">\r\n            <div class=\"bbsf-input-container align-items-center\">\r\n              <input class=\"bbsf-checkbox-input\" id=\"item-{{index}}\" type=\"checkbox\"\r\n                [ngModelOptions]=\"{standalone: true}\" [ngModel]=\"item$.selected\" />\r\n              <div class=\"label-subtext-container\">\r\n                <label class=\"bbsf-label\" id={{item.key}}>{{item.value}}</label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n        <!--Has group, Customize group template-->\r\n        <ng-template *ngIf=\"options.hasGroup\" ng-optgroup-tmp let-item=\"item\" let-item$=\"item$\">\r\n          <label class=\"bbsf-label bbsf-group-label\">{{item.group}}</label>\r\n        </ng-template>\r\n\r\n      </ng-select>\r\n\r\n      <!--input disabled bootstrap select-->\r\n      <select *ngIf=\"options.disableBootstrapSelect&&!options.isReadonly\" class=\"form-control\"\r\n        [attr.dir]=\"options.forceDirection==2?'rtl':'auto'\" (change)=\"onItemSelect()\"\r\n        [(ngModel)]=\"options.selectedItems\" [disabled]=\"options.isDisabled\" formControlName=\"{{options.name}}\">\r\n        <option value=\"\" disabled>--{{utilityService.getResourceValue(\"select\")}}--</option>\r\n        <option *ngFor=\"let item of options.dataSource\" value=\"{{item.key}}\" [ngValue]=\"item.key\">\r\n          {{item.value}}\r\n        </option>\r\n      </select>\r\n      <!-- readonly -->\r\n      <div *ngIf=\"options.isReadonly\">\r\n        <span class=\"readonly-view\">{{getSelectedItemValue()}}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n      <!-- LabelDescription-->\r\n      <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n      <!-- requiredText-->\r\n      <div class=\"bbsf-validation\" *ngIf=\"(dropdownListFormControl.invalid && dropdownListFormControl.touched)\">\r\n        {{getErrorValidation(dropdownListFormControl.errors|keyvalue)}}\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n      {{resetError()}}\r\n    </div>\r\n  </div>\r\n</div>", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i7$1.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i7$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i7$1.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: i7.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'BBSF-DropdownList', template: "<div class=\"form-group bbsf-control bbsf-dropdown\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{options.labelExtraClasses}}\">\r\n      {{options.labelValue}}\r\n      <!--Asterisk-->\r\n      <span *ngIf=\"((options.showAsterisk&&options.isRequired)||(options.isRequired))&&!options.isReadonly\"\r\n        class=\"text-danger\" aria-required=\"true\">*</span>\r\n    </label>\r\n\r\n\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input enabled bootstrap select-->\r\n      <ng-select class=\"form-control\" *ngIf=\"options.disableBootstrapSelect==false&&!options.isReadonly\"\r\n        [attr.dir]=\"options.forceDirection==2?'rtl':'auto'\" [bindValue]=\"options.itemTempletkey\" groupBy=\"group\"\r\n        [bindLabel]=\"options.itemTempletvalue\" [items]=\"options.dataSource\" [notFoundText]=\"options.notFoundText\"\r\n        [maxSelectedItems]=\"options.limitSelection\" [searchable]=\"options.allowSearchFilter\"\r\n        [multiple]=\"!options.singleSelection\" [readonly]=\"options.isDisabled\" [clearable]=\"true\"\r\n        placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\" [selectableGroup]=\"true\"\r\n        [selectableGroupAsModel]=\"false\" formControlName=\"{{options.name}}\" [(ngModel)]=\"options.selectedItems\"\r\n        (change)=\"onItemSelect()\" (clear)=\"Clear()\"\r\n        [class.is-invalid]=\"dropdownListFormControl.invalid && dropdownListFormControl.touched\"\r\n        [closeOnSelect]=\"options.singleSelection  ? true : false\">\r\n        <!--No checkbox, Customize item template-->\r\n        <ng-template *ngIf=\"!options.showCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <label class=\"bbsf-label\" title=\"{{item.disabled ? options.disabledItemsTooltipValue : ''}}\"\r\n            id={{item.key}}>{{item.value}}</label>\r\n        </ng-template>\r\n        <!--checkbox, Customize item template-->\r\n        <ng-template *ngIf=\"options.showCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <div class=\" bbsf-checkbox\">\r\n            <div class=\"bbsf-input-container align-items-center\">\r\n              <input class=\"bbsf-checkbox-input\" id=\"item-{{index}}\" type=\"checkbox\"\r\n                [ngModelOptions]=\"{standalone: true}\" [ngModel]=\"item$.selected\" />\r\n              <div class=\"label-subtext-container\">\r\n                <label class=\"bbsf-label\" id={{item.key}}>{{item.value}}</label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n        <!--Has group, Customize group template-->\r\n        <ng-template *ngIf=\"options.hasGroup\" ng-optgroup-tmp let-item=\"item\" let-item$=\"item$\">\r\n          <label class=\"bbsf-label bbsf-group-label\">{{item.group}}</label>\r\n        </ng-template>\r\n\r\n      </ng-select>\r\n\r\n      <!--input disabled bootstrap select-->\r\n      <select *ngIf=\"options.disableBootstrapSelect&&!options.isReadonly\" class=\"form-control\"\r\n        [attr.dir]=\"options.forceDirection==2?'rtl':'auto'\" (change)=\"onItemSelect()\"\r\n        [(ngModel)]=\"options.selectedItems\" [disabled]=\"options.isDisabled\" formControlName=\"{{options.name}}\">\r\n        <option value=\"\" disabled>--{{utilityService.getResourceValue(\"select\")}}--</option>\r\n        <option *ngFor=\"let item of options.dataSource\" value=\"{{item.key}}\" [ngValue]=\"item.key\">\r\n          {{item.value}}\r\n        </option>\r\n      </select>\r\n      <!-- readonly -->\r\n      <div *ngIf=\"options.isReadonly\">\r\n        <span class=\"readonly-view\">{{getSelectedItemValue()}}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n      <!-- LabelDescription-->\r\n      <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n      <!-- requiredText-->\r\n      <div class=\"bbsf-validation\" *ngIf=\"(dropdownListFormControl.invalid && dropdownListFormControl.touched)\">\r\n        {{getErrorValidation(dropdownListFormControl.errors|keyvalue)}}\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n      {{resetError()}}\r\n    </div>\r\n  </div>\r\n</div>" }]
+            args: [{ selector: 'BBSF-DropdownList', template: "<div class=\"form-group bbsf-control bbsf-dropdown\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{options.labelExtraClasses}}\">\r\n      {{options.labelValue}}\r\n      <!--Asterisk-->\r\n      <span *ngIf=\"((options.showAsterisk&&options.isRequired)||(options.isRequired))&&!options.isReadonly\"\r\n        class=\"text-danger\" aria-required=\"true\">*</span>\r\n    </label>\r\n\r\n\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input enabled bootstrap select-->\r\n      <ng-select class=\"form-control\" *ngIf=\"options.disableBootstrapSelect==false&&!options.isReadonly\"\r\n        [attr.dir]=\"options.forceDirection==2?'rtl':'auto'\" [bindValue]=\"options.itemTempletkey\" groupBy=\"group\"\r\n        [bindLabel]=\"options.itemTempletvalue\" [items]=\"options.dataSource\" [notFoundText]=\"options.notFoundText\"\r\n        [maxSelectedItems]=\"options.limitSelection\" [searchable]=\"options.allowSearchFilter\"\r\n        [multiple]=\"!options.singleSelection\" [readonly]=\"options.isDisabled\" [clearable]=\"true\"\r\n        placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\" [selectableGroup]=\"true\"\r\n        [selectableGroupAsModel]=\"false\" formControlName=\"{{options.name}}\" [(ngModel)]=\"options.selectedItems\"\r\n        (change)=\"onItemSelect()\" (clear)=\"Clear()\"\r\n        [class.is-invalid]=\"dropdownListFormControl.invalid && dropdownListFormControl.touched\"\r\n        [closeOnSelect]=\"options.singleSelection  ? true : false\">\r\n\r\n        <!--Header template for Select All / Deselect All when enableCheckAll is true and not single selection-->\r\n        <ng-template ng-header-tmp *ngIf=\"options.enableCheckAll && !options.singleSelection\">\r\n          <div class=\"bbsf-select-all-header\">\r\n            <button type=\"button\" class=\"btn btn-link btn-sm bbsf-select-all-btn\" (click)=\"selectAllItems()\"\r\n              [disabled]=\"options.isDisabled || isAllSelected()\">\r\n              {{utilityService.getResourceValue('selectAll') || 'Select All'}}\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-link btn-sm bbsf-deselect-all-btn\" (click)=\"deselectAllItems()\"\r\n              [disabled]=\"options.isDisabled || !hasSelectedItems()\">\r\n              {{utilityService.getResourceValue('deselectAll') || 'Deselect All'}}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n        <!--No checkbox, Customize item template-->\r\n        <ng-template *ngIf=\"!options.showCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <label class=\"bbsf-label\" title=\"{{item.disabled ? options.disabledItemsTooltipValue : ''}}\"\r\n            id={{item.key}}>{{item.value}}</label>\r\n        </ng-template>\r\n        <!--checkbox, Customize item template-->\r\n        <ng-template *ngIf=\"options.showCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <div class=\" bbsf-checkbox\">\r\n            <div class=\"bbsf-input-container align-items-center\">\r\n              <input class=\"bbsf-checkbox-input\" id=\"item-{{index}}\" type=\"checkbox\"\r\n                [ngModelOptions]=\"{standalone: true}\" [ngModel]=\"item$.selected\" />\r\n              <div class=\"label-subtext-container\">\r\n                <label class=\"bbsf-label\" id={{item.key}}>{{item.value}}</label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n        <!--Has group, Customize group template-->\r\n        <ng-template *ngIf=\"options.hasGroup\" ng-optgroup-tmp let-item=\"item\" let-item$=\"item$\">\r\n          <label class=\"bbsf-label bbsf-group-label\">{{item.group}}</label>\r\n        </ng-template>\r\n\r\n      </ng-select>\r\n\r\n      <!--input disabled bootstrap select-->\r\n      <select *ngIf=\"options.disableBootstrapSelect&&!options.isReadonly\" class=\"form-control\"\r\n        [attr.dir]=\"options.forceDirection==2?'rtl':'auto'\" (change)=\"onItemSelect()\"\r\n        [(ngModel)]=\"options.selectedItems\" [disabled]=\"options.isDisabled\" formControlName=\"{{options.name}}\">\r\n        <option value=\"\" disabled>--{{utilityService.getResourceValue(\"select\")}}--</option>\r\n        <option *ngFor=\"let item of options.dataSource\" value=\"{{item.key}}\" [ngValue]=\"item.key\">\r\n          {{item.value}}\r\n        </option>\r\n      </select>\r\n      <!-- readonly -->\r\n      <div *ngIf=\"options.isReadonly\">\r\n        <span class=\"readonly-view\">{{getSelectedItemValue()}}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n      <!-- LabelDescription-->\r\n      <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n      <!-- requiredText-->\r\n      <div class=\"bbsf-validation\" *ngIf=\"(dropdownListFormControl.invalid && dropdownListFormControl.touched)\">\r\n        {{getErrorValidation(dropdownListFormControl.errors|keyvalue)}}\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n      {{resetError()}}\r\n    </div>\r\n  </div>\r\n</div>" }]
         }], ctorParameters: () => [{ type: OnPagingFiltersChangeService }, { type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
                     type: Optional
                 }] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }], propDecorators: { group: [{
@@ -6117,8 +6129,7 @@ var LanguageValidation;
 })(LanguageValidation || (LanguageValidation = {}));
 
 class TextboxComponent {
-    static { this.controlContainerstatic = null; }
-    // tslint:disable-next-line: max-line-length
+    static { this.controlContainerStatic = null; }
     constructor(controlUtility, controlContainer, textControlHost, utilityService, controlValidationService, globalSettings) {
         this.controlUtility = controlUtility;
         this.controlContainer = controlContainer;
@@ -6135,7 +6146,7 @@ class TextboxComponent {
         this.isShowWordCount = false;
         this.markAllAsTouched = false;
         this.validationRules = [];
-        this.validationRulesasync = [];
+        this.validationRulesAsync = [];
         //For Show warning message of max length limit
         this.currentCharsCount = 0;
         this.showCharsLimitMsg = false;
@@ -6165,7 +6176,7 @@ class TextboxComponent {
         this.isValid = () => {
             this.controlUtility.isValid(this.textBoxFormControl);
         };
-        TextboxComponent.controlContainerstatic = this.controlContainer;
+        TextboxComponent.controlContainerStatic = this.controlContainer;
     }
     ngOnInit() {
         if (this.options.isReadonly && !this.options.value) {
@@ -6278,7 +6289,7 @@ class TextboxComponent {
                 this.options.maxLength - this.options.maxLengthWarningLimit;
         }
         this.textBoxFormControl.setValidators(this.validationRules);
-        this.textBoxFormControl.setAsyncValidators(this.validationRulesasync);
+        this.textBoxFormControl.setAsyncValidators(this.validationRulesAsync);
         if (this.options.isDisabled) {
             this.textBoxFormControl.disable();
         }
@@ -6398,11 +6409,11 @@ class TextboxComponent {
         this.onBlur.emit(this.textBoxFormControl.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextboxComponent, deps: [{ token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextboxComponent, selector: "BBSF-TextBox", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange", onBlur: "onBlur" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-textbox\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{options.labelExtraClasses}}\">\r\n      {{options.labelValue}}\r\n      <!--Asterisk-->\r\n      <span *ngIf=\"((options.showAsterisk&&options.isRequired)||(options.isRequired))&&!options.isReadonly\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--MaskPattern-->\r\n    <div *ngIf=\"maskPattern!=null&&maskPattern!=''&&!options.isReadonly\" class=\"bbsf-input-container\"\r\n      [ngClass]=\"options.enableCopyToClipboard? 'p-40px' : '' \">\r\n      <!--Icon-->\r\n      <div *ngIf=\"options.icon!=null\" class=\"svg svg-icon-grey bbsf-icon\" [ngClass]=\"(options.iconPosition==1)?'bbsf-left-icon':'bbsf-right-icon'\">\r\n        <span [inlineSVG]=\"options.icon\"></span>\r\n      </div>\r\n      <!--input-->\r\n      <input class=\"form-control {{options.extraClasses}}\" [mask]=\"maskPattern\" placeHolderCharacter=\" \" [showMaskTyped]=\"true\" [validation]=\"true\"\r\n        [dir]=\"textDir\" aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.name}}\" type=\"{{getInputType(options.type)}}\"\r\n        [(ngModel)]=\"options.value\" [class.is-invalid]=\"textBoxFormControl.invalid && textBoxFormControl.touched\"\r\n        placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\" autocomplete=\"{{options.autoComplete}}\" (change)=\"trimControlValue()\"\r\n        (keyup)=\"onTextChange()\" [readonly]=\"options.isReadonly\"\r\n        (keydown)=\"wordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\" #userinput (blur)=\"onTextBlur()\">\r\n      <!--CopyToClipboard-->\r\n      <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" *ngIf=\"options.enableCopyToClipboard\" (click)=\"copyInputMessage(userinput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </span>\r\n    </div>\r\n    <!--NoMaskPattern-->\r\n    <div *ngIf=\"maskPattern==null||maskPattern==''&&!options.isReadonly\" class=\"bbsf-input-container\"\r\n      [ngClass]=\"options.enableCopyToClipboard? 'p-40px' : '' \">\r\n      <!--Icon-->\r\n      <div class=\"svg svg-icon-grey bbsf-icon\" [ngClass]=\"(options.iconPosition==1)?'bbsf-left-icon':'bbsf-right-icon'\" *ngIf=\"options.icon!=null\">\r\n        <span [inlineSVG]=\"options.icon\"></span>\r\n      </div>\r\n      <!--input-->\r\n      <input class=\"form-control {{options.extraClasses}} \" [dir]=\"textDir\" (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n        maxlength=\"{{options.maxLength}}\" minlength=\"{{options.minLength}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n        formControlName=\"{{options.name}}\" type=\"{{getInputType(options.type)}}\"\r\n        [class.is-invalid]=\"textBoxFormControl.invalid && textBoxFormControl.touched\" placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\"\r\n        autocomplete=\"{{options.autoComplete}}\" (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [(ngModel)]=\"options.value\"\r\n        (keydown)=\"wordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\" [readonly]=\"options.isReadonly\" #userinput\r\n        (blur)=\"onTextBlur()\">\r\n      <!--CopyToClipboard-->\r\n      <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" triggers=\"click:blur\" *ngIf=\"options.enableCopyToClipboard\"\r\n        (click)=\"copyInputMessage(userinput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </span>\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.isReadonly\">\r\n      <a *ngIf=\"options.type==inputType.Email\" href=\"mailto: {{options.value}}\">{{options.value}}</a>\r\n      <a *ngIf=\"options.type==inputType.URL\" href=\"{{options.value}}\" target=\"_blank\">{{options.value}}</a>\r\n      <span *ngIf=\"options.type!=inputType.URL&&options.type!=inputType.Email\" class=\"readonly-view\">{{options.value}}</span>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!--wordCount-->\r\n    <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowWordCount\">{{wordCount}}/{{options.maxWordCount}}\r\n      Words</div>\r\n    <!-- CharsLimitMsg-->\r\n    <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\"\r\n      [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n      {{maxLimitWarningMsg}}\r\n    </div>\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n    <!-- requiredText-->\r\n    <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"(textBoxFormControl.invalid && textBoxFormControl.touched)\">\r\n      {{getErrorValidation(textBoxFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty)\">\r\n    {{resetError()}}</div>\r\n</div>", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i7$3.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: i6.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i7.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8$3.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TextboxComponent, selector: "BBSF-TextBox", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange", onBlur: "onBlur" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-textbox\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"options.viewType == 1 ? 'bbsf-vertical' : 'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{ options.labelExtraClasses }}\">\r\n      {{ options.labelValue }}\r\n      <!--Asterisk-->\r\n      @if (((options.showAsterisk && options.isRequired) || options.isRequired) && !options.isReadonly) {\r\n      <span class=\"text-danger\">*</span>\r\n      }\r\n    </label>\r\n    <!--MaskPattern-->\r\n    @if (maskPattern != null && maskPattern != '' && !options.isReadonly) {\r\n    <div class=\"bbsf-input-container\" [ngClass]=\"options.enableCopyToClipboard ? 'p-40px' : ''\">\r\n      <!--Icon-->\r\n      <div *ngIf=\"options.icon != null\" class=\"svg svg-icon-grey bbsf-icon\"\r\n        [ngClass]=\"options.iconPosition == 1 ? 'bbsf-left-icon' : 'bbsf-right-icon'\">\r\n        <span [inlineSVG]=\"options.icon\"></span>\r\n      </div>\r\n      <!--input-->\r\n      <input class=\"form-control {{ options.extraClasses }}\" [mask]=\"maskPattern\" placeHolderCharacter=\" \"\r\n        [showMaskTyped]=\"true\" [validation]=\"true\" [dir]=\"textDir\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n        formControlName=\"{{ options.name }}\" type=\"{{ getInputType(options.type) }}\" [(ngModel)]=\"options.value\"\r\n        [class.is-invalid]=\"textBoxFormControl.invalid && textBoxFormControl.touched\"\r\n        placeholder=\"{{ options.placeholder }}\" id=\"{{ options.name }}\" autocomplete=\"{{ options.autoComplete }}\"\r\n        (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [readonly]=\"options.isReadonly\"\r\n        (keydown)=\"wordCountArray > options.maxWordCount && $event.keyCode != 8 ? $event.preventDefault() : null\"\r\n        #userInput (blur)=\"onTextBlur()\" />\r\n      <!--CopyToClipboard-->\r\n      <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" *ngIf=\"options.enableCopyToClipboard\"\r\n        (click)=\"copyInputMessage(userInput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </span>\r\n    </div>\r\n    }\r\n    <!--NoMaskPattern-->\r\n    <div *ngIf=\"maskPattern == null || (maskPattern == '' && !options.isReadonly)\" class=\"bbsf-input-container\"\r\n      [ngClass]=\"options.enableCopyToClipboard ? 'p-40px' : ''\">\r\n      <!--Icon-->\r\n      <div class=\"svg svg-icon-grey bbsf-icon\"\r\n        [ngClass]=\"options.iconPosition == 1 ? 'bbsf-left-icon' : 'bbsf-right-icon'\" *ngIf=\"options.icon != null\">\r\n        <span [inlineSVG]=\"options.icon\"></span>\r\n      </div>\r\n      <!--input-->\r\n      <input class=\"form-control {{ options.extraClasses }} \" [dir]=\"textDir\" (focus)=\"onFocus(true)\"\r\n        (focusout)=\"onFocus(false)\" maxlength=\"{{ options.maxLength }}\" minlength=\"{{ options.minLength }}\"\r\n        aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{ options.name }}\"\r\n        type=\"{{ getInputType(options.type) }}\"\r\n        [class.is-invalid]=\"textBoxFormControl.invalid && textBoxFormControl.touched\"\r\n        placeholder=\"{{ options.placeholder }}\" id=\"{{ options.name }}\" autocomplete=\"{{ options.autoComplete }}\"\r\n        (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [(ngModel)]=\"options.value\"\r\n        (keydown)=\"wordCountArray > options.maxWordCount && $event.keyCode != 8 ? $event.preventDefault() : null\"\r\n        [readonly]=\"options.isReadonly\" #userInput (blur)=\"onTextBlur()\" />\r\n      <!--CopyToClipboard-->\r\n      <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" triggers=\"click:blur\" *ngIf=\"options.enableCopyToClipboard\"\r\n        (click)=\"copyInputMessage(userInput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </span>\r\n    </div>\r\n    <!-- readonly -->\r\n    @if (options.isReadonly) {\r\n    <div>\r\n      <a *ngIf=\"options.type == inputType.Email\" href=\"mailto: {{ options.value }}\">{{ options.value }}</a>\r\n      <a *ngIf=\"options.type == inputType.URL\" href=\"{{ options.value }}\" target=\"_blank\">{{ options.value }}</a>\r\n      <span *ngIf=\"options.type != inputType.URL && options.type != inputType.Email\"\r\n        class=\"readonly-view\">{{ options.value }}</span>\r\n    </div>\r\n    }\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!--wordCount-->\r\n    <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount > 0 && isShowWordCount\">\r\n      {{ wordCount }}/{{ options.maxWordCount }} Words</div>\r\n    <!-- CharsLimitMsg-->\r\n    <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\"\r\n      [ngClass]=\"{ 'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger': charsLimitMsgClass === 'danger' }\">\r\n      {{ maxLimitWarningMsg }}\r\n    </div>\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription != null\">{{ options.labelDescription }}</div>\r\n    <!-- requiredText-->\r\n    <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"textBoxFormControl.invalid && textBoxFormControl.touched\">\r\n      {{ getErrorValidation(textBoxFormControl.errors | keyvalue) }}\r\n    </div>\r\n  </div>\r\n\r\n  @if ((group.valid && group.dirty && group.touched) || (group.untouched && group.invalid && group.dirty)) {\r\n  <div>{{ resetError() }}</div>\r\n  }\r\n</div>", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i7$3.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: i6.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i7.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8$3.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'BBSF-TextBox', template: "<div class=\"form-group bbsf-control bbsf-textbox\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{options.labelExtraClasses}}\">\r\n      {{options.labelValue}}\r\n      <!--Asterisk-->\r\n      <span *ngIf=\"((options.showAsterisk&&options.isRequired)||(options.isRequired))&&!options.isReadonly\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--MaskPattern-->\r\n    <div *ngIf=\"maskPattern!=null&&maskPattern!=''&&!options.isReadonly\" class=\"bbsf-input-container\"\r\n      [ngClass]=\"options.enableCopyToClipboard? 'p-40px' : '' \">\r\n      <!--Icon-->\r\n      <div *ngIf=\"options.icon!=null\" class=\"svg svg-icon-grey bbsf-icon\" [ngClass]=\"(options.iconPosition==1)?'bbsf-left-icon':'bbsf-right-icon'\">\r\n        <span [inlineSVG]=\"options.icon\"></span>\r\n      </div>\r\n      <!--input-->\r\n      <input class=\"form-control {{options.extraClasses}}\" [mask]=\"maskPattern\" placeHolderCharacter=\" \" [showMaskTyped]=\"true\" [validation]=\"true\"\r\n        [dir]=\"textDir\" aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.name}}\" type=\"{{getInputType(options.type)}}\"\r\n        [(ngModel)]=\"options.value\" [class.is-invalid]=\"textBoxFormControl.invalid && textBoxFormControl.touched\"\r\n        placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\" autocomplete=\"{{options.autoComplete}}\" (change)=\"trimControlValue()\"\r\n        (keyup)=\"onTextChange()\" [readonly]=\"options.isReadonly\"\r\n        (keydown)=\"wordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\" #userinput (blur)=\"onTextBlur()\">\r\n      <!--CopyToClipboard-->\r\n      <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" *ngIf=\"options.enableCopyToClipboard\" (click)=\"copyInputMessage(userinput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </span>\r\n    </div>\r\n    <!--NoMaskPattern-->\r\n    <div *ngIf=\"maskPattern==null||maskPattern==''&&!options.isReadonly\" class=\"bbsf-input-container\"\r\n      [ngClass]=\"options.enableCopyToClipboard? 'p-40px' : '' \">\r\n      <!--Icon-->\r\n      <div class=\"svg svg-icon-grey bbsf-icon\" [ngClass]=\"(options.iconPosition==1)?'bbsf-left-icon':'bbsf-right-icon'\" *ngIf=\"options.icon!=null\">\r\n        <span [inlineSVG]=\"options.icon\"></span>\r\n      </div>\r\n      <!--input-->\r\n      <input class=\"form-control {{options.extraClasses}} \" [dir]=\"textDir\" (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n        maxlength=\"{{options.maxLength}}\" minlength=\"{{options.minLength}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n        formControlName=\"{{options.name}}\" type=\"{{getInputType(options.type)}}\"\r\n        [class.is-invalid]=\"textBoxFormControl.invalid && textBoxFormControl.touched\" placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\"\r\n        autocomplete=\"{{options.autoComplete}}\" (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [(ngModel)]=\"options.value\"\r\n        (keydown)=\"wordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\" [readonly]=\"options.isReadonly\" #userinput\r\n        (blur)=\"onTextBlur()\">\r\n      <!--CopyToClipboard-->\r\n      <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" triggers=\"click:blur\" *ngIf=\"options.enableCopyToClipboard\"\r\n        (click)=\"copyInputMessage(userinput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </span>\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.isReadonly\">\r\n      <a *ngIf=\"options.type==inputType.Email\" href=\"mailto: {{options.value}}\">{{options.value}}</a>\r\n      <a *ngIf=\"options.type==inputType.URL\" href=\"{{options.value}}\" target=\"_blank\">{{options.value}}</a>\r\n      <span *ngIf=\"options.type!=inputType.URL&&options.type!=inputType.Email\" class=\"readonly-view\">{{options.value}}</span>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!--wordCount-->\r\n    <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowWordCount\">{{wordCount}}/{{options.maxWordCount}}\r\n      Words</div>\r\n    <!-- CharsLimitMsg-->\r\n    <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\"\r\n      [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n      {{maxLimitWarningMsg}}\r\n    </div>\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n    <!-- requiredText-->\r\n    <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"(textBoxFormControl.invalid && textBoxFormControl.touched)\">\r\n      {{getErrorValidation(textBoxFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty)\">\r\n    {{resetError()}}</div>\r\n</div>" }]
+            args: [{ selector: 'BBSF-TextBox', template: "<div class=\"form-group bbsf-control bbsf-textbox\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"options.viewType == 1 ? 'bbsf-vertical' : 'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{ options.labelExtraClasses }}\">\r\n      {{ options.labelValue }}\r\n      <!--Asterisk-->\r\n      @if (((options.showAsterisk && options.isRequired) || options.isRequired) && !options.isReadonly) {\r\n      <span class=\"text-danger\">*</span>\r\n      }\r\n    </label>\r\n    <!--MaskPattern-->\r\n    @if (maskPattern != null && maskPattern != '' && !options.isReadonly) {\r\n    <div class=\"bbsf-input-container\" [ngClass]=\"options.enableCopyToClipboard ? 'p-40px' : ''\">\r\n      <!--Icon-->\r\n      <div *ngIf=\"options.icon != null\" class=\"svg svg-icon-grey bbsf-icon\"\r\n        [ngClass]=\"options.iconPosition == 1 ? 'bbsf-left-icon' : 'bbsf-right-icon'\">\r\n        <span [inlineSVG]=\"options.icon\"></span>\r\n      </div>\r\n      <!--input-->\r\n      <input class=\"form-control {{ options.extraClasses }}\" [mask]=\"maskPattern\" placeHolderCharacter=\" \"\r\n        [showMaskTyped]=\"true\" [validation]=\"true\" [dir]=\"textDir\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n        formControlName=\"{{ options.name }}\" type=\"{{ getInputType(options.type) }}\" [(ngModel)]=\"options.value\"\r\n        [class.is-invalid]=\"textBoxFormControl.invalid && textBoxFormControl.touched\"\r\n        placeholder=\"{{ options.placeholder }}\" id=\"{{ options.name }}\" autocomplete=\"{{ options.autoComplete }}\"\r\n        (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [readonly]=\"options.isReadonly\"\r\n        (keydown)=\"wordCountArray > options.maxWordCount && $event.keyCode != 8 ? $event.preventDefault() : null\"\r\n        #userInput (blur)=\"onTextBlur()\" />\r\n      <!--CopyToClipboard-->\r\n      <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" *ngIf=\"options.enableCopyToClipboard\"\r\n        (click)=\"copyInputMessage(userInput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </span>\r\n    </div>\r\n    }\r\n    <!--NoMaskPattern-->\r\n    <div *ngIf=\"maskPattern == null || (maskPattern == '' && !options.isReadonly)\" class=\"bbsf-input-container\"\r\n      [ngClass]=\"options.enableCopyToClipboard ? 'p-40px' : ''\">\r\n      <!--Icon-->\r\n      <div class=\"svg svg-icon-grey bbsf-icon\"\r\n        [ngClass]=\"options.iconPosition == 1 ? 'bbsf-left-icon' : 'bbsf-right-icon'\" *ngIf=\"options.icon != null\">\r\n        <span [inlineSVG]=\"options.icon\"></span>\r\n      </div>\r\n      <!--input-->\r\n      <input class=\"form-control {{ options.extraClasses }} \" [dir]=\"textDir\" (focus)=\"onFocus(true)\"\r\n        (focusout)=\"onFocus(false)\" maxlength=\"{{ options.maxLength }}\" minlength=\"{{ options.minLength }}\"\r\n        aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{ options.name }}\"\r\n        type=\"{{ getInputType(options.type) }}\"\r\n        [class.is-invalid]=\"textBoxFormControl.invalid && textBoxFormControl.touched\"\r\n        placeholder=\"{{ options.placeholder }}\" id=\"{{ options.name }}\" autocomplete=\"{{ options.autoComplete }}\"\r\n        (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [(ngModel)]=\"options.value\"\r\n        (keydown)=\"wordCountArray > options.maxWordCount && $event.keyCode != 8 ? $event.preventDefault() : null\"\r\n        [readonly]=\"options.isReadonly\" #userInput (blur)=\"onTextBlur()\" />\r\n      <!--CopyToClipboard-->\r\n      <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" triggers=\"click:blur\" *ngIf=\"options.enableCopyToClipboard\"\r\n        (click)=\"copyInputMessage(userInput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </span>\r\n    </div>\r\n    <!-- readonly -->\r\n    @if (options.isReadonly) {\r\n    <div>\r\n      <a *ngIf=\"options.type == inputType.Email\" href=\"mailto: {{ options.value }}\">{{ options.value }}</a>\r\n      <a *ngIf=\"options.type == inputType.URL\" href=\"{{ options.value }}\" target=\"_blank\">{{ options.value }}</a>\r\n      <span *ngIf=\"options.type != inputType.URL && options.type != inputType.Email\"\r\n        class=\"readonly-view\">{{ options.value }}</span>\r\n    </div>\r\n    }\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!--wordCount-->\r\n    <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount > 0 && isShowWordCount\">\r\n      {{ wordCount }}/{{ options.maxWordCount }} Words</div>\r\n    <!-- CharsLimitMsg-->\r\n    <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\"\r\n      [ngClass]=\"{ 'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger': charsLimitMsgClass === 'danger' }\">\r\n      {{ maxLimitWarningMsg }}\r\n    </div>\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription != null\">{{ options.labelDescription }}</div>\r\n    <!-- requiredText-->\r\n    <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"textBoxFormControl.invalid && textBoxFormControl.touched\">\r\n      {{ getErrorValidation(textBoxFormControl.errors | keyvalue) }}\r\n    </div>\r\n  </div>\r\n\r\n  @if ((group.valid && group.dirty && group.touched) || (group.untouched && group.invalid && group.dirty)) {\r\n  <div>{{ resetError() }}</div>\r\n  }\r\n</div>" }]
         }], ctorParameters: () => [{ type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
                     type: Optional
                 }] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }], propDecorators: { group: [{