@seniorsistemas/angular-components 17.26.9-bugfix-sds-309-85a29221 → 17.26.9-bugfix-sds-305-deb2a383

package/fesm5/seniorsistemas-angular-components.js

@@ -1,5 +1,5 @@
-import { __decorate, __assign, __extends, __read, __spread, __awaiter, __generator, __param, __values, __rest } from 'tslib';
-import { EventEmitter, Input, Output, Component, ContentChildren, ViewChild, HostListener, forwardRef, NgModule, ɵɵdefineInjectable, Injectable, ElementRef, ApplicationRef, ComponentFactoryResolver, Injector, Renderer2, Directive, TemplateRef, ViewContainerRef, Pipe, ɵɵinject, HostBinding, ChangeDetectorRef, ViewChildren, InjectionToken, Inject, PLATFORM_ID, KeyValueDiffers, ViewEncapsulation, INJECTOR, NgZone, ContentChild, Optional } from '@angular/core';
+import { __decorate, __assign, __extends, __read, __param, __spread, __awaiter, __generator, __values, __rest } from 'tslib';
+import { EventEmitter, Input, Output, Component, ContentChildren, ViewChild, HostListener, forwardRef, NgModule, ɵɵdefineInjectable, Injectable, ElementRef, ApplicationRef, ComponentFactoryResolver, Injector, Renderer2, Directive, TemplateRef, ViewContainerRef, Pipe, ɵɵinject, Inject, HostBinding, ChangeDetectorRef, ViewChildren, InjectionToken, PLATFORM_ID, KeyValueDiffers, ViewEncapsulation, INJECTOR, NgZone, ContentChild, Optional } from '@angular/core';
 import { trigger, transition, style as style$7, animate, state, group, query, animateChild } from '@angular/animations';
 import { Subject, of, from, ReplaySubject, throwError, fromEvent, forkJoin, pipe } from 'rxjs';
 import { takeUntil, tap, map, switchMap, catchError, first, filter, take, delay, debounceTime, repeat, finalize } from 'rxjs/operators';
@@ -1940,7 +1940,7 @@ var BignumberInputDirective = /** @class */ (function (_super) {
     var BignumberInputDirective_1;
     BignumberInputDirective.ctorParameters = function () { return [
         { type: Injector },
-        { type: LocaleService }
+        { type: LocaleService, decorators: [{ type: Inject, args: [LocaleService,] }] }
     ]; };
     __decorate([
         Input()
@@ -1986,7 +1986,8 @@ var BignumberInputDirective = /** @class */ (function (_super) {
                     multi: true,
                 },
             ],
-        })
+        }),
+        __param(1, Inject(LocaleService))
     ], BignumberInputDirective);
     return BignumberInputDirective;
 }(CurrencyMaskDirective));
@@ -11359,8 +11360,9 @@ var SpeechRecognitionService = /** @class */ (function () {
         this.translateService = translateService;
         this.hasSupportSpeechRecognition = false;
         this.isListening = false;
-        this.microphoneStatus$ = new Subject();
+        this.hasMicrophoneAccess = false;
         this.TIMEOUT_NO_MESSAGE = 3000;
+        this.verifyMicrophoneState();
         this.setRecognition();
     }
     SpeechRecognitionService.prototype.listen = function () {
@@ -11369,73 +11371,82 @@ var SpeechRecognitionService = /** @class */ (function () {
         if (this.isListening) {
             speechSubject.error('Already listening');
         }
-        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);
+        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);
                 }
-                silenceTimer = setTimeout(function () {
+                silenceTimer_1 = setTimeout(function () {
                     _this.recognition.stop();
                 }, _this.TIMEOUT_NO_MESSAGE);
             };
-            var fullTranscript = '';
-            var interimTranscript = '';
-            _this.recognition.onresult = function (event) {
+            var fullTranscript_1 = '';
+            var interimTranscript_1 = '';
+            this.recognition.onresult = function (event) {
                 _this.ngZone.run(function () {
-                    restartSilenceTimer();
+                    restartSilenceTimer_1();
                     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 += transcript + '\n';
+                            fullTranscript_1 += transcript + '\n';
                         }
                         else {
                             interimTranscript += transcript;
                         }
                     }
                     interimTranscript = interimTranscript;
-                    speechSubject.next({ text: fullTranscript + interimTranscript, isFinal: false });
+                    speechSubject.next({ text: fullTranscript_1 + interimTranscript, isFinal: false });
                 });
             };
-            _this.recognition.onerror = function () {
+            this.recognition.onerror = function () {
                 _this.ngZone.run(function () {
-                    if (silenceTimer !== undefined) {
-                        clearTimeout(silenceTimer);
+                    if (silenceTimer_1 !== undefined) {
+                        clearTimeout(silenceTimer_1);
                     }
                     _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 !== undefined) {
-                        clearTimeout(silenceTimer);
+                    if (silenceTimer_1 !== undefined) {
+                        clearTimeout(silenceTimer_1);
                     }
-                    speechSubject.next({ text: fullTranscript + interimTranscript, isFinal: true });
+                    speechSubject.next({ text: fullTranscript_1 + interimTranscript_1, 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;
@@ -11451,48 +11462,6 @@ var SpeechRecognitionService = /** @class */ (function () {
         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: NgZone },
@@ -13510,6 +13479,21 @@ var TextAreaComponent = /** @class */ (function () {
         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;
@@ -13574,7 +13558,7 @@ var TextAreaComponent = /** @class */ (function () {
     ], TextAreaComponent.prototype, "maxLength", void 0);
     __decorate([
         Input()
-    ], TextAreaComponent.prototype, "placeholder", void 0);
+    ], TextAreaComponent.prototype, "placeholder", null);
     __decorate([
         Input()
     ], TextAreaComponent.prototype, "inputStyle", null);
@@ -13584,7 +13568,7 @@ var TextAreaComponent = /** @class */ (function () {
     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 ? 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",
+            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",
             providers: [
                 {
                     provide: NG_VALUE_ACCESSOR,
@@ -13694,7 +13678,7 @@ var SpeechRecognitionComponent = /** @class */ (function () {
         this.speechRecognitionPlaceholder = '';
         this._recognizedText = '';
         this.originalTextAreaElementText = '';
-        this.isDoneTextToSpeech = false;
+        this.isDoneSpeaking = false;
         this.onDestroy$ = new Subject();
         this.VOICE_SPEEDS = [0.5, 1, 1.5, 2];
         this.keydownEventListener = function (event) {
@@ -13703,7 +13687,7 @@ var SpeechRecognitionComponent = /** @class */ (function () {
             }
         };
         this.disabled = false;
-        this.isListeningUserVoice = false;
+        this.isSpeaking = false;
         this.voiceSpeed = 1;
         this.isDisabledMicrophone = false;
         this.canRenderMicrophone = true;
@@ -13715,9 +13699,7 @@ var SpeechRecognitionComponent = /** @class */ (function () {
         this.isPlayingTextToSpeech = false;
         this.recognizedText = new EventEmitter();
     }
-    SpeechRecognitionComponent_1 = SpeechRecognitionComponent;
     SpeechRecognitionComponent.prototype.ngOnInit = function () {
-        var _this = this;
         if (!this.hasSpeechRecognitionBrowserApi) {
             return;
         }
@@ -13726,26 +13708,18 @@ var SpeechRecognitionComponent = /** @class */ (function () {
         }
         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(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.isListeningUserVoice = true;
+        this.isSpeaking = true;
         this.speechRecognitionService.listen()
             .pipe(takeUntil(this.onDestroy$))
             .subscribe(function (_a) {
@@ -13757,10 +13731,10 @@ var SpeechRecognitionComponent = /** @class */ (function () {
                 _this.canRenderAprove = true;
                 _this.canRenderDiscard = true;
                 _this.canRenderListeningText = false;
-                _this.isListeningUserVoice = false;
+                _this.isSpeaking = false;
             }
         }, function () {
-            _this.isListeningUserVoice = false;
+            _this.isSpeaking = false;
             _this.canRenderMicrophone = true;
             _this.isDisabledMicrophone = false;
             _this.canRenderListeningText = false;
@@ -13779,15 +13753,15 @@ var SpeechRecognitionComponent = /** @class */ (function () {
         }
         this.canRenderTextToSpeechToolbar = true;
         this.canRenderTextToSpeech = false;
-        SpeechRecognitionComponent_1.TOOLBAR_ACTIVE = true;
+        this.isPlayingTextToSpeech = true;
         this.speak();
     };
     SpeechRecognitionComponent.prototype.onCloseToolbar = function () {
         this.canRenderTextToSpeechToolbar = false;
         this.canRenderTextToSpeech = true;
-        this.stopTextToSpeech();
+        this.isPlayingTextToSpeech = false;
+        this.textToSpeechService.cancel();
         this.voiceSpeed = 1;
-        SpeechRecognitionComponent_1.TOOLBAR_ACTIVE = false;
     };
     SpeechRecognitionComponent.prototype.onDiscard = function () {
         this.canRenderAprove = false;
@@ -13798,8 +13772,7 @@ var SpeechRecognitionComponent = /** @class */ (function () {
         this._recognizedText = '';
         this.setTextAreaValue(this.originalTextAreaElementText);
         this.disabled = false;
-        this.stopTextToSpeech();
-        SpeechRecognitionComponent_1.TOOLBAR_ACTIVE = false;
+        this.textToSpeechService.cancel();
     };
     SpeechRecognitionComponent.prototype.onAprove = function () {
         this.canRenderAprove = false;
@@ -13829,7 +13802,7 @@ var SpeechRecognitionComponent = /** @class */ (function () {
             this.textToSpeechService.pause();
         }
         else {
-            if (this.isDoneTextToSpeech) {
+            if (this.isDoneSpeaking) {
                 this.speak();
             }
             else {
@@ -13839,6 +13812,7 @@ var SpeechRecognitionComponent = /** @class */ (function () {
         this.isPlayingTextToSpeech = !this.isPlayingTextToSpeech;
     };
     SpeechRecognitionComponent.prototype.restartTextToSpeech = function () {
+        this.isPlayingTextToSpeech = true;
         this.textToSpeechService.cancel();
         this.speak();
     };
@@ -13869,7 +13843,7 @@ var SpeechRecognitionComponent = /** @class */ (function () {
     Object.defineProperty(SpeechRecognitionComponent.prototype, "isDisabledTextToSpeech", {
         get: function () {
             var hasTextToSpeechVoice = this.textToSpeechService.hasVoice;
-            return !this.textToSpeech || !hasTextToSpeechVoice || this.isListening || SpeechRecognitionComponent_1.TOOLBAR_ACTIVE;
+            return !this._recognizedText || !hasTextToSpeechVoice || this.isListening;
         },
         enumerable: true,
         configurable: true
@@ -13877,28 +13851,14 @@ var SpeechRecognitionComponent = /** @class */ (function () {
     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.isDoneTextToSpeech = false;
-        this.isPlayingTextToSpeech = true;
-        this.textToSpeechService.speak(this.textToSpeech, this.voiceSpeed).then(function () {
+        this.isDoneSpeaking = false;
+        this.textToSpeechService.speak(this._recognizedText, this.voiceSpeed).then(function () {
             _this.isPlayingTextToSpeech = false;
-            _this.isDoneTextToSpeech = true;
+            _this.isDoneSpeaking = 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 },
@@ -13916,11 +13876,11 @@ var SpeechRecognitionComponent = /** @class */ (function () {
     __decorate([
         Output()
     ], SpeechRecognitionComponent.prototype, "recognizedText", void 0);
-    SpeechRecognitionComponent = SpeechRecognitionComponent_1 = __decorate([
+    SpeechRecognitionComponent = __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=\"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}"]
+            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}"]
         })
     ], SpeechRecognitionComponent);
     return SpeechRecognitionComponent;