2.0.21

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-element",
-  "version": "2.0.20",
+  "version": "2.0.21",
   "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.20',
+  version: '2.0.21',
   description: 'a custom element class extending lit element class'
 }

ts/dees-element.classes.resolvedirective.ts

@@ -0,0 +1,37 @@
+import { noChange } from 'lit';
+import { AsyncDirective, directive } from 'lit/async-directive.js';
+import { rxjs } from '@pushrocks/smartrx';
+
+class ResolveDirective 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 resolve = directive(ResolveDirective);

ts/index.ts

@@ -17,7 +17,8 @@ export { domtools };
 
 // DeesElements exports
 export * from './dees-element.classes.dees-element.js';
-export * from './dees-element.classes.asyncdirective.js';
+export * from './dees-element.classes.subscribedirective.js';
+export * from './dees-element.classes.resolvedirective.js';
 
 /**
  * a singleton instance of CssManager