diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index c158cc3..d6c630c 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -40,50 +40,60 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: ["message"],
-  data() {
-    return {
-      giver: null,
-      description: "",
-      hours: "0",
-      visible: false,
-    };
-  },
-  methods: {
-    open(giver) {
-      // giver: GiverInputInfo
-      this.giver = giver;
-      this.visible = true;
-    },
-    close() {
-      this.visible = false;
-    },
-    increment() {
-      this.hours = `${(parseFloat(this.hours) || 0) + 1}`;
-    },
-    decrement() {
-      this.hours = `${Math.max(0, (parseFloat(this.hours) || 1) - 1)}`;
-    },
-    confirm() {
-      this.close();
-      this.$emit("dialog-result", {
-        action: "confirm",
-        giver: this.giver,
-        hours: parseFloat(this.hours),
-        description: this.description,
-      });
-      this.description = "";
-      this.giver = null;
-      this.hours = "0";
-    },
-    cancel() {
-      this.close();
-      this.$emit("dialog-result", { action: "cancel" });
-    },
-  },
-};
+<script lang="ts">
+import {Vue, Component, Prop, Emit} from "vue-facing-decorator";
+
+@Component
+export default class GiftedDialog extends Vue {
+  @Prop message = "";
+
+  giver = null;
+  description = "";
+  hours = "0";
+  visible = false;
+
+  open(giver) {
+    // giver: GiverInputInfo
+    this.giver = giver;
+    this.visible = true;
+  }
+  
+  close() {
+    this.visible = false;
+  }
+
+  increment() {
+    this.hours = `${(parseFloat(this.hours) || 0) + 1}`;
+  }
+
+  decrement() {
+    this.hours = `${Math.max(0, (parseFloat(this.hours) || 1) - 1)}`;
+  }
+
+  @Emit("dialog-result")
+  confirm() {
+    result = {
+      action: "confirm",
+      giver: this.giver,
+      hours: parseFloat(this.hours),
+      description: this.description,
+    };    
+    this.close();
+    this.description = "";
+    this.giver = null;
+    this.hours = "0";
+
+    return result;
+  }
+
+  @Emit("dialog-result")
+  cancel() {
+    result = { action: "cancel" };
+    this.close();
+    return result;
+  }
+
+}
 </script>
 
 <style>