@pod-os/elements 0.12.1-24fd45f.0 → 0.12.1-3fa6e4c.0

package/dist/collection/collection-manifest.json

@@ -19,6 +19,7 @@
     "./components/pos-literals/pos-literals.js",
     "./components/pos-login/pos-login.js",
     "./components/pos-navigation-bar/pos-navigation-bar.js",
+    "./components/pos-new-thing-form/pos-new-thing-form.js",
     "./components/pos-picture/pos-picture.js",
     "./components/pos-relations/pos-relations.js",
     "./components/pos-resource/pos-resource.js",

package/dist/collection/components/pos-add-new-thing/pos-add-new-thing.css

@@ -1,3 +1,12 @@
 :host {
   display: block;
 }
+
+button {
+  width: 2rem;
+  height: 2rem;
+  background-color: #3880ff;
+  color: white;
+  border-radius: 5px;
+  border: none;
+}

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

@@ -1,5 +1,8 @@
 import { Host, h } from '@stencil/core';
 export class PosAddNewThing {
+  constructor() {
+    this.referenceUri = undefined;
+  }
   openDialog() {
     this.dialog.showModal();
   }
@@ -7,7 +10,7 @@ export class PosAddNewThing {
     this.dialog.close();
   }
   render() {
-    return (h(Host, null, h("button", { title: "Add a new thing", onClick: () => this.openDialog() }, h("ion-icon", { name: "add-circle-outline" })), h("dialog", { ref: el => (this.dialog = el) }, h("button", { title: "Close", onClick: () => this.closeDialog() }, h("ion-icon", { name: "close-outline" })))));
+    return (h(Host, null, h("button", { title: "Add a new thing", onClick: () => this.openDialog() }, h("ion-icon", { name: "add-circle-outline" })), h("dialog", { ref: el => (this.dialog = el) }, h("button", { title: "Close", onClick: () => this.closeDialog() }, h("ion-icon", { name: "close-outline" })), h("pos-new-thing-form", { referenceUri: this.referenceUri }))));
   }
   static get is() { return "pos-add-new-thing"; }
   static get encapsulation() { return "shadow"; }
@@ -21,4 +24,25 @@ export class PosAddNewThing {
       "$": ["pos-add-new-thing.css"]
     };
   }
+  static get properties() {
+    return {
+      "referenceUri": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "reference-uri",
+        "reflect": false
+      }
+    };
+  }
 }

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -0,0 +1,120 @@
+import { h } from '@stencil/core';
+import { subscribePodOs } from '../events/PodOsAware';
+export class PosNewThingForm {
+  constructor() {
+    this.receivePodOs = async (os) => {
+      this.os = os;
+    };
+    this.referenceUri = undefined;
+    this.os = undefined;
+    this.newUri = undefined;
+    this.name = undefined;
+    this.selectedTypeUri = undefined;
+    this.canSubmit = false;
+  }
+  validate() {
+    this.canSubmit = Boolean(this.name && this.selectedTypeUri);
+  }
+  componentWillLoad() {
+    subscribePodOs(this);
+  }
+  render() {
+    return (h("form", { onSubmit: e => this.handleSubmit(e) }, h("label", null, "Type", h("pos-select-term", { "onPod-os:term-selected": e => this.onTermSelected(e) })), h("label", null, "Name", h("input", { type: "text", value: this.name, onInput: e => this.handleChange(e) })), h("div", null, this.newUri), h("input", { type: "submit", value: "Create", disabled: !this.canSubmit })));
+  }
+  handleChange(event) {
+    this.name = event.target.value;
+    this.newUri = this.os.proposeUriForNewThing(this.referenceUri, this.name);
+  }
+  onTermSelected(event) {
+    this.selectedTypeUri = event.detail.uri;
+  }
+  async handleSubmit(event) {
+    event.preventDefault();
+    await this.os.addNewThing(this.newUri, this.name, this.selectedTypeUri);
+    this.linkEmitter.emit(this.newUri);
+  }
+  static get is() { return "pos-new-thing-form"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["pos-new-thing-form.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pos-new-thing-form.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "referenceUri": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "reference-uri",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "os": {},
+      "newUri": {},
+      "name": {},
+      "selectedTypeUri": {},
+      "canSubmit": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "linkEmitter",
+        "name": "pod-os:link",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "subscribePodOs",
+        "name": "pod-os:init",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "name",
+        "methodName": "validate"
+      }, {
+        "propName": "selectedTypeUri",
+        "methodName": "validate"
+      }];
+  }
+}

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

@@ -0,0 +1,11 @@
+.toolbar {
+  display: flex;
+  flex-direction: row;
+  gap: 0;
+  align-items: center;
+  margin-left: 0.5rem;
+}
+
+pos-navigation-bar {
+  flex-grow: 1;
+}

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

@@ -22,9 +22,19 @@ export class PosRouter {
   }
   render() {
     console.log('render router', this.uri);
-    return (h(Router.Switch, null, h(Route, { path: match('', { exact: false }) }, h("pos-navigation-bar", { uri: this.uri }), h("pos-resource", { key: this.uri, uri: this.uri }, h("pos-type-router", null)))));
+    return (h(Router.Switch, null, h(Route, { path: match('', { exact: false }) }, h("div", { class: "toolbar" }, h("pos-add-new-thing", { referenceUri: this.uri }), h("pos-navigation-bar", { uri: this.uri })), h("pos-resource", { key: this.uri, uri: this.uri }, h("pos-type-router", null)))));
   }
   static get is() { return "pos-router"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["pos-router.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pos-router.css"]
+    };
+  }
   static get states() {
     return {
       "uri": {}

package/dist/components/index.d.ts

@@ -18,6 +18,7 @@ export { PosLabel as PosLabel } from '../types/components/pos-label/pos-label';
 export { PosLiterals as PosLiterals } from '../types/components/pos-literals/pos-literals';
 export { PosLogin as PosLogin } from '../types/components/pos-login/pos-login';
 export { PosNavigationBar as PosNavigationBar } from '../types/components/pos-navigation-bar/pos-navigation-bar';
+export { PosNewThingForm as PosNewThingForm } from '../types/components/pos-new-thing-form/pos-new-thing-form';
 export { PosPicture as PosPicture } from '../types/components/pos-picture/pos-picture';
 export { PosRelations as PosRelations } from '../types/components/pos-relations/pos-relations';
 export { PosResource as PosResource } from '../types/components/pos-resource/pos-resource';

package/dist/components/index.js

@@ -114,6 +114,7 @@ export { PosLabel, defineCustomElement as defineCustomElementPosLabel } from './
 export { PosLiterals, defineCustomElement as defineCustomElementPosLiterals } from './pos-literals.js';
 export { PosLogin, defineCustomElement as defineCustomElementPosLogin } from './pos-login.js';
 export { PosNavigationBar, defineCustomElement as defineCustomElementPosNavigationBar } from './pos-navigation-bar.js';
+export { PosNewThingForm, defineCustomElement as defineCustomElementPosNewThingForm } from './pos-new-thing-form.js';
 export { PosPicture, defineCustomElement as defineCustomElementPosPicture } from './pos-picture.js';
 export { PosRelations, defineCustomElement as defineCustomElementPosRelations } from './pos-relations.js';
 export { PosResource, defineCustomElement as defineCustomElementPosResource } from './pos-resource.js';

package/dist/components/index8.js

@@ -43913,30 +43913,32 @@ var Store = class {
     );
   }
   addNewThing(uri5, name6, type4) {
-    return this.updater.update(
-      [],
-      [
-        st2(
-          namedNode2(uri5),
-          namedNode2("https://www.w3.org/1999/02/22-rdf-syntax-ns#type"),
-          namedNode2(type4),
-          namedNode2(uri5).doc()
-        ),
-        st2(
-          namedNode2(uri5),
-          namedNode2("http://www.w3.org/2000/01/rdf-schema#label"),
-          lit2(name6),
-          namedNode2(uri5).doc()
-        )
-      ],
-      void 0,
-      false,
-      {
-        // explicitly omit credentials due to
-        // https://github.com/pod-os/PodOS/issues/17
-        credentials: "omit"
-      }
-    );
+    return __async(this, null, function* () {
+      yield this.updater.update(
+        [],
+        [
+          st2(
+            namedNode2(uri5),
+            namedNode2("http://www.w3.org/1999/02/22-rdf-syntax-ns#type"),
+            namedNode2(type4),
+            namedNode2(uri5).doc()
+          ),
+          st2(
+            namedNode2(uri5),
+            namedNode2("http://www.w3.org/2000/01/rdf-schema#label"),
+            lit2(name6),
+            namedNode2(uri5).doc()
+          )
+        ],
+        void 0,
+        false,
+        {
+          // explicitly omit credentials due to
+          // https://github.com/pod-os/PodOS/issues/17
+          credentials: "omit"
+        }
+      );
+    });
   }
 };
 

package/dist/components/pos-add-new-thing.js

@@ -1,43 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './icon.js';
-
-const posAddNewThingCss = ":host{display:block}";
-
-const PosAddNewThing$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-  }
-  openDialog() {
-    this.dialog.showModal();
-  }
-  closeDialog() {
-    this.dialog.close();
-  }
-  render() {
-    return (h(Host, null, h("button", { title: "Add a new thing", onClick: () => this.openDialog() }, h("ion-icon", { name: "add-circle-outline" })), h("dialog", { ref: el => (this.dialog = el) }, h("button", { title: "Close", onClick: () => this.closeDialog() }, h("ion-icon", { name: "close-outline" })))));
-  }
-  static get style() { return posAddNewThingCss; }
-}, [1, "pos-add-new-thing"]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["pos-add-new-thing", "ion-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "pos-add-new-thing":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, PosAddNewThing$1);
-      }
-      break;
-    case "ion-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
+import { P as PosAddNewThing$1, d as defineCustomElement$1 } from './pos-add-new-thing2.js';
 
 const PosAddNewThing = PosAddNewThing$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/pos-add-new-thing2.js

@@ -0,0 +1,57 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './pos-new-thing-form2.js';
+import { d as defineCustomElement$1 } from './pos-select-term2.js';
+
+const posAddNewThingCss = ":host{display:block}button{width:2rem;height:2rem;background-color:#3880ff;color:white;border-radius:5px;border:none}";
+
+const PosAddNewThing = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.referenceUri = undefined;
+  }
+  openDialog() {
+    this.dialog.showModal();
+  }
+  closeDialog() {
+    this.dialog.close();
+  }
+  render() {
+    return (h(Host, null, h("button", { title: "Add a new thing", onClick: () => this.openDialog() }, h("ion-icon", { name: "add-circle-outline" })), h("dialog", { ref: el => (this.dialog = el) }, h("button", { title: "Close", onClick: () => this.closeDialog() }, h("ion-icon", { name: "close-outline" })), h("pos-new-thing-form", { referenceUri: this.referenceUri }))));
+  }
+  static get style() { return posAddNewThingCss; }
+}, [1, "pos-add-new-thing", {
+    "referenceUri": [1, "reference-uri"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pos-add-new-thing", "ion-icon", "pos-new-thing-form", "pos-select-term"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pos-add-new-thing":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PosAddNewThing);
+      }
+      break;
+    case "ion-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "pos-new-thing-form":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "pos-select-term":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { PosAddNewThing as P, defineCustomElement as d };

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

@@ -1,28 +1,31 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$q } from './app.js';
-import { d as defineCustomElement$p } from './button.js';
-import { d as defineCustomElement$o } from './card.js';
-import { d as defineCustomElement$n } from './card-content.js';
-import { d as defineCustomElement$m } from './card-header.js';
-import { d as defineCustomElement$l } from './content.js';
-import { d as defineCustomElement$k } from './footer.js';
-import { d as defineCustomElement$j } from './header.js';
-import { d as defineCustomElement$i } from './icon.js';
-import { d as defineCustomElement$h } from './progress-bar.js';
-import { d as defineCustomElement$g } from './ripple-effect.js';
-import { d as defineCustomElement$f } from './searchbar.js';
-import { d as defineCustomElement$e } from './skeleton-text.js';
-import { d as defineCustomElement$d } from './title.js';
-import { d as defineCustomElement$c } from './toolbar.js';
-import { d as defineCustomElement$b } from './pos-app2.js';
-import { d as defineCustomElement$a } from './pos-error-toast2.js';
-import { d as defineCustomElement$9 } from './pos-image2.js';
-import { d as defineCustomElement$8 } from './pos-label2.js';
-import { d as defineCustomElement$7 } from './pos-login2.js';
-import { d as defineCustomElement$6 } from './pos-navigation-bar2.js';
-import { d as defineCustomElement$5 } from './pos-picture2.js';
-import { d as defineCustomElement$4 } from './pos-resource2.js';
-import { d as defineCustomElement$3 } from './pos-router2.js';
+import { d as defineCustomElement$t } from './app.js';
+import { d as defineCustomElement$s } from './button.js';
+import { d as defineCustomElement$r } from './card.js';
+import { d as defineCustomElement$q } from './card-content.js';
+import { d as defineCustomElement$p } from './card-header.js';
+import { d as defineCustomElement$o } from './content.js';
+import { d as defineCustomElement$n } from './footer.js';
+import { d as defineCustomElement$m } from './header.js';
+import { d as defineCustomElement$l } from './icon.js';
+import { d as defineCustomElement$k } from './progress-bar.js';
+import { d as defineCustomElement$j } from './ripple-effect.js';
+import { d as defineCustomElement$i } from './searchbar.js';
+import { d as defineCustomElement$h } from './skeleton-text.js';
+import { d as defineCustomElement$g } from './title.js';
+import { d as defineCustomElement$f } from './toolbar.js';
+import { d as defineCustomElement$e } from './pos-add-new-thing2.js';
+import { d as defineCustomElement$d } from './pos-app2.js';
+import { d as defineCustomElement$c } from './pos-error-toast2.js';
+import { d as defineCustomElement$b } from './pos-image2.js';
+import { d as defineCustomElement$a } from './pos-label2.js';
+import { d as defineCustomElement$9 } from './pos-login2.js';
+import { d as defineCustomElement$8 } from './pos-navigation-bar2.js';
+import { d as defineCustomElement$7 } from './pos-new-thing-form2.js';
+import { d as defineCustomElement$6 } from './pos-picture2.js';
+import { d as defineCustomElement$5 } from './pos-resource2.js';
+import { d as defineCustomElement$4 } from './pos-router2.js';
+import { d as defineCustomElement$3 } from './pos-select-term2.js';
 import { d as defineCustomElement$2 } from './pos-type-router2.js';
 
 const PosAppBrowser$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -38,7 +41,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["pos-app-browser", "ion-app", "ion-button", "ion-card", "ion-card-content", "ion-card-header", "ion-content", "ion-footer", "ion-header", "ion-icon", "ion-progress-bar", "ion-ripple-effect", "ion-searchbar", "ion-skeleton-text", "ion-title", "ion-toolbar", "pos-app", "pos-error-toast", "pos-image", "pos-label", "pos-login", "pos-navigation-bar", "pos-picture", "pos-resource", "pos-router", "pos-type-router"];
+  const components = ["pos-app-browser", "ion-app", "ion-button", "ion-card", "ion-card-content", "ion-card-header", "ion-content", "ion-footer", "ion-header", "ion-icon", "ion-progress-bar", "ion-ripple-effect", "ion-searchbar", "ion-skeleton-text", "ion-title", "ion-toolbar", "pos-add-new-thing", "pos-app", "pos-error-toast", "pos-image", "pos-label", "pos-login", "pos-navigation-bar", "pos-new-thing-form", "pos-picture", "pos-resource", "pos-router", "pos-select-term", "pos-type-router"];
   components.forEach(tagName => { switch (tagName) {
     case "pos-app-browser":
       if (!customElements.get(tagName)) {
@@ -47,120 +50,135 @@ function defineCustomElement$1() {
       break;
     case "ion-app":
       if (!customElements.get(tagName)) {
-        defineCustomElement$q();
+        defineCustomElement$t();
       }
       break;
     case "ion-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$p();
+        defineCustomElement$s();
       }
       break;
     case "ion-card":
       if (!customElements.get(tagName)) {
-        defineCustomElement$o();
+        defineCustomElement$r();
       }
       break;
     case "ion-card-content":
       if (!customElements.get(tagName)) {
-        defineCustomElement$n();
+        defineCustomElement$q();
       }
       break;
     case "ion-card-header":
       if (!customElements.get(tagName)) {
-        defineCustomElement$m();
+        defineCustomElement$p();
       }
       break;
     case "ion-content":
       if (!customElements.get(tagName)) {
-        defineCustomElement$l();
+        defineCustomElement$o();
       }
       break;
     case "ion-footer":
       if (!customElements.get(tagName)) {
-        defineCustomElement$k();
+        defineCustomElement$n();
       }
       break;
     case "ion-header":
       if (!customElements.get(tagName)) {
-        defineCustomElement$j();
+        defineCustomElement$m();
       }
       break;
     case "ion-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$l();
       }
       break;
     case "ion-progress-bar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$k();
       }
       break;
     case "ion-ripple-effect":
       if (!customElements.get(tagName)) {
-        defineCustomElement$g();
+        defineCustomElement$j();
       }
       break;
     case "ion-searchbar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$f();
+        defineCustomElement$i();
       }
       break;
     case "ion-skeleton-text":
       if (!customElements.get(tagName)) {
-        defineCustomElement$e();
+        defineCustomElement$h();
       }
       break;
     case "ion-title":
       if (!customElements.get(tagName)) {
-        defineCustomElement$d();
+        defineCustomElement$g();
       }
       break;
     case "ion-toolbar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$f();
+      }
+      break;
+    case "pos-add-new-thing":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
       }
       break;
     case "pos-app":
       if (!customElements.get(tagName)) {
-        defineCustomElement$b();
+        defineCustomElement$d();
       }
       break;
     case "pos-error-toast":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$c();
       }
       break;
     case "pos-image":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$b();
       }
       break;
     case "pos-label":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$a();
       }
       break;
     case "pos-login":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$9();
       }
       break;
     case "pos-navigation-bar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$8();
+      }
+      break;
+    case "pos-new-thing-form":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
       }
       break;
     case "pos-picture":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "pos-resource":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "pos-router":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "pos-select-term":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/pos-new-thing-form.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PosNewThingForm extends Components.PosNewThingForm, HTMLElement {}
+export const PosNewThingForm: {
+  prototype: PosNewThingForm;
+  new (): PosNewThingForm;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { P as PosNewThingForm$1, d as defineCustomElement$1 } from './pos-new-thing-form2.js';
+
+const PosNewThingForm = PosNewThingForm$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PosNewThingForm, defineCustomElement };