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

package/dist/components/pos-app-pdf-viewer2.js

@@ -1,22 +1,24 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as subscribeResource } from './ResourceAware.js';
-import { d as defineCustomElement$i } from './badge.js';
-import { d as defineCustomElement$h } from './card.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 './grid.js';
-import { d as defineCustomElement$c } from './icon.js';
-import { d as defineCustomElement$b } from './item.js';
-import { d as defineCustomElement$a } from './item-divider.js';
-import { d as defineCustomElement$9 } from './item-group.js';
-import { d as defineCustomElement$8 } from './label.js';
-import { d as defineCustomElement$7 } from './list.js';
-import { d as defineCustomElement$6 } from './note.js';
-import { d as defineCustomElement$5 } from './ripple-effect.js';
-import { d as defineCustomElement$4 } from './row.js';
-import { d as defineCustomElement$3 } from './pos-label2.js';
-import { d as defineCustomElement$2 } from './pos-literals2.js';
+import { d as defineCustomElement$k } from './badge.js';
+import { d as defineCustomElement$j } from './card.js';
+import { d as defineCustomElement$i } from './card-header.js';
+import { d as defineCustomElement$h } from './card-title.js';
+import { d as defineCustomElement$g } from './col.js';
+import { d as defineCustomElement$f } from './grid.js';
+import { d as defineCustomElement$e } from './icon.js';
+import { d as defineCustomElement$d } from './item.js';
+import { d as defineCustomElement$c } from './item-divider.js';
+import { d as defineCustomElement$b } from './item-group.js';
+import { d as defineCustomElement$a } from './label.js';
+import { d as defineCustomElement$9 } from './list.js';
+import { d as defineCustomElement$8 } from './note.js';
+import { d as defineCustomElement$7 } from './ripple-effect.js';
+import { d as defineCustomElement$6 } from './row.js';
+import { d as defineCustomElement$5 } from './skeleton-text.js';
+import { d as defineCustomElement$4 } from './pos-label2.js';
+import { d as defineCustomElement$3 } from './pos-literals2.js';
+import { d as defineCustomElement$2 } from './pos-pdf2.js';
 import { d as defineCustomElement$1 } from './pos-type-badges2.js';
 
 const PosAppPdfViewer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -37,7 +39,7 @@ const PosAppPdfViewer = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     if (!this.resource) {
       return null;
     }
-    return (h("ion-grid", null, h("ion-row", null, h("ion-col", { size: "12", "size-sm": true }, h("a", { href: this.resource.uri }, this.resource.uri)), h("ion-col", { size: "12", "size-sm": true }, h("ion-card", null, h("ion-card-header", null, h("ion-card-title", null, h("pos-label", null), h("pos-type-badges", null)), h("pos-literals", null)))))));
+    return (h("ion-grid", null, h("ion-row", null, h("ion-col", { size: "12", "size-sm": true }, h("pos-pdf", { src: this.resource.uri })), h("ion-col", { size: "12", "size-sm": true }, h("ion-card", null, h("ion-card-header", null, h("ion-card-title", null, h("pos-label", null), h("pos-type-badges", null)), h("pos-literals", null)))))));
   }
 }, [1, "pos-app-pdf-viewer", {
     "resource": [32]
@@ -46,7 +48,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["pos-app-pdf-viewer", "ion-badge", "ion-card", "ion-card-header", "ion-card-title", "ion-col", "ion-grid", "ion-icon", "ion-item", "ion-item-divider", "ion-item-group", "ion-label", "ion-list", "ion-note", "ion-ripple-effect", "ion-row", "pos-label", "pos-literals", "pos-type-badges"];
+  const components = ["pos-app-pdf-viewer", "ion-badge", "ion-card", "ion-card-header", "ion-card-title", "ion-col", "ion-grid", "ion-icon", "ion-item", "ion-item-divider", "ion-item-group", "ion-label", "ion-list", "ion-note", "ion-ripple-effect", "ion-row", "ion-skeleton-text", "pos-label", "pos-literals", "pos-pdf", "pos-type-badges"];
   components.forEach(tagName => { switch (tagName) {
     case "pos-app-pdf-viewer":
       if (!customElements.get(tagName)) {
@@ -55,85 +57,95 @@ function defineCustomElement() {
       break;
     case "ion-badge":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$k();
       }
       break;
     case "ion-card":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$j();
       }
       break;
     case "ion-card-header":
       if (!customElements.get(tagName)) {
-        defineCustomElement$g();
+        defineCustomElement$i();
       }
       break;
     case "ion-card-title":
       if (!customElements.get(tagName)) {
-        defineCustomElement$f();
+        defineCustomElement$h();
       }
       break;
     case "ion-col":
       if (!customElements.get(tagName)) {
-        defineCustomElement$e();
+        defineCustomElement$g();
       }
       break;
     case "ion-grid":
       if (!customElements.get(tagName)) {
-        defineCustomElement$d();
+        defineCustomElement$f();
       }
       break;
     case "ion-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$e();
       }
       break;
     case "ion-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$b();
+        defineCustomElement$d();
       }
       break;
     case "ion-item-divider":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$c();
       }
       break;
     case "ion-item-group":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$b();
       }
       break;
     case "ion-label":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$a();
       }
       break;
     case "ion-list":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$9();
       }
       break;
     case "ion-note":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$8();
       }
       break;
     case "ion-ripple-effect":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$7();
       }
       break;
     case "ion-row":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$6();
+      }
+      break;
+    case "ion-skeleton-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
       }
       break;
     case "pos-label":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "pos-literals":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "pos-pdf":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/pos-image2.js

@@ -1,29 +1,9 @@
-import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { B as BrokenFile } from './BrokenFile.js';
 import { s as store } from './session.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './skeleton-text.js';
 
-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))));
-};
-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';
-  }
-}
-
 const posImageCss = ":host{}img,ion-skeleton-text,div.error{border-radius:var(--border-radius);width:var(--width);height:var(--height);max-width:var(--max-width);max-height:var(--max-height)}.error{display:flex;opacity:0.8;background:repeating-linear-gradient( -45deg, rgba(150, 0, 0, 0.1), rgba(150, 0, 0, 0.1) 10px, #fff 5px, #fff 25px );flex-direction:column;border:1px solid red;color:black;align-items:center;justify-content:center;word-break:break-all;padding:1rem;box-sizing:border-box}.error ion-icon{color:#282828;--ionicon-stroke-width:calc(var(--width) / 5);font-size:calc(var(--width) / 2)}a{text-decoration:none;width:var(--width);height:var(--height)}.code{font-weight:bold;font-size:calc(var(--width) / 8)}.text{font-size:calc(var(--width) / 20)}";
 
 const PosImage = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -74,7 +54,7 @@ const PosImage = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return h("div", { class: "error" }, this.error.message);
     }
     if (this.brokenFile) {
-      return h(BrokenImage, { file: this.brokenFile });
+      return h(BrokenFile, { file: this.brokenFile });
     }
     return h("img", { src: this.dataUri, alt: this.alt });
   }

package/dist/components/pos-pdf.d.ts

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

package/dist/components/pos-pdf.js

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

package/dist/components/pos-pdf2.js

@@ -0,0 +1,99 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { s as store } from './session.js';
+import { B as BrokenFile } from './BrokenFile.js';
+import { d as defineCustomElement$2 } from './icon.js';
+import { d as defineCustomElement$1 } from './skeleton-text.js';
+
+const posPdfCss = ":host{}iframe{width:100%;height:100vh}ion-skeleton-text,div.error{border-radius:var(--border-radius);width:var(--width);height:var(--height);max-width:var(--max-width);max-height:var(--max-height)}.error{display:flex;opacity:0.8;background:repeating-linear-gradient( -45deg, rgba(150, 0, 0, 0.1), rgba(150, 0, 0, 0.1) 10px, #fff 5px, #fff 25px );flex-direction:column;border:1px solid red;color:black;align-items:center;justify-content:center;word-break:break-all;padding:1rem;box-sizing:border-box}.error ion-icon{color:#282828;--ionicon-stroke-width:calc(var(--width) / 5);font-size:calc(var(--width) / 2)}a{text-decoration:none;width:var(--width);height:var(--height)}.code{font-weight:bold;font-size:calc(var(--width) / 8)}.text{font-size:calc(var(--width) / 20)}";
+
+const PosPdf = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.initializeOsEmitter = createEvent(this, "pod-os:init", 7);
+    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() {
+    store.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 watchers() { return {
+    "os": ["fetchBlob"],
+    "src": ["fetchBlob"]
+  }; }
+  static get style() { return posPdfCss; }
+}, [1, "pos-pdf", {
+    "src": [1],
+    "alt": [1],
+    "os": [32],
+    "dataUri": [32],
+    "brokenFile": [32],
+    "error": [32],
+    "loading": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pos-pdf", "ion-icon", "ion-skeleton-text"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pos-pdf":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PosPdf);
+      }
+      break;
+    case "ion-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ion-skeleton-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { PosPdf as P, defineCustomElement as d };

package/dist/components/pos-router2.js

@@ -1,32 +1,33 @@
 import { getRenderingRef, forceUpdate, Build, proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$A } from './badge.js';
-import { d as defineCustomElement$z } from './card.js';
-import { d as defineCustomElement$y } from './card-content.js';
-import { d as defineCustomElement$x } from './card-header.js';
-import { d as defineCustomElement$w } from './card-title.js';
-import { d as defineCustomElement$v } from './col.js';
-import { d as defineCustomElement$u } from './grid.js';
-import { d as defineCustomElement$t } from './icon.js';
-import { d as defineCustomElement$s } from './item.js';
-import { d as defineCustomElement$r } from './item-divider.js';
-import { d as defineCustomElement$q } from './item-group.js';
-import { d as defineCustomElement$p } from './label.js';
-import { d as defineCustomElement$o } from './list.js';
-import { d as defineCustomElement$n } from './note.js';
-import { d as defineCustomElement$m } from './progress-bar.js';
-import { d as defineCustomElement$l } from './ripple-effect.js';
-import { d as defineCustomElement$k } from './row.js';
-import { d as defineCustomElement$j } from './searchbar.js';
-import { d as defineCustomElement$i } from './skeleton-text.js';
-import { d as defineCustomElement$h } from './pos-app-generic2.js';
-import { d as defineCustomElement$g } from './pos-app-image-viewer2.js';
-import { d as defineCustomElement$f } from './pos-app-pdf-viewer2.js';
-import { d as defineCustomElement$e } from './pos-app-rdf-document2.js';
-import { d as defineCustomElement$d } from './pos-description2.js';
-import { d as defineCustomElement$c } from './pos-image2.js';
-import { d as defineCustomElement$b } from './pos-label2.js';
-import { d as defineCustomElement$a } from './pos-literals2.js';
-import { d as defineCustomElement$9 } from './pos-navigation-bar2.js';
+import { d as defineCustomElement$B } from './badge.js';
+import { d as defineCustomElement$A } from './card.js';
+import { d as defineCustomElement$z } from './card-content.js';
+import { d as defineCustomElement$y } from './card-header.js';
+import { d as defineCustomElement$x } from './card-title.js';
+import { d as defineCustomElement$w } from './col.js';
+import { d as defineCustomElement$v } from './grid.js';
+import { d as defineCustomElement$u } from './icon.js';
+import { d as defineCustomElement$t } from './item.js';
+import { d as defineCustomElement$s } from './item-divider.js';
+import { d as defineCustomElement$r } from './item-group.js';
+import { d as defineCustomElement$q } from './label.js';
+import { d as defineCustomElement$p } from './list.js';
+import { d as defineCustomElement$o } from './note.js';
+import { d as defineCustomElement$n } from './progress-bar.js';
+import { d as defineCustomElement$m } from './ripple-effect.js';
+import { d as defineCustomElement$l } from './row.js';
+import { d as defineCustomElement$k } from './searchbar.js';
+import { d as defineCustomElement$j } from './skeleton-text.js';
+import { d as defineCustomElement$i } from './pos-app-generic2.js';
+import { d as defineCustomElement$h } from './pos-app-image-viewer2.js';
+import { d as defineCustomElement$g } from './pos-app-pdf-viewer2.js';
+import { d as defineCustomElement$f } from './pos-app-rdf-document2.js';
+import { d as defineCustomElement$e } from './pos-description2.js';
+import { d as defineCustomElement$d } from './pos-image2.js';
+import { d as defineCustomElement$c } from './pos-label2.js';
+import { d as defineCustomElement$b } from './pos-literals2.js';
+import { d as defineCustomElement$a } from './pos-navigation-bar2.js';
+import { d as defineCustomElement$9 } from './pos-pdf2.js';
 import { d as defineCustomElement$8 } from './pos-picture2.js';
 import { d as defineCustomElement$7 } from './pos-relations2.js';
 import { d as defineCustomElement$6 } from './pos-resource2.js';
@@ -626,7 +627,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["pos-router", "ion-badge", "ion-card", "ion-card-content", "ion-card-header", "ion-card-title", "ion-col", "ion-grid", "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", "pos-app-generic", "pos-app-image-viewer", "pos-app-pdf-viewer", "pos-app-rdf-document", "pos-description", "pos-image", "pos-label", "pos-literals", "pos-navigation-bar", "pos-picture", "pos-relations", "pos-resource", "pos-reverse-relations", "pos-rich-link", "pos-subjects", "pos-type-badges", "pos-type-router"];
+  const components = ["pos-router", "ion-badge", "ion-card", "ion-card-content", "ion-card-header", "ion-card-title", "ion-col", "ion-grid", "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", "pos-app-generic", "pos-app-image-viewer", "pos-app-pdf-viewer", "pos-app-rdf-document", "pos-description", "pos-image", "pos-label", "pos-literals", "pos-navigation-bar", "pos-pdf", "pos-picture", "pos-relations", "pos-resource", "pos-reverse-relations", "pos-rich-link", "pos-subjects", "pos-type-badges", "pos-type-router"];
   components.forEach(tagName => { switch (tagName) {
     case "pos-router":
       if (!customElements.get(tagName)) {
@@ -635,140 +636,145 @@ function defineCustomElement() {
       break;
     case "ion-badge":
       if (!customElements.get(tagName)) {
-        defineCustomElement$A();
+        defineCustomElement$B();
       }
       break;
     case "ion-card":
       if (!customElements.get(tagName)) {
-        defineCustomElement$z();
+        defineCustomElement$A();
       }
       break;
     case "ion-card-content":
       if (!customElements.get(tagName)) {
-        defineCustomElement$y();
+        defineCustomElement$z();
       }
       break;
     case "ion-card-header":
       if (!customElements.get(tagName)) {
-        defineCustomElement$x();
+        defineCustomElement$y();
       }
       break;
     case "ion-card-title":
       if (!customElements.get(tagName)) {
-        defineCustomElement$w();
+        defineCustomElement$x();
       }
       break;
     case "ion-col":
       if (!customElements.get(tagName)) {
-        defineCustomElement$v();
+        defineCustomElement$w();
       }
       break;
     case "ion-grid":
       if (!customElements.get(tagName)) {
-        defineCustomElement$u();
+        defineCustomElement$v();
       }
       break;
     case "ion-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$t();
+        defineCustomElement$u();
       }
       break;
     case "ion-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$s();
+        defineCustomElement$t();
       }
       break;
     case "ion-item-divider":
       if (!customElements.get(tagName)) {
-        defineCustomElement$r();
+        defineCustomElement$s();
       }
       break;
     case "ion-item-group":
       if (!customElements.get(tagName)) {
-        defineCustomElement$q();
+        defineCustomElement$r();
       }
       break;
     case "ion-label":
       if (!customElements.get(tagName)) {
-        defineCustomElement$p();
+        defineCustomElement$q();
       }
       break;
     case "ion-list":
       if (!customElements.get(tagName)) {
-        defineCustomElement$o();
+        defineCustomElement$p();
       }
       break;
     case "ion-note":
       if (!customElements.get(tagName)) {
-        defineCustomElement$n();
+        defineCustomElement$o();
       }
       break;
     case "ion-progress-bar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$m();
+        defineCustomElement$n();
       }
       break;
     case "ion-ripple-effect":
       if (!customElements.get(tagName)) {
-        defineCustomElement$l();
+        defineCustomElement$m();
       }
       break;
     case "ion-row":
       if (!customElements.get(tagName)) {
-        defineCustomElement$k();
+        defineCustomElement$l();
       }
       break;
     case "ion-searchbar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$j();
+        defineCustomElement$k();
       }
       break;
     case "ion-skeleton-text":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$j();
       }
       break;
     case "pos-app-generic":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$i();
       }
       break;
     case "pos-app-image-viewer":
       if (!customElements.get(tagName)) {
-        defineCustomElement$g();
+        defineCustomElement$h();
       }
       break;
     case "pos-app-pdf-viewer":
       if (!customElements.get(tagName)) {
-        defineCustomElement$f();
+        defineCustomElement$g();
       }
       break;
     case "pos-app-rdf-document":
       if (!customElements.get(tagName)) {
-        defineCustomElement$e();
+        defineCustomElement$f();
       }
       break;
     case "pos-description":
       if (!customElements.get(tagName)) {
-        defineCustomElement$d();
+        defineCustomElement$e();
       }
       break;
     case "pos-image":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$d();
       }
       break;
     case "pos-label":
       if (!customElements.get(tagName)) {
-        defineCustomElement$b();
+        defineCustomElement$c();
       }
       break;
     case "pos-literals":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$b();
       }
       break;
     case "pos-navigation-bar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "pos-pdf":
       if (!customElements.get(tagName)) {
         defineCustomElement$9();
       }