@pod-os/elements 0.26.1-rc.e49d800.0 → 0.27.0

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

@@ -2,11 +2,13 @@ import { h, Host } from "@stencil/core";
 import session from "../../store/session";
 export class PosLogin {
     constructor() {
+        this.customLoggedInComponent = false;
         this.setOs = async (os) => {
             this.os = os;
         };
     }
     componentWillLoad() {
+        this.customLoggedInComponent = !!this.host.querySelector('[slot="if-logged-in"]');
         this.initializeOsEmitter.emit(this.setOs);
     }
     login(event) {
@@ -23,7 +25,16 @@ export class PosLogin {
         this.dialog.showModal();
     }
     render() {
-        return (h(Host, { key: '3a9b64d2fde82e4067095067d852f3a793c9c6a2' }, h("div", { key: '36ce0bb0f9d85b90f5faf9dc47c64c8d0dcf88e9', class: "container" }, session.state.isLoggedIn ? (h("pos-resource", { uri: session.state.webId }, h("span", { class: "user-data" }, h("pos-picture", null), h("pos-label", null)))) : (''), !session.state.isLoggedIn && (h("button", { key: '228a4dd94d2497acc6f3ecd13f70e2ff40daf8dc', id: "login", onClick: () => this.openDialog() }, "Login")), session.state.isLoggedIn && (h("button", { key: '2212c8e0c939656179a66c2b3ff74227dab42476', id: "logout", onClick: () => this.logout() }, "Logout"))), h("pos-dialog", { key: '2cd9a1060b1494606848d3dcaea21cad2ede8103', ref: el => (this.dialog = el) }, h("span", { key: '4852dc345b9271c6aca71d4615627d76985d548d', slot: "title" }, "Sign in to your Pod"), h("pos-login-form", { key: 'f6919d6a8863d3c8535ba786a5334741550bc8a5', "onPod-os:idp-url-selected": ev => this.login(ev), slot: "content" }))));
+        return (h(Host, { key: 'dded3af9b4a95f30b9eda0414ff90ef77503f730' }, h("div", { key: 'd97326a13eb116bf47e7bd2c0887cfca59b792ad', class: "container" }, !session.state.isLoggedIn ? (h("button", { id: "login", onClick: () => this.openDialog() }, "Login")) : (this.loggedInComponents())), h("pos-dialog", { key: 'fd361fd4961fb96d74e402c4f41288a191c56bd5', ref: el => (this.dialog = el) }, h("span", { key: '2254d45b88f06dab5b3c5ce593c01fb3b35bd935', slot: "title" }, "Sign in to your Pod"), h("pos-login-form", { key: '70a0080686c1f8064887b918273451c65c9a7813', "onPod-os:idp-url-selected": ev => this.login(ev), slot: "content" }))));
+    }
+    loggedInComponents() {
+        return this.customLoggedInComponent ? h("slot", { name: "if-logged-in" }) : this.defaultLoggedInComponents();
+    }
+    defaultLoggedInComponents() {
+        return [
+            h("pos-resource", { uri: session.state.webId }, h("span", { class: "user-data" }, h("pos-picture", null), h("pos-label", null))),
+            h("button", { id: "logout", onClick: () => this.logout() }, "Logout"),
+        ];
     }
     static get is() { return "pos-login"; }
     static get encapsulation() { return "shadow"; }
@@ -39,7 +50,8 @@ export class PosLogin {
     }
     static get states() {
         return {
-            "os": {}
+            "os": {},
+            "customLoggedInComponent": {}
         };
     }
     static get events() {
@@ -60,8 +72,15 @@ export class PosLogin {
                 }
             }];
     }
+    static get elementRef() { return "host"; }
     static get listeners() {
         return [{
+                "name": "pod-os:logout",
+                "method": "logout",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
                 "name": "pod-os:login",
                 "method": "onLogin",
                 "target": "document",

package/dist/collection/components/pos-login/pos-login.js.map

@@ -1 +1 @@
-{"version":3,"file":"pos-login.js","sourceRoot":"","sources":["../../../../src/components/pos-login/pos-login.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEvF,OAAO,OAAO,MAAM,qBAAqB,CAAC;AAO1C,MAAM,OAAO,QAAQ;IALrB;QAcE,UAAK,GAAG,KAAK,EAAE,EAAS,EAAE,EAAE;YAC1B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACf,CAAC,CAAC;KAsDH;IA5DC,iBAAiB;QACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAMD,KAAK,CAAC,KAA0B;QAC9B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;IACnB,CAAC;IAKD,OAAO;QACL,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAED,UAAU;QACR,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,WAAW;gBACnB,OAAO,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAC1B,oBAAc,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK;oBACpC,YAAM,KAAK,EAAC,WAAW;wBACrB,sBAAe;wBACf,oBAAa,CACR,CACM,CAChB,CAAC,CAAC,CAAC,CACF,EAAE,CACH;gBACA,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,IAAI,CAC5B,+DAAQ,EAAE,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,YAE1C,CACV;gBACA,OAAO,CAAC,KAAK,CAAC,UAAU,IAAI,CAC3B,+DAAQ,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,aAEvC,CACV,CACG;YACN,mEAAY,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;gBACvC,6DAAM,IAAI,EAAC,OAAO,0BAA2B;gBAC7C,oGAA2C,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,IAAI,EAAC,SAAS,GAAG,CACvE,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { PodOS } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Host, Listen, State } from '@stencil/core';\n\nimport session from '../../store/session';\n\n@Component({\n  tag: 'pos-login',\n  shadow: true,\n  styleUrl: 'pos-login.css',\n})\nexport class PosLogin {\n  @Event({ eventName: 'pod-os:init' }) initializeOsEmitter: EventEmitter;\n\n  @State() os: PodOS;\n\n  componentWillLoad() {\n    this.initializeOsEmitter.emit(this.setOs);\n  }\n\n  setOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  login(event: CustomEvent<string>) {\n    const idpUrl = event.detail;\n    this.os.login(idpUrl);\n  }\n\n  logout() {\n    this.os.logout();\n  }\n\n  private dialog: HTMLPosDialogElement;\n\n  @Listen('pod-os:login', { target: 'document' })\n  onLogin() {\n    this.openDialog();\n  }\n\n  openDialog() {\n    this.dialog.showModal();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"container\">\n          {session.state.isLoggedIn ? (\n            <pos-resource uri={session.state.webId}>\n              <span class=\"user-data\">\n                <pos-picture />\n                <pos-label />\n              </span>\n            </pos-resource>\n          ) : (\n            ''\n          )}\n          {!session.state.isLoggedIn && (\n            <button id=\"login\" onClick={() => this.openDialog()}>\n              Login\n            </button>\n          )}\n          {session.state.isLoggedIn && (\n            <button id=\"logout\" onClick={() => this.logout()}>\n              Logout\n            </button>\n          )}\n        </div>\n        <pos-dialog ref={el => (this.dialog = el)}>\n          <span slot=\"title\">Sign in to your Pod</span>\n          <pos-login-form onPod-os:idp-url-selected={ev => this.login(ev)} slot=\"content\" />\n        </pos-dialog>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pos-login.js","sourceRoot":"","sources":["../../../../src/components/pos-login/pos-login.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEhG,OAAO,OAAO,MAAM,qBAAqB,CAAC;AAO1C,MAAM,OAAO,QAAQ;IALrB;QAaU,4BAAuB,GAAY,KAAK,CAAC;QAOjD,UAAK,GAAG,KAAK,EAAE,EAAS,EAAE,EAAE;YAC1B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACf,CAAC,CAAC;KA4DH;IAnEC,iBAAiB;QACf,IAAI,CAAC,uBAAuB,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QAClF,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAMD,KAAK,CAAC,KAA0B;QAC9B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACxB,CAAC;IAGD,MAAM;QACJ,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;IACnB,CAAC;IAKD,OAAO;QACL,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAED,UAAU;QACR,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,WAAW,IACnB,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAC3B,cAAQ,EAAE,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,YAE1C,CACV,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,kBAAkB,EAAE,CAC1B,CACG;YACN,mEAAY,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;gBACvC,6DAAM,IAAI,EAAC,OAAO,0BAA2B;gBAC7C,oGAA2C,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,IAAI,EAAC,SAAS,GAAG,CACvE,CACR,CACR,CAAC;IACJ,CAAC;IAEO,kBAAkB;QACxB,OAAO,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,cAAc,GAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,yBAAyB,EAAE,CAAC;IAC7G,CAAC;IAEO,yBAAyB;QAC/B,OAAO;YACL,oBAAc,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK;gBACpC,YAAM,KAAK,EAAC,WAAW;oBACrB,sBAAe;oBACf,oBAAa,CACR,CACM;YACf,cAAQ,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,aAEvC;SACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { PodOS } from '@pod-os/core';\nimport { Component, Element, Event, EventEmitter, h, Host, Listen, State } from '@stencil/core';\n\nimport session from '../../store/session';\n\n@Component({\n  tag: 'pos-login',\n  shadow: true,\n  styleUrl: 'pos-login.css',\n})\nexport class PosLogin {\n  @Event({ eventName: 'pod-os:init' }) initializeOsEmitter: EventEmitter;\n\n  @State() os: PodOS;\n\n  @Element() host: HTMLElement;\n\n  @State()\n  private customLoggedInComponent: boolean = false;\n\n  componentWillLoad() {\n    this.customLoggedInComponent = !!this.host.querySelector('[slot=\"if-logged-in\"]');\n    this.initializeOsEmitter.emit(this.setOs);\n  }\n\n  setOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  login(event: CustomEvent<string>) {\n    const idpUrl = event.detail;\n    this.os.login(idpUrl);\n  }\n\n  @Listen('pod-os:logout', { target: 'document' })\n  logout() {\n    this.os.logout();\n  }\n\n  private dialog: HTMLPosDialogElement;\n\n  @Listen('pod-os:login', { target: 'document' })\n  onLogin() {\n    this.openDialog();\n  }\n\n  openDialog() {\n    this.dialog.showModal();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"container\">\n          {!session.state.isLoggedIn ? (\n            <button id=\"login\" onClick={() => this.openDialog()}>\n              Login\n            </button>\n          ) : (\n            this.loggedInComponents()\n          )}\n        </div>\n        <pos-dialog ref={el => (this.dialog = el)}>\n          <span slot=\"title\">Sign in to your Pod</span>\n          <pos-login-form onPod-os:idp-url-selected={ev => this.login(ev)} slot=\"content\" />\n        </pos-dialog>\n      </Host>\n    );\n  }\n\n  private loggedInComponents() {\n    return this.customLoggedInComponent ? <slot name=\"if-logged-in\"></slot> : this.defaultLoggedInComponents();\n  }\n\n  private defaultLoggedInComponents() {\n    return [\n      <pos-resource uri={session.state.webId}>\n        <span class=\"user-data\">\n          <pos-picture />\n          <pos-label />\n        </span>\n      </pos-resource>,\n      <button id=\"logout\" onClick={() => this.logout()}>\n        Logout\n      </button>,\n    ];\n  }\n}\n"]}

package/dist/collection/components/pos-login-form/pos-login-form.js

@@ -8,7 +8,7 @@ export class PosLoginForm {
         this.canSubmit = Boolean(this.idpUrl);
     }
     render() {
-        return (h("form", { key: '6c54aa03972bf5af3779c1e3f874b99574232821', method: "dialog", onSubmit: () => this.handleSubmit() }, h("label", { key: 'a5def7569abeb0a2591886d48fa0deb2c7f6039c', htmlFor: "idpUrl" }, "Please enter your Identity Provider"), h("input", { key: '1da8575dccea9a777f00cb8a7f96435654a582bc', id: "idpUrl", type: "url", value: this.idpUrl, required: true, onInput: e => this.handleChange(e), list: "suggestedIssuers", placeholder: "Type to search..." }), h("datalist", { key: '1818988df2f8a825194eb3503979d6c6adac3619', id: "suggestedIssuers" }, h("option", { key: '25e1b3fd84610e0664c25c3ca9cd535bf7558357', value: "https://solidcommunity.net" }, "solidcommunity.net"), h("option", { key: '5635e434dc4bf406a3664cf5cb28489b5b9218fc', value: "https://solidweb.org" }, "solidweb.org"), h("option", { key: 'd4d301023b40f84b5f445d14290ef3bc589cff56', value: "https://solidweb.me" }, "solidweb.me"), h("option", { key: '39f968af206347c83e4271724e9090543fcec43e', value: "https://inrupt.net" }, "inrupt.net"), h("option", { key: '381767d06a60e16b9323cb15b4298db2eac71d82', value: "https://login.inrupt.com" }, "Inrupt PodSpaces"), h("option", { key: 'd4461d0bb2bfba0ec97f276951b6534dee1ffd51', value: "https://trinpod.us" }, "trinpod.us"), h("option", { key: '80aa0ef7de3ec8dd53d06402c116a6c97747a24f', value: "https://use.id" }, "use.id"), h("option", { key: '794bee3c5a2b29738f25bb67bfb918754fe016ef', value: "https://solid.redpencil.io" }, "redpencil.io"), h("option", { key: '88e27225e7252c90bfb24f21a72bd70c9e3408f4', value: "https://datapod.grant.io" }, "Data Pod (grant.io)"), h("option", { key: '033b75773e898b4fed2507c5064686fb0ad56e03', value: "https://teamid.live" }, "teamid.live")), h("input", { key: 'c8dc41c5d6a892e623d42f5b1839af2728929abd', id: "login", type: "submit", value: "Login", disabled: !this.canSubmit })));
+        return (h("form", { key: '30eab981894b50a2681e10a68606c87e0d07a235', method: "dialog", onSubmit: () => this.handleSubmit() }, h("label", { key: '97ceb026754eba3f7b2d14b2dc47f842d601f8c0', htmlFor: "idpUrl" }, "Please enter your Identity Provider"), h("input", { key: '2c5c709ab36bbf017291e37991e3da93c150ad8a', id: "idpUrl", type: "url", value: this.idpUrl, required: true, onInput: e => this.handleChange(e), list: "suggestedIssuers", placeholder: "Type to search..." }), h("datalist", { key: '0baa3fada6f2dbb7c11cadaa52430628710fcc20', id: "suggestedIssuers" }, h("option", { key: 'b69926e6ad5e0c2d71a18ae95ef68e8ec1c1ffaa', value: "https://solidcommunity.net" }, "solidcommunity.net"), h("option", { key: '551d5bb9df7fe416e10a64f072020e1c4fdcb407', value: "https://solidweb.org" }, "solidweb.org"), h("option", { key: '5461e8bbe8c8e1a33d4cae2bb8c82e51bd78fde2', value: "https://solidweb.me" }, "solidweb.me"), h("option", { key: '8a46f5b818ca408db889abd68f6087a56db3788d', value: "https://inrupt.net" }, "inrupt.net"), h("option", { key: '533935f58b3230a223bd0f8e38a4800d6e357017', value: "https://login.inrupt.com" }, "Inrupt PodSpaces"), h("option", { key: '2e47e0832aaa3786283d4ca667efe4af246e8b0c', value: "https://trinpod.us" }, "trinpod.us"), h("option", { key: '259af90ed0e39da4ea3148643dde06125ee8e349', value: "https://use.id" }, "use.id"), h("option", { key: '2259f1ca0e0fa91ffbaa8aeddc7336bb94eed05b', value: "https://solid.redpencil.io" }, "redpencil.io"), h("option", { key: '29244565c8f61e38d7bc15039a6ec990ca8765c0', value: "https://datapod.grant.io" }, "Data Pod (grant.io)"), h("option", { key: '6be3b3c1171669fe3a9405d68623208dafc41439', value: "https://teamid.live" }, "teamid.live")), h("input", { key: '4b967c6bb05a87a007eebf4ef3495d6b342da784', id: "login", type: "submit", value: "Login", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.validate();

package/dist/collection/components/pos-make-findable/pos-make-findable.css

@@ -40,51 +40,6 @@ button.main {
   }
 }
 
-.options {
-  position: absolute;
-  animation: fadeIn 300ms;
-  padding: 0;
-  margin-top: var(--size-1);
-  z-index: var(--layer-top);
-
-  ol {
-    display: flex;
-    flex-direction: column;
-    box-shadow: var(--shadow-md);
-    backdrop-filter: var(--blur-md);
-    border-radius: var(--radius-xs);
-    overflow: hidden;
-    color: var(--color-grey-900);
-    background-color: var(--color-grey-200);
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    label {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      transition: all 300ms var(--ease-in-out-sine);
-      margin: 0;
-      border: none;
-      outline: none;
-      padding: var(--size-2);
-      width: var(--size-full);
-
-      &:hover,
-      &:focus {
-        filter: brightness(80%);
-      }
-
-      &:active {
-        filter: brightness(90%);
-      }
-    }
-  }
-  label:has(input:checked) {
-    background-color: var(--color-green-100);
-  }
-}
-
 svg {
   display: inline-block;
   height: var(--size-6);
@@ -94,9 +49,10 @@ svg {
 }
 
 button.main:hover,
-button.open {
+sl-dropdown[open] button {
   &.success {
     background: var(--color-green-200);
+    color: var(--color-green-700);
   }
   width: var(--size-full);
   height: var(--pos-navigation-bar-height);
@@ -107,12 +63,3 @@ button.open {
     display: inline-block;
   }
 }
-
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}

package/dist/collection/components/pos-make-findable/pos-make-findable.js

@@ -2,6 +2,7 @@ import { h, Host } from "@stencil/core";
 import { LabelIndex } from "@pod-os/core";
 import { subscribePodOs } from "../events/PodOsAware";
 import session from "../../store/session";
+import "./shoelace";
 export class PosMakeFindable {
     constructor() {
         this.indexes = [];
@@ -22,17 +23,6 @@ export class PosMakeFindable {
     disconnectedCallback() {
         this.unsubscribeSessionChange && this.unsubscribeSessionChange();
     }
-    hideOptions(event) {
-        // @ts-ignore
-        if (!this.el.contains(event.target)) {
-            this.showOptions = false;
-        }
-    }
-    handleKeyDown(ev) {
-        if (ev.key === 'Escape') {
-            this.showOptions = false;
-        }
-    }
     updateUri(uri) {
         this.thing = this.os.store.get(uri);
         this.isIndexed = this.checkIfIndexed(uri);
@@ -43,6 +33,7 @@ export class PosMakeFindable {
     getLabelIndexes(profile) {
         if (profile) {
             this.indexes = profile.getPrivateLabelIndexes().map(it => this.os.store.get(it).assume(LabelIndex));
+            this.showOptions = this.indexes.length > 1;
             this.isIndexed = this.checkIfIndexed(this.uri);
         }
     }
@@ -53,10 +44,7 @@ export class PosMakeFindable {
             await this.addToLabelIndex(index);
             this.indexUpdatedEmitter.emit(index);
         }
-        else if (this.indexes.length > 1) {
-            this.showOptions = !this.showOptions;
-        }
-        else {
+        else if (this.indexes.length === 0) {
             const index = await this.createDefaultLabelIndex();
             await this.addToLabelIndex(index);
             this.indexCreatedEmitter.emit(index);
@@ -70,7 +58,6 @@ export class PosMakeFindable {
         catch (e) {
             this.errorEmitter.emit(e);
         }
-        this.showOptions = false;
     }
     async createDefaultLabelIndex() {
         try {
@@ -85,14 +72,22 @@ export class PosMakeFindable {
             return null;
         }
         const label = 'Make this findable';
-        return (h(Host, null, h("button", { type: "button", "aria-label": label, class: { main: true, open: this.showOptions, success: this.isIndexed }, onClick: e => this.onClick(e), title: "" }, this.isIndexed ? h(IconSuccess, null) : h(IconMakeFindable, null), h("p", null, label)), this.showOptions && (h("div", { class: "options" }, h("ol", { role: "listbox" }, this.indexes.map((index) => (h("li", { role: "option" }, h("label", null, h("input", { type: "checkbox", checked: index.contains(this.uri), onChange: e => this.chooseOption(e, index) }), h("pos-resource", { uri: index.uri, lazy: true }, h("pos-label", null)))))))))));
+        const button = (h("button", { type: "button", slot: "trigger", "aria-label": label, class: { main: true, success: this.isIndexed }, onClick: e => this.onClick(e), title: "" }, this.isIndexed ? h(IconSuccess, null) : h(IconMakeFindable, null), h("p", null, label)));
+        if (this.showOptions) {
+            return (h(Host, null, h("sl-dropdown", null, button, h("sl-menu", { role: "listbox" }, this.indexes.map((index) => (h("sl-menu-item", { role: "option", value: index, type: "checkbox", checked: index.contains(this.uri) }, h("pos-resource", { uri: index.uri, lazy: true }, h("pos-label", null)))))))));
+        }
+        else {
+            return button;
+        }
     }
-    async chooseOption(e, index) {
+    async onSelect(e) {
+        const index = e.detail.item.value;
         e.preventDefault();
         await this.addToLabelIndex(index);
         this.indexUpdatedEmitter.emit(index);
     }
     static get is() { return "pos-make-findable"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["pos-make-findable.css"]
@@ -208,14 +203,8 @@ export class PosMakeFindable {
     }
     static get listeners() {
         return [{
-                "name": "click",
-                "method": "hideOptions",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "keydown",
-                "method": "handleKeyDown",
+                "name": "sl-select",
+                "method": "onSelect",
                 "target": undefined,
                 "capture": false,
                 "passive": false

package/dist/collection/components/pos-make-findable/pos-make-findable.js.map

@@ -1 +1 @@
-{"version":3,"file":"pos-make-findable.js","sourceRoot":"","sources":["../../../../src/components/pos-make-findable/pos-make-findable.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\nimport { LabelIndex, PodOS, Thing, WebIdProfile } from '@pod-os/core';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\nimport session from '../../store/session';\n\n@Component({\n  tag: 'pos-make-findable',\n  styleUrl: 'pos-make-findable.css',\n})\nexport class PosMakeFindable implements PodOsAware {\n  @Prop() uri!: string;\n\n  @State() os: PodOS;\n  @State() thing: Thing;\n  @State() indexes: LabelIndex[] = [];\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n  @State() unsubscribeSessionChange: undefined | (() => void);\n\n  @State() showOptions = false;\n  @State() isIndexed = false;\n\n  @Event({ eventName: 'pod-os:error' }) errorEmitter: EventEmitter;\n  @Event({ eventName: 'pod-os:search:index-updated' }) indexUpdatedEmitter: EventEmitter;\n  @Event({ eventName: 'pod-os:search:index-created' }) indexCreatedEmitter: EventEmitter;\n\n  @Element() el: HTMLElement;\n\n  componentWillLoad() {\n    subscribePodOs(this);\n  }\n\n  disconnectedCallback() {\n    this.unsubscribeSessionChange && this.unsubscribeSessionChange();\n  }\n\n  @Listen('click', { target: 'document' })\n  hideOptions(event: MouseEvent) {\n    // @ts-ignore\n    if (!this.el.contains(event.target)) {\n      this.showOptions = false;\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if (ev.key === 'Escape') {\n      this.showOptions = false;\n    }\n  }\n\n  @Watch('uri')\n  updateUri(uri: string) {\n    this.thing = this.os.store.get(uri);\n    this.isIndexed = this.checkIfIndexed(uri);\n  }\n\n  private checkIfIndexed(uri: string) {\n    return this.indexes.some(it => it.contains(uri));\n  }\n\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n    this.thing = this.os.store.get(this.uri);\n    this.getLabelIndexes(session.state.profile);\n    this.unsubscribeSessionChange = session.onChange('profile', profile => {\n      this.getLabelIndexes(profile);\n    });\n  };\n\n  private getLabelIndexes(profile: WebIdProfile) {\n    if (profile) {\n      this.indexes = profile.getPrivateLabelIndexes().map(it => this.os.store.get(it).assume(LabelIndex));\n      this.isIndexed = this.checkIfIndexed(this.uri);\n    }\n  }\n\n  private async onClick(e: MouseEvent) {\n    e.preventDefault();\n    if (this.indexes.length === 1) {\n      const index = this.indexes[0];\n      await this.addToLabelIndex(index);\n      this.indexUpdatedEmitter.emit(index);\n    } else if (this.indexes.length > 1) {\n      this.showOptions = !this.showOptions;\n    } else {\n      const index = await this.createDefaultLabelIndex();\n      await this.addToLabelIndex(index);\n      this.indexCreatedEmitter.emit(index);\n    }\n  }\n\n  private async addToLabelIndex(index: LabelIndex) {\n    try {\n      await this.os.addToLabelIndex(this.thing, index);\n      this.isIndexed = true;\n    } catch (e) {\n      this.errorEmitter.emit(e);\n    }\n\n    this.showOptions = false;\n  }\n\n  private async createDefaultLabelIndex(): Promise<LabelIndex> {\n    try {\n      return await this.os.createDefaultLabelIndex(session.state.profile);\n    } catch (e) {\n      this.errorEmitter.emit(e);\n    }\n  }\n\n  render() {\n    if (!session.state.isLoggedIn || !this.uri) {\n      return null;\n    }\n\n    const label = 'Make this findable';\n    return (\n      <Host>\n        <button\n          type=\"button\"\n          aria-label={label}\n          class={{ main: true, open: this.showOptions, success: this.isIndexed }}\n          onClick={e => this.onClick(e)}\n          title=\"\"\n        >\n          {this.isIndexed ? <IconSuccess /> : <IconMakeFindable />}\n          <p>{label}</p>\n        </button>\n        {this.showOptions && (\n          <div class=\"options\">\n            <ol role=\"listbox\">\n              {this.indexes.map((index: LabelIndex) => (\n                <li role=\"option\">\n                  <label>\n                    <input\n                      type=\"checkbox\"\n                      checked={index.contains(this.uri)}\n                      onChange={e => this.chooseOption(e, index)}\n                    />\n                    <pos-resource uri={index.uri} lazy={true}>\n                      <pos-label></pos-label>\n                    </pos-resource>\n                  </label>\n                </li>\n              ))}\n            </ol>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private async chooseOption(e: Event, index: LabelIndex) {\n    e.preventDefault();\n    await this.addToLabelIndex(index);\n    this.indexUpdatedEmitter.emit(index);\n  }\n}\n\nconst IconMakeFindable = () => (\n  <svg\n    role=\"presentation\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke-width=\"1.5\"\n    stroke=\"currentColor\"\n  >\n    <path\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      d=\"M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Zm3.75 11.625a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z\"\n    />\n  </svg>\n);\n\nconst IconSuccess = () => (\n  <svg\n    role=\"presentation\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke-width=\"1.5\"\n    stroke=\"currentColor\"\n  >\n    <path\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      d=\"M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 0 1 9 9v.375M10.125 2.25A3.375 3.375 0 0 1 13.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 0 1 3.375 3.375M9 15l2.25 2.25L15 12\"\n    />\n  </svg>\n);\n"]}
+{"version":3,"file":"pos-make-findable.js","sourceRoot":"","sources":["../../../../src/components/pos-make-findable/pos-make-findable.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\nimport { LabelIndex, PodOS, Thing, WebIdProfile } from '@pod-os/core';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\nimport session from '../../store/session';\n\nimport './shoelace';\n\n@Component({\n  tag: 'pos-make-findable',\n  styleUrl: 'pos-make-findable.css',\n  shadow: true,\n})\nexport class PosMakeFindable implements PodOsAware {\n  @Prop() uri!: string;\n\n  @State() os: PodOS;\n  @State() thing: Thing;\n  @State() indexes: LabelIndex[] = [];\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n  @State() unsubscribeSessionChange: undefined | (() => void);\n\n  @State() showOptions = false;\n  @State() isIndexed = false;\n\n  @Event({ eventName: 'pod-os:error' }) errorEmitter: EventEmitter;\n  @Event({ eventName: 'pod-os:search:index-updated' }) indexUpdatedEmitter: EventEmitter;\n  @Event({ eventName: 'pod-os:search:index-created' }) indexCreatedEmitter: EventEmitter;\n\n  @Element() el: HTMLElement;\n\n  componentWillLoad() {\n    subscribePodOs(this);\n  }\n\n  disconnectedCallback() {\n    this.unsubscribeSessionChange && this.unsubscribeSessionChange();\n  }\n\n  @Watch('uri')\n  updateUri(uri: string) {\n    this.thing = this.os.store.get(uri);\n    this.isIndexed = this.checkIfIndexed(uri);\n  }\n\n  private checkIfIndexed(uri: string) {\n    return this.indexes.some(it => it.contains(uri));\n  }\n\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n    this.thing = this.os.store.get(this.uri);\n    this.getLabelIndexes(session.state.profile);\n    this.unsubscribeSessionChange = session.onChange('profile', profile => {\n      this.getLabelIndexes(profile);\n    });\n  };\n\n  private getLabelIndexes(profile: WebIdProfile) {\n    if (profile) {\n      this.indexes = profile.getPrivateLabelIndexes().map(it => this.os.store.get(it).assume(LabelIndex));\n      this.showOptions = this.indexes.length > 1;\n      this.isIndexed = this.checkIfIndexed(this.uri);\n    }\n  }\n\n  private async onClick(e: MouseEvent) {\n    e.preventDefault();\n    if (this.indexes.length === 1) {\n      const index = this.indexes[0];\n      await this.addToLabelIndex(index);\n      this.indexUpdatedEmitter.emit(index);\n    } else if (this.indexes.length === 0) {\n      const index = await this.createDefaultLabelIndex();\n      await this.addToLabelIndex(index);\n      this.indexCreatedEmitter.emit(index);\n    }\n  }\n\n  private async addToLabelIndex(index: LabelIndex) {\n    try {\n      await this.os.addToLabelIndex(this.thing, index);\n      this.isIndexed = true;\n    } catch (e) {\n      this.errorEmitter.emit(e);\n    }\n  }\n\n  private async createDefaultLabelIndex(): Promise<LabelIndex> {\n    try {\n      return await this.os.createDefaultLabelIndex(session.state.profile);\n    } catch (e) {\n      this.errorEmitter.emit(e);\n    }\n  }\n\n  render() {\n    if (!session.state.isLoggedIn || !this.uri) {\n      return null;\n    }\n\n    const label = 'Make this findable';\n    const button = (\n      <button\n        type=\"button\"\n        slot=\"trigger\"\n        aria-label={label}\n        class={{ main: true, success: this.isIndexed }}\n        onClick={e => this.onClick(e)}\n        title=\"\"\n      >\n        {this.isIndexed ? <IconSuccess /> : <IconMakeFindable />}\n        <p>{label}</p>\n      </button>\n    );\n    if (this.showOptions) {\n      return (\n        <Host>\n          <sl-dropdown>\n            {button}\n            <sl-menu role=\"listbox\">\n              {this.indexes.map((index: LabelIndex) => (\n                <sl-menu-item role=\"option\" value={index} type=\"checkbox\" checked={index.contains(this.uri)}>\n                  <pos-resource uri={index.uri} lazy={true}>\n                    <pos-label></pos-label>\n                  </pos-resource>\n                </sl-menu-item>\n              ))}\n            </sl-menu>\n          </sl-dropdown>\n        </Host>\n      );\n    } else {\n      return button;\n    }\n  }\n\n  @Listen('sl-select')\n  async onSelect(e: CustomEvent<{ item: { value: LabelIndex } }>) {\n    const index = e.detail.item.value;\n    e.preventDefault();\n    await this.addToLabelIndex(index);\n    this.indexUpdatedEmitter.emit(index);\n  }\n}\n\nconst IconMakeFindable = () => (\n  <svg\n    role=\"presentation\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke-width=\"1.5\"\n    stroke=\"currentColor\"\n  >\n    <path\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      d=\"M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Zm3.75 11.625a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z\"\n    />\n  </svg>\n);\n\nconst IconSuccess = () => (\n  <svg\n    role=\"presentation\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke-width=\"1.5\"\n    stroke=\"currentColor\"\n  >\n    <path\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      d=\"M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 0 1 9 9v.375M10.125 2.25A3.375 3.375 0 0 1 13.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 0 1 3.375 3.375M9 15l2.25 2.25L15 12\"\n    />\n  </svg>\n);\n"]}

package/dist/collection/components/pos-make-findable/shoelace.js

@@ -0,0 +1,4 @@
+import "@shoelace-style/shoelace/dist/components/dropdown/dropdown.js";
+import "@shoelace-style/shoelace/dist/components/menu/menu.js";
+import "@shoelace-style/shoelace/dist/components/menu-item/menu-item.js";
+//# sourceMappingURL=shoelace.js.map

package/dist/collection/components/pos-make-findable/shoelace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shoelace.js","sourceRoot":"","sources":["../../../../src/components/pos-make-findable/shoelace.ts"],"names":[],"mappings":"AAAA,OAAO,+DAA+D,CAAC;AACvE,OAAO,uDAAuD,CAAC;AAC/D,OAAO,iEAAiE,CAAC","sourcesContent":["import '@shoelace-style/shoelace/dist/components/dropdown/dropdown.js';\nimport '@shoelace-style/shoelace/dist/components/menu/menu.js';\nimport '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';\n"]}

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: '3bdf8dfb639a32796ffec2e5f8b65d553ea7bf60', class: "current" }, this.current && this.searchIndexReady && h("pos-make-findable", { key: '4cb1e1c567be23d856564e3a7404b1be73cda8d7', uri: this.current.uri }), h("button", { key: '0b29bcc329bc9f5d053ff711109b1c06b368c33e', "aria-label": ariaLabel, onClick: () => this.onClick() }, h("div", { key: '48c7c2f062a87f8e5f7742f5839e351d56ff2c13' }, this.current ? this.current.label() : 'Search or enter URI'), this.icon())));
+        return (h("section", { key: '4b942ac9ddb8c7ec9325197dc0906c8e236586d9', class: "current" }, this.current && this.searchIndexReady && h("pos-make-findable", { key: '4202379b075353cf6c0214fbc5a00b892ad948e1', uri: this.current.uri }), h("button", { key: 'e59f5644299d8eee98d3fd179a1796aa837bb0cc', "aria-label": ariaLabel, onClick: () => this.onClick() }, h("div", { key: '4a4df2d898be9c916b3fa31b00bd9bf2b3beabd1' }, this.current ? this.current.label() : 'Search or enter URI'), this.icon())));
     }
     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" })));

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

@@ -113,7 +113,7 @@ export class PosNavigation {
         }
     }
     render() {
-        return (h("nav", { key: '311e48ae67c07f4e04bbd0c78ae85103c937a2d6' }, h("search", { key: 'd39bad3a0e6fdd3eabb5fc019fbe9c311dc9adea' }, h("pos-navigation-bar", { key: '032bf46e40d5f857c6ce597f6c43875f054c65e7', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), h("dialog", { key: '5e54d2658efb7b494fc585456e3b7c72782c8938', ref: el => (this.dialogRef = el) }, h("form", { key: '59d12120091dc9f343d006d7e01fde90c1e2e3ea', method: "dialog", onSubmit: () => this.onSubmit() }, h("input", { key: '5d415b87143ab28c8db0a003e235db63305d3094', ref: el => (this.inputRef = el), enterkeyhint: "search", "aria-label": "Search or enter URI", placeholder: "Search or enter URI", value: this.uri, onChange: e => this.onChange(e), onInput: e => this.onChange(e), role: "combobox", "aria-autocomplete": "list", "aria-expanded": this.suggestions.length > 0, "aria-controls": "suggestions-list", "aria-activedescendant": this.selectedIndex >= 0 ? `option-${this.selectedIndex}` : null }), this.suggestions.length > 0 ? (h("div", { class: "suggestions" }, h("ol", { id: "suggestions-list", role: "listbox", "aria-label": "Search results" }, this.suggestions.map((it, index) => (h("li", { id: `option-${index}`, role: "option", "aria-selected": index === this.selectedIndex ? 'true' : 'false' }, h("pos-rich-link", { uri: it.ref }))))))) : null)))));
+        return (h("nav", { key: 'c6f9915d7778a332aa0e2f3b19b733da63b55d3a' }, h("search", { key: '2911efe53775a82d6c87ba823adfd2f37d196994' }, h("pos-navigation-bar", { key: 'ce9d62d0fdc81df2f6c7f7750b5c4fc98e2b0240', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), h("dialog", { key: 'cab1f4261e43e8318582d6b37096301a7ef987cc', ref: el => (this.dialogRef = el) }, h("form", { key: '3caed872d467ef70c3b097da4f337f492bafdc9f', method: "dialog", onSubmit: () => this.onSubmit() }, h("input", { key: '72ba8d15816608dab944f7d8541713bbf177c1c2', ref: el => (this.inputRef = el), enterkeyhint: "search", "aria-label": "Search or enter URI", placeholder: "Search or enter URI", value: this.uri, onChange: e => this.onChange(e), onInput: e => this.onChange(e), role: "combobox", "aria-autocomplete": "list", "aria-expanded": this.suggestions.length > 0, "aria-controls": "suggestions-list", "aria-activedescendant": this.selectedIndex >= 0 ? `option-${this.selectedIndex}` : null }), this.suggestions.length > 0 ? (h("div", { class: "suggestions" }, h("ol", { id: "suggestions-list", role: "listbox", "aria-label": "Search results" }, this.suggestions.map((it, index) => (h("li", { id: `option-${index}`, role: "option", "aria-selected": index === this.selectedIndex ? 'true' : 'false' }, h("pos-rich-link", { uri: it.ref }))))))) : null)))));
     }
     static get is() { return "pos-navigation"; }
     static get encapsulation() { return "shadow"; }

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: '1091c0db993d79f6d1f0c9ac9003c544b2894709', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: 'cce3f98c89a7e820556e18ea28553774324a01a1', htmlFor: "type" }, "Type"), h("pos-select-term", { key: '72708f95553609006df33b02047421599d0167f0', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: 'a1344f66396ec7b9a0a6a298694f832e62329ce3', htmlFor: "name" }, "Name"), h("input", { key: '5f006bac7be0734dbd39edbad0f30d392bf09bad', 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: '91c88406fd206ba0211e75d01cca16434fe7f74a', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
+        return (h("form", { key: '947421a1e826b4cc59a5d92cf83d25726257c871', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: 'fd239a8b7c9d7b6f833acc794c4ce44d884d240f', htmlFor: "type" }, "Type"), h("pos-select-term", { key: '04b2e4bfdb8590bcb4bc4c822780bffd126488fa', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: 'fa363e0adf2d73c0f22ce90588504ec3b8b6cb6f', htmlFor: "name" }, "Name"), h("input", { key: 'b3c9ff73ea9b1e1e1c059287f3876935fc845699', 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: 'a804450dd5c59ee847f736861e0eeb6616476081', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.name = event.target.value;

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

@@ -16,7 +16,7 @@ export class PosPicture {
     render() {
         const pic = this.resource ? this.resource.picture() : null;
         if (!pic)
-            return null;
+            return h("slot", null);
         return h("pos-image", { blurredBackground: this.blurredBackground, src: pic.url, alt: this.resource.label() });
     }
     static get is() { return "pos-picture"; }

package/dist/collection/components/pos-picture/pos-picture.js.map

@@ -1 +1 @@
-{"version":3,"file":"pos-picture.js","sourceRoot":"","sources":["../../../../src/components/pos-picture/pos-picture.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE/E,OAAO,EAAiB,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAO3E,MAAM,OAAO,UAAU;IALvB;QAME;;WAEG;QACK,sBAAiB,GAAY,KAAK,CAAC;QAU3C,oBAAe,GAAG,CAAC,QAAe,EAAE,EAAE;YACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,CAAC,CAAC;KAOH;IAbC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAMD,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QAC3D,IAAI,CAAC,GAAG;YAAE,OAAO,IAAI,CAAC;QACtB,OAAO,iBAAW,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EAAE,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,GAAc,CAAC;IACtH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, State, h, Prop } from '@stencil/core';\nimport { Thing } from '@pod-os/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-picture',\n  shadow: true,\n  styleUrl: 'pos-picture.css',\n})\nexport class PosPicture implements ResourceAware {\n  /**\n   * Use a blurred version of the image as its own background, if the image is scaled down to fit into the container.\n   */\n  @Prop() blurredBackground: boolean = false;\n\n  @State() resource: Thing;\n\n  @Event({ eventName: 'pod-os:resource' }) subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.resource = resource;\n  };\n\n  render() {\n    const pic = this.resource ? this.resource.picture() : null;\n    if (!pic) return null;\n    return <pos-image blurredBackground={this.blurredBackground} src={pic.url} alt={this.resource.label()}></pos-image>;\n  }\n}\n"]}
+{"version":3,"file":"pos-picture.js","sourceRoot":"","sources":["../../../../src/components/pos-picture/pos-picture.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE/E,OAAO,EAAiB,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAO3E,MAAM,OAAO,UAAU;IALvB;QAME;;WAEG;QACK,sBAAiB,GAAY,KAAK,CAAC;QAU3C,oBAAe,GAAG,CAAC,QAAe,EAAE,EAAE;YACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,CAAC,CAAC;KAOH;IAbC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAMD,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QAC3D,IAAI,CAAC,GAAG;YAAE,OAAO,eAAa,CAAC;QAC/B,OAAO,iBAAW,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EAAE,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,GAAc,CAAC;IACtH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, State, h, Prop } from '@stencil/core';\nimport { Thing } from '@pod-os/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-picture',\n  shadow: true,\n  styleUrl: 'pos-picture.css',\n})\nexport class PosPicture implements ResourceAware {\n  /**\n   * Use a blurred version of the image as its own background, if the image is scaled down to fit into the container.\n   */\n  @Prop() blurredBackground: boolean = false;\n\n  @State() resource: Thing;\n\n  @Event({ eventName: 'pod-os:resource' }) subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.resource = resource;\n  };\n\n  render() {\n    const pic = this.resource ? this.resource.picture() : null;\n    if (!pic) return <slot></slot>;\n    return <pos-image blurredBackground={this.blurredBackground} src={pic.url} alt={this.resource.label()}></pos-image>;\n  }\n}\n"]}

package/dist/collection/components/pos-rich-link/pos-rich-link.js

@@ -1,10 +1,10 @@
 import { h } from "@stencil/core";
 export class PosRichLink {
     render() {
-        return (h("pos-resource", { key: '95aa9fbc121e27b106845f4c6de96088f7538310', lazy: true, uri: this.uri }, h("p", { key: 'a277291f4c795c7c2e9c9e41ab899fe660ec67a9', class: "content" }, h("a", { key: 'b83e27d371214673bc8fe740573b4b65b2479af8', href: this.uri, onClick: e => {
+        return (h("pos-resource", { key: 'f41ba8c5430e96e47d176b4e85633bad4ee9b0a7', lazy: true, uri: this.uri }, h("p", { key: '0a92fa1df51d78c0e8d1f6d47af078cb0cbe264a', class: "content" }, h("a", { key: '27c623707a5cbc6618d5a70e0eacc2fd5552d7dd', href: this.uri, onClick: e => {
                 e.preventDefault();
                 this.linkEmitter.emit(this.uri);
-            } }, h("pos-label", { key: '5c4dacc2f5b0dc18664ef5e04bc024efb2547e34' })), h("span", { key: '35cb283d89ce6f631c5e3fde3035244a0374daa0', class: "url" }, new URL(this.uri).host), h("pos-description", { key: '12d5833f05f5759c16d579d5a62742b871ff964f' }))));
+            } }, h("pos-label", { key: 'e8cb96334502e2f2fad85c35096baa3a6cc890cb' })), h("span", { key: '0f0feeee5e65f982d54cd474c42ed14759d2e834', class: "url" }, new URL(this.uri).host), h("pos-description", { key: '87a7cdf2c0e1f523ecdbed2e786d948f267ad303' }))));
     }
     static get is() { return "pos-rich-link"; }
     static get encapsulation() { return "shadow"; }

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: '2775fc2835158ccd8d540e4f27edfd497eafe7a9' });
+        return h("slot", { key: 'e3d70ed25e70d8273a2c820bb92fec69b7f70f25' });
     }
     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: '87e4eddf409058ee5fc4c3da0d26f06b10814baa' }, h("input", { key: 'b7c3c9644cfd438806263a1f5cc721f8409cfe45', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: '834ad0a974db76a5295501ba7231bd190d57b98b', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
+        return (h(Host, { key: 'c9529ceaf82d8aa1a3f73532e8ca0f99aa3fc4e6' }, h("input", { key: '2de0e74b99ae5dd7aa6d7bdea4289b9e25b7629e', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: '92e240a12c0d733c15b8daf971e3026a1d535561', 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-user-menu/pos-user-menu.css

@@ -0,0 +1,23 @@
+button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  border-radius: 50%;
+  pos-picture {
+    --width: 40px;
+    --height: 40px;
+    --border-radius: 50%;
+  }
+  sl-avatar {
+    --size: 40px;
+  }
+}
+
+sl-dropdown {
+  display: block;
+}

package/dist/collection/components/pos-user-menu/pos-user-menu.js

@@ -0,0 +1,102 @@
+import { h } from "@stencil/core";
+import "./shoelace";
+export class PosUserMenu {
+    onSelect(e) {
+        const { value } = e.detail.item;
+        if (value === 'logout') {
+            this.logout.emit();
+        }
+        else if (value === 'profile') {
+            this.link.emit(this.webId);
+        }
+        else if (value === 'dashboard') {
+            this.link.emit('pod-os:dashboard');
+        }
+        else if (value === 'settings') {
+            this.link.emit('pod-os:settings');
+        }
+    }
+    render() {
+        if (!this.webId)
+            return null; //?
+        return (h("pos-resource", { uri: this.webId }, h("sl-dropdown", null, h("button", { slot: "trigger", "aria-label": "User menu" }, h("pos-picture", null, h("sl-avatar", null))), h("sl-menu", null, h("sl-menu-item", { value: "dashboard" }, "Dashboard"), h("sl-menu-item", { value: "profile" }, h("pos-label", null)), h("sl-menu-item", { value: "settings" }, "Settings"), h("sl-divider", null), h("sl-menu-item", { value: "logout" }, "Logout")))));
+    }
+    static get is() { return "pos-user-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pos-user-menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pos-user-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "webId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "web-id",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "logout",
+                "name": "pod-os:logout",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "link",
+                "name": "pod-os:link",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "sl-select",
+                "method": "onSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=pos-user-menu.js.map

package/dist/collection/components/pos-user-menu/pos-user-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pos-user-menu.js","sourceRoot":"","sources":["../../../../src/components/pos-user-menu/pos-user-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhF,OAAO,YAAY,CAAC;AAOpB,MAAM,OAAO,WAAW;IAWtB,QAAQ,CAAC,CAAuE;QAC9E,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;QAChC,IAAI,KAAK,KAAK,QAAQ,EAAE,CAAC;YACvB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QACrB,CAAC;aAAM,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YAC/B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC;aAAM,IAAI,KAAK,KAAK,WAAW,EAAE,CAAC;YACjC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACrC,CAAC;aAAM,IAAI,KAAK,KAAK,UAAU,EAAE,CAAC;YAChC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC,CAAC,GAAG;QACjC,OAAO,CACL,oBAAc,GAAG,EAAE,IAAI,CAAC,KAAK;YAC3B;gBACE,cAAQ,IAAI,EAAC,SAAS,gBAAY,WAAW;oBAC3C;wBACE,oBAAuB,CACX,CACP;gBACT;oBACE,oBAAc,KAAK,EAAC,WAAW,gBAAyB;oBACxD,oBAAc,KAAK,EAAC,SAAS;wBAC3B,oBAAuB,CACV;oBACf,oBAAc,KAAK,EAAC,UAAU,eAAwB;oBACtD,qBAAyB;oBACzB,oBAAc,KAAK,EAAC,QAAQ,aAAsB,CAC1C,CACE,CACD,CAChB,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Listen, Prop } from '@stencil/core';\n\nimport './shoelace';\n\n@Component({\n  tag: 'pos-user-menu',\n  shadow: true,\n  styleUrl: 'pos-user-menu.css',\n})\nexport class PosUserMenu {\n  @Prop()\n  webId!: string;\n\n  @Event({ eventName: 'pod-os:logout' })\n  logout: EventEmitter;\n\n  @Event({ eventName: 'pod-os:link' })\n  link: EventEmitter;\n\n  @Listen('sl-select')\n  onSelect(e: CustomEvent<{ item: { value: 'profile' | 'logout' | 'dashboard' } }>) {\n    const { value } = e.detail.item;\n    if (value === 'logout') {\n      this.logout.emit();\n    } else if (value === 'profile') {\n      this.link.emit(this.webId);\n    } else if (value === 'dashboard') {\n      this.link.emit('pod-os:dashboard');\n    } else if (value === 'settings') {\n      this.link.emit('pod-os:settings');\n    }\n  }\n\n  render() {\n    if (!this.webId) return null; //?\n    return (\n      <pos-resource uri={this.webId}>\n        <sl-dropdown>\n          <button slot=\"trigger\" aria-label=\"User menu\">\n            <pos-picture>\n              <sl-avatar></sl-avatar>\n            </pos-picture>\n          </button>\n          <sl-menu>\n            <sl-menu-item value=\"dashboard\">Dashboard</sl-menu-item>\n            <sl-menu-item value=\"profile\">\n              <pos-label></pos-label>\n            </sl-menu-item>\n            <sl-menu-item value=\"settings\">Settings</sl-menu-item>\n            <sl-divider></sl-divider>\n            <sl-menu-item value=\"logout\">Logout</sl-menu-item>\n          </sl-menu>\n        </sl-dropdown>\n      </pos-resource>\n    );\n  }\n}\n"]}

package/dist/collection/components/pos-user-menu/shoelace.js

@@ -0,0 +1,6 @@
+import "@shoelace-style/shoelace/dist/components/dropdown/dropdown.js";
+import "@shoelace-style/shoelace/dist/components/menu/menu.js";
+import "@shoelace-style/shoelace/dist/components/menu-item/menu-item.js";
+import "@shoelace-style/shoelace/dist/components/avatar/avatar.js";
+import "@shoelace-style/shoelace/dist/components/divider/divider.js";
+//# sourceMappingURL=shoelace.js.map

package/dist/collection/components/pos-user-menu/shoelace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shoelace.js","sourceRoot":"","sources":["../../../../src/components/pos-user-menu/shoelace.ts"],"names":[],"mappings":"AAAA,OAAO,+DAA+D,CAAC;AACvE,OAAO,uDAAuD,CAAC;AAC/D,OAAO,iEAAiE,CAAC;AACzE,OAAO,2DAA2D,CAAC;AACnE,OAAO,6DAA6D,CAAC","sourcesContent":["import '@shoelace-style/shoelace/dist/components/dropdown/dropdown.js';\nimport '@shoelace-style/shoelace/dist/components/menu/menu.js';\nimport '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';\nimport '@shoelace-style/shoelace/dist/components/avatar/avatar.js';\nimport '@shoelace-style/shoelace/dist/components/divider/divider.js';\n"]}

package/dist/collection/global.js

@@ -1,2 +1,8 @@
 import "@ionic/core";
+const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+function updateTheme(e) {
+    document.documentElement.classList.toggle('sl-theme-dark', e.matches);
+}
+updateTheme(mediaQuery);
+mediaQuery.addEventListener('change', updateTheme);
 //# sourceMappingURL=global.js.map

package/dist/collection/global.js.map

@@ -1 +1 @@
-{"version":3,"file":"global.js","sourceRoot":"","sources":["../../src/global.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC","sourcesContent":["import '@ionic/core';\n"]}
+{"version":3,"file":"global.js","sourceRoot":"","sources":["../../src/global.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC;AAErE,SAAS,WAAW,CAAC,CAAC;IACpB,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;AACxE,CAAC;AAED,WAAW,CAAC,UAAU,CAAC,CAAC;AAExB,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC","sourcesContent":["import '@ionic/core';\n\nconst mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n\nfunction updateTheme(e) {\n  document.documentElement.classList.toggle('sl-theme-dark', e.matches);\n}\n\nupdateTheme(mediaQuery);\n\nmediaQuery.addEventListener('change', updateTheme);\n"]}