@corti/dictation-web 0.0.0-test.562 → 0.0.0-test.571

package/dist/components/keybinding-selector.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from "lit";
+export declare class DictationKeybindingSelector extends LitElement {
+    #private;
+    _keybinding?: string | null;
+    disabled: boolean;
+    _isCapturingKeybinding: boolean;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "dictation-keybinding-selector": DictationKeybindingSelector;
+    }
+}

package/dist/components/keybinding-selector.js

@@ -0,0 +1,81 @@
+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 _DictationKeybindingSelector_instances, _DictationKeybindingSelector_handleKeybindingInputFocus, _DictationKeybindingSelector_handleKeybindingInputBlur, _DictationKeybindingSelector_handleKeybindingKeyDown;
+import { consume } from "@lit/context";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { keybindingContext } from "../contexts/dictation-context.js";
+import KeybindingSelectorStyles from "../styles/keybinding-selector.js";
+import { keybindingChangedEvent } from "../utils/events.js";
+let DictationKeybindingSelector = class DictationKeybindingSelector extends LitElement {
+    constructor() {
+        super(...arguments);
+        _DictationKeybindingSelector_instances.add(this);
+        this.disabled = false;
+        this._isCapturingKeybinding = false;
+    }
+    render() {
+        return html `
+      <div>
+        <label>Keybinding</label>
+        <div class="keybinding-selector-wrapper">
+          <div class="keybinding-key">${this._keybinding}</div>
+          <input
+            type="text"
+            class="keybinding-selector-input"
+            .value=""
+            placeholder="Click and press a key..."
+            readonly
+            @focusin=${__classPrivateFieldGet(this, _DictationKeybindingSelector_instances, "m", _DictationKeybindingSelector_handleKeybindingInputFocus)}
+            @focusout=${__classPrivateFieldGet(this, _DictationKeybindingSelector_instances, "m", _DictationKeybindingSelector_handleKeybindingInputBlur)}
+            @keydown=${__classPrivateFieldGet(this, _DictationKeybindingSelector_instances, "m", _DictationKeybindingSelector_handleKeybindingKeyDown)}
+            ?disabled=${this.disabled}
+          />
+        </div>
+        <p class="keybinding-help">
+          Press ${this._keybinding} to start/stop recording
+        </p>
+      </div>
+    `;
+    }
+};
+_DictationKeybindingSelector_instances = new WeakSet();
+_DictationKeybindingSelector_handleKeybindingInputFocus = function _DictationKeybindingSelector_handleKeybindingInputFocus() {
+    this._isCapturingKeybinding = true;
+};
+_DictationKeybindingSelector_handleKeybindingInputBlur = function _DictationKeybindingSelector_handleKeybindingInputBlur() {
+    this._isCapturingKeybinding = false;
+};
+_DictationKeybindingSelector_handleKeybindingKeyDown = function _DictationKeybindingSelector_handleKeybindingKeyDown(event) {
+    if (!this._isCapturingKeybinding) {
+        return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    this.dispatchEvent(keybindingChangedEvent(event.key, event.code));
+};
+DictationKeybindingSelector.styles = KeybindingSelectorStyles;
+__decorate([
+    consume({ context: keybindingContext, subscribe: true }),
+    state()
+], DictationKeybindingSelector.prototype, "_keybinding", void 0);
+__decorate([
+    property({ type: Boolean })
+], DictationKeybindingSelector.prototype, "disabled", void 0);
+__decorate([
+    state()
+], DictationKeybindingSelector.prototype, "_isCapturingKeybinding", void 0);
+DictationKeybindingSelector = __decorate([
+    customElement("dictation-keybinding-selector")
+], DictationKeybindingSelector);
+export { DictationKeybindingSelector };
+//# sourceMappingURL=keybinding-selector.js.map

package/dist/components/keybinding-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keybinding-selector.js","sourceRoot":"","sources":["../../src/components/keybinding-selector.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,wBAAwB,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAGrD,IAAM,2BAA2B,GAAjC,MAAM,2BAA4B,SAAQ,UAAU;IAApD;;;QAML,aAAQ,GAAY,KAAK,CAAC;QAG1B,2BAAsB,GAAY,KAAK,CAAC;IA+C1C,CAAC;IAxBC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;wCAIyB,IAAI,CAAC,WAAW;;;;;;;uBAOjC,uBAAA,IAAI,uGAA4B;wBAC/B,uBAAA,IAAI,sGAA2B;uBAChC,uBAAA,IAAI,oGAAyB;wBAC5B,IAAI,CAAC,QAAQ;;;;kBAInB,IAAI,CAAC,WAAW;;;KAG7B,CAAC;IACJ,CAAC;;;;IAzCC,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;AACrC,CAAC;;IAGC,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;AACtC,CAAC;qHAEwB,KAAoB;IAC3C,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC;QACjC,OAAO;IACT,CAAC;IAED,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,eAAe,EAAE,CAAC;IAExB,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;AACpE,CAAC;AAnBM,kCAAM,GAAG,wBAAwB,AAA3B,CAA4B;AARzC;IAFC,OAAO,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IACxD,KAAK,EAAE;gEACoB;AAG5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6DACF;AAG1B;IADC,KAAK,EAAE;2EACgC;AAT7B,2BAA2B;IADvC,aAAa,CAAC,+BAA+B,CAAC;GAClC,2BAA2B,CAwDvC","sourcesContent":["import { consume } from \"@lit/context\";\nimport { html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { keybindingContext } from \"../contexts/dictation-context.js\";\nimport KeybindingSelectorStyles from \"../styles/keybinding-selector.js\";\nimport { keybindingChangedEvent } from \"../utils/events.js\";\n\n@customElement(\"dictation-keybinding-selector\")\nexport class DictationKeybindingSelector extends LitElement {\n  @consume({ context: keybindingContext, subscribe: true })\n  @state()\n  _keybinding?: string | null;\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  @state()\n  _isCapturingKeybinding: boolean = false;\n\n  static styles = KeybindingSelectorStyles;\n\n  #handleKeybindingInputFocus(): void {\n    this._isCapturingKeybinding = true;\n  }\n\n  #handleKeybindingInputBlur(): void {\n    this._isCapturingKeybinding = false;\n  }\n\n  #handleKeybindingKeyDown(event: KeyboardEvent): void {\n    if (!this._isCapturingKeybinding) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n\n    this.dispatchEvent(keybindingChangedEvent(event.key, event.code));\n  }\n\n  render() {\n    return html`\n      <div>\n        <label>Keybinding</label>\n        <div class=\"keybinding-selector-wrapper\">\n          <div class=\"keybinding-key\">${this._keybinding}</div>\n          <input\n            type=\"text\"\n            class=\"keybinding-selector-input\"\n            .value=\"\"\n            placeholder=\"Click and press a key...\"\n            readonly\n            @focusin=${this.#handleKeybindingInputFocus}\n            @focusout=${this.#handleKeybindingInputBlur}\n            @keydown=${this.#handleKeybindingKeyDown}\n            ?disabled=${this.disabled}\n          />\n        </div>\n        <p class=\"keybinding-help\">\n          Press ${this._keybinding} to start/stop recording\n        </p>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"dictation-keybinding-selector\": DictationKeybindingSelector;\n  }\n}\n"]}

package/dist/components/language-selector.d.ts

@@ -1,24 +1,15 @@
-import { LitElement, type PropertyValues } from "lit";
-export declare class LanguageSelector extends LitElement {
-    private _languages?;
-    private _dictationConfig?;
+import type { Corti } from "@corti/sdk";
+import { LitElement } from "lit";
+export declare class DictationLanguageSelector extends LitElement {
+    #private;
+    _languages?: Corti.TranscribeSupportedLanguage[];
+    _dictationConfig?: Corti.TranscribeConfig;
     disabled: boolean;
-    _region?: string;
-    /**
-     * Internal cache of loaded languages to check if languages were auto-loaded or provided via property
-     * @private
-     */
-    private _loadedLanguages;
-    private _languagesAutoLoaded;
-    static styles: import("lit").CSSResult;
-    connectedCallback(): Promise<void>;
-    updated(changedProperties: PropertyValues<this>): void;
-    private _loadLanguages;
-    private _handleSelectLanguage;
+    static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        "language-selector": LanguageSelector;
+        "dictation-language-selector": DictationLanguageSelector;
     }
 }

package/dist/components/language-selector.js

@@ -4,53 +4,24 @@ 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;
 };
+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 _DictationLanguageSelector_instances, _DictationLanguageSelector_handleSelectLanguage;
 import { consume } from "@lit/context";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import { dictationConfigContext, languagesContext, regionContext, } from "../contexts/dictation-context.js";
+import { dictationConfigContext, languagesContext, } from "../contexts/dictation-context.js";
 import SelectStyles from "../styles/select.js";
 import { languageChangedEvent, languagesChangedEvent, } from "../utils/events.js";
-import { getLanguageName, getLanguagesByRegion } from "../utils/languages.js";
-let LanguageSelector = class LanguageSelector extends LitElement {
+import { getLanguageName } from "../utils/languages.js";
+let DictationLanguageSelector = class DictationLanguageSelector extends LitElement {
     constructor() {
         super(...arguments);
+        _DictationLanguageSelector_instances.add(this);
         this.disabled = false;
-        /**
-         * Internal cache of loaded languages to check if languages were auto-loaded or provided via property
-         * @private
-         */
-        this._loadedLanguages = [];
-    }
-    _languagesAutoLoaded() {
-        return this._loadedLanguages === this._languages;
-    }
-    async connectedCallback() {
-        super.connectedCallback();
-        if (this._languages) {
-            return;
-        }
-        await this._loadLanguages();
-    }
-    updated(changedProperties) {
-        if (changedProperties.has("_region") && this._languagesAutoLoaded()) {
-            this._loadLanguages();
-        }
-    }
-    async _loadLanguages() {
-        const { languages, defaultLanguage } = getLanguagesByRegion(this._region);
-        this._loadedLanguages = languages;
-        const selectedLanguage = this._dictationConfig?.primaryLanguage ?? defaultLanguage;
-        this.dispatchEvent(languagesChangedEvent(languages, selectedLanguage));
-        // Dispatch backward compatible event
-        if (selectedLanguage) {
-            this.dispatchEvent(languageChangedEvent(selectedLanguage));
-        }
-    }
-    _handleSelectLanguage(e) {
-        const language = e.target.value;
-        this.dispatchEvent(languagesChangedEvent(this._languages || [], language));
-        // Dispatch backward compatible event
-        this.dispatchEvent(languageChangedEvent(language));
     }
     render() {
         return html `
@@ -61,7 +32,7 @@ let LanguageSelector = class LanguageSelector extends LitElement {
         <select
           id="language-select"
           aria-labelledby="language-select-label"
-          @change=${this._handleSelectLanguage}
+          @change=${__classPrivateFieldGet(this, _DictationLanguageSelector_instances, "m", _DictationLanguageSelector_handleSelectLanguage)}
           ?disabled=${this.disabled || !this._languages || this._languages.length === 0}
         >
           ${this._languages?.map((language) => html `
@@ -77,24 +48,27 @@ let LanguageSelector = class LanguageSelector extends LitElement {
     `;
     }
 };
-LanguageSelector.styles = SelectStyles;
+_DictationLanguageSelector_instances = new WeakSet();
+_DictationLanguageSelector_handleSelectLanguage = function _DictationLanguageSelector_handleSelectLanguage(e) {
+    const language = e.target.value;
+    this.dispatchEvent(languagesChangedEvent(this._languages || [], language));
+    // Dispatch backward compatible event
+    this.dispatchEvent(languageChangedEvent(language));
+};
+DictationLanguageSelector.styles = SelectStyles;
 __decorate([
     consume({ context: languagesContext, subscribe: true }),
     state()
-], LanguageSelector.prototype, "_languages", void 0);
+], DictationLanguageSelector.prototype, "_languages", void 0);
 __decorate([
     consume({ context: dictationConfigContext, subscribe: true }),
     state()
-], LanguageSelector.prototype, "_dictationConfig", void 0);
+], DictationLanguageSelector.prototype, "_dictationConfig", void 0);
 __decorate([
     property({ type: Boolean })
-], LanguageSelector.prototype, "disabled", void 0);
-__decorate([
-    consume({ context: regionContext, subscribe: true }),
-    state()
-], LanguageSelector.prototype, "_region", void 0);
-LanguageSelector = __decorate([
-    customElement("language-selector")
-], LanguageSelector);
-export { LanguageSelector };
+], DictationLanguageSelector.prototype, "disabled", void 0);
+DictationLanguageSelector = __decorate([
+    customElement("dictation-language-selector")
+], DictationLanguageSelector);
+export { DictationLanguageSelector };
 //# sourceMappingURL=language-selector.js.map

package/dist/components/language-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"language-selector.js","sourceRoot":"","sources":["../../src/components/language-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Corti } from \"@corti/sdk\";\nimport { consume } from \"@lit/context\";\nimport { html, LitElement, type PropertyValues } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport {\n  dictationConfigContext,\n  languagesContext,\n  regionContext,\n} from \"../contexts/dictation-context.js\";\nimport SelectStyles from \"../styles/select.js\";\nimport {\n  languageChangedEvent,\n  languagesChangedEvent,\n} from \"../utils/events.js\";\nimport { getLanguageName, getLanguagesByRegion } from \"../utils/languages.js\";\n\n@customElement(\"language-selector\")\nexport class LanguageSelector extends LitElement {\n  @consume({ context: languagesContext, subscribe: true })\n  @state()\n  private _languages?: string[];\n\n  @consume({ context: dictationConfigContext, subscribe: true })\n  @state()\n  private _dictationConfig?: Corti.TranscribeConfig;\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  @consume({ context: regionContext, subscribe: true })\n  @state()\n  _region?: string;\n\n  /**\n   * Internal cache of loaded languages to check if languages were auto-loaded or provided via property\n   * @private\n   */\n  private _loadedLanguages: string[] = [];\n\n  private _languagesAutoLoaded(): boolean {\n    return this._loadedLanguages === this._languages;\n  }\n\n  static styles = SelectStyles;\n\n  async connectedCallback(): Promise<void> {\n    super.connectedCallback();\n\n    if (this._languages) {\n      return;\n    }\n\n    await this._loadLanguages();\n  }\n\n  updated(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has(\"_region\") && this._languagesAutoLoaded()) {\n      this._loadLanguages();\n    }\n  }\n\n  private async _loadLanguages(): Promise<void> {\n    const { languages, defaultLanguage } = getLanguagesByRegion(this._region);\n    this._loadedLanguages = languages;\n\n    const selectedLanguage =\n      this._dictationConfig?.primaryLanguage ?? defaultLanguage;\n\n    this.dispatchEvent(languagesChangedEvent(languages, selectedLanguage));\n\n    // Dispatch backward compatible event\n    if (selectedLanguage) {\n      this.dispatchEvent(languageChangedEvent(selectedLanguage));\n    }\n  }\n\n  private _handleSelectLanguage(e: Event): void {\n    const language = (e.target as HTMLSelectElement).value;\n\n    this.dispatchEvent(languagesChangedEvent(this._languages || [], language));\n\n    // Dispatch backward compatible event\n    this.dispatchEvent(languageChangedEvent(language));\n  }\n\n  render() {\n    return html`\n      <div>\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=${this._handleSelectLanguage}\n          ?disabled=${this.disabled || !this._languages || this._languages.length === 0}\n        >\n          ${this._languages?.map(\n            (language) => html`\n              <option\n                value=${language}\n                ?selected=${this._dictationConfig?.primaryLanguage === language}\n              >\n                ${getLanguageName(language)}\n              </option>\n            `,\n          )}\n        </select>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"language-selector\": LanguageSelector;\n  }\n}\n"]}
+{"version":3,"file":"language-selector.js","sourceRoot":"","sources":["../../src/components/language-selector.ts"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EACL,sBAAsB,EACtB,gBAAgB,GACjB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EACL,oBAAoB,EACpB,qBAAqB,GACtB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAGjD,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,UAAU;IAAlD;;;QAUL,aAAQ,GAAY,KAAK,CAAC;IAuC5B,CAAC;IA1BC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;oBAQK,uBAAA,IAAI,6FAAsB;sBACxB,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC;;YAE3E,IAAI,CAAC,UAAU,EAAE,GAAG,CACpB,CAAC,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAA;;wBAEN,QAAQ;4BACJ,IAAI,CAAC,gBAAgB,EAAE,eAAe,KAAK,QAAQ;;kBAE7D,eAAe,CAAC,QAAQ,CAAC;;aAE9B,CACF;;;KAGN,CAAC;IACJ,CAAC;;;2GAlCqB,CAAQ;IAC5B,MAAM,QAAQ,GAAI,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAC;IAEvD,IAAI,CAAC,aAAa,CAAC,qBAAqB,CAAC,IAAI,CAAC,UAAU,IAAI,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE3E,qCAAqC;IACrC,IAAI,CAAC,aAAa,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC,CAAC;AACrD,CAAC;AATM,gCAAM,GAAG,YAAY,AAAf,CAAgB;AAT7B;IAFC,OAAO,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IACvD,KAAK,EAAE;6DACyC;AAIjD;IAFC,OAAO,CAAC,EAAE,OAAO,EAAE,sBAAsB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IAC7D,KAAK,EAAE;mEACkC;AAG1C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2DACF;AAVf,yBAAyB;IADrC,aAAa,CAAC,6BAA6B,CAAC;GAChC,yBAAyB,CAiDrC","sourcesContent":["import type { Corti } from \"@corti/sdk\";\nimport { consume } from \"@lit/context\";\nimport { html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport {\n  dictationConfigContext,\n  languagesContext,\n} from \"../contexts/dictation-context.js\";\nimport SelectStyles from \"../styles/select.js\";\nimport {\n  languageChangedEvent,\n  languagesChangedEvent,\n} from \"../utils/events.js\";\nimport { getLanguageName } from \"../utils/languages.js\";\n\n@customElement(\"dictation-language-selector\")\nexport class DictationLanguageSelector extends LitElement {\n  @consume({ context: languagesContext, subscribe: true })\n  @state()\n  _languages?: Corti.TranscribeSupportedLanguage[];\n\n  @consume({ context: dictationConfigContext, subscribe: true })\n  @state()\n  _dictationConfig?: Corti.TranscribeConfig;\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  static styles = SelectStyles;\n\n  #handleSelectLanguage(e: Event): void {\n    const language = (e.target as HTMLSelectElement).value;\n\n    this.dispatchEvent(languagesChangedEvent(this._languages || [], language));\n\n    // Dispatch backward compatible event\n    this.dispatchEvent(languageChangedEvent(language));\n  }\n\n  render() {\n    return html`\n      <div>\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=${this.#handleSelectLanguage}\n          ?disabled=${this.disabled || !this._languages || this._languages.length === 0}\n        >\n          ${this._languages?.map(\n            (language) => html`\n              <option\n                value=${language}\n                ?selected=${this._dictationConfig?.primaryLanguage === language}\n              >\n                ${getLanguageName(language)}\n              </option>\n            `,\n          )}\n        </select>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"dictation-language-selector\": DictationLanguageSelector;\n  }\n}\n"]}

package/dist/components/mode-selector.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from "lit";
+import type { DictationMode } from "../types.js";
+export declare class DictationModeSelector extends LitElement {
+    #private;
+    _mode: DictationMode;
+    disabled: boolean;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "dictation-mode-selector": DictationModeSelector;
+    }
+}

package/dist/components/mode-selector.js

@@ -0,0 +1,73 @@
+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 _DictationModeSelector_instances, _DictationModeSelector_handleModeChange;
+import { consume } from "@lit/context";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { modeContext } from "../contexts/dictation-context.js";
+import ModeSelectorStyles from "../styles/mode-selector.js";
+import { modeChangedEvent } from "../utils/events.js";
+let DictationModeSelector = class DictationModeSelector extends LitElement {
+    constructor() {
+        super(...arguments);
+        _DictationModeSelector_instances.add(this);
+        this._mode = "toggle-to-talk";
+        this.disabled = false;
+    }
+    render() {
+        return html `
+      <div>
+        <label>Dictation Mode</label>
+        <div class="mode-selector-tabs">
+          <button
+            class=${classMap({
+            active: this._mode === "toggle-to-talk",
+            "mode-selector-tab": true,
+        })}
+            @click=${() => __classPrivateFieldGet(this, _DictationModeSelector_instances, "m", _DictationModeSelector_handleModeChange).call(this, "toggle-to-talk")}
+            ?disabled=${this.disabled}
+          >
+            Toggle-to-Talk
+          </button>
+          <button
+            class=${classMap({
+            active: this._mode === "push-to-talk",
+            "mode-selector-tab": true,
+        })}
+            @click=${() => __classPrivateFieldGet(this, _DictationModeSelector_instances, "m", _DictationModeSelector_handleModeChange).call(this, "push-to-talk")}
+            ?disabled=${this.disabled}
+          >
+            Push-to-Talk
+          </button>
+        </div>
+      </div>
+    `;
+    }
+};
+_DictationModeSelector_instances = new WeakSet();
+_DictationModeSelector_handleModeChange = function _DictationModeSelector_handleModeChange(mode) {
+    this.dispatchEvent(modeChangedEvent(mode));
+};
+DictationModeSelector.styles = ModeSelectorStyles;
+__decorate([
+    consume({ context: modeContext, subscribe: true }),
+    state()
+], DictationModeSelector.prototype, "_mode", void 0);
+__decorate([
+    property({ type: Boolean })
+], DictationModeSelector.prototype, "disabled", void 0);
+DictationModeSelector = __decorate([
+    customElement("dictation-mode-selector")
+], DictationModeSelector);
+export { DictationModeSelector };
+//# sourceMappingURL=mode-selector.js.map

package/dist/components/mode-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode-selector.js","sourceRoot":"","sources":["../../src/components/mode-selector.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,kBAAkB,MAAM,4BAA4B,CAAC;AAE5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAG/C,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;;QAGL,UAAK,GAAkB,gBAAgB,CAAC;QAGxC,aAAQ,GAAY,KAAK,CAAC;IAqC5B,CAAC;IA7BC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;oBAKK,QAAQ,CAAC;YACf,MAAM,EAAE,IAAI,CAAC,KAAK,KAAK,gBAAgB;YACvC,mBAAmB,EAAE,IAAI;SAC1B,CAAC;qBACO,GAAG,EAAE,CAAC,uBAAA,IAAI,iFAAkB,MAAtB,IAAI,EAAmB,gBAAgB,CAAC;wBAC3C,IAAI,CAAC,QAAQ;;;;;oBAKjB,QAAQ,CAAC;YACf,MAAM,EAAE,IAAI,CAAC,KAAK,KAAK,cAAc;YACrC,mBAAmB,EAAE,IAAI;SAC1B,CAAC;qBACO,GAAG,EAAE,CAAC,uBAAA,IAAI,iFAAkB,MAAtB,IAAI,EAAmB,cAAc,CAAC;wBACzC,IAAI,CAAC,QAAQ;;;;;;KAMhC,CAAC;IACJ,CAAC;;;2FAhCiB,IAAmB;IACnC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC;AAC7C,CAAC;AAJM,4BAAM,GAAG,kBAAkB,AAArB,CAAsB;AALnC;IAFC,OAAO,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IAClD,KAAK,EAAE;oDACgC;AAGxC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDACF;AANf,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CA2CjC","sourcesContent":["import { consume } from \"@lit/context\";\nimport { html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { modeContext } from \"../contexts/dictation-context.js\";\nimport ModeSelectorStyles from \"../styles/mode-selector.js\";\nimport type { DictationMode } from \"../types.js\";\nimport { modeChangedEvent } from \"../utils/events.js\";\n\n@customElement(\"dictation-mode-selector\")\nexport class DictationModeSelector extends LitElement {\n  @consume({ context: modeContext, subscribe: true })\n  @state()\n  _mode: DictationMode = \"toggle-to-talk\";\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  static styles = ModeSelectorStyles;\n\n  #handleModeChange(mode: DictationMode): void {\n    this.dispatchEvent(modeChangedEvent(mode));\n  }\n\n  render() {\n    return html`\n      <div>\n        <label>Dictation Mode</label>\n        <div class=\"mode-selector-tabs\">\n          <button\n            class=${classMap({\n              active: this._mode === \"toggle-to-talk\",\n              \"mode-selector-tab\": true,\n            })}\n            @click=${() => this.#handleModeChange(\"toggle-to-talk\")}\n            ?disabled=${this.disabled}\n          >\n            Toggle-to-Talk\n          </button>\n          <button\n            class=${classMap({\n              active: this._mode === \"push-to-talk\",\n              \"mode-selector-tab\": true,\n            })}\n            @click=${() => this.#handleModeChange(\"push-to-talk\")}\n            ?disabled=${this.disabled}\n          >\n            Push-to-Talk\n          </button>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"dictation-mode-selector\": DictationModeSelector;\n  }\n}\n"]}

package/dist/components/recording-button.d.ts

@@ -1,10 +1,11 @@
 import type { Corti } from "@corti/sdk";
 import { type CSSResultGroup, LitElement } from "lit";
-import type { ProxyOptions } from "../types.js";
+import type { DictationMode, ProxyOptions, RecordingState } from "../types.js";
 import "./audio-visualiser.js";
 import "../icons/icons.js";
-export declare class RecordingButton extends LitElement {
-    private _recordingState;
+export declare class DictationRecordingButton extends LitElement {
+    #private;
+    _recordingState: RecordingState;
     _selectedDevice?: MediaDeviceInfo;
     _accessToken?: string;
     _authConfig?: Corti.BearerOptions;
@@ -14,17 +15,10 @@ export declare class RecordingButton extends LitElement {
     _socketUrl?: string;
     _socketProxy?: ProxyOptions;
     _debug_displayAudio?: boolean;
-    preventFocus: boolean;
-    private _mediaController;
-    private _dictationController;
+    _keybinding?: string | null;
+    _mode?: DictationMode;
+    allowButtonFocus: boolean;
     static styles: CSSResultGroup;
-    private _handleMouseDown;
-    private _handleWebSocketMessage;
-    private _handleWebSocketError;
-    private _handleWebSocketClose;
-    private _handleStart;
-    private _handleStop;
-    private _handleClick;
     startRecording(): void;
     stopRecording(): void;
     toggleRecording(): void;
@@ -32,6 +26,6 @@ export declare class RecordingButton extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        "recording-button": RecordingButton;
+        "dictation-recording-button": DictationRecordingButton;
     }
 }