@pod-os/elements 0.37.0-rc.c8b54d1.0 → 0.37.0

package/dist/cjs/pos-relations_2.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DCpu_nnH.js');
+var index = require('./index-Be_lnf0w.js');
 var ResourceAware = require('./ResourceAware-uqh9ZRDt.js');
 
 const posRelationsCss = () => `:host{--background-base-color:color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);--background-color-even:hsl(from var(--background-base-color) h s calc(l + 7));--background-color-odd:hsl(from var(--background-base-color) h s calc(l + 10));--border-color:var(--background-base-color)}dd{padding:0;margin:0}dl{display:flex;flex-direction:column;gap:var(--size-1);padding:0;margin:0}dt{margin-bottom:var(--size-1)}.predicate-values:nth-child(odd){background-color:var(--background-color-odd)}.predicate-values:nth-child(even){background-color:var(--background-color-even)}.predicate-values{display:flex;flex-direction:column;border:var(--size-px) solid var(--border-color);padding:var(--size-2);gap:var(--size-1);.values{display:flex;flex-direction:column;gap:var(--size-3)}}pos-rich-link{--background-color:inherit}`;

package/dist/cjs/pos-subjects.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-DCpu_nnH.js');
-var index$1 = require('./index-FUnpyb19.js');
+var index = require('./index-Be_lnf0w.js');
+var index$1 = require('./index-OR1wNkjG.js');
 var ResourceAware = require('./ResourceAware-uqh9ZRDt.js');
 
 const posSubjectsCss = () => `:host{--background-base-color:color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);--background-color-even:hsl(from var(--background-base-color) h s calc(l + 7));--background-color-odd:hsl(from var(--background-base-color) h s calc(l + 10));--border-color:var(--background-base-color)}ul{display:flex;flex-direction:column;gap:var(--size-2);margin:0;padding:0;li{border:var(--size-px) solid var(--border-color);padding:var(--size-4);list-style-type:none;&:nth-child(even){background-color:var(--background-color-even)}&:nth-child(odd){background-color:var(--background-color-odd)}}}`;

package/dist/cjs/pos-switch.cjs.entry.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var index = require('./index-Be_lnf0w.js');
+var ResourceAware = require('./ResourceAware-uqh9ZRDt.js');
+
+const PosSwitch = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.subscribeResource = index.createEvent(this, "pod-os:resource", 7);
+        this.error = null;
+        this.receiveResource = (resource) => {
+            this.resource = resource;
+        };
+    }
+    componentWillLoad() {
+        ResourceAware.subscribeResource(this);
+        const caseElements = this.host.querySelectorAll('pos-case');
+        if (caseElements.length == 0) {
+            this.error = 'No pos-case elements found';
+        }
+        else {
+            this.caseElements = caseElements;
+        }
+    }
+    test(caseElement) {
+        let state = null;
+        if (caseElement.getAttribute('if-typeof') !== null) {
+            state = this.resource
+                .types()
+                .map(x => x.uri)
+                .includes(caseElement.getAttribute('if-typeof'));
+        }
+        if (caseElement.getAttribute('not') != null) {
+            state = !state;
+        }
+        return state;
+    }
+    render() {
+        if (this.error) {
+            return this.error;
+        }
+        if (!this.resource) {
+            return null;
+        }
+        let state = null;
+        let activeElements = [];
+        this.caseElements.forEach(el => {
+            const elemState = this.test(el);
+            const includeCondition = state !== true || el.getAttribute('else') === null;
+            if (elemState && includeCondition) {
+                state = elemState;
+                activeElements.push(el);
+            }
+            if (elemState === null && includeCondition) {
+                activeElements.push(el);
+            }
+        });
+        const activeElementsContent = activeElements.map(el => el.querySelector('template').innerHTML).join('\n');
+        return index.h(index.Host, { innerHTML: activeElementsContent });
+    }
+    get host() { return index.getElement(this); }
+};
+
+exports.pos_switch = PosSwitch;

package/dist/cjs/pos-tool-attachments.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DCpu_nnH.js');
+var index = require('./index-Be_lnf0w.js');
 var usePodOS = require('./usePodOS-BnFzjtlx.js');
 var useResource = require('./useResource-IN7KmaP3.js');
 
@@ -20,7 +20,7 @@ const PosToolAttachments = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'c7670fa2c000099af02d33a702a404e9889d4552' }, index.h("section", { key: '1b3ce82d5101ec4c0b6e6df26ede473c7287b747' }, index.h("article", { key: 'b9929952d801ab53a848985af7ed08c18072a662' }, index.h("h2", { key: 'dc39c20da1730c6ea01b32a99dc8b0680a33b6c2' }, "Attachments"), index.h("pos-attachments", { key: '65fd33e592be78e1a15ac9c2238321973a3f8612', ref: it => (this.attachmentsElement = it) }))), index.h("section", { key: '4ebe089659ed2c517440a9ff06141f332e44c56d' }, ((_a = this.resource) === null || _a === void 0 ? void 0 : _a.editable) ? (index.h("pos-upload", { accept: ['*/*'], uploader: file => {
+        return (index.h(index.Host, { key: '90a688233dde6bed413d57c11d89833629e1e2c8' }, index.h("section", { key: 'd47427736806216b35cb5e77bcabf12b82a03b31' }, index.h("article", { key: 'a77c2f9e41165effdc6e41fed79fa6b48dcc753e' }, index.h("h2", { key: '5e4d9a23ceb3c88075ef7785ca1b6fba201714ca' }, "Attachments"), index.h("pos-attachments", { key: '6a1001d633b0cad66178818b7a32c76ebbc4e46c', ref: it => (this.attachmentsElement = it) }))), index.h("section", { key: 'ea6c933f2a5fb67d6e63ca799c14920361eafe1f' }, ((_a = this.resource) === null || _a === void 0 ? void 0 : _a.editable) ? (index.h("pos-upload", { accept: ['*/*'], uploader: file => {
                 const result = this.os.attachments().uploadAndAddAttachment(this.resource, file);
                 result.map(it => {
                     this.attachmentsElement.addToList({

package/dist/cjs/pos-value.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DCpu_nnH.js');
+var index = require('./index-Be_lnf0w.js');
 var ResourceAware = require('./ResourceAware-uqh9ZRDt.js');
 
 const PosValue = class {

package/dist/collection/collection-manifest.json

@@ -43,7 +43,10 @@
     "components/pos-rich-link/pos-rich-link.js",
     "components/pos-router/pos-router.js",
     "components/pos-select-term/pos-select-term.js",
+    "components/pos-share/pos-share.js",
     "components/pos-subjects/pos-subjects.js",
+    "components/pos-switch/pos-switch.js",
+    "components/pos-switch/pos-case/pos-case.js",
     "components/pos-tool-select/pos-tool-select.js",
     "components/pos-type-badges/pos-type-badges.js",
     "components/pos-type-index-entries/pos-type-index-entries.js",
@@ -53,9 +56,10 @@
     "components/pos-value/pos-value.js",
     "tools/pos-tool-attachments/pos-tool-attachments.js"
   ],
+  "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.40.1",
+    "version": "4.43.2",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

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

@@ -126,7 +126,8 @@ export class PosApp {
                         "PodOS": {
                             "location": "import",
                             "path": "@pod-os/core",
-                            "id": "../core/types/index.d.ts::PodOS"
+                            "id": "../core/types/index.d.ts::PodOS",
+                            "referenceLocation": "PodOS"
                         }
                     }
                 }

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

@@ -63,7 +63,8 @@ export class PosAttachments {
                         "Attachment": {
                             "location": "import",
                             "path": "@pod-os/core",
-                            "id": "../core/types/index.d.ts::Attachment"
+                            "id": "../core/types/index.d.ts::Attachment",
+                            "referenceLocation": "Attachment"
                         }
                     },
                     "return": "Promise<void>"

package/dist/collection/components/pos-container-contents/pos-container-contents.js

@@ -1,15 +1,20 @@
 import { LdpContainer } from "@pod-os/core";
 import { h, Host } from "@stencil/core";
 import { subscribeResource } from "../events/ResourceAware";
+import { Subject, takeUntil } from "rxjs";
 export class PosContainerContents {
     constructor() {
         this.contents = [];
         this.loading = true;
         this.createNewItem = null;
+        this.disconnected$ = new Subject();
         this.receiveResource = (resource) => {
             this.container = resource.assume(LdpContainer);
             this.loading = false;
-            this.contents = this.container.contains().sort((a, b) => a.name.localeCompare(b.name));
+            this.container
+                .observeContains()
+                .pipe(takeUntil(this.disconnected$))
+                .subscribe(contains => (this.contents = contains.sort((a, b) => a.name.localeCompare(b.name))));
         };
     }
     onCreateNewFile() {
@@ -35,6 +40,10 @@ export class PosContainerContents {
         }
         return (h(Host, null, h("pos-container-toolbar", { "onPod-os:create-new-file": () => this.onCreateNewFile(), "onPod-os:create-new-folder": () => this.onCreateNewFolder() }), items.length > 0 ? h("ul", { "aria-label": "Container contents" }, items) : h("p", null, "The container is empty")));
     }
+    disconnectedCallback() {
+        this.disconnected$.next();
+        this.disconnected$.unsubscribe();
+    }
     static get is() { return "pos-container-contents"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {

package/dist/collection/components/pos-container-contents/pos-create-new-container-item/pos-create-new-container-item.js

@@ -85,7 +85,8 @@ export class PosCreateNewContainerItem {
                         "LdpContainer": {
                             "location": "import",
                             "path": "@pod-os/core",
-                            "id": "../core/types/index.d.ts::LdpContainer"
+                            "id": "../core/types/index.d.ts::LdpContainer",
+                            "referenceLocation": "LdpContainer"
                         }
                     }
                 },
@@ -139,7 +140,8 @@ export class PosCreateNewContainerItem {
                         "Problem": {
                             "location": "import",
                             "path": "@pod-os/core",
-                            "id": "../core/types/index.d.ts::Problem"
+                            "id": "../core/types/index.d.ts::Problem",
+                            "referenceLocation": "Problem"
                         }
                     }
                 }

package/dist/collection/components/pos-markdown-document/pos-markdown-document.js

@@ -92,7 +92,8 @@ export class PosMarkdownDocument {
                         "SolidFile": {
                             "location": "import",
                             "path": "@pod-os/core",
-                            "id": "../core/types/index.d.ts::SolidFile"
+                            "id": "../core/types/index.d.ts::SolidFile",
+                            "referenceLocation": "SolidFile"
                         }
                     }
                 },

package/dist/collection/components/pos-navigation/bar/pos-navigation-bar.css

@@ -1,5 +1,8 @@
 section.current {
   display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 var(--size-2) 0 0;
   height: var(--pos-navigation-bar-height);
   flex-grow: 1;
   gap: 0;
@@ -9,30 +12,47 @@ section.current {
   &:focus-within {
     outline: var(--pos-input-focus-outline);
   }
-}
 
-section.current button {
-  cursor: pointer;
-  font-size: var(--scale-1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-grow: 1;
-  background: none;
-  color: var(--pos-normal-text-color);
-  outline: none;
-  border: none;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  &:focus {
-    text-decoration: underline;
-  }
-  :first-child {
+  button {
+    cursor: pointer;
+    font-size: var(--scale-1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
     flex-grow: 1;
+    background: none;
+    color: var(--pos-normal-text-color);
+    outline: none;
+    border: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    &:focus {
+      text-decoration: underline;
+    }
+    :first-child {
+      flex-grow: 1;
+    }
+    svg {
+      width: var(--size-6);
+      color: var(--pos-subtle-text-color);
+    }
   }
-  svg {
-    width: var(--size-6);
-    color: var(--pos-subtle-text-color);
+  pos-share {
+    height: 80%;
+    &:hover {
+      &::part(button) {
+        color: var(--pos-primary-color);
+        background-color: var(--pos-border-color);
+        border-radius: var(--radius-full);
+      }
+    }
+    &::part(button) {
+      font-size: var(--size-4);
+      background: none;
+      outline: none;
+      border: none;
+      color: var(--pos-subtle-text-color);
+    }
   }
 }

package/dist/collection/components/pos-navigation/bar/pos-navigation-bar.js

@@ -11,7 +11,7 @@ export class PosNavigationBar {
     }
     render() {
         const ariaLabel = this.current ? `${this.current.label()} (Click to search or enter URI)` : 'Search or enter URI';
-        return (h("section", { key: '5f49aa9dad9d07550ee8ffbee90036cbc1efda55', class: "current" }, this.current && this.searchIndexReady && h("pos-make-findable", { key: '85974a4772aaf8cad3a11cdcd49e6df10141bfe3', uri: this.current.uri }), h("button", { key: '40660a3455b0f3392c68d7aea0075b102a1762a2', "aria-label": ariaLabel, onClick: () => this.onClick() }, h("div", { key: '9ab8922175d701f714f72aefb95745cf5ae4bb95' }, this.current ? this.current.label() : 'Search or enter URI'), this.icon())));
+        return (h("section", { key: '5f49aa9dad9d07550ee8ffbee90036cbc1efda55', class: "current" }, this.current && this.searchIndexReady && h("pos-make-findable", { key: '85974a4772aaf8cad3a11cdcd49e6df10141bfe3', uri: this.current.uri }), h("button", { key: '40660a3455b0f3392c68d7aea0075b102a1762a2', "aria-label": ariaLabel, onClick: () => this.onClick() }, h("div", { key: '9ab8922175d701f714f72aefb95745cf5ae4bb95' }, this.current ? this.current.label() : 'Search or enter URI'), this.icon()), this.current && h("pos-share", { key: '3b80c1987f9f5138b11b8a106171fc73a236f426', uri: this.current.uri })));
     }
     icon() {
         return (h("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" })));
@@ -40,7 +40,8 @@ export class PosNavigationBar {
                         "Thing": {
                             "location": "import",
                             "path": "@pod-os/core",
-                            "id": "../core/types/index.d.ts::Thing"
+                            "id": "../core/types/index.d.ts::Thing",
+                            "referenceLocation": "Thing"
                         }
                     }
                 },

package/dist/collection/components/pos-new-thing-form/pos-new-thing-form.js

@@ -14,7 +14,7 @@ export class PosNewThingForm {
         subscribePodOs(this);
     }
     render() {
-        return (h("form", { key: 'a362c5b749dd744123973987ff8b0291485b465e', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: '45c78b0b48955cc157d04f547285b4ae4c19c38f', htmlFor: "type" }, "Type"), h("pos-select-term", { key: 'e3c3ab9abdbbb585916d95ba1aa14a066dbc5bd0', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: 'c696f8ed862d40d3c366ef0ede5e88e574928db3', htmlFor: "name" }, "Name"), h("input", { key: '89e6289e24ca9d3969da97c7aeb22224db1c376c', id: "name", type: "text", value: this.name, onInput: e => this.handleChange(e) }), this.newUri ? (h("div", { id: "new-uri", title: "This will be the URI of the new thing" }, this.newUri)) : null, h("input", { key: 'b9520afef34177c6f14ab0798c045536d5661a2a', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
+        return (h("form", { key: '64781cfb0e570d2368325d674c6637c581bb87c2', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: '409e04f147430042eb334024fc7061574ab543cf', htmlFor: "type" }, "Type"), h("pos-select-term", { key: '8d5d580ee1f1e2e2c60cac0cc06798e94a0d28c3', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: 'a45199618751e24b7d4a1bc13ad85c599cc93d1c', htmlFor: "name" }, "Name"), h("input", { key: 'bee3be7a680abbffc08caa5c549b68b1e653872d', id: "name", type: "text", value: this.name, onInput: e => this.handleChange(e) }), this.newUri ? (h("div", { id: "new-uri", title: "This will be the URI of the new thing" }, this.newUri)) : null, h("input", { key: 'e8fab4d442188f7f2f325ff7bde3dce6d3f772f6', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.name = event.target.value;

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

@@ -38,7 +38,7 @@ export class PosRouter {
         this.routeChanged.emit(this.uri);
     }
     render() {
-        return h("slot", { key: '8b09de3dbbd253665cd541b9f264b0dcdc774354' });
+        return h("slot", { key: '2775fc2835158ccd8d540e4f27edfd497eafe7a9' });
     }
     static get is() { return "pos-router"; }
     static get originalStyleUrls() {

package/dist/collection/components/pos-select-term/pos-select-term.js

@@ -19,7 +19,7 @@ export class PosSelectTerm {
         this.termSelected.emit({ uri: event.target.value });
     }
     render() {
-        return (h(Host, { key: '2e995b15a3b76a13cd7e11d09670121a6191b5ce' }, h("input", { key: 'ad79f1b410312790d4f5cd1f398b2eec3c04aad7', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: 'e3cc9ce85b75033bac29a32ca8e55c57535a9659', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
+        return (h(Host, { key: 'a4050d72acd62d907f0fd4c3b90c54194700871c' }, h("input", { key: '99b35c4a14a2623599ba237bb4af0b79c0761196', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: 'd64ad5ea83200014c6de5cd4720f29922494982c', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
     }
     static get is() { return "pos-select-term"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pos-share/openNewTab.js

@@ -0,0 +1,3 @@
+export function openNewTab(url) {
+    window.open(url.toString(), '_blank');
+}

package/dist/collection/components/pos-share/pos-share.css

@@ -0,0 +1,36 @@
+:host {
+  display: flex;
+  aspect-ratio: 1/1;
+  height: var(--size-8);
+  align-items: center;
+  justify-content: center;
+}
+
+sl-dropdown {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &::part(trigger) {
+    height: 100%;
+    width: 100%;
+  }
+  button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+  }
+}
+
+sl-menu-item[disabled] {
+  &::part(base) {
+    cursor: default;
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,111 @@
+import { h } from "@stencil/core";
+import "@shoelace-style/shoelace/dist/components/icon/icon.js";
+import "@shoelace-style/shoelace/dist/components/menu/menu.js";
+import "@shoelace-style/shoelace/dist/components/dropdown/dropdown.js";
+import "@shoelace-style/shoelace/dist/components/menu-item/menu-item.js";
+import "@shoelace-style/shoelace/dist/components/divider/divider.js";
+import { usePodOS } from "../events/usePodOS";
+import { openNewTab } from "./openNewTab";
+/**
+ * Allows sharing a resource with other apps, people, etc.
+ */
+export class PosShare {
+    constructor() {
+        this.apps = [];
+    }
+    async resourceLoaded(e) {
+        if (e.detail === this.uri) {
+            await this.updateApps();
+        }
+    }
+    async componentWillLoad() {
+        this.os = await usePodOS(this.el);
+        await this.updateApps();
+    }
+    async updateApps() {
+        const thing = this.os.store.get(this.uri);
+        this.apps = this.os.proposeAppsFor(thing);
+    }
+    onSelect(e) {
+        const { value } = e.detail.item;
+        if (value === 'copy-uri') {
+            navigator.clipboard.writeText(this.uri);
+        }
+        else {
+            openNewTab(value.urlTemplate.expand({ uri: this.uri }));
+        }
+    }
+    render() {
+        return (h("sl-dropdown", { key: '67ce5a1f7e5630ff40a6e79eaa9ab7f32b5f1a00' }, h("button", { key: '6c946718e7af9f0ef212c3853641f06a24d79474', slot: "trigger", "aria-label": "Share", part: "button" }, h("sl-icon", { key: 'effc4e9bdf4236451636f1b4622605c87746d414', name: "share" })), h("sl-menu", { key: '2f1c8e707e71a699803c2897fda8f1e79ccd5267' }, h("sl-menu-item", { key: '5a59cffe8351c23389620b38b60f8ccd24dce351', value: "copy-uri" }, h("sl-icon", { key: 'ab9b9d7f8a2a91e0a4f5ac657b9ff390418948cc', slot: "prefix", name: "copy" }), "Copy URI"), this.apps.length > 0 && h(OpenWithApps, { key: '718fbda37b7171df356afe02e6d6f7f1e8e8cd26', apps: this.apps }))));
+    }
+    static get is() { return "pos-share"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pos-share.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pos-share.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "uri": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URI of the resource to share."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "uri"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "apps": {},
+            "os": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "uri",
+                "methodName": "updateApps"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "pod-os:resource-loaded",
+                "method": "resourceLoaded",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "sl-select",
+                "method": "onSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+function OpenWithApps({ apps }) {
+    return [
+        h("sl-divider", null),
+        h("sl-menu-item", { disabled: true }, "Open with..."),
+        apps.map(it => h("sl-menu-item", { value: it }, it.name)),
+    ];
+}

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

@@ -0,0 +1,88 @@
+/**
+ * Defines a template to use if the specified condition is met - to be used with [pos-switch](https://pod-os.org/reference/elements/components/pos-switch/).
+ * See [storybook](https://pod-os.github.io/PodOS/storybook/?path=/story/basics--pos-switch) for an example.
+ */
+export class PosCase {
+    constructor() {
+        this.error = null;
+    }
+    componentWillLoad() {
+        const templateElement = this.host.querySelector('template');
+        if (templateElement == null) {
+            this.error = 'No template element found';
+        }
+    }
+    render() {
+        if (this.error)
+            return this.error;
+        return null;
+    }
+    static get is() { return "pos-case"; }
+    static get properties() {
+        return {
+            "ifTypeof": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Test if the resource is of the specified type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "if-typeof"
+            },
+            "not": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Negates the result of the test"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "not"
+            },
+            "else": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The test only evaluates to true if tests for preceding cases have failed"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "else"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "error": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+}