@bnsights/bbsf-controls 1.0.145 → 1.0.147

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -6958,6 +6958,18 @@ class RangeNumber {
6958
6958
  }
6959
6959
 
6960
6960
  class TextAreaOptions extends ControlOptionsBase {
6961
+ constructor() {
6962
+ super(...arguments);
6963
+ /**To set value to Control */
6964
+ this.value = '';
6965
+ //** Set flag to enable or disable speech (mic) in textarea*/
6966
+ this.enableSpeechRecognition = false;
6967
+ //** Set array of available languages for speech to text*/
6968
+ this.speechLanguages = undefined;
6969
+ this.selectedSpeechLanguage = '';
6970
+ //Enable auto save speech language into local storage
6971
+ this.autoSaveSpeechLanguagetoLocalStorage = true;
6972
+ }
6961
6973
  }
6962
6974
 
6963
6975
  class TextBoxOptions extends ControlOptionsBase {
@@ -6988,13 +7000,15 @@ class ToggleSlideOptions extends ControlOptionsBase {
6988
7000
 
6989
7001
  class TextAreaComponent {
6990
7002
  static { this.controlContainerstatic = null; }
6991
- constructor(controlUtility, controlContainer, textAreaControlHost, utilityService, controlValidationService, globalSettings) {
7003
+ constructor(controlUtility, controlContainer, textAreaControlHost, utilityService, controlValidationService, globalSettings, speechRecognitionService, languageService) {
6992
7004
  this.controlUtility = controlUtility;
6993
7005
  this.controlContainer = controlContainer;
6994
7006
  this.textAreaControlHost = textAreaControlHost;
6995
7007
  this.utilityService = utilityService;
6996
7008
  this.controlValidationService = controlValidationService;
6997
7009
  this.globalSettings = globalSettings;
7010
+ this.speechRecognitionService = speechRecognitionService;
7011
+ this.languageService = languageService;
6998
7012
  this.onChange = new EventEmitter();
6999
7013
  this.wordCount = 0;
7000
7014
  this.wordCountArray = 0;
@@ -7008,6 +7022,7 @@ class TextAreaComponent {
7008
7022
  this.hasCharsLimitValidationError = false;
7009
7023
  this.minCharsLimit = -1; //To disable chars limit feature by default
7010
7024
  this.maxLimitWarningMsg = "";
7025
+ this.isMicOn = false;
7011
7026
  this.resetError = () => {
7012
7027
  this.controlValidationService.removeGlobalError();
7013
7028
  };
@@ -7032,6 +7047,7 @@ class TextAreaComponent {
7032
7047
  this.controlUtility.isValid(this.textAreaFormControl);
7033
7048
  };
7034
7049
  TextAreaComponent.controlContainerstatic = this.controlContainer;
7050
+ this.currentLanguage = localStorage.getItem('language');
7035
7051
  }
7036
7052
  ngOnInit() {
7037
7053
  if (this.options.isReadonly && !this.options.value)
@@ -7043,12 +7059,27 @@ class TextAreaComponent {
7043
7059
  this.controlValidationService.isCreatedBefor = false;
7044
7060
  this.group.addControl(this.options.name, new FormControl(''));
7045
7061
  this.textAreaFormControl = this.group.controls[this.options.name]; // new FormControl('',validationRules);
7062
+ // Initialize language form control
7063
+ const languageControlName = this.options.name + 'Language';
7064
+ this.group.addControl(languageControlName, new FormControl(this.options.selectedSpeechLanguage || ''));
7046
7065
  if (!this.options.maxLength)
7047
7066
  this.options.maxLength = this.globalSettings.maxLengthTextArea;
7048
7067
  if (!this.options.viewType)
7049
7068
  this.options.viewType = this.globalSettings.viewType;
7050
7069
  if (this.options.labelKey != null && this.options.labelKey != "")
7051
7070
  this.options.labelValue = this.utilityService.getResourceValue(this.options.labelKey);
7071
+ if (this.options.enableSpeechRecognition) {
7072
+ //Get all languages if not set
7073
+ if (!this.options.speechLanguages) {
7074
+ this.languageService.getLanguages().subscribe(result => {
7075
+ this.options.speechLanguages = result;
7076
+ this.setSpeechLanguage();
7077
+ });
7078
+ }
7079
+ else {
7080
+ this.setSpeechLanguage();
7081
+ }
7082
+ }
7052
7083
  this.textAreaFormControl.setValue(this.options.value);
7053
7084
  if (this.options.customValidation.length > 0) {
7054
7085
  let Validations = this.options.customValidation;
@@ -7158,15 +7189,99 @@ class TextAreaComponent {
7158
7189
  else //onFocusOut
7159
7190
  this.showCharsLimitMsg = false;
7160
7191
  }
7161
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: TextAreaComponent, deps: [{ token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }], target: i0.ɵɵFactoryTarget.Component }); }
7162
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: TextAreaComponent, 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\"\r\n [ngClass]=\"options.enableCopyToClipboard? 'p-40px' : '' \">\r\n <!--input-->\r\n <textarea class=\"form-control {{options.extraClasses}}\" (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n [dir]=\"textDir\" aria-describedby=\"email-error\" aria-invalid=\"true\" 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 maxlength=\"{{options.maxLength}}\" minlength=\"{{options.minLength}}\" [(ngModel)]=\"options.value\"\r\n (keydown)=\"wordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n #TextAreainput></textarea>\r\n <!--CopyToClipboard-->\r\n <div class=\"copy-clipboard\" *ngIf=\"options.enableCopyToClipboard\" (click)=\"copyInputMessage(TextAreainput)\">\r\n <i class=\"fas fa-copy\"></i>\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\">\r\n {{wordCount}}/{{options.maxWordCount}} Words</div>\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\"\r\n [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n {{maxLimitWarningMsg}}\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"(textAreaFormControl.invalid && textAreaFormControl.touched)\">\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: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i7.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }] }); }
7192
+ //region Speech Recognition
7193
+ setSpeechLanguage() {
7194
+ const languageControlName = this.options.name + 'Language';
7195
+ if (this.options.autoSaveSpeechLanguagetoLocalStorage) {
7196
+ let savedLanguage = localStorage.getItem("speechLanguage");
7197
+ if (savedLanguage) {
7198
+ this.options.selectedSpeechLanguage = savedLanguage;
7199
+ }
7200
+ else {
7201
+ this.loadSelectedSpeechLanguage();
7202
+ localStorage.setItem("speechLanguage", this.options.selectedSpeechLanguage);
7203
+ }
7204
+ }
7205
+ else {
7206
+ this.loadSelectedSpeechLanguage();
7207
+ }
7208
+ this.group.get(languageControlName).setValue(this.options.selectedSpeechLanguage);
7209
+ }
7210
+ loadSelectedSpeechLanguage() {
7211
+ if (!this.options.selectedSpeechLanguage) {
7212
+ if (this.currentLanguage == "en" && this.options.speechLanguages.some(language => language.englishName === 'English')) {
7213
+ this.options.selectedSpeechLanguage = this.options.speechLanguages.find(language => language.englishName === 'English').dialect;
7214
+ }
7215
+ else if (this.currentLanguage == "ar" && this.options.speechLanguages.some(language => language.englishName === 'Arabic')) {
7216
+ this.options.selectedSpeechLanguage = this.options.speechLanguages.find(language => language.englishName === 'Arabic').dialect;
7217
+ }
7218
+ else {
7219
+ this.options.selectedSpeechLanguage = this.options.speechLanguages[0].dialect;
7220
+ }
7221
+ }
7222
+ }
7223
+ startSpeechRecognition() {
7224
+ if (!this.speechRecognitionService.isSupported) {
7225
+ this.utilityService.notifyErrorMessage(this.utilityService.getResourceValue("BrowserNotSupportSpeechRecognition"));
7226
+ return;
7227
+ }
7228
+ this.isMicOn = true;
7229
+ this.subscription = this.speechRecognitionService.startListening(this.options.selectedSpeechLanguage).subscribe({
7230
+ next: (transcript) => {
7231
+ if (transcript) {
7232
+ if (this.options.value) {
7233
+ this.options.value += ' ';
7234
+ }
7235
+ let charIndex = 0;
7236
+ const interval = setInterval(() => {
7237
+ this.options.value += transcript[charIndex];
7238
+ charIndex++;
7239
+ if (charIndex === transcript.length) {
7240
+ clearInterval(interval);
7241
+ }
7242
+ }, 10);
7243
+ }
7244
+ },
7245
+ error: (error) => {
7246
+ console.error(error);
7247
+ this.stopSpeechRecognition();
7248
+ },
7249
+ complete: () => {
7250
+ this.isMicOn = false;
7251
+ }
7252
+ });
7253
+ }
7254
+ stopSpeechRecognition() {
7255
+ if (!this.speechRecognitionService.isSupported) {
7256
+ return;
7257
+ }
7258
+ this.isMicOn = false;
7259
+ this.speechRecognitionService.stopListening();
7260
+ if (this.subscription) {
7261
+ this.subscription.unsubscribe();
7262
+ }
7263
+ }
7264
+ ngOnDestroy() {
7265
+ this.stopSpeechRecognition();
7266
+ }
7267
+ onSpeechLanguageChange(event) {
7268
+ let selectedLang = event.target.value;
7269
+ this.options.selectedSpeechLanguage = selectedLang;
7270
+ const languageControlName = this.options.name + 'Language';
7271
+ this.group.get(languageControlName).setValue(selectedLang);
7272
+ if (this.options.autoSaveSpeechLanguagetoLocalStorage) {
7273
+ localStorage.setItem("speechLanguage", selectedLang);
7274
+ }
7275
+ }
7276
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: TextAreaComponent, deps: [{ token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }, { token: i3.SpeechRecognitionService }, { token: i3.LanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
7277
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: TextAreaComponent, 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\" aria-describedby=\"email-error\" aria-invalid=\"true\" 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 maxlength=\"{{options.maxLength}}\" minlength=\"{{options.minLength}}\" [(ngModel)]=\"options.value\"\r\n (keydown)=\"wordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n #TextAreainput></textarea>\r\n <!--CopyToClipboard-->\r\n <div class=\"copy-clipboard\" *ngIf=\"options.enableCopyToClipboard\" (click)=\"copyInputMessage(TextAreainput)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </div>\r\n <div [ngClass]=\"{'expanded': isFocused}\" class=\"language-container {{options.extraClassMicLanguage}}\" *ngIf=\"options.enableSpeechRecognition\">\r\n <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"options.iconMic? options.iconMic : './src/assets/images/mic.svg'\" (click)=\"startSpeechRecognition()\"\r\n *ngIf=\"!isMicOn\">\r\n </span>\r\n <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"options.iconMicOff? options.iconMicOff : './src/assets/images/mic-off.svg'\" (click)=\"stopSpeechRecognition()\"\r\n *ngIf=\"isMicOn\">\r\n </span>\r\n <select class=\"language-select\" [formControlName]=\"options.name + 'Language'\" (change)=\"onSpeechLanguageChange($event)\">\r\n <option *ngFor=\"let language of options.speechLanguages\" [value]=\"language.dialect\">{{language.displayName}}</option>\r\n </select>\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\">\r\n {{wordCount}}/{{options.maxWordCount}} Words</div>\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\"\r\n [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n {{maxLimitWarningMsg}}\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"(textAreaFormControl.invalid && textAreaFormControl.touched)\">\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>\r\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i7.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: i2.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: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8$3.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }] }); }
7163
7278
  }
7164
7279
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: TextAreaComponent, decorators: [{
7165
7280
  type: Component,
7166
- args: [{ selector: 'BBSF-TextArea', 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\"\r\n [ngClass]=\"options.enableCopyToClipboard? 'p-40px' : '' \">\r\n <!--input-->\r\n <textarea class=\"form-control {{options.extraClasses}}\" (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n [dir]=\"textDir\" aria-describedby=\"email-error\" aria-invalid=\"true\" 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 maxlength=\"{{options.maxLength}}\" minlength=\"{{options.minLength}}\" [(ngModel)]=\"options.value\"\r\n (keydown)=\"wordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n #TextAreainput></textarea>\r\n <!--CopyToClipboard-->\r\n <div class=\"copy-clipboard\" *ngIf=\"options.enableCopyToClipboard\" (click)=\"copyInputMessage(TextAreainput)\">\r\n <i class=\"fas fa-copy\"></i>\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\">\r\n {{wordCount}}/{{options.maxWordCount}} Words</div>\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\"\r\n [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n {{maxLimitWarningMsg}}\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"(textAreaFormControl.invalid && textAreaFormControl.touched)\">\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>" }]
7281
+ args: [{ selector: 'BBSF-TextArea', 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\" aria-describedby=\"email-error\" aria-invalid=\"true\" 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 maxlength=\"{{options.maxLength}}\" minlength=\"{{options.minLength}}\" [(ngModel)]=\"options.value\"\r\n (keydown)=\"wordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n #TextAreainput></textarea>\r\n <!--CopyToClipboard-->\r\n <div class=\"copy-clipboard\" *ngIf=\"options.enableCopyToClipboard\" (click)=\"copyInputMessage(TextAreainput)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </div>\r\n <div [ngClass]=\"{'expanded': isFocused}\" class=\"language-container {{options.extraClassMicLanguage}}\" *ngIf=\"options.enableSpeechRecognition\">\r\n <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"options.iconMic? options.iconMic : './src/assets/images/mic.svg'\" (click)=\"startSpeechRecognition()\"\r\n *ngIf=\"!isMicOn\">\r\n </span>\r\n <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"options.iconMicOff? options.iconMicOff : './src/assets/images/mic-off.svg'\" (click)=\"stopSpeechRecognition()\"\r\n *ngIf=\"isMicOn\">\r\n </span>\r\n <select class=\"language-select\" [formControlName]=\"options.name + 'Language'\" (change)=\"onSpeechLanguageChange($event)\">\r\n <option *ngFor=\"let language of options.speechLanguages\" [value]=\"language.dialect\">{{language.displayName}}</option>\r\n </select>\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\">\r\n {{wordCount}}/{{options.maxWordCount}} Words</div>\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\"\r\n [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n {{maxLimitWarningMsg}}\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"(textAreaFormControl.invalid && textAreaFormControl.touched)\">\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>\r\n" }]
7167
7282
  }], ctorParameters: () => [{ type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
7168
7283
  type: Optional
7169
- }] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }], propDecorators: { group: [{
7284
+ }] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }, { type: i3.SpeechRecognitionService }, { type: i3.LanguageService }], propDecorators: { group: [{
7170
7285
  type: Input
7171
7286
  }], options: [{
7172
7287
  type: Input