@seniorsistemas/angular-components 17.26.9-bugfix-sds-307-c6084396 → 17.26.9-bugfix-sds-309-85a29221

package/bundles/seniorsistemas-angular-components.umd.js

@@ -534,7 +534,7 @@
         TooltipComponent = __decorate([
             core.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;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)}"]
+                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)}"]
             })
         ], TooltipComponent);
         return TooltipComponent;
@@ -11504,9 +11504,8 @@
             this.translateService = translateService;
             this.hasSupportSpeechRecognition = false;
             this.isListening = false;
-            this.hasMicrophoneAccess = false;
+            this.microphoneStatus$ = new rxjs.Subject();
             this.TIMEOUT_NO_MESSAGE = 3000;
-            this.verifyMicrophoneState();
             this.setRecognition();
         }
         SpeechRecognitionService.prototype.listen = function () {
@@ -11515,82 +11514,73 @@
             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.isListening = true;
-                this.recognition.continuous = true;
-                this.recognition.interimResults = true;
-                this.recognition.maxAlternatives = 1;
-                var silenceTimer_1;
-                var restartSilenceTimer_1 = function () {
-                    if (silenceTimer_1 !== undefined) {
-                        clearTimeout(silenceTimer_1);
+            this.hasMicrophoneAccess.then(function (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;
+                _this.recognition.maxAlternatives = 1;
+                var silenceTimer;
+                var restartSilenceTimer = function () {
+                    if (silenceTimer !== undefined) {
+                        clearTimeout(silenceTimer);
                     }
-                    silenceTimer_1 = setTimeout(function () {
+                    silenceTimer = setTimeout(function () {
                         _this.recognition.stop();
                     }, _this.TIMEOUT_NO_MESSAGE);
                 };
-                var fullTranscript_1 = '';
-                var interimTranscript_1 = '';
-                this.recognition.onresult = function (event) {
+                var fullTranscript = '';
+                var interimTranscript = '';
+                _this.recognition.onresult = function (event) {
                     _this.ngZone.run(function () {
-                        restartSilenceTimer_1();
+                        restartSilenceTimer();
                         var interimTranscript = '';
                         for (var i = event.resultIndex; i < event.results.length; ++i) {
                             var transcript = event.results[i][0].transcript;
                             if (event.results[i].isFinal) {
-                                fullTranscript_1 += transcript + '\n';
+                                fullTranscript += transcript + '\n';
                             }
                             else {
                                 interimTranscript += transcript;
                             }
                         }
                         interimTranscript = interimTranscript;
-                        speechSubject.next({ text: fullTranscript_1 + interimTranscript, isFinal: false });
+                        speechSubject.next({ text: fullTranscript + interimTranscript, isFinal: false });
                     });
                 };
-                this.recognition.onerror = function () {
+                _this.recognition.onerror = function () {
                     _this.ngZone.run(function () {
-                        if (silenceTimer_1 !== undefined) {
-                            clearTimeout(silenceTimer_1);
+                        if (silenceTimer !== undefined) {
+                            clearTimeout(silenceTimer);
                         }
                         _this.isListening = false;
                         speechSubject.error('Speech recognition error');
+                        _this.microphoneStatus$.next('inactive');
                     });
                 };
-                this.recognition.onend = function () {
+                _this.recognition.onend = function () {
                     _this.ngZone.run(function () {
-                        if (silenceTimer_1 !== undefined) {
-                            clearTimeout(silenceTimer_1);
+                        if (silenceTimer !== undefined) {
+                            clearTimeout(silenceTimer);
                         }
-                        speechSubject.next({ text: fullTranscript_1 + interimTranscript_1, isFinal: true });
+                        speechSubject.next({ text: fullTranscript + interimTranscript, isFinal: true });
                         _this.isListening = false;
                         speechSubject.complete();
+                        _this.microphoneStatus$.next('inactive');
                     });
                 };
-                this.recognition.start();
-            }
+                _this.recognition.start();
+            });
             return speechSubject;
         };
         SpeechRecognitionService.prototype.stop = function () {
             this.recognition.stop();
         };
-        SpeechRecognitionService.prototype.verifyMicrophoneState = function () {
-            var _this = this;
-            navigator.permissions.query({ name: 'microphone' }).then(function (result) {
-                var microphoneResultState = result.state;
-                _this.hasMicrophoneAccess = microphoneResultState === 'granted';
-                result.onchange = function () {
-                    _this.ngZone.run(function () {
-                        _this.hasMicrophoneAccess = result.state === 'granted';
-                    });
-                };
-            });
-        };
         SpeechRecognitionService.prototype.setRecognition = function () {
             var _this = this;
             var _a;
@@ -11606,6 +11596,48 @@
             this.recognition.maxAlternatives = 1;
             this.localeService.getLocale().subscribe(function (locale) { return _this.recognition.lang = locale; });
         };
+        Object.defineProperty(SpeechRecognitionService.prototype, "hasMicrophoneAccess", {
+            get: function () {
+                var _this = this;
+                return new Promise(function (resolve) { return __awaiter(_this, void 0, void 0, function () {
+                    var permission;
+                    var _this = this;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0: return [4 /*yield*/, navigator.permissions.query({ name: 'microphone' })];
+                            case 1:
+                                permission = _a.sent();
+                                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(function (stream) {
+                                            stream.getTracks().forEach(function (t) { return t.stop(); });
+                                        }).catch(function () {
+                                            resolve(false);
+                                        });
+                                        permission.onchange = function () {
+                                            _this.ngZone.run(function () {
+                                                resolve(permission.state === 'granted' ? true : false);
+                                            });
+                                        };
+                                    }
+                                    catch (error) {
+                                        resolve(false);
+                                    }
+                                }
+                                return [2 /*return*/];
+                        }
+                    });
+                }); });
+            },
+            enumerable: true,
+            configurable: true
+        });
         SpeechRecognitionService.ctorParameters = function () { return [
             { type: LocaleService },
             { type: core.NgZone },
@@ -13623,21 +13655,6 @@
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(TextAreaComponent.prototype, "placeholder", {
-            get: function () {
-                return this._placeholder;
-            },
-            set: function (value) {
-                if (value) {
-                    this._placeholder = value;
-                }
-                else {
-                    this._placeholder = '';
-                }
-            },
-            enumerable: true,
-            configurable: true
-        });
         Object.defineProperty(TextAreaComponent.prototype, "inputStyle", {
             get: function () {
                 return this._inputStyle;
@@ -13702,7 +13719,7 @@
         ], TextAreaComponent.prototype, "maxLength", void 0);
         __decorate([
             core.Input()
-        ], TextAreaComponent.prototype, "placeholder", null);
+        ], TextAreaComponent.prototype, "placeholder", void 0);
         __decorate([
             core.Input()
         ], TextAreaComponent.prototype, "inputStyle", null);
@@ -13712,7 +13729,7 @@
         TextAreaComponent = TextAreaComponent_1 = __decorate([
             core.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: forms.NG_VALUE_ACCESSOR,
@@ -13822,7 +13839,7 @@
             this.speechRecognitionPlaceholder = '';
             this._recognizedText = '';
             this.originalTextAreaElementText = '';
-            this.isDoneSpeaking = false;
+            this.isDoneTextToSpeech = false;
             this.onDestroy$ = new rxjs.Subject();
             this.VOICE_SPEEDS = [0.5, 1, 1.5, 2];
             this.keydownEventListener = function (event) {
@@ -13831,7 +13848,7 @@
                 }
             };
             this.disabled = false;
-            this.isSpeaking = false;
+            this.isListeningUserVoice = false;
             this.voiceSpeed = 1;
             this.isDisabledMicrophone = false;
             this.canRenderMicrophone = true;
@@ -13843,7 +13860,9 @@
             this.isPlayingTextToSpeech = false;
             this.recognizedText = new core.EventEmitter();
         }
+        SpeechRecognitionComponent_1 = SpeechRecognitionComponent;
         SpeechRecognitionComponent.prototype.ngOnInit = function () {
+            var _this = this;
             if (!this.hasSpeechRecognitionBrowserApi) {
                 return;
             }
@@ -13852,18 +13871,26 @@
             }
             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(operators.takeUntil(this.onDestroy$)).subscribe(function (status) {
+                if (status === 'active') {
+                    _this.onCloseToolbar();
+                }
+            });
         };
         SpeechRecognitionComponent.prototype.onListen = function () {
             var _this = this;
             if (this.isDisabledMicrophone || this.isListening) {
                 return;
             }
+            // if (this.isPlayingTextToSpeech) {
+            //   this.onCloseToolbar();
+            // }
             this.disabled = true;
             this.canRenderMicrophone = false;
             this.canRenderListeningText = true;
             this.originalTextAreaElementText = this.textAreaElement.value;
             this.textAreaElement.value = '';
-            this.isSpeaking = true;
+            this.isListeningUserVoice = true;
             this.speechRecognitionService.listen()
                 .pipe(operators.takeUntil(this.onDestroy$))
                 .subscribe(function (_a) {
@@ -13875,10 +13902,10 @@
                     _this.canRenderAprove = true;
                     _this.canRenderDiscard = true;
                     _this.canRenderListeningText = false;
-                    _this.isSpeaking = false;
+                    _this.isListeningUserVoice = false;
                 }
             }, function () {
-                _this.isSpeaking = false;
+                _this.isListeningUserVoice = false;
                 _this.canRenderMicrophone = true;
                 _this.isDisabledMicrophone = false;
                 _this.canRenderListeningText = false;
@@ -13897,15 +13924,15 @@
             }
             this.canRenderTextToSpeechToolbar = true;
             this.canRenderTextToSpeech = false;
-            this.isPlayingTextToSpeech = true;
+            SpeechRecognitionComponent_1.TOOLBAR_ACTIVE = true;
             this.speak();
         };
         SpeechRecognitionComponent.prototype.onCloseToolbar = function () {
             this.canRenderTextToSpeechToolbar = false;
             this.canRenderTextToSpeech = true;
-            this.isPlayingTextToSpeech = false;
-            this.textToSpeechService.cancel();
+            this.stopTextToSpeech();
             this.voiceSpeed = 1;
+            SpeechRecognitionComponent_1.TOOLBAR_ACTIVE = false;
         };
         SpeechRecognitionComponent.prototype.onDiscard = function () {
             this.canRenderAprove = false;
@@ -13916,7 +13943,8 @@
             this._recognizedText = '';
             this.setTextAreaValue(this.originalTextAreaElementText);
             this.disabled = false;
-            this.textToSpeechService.cancel();
+            this.stopTextToSpeech();
+            SpeechRecognitionComponent_1.TOOLBAR_ACTIVE = false;
         };
         SpeechRecognitionComponent.prototype.onAprove = function () {
             this.canRenderAprove = false;
@@ -13946,7 +13974,7 @@
                 this.textToSpeechService.pause();
             }
             else {
-                if (this.isDoneSpeaking) {
+                if (this.isDoneTextToSpeech) {
                     this.speak();
                 }
                 else {
@@ -13956,7 +13984,6 @@
             this.isPlayingTextToSpeech = !this.isPlayingTextToSpeech;
         };
         SpeechRecognitionComponent.prototype.restartTextToSpeech = function () {
-            this.isPlayingTextToSpeech = true;
             this.textToSpeechService.cancel();
             this.speak();
         };
@@ -13987,7 +14014,7 @@
         Object.defineProperty(SpeechRecognitionComponent.prototype, "isDisabledTextToSpeech", {
             get: function () {
                 var hasTextToSpeechVoice = this.textToSpeechService.hasVoice;
-                return !this._recognizedText || !hasTextToSpeechVoice || this.isListening;
+                return !this.textToSpeech || !hasTextToSpeechVoice || this.isListening || SpeechRecognitionComponent_1.TOOLBAR_ACTIVE;
             },
             enumerable: true,
             configurable: true
@@ -13995,14 +14022,28 @@
         SpeechRecognitionComponent.prototype.setTextAreaValue = function (value) {
             this.textAreaElement.value = value;
         };
+        SpeechRecognitionComponent.prototype.stopTextToSpeech = function () {
+            this.isPlayingTextToSpeech = false;
+            this.textToSpeechService.cancel();
+        };
         SpeechRecognitionComponent.prototype.speak = function () {
             var _this = this;
-            this.isDoneSpeaking = false;
-            this.textToSpeechService.speak(this._recognizedText, this.voiceSpeed).then(function () {
+            this.isDoneTextToSpeech = false;
+            this.isPlayingTextToSpeech = true;
+            this.textToSpeechService.speak(this.textToSpeech, this.voiceSpeed).then(function () {
                 _this.isPlayingTextToSpeech = false;
-                _this.isDoneSpeaking = true;
+                _this.isDoneTextToSpeech = true;
             });
         };
+        Object.defineProperty(SpeechRecognitionComponent.prototype, "textToSpeech", {
+            get: function () {
+                return this.textAreaElement.value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        var SpeechRecognitionComponent_1;
+        SpeechRecognitionComponent.TOOLBAR_ACTIVE = false;
         SpeechRecognitionComponent.ctorParameters = function () { return [
             { type: SpeechRecognitionService },
             { type: TextToSpeechService },
@@ -14020,11 +14061,11 @@
         __decorate([
             core.Output()
         ], SpeechRecognitionComponent.prototype, "recognizedText", void 0);
-        SpeechRecognitionComponent = __decorate([
+        SpeechRecognitionComponent = SpeechRecognitionComponent_1 = __decorate([
             core.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);
         return SpeechRecognitionComponent;