2.0.19

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-element",
-  "version": "2.0.18",
+  "version": "2.0.19",
   "private": false,
   "description": "a custom element class extending lit element class",
   "main": "dist_ts/index.js",

ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@designestate/dees-element',
-  version: '2.0.18',
+  version: '2.0.19',
   description: 'a custom element class extending lit element class'
 }

ts/dees-element.classes.asyncdirective.ts

@@ -0,0 +1,37 @@
+import { noChange } from 'lit';
+import { AsyncDirective, directive } from 'lit/async-directive.js';
+import { rxjs } from '@pushrocks/smartrx';
+
+class SubscribeDirective extends AsyncDirective {
+  observable: rxjs.Observable<unknown> | undefined;
+  sub: rxjs.Subscription | null = null;
+
+  render(observable: rxjs.Observable<unknown>) {
+    if (this.observable !== observable) {
+      this.sub?.unsubscribe();
+      this.observable = observable;
+
+      if (this.isConnected) {
+        this.subscribe(observable);
+      }
+    }
+
+    return noChange;
+  }
+
+  subscribe(observable: rxjs.Observable<unknown>) {
+    this.sub = observable.subscribe((v: unknown) => {
+      this.setValue(v);
+    });
+  }
+
+  disconnected() {
+    this.sub?.unsubscribe();
+  }
+
+  reconnected() {
+    this.subscribe(this.observable!);
+  }
+}
+
+export const subscribe = directive(SubscribeDirective);

ts/index.ts

@@ -16,7 +16,8 @@ import * as domtools from '@designestate/dees-domtools';
 export { domtools };
 
 // DeesElements exports
-export { DeesElement } from './dees-element.classes.dees-element.js';
+export * from './dees-element.classes.dees-element.js';
+export * from './dees-element.classes.asyncdirective.js';
 
 /**
  * a singleton instance of CssManager