@progress/kendo-vue-buttons/SpeechToText/SpeechToTextButton.mjs

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { defineComponent as k, computed as w, createVNode as E, ref as R, watch as z, onMounted as C, onUnmounted as F } from "vue";
import { KendoSpeechRecognition as H } from "@progress/kendo-webspeech-common";
import { Button as N } from "../Button.mjs";
import { microphoneOutlineIcon as A, stopSmIcon as T } from "@progress/kendo-svg-icons";
function W(e) {
  return new H(e);
}
let m = /* @__PURE__ */ function(e) {
  return e.WebSpeech = "WebSpeech", e.None = "None", e;
}({});
const $ = /* @__PURE__ */ k({
  name: "KendoSpeechToTextButton",
  props: {
    lang: {
      type: String,
      default: "en-US"
    },
    continuous: {
      type: Boolean,
      default: !1
    },
    interimResults: {
      type: Boolean,
      default: !1
    },
    maxAlternatives: {
      type: Number,
      default: 1
    },
    integrationMode: {
      type: String,
      default: m.WebSpeech
    },
    onStart: {
      type: Function
    },
    onResult: {
      type: Function
    },
    onEnd: {
      type: Function
    },
    onError: {
      type: Function
    },
    svgIcon: {
      type: Object,
      default: A
    },
    iconSize: {
      type: String,
      default: "medium"
    },
    disabled: {
      type: Boolean,
      default: void 0
    },
    size: {
      type: String,
      default: "medium"
    },
    rounded: {
      type: String,
      default: "medium"
    },
    fillMode: {
      type: String,
      default: "solid"
    },
    themeColor: {
      type: String,
      default: "base"
    },
    title: {
      type: String,
      default: "Speech to Text Button"
    },
    ariaLabel: {
      type: String,
      default: "Start speech recognition"
    }
  },
  setup(e, {
    emit: a,
    expose: c
  }) {
    const i = R(null), n = R(!1), d = () => {
      var t;
      return (t = i.value) == null ? void 0 : t.isActive();
    }, r = () => e.integrationMode !== m.None, l = typeof window != "undefined" && !("webkitSpeechRecognition" in window || "SpeechRecognition" in window) ? (e.onError && e.onError({
      errorMessage: "Speech Recognition API is not supported in this browser."
    }), !1) : !0, s = () => {
      var t;
      n.value || (r && ((t = i.value) == null || t.start()), n.value = !0);
    }, o = () => {
      var t;
      n.value && (r && ((t = i.value) == null || t.stop()), n.value = !1);
    }, f = () => {
      var t;
      n.value && r && ((t = i.value) == null || t.abort(), n.value = !1);
    }, S = () => {
      l && (n.value ? v() : u());
    }, u = async () => {
      n.value || e.onStart && (await e.onStart(), s());
    }, I = (t) => {
      const h = t.results, M = h.length - 1, y = h[M], B = Array.from(y).map((b) => ({
        transcript: b.transcript,
        confidence: b.confidence
      }));
      a("result", {
        isFinal: y.isFinal,
        alternatives: B
      });
    }, v = async () => {
      n.value && e.onEnd && (await e.onEnd(), o());
    }, x = (t) => {
      a("error", t);
    }, p = () => {
      var t;
      l && e.integrationMode === m.WebSpeech && ((t = i.value) != null && t.isActive() && o(), i.value = W({
        lang: e.lang,
        continuous: e.continuous,
        interimResults: e.interimResults,
        integrationMode: e.integrationMode,
        maxAlternatives: e.maxAlternatives,
        events: {
          start: u,
          result: I,
          end: v,
          error: x
        }
      }));
    };
    return z(() => ({
      lang: e.lang,
      continuous: e.continuous,
      interimResults: e.interimResults,
      integrationMode: e.integrationMode,
      maxAlternatives: e.maxAlternatives
    }), () => {
      p();
    }, {
      deep: !0
    }), C(() => {
      p();
    }), F(() => {
      var t;
      (t = i.value) != null && t.isInActiveState && o();
    }), c({
      start: s,
      stop: o,
      abort: f,
      isActive: d
    }), {
      clickHandler: S,
      isInActiveState: n
    };
  },
  render() {
    const {
      ariaLabel: e,
      svgIcon: a,
      fillMode: c,
      rounded: i,
      size: n,
      disabled: d,
      themeColor: r,
      iconSize: g,
      title: l
    } = this.$props, {
      className: s,
      style: o,
      id: f
    } = this.$attrs, S = w(() => ["k-speech-to-text-button", s, {
      "k-listening": this.isInActiveState
    }]), u = w(() => this.isInActiveState ? T : a || A);
    return E(N, {
      id: f,
      style: o,
      class: S.value,
      onClick: this.clickHandler,
      svgIcon: u.value,
      iconSize: g,
      fillMode: c,
      rounded: i,
      size: n,
      themeColor: r,
      "aria-label": e,
      disabled: d,
      title: l
    }, null);
  }
});
export {
  $ as SpeechToTextButton,
  m as SpeechToTextButtonMode
};