npm - @pod-os/elements - Versions diffs - 0.21.1-5f6551f.0 → 0.21.1-aba77d3.0 - Mend

@pod-os/elements 0.21.1-5f6551f.0 → 0.21.1-aba77d3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (115) hide show

package/dist/collection/components/pos-image/pos-image.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pos-image.js","sourceRoot":"","sources":["../../../../src/components/pos-image/pos-image.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;~~AACtF~~,OAAO,OAAO,MAAM,qBAAqB,CAAC;AAE1C;;;;GAIG;AAMH,MAAM,OAAO,QAAQ;;~~QAkCnB~~,UAAK,GAAG,KAAK,EAAE,EAAS,EAAE,EAAE;YAC1B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACf,CAAC,CAAC~~;;;;;;;;uBAhByB~~,IAAI;;IAS/B,iBAAiB;QACf,OAAO,CAAC,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QACvD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAQD,KAAK,CAAC,SAAS;QACb,IAAI,CAAC;YACH,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YACzB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC/C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC1C,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;gBAChB,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;YAClD,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,UAAU,GAAG,IAAsB,CAAC;YAC3C,CAAC;QACH,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC;QAC1B,CAAC;gBAAS,CAAC;YACT,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC;IACH,CAAC;IAED,YAAY,CAAC,GAAU;QACrB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO,yBAAmB,QAAQ,EAAE,IAAI,GAAsB,CAAC;QACjE,CAAC;QACD,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,wBAAwB;YACxB,OAAO,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,GAAI,CAAC;QACvF,CAAC;QACD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,gDAAgD;YAChD,OAAO,EAAC,UAAU,IAAC,IAAI,EAAE,IAAI,CAAC,UAAU,GAAI,CAAC;QAC/C,CAAC;QACD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,wEAAwE;YACxE,OAAO,CACL,WAAK,KAAK,EAAC,OAAO;gBAChB,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IAAG,IAAI,CAAC,GAAG,CAAK,CAC7B,CACP,CAAC;QACJ,CAAC;QAED,OAAO,WAAK,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAAC;~~IACnD~~,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { BrokenFile as BrokenFileData, PodOS } from '@pod-os/core';\nimport { BrokenFile } from '../broken-file/BrokenFile';\nimport { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport session from '../../store/session';\n\n/*\n Tries fetch an image with the solid authentication, and can visualize http errors like 403 or 404 if this fails.\n * Falls back to classic <img src=\"...\"> on network errors like CORS.\n * Renders a normal link if even this fails.\n /\n@Component({\n tag: 'pos-image',\n styleUrl: 'pos-image.css',\n shadow: true,\n})\nexport class PosImage {\n @Prop() src: string;\n\n @Prop() alt: string;\n\n @State() os: PodOS;\n\n @State()\n private dataUri: string;\n\n @State()\n private brokenFile: BrokenFileData;\n\n @State()\n private networkError: Error;\n\n @State()\n private imageError: Event;\n\n @State()\n private loading: boolean = true;\n\n @Event({ eventName: 'pod-os:init' }) initializeOsEmitter: EventEmitter;\n\n /\n Indicates that the resource given in `src` property has been loaded.\n */\n @Event({ eventName: 'pod-os:resource-loaded' }) resourceLoadedEmitter: EventEmitter<string>;\n\n componentWillLoad() {\n session.onChange('isLoggedIn', () => this.fetchBlob());\n this.initializeOsEmitter.emit(this.setOs);\n }\n\n setOs = async (os: PodOS) => {\n this.os = os;\n };\n\n @Watch('os')\n @Watch('src')\n async fetchBlob() {\n try {\n this.loading = true;\n this.imageError = null;\n this.networkError = null;\n this.brokenFile = null;\n const file = await this.os.fetchFile(this.src);\n this.resourceLoadedEmitter.emit(this.src);\n if (file.blob()) {\n this.dataUri = URL.createObjectURL(file.blob());\n } else {\n this.brokenFile = file as BrokenFileData;\n }\n } catch (err) {\n this.networkError = err;\n } finally {\n this.loading = false;\n }\n }\n\n onImageError(err: Event) {\n this.networkError = null;\n this.imageError = err;\n }\n\n render() {\n if (this.loading) {\n return <ion-skeleton-text animated={true}></ion-skeleton-text>;\n }\n if (this.networkError) {\n // probably a CORS error\n return <img alt={this.alt} src={this.src} onError={err => this.onImageError(err)} />;\n }\n if (this.brokenFile) {\n // fetching worked, but HTTP response was not ok\n return <BrokenFile file={this.brokenFile} />;\n }\n if (this.imageError) {\n // if even the loading via classic <img src=\"...\"> failed, render a link\n return (\n <div class=\"error\">\n <a href={this.src}>{this.src}</a>\n </div>\n );\n }\n\n return <img src={this.dataUri} alt={this.alt} ~~/>;\~~n }\n}\n"]}
1	+ {"version":3,"file":"pos-image.js","sourceRoot":"","sources":["../../../../src/components/pos-image/pos-image.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC5F,OAAO,OAAO,MAAM,qBAAqB,CAAC;AAE1C;;;;GAIG;AAMH,MAAM,OAAO,QAAQ;;QAuCnB,UAAK,GAAG,KAAK,EAAE,EAAS,EAAE,EAAE;YAC1B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACf,CAAC,CAAC;;;iCAjCmC,KAAK;;;;;;uBAiBf,IAAI;;IAS/B,iBAAiB;QACf,OAAO,CAAC,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QACvD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAQD,KAAK,CAAC,SAAS;QACb,IAAI,CAAC;YACH,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YACzB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC/C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC1C,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;gBAChB,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;YAClD,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,UAAU,GAAG,IAAsB,CAAC;YAC3C,CAAC;QACH,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC;QAC1B,CAAC;gBAAS,CAAC;YACT,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC;IACH,CAAC;IAED,YAAY,CAAC,GAAU;QACrB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO,yBAAmB,QAAQ,EAAE,IAAI,GAAsB,CAAC;QACjE,CAAC;QACD,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,wBAAwB;YACxB,OAAO,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,GAAI,CAAC;QACvF,CAAC;QACD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,gDAAgD;YAChD,OAAO,EAAC,UAAU,IAAC,IAAI,EAAE,IAAI,CAAC,UAAU,GAAI,CAAC;QAC/C,CAAC;QACD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,wEAAwE;YACxE,OAAO,CACL,WAAK,KAAK,EAAC,OAAO;gBAChB,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IAAG,IAAI,CAAC,GAAG,CAAK,CAC7B,CACP,CAAC;QACJ,CAAC;QAED,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI;aAC1E;YAED,WAAK,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CACpC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { BrokenFile as BrokenFileData, PodOS } from '@pod-os/core';\nimport { BrokenFile } from '../broken-file/BrokenFile';\nimport { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport session from '../../store/session';\n\n/*\n Tries fetch an image with the solid authentication, and can visualize http errors like 403 or 404 if this fails.\n * Falls back to classic <img src=\"...\"> on network errors like CORS.\n * Renders a normal link if even this fails.\n /\n@Component({\n tag: 'pos-image',\n styleUrl: 'pos-image.css',\n shadow: true,\n})\nexport class PosImage {\n @Prop() src: string;\n\n @Prop() alt: string;\n\n /\n Use a blurred version of the image as its own background, if the image is scaled down to fit into the container.\n /\n @Prop() blurredBackground: boolean = false;\n\n @State() os: PodOS;\n\n @State()\n private dataUri: string;\n\n @State()\n private brokenFile: BrokenFileData;\n\n @State()\n private networkError: Error;\n\n @State()\n private imageError: Event;\n\n @State()\n private loading: boolean = true;\n\n @Event({ eventName: 'pod-os:init' }) initializeOsEmitter: EventEmitter;\n\n /\n Indicates that the resource given in `src` property has been loaded.\n */\n @Event({ eventName: 'pod-os:resource-loaded' }) resourceLoadedEmitter: EventEmitter<string>;\n\n componentWillLoad() {\n session.onChange('isLoggedIn', () => this.fetchBlob());\n this.initializeOsEmitter.emit(this.setOs);\n }\n\n setOs = async (os: PodOS) => {\n this.os = os;\n };\n\n @Watch('os')\n @Watch('src')\n async fetchBlob() {\n try {\n this.loading = true;\n this.imageError = null;\n this.networkError = null;\n this.brokenFile = null;\n const file = await this.os.fetchFile(this.src);\n this.resourceLoadedEmitter.emit(this.src);\n if (file.blob()) {\n this.dataUri = URL.createObjectURL(file.blob());\n } else {\n this.brokenFile = file as BrokenFileData;\n }\n } catch (err) {\n this.networkError = err;\n } finally {\n this.loading = false;\n }\n }\n\n onImageError(err: Event) {\n this.networkError = null;\n this.imageError = err;\n }\n\n render() {\n if (this.loading) {\n return <ion-skeleton-text animated={true}></ion-skeleton-text>;\n }\n if (this.networkError) {\n // probably a CORS error\n return <img alt={this.alt} src={this.src} onError={err => this.onImageError(err)} />;\n }\n if (this.brokenFile) {\n // fetching worked, but HTTP response was not ok\n return <BrokenFile file={this.brokenFile} />;\n }\n if (this.imageError) {\n // if even the loading via classic <img src=\"...\"> failed, render a link\n return (\n <div class=\"error\">\n <a href={this.src}>{this.src}</a>\n </div>\n );\n }\n\n return (\n <Host\n style={{\n backgroundImage: this.blurredBackground ? `url('${this.dataUri}')` : null,\n }}\n >\n <img src={this.dataUri} alt={this.alt} />\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/pos-internal-router/pos-internal-router.js CHANGED Viewed

@@ -4,7 +4,7 @@ export class PosInternalRouter {
         this.uri = 'pod-os:dashboard';
     }
     render() {
-        return h("pos-app-dashboard", { key: '9f21e373afb8a99a1b85abf09f97f730afee4ed6' });
+        return h("pos-app-dashboard", { key: '44741d470c91f1faa732c5932788aa58b56805d4' });
     }
     static get is() { return "pos-internal-router"; }
     static get properties() {

package/dist/collection/components/pos-literals/pos-literals.css CHANGED Viewed

@@ -11,6 +11,8 @@ dd {
 }
 dl {
+  padding: 0;
+  margin: 0;
   display: flex;
   flex-direction: column;
   gap: var(--size-1);

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

@@ -28,7 +28,7 @@ export class PosLiterals {
         }
     }
     render() {
-        return (h(Host, { key: '61baacde23f28d7b2e3c95652aedf62c90446c3f' }, this.data.length > 0 ? (h("dl", null, this.data.map(it => (h("div", { class: "predicate-values" }, h("dt", null, h("pos-predicate", { uri: it.predicate, label: it.label })), h("div", { class: "values" }, it.values.map(value => (h("dd", null, value))))))))) : null, h("pos-add-literal-value", { key: 'a8cca657602f883de5776b9f0012c9f8de41840d', "onPod-os:added-literal-value": event => this.literalValueAdded(event.detail) })));
+        return (h(Host, { key: '35b12479d51638dc1e4de983f4901ddcea39e8df' }, this.data.length > 0 ? (h("dl", null, this.data.map(it => (h("div", { class: "predicate-values" }, h("dt", null, h("pos-predicate", { uri: it.predicate, label: it.label })), h("div", { class: "values" }, it.values.map(value => (h("dd", null, value))))))))) : null, h("pos-add-literal-value", { key: '76f9434f813162456c3c75728db363d708e2617f', "onPod-os:added-literal-value": event => this.literalValueAdded(event.detail) })));
     }
     static get is() { return "pos-literals"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,7 +21,7 @@ export class PosLogin {
         this.dialog.showModal();
     }
     render() {
-        return (h(Host, { key: '614aefb5576d3904c3d8e4a929011468e3b85871' }, h("div", { key: '48b6bc01839acc23a0c6643c2a950bb1a57075f3', class: "container" }, session.state.isLoggedIn ? (h("pos-resource", { uri: session.state.webId }, h("span", { class: "user-data" }, h("pos-picture", null), h("pos-label", null)))) : (''), !session.state.isLoggedIn && (h("button", { key: '7e55ec9ed0c2eb7fb3f8074e39e6adfe82328b73', id: "login", onClick: () => this.openDialog() }, "Login")), session.state.isLoggedIn && (h("button", { key: '7bff06b740677526dd4e40101bd5a8b6454989c1', id: "logout", onClick: () => this.logout() }, "Logout"))), h("pos-dialog", { key: 'd8f25b36dcf9052d8afefd9b24100d8bfe907fd0', ref: el => (this.dialog = el) }, h("span", { key: 'd868740d2d6aa6d494d5d57fc4f977b592efe04b', slot: "title" }, "Sign in to your Pod"), h("pos-login-form", { key: '9e882586a23a17a598df1f6d0ffd787687726b07', "onPod-os:idp-url-selected": ev => this.login(ev), slot: "content" }))));
+        return (h(Host, { key: 'ca905c70af384613b128154be4bb68d2956c309e' }, h("div", { key: '1f18fe1812658ab7855da328337ef5a9f6145f15', class: "container" }, session.state.isLoggedIn ? (h("pos-resource", { uri: session.state.webId }, h("span", { class: "user-data" }, h("pos-picture", null), h("pos-label", null)))) : (''), !session.state.isLoggedIn && (h("button", { key: '09264faa5a12b18a805bb13cf92a9a0b190bd498', id: "login", onClick: () => this.openDialog() }, "Login")), session.state.isLoggedIn && (h("button", { key: '334759c36b3df14e59d1bf7a4ae8dd2b03e52c3a', id: "logout", onClick: () => this.logout() }, "Logout"))), h("pos-dialog", { key: 'e82f36add5bcd044406996639b22e20b54c39101', ref: el => (this.dialog = el) }, h("span", { key: 'e4ea7b9181981e28222f3dffe6ca1cd1fd18cc79', slot: "title" }, "Sign in to your Pod"), h("pos-login-form", { key: '5d99a85a1561178a3091ab5f6a23a856c1a373ad', "onPod-os:idp-url-selected": ev => this.login(ev), slot: "content" }))));
     }
     static get is() { return "pos-login"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pos-login-form/pos-login-form.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class PosLoginForm {
         this.canSubmit = Boolean(this.idpUrl);
     }
     render() {
-        return (h("form", { key: '166a5801463ed071653e5b0a6edb692ac0737717', method: "dialog", onSubmit: () => this.handleSubmit() }, h("label", { key: '970e1ff06b0eae6416b31503eca45b59461a31b5', htmlFor: "idpUrl" }, "Please enter your Identity Provider"), h("input", { key: '7d89ba333847dcea1bc65d22db5a532ff1571ffb', id: "idpUrl", type: "url", value: this.idpUrl, required: true, onInput: e => this.handleChange(e), list: "suggestedIssuers", placeholder: "Type to search..." }), h("datalist", { key: 'fdc74203d0809255aa01db199e12fe343052521b', id: "suggestedIssuers" }, h("option", { key: '3e7c76cef4557a8c422cfbec772c6aa78f1e1dd7', value: "https://solidcommunity.net" }, "solidcommunity.net"), h("option", { key: '2cbca91697ac196a73119cb96d5f8b59784c8d91', value: "https://solidweb.org" }, "solidweb.org"), h("option", { key: '1c268056329697baccc5bf65b1e66acd8531d5f3', value: "https://solidweb.me" }, "solidweb.me"), h("option", { key: '75c960cdc2cc907c0e317a639ec75adde1be3735', value: "https://inrupt.net" }, "inrupt.net"), h("option", { key: '1a07b7d6d4e2921fecad44a54da95287aa775617', value: "https://login.inrupt.com" }, "Inrupt PodSpaces"), h("option", { key: '1c343dfcf5c41827cbdcc045e876876dc1664c17', value: "https://trinpod.us" }, "trinpod.us"), h("option", { key: 'fbaf88d8c2636d5057bbbe81360ba38c7267639c', value: "https://use.id" }, "use.id"), h("option", { key: '58b4791de5f8bcddcf594a419920af6abdfea53f', value: "https://solid.redpencil.io" }, "redpencil.io"), h("option", { key: '168d1281ec45647dbead515648e4b12818bb7792', value: "https://datapod.grant.io" }, "Data Pod (grant.io)"), h("option", { key: 'f171d2051e2ad05e41cc3b80295a780883728589', value: "https://teamid.live" }, "teamid.live")), h("input", { key: 'f62cd5dff8cf206c446b773eae5a1fb62274647a', id: "login", type: "submit", value: "Login", disabled: !this.canSubmit })));
+        return (h("form", { key: 'fc3dd44c9d9b1b1d793a7527d8a178d819475ee2', method: "dialog", onSubmit: () => this.handleSubmit() }, h("label", { key: '9cbac18a27fa549063c9aa5fce9a9a8bae15bdb1', htmlFor: "idpUrl" }, "Please enter your Identity Provider"), h("input", { key: 'e211e1210b6259f481562a70d3ca1843137d0c87', id: "idpUrl", type: "url", value: this.idpUrl, required: true, onInput: e => this.handleChange(e), list: "suggestedIssuers", placeholder: "Type to search..." }), h("datalist", { key: '070952f3ad16c312992fac7be5e497d92819fbb8', id: "suggestedIssuers" }, h("option", { key: 'd561a03770b7cf496322966f71f6e81c54ab25b0', value: "https://solidcommunity.net" }, "solidcommunity.net"), h("option", { key: '3ecf96f60823fd848344fc77871f4bad3645e19c', value: "https://solidweb.org" }, "solidweb.org"), h("option", { key: '7c0c4ea6a4d975f9d7dd298e3b38fd8faa41dd2b', value: "https://solidweb.me" }, "solidweb.me"), h("option", { key: '21138fe500353ff7624c20226f92c55f5a553551', value: "https://inrupt.net" }, "inrupt.net"), h("option", { key: '6b7edede2e1d51aeab5c6fb6f0e7fd4be72db3c5', value: "https://login.inrupt.com" }, "Inrupt PodSpaces"), h("option", { key: 'c9cea1f3d258a58b0ca260c25111cd6cd6b6bf30', value: "https://trinpod.us" }, "trinpod.us"), h("option", { key: '953f68426bdf806c18cbb78fd7de36ee8dae06db', value: "https://use.id" }, "use.id"), h("option", { key: '58b3b5e9b3e145e2f2000028d0edd8263d2a6495', value: "https://solid.redpencil.io" }, "redpencil.io"), h("option", { key: '2461aaa1b32e07635d67805a362b2f22bf28a8a7', value: "https://datapod.grant.io" }, "Data Pod (grant.io)"), h("option", { key: '6ac6645ccd9f3f2234b3f44349f28f34c9f1d33d', value: "https://teamid.live" }, "teamid.live")), h("input", { key: '451b150089145ca6846253067e6e6d393b333d9c', id: "login", type: "submit", value: "Login", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.validate();

package/dist/collection/components/pos-navigation-bar/pos-navigation-bar.js CHANGED Viewed

@@ -67,7 +67,7 @@ export class PosNavigationBar {
         }
     }
     render() {
-        return (h("form", { key: 'e73d8cdc7b97e169e3db01edd648a51e069c180a', onSubmit: e => this.onSubmit(e) }, h("ion-searchbar", { key: 'c54707e78060d18946e4415f6928239a9b253a40', enterkeyhint: "search", placeholder: "Search or enter URI", value: this.uri, debounce: 300, onIonChange: e => this.onChange(e), onIonInput: e => this.onChange(e) }), this.suggestions.length > 0 ? (h("div", { class: "suggestions" }, h("ol", null, this.suggestions.map((it, index) => (h("li", { class: index === this.selectedIndex ? 'selected' : '' }, h("pos-rich-link", { uri: it.ref }))))))) : null));
+        return (h("form", { key: 'a8f6b83f1cf9ec1f11b33ec7431341a7b386cc7d', onSubmit: e => this.onSubmit(e) }, h("ion-searchbar", { key: '2709e144cd8edd34ba45d3dbdfd356df05f93c36', enterkeyhint: "search", placeholder: "Search or enter URI", value: this.uri, debounce: 300, onIonChange: e => this.onChange(e), onIonInput: e => this.onChange(e) }), this.suggestions.length > 0 ? (h("div", { class: "suggestions" }, h("ol", null, this.suggestions.map((it, index) => (h("li", { class: index === this.selectedIndex ? 'selected' : '' }, h("pos-rich-link", { uri: it.ref }))))))) : null));
     }
     static get is() { return "pos-navigation-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pos-new-thing-form/pos-new-thing-form.js CHANGED Viewed

@@ -19,7 +19,7 @@ export class PosNewThingForm {
         subscribePodOs(this);
     }
     render() {
-        return (h("form", { key: '39b1834c1a3cb1db041a82e35b4d8ffaba41c87f', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: 'a7d4ace3a2e8bf65ec962e5b7f266c3f42369d9c', htmlFor: "type" }, "Type"), h("pos-select-term", { key: 'e53f1e2f2b012f018721e47038583319f22281d1', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: '640fe607b88f2e8445b2761a23c754480b5d3310', htmlFor: "name" }, "Name"), h("input", { key: 'f7419d4c3f4c50030c1ad3598e4233824c609520', id: "name", type: "text", value: this.name, onInput: e => this.handleChange(e) }), this.newUri ? (h("div", { id: "new-uri", title: "This will be the URI of the new thing" }, this.newUri)) : null, h("input", { key: 'bb00a18338f1ac294e1e9809bb96bf44616f306e', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
+        return (h("form", { key: '7ac7302d96ebf9f7d746bfb69c17d3b313141b13', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: 'a5a5e460537d8ad7e099cf4f61675853abc9b64e', htmlFor: "type" }, "Type"), h("pos-select-term", { key: '7dc2d253ceed94825352e6a42e2f53e04ee362d9', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: 'f7d8613857e5c8d6bd3b7060b5fb0c832ee2a62a', htmlFor: "name" }, "Name"), h("input", { key: '74c773c31e4c0102b40ca9e34942ccc63f1e4480', id: "name", type: "text", value: this.name, onInput: e => this.handleChange(e) }), this.newUri ? (h("div", { id: "new-uri", title: "This will be the URI of the new thing" }, this.newUri)) : null, h("input", { key: '7c99806729314cc7a70268375fb3da5d22c156b1', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.name = event.target.value;

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

@@ -3,8 +3,10 @@
    * @prop --width: Width of the picture
    * @prop --height: Height of the picture
    * @prop --border-radius: Border radius of the picture
+   * @prop --object-fit: CSS object-fit of the picture
    */
   --width: 300px;
   --height: 300px;
   --border-radius: var(--border-radius, 0);
+  --object-fit: var(--object-fit, cover);
 }

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

@@ -5,6 +5,7 @@ export class PosPicture {
         this.receiveResource = (resource) => {
             this.resource = resource;
         };
+        this.blurredBackground = false;
         this.resource = undefined;
     }
     componentWillLoad() {
@@ -14,7 +15,7 @@ export class PosPicture {
         const pic = this.resource ? this.resource.picture() : null;
         if (!pic)
             return null;
-        return h("pos-image", { src: pic.url, alt: this.resource.label() });
+        return h("pos-image", { blurredBackground: this.blurredBackground, src: pic.url, alt: this.resource.label() });
     }
     static get is() { return "pos-picture"; }
     static get encapsulation() { return "shadow"; }
@@ -28,6 +29,30 @@ export class PosPicture {
             "$": ["pos-picture.css"]
         };
     }
+    static get properties() {
+        return {
+            "blurredBackground": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use a blurred version of the image as its own background, if the image is scaled down to fit into the container."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "blurred-background",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
     static get states() {
         return {
             "resource": {}

package/dist/collection/components/pos-picture/pos-picture.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pos-picture.js","sourceRoot":"","sources":["../../../../src/components/pos-picture/pos-picture.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;~~AAEzE~~,OAAO,EAAiB,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAO3E,MAAM,OAAO,UAAU;;~~QASrB~~,oBAAe,GAAG,CAAC,QAAe,EAAE,EAAE;YACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,CAAC,CAAC;;;~~IANF~~,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAMD,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QAC3D,IAAI,CAAC,GAAG;YAAE,OAAO,IAAI,CAAC;QACtB,OAAO,iBAAW,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,GAAc,CAAC;~~IAC3E~~,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Event, EventEmitter, State, h } from '@stencil/core';\nimport { Thing } from '@pod-os/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n tag: 'pos-picture',\n shadow: true,\n styleUrl: 'pos-picture.css',\n})\nexport class PosPicture implements ResourceAware {\n @State() resource: Thing;\n\n @Event({ eventName: 'pod-os:resource' }) subscribeResource: EventEmitter;\n\n componentWillLoad() {\n subscribeResource(this);\n }\n\n receiveResource = (resource: Thing) => {\n this.resource = resource;\n };\n\n render() {\n const pic = this.resource ? this.resource.picture() : null;\n if (!pic) return null;\n return <pos-image src={pic.url} alt={this.resource.label()}></pos-image>;\n }\n}\n"]}
1	+ {"version":3,"file":"pos-picture.js","sourceRoot":"","sources":["../../../../src/components/pos-picture/pos-picture.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE/E,OAAO,EAAiB,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAO3E,MAAM,OAAO,UAAU;;QAcrB,oBAAe,GAAG,CAAC,QAAe,EAAE,EAAE;YACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,CAAC,CAAC;iCAZmC,KAAK;;;IAM1C,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAMD,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QAC3D,IAAI,CAAC,GAAG;YAAE,OAAO,IAAI,CAAC;QACtB,OAAO,iBAAW,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EAAE,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,GAAc,CAAC;IACtH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, State, h, Prop } from '@stencil/core';\nimport { Thing } from '@pod-os/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n tag: 'pos-picture',\n shadow: true,\n styleUrl: 'pos-picture.css',\n})\nexport class PosPicture implements ResourceAware {\n /*\n Use a blurred version of the image as its own background, if the image is scaled down to fit into the container.\n */\n @Prop() blurredBackground: boolean = false;\n\n @State() resource: Thing;\n\n @Event({ eventName: 'pod-os:resource' }) subscribeResource: EventEmitter;\n\n componentWillLoad() {\n subscribeResource(this);\n }\n\n receiveResource = (resource: Thing) => {\n this.resource = resource;\n };\n\n render() {\n const pic = this.resource ? this.resource.picture() : null;\n if (!pic) return null;\n return <pos-image blurredBackground={this.blurredBackground} src={pic.url} alt={this.resource.label()}></pos-image>;\n }\n}\n"]}

package/dist/collection/components/pos-relations/pos-relations.css CHANGED Viewed

@@ -14,6 +14,8 @@ dl {
   display: flex;
   flex-direction: column;
   gap: var(--size-1);
+  padding: 0;
+  margin: 0;
 }
 dt {

package/dist/collection/components/pos-reverse-relations/pos-reverse-relations.css CHANGED Viewed

@@ -14,6 +14,8 @@ dl {
   display: flex;
   flex-direction: column;
   gap: var(--size-1);
+  padding: 0;
+  margin: 0;
 }
 dt {

package/dist/collection/components/pos-rich-link/pos-rich-link.js CHANGED Viewed

@@ -4,10 +4,10 @@ export class PosRichLink {
         this.uri = undefined;
     }
     render() {
-        return (h("pos-resource", { key: 'e5b11bcf070644ccafd33eaab7e641c151c27d01', lazy: true, uri: this.uri }, h("p", { key: '64e5da1437d3eb4cdd70e1a24a6766272041a126', class: "content" }, h("a", { key: '5844ecd1a12cedc46c0b18bdba7cf341bdf6243b', href: this.uri, onClick: e => {
+        return (h("pos-resource", { key: 'f9ee2a2e6403733db429593ccc0900efa39efc9f', lazy: true, uri: this.uri }, h("p", { key: '8d8d575619fb66ee28a357c0a1fbcd7e25fd23c3', class: "content" }, h("a", { key: '3c517a107acbbd56865172f90a226f77bcfd052c', href: this.uri, onClick: e => {
                 e.preventDefault();
                 this.linkEmitter.emit(this.uri);
-            } }, h("pos-label", { key: 'b60572ac6606006e9b8b8358f56ae2c96c1002f8' })), h("span", { key: 'cc625a88a231b98278aa76f47e9713632057c734', class: "url" }, new URL(this.uri).host), h("pos-description", { key: 'dd5f62d3e6ce44c12569a1db70de6af844d9219d' }))));
+            } }, h("pos-label", { key: '5e9282156f1906e911b045acb032357ca2d83e43' })), h("span", { key: '535ce92376dd686021f597215ecdd3be62e7e1d3', class: "url" }, new URL(this.uri).host), h("pos-description", { key: 'c5e58b6ced46ffb76fa61c2a917f157dfbaac58f' }))));
     }
     static get is() { return "pos-rich-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pos-router/pos-router.js CHANGED Viewed

@@ -33,7 +33,7 @@ export class PosRouter {
         this.routeChanged.emit(this.uri);
     }
     render() {
-        return h("slot", { key: 'a12c41f2558a536db32e0399fe51ee66d5178b4d' });
+        return h("slot", { key: '972cd1041f376ae50b45691f2ad3ae7f676ff0df' });
     }
     static get is() { return "pos-router"; }
     static get originalStyleUrls() {

package/dist/collection/components/pos-select-term/pos-select-term.js CHANGED Viewed

@@ -20,7 +20,7 @@ export class PosSelectTerm {
         this.termSelected.emit({ uri: event.target.value });
     }
     render() {
-        return (h(Host, { key: 'fddd3e595a67b5c765e08bc3ed8f4af16dab8a0d' }, h("input", { key: '956ffbe0573fb77e60dddfbe9f9b25ef5c59f3b8', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: '39e39280689bf6effee205475642b8a5656d2c6a', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
+        return (h(Host, { key: '7f8d32e361855f6427b2345f706f363b75a58e57' }, h("input", { key: 'fb979749ed3fedc072a44ab7ef21196ea60bea3b', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: '6a318290e9229aeb83ea827a7a42ca0519609e89', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
     }
     static get is() { return "pos-select-term"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pos-type-badges/pos-type-badges.css CHANGED Viewed

@@ -1,7 +1,6 @@
 .types {
   display: flex;
-  gap: 0.25rem;
-  margin: 0.5rem 0;
+  gap: var(--size-1);
 }
 .expanded {

package/dist/components/pos-add-new-thing2.js CHANGED Viewed

@@ -18,7 +18,7 @@ const PosAddNewThing = /*@__PURE__*/ proxyCustomElement(class PosAddNewThing ext
         this.dialog.showModal();
     }
     render() {
-        return (h(Host, { key: '3e9951127a62911e8f58119ba4216c661253d11c' }, h("button", { key: '166c65ae30d0c7511438d53ee65240a7e9444da8', id: "new", title: "Add a new thing", onClick: () => this.openDialog() }, h("ion-icon", { key: '2ba7be2f696d04f6b3dfc828802a846e72d6c557', name: "add-circle-outline" })), h("pos-dialog", { key: 'c9e8db289593e1858770a350303a410e4ac93e75', ref: el => (this.dialog = el) }, h("span", { key: '760f2a22783271c273d1f6aa5e6cdf4567cb02ae', slot: "title" }, "Add a new thing"), h("pos-new-thing-form", { key: '4424370c5e08100521b8afe978309cd64ae778ab', slot: "content", referenceUri: this.referenceUri }))));
+        return (h(Host, { key: '35b8629fc9ac9d9e759009f329dc9437307649c3' }, h("button", { key: 'b6c0b1d06fbed05a079c1e4cb684f227fd40d098', id: "new", title: "Add a new thing", onClick: () => this.openDialog() }, h("ion-icon", { key: '2dfbcff7480dfc7397a5810ca7a33b9e583a77ee', name: "add-circle-outline" })), h("pos-dialog", { key: 'a61bf93754ca323fbc23137956a00c39be81cad9', ref: el => (this.dialog = el) }, h("span", { key: 'a4095e3c9ddd26e18ce002a05ef65d8895894589', slot: "title" }, "Add a new thing"), h("pos-new-thing-form", { key: '136cfbbab823f5abc313642e1dc04f67d5d81777', slot: "content", referenceUri: this.referenceUri }))));
     }
     static get style() { return PosAddNewThingStyle0; }
 }, [1, "pos-add-new-thing", {

package/dist/components/pos-app-generic.js CHANGED Viewed

@@ -1,16 +1,12 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$r } from './badge.js';
-import { d as defineCustomElement$q } from './card.js';
-import { d as defineCustomElement$p } from './card-content.js';
-import { d as defineCustomElement$o } from './card-header.js';
-import { d as defineCustomElement$n } from './card-title.js';
-import { d as defineCustomElement$m } from './col.js';
-import { d as defineCustomElement$l } from './grid.js';
-import { d as defineCustomElement$k } from './icon.js';
-import { d as defineCustomElement$j } from './input.js';
-import { d as defineCustomElement$i } from './progress-bar.js';
-import { d as defineCustomElement$h } from './ripple-effect.js';
-import { d as defineCustomElement$g } from './row.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$n } from './badge.js';
+import { d as defineCustomElement$m } from './card.js';
+import { d as defineCustomElement$l } from './card-content.js';
+import { d as defineCustomElement$k } from './card-header.js';
+import { d as defineCustomElement$j } from './icon.js';
+import { d as defineCustomElement$i } from './input.js';
+import { d as defineCustomElement$h } from './progress-bar.js';
+import { d as defineCustomElement$g } from './ripple-effect.js';
 import { d as defineCustomElement$f } from './skeleton-text.js';
 import { d as defineCustomElement$e } from './pos-add-literal-value2.js';
 import { d as defineCustomElement$d } from './pos-description2.js';
@@ -26,20 +22,25 @@ import { d as defineCustomElement$4 } from './pos-rich-link2.js';
 import { d as defineCustomElement$3 } from './pos-select-term2.js';
 import { d as defineCustomElement$2 } from './pos-type-badges2.js';
+const posAppGenericCss = ":host {\n  --gap-size: var(--size-1);\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-size);\n  margin: var(--gap-size);\n}\n\n.card {\n  outline: var(--pos-border-solid);\n  border-radius: var(--radius-sm);\n  box-shadow: var(--shadow-md);\n\n  header {\n    display: flex;\n    flex-direction: column;\n\n    pos-picture {\n      --object-fit: contain;\n      --width: 100%;\n      --height: auto;\n      --max-height: 300px;\n      border-radius: var(--radius-sm) var(--radius-sm) 0 0;\n      --border-radius: var(--radius-sm) var(--radius-sm) 0 0;\n    }\n\n    h1,\n    pos-type-badges {\n      margin: var(--size-2);\n    }\n  }\n\n  main {\n    padding: var(--size-2);\n\n    pos-description {\n      color: var(--color-grey-800);\n      font-weight: var(--weight-light);\n    }\n  }\n}\n\n@media (min-width: 640px) {\n  :host {\n    flex-direction: row;\n    flex-wrap: wrap;\n\n    section:first-of-type {\n      flex: 0 0 25%;\n    }\n\n    section:not(:first-of-type) {\n      flex: 1;\n    }\n  }\n}\n";
+const PosAppGenericStyle0 = posAppGenericCss;
 const PosAppGeneric$1 = /*@__PURE__*/ proxyCustomElement(class PosAppGeneric extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.__attachShadow();
     }
     render() {
-        return (h("ion-grid", { key: 'd0b80b1dac49e6f3412371fa4cad2ae8de78f959' }, h("ion-row", { key: '2dca3cc1202f2e74bd9d33a2ba311edc111ce512' }, h("ion-col", { key: '77c6fe004de20c30bfc73a0552065aa3bcf18aa3', size: "12", "size-sm": true }, h("ion-card", { key: '0c4de80c0b307f6ffd55e6a38ebd7d20640ce405' }, h("ion-card-header", { key: 'f5f237441b5f5a178fce1d40bf57c37c879c22ca' }, h("pos-type-badges", { key: '92c8e0bb766db6d158c611e4d785263006134730' }), h("pos-picture", { key: '70d1ef02dd1b37a4a6770e40fa1fd3ddd23952b6' }), h("ion-card-title", { key: '768e74004bf1f9fc3fbd8f60d4cc5de1b3dcb4a6' }, h("pos-label", { key: '54fcf93b3991beea083027cf1070670363eb0af1' }))), h("ion-card-content", { key: 'ba810321b1cae0118e8af2e5743ce386023f1fc1' }, h("pos-description", { key: '815ee08a94228a0c35cd68da93ca110c86349d03' })))), h("ion-col", { key: 'b201d815f67b5576c58fdadb2c22b2979cb621bc', size: "12", "size-sm": true }, h("pos-literals", { key: 'b7c00d91b0ab24d745b4714af3a29e13184f47bd' })), h("ion-col", { key: '41c8e46e6a0d8543058a00ef74fd37f37fae1a15', size: "12", "size-sm": true }, h("pos-relations", { key: '2c625c5515ddb96f0ee72695f0552ef641633ca1' }), h("pos-reverse-relations", { key: 'ac8d70a70fa7fd23b016cdf7251a7cb8fa6b34a1' })))));
+        return (h(Host, { key: '8e29bb7745cec5493c102c2262b14291eb9fb62a' }, h("section", { key: '2da95db7a410290cb89f7d3bebaae29c35e05785' }, h("div", { key: '653b61788b1d17adc08620702c72db496578d075', class: "card" }, h("header", { key: '4231d891aac87ba7c4f4bebaa89a23a96784f9c1' }, h("pos-picture", { key: '04a382eec4b3c3d87ae616375162a6da8d52144e', blurredBackground: true }), h("h1", { key: '54e7aafcc30bf3df9353e82c218e56fd66d6c9ef' }, h("pos-label", { key: '8df7a754d5aca177fb1e12c45ca25fa69d933a43' })), h("pos-type-badges", { key: '43b4d9464325b084d23349cc62e0a1615c2d3a15' })), h("main", { key: 'dd3da38812b1cb40a749e914fc72cd83253220b6' }, h("pos-description", { key: '9366c219761578f4381d868ca6d94e660645ec9e' })))), h("section", { key: '4d905102110d50ca60a3e2d87c18a32e01fb7ca1' }, h("pos-literals", { key: 'c0829b4921ba110966a483a00beba4df56a0df6d' })), h("section", { key: '893ffdaffdcec188361d3ffb8afbaf6c1f55ea5b' }, h("pos-relations", { key: '23f5bd14481721439bec06eb5449a9743f87143d' }), h("pos-reverse-relations", { key: '928122999484f392c70ba3cdf7b0b2a7f67f599a' }))));
     }
-}, [0, "pos-app-generic"]);
+    static get style() { return PosAppGenericStyle0; }
+}, [1, "pos-app-generic"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-app-generic", "ion-badge", "ion-card", "ion-card-content", "ion-card-header", "ion-card-title", "ion-col", "ion-grid", "ion-icon", "ion-input", "ion-progress-bar", "ion-ripple-effect", "ion-row", "ion-skeleton-text", "pos-add-literal-value", "pos-description", "pos-image", "pos-label", "pos-literals", "pos-picture", "pos-predicate", "pos-relations", "pos-resource", "pos-reverse-relations", "pos-rich-link", "pos-select-term", "pos-type-badges"];
+    const components = ["pos-app-generic", "ion-badge", "ion-card", "ion-card-content", "ion-card-header", "ion-icon", "ion-input", "ion-progress-bar", "ion-ripple-effect", "ion-skeleton-text", "pos-add-literal-value", "pos-description", "pos-image", "pos-label", "pos-literals", "pos-picture", "pos-predicate", "pos-relations", "pos-resource", "pos-reverse-relations", "pos-rich-link", "pos-select-term", "pos-type-badges"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-app-generic":
             if (!customElements.get(tagName)) {
@@ -47,61 +48,41 @@ function defineCustomElement$1() {
             }
             break;
         case "ion-badge":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$r();
-            }
-            break;
-        case "ion-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$q();
-            }
-            break;
-        case "ion-card-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$p();
-            }
-            break;
-        case "ion-card-header":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$o();
-            }
-            break;
-        case "ion-card-title":
             if (!customElements.get(tagName)) {
                 defineCustomElement$n();
             }
             break;
-        case "ion-col":
+        case "ion-card":
             if (!customElements.get(tagName)) {
                 defineCustomElement$m();
             }
             break;
-        case "ion-grid":
+        case "ion-card-content":
             if (!customElements.get(tagName)) {
                 defineCustomElement$l();
             }
             break;
-        case "ion-icon":
+        case "ion-card-header":
             if (!customElements.get(tagName)) {
                 defineCustomElement$k();
             }
             break;
-        case "ion-input":
+        case "ion-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$j();
             }
             break;
-        case "ion-progress-bar":
+        case "ion-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$i();
             }
             break;
-        case "ion-ripple-effect":
+        case "ion-progress-bar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$h();
             }
             break;
-        case "ion-row":
+        case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
                 defineCustomElement$g();
             }

package/dist/components/pos-app-generic.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pos-app-generic.js","mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAKaA~~,eAAa~~;;;;;~~IACxB,MAAM;QACJ,QACE,~~mEACE~~,kEACE,~~gEAAS~~,~~IAAI~~,EAAC,~~IAAI~~,~~qBAChB~~,~~mEACE~~,~~0EACE~~,~~yEAAmB~~,~~EACnB~~,~~qEAAe~~,~~EACf~~,~~yEACE~~,mEAAa,~~CACE~~,~~CACD~~,~~EAClB~~,~~2EACE~~,yEAAmB,~~CACF~~,~~CACV,~~CACH,EACV,~~gEAAS~~,~~IAAI,EAAC,IAAI,qBAChB,~~sEAAgB,CACR,EACV,~~gEAAS~~,~~IAAI,EAAC,IAAI,qBAChB,~~uEAAiB,EACjB,+EAAyB,CACjB,~~CACF~~,~~CACD,EACX~~;KACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["PosAppGeneric"],"sources":["src/apps/pos-app-generic/pos-app-generic.tsx"],"sourcesContent":["import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'pos-app-generic',\n})\nexport class PosAppGeneric {\n render() {\n return (\n <~~ion-grid~~>\n <~~ion-row~~>\n <~~ion-col~~ ~~size~~=\"12\" ~~size-sm~~>\n <~~ion-card~~>\n <~~ion-card-header>\n <~~pos-~~type-badges />\n <pos-~~picture />\n <~~ion-card-title~~>\n <pos-label />\n </~~ion-card-title~~>\n ~~</ion~~-~~card~~-header>\n <~~ion-card-content~~>\n <pos-description />\n </~~ion-card-content~~>\n </~~ion-card~~>\n </~~ion-col~~>\n <~~ion-col size=\"12\" size-sm~~>\n <pos-literals />\n </~~ion-col~~>\n <~~ion-col size=\"12\" size-sm~~>\n <pos-relations />\n <pos-reverse-relations />\n ~~</ion-col>\n~~ </~~ion-row~~>\n </~~ion-grid~~>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pos-app-generic.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,gBAAgB,GAAG,sgCAAsgC,CAAC;AAChiC,4BAAe,gBAAgB;;MCMlBA,eAAa;;;;;;IACxB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,kEACE,4DAAK,KAAK,EAAC,MAAM,IACf,iEACE,oEAAa,iBAAiB,EAAE,IAAI,GAAI,EACxC,6DACE,mEAAa,CACV,EACL,yEAAmB,CACZ,EACT,+DACE,yEAAmB,CACd,CACH,CACE,EACV,kEACE,sEAAgB,CACR,EACV,kEACE,uEAAiB,EACjB,+EAAyB,CACjB,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PosAppGeneric"],"sources":["src/apps/pos-app-generic/pos-app-generic.css?tag=pos-app-generic&encapsulation=shadow","src/apps/pos-app-generic/pos-app-generic.tsx"],"sourcesContent":[":host {\n --gap-size: var(--size-1);\n display: flex;\n flex-direction: column;\n gap: var(--gap-size);\n margin: var(--gap-size);\n}\n\n.card {\n outline: var(--pos-border-solid);\n border-radius: var(--radius-sm);\n box-shadow: var(--shadow-md);\n\n header {\n display: flex;\n flex-direction: column;\n\n pos-picture {\n --object-fit: contain;\n --width: 100%;\n --height: auto;\n --max-height: 300px;\n border-radius: var(--radius-sm) var(--radius-sm) 0 0;\n --border-radius: var(--radius-sm) var(--radius-sm) 0 0;\n }\n\n h1,\n pos-type-badges {\n margin: var(--size-2);\n }\n }\n\n main {\n padding: var(--size-2);\n\n pos-description {\n color: var(--color-grey-800);\n font-weight: var(--weight-light);\n }\n }\n}\n\n@media (min-width: 640px) {\n :host {\n flex-direction: row;\n flex-wrap: wrap;\n\n section:first-of-type {\n flex: 0 0 25%;\n }\n\n section:not(:first-of-type) {\n flex: 1;\n }\n }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'pos-app-generic',\n styleUrls: ['./pos-app-generic.css'],\n shadow: true,\n})\nexport class PosAppGeneric {\n render() {\n return (\n <Host>\n <section>\n <div class=\"card\">\n <header>\n <pos-picture blurredBackground={true} />\n <h1>\n <pos-label />\n </h1>\n <pos-type-badges />\n </header>\n <main>\n <pos-description />\n </main>\n </div>\n </section>\n <section>\n <pos-literals />\n </section>\n <section>\n <pos-relations />\n <pos-reverse-relations />\n </section>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/pos-app-ldp-container.js CHANGED Viewed

@@ -34,7 +34,7 @@ const PosAppLdpContainer$1 = /*@__PURE__*/ proxyCustomElement(class PosAppLdpCon
         this.__registerHost();
     }
     render() {
-        return (h("ion-grid", { key: '785f4fa7813691a20262ed5f552332fda3fb72a3' }, h("ion-row", { key: '6f381bff626cea2ed58700ec5ed6f9586930ac47' }, h("ion-col", { key: '9e3e83c257c6a8efb22ce6f83fb451d337e709c7', size: "12", "size-sm": true }, h("pos-container-contents", { key: '7467a0167d1120d5e2b5fb8a49a5f66388a13cee' }), h("details", { key: 'df8f64dc59c93eba8948dea5f0c71731046f6806' }, h("summary", { key: '8ffa0486425561e1ce0924e2f8f8082e6af53c55' }, "All subjects"), h("pos-subjects", { key: '09d959809f7a590934adc4c32efe019d62c61c7d' }))), h("ion-col", { key: '89416e19e86472ae01ed48a9b9c5db4e9190ef22', size: "12", "size-sm": true }, h("ion-card", { key: 'e1efc990e8fbf43b24e21e10501de935ba368e3b' }, h("ion-card-header", { key: '41993a1573194e11f28a67ec5af9c19b3d951736' }, h("ion-card-title", { key: 'd57ff830cb6adf7d41fede1c5dbac3538ffdd5d0' }, h("pos-label", { key: 'df93bba787f3fea0887ccdb2dcf441d6a5962fc2' })), h("pos-type-badges", { key: 'f224c0ecb5491cf791a7a9d7efa1024f13cb6655' }), h("pos-literals", { key: '6690fee8a6cde845fddd145f4da642002fbdc97a' })))))));
+        return (h("ion-grid", { key: '25d3c6836ab626ce1fc2c9ca5b01b963b1068943' }, h("ion-row", { key: 'e040e5f41cba292ee7eaa77b7a7886f9d1d8ca99' }, h("ion-col", { key: 'c16769e7747bd035a4b13545c452ca11766b7054', size: "12", "size-sm": true }, h("pos-container-contents", { key: '9a28b62c6c824e069176a9dab781a6edd6582a81' }), h("details", { key: '288eaceb2e30282f9018c6bf6759586df637cfaf' }, h("summary", { key: '554f9bd02907d914ac0074c31e31b8800aeb7722' }, "All subjects"), h("pos-subjects", { key: '9bd7980dd958296a4006e5b2ce02d70759c4418c' }))), h("ion-col", { key: 'ef03fe6c49255c65b195fe900742d54cb323d4b1', size: "12", "size-sm": true }, h("ion-card", { key: 'fadc374858fe564b20504196b70b2946af3d7402' }, h("ion-card-header", { key: '2283119004b8a38b1adc2b8f1cb56309a9923aea' }, h("ion-card-title", { key: '634152799d6abddb5a9ca8bfb70104998c2888f5' }, h("pos-label", { key: '3677ba9818ac14cb8478eca888431cf225fd9d2e' })), h("pos-type-badges", { key: '45d803cc33ca2642f7b677df6ca387f10019baa1' }), h("pos-literals", { key: '2a9ffea31fb034b3ed876eeb528a00b0a0d8577a' })))))));
     }
 }, [0, "pos-app-ldp-container"]);
 function defineCustomElement$1() {

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

@@ -28,7 +28,7 @@ const PosAppRdfDocument$1 = /*@__PURE__*/ proxyCustomElement(class PosAppRdfDocu
         this.__registerHost();
     }
     render() {
-        return (h("ion-grid", { key: '79d54a7df8f06a8f264b9035e2d8b399e6cfcce9' }, h("ion-row", { key: '525e6991420c39d427c3bd9bb77b45c660187d91' }, h("ion-col", { key: '85324626961b36214605fe80c4d74f79b2b768a7', size: "12", "size-sm": true }, h("pos-subjects", { key: '6817ef3413a8c7141046431bd7dd18aeaca2a67d' })), h("ion-col", { key: 'aff36764414823123a3b0cc4b0b03ffe9e9e3789', size: "12", "size-sm": true }, h("ion-card", { key: '68291d664e5a12e9164ad874ad810a66afca9c86' }, h("ion-card-header", { key: 'e9a27454426b8018388590912d5a9e8d244b2108' }, h("ion-card-title", { key: '5609079dc2c0fc1ff374f038e90fa683e236bcca' }, h("pos-label", { key: 'f7b81a6e7786ba712c69d4105deb5d80d892d843' })), h("pos-type-badges", { key: '3ea29c7fd93a974c4960e4b834805ed84335f02d' }), h("pos-literals", { key: '4b68e050c7611b00ddbacff832a61f832419eaab' })))))));
+        return (h("ion-grid", { key: '491c329c7b6083129acc0b04d6097d7361b2c2d4' }, h("ion-row", { key: '88dbc219423b1ff94e6a5c6f67e74e6b496eaca8' }, h("ion-col", { key: 'e3329294ca16e707c9ac0f4ede51e801f11524d2', size: "12", "size-sm": true }, h("pos-subjects", { key: '45af152a3cce35a2be01bef1b5ac3072e9bddcd8' })), h("ion-col", { key: 'd376dbf8d4a3d8113dd018a3d3d1d84b9027339d', size: "12", "size-sm": true }, h("ion-card", { key: '958ad15df45ca16960faca66a98e6938faafaf0d' }, h("ion-card-header", { key: '8f0d87ecc1ef413d767b00c906ba36af212a3e25' }, h("ion-card-title", { key: 'a7010a87e619c0d2200b5f0076a6096405821d8a' }, h("pos-label", { key: '462dd3461b1fd5658ae9c0f497f7e5164ff30621' })), h("pos-type-badges", { key: '4b7f8b9e4204a9310e186f10ca3b57d5b245ac5f' }), h("pos-literals", { key: 'cdb9f3b2b088e2852f9116dae10c425e3329c9a4' })))))));
     }
 }, [0, "pos-app-rdf-document"]);
 function defineCustomElement$1() {

package/dist/components/pos-app2.js CHANGED Viewed

@@ -971,7 +971,7 @@ const PosApp = /*@__PURE__*/ proxyCustomElement(class PosApp extends HTMLElement
         }
     }
     render() {
-        return h("slot", { key: '1ed94f2f97dd52a6a80ceb6d9faa1d1c95796994' });
+        return h("slot", { key: '32436fcf8726f4c6b3079f402c296bd3c6cafd04' });
     }
 }, [4, "pos-app", {
         "restorePreviousSession": [4, "restore-previous-session"],

package/dist/components/pos-dialog2.js CHANGED Viewed

@@ -16,7 +16,7 @@ const PosDialog = /*@__PURE__*/ proxyCustomElement(class PosDialog extends HTMLE
         this.dialog.close();
     }
     render() {
-        return (h(Host, { key: '96cf2a4229429fb2e7a9aa0a5df072bb8ef3e945' }, h("dialog", { key: '4fc37192bb461020c9633b5b262621ab4d4bc0fe', ref: el => (this.dialog = el) }, h("header", { key: 'ed591e9b701a57179cf9c1230b24429dfd29465c' }, h("slot", { key: 'e6774fe791994bc37f842b0dd5d2a7944f009365', name: "title" }), h("button", { key: 'a106d0eced3de811ea285df1d7ede14b62539059', tabindex: -1, id: "close", title: "Close", onClick: () => this.close() }, h("ion-icon", { key: 'a5053e1836dcb97d36827d25e6b503b3bd4bb38a', name: "close-outline" }))), h("slot", { key: '4d6fa2d3f4044a0b647e697331c8cc78a91b7bda', name: "content" }))));
+        return (h(Host, { key: 'c225a4ac0e04d0a71fdb0b98c6b2ec8619f465b2' }, h("dialog", { key: 'ca442886d0651fce3b9b565dba18a6bda30750cd', ref: el => (this.dialog = el) }, h("header", { key: '5589443a2551bb8ed14870bacdbaaf0b93b0cfe2' }, h("slot", { key: 'abad20ea1a223ad2229bebcca6c7f3fe09ee4d05', name: "title" }), h("button", { key: '2da0f8dfc03a15c90dc099ee824369564ac12d72', tabindex: -1, id: "close", title: "Close", onClick: () => this.close() }, h("ion-icon", { key: 'bab7a9b15ebbec354e84aab7a84ca34a01e62600', name: "close-outline" }))), h("slot", { key: '51978d27aef2308e0b66374087543705f0ac391c', name: "content" }))));
     }
     static get style() { return PosDialogStyle0; }
 }, [4, "pos-dialog", {

package/dist/components/pos-error-toast2.js CHANGED Viewed

@@ -32,7 +32,7 @@ const PosErrorToast = /*@__PURE__*/ proxyCustomElement(class PosErrorToast exten
         await toast.present();
     }
     render() {
-        return h("slot", { key: '4a74cfb8984c6040fec76e98ed3c8bee65fa1ee1' });
+        return h("slot", { key: '1abf0983dd843eb8b3342ec1fda0e25d02a2df5a' });
     }
 }, [1, "pos-error-toast", undefined, [[8, "unhandledrejection", "unhandledRejection"], [0, "pod-os:error", "catchError"]]]);
 function defineCustomElement() {

package/dist/components/pos-image2.js CHANGED Viewed

@@ -1,10 +1,10 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } 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 posImageCss = ":host{--object-fit:cover}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);object-fit:var(--object-fit)}.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.error{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 posImageCss = ":host{display:flex;background-size:cover;background-repeat:no-repeat;background-position:center;border-radius:inherit}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);object-fit:var(--object-fit)}img{backdrop-filter:var(--blur-xl)}.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.error{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 PosImageStyle0 = posImageCss;
 const PosImage = /*@__PURE__*/ proxyCustomElement(class PosImage extends HTMLElement {
@@ -19,6 +19,7 @@ const PosImage = /*@__PURE__*/ proxyCustomElement(class PosImage extends HTMLEle
         };
         this.src = undefined;
         this.alt = undefined;
+        this.blurredBackground = false;
         this.os = undefined;
         this.dataUri = undefined;
         this.brokenFile = undefined;
@@ -72,7 +73,9 @@ const PosImage = /*@__PURE__*/ proxyCustomElement(class PosImage extends HTMLEle
             // if even the loading via classic <img src="..."> failed, render a link
             return (h("div", { class: "error" }, h("a", { href: this.src }, this.src)));
         }
-        return h("img", { src: this.dataUri, alt: this.alt });
+        return (h(Host, { style: {
+                backgroundImage: this.blurredBackground ? `url('${this.dataUri}')` : null,
+            } }, h("img", { src: this.dataUri, alt: this.alt })));
     }
     static get watchers() { return {
         "os": ["fetchBlob"],
@@ -82,6 +85,7 @@ const PosImage = /*@__PURE__*/ proxyCustomElement(class PosImage extends HTMLEle
 }, [1, "pos-image", {
         "src": [1],
         "alt": [1],
+        "blurredBackground": [4, "blurred-background"],
         "os": [32],
         "dataUri": [32],
         "brokenFile": [32],

package/dist/components/pos-image2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pos-image2.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,~~yxBAAyxB~~,CAAC;~~AAC9yB~~,uBAAe,WAAW;;MCcb,QAAQ;;;;;;;~~QAkCnB~~,UAAK,GAAG,OAAO,EAAS;YACtB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC~~;;;;;;;;uBAhByB~~,IAAI;;IAS/B,iBAAiB;QACfA,KAAO,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QACvD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3C;IAQD,MAAM,SAAS;QACb,IAAI;YACF,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YACzB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC/C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC1C,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE;gBACf,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;aACjD;iBAAM;gBACL,IAAI,CAAC,UAAU,GAAG,IAAsB,CAAC;aAC1C;SACF;QAAC,OAAO,GAAG,EAAE;YACZ,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC;SACzB;gBAAS;YACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAED,YAAY,CAAC,GAAU;QACrB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC;KACvB;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,yBAAmB,QAAQ,EAAE,IAAI,GAAsB,CAAC;SAChE;QACD,IAAI,IAAI,CAAC,YAAY,EAAE;;YAErB,OAAO,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,GAAI,CAAC;SACtF;QACD,IAAI,IAAI,CAAC,UAAU,EAAE;;YAEnB,OAAO,EAAC,UAAU,IAAC,IAAI,EAAE,IAAI,CAAC,UAAU,GAAI,CAAC;SAC9C;QACD,IAAI,IAAI,CAAC,UAAU,EAAE;;YAEnB,QACE,WAAK,KAAK,EAAC,OAAO,IAChB,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IAAG,IAAI,CAAC,GAAG,CAAK,CAC7B,EACN;SACH;QAED,OAAO,WAAK,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,~~CAAC~~;~~KAClD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["session"],"sources":["src/components/pos-image/pos-image.css?tag=pos-image&encapsulation=shadow","src/components/pos-image/pos-image.tsx"],"sourcesContent":[":host {\n /*\n @prop --width: Width of the image\n * @prop --height: Height of the image\n * @prop --border-radius: Border radius of the image\n * @prop --max-width: Maximum width of the image\n * @prop --max-height: Maximum height of the image\n * @prop --object-fit: CSS object-fit of the image\n /\n ~~--object~~-~~fit~~: cover;\n}\n\nimg,\nion-skeleton-text,\ndiv.error {\n border-radius: var(--border-radius);\n width: var(--width);\n height: var(--height);\n max-width: var(--max-width);\n max-height: var(--max-height);\n object-fit: var(--object-fit);\n}\n\n.error {\n display: flex;\n opacity: 0.8;\n background: repeating-linear-gradient(-45deg, rgba(150, 0, 0, 0.1), rgba(150, 0, 0, 0.1) 10px, #fff 5px, #fff 25px);\n flex-direction: column;\n border: 1px solid red;\n color: black;\n align-items: center;\n justify-content: center;\n word-break: break-all;\n padding: 1rem;\n box-sizing: border-box;\n}\n\n.error ion-icon {\n color: #282828;\n --ionicon-stroke-width: calc(var(--width) / 5);\n font-size: calc(var(--width) / 2);\n}\n\na.error {\n text-decoration: none;\n width: var(--width);\n height: var(--height);\n}\n\n.code {\n font-weight: bold;\n font-size: calc(var(--width) / 8);\n}\n\n.text {\n font-size: calc(var(--width) / 20);\n}\n","import { BrokenFile as BrokenFileData, PodOS } from '@pod-os/core';\nimport { BrokenFile } from '../broken-file/BrokenFile';\nimport { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport session from '../../store/session';\n\n/\n Tries fetch an image with the solid authentication, and can visualize http errors like 403 or 404 if this fails.\n * Falls back to classic <img src=\"...\"> on network errors like CORS.\n * Renders a normal link if even this fails.\n /\n@Component({\n tag: 'pos-image',\n styleUrl: 'pos-image.css',\n shadow: true,\n})\nexport class PosImage {\n @Prop() src: string;\n\n @Prop() alt: string;\n\n @State() os: PodOS;\n\n @State()\n private dataUri: string;\n\n @State()\n private brokenFile: BrokenFileData;\n\n @State()\n private networkError: Error;\n\n @State()\n private imageError: Event;\n\n @State()\n private loading: boolean = true;\n\n @Event({ eventName: 'pod-os:init' }) initializeOsEmitter: EventEmitter;\n\n /\n Indicates that the resource given in `src` property has been loaded.\n */\n @Event({ eventName: 'pod-os:resource-loaded' }) resourceLoadedEmitter: EventEmitter<string>;\n\n componentWillLoad() {\n session.onChange('isLoggedIn', () => this.fetchBlob());\n this.initializeOsEmitter.emit(this.setOs);\n }\n\n setOs = async (os: PodOS) => {\n this.os = os;\n };\n\n @Watch('os')\n @Watch('src')\n async fetchBlob() {\n try {\n this.loading = true;\n this.imageError = null;\n this.networkError = null;\n this.brokenFile = null;\n const file = await this.os.fetchFile(this.src);\n this.resourceLoadedEmitter.emit(this.src);\n if (file.blob()) {\n this.dataUri = URL.createObjectURL(file.blob());\n } else {\n this.brokenFile = file as BrokenFileData;\n }\n } catch (err) {\n this.networkError = err;\n } finally {\n this.loading = false;\n }\n }\n\n onImageError(err: Event) {\n this.networkError = null;\n this.imageError = err;\n }\n\n render() {\n if (this.loading) {\n return <ion-skeleton-text animated={true}></ion-skeleton-text>;\n }\n if (this.networkError) {\n // probably a CORS error\n return <img alt={this.alt} src={this.src} onError={err => this.onImageError(err)} />;\n }\n if (this.brokenFile) {\n // fetching worked, but HTTP response was not ok\n return <BrokenFile file={this.brokenFile} />;\n }\n if (this.imageError) {\n // if even the loading via classic <img src=\"...\"> failed, render a link\n return (\n <div class=\"error\">\n <a href={this.src}>{this.src}</a>\n </div>\n );\n }\n\n return <img src={this.dataUri} alt={this.alt} ~~/>;\~~n }\n}\n"],"version":3}
1	+ {"file":"pos-image2.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,y5BAAy5B,CAAC;AAC96B,uBAAe,WAAW;;MCcb,QAAQ;;;;;;;QAuCnB,UAAK,GAAG,OAAO,EAAS;YACtB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC;;;iCAjCmC,KAAK;;;;;;uBAiBf,IAAI;;IAS/B,iBAAiB;QACfA,KAAO,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QACvD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3C;IAQD,MAAM,SAAS;QACb,IAAI;YACF,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YACzB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC/C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC1C,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE;gBACf,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;aACjD;iBAAM;gBACL,IAAI,CAAC,UAAU,GAAG,IAAsB,CAAC;aAC1C;SACF;QAAC,OAAO,GAAG,EAAE;YACZ,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC;SACzB;gBAAS;YACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAED,YAAY,CAAC,GAAU;QACrB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC;KACvB;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,yBAAmB,QAAQ,EAAE,IAAI,GAAsB,CAAC;SAChE;QACD,IAAI,IAAI,CAAC,YAAY,EAAE;;YAErB,OAAO,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,GAAI,CAAC;SACtF;QACD,IAAI,IAAI,CAAC,UAAU,EAAE;;YAEnB,OAAO,EAAC,UAAU,IAAC,IAAI,EAAE,IAAI,CAAC,UAAU,GAAI,CAAC;SAC9C;QACD,IAAI,IAAI,CAAC,UAAU,EAAE;;YAEnB,QACE,WAAK,KAAK,EAAC,OAAO,IAChB,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IAAG,IAAI,CAAC,GAAG,CAAK,CAC7B,EACN;SACH;QAED,QACE,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI,CAAC,iBAAiB,GAAG,QAAQ,IAAI,CAAC,OAAO,IAAI,GAAG,IAAI;aAC1E,IAED,WAAK,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CACpC,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["session"],"sources":["src/components/pos-image/pos-image.css?tag=pos-image&encapsulation=shadow","src/components/pos-image/pos-image.tsx"],"sourcesContent":[":host {\n /*\n @prop --width: Width of the image\n * @prop --height: Height of the image\n * @prop --border-radius: Border radius of the image\n * @prop --max-width: Maximum width of the image\n * @prop --max-height: Maximum height of the image\n * @prop --object-fit: CSS object-fit of the image\n /\n display: flex;\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n border-radius: inherit;\n}\n\nimg,\nion-skeleton-text,\ndiv.error {\n border-radius: var(--border-radius);\n width: var(--width);\n height: var(--height);\n max-width: var(--max-width);\n max-height: var(--max-height);\n object-fit: var(--object-fit);\n}\n\nimg {\n backdrop-filter: var(--blur-xl);\n}\n\n.error {\n display: flex;\n opacity: 0.8;\n background: repeating-linear-gradient(-45deg, rgba(150, 0, 0, 0.1), rgba(150, 0, 0, 0.1) 10px, #fff 5px, #fff 25px);\n flex-direction: column;\n border: 1px solid red;\n color: black;\n align-items: center;\n justify-content: center;\n word-break: break-all;\n padding: 1rem;\n box-sizing: border-box;\n}\n\n.error ion-icon {\n color: #282828;\n --ionicon-stroke-width: calc(var(--width) / 5);\n font-size: calc(var(--width) / 2);\n}\n\na.error {\n text-decoration: none;\n width: var(--width);\n height: var(--height);\n}\n\n.code {\n font-weight: bold;\n font-size: calc(var(--width) / 8);\n}\n\n.text {\n font-size: calc(var(--width) / 20);\n}\n","import { BrokenFile as BrokenFileData, PodOS } from '@pod-os/core';\nimport { BrokenFile } from '../broken-file/BrokenFile';\nimport { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport session from '../../store/session';\n\n/\n Tries fetch an image with the solid authentication, and can visualize http errors like 403 or 404 if this fails.\n * Falls back to classic <img src=\"...\"> on network errors like CORS.\n * Renders a normal link if even this fails.\n /\n@Component({\n tag: 'pos-image',\n styleUrl: 'pos-image.css',\n shadow: true,\n})\nexport class PosImage {\n @Prop() src: string;\n\n @Prop() alt: string;\n\n /\n Use a blurred version of the image as its own background, if the image is scaled down to fit into the container.\n /\n @Prop() blurredBackground: boolean = false;\n\n @State() os: PodOS;\n\n @State()\n private dataUri: string;\n\n @State()\n private brokenFile: BrokenFileData;\n\n @State()\n private networkError: Error;\n\n @State()\n private imageError: Event;\n\n @State()\n private loading: boolean = true;\n\n @Event({ eventName: 'pod-os:init' }) initializeOsEmitter: EventEmitter;\n\n /\n Indicates that the resource given in `src` property has been loaded.\n */\n @Event({ eventName: 'pod-os:resource-loaded' }) resourceLoadedEmitter: EventEmitter<string>;\n\n componentWillLoad() {\n session.onChange('isLoggedIn', () => this.fetchBlob());\n this.initializeOsEmitter.emit(this.setOs);\n }\n\n setOs = async (os: PodOS) => {\n this.os = os;\n };\n\n @Watch('os')\n @Watch('src')\n async fetchBlob() {\n try {\n this.loading = true;\n this.imageError = null;\n this.networkError = null;\n this.brokenFile = null;\n const file = await this.os.fetchFile(this.src);\n this.resourceLoadedEmitter.emit(this.src);\n if (file.blob()) {\n this.dataUri = URL.createObjectURL(file.blob());\n } else {\n this.brokenFile = file as BrokenFileData;\n }\n } catch (err) {\n this.networkError = err;\n } finally {\n this.loading = false;\n }\n }\n\n onImageError(err: Event) {\n this.networkError = null;\n this.imageError = err;\n }\n\n render() {\n if (this.loading) {\n return <ion-skeleton-text animated={true}></ion-skeleton-text>;\n }\n if (this.networkError) {\n // probably a CORS error\n return <img alt={this.alt} src={this.src} onError={err => this.onImageError(err)} />;\n }\n if (this.brokenFile) {\n // fetching worked, but HTTP response was not ok\n return <BrokenFile file={this.brokenFile} />;\n }\n if (this.imageError) {\n // if even the loading via classic <img src=\"...\"> failed, render a link\n return (\n <div class=\"error\">\n <a href={this.src}>{this.src}</a>\n </div>\n );\n }\n\n return (\n <Host\n style={{\n backgroundImage: this.blurredBackground ? `url('${this.dataUri}')` : null,\n }}\n >\n <img src={this.dataUri} alt={this.alt} />\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/pos-internal-router2.js CHANGED Viewed

@@ -19,7 +19,7 @@ const PosInternalRouter = /*@__PURE__*/ proxyCustomElement(class PosInternalRout
         this.uri = 'pod-os:dashboard';
     }
     render() {
-        return h("pos-app-dashboard", { key: '9f21e373afb8a99a1b85abf09f97f730afee4ed6' });
+        return h("pos-app-dashboard", { key: '44741d470c91f1faa732c5932788aa58b56805d4' });
     }
 }, [0, "pos-internal-router", {
         "uri": [1]

package/dist/components/pos-literals2.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { d as defineCustomElement$3 } from './pos-add-literal-value2.js';
 import { d as defineCustomElement$2 } from './pos-predicate2.js';
 import { d as defineCustomElement$1 } from './pos-select-term2.js';
-const posLiteralsCss = ":host {\n  --background-base-color: var(--color-grey-200);\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}\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-2);\n  }\n}\n";
+const posLiteralsCss = ":host {\n  --background-base-color: var(--color-grey-200);\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  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-1);\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-2);\n  }\n}\n";
 const PosLiteralsStyle0 = posLiteralsCss;
 const PosLiterals = /*@__PURE__*/ proxyCustomElement(class PosLiterals extends HTMLElement {
@@ -41,7 +41,7 @@ const PosLiterals = /*@__PURE__*/ proxyCustomElement(class PosLiterals extends H
         }
     }
     render() {
-        return (h(Host, { key: '61baacde23f28d7b2e3c95652aedf62c90446c3f' }, this.data.length > 0 ? (h("dl", null, this.data.map(it => (h("div", { class: "predicate-values" }, h("dt", null, h("pos-predicate", { uri: it.predicate, label: it.label })), h("div", { class: "values" }, it.values.map(value => (h("dd", null, value))))))))) : null, h("pos-add-literal-value", { key: 'a8cca657602f883de5776b9f0012c9f8de41840d', "onPod-os:added-literal-value": event => this.literalValueAdded(event.detail) })));
+        return (h(Host, { key: '35b12479d51638dc1e4de983f4901ddcea39e8df' }, this.data.length > 0 ? (h("dl", null, this.data.map(it => (h("div", { class: "predicate-values" }, h("dt", null, h("pos-predicate", { uri: it.predicate, label: it.label })), h("div", { class: "values" }, it.values.map(value => (h("dd", null, value))))))))) : null, h("pos-add-literal-value", { key: '76f9434f813162456c3c75728db363d708e2617f', "onPod-os:added-literal-value": event => this.literalValueAdded(event.detail) })));
     }
     static get style() { return PosLiteralsStyle0; }
 }, [1, "pos-literals", {