@pod-os/elements 0.7.1-92705ee.0 → 0.7.1-a71f01c.0

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

@@ -0,0 +1,162 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { s as subscribeResource } from './ResourceAware.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-image2.js';
+import { d as defineCustomElement$3 } from './pos-label2.js';
+import { d as defineCustomElement$2 } from './pos-literals2.js';
+import { d as defineCustomElement$1 } from './pos-type-badges2.js';
+
+const PosAppImageViewer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.subscribeResource = createEvent(this, "pod-os:resource", 7);
+    this.receiveResource = (resource) => {
+      this.resource = resource;
+    };
+    this.resource = undefined;
+  }
+  componentWillLoad() {
+    subscribeResource(this);
+  }
+  render() {
+    if (!this.resource) {
+      return null;
+    }
+    return (h("ion-grid", null, h("ion-row", null, h("ion-col", { size: "12", "size-sm": true }, h("pos-image", { 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)))))));
+  }
+  static get style() { return "pos-image {\n          --max-width: 100%;\n        }"; }
+}, [1, "pos-app-image-viewer", {
+    "resource": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pos-app-image-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-image", "pos-label", "pos-literals", "pos-type-badges"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pos-app-image-viewer":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PosAppImageViewer);
+      }
+      break;
+    case "ion-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$k();
+      }
+      break;
+    case "ion-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$j();
+      }
+      break;
+    case "ion-card-header":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$i();
+      }
+      break;
+    case "ion-card-title":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "ion-col":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "ion-grid":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "ion-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "ion-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "ion-item-divider":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "ion-item-group":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "ion-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "ion-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "ion-note":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "ion-ripple-effect":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "ion-row":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "ion-skeleton-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "pos-image":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "pos-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "pos-literals":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "pos-type-badges":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { PosAppImageViewer as P, defineCustomElement as d };

package/dist/components/pos-app-rdf-document.d.ts

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

package/dist/components/pos-app-rdf-document.js

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

package/dist/components/pos-app-rdf-document2.js

@@ -0,0 +1,170 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$o } from './badge.js';
+import { d as defineCustomElement$n } from './card.js';
+import { d as defineCustomElement$m } from './card-content.js';
+import { d as defineCustomElement$l } from './card-header.js';
+import { d as defineCustomElement$k } from './card-title.js';
+import { d as defineCustomElement$j } from './col.js';
+import { d as defineCustomElement$i } from './grid.js';
+import { d as defineCustomElement$h } from './icon.js';
+import { d as defineCustomElement$g } from './item.js';
+import { d as defineCustomElement$f } from './item-divider.js';
+import { d as defineCustomElement$e } from './item-group.js';
+import { d as defineCustomElement$d } from './label.js';
+import { d as defineCustomElement$c } from './list.js';
+import { d as defineCustomElement$b } from './note.js';
+import { d as defineCustomElement$a } from './progress-bar.js';
+import { d as defineCustomElement$9 } from './ripple-effect.js';
+import { d as defineCustomElement$8 } from './row.js';
+import { d as defineCustomElement$7 } from './pos-description2.js';
+import { d as defineCustomElement$6 } from './pos-label2.js';
+import { d as defineCustomElement$5 } from './pos-literals2.js';
+import { d as defineCustomElement$4 } from './pos-resource2.js';
+import { d as defineCustomElement$3 } from './pos-rich-link2.js';
+import { d as defineCustomElement$2 } from './pos-subjects2.js';
+import { d as defineCustomElement$1 } from './pos-type-badges2.js';
+
+const PosAppRdfDocument = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h("ion-grid", null, h("ion-row", null, h("ion-col", { size: "12", "size-sm": true }, h("pos-subjects", null)), 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)))))));
+  }
+}, [0, "pos-app-rdf-document"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pos-app-rdf-document", "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", "pos-description", "pos-label", "pos-literals", "pos-resource", "pos-rich-link", "pos-subjects", "pos-type-badges"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pos-app-rdf-document":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PosAppRdfDocument);
+      }
+      break;
+    case "ion-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$o();
+      }
+      break;
+    case "ion-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$n();
+      }
+      break;
+    case "ion-card-content":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$m();
+      }
+      break;
+    case "ion-card-header":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$l();
+      }
+      break;
+    case "ion-card-title":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$k();
+      }
+      break;
+    case "ion-col":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$j();
+      }
+      break;
+    case "ion-grid":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$i();
+      }
+      break;
+    case "ion-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "ion-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "ion-item-divider":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "ion-item-group":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "ion-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "ion-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "ion-note":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "ion-progress-bar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "ion-ripple-effect":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "ion-row":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "pos-description":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "pos-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "pos-literals":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "pos-resource":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "pos-rich-link":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "pos-subjects":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "pos-type-badges":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { PosAppRdfDocument as P, defineCustomElement as d };

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

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

package/dist/components/pos-app.js

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

package/dist/components/pos-app2.js

@@ -0,0 +1,53 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { s as store } from './session.js';
+import { P as PodOS } from './index8.js';
+import { d as defineCustomElement$1 } from './app.js';
+
+const createPodOS = () => {
+  return new PodOS();
+};
+
+const PosApp = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.os = undefined;
+  }
+  componentWillLoad() {
+    this.os = createPodOS();
+    this.os.handleIncomingRedirect();
+    this.os.trackSession(sessionInfo => {
+      store.state.isLoggedIn = sessionInfo.isLoggedIn;
+      store.state.webId = sessionInfo.webId;
+    });
+  }
+  async initializeOs(event) {
+    event.stopPropagation();
+    event.detail(this.os);
+  }
+  render() {
+    return (h("ion-app", null, h("slot", null)));
+  }
+}, [4, "pos-app", {
+    "os": [32]
+  }, [[0, "pod-os:init", "initializeOs"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pos-app", "ion-app"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pos-app":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PosApp);
+      }
+      break;
+    case "ion-app":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { PosApp as P, defineCustomElement as d };

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

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

package/dist/components/pos-description.js

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

package/dist/components/pos-description2.js

@@ -0,0 +1,38 @@
+import { proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
+import { s as subscribeResource } from './ResourceAware.js';
+
+const PosDescription = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.subscribeResource = createEvent(this, "pod-os:resource", 7);
+    this.receiveResource = (resource) => {
+      this.resource = resource;
+    };
+    this.resource = undefined;
+  }
+  componentWillLoad() {
+    subscribeResource(this);
+  }
+  render() {
+    return this.resource ? this.resource.description() : null;
+  }
+}, [1, "pos-description", {
+    "resource": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pos-description"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pos-description":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PosDescription);
+      }
+      break;
+  } });
+}
+
+export { PosDescription as P, defineCustomElement as d };

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

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

package/dist/components/pos-image.js

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

package/dist/components/pos-image2.js

@@ -0,0 +1,117 @@
+import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
+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 {
+  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.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(BrokenImage, { file: this.brokenFile });
+    }
+    return h("img", { src: this.dataUri });
+  }
+  static get watchers() { return {
+    "os": ["fetchBlob"],
+    "src": ["fetchBlob"]
+  }; }
+  static get style() { return posImageCss; }
+}, [1, "pos-image", {
+    "src": [1],
+    "os": [32],
+    "dataUri": [32],
+    "brokenFile": [32],
+    "error": [32],
+    "loading": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pos-image", "ion-icon", "ion-skeleton-text"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pos-image":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PosImage);
+      }
+      break;
+    case "ion-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ion-skeleton-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { PosImage as P, defineCustomElement as d };

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

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

package/dist/components/pos-label.js

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

package/dist/components/pos-label2.js

@@ -0,0 +1,38 @@
+import { proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
+import { s as subscribeResource } from './ResourceAware.js';
+
+const PosLabel = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.subscribeResource = createEvent(this, "pod-os:resource", 7);
+    this.receiveResource = (resource) => {
+      this.resource = resource;
+    };
+    this.resource = undefined;
+  }
+  componentWillLoad() {
+    subscribeResource(this);
+  }
+  render() {
+    return this.resource ? this.resource.label() : null;
+  }
+}, [1, "pos-label", {
+    "resource": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pos-label"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pos-label":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PosLabel);
+      }
+      break;
+  } });
+}
+
+export { PosLabel as P, defineCustomElement as d };