@bnsights/bbsf-controls 1.0.194-beta.1 → 1.0.194-beta.19-1

package/fesm2022/bnsights-bbsf-controls.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { Optional, Injectable, EventEmitter, Output, Input, Component, SkipSelf, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule, Pipe, ViewChild, HostListener, Directive, ViewEncapsulation, forwardRef, ViewContainerRef, ViewChildren } from '@angular/core';
+import { Optional, Injectable, EventEmitter, Output, Input, Component, SkipSelf, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule, Pipe, ViewChild, HostListener, Directive, Self, Inject, ViewEncapsulation, forwardRef, ViewContainerRef, ViewChildren } from '@angular/core';
 import * as i5 from '@angular/common';
 import { CommonModule, DatePipe, KeyValuePipe } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { Validators, FormControl, FormsModule, ReactiveFormsModule, FormGroup, FormGroupDirective, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Validators, FormControl, FormsModule, ReactiveFormsModule, FormGroup, FormGroupDirective, ControlContainer, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i3$3 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i3$2 from '@ng-bootstrap/ng-bootstrap';
-import { NgbModule, NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { NgbModule, NgbTooltip, NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import * as i1$1 from '@ngrx/store-devtools';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { TranslateService } from '@ngx-translate/core';
@@ -37,7 +37,6 @@ import Swal from 'sweetalert2/dist/sweetalert2.js';
 import { plainToClass } from 'class-transformer';
 import * as i1 from '@angular/common/http';
 import { HttpEventType, HttpHeaders, HttpParams } from '@angular/common/http';
-import { NgxSummernoteModule } from 'ngx-summernote';
 import * as i7$3 from 'ngx-markdown-editor';
 import { LMarkdownEditorModule } from 'ngx-markdown-editor';
 import * as i6$2 from '@kolkov/angular-editor';
@@ -196,10 +195,10 @@ class ErrorMassageValidation {
         }
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ErrorMassageValidation, deps: [{ token: i2.ControlContainer, optional: true }, { token: i3.UtilityService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ErrorMassageValidation }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ErrorMassageValidation, deps: [{ token: i2.ControlContainer, optional: true }, { token: i3.UtilityService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ErrorMassageValidation }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ErrorMassageValidation, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ErrorMassageValidation, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i2.ControlContainer, decorators: [{
                     type: Optional
@@ -354,10 +353,10 @@ class ControlUtility {
     isValid(formControl) {
         formControl.markAsTouched();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ControlUtility, deps: [{ token: ErrorMassageValidation }, { token: i3.ControlValidationService }, { token: i3.UtilityService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ControlUtility }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ControlUtility, deps: [{ token: ErrorMassageValidation }, { token: i3.ControlValidationService }, { token: i3.UtilityService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ControlUtility }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ControlUtility, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ControlUtility, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: ErrorMassageValidation }, { type: i3.ControlValidationService }, { type: i3.UtilityService }] });
 
@@ -396,10 +395,10 @@ class GlobalSettings {
         //**Set default image source
         this.defaultImageSrc = "./src/assets/images/uploadimg.png";
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GlobalSettings, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GlobalSettings, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GlobalSettings, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GlobalSettings, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GlobalSettings, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GlobalSettings, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -722,10 +721,10 @@ class TextboxComponent {
         this.hasSpecialLetter = /[!@#$%^&*(),.?":{}|<>]/.test(password);
         this.hasMinLength = password.length >= this.passwordMinLength;
     }
-    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: "17.0.0", version: "17.3.12", type: TextboxComponent, isStandalone: true, 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    <!-- Password Disclaimer -->\r\n    <div class=\"bbsf-password-disclaimer\"\r\n      *ngIf=\"options.type == inputType.Password && !options.removeDefaultPasswordValidation && !options.isReadonly && options.showPasswordRequirements\">\r\n      <div class=\"password-requirements\">\r\n        <div class=\"requirement-title\">{{ passwordRequirementsTitle }}</div>\r\n        <ul class=\"requirements-list\">\r\n          <li [ngClass]=\"{'requirement-met': hasNumber, 'requirement-not-met': !hasNumber}\">\r\n            <i class=\"fas\" [ngClass]=\"hasNumber ? 'fa-check text-success' : 'fa-times text-danger'\"></i>\r\n            {{ passwordComplexityHasNumber }}\r\n          </li>\r\n          <li [ngClass]=\"{'requirement-met': hasCapitalLetter, 'requirement-not-met': !hasCapitalLetter}\">\r\n            <i class=\"fas\" [ngClass]=\"hasCapitalLetter ? 'fa-check text-success' : 'fa-times text-danger'\"></i>\r\n            {{ passwordComplexityHasCapitalLetter }}\r\n          </li>\r\n          <li [ngClass]=\"{'requirement-met': hasSmallLetter, 'requirement-not-met': !hasSmallLetter}\">\r\n            <i class=\"fas\" [ngClass]=\"hasSmallLetter ? 'fa-check text-success' : 'fa-times text-danger'\"></i>\r\n            {{ passwordComplexityHasSmallLetter }}\r\n          </li>\r\n          <li [ngClass]=\"{'requirement-met': hasSpecialLetter, 'requirement-not-met': !hasSpecialLetter}\">\r\n            <i class=\"fas\" [ngClass]=\"hasSpecialLetter ? 'fa-check text-success' : 'fa-times text-danger'\"></i>\r\n            {{ passwordComplexityHasSpecialLetter }}\r\n          </li>\r\n          <li [ngClass]=\"{'requirement-met': hasMinLength, 'requirement-not-met': !hasMinLength}\">\r\n            <i class=\"fas\" [ngClass]=\"hasMinLength ? 'fa-check text-success' : 'fa-times text-danger'\"></i>\r\n            {{ minLengthRequirement }}\r\n          </li>\r\n        </ul>\r\n      </div>\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: 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: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i7.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", 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: "17.0.0", version: "19.2.15", type: TextboxComponent, isStandalone: true, 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    <!-- Password Disclaimer -->\r\n    <div class=\"bbsf-password-disclaimer\"\r\n      *ngIf=\"options.type == inputType.Password && !options.removeDefaultPasswordValidation && !options.isReadonly && options.showPasswordRequirements\">\r\n      <div class=\"password-requirements\">\r\n        <div class=\"requirement-title\">{{ passwordRequirementsTitle }}</div>\r\n        <ul class=\"requirements-list\">\r\n          <li [ngClass]=\"{'requirement-met': hasNumber, 'requirement-not-met': !hasNumber}\">\r\n            <i class=\"fas\" [ngClass]=\"hasNumber ? 'fa-check text-success' : 'fa-times text-danger'\"></i>\r\n            {{ passwordComplexityHasNumber }}\r\n          </li>\r\n          <li [ngClass]=\"{'requirement-met': hasCapitalLetter, 'requirement-not-met': !hasCapitalLetter}\">\r\n            <i class=\"fas\" [ngClass]=\"hasCapitalLetter ? 'fa-check text-success' : 'fa-times text-danger'\"></i>\r\n            {{ passwordComplexityHasCapitalLetter }}\r\n          </li>\r\n          <li [ngClass]=\"{'requirement-met': hasSmallLetter, 'requirement-not-met': !hasSmallLetter}\">\r\n            <i class=\"fas\" [ngClass]=\"hasSmallLetter ? 'fa-check text-success' : 'fa-times text-danger'\"></i>\r\n            {{ passwordComplexityHasSmallLetter }}\r\n          </li>\r\n          <li [ngClass]=\"{'requirement-met': hasSpecialLetter, 'requirement-not-met': !hasSpecialLetter}\">\r\n            <i class=\"fas\" [ngClass]=\"hasSpecialLetter ? 'fa-check text-success' : 'fa-times text-danger'\"></i>\r\n            {{ passwordComplexityHasSpecialLetter }}\r\n          </li>\r\n          <li [ngClass]=\"{'requirement-met': hasMinLength, 'requirement-not-met': !hasMinLength}\">\r\n            <i class=\"fas\" [ngClass]=\"hasMinLength ? 'fa-check text-success' : 'fa-times text-danger'\"></i>\r\n            {{ minLengthRequirement }}\r\n          </li>\r\n        </ul>\r\n      </div>\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: 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: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i7.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-TextBox', standalone: true, imports: [
                         CommonModule,
@@ -762,10 +761,10 @@ class FileUploadService {
         options.disableBlockUI = true;
         return this.http.get(this.apiUrl + `DeleteFile/${id}`, null, null, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileUploadService, deps: [{ token: i3$1.RequestHandlerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileUploadService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FileUploadService, deps: [{ token: i3$1.RequestHandlerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FileUploadService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileUploadService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FileUploadService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -785,10 +784,10 @@ class OnPagingFiltersChangeService {
     GetValue() {
         return this.subject.asObservable();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OnPagingFiltersChangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OnPagingFiltersChangeService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OnPagingFiltersChangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OnPagingFiltersChangeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OnPagingFiltersChangeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OnPagingFiltersChangeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -816,10 +815,10 @@ class RenderComponentService {
             wrapper.appendChild(htmlElement);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RenderComponentService, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RenderComponentService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RenderComponentService, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RenderComponentService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RenderComponentService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RenderComponentService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }] });
 
@@ -1365,10 +1364,10 @@ class TextAreaComponent {
             select.disable();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextAreaComponent, deps: [{ token: ControlUtility }, { token: i2.ControlContainer, optional: true, skipSelf: true }, { token: i2.FormGroupDirective, optional: true }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }, { token: i3.SpeechRecognitionService }, { token: i4.LanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextAreaComponent, isStandalone: true, selector: "BBSF-TextArea", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-textarea\" [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\">*</span>\r\n    </label>\r\n    <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\" [ngClass]=\"{\r\n      'p-120px': options.enableSpeechRecognition && options.enableCopyToClipboard,\r\n      'p-80px': options.enableSpeechRecognition && !options.enableCopyToClipboard,\r\n      'p-40px': !options.enableSpeechRecognition && options.enableCopyToClipboard\r\n    }\">\r\n      <!--input-->\r\n      <textarea class=\"form-control {{options.extraClasses}}\" (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n        [dir]=\"textDir\" [attr.aria-invalid]=\"textAreaFormControl.invalid && textAreaFormControl.touched\"\r\n        [attr.aria-describedby]=\"ariaDescribedBy\" [attr.aria-label]=\"options.labelValue || options.placeholder\"\r\n        formControlName=\"{{options.name}}\"\r\n        [class.is-invalid]=\"textAreaFormControl.invalid && textAreaFormControl.touched\"\r\n        placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\" autocomplete=\"{{options.autoComplete}}\"\r\n        (change)=\"trimControlValue()\" rows=\"{{options.rows}}\" (keyup)=\"onTextChange()\" cols=\"{{options.cols}}\"\r\n        [attr.minlength]=\"options.minLength\" [(ngModel)]=\"options.value\" (keydown)=\"onKeyDown($event)\"\r\n        [attr.maxlength]=\"options.maxLength\" role=\"textbox\" [attr.aria-multiline]=\"true\" #TextAreainput></textarea>\r\n      <!--CopyToClipboard-->\r\n      <button type=\"button\" class=\"copy-clipboard\" *ngIf=\"options.enableCopyToClipboard\"\r\n        (click)=\"copyInputMessage(TextAreainput)\" (keydown)=\"onCopyKeydown($event, TextAreainput)\"\r\n        [attr.aria-label]=\"utilityService.getResourceValue('CopyTextToClipboard')\" [ngbTooltip]=\"utilityService.getResourceValue('CopyTextToClipboard')\" tabindex=\"0\">\r\n        <i class=\"fas fa-copy\" aria-hidden=\"true\"></i>\r\n      </button>\r\n      <div [ngClass]=\"{'expanded': isFocused}\" class=\"language-container {{options.extraClassMicLanguage}}\"\r\n        *ngIf=\"options.enableSpeechRecognition\" role=\"region\">\r\n\r\n        <!-- Start Speech Recognition Button -->\r\n        <button type=\"button\" class=\"svg-icon svg-icon-5 speech-control-btn\" [class.focus-visible]=\"isMicFocusVisible\"\r\n          [inlineSVG]=\"options.iconMic || 'assets/bbsf-controls/images/mic.svg'\" (click)=\"startSpeechRecognition()\"\r\n          (keydown)=\"onMicKeydown($event, 'start')\" (focus)=\"onMicFocus(true)\" (blur)=\"onMicFocus(false)\"\r\n          *ngIf=\"options.enableSpeechRecognition && !isMicOn\"\r\n          [attr.aria-label]=\"utilityService.getResourceValue('StartSpeechRecognition')\" [ngbTooltip]=\"utilityService.getResourceValue('StartSpeechRecognition')\" tabindex=\"0\"\r\n          [attr.aria-pressed]=\"false\">\r\n        </button>\r\n\r\n        <!-- Stop Speech Recognition Button -->\r\n        <button type=\"button\" class=\"svg-icon svg-icon-5 speech-control-btn\" [class.focus-visible]=\"isMicFocusVisible\"\r\n          [inlineSVG]=\"options.iconMicOff || 'assets/bbsf-controls/images/mic-off.svg'\"\r\n          (click)=\"stopSpeechRecognition()\" (keydown)=\"onMicKeydown($event, 'stop')\"\r\n          (focus)=\"onMicFocus(true)\" (blur)=\"onMicFocus(false)\"\r\n          *ngIf=\"options.enableSpeechRecognition && isMicOn\" [attr.aria-label]=\"utilityService.getResourceValue('StopSpeechRecognition')\"\r\n          [ngbTooltip]=\"utilityService.getResourceValue('StopSpeechRecognition')\" tabindex=\"0\" [attr.aria-pressed]=\"true\">\r\n        </button>\r\n\r\n        <div class=\"language-controls\" [class.focus-visible]=\"isLanguageSelectFocusVisible\">\r\n          <span class=\"language-text\" [attr.id]=\"options.name + '-language-display'\"\r\n            aria-live=\"polite\">{{ options.enableSpeechRecognition ? selectedSpeechLanguageDisplayText : '' }}</span>\r\n\r\n          <label [for]=\"'Language_'+options.name\" class=\"sr-only\">\r\n            Select speech recognition language\r\n          </label>\r\n          <select class=\"language-select\" [formControlName]=\"'Language_'+options.name\" [id]=\"'Language_'+options.name\"\r\n            (change)=\"onSpeechLanguageChange($event)\" (focus)=\"onLanguageSelectFocus(true)\"\r\n            (blur)=\"onLanguageSelectFocus(false)\" (keydown)=\"onLanguageSelectKeydown($event)\"\r\n            [attr.aria-describedby]=\"options.name + '-language-display'\" [attr.aria-label]=\"utilityService.getResourceValue('SelectSpeechRecognitionLanguage')\"\r\n            [ngbTooltip]=\"utilityService.getResourceValue('SelectSpeechRecognitionLanguage')\"\r\n            triggers=\"focus:blur\">\r\n            <option *ngFor=\"let language of options.speechLanguages\" [value]=\"language.dialect\">\r\n              {{language.name}}\r\n            </option>\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\">{{options.value}}</span>\r\n    </div>\r\n    <div class=\"subtext-container\">\r\n      <!--wordCount-->\r\n      <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowWordCount\" [attr.id]=\"wordCountId\"\r\n        aria-live=\"polite\" [attr.aria-label]=\"'Word count: ' + wordCount + ' of ' + options.maxWordCount + ' words'\">\r\n        {{wordCount}}/{{options.maxWordCount}} Words\r\n      </div>\r\n\r\n      <!-- CharsLimitMsg-->\r\n      <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\" [attr.id]=\"characterCountId\" aria-live=\"polite\"\r\n        [attr.aria-atomic]=\"true\"\r\n        [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n        {{maxLimitWarningMsg}}\r\n      </div>\r\n\r\n      <!-- LabelDescription-->\r\n      <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\" [attr.id]=\"options.name + '-description'\">\r\n        {{options.labelDescription}}\r\n      </div>\r\n\r\n      <!-- requiredText-->\r\n      <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"(textAreaFormControl.invalid && textAreaFormControl.touched)\"\r\n        [attr.id]=\"errorMessageId\" role=\"alert\" aria-live=\"assertive\" [attr.aria-atomic]=\"true\">\r\n        {{getErrorValidation(textAreaFormControl.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: "ngmodule", type: CommonModule }, { 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: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.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: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: NgbModule }, { kind: "directive", type: i3$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i7.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextAreaComponent, deps: [{ token: ControlUtility }, { token: i2.ControlContainer, optional: true, skipSelf: true }, { token: i2.FormGroupDirective, optional: true }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }, { token: i3.SpeechRecognitionService }, { token: i4.LanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TextAreaComponent, isStandalone: true, selector: "BBSF-TextArea", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-textarea\" [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\">*</span>\r\n    </label>\r\n    <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\" [ngClass]=\"{\r\n      'p-120px': options.enableSpeechRecognition && options.enableCopyToClipboard,\r\n      'p-80px': options.enableSpeechRecognition && !options.enableCopyToClipboard,\r\n      'p-40px': !options.enableSpeechRecognition && options.enableCopyToClipboard\r\n    }\">\r\n      <!--input-->\r\n      <textarea class=\"form-control {{options.extraClasses}}\" (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n        [dir]=\"textDir\" [attr.aria-invalid]=\"textAreaFormControl.invalid && textAreaFormControl.touched\"\r\n        [attr.aria-describedby]=\"ariaDescribedBy\" [attr.aria-label]=\"options.labelValue || options.placeholder\"\r\n        formControlName=\"{{options.name}}\"\r\n        [class.is-invalid]=\"textAreaFormControl.invalid && textAreaFormControl.touched\"\r\n        placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\" autocomplete=\"{{options.autoComplete}}\"\r\n        (change)=\"trimControlValue()\" rows=\"{{options.rows}}\" (keyup)=\"onTextChange()\" cols=\"{{options.cols}}\"\r\n        [attr.minlength]=\"options.minLength\" [(ngModel)]=\"options.value\" (keydown)=\"onKeyDown($event)\"\r\n        [attr.maxlength]=\"options.maxLength\" role=\"textbox\" [attr.aria-multiline]=\"true\" #TextAreainput></textarea>\r\n      <!--CopyToClipboard-->\r\n      <button type=\"button\" class=\"copy-clipboard\" *ngIf=\"options.enableCopyToClipboard\"\r\n        (click)=\"copyInputMessage(TextAreainput)\" (keydown)=\"onCopyKeydown($event, TextAreainput)\"\r\n        [attr.aria-label]=\"utilityService.getResourceValue('CopyTextToClipboard')\" [ngbTooltip]=\"utilityService.getResourceValue('CopyTextToClipboard')\" tabindex=\"0\">\r\n        <i class=\"fas fa-copy\" aria-hidden=\"true\"></i>\r\n      </button>\r\n      <div [ngClass]=\"{'expanded': isFocused}\" class=\"language-container {{options.extraClassMicLanguage}}\"\r\n        *ngIf=\"options.enableSpeechRecognition\" role=\"region\">\r\n\r\n        <!-- Start Speech Recognition Button -->\r\n        <button type=\"button\" class=\"svg-icon svg-icon-5 speech-control-btn\" [class.focus-visible]=\"isMicFocusVisible\"\r\n          [inlineSVG]=\"options.iconMic || 'assets/bbsf-controls/images/mic.svg'\" (click)=\"startSpeechRecognition()\"\r\n          (keydown)=\"onMicKeydown($event, 'start')\" (focus)=\"onMicFocus(true)\" (blur)=\"onMicFocus(false)\"\r\n          *ngIf=\"options.enableSpeechRecognition && !isMicOn\"\r\n          [attr.aria-label]=\"utilityService.getResourceValue('StartSpeechRecognition')\" [ngbTooltip]=\"utilityService.getResourceValue('StartSpeechRecognition')\" tabindex=\"0\"\r\n          [attr.aria-pressed]=\"false\">\r\n        </button>\r\n\r\n        <!-- Stop Speech Recognition Button -->\r\n        <button type=\"button\" class=\"svg-icon svg-icon-5 speech-control-btn\" [class.focus-visible]=\"isMicFocusVisible\"\r\n          [inlineSVG]=\"options.iconMicOff || 'assets/bbsf-controls/images/mic-off.svg'\"\r\n          (click)=\"stopSpeechRecognition()\" (keydown)=\"onMicKeydown($event, 'stop')\"\r\n          (focus)=\"onMicFocus(true)\" (blur)=\"onMicFocus(false)\"\r\n          *ngIf=\"options.enableSpeechRecognition && isMicOn\" [attr.aria-label]=\"utilityService.getResourceValue('StopSpeechRecognition')\"\r\n          [ngbTooltip]=\"utilityService.getResourceValue('StopSpeechRecognition')\" tabindex=\"0\" [attr.aria-pressed]=\"true\">\r\n        </button>\r\n\r\n        <div class=\"language-controls\" [class.focus-visible]=\"isLanguageSelectFocusVisible\">\r\n          <span class=\"language-text\" [attr.id]=\"options.name + '-language-display'\"\r\n            aria-live=\"polite\">{{ options.enableSpeechRecognition ? selectedSpeechLanguageDisplayText : '' }}</span>\r\n\r\n          <label [for]=\"'Language_'+options.name\" class=\"sr-only\">\r\n            Select speech recognition language\r\n          </label>\r\n          <select class=\"language-select\" [formControlName]=\"'Language_'+options.name\" [id]=\"'Language_'+options.name\"\r\n            (change)=\"onSpeechLanguageChange($event)\" (focus)=\"onLanguageSelectFocus(true)\"\r\n            (blur)=\"onLanguageSelectFocus(false)\" (keydown)=\"onLanguageSelectKeydown($event)\"\r\n            [attr.aria-describedby]=\"options.name + '-language-display'\" [attr.aria-label]=\"utilityService.getResourceValue('SelectSpeechRecognitionLanguage')\"\r\n            [ngbTooltip]=\"utilityService.getResourceValue('SelectSpeechRecognitionLanguage')\"\r\n            triggers=\"focus:blur\">\r\n            <option *ngFor=\"let language of options.speechLanguages\" [value]=\"language.dialect\">\r\n              {{language.name}}\r\n            </option>\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\">{{options.value}}</span>\r\n    </div>\r\n    <div class=\"subtext-container\">\r\n      <!--wordCount-->\r\n      <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowWordCount\" [attr.id]=\"wordCountId\"\r\n        aria-live=\"polite\" [attr.aria-label]=\"'Word count: ' + wordCount + ' of ' + options.maxWordCount + ' words'\">\r\n        {{wordCount}}/{{options.maxWordCount}} Words\r\n      </div>\r\n\r\n      <!-- CharsLimitMsg-->\r\n      <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\" [attr.id]=\"characterCountId\" aria-live=\"polite\"\r\n        [attr.aria-atomic]=\"true\"\r\n        [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n        {{maxLimitWarningMsg}}\r\n      </div>\r\n\r\n      <!-- LabelDescription-->\r\n      <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\" [attr.id]=\"options.name + '-description'\">\r\n        {{options.labelDescription}}\r\n      </div>\r\n\r\n      <!-- requiredText-->\r\n      <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"(textAreaFormControl.invalid && textAreaFormControl.touched)\"\r\n        [attr.id]=\"errorMessageId\" role=\"alert\" aria-live=\"assertive\" [attr.aria-atomic]=\"true\">\r\n        {{getErrorValidation(textAreaFormControl.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: "ngmodule", type: CommonModule }, { 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: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.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: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: NgbModule }, { kind: "directive", type: i3$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i7.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-TextArea', standalone: true, imports: [
                         CommonModule,
@@ -1483,10 +1482,10 @@ class CheckBoxComponent {
             this.controlUtility.patchControlValue(originalValue, this.options.patchFunction, this.options.patchPath);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckBoxComponent, deps: [{ token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i4.BBSFTranslateService }, { token: i3.ControlValidationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CheckBoxComponent, isStandalone: true, selector: "BBSF-CheckBox", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-checkbox\" [formGroup]=\"group\">\r\n  <div class=\"bbsf-input-container\">\r\n    <!--input-->\r\n    <input type=\"checkbox\" *ngIf=\"!options.isReadonly\" class=\"bbsf-checkbox-input {{options.extraClasses}}\" [dir]=\"textDir\"\r\n      [checked]=\"options.value==true?true:null\" aria-describedby=\"email-error\" aria-invalid=\"true\" [formControlName]=\"options.name\"\r\n      (change)=\"onValueChanged()\" [class.is-invalid]=\"checkBoxFormControl.invalid && checkBoxFormControl.touched\" [id]=\"options.name\"\r\n      [value]=\"options.value==true?true:null\" [name]=\"options.name\" [(ngModel)]=\"options.value\">\r\n\r\n    <div class=\"label-subtext-container\">\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      <!-- readonly -->\r\n      <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\">{{options.value}}</span>\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=\"(checkBoxFormControl.invalid && checkBoxFormControl.touched)\">\r\n          {{getErrorValidation(checkBoxFormControl.errors|keyvalue)}}\r\n        </div>\r\n      </div>\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CheckBoxComponent, deps: [{ token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i4.BBSFTranslateService }, { token: i3.ControlValidationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: CheckBoxComponent, isStandalone: true, selector: "BBSF-CheckBox", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-checkbox\" [formGroup]=\"group\">\r\n  <div class=\"bbsf-input-container\">\r\n    <!--input-->\r\n    <input type=\"checkbox\" *ngIf=\"!options.isReadonly\" class=\"bbsf-checkbox-input {{options.extraClasses}}\" [dir]=\"textDir\"\r\n      [checked]=\"options.value==true?true:null\" aria-describedby=\"email-error\" aria-invalid=\"true\" [formControlName]=\"options.name\"\r\n      (change)=\"onValueChanged()\" [class.is-invalid]=\"checkBoxFormControl.invalid && checkBoxFormControl.touched\" [id]=\"options.name\"\r\n      [value]=\"options.value==true?true:null\" [name]=\"options.name\" [(ngModel)]=\"options.value\">\r\n\r\n    <div class=\"label-subtext-container\">\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      <!-- readonly -->\r\n      <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\">{{options.value}}</span>\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=\"(checkBoxFormControl.invalid && checkBoxFormControl.touched)\">\r\n          {{getErrorValidation(checkBoxFormControl.errors|keyvalue)}}\r\n        </div>\r\n      </div>\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CheckBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-CheckBox', standalone: true, imports: [
                         CommonModule,
@@ -1587,10 +1586,10 @@ class RadioButtonComponent {
     getSelectedItemValue(value) {
         return this.options.items.filter(item => item.value == value)[0].text;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioButtonComponent, 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: RadioButtonComponent, isStandalone: true, selector: "BBSF-RadioButton", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-radio-button\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label [hidden]=\"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    <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <div class=\"radio-container\" *ngFor=\"let item of options.items\">\r\n        <input type=\"radio\" id=\"{{options.name}}{{item.value}}\" class=\"{{options.extraClasses}}\" [value]=\"item.value\"\r\n          checked=\"{{(options.value!=null)&&(options.value.value == item.value)}}\" (change)=\"onValueChanged()\" aria-describedby=\"email-error\"\r\n          aria-invalid=\"true\" [(ngModel)]=\"options.value\" formControlName=\"{{options.name}}\">\r\n        <label class=\"radio-input-label\" for=\"{{options.name}}{{item.value}}\">{{item.text}}</label>\r\n      </div>\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\">{{getSelectedItemValue(options.value)}}</span>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"!options.isReadonly\" class=\"subtext-container\">\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=\"(radioButtonFormControl.invalid && radioButtonFormControl.touched)\">\r\n      {{getErrorValidation(radioButtonFormControl.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: "ngmodule", type: CommonModule }, { 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: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { 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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RadioButtonComponent, 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: "19.2.15", type: RadioButtonComponent, isStandalone: true, selector: "BBSF-RadioButton", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-radio-button\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label [hidden]=\"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    <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <div class=\"radio-container\" *ngFor=\"let item of options.items\">\r\n        <input type=\"radio\" id=\"{{options.name}}{{item.value}}\" class=\"{{options.extraClasses}}\" [value]=\"item.value\"\r\n          checked=\"{{(options.value!=null)&&(options.value.value == item.value)}}\" (change)=\"onValueChanged()\" aria-describedby=\"email-error\"\r\n          aria-invalid=\"true\" [(ngModel)]=\"options.value\" formControlName=\"{{options.name}}\">\r\n        <label class=\"radio-input-label\" for=\"{{options.name}}{{item.value}}\">{{item.text}}</label>\r\n      </div>\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\">{{getSelectedItemValue(options.value)}}</span>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"!options.isReadonly\" class=\"subtext-container\">\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=\"(radioButtonFormControl.invalid && radioButtonFormControl.touched)\">\r\n      {{getErrorValidation(radioButtonFormControl.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: "ngmodule", type: CommonModule }, { 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: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { 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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-RadioButton', standalone: true, imports: [
                         CommonModule,
@@ -1670,10 +1669,10 @@ class ToggleslideComponent {
             this.controlUtility.patchControlValue(this.slideValue, this.options.patchFunction, this.options.patchPath);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToggleslideComponent, deps: [{ token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { 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: ToggleslideComponent, isStandalone: true, selector: "BBSF-Toggleslide", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-toggleslide\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label [hidden]=\"options.hideLabel\" class=\"bbsf-label {{options.labelExtraClasses}}\">\r\n      {{options.labelValue}}\r\n    </label>\r\n    <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <mat-slide-toggle [(ngModel)]=\"slideValue\" [dir]=\"textDir\" [cssClass]=\"(options.viewType==1)?'':'col-md-9'\"\r\n        formControlName=\"{{options.name}}\" disableRipple=\"true\" [disabled]=\"options.isDisabled\"\r\n        (change)=\"changeValueToggle()\">\r\n      </mat-slide-toggle>\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.isReadonly\">\r\n      <span class=\"readonly-view\" *ngIf=\"options.value\">{{utilityService.getResourceValue(\"Yes\")}}</span>\r\n      <span class=\"readonly-view\" *ngIf=\"!options.value\">{{utilityService.getResourceValue(\"No\")}}</span>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n  </div>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i6.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i7$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToggleslideComponent, deps: [{ token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { 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: "19.2.15", type: ToggleslideComponent, isStandalone: true, selector: "BBSF-Toggleslide", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-toggleslide\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label [hidden]=\"options.hideLabel\" class=\"bbsf-label {{options.labelExtraClasses}}\">\r\n      {{options.labelValue}}\r\n    </label>\r\n    <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <mat-slide-toggle [(ngModel)]=\"slideValue\" [dir]=\"textDir\" [cssClass]=\"(options.viewType==1)?'':'col-md-9'\"\r\n        formControlName=\"{{options.name}}\" disableRipple=\"true\" [disabled]=\"options.isDisabled\"\r\n        (change)=\"changeValueToggle()\">\r\n      </mat-slide-toggle>\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.isReadonly\">\r\n      <span class=\"readonly-view\" *ngIf=\"options.value\">{{utilityService.getResourceValue(\"Yes\")}}</span>\r\n      <span class=\"readonly-view\" *ngIf=\"!options.value\">{{utilityService.getResourceValue(\"No\")}}</span>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n  </div>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i6.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i7$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToggleslideComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToggleslideComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-Toggleslide', standalone: true, imports: [
                         CommonModule,
@@ -1716,8 +1715,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * ```
  */
 class BBSFFormsBasicModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFFormsBasicModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: BBSFFormsBasicModule, imports: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFFormsBasicModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: BBSFFormsBasicModule, imports: [
             // Import standalone components
             TextboxComponent,
             TextAreaComponent,
@@ -1730,7 +1729,7 @@ class BBSFFormsBasicModule {
             CheckBoxComponent,
             RadioButtonComponent,
             ToggleslideComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFFormsBasicModule, imports: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFFormsBasicModule, imports: [
             // Import standalone components
             TextboxComponent,
             TextAreaComponent,
@@ -1738,7 +1737,7 @@ class BBSFFormsBasicModule {
             RadioButtonComponent,
             ToggleslideComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFFormsBasicModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFFormsBasicModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -2027,17 +2026,17 @@ class DropdownListComponent {
     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, isStandalone: true, 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: "ngmodule", type: CommonModule }, { 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: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: NgSelectModule }, { kind: "component", type: i7$2.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$2.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i7$2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i7$2.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", 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: "19.2.15", type: DropdownListComponent, isStandalone: true, 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\" ngOptgroupTmp 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: "ngmodule", type: CommonModule }, { 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: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: NgSelectModule }, { kind: "component", type: i7$2.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i7$2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i7$2.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-DropdownList', standalone: true, imports: [
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
                         NgSelectModule
-                    ], 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>" }]
+                    ], 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\" ngOptgroupTmp 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: [{
@@ -2079,17 +2078,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * ```
  */
 class BBSFDropdownModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: BBSFDropdownModule, imports: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: BBSFDropdownModule, imports: [
             // Import standalone component
             DropdownListComponent], exports: [
             // Re-export standalone component
             DropdownListComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFDropdownModule, imports: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFDropdownModule, imports: [
             // Import standalone component
             DropdownListComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFDropdownModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFDropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -2144,10 +2143,10 @@ class DefaultIntl extends OwlDateTimeIntl {
         /** A label for the hour12 button (PM) */
         this.hour12PMLabel = this.utilityService.getResourceValue('PM');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultIntl, deps: [{ token: i3.UtilityService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultIntl }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DefaultIntl, deps: [{ token: i3.UtilityService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DefaultIntl }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultIntl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DefaultIntl, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i3.UtilityService }] });
 
@@ -2386,8 +2385,8 @@ class DateInputComponent {
     translateByKey(key) {
         return this.utilityService.getResourceValue(key);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateInputComponent, deps: [{ token: OnPagingFiltersChangeService }, { token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: i5$1.DateTimeAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DateInputComponent, isStandalone: true, selector: "BBSF-DateTimePicker", inputs: { group: "group", options: "options", DropdownTemplateVariable: "DropdownTemplateVariable" }, outputs: { onChange: "onChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DateInputComponent, deps: [{ token: OnPagingFiltersChangeService }, { token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: i5$1.DateTimeAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DateInputComponent, isStandalone: true, selector: "BBSF-DateTimePicker", inputs: { group: "group", options: "options", DropdownTemplateVariable: "DropdownTemplateVariable" }, outputs: { onChange: "onChange" }, providers: [
             DatePipe,
             {
                 provide: OwlDateTimeIntl,
@@ -2395,7 +2394,7 @@ class DateInputComponent {
             }
         ], ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-datetime-picker\" [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\r\n      {{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    <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <input autocomplete=\"off\" [readonly]=\"true\" (dateTimeChange)=\"onDateSelect($event)\" [dir]=\"textDir\" class=\"form-control bnsights-control\r\n        {{options.extraClasses}} \" [ngClass]=\"(options.viewType==1)?'':'col-md-9'\" aria-describedby=\"email-error\"\r\n        aria-invalid=\"true\" formControlName=\"{{options.name}}\" [owlDateTime]=\"dt1\" [owlDateTimeTrigger]=\"dt1\"\r\n        [class.is-invalid]=\"datePickerFormControl.invalid &&\r\n        datePickerFormControl.touched\" [min]=\"options.startDate\" [max]=\"options.endDate\"\r\n        [hour12Timer]=\"options.hour12Timer\" [selectMode]=\"getSelectMode(options.selectMode)\"\r\n        placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\" #Dateinput>\r\n\r\n      <owl-date-time [pickerType]=\"getPickerType(options.pickerType)\" (afterPickerClosed)=\"checkIsPickerInFilter()\"\r\n        [startView]=\"startView\" [firstDayOfWeek]=\"options.firstDayOfWeek\" [hour12Timer]=\"options.hour12Timer\"\r\n        #dt1></owl-date-time>\r\n      <!--icon-->\r\n      <span class=\"copy-clipboard\" [owlDateTimeTrigger]=\"dt1\">\r\n        <span class=\"svg-icon\">\r\n          <svg id=\"Group_356\" data-name=\"Group 356\" xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0\r\n            0 48 48\">\r\n            <path id=\"Path_6737\" data-name=\"Path 6737\" d=\"M11.583,1a1,1,0,0,0-2,0V5.7h2Z\"></path>\r\n            <path id=\"Path_6738\" data-name=\"Path 6738\" d=\"M38.417,1a1,1,0,0,0-2,0V5.7h2Z\"></path>\r\n            <path id=\"Path_6739\" data-name=\"Path 6739\"\r\n              d=\"M0,43.146C0,45.822,1.826,48,4.07,48H43.928C46.174,48,48,45.822,48,43.146V17.121H0Z\" fill=\"#d5d5d5\">\r\n            </path>\r\n            <path id=\"Path_6740\" data-name=\"Path 6740\"\r\n              d=\"M43.929,5.7H38.417v5.512a1,1,0,1,1-2,0V5.7H11.583v5.512a1,1,0,1,1-2,0V5.7H4.07C1.826,5.7,0,7.877,0,10.555v4.566H48V10.555C48,7.877,46.174,5.7,43.929,5.7Z\"\r\n              fill=\"#595959\"></path>\r\n          </svg>\r\n        </span>\r\n      </span>\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.isReadonly\">\r\n      <span class=\"readonly-view\">{{options.value ? (options.value|date:'MMM d, y, h:mm a') :\r\n        translateByKey('NA')}}</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=\"(datePickerFormControl.invalid &&\r\n      datePickerFormControl.touched)\">\r\n      {{getErrorValidation(datePickerFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched\r\n    )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: OwlDateTimeModule }, { kind: "directive", type: i5$1.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i5$1.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i5$1.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "beforePickerOpen", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }, { kind: "ngmodule", type: OwlNativeDateTimeModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-DateTimePicker', standalone: true, imports: [
                         CommonModule,
@@ -2430,10 +2429,10 @@ class BBSFDateTimePipe {
         let latest_date = this.datePipe.transform(value, 'dd/MM/yyyy hh:mm a');
         return latest_date;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFDateTimePipe, deps: [{ token: i5.DatePipe }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: BBSFDateTimePipe, isStandalone: true, name: "bbsfDateTime" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFDateTimePipe, deps: [{ token: i5.DatePipe }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: BBSFDateTimePipe, isStandalone: true, name: "bbsfDateTime" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFDateTimePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFDateTimePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'bbsfDateTime',
@@ -2449,10 +2448,10 @@ class BBSFDatePipe {
         let latest_date = this.datePipe.transform(value, 'dd/MM/yyyy');
         return latest_date;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFDatePipe, deps: [{ token: i5.DatePipe }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: BBSFDatePipe, isStandalone: true, name: "bbsfDate" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFDatePipe, deps: [{ token: i5.DatePipe }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: BBSFDatePipe, isStandalone: true, name: "bbsfDate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFDatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFDatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'bbsfDate',
@@ -2490,8 +2489,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * ```
  */
 class BBSFDateTimeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: BBSFDateTimeModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: BBSFDateTimeModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             OwlDateTimeModule,
@@ -2506,7 +2505,7 @@ class BBSFDateTimeModule {
             // Re-export standalone pipes
             BBSFDateTimePipe,
             BBSFDatePipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFDateTimeModule, providers: [DatePipe], imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFDateTimeModule, providers: [DatePipe], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             OwlDateTimeModule,
@@ -2514,10 +2513,10 @@ class BBSFDateTimeModule {
             // Import standalone component
             DateInputComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFDateTimeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFDateTimeModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [],
+                    declarations: [], // No declarations - component and pipes are standalone
                     imports: [
                         CommonModule,
                         FormsModule,
@@ -2644,10 +2643,10 @@ class PhoneComponent {
         let value = selectedCountry;
         return value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PhoneComponent, 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: PhoneComponent, isStandalone: true, selector: "BBSF-Phone", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-phone\" [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\r\n      {{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\">*</span>\r\n    </label>\r\n    <!--input-->\r\n    <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <ngx-intl-tel-input [dir]=\"textDir\" [cssClass]=\"options.extraClasses\"\r\n        [preferredCountries]=\"options.preferredCountries\" [onlyCountries]=\"options.onlyCountries\"\r\n        [enableAutoCountrySelect]=\"true\" [enablePlaceholder]=\"options.enablePlaceholder\"\r\n        [searchCountryFlag]=\"options.allowSearch\" [searchCountryField]=\"[searchCountryField.Iso2,\r\n        searchCountryField.Name]\" [selectFirstCountry]=\"options.selectFirstCountry\"\r\n        [selectedCountryISO]=\"getSelectedCountry(options.selectedCountryISO)\" [separateDialCode]=\"separateDialCode\"\r\n        maxlength=\"15\" [(ngModel)]=\"options.value\" [phoneValidation]=\"options.phoneValidation\" [id]=\"options.name\"\r\n        name=\"{{options.name}}\" formControlName=\"{{options.name}}\" (change)=\"onValueChanged()\" [class.is-invalid]=\"phoneFormControl.invalid &&\r\n        phoneFormControl.touched\" aria-invalid=\"true\" class=\"form-control\">\r\n      </ngx-intl-tel-input>\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.isReadonly\"><a href=\"tel:{{options.value}}\">{{options.value}}</a>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"!options.isReadonly\" class=\"subtext-container\">\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=\"(phoneFormControl.invalid &&\r\n      phoneFormControl.touched)\">\r\n      {{getErrorValidation(phoneFormControl.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: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: NgxIntlTelInputModule }, { kind: "component", type: i6$1.NgxIntlTelInputComponent, selector: "ngx-intl-tel-input", inputs: ["value", "preferredCountries", "enablePlaceholder", "customPlaceholder", "numberFormat", "cssClass", "onlyCountries", "enableAutoCountrySelect", "searchCountryFlag", "searchCountryField", "searchCountryPlaceholder", "maxLength", "selectFirstCountry", "selectedCountryISO", "phoneValidation", "inputId", "separateDialCode"], outputs: ["countryChange"] }, { kind: "directive", type: i6$1.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PhoneComponent, 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: "19.2.15", type: PhoneComponent, isStandalone: true, selector: "BBSF-Phone", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-phone\" [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\r\n      {{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\">*</span>\r\n    </label>\r\n    <!--input-->\r\n    <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <ngx-intl-tel-input [dir]=\"textDir\" [cssClass]=\"options.extraClasses\"\r\n        [preferredCountries]=\"options.preferredCountries\" [onlyCountries]=\"options.onlyCountries\"\r\n        [enableAutoCountrySelect]=\"true\" [enablePlaceholder]=\"options.enablePlaceholder\"\r\n        [searchCountryFlag]=\"options.allowSearch\" [searchCountryField]=\"[searchCountryField.Iso2,\r\n        searchCountryField.Name]\" [selectFirstCountry]=\"options.selectFirstCountry\"\r\n        [selectedCountryISO]=\"getSelectedCountry(options.selectedCountryISO)\" [separateDialCode]=\"separateDialCode\"\r\n        maxlength=\"15\" [(ngModel)]=\"options.value\" [phoneValidation]=\"options.phoneValidation\" [id]=\"options.name\"\r\n        name=\"{{options.name}}\" formControlName=\"{{options.name}}\" (change)=\"onValueChanged()\" [class.is-invalid]=\"phoneFormControl.invalid &&\r\n        phoneFormControl.touched\" aria-invalid=\"true\" class=\"form-control\">\r\n      </ngx-intl-tel-input>\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.isReadonly\"><a href=\"tel:{{options.value}}\">{{options.value}}</a>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"!options.isReadonly\" class=\"subtext-container\">\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=\"(phoneFormControl.invalid &&\r\n      phoneFormControl.touched)\">\r\n      {{getErrorValidation(phoneFormControl.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: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: NgxIntlTelInputModule }, { kind: "component", type: i6$1.NgxIntlTelInputComponent, selector: "ngx-intl-tel-input", inputs: ["value", "preferredCountries", "enablePlaceholder", "customPlaceholder", "numberFormat", "cssClass", "onlyCountries", "enableAutoCountrySelect", "searchCountryFlag", "searchCountryField", "searchCountryPlaceholder", "maxLength", "selectFirstCountry", "selectedCountryISO", "phoneValidation", "inputId", "separateDialCode"], outputs: ["countryChange"] }, { kind: "directive", type: i6$1.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PhoneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PhoneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-Phone', standalone: true, imports: [
                         CommonModule,
@@ -2692,17 +2691,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * ```
  */
 class BBSFPhoneModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFPhoneModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: BBSFPhoneModule, imports: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFPhoneModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: BBSFPhoneModule, imports: [
             // Import standalone component
             PhoneComponent], exports: [
             // Re-export standalone component
             PhoneComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFPhoneModule, imports: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFPhoneModule, imports: [
             // Import standalone component
             PhoneComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFPhoneModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFPhoneModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -2804,10 +2803,10 @@ class FormComponent {
         }
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormComponent, deps: [{ token: ControlUtility }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: i3$2.NgbModal }, { token: i3$2.NgbActiveModal }, { token: i3$3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FormComponent, isStandalone: true, selector: "BBSF-Form", inputs: { options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<form [id]=\"fromName\" [FormGroup]=\"options.formGroup\" (ngSubmit)=\"submit()\" (keydown.enter)=\"options.disableSubmitWithEnterPress?$event.preventDefault():''\">\r\n\r\n  <ng-template #content><ng-content></ng-content></ng-template>\r\n\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</form>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgbModule }, { kind: "ngmodule", type: BlockUIModule }, { kind: "ngmodule", type: ToastrModule }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "ngmodule", type: BBSFUtilitiesModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormComponent, deps: [{ token: ControlUtility }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: i3$2.NgbModal }, { token: i3$2.NgbActiveModal }, { token: i3$3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: FormComponent, isStandalone: true, selector: "BBSF-Form", inputs: { options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<form [id]=\"fromName\" [FormGroup]=\"options.formGroup\" (ngSubmit)=\"submit()\" (keydown.enter)=\"options.disableSubmitWithEnterPress?$event.preventDefault():''\">\r\n\r\n  <ng-template #content><ng-content></ng-content></ng-template>\r\n\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</form>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgbModule }, { kind: "ngmodule", type: BlockUIModule }, { kind: "ngmodule", type: ToastrModule }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "ngmodule", type: BBSFUtilitiesModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-Form', standalone: true, imports: [
                         CommonModule,
@@ -2951,10 +2950,10 @@ class ConfirmationModalComponent {
         }
         this.utilityService.stopBlockUI();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConfirmationModalComponent, deps: [{ token: i3.UtilityService }, { token: i3$2.NgbModal }, { token: i3$3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ConfirmationModalComponent, isStandalone: true, selector: "BBSF-ConfirmationModal", inputs: { options: "options" }, viewQueries: [{ propertyName: "confirmationModal", first: true, predicate: ["confirmationModal"], descendants: true }], ngImport: i0, template: "", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: NgbModule }, { kind: "ngmodule", type: SweetAlert2Module }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmationModalComponent, deps: [{ token: i3.UtilityService }, { token: i3$2.NgbModal }, { token: i3$3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ConfirmationModalComponent, isStandalone: true, selector: "BBSF-ConfirmationModal", inputs: { options: "options" }, viewQueries: [{ propertyName: "confirmationModal", first: true, predicate: ["confirmationModal"], descendants: true }], ngImport: i0, template: "", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: NgbModule }, { kind: "ngmodule", type: SweetAlert2Module }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConfirmationModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmationModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-ConfirmationModal', standalone: true, imports: [CommonModule, NgbModule, SweetAlert2Module], schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], template: "" }]
         }], ctorParameters: () => [{ type: i3.UtilityService }, { type: i3$2.NgbModal }, { type: i3$3.Router }], propDecorators: { options: [{
@@ -3080,10 +3079,10 @@ class RecaptchaComponent {
         this.options.value = this.recaptchaModel;
         this.onChange.emit(this.reCaptchaFormControl.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RecaptchaComponent, deps: [{ token: ControlUtility }, { token: i3$1.RequestHandlerService }, { 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: RecaptchaComponent, isStandalone: true, selector: "BBSF-Recaptcha", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-recaptcha\" [formGroup]=\"group\">\r\n  <img class=\"h-100 w-100\" [src]=\"image\" />\r\n  <button class=\"btn btn-sm btn-icon\" type=\"button\" ngbTooltip=\"{{utilityService.getResourceValue('ReloadCaptcha')}}\"\r\n    (click)=\"loadImage()\">\r\n    <i class=\"fas fa-refresh\"></i>\r\n  </button>\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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--input-->\r\n    <div class=\"bbsf-input-container\">\r\n      <input class=\"form-control {{options.extraClasses}}\" [dir]=\"textDir\" aria-describedby=\"email-error\"\r\n        value=\"{{options.value.text}}\" aria-invalid=\"true\" formControlName=\"{{options.name}}\" type=\"text\"\r\n        [class.is-invalid]=\"reCaptchaFormControl.invalid && reCaptchaFormControl.touched\"\r\n        placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\" autocomplete=\"{{options.autoComplete}}\"\r\n        (change)=\"onTextChange($event)\" [readonly]=\"options.isReadonly\" />\r\n\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\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=\"(reCaptchaFormControl.invalid && reCaptchaFormControl.touched)\">\r\n      {{getErrorValidation(reCaptchaFormControl.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: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RecaptchaComponent, deps: [{ token: ControlUtility }, { token: i3$1.RequestHandlerService }, { 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: "19.2.15", type: RecaptchaComponent, isStandalone: true, selector: "BBSF-Recaptcha", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-recaptcha\" [formGroup]=\"group\">\r\n  <img class=\"h-100 w-100\" [src]=\"image\" />\r\n  <button class=\"btn btn-sm btn-icon\" type=\"button\" ngbTooltip=\"{{utilityService.getResourceValue('ReloadCaptcha')}}\"\r\n    (click)=\"loadImage()\">\r\n    <i class=\"fas fa-refresh\"></i>\r\n  </button>\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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--input-->\r\n    <div class=\"bbsf-input-container\">\r\n      <input class=\"form-control {{options.extraClasses}}\" [dir]=\"textDir\" aria-describedby=\"email-error\"\r\n        value=\"{{options.value.text}}\" aria-invalid=\"true\" formControlName=\"{{options.name}}\" type=\"text\"\r\n        [class.is-invalid]=\"reCaptchaFormControl.invalid && reCaptchaFormControl.touched\"\r\n        placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\" autocomplete=\"{{options.autoComplete}}\"\r\n        (change)=\"onTextChange($event)\" [readonly]=\"options.isReadonly\" />\r\n\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\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=\"(reCaptchaFormControl.invalid && reCaptchaFormControl.touched)\">\r\n      {{getErrorValidation(reCaptchaFormControl.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: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RecaptchaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RecaptchaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-Recaptcha', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], template: "<div class=\"form-group bbsf-control bbsf-recaptcha\" [formGroup]=\"group\">\r\n  <img class=\"h-100 w-100\" [src]=\"image\" />\r\n  <button class=\"btn btn-sm btn-icon\" type=\"button\" ngbTooltip=\"{{utilityService.getResourceValue('ReloadCaptcha')}}\"\r\n    (click)=\"loadImage()\">\r\n    <i class=\"fas fa-refresh\"></i>\r\n  </button>\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)\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--input-->\r\n    <div class=\"bbsf-input-container\">\r\n      <input class=\"form-control {{options.extraClasses}}\" [dir]=\"textDir\" aria-describedby=\"email-error\"\r\n        value=\"{{options.value.text}}\" aria-invalid=\"true\" formControlName=\"{{options.name}}\" type=\"text\"\r\n        [class.is-invalid]=\"reCaptchaFormControl.invalid && reCaptchaFormControl.touched\"\r\n        placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\" autocomplete=\"{{options.autoComplete}}\"\r\n        (change)=\"onTextChange($event)\" [readonly]=\"options.isReadonly\" />\r\n\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\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=\"(reCaptchaFormControl.invalid && reCaptchaFormControl.touched)\">\r\n      {{getErrorValidation(reCaptchaFormControl.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>" }]
         }], ctorParameters: () => [{ type: ControlUtility }, { type: i3$1.RequestHandlerService }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }], propDecorators: { group: [{
@@ -3134,11 +3133,26 @@ class JwPaginationComponent {
         }
     }
     ngOnChanges(changes) {
-        if (changes.items.firstChange)
-            return;
-        // reset page if items array has changed
-        if (changes.items.currentValue !== changes.items.previousValue) {
-            this.setPage(this.initialPage);
+        // Handle items array changes
+        if (changes.items && !changes.items.firstChange) {
+            // reset page if items array has changed
+            if (changes.items.currentValue !== changes.items.previousValue) {
+                this.setPage(this.initialPage);
+            }
+        }
+        // Handle initialPage changes (when navigating between pages)
+        if (changes.initialPage && !changes.initialPage.firstChange) {
+            if (changes.initialPage.currentValue !== changes.initialPage.previousValue) {
+                this.setPage(this.initialPage);
+            }
+        }
+        // Handle pageSize or maxPages changes
+        if ((changes.pageSize && !changes.pageSize.firstChange) ||
+            (changes.maxPages && !changes.maxPages.firstChange)) {
+            // Recalculate pagination with new settings
+            if (this.items && this.items.length) {
+                this.setPage(this.pager.currentPage || this.initialPage);
+            }
         }
     }
     setPage(page) {
@@ -3212,28 +3226,28 @@ class JwPaginationComponent {
             pages: pages
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: JwPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: JwPaginationComponent, isStandalone: true, selector: "jw-pagination", inputs: { items: "items", initialPage: "initialPage", pageSize: "pageSize", maxPages: "maxPages", ShowFirstAndLast: "ShowFirstAndLast" }, outputs: { changePage: "changePage" }, usesOnChanges: true, ngImport: i0, template: `
-  <ul *ngIf="pager.pages && pager.pages.length" class="pagination">
-  <li *ngIf="ShowFirstAndLast" [ngClass]="{disabled:pager.currentPage === 1}" class="page-item first-item">
-      <a (click)="setPage(1)" class="page-link">❮❮</a>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: JwPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: JwPaginationComponent, isStandalone: true, selector: "jw-pagination", inputs: { items: "items", initialPage: "initialPage", pageSize: "pageSize", maxPages: "maxPages", ShowFirstAndLast: "ShowFirstAndLast" }, outputs: { changePage: "changePage" }, usesOnChanges: true, ngImport: i0, template: `
+<ul *ngIf="pager.pages && pager.pages.length" class="pagination">
+  <li *ngIf="ShowFirstAndLast" [class.disabled]="pager.currentPage === 1" class="page-item first-item">
+    <button type="button" class="page-link" (click)="setPage(1)" [attr.aria-disabled]="pager.currentPage === 1 ? true : null" tabindex="{{pager.currentPage === 1 ? -1 : 0}}">❮❮</button>
   </li>
-  <li [ngClass]="{disabled:pager.currentPage === 1}" class="page-item previous-item">
-      <a (click)="setPage(pager.currentPage - 1)" class="page-link">❮</a>
+  <li [class.disabled]="pager.currentPage === 1" class="page-item previous-item">
+    <button type="button" class="page-link" (click)="setPage(pager.currentPage - 1)" [attr.aria-disabled]="pager.currentPage === 1 ? true : null" tabindex="{{pager.currentPage === 1 ? -1 : 0}}">❮</button>
   </li>
-  <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}" class="page-item number-item">
-      <a (click)="setPage(page)" class="page-link">{{page}}</a>
+  <li *ngFor="let page of pager.pages" [class.active]="pager.currentPage === page" class="page-item number-item">
+    <button type="button" class="page-link" (click)="setPage(page)" [attr.aria-current]="pager.currentPage === page ? 'page' : null">{{page}}</button>
   </li>
-  <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}" class="page-item next-item">
-      <a (click)="setPage(pager.currentPage + 1)" class="page-link">❯</a>
+  <li [class.disabled]="pager.currentPage === pager.totalPages" class="page-item next-item">
+    <button type="button" class="page-link" (click)="setPage(pager.currentPage + 1)" [attr.aria-disabled]="pager.currentPage === pager.totalPages ? true : null" tabindex="{{pager.currentPage === pager.totalPages ? -1 : 0}}">❯</button>
   </li>
-  <li  *ngIf="ShowFirstAndLast" [ngClass]="{disabled:pager.currentPage === pager.totalPages}" class="page-item last-item">
-      <a (click)="setPage(pager.totalPages)" class="page-link">❯❯</a>
+  <li *ngIf="ShowFirstAndLast" [class.disabled]="pager.currentPage === pager.totalPages" class="page-item last-item">
+    <button type="button" class="page-link" (click)="setPage(pager.totalPages)" [attr.aria-disabled]="pager.currentPage === pager.totalPages ? true : null" tabindex="{{pager.currentPage === pager.totalPages ? -1 : 0}}">❯❯</button>
   </li>
 </ul>
-`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }] }); }
+`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: JwPaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: JwPaginationComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'jw-pagination',
@@ -3241,21 +3255,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     imports: [CommonModule],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
                     template: `
-  <ul *ngIf="pager.pages && pager.pages.length" class="pagination">
-  <li *ngIf="ShowFirstAndLast" [ngClass]="{disabled:pager.currentPage === 1}" class="page-item first-item">
-      <a (click)="setPage(1)" class="page-link">❮❮</a>
+<ul *ngIf="pager.pages && pager.pages.length" class="pagination">
+  <li *ngIf="ShowFirstAndLast" [class.disabled]="pager.currentPage === 1" class="page-item first-item">
+    <button type="button" class="page-link" (click)="setPage(1)" [attr.aria-disabled]="pager.currentPage === 1 ? true : null" tabindex="{{pager.currentPage === 1 ? -1 : 0}}">❮❮</button>
   </li>
-  <li [ngClass]="{disabled:pager.currentPage === 1}" class="page-item previous-item">
-      <a (click)="setPage(pager.currentPage - 1)" class="page-link">❮</a>
+  <li [class.disabled]="pager.currentPage === 1" class="page-item previous-item">
+    <button type="button" class="page-link" (click)="setPage(pager.currentPage - 1)" [attr.aria-disabled]="pager.currentPage === 1 ? true : null" tabindex="{{pager.currentPage === 1 ? -1 : 0}}">❮</button>
   </li>
-  <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}" class="page-item number-item">
-      <a (click)="setPage(page)" class="page-link">{{page}}</a>
+  <li *ngFor="let page of pager.pages" [class.active]="pager.currentPage === page" class="page-item number-item">
+    <button type="button" class="page-link" (click)="setPage(page)" [attr.aria-current]="pager.currentPage === page ? 'page' : null">{{page}}</button>
   </li>
-  <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}" class="page-item next-item">
-      <a (click)="setPage(pager.currentPage + 1)" class="page-link">❯</a>
+  <li [class.disabled]="pager.currentPage === pager.totalPages" class="page-item next-item">
+    <button type="button" class="page-link" (click)="setPage(pager.currentPage + 1)" [attr.aria-disabled]="pager.currentPage === pager.totalPages ? true : null" tabindex="{{pager.currentPage === pager.totalPages ? -1 : 0}}">❯</button>
   </li>
-  <li  *ngIf="ShowFirstAndLast" [ngClass]="{disabled:pager.currentPage === pager.totalPages}" class="page-item last-item">
-      <a (click)="setPage(pager.totalPages)" class="page-link">❯❯</a>
+  <li *ngIf="ShowFirstAndLast" [class.disabled]="pager.currentPage === pager.totalPages" class="page-item last-item">
+    <button type="button" class="page-link" (click)="setPage(pager.totalPages)" [attr.aria-disabled]="pager.currentPage === pager.totalPages ? true : null" tabindex="{{pager.currentPage === pager.totalPages ? -1 : 0}}">❯❯</button>
   </li>
 </ul>
 `
@@ -3275,7 +3289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 class PagingComponent {
-    constructor(utilityService, http, router, route, location, onChangeService, requestHandlerService, cdr) {
+    constructor(utilityService, http, router, route, location, onChangeService, requestHandlerService, cdr, renderer, elementRef) {
         this.utilityService = utilityService;
         this.http = http;
         this.router = router;
@@ -3284,6 +3298,8 @@ class PagingComponent {
         this.onChangeService = onChangeService;
         this.requestHandlerService = requestHandlerService;
         this.cdr = cdr;
+        this.renderer = renderer;
+        this.elementRef = elementRef;
         this.items = [];
         this.result = [];
         this.pagerConfig = null;
@@ -3547,18 +3563,25 @@ class PagingComponent {
         }
         if (this.options.onKeyPressFiltersControlNames != null && this.options.onKeyPressFiltersControlNames.length > 0) {
             const OnKeyPressFiltersControlNames = this.options.onKeyPressFiltersControlNames;
-            for (let index = 0; index < OnKeyPressFiltersControlNames.length; index++) {
-                const OnKeyPressFiltersControlName = OnKeyPressFiltersControlNames[index];
-                let element = this.group.get(OnKeyPressFiltersControlName).nativeElement;
-                element.addEventListener("keypress", (e) => {
-                    if (e.key == "Enter") {
+            // Use Renderer2 to listen to document keypress event
+            // This works with elements in parent component
+            const keypressListener = this.renderer.listen('document', 'keypress', (event) => {
+                if (event.key === "Enter") {
+                    const target = event.target;
+                    const formControlName = target.getAttribute('id');
+                    if (formControlName && OnKeyPressFiltersControlNames.includes(formControlName)) {
+                        event.preventDefault();
+                        event.stopPropagation();
                         this.currentPage = 1;
                         this.isFirstCall = true;
                         this.updateHistoryState();
                         this.getItemList(this.currentPage, true);
+                        return false;
                     }
-                }, false);
-            }
+                }
+            });
+            // Store the unsubscribe function
+            this.subscriptions.add({ unsubscribe: keypressListener });
         }
         //Add click event on Reset Filter button
         if (this.options.resetFilterButtonName != null) {
@@ -3844,21 +3867,21 @@ class PagingComponent {
         }
         return filters;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PagingComponent, deps: [{ token: i3.UtilityService }, { token: i1.HttpClient }, { token: i3$3.Router }, { token: i3$3.ActivatedRoute }, { token: i5.Location }, { token: OnPagingFiltersChangeService }, { token: i3$1.RequestHandlerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PagingComponent, isStandalone: true, selector: "BBSF-Paging", inputs: { options: "options", group: "group" }, outputs: { Items: "Items", pageStateRestored: "pageStateRestored" }, host: { listeners: { "window:popstate": "onPopState($event)" } }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-paging\" *ngIf=\"(result.length > 0)\" role=\"navigation\" [attr.aria-label]=\"utilityService.getResourceValue('Pagination')\">\r\n  <!--paging container-->\r\n  <div class=\"bbsf-paging-container\" *ngIf=\"!options.isLoadMoreControl\">\r\n    <!--items-->\r\n    <div class=\"bbsf-pagination\">\r\n      <jw-pagination [items]=\"items\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\"\r\n        (changePage)=\"onChangePage($event)\" [pageSize]=\"options.pageSize\" [ShowFirstAndLast]=\"options.showFirstAndLast\"\r\n        [initialPage]=\"currentPage\" [maxPages]=\"10\"></jw-pagination>\r\n    </div>\r\n    <!--page count-->\r\n    <div class=\"bbsf-pages\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\">\r\n      <select (change)=\"changePageSize($event)\" *ngIf=\"options.showPageSizeOption\" \r\n        [attr.aria-label]=\"utilityService.getResourceValue('SelectPageSize')\" \r\n        [ngbTooltip]=\"utilityService.getResourceValue('SelectPageSize')\">\r\n        <option>10</option>\r\n        <option>20</option>\r\n        <option>50</option>\r\n        <option>100</option>\r\n        <option>200</option>\r\n      </select>\r\n      <div class=\"bssf-items\" [attr.aria-label]=\"utilityService.getResourceValue('PageInfo')\">\r\n        <strong>{{totalRow}}</strong> {{itemsText}} {{utilityService.getResourceValue(\"In\")}} <strong>\r\n          {{Pages}}</strong> {{pagesText}}\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!--load more-->\r\n  <div class=\"bbsf-loadmore\" *ngIf=\"options.isLoadMoreControl\">\r\n    <div class=\"search-results\" infinite-scroll [infiniteScrollDistance]=\"scrollDistance\"\r\n      [infiniteScrollUpDistance]=\"scrollUpDistance\" [infiniteScrollThrottle]=\"throttle\"\r\n      (scrolled)=\"options.isInfiniteScroll==true?onScrollDown():null\" [scrollWindow]=\"options.scrollWindow\"\r\n      [infiniteScrollContainer]=\"options.infiniteScrollContainer\">\r\n    </div>\r\n    <button class=\"btn btn-sm btn-primary\" (click)=\"onScrollDown()\"\r\n      *ngIf=\"!(result.length==totalRow)\"\r\n      [attr.aria-label]=\"utilityService.getResourceValue('LoadMore')\"\r\n      [ngbTooltip]=\"utilityService.getResourceValue('LoadMore')\">{{utilityService.getResourceValue(\"LoadMore\")}}</button>\r\n  </div>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i3$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: BlockUIModule }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "component", type: JwPaginationComponent, selector: "jw-pagination", inputs: ["items", "initialPage", "pageSize", "maxPages", "ShowFirstAndLast"], outputs: ["changePage"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PagingComponent, deps: [{ token: i3.UtilityService }, { token: i1.HttpClient }, { token: i3$3.Router }, { token: i3$3.ActivatedRoute }, { token: i5.Location }, { token: OnPagingFiltersChangeService }, { token: i3$1.RequestHandlerService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: PagingComponent, isStandalone: true, selector: "BBSF-Paging", inputs: { options: "options", group: "group" }, outputs: { Items: "Items", pageStateRestored: "pageStateRestored" }, host: { listeners: { "window:popstate": "onPopState($event)" } }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-paging\" *ngIf=\"(result.length > 0)\" role=\"navigation\" [attr.aria-label]=\"utilityService.getResourceValue('Pagination')\">\r\n  <!--paging container-->\r\n  <div class=\"bbsf-paging-container\" *ngIf=\"!options.isLoadMoreControl\">\r\n    <!--items-->\r\n    <div class=\"bbsf-pagination\">\r\n      <jw-pagination [items]=\"items\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\"\r\n        (changePage)=\"onChangePage($event)\" [pageSize]=\"options.pageSize\" [ShowFirstAndLast]=\"options.showFirstAndLast\"\r\n        [initialPage]=\"currentPage\" [maxPages]=\"10\"></jw-pagination>\r\n    </div>\r\n    <!--page count-->\r\n    <div class=\"bbsf-pages\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\">\r\n      <select (change)=\"changePageSize($event)\" *ngIf=\"options.showPageSizeOption\" \r\n        [attr.aria-label]=\"utilityService.getResourceValue('SelectPageSize')\" \r\n        [ngbTooltip]=\"utilityService.getResourceValue('SelectPageSize')\">\r\n        <option>10</option>\r\n        <option>20</option>\r\n        <option>50</option>\r\n        <option>100</option>\r\n        <option>200</option>\r\n      </select>\r\n      <div class=\"bssf-items\" [attr.aria-label]=\"utilityService.getResourceValue('PageInfo')\">\r\n        <strong>{{totalRow}}</strong> {{itemsText}} {{utilityService.getResourceValue(\"In\")}} <strong>\r\n          {{Pages}}</strong> {{pagesText}}\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!--load more-->\r\n  <div class=\"bbsf-loadmore\" *ngIf=\"options.isLoadMoreControl\">\r\n    <div class=\"search-results\" infinite-scroll [infiniteScrollDistance]=\"scrollDistance\"\r\n      [infiniteScrollUpDistance]=\"scrollUpDistance\" [infiniteScrollThrottle]=\"throttle\"\r\n      (scrolled)=\"options.isInfiniteScroll==true?onScrollDown():null\" [scrollWindow]=\"options.scrollWindow\"\r\n      [infiniteScrollContainer]=\"options.infiniteScrollContainer\">\r\n    </div>\r\n    <button class=\"btn btn-sm btn-primary\" (click)=\"onScrollDown()\"\r\n      *ngIf=\"!(result.length==totalRow)\"\r\n      [attr.aria-label]=\"utilityService.getResourceValue('LoadMore')\"\r\n      [ngbTooltip]=\"utilityService.getResourceValue('LoadMore')\">{{utilityService.getResourceValue(\"LoadMore\")}}</button>\r\n  </div>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: BlockUIModule }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "component", type: JwPaginationComponent, selector: "jw-pagination", inputs: ["items", "initialPage", "pageSize", "maxPages", "ShowFirstAndLast"], outputs: ["changePage"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PagingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PagingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-Paging', standalone: true, imports: [
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
-                        NgbModule,
+                        NgbTooltip,
                         BlockUIModule,
                         InlineSVGModule,
                         JwPaginationComponent
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], template: "<div class=\"form-group bbsf-control bbsf-paging\" *ngIf=\"(result.length > 0)\" role=\"navigation\" [attr.aria-label]=\"utilityService.getResourceValue('Pagination')\">\r\n  <!--paging container-->\r\n  <div class=\"bbsf-paging-container\" *ngIf=\"!options.isLoadMoreControl\">\r\n    <!--items-->\r\n    <div class=\"bbsf-pagination\">\r\n      <jw-pagination [items]=\"items\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\"\r\n        (changePage)=\"onChangePage($event)\" [pageSize]=\"options.pageSize\" [ShowFirstAndLast]=\"options.showFirstAndLast\"\r\n        [initialPage]=\"currentPage\" [maxPages]=\"10\"></jw-pagination>\r\n    </div>\r\n    <!--page count-->\r\n    <div class=\"bbsf-pages\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\">\r\n      <select (change)=\"changePageSize($event)\" *ngIf=\"options.showPageSizeOption\" \r\n        [attr.aria-label]=\"utilityService.getResourceValue('SelectPageSize')\" \r\n        [ngbTooltip]=\"utilityService.getResourceValue('SelectPageSize')\">\r\n        <option>10</option>\r\n        <option>20</option>\r\n        <option>50</option>\r\n        <option>100</option>\r\n        <option>200</option>\r\n      </select>\r\n      <div class=\"bssf-items\" [attr.aria-label]=\"utilityService.getResourceValue('PageInfo')\">\r\n        <strong>{{totalRow}}</strong> {{itemsText}} {{utilityService.getResourceValue(\"In\")}} <strong>\r\n          {{Pages}}</strong> {{pagesText}}\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!--load more-->\r\n  <div class=\"bbsf-loadmore\" *ngIf=\"options.isLoadMoreControl\">\r\n    <div class=\"search-results\" infinite-scroll [infiniteScrollDistance]=\"scrollDistance\"\r\n      [infiniteScrollUpDistance]=\"scrollUpDistance\" [infiniteScrollThrottle]=\"throttle\"\r\n      (scrolled)=\"options.isInfiniteScroll==true?onScrollDown():null\" [scrollWindow]=\"options.scrollWindow\"\r\n      [infiniteScrollContainer]=\"options.infiniteScrollContainer\">\r\n    </div>\r\n    <button class=\"btn btn-sm btn-primary\" (click)=\"onScrollDown()\"\r\n      *ngIf=\"!(result.length==totalRow)\"\r\n      [attr.aria-label]=\"utilityService.getResourceValue('LoadMore')\"\r\n      [ngbTooltip]=\"utilityService.getResourceValue('LoadMore')\">{{utilityService.getResourceValue(\"LoadMore\")}}</button>\r\n  </div>\r\n</div>" }]
-        }], ctorParameters: () => [{ type: i3.UtilityService }, { type: i1.HttpClient }, { type: i3$3.Router }, { type: i3$3.ActivatedRoute }, { type: i5.Location }, { type: OnPagingFiltersChangeService }, { type: i3$1.RequestHandlerService }, { type: i0.ChangeDetectorRef }], propDecorators: { Items: [{
+        }], ctorParameters: () => [{ type: i3.UtilityService }, { type: i1.HttpClient }, { type: i3$3.Router }, { type: i3$3.ActivatedRoute }, { type: i5.Location }, { type: OnPagingFiltersChangeService }, { type: i3$1.RequestHandlerService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { Items: [{
                 type: Output
             }], pageStateRestored: [{
                 type: Output
@@ -3919,10 +3942,10 @@ class PageHeaderComponentComponent {
     ngOnInit() {
         this.EN = this.utilityService.isCurrentLanguageEnglish();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageHeaderComponentComponent, deps: [{ token: i3$3.Router }, { token: i3.UtilityService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PageHeaderComponentComponent, isStandalone: true, selector: "bbsf-page-header-component", inputs: { group: "group", options: "options" }, ngImport: i0, template: "<!--toolbar-->\r\n<div class=\"toolbar\" style=\"overflow:hidden;position:relative;\">\r\n  <img class=\"pattern\" src=\"./src/assets/images/Bg-pattern.png\" />\r\n  <div class=\"container-xxl\">\r\n    <div class=\"d-flex justify-content-between align-items-center\">\r\n      <div class=\"page-title w-100\" [ngClass]=\"!options.listing? 'mb-0' : ''\">\r\n        <h3 *ngIf=\"options.titleKey||options.titleValue\">{{options.titleValue == null ? translate(options.titleKey) :\r\n          options.titleValue }}</h3>\r\n        <p class=\"sub-title\" *ngIf=\"options.listing\">\r\n          {{translate(options.subTitleKey)}}\r\n        </p>\r\n        <div class=\"d-flex justify-content-between align-items-end\">\r\n          <ul class=\"breadcrumb breadcrumb-dot\" *ngIf=\"options.breadCrumb.active\">\r\n            <ng-container *ngFor=\"let item of options.breadCrumb.breadCrumbItems\">\r\n              <li class=\"breadcrumb-item\" *ngIf=\"!item.active\">\r\n                <a *ngIf=\"item.route\" [routerLink]=\"item.route\">{{ item.label }}</a>\r\n                <a *ngIf=\"!item.route\" href=\"javascript: void(0);\">{{ item.label }}</a>\r\n              </li>\r\n              <li class=\"breadcrumb-item active\" *ngIf=\"item.active\">\r\n                <span>{{ item.label }}</span>\r\n              </li>\r\n            </ng-container>\r\n          </ul>\r\n          <div class=\"page-subheader\" *ngIf=\"options.dropDownActions.active\">\r\n            <button [routerLink]=\"item.routerLink\" (click)='item.function?item.function():\"\"'\r\n              class=\"btn btn-light btn-sm subheader-btn export-btn\"\r\n              *ngFor=\"let item of options.dropDownActions.dropdownActionItems\">\r\n              <span class=\"svg-icon svg-icon-3\" [inlineSVG]=\"item.svg\"></span>\r\n              {{item.text}}\r\n            </button>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"page-subheader\">\r\n      <BBSF-TextBox *ngIf=\"options.searchTextBox.active\" [options]=\"options.searchTextBox.textSearchBoxOptions\"\r\n        [group]=\"group\">\r\n      </BBSF-TextBox>\r\n      <div class=\"d-flex align-items-center\">\r\n        <div class=\"subheader-btn list-grid\" *ngIf=\"options.gridView.active\">\r\n          <div class=\"list-grid-item\" [ngClass]=\"options.gridView.showGridViewByDefault? 'list-grid-item-active' : ''\"\r\n            (click)=\"options.gridView.toggleFunction()\">\r\n            <span class=\"svg-icon svg-icon-4\" [inlineSVG]=\"'/assets/images/Listing.svg'\">\r\n            </span>\r\n          </div>\r\n          <div class=\"list-grid-item\" [ngClass]=\"!options.gridView.showGridViewByDefault? 'list-grid-item-active' : ''\"\r\n            (click)=\"options.gridView.toggleFunction()\">\r\n            <span class=\"svg-icon svg-icon-4\" [inlineSVG]=\"'/assets/images/Grid.svg'\">\r\n            </span>\r\n          </div>\r\n        </div>\r\n        <button type=\"button\" *ngIf=\"options.exportButton.active\" (click)=\"options.exportButton.function()\"\r\n          class=\"btn btn-light btn-sm subheader-btn export-btn\">\r\n          <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"'/assets/images/export.svg'\"></span>\r\n          {{translate(options.exportButton.buttonTextKey)}}\r\n        </button>\r\n\r\n\r\n        <div *ngIf=\"options.filtersButton.active\" ngbDropdown container=\"body\"\r\n          [placement]=\"EN ? 'bottom-right' : 'bottom-left'\" #dropdown=\"ngbDropdown\" class=\"subheader-btn\">\r\n          <button href=\"javascript:;\" (click)=\"options.filtersButton.function()\" ngbDropdownToggle\r\n            class=\"btn btn-light btn-sm filters-btn\">\r\n            <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"'/assets/images/arrowdropdown.svg'\"></span>\r\n            {{translate(options.filtersButton.buttonTextKey)}}\r\n          </button>\r\n          <div ngbDropdownMenu class=\"dropdown-menu-custom filters-dropdown\">\r\n\r\n            <div [hidden]=\"options.filters.showLoadingInFiltersBox\">\r\n              <div class=\"filter-select\">\r\n                <span *ngFor=\"let control of options.filters.controlsOptions\">\r\n                  <span [ngSwitch]=\"control.key\">\r\n                    <span *ngSwitchCase=\"DataTypeEnum.SingleSelect\">\r\n                      <BBSF-DropdownList [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DropdownList>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.MulipleSelect\">\r\n                      <BBSF-DropdownList [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DropdownList>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.Date\">\r\n                      <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DateTimePicker>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.DateTime\">\r\n                      <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DateTimePicker>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.Time\">\r\n                      <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DateTimePicker>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.Boolean\">\r\n                      <BBSF-Toggleslide [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-Toggleslide>\r\n                    </span>\r\n                    <span *ngSwitchDefault>\r\n                      <BBSF-TagsInput [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-TagsInput>\r\n                    </span>\r\n                  </span>\r\n                </span>\r\n              </div>\r\n              <div class=\"dropdown-menu-buttons\">\r\n                <button class=\"btn btn-sm btn-light\" (click)=\"options.filters.restFunction(dropdown)\">\r\n                  {{translate(\"Reset\")}}\r\n                </button>\r\n                <button class=\"btn btn-brand btn-sm\" (click)=\"options.filters.applyFunction(dropdown)\">\r\n                  {{translate(\"Apply\")}}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <button appPreventDoubleClick type=\"button\" *ngIf=\"options.addButton.active\"\r\n          (click)=\"options.addButton.function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n          {{translate(options.addButton.buttonTextKey)}}\r\n        </button>\r\n        <button appPreventDoubleClick type=\"button\" *ngIf=\"options.editButton.active\"\r\n          (click)=\"options.editButton.function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n          {{translate(options.editButton.buttonTextKey)}}\r\n        </button>\r\n        <button appPreventDoubleClick type=\"button\" *ngIf=\"options.deleteButton.active\"\r\n          (click)=\"options.deleteButton.function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n          {{translate(options.deleteButton.buttonTextKey)}}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!--End toolbar-->", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i3$2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i3$2.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i3$2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i7.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageHeaderComponentComponent, deps: [{ token: i3$3.Router }, { token: i3.UtilityService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: PageHeaderComponentComponent, isStandalone: true, selector: "bbsf-page-header-component", inputs: { group: "group", options: "options" }, ngImport: i0, template: "<!--toolbar-->\r\n<div class=\"toolbar\" style=\"overflow:hidden;position:relative;\">\r\n  <img class=\"pattern\" src=\"./src/assets/images/Bg-pattern.png\" />\r\n  <div class=\"container-xxl\">\r\n    <div class=\"d-flex justify-content-between align-items-center\">\r\n      <div class=\"page-title w-100\" [ngClass]=\"!options.listing? 'mb-0' : ''\">\r\n        <h3 *ngIf=\"options.titleKey||options.titleValue\">{{options.titleValue == null ? translate(options.titleKey) :\r\n          options.titleValue }}</h3>\r\n        <p class=\"sub-title\" *ngIf=\"options.listing\">\r\n          {{translate(options.subTitleKey)}}\r\n        </p>\r\n        <div class=\"d-flex justify-content-between align-items-end\">\r\n          <ul class=\"breadcrumb breadcrumb-dot\" *ngIf=\"options.breadCrumb.active\">\r\n            <ng-container *ngFor=\"let item of options.breadCrumb.breadCrumbItems\">\r\n              <li class=\"breadcrumb-item\" *ngIf=\"!item.active\">\r\n                <a *ngIf=\"item.route\" [routerLink]=\"item.route\">{{ item.label }}</a>\r\n                <a *ngIf=\"!item.route\" href=\"javascript: void(0);\">{{ item.label }}</a>\r\n              </li>\r\n              <li class=\"breadcrumb-item active\" *ngIf=\"item.active\">\r\n                <span>{{ item.label }}</span>\r\n              </li>\r\n            </ng-container>\r\n          </ul>\r\n          <div class=\"page-subheader\" *ngIf=\"options.dropDownActions.active\">\r\n            <button [routerLink]=\"item.routerLink\" (click)='item.function?item.function():\"\"'\r\n              class=\"btn btn-light btn-sm subheader-btn export-btn\"\r\n              *ngFor=\"let item of options.dropDownActions.dropdownActionItems\">\r\n              <span class=\"svg-icon svg-icon-3\" [inlineSVG]=\"item.svg\"></span>\r\n              {{item.text}}\r\n            </button>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"page-subheader\">\r\n      <BBSF-TextBox *ngIf=\"options.searchTextBox.active\" [options]=\"options.searchTextBox.textSearchBoxOptions\"\r\n        [group]=\"group\">\r\n      </BBSF-TextBox>\r\n      <div class=\"d-flex align-items-center\">\r\n        <div class=\"subheader-btn list-grid\" *ngIf=\"options.gridView.active\">\r\n          <div class=\"list-grid-item\" [ngClass]=\"options.gridView.showGridViewByDefault? 'list-grid-item-active' : ''\"\r\n            (click)=\"options.gridView.toggleFunction()\">\r\n            <span class=\"svg-icon svg-icon-4\" [inlineSVG]=\"'/assets/images/Listing.svg'\">\r\n            </span>\r\n          </div>\r\n          <div class=\"list-grid-item\" [ngClass]=\"!options.gridView.showGridViewByDefault? 'list-grid-item-active' : ''\"\r\n            (click)=\"options.gridView.toggleFunction()\">\r\n            <span class=\"svg-icon svg-icon-4\" [inlineSVG]=\"'/assets/images/Grid.svg'\">\r\n            </span>\r\n          </div>\r\n        </div>\r\n        <button type=\"button\" *ngIf=\"options.exportButton.active\" (click)=\"options.exportButton.function()\"\r\n          class=\"btn btn-light btn-sm subheader-btn export-btn\">\r\n          <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"'/assets/images/export.svg'\"></span>\r\n          {{translate(options.exportButton.buttonTextKey)}}\r\n        </button>\r\n\r\n\r\n        <div *ngIf=\"options.filtersButton.active\" ngbDropdown container=\"body\"\r\n          [placement]=\"EN ? 'bottom-right' : 'bottom-left'\" #dropdown=\"ngbDropdown\" class=\"subheader-btn\">\r\n          <button href=\"javascript:;\" (click)=\"options.filtersButton.function()\" ngbDropdownToggle\r\n            class=\"btn btn-light btn-sm filters-btn\">\r\n            <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"'/assets/images/arrowdropdown.svg'\"></span>\r\n            {{translate(options.filtersButton.buttonTextKey)}}\r\n          </button>\r\n          <div ngbDropdownMenu class=\"dropdown-menu-custom filters-dropdown\">\r\n\r\n            <div [hidden]=\"options.filters.showLoadingInFiltersBox\">\r\n              <div class=\"filter-select\">\r\n                <span *ngFor=\"let control of options.filters.controlsOptions\">\r\n                  <span [ngSwitch]=\"control.key\">\r\n                    <span *ngSwitchCase=\"DataTypeEnum.SingleSelect\">\r\n                      <BBSF-DropdownList [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DropdownList>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.MulipleSelect\">\r\n                      <BBSF-DropdownList [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DropdownList>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.Date\">\r\n                      <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DateTimePicker>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.DateTime\">\r\n                      <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DateTimePicker>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.Time\">\r\n                      <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DateTimePicker>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.Boolean\">\r\n                      <BBSF-Toggleslide [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-Toggleslide>\r\n                    </span>\r\n                    <span *ngSwitchDefault>\r\n                      <BBSF-TagsInput [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-TagsInput>\r\n                    </span>\r\n                  </span>\r\n                </span>\r\n              </div>\r\n              <div class=\"dropdown-menu-buttons\">\r\n                <button class=\"btn btn-sm btn-light\" (click)=\"options.filters.restFunction(dropdown)\">\r\n                  {{translate(\"Reset\")}}\r\n                </button>\r\n                <button class=\"btn btn-brand btn-sm\" (click)=\"options.filters.applyFunction(dropdown)\">\r\n                  {{translate(\"Apply\")}}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <button appPreventDoubleClick type=\"button\" *ngIf=\"options.addButton.active\"\r\n          (click)=\"options.addButton.function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n          {{translate(options.addButton.buttonTextKey)}}\r\n        </button>\r\n        <button appPreventDoubleClick type=\"button\" *ngIf=\"options.editButton.active\"\r\n          (click)=\"options.editButton.function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n          {{translate(options.editButton.buttonTextKey)}}\r\n        </button>\r\n        <button appPreventDoubleClick type=\"button\" *ngIf=\"options.deleteButton.active\"\r\n          (click)=\"options.deleteButton.function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n          {{translate(options.deleteButton.buttonTextKey)}}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!--End toolbar-->", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i3$2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i3$2.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i3$2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i7.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageHeaderComponentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageHeaderComponentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bbsf-page-header-component', standalone: true, imports: [
                         CommonModule,
@@ -3958,10 +3981,10 @@ class PreventDoubleClickDirective {
             this.renderer.removeClass(this.elementRef.nativeElement, 'disabled');
         }, this.debounceTime);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PreventDoubleClickDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: PreventDoubleClickDirective, isStandalone: true, selector: "[appPreventDoubleClick]", inputs: { debounceTime: "debounceTime" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PreventDoubleClickDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: PreventDoubleClickDirective, isStandalone: true, selector: "[appPreventDoubleClick]", inputs: { debounceTime: "debounceTime" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PreventDoubleClickDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PreventDoubleClickDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appPreventDoubleClick]',
@@ -4006,8 +4029,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * ```
  */
 class BBSFUtilityModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFUtilityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: BBSFUtilityModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFUtilityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: BBSFUtilityModule, imports: [CommonModule,
             // Import standalone components
             FormComponent,
             ConfirmationModalComponent,
@@ -4026,7 +4049,7 @@ class BBSFUtilityModule {
             PageHeaderComponentComponent,
             // Re-export standalone directive
             PreventDoubleClickDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFUtilityModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFUtilityModule, imports: [CommonModule,
             // Import standalone components
             FormComponent,
             ConfirmationModalComponent,
@@ -4035,10 +4058,10 @@ class BBSFUtilityModule {
             JwPaginationComponent,
             PageHeaderComponentComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFUtilityModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFUtilityModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [],
+                    declarations: [], // No declarations - all components/directives are standalone
                     imports: [
                         CommonModule,
                         // Import standalone components
@@ -4085,6 +4108,12 @@ var IconPosition;
 
 class MultiLingualTextBoxComponent {
     static { this.controlContainerStatic = null; }
+    // constructor(public multiLingualTextBoxFormControlHost: FormGroupDirective, @Optional() private controlContainer: ControlContainer,
+    //   private controlUtility: ControlUtility, private utilityService: UtilityService, private translate: BBSFTranslateService,
+    //   private controlValidationService: ControlValidationService, private globalSettings: GlobalSettings) {
+    //   MultiLingualTextBoxComponent.controlContainerStatic = this.controlContainer;
+    //   this.currentLanguage = translate.currentLang != undefined ? translate.currentLang : translate.defaultLang;
+    // }
     constructor(multiLingualTextBoxFormControlHost, controlContainer, controlUtility, utilityService, translate, controlValidationService, globalSettings) {
         this.multiLingualTextBoxFormControlHost = multiLingualTextBoxFormControlHost;
         this.controlContainer = controlContainer;
@@ -4545,10 +4574,10 @@ class MultiLingualTextBoxComponent {
         else //onFocusOut
             this.showEnglishCharsLimitMsg = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiLingualTextBoxComponent, deps: [{ token: i2.FormGroupDirective }, { token: i2.ControlContainer, optional: true }, { token: ControlUtility }, { token: i3.UtilityService }, { token: i4.BBSFTranslateService }, { token: i3.ControlValidationService }, { token: GlobalSettings }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MultiLingualTextBoxComponent, isStandalone: true, selector: "BBSF-MultiLingualTextBox", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div [formGroup]=\"group\">\r\n  <div class=\"bbsf-control bbsf-multilang-textbox form-group mb-0\" [formGroup]=\"multiLanguageGroup\">\r\n    <div class=\"row\">\r\n      <!--#region English textbox-->\r\n      <div [ngClass]=\"(options.multiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"showEnglishTextBox\"\r\n        class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.labelExtraClasses}}\" [hidden]=\"options.isHideEnglishLabel\">\r\n            {{(options.englishLabelValue!=null&&options.englishLabelValue!=\"\")?options.englishLabelValue:options.labelValue}}\r\n            <!--Asterisk-->\r\n            <span\r\n              *ngIf=\"(((options.showAsterisk&&options.isRequired)||(options.isRequired)&&isShowAsteriskInEnglish))&&!options.isReadonly\"\r\n              class=\"text-danger\">*</span>\r\n          </label>\r\n          <div *ngIf=\"!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.iconPositionEN==IconPosition.left)?'left-icon':'right-icon'\"\r\n              *ngIf=\"options.icon!=null\">\r\n              <span [inlineSVG]=\"options.icon\"></span>\r\n            </div>\r\n            <!--input-->\r\n            <input class=\"form-control\" dir=\"ltr\" (focus)=\"onEnglishFocus(true)\"\r\n              (focusout)=\"onEnglishFocus(false); onBlur('En')\" aria-invalid=\"true\" formControlName=\"English\"\r\n              [hidden]=\"options.isHideEnglishFields\" maxlength=\"{{options.maxLength}}\" minlength=\"{{options.minLength}}\"\r\n              [class.is-invalid]=\"englishFormControl.invalid && englishFormControl.touched\"\r\n              placeholder=\"{{options.englishPlaceholder}}\" (change)=\"trimControlValue('En')\" (keyup)=\"onTextChange()\"\r\n              (paste)=\"onPaste($event, 'En')\"\r\n              (keydown)=\"englishWordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n              autocomplete=\"{{options.autoComplete}}\" id=\"{{options.name}}.English\" [(ngModel)]=\"options.value.english\"\r\n              #userInputEnglish>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.isHideEnglishFields\" *ngIf=\"options.enableCopyToClipboard\"\r\n              (click)=\"copyInputMessage(userInputEnglish)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.value.english\"></span>\r\n          </div>\r\n          <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n            <!--wordCount-->\r\n            <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowEnglishWordCount\">\r\n              {{englishWordCount}}/{{options.maxWordCount}}\r\n              Words</div>\r\n            <!-- CharsLimitMsg-->\r\n            <div class=\"bbsf-character-count\" *ngIf=\"showEnglishCharsLimitMsg\"\r\n              [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n              {{englishMaxLimitWarningMsg}}\r\n            </div>\r\n            <!-- LabelDescription-->\r\n            <div class=\"bbsf-control-desc\"\r\n              *ngIf=\"(options.labelDescription!=null&&options.labelDescription!='') ||(options.englishLabelDescription!=null&&options.englishLabelDescription!='')\">\r\n              {{(options.englishLabelDescription!=null&&options.englishLabelDescription!=\"\")?options.englishLabelDescription:options.labelDescription}}\r\n            </div>\r\n            <!-- requiredText-->\r\n            <div class=\"bbsf-validation\" *ngIf=\"(englishFormControl.invalid && englishFormControl.touched)\">\r\n              {{getErrorValidation(englishFormControl.errors|keyvalue)}}\r\n            </div>\r\n            <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!-- #endregion -->\r\n\r\n      <!--#region Arabic textbox-->\r\n      <div [ngClass]=\"(options.multiControlPlacementType==ControlLayout.Vertical)?'col-md-12':'col-md-6'\"\r\n        *ngIf=\"showArabicTextBox\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.viewType==ControlLayout.Vertical)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.labelExtraClasses}}\" [hidden]=\"options.isHideArabicLabel\">\r\n            {{(options.arabicLabelValue!=null&&options.arabicLabelValue!=\"\")?options.arabicLabelValue:options.labelValue}}\r\n            <!--Asterisk-->\r\n            <span\r\n              *ngIf=\"(((options.showAsterisk&&options.isRequired)||(options.isRequired))&&isShowAsteriskInArabic)&&!options.isReadonly\"\r\n              class=\"text-danger\">*</span>\r\n          </label>\r\n          <div *ngIf=\"!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\"\r\n              [ngClass]=\"(options.iconPositionEN==IconPosition.left)?'right-icon':'left-icon'\">\r\n              <span [inlineSVG]=\"options.icon\"></span>\r\n            </div>\r\n            <!--input-->\r\n            <input class=\"form-control\" dir=\"rtl\" (focus)=\"onArabicFocus(true)\"\r\n              (focusout)=\"onArabicFocus(false); onBlur('Ar')\" [hidden]=\"options.isHideArabicFields\" aria-invalid=\"true\"\r\n              formControlName=\"Arabic\" [maxlength]=\"options.maxLength\" [minlength]=\"options.minLength\"\r\n              [class.is-invalid]=\"arabicFormControl.invalid && arabicFormControl.touched\"\r\n              placeholder=\"{{options.arabicPlaceholder}}\" (keyup)=\"onTextChange()\" (paste)=\"onPaste($event, 'Ar')\"\r\n              (keydown)=\"arabicWordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n              [(ngModel)]=\"options.value.arabic\" [autocomplete]=\"options.autoComplete\" [id]=\"options.name+'.Arabic'\"\r\n              (change)=\"trimControlValue('Ar')\" #userInputArabic>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.isHideArabicFields\" *ngIf=\"options.enableCopyToClipboard\"\r\n              (click)=\"copyInputMessage(userInputArabic)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.value.arabic\"></span>\r\n\r\n          </div>\r\n          <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n            <!--wordCount-->\r\n            <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowArabicWordCount\">\r\n              {{arabicWordCount}}/{{options.maxWordCount}}\r\n              Words</div>\r\n            <!-- CharsLimitMsg-->\r\n            <div class=\"bbsf-character-count\" *ngIf=\"showArabicCharsLimitMsg\"\r\n              [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n              {{arabicMaxLimitWarningMsg}}\r\n            </div>\r\n            <!-- LabelDescription-->\r\n            <div class=\"bbsf-control-desc\"\r\n              *ngIf=\"(options.labelDescription!=null&&options.labelDescription!='')||(options.arabicLabelDescription!=null&&options.arabicLabelDescription!='')\">\r\n              {{(options.arabicLabelDescription!=null&&options.arabicLabelDescription!=\"\")?options.arabicLabelDescription:options.labelDescription}}\r\n            </div>\r\n            <!-- requiredText-->\r\n            <div class=\"bbsf-validation\" *ngIf=\"(arabicFormControl.invalid && arabicFormControl.touched)\">\r\n              {{getErrorValidation(arabicFormControl.errors|keyvalue)}}\r\n            </div>\r\n            <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!-- #endregion -->\r\n    </div>\r\n  </div>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i7.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiLingualTextBoxComponent, deps: [{ token: FormGroupDirective, optional: true, self: true }, { token: ControlContainer, optional: true }, { token: ControlUtility }, { token: i3.UtilityService }, { token: i4.BBSFTranslateService }, { token: i3.ControlValidationService }, { token: GlobalSettings }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MultiLingualTextBoxComponent, isStandalone: true, selector: "BBSF-MultiLingualTextBox", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div [formGroup]=\"group\">\r\n  <div class=\"bbsf-control bbsf-multilang-textbox form-group mb-0\" [formGroup]=\"multiLanguageGroup\">\r\n    <div class=\"row\">\r\n      <!--#region English textbox-->\r\n      <div [ngClass]=\"(options.multiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"showEnglishTextBox\"\r\n        class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.labelExtraClasses}}\" [hidden]=\"options.isHideEnglishLabel\">\r\n            {{(options.englishLabelValue!=null&&options.englishLabelValue!=\"\")?options.englishLabelValue:options.labelValue}}\r\n            <!--Asterisk-->\r\n            <span\r\n              *ngIf=\"(((options.showAsterisk&&options.isRequired)||(options.isRequired)&&isShowAsteriskInEnglish))&&!options.isReadonly\"\r\n              class=\"text-danger\">*</span>\r\n          </label>\r\n          <div *ngIf=\"!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.iconPositionEN==IconPosition.left)?'left-icon':'right-icon'\"\r\n              *ngIf=\"options.icon!=null\">\r\n              <span [inlineSVG]=\"options.icon\"></span>\r\n            </div>\r\n            <!--input-->\r\n            <input class=\"form-control\" dir=\"ltr\" (focus)=\"onEnglishFocus(true)\"\r\n              (focusout)=\"onEnglishFocus(false); onBlur('En')\" aria-invalid=\"true\" formControlName=\"English\"\r\n              [hidden]=\"options.isHideEnglishFields\" maxlength=\"{{options.maxLength}}\" minlength=\"{{options.minLength}}\"\r\n              [class.is-invalid]=\"englishFormControl.invalid && englishFormControl.touched\"\r\n              placeholder=\"{{options.englishPlaceholder}}\" (change)=\"trimControlValue('En')\" (keyup)=\"onTextChange()\"\r\n              (paste)=\"onPaste($event, 'En')\"\r\n              (keydown)=\"englishWordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n              autocomplete=\"{{options.autoComplete}}\" id=\"{{options.name}}.English\" [(ngModel)]=\"options.value.english\"\r\n              #userInputEnglish>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.isHideEnglishFields\" *ngIf=\"options.enableCopyToClipboard\"\r\n              (click)=\"copyInputMessage(userInputEnglish)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.value.english\"></span>\r\n          </div>\r\n          <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n            <!--wordCount-->\r\n            <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowEnglishWordCount\">\r\n              {{englishWordCount}}/{{options.maxWordCount}}\r\n              Words</div>\r\n            <!-- CharsLimitMsg-->\r\n            <div class=\"bbsf-character-count\" *ngIf=\"showEnglishCharsLimitMsg\"\r\n              [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n              {{englishMaxLimitWarningMsg}}\r\n            </div>\r\n            <!-- LabelDescription-->\r\n            <div class=\"bbsf-control-desc\"\r\n              *ngIf=\"(options.labelDescription!=null&&options.labelDescription!='') ||(options.englishLabelDescription!=null&&options.englishLabelDescription!='')\">\r\n              {{(options.englishLabelDescription!=null&&options.englishLabelDescription!=\"\")?options.englishLabelDescription:options.labelDescription}}\r\n            </div>\r\n            <!-- requiredText-->\r\n            <div class=\"bbsf-validation\" *ngIf=\"(englishFormControl.invalid && englishFormControl.touched)\">\r\n              {{getErrorValidation(englishFormControl.errors|keyvalue)}}\r\n            </div>\r\n            <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!-- #endregion -->\r\n\r\n      <!--#region Arabic textbox-->\r\n      <div [ngClass]=\"(options.multiControlPlacementType==ControlLayout.Vertical)?'col-md-12':'col-md-6'\"\r\n        *ngIf=\"showArabicTextBox\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.viewType==ControlLayout.Vertical)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.labelExtraClasses}}\" [hidden]=\"options.isHideArabicLabel\">\r\n            {{(options.arabicLabelValue!=null&&options.arabicLabelValue!=\"\")?options.arabicLabelValue:options.labelValue}}\r\n            <!--Asterisk-->\r\n            <span\r\n              *ngIf=\"(((options.showAsterisk&&options.isRequired)||(options.isRequired))&&isShowAsteriskInArabic)&&!options.isReadonly\"\r\n              class=\"text-danger\">*</span>\r\n          </label>\r\n          <div *ngIf=\"!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\"\r\n              [ngClass]=\"(options.iconPositionEN==IconPosition.left)?'right-icon':'left-icon'\">\r\n              <span [inlineSVG]=\"options.icon\"></span>\r\n            </div>\r\n            <!--input-->\r\n            <input class=\"form-control\" dir=\"rtl\" (focus)=\"onArabicFocus(true)\"\r\n              (focusout)=\"onArabicFocus(false); onBlur('Ar')\" [hidden]=\"options.isHideArabicFields\" aria-invalid=\"true\"\r\n              formControlName=\"Arabic\" [maxlength]=\"options.maxLength\" [minlength]=\"options.minLength\"\r\n              [class.is-invalid]=\"arabicFormControl.invalid && arabicFormControl.touched\"\r\n              placeholder=\"{{options.arabicPlaceholder}}\" (keyup)=\"onTextChange()\" (paste)=\"onPaste($event, 'Ar')\"\r\n              (keydown)=\"arabicWordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n              [(ngModel)]=\"options.value.arabic\" [autocomplete]=\"options.autoComplete\" [id]=\"options.name+'.Arabic'\"\r\n              (change)=\"trimControlValue('Ar')\" #userInputArabic>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.isHideArabicFields\" *ngIf=\"options.enableCopyToClipboard\"\r\n              (click)=\"copyInputMessage(userInputArabic)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.value.arabic\"></span>\r\n\r\n          </div>\r\n          <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n            <!--wordCount-->\r\n            <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowArabicWordCount\">\r\n              {{arabicWordCount}}/{{options.maxWordCount}}\r\n              Words</div>\r\n            <!-- CharsLimitMsg-->\r\n            <div class=\"bbsf-character-count\" *ngIf=\"showArabicCharsLimitMsg\"\r\n              [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n              {{arabicMaxLimitWarningMsg}}\r\n            </div>\r\n            <!-- LabelDescription-->\r\n            <div class=\"bbsf-control-desc\"\r\n              *ngIf=\"(options.labelDescription!=null&&options.labelDescription!='')||(options.arabicLabelDescription!=null&&options.arabicLabelDescription!='')\">\r\n              {{(options.arabicLabelDescription!=null&&options.arabicLabelDescription!=\"\")?options.arabicLabelDescription:options.labelDescription}}\r\n            </div>\r\n            <!-- requiredText-->\r\n            <div class=\"bbsf-validation\" *ngIf=\"(arabicFormControl.invalid && arabicFormControl.touched)\">\r\n              {{getErrorValidation(arabicFormControl.errors|keyvalue)}}\r\n            </div>\r\n            <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!-- #endregion -->\r\n    </div>\r\n  </div>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i7.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiLingualTextBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiLingualTextBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-MultiLingualTextBox', standalone: true, imports: [
                         CommonModule,
@@ -4556,8 +4585,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         ReactiveFormsModule,
                         InlineSVGModule
                     ], template: "<div [formGroup]=\"group\">\r\n  <div class=\"bbsf-control bbsf-multilang-textbox form-group mb-0\" [formGroup]=\"multiLanguageGroup\">\r\n    <div class=\"row\">\r\n      <!--#region English textbox-->\r\n      <div [ngClass]=\"(options.multiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"showEnglishTextBox\"\r\n        class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.labelExtraClasses}}\" [hidden]=\"options.isHideEnglishLabel\">\r\n            {{(options.englishLabelValue!=null&&options.englishLabelValue!=\"\")?options.englishLabelValue:options.labelValue}}\r\n            <!--Asterisk-->\r\n            <span\r\n              *ngIf=\"(((options.showAsterisk&&options.isRequired)||(options.isRequired)&&isShowAsteriskInEnglish))&&!options.isReadonly\"\r\n              class=\"text-danger\">*</span>\r\n          </label>\r\n          <div *ngIf=\"!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.iconPositionEN==IconPosition.left)?'left-icon':'right-icon'\"\r\n              *ngIf=\"options.icon!=null\">\r\n              <span [inlineSVG]=\"options.icon\"></span>\r\n            </div>\r\n            <!--input-->\r\n            <input class=\"form-control\" dir=\"ltr\" (focus)=\"onEnglishFocus(true)\"\r\n              (focusout)=\"onEnglishFocus(false); onBlur('En')\" aria-invalid=\"true\" formControlName=\"English\"\r\n              [hidden]=\"options.isHideEnglishFields\" maxlength=\"{{options.maxLength}}\" minlength=\"{{options.minLength}}\"\r\n              [class.is-invalid]=\"englishFormControl.invalid && englishFormControl.touched\"\r\n              placeholder=\"{{options.englishPlaceholder}}\" (change)=\"trimControlValue('En')\" (keyup)=\"onTextChange()\"\r\n              (paste)=\"onPaste($event, 'En')\"\r\n              (keydown)=\"englishWordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n              autocomplete=\"{{options.autoComplete}}\" id=\"{{options.name}}.English\" [(ngModel)]=\"options.value.english\"\r\n              #userInputEnglish>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.isHideEnglishFields\" *ngIf=\"options.enableCopyToClipboard\"\r\n              (click)=\"copyInputMessage(userInputEnglish)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.value.english\"></span>\r\n          </div>\r\n          <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n            <!--wordCount-->\r\n            <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowEnglishWordCount\">\r\n              {{englishWordCount}}/{{options.maxWordCount}}\r\n              Words</div>\r\n            <!-- CharsLimitMsg-->\r\n            <div class=\"bbsf-character-count\" *ngIf=\"showEnglishCharsLimitMsg\"\r\n              [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n              {{englishMaxLimitWarningMsg}}\r\n            </div>\r\n            <!-- LabelDescription-->\r\n            <div class=\"bbsf-control-desc\"\r\n              *ngIf=\"(options.labelDescription!=null&&options.labelDescription!='') ||(options.englishLabelDescription!=null&&options.englishLabelDescription!='')\">\r\n              {{(options.englishLabelDescription!=null&&options.englishLabelDescription!=\"\")?options.englishLabelDescription:options.labelDescription}}\r\n            </div>\r\n            <!-- requiredText-->\r\n            <div class=\"bbsf-validation\" *ngIf=\"(englishFormControl.invalid && englishFormControl.touched)\">\r\n              {{getErrorValidation(englishFormControl.errors|keyvalue)}}\r\n            </div>\r\n            <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!-- #endregion -->\r\n\r\n      <!--#region Arabic textbox-->\r\n      <div [ngClass]=\"(options.multiControlPlacementType==ControlLayout.Vertical)?'col-md-12':'col-md-6'\"\r\n        *ngIf=\"showArabicTextBox\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.viewType==ControlLayout.Vertical)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.labelExtraClasses}}\" [hidden]=\"options.isHideArabicLabel\">\r\n            {{(options.arabicLabelValue!=null&&options.arabicLabelValue!=\"\")?options.arabicLabelValue:options.labelValue}}\r\n            <!--Asterisk-->\r\n            <span\r\n              *ngIf=\"(((options.showAsterisk&&options.isRequired)||(options.isRequired))&&isShowAsteriskInArabic)&&!options.isReadonly\"\r\n              class=\"text-danger\">*</span>\r\n          </label>\r\n          <div *ngIf=\"!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\"\r\n              [ngClass]=\"(options.iconPositionEN==IconPosition.left)?'right-icon':'left-icon'\">\r\n              <span [inlineSVG]=\"options.icon\"></span>\r\n            </div>\r\n            <!--input-->\r\n            <input class=\"form-control\" dir=\"rtl\" (focus)=\"onArabicFocus(true)\"\r\n              (focusout)=\"onArabicFocus(false); onBlur('Ar')\" [hidden]=\"options.isHideArabicFields\" aria-invalid=\"true\"\r\n              formControlName=\"Arabic\" [maxlength]=\"options.maxLength\" [minlength]=\"options.minLength\"\r\n              [class.is-invalid]=\"arabicFormControl.invalid && arabicFormControl.touched\"\r\n              placeholder=\"{{options.arabicPlaceholder}}\" (keyup)=\"onTextChange()\" (paste)=\"onPaste($event, 'Ar')\"\r\n              (keydown)=\"arabicWordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n              [(ngModel)]=\"options.value.arabic\" [autocomplete]=\"options.autoComplete\" [id]=\"options.name+'.Arabic'\"\r\n              (change)=\"trimControlValue('Ar')\" #userInputArabic>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.isHideArabicFields\" *ngIf=\"options.enableCopyToClipboard\"\r\n              (click)=\"copyInputMessage(userInputArabic)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.value.arabic\"></span>\r\n\r\n          </div>\r\n          <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n            <!--wordCount-->\r\n            <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowArabicWordCount\">\r\n              {{arabicWordCount}}/{{options.maxWordCount}}\r\n              Words</div>\r\n            <!-- CharsLimitMsg-->\r\n            <div class=\"bbsf-character-count\" *ngIf=\"showArabicCharsLimitMsg\"\r\n              [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n              {{arabicMaxLimitWarningMsg}}\r\n            </div>\r\n            <!-- LabelDescription-->\r\n            <div class=\"bbsf-control-desc\"\r\n              *ngIf=\"(options.labelDescription!=null&&options.labelDescription!='')||(options.arabicLabelDescription!=null&&options.arabicLabelDescription!='')\">\r\n              {{(options.arabicLabelDescription!=null&&options.arabicLabelDescription!=\"\")?options.arabicLabelDescription:options.labelDescription}}\r\n            </div>\r\n            <!-- requiredText-->\r\n            <div class=\"bbsf-validation\" *ngIf=\"(arabicFormControl.invalid && arabicFormControl.touched)\">\r\n              {{getErrorValidation(arabicFormControl.errors|keyvalue)}}\r\n            </div>\r\n            <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!-- #endregion -->\r\n    </div>\r\n  </div>\r\n</div>" }]
-        }], ctorParameters: () => [{ type: i2.FormGroupDirective }, { type: i2.ControlContainer, decorators: [{
+        }], ctorParameters: () => [{ type: i2.FormGroupDirective, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [FormGroupDirective]
+                }] }, { type: i2.ControlContainer, decorators: [{
                     type: Optional
+                }, {
+                    type: Inject,
+                    args: [ControlContainer]
                 }] }, { type: ControlUtility }, { type: i3.UtilityService }, { type: i4.BBSFTranslateService }, { type: i3.ControlValidationService }, { type: GlobalSettings }], propDecorators: { group: [{
                 type: Input
             }], options: [{
@@ -4972,10 +5011,10 @@ class MultiLingualTextAreaComponent {
         else //onFocusOut
             this.showEnglishCharsLimitMsg = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiLingualTextAreaComponent, deps: [{ token: i2.FormGroupDirective }, { token: i2.ControlContainer, optional: true }, { token: ControlUtility }, { 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: MultiLingualTextAreaComponent, isStandalone: true, selector: "BBSF-MultiLingualTextArea", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div [formGroup]=\"group\">\r\n  <div class=\"bbsf-control bbsf-multilang-textarea form-group mb-0\" [formGroup]=\"multiLanguageTextAreagroup\">\r\n    <div class=\"row\">\r\n      <!--#region English textarea-->\r\n      <div [ngClass]=\"(options.multiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"showEngishTextArea\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.labelExtraClasses}}\" [hidden]=\"options.isHideEnglishLabel\">\r\n            {{(options.englishLabelValue!=null&&options.englishLabelValue!=\"\")?options.englishLabelValue:options.labelValue+\"InEnglish\"}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"(((options.showAsterisk&&options.isRequired)||(options.isRequired))&&IsShowAsteriskInEnglish)&&!options.isReadonly\"\r\n              class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\" *ngIf=\"!options.isReadonly\" [ngClass]=\"options.enableCopyToClipboard? 'p-40px' : '' \">\r\n            <!--input-->\r\n            <textarea class=\"form-control\" dir=\"ltr\" rows=\"{{options.rows}}\" cols=\"{{options.cols}}\" (focus)=\"onEnglishFocus(true)\"\r\n              (focusout)=\"onEnglishFocus(false)\" maxlength=\"{{options.maxLength}}\" minlength=\"{{options.minLength}}\" aria-describedby=\"email-error\"\r\n              aria-invalid=\"true\" formControlName=\"English\" [hidden]=\"options.isHideEnglishFields\"\r\n              [class.is-invalid]=\"englishTextAreaFormControl.invalid && englishTextAreaFormControl.touched\"\r\n              placeholder=\"{{options.englishPlaceholder}}\" (change)=\"trimControlValue('En')\" (keyup)=\"onTextChange()\"\r\n              [(ngModel)]=\"options.value.english\"\r\n              (keydown)=\"englishWordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\" #userinputTextAreaEnglish>\r\n                            </textarea>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.isHideEnglishFields\" *ngIf=\"options.enableCopyToClipboard\"\r\n              (click)=\"copyInputMessage(userinputTextAreaEnglish)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n\r\n          <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.value.english\"></span>\r\n\r\n          </div>\r\n          <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n            <!--wordCount-->\r\n            <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowEnglishWordCount\">\r\n              {{englishWordCount}}/{{options.maxWordCount}} Words</div>\r\n            <!-- CharsLimitMsg-->\r\n            <div class=\"bbsf-character-count\" *ngIf=\"showEnglishCharsLimitMsg\"\r\n              [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n              {{englishMaxLimitWarningMsg}}\r\n            </div>\r\n            <!-- LabelDescription-->\r\n            <div class=\"bbsf-control-desc\"\r\n              *ngIf=\"(options.labelDescription!=null&&options.labelDescription!='') ||(options.englishLabelDescription!=null&&options.englishLabelDescription!='')\">\r\n              {{(options.englishLabelDescription!=null&&options.englishLabelDescription!=\"\")?options.englishLabelDescription:options.labelDescription}}\r\n            </div>\r\n            <!-- requiredText-->\r\n            <div class=\"bbsf-validation\" *ngIf=\"(englishTextAreaFormControl.invalid && englishTextAreaFormControl.touched)\">\r\n              {{getErrorValidation(englishTextAreaFormControl.errors|keyvalue)}}\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>\r\n        </div>\r\n      </div>\r\n      <!-- #endregion -->\r\n\r\n      <!--#region Arabic textbox-->\r\n      <div [ngClass]=\"(options.multiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"showArabicTextArea\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.labelExtraClasses}}\" [hidden]=\"options.isHideArabicLabel\">\r\n            {{(options.arabicLabelValue!=null&&options.arabicLabelValue!=\"\")?options.arabicLabelValue:options.labelValue+\"inArabic\"}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"(((options.showAsterisk&&options.isRequired)||(options.isRequired))&&IsShowAsteriskInArabic)&&!options.isReadonly\"\r\n              class=\"text-danger\">*</span>\r\n          </label>\r\n          <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\" [ngClass]=\"options.enableCopyToClipboard? 'p-40px' : '' \">\r\n            <!--input-->\r\n            <textarea class=\"form-control bnsights-control\" dir=\"rtl\" [rows]=\"options.rows\" [cols]=\"options.cols\" (focus)=\"onArabicFocus(true)\"\r\n              (focusout)=\"onArabicFocus(false)\" [hidden]=\"options.isHideArabicFields\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n              formControlName=\"Arabic\" [maxlength]=\"options.maxLength\" [minlength]=\"options.minLength\"\r\n              [class.is-invalid]=\"arabicTextAreaFormControl.invalid && arabicTextAreaFormControl.touched\" placeholder=\"{{options.arabicPlaceholder}}\"\r\n              (change)=\"trimControlValue('Ar')\" (keyup)=\"onTextChange()\" [(ngModel)]=\"options.value.arabic\"\r\n              (keydown)=\"arabicWordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n              #userInputTextAreaArabic></textarea>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.isHideArabicFields\" *ngIf=\"options.enableCopyToClipboard\"\r\n              (click)=\"copyInputMessage(userInputTextAreaArabic)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.value.arabic\"></span>\r\n\r\n          </div>\r\n          <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n            <!--wordCount-->\r\n            <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowArabicWordCount\">\r\n              {{arabicWordCount}}/{{options.maxWordCount}} Words</div>\r\n            <!-- CharsLimitMsg-->\r\n            <div class=\"bbsf-character-count\" *ngIf=\"showArabicCharsLimitMsg\"\r\n              [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n              {{arabicMaxLimitWarningMsg}}\r\n            </div>\r\n            <!-- LabelDescription-->\r\n            <div class=\"bbsf-control-desc\"\r\n              *ngIf=\"(options.labelDescription!=null&&options.labelDescription!='')||(options.arabicLabelDescription!=null&&options.arabicLabelDescription!='')\">\r\n              {{(options.arabicLabelDescription!=null&&options.arabicLabelDescription!=\"\")?options.arabicLabelDescription:options.labelDescription}}\r\n            </div>\r\n            <!-- requiredText-->\r\n            <div class=\"bbsf-validation\" *ngIf=\"(arabicTextAreaFormControl.invalid && arabicTextAreaFormControl.touched)\">\r\n              {{getErrorValidation(arabicTextAreaFormControl.errors|keyvalue)}}\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>\r\n        </div>\r\n      </div>\r\n      <!-- #endregion -->\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: InlineSVGModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiLingualTextAreaComponent, deps: [{ token: i2.FormGroupDirective }, { token: i2.ControlContainer, optional: true }, { token: ControlUtility }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MultiLingualTextAreaComponent, isStandalone: true, selector: "BBSF-MultiLingualTextArea", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div [formGroup]=\"group\">\r\n  <div class=\"bbsf-control bbsf-multilang-textarea form-group mb-0\" [formGroup]=\"multiLanguageTextAreagroup\">\r\n    <div class=\"row\">\r\n      <!--#region English textarea-->\r\n      <div [ngClass]=\"(options.multiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"showEngishTextArea\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.labelExtraClasses}}\" [hidden]=\"options.isHideEnglishLabel\">\r\n            {{(options.englishLabelValue!=null&&options.englishLabelValue!=\"\")?options.englishLabelValue:options.labelValue+\"InEnglish\"}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"(((options.showAsterisk&&options.isRequired)||(options.isRequired))&&IsShowAsteriskInEnglish)&&!options.isReadonly\"\r\n              class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\" *ngIf=\"!options.isReadonly\" [ngClass]=\"options.enableCopyToClipboard? 'p-40px' : '' \">\r\n            <!--input-->\r\n            <textarea class=\"form-control\" dir=\"ltr\" rows=\"{{options.rows}}\" cols=\"{{options.cols}}\" (focus)=\"onEnglishFocus(true)\"\r\n              (focusout)=\"onEnglishFocus(false)\" maxlength=\"{{options.maxLength}}\" minlength=\"{{options.minLength}}\" aria-describedby=\"email-error\"\r\n              aria-invalid=\"true\" formControlName=\"English\" [hidden]=\"options.isHideEnglishFields\"\r\n              [class.is-invalid]=\"englishTextAreaFormControl.invalid && englishTextAreaFormControl.touched\"\r\n              placeholder=\"{{options.englishPlaceholder}}\" (change)=\"trimControlValue('En')\" (keyup)=\"onTextChange()\"\r\n              [(ngModel)]=\"options.value.english\"\r\n              (keydown)=\"englishWordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\" #userinputTextAreaEnglish>\r\n                            </textarea>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.isHideEnglishFields\" *ngIf=\"options.enableCopyToClipboard\"\r\n              (click)=\"copyInputMessage(userinputTextAreaEnglish)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n\r\n          <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.value.english\"></span>\r\n\r\n          </div>\r\n          <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n            <!--wordCount-->\r\n            <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowEnglishWordCount\">\r\n              {{englishWordCount}}/{{options.maxWordCount}} Words</div>\r\n            <!-- CharsLimitMsg-->\r\n            <div class=\"bbsf-character-count\" *ngIf=\"showEnglishCharsLimitMsg\"\r\n              [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n              {{englishMaxLimitWarningMsg}}\r\n            </div>\r\n            <!-- LabelDescription-->\r\n            <div class=\"bbsf-control-desc\"\r\n              *ngIf=\"(options.labelDescription!=null&&options.labelDescription!='') ||(options.englishLabelDescription!=null&&options.englishLabelDescription!='')\">\r\n              {{(options.englishLabelDescription!=null&&options.englishLabelDescription!=\"\")?options.englishLabelDescription:options.labelDescription}}\r\n            </div>\r\n            <!-- requiredText-->\r\n            <div class=\"bbsf-validation\" *ngIf=\"(englishTextAreaFormControl.invalid && englishTextAreaFormControl.touched)\">\r\n              {{getErrorValidation(englishTextAreaFormControl.errors|keyvalue)}}\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>\r\n        </div>\r\n      </div>\r\n      <!-- #endregion -->\r\n\r\n      <!--#region Arabic textbox-->\r\n      <div [ngClass]=\"(options.multiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"showArabicTextArea\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.labelExtraClasses}}\" [hidden]=\"options.isHideArabicLabel\">\r\n            {{(options.arabicLabelValue!=null&&options.arabicLabelValue!=\"\")?options.arabicLabelValue:options.labelValue+\"inArabic\"}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"(((options.showAsterisk&&options.isRequired)||(options.isRequired))&&IsShowAsteriskInArabic)&&!options.isReadonly\"\r\n              class=\"text-danger\">*</span>\r\n          </label>\r\n          <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\" [ngClass]=\"options.enableCopyToClipboard? 'p-40px' : '' \">\r\n            <!--input-->\r\n            <textarea class=\"form-control bnsights-control\" dir=\"rtl\" [rows]=\"options.rows\" [cols]=\"options.cols\" (focus)=\"onArabicFocus(true)\"\r\n              (focusout)=\"onArabicFocus(false)\" [hidden]=\"options.isHideArabicFields\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n              formControlName=\"Arabic\" [maxlength]=\"options.maxLength\" [minlength]=\"options.minLength\"\r\n              [class.is-invalid]=\"arabicTextAreaFormControl.invalid && arabicTextAreaFormControl.touched\" placeholder=\"{{options.arabicPlaceholder}}\"\r\n              (change)=\"trimControlValue('Ar')\" (keyup)=\"onTextChange()\" [(ngModel)]=\"options.value.arabic\"\r\n              (keydown)=\"arabicWordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n              #userInputTextAreaArabic></textarea>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.isHideArabicFields\" *ngIf=\"options.enableCopyToClipboard\"\r\n              (click)=\"copyInputMessage(userInputTextAreaArabic)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.value.arabic\"></span>\r\n\r\n          </div>\r\n          <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n            <!--wordCount-->\r\n            <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowArabicWordCount\">\r\n              {{arabicWordCount}}/{{options.maxWordCount}} Words</div>\r\n            <!-- CharsLimitMsg-->\r\n            <div class=\"bbsf-character-count\" *ngIf=\"showArabicCharsLimitMsg\"\r\n              [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n              {{arabicMaxLimitWarningMsg}}\r\n            </div>\r\n            <!-- LabelDescription-->\r\n            <div class=\"bbsf-control-desc\"\r\n              *ngIf=\"(options.labelDescription!=null&&options.labelDescription!='')||(options.arabicLabelDescription!=null&&options.arabicLabelDescription!='')\">\r\n              {{(options.arabicLabelDescription!=null&&options.arabicLabelDescription!=\"\")?options.arabicLabelDescription:options.labelDescription}}\r\n            </div>\r\n            <!-- requiredText-->\r\n            <div class=\"bbsf-validation\" *ngIf=\"(arabicTextAreaFormControl.invalid && arabicTextAreaFormControl.touched)\">\r\n              {{getErrorValidation(arabicTextAreaFormControl.errors|keyvalue)}}\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>\r\n        </div>\r\n      </div>\r\n      <!-- #endregion -->\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: InlineSVGModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiLingualTextAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiLingualTextAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-MultiLingualTextArea', standalone: true, imports: [
                         CommonModule,
@@ -5017,20 +5056,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * ```
  */
 class BBSFMultilingualModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFMultilingualModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: BBSFMultilingualModule, imports: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFMultilingualModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: BBSFMultilingualModule, imports: [
             // Import standalone components
             MultiLingualTextBoxComponent,
             MultiLingualTextAreaComponent], exports: [
             // Re-export standalone components
             MultiLingualTextBoxComponent,
             MultiLingualTextAreaComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFMultilingualModule, imports: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFMultilingualModule, imports: [
             // Import standalone components
             MultiLingualTextBoxComponent,
             MultiLingualTextAreaComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFMultilingualModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFMultilingualModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -5124,8 +5163,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * @deprecated Use granular modules (BBSFFormsBasicModule, BBSFDropdownModule, etc.) for better tree-shaking
  */
 class BBSFCoreModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: BBSFCoreModule, imports: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: BBSFCoreModule, imports: [
             // Common Angular modules
             CommonModule,
             FormsModule,
@@ -5145,7 +5184,7 @@ class BBSFCoreModule {
             BBSFPhoneModule,
             BBSFUtilityModule,
             BBSFMultilingualModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFCoreModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFCoreModule, providers: [
             // Services
             ErrorMassageValidation,
             ControlUtility,
@@ -5184,7 +5223,7 @@ class BBSFCoreModule {
             BBSFUtilityModule,
             BBSFMultilingualModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFCoreModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFCoreModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -5387,10 +5426,10 @@ class HtmlEditorComponent {
         this.options.value = originalValue;
         this.OnChange.emit(originalValue);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HtmlEditorComponent, deps: [{ token: i0.NgZone }, { 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: HtmlEditorComponent, isStandalone: true, selector: "BBSF-HtmlEditor", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-htmleditor\" [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\">*</span>\r\n    </label>\r\n    <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\">\r\n      <angular-editor (change)=\"onValueChanged()\" id=\"{{options.name}}\"\r\n        [class.is-invalid]=\"htmlEditorFormControl.invalid && htmlEditorFormControl.touched\"\r\n        class=\"{{options.extraClasses}}\" [dir]=\"textDir\" formControlName=\"{{options.name}}\"\r\n        [config]=\"editorConfig\"></angular-editor>\r\n    </div>\r\n\r\n    <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.value\"></span>\r\n\r\n    </div>\r\n    <div class=\"subtext-container\">\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=\"(htmlEditorFormControl.invalid && htmlEditorFormControl.touched)\">\r\n        {{getErrorValidation(htmlEditorFormControl.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>", styles: [".angular-editor-toolbar-set:not(:has(>button:not([hidden]))){display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: AngularEditorModule }, { kind: "component", type: i6$2.AngularEditorComponent, selector: "angular-editor", inputs: ["id", "config", "placeholder", "tabIndex"], outputs: ["html", "viewMode", "blur", "focus"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HtmlEditorComponent, deps: [{ token: i0.NgZone }, { 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: "19.2.15", type: HtmlEditorComponent, isStandalone: true, selector: "BBSF-HtmlEditor", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-htmleditor\" [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\">*</span>\r\n    </label>\r\n    <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\">\r\n      <angular-editor (change)=\"onValueChanged()\" id=\"{{options.name}}\"\r\n        [class.is-invalid]=\"htmlEditorFormControl.invalid && htmlEditorFormControl.touched\"\r\n        class=\"{{options.extraClasses}}\" [dir]=\"textDir\" formControlName=\"{{options.name}}\"\r\n        [config]=\"editorConfig\"></angular-editor>\r\n    </div>\r\n\r\n    <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.value\"></span>\r\n\r\n    </div>\r\n    <div class=\"subtext-container\">\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=\"(htmlEditorFormControl.invalid && htmlEditorFormControl.touched)\">\r\n        {{getErrorValidation(htmlEditorFormControl.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>", styles: [".angular-editor-toolbar-set:not(:has(>button:not([hidden]))){display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: AngularEditorModule }, { kind: "component", type: i6$2.AngularEditorComponent, selector: "angular-editor", inputs: ["id", "config", "placeholder", "tabIndex"], outputs: ["html", "viewMode", "blur", "focus"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HtmlEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HtmlEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-HtmlEditor', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
                         CommonModule,
@@ -5508,7 +5547,7 @@ class MarkdownEditorComponent {
             hideIcons: this.options.hideIcons,
             showPreviewPanel: this.options.showPreviewPanelOnLoad,
             resizable: false,
-            enablePreviewContentClick: this.options.isReadonly,
+            enablePreviewContentClick: this.options.isReadonly, // Allow user fire the click event on the preview panel, like href etc.
             markedjsOpt: {
                 breaks: true,
                 sanitize: true,
@@ -5634,10 +5673,10 @@ class MarkdownEditorComponent {
         //Return the promise that resolves when all files are processed
         return processAllFiles();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MarkdownEditorComponent, deps: [{ token: i3.UtilityService }, { token: GlobalSettings }, { token: i3.ControlValidationService }, { token: ControlUtility }, { token: i2.FormGroupDirective }, { token: i5$2.ScriptService }, { token: i2.ControlContainer, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MarkdownEditorComponent, isStandalone: true, selector: "BBSF-MarkdownEditor", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, ngImport: i0, template: "<ng-container *ngIf=\"showMarkdown\">\r\n  <div class=\"form-group bbsf-control bbsf-htmleditor\" [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\">*</span>\r\n      </label>\r\n      <div  class=\"bbsf-input-container {{options.extraClasses}}\">\r\n          <md-editor   id=\"{{options.name}}\" formControlName=\"{{options.name}}\"\r\n         (onPreviewDomChanged)=\"onPreviewDomChanged($event)\"\r\n         [(ngModel)]=\"options.value\" [mode]=\"mode\" [options]=\"editorOptions\"  [attr.required]=\"options.isRequired ? true : null\" [upload]=\"onDragFile\" \r\n          [maxlength]=\"options.maxLength\" [height]=\"options.height\"  [locale]=\"currentLocale\"  (onEditorLoaded)=\"onEditorLoaded($event)\" [hideToolbar]=\"hideToolbar\">\r\n           <!-- [ngStyle]=\"{ 'direction': textDirection, 'text-align': textDirection === 'rtl' ? 'right' : 'left' }\" -->\r\n           <div custom-btns>\r\n            <input #imgInput type=\"file\" style=\"display: none\" (change)=\"uploadImg($event)\" />\r\n            <button type=\"button\" class=\"btn btn-sm btn-default\" (click)=\"imgInput.click()\">\r\n              {{utilityService.getResourceValue(\"UploadImg\")}}\r\n            </button>\r\n          </div>\r\n        </md-editor>\r\n      </div>\r\n\r\n      <div class=\"subtext-container\">\r\n        <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n        <div class=\"bbsf-validation\" *ngIf=\"(markdownEditorFormControl.invalid && markdownEditorFormControl.touched)\">\r\n          {{getErrorValidation(markdownEditorFormControl.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>\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: LMarkdownEditorModule }, { kind: "component", type: i7$3.MarkdownEditorComponent, selector: "md-editor", inputs: ["hideToolbar", "height", "preRender", "postRender", "upload", "locale", "maxlength", "mode", "options"], outputs: ["onEditorLoaded", "onPreviewDomChanged"] }, { kind: "ngmodule", type: ScriptLoaderModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MarkdownEditorComponent, deps: [{ token: i3.UtilityService }, { token: GlobalSettings }, { token: i3.ControlValidationService }, { token: ControlUtility }, { token: i2.FormGroupDirective }, { token: i5$2.ScriptService }, { token: i2.ControlContainer, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MarkdownEditorComponent, isStandalone: true, selector: "BBSF-MarkdownEditor", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, ngImport: i0, template: "<ng-container *ngIf=\"showMarkdown\">\r\n  <div class=\"form-group bbsf-control bbsf-htmleditor\" [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\">*</span>\r\n      </label>\r\n      <div  class=\"bbsf-input-container {{options.extraClasses}}\">\r\n          <md-editor   id=\"{{options.name}}\" formControlName=\"{{options.name}}\"\r\n         (onPreviewDomChanged)=\"onPreviewDomChanged($event)\"\r\n         [(ngModel)]=\"options.value\" [mode]=\"mode\" [options]=\"editorOptions\"  [attr.required]=\"options.isRequired ? true : null\" [upload]=\"onDragFile\" \r\n          [maxlength]=\"options.maxLength\" [height]=\"options.height\"  [locale]=\"currentLocale\"  (onEditorLoaded)=\"onEditorLoaded($event)\" [hideToolbar]=\"hideToolbar\">\r\n           <!-- [ngStyle]=\"{ 'direction': textDirection, 'text-align': textDirection === 'rtl' ? 'right' : 'left' }\" -->\r\n           <div custom-btns>\r\n            <input #imgInput type=\"file\" style=\"display: none\" (change)=\"uploadImg($event)\" />\r\n            <button type=\"button\" class=\"btn btn-sm btn-default\" (click)=\"imgInput.click()\">\r\n              {{utilityService.getResourceValue(\"UploadImg\")}}\r\n            </button>\r\n          </div>\r\n        </md-editor>\r\n      </div>\r\n\r\n      <div class=\"subtext-container\">\r\n        <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n        <div class=\"bbsf-validation\" *ngIf=\"(markdownEditorFormControl.invalid && markdownEditorFormControl.touched)\">\r\n          {{getErrorValidation(markdownEditorFormControl.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>\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: LMarkdownEditorModule }, { kind: "component", type: i7$3.MarkdownEditorComponent, selector: "md-editor", inputs: ["hideToolbar", "height", "preRender", "postRender", "upload", "locale", "maxlength", "mode", "options"], outputs: ["onEditorLoaded", "onPreviewDomChanged"] }, { kind: "ngmodule", type: ScriptLoaderModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MarkdownEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MarkdownEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-MarkdownEditor', standalone: true, imports: [
                         CommonModule,
@@ -6077,10 +6116,10 @@ class MultiLingualHtmlEditorComponent {
         this.arabicHtmlEditorFormControl.updateValueAndValidity();
         this.englishHtmlEditorFormControl.updateValueAndValidity();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiLingualHtmlEditorComponent, deps: [{ token: i2.FormGroupDirective }, { token: i2.ControlContainer, optional: true }, { token: ControlUtility }, { 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: MultiLingualHtmlEditorComponent, isStandalone: true, selector: "BBSF-MultiLingualHtmlEditor", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, ngImport: i0, template: "<div [formGroup]=\"group\">\r\n  <div class=\"bbsf-control form-group bbsf-multilang-htmleditor mb-0\" [formGroup]=\"multilingualHtmlEditorgroup\">\r\n    <div class=\"row\">\r\n      <!--English htmleditor-->\r\n      <div [ngClass]=\"showArabicHtmlEditor? 'col-md-6' : 'col-md-12'\" *ngIf=\"showEnglishHtmlEditor\"\r\n        class=\" bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.labelExtraClasses}}\" [hidden]=\"options.isHideEnglishLabel\">\r\n            {{(options.englishLabelValue!=null&&options.englishLabelValue!=\"\")?options.englishLabelValue:options.labelValue+\"in\r\n            English\"}}\r\n            <!--Asterisk-->\r\n            <span\r\n              *ngIf=\"(((options.showAsterisk&&options.isRequired)||(options.isRequired)&&isShowAsteriskInEnglish))&&!options.isReadonly\"\r\n              class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\" *ngIf=\"!options.isReadonly\">\r\n            <!--input-->\r\n            <angular-editor class=\"{{options.extraClasses_EN}}\" (change)=\"onTextChange('en')\"\r\n              [class.is-invalid]=\"englishHtmlEditorFormControl.invalid && englishHtmlEditorFormControl.touched\"\r\n              formControlName=\"English\" [config]=\"editorEnglishConfig\"></angular-editor>\r\n          </div>\r\n          <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.value.english\"></span>\r\n\r\n          </div>\r\n          <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n            <!-- LabelDescription-->\r\n            <div class=\"bbsf-control-desc\"\r\n              *ngIf=\"(options.labelDescription!=null&&options.labelDescription!='') ||(options.englishLabelDescription!=null&&options.englishLabelDescription!='')\">\r\n              {{(options.englishLabelDescription!=null&&options.englishLabelDescription!=\"\")?options.englishLabelDescription:options.labelDescription}}\r\n            </div>\r\n            <!-- requiredText-->\r\n            <div class=\"bbsf-validation\"\r\n              *ngIf=\"(englishHtmlEditorFormControl.invalid && englishHtmlEditorFormControl.touched)\">\r\n              {{getErrorValidation(englishHtmlEditorFormControl.errors|keyvalue)}}\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>\r\n        </div>\r\n      </div>\r\n      <!--Arabic htmleditor-->\r\n      <div *ngIf=\"showArabicHtmlEditor\" [ngClass]=\"showEnglishHtmlEditor? 'col-md-6' : 'col-md-12'\"\r\n        class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.labelExtraClasses}}\" [hidden]=\"options.isHideArabicLabel\">\r\n            {{(options.arabicLabelValue!=null&&options.arabicLabelValue!=\"\")?options.arabicLabelValue:options.labelValue+\"in\r\n            Arabic\"}}\r\n            <!--Asterisk-->\r\n            <span\r\n              *ngIf=\"(((options.showAsterisk&&options.isRequired)||(options.isRequired))&&isShowAsteriskInArabic)&&!options.isReadonly\"\r\n              class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\" *ngIf=\"!options.isReadonly\">\r\n            <!--input-->\r\n            <angular-editor dir=\"rtl\" class=\"{{options.extraClasses_AR}} \" (change)=\"onTextChange('ar')\"\r\n              [class.is-invalid]=\"arabicHtmlEditorFormControl.invalid && arabicHtmlEditorFormControl.touched\"\r\n              formControlName=\"Arabic\" [config]=\"editorArabicConfig\"></angular-editor>\r\n          </div>\r\n          <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.value.arabic\"></span>\r\n\r\n          </div>\r\n          <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n            <!-- LabelDescription-->\r\n            <div class=\"bbsf-control-desc\"\r\n              *ngIf=\"(options.labelDescription!=null&&options.labelDescription!='')||(options.arabicLabelDescription!=null&&options.arabicLabelDescription!='')\">\r\n              {{(options.arabicLabelDescription!=null&&options.arabicLabelDescription!=\"\")?options.arabicLabelDescription:options.labelDescription}}\r\n            </div>\r\n            <!-- requiredText-->\r\n            <div class=\"bbsf-validation\"\r\n              *ngIf=\"(arabicHtmlEditorFormControl.invalid && arabicHtmlEditorFormControl.touched)\">\r\n              {{getErrorValidation(arabicHtmlEditorFormControl.errors|keyvalue)}}\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>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: AngularEditorModule }, { kind: "component", type: i6$2.AngularEditorComponent, selector: "angular-editor", inputs: ["id", "config", "placeholder", "tabIndex"], outputs: ["html", "viewMode", "blur", "focus"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiLingualHtmlEditorComponent, deps: [{ token: i2.FormGroupDirective }, { token: i2.ControlContainer, optional: true }, { token: ControlUtility }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MultiLingualHtmlEditorComponent, isStandalone: true, selector: "BBSF-MultiLingualHtmlEditor", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, ngImport: i0, template: "<div [formGroup]=\"group\">\r\n  <div class=\"bbsf-control form-group bbsf-multilang-htmleditor mb-0\" [formGroup]=\"multilingualHtmlEditorgroup\">\r\n    <div class=\"row\">\r\n      <!--English htmleditor-->\r\n      <div [ngClass]=\"showArabicHtmlEditor? 'col-md-6' : 'col-md-12'\" *ngIf=\"showEnglishHtmlEditor\"\r\n        class=\" bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.labelExtraClasses}}\" [hidden]=\"options.isHideEnglishLabel\">\r\n            {{(options.englishLabelValue!=null&&options.englishLabelValue!=\"\")?options.englishLabelValue:options.labelValue+\"in\r\n            English\"}}\r\n            <!--Asterisk-->\r\n            <span\r\n              *ngIf=\"(((options.showAsterisk&&options.isRequired)||(options.isRequired)&&isShowAsteriskInEnglish))&&!options.isReadonly\"\r\n              class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\" *ngIf=\"!options.isReadonly\">\r\n            <!--input-->\r\n            <angular-editor class=\"{{options.extraClasses_EN}}\" (change)=\"onTextChange('en')\"\r\n              [class.is-invalid]=\"englishHtmlEditorFormControl.invalid && englishHtmlEditorFormControl.touched\"\r\n              formControlName=\"English\" [config]=\"editorEnglishConfig\"></angular-editor>\r\n          </div>\r\n          <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.value.english\"></span>\r\n\r\n          </div>\r\n          <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n            <!-- LabelDescription-->\r\n            <div class=\"bbsf-control-desc\"\r\n              *ngIf=\"(options.labelDescription!=null&&options.labelDescription!='') ||(options.englishLabelDescription!=null&&options.englishLabelDescription!='')\">\r\n              {{(options.englishLabelDescription!=null&&options.englishLabelDescription!=\"\")?options.englishLabelDescription:options.labelDescription}}\r\n            </div>\r\n            <!-- requiredText-->\r\n            <div class=\"bbsf-validation\"\r\n              *ngIf=\"(englishHtmlEditorFormControl.invalid && englishHtmlEditorFormControl.touched)\">\r\n              {{getErrorValidation(englishHtmlEditorFormControl.errors|keyvalue)}}\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>\r\n        </div>\r\n      </div>\r\n      <!--Arabic htmleditor-->\r\n      <div *ngIf=\"showArabicHtmlEditor\" [ngClass]=\"showEnglishHtmlEditor? 'col-md-6' : 'col-md-12'\"\r\n        class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.labelExtraClasses}}\" [hidden]=\"options.isHideArabicLabel\">\r\n            {{(options.arabicLabelValue!=null&&options.arabicLabelValue!=\"\")?options.arabicLabelValue:options.labelValue+\"in\r\n            Arabic\"}}\r\n            <!--Asterisk-->\r\n            <span\r\n              *ngIf=\"(((options.showAsterisk&&options.isRequired)||(options.isRequired))&&isShowAsteriskInArabic)&&!options.isReadonly\"\r\n              class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\" *ngIf=\"!options.isReadonly\">\r\n            <!--input-->\r\n            <angular-editor dir=\"rtl\" class=\"{{options.extraClasses_AR}} \" (change)=\"onTextChange('ar')\"\r\n              [class.is-invalid]=\"arabicHtmlEditorFormControl.invalid && arabicHtmlEditorFormControl.touched\"\r\n              formControlName=\"Arabic\" [config]=\"editorArabicConfig\"></angular-editor>\r\n          </div>\r\n          <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.value.arabic\"></span>\r\n\r\n          </div>\r\n          <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n            <!-- LabelDescription-->\r\n            <div class=\"bbsf-control-desc\"\r\n              *ngIf=\"(options.labelDescription!=null&&options.labelDescription!='')||(options.arabicLabelDescription!=null&&options.arabicLabelDescription!='')\">\r\n              {{(options.arabicLabelDescription!=null&&options.arabicLabelDescription!=\"\")?options.arabicLabelDescription:options.labelDescription}}\r\n            </div>\r\n            <!-- requiredText-->\r\n            <div class=\"bbsf-validation\"\r\n              *ngIf=\"(arabicHtmlEditorFormControl.invalid && arabicHtmlEditorFormControl.touched)\">\r\n              {{getErrorValidation(arabicHtmlEditorFormControl.errors|keyvalue)}}\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>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: AngularEditorModule }, { kind: "component", type: i6$2.AngularEditorComponent, selector: "angular-editor", inputs: ["id", "config", "placeholder", "tabIndex"], outputs: ["html", "viewMode", "blur", "focus"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiLingualHtmlEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiLingualHtmlEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-MultiLingualHtmlEditor', standalone: true, imports: [
                         CommonModule,
@@ -6132,11 +6171,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * ```
  */
 class BBSFEditorsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFEditorsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: BBSFEditorsModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFEditorsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: BBSFEditorsModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
-            NgxSummernoteModule,
             LMarkdownEditorModule,
             BBSFUtilitiesModule,
             // Import standalone components
@@ -6147,10 +6185,9 @@ class BBSFEditorsModule {
             HtmlEditorComponent,
             MarkdownEditorComponent,
             MultiLingualHtmlEditorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFEditorsModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFEditorsModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
-            NgxSummernoteModule,
             LMarkdownEditorModule,
             BBSFUtilitiesModule,
             // Import standalone components
@@ -6158,15 +6195,14 @@ class BBSFEditorsModule {
             MarkdownEditorComponent,
             MultiLingualHtmlEditorComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFEditorsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFEditorsModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [],
+                    declarations: [], // No declarations - components are standalone
                     imports: [
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
-                        NgxSummernoteModule,
                         LMarkdownEditorModule,
                         BBSFUtilitiesModule,
                         // Import standalone components
@@ -7050,7 +7086,7 @@ class FileUploadComponent {
         FileUploadComponent.controlContainerStatic = this.controlContainer;
         // Initialize uploader with minimal options, URL will be set in ngOnInit only if needed
         this.uploader = new FileUploader({
-            url: '',
+            url: '', // Empty URL initially, will be set in ngOnInit only if isUploadFileAsync is true
             disableMultipart: false // 'DisableMultipart' must be 'true' for formatDataFunction to be called.
         });
         this.hasAnotherDropZoneOver = false;
@@ -7064,7 +7100,7 @@ class FileUploadComponent {
         // Note: allowedMimeType in ng2-file-upload doesn't work well with comma-separated enum values
         // We handle MIME type validation manually in onFileChange
         this.uploader.setOptions({
-            url: '',
+            url: '', // Not used - uploads handled by FileUploadService when isUploadFileAsync is true
             disableMultipart: false,
             autoUpload: false // We manually control uploads
             // allowedMimeType removed - we handle validation manually for better control
@@ -7700,10 +7736,10 @@ class FileUploadComponent {
         // Update the options value for two-way binding
         this.options.value = value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileUploadComponent, deps: [{ token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: ControlUtility }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }, { token: FileUploadService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FileUploadComponent, isStandalone: true, selector: "BBSF-FileUpload", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange", isUploadComplete: "isUploadComplete" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-file-upload\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"options.viewType == 1 ? 'bbsf-vertical' : 'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label [hidden]=\"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\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div ng2FileDrop class=\"bbsf-input-container {{ options.extraClasses }}\"\r\n      *ngIf=\"options.isDropZone && !(options.isMultipleFile == false && uploader.queue.length > 0) && !options.isReadonly\"\r\n      [ngClass]=\"{ 'another-file-over-class': hasAnotherDropZoneOver }\" (onFileDrop)=\"onFileChange()\"\r\n      (fileOver)=\"fileOverAnother($event)\" [uploader]=\"uploader\" [accept]=\"acceptedType\" id=\"{{ options.name }}\"\r\n      multiple=\"{{ options.isMultipleFile ? 'multiple' : '' }}\" aria-invalid=\"true\" type=\"file\"\r\n      [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\"\r\n      (click)=\"fileInputDropZone.click()\">\r\n      <div class=\"dropzone-label\">\r\n        <div class=\"svg-and-validation\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"70\" viewBox=\"0 0 70 70\" fill=\"none\">\r\n            <path opacity=\"0.4\"\r\n              d=\"M58.333 48.8332C61.8957 45.8908 64.1663 41.4397 64.1663 36.4583C64.1663 27.5988 56.9843 20.4167 48.1247 20.4167C47.4874 20.4167 46.8912 20.0842 46.5675 19.5351C42.7641 13.0808 35.7417 8.75 27.708 8.75C15.6268 8.75 5.83301 18.5438 5.83301 30.625C5.83301 36.6511 8.26974 42.1082 12.2116 46.0644\"\r\n              stroke=\"#4B5489\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            <path d=\"M23.333 46.6667L34.9997 35M34.9997 35L46.6663 46.6667M34.9997 35V61.25\" stroke=\"#4B5489\"\r\n              stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg validation-msg-header text-center\">\r\n            {{ UtilityService.getResourceValue('DragAndDropHere') }}\r\n          </div>\r\n          <div class=\"bbsf-validation-msg text-center\" *ngIf=\"validationMessage\" [innerHTML]=\"validationMessage\"></div>\r\n          <div class=\"bbsf-validation-msg ng-star-inserted text-center text-danger\"\r\n            *ngIf=\"validationCountMessage && options.isMultipleFile && options.maxNoOfFiles > 0\"\r\n            [innerHTML]=\"validationCountMessage\"></div>\r\n        </div>\r\n      </div>\r\n      <input ng2FileSelect [uploader]=\"uploader\" [accept]=\"acceptedType\"\r\n        class=\"fileSelector customFileUploadPlacment hidden v-required-multiplefiles d-none\"\r\n        multiple=\"{{ options.isMultipleFile ? 'multiple' : '' }}\" name=\"file\" type=\"file\" value=\"\" autocomplete=\"off\"\r\n        (change)=\"onFileChange()\" [ngClass]=\"options.viewType == 1 ? '' : 'col-md-9'\" id=\"{{ options.name }}\"\r\n        aria-invalid=\"true\" #fileInputDropZone\r\n        [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\" />\r\n    </div>\r\n    <!--Not allowed dropZone-->\r\n    <div class=\"bbsf-input-container\" *ngIf=\"!options.isDropZone && !isHideInput() && !options.isReadonly\"\r\n      (click)=\"fileInput.click()\">\r\n      <div class=\"dropzone-label\">\r\n        <div class=\"svg-and-validation\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"70\" viewBox=\"0 0 70 70\" fill=\"none\">\r\n            <path opacity=\"0.4\"\r\n              d=\"M58.333 48.8332C61.8957 45.8908 64.1663 41.4397 64.1663 36.4583C64.1663 27.5988 56.9843 20.4167 48.1247 20.4167C47.4874 20.4167 46.8912 20.0842 46.5675 19.5351C42.7641 13.0808 35.7417 8.75 27.708 8.75C15.6268 8.75 5.83301 18.5438 5.83301 30.625C5.83301 36.6511 8.26974 42.1082 12.2116 46.0644\"\r\n              stroke=\"#4B5489\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            <path d=\"M23.333 46.6667L34.9997 35M34.9997 35L46.6663 46.6667M34.9997 35V61.25\" stroke=\"#4B5489\"\r\n              stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg text-center\">{{ UtilityService.getResourceValue('Upload') }}</div>\r\n          <div class=\"bbsf-validation-msg text-center\" *ngIf=\"validationMessage\" [innerHTML]=\"validationMessage\"></div>\r\n          <div class=\"bbsf-validation-msg ng-star-inserted text-center text-danger\"\r\n            *ngIf=\"validationCountMessage && options.isMultipleFile && options.maxNoOfFiles > 0\"\r\n            [innerHTML]=\"validationCountMessage\"></div>\r\n        </div>\r\n      </div>\r\n      <input ng2FileSelect [uploader]=\"uploader\" [accept]=\"acceptedType\"\r\n        class=\"fileSelector customFileUploadPlacment hidden v-required-multiplefiles d-none\"\r\n        multiple=\"{{ options.isMultipleFile ? 'multiple' : '' }}\" name=\"file\" type=\"file\" value=\"\" autocomplete=\"off\"\r\n        (change)=\"onFileChange()\" [ngClass]=\"options.viewType == 1 ? '' : 'col-md-9'\" id=\"{{ options.name }}\"\r\n        aria-invalid=\"true\" #fileInput\r\n        [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\" />\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.isReadonly && !options.value\">\r\n      <span class=\"readonly-view\">{{ UtilityService.getResourceValue('NA') }}</span>\r\n    </div>\r\n  </div>\r\n  <!--items uploaded-->\r\n  <div class=\"uploaded-items\">\r\n    <div class=\"btn-group\" *ngFor=\"let item of uploader.queue\">\r\n      <ng-container *ngIf=\"item?.progress == 100 && options.isUploadFileAsync\">\r\n        <a *ngIf=\"item?.file?.rawFile['url']\" href=\"{{ item?.file?.rawFile['url'] }}\"\r\n          class=\"btn-download-file btn-sm btn-progress-upload\" download>\r\n          <span class=\"file-name\">{{ sanitizeFileName(item?.file?.name || '') }}</span>\r\n        </a>\r\n        <a *ngIf=\"item?.file?.rawFile['url'] == null\" class=\"btn-download-file btn-sm btn-progress-upload\">\r\n          <span class=\"file-name\">{{ sanitizeFileName(item?.file?.name || '') }}</span>\r\n        </a>\r\n        <button *ngIf=\"!options.isReadonly\" class=\"btn btn-download-file btn-sm\"\r\n          (click)=\"item.remove(); removeFromControlValue(item)\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n            <path opacity=\"0.4\"\r\n              d=\"M9.33301 3.70584V3.26663C9.33301 2.65166 9.33301 2.34419 9.20587 2.1093C9.09405 1.9027 8.91555 1.73471 8.69604 1.62944C8.44647 1.50977 8.11977 1.50977 7.46638 1.50977H6.53305C5.87965 1.50977 5.55296 1.50977 5.30339 1.62944C5.08387 1.73471 4.90539 1.9027 4.79354 2.1093C4.66638 2.34419 4.66638 2.65166 4.66638 3.26663V3.70584\"\r\n              stroke=\"#D83731\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            <path\r\n              d=\"M1.75 3.70605H12.25M11.0834 3.70605V9.8551C11.0834 10.7775 11.0834 11.2387 10.8926 11.591C10.7248 11.901 10.4571 12.1529 10.1278 12.3109C9.75345 12.4904 9.26345 12.4904 8.28334 12.4904H5.71666C4.73658 12.4904 4.24653 12.4904 3.87218 12.3109C3.5429 12.1529 3.27519 11.901 3.10741 11.591C2.91666 11.2387 2.91666 10.7775 2.91666 9.8551V3.70605\"\r\n              stroke=\"#D83731\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        </button>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!options.isUploadFileAsync\">\r\n        <a href=\"{{ item?.file?.rawFile['url'] }}\" *ngIf=\"item?.file?.rawFile['url']\" class=\"btn btn-download-file btn-sm\" download>\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M21 22H3C2.4 22 2 21.6 2 21C2 20.4 2.4 20 3 20H21C21.6 20 22 20.4 22 21C22 21.6 21.6 22 21 22ZM13 13.4V3C13 2.4 12.6 2 12 2C11.4 2 11 2.4 11 3V13.4H13Z\"\r\n              fill=\"currentColor\"></path>\r\n            <path opacity=\"0.3\" d=\"M7 13.4H17L12.7 17.7C12.3 18.1 11.7 18.1 11.3 17.7L7 13.4Z\" fill=\"currentColor\">\r\n            </path>\r\n          </svg>\r\n          <span class=\"file-name\">{{ sanitizeFileName(item?.file?.name || '') }}</span>\r\n        </a>\r\n         <a *ngIf=\"item?.file?.rawFile['url'] == null\" class=\"btn-download-file btn-sm btn-progress-upload\">\r\n          <span class=\"file-name\">{{ sanitizeFileName(item?.file?.name || '') }}</span>\r\n        </a>\r\n        <button *ngIf=\"!options.isReadonly\" class=\"btn btn-download-file btn-sm btn-danger\"\r\n          (click)=\"item.remove(); removeFromControlValue(item)\">\r\n          <i class=\"fa fa-times px-0\"></i>\r\n        </button>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <!--progress bar file upload-->\r\n  <div *ngFor=\"let item of uploader.queue\">\r\n    <div class=\"upload-items\" [ngClass]=\"{ 'mt-4': options.isMultipleFile == true }\"\r\n      *ngIf=\"item?.progress < 100 && options.isUploadFileAsync\">\r\n      <div class=\"upload-items-toolbar\">\r\n        <h4>{{ item?.file?.name }}</h4>\r\n        <span (click)=\"item.remove(); removeFromControlValue(item)\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n            <g clip-path=\"url(#clip0_1324_13216)\">\r\n              <path opacity=\"0.4\"\r\n                d=\"M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z\"\r\n                stroke=\"#DBE1F0\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              <path d=\"M11.25 6.75L6.75 11.25M6.75 6.75L11.25 11.25\" stroke=\"#DBE1F0\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </g>\r\n            <defs>\r\n              <clipPath id=\"clip0_1324_13216\">\r\n                <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n              </clipPath>\r\n            </defs>\r\n          </svg>\r\n        </span>\r\n      </div>\r\n      <div class=\"progress\">\r\n        <div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"70\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n          [class.file-uploaded]=\"item?.progress < 100\" [style.width.%]=\"item?.progress\" *ngIf=\"item?.progress > 0\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\" *ngIf=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\r\n      {{ getErrorValidation(fileUploadFormControl.errors | keyvalue) }}\r\n    </div>\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription != null\">{{ options.labelDescription }}</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: "ngmodule", type: CommonModule }, { 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: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "directive", type: i5$3.FileDropDirective, selector: "[ng2FileDrop]", inputs: ["uploader"], outputs: ["fileOver", "onFileDrop"] }, { kind: "directive", type: i5$3.FileSelectDirective, selector: "[ng2FileSelect]", inputs: ["uploader"], outputs: ["onFileSelected"] }, { kind: "ngmodule", type: NgxDropzoneModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FileUploadComponent, deps: [{ token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: ControlUtility }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }, { token: FileUploadService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: FileUploadComponent, isStandalone: true, selector: "BBSF-FileUpload", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange", isUploadComplete: "isUploadComplete" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-file-upload\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"options.viewType == 1 ? 'bbsf-vertical' : 'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label [hidden]=\"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\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div ng2FileDrop class=\"bbsf-input-container {{ options.extraClasses }}\"\r\n      *ngIf=\"options.isDropZone && !(options.isMultipleFile == false && uploader.queue.length > 0) && !options.isReadonly\"\r\n      [ngClass]=\"{ 'another-file-over-class': hasAnotherDropZoneOver }\" (onFileDrop)=\"onFileChange()\"\r\n      (fileOver)=\"fileOverAnother($event)\" [uploader]=\"uploader\" [accept]=\"acceptedType\" id=\"{{ options.name }}\"\r\n      multiple=\"{{ options.isMultipleFile ? 'multiple' : '' }}\" aria-invalid=\"true\" type=\"file\"\r\n      [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\"\r\n      (click)=\"fileInputDropZone.click()\">\r\n      <div class=\"dropzone-label\">\r\n        <div class=\"svg-and-validation\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"70\" viewBox=\"0 0 70 70\" fill=\"none\">\r\n            <path opacity=\"0.4\"\r\n              d=\"M58.333 48.8332C61.8957 45.8908 64.1663 41.4397 64.1663 36.4583C64.1663 27.5988 56.9843 20.4167 48.1247 20.4167C47.4874 20.4167 46.8912 20.0842 46.5675 19.5351C42.7641 13.0808 35.7417 8.75 27.708 8.75C15.6268 8.75 5.83301 18.5438 5.83301 30.625C5.83301 36.6511 8.26974 42.1082 12.2116 46.0644\"\r\n              stroke=\"#4B5489\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            <path d=\"M23.333 46.6667L34.9997 35M34.9997 35L46.6663 46.6667M34.9997 35V61.25\" stroke=\"#4B5489\"\r\n              stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg validation-msg-header text-center\">\r\n            {{ UtilityService.getResourceValue('DragAndDropHere') }}\r\n          </div>\r\n          <div class=\"bbsf-validation-msg text-center\" *ngIf=\"validationMessage\" [innerHTML]=\"validationMessage\"></div>\r\n          <div class=\"bbsf-validation-msg ng-star-inserted text-center text-danger\"\r\n            *ngIf=\"validationCountMessage && options.isMultipleFile && options.maxNoOfFiles > 0\"\r\n            [innerHTML]=\"validationCountMessage\"></div>\r\n        </div>\r\n      </div>\r\n      <input ng2FileSelect [uploader]=\"uploader\" [accept]=\"acceptedType\"\r\n        class=\"fileSelector customFileUploadPlacment hidden v-required-multiplefiles d-none\"\r\n        multiple=\"{{ options.isMultipleFile ? 'multiple' : '' }}\" name=\"file\" type=\"file\" value=\"\" autocomplete=\"off\"\r\n        (change)=\"onFileChange()\" [ngClass]=\"options.viewType == 1 ? '' : 'col-md-9'\" id=\"{{ options.name }}\"\r\n        aria-invalid=\"true\" #fileInputDropZone\r\n        [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\" />\r\n    </div>\r\n    <!--Not allowed dropZone-->\r\n    <div class=\"bbsf-input-container\" *ngIf=\"!options.isDropZone && !isHideInput() && !options.isReadonly\"\r\n      (click)=\"fileInput.click()\">\r\n      <div class=\"dropzone-label\">\r\n        <div class=\"svg-and-validation\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"70\" viewBox=\"0 0 70 70\" fill=\"none\">\r\n            <path opacity=\"0.4\"\r\n              d=\"M58.333 48.8332C61.8957 45.8908 64.1663 41.4397 64.1663 36.4583C64.1663 27.5988 56.9843 20.4167 48.1247 20.4167C47.4874 20.4167 46.8912 20.0842 46.5675 19.5351C42.7641 13.0808 35.7417 8.75 27.708 8.75C15.6268 8.75 5.83301 18.5438 5.83301 30.625C5.83301 36.6511 8.26974 42.1082 12.2116 46.0644\"\r\n              stroke=\"#4B5489\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            <path d=\"M23.333 46.6667L34.9997 35M34.9997 35L46.6663 46.6667M34.9997 35V61.25\" stroke=\"#4B5489\"\r\n              stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg text-center\">{{ UtilityService.getResourceValue('Upload') }}</div>\r\n          <div class=\"bbsf-validation-msg text-center\" *ngIf=\"validationMessage\" [innerHTML]=\"validationMessage\"></div>\r\n          <div class=\"bbsf-validation-msg ng-star-inserted text-center text-danger\"\r\n            *ngIf=\"validationCountMessage && options.isMultipleFile && options.maxNoOfFiles > 0\"\r\n            [innerHTML]=\"validationCountMessage\"></div>\r\n        </div>\r\n      </div>\r\n      <input ng2FileSelect [uploader]=\"uploader\" [accept]=\"acceptedType\"\r\n        class=\"fileSelector customFileUploadPlacment hidden v-required-multiplefiles d-none\"\r\n        multiple=\"{{ options.isMultipleFile ? 'multiple' : '' }}\" name=\"file\" type=\"file\" value=\"\" autocomplete=\"off\"\r\n        (change)=\"onFileChange()\" [ngClass]=\"options.viewType == 1 ? '' : 'col-md-9'\" id=\"{{ options.name }}\"\r\n        aria-invalid=\"true\" #fileInput\r\n        [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\" />\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.isReadonly && !options.value\">\r\n      <span class=\"readonly-view\">{{ UtilityService.getResourceValue('NA') }}</span>\r\n    </div>\r\n  </div>\r\n  <!--items uploaded-->\r\n  <div class=\"uploaded-items\">\r\n    <div class=\"btn-group\" *ngFor=\"let item of uploader.queue\">\r\n      <ng-container *ngIf=\"item?.progress == 100 && options.isUploadFileAsync\">\r\n        <a *ngIf=\"item?.file?.rawFile['url']\" href=\"{{ item?.file?.rawFile['url'] }}\"\r\n          class=\"btn-download-file btn-sm btn-progress-upload\" download>\r\n          <span class=\"file-name\">{{ sanitizeFileName(item?.file?.name || '') }}</span>\r\n        </a>\r\n        <a *ngIf=\"item?.file?.rawFile['url'] == null\" class=\"btn-download-file btn-sm btn-progress-upload\">\r\n          <span class=\"file-name\">{{ sanitizeFileName(item?.file?.name || '') }}</span>\r\n        </a>\r\n        <button *ngIf=\"!options.isReadonly\" class=\"btn btn-download-file btn-sm\"\r\n          (click)=\"item.remove(); removeFromControlValue(item)\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n            <path opacity=\"0.4\"\r\n              d=\"M9.33301 3.70584V3.26663C9.33301 2.65166 9.33301 2.34419 9.20587 2.1093C9.09405 1.9027 8.91555 1.73471 8.69604 1.62944C8.44647 1.50977 8.11977 1.50977 7.46638 1.50977H6.53305C5.87965 1.50977 5.55296 1.50977 5.30339 1.62944C5.08387 1.73471 4.90539 1.9027 4.79354 2.1093C4.66638 2.34419 4.66638 2.65166 4.66638 3.26663V3.70584\"\r\n              stroke=\"#D83731\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            <path\r\n              d=\"M1.75 3.70605H12.25M11.0834 3.70605V9.8551C11.0834 10.7775 11.0834 11.2387 10.8926 11.591C10.7248 11.901 10.4571 12.1529 10.1278 12.3109C9.75345 12.4904 9.26345 12.4904 8.28334 12.4904H5.71666C4.73658 12.4904 4.24653 12.4904 3.87218 12.3109C3.5429 12.1529 3.27519 11.901 3.10741 11.591C2.91666 11.2387 2.91666 10.7775 2.91666 9.8551V3.70605\"\r\n              stroke=\"#D83731\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        </button>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!options.isUploadFileAsync\">\r\n        <a href=\"{{ item?.file?.rawFile['url'] }}\" *ngIf=\"item?.file?.rawFile['url']\" class=\"btn btn-download-file btn-sm\" download>\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M21 22H3C2.4 22 2 21.6 2 21C2 20.4 2.4 20 3 20H21C21.6 20 22 20.4 22 21C22 21.6 21.6 22 21 22ZM13 13.4V3C13 2.4 12.6 2 12 2C11.4 2 11 2.4 11 3V13.4H13Z\"\r\n              fill=\"currentColor\"></path>\r\n            <path opacity=\"0.3\" d=\"M7 13.4H17L12.7 17.7C12.3 18.1 11.7 18.1 11.3 17.7L7 13.4Z\" fill=\"currentColor\">\r\n            </path>\r\n          </svg>\r\n          <span class=\"file-name\">{{ sanitizeFileName(item?.file?.name || '') }}</span>\r\n        </a>\r\n         <a *ngIf=\"item?.file?.rawFile['url'] == null\" class=\"btn-download-file btn-sm btn-progress-upload\">\r\n          <span class=\"file-name\">{{ sanitizeFileName(item?.file?.name || '') }}</span>\r\n        </a>\r\n        <button *ngIf=\"!options.isReadonly\" class=\"btn btn-download-file btn-sm btn-danger\"\r\n          (click)=\"item.remove(); removeFromControlValue(item)\">\r\n          <i class=\"fa fa-times px-0\"></i>\r\n        </button>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <!--progress bar file upload-->\r\n  <div *ngFor=\"let item of uploader.queue\">\r\n    <div class=\"upload-items\" [ngClass]=\"{ 'mt-4': options.isMultipleFile == true }\"\r\n      *ngIf=\"item?.progress < 100 && options.isUploadFileAsync\">\r\n      <div class=\"upload-items-toolbar\">\r\n        <h4>{{ item?.file?.name }}</h4>\r\n        <span (click)=\"item.remove(); removeFromControlValue(item)\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n            <g clip-path=\"url(#clip0_1324_13216)\">\r\n              <path opacity=\"0.4\"\r\n                d=\"M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z\"\r\n                stroke=\"#DBE1F0\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              <path d=\"M11.25 6.75L6.75 11.25M6.75 6.75L11.25 11.25\" stroke=\"#DBE1F0\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </g>\r\n            <defs>\r\n              <clipPath id=\"clip0_1324_13216\">\r\n                <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n              </clipPath>\r\n            </defs>\r\n          </svg>\r\n        </span>\r\n      </div>\r\n      <div class=\"progress\">\r\n        <div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"70\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n          [class.file-uploaded]=\"item?.progress < 100\" [style.width.%]=\"item?.progress\" *ngIf=\"item?.progress > 0\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\" *ngIf=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\r\n      {{ getErrorValidation(fileUploadFormControl.errors | keyvalue) }}\r\n    </div>\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription != null\">{{ options.labelDescription }}</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: "ngmodule", type: CommonModule }, { 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: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "directive", type: i5$3.FileDropDirective, selector: "[ng2FileDrop]", inputs: ["uploader"], outputs: ["fileOver", "onFileDrop"] }, { kind: "directive", type: i5$3.FileSelectDirective, selector: "[ng2FileSelect]", inputs: ["uploader"], outputs: ["onFileSelected"] }, { kind: "ngmodule", type: NgxDropzoneModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-FileUpload', standalone: true, imports: [
                         CommonModule,
@@ -8044,10 +8080,10 @@ class ImageUploaderComponent {
     openModal(open) {
         this.mdlSampleIsOpen = open;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageUploaderComponent, deps: [{ token: i0.NgZone }, { token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }, { token: i3$2.NgbModal }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ImageUploaderComponent, isStandalone: true, selector: "BBSF-ImageUpload", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "angularCropper", first: true, predicate: ["angularCropper"], descendants: true }], ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-image-upload\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label [hidden]=\"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\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div *ngIf=\"options.allowDropZone&&!options.isReadonly\" class=\"bbsf-input-container {{options.extraClasses}}\"\r\n      ngx-dropzone [disabled]=\"options.isDisabled\" [accept]=\"acceptedType\" [multiple]=\"options.isMultiple\"\r\n      (change)=\"onFileChange($event)\" ngDefaultControl formControlName=\"{{options.name}}\" [maxFileSize]=\"maxFileSize\"\r\n      id=\"{{options.name}}\" [class.is-invalid]=\"imageUploadFormControl.invalid && imageUploadFormControl.touched\">\r\n      <ngx-dropzone-label class=\"dropzone-label\">\r\n        <img *ngIf=\"imageSource\" [src]=\"imageSource\"\r\n          style=\"align-items: center;border-radius: 5px;display: flex;height: 100px;justify-content: center;margin: 10px;max-width: 180px;min-height: 100px;min-width: 180px;padding: 0px 20px;position: relative;\" />\r\n        <div class=\"svg-and-validation\" *ngIf=\"!imageSource\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n            style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\"\r\n              d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\"\r\n              fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n            <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\"\r\n              style=\"fill: #989898;\"></path>\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg\" *ngIf=\"validationMessage\" [innerHTML]=\"validationMessage\"></div>\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <ngx-dropzone-image-preview class=\"dropzone-preview\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\"\r\n        (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n    </div>\r\n    <!--Not allowed dropZone-->\r\n    <div *ngIf=\"!options.allowDropZone&&!options.isReadonly\">\r\n      <ngx-dropzone-label *ngIf=\"files.length==0\">\r\n        <div #element (click)=\"showImageUploader(element)\">\r\n          <img [src]=\"imageSource\" />\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <div class=\"d-none {{options.extraClasses}}\" ngx-dropzone [disabled]=\"options.isDisabled\" [accept]=\"acceptedType\"\r\n        [multiple]=\"options.isMultiple\" (change)=\"onFileChange($event)\" ngDefaultControl\r\n        formControlName=\"{{options.name}}\" [maxFileSize]=\"maxFileSize\" id=\"{{options.name}}\"\r\n        [class.is-invalid]=\"imageUploadFormControl.invalid && imageUploadFormControl.touched\">\r\n      </div>\r\n      <ngx-dropzone-image-preview *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\"\r\n        (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n      <!--Validation text-->\r\n      <div class=\"bbsf-validation-msg\" *ngIf=\"validationMessage\" [innerHTML]=\"validationMessage\"></div>\r\n    </div>\r\n\r\n    <ngx-dropzone-label *ngIf=\"files.length==0&&options.isReadonly\">\r\n      <div *ngIf=\"imageSource\" #element>\r\n        <img [src]=\"imageSource\" />\r\n      </div>\r\n      <div *ngIf=\"!imageSource\">\r\n        <span class=\"readonly-view\">{{utilityService.getResourceValue('NA')}}</span>\r\n      </div>\r\n    </ngx-dropzone-label>\r\n  </div>\r\n  <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\" *ngIf=\"(imageUploadFormControl.invalid && imageUploadFormControl.touched)\">\r\n      {{getErrorValidation(imageUploadFormControl.errors|keyvalue)}}\r\n    </div>\r\n\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n      {{resetError()}}</div>\r\n  </div>\r\n  <!-- image cropper modal-->\r\n  <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\"\r\n    [ngStyle]=\"{'display': mdlSampleIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n    <div class=\"modal-dialog modal-lg\">\r\n      <div class=\"modal-content\">\r\n        <div class=\"modal-header\">\r\n          <h4 class=\"modal-title\">\r\n            {{utilityService.getResourceValue(\"CropImage\")}}\r\n          </h4>\r\n          <button type=\"button\" class=\"btn-close\" data-dismiss=\"modal\" (click)=\"openModal(false)\"></button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <div *ngIf=\"imageUrl\">\r\n            <angular-cropper #angularCropper [cropperOptions]=\"config\" [imageUrl]=\"imageUrl\">\r\n            </angular-cropper>\r\n            <img [src]=\"imgwUrl\" />\r\n          </div>\r\n          <div class=\"cropper-btns\">\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"ZoomIn\")}}'>\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-search-plus\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"zoomImage(-0.1)\" class=\"btn btn-default\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"ZoomOut\")}}'>\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-search-minus\"></span>\r\n                </span>\r\n              </button>\r\n            </div>\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"moveImage(-10,0)\" class=\"btn btn-default\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"MoveLeft\")}}'>\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-left\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"moveImage(10,0)\" class=\"btn btn-default\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"MoveRight\")}}'>\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-right\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"moveImage(0,-10)\" class=\"btn btn-default\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"MoveUp\")}}'>\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-up\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"moveImage(0,10)\" class=\"btn btn-default\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"MoveDown\")}}'>\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-down\"></span>\r\n                </span>\r\n              </button>\r\n            </div>\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"rotateImage(-45)\" class=\"btn btn-default\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"RotateLeft\")}}'>\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-undo-alt\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"rotateImage(45)\" class=\"btn btn-default\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"RotateRight\")}}'>\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-redo-alt\"></span>\r\n                </span>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"modal-footer\" align=\"right\">\r\n          <button type=\"button\" id=\"btnClose\" class=\"btn btn-sm btn-light\" (click)=\"openModal(false)\">\r\n            {{utilityService.getResourceValue(\"CancelLabel\")}}\r\n          </button>\r\n          <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-sm btn-brand\">\r\n            {{utilityService.getResourceValue(\"Crop\")}}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- readonly -->\r\n\r\n\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: FileUploadModule }, { kind: "ngmodule", type: AngularCropperjsModule }, { kind: "component", type: i7$4.CropperComponent, selector: "angular-cropper", inputs: ["imageUrl", "settings", "cropbox", "loadImageErrorText", "cropperOptions"], outputs: ["export", "ready"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i3$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ImageUploaderComponent, deps: [{ token: i0.NgZone }, { token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }, { token: i3$2.NgbModal }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ImageUploaderComponent, isStandalone: true, selector: "BBSF-ImageUpload", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "angularCropper", first: true, predicate: ["angularCropper"], descendants: true }], ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-image-upload\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label [hidden]=\"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\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div *ngIf=\"options.allowDropZone&&!options.isReadonly\" class=\"bbsf-input-container {{options.extraClasses}}\"\r\n      ngx-dropzone [disabled]=\"options.isDisabled\" [accept]=\"acceptedType\" [multiple]=\"options.isMultiple\"\r\n      (change)=\"onFileChange($event)\" ngDefaultControl formControlName=\"{{options.name}}\" [maxFileSize]=\"maxFileSize\"\r\n      id=\"{{options.name}}\" [class.is-invalid]=\"imageUploadFormControl.invalid && imageUploadFormControl.touched\">\r\n      <ngx-dropzone-label class=\"dropzone-label\">\r\n        <img *ngIf=\"imageSource\" [src]=\"imageSource\"\r\n          style=\"align-items: center;border-radius: 5px;display: flex;height: 100px;justify-content: center;margin: 10px;max-width: 180px;min-height: 100px;min-width: 180px;padding: 0px 20px;position: relative;\" />\r\n        <div class=\"svg-and-validation\" *ngIf=\"!imageSource\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n            style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\"\r\n              d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\"\r\n              fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n            <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\"\r\n              style=\"fill: #989898;\"></path>\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg\" *ngIf=\"validationMessage\" [innerHTML]=\"validationMessage\"></div>\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <ngx-dropzone-image-preview class=\"dropzone-preview\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\"\r\n        (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n    </div>\r\n    <!--Not allowed dropZone-->\r\n    <div *ngIf=\"!options.allowDropZone&&!options.isReadonly\">\r\n      <ngx-dropzone-label *ngIf=\"files.length==0\">\r\n        <div #element (click)=\"showImageUploader(element)\">\r\n          <img [src]=\"imageSource\" />\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <div class=\"d-none {{options.extraClasses}}\" ngx-dropzone [disabled]=\"options.isDisabled\" [accept]=\"acceptedType\"\r\n        [multiple]=\"options.isMultiple\" (change)=\"onFileChange($event)\" ngDefaultControl\r\n        formControlName=\"{{options.name}}\" [maxFileSize]=\"maxFileSize\" id=\"{{options.name}}\"\r\n        [class.is-invalid]=\"imageUploadFormControl.invalid && imageUploadFormControl.touched\">\r\n      </div>\r\n      <ngx-dropzone-image-preview *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\"\r\n        (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n      <!--Validation text-->\r\n      <div class=\"bbsf-validation-msg\" *ngIf=\"validationMessage\" [innerHTML]=\"validationMessage\"></div>\r\n    </div>\r\n\r\n    <ngx-dropzone-label *ngIf=\"files.length==0&&options.isReadonly\">\r\n      <div *ngIf=\"imageSource\" #element>\r\n        <img [src]=\"imageSource\" />\r\n      </div>\r\n      <div *ngIf=\"!imageSource\">\r\n        <span class=\"readonly-view\">{{utilityService.getResourceValue('NA')}}</span>\r\n      </div>\r\n    </ngx-dropzone-label>\r\n  </div>\r\n  <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\" *ngIf=\"(imageUploadFormControl.invalid && imageUploadFormControl.touched)\">\r\n      {{getErrorValidation(imageUploadFormControl.errors|keyvalue)}}\r\n    </div>\r\n\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n      {{resetError()}}</div>\r\n  </div>\r\n  <!-- image cropper modal-->\r\n  <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\"\r\n    [ngStyle]=\"{'display': mdlSampleIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n    <div class=\"modal-dialog modal-lg\">\r\n      <div class=\"modal-content\">\r\n        <div class=\"modal-header\">\r\n          <h4 class=\"modal-title\">\r\n            {{utilityService.getResourceValue(\"CropImage\")}}\r\n          </h4>\r\n          <button type=\"button\" class=\"btn-close\" data-dismiss=\"modal\" (click)=\"openModal(false)\"></button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <div *ngIf=\"imageUrl\">\r\n            <angular-cropper #angularCropper [cropperOptions]=\"config\" [imageUrl]=\"imageUrl\">\r\n            </angular-cropper>\r\n            <img [src]=\"imgwUrl\" />\r\n          </div>\r\n          <div class=\"cropper-btns\">\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"ZoomIn\")}}'>\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-search-plus\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"zoomImage(-0.1)\" class=\"btn btn-default\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"ZoomOut\")}}'>\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-search-minus\"></span>\r\n                </span>\r\n              </button>\r\n            </div>\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"moveImage(-10,0)\" class=\"btn btn-default\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"MoveLeft\")}}'>\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-left\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"moveImage(10,0)\" class=\"btn btn-default\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"MoveRight\")}}'>\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-right\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"moveImage(0,-10)\" class=\"btn btn-default\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"MoveUp\")}}'>\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-up\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"moveImage(0,10)\" class=\"btn btn-default\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"MoveDown\")}}'>\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-down\"></span>\r\n                </span>\r\n              </button>\r\n            </div>\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"rotateImage(-45)\" class=\"btn btn-default\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"RotateLeft\")}}'>\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-undo-alt\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"rotateImage(45)\" class=\"btn btn-default\"\r\n                ngbTooltip='{{utilityService.getResourceValue(\"RotateRight\")}}'>\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-redo-alt\"></span>\r\n                </span>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"modal-footer\" align=\"right\">\r\n          <button type=\"button\" id=\"btnClose\" class=\"btn btn-sm btn-light\" (click)=\"openModal(false)\">\r\n            {{utilityService.getResourceValue(\"CancelLabel\")}}\r\n          </button>\r\n          <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-sm btn-brand\">\r\n            {{utilityService.getResourceValue(\"Crop\")}}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- readonly -->\r\n\r\n\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: FileUploadModule }, { kind: "ngmodule", type: AngularCropperjsModule }, { kind: "component", type: i7$4.CropperComponent, selector: "angular-cropper", inputs: ["imageUrl", "settings", "cropbox", "loadImageErrorText", "cropperOptions"], outputs: ["export", "ready"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i3$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageUploaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ImageUploaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-ImageUpload', standalone: true, imports: [
                         CommonModule,
@@ -8419,10 +8455,10 @@ class ProfileImageUploaderComponent {
     openModal(open) {
         this.mdlSampleIsOpen = open;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProfileImageUploaderComponent, deps: [{ token: i0.NgZone }, { 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: ProfileImageUploaderComponent, isStandalone: true, selector: "BBSF-ProfileImageUploader", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "angularCropper", first: true, predicate: ["angularCropper"], descendants: true }], ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-profile-image-upload\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label [hidden]=\"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\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div *ngIf=\"options.allowDropZone&&!options.isReadonly\" class=\"bbsf-input-container {{options.extraClasses}}\"\r\n      ngx-dropzone [disabled]=\"options.isDisabled\" [accept]=\"acceptedType\" (change)=\"onFileChange($event)\"\r\n      aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.name}}\"\r\n      id=\"{{options.name}}\"\r\n      [class.is-invalid]=\"profileImageUploadFormControl.invalid && profileImageUploadFormControl.touched\">\r\n      <ngx-dropzone-label class=\"dropzone-label\">\r\n        <div class=\"svg-and-validation\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n            style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\"\r\n              d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\"\r\n              fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n            <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\"\r\n              style=\"fill: #989898;\"></path>\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg\" *ngIf=\"validationMessage\" [innerHTML]=\"validationMessage\"></div>\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <ngx-dropzone-image-preview class=\"dropzone-preview\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\"\r\n        (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n    </div>\r\n    <!--Not allowed dropZone-->\r\n    <div *ngIf=\"!options.allowDropZone&&!options.isReadonly\" style=\"width:fit-content\">\r\n      <ngx-dropzone-label *ngIf=\"files.length==0\">\r\n        <div #element (click)=\"showImageUploader(element)\">\r\n          <img [src]=\"imageSource\" class=\"profile-upload-img\" />\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <div class=\"d-none {{options.extraClasses}}\" ngx-dropzone [disabled]=\"options.isDisabled\" [accept]=\"acceptedType\"\r\n        (change)=\"onFileChange($event)\" aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl\r\n        formControlName=\"{{options.name}}\" id=\"{{options.name}}\"\r\n        [class.is-invalid]=\"profileImageUploadFormControl.invalid && profileImageUploadFormControl.touched\">\r\n      </div>\r\n      <ngx-dropzone-image-preview *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\"\r\n        (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n      <!--Validation text-->\r\n      <div class=\"bbsf-validation-msg\" *ngIf=\"validationMessage\" [innerHTML]=\"validationMessage\"></div>\r\n    </div>\r\n\r\n    <ngx-dropzone-label *ngIf=\"files.length==0&&options.isReadonly\">\r\n      <div #element>\r\n        <img [src]=\"imageSource\" />\r\n      </div>\r\n    </ngx-dropzone-label>\r\n  </div>\r\n  <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\"\r\n      *ngIf=\"(profileImageUploadFormControl.invalid && profileImageUploadFormControl.touched)\">\r\n      {{getErrorValidation(profileImageUploadFormControl.errors|keyvalue)}}\r\n    </div>\r\n\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n      {{resetError()}}</div>\r\n  </div>\r\n  <!-- image cropper modal-->\r\n  <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\"\r\n    [ngStyle]=\"{'display': mdlSampleIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n    <div class=\"modal-dialog modal-lg\">\r\n      <div class=\"modal-content\">\r\n        <div class=\"modal-header\">\r\n          <h4 class=\"modal-title\">\r\n            {{utilityService.getResourceValue(\"CropImage\")}}\r\n          </h4>\r\n          <button type=\"button\" class=\"btn-close\" data-dismiss=\"modal\" (click)=\"openModal(false)\"></button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <div *ngIf=\"imageUrl\">\r\n            <angular-cropper #angularCropper [cropperOptions]=\"config\" [imageUrl]=\"imageUrl\">\r\n            </angular-cropper>\r\n            <img [src]=\"imgwUrl\" />\r\n          </div>\r\n          <div class=\"cropper-btns\">\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" ngbTooltip=\"Zoom in\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-search-plus\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"zoomImage(-0.1)\" class=\"btn btn-default\" ngbTooltip=\"Zoom out\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-search-minus\"></span>\r\n                </span>\r\n              </button>\r\n            </div>\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"moveImage(-10,0)\" class=\"btn btn-default\" ngbTooltip=\"Move left\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-left\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"moveImage(10,0)\" class=\"btn btn-default\" ngbTooltip=\"Move right\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-right\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"moveImage(0,-10)\" class=\"btn btn-default\" ngbTooltip=\"Move up\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-up\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"moveImage(0,10)\" class=\"btn btn-default\" ngbTooltip=\"Move down\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-down\"></span>\r\n                </span>\r\n              </button>\r\n            </div>\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"rotateImage(-45)\" class=\"btn btn-default\" ngbTooltip=\"Rotate left\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-undo-alt\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"rotateImage(45)\" class=\"btn btn-default\" ngbTooltip=\"Rotate right\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-redo-alt\"></span>\r\n                </span>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"modal-footer\" align=\"right\">\r\n          <button type=\"button\" id=\"btnClose\" class=\"btn btn-sm btn-light\" (click)=\"openModal(false)\">\r\n            {{utilityService.getResourceValue(\"CancelLabel\")}}\r\n          </button>\r\n          <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-sm btn-brand\">\r\n            {{utilityService.getResourceValue(\"Crop\")}}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: FileUploadModule }, { kind: "ngmodule", type: AngularCropperjsModule }, { kind: "component", type: i7$4.CropperComponent, selector: "angular-cropper", inputs: ["imageUrl", "settings", "cropbox", "loadImageErrorText", "cropperOptions"], outputs: ["export", "ready"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i3$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ProfileImageUploaderComponent, deps: [{ token: i0.NgZone }, { 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: "19.2.15", type: ProfileImageUploaderComponent, isStandalone: true, selector: "BBSF-ProfileImageUploader", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "angularCropper", first: true, predicate: ["angularCropper"], descendants: true }], ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-profile-image-upload\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label [hidden]=\"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\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div *ngIf=\"options.allowDropZone&&!options.isReadonly\" class=\"bbsf-input-container {{options.extraClasses}}\"\r\n      ngx-dropzone [disabled]=\"options.isDisabled\" [accept]=\"acceptedType\" (change)=\"onFileChange($event)\"\r\n      aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.name}}\"\r\n      id=\"{{options.name}}\"\r\n      [class.is-invalid]=\"profileImageUploadFormControl.invalid && profileImageUploadFormControl.touched\">\r\n      <ngx-dropzone-label class=\"dropzone-label\">\r\n        <div class=\"svg-and-validation\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n            style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\"\r\n              d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\"\r\n              fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n            <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\"\r\n              style=\"fill: #989898;\"></path>\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg\" *ngIf=\"validationMessage\" [innerHTML]=\"validationMessage\"></div>\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <ngx-dropzone-image-preview class=\"dropzone-preview\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\"\r\n        (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n    </div>\r\n    <!--Not allowed dropZone-->\r\n    <div *ngIf=\"!options.allowDropZone&&!options.isReadonly\" style=\"width:fit-content\">\r\n      <ngx-dropzone-label *ngIf=\"files.length==0\">\r\n        <div #element (click)=\"showImageUploader(element)\">\r\n          <img [src]=\"imageSource\" class=\"profile-upload-img\" />\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <div class=\"d-none {{options.extraClasses}}\" ngx-dropzone [disabled]=\"options.isDisabled\" [accept]=\"acceptedType\"\r\n        (change)=\"onFileChange($event)\" aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl\r\n        formControlName=\"{{options.name}}\" id=\"{{options.name}}\"\r\n        [class.is-invalid]=\"profileImageUploadFormControl.invalid && profileImageUploadFormControl.touched\">\r\n      </div>\r\n      <ngx-dropzone-image-preview *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\"\r\n        (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n      <!--Validation text-->\r\n      <div class=\"bbsf-validation-msg\" *ngIf=\"validationMessage\" [innerHTML]=\"validationMessage\"></div>\r\n    </div>\r\n\r\n    <ngx-dropzone-label *ngIf=\"files.length==0&&options.isReadonly\">\r\n      <div #element>\r\n        <img [src]=\"imageSource\" />\r\n      </div>\r\n    </ngx-dropzone-label>\r\n  </div>\r\n  <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\"\r\n      *ngIf=\"(profileImageUploadFormControl.invalid && profileImageUploadFormControl.touched)\">\r\n      {{getErrorValidation(profileImageUploadFormControl.errors|keyvalue)}}\r\n    </div>\r\n\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n      {{resetError()}}</div>\r\n  </div>\r\n  <!-- image cropper modal-->\r\n  <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\"\r\n    [ngStyle]=\"{'display': mdlSampleIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n    <div class=\"modal-dialog modal-lg\">\r\n      <div class=\"modal-content\">\r\n        <div class=\"modal-header\">\r\n          <h4 class=\"modal-title\">\r\n            {{utilityService.getResourceValue(\"CropImage\")}}\r\n          </h4>\r\n          <button type=\"button\" class=\"btn-close\" data-dismiss=\"modal\" (click)=\"openModal(false)\"></button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <div *ngIf=\"imageUrl\">\r\n            <angular-cropper #angularCropper [cropperOptions]=\"config\" [imageUrl]=\"imageUrl\">\r\n            </angular-cropper>\r\n            <img [src]=\"imgwUrl\" />\r\n          </div>\r\n          <div class=\"cropper-btns\">\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" ngbTooltip=\"Zoom in\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-search-plus\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"zoomImage(-0.1)\" class=\"btn btn-default\" ngbTooltip=\"Zoom out\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-search-minus\"></span>\r\n                </span>\r\n              </button>\r\n            </div>\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"moveImage(-10,0)\" class=\"btn btn-default\" ngbTooltip=\"Move left\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-left\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"moveImage(10,0)\" class=\"btn btn-default\" ngbTooltip=\"Move right\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-right\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"moveImage(0,-10)\" class=\"btn btn-default\" ngbTooltip=\"Move up\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-up\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"moveImage(0,10)\" class=\"btn btn-default\" ngbTooltip=\"Move down\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-arrow-down\"></span>\r\n                </span>\r\n              </button>\r\n            </div>\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"rotateImage(-45)\" class=\"btn btn-default\" ngbTooltip=\"Rotate left\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-undo-alt\"></span>\r\n                </span>\r\n              </button>\r\n              <button type=\"button\" (click)=\"rotateImage(45)\" class=\"btn btn-default\" ngbTooltip=\"Rotate right\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-redo-alt\"></span>\r\n                </span>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"modal-footer\" align=\"right\">\r\n          <button type=\"button\" id=\"btnClose\" class=\"btn btn-sm btn-light\" (click)=\"openModal(false)\">\r\n            {{utilityService.getResourceValue(\"CancelLabel\")}}\r\n          </button>\r\n          <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-sm btn-brand\">\r\n            {{utilityService.getResourceValue(\"Crop\")}}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: FileUploadModule }, { kind: "ngmodule", type: AngularCropperjsModule }, { kind: "component", type: i7$4.CropperComponent, selector: "angular-cropper", inputs: ["imageUrl", "settings", "cropbox", "loadImageErrorText", "cropperOptions"], outputs: ["export", "ready"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i3$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProfileImageUploaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ProfileImageUploaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-ProfileImageUploader', standalone: true, imports: [
                         CommonModule,
@@ -8483,8 +8519,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * ```
  */
 class BBSFUploadsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFUploadsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: BBSFUploadsModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFUploadsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: BBSFUploadsModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             NgxDropzoneModule,
@@ -8500,7 +8536,7 @@ class BBSFUploadsModule {
             FileUploadComponent,
             ImageUploaderComponent,
             ProfileImageUploaderComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFUploadsModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFUploadsModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             NgxDropzoneModule,
@@ -8513,10 +8549,10 @@ class BBSFUploadsModule {
             ImageUploaderComponent,
             ProfileImageUploaderComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFUploadsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFUploadsModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [],
+                    declarations: [], // No declarations - components are standalone
                     imports: [
                         CommonModule,
                         FormsModule,
@@ -8678,10 +8714,10 @@ class CalendarComponent {
             EventClickFunction(arg.event);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarComponent, deps: [{ token: ErrorMassageValidation }, { token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i4.BBSFTranslateService }, { token: i3.ControlValidationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CalendarComponent, isStandalone: true, selector: "BBSF-Calendar", inputs: { group: "group", options: "options" }, viewQueries: [{ propertyName: "calendarComponent", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "<div class=\"b-control b-calendar\">\r\n  <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n    <!-- <full-calendar #calendar\r\n                   [defaultDate]=\"options.DefaultDate\"\r\n                   [defaultView]=\"DefaultView\"\r\n                   [header]=\"{\r\n                    left: 'prev,next today',\r\n                    center: 'title',\r\n                    right: CalendarViews\r\n                  }\"\r\n                   ngDefaultControl\r\n                   formControlName=\"{{options.Name}}\"\r\n                   [locales]=\"locales\"\r\n                   [plugins]=\"calendarPlugins\"\r\n                   [weekends]=\"calendarWeekends\"\r\n                   [events]=\"calendarEvents\"\r\n                   (dateClick)=\"OnDayClickFunction($event)\"\r\n                   (eventClick)=\"OnEventClickFunction($event)\"\r\n                   id=\"{{options.Name}}\"></full-calendar> -->\r\n\r\n\r\n    <full-calendar *ngIf=\"options.calendarVisible\" [options]='calendarOptions' id=\"{{options.name}}\" ngDefaultControl\r\n      formControlName=\"{{options.name}}\"></full-calendar>\r\n\r\n  </div>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: FullCalendarModule }, { kind: "component", type: i7$5.FullCalendarComponent, selector: "full-calendar", inputs: ["options", "deepChangeDetection", "events", "eventSources", "resources"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CalendarComponent, deps: [{ token: ErrorMassageValidation }, { token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i4.BBSFTranslateService }, { token: i3.ControlValidationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: CalendarComponent, isStandalone: true, selector: "BBSF-Calendar", inputs: { group: "group", options: "options" }, viewQueries: [{ propertyName: "calendarComponent", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "<div class=\"b-control b-calendar\">\r\n  <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n    <!-- <full-calendar #calendar\r\n                   [defaultDate]=\"options.DefaultDate\"\r\n                   [defaultView]=\"DefaultView\"\r\n                   [header]=\"{\r\n                    left: 'prev,next today',\r\n                    center: 'title',\r\n                    right: CalendarViews\r\n                  }\"\r\n                   ngDefaultControl\r\n                   formControlName=\"{{options.Name}}\"\r\n                   [locales]=\"locales\"\r\n                   [plugins]=\"calendarPlugins\"\r\n                   [weekends]=\"calendarWeekends\"\r\n                   [events]=\"calendarEvents\"\r\n                   (dateClick)=\"OnDayClickFunction($event)\"\r\n                   (eventClick)=\"OnEventClickFunction($event)\"\r\n                   id=\"{{options.Name}}\"></full-calendar> -->\r\n\r\n\r\n    <full-calendar *ngIf=\"options.calendarVisible\" [options]='calendarOptions' id=\"{{options.name}}\" ngDefaultControl\r\n      formControlName=\"{{options.name}}\"></full-calendar>\r\n\r\n  </div>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: FullCalendarModule }, { kind: "component", type: i7$5.FullCalendarComponent, selector: "full-calendar", inputs: ["options", "deepChangeDetection", "events", "eventSources", "resources"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-Calendar', standalone: true, imports: [
                         CommonModule,
@@ -9169,10 +9205,10 @@ class MapAutoCompleteComponent {
         this.GermanAddressMapped(this.selectedPin);
         this.closeMapModal();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MapAutoCompleteComponent, deps: [{ token: i0.NgZone }, { token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i4.BBSFTranslateService }, { token: i3.ControlValidationService }, { token: GlobalSettings }, { token: i5$2.ScriptService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MapAutoCompleteComponent, isStandalone: true, selector: "BBSF-MapAutoComplete", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, viewQueries: [{ propertyName: "searchElementRef", first: true, predicate: ["mapSearch"], descendants: true }, { propertyName: "advancedMapModal", first: true, predicate: ["advancedMapModal"], descendants: true }, { propertyName: "setLocationSearch", first: true, predicate: ["setLocationSearch"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"showMap\">\r\n  <div class=\"form-group bbsf-control bbsf-maps\" [formGroup]=\"group\">\r\n    <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n      <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{options.labelExtraClasses}}\">\r\n        {{options.labelValue}}\r\n        <span *ngIf=\"((options.showAsterisk&&options.isRequired)||(options.isRequired))&&!options.isReadonly\"\r\n          class=\"text-danger\">*</span>\r\n      </label>\r\n\r\n      <!--#region input-->\r\n      <div class=\"input-group bbsf-input-container\" *ngIf=\"!options.isReadonly\">\r\n        <input class=\"form-control input-icon-o {{options.extraClasses}}\" [value]=\"mapAutoCompleteModel.text\"\r\n          [address]=\"mapAutoCompleteModel.text\" value=\"{{mapAutoCompleteModel.text}}\"\r\n          aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n          [class.is-invalid]=\"mapAutoCompleteFormControl.invalid && mapAutoCompleteFormControl.touched\"\r\n          [placeholder]=\"options.placeholder\" [id]=\"options.name\" (keyup)=\"GermanAddressMapped($event)\" #mapSearch />\r\n        <button *ngIf=\"options.showAdvancedMap\" class=\"border-0 btn-secondary btn-icon-o\"\r\n          ngbTooltip=\"{{translateValue('SetLocation')}}\" type=\"button\" (click)=\"openMapModal()\">\r\n\r\n          <span class=\"svg-icon svg-icon-1\">\r\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path\r\n                d=\"M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z\"\r\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              <path\r\n                d=\"M12 22C16 18 20 14.4183 20 10C20 5.58172 16.4183 2 12 2C7.58172 2 4 5.58172 4 10C4 14.4183 8 18 12 22Z\"\r\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </svg>\r\n          </span>\r\n\r\n        </button>\r\n      </div>\r\n      <!-- #endregion -->\r\n\r\n      <!-- #region readonly -->\r\n      <div *ngIf=\"options.isReadonly\">\r\n        <a href=\"{{mapAutoCompleteModel.googleMapsURL}}\" target=\"_blank\">{{mapAutoCompleteModel.text}}</a>\r\n      </div>\r\n      <!-- #endregion -->\r\n\r\n    </div>\r\n\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=\"(mapAutoCompleteFormControl.invalid && mapAutoCompleteFormControl.touched)\">\r\n        {{getErrorValidation(mapAutoCompleteFormControl.errors|keyvalue)}}\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty)\">\r\n      {{resetError()}} </div>\r\n\r\n  </div>\r\n\r\n  <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\" [ngClass]=\"{'bbsf-blur': modalIsOpen}\"\r\n    [ngStyle]=\"{'display': modalIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n    <div class=\"modal-dialog modal-lg\">\r\n      <div class=\"modal-content\">\r\n        <div class=\"modal-header\">\r\n          <h4 class=\"modal-title\">\r\n            {{translateValue('SetLocationOnMap')}}\r\n          </h4>\r\n          <button type=\"button\" class=\"btn-close\" data-dismiss=\"modal\" (click)=\"closeMapModal()\"></button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <input class=\"form-control mt-3 mb-3\" id=\"setLocationSearch\" #setLocationSearch type=\"text\"\r\n            placeholder=\"{{translateValue('SetLocation')}}\">\r\n          <div class=\"google-map-container\">\r\n            <google-map [zoom]=\"zoomLevel\" [center]=\"mapCenter\" [width]=\"null\" [height]=\"null\" #googleMap (mapClick)=\"onMapClick($event)\">\r\n              <map-marker [position]=\"markerPosition\" [options]=\"markerOptions\"></map-marker>\r\n            </google-map>\r\n          </div>\r\n          <div class=\"text-danger\" *ngIf=\"(options.validateLocationWithinCity && options.city && invalidLocationWithinCity)\">\r\n            {{translateValue('InvalidLocationWithinCity').replace('{0}', options.city)}}\r\n          </div>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-light\" (click)=\"closeMapModal()\">\r\n            {{translateValue(\"Cancel\")}}\r\n          </button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-brand\" (click)=\"submitSetLocation()\">\r\n            {{translateValue('Confirm')}}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ScriptLoaderModule }, { kind: "ngmodule", type: GoogleMapsModule }, { kind: "component", type: i8.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i8.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged"], exportAs: ["mapMarker"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MapAutoCompleteComponent, deps: [{ token: i0.NgZone }, { token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i4.BBSFTranslateService }, { token: i3.ControlValidationService }, { token: GlobalSettings }, { token: i5$2.ScriptService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MapAutoCompleteComponent, isStandalone: true, selector: "BBSF-MapAutoComplete", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, viewQueries: [{ propertyName: "searchElementRef", first: true, predicate: ["mapSearch"], descendants: true }, { propertyName: "advancedMapModal", first: true, predicate: ["advancedMapModal"], descendants: true }, { propertyName: "setLocationSearch", first: true, predicate: ["setLocationSearch"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"showMap\">\r\n  <div class=\"form-group bbsf-control bbsf-maps\" [formGroup]=\"group\">\r\n    <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n      <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{options.labelExtraClasses}}\">\r\n        {{options.labelValue}}\r\n        <span *ngIf=\"((options.showAsterisk&&options.isRequired)||(options.isRequired))&&!options.isReadonly\"\r\n          class=\"text-danger\">*</span>\r\n      </label>\r\n\r\n      <!--#region input-->\r\n      <div class=\"input-group bbsf-input-container\" *ngIf=\"!options.isReadonly\">\r\n        <input class=\"form-control input-icon-o {{options.extraClasses}}\" [value]=\"mapAutoCompleteModel.text\"\r\n          [address]=\"mapAutoCompleteModel.text\" value=\"{{mapAutoCompleteModel.text}}\"\r\n          aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n          [class.is-invalid]=\"mapAutoCompleteFormControl.invalid && mapAutoCompleteFormControl.touched\"\r\n          [placeholder]=\"options.placeholder\" [id]=\"options.name\" (keyup)=\"GermanAddressMapped($event)\" #mapSearch />\r\n        <button *ngIf=\"options.showAdvancedMap\" class=\"border-0 btn-secondary btn-icon-o\"\r\n          ngbTooltip=\"{{translateValue('SetLocation')}}\" type=\"button\" (click)=\"openMapModal()\">\r\n\r\n          <span class=\"svg-icon svg-icon-1\">\r\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path\r\n                d=\"M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z\"\r\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              <path\r\n                d=\"M12 22C16 18 20 14.4183 20 10C20 5.58172 16.4183 2 12 2C7.58172 2 4 5.58172 4 10C4 14.4183 8 18 12 22Z\"\r\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </svg>\r\n          </span>\r\n\r\n        </button>\r\n      </div>\r\n      <!-- #endregion -->\r\n\r\n      <!-- #region readonly -->\r\n      <div *ngIf=\"options.isReadonly\">\r\n        <a href=\"{{mapAutoCompleteModel.googleMapsURL}}\" target=\"_blank\">{{mapAutoCompleteModel.text}}</a>\r\n      </div>\r\n      <!-- #endregion -->\r\n\r\n    </div>\r\n\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=\"(mapAutoCompleteFormControl.invalid && mapAutoCompleteFormControl.touched)\">\r\n        {{getErrorValidation(mapAutoCompleteFormControl.errors|keyvalue)}}\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty)\">\r\n      {{resetError()}} </div>\r\n\r\n  </div>\r\n\r\n  <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\" [ngClass]=\"{'bbsf-blur': modalIsOpen}\"\r\n    [ngStyle]=\"{'display': modalIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n    <div class=\"modal-dialog modal-lg\">\r\n      <div class=\"modal-content\">\r\n        <div class=\"modal-header\">\r\n          <h4 class=\"modal-title\">\r\n            {{translateValue('SetLocationOnMap')}}\r\n          </h4>\r\n          <button type=\"button\" class=\"btn-close\" data-dismiss=\"modal\" (click)=\"closeMapModal()\"></button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <input class=\"form-control mt-3 mb-3\" id=\"setLocationSearch\" #setLocationSearch type=\"text\"\r\n            placeholder=\"{{translateValue('SetLocation')}}\">\r\n          <div class=\"google-map-container\">\r\n            <google-map [zoom]=\"zoomLevel\" [center]=\"mapCenter\" [width]=\"null\" [height]=\"null\" #googleMap (mapClick)=\"onMapClick($event)\">\r\n              <map-marker [position]=\"markerPosition\" [options]=\"markerOptions\"></map-marker>\r\n            </google-map>\r\n          </div>\r\n          <div class=\"text-danger\" *ngIf=\"(options.validateLocationWithinCity && options.city && invalidLocationWithinCity)\">\r\n            {{translateValue('InvalidLocationWithinCity').replace('{0}', options.city)}}\r\n          </div>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-light\" (click)=\"closeMapModal()\">\r\n            {{translateValue(\"Cancel\")}}\r\n          </button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-brand\" (click)=\"submitSetLocation()\">\r\n            {{translateValue('Confirm')}}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ScriptLoaderModule }, { kind: "ngmodule", type: GoogleMapsModule }, { kind: "component", type: i8.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i8.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged", "markerInitialized"], exportAs: ["mapMarker"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MapAutoCompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MapAutoCompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-MapAutoComplete', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
                         CommonModule,
@@ -9452,10 +9488,10 @@ class AutocompleteTextBoxComponent {
             this.DropdownTemplateVariable.toggle();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AutocompleteTextBoxComponent, deps: [{ token: i1.HttpClient }, { token: ErrorMassageValidation }, { token: i3$1.RequestHandlerService }, { 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: AutocompleteTextBoxComponent, isStandalone: true, selector: "BBSF-AutocompleteTextBox", inputs: { group: "group", name: "name", options: "options", DropdownTemplateVariable: "DropdownTemplateVariable" }, outputs: { OnChange: "OnChange" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-autocomplete-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\"\r\n        class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--Input container-->\r\n    <div class=\"bbsf-input-container\" *ngIf=\"!options.isReadonly\">\r\n      <!--input-->\r\n      <ng-autocomplete class=\"form-control  {{options.extraClasses}}\" *ngIf=\"!options.allowNewSelection\"\r\n        [data]=\"dataList\" [initialValue]=\"SelectedValue\" [searchKeyword]=\"keyword\" placeholder=\"{{options.placeholder}}\"\r\n        (selected)='selectEvent($event)' (inputChanged)='onChangeSearch($event)' \r\n        [itemTemplate]=\"options.customTemplate?options.customTemplate:itemTemplate\" [dir]=\"textDir\" \r\n        formControlName=\"{{name}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n        [class.is-invalid]=\"autoCompleteTextBoxControl.invalid && autoCompleteTextBoxControl.touched\"\r\n        (inputCleared)=\"onInputCleared()\" (closed)=\"checkIsAutocomplateInFilter()\">\r\n      </ng-autocomplete>\r\n\r\n      <ng-autocomplete class=\"form-control {{options.extraClasses}}\" *ngIf=\"options.allowNewSelection\" [data]=\"dataList\"\r\n        [initialValue]=\"SelectedValue\" [searchKeyword]=\"keyword\" placeholder=\"{{options.placeholder}}\"\r\n        (selected)='selectEvent($event)' (inputChanged)='onChangeSearch($event)' \r\n        [itemTemplate]=\"options.customTemplate?options.customTemplate:itemTemplate\" [dir]=\"textDir\"\r\n        (inputCleared)=\"onInputCleared()\" formControlName=\"{{name}}\" aria-describedby=\"email-error\"\r\n        aria-invalid=\"true\"\r\n        (closed)=\"checkIsAutocomplateInFilter()\"\r\n        [class.is-invalid]=\"autoCompleteTextBoxControl.invalid && autoCompleteTextBoxControl.touched\">\r\n      </ng-autocomplete>\r\n\r\n      <ng-template #itemTemplate let-item>\r\n        <img *ngIf=\"options.itemWithImage\" src=\"{{(item.image?item.image:avatarImage)}}\" />\r\n        <a [innerHTML]=\"item.value\"></a>\r\n      </ng-template>\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\">{{autoCompleteTextBoxControl.value.value}}</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=\"(autoCompleteTextBoxControl.invalid && autoCompleteTextBoxControl.touched)\">\r\n      {{getErrorValidation(autoCompleteTextBoxControl.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>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: TypeaheadModule }, { kind: "ngmodule", type: AutocompleteLibModule }, { kind: "component", type: i9.AutocompleteComponent, selector: "ng-autocomplete", inputs: ["data", "searchKeyword", "placeholder", "heading", "initialValue", "historyIdentifier", "historyHeading", "historyListMaxNumber", "notFoundText", "isLoading", "debounceTime", "disabled", "minQueryLength", "focusFirst", "customFilter", "selectedValueRender", "itemTemplate", "notFoundTemplate"], outputs: ["selected", "inputChanged", "inputFocused", "inputCleared", "opened", "closed", "scrolledToEnd"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AutocompleteTextBoxComponent, deps: [{ token: i1.HttpClient }, { token: ErrorMassageValidation }, { token: i3$1.RequestHandlerService }, { 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: "19.2.15", type: AutocompleteTextBoxComponent, isStandalone: true, selector: "BBSF-AutocompleteTextBox", inputs: { group: "group", name: "name", options: "options", DropdownTemplateVariable: "DropdownTemplateVariable" }, outputs: { OnChange: "OnChange" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-autocomplete-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\"\r\n        class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--Input container-->\r\n    <div class=\"bbsf-input-container\" *ngIf=\"!options.isReadonly\">\r\n      <!--input-->\r\n      <ng-autocomplete class=\"form-control  {{options.extraClasses}}\" *ngIf=\"!options.allowNewSelection\"\r\n        [data]=\"dataList\" [initialValue]=\"SelectedValue\" [searchKeyword]=\"keyword\" placeholder=\"{{options.placeholder}}\"\r\n        (selected)='selectEvent($event)' (inputChanged)='onChangeSearch($event)' \r\n        [itemTemplate]=\"options.customTemplate?options.customTemplate:itemTemplate\" [dir]=\"textDir\" \r\n        formControlName=\"{{name}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n        [class.is-invalid]=\"autoCompleteTextBoxControl.invalid && autoCompleteTextBoxControl.touched\"\r\n        (inputCleared)=\"onInputCleared()\" (closed)=\"checkIsAutocomplateInFilter()\">\r\n      </ng-autocomplete>\r\n\r\n      <ng-autocomplete class=\"form-control {{options.extraClasses}}\" *ngIf=\"options.allowNewSelection\" [data]=\"dataList\"\r\n        [initialValue]=\"SelectedValue\" [searchKeyword]=\"keyword\" placeholder=\"{{options.placeholder}}\"\r\n        (selected)='selectEvent($event)' (inputChanged)='onChangeSearch($event)' \r\n        [itemTemplate]=\"options.customTemplate?options.customTemplate:itemTemplate\" [dir]=\"textDir\"\r\n        (inputCleared)=\"onInputCleared()\" formControlName=\"{{name}}\" aria-describedby=\"email-error\"\r\n        aria-invalid=\"true\"\r\n        (closed)=\"checkIsAutocomplateInFilter()\"\r\n        [class.is-invalid]=\"autoCompleteTextBoxControl.invalid && autoCompleteTextBoxControl.touched\">\r\n      </ng-autocomplete>\r\n\r\n      <ng-template #itemTemplate let-item>\r\n        <img *ngIf=\"options.itemWithImage\" src=\"{{(item.image?item.image:avatarImage)}}\" />\r\n        <a [innerHTML]=\"item.value\"></a>\r\n      </ng-template>\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\">{{autoCompleteTextBoxControl.value.value}}</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=\"(autoCompleteTextBoxControl.invalid && autoCompleteTextBoxControl.touched)\">\r\n      {{getErrorValidation(autoCompleteTextBoxControl.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>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: TypeaheadModule }, { kind: "ngmodule", type: AutocompleteLibModule }, { kind: "component", type: i9.AutocompleteComponent, selector: "ng-autocomplete", inputs: ["data", "searchKeyword", "placeholder", "heading", "initialValue", "historyIdentifier", "historyHeading", "historyListMaxNumber", "notFoundText", "isLoading", "debounceTime", "disabled", "minQueryLength", "focusFirst", "customFilter", "selectedValueRender", "itemTemplate", "notFoundTemplate"], outputs: ["selected", "inputChanged", "inputFocused", "inputCleared", "opened", "closed", "scrolledToEnd"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AutocompleteTextBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AutocompleteTextBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-AutocompleteTextBox', standalone: true, imports: [
                         CommonModule,
@@ -9761,10 +9797,10 @@ class BTagsInputComponent {
     onBlur() {
         this.onBlurInput.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BTagsInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BTagsInputComponent, isStandalone: true, selector: "b-tags-input", inputs: { maxTags: "maxTags", removeLastOnBackspace: "removeLastOnBackspace", canDeleteTags: "canDeleteTags", canAddTags: "canAddTags", ViewMode: "ViewMode", placeholder: "placeholder", showDescription: "showDescription", options: "options", defaultImageURL: "defaultImageURL", minLengthBeforeOptions: "minLengthBeforeOptions", scrollableOptions: "scrollableOptions", scrollableOptionsInView: "scrollableOptionsInView" }, outputs: { onTagsChanged: "onTagsChanged", onMaxTagsReached: "onMaxTagsReached", onNoOptionsMatch: "onNoOptionsMatch", onBlurInput: "onBlurInput" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "\n\n<div class=\"tags-input\">\n<span class=\"tags-input__tag label label-primary badge badge-primary\" *ngFor=\"let tag of tags\">\n\n<span [ngSwitch]=\"ViewMode\">\n<span *ngSwitchCase=\"tagInputViewEnum.WithImage\">\n<img style=\"border-radius:50%; height:40px; width: 40px; float:left; margin-left:5px ; margin-top: 5px;margin-right: 5px;\"\nsrc=\"{{(tag.imageURL?tag.imageURL:defaultImageURL)}}\" />\n</span>\n\n<span *ngSwitchCase=\"tagInputViewEnum.WithInitial\">\n<div class=\"user-initials\">{{calculateInitials(tag.name)}}</div>\n</span>\n\n<span *ngSwitchDefault>\n</span>\n\n</span>\n  {{tag[displayField]}}\n  <span *ngIf=\"isDeleteable(tag)\" role=\"button\" class=\"tags-input__tag-remove-btn\" (click)=\"removeTag(tag)\"\n    (touch)=\"removeTag(tag)\">\n    <span aria-hidden=\"true\">&times;</span>\n    <span class=\"sr-only\">Close</span>\n  </span>\n</span>\n\n<input *ngIf=\"options === null; else withTypeahead\" class=\"tags-input__input-field\" type=\"text\"\n  [placeholder]=\"getPlaceholder()\" name=\"tags\" (keyup.enter)=\"addTag(tagInput)\"\n  (keydown.backspace)=\"removeLastTag(tagInput)\" [disabled]=\"!canAddTags || maximumOfTagsReached()\"\n  [hidden]=\"!canAddTags || maximumOfTagsReached()\" #tagInput />\n\n<ng-template #withTypeahead>\n  <span [ngSwitch]=\"ViewMode\">\n    <span *ngSwitchCase=\"tagInputViewEnum.WithImage\">\n      <input *ngIf=\"(options !== null)\" class=\"tags-input__input-field\" type=\"text\" [placeholder]=\"getPlaceholder()\"\n        name=\"tags\" (keydown.backspace)=\"removeLastTag(tagInput)\" [(ngModel)]=\"selected\" [typeahead]=\"options\"\n        [typeaheadOptionField]=\"displayField\" (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n        (typeaheadNoResults)=\"typeaheadOnNoMatch($event)\" [typeaheadMinLength]=\"minLengthBeforeOptions\"\n        [typeaheadScrollable]=\"scrollableOptions\" [typeaheadLatinize]=\"true\"\n        [typeaheadItemTemplate]=\"itemTemplateWithImage\" [typeaheadOptionsInScrollableView]=\"scrollableOptionsInView\"\n        [disabled]=\"!canAddTags || maximumOfTagsReached()\" [hidden]=\"!canAddTags || maximumOfTagsReached()\"\n        (blur)=\"onBlur()\"  autocomplete=\"off\"\n        #tagInput />\n    </span>\n\n    <span *ngSwitchCase=\"tagInputViewEnum.WithoutImage\">\n      <input *ngIf=\"(options !== null)\" class=\"tags-input__input-field\" type=\"text\" [placeholder]=\"getPlaceholder()\"\n        name=\"tags\" (keydown.backspace)=\"removeLastTag(tagInput)\" [(ngModel)]=\"selected\" [typeahead]=\"options\"\n        [typeaheadOptionField]=\"displayField\" (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n        (typeaheadNoResults)=\"typeaheadOnNoMatch($event)\" [typeaheadMinLength]=\"minLengthBeforeOptions\"\n        [typeaheadScrollable]=\"scrollableOptions\" [typeaheadLatinize]=\"true\"\n        [typeaheadItemTemplate]=\"itemTemplateWithoutImage\"\n        [typeaheadOptionsInScrollableView]=\"scrollableOptionsInView\"\n        [disabled]=\"!canAddTags || maximumOfTagsReached()\" [hidden]=\"!canAddTags || maximumOfTagsReached()\"\n        (blur)=\"onBlur()\" autocomplete=\"off\"\n        #tagInput />\n    </span>\n\n    <span *ngSwitchCase=\"tagInputViewEnum.WithInitial\">\n      <input *ngIf=\"(options !== null)\" class=\"tags-input__input-field\" type=\"text\" [placeholder]=\"getPlaceholder()\"\n        name=\"tags\" (keydown.backspace)=\"removeLastTag(tagInput)\" [(ngModel)]=\"selected\" [typeahead]=\"options\"\n        [typeaheadOptionField]=\"displayField\" (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n        (typeaheadNoResults)=\"typeaheadOnNoMatch($event)\" [typeaheadMinLength]=\"minLengthBeforeOptions\"\n        [typeaheadScrollable]=\"scrollableOptions\" [typeaheadLatinize]=\"true\"\n        [typeaheadItemTemplate]=\"itemTemplateWithoutInitial\"\n        [typeaheadOptionsInScrollableView]=\"scrollableOptionsInView\"\n        [disabled]=\"!canAddTags || maximumOfTagsReached()\" [hidden]=\"!canAddTags || maximumOfTagsReached()\"\n        (blur)=\"onBlur()\" autocomplete=\"off\"\n        #tagInput />\n    </span>\n\n    <span *ngSwitchDefault>\n      <input *ngIf=\"(options !== null)\" class=\"tags-input__input-field\" type=\"text\" [placeholder]=\"getPlaceholder()\"\n        name=\"tags\" (keydown.backspace)=\"removeLastTag(tagInput)\" [(ngModel)]=\"selected\" [typeahead]=\"options\"\n        [typeaheadOptionField]=\"displayField\" (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n        (typeaheadNoResults)=\"typeaheadOnNoMatch($event)\" [typeaheadMinLength]=\"minLengthBeforeOptions\"\n        [typeaheadScrollable]=\"scrollableOptions\" [typeaheadLatinize]=\"true\"\n        [typeaheadItemTemplate]=\"itemTemplateWithoutImage\"\n        [typeaheadOptionsInScrollableView]=\"scrollableOptionsInView\"\n        [disabled]=\"!canAddTags || maximumOfTagsReached()\" [hidden]=\"!canAddTags || maximumOfTagsReached()\"\n        (blur)=\"onBlur()\" autocomplete=\"off\"\n        #tagInput />\n    </span>\n\n  </span>\n\n</ng-template>\n\n<ng-template #itemTemplateWithImage let-model=\"item\" let-index=\"index\">\n  <img\n    style=\"border-radius:50%; height:40px; width: 40px; float:left; margin-left:5px ; margin-top: 5px;margin-right: 5px;\"\n    src=\"{{(model.imageURL?model.imageURL:defaultImageURL)}}\" />\n  <div>\n    <a [innerHTML]=\"model.name\"></a>\n    <p *ngIf=\"showDescription\">\n      {{model.description}}\n    </p>\n  </div>\n</ng-template>\n\n<ng-template #itemTemplateWithoutImage let-model=\"item\" let-index=\"index\">\n  <div>\n    <a [innerHTML]=\"model.name\"></a>\n    <p *ngIf=\"showDescription\">\n      {{model.description}}\n    </p>\n  </div>\n</ng-template>\n\n<ng-template #itemTemplateWithoutInitial let-model=\"item\" let-index=\"index\">\n  <div class=\"user-image\">\n    <div class=\"user-initials\">{{calculateInitials(model.name)}}</div>\n  </div>\n  <div>\n    <a [innerHTML]=\"model.name\"></a>\n    <p *ngIf=\"showDescription\">\n      {{model.description}}\n    </p>\n  </div>\n</ng-template>\n</div>\n", isInline: true, styles: [":host{overflow:auto;white-space:nowrap}.tags-input{align-items:center;display:flex;flex-wrap:wrap}.tags-input__tag{display:inline-block;margin-bottom:2px;margin-right:5px;padding-right:.3em}.tags-input__tag-remove-btn{cursor:pointer;display:inline-block;font-size:12px;margin:-3px 0 0 3px;padding:0;vertical-align:top}.tags-input__input-field{border:none;flex-grow:1;outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TypeaheadModule }, { kind: "directive", type: i3$4.TypeaheadDirective, selector: "[typeahead]", inputs: ["typeahead", "typeaheadMinLength", "adaptivePosition", "isAnimated", "typeaheadWaitMs", "typeaheadOptionsLimit", "typeaheadOptionField", "typeaheadGroupField", "typeaheadOrderBy", "typeaheadAsync", "typeaheadLatinize", "typeaheadSingleWords", "typeaheadWordDelimiters", "typeaheadMultipleSearch", "typeaheadMultipleSearchDelimiters", "typeaheadPhraseDelimiters", "typeaheadItemTemplate", "optionsListTemplate", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadHideResultsOnBlur", "typeaheadSelectFirstItem", "typeaheadIsFirstItemActive", "container", "dropup"], outputs: ["typeaheadLoading", "typeaheadNoResults", "typeaheadOnSelect", "typeaheadOnPreview", "typeaheadOnBlur"], exportAs: ["bs-typeahead"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BTagsInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BTagsInputComponent, isStandalone: true, selector: "b-tags-input", inputs: { maxTags: "maxTags", removeLastOnBackspace: "removeLastOnBackspace", canDeleteTags: "canDeleteTags", canAddTags: "canAddTags", ViewMode: "ViewMode", placeholder: "placeholder", showDescription: "showDescription", options: "options", defaultImageURL: "defaultImageURL", minLengthBeforeOptions: "minLengthBeforeOptions", scrollableOptions: "scrollableOptions", scrollableOptionsInView: "scrollableOptionsInView" }, outputs: { onTagsChanged: "onTagsChanged", onMaxTagsReached: "onMaxTagsReached", onNoOptionsMatch: "onNoOptionsMatch", onBlurInput: "onBlurInput" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "\n\n<div class=\"tags-input\">\n<span class=\"tags-input__tag label label-primary badge badge-primary\" *ngFor=\"let tag of tags\">\n\n<span [ngSwitch]=\"ViewMode\">\n<span *ngSwitchCase=\"tagInputViewEnum.WithImage\">\n<img style=\"border-radius:50%; height:40px; width: 40px; float:left; margin-left:5px ; margin-top: 5px;margin-right: 5px;\"\nsrc=\"{{(tag.imageURL?tag.imageURL:defaultImageURL)}}\" />\n</span>\n\n<span *ngSwitchCase=\"tagInputViewEnum.WithInitial\">\n<div class=\"user-initials\">{{calculateInitials(tag.name)}}</div>\n</span>\n\n<span *ngSwitchDefault>\n</span>\n\n</span>\n  {{tag[displayField]}}\n  <span *ngIf=\"isDeleteable(tag)\" role=\"button\" class=\"tags-input__tag-remove-btn\" (click)=\"removeTag(tag)\"\n    (touch)=\"removeTag(tag)\">\n    <span aria-hidden=\"true\">&times;</span>\n    <span class=\"sr-only\">Close</span>\n  </span>\n</span>\n\n<input *ngIf=\"options === null; else withTypeahead\" class=\"tags-input__input-field\" type=\"text\"\n  [placeholder]=\"getPlaceholder()\" name=\"tags\" (keyup.enter)=\"addTag(tagInput)\"\n  (keydown.backspace)=\"removeLastTag(tagInput)\" [disabled]=\"!canAddTags || maximumOfTagsReached()\"\n  [hidden]=\"!canAddTags || maximumOfTagsReached()\" #tagInput />\n\n<ng-template #withTypeahead>\n  <span [ngSwitch]=\"ViewMode\">\n    <span *ngSwitchCase=\"tagInputViewEnum.WithImage\">\n      <input *ngIf=\"(options !== null)\" class=\"tags-input__input-field\" type=\"text\" [placeholder]=\"getPlaceholder()\"\n        name=\"tags\" (keydown.backspace)=\"removeLastTag(tagInput)\" [(ngModel)]=\"selected\" [typeahead]=\"options\"\n        [typeaheadOptionField]=\"displayField\" (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n        (typeaheadNoResults)=\"typeaheadOnNoMatch($event)\" [typeaheadMinLength]=\"minLengthBeforeOptions\"\n        [typeaheadScrollable]=\"scrollableOptions\" [typeaheadLatinize]=\"true\"\n        [typeaheadItemTemplate]=\"itemTemplateWithImage\" [typeaheadOptionsInScrollableView]=\"scrollableOptionsInView\"\n        [disabled]=\"!canAddTags || maximumOfTagsReached()\" [hidden]=\"!canAddTags || maximumOfTagsReached()\"\n        (blur)=\"onBlur()\"  autocomplete=\"off\"\n        #tagInput />\n    </span>\n\n    <span *ngSwitchCase=\"tagInputViewEnum.WithoutImage\">\n      <input *ngIf=\"(options !== null)\" class=\"tags-input__input-field\" type=\"text\" [placeholder]=\"getPlaceholder()\"\n        name=\"tags\" (keydown.backspace)=\"removeLastTag(tagInput)\" [(ngModel)]=\"selected\" [typeahead]=\"options\"\n        [typeaheadOptionField]=\"displayField\" (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n        (typeaheadNoResults)=\"typeaheadOnNoMatch($event)\" [typeaheadMinLength]=\"minLengthBeforeOptions\"\n        [typeaheadScrollable]=\"scrollableOptions\" [typeaheadLatinize]=\"true\"\n        [typeaheadItemTemplate]=\"itemTemplateWithoutImage\"\n        [typeaheadOptionsInScrollableView]=\"scrollableOptionsInView\"\n        [disabled]=\"!canAddTags || maximumOfTagsReached()\" [hidden]=\"!canAddTags || maximumOfTagsReached()\"\n        (blur)=\"onBlur()\" autocomplete=\"off\"\n        #tagInput />\n    </span>\n\n    <span *ngSwitchCase=\"tagInputViewEnum.WithInitial\">\n      <input *ngIf=\"(options !== null)\" class=\"tags-input__input-field\" type=\"text\" [placeholder]=\"getPlaceholder()\"\n        name=\"tags\" (keydown.backspace)=\"removeLastTag(tagInput)\" [(ngModel)]=\"selected\" [typeahead]=\"options\"\n        [typeaheadOptionField]=\"displayField\" (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n        (typeaheadNoResults)=\"typeaheadOnNoMatch($event)\" [typeaheadMinLength]=\"minLengthBeforeOptions\"\n        [typeaheadScrollable]=\"scrollableOptions\" [typeaheadLatinize]=\"true\"\n        [typeaheadItemTemplate]=\"itemTemplateWithoutInitial\"\n        [typeaheadOptionsInScrollableView]=\"scrollableOptionsInView\"\n        [disabled]=\"!canAddTags || maximumOfTagsReached()\" [hidden]=\"!canAddTags || maximumOfTagsReached()\"\n        (blur)=\"onBlur()\" autocomplete=\"off\"\n        #tagInput />\n    </span>\n\n    <span *ngSwitchDefault>\n      <input *ngIf=\"(options !== null)\" class=\"tags-input__input-field\" type=\"text\" [placeholder]=\"getPlaceholder()\"\n        name=\"tags\" (keydown.backspace)=\"removeLastTag(tagInput)\" [(ngModel)]=\"selected\" [typeahead]=\"options\"\n        [typeaheadOptionField]=\"displayField\" (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n        (typeaheadNoResults)=\"typeaheadOnNoMatch($event)\" [typeaheadMinLength]=\"minLengthBeforeOptions\"\n        [typeaheadScrollable]=\"scrollableOptions\" [typeaheadLatinize]=\"true\"\n        [typeaheadItemTemplate]=\"itemTemplateWithoutImage\"\n        [typeaheadOptionsInScrollableView]=\"scrollableOptionsInView\"\n        [disabled]=\"!canAddTags || maximumOfTagsReached()\" [hidden]=\"!canAddTags || maximumOfTagsReached()\"\n        (blur)=\"onBlur()\" autocomplete=\"off\"\n        #tagInput />\n    </span>\n\n  </span>\n\n</ng-template>\n\n<ng-template #itemTemplateWithImage let-model=\"item\" let-index=\"index\">\n  <img\n    style=\"border-radius:50%; height:40px; width: 40px; float:left; margin-left:5px ; margin-top: 5px;margin-right: 5px;\"\n    src=\"{{(model.imageURL?model.imageURL:defaultImageURL)}}\" />\n  <div>\n    <a [innerHTML]=\"model.name\"></a>\n    <p *ngIf=\"showDescription\">\n      {{model.description}}\n    </p>\n  </div>\n</ng-template>\n\n<ng-template #itemTemplateWithoutImage let-model=\"item\" let-index=\"index\">\n  <div>\n    <a [innerHTML]=\"model.name\"></a>\n    <p *ngIf=\"showDescription\">\n      {{model.description}}\n    </p>\n  </div>\n</ng-template>\n\n<ng-template #itemTemplateWithoutInitial let-model=\"item\" let-index=\"index\">\n  <div class=\"user-image\">\n    <div class=\"user-initials\">{{calculateInitials(model.name)}}</div>\n  </div>\n  <div>\n    <a [innerHTML]=\"model.name\"></a>\n    <p *ngIf=\"showDescription\">\n      {{model.description}}\n    </p>\n  </div>\n</ng-template>\n</div>\n", isInline: true, styles: [":host{overflow:auto;white-space:nowrap}.tags-input{align-items:center;display:flex;flex-wrap:wrap}.tags-input__tag{display:inline-block;margin-bottom:2px;margin-right:5px;padding-right:.3em}.tags-input__tag-remove-btn{cursor:pointer;display:inline-block;font-size:12px;margin:-3px 0 0 3px;padding:0;vertical-align:top}.tags-input__input-field{border:none;flex-grow:1;outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TypeaheadModule }, { kind: "directive", type: i3$4.TypeaheadDirective, selector: "[typeahead]", inputs: ["typeahead", "typeaheadMinLength", "adaptivePosition", "isAnimated", "typeaheadWaitMs", "typeaheadOptionsLimit", "typeaheadOptionField", "typeaheadGroupField", "typeaheadOrderBy", "typeaheadAsync", "typeaheadLatinize", "typeaheadSingleWords", "typeaheadWordDelimiters", "typeaheadMultipleSearch", "typeaheadMultipleSearchDelimiters", "typeaheadPhraseDelimiters", "typeaheadItemTemplate", "optionsListTemplate", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadHideResultsOnBlur", "typeaheadSelectFirstItem", "typeaheadIsFirstItemActive", "container", "dropup"], outputs: ["typeaheadLoading", "typeaheadNoResults", "typeaheadOnSelect", "typeaheadOnPreview", "typeaheadOnBlur"], exportAs: ["bs-typeahead"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BTagsInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BTagsInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'b-tags-input', template: TAGS_INPUT_TEMPLATE, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], standalone: true, imports: [
                         CommonModule,
@@ -10071,10 +10107,10 @@ class TagsInputComponent {
             this.DropdownTemplateVariable.toggle();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TagsInputComponent, deps: [{ token: i1.HttpClient }, { token: ControlUtility }, { token: i3$1.RequestHandlerService }, { 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: TagsInputComponent, isStandalone: true, selector: "BBSF-TagsInput", inputs: { group: "group", name: "name", options: "options", DropdownTemplateVariable: "DropdownTemplateVariable" }, outputs: { onChange: "onChange" }, viewQueries: [{ propertyName: "searchKey", first: true, predicate: ["searchKey"], descendants: true }], ngImport: i0, template: "<div [formGroup]=\"group\">\r\n  <div class=\"form-group bbsf-control bbsf-tags-input\" [formGroup]=\"tagsFormGroup\">\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\">*</span>\r\n      </label>\r\n      <!--input-->\r\n      <div class=\"bbsf-input-container\" *ngIf=\"!options.isReadonly\">\r\n        <b-tags-input type=\"text\" class=\"form-control {{options.extraClasses}}\" [dir]=\"textDir\"\r\n          aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"tags\"\r\n          [class.is-invalid]=\"tagsFormControl.invalid && tagsFormControl.touched\" placeholder=\"{{options.placeholder}}\"\r\n          id=\"{{name}}\" (onTagsChanged)=\"onTagsChanged($event)\" [(ngModel)]=\"tags\"\r\n          [removeLastOnBackspace]=\"options.removeLastOnBackspace\" (onNoOptionsMatch)=\"onNoOptionsMatch($event)\"\r\n          [options]=\"searchFunctionFactory(searchKey.selected)\" #searchKey\r\n          [scrollableOptions]=\"options.scrollableOptions\" [scrollableOptionsInView]=\"options.maxSearchResultsCount\"\r\n          (keydown)=\"addTag($event,searchKey)\" [ViewMode]=\"options.tagInputMode\" [maxTags]=\"options.maxNumberTags\"\r\n          [minLengthBeforeOptions]=\"options.minSearchLength\" [showDescription]=\"options.showDescription\"\r\n          [defaultImageURL]=\"options.defaultImgUrl\" name=\"tags\" (onBlurInput)=\"onTagsInputBlur(searchKey)\">\r\n        </b-tags-input>\r\n      </div>\r\n      <!-- readonly -->\r\n      <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\">{{getTagsValue()}}</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=\"(tagsFormControl.invalid && tagsFormControl.touched)\">\r\n        {{getErrorValidation(tagsFormControl.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>\r\n\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "component", type: BTagsInputComponent, selector: "b-tags-input", inputs: ["maxTags", "removeLastOnBackspace", "canDeleteTags", "canAddTags", "ViewMode", "placeholder", "showDescription", "options", "defaultImageURL", "minLengthBeforeOptions", "scrollableOptions", "scrollableOptionsInView"], outputs: ["onTagsChanged", "onMaxTagsReached", "onNoOptionsMatch", "onBlurInput"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TagsInputComponent, deps: [{ token: i1.HttpClient }, { token: ControlUtility }, { token: i3$1.RequestHandlerService }, { 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: "19.2.15", type: TagsInputComponent, isStandalone: true, selector: "BBSF-TagsInput", inputs: { group: "group", name: "name", options: "options", DropdownTemplateVariable: "DropdownTemplateVariable" }, outputs: { onChange: "onChange" }, viewQueries: [{ propertyName: "searchKey", first: true, predicate: ["searchKey"], descendants: true }], ngImport: i0, template: "<div [formGroup]=\"group\">\r\n  <div class=\"form-group bbsf-control bbsf-tags-input\" [formGroup]=\"tagsFormGroup\">\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\">*</span>\r\n      </label>\r\n      <!--input-->\r\n      <div class=\"bbsf-input-container\" *ngIf=\"!options.isReadonly\">\r\n        <b-tags-input type=\"text\" class=\"form-control {{options.extraClasses}}\" [dir]=\"textDir\"\r\n          aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"tags\"\r\n          [class.is-invalid]=\"tagsFormControl.invalid && tagsFormControl.touched\" placeholder=\"{{options.placeholder}}\"\r\n          id=\"{{name}}\" (onTagsChanged)=\"onTagsChanged($event)\" [(ngModel)]=\"tags\"\r\n          [removeLastOnBackspace]=\"options.removeLastOnBackspace\" (onNoOptionsMatch)=\"onNoOptionsMatch($event)\"\r\n          [options]=\"searchFunctionFactory(searchKey.selected)\" #searchKey\r\n          [scrollableOptions]=\"options.scrollableOptions\" [scrollableOptionsInView]=\"options.maxSearchResultsCount\"\r\n          (keydown)=\"addTag($event,searchKey)\" [ViewMode]=\"options.tagInputMode\" [maxTags]=\"options.maxNumberTags\"\r\n          [minLengthBeforeOptions]=\"options.minSearchLength\" [showDescription]=\"options.showDescription\"\r\n          [defaultImageURL]=\"options.defaultImgUrl\" name=\"tags\" (onBlurInput)=\"onTagsInputBlur(searchKey)\">\r\n        </b-tags-input>\r\n      </div>\r\n      <!-- readonly -->\r\n      <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\">{{getTagsValue()}}</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=\"(tagsFormControl.invalid && tagsFormControl.touched)\">\r\n        {{getErrorValidation(tagsFormControl.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>\r\n\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "component", type: BTagsInputComponent, selector: "b-tags-input", inputs: ["maxTags", "removeLastOnBackspace", "canDeleteTags", "canAddTags", "ViewMode", "placeholder", "showDescription", "options", "defaultImageURL", "minLengthBeforeOptions", "scrollableOptions", "scrollableOptionsInView"], outputs: ["onTagsChanged", "onMaxTagsReached", "onNoOptionsMatch", "onBlurInput"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TagsInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TagsInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-TagsInput', standalone: true, imports: [
                         CommonModule,
@@ -10103,10 +10139,10 @@ class NgTemplateNameDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgTemplateNameDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NgTemplateNameDirective, isStandalone: true, selector: "ng-template[name]", inputs: { name: "name" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NgTemplateNameDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: NgTemplateNameDirective, isStandalone: true, selector: "ng-template[name]", inputs: { name: "name" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgTemplateNameDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NgTemplateNameDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[name]',
@@ -11352,10 +11388,10 @@ class RepeaterFieldBuilderComponent {
                 }
             }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RepeaterFieldBuilderComponent, deps: [{ token: RenderComponentService }, { token: i2.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RepeaterFieldBuilderComponent, isStandalone: true, selector: "repeater-field-builder", inputs: { group: "group", itemNumber: "itemNumber", controlNumber: "controlNumber", repeaterField: "repeaterField", itemsValue: "itemsValue" }, viewQueries: [{ propertyName: "item", first: true, predicate: ["Item"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container #Item></ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RepeaterFieldBuilderComponent, deps: [{ token: RenderComponentService }, { token: i2.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: RepeaterFieldBuilderComponent, isStandalone: true, selector: "repeater-field-builder", inputs: { group: "group", itemNumber: "itemNumber", controlNumber: "controlNumber", repeaterField: "repeaterField", itemsValue: "itemsValue" }, viewQueries: [{ propertyName: "item", first: true, predicate: ["Item"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container #Item></ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RepeaterFieldBuilderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RepeaterFieldBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'repeater-field-builder', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], template: "<ng-container #Item></ng-container>\r\n" }]
         }], ctorParameters: () => [{ type: RenderComponentService }, { type: i2.FormGroupDirective }], propDecorators: { item: [{
@@ -11475,10 +11511,10 @@ class RepeaterComponent {
     setCurrentIndex(i) {
         this.repeaterContext.index = i;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RepeaterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RepeaterComponent, isStandalone: true, selector: "BBSF-repeater", inputs: { group: "group", options: "options", initialTemplate: "initialTemplate" }, viewQueries: [{ propertyName: "delete", first: true, predicate: ["delete"], descendants: true }, { propertyName: "_templates", predicate: NgTemplateNameDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngFor='let item of items ; index as i'>\r\n  {{setCurrentIndex(i)}}\r\n  <ng-container *ngTemplateOutlet=\"currentTemplate; context: repeaterContext\">\r\n  </ng-container>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngTemplateOutlet=\"add\">\r\n</ng-container>\r\n\r\n<ng-template *ngFor=\"let repeaterField of options.repeaterStructure ; index as i\" name=\"R{{i}}\" let-Index=\"itemIndex\" let-control=\"controlIndex\">\r\n  <repeater-field-builder *ngIf=\"repeaterField\" [repeaterField]=\"repeaterField\" [itemNumber]=\"Index\" [itemsValue]=\"originalItems\"\r\n    [controlNumber]=\"control\" [group]=\"repeaterGroup\">\r\n  </repeater-field-builder>\r\n</ng-template>\r\n\r\n<ng-template #delete let-item=\"itemIndex\">\r\n  <button *ngIf=\"!options.isReadonly\" class=\"{{options.deleteButtonExtraClasses}}\" type=\"button\" (click)=\"deleteItem(item)\"\r\n    [disabled]=\"items.length ==options.minRequiredItems&&options.isRequired\">\r\n    <span [innerHTML]=\"options.deleteButtonText\"></span>\r\n  </button>\r\n</ng-template>\r\n\r\n<ng-template #add>\r\n  <button *ngIf=\"!options.isReadonly\" class=\"{{options.addButtonExtraClasses}}\" type=\"button\" (click)=\"addItem()\">\r\n    <span [innerHTML]=\"options.addButtonText\"></span>\r\n  </button>\r\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgTemplateNameDirective, selector: "ng-template[name]", inputs: ["name"] }, { kind: "component", type: RepeaterFieldBuilderComponent, selector: "repeater-field-builder", inputs: ["group", "itemNumber", "controlNumber", "repeaterField", "itemsValue"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RepeaterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: RepeaterComponent, isStandalone: true, selector: "BBSF-repeater", inputs: { group: "group", options: "options", initialTemplate: "initialTemplate" }, viewQueries: [{ propertyName: "delete", first: true, predicate: ["delete"], descendants: true }, { propertyName: "_templates", predicate: NgTemplateNameDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngFor='let item of items ; index as i'>\r\n  {{setCurrentIndex(i)}}\r\n  <ng-container *ngTemplateOutlet=\"currentTemplate; context: repeaterContext\">\r\n  </ng-container>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngTemplateOutlet=\"add\">\r\n</ng-container>\r\n\r\n<ng-template *ngFor=\"let repeaterField of options.repeaterStructure ; index as i\" name=\"R{{i}}\" let-Index=\"itemIndex\" let-control=\"controlIndex\">\r\n  <repeater-field-builder *ngIf=\"repeaterField\" [repeaterField]=\"repeaterField\" [itemNumber]=\"Index\" [itemsValue]=\"originalItems\"\r\n    [controlNumber]=\"control\" [group]=\"repeaterGroup\">\r\n  </repeater-field-builder>\r\n</ng-template>\r\n\r\n<ng-template #delete let-item=\"itemIndex\">\r\n  <button *ngIf=\"!options.isReadonly\" class=\"{{options.deleteButtonExtraClasses}}\" type=\"button\" (click)=\"deleteItem(item)\"\r\n    [disabled]=\"items.length ==options.minRequiredItems&&options.isRequired\">\r\n    <span [innerHTML]=\"options.deleteButtonText\"></span>\r\n  </button>\r\n</ng-template>\r\n\r\n<ng-template #add>\r\n  <button *ngIf=\"!options.isReadonly\" class=\"{{options.addButtonExtraClasses}}\" type=\"button\" (click)=\"addItem()\">\r\n    <span [innerHTML]=\"options.addButtonText\"></span>\r\n  </button>\r\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgTemplateNameDirective, selector: "ng-template[name]", inputs: ["name"] }, { kind: "component", type: RepeaterFieldBuilderComponent, selector: "repeater-field-builder", inputs: ["group", "itemNumber", "controlNumber", "repeaterField", "itemsValue"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RepeaterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RepeaterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-repeater', standalone: true, imports: [
                         CommonModule,
@@ -11505,10 +11541,10 @@ class RepeaterItemFieldComponent {
     constructor() { }
     ngOnInit() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RepeaterItemFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RepeaterItemFieldComponent, isStandalone: true, selector: "repeater-item-field", inputs: { templates: "templates", filedIndex: "filedIndex", itemIndex: "itemIndex" }, ngImport: i0, template: "<ng-container *ngFor=\"let template of templates ; index as i\">\r\n  <ng-container *ngIf=\"i==filedIndex\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]={itemIndex:itemIndex,controlIndex:i}></ng-container>\r\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RepeaterItemFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: RepeaterItemFieldComponent, isStandalone: true, selector: "repeater-item-field", inputs: { templates: "templates", filedIndex: "filedIndex", itemIndex: "itemIndex" }, ngImport: i0, template: "<ng-container *ngFor=\"let template of templates ; index as i\">\r\n  <ng-container *ngIf=\"i==filedIndex\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]={itemIndex:itemIndex,controlIndex:i}></ng-container>\r\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RepeaterItemFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RepeaterItemFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'repeater-item-field', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], template: "<ng-container *ngFor=\"let template of templates ; index as i\">\r\n  <ng-container *ngIf=\"i==filedIndex\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]={itemIndex:itemIndex,controlIndex:i}></ng-container>\r\n</ng-container>" }]
         }], ctorParameters: () => [], propDecorators: { templates: [{
@@ -11613,10 +11649,10 @@ class RepeaterTableComponent {
         else
             this.items.push(this.items[this.items.length - 1] + 1);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RepeaterTableComponent, deps: [{ token: i3.UtilityService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RepeaterTableComponent, isStandalone: true, selector: "BBSF-repeater-table", inputs: { group: "group", options: "options" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-repeater\">\r\n  <!--table-->\r\n  <div class=\"table-responsive\">\r\n    <table class=\"bbsf-repeater-table table  {{options.repeaterTableExtraClasses}}\">\r\n      <thead class=\"table-head\">\r\n        <tr class=\"{{options.repeaterTableRowExtraClasses}}\">\r\n          <td *ngIf=\"options.enableTableNumbering\">\r\n            <span>#</span>\r\n          </td>\r\n          <th *ngFor=\"let item of options.repeaterStructure\" [hidden]=\"item.isHiddenInput\">{{item.headerTitle}}</th>\r\n          <th *ngIf=\"!options.disableDeleteButton\" class=\"text-center\">\r\n            {{utilityService.getResourceValue(options.actionLabelKey)}}</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody class=\"table-body\">\r\n        <tr *ngFor=\"let item of items  ; index as i\">\r\n          <td *ngIf=\"options.enableTableNumbering\">{{i+1}}</td>\r\n          <td *ngFor=\"let repeaterField of options.repeaterStructure  ; index as r\"\r\n            [hidden]=\"repeaterField.isHiddenInput\">\r\n            <repeater-field-builder [repeaterField]=\"repeaterField\" [itemNumber]=\"i\" [itemsValue]=\"originalItems\"\r\n              [controlNumber]=\"r\" [group]=\"repeaterGroup\">\r\n            </repeater-field-builder>\r\n          </td>\r\n          <td *ngIf=\"!options.disableDeleteButton\" class=\"td-delete\">\r\n            <button class=\"{{options.deleteButtonExtraClasses}} btn btn-icon btn-sm btn-danger\" type=\"button\"\r\n              (click)=\"deleteItem(i)\" [disabled]=\"(items.length ==options.minRequiredItems&&options.isRequired)\">\r\n              <span [innerHTML]=\"options.deleteButtonText\"></span>\r\n            </button>\r\n          </td>\r\n        </tr>\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n  <!--add button-->\r\n  <div class=\"repeater-add-btn\" *ngIf=\"!options.disableAddButton\">\r\n    <button class=\"{{options.addButtonExtraClasses}} btn btn-sm btn-brand\" type=\"button\" (click)=\"addItem()\">\r\n      <span [innerHTML]=\"options.addButtonText\"></span>\r\n    </button>\r\n  </div>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RepeaterTableComponent, deps: [{ token: i3.UtilityService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: RepeaterTableComponent, isStandalone: true, selector: "BBSF-repeater-table", inputs: { group: "group", options: "options" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-repeater\">\r\n  <!--table-->\r\n  <div class=\"table-responsive\">\r\n    <table class=\"bbsf-repeater-table table  {{options.repeaterTableExtraClasses}}\">\r\n      <thead class=\"table-head\">\r\n        <tr class=\"{{options.repeaterTableRowExtraClasses}}\">\r\n          <td *ngIf=\"options.enableTableNumbering\">\r\n            <span>#</span>\r\n          </td>\r\n          <th *ngFor=\"let item of options.repeaterStructure\" [hidden]=\"item.isHiddenInput\">{{item.headerTitle}}</th>\r\n          <th *ngIf=\"!options.disableDeleteButton\" class=\"text-center\">\r\n            {{utilityService.getResourceValue(options.actionLabelKey)}}</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody class=\"table-body\">\r\n        <tr *ngFor=\"let item of items  ; index as i\">\r\n          <td *ngIf=\"options.enableTableNumbering\">{{i+1}}</td>\r\n          <td *ngFor=\"let repeaterField of options.repeaterStructure  ; index as r\"\r\n            [hidden]=\"repeaterField.isHiddenInput\">\r\n            <repeater-field-builder [repeaterField]=\"repeaterField\" [itemNumber]=\"i\" [itemsValue]=\"originalItems\"\r\n              [controlNumber]=\"r\" [group]=\"repeaterGroup\">\r\n            </repeater-field-builder>\r\n          </td>\r\n          <td *ngIf=\"!options.disableDeleteButton\" class=\"td-delete\">\r\n            <button class=\"{{options.deleteButtonExtraClasses}} btn btn-icon btn-sm btn-danger\" type=\"button\"\r\n              (click)=\"deleteItem(i)\" [disabled]=\"(items.length ==options.minRequiredItems&&options.isRequired)\">\r\n              <span [innerHTML]=\"options.deleteButtonText\"></span>\r\n            </button>\r\n          </td>\r\n        </tr>\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n  <!--add button-->\r\n  <div class=\"repeater-add-btn\" *ngIf=\"!options.disableAddButton\">\r\n    <button class=\"{{options.addButtonExtraClasses}} btn btn-sm btn-brand\" type=\"button\" (click)=\"addItem()\">\r\n      <span [innerHTML]=\"options.addButtonText\"></span>\r\n    </button>\r\n  </div>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RepeaterTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RepeaterTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-repeater-table', standalone: true, imports: [
                         CommonModule,
@@ -11669,8 +11705,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * ```
  */
 class BBSFSpecializedModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFSpecializedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: BBSFSpecializedModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFSpecializedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: BBSFSpecializedModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             FullCalendarModule,
@@ -11702,7 +11738,7 @@ class BBSFSpecializedModule {
             RepeaterItemFieldComponent,
             BTagsInputComponent,
             NgTemplateNameDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFSpecializedModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFSpecializedModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             FullCalendarModule,
@@ -11723,10 +11759,10 @@ class BBSFSpecializedModule {
             RepeaterItemFieldComponent,
             BTagsInputComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFSpecializedModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFSpecializedModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [],
+                    declarations: [], // No declarations - components are standalone
                     imports: [
                         CommonModule,
                         FormsModule,
@@ -11799,8 +11835,8 @@ let options;
  * ```
  */
 class BBSFControlsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFControlsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: BBSFControlsModule, imports: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFControlsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: BBSFControlsModule, imports: [
             // Import new grouped modules - they handle all the dependencies
             BBSFCoreModule,
             BBSFEditorsModule,
@@ -11811,7 +11847,7 @@ class BBSFControlsModule {
             BBSFEditorsModule,
             BBSFUploadsModule,
             BBSFSpecializedModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFControlsModule, imports: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFControlsModule, imports: [
             // Import new grouped modules - they handle all the dependencies
             BBSFCoreModule,
             BBSFEditorsModule,
@@ -11823,7 +11859,7 @@ class BBSFControlsModule {
             BBSFUploadsModule,
             BBSFSpecializedModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BBSFControlsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BBSFControlsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -12062,10 +12098,10 @@ class AppBaseComponent {
                 formControl.reset();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AppBaseComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AppBaseComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AppBaseComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AppBaseComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AppBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AppBaseComponent, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.Injector }] });