@pod-os/elements 0.25.3-rc.e9054b4.0 → 0.25.3-rc.e91f9f4.0

package/dist/components/pos-relations2.js

@@ -1,11 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as subscribeResource } from './ResourceAware.js';
-import { d as defineCustomElement$b } from './card.js';
-import { d as defineCustomElement$a } from './card-content.js';
-import { d as defineCustomElement$9 } from './card-header.js';
-import { d as defineCustomElement$8 } from './icon.js';
-import { d as defineCustomElement$7 } from './progress-bar.js';
-import { d as defineCustomElement$6 } from './ripple-effect.js';
+import { d as defineCustomElement$7 } from './icon.js';
+import { d as defineCustomElement$6 } from './progress-bar.js';
 import { d as defineCustomElement$5 } from './pos-description2.js';
 import { d as defineCustomElement$4 } from './pos-label2.js';
 import { d as defineCustomElement$3 } from './pos-predicate2.js';
@@ -41,39 +37,19 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-relations", "ion-card", "ion-card-content", "ion-card-header", "ion-icon", "ion-progress-bar", "ion-ripple-effect", "pos-description", "pos-label", "pos-predicate", "pos-resource", "pos-rich-link"];
+    const components = ["pos-relations", "ion-icon", "ion-progress-bar", "pos-description", "pos-label", "pos-predicate", "pos-resource", "pos-rich-link"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-relations":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosRelations);
             }
             break;
-        case "ion-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "ion-card-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "ion-card-header":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
         case "ion-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "ion-progress-bar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "ion-ripple-effect":
+        case "ion-progress-bar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }

package/dist/components/pos-relations2.js.map

@@ -1 +1 @@
-{"file":"pos-relations2.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,ygCAAygC,CAAC;AACliC,2BAAe,eAAe;;MCQjB,YAAY;IALzB;;;;;QAMW,SAAI,GAAe,EAAE,CAAC;QAS/B,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;SAClC,CAAC;KAmBH;IAzBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAMD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAC5B,WAAK,KAAK,EAAC,kBAAkB,IAC3B,cACE,qBAAe,GAAG,EAAE,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,GAAI,CAClD,EACL,WAAK,KAAK,EAAC,QAAQ,IAChB,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KACd,cACE,qBAAe,GAAG,EAAE,GAAG,GAAI,CACxB,CACN,CAAC,CACE,CACF,CACP,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,cAAK,KAAK,CAAM,GAAG,IAAI,CAAC;KACvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-relations/pos-relations.css?tag=pos-relations&encapsulation=shadow","src/components/pos-relations/pos-relations.tsx"],"sourcesContent":[":host {\n  --background-base-color: color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\ndd {\n  padding: 0;\n  margin: 0;\n}\n\ndl {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-1);\n  padding: 0;\n  margin: 0;\n}\n\ndt {\n  margin-bottom: var(--size-1);\n}\n\n.predicate-values:nth-child(odd) {\n  background-color: var(--background-color-odd);\n}\n\n.predicate-values:nth-child(even) {\n  background-color: var(--background-color-even);\n}\n\n.predicate-values {\n  display: flex;\n  flex-direction: column;\n  border: var(--size-px) solid var(--border-color);\n  padding: var(--size-2);\n  gap: var(--size-1);\n\n  .values {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-3);\n  }\n}\n\npos-rich-link {\n  --background-color: inherit;\n}\n","import { Relation, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-relations',\n  shadow: true,\n  styleUrl: 'pos-relations.css',\n})\nexport class PosRelations implements ResourceAware {\n  @State() data: Relation[] = [];\n\n  @Event({ eventName: 'pod-os:resource' })\n  subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.data = resource.relations();\n  };\n\n  render() {\n    const items = this.data.map(it => (\n      <div class=\"predicate-values\">\n        <dt>\n          <pos-predicate uri={it.predicate} label={it.label} />\n        </dt>\n        <div class=\"values\">\n          {it.uris.map(uri => (\n            <dd>\n              <pos-rich-link uri={uri} />\n            </dd>\n          ))}\n        </div>\n      </div>\n    ));\n    return this.data.length > 0 ? <dl>{items}</dl> : null;\n  }\n}\n"],"version":3}
+{"file":"pos-relations2.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,ygCAAygC,CAAC;AACliC,2BAAe,eAAe;;MCQjB,YAAY;IALzB;;;;;QAMW,SAAI,GAAe,EAAE,CAAC;QAS/B,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;SAClC,CAAC;KAmBH;IAzBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAMD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAC5B,WAAK,KAAK,EAAC,kBAAkB,IAC3B,cACE,qBAAe,GAAG,EAAE,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,GAAI,CAClD,EACL,WAAK,KAAK,EAAC,QAAQ,IAChB,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KACd,cACE,qBAAe,GAAG,EAAE,GAAG,GAAI,CACxB,CACN,CAAC,CACE,CACF,CACP,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,cAAK,KAAK,CAAM,GAAG,IAAI,CAAC;KACvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-relations/pos-relations.css?tag=pos-relations&encapsulation=shadow","src/components/pos-relations/pos-relations.tsx"],"sourcesContent":[":host {\n  --background-base-color: color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\ndd {\n  padding: 0;\n  margin: 0;\n}\n\ndl {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-1);\n  padding: 0;\n  margin: 0;\n}\n\ndt {\n  margin-bottom: var(--size-1);\n}\n\n.predicate-values:nth-child(odd) {\n  background-color: var(--background-color-odd);\n}\n\n.predicate-values:nth-child(even) {\n  background-color: var(--background-color-even);\n}\n\n.predicate-values {\n  display: flex;\n  flex-direction: column;\n  border: var(--size-px) solid var(--border-color);\n  padding: var(--size-2);\n  gap: var(--size-1);\n\n  .values {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-3);\n  }\n}\n\npos-rich-link {\n  --background-color: inherit;\n}\n","import { Relation, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-relations',\n  shadow: true,\n  styleUrl: 'pos-relations.css',\n})\nexport class PosRelations implements ResourceAware {\n  @State() data: Relation[] = [];\n\n  @Event({ eventName: 'pod-os:resource' })\n  subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.data = resource.relations();\n  };\n\n  render() {\n    const items = this.data.map(it => (\n      <div class=\"predicate-values\">\n        <dt>\n          <pos-predicate uri={it.predicate} label={it.label} />\n        </dt>\n        <div class=\"values\">\n          {it.uris.map(uri => (\n            <dd>\n              <pos-rich-link uri={uri} />\n            </dd>\n          ))}\n        </div>\n      </div>\n    ));\n    return this.data.length > 0 ? <dl>{items}</dl> : null;\n  }\n}\n"],"version":3}

package/dist/components/pos-resource2.js

@@ -1,11 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as store } from './session.js';
 import { s as subscribePodOs } from './PodOsAware.js';
-import { d as defineCustomElement$5 } from './card.js';
-import { d as defineCustomElement$4 } from './card-content.js';
-import { d as defineCustomElement$3 } from './card-header.js';
-import { d as defineCustomElement$2 } from './progress-bar.js';
-import { d as defineCustomElement$1 } from './ripple-effect.js';
+import { d as defineCustomElement$1 } from './progress-bar.js';
+
+const posResourceCss = "details.error {\n  margin: var(--size-2);\n  background-color: var(--pos-error-background-color);\n  border: var(--size-px) solid var(--pos-error-border-color);\n  padding: var(--size-2);\n  border-radius: var(--radius-md);\n\n  a {\n    color: var(--pos-normal-text-color);\n  }\n}\n";
+const PosResourceStyle0 = posResourceCss;
 
 const PosResource = /*@__PURE__*/ proxyCustomElement(class PosResource extends HTMLElement {
     constructor() {
@@ -63,9 +62,9 @@ const PosResource = /*@__PURE__*/ proxyCustomElement(class PosResource extends H
             return h("ion-progress-bar", { type: "indeterminate" });
         }
         if (this.error) {
-            return (h("ion-card", null, h("ion-card-header", null, h("p", null, "Sorry, something went wrong"), h("p", null, "Status:", 
+            return (h("details", { class: "error" }, h("summary", { title: "Click to expand" }, "\u26A0 Sorry, something went wrong"), h("p", null, "Status:", 
             // @ts-ignore
-            this.error.status), h("details", null, this.error.message)), h("ion-card-content", null, h("p", null, "You can try to open the link outside PodOS:"), h("a", { href: this.uri }, this.uri))));
+            this.error.status), h("p", null, this.error.message), h("p", null, "You can try to open the link outside PodOS: ", h("a", { href: this.uri }, this.uri))));
         }
         return h("slot", null);
     }
@@ -73,6 +72,7 @@ const PosResource = /*@__PURE__*/ proxyCustomElement(class PosResource extends H
         "os": ["loadResource"],
         "uri": ["loadResource"]
     }; }
+    static get style() { return PosResourceStyle0; }
 }, [1, "pos-resource", {
         "uri": [1],
         "lazy": [4],
@@ -90,34 +90,14 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-resource", "ion-card", "ion-card-content", "ion-card-header", "ion-progress-bar", "ion-ripple-effect"];
+    const components = ["pos-resource", "ion-progress-bar"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-resource":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosResource);
             }
             break;
-        case "ion-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "ion-card-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "ion-card-header":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
         case "ion-progress-bar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

package/dist/components/pos-resource2.js.map

@@ -1 +1 @@
-{"file":"pos-resource2.js","mappings":";;;;;;;;;MAea,WAAW;IAJxB;;;;;;QAQW,cAAS,GAA6B,EAAE,CAAC;QAI1C,SAAI,GAAY,KAAK,CAAC;QAatB,YAAO,GAAY,IAAI,CAAC;QAOhC,iBAAY,GAAG,OAAO,EAAS;YAC7B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC;KAoEH;IA3EC,iBAAiB;QACfA,KAAO,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;QAC1D,cAAc,CAAC,IAAI,CAAC,CAAC;KACtB;IAOD,MAAM,eAAe,CAAC,KAA6B;QACjD,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SAC7B;QACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC5B;IAID,MAAM,YAAY;QAChB,MAAM,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACpC;IAGD,MAAM,KAAK;QACT,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;KAC9B;IAEO,MAAM,WAAW,CAAC,QAAiB,KAAK;QAC9C,IAAI;YACF,IAAI,KAAK,EAAE;gBACT,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;gBACpB,MAAM,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBAC9B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aAC3C;YACD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC5C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ;gBAC7B,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;aAChC,CAAC,CAAC;SACJ;QAAC,OAAO,GAAG,EAAE;YACZ,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;SAClB;gBAAS;YACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,wBAAkB,IAAI,EAAC,eAAe,GAAG,CAAC;SAClD;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,QACE,oBACE,2BACE,2CAAkC,EAClC;;YAII,IAAI,CAAC,KAAK,CAAC,MAAM,CAEjB,EACJ,mBAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAW,CACvB,EAClB,4BACE,2DAAkD,EAClD,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IAAG,IAAI,CAAC,GAAG,CAAK,CAChB,CACV,EACX;SACH;QACD,OAAO,eAAQ,CAAC;KACjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["session"],"sources":["src/components/pos-resource/pos-resource.tsx"],"sourcesContent":["import { PodOS, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport session from '../../store/session';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\nimport { ResourceReceiver } from '../events/ResourceAware';\n\ninterface SubscribeResourceEvent extends CustomEvent {\n  detail: ResourceReceiver;\n}\n\n@Component({\n  tag: 'pos-resource',\n  shadow: true,\n})\nexport class PosResource implements PodOsAware {\n  @State() os: PodOS;\n\n  @State() resource: Thing;\n  @State() consumers: SubscribeResourceEvent[] = [];\n\n  @Prop() uri: string;\n\n  @Prop() lazy: boolean = false;\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n  /**\n   * Indicates that the resource given in `uri` property has been loaded.\n   */\n  @Event({ eventName: 'pod-os:resource-loaded' }) resourceLoadedEmitter: EventEmitter;\n\n  @State()\n  private error: Error;\n\n  @State()\n  private loading: boolean = true;\n\n  componentWillLoad() {\n    session.onChange('isLoggedIn', () => this.loadResource());\n    subscribePodOs(this);\n  }\n\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  @Listen('pod-os:resource')\n  async provideResource(event: SubscribeResourceEvent) {\n    event.stopPropagation();\n    if (this.resource) {\n      event.detail(this.resource);\n    }\n    this.consumers.push(event);\n  }\n\n  @Watch('os')\n  @Watch('uri')\n  async loadResource() {\n    await this.getResource(!this.lazy);\n  }\n\n  @Method()\n  async fetch() {\n    await this.getResource(true);\n  }\n\n  private async getResource(fetch: boolean = false) {\n    try {\n      if (fetch) {\n        this.loading = true;\n        await this.os.fetch(this.uri);\n        this.resourceLoadedEmitter.emit(this.uri);\n      }\n      this.resource = this.os.store.get(this.uri);\n      this.error = null;\n      this.consumers.forEach(consumer => {\n        consumer.detail(this.resource);\n      });\n    } catch (err) {\n      this.error = err;\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  render() {\n    if (this.loading) {\n      return <ion-progress-bar type=\"indeterminate\" />;\n    }\n    if (this.error) {\n      return (\n        <ion-card>\n          <ion-card-header>\n            <p>Sorry, something went wrong</p>\n            <p>\n              Status:\n              {\n                // @ts-ignore\n                this.error.status\n              }\n            </p>\n            <details>{this.error.message}</details>\n          </ion-card-header>\n          <ion-card-content>\n            <p>You can try to open the link outside PodOS:</p>\n            <a href={this.uri}>{this.uri}</a>\n          </ion-card-content>\n        </ion-card>\n      );\n    }\n    return <slot />;\n  }\n}\n"],"version":3}
+{"file":"pos-resource2.js","mappings":";;;;;AAAA,MAAM,cAAc,GAAG,8RAA8R,CAAC;AACtT,0BAAe,cAAc;;MCehB,WAAW;IALxB;;;;;;QASW,cAAS,GAA6B,EAAE,CAAC;QAI1C,SAAI,GAAY,KAAK,CAAC;QAatB,YAAO,GAAY,IAAI,CAAC;QAOhC,iBAAY,GAAG,OAAO,EAAS;YAC7B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC;KAiEH;IAxEC,iBAAiB;QACfA,KAAO,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;QAC1D,cAAc,CAAC,IAAI,CAAC,CAAC;KACtB;IAOD,MAAM,eAAe,CAAC,KAA6B;QACjD,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SAC7B;QACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC5B;IAID,MAAM,YAAY;QAChB,MAAM,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACpC;IAGD,MAAM,KAAK;QACT,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;KAC9B;IAEO,MAAM,WAAW,CAAC,QAAiB,KAAK;QAC9C,IAAI;YACF,IAAI,KAAK,EAAE;gBACT,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;gBACpB,MAAM,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBAC9B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aAC3C;YACD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC5C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ;gBAC7B,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;aAChC,CAAC,CAAC;SACJ;QAAC,OAAO,GAAG,EAAE;YACZ,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;SAClB;gBAAS;YACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,wBAAkB,IAAI,EAAC,eAAe,GAAG,CAAC;SAClD;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,QACE,eAAS,KAAK,EAAC,OAAO,IACpB,eAAS,KAAK,EAAC,iBAAiB,yCAAwC,EACxE;;YAII,IAAI,CAAC,KAAK,CAAC,MAAM,CAEjB,EACJ,aAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAK,EAC3B,6DAC8C,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IAAG,IAAI,CAAC,GAAG,CAAK,CAC3E,CACI,EACV;SACH;QACD,OAAO,eAAQ,CAAC;KACjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["session"],"sources":["src/components/pos-resource/pos-resource.css?tag=pos-resource&encapsulation=shadow","src/components/pos-resource/pos-resource.tsx"],"sourcesContent":["details.error {\n  margin: var(--size-2);\n  background-color: var(--pos-error-background-color);\n  border: var(--size-px) solid var(--pos-error-border-color);\n  padding: var(--size-2);\n  border-radius: var(--radius-md);\n\n  a {\n    color: var(--pos-normal-text-color);\n  }\n}\n","import { PodOS, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport session from '../../store/session';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\nimport { ResourceReceiver } from '../events/ResourceAware';\n\ninterface SubscribeResourceEvent extends CustomEvent {\n  detail: ResourceReceiver;\n}\n\n@Component({\n  tag: 'pos-resource',\n  shadow: true,\n  styleUrl: 'pos-resource.css',\n})\nexport class PosResource implements PodOsAware {\n  @State() os: PodOS;\n\n  @State() resource: Thing;\n  @State() consumers: SubscribeResourceEvent[] = [];\n\n  @Prop() uri: string;\n\n  @Prop() lazy: boolean = false;\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n  /**\n   * Indicates that the resource given in `uri` property has been loaded.\n   */\n  @Event({ eventName: 'pod-os:resource-loaded' }) resourceLoadedEmitter: EventEmitter;\n\n  @State()\n  private error: Error;\n\n  @State()\n  private loading: boolean = true;\n\n  componentWillLoad() {\n    session.onChange('isLoggedIn', () => this.loadResource());\n    subscribePodOs(this);\n  }\n\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  @Listen('pod-os:resource')\n  async provideResource(event: SubscribeResourceEvent) {\n    event.stopPropagation();\n    if (this.resource) {\n      event.detail(this.resource);\n    }\n    this.consumers.push(event);\n  }\n\n  @Watch('os')\n  @Watch('uri')\n  async loadResource() {\n    await this.getResource(!this.lazy);\n  }\n\n  @Method()\n  async fetch() {\n    await this.getResource(true);\n  }\n\n  private async getResource(fetch: boolean = false) {\n    try {\n      if (fetch) {\n        this.loading = true;\n        await this.os.fetch(this.uri);\n        this.resourceLoadedEmitter.emit(this.uri);\n      }\n      this.resource = this.os.store.get(this.uri);\n      this.error = null;\n      this.consumers.forEach(consumer => {\n        consumer.detail(this.resource);\n      });\n    } catch (err) {\n      this.error = err;\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  render() {\n    if (this.loading) {\n      return <ion-progress-bar type=\"indeterminate\" />;\n    }\n    if (this.error) {\n      return (\n        <details class=\"error\">\n          <summary title=\"Click to expand\">⚠ Sorry, something went wrong</summary>\n          <p>\n            Status:\n            {\n              // @ts-ignore\n              this.error.status\n            }\n          </p>\n          <p>{this.error.message}</p>\n          <p>\n            You can try to open the link outside PodOS: <a href={this.uri}>{this.uri}</a>\n          </p>\n        </details>\n      );\n    }\n    return <slot />;\n  }\n}\n"],"version":3}

package/dist/components/pos-reverse-relations2.js

@@ -1,11 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as subscribeResource } from './ResourceAware.js';
-import { d as defineCustomElement$b } from './card.js';
-import { d as defineCustomElement$a } from './card-content.js';
-import { d as defineCustomElement$9 } from './card-header.js';
-import { d as defineCustomElement$8 } from './icon.js';
-import { d as defineCustomElement$7 } from './progress-bar.js';
-import { d as defineCustomElement$6 } from './ripple-effect.js';
+import { d as defineCustomElement$7 } from './icon.js';
+import { d as defineCustomElement$6 } from './progress-bar.js';
 import { d as defineCustomElement$5 } from './pos-description2.js';
 import { d as defineCustomElement$4 } from './pos-label2.js';
 import { d as defineCustomElement$3 } from './pos-predicate2.js';
@@ -41,39 +37,19 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-reverse-relations", "ion-card", "ion-card-content", "ion-card-header", "ion-icon", "ion-progress-bar", "ion-ripple-effect", "pos-description", "pos-label", "pos-predicate", "pos-resource", "pos-rich-link"];
+    const components = ["pos-reverse-relations", "ion-icon", "ion-progress-bar", "pos-description", "pos-label", "pos-predicate", "pos-resource", "pos-rich-link"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-reverse-relations":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosReverseRelations);
             }
             break;
-        case "ion-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "ion-card-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "ion-card-header":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
         case "ion-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "ion-progress-bar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "ion-ripple-effect":
+        case "ion-progress-bar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }

package/dist/components/pos-reverse-relations2.js.map

@@ -1 +1 @@
-{"file":"pos-reverse-relations2.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,sBAAsB,GAAG,ugCAAugC,CAAC;AACviC,kCAAe,sBAAsB;;MCQxB,mBAAmB;IALhC;;;;;QAMW,SAAI,GAAe,EAAE,CAAC;QAQ/B,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,gBAAgB,EAAE,CAAC;SACzC,CAAC;KAmBH;IAzBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAMD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAC5B,WAAK,KAAK,EAAC,kBAAkB,IAC3B,cACE,qBAAe,GAAG,EAAE,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,GAAI,CAC7D,EACL,WAAK,KAAK,EAAC,QAAQ,IAChB,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KACd,cACE,qBAAe,GAAG,EAAE,GAAG,GAAI,CACxB,CACN,CAAC,CACE,CACF,CACP,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,cAAK,KAAK,CAAM,GAAG,IAAI,CAAC;KACvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-reverse-relations/pos-reverse-relations.css?tag=pos-reverse-relations&encapsulation=shadow","src/components/pos-reverse-relations/pos-reverse-relations.tsx"],"sourcesContent":[":host {\n  --background-base-color: color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\ndd {\n  padding: 0;\n  margin: 0;\n}\n\ndl {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-1);\n  padding: 0;\n  margin: 0;\n}\n\ndt {\n  margin-bottom: var(--size-1);\n}\n\n.predicate-values:nth-child(odd) {\n  background-color: var(--background-color-odd);\n}\n\n.predicate-values:nth-child(even) {\n  background-color: var(--background-color-even);\n}\n\n.predicate-values {\n  display: flex;\n  flex-direction: column;\n  border: var(--size-px) solid var(--border-color);\n  padding: var(--size-2);\n  gap: var(--size-1);\n  .values {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-3);\n  }\n}\n\npos-rich-link {\n  --background-color: inherit;\n}\n","import { Relation, Thing } from '@pod-os/core';\nimport { Component, h, Event, EventEmitter, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-reverse-relations',\n  shadow: true,\n  styleUrl: 'pos-reverse-relations.css',\n})\nexport class PosReverseRelations implements ResourceAware {\n  @State() data: Relation[] = [];\n\n  @Event({ eventName: 'pod-os:resource' }) subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.data = resource.reverseRelations();\n  };\n\n  render() {\n    const items = this.data.map(it => (\n      <div class=\"predicate-values\">\n        <dt>\n          <pos-predicate uri={it.predicate} label={`is ${it.label} of`} />\n        </dt>\n        <div class=\"values\">\n          {it.uris.map(uri => (\n            <dd>\n              <pos-rich-link uri={uri} />\n            </dd>\n          ))}\n        </div>\n      </div>\n    ));\n    return this.data.length > 0 ? <dl>{items}</dl> : null;\n  }\n}\n"],"version":3}
+{"file":"pos-reverse-relations2.js","mappings":";;;;;;;;;;AAAA,MAAM,sBAAsB,GAAG,ugCAAugC,CAAC;AACviC,kCAAe,sBAAsB;;MCQxB,mBAAmB;IALhC;;;;;QAMW,SAAI,GAAe,EAAE,CAAC;QAQ/B,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,gBAAgB,EAAE,CAAC;SACzC,CAAC;KAmBH;IAzBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAMD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAC5B,WAAK,KAAK,EAAC,kBAAkB,IAC3B,cACE,qBAAe,GAAG,EAAE,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,GAAI,CAC7D,EACL,WAAK,KAAK,EAAC,QAAQ,IAChB,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KACd,cACE,qBAAe,GAAG,EAAE,GAAG,GAAI,CACxB,CACN,CAAC,CACE,CACF,CACP,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,cAAK,KAAK,CAAM,GAAG,IAAI,CAAC;KACvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-reverse-relations/pos-reverse-relations.css?tag=pos-reverse-relations&encapsulation=shadow","src/components/pos-reverse-relations/pos-reverse-relations.tsx"],"sourcesContent":[":host {\n  --background-base-color: color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\ndd {\n  padding: 0;\n  margin: 0;\n}\n\ndl {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-1);\n  padding: 0;\n  margin: 0;\n}\n\ndt {\n  margin-bottom: var(--size-1);\n}\n\n.predicate-values:nth-child(odd) {\n  background-color: var(--background-color-odd);\n}\n\n.predicate-values:nth-child(even) {\n  background-color: var(--background-color-even);\n}\n\n.predicate-values {\n  display: flex;\n  flex-direction: column;\n  border: var(--size-px) solid var(--border-color);\n  padding: var(--size-2);\n  gap: var(--size-1);\n  .values {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-3);\n  }\n}\n\npos-rich-link {\n  --background-color: inherit;\n}\n","import { Relation, Thing } from '@pod-os/core';\nimport { Component, h, Event, EventEmitter, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-reverse-relations',\n  shadow: true,\n  styleUrl: 'pos-reverse-relations.css',\n})\nexport class PosReverseRelations implements ResourceAware {\n  @State() data: Relation[] = [];\n\n  @Event({ eventName: 'pod-os:resource' }) subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.data = resource.reverseRelations();\n  };\n\n  render() {\n    const items = this.data.map(it => (\n      <div class=\"predicate-values\">\n        <dt>\n          <pos-predicate uri={it.predicate} label={`is ${it.label} of`} />\n        </dt>\n        <div class=\"values\">\n          {it.uris.map(uri => (\n            <dd>\n              <pos-rich-link uri={uri} />\n            </dd>\n          ))}\n        </div>\n      </div>\n    ));\n    return this.data.length > 0 ? <dl>{items}</dl> : null;\n  }\n}\n"],"version":3}

package/dist/components/pos-rich-link2.js

@@ -1,9 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$8 } from './card.js';
-import { d as defineCustomElement$7 } from './card-content.js';
-import { d as defineCustomElement$6 } from './card-header.js';
-import { d as defineCustomElement$5 } from './progress-bar.js';
-import { d as defineCustomElement$4 } from './ripple-effect.js';
+import { d as defineCustomElement$4 } from './progress-bar.js';
 import { d as defineCustomElement$3 } from './pos-description2.js';
 import { d as defineCustomElement$2 } from './pos-label2.js';
 import { d as defineCustomElement$1 } from './pos-resource2.js';
@@ -19,10 +15,10 @@ const PosRichLink = /*@__PURE__*/ proxyCustomElement(class PosRichLink extends H
         this.linkEmitter = createEvent(this, "pod-os:link", 7);
     }
     render() {
-        return (h("pos-resource", { key: '3b236e4b091933214cdedb460d916d8d09d5dca8', lazy: true, uri: this.uri }, h("p", { key: '988ccbc7283df323fe9a3230fcb8761bc44ef71f', class: "content" }, h("a", { key: '48054e89ea97d8a5b974811dfbfeab2dbc49a7da', href: this.uri, onClick: e => {
+        return (h("pos-resource", { key: '0a794cc8287b13f163a813dc6a4f87b2f00e028b', lazy: true, uri: this.uri }, h("p", { key: 'b7a44482a82cd69228f144b04e9ec20b84410339', class: "content" }, h("a", { key: '0d218d4d5c1991c767b66f0d37c5476038e7a0fb', href: this.uri, onClick: e => {
                 e.preventDefault();
                 this.linkEmitter.emit(this.uri);
-            } }, h("pos-label", { key: '9c1cb23e622d7130d37bfa17106e345949f44d9e' })), h("span", { key: 'c4f1532dffb691838947d2e9e79d4f8a51ef1eeb', class: "url" }, new URL(this.uri).host), h("pos-description", { key: 'c9a4b76eb86af15f908b820f06c4631a22f0c34f' }))));
+            } }, h("pos-label", { key: 'd04048986a7a4da138608f187a2f27e6313d9a6e' })), h("span", { key: '53a05023aa2fec4725e1d7e59acee9888476ecac', class: "url" }, new URL(this.uri).host), h("pos-description", { key: 'a73de2d208b684a9f555cda312e94df4282afba0' }))));
     }
     static get style() { return PosRichLinkStyle0; }
 }, [1, "pos-rich-link", {
@@ -32,34 +28,14 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-rich-link", "ion-card", "ion-card-content", "ion-card-header", "ion-progress-bar", "ion-ripple-effect", "pos-description", "pos-label", "pos-resource"];
+    const components = ["pos-rich-link", "ion-progress-bar", "pos-description", "pos-label", "pos-resource"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-rich-link":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosRichLink);
             }
             break;
-        case "ion-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "ion-card-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "ion-card-header":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
         case "ion-progress-bar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

package/dist/components/pos-rich-link2.js.map

@@ -1 +1 @@
-{"file":"pos-rich-link2.js","mappings":";;;;;;;;;;AAAA,MAAM,cAAc,GAAG,u1CAAu1C,CAAC;AAC/2C,0BAAe,cAAc;;MCMhB,WAAW;;;;;;;IAKtB,MAAM;QACJ,QACE,qEAAc,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,IACrC,0DAAG,KAAK,EAAC,SAAS,IAChB,0DACE,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,OAAO,EAAE,CAAC;gBACR,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aACjC,IAED,mEAAa,CACX,EACJ,6DAAM,KAAK,EAAC,KAAK,IAAE,IAAI,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAQ,EACjD,yEAAmB,CACjB,CACS,EACf;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-rich-link/pos-rich-link.css?tag=pos-rich-link&encapsulation=shadow","src/components/pos-rich-link/pos-rich-link.tsx"],"sourcesContent":[":host {\n  --background-color: inherit;\n  --label-color: var(--pos-normal-text-color);\n  --description-color: var(--pos-normal-text-color);\n  --uri-color: var(--pos-subtle-text-color);\n  --font-family: var(--font-sans);\n}\n\np.content {\n  background-color: var(--background-color);\n  line-height: var(--line-xs);\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: baseline;\n  gap: var(--size-1);\n\n  .url {\n    font-size: var(--scale-fluid-1);\n    color: var(--color-grey-500);\n  }\n}\n\na {\n  color: var(--label-color);\n  max-width: var(--prose-lg);\n  text-decoration: underline;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-decoration-thickness: var(--size-px);\n}\n\npos-label {\n  color: var(--label-color);\n  font-size: var(--scale-fluid-2);\n  margin-bottom: var(--size-1);\n}\n\npos-description {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-weight: var(--weight-light);\n  color: var(--description-color);\n  font-size: var(--scale-fluid-2);\n}\n\n@media (min-width: 640px) {\n  pos-label {\n    font-size: var(--scale-fluid-0);\n  }\n  pos-description {\n    font-size: var(--scale-fluid-1);\n  }\n\n  p.content {\n    .url {\n      font-size: var(--scale-fluid-000);\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pos-rich-link',\n  shadow: true,\n  styleUrl: 'pos-rich-link.css',\n})\nexport class PosRichLink {\n  @Prop() uri: string;\n\n  @Event({ eventName: 'pod-os:link' }) linkEmitter: EventEmitter;\n\n  render() {\n    return (\n      <pos-resource lazy={true} uri={this.uri}>\n        <p class=\"content\">\n          <a\n            href={this.uri}\n            onClick={e => {\n              e.preventDefault();\n              this.linkEmitter.emit(this.uri);\n            }}\n          >\n            <pos-label />\n          </a>\n          <span class=\"url\">{new URL(this.uri).host}</span>\n          <pos-description />\n        </p>\n      </pos-resource>\n    );\n  }\n}\n"],"version":3}
+{"file":"pos-rich-link2.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,u1CAAu1C,CAAC;AAC/2C,0BAAe,cAAc;;MCMhB,WAAW;;;;;;;IAKtB,MAAM;QACJ,QACE,qEAAc,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,IACrC,0DAAG,KAAK,EAAC,SAAS,IAChB,0DACE,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,OAAO,EAAE,CAAC;gBACR,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aACjC,IAED,mEAAa,CACX,EACJ,6DAAM,KAAK,EAAC,KAAK,IAAE,IAAI,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAQ,EACjD,yEAAmB,CACjB,CACS,EACf;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-rich-link/pos-rich-link.css?tag=pos-rich-link&encapsulation=shadow","src/components/pos-rich-link/pos-rich-link.tsx"],"sourcesContent":[":host {\n  --background-color: inherit;\n  --label-color: var(--pos-normal-text-color);\n  --description-color: var(--pos-normal-text-color);\n  --uri-color: var(--pos-subtle-text-color);\n  --font-family: var(--font-sans);\n}\n\np.content {\n  background-color: var(--background-color);\n  line-height: var(--line-xs);\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: baseline;\n  gap: var(--size-1);\n\n  .url {\n    font-size: var(--scale-fluid-1);\n    color: var(--color-grey-500);\n  }\n}\n\na {\n  color: var(--label-color);\n  max-width: var(--prose-lg);\n  text-decoration: underline;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-decoration-thickness: var(--size-px);\n}\n\npos-label {\n  color: var(--label-color);\n  font-size: var(--scale-fluid-2);\n  margin-bottom: var(--size-1);\n}\n\npos-description {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-weight: var(--weight-light);\n  color: var(--description-color);\n  font-size: var(--scale-fluid-2);\n}\n\n@media (min-width: 640px) {\n  pos-label {\n    font-size: var(--scale-fluid-0);\n  }\n  pos-description {\n    font-size: var(--scale-fluid-1);\n  }\n\n  p.content {\n    .url {\n      font-size: var(--scale-fluid-000);\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pos-rich-link',\n  shadow: true,\n  styleUrl: 'pos-rich-link.css',\n})\nexport class PosRichLink {\n  @Prop() uri: string;\n\n  @Event({ eventName: 'pod-os:link' }) linkEmitter: EventEmitter;\n\n  render() {\n    return (\n      <pos-resource lazy={true} uri={this.uri}>\n        <p class=\"content\">\n          <a\n            href={this.uri}\n            onClick={e => {\n              e.preventDefault();\n              this.linkEmitter.emit(this.uri);\n            }}\n          >\n            <pos-label />\n          </a>\n          <span class=\"url\">{new URL(this.uri).host}</span>\n          <pos-description />\n        </p>\n      </pos-resource>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pos-router2.js

@@ -327,7 +327,7 @@ const PosRouter = /*@__PURE__*/ proxyCustomElement(class PosRouter extends HTMLE
         this.routeChanged.emit(this.uri);
     }
     render() {
-        return h("slot", { key: '5c111993377abe4ad03de3c8678c0a5a9529085a' });
+        return h("slot", { key: '221db70a52ce7ebc7e9c171142dcf94f252fa985' });
     }
     static get style() { return PosRouterStyle0; }
 }, [4, "pos-router", {

package/dist/components/pos-select-term2.js

@@ -28,7 +28,7 @@ const PosSelectTerm = /*@__PURE__*/ proxyCustomElement(class PosSelectTerm exten
         this.termSelected.emit({ uri: event.target.value });
     }
     render() {
-        return (h(Host, { key: 'd8316308e089f89fdbb16dbdf799caa308713a14' }, h("input", { key: 'aab9ef56274dd2608c346673fd9be2420b0f6dbf', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: '5b54e6c44cd926b9b40fe79de1afb12326f919bc', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
+        return (h(Host, { key: '7a548735e2a0478fa1e63e2a880ca61f0f43d91c' }, h("input", { key: '9549691026f4bf42a3048f2af3a78bd71536b160', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: 'adfd77a001389d6cc092e3b054ef12e45d562d54', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
     }
     static get delegatesFocus() { return true; }
     static get watchers() { return {

package/dist/components/pos-setting-offline-cache2.js

@@ -11,7 +11,7 @@ const PosSettingOfflineCache = /*@__PURE__*/ proxyCustomElement(class PosSetting
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'b598a0dbe21fe9e7f1aa0f51f0b53c270feb8add' }, h("div", { key: '5cec10cc63203c8421bbb627643f1365899cc850' }, h("h2", { key: '094528da7d8567e8a2ba6e82fb1c05b2f4dc7b22' }, h("svg", { key: '3d3e8b17420ba7352877eb1c6bca17d3791b1bd6', xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, h("path", { key: '065bc78382b03bd2bcc3c812a71e9f27c4e3251c', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" })), "Cache Settings"), h("p", { key: '5e5d2ec497039791f82a857a709157e6b97efdfe', class: "info" }, "\u2139 Enable offline cache to be able to access previously loaded data while offline."), h("p", { key: 'd4ff4a3a17df1e5ed7ce076abbf98def4ebdac7d', class: "warn" }, "\u26A0 Private data may be stored on this device. Only enable it, if you trust this device."), h("label", { key: '1d1aa4f7b4b5fa53080cc5635a20ccee3faee29d' }, h("input", { key: '4223888802ea51dec26a3d23abdd9c28098de5aa', type: "checkbox", checked: localSettings.state.offlineCache, onChange: ev => (localSettings.state.offlineCache = ev.target.checked) }), "Enable offline cache"))));
+        return (h(Host, { key: 'f024e7d542cfc87a4dc0a1f22694b664086ebd60' }, h("div", { key: 'e88e694cefa4a2361ca8c67f1bd023fda1b70f2a' }, h("h2", { key: 'c4b2e6270f26a2eb7f62e5076b40834903fc10e4' }, h("svg", { key: 'd63643c1ed908c6fe9ab4ff6c47b13848c714c32', xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, h("path", { key: '78f055556bb175ea17d0db1ccf78c16343d67d3f', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" })), "Cache Settings"), h("p", { key: '3045ae3214b9e91feb34857ce45a3db6529f2959', class: "info" }, "\u2139 Enable offline cache to be able to access previously loaded data while offline."), h("p", { key: '9987c1cb59b62e1eb06c67a9c646a9a2f125529a', class: "warn" }, "\u26A0 Private data may be stored on this device. Only enable it, if you trust this device."), h("label", { key: '55dd3c0fa7ece9a59437e7818d6cfa9b0e9eb5bf' }, h("input", { key: '22874f8a39b5016b71818fa1d6226bf66ff969c3', type: "checkbox", checked: localSettings.state.offlineCache, onChange: ev => (localSettings.state.offlineCache = ev.target.checked) }), "Enable offline cache"))));
     }
     static get style() { return PosSettingOfflineCacheStyle0; }
 }, [1, "pos-setting-offline-cache"]);

package/dist/components/pos-subjects2.js

@@ -1,11 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { R as RdfDocument } from './index10.js';
 import { s as subscribeResource } from './ResourceAware.js';
-import { d as defineCustomElement$9 } from './card.js';
-import { d as defineCustomElement$8 } from './card-content.js';
-import { d as defineCustomElement$7 } from './card-header.js';
-import { d as defineCustomElement$6 } from './progress-bar.js';
-import { d as defineCustomElement$5 } from './ripple-effect.js';
+import { d as defineCustomElement$5 } from './progress-bar.js';
 import { d as defineCustomElement$4 } from './pos-description2.js';
 import { d as defineCustomElement$3 } from './pos-label2.js';
 import { d as defineCustomElement$2 } from './pos-resource2.js';
@@ -41,34 +37,14 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-subjects", "ion-card", "ion-card-content", "ion-card-header", "ion-progress-bar", "ion-ripple-effect", "pos-description", "pos-label", "pos-resource", "pos-rich-link"];
+    const components = ["pos-subjects", "ion-progress-bar", "pos-description", "pos-label", "pos-resource", "pos-rich-link"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-subjects":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosSubjects);
             }
             break;
-        case "ion-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "ion-card-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "ion-card-header":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
         case "ion-progress-bar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }

package/dist/components/pos-subjects2.js.map

@@ -1 +1 @@
-{"file":"pos-subjects2.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,cAAc,GAAG,wuBAAwuB,CAAC;AAChwB,0BAAe,cAAc;;MCQhB,WAAW;IALxB;;;;;QAMW,SAAI,GAAc,EAAE,CAAC;QAS9B,oBAAe,GAAG,CAAC,QAAe;YAChC,MAAM,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;YACzC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;SAC5B,CAAC;KAUH;IAjBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAOD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAC5B,cACE,qBAAe,GAAG,EAAE,EAAE,CAAC,GAAG,GAAI,CAC3B,CACN,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,cAAK,KAAK,CAAM,GAAG,IAAI,CAAC;KACvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-subjects/pos-subjects.css?tag=pos-subjects&encapsulation=shadow","src/components/pos-subjects/pos-subjects.tsx"],"sourcesContent":[":host {\n  --background-base-color: color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\nul {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-2);\n\n  margin: 0;\n  padding: 0;\n\n  li {\n    border: var(--size-px) solid var(--border-color);\n    &:nth-child(even) {\n      background-color: var(--background-color-even);\n    }\n    &:nth-child(odd) {\n      background-color: var(--background-color-odd);\n    }\n    padding: var(--size-4);\n    list-style-type: none;\n  }\n}\n","import { RdfDocument, Subject, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-subjects',\n  shadow: true,\n  styleUrl: 'pos-subjects.css',\n})\nexport class PosSubjects implements ResourceAware {\n  @State() data: Subject[] = [];\n\n  @Event({ eventName: 'pod-os:resource' })\n  subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    const doc = resource.assume(RdfDocument);\n    this.data = doc.subjects();\n  };\n\n  render() {\n    const items = this.data.map(it => (\n      <li>\n        <pos-rich-link uri={it.uri} />\n      </li>\n    ));\n    return this.data.length > 0 ? <ul>{items}</ul> : null;\n  }\n}\n"],"version":3}
+{"file":"pos-subjects2.js","mappings":";;;;;;;;;AAAA,MAAM,cAAc,GAAG,wuBAAwuB,CAAC;AAChwB,0BAAe,cAAc;;MCQhB,WAAW;IALxB;;;;;QAMW,SAAI,GAAc,EAAE,CAAC;QAS9B,oBAAe,GAAG,CAAC,QAAe;YAChC,MAAM,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;YACzC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;SAC5B,CAAC;KAUH;IAjBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAOD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAC5B,cACE,qBAAe,GAAG,EAAE,EAAE,CAAC,GAAG,GAAI,CAC3B,CACN,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,cAAK,KAAK,CAAM,GAAG,IAAI,CAAC;KACvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-subjects/pos-subjects.css?tag=pos-subjects&encapsulation=shadow","src/components/pos-subjects/pos-subjects.tsx"],"sourcesContent":[":host {\n  --background-base-color: color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\nul {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-2);\n\n  margin: 0;\n  padding: 0;\n\n  li {\n    border: var(--size-px) solid var(--border-color);\n    &:nth-child(even) {\n      background-color: var(--background-color-even);\n    }\n    &:nth-child(odd) {\n      background-color: var(--background-color-odd);\n    }\n    padding: var(--size-4);\n    list-style-type: none;\n  }\n}\n","import { RdfDocument, Subject, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-subjects',\n  shadow: true,\n  styleUrl: 'pos-subjects.css',\n})\nexport class PosSubjects implements ResourceAware {\n  @State() data: Subject[] = [];\n\n  @Event({ eventName: 'pod-os:resource' })\n  subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    const doc = resource.assume(RdfDocument);\n    this.data = doc.subjects();\n  };\n\n  render() {\n    const items = this.data.map(it => (\n      <li>\n        <pos-rich-link uri={it.uri} />\n      </li>\n    ));\n    return this.data.length > 0 ? <ul>{items}</ul> : null;\n  }\n}\n"],"version":3}

package/dist/elements/elements.css

@@ -14,7 +14,7 @@ html.ios{--ion-default-font:-apple-system,BlinkMacSystemFont,"Helvetica Neue","R
       var(--color-slate-200) 70%,
       var(--color-slate-300) 100%
     ),
-    radial-gradient(ellipse 1000px 300px at 50% 100%, var(--color-slate-200), transparent 80%);--pos-card-background:var(--color-white);color:var(--pos-normal-text-color)}@media (prefers-color-scheme: dark){:root{--pos-primary-text-color:var(--color-grey-50);--pos-normal-text-color:var(--color-grey-100);--pos-secondary-text-color:var(--color-grey-200);--pos-subtle-text-color:var(--color-grey-400);--pos-disabled-text-color:var(--color-grey-700);--pos-primary-color:var(--color-blue-500);--pos-disabled-color:var(--color-slate-800);--pos-background-color:var(--color-grey-900);--pos-input-background-color:var(--color-slate-700);--pos-border-color:var(--color-grey-800);--pos-secondary-border-color:var(--color-grey-200);--pos-input-outline:var(--size-px) solid var(--color-grey-300);--pos-input-focus-outline:var(--size-px) solid var(--pos-primary-color);--pos-border-solid:var(--size-px) solid var(--pos-border-color);--pos-app-background:radial-gradient(ellipse 800px 600px at 25% 20%, var(--color-grey-700), transparent 60%),
+    radial-gradient(ellipse 1000px 300px at 50% 100%, var(--color-slate-200), transparent 80%);--pos-card-background:var(--color-white);color:var(--pos-normal-text-color);--pos-error-background-color:var(--color-red-50);--pos-error-border-color:var(--color-red-600)}@media (prefers-color-scheme: dark){:root{--pos-primary-text-color:var(--color-grey-50);--pos-normal-text-color:var(--color-grey-100);--pos-secondary-text-color:var(--color-grey-200);--pos-subtle-text-color:var(--color-grey-400);--pos-disabled-text-color:var(--color-grey-700);--pos-primary-color:var(--color-blue-500);--pos-disabled-color:var(--color-slate-800);--pos-background-color:var(--color-grey-900);--pos-input-background-color:var(--color-slate-700);--pos-border-color:var(--color-grey-800);--pos-secondary-border-color:var(--color-grey-200);--pos-input-outline:var(--size-px) solid var(--color-grey-300);--pos-input-focus-outline:var(--size-px) solid var(--pos-primary-color);--pos-border-solid:var(--size-px) solid var(--pos-border-color);--pos-app-background:radial-gradient(ellipse 800px 600px at 25% 20%, var(--color-grey-700), transparent 60%),
       radial-gradient(ellipse 600px 400px at 80% 70%, var(--color-grey-800), transparent 50%),
       radial-gradient(circle 400px at 60% 40%, var(--color-grey-900), transparent 70%),
       linear-gradient(
@@ -24,4 +24,4 @@ html.ios{--ion-default-font:-apple-system,BlinkMacSystemFont,"Helvetica Neue","R
         var(--color-grey-800) 70%,
         var(--color-grey-700) 100%
       ),
-      radial-gradient(ellipse 1000px 300px at 50% 100%, var(--color-grey-800), transparent 80%);--pos-card-background:var(--color-grey-900)}}
+      radial-gradient(ellipse 1000px 300px at 50% 100%, var(--color-grey-800), transparent 80%);--pos-card-background:var(--color-grey-900);--pos-error-background-color:var(--color-red-950);--pos-error-border-color:var(--color-red-400)}}