SpeechToText: add Overview demo

apps/demos/Demos/SpeechToText/Overview/Angular/app/app.component.css

@@ -0,0 +1,58 @@
+::ng-deep .speech-to-text-demo {
+  display: flex;
+  gap: 20px;
+  height: 640px;
+}
+
+::ng-deep .speech-to-text-container {
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+}
+
+::ng-deep #text-area {
+  margin-top: 16px;
+}
+
+::ng-deep .options {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  width: 300px;
+  box-sizing: border-box;
+  padding: 20px;
+  background-color: rgba(191, 191, 191, 0.15);
+  gap: 16px;
+}
+
+::ng-deep .caption {
+  font-weight: 500;
+  font-size: 18px;
+}
+
+::ng-deep .option {
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+}
+
+::ng-deep .switch {
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+}
+
+::ng-deep .option-separator {
+  border-bottom: 1px solid var(--dx-color-border);
+}
+
+::ng-deep #speech-to-text.animation-disabled {
+  animation: none;
+}
+
+::ng-deep #speech-to-text.custom-button {
+  border-radius: 2rem;
+}

apps/demos/Demos/SpeechToText/Overview/Angular/app/app.component.html

@@ -0,0 +1,102 @@
+<div class="speech-to-text-demo">
+  <div class="speech-to-text-container">
+    <span>Use voice recognition (speech to text)</span>
+    <dx-speech-to-text
+      id="speech-to-text"
+      [ngClass]="{
+        'animation-disabled': !animation,
+        'custom-button': displayMode === 'Custom'
+      }"
+      [startText]="startText"
+      [stopText]="stopText"
+      [stylingMode]="stylingMode"
+      [type]="type"
+      [hint]="hint"
+      [disabled]="disabled"
+      [speechRecognitionConfig]="speechRecognitionConfig"
+      (onStartClick)="onStartClick()"
+      (onResult)="onResult($event)"
+      (onEnd)="onEnd()"
+    ></dx-speech-to-text>
+    <dx-text-area
+      id="text-area"
+      [(value)]="textAreaValue"
+      [width]="360"
+      [height]="120"
+      placeholder="Recognized text will appear here..."
+      [inputAttr]="{ 'aria-label': 'Recognized Text' }"
+    ></dx-text-area>
+    <dx-button
+      text="Clear"
+      [disabled]="textAreaValue === ''"
+      (onClick)="onClearButtonClick($event)"
+    ></dx-button>
+  </div>
+  <div class="options">
+    <div class="caption">Options</div>
+    <div class="option">
+      <div>Display Mode</div>
+      <dx-select-box
+        [(value)]="displayMode"
+        [dataSource]="displayModes"
+        [inputAttr]="{ 'aria-label': 'Display Mode' }"
+        (onValueChanged)="onDisplayModeChanged($event)"
+      ></dx-select-box>
+    </div>
+    <div class="option">
+      <div>Styling Mode</div>
+      <dx-select-box
+        [(value)]="stylingMode"
+        [dataSource]="stylingModes"
+        displayExpr="displayValue"
+        valueExpr="value"
+        [disabled]="displayMode === 'Custom'"
+        [inputAttr]="{ 'aria-label': 'Styling Mode' }"
+      ></dx-select-box>
+    </div>
+    <div class="option">
+      <div>Type</div>
+      <dx-select-box
+        [(value)]="type"
+        [dataSource]="types"
+        displayExpr="displayValue"
+        valueExpr="value"
+        [disabled]="displayMode === 'Custom'"
+        [inputAttr]="{ 'aria-label': 'Type' }"
+      ></dx-select-box>
+    </div>
+    <div class="switch">
+      <dx-switch [(value)]="disabled"></dx-switch>
+      <span>Disabled</span>
+    </div>
+    <div class="option-separator"></div>
+    <div class="option">
+      <div>Language</div>
+      <dx-select-box
+        [(value)]="language"
+        [dataSource]="languages"
+        [inputAttr]="{ 'aria-label': 'Language' }"
+        (onValueChanged)="updateSpeechRecognitionConfig()"
+      ></dx-select-box>
+    </div>
+    <div class="switch">
+      <dx-switch
+        [(value)]="interimResults"
+        (onValueChanged)="updateSpeechRecognitionConfig()"
+      ></dx-switch>
+      <span>Interim Results</span>
+    </div>
+    <div class="switch">
+      <dx-switch
+        [(value)]="continuous"
+        (onValueChanged)="updateSpeechRecognitionConfig()"
+      ></dx-switch>
+      <span>Continuous Recognition</span>
+    </div>
+    <div class="option-separator"></div>
+    <div class="switch">
+      <dx-switch [(value)]="animation"></dx-switch>
+      <span>Animation</span>
+    </div>
+  </div>
+</div>

apps/demos/Demos/SpeechToText/Overview/Angular/app/app.component.ts

@@ -0,0 +1,162 @@
+import { NgModule, Component, enableProdMode } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { DxSpeechToTextModule } from 'devextreme-angular/ui/speech-to-text';
+import { DxTextAreaModule } from 'devextreme-angular/ui/text-area';
+import { DxButtonModule } from 'devextreme-angular/ui/button';
+import { DxSelectBoxModule } from 'devextreme-angular/ui/select-box';
+import { DxSwitchModule } from 'devextreme-angular/ui/switch';
+
+import { AppService } from './app.service';
+
+if (!/localhost/.test(document.location.host)) {
+  enableProdMode();
+}
+
+let modulePrefix = '';
+// @ts-ignore
+if (window && window.config?.packageConfigPaths) {
+  modulePrefix = '/app';
+}
+
+@Component({
+  selector: 'demo-app',
+  templateUrl: `.${modulePrefix}/app.component.html`,
+  styleUrls: [`.${modulePrefix}/app.component.css`],
+})
+export class AppComponent {
+  state: 'initial' | 'listening';
+
+  startText: string;
+
+  stopText: string;
+
+  displayMode: string;
+
+  displayModes: string[];
+
+  stylingMode: string;
+
+  stylingModes: { displayValue: string; value: string }[];
+
+  type: string;
+
+  types: { displayValue: string; value: string }[];
+
+  hint: string;
+
+  disabled: boolean;
+
+  textAreaValue: string;
+
+  language: string;
+
+  languages: string[];
+
+  langMap: { [key: string]: string };
+
+  interimResults: boolean;
+
+  continuous: boolean;
+
+  animation: boolean;
+
+  speechRecognitionConfig: Record<string, unknown>;
+
+  constructor(private readonly appService: AppService) {
+    this.state = 'initial';
+    this.startText = '';
+    this.stopText = '';
+    this.displayModes = this.appService.getDisplayModes();
+    this.displayMode = this.displayModes[0];
+    this.stylingModes = this.appService.getStylingModes();
+    this.stylingMode = this.stylingModes[0].value;
+    this.types = this.appService.getTypes();
+    this.type = this.types[2].value;
+    this.hint = 'Start voice recognition';
+    this.disabled = false;
+    this.textAreaValue = '';
+    this.languages = this.appService.getLanguages();
+    this.language = this.languages[0];
+    this.langMap = this.appService.getLangMap();
+    this.interimResults = true;
+    this.continuous = false;
+    this.animation = true;
+    this.updateSpeechRecognitionConfig();
+  }
+
+  onStartClick() {
+    this.state = 'listening';
+    this.hint = 'Stop voice recognition';
+    if (this.displayMode !== 'Custom') {
+      return;
+    }
+
+    this.type = 'danger';
+  }
+
+  onResult({ event }) {
+    const { results } = event;
+    const resultText = Object.values(results)
+      .map((resultItem) => resultItem[0].transcript)
+      .join(' ');
+    this.textAreaValue = resultText;
+  }
+
+  onEnd() {
+    this.state = 'initial';
+    this.hint = 'Start voice recognition';
+
+    if (this.displayMode !== 'Custom') {
+      return;
+    }
+
+    this.type = 'default';
+  }
+
+  onClearButtonClick() {
+    this.textAreaValue = '';
+  }
+
+  onDisplayModeChanged({ value }) {
+    if (value === 'Text and Icon') {
+      this.startText = 'Dictate';
+      this.stopText = 'Stop';
+
+      return;
+    }
+
+    this.startText = '';
+    this.stopText = '';
+
+    if (value === 'Custom') {
+      this.stylingMode = 'contained';
+      this.type = this.state === 'initial' ? 'default' : 'danger';
+    }
+  }
+
+  updateSpeechRecognitionConfig() {
+    this.speechRecognitionConfig = {
+      lang: this.langMap[this.language],
+      interimResults: this.interimResults,
+      continuous: this.continuous,
+    };
+  }
+}
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    DxSpeechToTextModule,
+    DxTextAreaModule,
+    DxButtonModule,
+    DxSelectBoxModule,
+    DxSwitchModule,
+  ],
+  declarations: [AppComponent],
+  providers: [AppService],
+  bootstrap: [AppComponent],
+})
+export class AppModule { }
+
+platformBrowserDynamic().bootstrapModule(AppModule);