@seniorsistemas/angular-components 17.26.9 → 17.26.11

package/esm5/components/tooltip/tooltip.component.js

@@ -13,7 +13,7 @@ var TooltipComponent = /** @class */ (function () {
     TooltipComponent = __decorate([
         Component({
             template: "<div\n   id=\"tooltip\"\n   class=\"tooltip\"\n   [ngClass]=\"['tooltip--' + position]\"\n   [class.tooltip--visible]=\"visible\"\n   [ngStyle]=\"{\n      'left': left + 'px',\n      'top': top + 'px'\n   }\">\n   <ng-template\n      *ngIf=\"escape;\n         then escapeTemplate;\n         else noEscapeTemplate\">\n   </ng-template>   \n</div>\n\n<ng-template #noEscapeTemplate>\n   <span\n      class=\"tooltip__content\"\n      [innerHTML]=\"tooltip\">\n   </span>\n</ng-template>\n\n<ng-template #escapeTemplate>\n   <span class=\"tooltip__content\">\n      {{ tooltip }}\n   </span>\n</ng-template>",
-            styles: [".tooltip{background-color:#000;border-radius:2px;color:#fff;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:400;line-height:21px;opacity:0;padding:8px;position:fixed;transform:translateX(-50%);text-align:center;max-width:220px;word-wrap:break-word;z-index:99999}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip::before{content:\"\";height:0;position:absolute;width:0}.tooltip--bottom{margin-top:5px;transform:translateX(-50%)}.tooltip--bottom::before{border:5px solid transparent;border-bottom:5px solid #000;left:calc(50% - 5px);top:-10px}.tooltip--top{margin-bottom:5px;transform:translate(-50%,-100%)}.tooltip--top::before{border:5px solid transparent;border-top:5px solid #000;left:calc(50% - 5px);bottom:-10px}.tooltip--left{margin-right:28px;transform:translate(calc(-100% - 7px),-50%)}.tooltip--left::before{border:5px solid transparent;border-left:5px solid #000;right:-10px;bottom:calc(50% - 5px)}.tooltip--right{margin-left:7px;transform:translateY(-50%)}.tooltip--right::before{border:5px solid transparent;border-right:5px solid #000;left:-10px;bottom:calc(50% - 5px)}"]
+            styles: [".tooltip{background-color:#000;border-radius:2px;color:#fff;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:400;line-height:21px;opacity:0;padding:8px;transform:translateX(-50%);text-align:center;max-width:220px;word-wrap:break-word;z-index:99999;position:absolute}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip::before{content:\"\";height:0;position:absolute;width:0}.tooltip--bottom{margin-top:5px;transform:translateX(-50%)}.tooltip--bottom::before{border:5px solid transparent;border-bottom:5px solid #000;left:calc(50% - 5px);top:-10px}.tooltip--top{margin-bottom:5px;transform:translate(-50%,-100%)}.tooltip--top::before{border:5px solid transparent;border-top:5px solid #000;left:calc(50% - 5px);bottom:-10px}.tooltip--left{margin-right:28px;transform:translate(calc(-100% - 7px),-50%)}.tooltip--left::before{border:5px solid transparent;border-left:5px solid #000;right:-10px;bottom:calc(50% - 5px)}.tooltip--right{margin-left:7px;transform:translateY(-50%)}.tooltip--right::before{border:5px solid transparent;border-right:5px solid #000;left:-10px;bottom:calc(50% - 5px)}"]
         })
     ], TooltipComponent);
     return TooltipComponent;

package/fesm2015/seniorsistemas-angular-components.js

@@ -376,7 +376,7 @@ let TooltipComponent = class TooltipComponent {
 TooltipComponent = __decorate([
     Component({
         template: "<div\n   id=\"tooltip\"\n   class=\"tooltip\"\n   [ngClass]=\"['tooltip--' + position]\"\n   [class.tooltip--visible]=\"visible\"\n   [ngStyle]=\"{\n      'left': left + 'px',\n      'top': top + 'px'\n   }\">\n   <ng-template\n      *ngIf=\"escape;\n         then escapeTemplate;\n         else noEscapeTemplate\">\n   </ng-template>   \n</div>\n\n<ng-template #noEscapeTemplate>\n   <span\n      class=\"tooltip__content\"\n      [innerHTML]=\"tooltip\">\n   </span>\n</ng-template>\n\n<ng-template #escapeTemplate>\n   <span class=\"tooltip__content\">\n      {{ tooltip }}\n   </span>\n</ng-template>",
-        styles: [".tooltip{background-color:#000;border-radius:2px;color:#fff;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:400;line-height:21px;opacity:0;padding:8px;position:fixed;transform:translateX(-50%);text-align:center;max-width:220px;word-wrap:break-word;z-index:99999}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip::before{content:\"\";height:0;position:absolute;width:0}.tooltip--bottom{margin-top:5px;transform:translateX(-50%)}.tooltip--bottom::before{border:5px solid transparent;border-bottom:5px solid #000;left:calc(50% - 5px);top:-10px}.tooltip--top{margin-bottom:5px;transform:translate(-50%,-100%)}.tooltip--top::before{border:5px solid transparent;border-top:5px solid #000;left:calc(50% - 5px);bottom:-10px}.tooltip--left{margin-right:28px;transform:translate(calc(-100% - 7px),-50%)}.tooltip--left::before{border:5px solid transparent;border-left:5px solid #000;right:-10px;bottom:calc(50% - 5px)}.tooltip--right{margin-left:7px;transform:translateY(-50%)}.tooltip--right::before{border:5px solid transparent;border-right:5px solid #000;left:-10px;bottom:calc(50% - 5px)}"]
+        styles: [".tooltip{background-color:#000;border-radius:2px;color:#fff;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:400;line-height:21px;opacity:0;padding:8px;transform:translateX(-50%);text-align:center;max-width:220px;word-wrap:break-word;z-index:99999;position:absolute}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip::before{content:\"\";height:0;position:absolute;width:0}.tooltip--bottom{margin-top:5px;transform:translateX(-50%)}.tooltip--bottom::before{border:5px solid transparent;border-bottom:5px solid #000;left:calc(50% - 5px);top:-10px}.tooltip--top{margin-bottom:5px;transform:translate(-50%,-100%)}.tooltip--top::before{border:5px solid transparent;border-top:5px solid #000;left:calc(50% - 5px);bottom:-10px}.tooltip--left{margin-right:28px;transform:translate(calc(-100% - 7px),-50%)}.tooltip--left::before{border:5px solid transparent;border-left:5px solid #000;right:-10px;bottom:calc(50% - 5px)}.tooltip--right{margin-left:7px;transform:translateY(-50%)}.tooltip--right::before{border:5px solid transparent;border-right:5px solid #000;left:-10px;bottom:calc(50% - 5px)}"]
     })
 ], TooltipComponent);
 
@@ -10624,9 +10624,8 @@ let SpeechRecognitionService = class SpeechRecognitionService {
         this.translateService = translateService;
         this.hasSupportSpeechRecognition = false;
         this.isListening = false;
-        this.hasMicrophoneAccess = false;
+        this.microphoneStatus$ = new Subject();
         this.TIMEOUT_NO_MESSAGE = 3000;
-        this.verifyMicrophoneState();
         this.setRecognition();
     }
     listen() {
@@ -10634,12 +10633,13 @@ let SpeechRecognitionService = class SpeechRecognitionService {
         if (this.isListening) {
             speechSubject.error('Already listening');
         }
-        else if (!this.hasMicrophoneAccess) {
-            this.isListening = false;
-            this.toastService.show({ severity: 'error', text: this.translateService.instant('platform.angular_components.no_microphone_permission') });
-            speechSubject.error('Microphone access is disabled');
-        }
-        else {
+        this.hasMicrophoneAccess.then((hasAccess) => {
+            if (!hasAccess) {
+                this.toastService.show({ severity: 'error', text: this.translateService.instant('platform.angular_components.no_microphone_permission') });
+                speechSubject.error('Microphone access is disabled');
+                return;
+            }
+            this.microphoneStatus$.next('active');
             this.isListening = true;
             this.recognition.continuous = true;
             this.recognition.interimResults = true;
@@ -10679,6 +10679,7 @@ let SpeechRecognitionService = class SpeechRecognitionService {
                     }
                     this.isListening = false;
                     speechSubject.error('Speech recognition error');
+                    this.microphoneStatus$.next('inactive');
                 });
             };
             this.recognition.onend = () => {
@@ -10689,26 +10690,16 @@ let SpeechRecognitionService = class SpeechRecognitionService {
                     speechSubject.next({ text: fullTranscript + interimTranscript, isFinal: true });
                     this.isListening = false;
                     speechSubject.complete();
+                    this.microphoneStatus$.next('inactive');
                 });
             };
             this.recognition.start();
-        }
+        });
         return speechSubject;
     }
     stop() {
         this.recognition.stop();
     }
-    verifyMicrophoneState() {
-        navigator.permissions.query({ name: 'microphone' }).then((result) => {
-            const microphoneResultState = result.state;
-            this.hasMicrophoneAccess = microphoneResultState === 'granted';
-            result.onchange = () => {
-                this.ngZone.run(() => {
-                    this.hasMicrophoneAccess = result.state === 'granted';
-                });
-            };
-        });
-    }
     setRecognition() {
         var _a;
         const SpeechRecognitionConstructor = window.SpeechRecognition || window.webkitSpeechRecognition;
@@ -10723,6 +10714,34 @@ let SpeechRecognitionService = class SpeechRecognitionService {
         this.recognition.maxAlternatives = 1;
         this.localeService.getLocale().subscribe(locale => this.recognition.lang = locale);
     }
+    get hasMicrophoneAccess() {
+        return new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
+            const permission = yield navigator.permissions.query({ name: 'microphone' });
+            if (permission.state === 'denied') {
+                resolve(false);
+            }
+            else if (permission.state === 'granted') {
+                resolve(true);
+            }
+            else if (permission.state === 'prompt') {
+                try {
+                    navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
+                        stream.getTracks().forEach(t => t.stop());
+                    }).catch(() => {
+                        resolve(false);
+                    });
+                    permission.onchange = () => {
+                        this.ngZone.run(() => {
+                            resolve(permission.state === 'granted' ? true : false);
+                        });
+                    };
+                }
+                catch (error) {
+                    resolve(false);
+                }
+            }
+        }));
+    }
 };
 SpeechRecognitionService.ctorParameters = () => [
     { type: LocaleService },
@@ -12645,17 +12664,6 @@ let TextAreaComponent = TextAreaComponent_1 = class TextAreaComponent {
             this.cdr.detectChanges();
         });
     }
-    get placeholder() {
-        return this._placeholder;
-    }
-    set placeholder(value) {
-        if (value) {
-            this._placeholder = value;
-        }
-        else {
-            this._placeholder = '';
-        }
-    }
     get inputStyle() {
         return this._inputStyle;
     }
@@ -12716,7 +12724,7 @@ __decorate([
 ], TextAreaComponent.prototype, "maxLength", void 0);
 __decorate([
     Input()
-], TextAreaComponent.prototype, "placeholder", null);
+], TextAreaComponent.prototype, "placeholder", void 0);
 __decorate([
     Input()
 ], TextAreaComponent.prototype, "inputStyle", null);
@@ -12726,7 +12734,7 @@ __decorate([
 TextAreaComponent = TextAreaComponent_1 = __decorate([
     Component({
         selector: 's-textarea',
-        template: "<textarea\n    *ngIf=\"keyFilter\"\n    #textArea\n    class=\"textarea\"\n    [pKeyFilter]=\"keyFilter\"\n    [id]=\"inputId\"\n    [rows]=\"rows\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [ngStyle]=\"inputStyle\"\n    [readOnly]=\"readOnly\"\n    [placeholder]=\"placeholder\"\n    [maxlength]=\"maxLength\"\n    (ngModelChange)=\"setValue($event)\">\n</textarea>\n\n<textarea\n    *ngIf=\"!keyFilter\"\n    #textArea\n    class=\"textarea\"\n    [id]=\"inputId\"\n    [rows]=\"rows\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [ngStyle]=\"inputStyle\"\n    [readOnly]=\"readOnly\"\n    [placeholder]=\"placeholder\"\n    [maxlength]=\"maxLength\"\n    (ngModelChange)=\"setValue($event)\">\n</textarea>\n\n<s-speech-recognition\n        *ngIf=\"speechRecognition && renderTextArea\"\n        [textAreaElement]=\"textAreaElement.nativeElement\"\n        [keepContext]=\"keepContext\"\n        [speechRecognitionPlaceholder]=\"speechRecognitionPlaceholder\"\n        (recognizedText)=\"handleRecognizedText($event)\">\n</s-speech-recognition>\n",
+        template: "<textarea\n    *ngIf=\"keyFilter\"\n    #textArea\n    class=\"textarea\"\n    [pKeyFilter]=\"keyFilter\"\n    [id]=\"inputId\"\n    [rows]=\"rows\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [ngStyle]=\"inputStyle\"\n    [readOnly]=\"readOnly\"\n    [placeholder]=\"placeholder ? placeholder : ''\"\n    [maxlength]=\"maxLength\"\n    (ngModelChange)=\"setValue($event)\">\n</textarea>\n\n<textarea\n    *ngIf=\"!keyFilter\"\n    #textArea\n    class=\"textarea\"\n    [id]=\"inputId\"\n    [rows]=\"rows\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [ngStyle]=\"inputStyle\"\n    [readOnly]=\"readOnly\"\n    [placeholder]=\"placeholder ? placeholder : ''\"\n    [maxlength]=\"maxLength\"\n    (ngModelChange)=\"setValue($event)\">\n</textarea>\n\n<s-speech-recognition\n        *ngIf=\"speechRecognition && renderTextArea\"\n        [textAreaElement]=\"textAreaElement.nativeElement\"\n        [keepContext]=\"keepContext\"\n        [speechRecognitionPlaceholder]=\"speechRecognitionPlaceholder\"\n        (recognizedText)=\"handleRecognizedText($event)\">\n</s-speech-recognition>\n",
         providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -12816,7 +12824,8 @@ TextToSpeechService = __decorate([
     })
 ], TextToSpeechService);
 
-let SpeechRecognitionComponent = class SpeechRecognitionComponent {
+var SpeechRecognitionComponent_1;
+let SpeechRecognitionComponent = SpeechRecognitionComponent_1 = class SpeechRecognitionComponent {
     constructor(speechRecognitionService, textToSpeechService, translateService) {
         this.speechRecognitionService = speechRecognitionService;
         this.textToSpeechService = textToSpeechService;
@@ -12825,7 +12834,7 @@ let SpeechRecognitionComponent = class SpeechRecognitionComponent {
         this.speechRecognitionPlaceholder = '';
         this._recognizedText = '';
         this.originalTextAreaElementText = '';
-        this.isDoneSpeaking = false;
+        this.isDoneTextToSpeech = false;
         this.onDestroy$ = new Subject();
         this.VOICE_SPEEDS = [0.5, 1, 1.5, 2];
         this.keydownEventListener = (event) => {
@@ -12834,7 +12843,7 @@ let SpeechRecognitionComponent = class SpeechRecognitionComponent {
             }
         };
         this.disabled = false;
-        this.isSpeaking = false;
+        this.isListeningUserVoice = false;
         this.voiceSpeed = 1;
         this.isDisabledMicrophone = false;
         this.canRenderMicrophone = true;
@@ -12855,6 +12864,11 @@ let SpeechRecognitionComponent = class SpeechRecognitionComponent {
         }
         this.textAreaElement.placeholder = this.speechRecognitionPlaceholder ? this.speechRecognitionPlaceholder : this.translateService.instant("platform.angular_components.text_area_speech_recognition_placeholder");
         this.textAreaElement.addEventListener('keydown', this.keydownEventListener);
+        this.speechRecognitionService.microphoneStatus$.pipe(takeUntil(this.onDestroy$)).subscribe((status) => {
+            if (status === 'active') {
+                this.onCloseToolbar();
+            }
+        });
     }
     onListen() {
         if (this.isDisabledMicrophone || this.isListening) {
@@ -12865,7 +12879,7 @@ let SpeechRecognitionComponent = class SpeechRecognitionComponent {
         this.canRenderListeningText = true;
         this.originalTextAreaElementText = this.textAreaElement.value;
         this.textAreaElement.value = '';
-        this.isSpeaking = true;
+        this.isListeningUserVoice = true;
         this.speechRecognitionService.listen()
             .pipe(takeUntil(this.onDestroy$))
             .subscribe(({ text, isFinal }) => {
@@ -12876,10 +12890,10 @@ let SpeechRecognitionComponent = class SpeechRecognitionComponent {
                 this.canRenderAprove = true;
                 this.canRenderDiscard = true;
                 this.canRenderListeningText = false;
-                this.isSpeaking = false;
+                this.isListeningUserVoice = false;
             }
         }, () => {
-            this.isSpeaking = false;
+            this.isListeningUserVoice = false;
             this.canRenderMicrophone = true;
             this.isDisabledMicrophone = false;
             this.canRenderListeningText = false;
@@ -12897,15 +12911,15 @@ let SpeechRecognitionComponent = class SpeechRecognitionComponent {
         }
         this.canRenderTextToSpeechToolbar = true;
         this.canRenderTextToSpeech = false;
-        this.isPlayingTextToSpeech = true;
+        SpeechRecognitionComponent_1.TOOLBAR_ACTIVE = true;
         this.speak();
     }
     onCloseToolbar() {
         this.canRenderTextToSpeechToolbar = false;
         this.canRenderTextToSpeech = true;
-        this.isPlayingTextToSpeech = false;
-        this.textToSpeechService.cancel();
+        this.stopTextToSpeech();
         this.voiceSpeed = 1;
+        SpeechRecognitionComponent_1.TOOLBAR_ACTIVE = false;
     }
     onDiscard() {
         this.canRenderAprove = false;
@@ -12916,7 +12930,8 @@ let SpeechRecognitionComponent = class SpeechRecognitionComponent {
         this._recognizedText = '';
         this.setTextAreaValue(this.originalTextAreaElementText);
         this.disabled = false;
-        this.textToSpeechService.cancel();
+        this.stopTextToSpeech();
+        SpeechRecognitionComponent_1.TOOLBAR_ACTIVE = false;
     }
     onAprove() {
         this.canRenderAprove = false;
@@ -12946,7 +12961,7 @@ let SpeechRecognitionComponent = class SpeechRecognitionComponent {
             this.textToSpeechService.pause();
         }
         else {
-            if (this.isDoneSpeaking) {
+            if (this.isDoneTextToSpeech) {
                 this.speak();
             }
             else {
@@ -12956,7 +12971,6 @@ let SpeechRecognitionComponent = class SpeechRecognitionComponent {
         this.isPlayingTextToSpeech = !this.isPlayingTextToSpeech;
     }
     restartTextToSpeech() {
-        this.isPlayingTextToSpeech = true;
         this.textToSpeechService.cancel();
         this.speak();
     }
@@ -12978,19 +12992,28 @@ let SpeechRecognitionComponent = class SpeechRecognitionComponent {
     }
     get isDisabledTextToSpeech() {
         const hasTextToSpeechVoice = this.textToSpeechService.hasVoice;
-        return !this._recognizedText || !hasTextToSpeechVoice || this.isListening;
+        return !this.textToSpeech || !hasTextToSpeechVoice || this.isListening || SpeechRecognitionComponent_1.TOOLBAR_ACTIVE;
     }
     setTextAreaValue(value) {
         this.textAreaElement.value = value;
     }
+    stopTextToSpeech() {
+        this.isPlayingTextToSpeech = false;
+        this.textToSpeechService.cancel();
+    }
     speak() {
-        this.isDoneSpeaking = false;
-        this.textToSpeechService.speak(this._recognizedText, this.voiceSpeed).then(() => {
+        this.isDoneTextToSpeech = false;
+        this.isPlayingTextToSpeech = true;
+        this.textToSpeechService.speak(this.textToSpeech, this.voiceSpeed).then(() => {
             this.isPlayingTextToSpeech = false;
-            this.isDoneSpeaking = true;
+            this.isDoneTextToSpeech = true;
         });
     }
+    get textToSpeech() {
+        return this.textAreaElement.value;
+    }
 };
+SpeechRecognitionComponent.TOOLBAR_ACTIVE = false;
 SpeechRecognitionComponent.ctorParameters = () => [
     { type: SpeechRecognitionService },
     { type: TextToSpeechService },
@@ -13008,11 +13031,11 @@ __decorate([
 __decorate([
     Output()
 ], SpeechRecognitionComponent.prototype, "recognizedText", void 0);
-SpeechRecognitionComponent = __decorate([
+SpeechRecognitionComponent = SpeechRecognitionComponent_1 = __decorate([
     Component({
         selector: 's-speech-recognition',
-        template: "<section class=\"speech-recognition\" *ngIf=\"hasSpeechRecognitionBrowserApi\">\n    <div class=\"speech-recognition-text\">\n        <ng-container *ngIf=\"canRenderMicrophone\">\n            {{ 'platform.angular_components.text_area_before_speech' | translate }}\n        </ng-container>\n\n        <ng-container *ngIf=\"isSpeaking\">\n            {{ 'platform.angular_components.text_area_while_speech' | translate }}\n        </ng-container>\n\n        <ng-container *ngIf=\"canRenderAprove && canRenderDiscard\">\n            {{ 'platform.angular_components.text_area_end_speech' | translate }}\n        </ng-container>\n    </div>\n    <div class=\"speech-recognition-buttons\">\n        <span\n            *ngIf=\"canRenderListeningText\"\n            (click)=\"stopListening()\"\n            class=\"speech-recognition-item speech-recognition-item-regular\">\n            <i class=\"far fa-ellipsis-h\"></i>\n        </span>\n\n        <span\n            *ngIf=\"canRenderMicrophone\"\n            (click)=\"onListen()\"\n            class=\"speech-recognition-item speech-recognition-item-microphone\"\n            [class.speech-recognition-item-disabled]=\"isDisabledMicrophone || isListening || disabled\">\n            <i class=\"fas fa-microphone\"></i>\n        </span>\n\n        <span\n            *ngIf=\"canRenderAprove\"\n            (click)=\"onAprove()\"\n            class=\"speech-recognition-item speech-recognition-item-aprove\">\n            <i class=\"fas fa-check\"></i>\n        </span>\n\n        <span *ngIf=\"canRenderDiscard\"\n            (click)=\"onDiscard()\"\n            class=\"speech-recognition-item speech-recognition-item-discard\">\n            <i class=\"fas fa-times\"></i>\n        </span>\n\n        <span\n            *ngIf=\"canRenderTextToSpeech\"\n            (click)=\"onOpenToolbar()\"\n            class=\"speech-recognition-item speech-recognition-item-regular\"\n            [class.speech-recognition-item-disabled]=\"isDisabledTextToSpeech\">\n            <i class=\"fas fa-volume-down\"></i>\n        </span>\n\n        <span\n            *ngIf=\"canRenderTextToSpeechToolbar\"\n            class=\"speech-recognition-item-toolbar\">\n             <i class=\"fas\" [class.fa-pause]=\"isPlayingTextToSpeech\" [class.fa-play]=\"!isPlayingTextToSpeech\"\n             (click)=\"toggleTextToSpeech()\"></i>\n                <i class=\"fas fa-backward\" (click)=\"restartTextToSpeech()\"></i>\n                <span (click)=\"updateVoiceSpeed()\">\n                    {{ voiceSpeed }}x\n                </span>\n                <i class=\"fas fa-times\" (click)=\"onCloseToolbar()\"></i>\n        </span>\n    </div>\n</section>\n",
-        styles: [".speech-recognition{display:-ms-flexbox;display:flex;gap:10px;-ms-flex-pack:justify;justify-content:space-between;width:100%}.speech-recognition-buttons{display:-ms-flexbox;display:flex;gap:10px;position:relative;bottom:15px;margin-right:16px}.speech-recognition-item{display:-ms-inline-flexbox;display:inline-flex;height:25px;padding:4px 12px;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;gap:8px;border-radius:15px;cursor:pointer;transition:background .1s ease-in}.speech-recognition-item i,.speech-recognition-item span{color:#fff}.speech-recognition-item-disabled{cursor:default!important}.speech-recognition-item-disabled *{opacity:.5}.speech-recognition-item-microphone{background:#428bca}.speech-recognition-item-microphone:not(.speech-recognition-item-disabled):hover{background:#063951}.speech-recognition-item-regular{background:#7892a1}.speech-recognition-item-regular:not(.speech-recognition-item-disabled):hover{background:#697882}.speech-recognition-item-aprove{background:#0c9348}.speech-recognition-item-aprove:not(.speech-recognition-item-disabled):hover{background:#063951}.speech-recognition-item-discard{background:#c13018}.speech-recognition-item-discard:not(.speech-recognition-item-disabled):hover{background:#063951}.speech-recognition-item-toolbar{background:#7892a1;display:-ms-flexbox;display:flex;border-radius:15px;-ms-flex-align:center;align-items:center;color:#fff}.speech-recognition-item-toolbar i,.speech-recognition-item-toolbar span{cursor:pointer}.speech-recognition-item-toolbar i:not(:first-child),.speech-recognition-item-toolbar i:not(:last-child){padding:6px}.speech-recognition-item-toolbar i:first-child{padding-left:10px}.speech-recognition-item-toolbar i:last-child{padding-right:10px}.speech-recognition-item-toolbar span{height:25px}.speech-recognition-text{color:#212533;font-size:12px;font-style:normal;font-weight:400;word-break:break-word}"]
+        template: "<section class=\"speech-recognition\" *ngIf=\"hasSpeechRecognitionBrowserApi\">\n    <div class=\"speech-recognition-text\">\n        <ng-container *ngIf=\"canRenderMicrophone\">\n            {{ 'platform.angular_components.text_area_before_speech' | translate }}\n        </ng-container>\n\n        <ng-container *ngIf=\"isListeningUserVoice\">\n            {{ 'platform.angular_components.text_area_while_speech' | translate }}\n        </ng-container>\n\n        <ng-container *ngIf=\"canRenderAprove && canRenderDiscard\">\n            {{ 'platform.angular_components.text_area_end_speech' | translate }}\n        </ng-container>\n    </div>\n    <div class=\"speech-recognition-buttons\">\n        <span\n            *ngIf=\"canRenderListeningText\"\n            (click)=\"stopListening()\"\n            class=\"speech-recognition-item speech-recognition-item-regular\">\n            <i class=\"far fa-ellipsis-h\"></i>\n        </span>\n\n        <span\n            *ngIf=\"canRenderMicrophone\"\n            (click)=\"onListen()\"\n            class=\"speech-recognition-item speech-recognition-item-microphone\"\n            [class.speech-recognition-item-disabled]=\"isDisabledMicrophone || isListening || disabled\">\n            <i class=\"fas fa-microphone\"></i>\n        </span>\n\n        <span\n            *ngIf=\"canRenderAprove\"\n            (click)=\"onAprove()\"\n            class=\"speech-recognition-item speech-recognition-item-aprove\">\n            <i class=\"fas fa-check\"></i>\n        </span>\n\n        <span *ngIf=\"canRenderDiscard\"\n            (click)=\"onDiscard()\"\n            class=\"speech-recognition-item speech-recognition-item-discard\">\n            <i class=\"fas fa-times\"></i>\n        </span>\n\n        <span\n            *ngIf=\"canRenderTextToSpeech\"\n            (click)=\"onOpenToolbar()\"\n            class=\"speech-recognition-item speech-recognition-item-regular\"\n            [class.speech-recognition-item-disabled]=\"isDisabledTextToSpeech\">\n            <i class=\"fas fa-volume-down\"></i>\n        </span>\n\n        <span\n            *ngIf=\"canRenderTextToSpeechToolbar\"\n            class=\"speech-recognition-item-toolbar\">\n             <i class=\"fas\" [class.fa-pause]=\"isPlayingTextToSpeech\" [class.fa-play]=\"!isPlayingTextToSpeech\"\n             (click)=\"toggleTextToSpeech()\"></i>\n                <i class=\"fas fa-backward\" (click)=\"restartTextToSpeech()\"></i>\n                <span (click)=\"updateVoiceSpeed()\">\n                    {{ voiceSpeed }}x\n                </span>\n                <i class=\"fas fa-times\" (click)=\"onCloseToolbar()\"></i>\n        </span>\n    </div>\n</section>\n",
+        styles: [".speech-recognition{display:-ms-flexbox;display:flex;gap:10px;-ms-flex-pack:justify;justify-content:space-between;width:100%}.speech-recognition-buttons{display:-ms-flexbox;display:flex;gap:10px;position:relative;bottom:15px;margin-right:16px}.speech-recognition-item{display:-ms-inline-flexbox;display:inline-flex;height:25px;padding:4px 12px;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;gap:8px;border-radius:15px;cursor:pointer;transition:background .1s ease-in}.speech-recognition-item i,.speech-recognition-item span{color:#fff}.speech-recognition-item-disabled{cursor:default!important}.speech-recognition-item-disabled *{opacity:.5}.speech-recognition-item-microphone{background:#428bca}.speech-recognition-item-microphone:not(.speech-recognition-item-disabled):hover{background:#063951}.speech-recognition-item-regular{background:#7892a1}.speech-recognition-item-regular:not(.speech-recognition-item-disabled):hover{background:#697882}.speech-recognition-item-aprove{background:#0c9348}.speech-recognition-item-aprove:not(.speech-recognition-item-disabled):hover{background:#063951}.speech-recognition-item-discard{background:#c13018}.speech-recognition-item-discard:not(.speech-recognition-item-disabled):hover{background:#063951}.speech-recognition-item-toolbar{background:#7892a1;display:-ms-flexbox;display:flex;border-radius:15px;-ms-flex-align:center;align-items:center;color:#fff;height:25px}.speech-recognition-item-toolbar i,.speech-recognition-item-toolbar span{cursor:pointer}.speech-recognition-item-toolbar i:not(:first-child),.speech-recognition-item-toolbar i:not(:last-child){padding:6px}.speech-recognition-item-toolbar i:first-child{padding-left:10px}.speech-recognition-item-toolbar i:last-child{padding-right:10px}.speech-recognition-text{color:#212533;font-size:12px;font-style:normal;font-weight:400;word-break:break-word}"]
     })
 ], SpeechRecognitionComponent);