{"version":3,"sources":["webpack:///./src/components/panels/Tts/Panel.vue?8e1c","webpack:///./src/components/panels/Tts/Panel.vue","webpack:///./src/components/panels/Tts/Panel.vue?c6bd"],"names":["class","talk","type","name","placeholder","disabled","talking","mixins","Utils","props","pluginName","String","required","data","methods","event","args","target","querySelectorAll","reduce","obj","el","value","length","request","render","__scopeId"],"mappings":"kHAAA,W,iICCOA,MAAM,iB,GAEFA,MAAM,wB,GAKNA,MAAM,wB,GAKNA,MAAM,iB,EAEP,eAA+B,KAA5BA,MAAM,mBAAiB,S,wEAdlC,eAkBM,MAlBN,EAkBM,CAjBJ,eAgBO,QAhBA,SAAM,8CAAU,EAAAC,KAAA,qBAAI,e,CACzB,eAIM,MAJN,EAIM,CAHJ,eAEQ,cADN,eAA6E,SAAtEC,KAAK,OAAOC,KAAK,OAAOC,YAAY,cAAeC,SAAU,EAAAC,S,yBAGxE,eAIM,MAJN,EAIM,CAHJ,eAEQ,cADN,eAAmF,SAA5EJ,KAAK,OAAOC,KAAK,WAAWC,YAAY,gBAAiBC,SAAU,EAAAC,S,yBAG9E,eAIM,MAJN,EAIM,CAHJ,eAES,UAFDJ,KAAK,SAAUG,SAAU,EAAAC,S,CAC/B,G,kGAUK,GACbH,KAAM,QACNI,OAAQ,CAACC,EAAA,MAETC,MAAO,CACLC,WAAY,CACVR,KAAMS,OACNC,UAAU,IAIdC,KAXa,WAYX,MAAO,CACLP,SAAS,IAIbQ,QAAS,CACDb,KADC,SACIc,GAAO,qKACVC,EAAO,eAAID,EAAME,OAAOC,iBAAiB,UAAUC,QAAO,SAACC,EAAKC,GAGpE,OAFIA,EAAGC,MAAMC,SACXH,EAAIC,EAAGlB,MAAQkB,EAAGC,OACbF,IACN,IAEH,EAAKd,SAAU,EAPC,kBASR,EAAKkB,QAAL,UAAgB,EAAKd,WAArB,QAAuCM,GAT/B,uBAWd,EAAKV,SAAU,EAXD,4E,UCtCtB,EAAOmB,OAAS,EAChB,EAAOC,UAAY,kBAEJ,U","file":"static/js/chunk-57f8147d.da91a3db.js","sourcesContent":["export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader-v16/dist/index.js??ref--0-1!./Panel.vue?vue&type=style&index=0&id=a248454a&lang=scss&scoped=true\"","<template>\n  <div class=\"tts-container\">\n    <form @submit.prevent=\"talk\">\n      <div class=\"field text-container\">\n        <label>\n          <input type=\"text\" name=\"text\" placeholder=\"Text to say\" :disabled=\"talking\">\n        </label>\n      </div>\n      <div class=\"field lang-container\">\n        <label>\n          <input type=\"text\" name=\"language\" placeholder=\"Language code\" :disabled=\"talking\">\n        </label>\n      </div>\n      <div class=\"field buttons\">\n        <button type=\"submit\" :disabled=\"talking\">\n          <i class=\"fa fa-volume-up\"></i>\n        </button>\n      </div>\n    </form>\n  </div>\n</template>\n\n<script>\nimport Utils from \"@/Utils\";\n\nexport default {\n  name: \"Panel\",\n  mixins: [Utils],\n\n  props: {\n    pluginName: {\n      type: String,\n      required: true,\n    },\n  },\n\n  data() {\n    return {\n      talking: false,\n    }\n  },\n\n  methods: {\n    async talk(event) {\n      const args = [...event.target.querySelectorAll('input')].reduce((obj, el) => {\n        if (el.value.length)\n          obj[el.name] = el.value\n        return obj\n      }, {})\n\n      this.talking = true\n      try {\n        await this.request(`${this.pluginName}.say`, args)\n      } finally {\n        this.talking = false\n      }\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.tts-container {\n  height: max-content;\n  background: $background-color;\n  display: flex;\n  justify-content: center;\n  border: $default-border-3;\n  box-shadow: $border-shadow-bottom-right;\n\n  @media screen and (max-width: calc(#{$tablet - 1px})) {\n    width: 100%;\n  }\n\n  @media screen and (min-width: $tablet) {\n    width: 80%;\n    border-radius: 1.5em;\n    margin: 1.5em auto;\n  }\n\n  @media screen and (min-width: $desktop) {\n    width: 30em;\n  }\n\n  form {\n    width: 100%;\n    border: none;\n    box-shadow: none;\n    padding: 1em .5em;\n    margin: 0;\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    flex-direction: row;\n\n    .field {\n      margin: 0 .5em;\n    }\n\n    .text-container {\n      width: 100%;\n      margin-bottom: 1em;\n    }\n\n    input[type=text] {\n      width: 100%;\n    }\n\n    button {\n      border-radius: 1.5em;\n    }\n\n    input, button {\n      &:hover {\n        border-color: $default-hover-fg;\n      }\n    }\n  }\n}\n</style>","import { render } from \"./Panel.vue?vue&type=template&id=a248454a&scoped=true\"\nimport script from \"./Panel.vue?vue&type=script&lang=js\"\nexport * from \"./Panel.vue?vue&type=script&lang=js\"\n\nimport \"./Panel.vue?vue&type=style&index=0&id=a248454a&lang=scss&scoped=true\"\nscript.render = render\nscript.__scopeId = \"data-v-a248454a\"\n\nexport default script"],"sourceRoot":""}