@bnsights/bbsf-controls 1.0.145 → 1.0.147

package/lib/Shared/Models/TextAreaOptions.d.ts

@@ -1,3 +1,4 @@
+import { LanguageDTO } from '@bnsights/bbsf-utilities/lib/shared/models';
 import { ForceDirection } from '../Enums/ForceDirection';
 import { ControlOptionsBase } from './ControlOptionsBase';
 export declare class TextAreaOptions extends ControlOptionsBase {
@@ -20,4 +21,11 @@ export declare class TextAreaOptions extends ControlOptionsBase {
     /** to set Direction of TextArea  if TextArea is Arabic or English  */
     forceDirection: ForceDirection;
     maxLengthWarningLimit: number;
+    enableSpeechRecognition: boolean;
+    speechLanguages: LanguageDTO[];
+    selectedSpeechLanguage: string;
+    iconMic: string;
+    iconMicOff: string;
+    extraClassMicLanguage: string;
+    autoSaveSpeechLanguagetoLocalStorage: boolean;
 }

package/lib/controls/TextArea/TextArea.component.d.ts

@@ -1,9 +1,10 @@
 import { OnInit, EventEmitter } from '@angular/core';
 import { FormGroup, AbstractControl, ControlContainer, FormGroupDirective } from '@angular/forms';
-import { ControlValidationService, UtilityService } from '@bnsights/bbsf-utilities';
+import { ControlValidationService, LanguageService, UtilityService, SpeechRecognitionService } from '@bnsights/bbsf-utilities';
 import { ControlUtility } from '../../Shared/services/ControlUtility';
 import { TextAreaOptions } from '../../Shared/Models/TextAreaOptions';
 import { GlobalSettings } from '../../Shared/services/GlobalSettings.service';
+import { Subscription } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare class TextAreaComponent implements OnInit {
     private controlUtility;
@@ -12,8 +13,10 @@ export declare class TextAreaComponent implements OnInit {
     private utilityService;
     private controlValidationService;
     private globalSettings;
+    private speechRecognitionService;
+    private languageService;
     static controlContainerstatic: any;
-    constructor(controlUtility: ControlUtility, controlContainer: ControlContainer, textAreaControlHost: FormGroupDirective, utilityService: UtilityService, controlValidationService: ControlValidationService, globalSettings: GlobalSettings);
+    constructor(controlUtility: ControlUtility, controlContainer: ControlContainer, textAreaControlHost: FormGroupDirective, utilityService: UtilityService, controlValidationService: ControlValidationService, globalSettings: GlobalSettings, speechRecognitionService: SpeechRecognitionService, languageService: LanguageService);
     group: FormGroup;
     options: TextAreaOptions;
     onChange: EventEmitter<any>;
@@ -30,7 +33,11 @@ export declare class TextAreaComponent implements OnInit {
     charsLimitMsgClass: string;
     minCharsLimit: number;
     maxLimitWarningMsg: string;
+    isMicOn: boolean;
     textDir: any;
+    isFocused: boolean;
+    currentLanguage: String;
+    subscription: Subscription;
     ngOnInit(): void;
     ngAfterViewInit(): void;
     resetError: () => void;
@@ -46,6 +53,12 @@ export declare class TextAreaComponent implements OnInit {
     removeCustomValidation: (customValidation: any) => void;
     addCustomValidation: (customValidation: any) => void;
     isValid: () => void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TextAreaComponent, [null, { optional: true; }, null, null, null, null]>;
+    setSpeechLanguage(): void;
+    loadSelectedSpeechLanguage(): void;
+    startSpeechRecognition(): void;
+    stopSpeechRecognition(): void;
+    ngOnDestroy(): void;
+    onSpeechLanguageChange(event: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TextAreaComponent, [null, { optional: true; }, null, null, null, null, null, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TextAreaComponent, "BBSF-TextArea", never, { "group": { "alias": "group"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, { "onChange": "onChange"; }, never, never, false, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bnsights/bbsf-controls",
-  "version": "1.0.145",
+  "version": "1.0.147",
   "peerDependencies": {
     "@angular/animations": "^17.0.5",
     "@angular/cdk": "^17.0.2",
@@ -12,7 +12,7 @@
     "@angular/router": "^17.0.5"
   },
   "dependencies": {
-    "@bnsights/bbsf-utilities": "^1.0.55",
+    "@bnsights/bbsf-utilities": "^1.0.56",
     "@danielmoncada/angular-datetime-picker": "^17.0.0",
     "@fullcalendar/angular": "^6.1.10",
     "@fullcalendar/core": "^6.1.10",

package/src/lib/assets/Style-rtl.scss

@@ -280,7 +280,16 @@ input::-webkit-inner-spin-button {
     right: auto !important;
   }
 }
-
+//textarea mic
+.bbsf-control.form-group .bbsf-input-container .language-container {
+  left: 10%;
+  right: auto;
+} 
+
+.bbsf-control.form-group .bbsf-input-container > .language-container:nth-child(2) {
+  left: 2% !important;
+  right: auto !important;
+}
 @media screen and (min-width: 767px) and (max-width: 991px) {
   .form-group.bbsf-control.bbsf-phone .bbsf-input-container .form-control {
     .dropdown-menu.show {
@@ -289,4 +298,11 @@ input::-webkit-inner-spin-button {
     }
   }
 
+}
+
+@media screen and (max-width: 767px) {
+  .bbsf-control.form-group .bbsf-input-container .language-container {
+    left: 14%;
+    right: auto;
+  }
 }

package/src/lib/assets/images/mic-off.svg

@@ -0,0 +1,11 @@
+<svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 37303">
+<g id="Group">
+<path id="Vector" d="M7.92466 13.3485H7.27012C6.40214 13.3485 5.56971 13.0037 4.95595 12.3899C4.3422 11.7762 3.99739 10.9437 3.99739 10.0757V4.18484C3.99739 3.31686 4.3422 2.48442 4.95595 1.87067C5.56971 1.25691 6.40214 0.912109 7.27012 0.912109H7.92466C8.79265 0.912109 9.62508 1.25691 10.2388 1.87067C10.8526 2.48442 11.1974 3.31686 11.1974 4.18484V10.0757C11.1974 10.9437 10.8526 11.7762 10.2388 12.3899C9.62508 13.0037 8.79265 13.3485 7.92466 13.3485ZM12.8894 12.527C12.9328 12.4515 12.9444 12.3618 12.9217 12.2778C12.899 12.1937 12.8438 12.1221 12.7683 12.0787C12.6928 12.0353 12.6031 12.0236 12.519 12.0463C12.435 12.069 12.3633 12.1242 12.3199 12.1997C11.8519 13.0417 11.1672 13.7432 10.3369 14.2316C9.50653 14.72 8.56072 14.9776 7.59739 14.9776C6.63407 14.9776 5.68826 14.72 4.85792 14.2316C4.02759 13.7432 3.34292 13.0417 2.87485 12.1997C2.85336 12.1624 2.82471 12.1296 2.79055 12.1032C2.75639 12.0769 2.71738 12.0576 2.67574 12.0463C2.63411 12.0351 2.59067 12.0322 2.5479 12.0377C2.50513 12.0433 2.46387 12.0572 2.42648 12.0787C2.38909 12.1001 2.3563 12.1288 2.32998 12.1629C2.30366 12.1971 2.28432 12.2361 2.27308 12.2778C2.25037 12.3618 2.26199 12.4515 2.30539 12.527C2.82985 13.4706 3.59705 14.2568 4.52752 14.8041C5.45798 15.3515 6.51787 15.6401 7.59739 15.6401C8.67691 15.6401 9.7368 15.3515 10.6673 14.8041C11.5977 14.2568 12.3649 13.4706 12.8894 12.527ZM9.8883 18.2576H7.92466V16.9485C7.92466 16.8617 7.89018 16.7784 7.82881 16.7171C7.76743 16.6557 7.68419 16.6212 7.59739 16.6212C7.51059 16.6212 7.42735 16.6557 7.36597 16.7171C7.3046 16.7784 7.27012 16.8617 7.27012 16.9485V18.2576H5.30648C5.21968 18.2576 5.13644 18.292 5.07507 18.3534C5.01369 18.4148 4.97921 18.498 4.97921 18.5848C4.97921 18.6716 5.01369 18.7549 5.07507 18.8163C5.13644 18.8776 5.21968 18.9121 5.30648 18.9121H9.8883C9.9751 18.9121 10.0583 18.8776 10.1197 18.8163C10.1811 18.7549 10.2156 18.6716 10.2156 18.5848C10.2156 18.498 10.1811 18.4148 10.1197 18.3534C10.0583 18.292 9.9751 18.2576 9.8883 18.2576Z" fill="#8b8b8b"/>
+</g>
+<g id="Group 37302">
+<rect id="Rectangle 9076" x="14.207" y="1.91211" width="1.2" height="19.9588" rx="0.6" transform="rotate(44.3252 14.207 1.91211)" fill="#8b8b8b"/>
+<rect id="Rectangle 9077" x="14.168" y="1.91211" width="0.765394" height="19.9002" rx="0.382697" transform="rotate(44.3252 14.168 1.91211)" fill="#8b8b8b"/>
+</g>
+</g>
+</svg>

package/src/lib/assets/images/mic.svg

@@ -0,0 +1,5 @@
+<svg width="11" height="19" viewBox="0 0 11 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M5.99107 13.3485H5.33653C4.46854 13.3485 3.63611 13.0037 3.02236 12.3899C2.4086 11.7762 2.0638 10.9437 2.0638 10.0757V4.18484C2.0638 3.31686 2.4086 2.48442 3.02236 1.87067C3.63611 1.25691 4.46854 0.912109 5.33653 0.912109H5.99107C6.85905 0.912109 7.69148 1.25691 8.30524 1.87067C8.91899 2.48442 9.2638 3.31686 9.2638 4.18484V10.0757C9.2638 10.9437 8.91899 11.7762 8.30524 12.3899C7.69148 13.0037 6.85905 13.3485 5.99107 13.3485ZM10.9558 12.527C10.9992 12.4515 11.0108 12.3618 10.9881 12.2778C10.9654 12.1937 10.9102 12.1221 10.8347 12.0787C10.7592 12.0353 10.6695 12.0236 10.5854 12.0463C10.5014 12.069 10.4297 12.1242 10.3863 12.1997C9.91827 13.0417 9.2336 13.7432 8.40327 14.2316C7.57293 14.72 6.62712 14.9776 5.6638 14.9776C4.70047 14.9776 3.75466 14.72 2.92433 14.2316C2.09399 13.7432 1.40933 13.0417 0.941253 12.1997C0.919764 12.1624 0.89112 12.1296 0.856958 12.1032C0.822796 12.0769 0.783784 12.0576 0.74215 12.0463C0.700515 12.0351 0.657074 12.0322 0.614306 12.0377C0.571538 12.0433 0.53028 12.0572 0.492889 12.0787C0.455499 12.1001 0.422706 12.1288 0.396385 12.1629C0.370064 12.1971 0.350729 12.2361 0.339485 12.2778C0.316776 12.3618 0.328399 12.4515 0.371798 12.527C0.89626 13.4706 1.66346 14.2568 2.59392 14.8041C3.52439 15.3515 4.58428 15.6401 5.6638 15.6401C6.74332 15.6401 7.80321 15.3515 8.73367 14.8041C9.66414 14.2568 10.4313 13.4706 10.9558 12.527ZM7.95471 18.2576H5.99107V16.9485C5.99107 16.8617 5.95659 16.7784 5.89522 16.7171C5.83384 16.6557 5.7506 16.6212 5.6638 16.6212C5.577 16.6212 5.49376 16.6557 5.43238 16.7171C5.37101 16.7784 5.33653 16.8617 5.33653 16.9485V18.2576H3.37289C3.28609 18.2576 3.20285 18.292 3.14147 18.3534C3.0801 18.4148 3.04562 18.498 3.04562 18.5848C3.04562 18.6716 3.0801 18.7549 3.14147 18.8163C3.20285 18.8776 3.28609 18.9121 3.37289 18.9121H7.95471C8.04151 18.9121 8.12475 18.8776 8.18612 18.8163C8.2475 18.7549 8.28198 18.6716 8.28198 18.5848C8.28198 18.498 8.2475 18.4148 8.18612 18.3534C8.12475 18.292 8.04151 18.2576 7.95471 18.2576Z" fill="#8b8b8b"/>
+</g>
+</svg>

package/src/lib/assets/sass/base.scss

@@ -21,7 +21,7 @@
 
       input,
       textarea {
-        padding-right: 40px;
+        padding-right: 40px !important;
 
         &[dir="rtl"] {
           padding-left: 40px !important;
@@ -29,7 +29,28 @@
         }
       }
     }
+    &.p-80px {
+      input,
+      textarea {
+        padding-right: 80px !important;
+
+        &[dir="rtl"] {
+          padding-left: 80px !important;
+          padding-right: 1rem !important;
+        }
+      }
+    }
+    &.p-120px {
+      input,
+      textarea {
+        padding-right: 120px !important;
 
+        &[dir="rtl"] {
+          padding-left: 120px !important;
+          padding-right: 1rem !important;
+        }
+      }
+    }
     input:disabled {
       cursor: not-allowed !important;
     }
@@ -132,8 +153,44 @@
         background: #e5e5e5
       }
     }
+    .language-container {
+      position: absolute;
+      right: 10%;
+      top: 45%;
+      transform: translateY(-35%);
+      cursor: pointer;
+      width: auto;
+      padding: 0.62rem 0.62rem 0.62rem 0.9rem;
+      display: flex;
+      border-radius: $bbsf-rounded;
+      background: $mic-bg;
+      gap: .4rem;
+      align-items: center;
+  
+      &:hover {
+        background: $mic-bg-hover;
+      }
+      
+      .language-select {
+        color: $mic-text;
+        padding: 0;
+        margin: 0 auto;
+        border: 0;
+        max-width: 36px;
+        text-align: center;
+        background: transparent;
+        line-height: 0;
+        cursor: pointer;
+        font-size: .8rem;
+        font-weight: 700;
+      }
+    }
+   
+    
+  }
+  .bbsf-input-container > .language-container:nth-child(2) {
+    right: 2% !important;
   }
-
   /* horizontal form control*/
   .bbsf-horizontal {
     display: flex;
@@ -259,4 +316,16 @@ input::-webkit-inner-spin-button {
 .btn-icon-o.btn-secondary.active:focus,
 .show>.btn-icon-o.btn-secondary.dropdown-toggle:focus {
   box-shadow: none;
+}
+
+.expanded .language-container {
+  top: 25% !important;
+}
+
+//responsive
+@media screen and (max-width: 767px) {
+  .bbsf-control.form-group .bbsf-input-container .language-container {
+    left: 14%;
+    right: auto;
+  }
 }

package/src/lib/assets/sass/variables.scss

@@ -7,3 +7,10 @@ $bbsf-rounded: 0.475rem;
 //text
 $label-color: #484848;
 $subtext-color: #a1a5b7;
+
+$mic-bg: #eeeeee;
+$mic-bg-hover: #e5e5e5;
+$mic-text: #8b8b8b;
+
+$bg-light-brand: #0066B20D;
+$bg-hover-brand: #DBE1F0;