@pod-os/elements 0.7.1-7512967.0 → 0.7.1-7d05bdd.0

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

@@ -0,0 +1,138 @@
+import { h } from '@stencil/core';
+import session from '../../store/session';
+import { BrokenFile } from '../broken-file/BrokenFile';
+export class PosPdf {
+  constructor() {
+    this.setOs = async (os) => {
+      this.os = os;
+    };
+    this.src = undefined;
+    this.alt = undefined;
+    this.os = undefined;
+    this.dataUri = undefined;
+    this.brokenFile = undefined;
+    this.error = undefined;
+    this.loading = true;
+  }
+  componentWillLoad() {
+    session.onChange('isLoggedIn', () => this.fetchBlob());
+    this.initializeOsEmitter.emit(this.setOs);
+  }
+  async fetchBlob() {
+    try {
+      this.loading = true;
+      const file = await this.os.fetchFile(this.src);
+      if (file.blob()) {
+        this.dataUri = URL.createObjectURL(file.blob());
+        this.error = null;
+      }
+      else {
+        this.brokenFile = file;
+      }
+    }
+    catch (err) {
+      this.error = err;
+    }
+    finally {
+      this.loading = false;
+    }
+  }
+  render() {
+    if (this.loading) {
+      return h("ion-skeleton-text", { animated: true });
+    }
+    if (this.error) {
+      return h("div", { class: "error" }, this.error.message);
+    }
+    if (this.brokenFile) {
+      return h(BrokenFile, { file: this.brokenFile });
+    }
+    return h("iframe", { src: this.dataUri });
+  }
+  static get is() { return "pos-pdf"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["pos-pdf.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pos-pdf.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
+      },
+      "alt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "alt",
+        "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 watchers() {
+    return [{
+        "propName": "os",
+        "methodName": "fetchBlob"
+      }, {
+        "propName": "src",
+        "methodName": "fetchBlob"
+      }];
+  }
+}

package/dist/components/BrokenFile.js

@@ -0,0 +1,24 @@
+import { h } from '@stencil/core/internal/client';
+
+const BrokenFile = ({ 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))));
+};
+function iconForStatus(status) {
+  switch (status.code) {
+    case 401:
+    case 403:
+      return 'lock-closed-outline';
+    case 404:
+      return 'help-circle-outline';
+    default:
+      return 'alert-circle-outline';
+  }
+}
+
+export { BrokenFile as B };

package/dist/components/index.d.ts

@@ -11,6 +11,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 { PosPdf as PosPdf } from '../types/components/pos-pdf/pos-pdf';
 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

@@ -107,6 +107,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 { PosPdf, defineCustomElement as defineCustomElementPosPdf } from './pos-pdf.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/pos-app-browser.js

@@ -1,41 +1,42 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$L } from './app.js';
-import { d as defineCustomElement$K } from './badge.js';
-import { d as defineCustomElement$J } from './button.js';
-import { d as defineCustomElement$I } from './card.js';
-import { d as defineCustomElement$H } from './card-content.js';
-import { d as defineCustomElement$G } from './card-header.js';
-import { d as defineCustomElement$F } from './card-title.js';
-import { d as defineCustomElement$E } from './col.js';
-import { d as defineCustomElement$D } from './content.js';
-import { d as defineCustomElement$C } from './footer.js';
-import { d as defineCustomElement$B } from './grid.js';
-import { d as defineCustomElement$A } from './header.js';
-import { d as defineCustomElement$z } from './icon.js';
-import { d as defineCustomElement$y } from './item.js';
-import { d as defineCustomElement$x } from './item-divider.js';
-import { d as defineCustomElement$w } from './item-group.js';
-import { d as defineCustomElement$v } from './label.js';
-import { d as defineCustomElement$u } from './list.js';
-import { d as defineCustomElement$t } from './note.js';
-import { d as defineCustomElement$s } from './progress-bar.js';
-import { d as defineCustomElement$r } from './ripple-effect.js';
-import { d as defineCustomElement$q } from './row.js';
-import { d as defineCustomElement$p } from './searchbar.js';
-import { d as defineCustomElement$o } from './skeleton-text.js';
-import { d as defineCustomElement$n } from './title.js';
-import { d as defineCustomElement$m } from './toolbar.js';
-import { d as defineCustomElement$l } from './pos-app2.js';
-import { d as defineCustomElement$k } from './pos-app-generic2.js';
-import { d as defineCustomElement$j } from './pos-app-image-viewer2.js';
-import { d as defineCustomElement$i } from './pos-app-pdf-viewer2.js';
-import { d as defineCustomElement$h } from './pos-app-rdf-document2.js';
-import { d as defineCustomElement$g } from './pos-description2.js';
-import { d as defineCustomElement$f } from './pos-image2.js';
-import { d as defineCustomElement$e } from './pos-label2.js';
-import { d as defineCustomElement$d } from './pos-literals2.js';
-import { d as defineCustomElement$c } from './pos-login2.js';
-import { d as defineCustomElement$b } from './pos-navigation-bar2.js';
+import { d as defineCustomElement$M } from './app.js';
+import { d as defineCustomElement$L } from './badge.js';
+import { d as defineCustomElement$K } from './button.js';
+import { d as defineCustomElement$J } from './card.js';
+import { d as defineCustomElement$I } from './card-content.js';
+import { d as defineCustomElement$H } from './card-header.js';
+import { d as defineCustomElement$G } from './card-title.js';
+import { d as defineCustomElement$F } from './col.js';
+import { d as defineCustomElement$E } from './content.js';
+import { d as defineCustomElement$D } from './footer.js';
+import { d as defineCustomElement$C } from './grid.js';
+import { d as defineCustomElement$B } from './header.js';
+import { d as defineCustomElement$A } from './icon.js';
+import { d as defineCustomElement$z } from './item.js';
+import { d as defineCustomElement$y } from './item-divider.js';
+import { d as defineCustomElement$x } from './item-group.js';
+import { d as defineCustomElement$w } from './label.js';
+import { d as defineCustomElement$v } from './list.js';
+import { d as defineCustomElement$u } from './note.js';
+import { d as defineCustomElement$t } from './progress-bar.js';
+import { d as defineCustomElement$s } from './ripple-effect.js';
+import { d as defineCustomElement$r } from './row.js';
+import { d as defineCustomElement$q } from './searchbar.js';
+import { d as defineCustomElement$p } from './skeleton-text.js';
+import { d as defineCustomElement$o } from './title.js';
+import { d as defineCustomElement$n } from './toolbar.js';
+import { d as defineCustomElement$m } from './pos-app2.js';
+import { d as defineCustomElement$l } from './pos-app-generic2.js';
+import { d as defineCustomElement$k } from './pos-app-image-viewer2.js';
+import { d as defineCustomElement$j } from './pos-app-pdf-viewer2.js';
+import { d as defineCustomElement$i } from './pos-app-rdf-document2.js';
+import { d as defineCustomElement$h } from './pos-description2.js';
+import { d as defineCustomElement$g } from './pos-image2.js';
+import { d as defineCustomElement$f } from './pos-label2.js';
+import { d as defineCustomElement$e } from './pos-literals2.js';
+import { d as defineCustomElement$d } from './pos-login2.js';
+import { d as defineCustomElement$c } from './pos-navigation-bar2.js';
+import { d as defineCustomElement$b } from './pos-pdf2.js';
 import { d as defineCustomElement$a } from './pos-picture2.js';
 import { d as defineCustomElement$9 } from './pos-relations2.js';
 import { d as defineCustomElement$8 } from './pos-resource2.js';
@@ -59,7 +60,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["pos-app-browser", "ion-app", "ion-badge", "ion-button", "ion-card", "ion-card-content", "ion-card-header", "ion-card-title", "ion-col", "ion-content", "ion-footer", "ion-grid", "ion-header", "ion-icon", "ion-item", "ion-item-divider", "ion-item-group", "ion-label", "ion-list", "ion-note", "ion-progress-bar", "ion-ripple-effect", "ion-row", "ion-searchbar", "ion-skeleton-text", "ion-title", "ion-toolbar", "pos-app", "pos-app-generic", "pos-app-image-viewer", "pos-app-pdf-viewer", "pos-app-rdf-document", "pos-description", "pos-image", "pos-label", "pos-literals", "pos-login", "pos-navigation-bar", "pos-picture", "pos-relations", "pos-resource", "pos-reverse-relations", "pos-rich-link", "pos-router", "pos-subjects", "pos-type-badges", "pos-type-router"];
+  const components = ["pos-app-browser", "ion-app", "ion-badge", "ion-button", "ion-card", "ion-card-content", "ion-card-header", "ion-card-title", "ion-col", "ion-content", "ion-footer", "ion-grid", "ion-header", "ion-icon", "ion-item", "ion-item-divider", "ion-item-group", "ion-label", "ion-list", "ion-note", "ion-progress-bar", "ion-ripple-effect", "ion-row", "ion-searchbar", "ion-skeleton-text", "ion-title", "ion-toolbar", "pos-app", "pos-app-generic", "pos-app-image-viewer", "pos-app-pdf-viewer", "pos-app-rdf-document", "pos-description", "pos-image", "pos-label", "pos-literals", "pos-login", "pos-navigation-bar", "pos-pdf", "pos-picture", "pos-relations", "pos-resource", "pos-reverse-relations", "pos-rich-link", "pos-router", "pos-subjects", "pos-type-badges", "pos-type-router"];
   components.forEach(tagName => { switch (tagName) {
     case "pos-app-browser":
       if (!customElements.get(tagName)) {
@@ -68,185 +69,190 @@ function defineCustomElement$1() {
       break;
     case "ion-app":
       if (!customElements.get(tagName)) {
-        defineCustomElement$L();
+        defineCustomElement$M();
       }
       break;
     case "ion-badge":
       if (!customElements.get(tagName)) {
-        defineCustomElement$K();
+        defineCustomElement$L();
       }
       break;
     case "ion-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$J();
+        defineCustomElement$K();
       }
       break;
     case "ion-card":
       if (!customElements.get(tagName)) {
-        defineCustomElement$I();
+        defineCustomElement$J();
       }
       break;
     case "ion-card-content":
       if (!customElements.get(tagName)) {
-        defineCustomElement$H();
+        defineCustomElement$I();
       }
       break;
     case "ion-card-header":
       if (!customElements.get(tagName)) {
-        defineCustomElement$G();
+        defineCustomElement$H();
       }
       break;
     case "ion-card-title":
       if (!customElements.get(tagName)) {
-        defineCustomElement$F();
+        defineCustomElement$G();
       }
       break;
     case "ion-col":
       if (!customElements.get(tagName)) {
-        defineCustomElement$E();
+        defineCustomElement$F();
       }
       break;
     case "ion-content":
       if (!customElements.get(tagName)) {
-        defineCustomElement$D();
+        defineCustomElement$E();
       }
       break;
     case "ion-footer":
       if (!customElements.get(tagName)) {
-        defineCustomElement$C();
+        defineCustomElement$D();
       }
       break;
     case "ion-grid":
       if (!customElements.get(tagName)) {
-        defineCustomElement$B();
+        defineCustomElement$C();
       }
       break;
     case "ion-header":
       if (!customElements.get(tagName)) {
-        defineCustomElement$A();
+        defineCustomElement$B();
       }
       break;
     case "ion-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$z();
+        defineCustomElement$A();
       }
       break;
     case "ion-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$y();
+        defineCustomElement$z();
       }
       break;
     case "ion-item-divider":
       if (!customElements.get(tagName)) {
-        defineCustomElement$x();
+        defineCustomElement$y();
       }
       break;
     case "ion-item-group":
       if (!customElements.get(tagName)) {
-        defineCustomElement$w();
+        defineCustomElement$x();
       }
       break;
     case "ion-label":
       if (!customElements.get(tagName)) {
-        defineCustomElement$v();
+        defineCustomElement$w();
       }
       break;
     case "ion-list":
       if (!customElements.get(tagName)) {
-        defineCustomElement$u();
+        defineCustomElement$v();
       }
       break;
     case "ion-note":
       if (!customElements.get(tagName)) {
-        defineCustomElement$t();
+        defineCustomElement$u();
       }
       break;
     case "ion-progress-bar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$s();
+        defineCustomElement$t();
       }
       break;
     case "ion-ripple-effect":
       if (!customElements.get(tagName)) {
-        defineCustomElement$r();
+        defineCustomElement$s();
       }
       break;
     case "ion-row":
       if (!customElements.get(tagName)) {
-        defineCustomElement$q();
+        defineCustomElement$r();
       }
       break;
     case "ion-searchbar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$p();
+        defineCustomElement$q();
       }
       break;
     case "ion-skeleton-text":
       if (!customElements.get(tagName)) {
-        defineCustomElement$o();
+        defineCustomElement$p();
       }
       break;
     case "ion-title":
       if (!customElements.get(tagName)) {
-        defineCustomElement$n();
+        defineCustomElement$o();
       }
       break;
     case "ion-toolbar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$m();
+        defineCustomElement$n();
       }
       break;
     case "pos-app":
       if (!customElements.get(tagName)) {
-        defineCustomElement$l();
+        defineCustomElement$m();
       }
       break;
     case "pos-app-generic":
       if (!customElements.get(tagName)) {
-        defineCustomElement$k();
+        defineCustomElement$l();
       }
       break;
     case "pos-app-image-viewer":
       if (!customElements.get(tagName)) {
-        defineCustomElement$j();
+        defineCustomElement$k();
       }
       break;
     case "pos-app-pdf-viewer":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$j();
       }
       break;
     case "pos-app-rdf-document":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$i();
       }
       break;
     case "pos-description":
       if (!customElements.get(tagName)) {
-        defineCustomElement$g();
+        defineCustomElement$h();
       }
       break;
     case "pos-image":
       if (!customElements.get(tagName)) {
-        defineCustomElement$f();
+        defineCustomElement$g();
       }
       break;
     case "pos-label":
       if (!customElements.get(tagName)) {
-        defineCustomElement$e();
+        defineCustomElement$f();
       }
       break;
     case "pos-literals":
       if (!customElements.get(tagName)) {
-        defineCustomElement$d();
+        defineCustomElement$e();
       }
       break;
     case "pos-login":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$d();
       }
       break;
     case "pos-navigation-bar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "pos-pdf":
       if (!customElements.get(tagName)) {
         defineCustomElement$b();
       }