@pod-os/elements 0.2.1-e5ac107.0 → 0.3.1-ecc3b86.0

package/dist/collection/components/pos-image/BrokenImage.js

@@ -1,12 +1,7 @@
 import { h } from '@stencil/core';
 export const BrokenImage = ({ file }) => {
   const iconName = iconForStatus(file.status);
-  return (h("div", null,
-    h("a", { class: "error", href: file.url },
-      h("div", null,
-        h("ion-icon", { name: iconName })),
-      h("div", { class: "code" }, file.status.code),
-      h("div", { class: "text" }, file.status.text))));
+  return (h("div", null, h("a", { class: "error", href: file.url }, h("div", null, h("ion-icon", { name: iconName })), h("div", { class: "code" }, file.status.code), h("div", { class: "text" }, file.status.text))));
 };
 function iconForStatus(status) {
   switch (status.code) {

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

@@ -1,7 +1,10 @@
+
 :host {
-  --width: 300px;
-  --height: 300px;
-  --border-radius: 0;
+  /**
+   * @prop --width: Width of the image
+   * @prop --height: Height of the image
+   * @prop --border-radius: Border radius of the image
+   */
 }
 
 img, ion-skeleton-text, div.error {

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

@@ -1,12 +1,17 @@
 import { BrokenImage } from './BrokenImage';
-import { Component, Event, h, Prop, State, Watch } from '@stencil/core';
+import { h } from '@stencil/core';
 import session from '../../store/session';
 export class PosImage {
   constructor() {
-    this.loading = true;
     this.setOs = async (os) => {
       this.os = os;
     };
+    this.src = undefined;
+    this.os = undefined;
+    this.dataUri = undefined;
+    this.brokenFile = undefined;
+    this.error = undefined;
+    this.loading = true;
   }
   componentWillLoad() {
     session.onChange('isLoggedIn', () => this.fetchBlob());
@@ -45,59 +50,71 @@ export class PosImage {
   }
   static get is() { return "pos-image"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["pos-image.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["pos-image.css"]
-  }; }
-  static get properties() { return {
-    "src": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "src",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "os": {},
-    "dataUri": {},
-    "brokenFile": {},
-    "error": {},
-    "loading": {}
-  }; }
-  static get events() { return [{
-      "method": "initializeOsEmitter",
-      "name": "pod-os:init",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["pos-image.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pos-image.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "src": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "src",
+        "reflect": false
       }
-    }]; }
-  static get watchers() { return [{
-      "propName": "os",
-      "methodName": "fetchBlob"
-    }, {
-      "propName": "src",
-      "methodName": "fetchBlob"
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "os": {},
+      "dataUri": {},
+      "brokenFile": {},
+      "error": {},
+      "loading": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "initializeOsEmitter",
+        "name": "pod-os:init",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "os",
+        "methodName": "fetchBlob"
+      }, {
+        "propName": "src",
+        "methodName": "fetchBlob"
+      }];
+  }
 }

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

@@ -1,9 +1,9 @@
-import { Component, Event, State } from '@stencil/core';
 export class PosLabel {
   constructor() {
     this.setResource = async (resource) => {
       this.resource = resource;
     };
+    this.resource = undefined;
   }
   componentWillLoad() {
     this.getResource.emit(this.setResource);
@@ -13,23 +13,27 @@ export class PosLabel {
   }
   static get is() { return "pos-label"; }
   static get encapsulation() { return "shadow"; }
-  static get states() { return {
-    "resource": {}
-  }; }
-  static get events() { return [{
-      "method": "getResource",
-      "name": "pod-os:resource",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
+  static get states() {
+    return {
+      "resource": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "getResource",
+        "name": "pod-os:resource",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
 }

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

@@ -1,42 +1,41 @@
-import { Component, h, Event, State } from '@stencil/core';
+import { h } from '@stencil/core';
 export class PosLiterals {
   constructor() {
-    this.data = [];
     this.setResource = async (resource) => {
       this.data = resource.literals();
     };
+    this.data = [];
   }
   componentWillLoad() {
     this.getResource.emit(this.setResource);
   }
   render() {
-    const items = this.data.map(it => (h("ion-item-group", null,
-      h("ion-item-divider", null,
-        h("ion-label", null, it.predicate)),
-      it.values.map(value => (h("ion-item", null,
-        h("ion-label", { class: "ion-text-wrap" }, value),
-        ' '))))));
+    const items = this.data.map(it => (h("ion-item-group", null, h("ion-item-divider", null, h("ion-label", null, it.predicate)), it.values.map(value => (h("ion-item", null, h("ion-label", { class: "ion-text-wrap" }, value), ' '))))));
     return this.data.length > 0 ? h("ion-list", null, items) : null;
   }
   static get is() { return "pos-literals"; }
   static get encapsulation() { return "shadow"; }
-  static get states() { return {
-    "data": {}
-  }; }
-  static get events() { return [{
-      "method": "getResource",
-      "name": "pod-os:resource",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
+  static get states() {
+    return {
+      "data": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "getResource",
+        "name": "pod-os:resource",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
 }

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

@@ -0,0 +1,14 @@
+:host {
+  display: flex;
+  gap: 10px;
+}
+.user-data {
+  align-items: center;
+  display: inline-flex;
+  gap: 10px;
+}
+.user-data pos-picture {
+  --width: 40px;
+  --height: 40px;
+  --border-radius: 50%;
+}

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

@@ -1,10 +1,11 @@
-import { Component, h, Event, Host, State } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import session from '../../store/session';
 export class PosLogin {
   constructor() {
     this.setOs = async (os) => {
       this.os = os;
     };
+    this.os = undefined;
   }
   componentWillLoad() {
     this.initializeOsEmitter.emit(this.setOs);
@@ -17,30 +18,41 @@ export class PosLogin {
     this.os.logout();
   }
   render() {
-    return (h(Host, null,
-      session.state.isLoggedIn ? (h("pos-resource", { uri: session.state.webId },
-        h("pos-label", null))) : (''),
-      !session.state.isLoggedIn && h("ion-button", { onClick: () => this.login() }, "Login"),
-      session.state.isLoggedIn && h("ion-button", { onClick: () => this.logout() }, "Logout")));
+    return (h(Host, null, 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("ion-button", { onClick: () => this.login() }, "Login"), session.state.isLoggedIn && h("ion-button", { onClick: () => this.logout() }, "Logout")));
   }
   static get is() { return "pos-login"; }
-  static get states() { return {
-    "os": {}
-  }; }
-  static get events() { return [{
-      "method": "initializeOsEmitter",
-      "name": "pod-os:init",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["pos-login.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pos-login.css"]
+    };
+  }
+  static get states() {
+    return {
+      "os": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "initializeOsEmitter",
+        "name": "pod-os:init",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
 }

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

@@ -0,0 +1,10 @@
+:host {
+  /**
+   * @prop --width: Width of the picture
+   * @prop --height: Height of the picture
+   * @prop --border-radius: Border radius of the picture
+   */
+  --width: 300px;
+  --height: 300px;
+  --border-radius: var(--border-radius, 0);
+}

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

@@ -1,9 +1,10 @@
-import { Component, Event, State, h } from '@stencil/core';
+import { h } from '@stencil/core';
 export class PosPicture {
   constructor() {
     this.setResource = async (resource) => {
       this.resource = resource;
     };
+    this.resource = undefined;
   }
   componentWillLoad() {
     this.getResource.emit(this.setResource);
@@ -16,23 +17,37 @@ export class PosPicture {
   }
   static get is() { return "pos-picture"; }
   static get encapsulation() { return "shadow"; }
-  static get states() { return {
-    "resource": {}
-  }; }
-  static get events() { return [{
-      "method": "getResource",
-      "name": "pod-os:resource",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["pos-picture.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pos-picture.css"]
+    };
+  }
+  static get states() {
+    return {
+      "resource": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "getResource",
+        "name": "pod-os:resource",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
 }

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

@@ -1,40 +1,41 @@
-import { Component, h, Event, State } from '@stencil/core';
+import { h } from '@stencil/core';
 export class PosRelations {
   constructor() {
-    this.data = [];
     this.setResource = async (resource) => {
       this.data = resource.relations();
     };
+    this.data = [];
   }
   componentWillLoad() {
     this.getResource.emit(this.setResource);
   }
   render() {
-    const items = this.data.map(it => (h("ion-item-group", null,
-      h("ion-item-divider", null,
-        h("ion-label", null, it.predicate)),
-      it.uris.map(uri => (h("pos-rich-link", { uri: uri }))))));
+    const items = this.data.map(it => (h("ion-item-group", null, h("ion-item-divider", null, h("ion-label", null, it.predicate)), it.uris.map(uri => (h("pos-rich-link", { uri: uri }))))));
     return this.data.length > 0 ? h("ion-list", null, items) : null;
   }
   static get is() { return "pos-relations"; }
   static get encapsulation() { return "shadow"; }
-  static get states() { return {
-    "data": {}
-  }; }
-  static get events() { return [{
-      "method": "getResource",
-      "name": "pod-os:resource",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
+  static get states() {
+    return {
+      "data": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "getResource",
+        "name": "pod-os:resource",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
 }