✨ feat(angular): provide events as streams (#1024)

feat(angular): provide events as streams

.changeset/tough-dogs-tie.md

@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-output-target-angular': minor
+---
+
+provide component events as a stream

packages/output-targets/angular/angular-component-lib/utils.ts

@@ -1,4 +1,6 @@
-import { EventEmitter } from '@angular/core'
+/* eslint-disable */
+/* tslint:disable */
+import { fromEvent } from 'rxjs'
 
 export const proxyInputs = (Cmp: any, inputs: string[]) => {
   const Prototype = Cmp.prototype
@@ -26,20 +28,30 @@ export const proxyMethods = (Cmp: any, methods: string[]) => {
   })
 }
 
-export const proxyOutputs = (instance: any, _el: HTMLElement, events: string[]) => {
-  events.forEach(eventName => {
-    instance[eventName] = new EventEmitter()
-  })
+export const proxyOutputs = (instance: any, el: any, events: string[]) => {
+  events.forEach(eventName => (instance[eventName] = fromEvent(el, eventName)))
+}
+
+export const defineCustomElement = (tagName: string, customElement: any) => {
+  if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+    customElements.define(tagName, customElement)
+  }
 }
 
 // tslint:disable-next-line: only-arrow-functions
-export function ProxyCmp(opts: { inputs?: any; methods?: any }) {
+export function ProxyCmp(opts: { defineCustomElementFn?: () => void; inputs?: any; methods?: any }) {
   const decorator = function (cls: any) {
-    if (opts.inputs) {
-      proxyInputs(cls, opts.inputs)
+    const { defineCustomElementFn, inputs, methods } = opts
+
+    if (defineCustomElementFn !== undefined) {
+      defineCustomElementFn()
+    }
+
+    if (inputs) {
+      proxyInputs(cls, inputs)
     }
-    if (opts.methods) {
-      proxyMethods(cls, opts.methods)
+    if (methods) {
+      proxyMethods(cls, methods)
     }
     return cls
   }