@pod-os/elements 0.37.0 → 0.38.0-rc.4b2b787.0

package/dist/collection/components/pos-switch/pos-switch.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { subscribeResource } from "../events/ResourceAware";
+import { combineLatest, firstValueFrom, Subject, takeUntil } from "rxjs";
 /**
  * Selects a child template to render based on properties of the subject resource, usually defined by an ancestor `pos-resource` element.
  * See [storybook](https://pod-os.github.io/PodOS/storybook/?path=/story/basics--pos-switch) for an example.
@@ -8,27 +9,56 @@ import { subscribeResource } from "../events/ResourceAware";
 export class PosSwitch {
     constructor() {
         this.error = null;
+        this.disconnected$ = new Subject();
         this.receiveResource = (resource) => {
-            this.resource = resource;
+            // reset any existing resource
+            this.disconnected$.next();
+            this.resource = undefined;
+            let observables = [];
+            if (this.caseElements.some(caseElement => caseElement.hasAttribute('if-typeof'))) {
+                const observeTypes = resource.observeTypes().pipe(takeUntil(this.disconnected$));
+                observeTypes.subscribe(types => {
+                    this.types = types;
+                });
+                observables.push(observeTypes);
+            }
+            if (this.caseElements.some(caseElement => caseElement.hasAttribute('if-property'))) {
+                const observeRelations = resource.observeRelations().pipe(takeUntil(this.disconnected$));
+                observeRelations.subscribe(relations => {
+                    this.relations = relations;
+                });
+                observables.push(observeRelations);
+            }
+            if (this.caseElements.some(caseElement => caseElement.hasAttribute('if-rev'))) {
+                const observeReverseRelations = resource.observeReverseRelations().pipe(takeUntil(this.disconnected$));
+                observeReverseRelations.subscribe(reverseRelations => {
+                    this.reverseRelations = reverseRelations;
+                });
+                observables.push(observeReverseRelations);
+            }
+            firstValueFrom(combineLatest(observables)).then(() => (this.resource = resource));
         };
     }
     componentWillLoad() {
-        subscribeResource(this);
         const caseElements = this.host.querySelectorAll('pos-case');
         if (caseElements.length == 0) {
             this.error = 'No pos-case elements found';
         }
         else {
-            this.caseElements = caseElements;
+            this.caseElements = Array.from(caseElements);
+            subscribeResource(this);
         }
     }
     test(caseElement) {
         let state = null;
         if (caseElement.getAttribute('if-typeof') !== null) {
-            state = this.resource
-                .types()
-                .map(x => x.uri)
-                .includes(caseElement.getAttribute('if-typeof'));
+            state = this.types.map(x => x.uri).includes(caseElement.getAttribute('if-typeof'));
+        }
+        if (caseElement.getAttribute('if-property') !== null) {
+            state = this.relations.map(x => x.predicate).includes(caseElement.getAttribute('if-property'));
+        }
+        if (caseElement.getAttribute('if-rev') !== null) {
+            state = this.reverseRelations.map(x => x.predicate).includes(caseElement.getAttribute('if-rev'));
         }
         if (caseElement.getAttribute('not') != null) {
             state = !state;
@@ -58,13 +88,19 @@ export class PosSwitch {
         const activeElementsContent = activeElements.map(el => el.querySelector('template').innerHTML).join('\n');
         return h(Host, { innerHTML: activeElementsContent });
     }
+    disconnectedCallback() {
+        this.disconnected$.next();
+        this.disconnected$.complete();
+    }
     static get is() { return "pos-switch"; }
     static get states() {
         return {
             "error": {},
             "resource": {},
             "caseElements": {},
-            "templateString": {}
+            "types": {},
+            "relations": {},
+            "reverseRelations": {}
         };
     }
     static get events() {