@corti/dictation-web 0.0.0-rc.359 → 0.0.0-test.571

package/dist/components/recording-button.js

@@ -0,0 +1,262 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _DictationRecordingButton_instances, _DictationRecordingButton_mediaController, _DictationRecordingButton_dictationController, _DictationRecordingButton_keybindingController, _DictationRecordingButton_handleMouseDown, _DictationRecordingButton_handleMouseUp, _DictationRecordingButton_handleMouseLeave, _DictationRecordingButton_handleWebSocketMessage, _DictationRecordingButton_handleWebSocketError, _DictationRecordingButton_handleWebSocketClose, _DictationRecordingButton_handleStart, _DictationRecordingButton_handleStop;
+import { consume } from "@lit/context";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { AUDIO_CHUNK_INTERVAL_MS } from "../constants.js";
+import { accessTokenContext, authConfigContext, debugDisplayAudioContext, dictationConfigContext, keybindingContext, modeContext, recordingStateContext, regionContext, selectedDeviceContext, socketProxyContext, socketUrlContext, tenantNameContext, } from "../contexts/dictation-context.js";
+import { DictationController, } from "../controllers/dictation-controller.js";
+import { KeybindingController } from "../controllers/keybinding-controller.js";
+import { MediaController } from "../controllers/media-controller.js";
+import ButtonStyles from "../styles/buttons.js";
+import RecordingButtonStyles from "../styles/recording-button.js";
+import { audioLevelChangedEvent, commandEvent, errorEvent, networkActivityEvent, recordingStateChangedEvent, streamClosedEvent, transcriptEvent, usageEvent, } from "../utils/events.js";
+import "./audio-visualiser.js";
+import "../icons/icons.js";
+let DictationRecordingButton = class DictationRecordingButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        _DictationRecordingButton_instances.add(this);
+        this._recordingState = "stopped";
+        this.allowButtonFocus = false;
+        _DictationRecordingButton_mediaController.set(this, new MediaController(this));
+        _DictationRecordingButton_dictationController.set(this, new DictationController(this));
+        _DictationRecordingButton_keybindingController.set(this, new KeybindingController(this));
+        _DictationRecordingButton_handleWebSocketMessage.set(this, (message) => {
+            switch (message.type) {
+                case "CONFIG_ACCEPTED":
+                    __classPrivateFieldGet(this, _DictationRecordingButton_mediaController, "f").mediaRecorder?.start(AUDIO_CHUNK_INTERVAL_MS);
+                    __classPrivateFieldGet(this, _DictationRecordingButton_mediaController, "f").startAudioLevelMonitoring((level) => {
+                        this.dispatchEvent(audioLevelChangedEvent(level));
+                    });
+                    this.dispatchEvent(recordingStateChangedEvent("recording"));
+                    break;
+                case "CONFIG_DENIED":
+                    this.dispatchEvent(errorEvent(`Config denied: ${message.reason ?? "Unknown reason"}`));
+                    __classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStop).call(this);
+                    break;
+                case "CONFIG_TIMEOUT":
+                    this.dispatchEvent(errorEvent("Config timeout"));
+                    __classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStop).call(this);
+                    break;
+                case "transcript":
+                    this.dispatchEvent(transcriptEvent(message));
+                    break;
+                case "command":
+                    this.dispatchEvent(commandEvent(message));
+                    break;
+                case "usage":
+                    this.dispatchEvent(usageEvent(message));
+                    break;
+                case "error":
+                    this.dispatchEvent(errorEvent(message.error));
+                    __classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStop).call(this);
+                    break;
+            }
+        });
+        _DictationRecordingButton_handleWebSocketError.set(this, (error) => {
+            this.dispatchEvent(errorEvent("Socket error: " + error.message));
+            __classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStop).call(this);
+        });
+        _DictationRecordingButton_handleWebSocketClose.set(this, (event) => {
+            this.dispatchEvent(streamClosedEvent(event));
+        });
+    }
+    startRecording() {
+        if (this._recordingState !== "stopped") {
+            return;
+        }
+        __classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStart).call(this);
+    }
+    stopRecording() {
+        if (this._recordingState === "stopped") {
+            return;
+        }
+        if (this._recordingState === "initializing") {
+            this.addEventListener("recording-state-changed", (event) => {
+                if (event.detail
+                    .state === "recording") {
+                    __classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStop).call(this);
+                }
+            }, {
+                once: true,
+            });
+            return;
+        }
+        __classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStop).call(this);
+    }
+    toggleRecording() {
+        if (this._recordingState === "stopped") {
+            __classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStart).call(this);
+        }
+        else if (this._recordingState === "recording") {
+            __classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStop).call(this);
+        }
+    }
+    render() {
+        const isLoading = this._recordingState === "initializing" ||
+            this._recordingState === "stopping";
+        const isRecording = this._recordingState === "recording";
+        return html `
+      <button
+        @mousedown=${__classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleMouseDown)}
+        @mouseup=${__classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleMouseUp)}
+        @mouseleave=${__classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleMouseLeave)}
+        ?disabled=${isLoading}
+        class=${isRecording ? "red" : "accent"}
+        aria-label=${isRecording ? "Stop recording" : "Start recording"}
+        aria-pressed=${isRecording}
+      >
+        ${isLoading
+            ? html `<icon-loading-spinner />`
+            : isRecording
+                ? html `<icon-recording />`
+                : html `<icon-mic-on />`}
+        <dictation-audio-visualiser
+          .level=${__classPrivateFieldGet(this, _DictationRecordingButton_mediaController, "f").audioLevel}
+          ?active=${isRecording}
+        />
+      </button>
+    `;
+    }
+};
+_DictationRecordingButton_mediaController = new WeakMap();
+_DictationRecordingButton_dictationController = new WeakMap();
+_DictationRecordingButton_keybindingController = new WeakMap();
+_DictationRecordingButton_handleWebSocketMessage = new WeakMap();
+_DictationRecordingButton_handleWebSocketError = new WeakMap();
+_DictationRecordingButton_handleWebSocketClose = new WeakMap();
+_DictationRecordingButton_instances = new WeakSet();
+_DictationRecordingButton_handleMouseDown = function _DictationRecordingButton_handleMouseDown(event) {
+    if (!this.allowButtonFocus) {
+        event.preventDefault();
+    }
+    if (this._mode === "push-to-talk") {
+        this.startRecording();
+    }
+};
+_DictationRecordingButton_handleMouseUp = function _DictationRecordingButton_handleMouseUp() {
+    if (this._mode === "push-to-talk") {
+        this.stopRecording();
+        return;
+    }
+    if (this._mode === "toggle-to-talk") {
+        this.toggleRecording();
+    }
+};
+_DictationRecordingButton_handleMouseLeave = function _DictationRecordingButton_handleMouseLeave() {
+    if (this._mode === "push-to-talk") {
+        this.stopRecording();
+    }
+};
+_DictationRecordingButton_handleStart = async function _DictationRecordingButton_handleStart() {
+    this.dispatchEvent(recordingStateChangedEvent("initializing"));
+    try {
+        await __classPrivateFieldGet(this, _DictationRecordingButton_mediaController, "f").initialize(() => {
+            if (this._recordingState === "recording") {
+                this.dispatchEvent(errorEvent("Recording device access was lost."));
+                __classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStop).call(this);
+            }
+        });
+        const isNewConnection = await __classPrivateFieldGet(this, _DictationRecordingButton_dictationController, "f").connect(__classPrivateFieldGet(this, _DictationRecordingButton_mediaController, "f").mediaRecorder, this._dictationConfig, {
+            onClose: __classPrivateFieldGet(this, _DictationRecordingButton_handleWebSocketClose, "f"),
+            onError: __classPrivateFieldGet(this, _DictationRecordingButton_handleWebSocketError, "f"),
+            onMessage: __classPrivateFieldGet(this, _DictationRecordingButton_handleWebSocketMessage, "f"),
+            onNetworkActivity: (direction, data) => {
+                this.dispatchEvent(networkActivityEvent(direction, data));
+            },
+        });
+        // configuration has been accepted before
+        if (!isNewConnection) {
+            __classPrivateFieldGet(this, _DictationRecordingButton_mediaController, "f").mediaRecorder?.start(AUDIO_CHUNK_INTERVAL_MS);
+            __classPrivateFieldGet(this, _DictationRecordingButton_mediaController, "f").startAudioLevelMonitoring((level) => {
+                this.dispatchEvent(audioLevelChangedEvent(level));
+            });
+            this.dispatchEvent(recordingStateChangedEvent("recording"));
+        }
+    }
+    catch (error) {
+        this.dispatchEvent(errorEvent(error));
+        await __classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStop).call(this);
+    }
+};
+_DictationRecordingButton_handleStop = async function _DictationRecordingButton_handleStop() {
+    this.dispatchEvent(recordingStateChangedEvent("stopping"));
+    try {
+        __classPrivateFieldGet(this, _DictationRecordingButton_mediaController, "f").stopAudioLevelMonitoring();
+        await __classPrivateFieldGet(this, _DictationRecordingButton_mediaController, "f").stopRecording();
+        await __classPrivateFieldGet(this, _DictationRecordingButton_dictationController, "f").disconnect(__classPrivateFieldGet(this, _DictationRecordingButton_handleWebSocketClose, "f"));
+        await __classPrivateFieldGet(this, _DictationRecordingButton_mediaController, "f").cleanup();
+    }
+    catch (error) {
+        this.dispatchEvent(errorEvent(error));
+    }
+    this.dispatchEvent(recordingStateChangedEvent("stopped"));
+};
+DictationRecordingButton.styles = [RecordingButtonStyles, ButtonStyles];
+__decorate([
+    consume({ context: recordingStateContext, subscribe: true }),
+    state()
+], DictationRecordingButton.prototype, "_recordingState", void 0);
+__decorate([
+    consume({ context: selectedDeviceContext, subscribe: true }),
+    state()
+], DictationRecordingButton.prototype, "_selectedDevice", void 0);
+__decorate([
+    consume({ context: accessTokenContext, subscribe: true }),
+    state()
+], DictationRecordingButton.prototype, "_accessToken", void 0);
+__decorate([
+    consume({ context: authConfigContext, subscribe: true }),
+    state()
+], DictationRecordingButton.prototype, "_authConfig", void 0);
+__decorate([
+    consume({ context: regionContext, subscribe: true }),
+    state()
+], DictationRecordingButton.prototype, "_region", void 0);
+__decorate([
+    consume({ context: tenantNameContext, subscribe: true }),
+    state()
+], DictationRecordingButton.prototype, "_tenantName", void 0);
+__decorate([
+    consume({ context: dictationConfigContext, subscribe: true }),
+    state()
+], DictationRecordingButton.prototype, "_dictationConfig", void 0);
+__decorate([
+    consume({ context: socketUrlContext, subscribe: true }),
+    state()
+], DictationRecordingButton.prototype, "_socketUrl", void 0);
+__decorate([
+    consume({ context: socketProxyContext, subscribe: true }),
+    state()
+], DictationRecordingButton.prototype, "_socketProxy", void 0);
+__decorate([
+    consume({ context: debugDisplayAudioContext, subscribe: true }),
+    state()
+], DictationRecordingButton.prototype, "_debug_displayAudio", void 0);
+__decorate([
+    consume({ context: keybindingContext, subscribe: true }),
+    state()
+], DictationRecordingButton.prototype, "_keybinding", void 0);
+__decorate([
+    consume({ context: modeContext, subscribe: true }),
+    state()
+], DictationRecordingButton.prototype, "_mode", void 0);
+__decorate([
+    property({ type: Boolean })
+], DictationRecordingButton.prototype, "allowButtonFocus", void 0);
+DictationRecordingButton = __decorate([
+    customElement("dictation-recording-button")
+], DictationRecordingButton);
+export { DictationRecordingButton };
+//# sourceMappingURL=recording-button.js.map

package/dist/components/recording-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recording-button.js","sourceRoot":"","sources":["../../src/components/recording-button.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Corti } from \"@corti/sdk\";\nimport { consume } from \"@lit/context\";\nimport { type CSSResultGroup, html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { AUDIO_CHUNK_INTERVAL_MS } from \"../constants.js\";\nimport {\n  accessTokenContext,\n  authConfigContext,\n  debugDisplayAudioContext,\n  dictationConfigContext,\n  keybindingContext,\n  modeContext,\n  recordingStateContext,\n  regionContext,\n  selectedDeviceContext,\n  socketProxyContext,\n  socketUrlContext,\n  tenantNameContext,\n} from \"../contexts/dictation-context.js\";\nimport {\n  DictationController,\n  type TranscribeMessage,\n} from \"../controllers/dictation-controller.js\";\nimport { KeybindingController } from \"../controllers/keybinding-controller.js\";\nimport { MediaController } from \"../controllers/media-controller.js\";\nimport ButtonStyles from \"../styles/buttons.js\";\nimport RecordingButtonStyles from \"../styles/recording-button.js\";\nimport type { DictationMode, ProxyOptions, RecordingState } from \"../types.js\";\nimport {\n  audioLevelChangedEvent,\n  commandEvent,\n  errorEvent,\n  networkActivityEvent,\n  type RecordingStateChangedEventDetail,\n  recordingStateChangedEvent,\n  streamClosedEvent,\n  transcriptEvent,\n  usageEvent,\n} from \"../utils/events.js\";\n\nimport \"./audio-visualiser.js\";\nimport \"../icons/icons.js\";\n\n@customElement(\"dictation-recording-button\")\nexport class DictationRecordingButton extends LitElement {\n  @consume({ context: recordingStateContext, subscribe: true })\n  @state()\n  _recordingState: RecordingState = \"stopped\";\n\n  @consume({ context: selectedDeviceContext, subscribe: true })\n  @state()\n  _selectedDevice?: MediaDeviceInfo;\n\n  @consume({ context: accessTokenContext, subscribe: true })\n  @state()\n  _accessToken?: string;\n\n  @consume({ context: authConfigContext, subscribe: true })\n  @state()\n  _authConfig?: Corti.BearerOptions;\n\n  @consume({ context: regionContext, subscribe: true })\n  @state()\n  _region?: string;\n\n  @consume({ context: tenantNameContext, subscribe: true })\n  @state()\n  _tenantName?: string;\n\n  @consume({ context: dictationConfigContext, subscribe: true })\n  @state()\n  _dictationConfig?: Corti.TranscribeConfig;\n\n  @consume({ context: socketUrlContext, subscribe: true })\n  @state()\n  _socketUrl?: string;\n\n  @consume({ context: socketProxyContext, subscribe: true })\n  @state()\n  _socketProxy?: ProxyOptions;\n\n  @consume({ context: debugDisplayAudioContext, subscribe: true })\n  @state()\n  _debug_displayAudio?: boolean;\n\n  @consume({ context: keybindingContext, subscribe: true })\n  @state()\n  _keybinding?: string | null;\n\n  @consume({ context: modeContext, subscribe: true })\n  @state()\n  _mode?: DictationMode;\n\n  @property({ type: Boolean })\n  allowButtonFocus: boolean = false;\n\n  #mediaController = new MediaController(this);\n  #dictationController = new DictationController(this);\n  #keybindingController = new KeybindingController(this);\n\n  static styles: CSSResultGroup = [RecordingButtonStyles, ButtonStyles];\n\n  #handleMouseDown(event: MouseEvent): void {\n    if (!this.allowButtonFocus) {\n      event.preventDefault();\n    }\n\n    if (this._mode === \"push-to-talk\") {\n      this.startRecording();\n    }\n  }\n\n  #handleMouseUp(): void {\n    if (this._mode === \"push-to-talk\") {\n      this.stopRecording();\n      return;\n    }\n\n    if (this._mode === \"toggle-to-talk\") {\n      this.toggleRecording();\n    }\n  }\n\n  #handleMouseLeave(): void {\n    if (this._mode === \"push-to-talk\") {\n      this.stopRecording();\n    }\n  }\n\n  #handleWebSocketMessage = (message: TranscribeMessage): void => {\n    switch (message.type) {\n      case \"CONFIG_ACCEPTED\":\n        this.#mediaController.mediaRecorder?.start(AUDIO_CHUNK_INTERVAL_MS);\n        this.#mediaController.startAudioLevelMonitoring((level) => {\n          this.dispatchEvent(audioLevelChangedEvent(level));\n        });\n        this.dispatchEvent(recordingStateChangedEvent(\"recording\"));\n        break;\n      case \"CONFIG_DENIED\":\n        this.dispatchEvent(\n          errorEvent(`Config denied: ${message.reason ?? \"Unknown reason\"}`),\n        );\n        this.#handleStop();\n        break;\n      case \"CONFIG_TIMEOUT\":\n        this.dispatchEvent(errorEvent(\"Config timeout\"));\n        this.#handleStop();\n        break;\n      case \"transcript\":\n        this.dispatchEvent(transcriptEvent(message));\n        break;\n      case \"command\":\n        this.dispatchEvent(commandEvent(message));\n        break;\n      case \"usage\":\n        this.dispatchEvent(usageEvent(message));\n        break;\n      case \"error\":\n        this.dispatchEvent(errorEvent(message.error));\n        this.#handleStop();\n        break;\n    }\n  };\n\n  #handleWebSocketError = (error: Error): void => {\n    this.dispatchEvent(errorEvent(\"Socket error: \" + error.message));\n    this.#handleStop();\n  };\n\n  #handleWebSocketClose = (event: unknown): void => {\n    this.dispatchEvent(streamClosedEvent(event));\n  };\n\n  async #handleStart(): Promise<void> {\n    this.dispatchEvent(recordingStateChangedEvent(\"initializing\"));\n\n    try {\n      await this.#mediaController.initialize(() => {\n        if (this._recordingState === \"recording\") {\n          this.dispatchEvent(errorEvent(\"Recording device access was lost.\"));\n          this.#handleStop();\n        }\n      });\n\n      const isNewConnection = await this.#dictationController.connect(\n        this.#mediaController.mediaRecorder,\n        this._dictationConfig,\n        {\n          onClose: this.#handleWebSocketClose,\n          onError: this.#handleWebSocketError,\n          onMessage: this.#handleWebSocketMessage,\n          onNetworkActivity: (direction, data) => {\n            this.dispatchEvent(networkActivityEvent(direction, data));\n          },\n        },\n      );\n\n      // configuration has been accepted before\n      if (!isNewConnection) {\n        this.#mediaController.mediaRecorder?.start(AUDIO_CHUNK_INTERVAL_MS);\n        this.#mediaController.startAudioLevelMonitoring((level) => {\n          this.dispatchEvent(audioLevelChangedEvent(level));\n        });\n        this.dispatchEvent(recordingStateChangedEvent(\"recording\"));\n      }\n    } catch (error) {\n      this.dispatchEvent(errorEvent(error));\n      await this.#handleStop();\n    }\n  }\n\n  async #handleStop(): Promise<void> {\n    this.dispatchEvent(recordingStateChangedEvent(\"stopping\"));\n\n    try {\n      this.#mediaController.stopAudioLevelMonitoring();\n      await this.#mediaController.stopRecording();\n\n      await this.#dictationController.disconnect(this.#handleWebSocketClose);\n      await this.#mediaController.cleanup();\n    } catch (error) {\n      this.dispatchEvent(errorEvent(error));\n    }\n\n    this.dispatchEvent(recordingStateChangedEvent(\"stopped\"));\n  }\n\n  public startRecording(): void {\n    if (this._recordingState !== \"stopped\") {\n      return;\n    }\n\n    this.#handleStart();\n  }\n\n  public stopRecording(): void {\n    if (this._recordingState === \"stopped\") {\n      return;\n    }\n\n    if (this._recordingState === \"initializing\") {\n      this.addEventListener(\n        \"recording-state-changed\",\n        (event) => {\n          if (\n            (event as CustomEvent<RecordingStateChangedEventDetail>).detail\n              .state === \"recording\"\n          ) {\n            this.#handleStop();\n          }\n        },\n        {\n          once: true,\n        },\n      );\n      return;\n    }\n\n    this.#handleStop();\n  }\n\n  public toggleRecording(): void {\n    if (this._recordingState === \"stopped\") {\n      this.#handleStart();\n    } else if (this._recordingState === \"recording\") {\n      this.#handleStop();\n    }\n  }\n\n  render() {\n    const isLoading =\n      this._recordingState === \"initializing\" ||\n      this._recordingState === \"stopping\";\n    const isRecording = this._recordingState === \"recording\";\n\n    return html`\n      <button\n        @mousedown=${this.#handleMouseDown}\n        @mouseup=${this.#handleMouseUp}\n        @mouseleave=${this.#handleMouseLeave}\n        ?disabled=${isLoading}\n        class=${isRecording ? \"red\" : \"accent\"}\n        aria-label=${isRecording ? \"Stop recording\" : \"Start recording\"}\n        aria-pressed=${isRecording}\n      >\n        ${\n          isLoading\n            ? html`<icon-loading-spinner />`\n            : isRecording\n              ? html`<icon-recording />`\n              : html`<icon-mic-on />`\n        }\n        <dictation-audio-visualiser\n          .level=${this.#mediaController.audioLevel}\n          ?active=${isRecording}\n        />\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"dictation-recording-button\": DictationRecordingButton;\n  }\n}\n"]}

package/dist/components/settings-menu.d.ts

@@ -1,20 +1,18 @@
-import { LitElement, TemplateResult, CSSResultGroup } from 'lit';
-export declare class SettingsMenu extends LitElement {
-    selectedDevice: MediaDeviceInfo | undefined;
-    selectedLanguage: string;
-    settingsDisabled: boolean;
-    private _devices;
-    get effectiveSelectedLanguage(): string;
-    constructor();
-    connectedCallback(): Promise<void>;
-    private handleDevicesChange;
+import { type CSSResultGroup, LitElement, nothing } from "lit";
+import type { ConfigurableSettings, RecordingState } from "../types.js";
+import "./device-selector.js";
+import "./keybinding-selector.js";
+import "./language-selector.js";
+import "./mode-selector.js";
+import "../icons/icons.js";
+export declare class DictationSettingsMenu extends LitElement {
+    _recordingState: RecordingState;
+    settingsEnabled: ConfigurableSettings[];
     static styles: CSSResultGroup;
-    private _selectDevice;
-    private _selectLanguage;
-    render(): TemplateResult;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'settings-menu': SettingsMenu;
+        "dictation-settings-menu": DictationSettingsMenu;
     }
 }

package/dist/components/settings-menu.js

@@ -4,182 +4,97 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-// mic-selector.ts
-import { LitElement, html, css } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import ButtonStyles from '../styles/buttons.js';
-import SelectStyles from '../styles/select.js';
-import { LANGUAGES_SUPPORTED } from '../constants.js';
-import { getAudioDevices, getLanguageName } from '../utils.js';
-import CalloutStyles from '../styles/callout.js';
-let SettingsMenu = class SettingsMenu extends LitElement {
-    get effectiveSelectedLanguage() {
-        return this.selectedLanguage || LANGUAGES_SUPPORTED[0] || '';
-    }
+import { consume } from "@lit/context";
+import { html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { recordingStateContext } from "../contexts/dictation-context.js";
+import ButtonStyles from "../styles/buttons.js";
+import CalloutStyles from "../styles/callout.js";
+import SettingsMenuStyles from "../styles/settings-menu.js";
+import { commaSeparatedConverter } from "../utils/converters.js";
+import "./device-selector.js";
+import "./keybinding-selector.js";
+import "./language-selector.js";
+import "./mode-selector.js";
+import "../icons/icons.js";
+let DictationSettingsMenu = class DictationSettingsMenu extends LitElement {
     constructor() {
-        super();
-        this.selectedLanguage = '';
-        this.settingsDisabled = false;
-        this._devices = [];
-        navigator.mediaDevices.addEventListener('devicechange', this.handleDevicesChange.bind(this));
-    }
-    // on load, get the available devices
-    async connectedCallback() {
-        super.connectedCallback();
-        const deviceResponse = await getAudioDevices();
-        this._devices = deviceResponse.devices;
-    }
-    async handleDevicesChange() {
-        const deviceResponse = await getAudioDevices();
-        this._devices = deviceResponse.devices;
-    }
-    _selectDevice(deviceId) {
-        // Find the device object
-        const device = this._devices.find(d => d.deviceId === deviceId);
-        if (!device) {
-            return;
-        }
-        this.selectedDevice = device;
-        this.dispatchEvent(new CustomEvent('recording-devices-changed', {
-            detail: {
-                devices: this._devices,
-                selectedDevice: device,
-            },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    _selectLanguage(language) {
-        if (!LANGUAGES_SUPPORTED.includes(language)) {
-            return;
-        }
-        this.selectedLanguage = language;
-        this.dispatchEvent(new CustomEvent('language-changed', {
-            detail: {
-                language: language,
-            },
-            bubbles: true,
-            composed: true,
-        }));
+        super(...arguments);
+        this._recordingState = "stopped";
+        this.settingsEnabled = ["device", "language"];
     }
     render() {
+        if (this.settingsEnabled?.length === 0) {
+            return nothing;
+        }
+        const isRecording = this._recordingState === "recording";
+        const showDeviceSelector = this.settingsEnabled.includes("device");
+        const showLanguageSelector = this.settingsEnabled.includes("language");
+        const showModeSelector = this.settingsEnabled.includes("mode");
+        const showKeybinding = this.settingsEnabled.includes("keybinding");
         return html `
       <div class="mic-selector">
         <button id="settings-popover-button" popovertarget="settings-popover">
-          <icon-settings></icon-settings>
+          <icon-settings />
         </button>
         <div id="settings-popover" popover>
           <div class="settings-wrapper">
-            ${this.settingsDisabled
+            ${isRecording
             ? html `
                   <div class="callout warn">
                     Recording is in progress. Stop recording to change settings.
                   </div>
                 `
-            : ''}
-            <div class="form-group">
-              <label id="device-select-label" for="device-select">
-                Recording Device
-              </label>
-              <select
-                id="device-select"
-                aria-labelledby="device-select-label"
-                @change=${(e) => {
-            this._selectDevice(e.target.value);
-        }}
-                ?disabled=${this.settingsDisabled}
-              >
-                ${this._devices.map(device => html `
-                    <option
-                      value=${device.deviceId}
-                      ?selected=${this.selectedDevice?.deviceId ===
-            device.deviceId}
-                    >
-                      ${device.label || 'Unknown Device'}
-                    </option>
-                  `)}
-              </select>
-            </div>
-            <div class="form-group">
-              <label id="language-select-label" for="language-select">
-                Dictation Language
-              </label>
-              <select
-                id="language-select"
-                aria-labelledby="language-select-label"
-                @change=${(e) => {
-            this._selectLanguage(e.target.value);
-        }}
-                ?disabled=${this.settingsDisabled}
-              >
-                ${LANGUAGES_SUPPORTED.map(language => html `
-                    <option
-                      value=${language}
-                      ?selected=${this.effectiveSelectedLanguage === language}
-                    >
-                      ${getLanguageName(language)}
-                    </option>
-                  `)}
-              </select>
-            </div>
+            : nothing}
+            ${showDeviceSelector
+            ? html `<dictation-device-selector
+                  ?disabled=${isRecording}
+                />`
+            : nothing}
+            ${showLanguageSelector
+            ? html `<dictation-language-selector
+                  ?disabled=${isRecording}
+                />`
+            : nothing}
+            ${showModeSelector || showKeybinding
+            ? html `
+                  <div class="settings-group">
+                    ${showModeSelector
+                ? html `<dictation-mode-selector
+                            ?disabled=${isRecording}
+                          />`
+                : nothing}
+                    ${showKeybinding
+                ? html `<dictation-keybinding-selector
+                            ?disabled=${isRecording}
+                          />`
+                : nothing}
+                  </div>
+                `
+            : nothing}
           </div>
         </div>
       </div>
     `;
     }
 };
-SettingsMenu.styles = [
-    css `
-      :host {
-        display: block;
-        font-family: var(--component-font-family);
-      }
-      /* Retain the anchor-name styling for this component */
-      #settings-popover-button {
-        anchor-name: --settings_popover_btn;
-      }
-      [popover] {
-        margin: 0;
-        padding: 16px;
-        border: 0;
-        background: var(--card-background);
-        border: 1px solid var(--card-border-color);
-        border-radius: var(--card-border-radius);
-        box-shadow: var(--card-box-shadow);
-        z-index: 1000;
-        max-width: 260px;
-        width: 100%;
-        min-width: 200px;
-        position-anchor: --settings_popover_btn;
-        position-area: bottom span-right;
-        position-visibility: always;
-        position-try-fallbacks: flip-inline;
-        overflow-x: hidden;
-      }
-      .settings-wrapper {
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-      }
-    `,
+DictationSettingsMenu.styles = [
+    SettingsMenuStyles,
     ButtonStyles,
-    SelectStyles,
     CalloutStyles,
 ];
 __decorate([
-    property({ type: Object })
-], SettingsMenu.prototype, "selectedDevice", void 0);
-__decorate([
-    property({ type: String })
-], SettingsMenu.prototype, "selectedLanguage", void 0);
-__decorate([
-    property({ type: Boolean })
-], SettingsMenu.prototype, "settingsDisabled", void 0);
-__decorate([
+    consume({ context: recordingStateContext, subscribe: true }),
     state()
-], SettingsMenu.prototype, "_devices", void 0);
-SettingsMenu = __decorate([
-    customElement('settings-menu')
-], SettingsMenu);
-export { SettingsMenu };
+], DictationSettingsMenu.prototype, "_recordingState", void 0);
+__decorate([
+    property({
+        converter: commaSeparatedConverter,
+        type: Array,
+    })
+], DictationSettingsMenu.prototype, "settingsEnabled", void 0);
+DictationSettingsMenu = __decorate([
+    customElement("dictation-settings-menu")
+], DictationSettingsMenu);
+export { DictationSettingsMenu };
 //# sourceMappingURL=settings-menu.js.map

package/dist/components/settings-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings-menu.js","sourceRoot":"","sources":["../../src/components/settings-menu.ts"],"names":[],"mappings":";;;;;;AAAA,kBAAkB;AAClB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,YAAY,MAAM,sBAAsB,CAAC;AAChD,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,aAAa,MAAM,sBAAsB,CAAC;AAG1C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAa1C,IAAI,yBAAyB;QAC3B,OAAO,IAAI,CAAC,gBAAgB,IAAI,mBAAmB,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC/D,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAbV,qBAAgB,GAAW,EAAE,CAAC;QAG9B,qBAAgB,GAAY,KAAK,CAAC;QAG1B,aAAQ,GAAsB,EAAE,CAAC;QAQvC,SAAS,CAAC,YAAY,CAAC,gBAAgB,CACrC,cAAc,EACd,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CACpC,CAAC;IACJ,CAAC;IAED,qCAAqC;IACrC,KAAK,CAAC,iBAAiB;QACrB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,MAAM,cAAc,GAAG,MAAM,eAAe,EAAE,CAAC;QAC/C,IAAI,CAAC,QAAQ,GAAG,cAAc,CAAC,OAAO,CAAC;IACzC,CAAC;IAEO,KAAK,CAAC,mBAAmB;QAC/B,MAAM,cAAc,GAAG,MAAM,eAAe,EAAE,CAAC;QAC/C,IAAI,CAAC,QAAQ,GAAG,cAAc,CAAC,OAAO,CAAC;IACzC,CAAC;IAwCO,aAAa,CAAC,QAAgB;QACpC,yBAAyB;QACzB,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC;QAChE,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAO;QACT,CAAC;QACD,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC;QAC7B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,2BAA2B,EAAE;YAC3C,MAAM,EAAE;gBACN,OAAO,EAAE,IAAI,CAAC,QAAQ;gBACtB,cAAc,EAAE,MAAM;aACvB;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,eAAe,CAAC,QAAgB;QACtC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC5C,OAAO;QACT,CAAC;QACD,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QACjC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,kBAAkB,EAAE;YAClC,MAAM,EAAE;gBACN,QAAQ,EAAE,QAAQ;aACnB;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;cAOD,IAAI,CAAC,gBAAgB;YACrB,CAAC,CAAC,IAAI,CAAA;;;;iBAIH;YACH,CAAC,CAAC,EAAE;;;;;;;;0BAQQ,CAAC,CAAQ,EAAE,EAAE;YACrB,IAAI,CAAC,aAAa,CAAE,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAC,CAAC;QAC5D,CAAC;4BACW,IAAI,CAAC,gBAAgB;;kBAE/B,IAAI,CAAC,QAAQ,CAAC,GAAG,CACjB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;8BAEF,MAAM,CAAC,QAAQ;kCACX,IAAI,CAAC,cAAc,EAAE,QAAQ;YACzC,MAAM,CAAC,QAAQ;;wBAEb,MAAM,CAAC,KAAK,IAAI,gBAAgB;;mBAErC,CACF;;;;;;;;;;0BAUS,CAAC,CAAQ,EAAE,EAAE;YACrB,IAAI,CAAC,eAAe,CAAE,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAC,CAAC;QAC9D,CAAC;4BACW,IAAI,CAAC,gBAAgB;;kBAE/B,mBAAmB,CAAC,GAAG,CACvB,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAA;;8BAEJ,QAAQ;kCACJ,IAAI,CAAC,yBAAyB,KAAK,QAAQ;;wBAErD,eAAe,CAAC,QAAQ,CAAC;;mBAE9B,CACF;;;;;;KAMZ,CAAC;IACJ,CAAC;;AA7IM,mBAAM,GAAmB;IAC9B,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCF;IACD,YAAY;IACZ,YAAY;IACZ,aAAa;CACd,AArCY,CAqCX;AAxEF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACiB;AAG5C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACG;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sDACM;AAG1B;IADP,KAAK,EAAE;8CACiC;AAX9B,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAmLxB","sourcesContent":["// mic-selector.ts\nimport { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport ButtonStyles from '../styles/buttons.js';\nimport SelectStyles from '../styles/select.js';\nimport { LANGUAGES_SUPPORTED } from '../constants.js';\nimport { getAudioDevices, getLanguageName } from '../utils.js';\nimport CalloutStyles from '../styles/callout.js';\n\n@customElement('settings-menu')\nexport class SettingsMenu extends LitElement {\n  @property({ type: Object })\n  selectedDevice: MediaDeviceInfo | undefined;\n\n  @property({ type: String })\n  selectedLanguage: string = '';\n\n  @property({ type: Boolean })\n  settingsDisabled: boolean = false;\n\n  @state()\n  private _devices: MediaDeviceInfo[] = [];\n\n  get effectiveSelectedLanguage(): string {\n    return this.selectedLanguage || LANGUAGES_SUPPORTED[0] || '';\n  }\n\n  constructor() {\n    super();\n    navigator.mediaDevices.addEventListener(\n      'devicechange',\n      this.handleDevicesChange.bind(this),\n    );\n  }\n\n  // on load, get the available devices\n  async connectedCallback(): Promise<void> {\n    super.connectedCallback();\n    const deviceResponse = await getAudioDevices();\n    this._devices = deviceResponse.devices;\n  }\n\n  private async handleDevicesChange() {\n    const deviceResponse = await getAudioDevices();\n    this._devices = deviceResponse.devices;\n  }\n\n  static styles: CSSResultGroup = [\n    css`\n      :host {\n        display: block;\n        font-family: var(--component-font-family);\n      }\n      /* Retain the anchor-name styling for this component */\n      #settings-popover-button {\n        anchor-name: --settings_popover_btn;\n      }\n      [popover] {\n        margin: 0;\n        padding: 16px;\n        border: 0;\n        background: var(--card-background);\n        border: 1px solid var(--card-border-color);\n        border-radius: var(--card-border-radius);\n        box-shadow: var(--card-box-shadow);\n        z-index: 1000;\n        max-width: 260px;\n        width: 100%;\n        min-width: 200px;\n        position-anchor: --settings_popover_btn;\n        position-area: bottom span-right;\n        position-visibility: always;\n        position-try-fallbacks: flip-inline;\n        overflow-x: hidden;\n      }\n      .settings-wrapper {\n        display: flex;\n        flex-direction: column;\n        gap: 20px;\n      }\n    `,\n    ButtonStyles,\n    SelectStyles,\n    CalloutStyles,\n  ];\n  private _selectDevice(deviceId: string): void {\n    // Find the device object\n    const device = this._devices.find(d => d.deviceId === deviceId);\n    if (!device) {\n      return;\n    }\n    this.selectedDevice = device;\n    this.dispatchEvent(\n      new CustomEvent('recording-devices-changed', {\n        detail: {\n          devices: this._devices,\n          selectedDevice: device,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _selectLanguage(language: string): void {\n    if (!LANGUAGES_SUPPORTED.includes(language)) {\n      return;\n    }\n    this.selectedLanguage = language;\n    this.dispatchEvent(\n      new CustomEvent('language-changed', {\n        detail: {\n          language: language,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"mic-selector\">\n        <button id=\"settings-popover-button\" popovertarget=\"settings-popover\">\n          <icon-settings></icon-settings>\n        </button>\n        <div id=\"settings-popover\" popover>\n          <div class=\"settings-wrapper\">\n            ${this.settingsDisabled\n              ? html`\n                  <div class=\"callout warn\">\n                    Recording is in progress. Stop recording to change settings.\n                  </div>\n                `\n              : ''}\n            <div class=\"form-group\">\n              <label id=\"device-select-label\" for=\"device-select\">\n                Recording Device\n              </label>\n              <select\n                id=\"device-select\"\n                aria-labelledby=\"device-select-label\"\n                @change=${(e: Event) => {\n                  this._selectDevice((e.target as HTMLSelectElement).value);\n                }}\n                ?disabled=${this.settingsDisabled}\n              >\n                ${this._devices.map(\n                  device => html`\n                    <option\n                      value=${device.deviceId}\n                      ?selected=${this.selectedDevice?.deviceId ===\n                      device.deviceId}\n                    >\n                      ${device.label || 'Unknown Device'}\n                    </option>\n                  `,\n                )}\n              </select>\n            </div>\n            <div class=\"form-group\">\n              <label id=\"language-select-label\" for=\"language-select\">\n                Dictation Language\n              </label>\n              <select\n                id=\"language-select\"\n                aria-labelledby=\"language-select-label\"\n                @change=${(e: Event) => {\n                  this._selectLanguage((e.target as HTMLSelectElement).value);\n                }}\n                ?disabled=${this.settingsDisabled}\n              >\n                ${LANGUAGES_SUPPORTED.map(\n                  language => html`\n                    <option\n                      value=${language}\n                      ?selected=${this.effectiveSelectedLanguage === language}\n                    >\n                      ${getLanguageName(language)}\n                    </option>\n                  `,\n                )}\n              </select>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'settings-menu': SettingsMenu;\n  }\n}\n"]}
+{"version":3,"file":"settings-menu.js","sourceRoot":"","sources":["../../src/components/settings-menu.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAuB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,YAAY,MAAM,sBAAsB,CAAC;AAChD,OAAO,aAAa,MAAM,sBAAsB,CAAC;AACjD,OAAO,kBAAkB,MAAM,4BAA4B,CAAC;AAE5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEjE,OAAO,sBAAsB,CAAC;AAC9B,OAAO,0BAA0B,CAAC;AAClC,OAAO,wBAAwB,CAAC;AAChC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,mBAAmB,CAAC;AAGpB,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QAGL,oBAAe,GAAmB,SAAS,CAAC;QAM5C,oBAAe,GAA2B,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;IA4EnE,CAAC;IApEC,MAAM;QACJ,IAAI,IAAI,CAAC,eAAe,EAAE,MAAM,KAAK,CAAC,EAAE,CAAC;YACvC,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe,KAAK,WAAW,CAAC;QACzD,MAAM,kBAAkB,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnE,MAAM,oBAAoB,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;QACvE,MAAM,gBAAgB,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC/D,MAAM,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;QAEnE,OAAO,IAAI,CAAA;;;;;;;cAQD,WAAW;YACT,CAAC,CAAC,IAAI,CAAA;;;;iBAIL;YACD,CAAC,CAAC,OACN;cAEE,kBAAkB;YAChB,CAAC,CAAC,IAAI,CAAA;8BACQ,WAAW;mBACtB;YACH,CAAC,CAAC,OACN;cAEE,oBAAoB;YAClB,CAAC,CAAC,IAAI,CAAA;8BACQ,WAAW;mBACtB;YACH,CAAC,CAAC,OACN;cAEE,gBAAgB,IAAI,cAAc;YAChC,CAAC,CAAC,IAAI,CAAA;;sBAGA,gBAAgB;gBACd,CAAC,CAAC,IAAI,CAAA;wCACU,WAAW;6BACtB;gBACL,CAAC,CAAC,OACN;sBAEE,cAAc;gBACZ,CAAC,CAAC,IAAI,CAAA;wCACU,WAAW;6BACtB;gBACL,CAAC,CAAC,OACN;;iBAEH;YACD,CAAC,CAAC,OACN;;;;KAIP,CAAC;IACJ,CAAC;;AAzEM,4BAAM,GAAmB;IAC9B,kBAAkB;IAClB,YAAY;IACZ,aAAa;CACd,AAJY,CAIX;AAZF;IAFC,OAAO,CAAC,EAAE,OAAO,EAAE,qBAAqB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IAC5D,KAAK,EAAE;8DACoC;AAM5C;IAJC,QAAQ,CAAC;QACR,SAAS,EAAE,uBAAuB;QAClC,IAAI,EAAE,KAAK;KACZ,CAAC;8DAC+D;AATtD,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CAqFjC","sourcesContent":["import { consume } from \"@lit/context\";\nimport { type CSSResultGroup, html, LitElement, nothing } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { recordingStateContext } from \"../contexts/dictation-context.js\";\nimport ButtonStyles from \"../styles/buttons.js\";\nimport CalloutStyles from \"../styles/callout.js\";\nimport SettingsMenuStyles from \"../styles/settings-menu.js\";\nimport type { ConfigurableSettings, RecordingState } from \"../types.js\";\nimport { commaSeparatedConverter } from \"../utils/converters.js\";\n\nimport \"./device-selector.js\";\nimport \"./keybinding-selector.js\";\nimport \"./language-selector.js\";\nimport \"./mode-selector.js\";\nimport \"../icons/icons.js\";\n\n@customElement(\"dictation-settings-menu\")\nexport class DictationSettingsMenu extends LitElement {\n  @consume({ context: recordingStateContext, subscribe: true })\n  @state()\n  _recordingState: RecordingState = \"stopped\";\n\n  @property({\n    converter: commaSeparatedConverter,\n    type: Array,\n  })\n  settingsEnabled: ConfigurableSettings[] = [\"device\", \"language\"];\n\n  static styles: CSSResultGroup = [\n    SettingsMenuStyles,\n    ButtonStyles,\n    CalloutStyles,\n  ];\n\n  render() {\n    if (this.settingsEnabled?.length === 0) {\n      return nothing;\n    }\n\n    const isRecording = this._recordingState === \"recording\";\n    const showDeviceSelector = this.settingsEnabled.includes(\"device\");\n    const showLanguageSelector = this.settingsEnabled.includes(\"language\");\n    const showModeSelector = this.settingsEnabled.includes(\"mode\");\n    const showKeybinding = this.settingsEnabled.includes(\"keybinding\");\n\n    return html`\n      <div class=\"mic-selector\">\n        <button id=\"settings-popover-button\" popovertarget=\"settings-popover\">\n          <icon-settings />\n        </button>\n        <div id=\"settings-popover\" popover>\n          <div class=\"settings-wrapper\">\n            ${\n              isRecording\n                ? html`\n                  <div class=\"callout warn\">\n                    Recording is in progress. Stop recording to change settings.\n                  </div>\n                `\n                : nothing\n            }\n            ${\n              showDeviceSelector\n                ? html`<dictation-device-selector\n                  ?disabled=${isRecording}\n                />`\n                : nothing\n            }\n            ${\n              showLanguageSelector\n                ? html`<dictation-language-selector\n                  ?disabled=${isRecording}\n                />`\n                : nothing\n            }\n            ${\n              showModeSelector || showKeybinding\n                ? html`\n                  <div class=\"settings-group\">\n                    ${\n                      showModeSelector\n                        ? html`<dictation-mode-selector\n                            ?disabled=${isRecording}\n                          />`\n                        : nothing\n                    }\n                    ${\n                      showKeybinding\n                        ? html`<dictation-keybinding-selector\n                            ?disabled=${isRecording}\n                          />`\n                        : nothing\n                    }\n                  </div>\n                `\n                : nothing\n            }\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"dictation-settings-menu\": DictationSettingsMenu;\n  }\n}\n"]}