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

package/dist/esm/ion-card_30.entry.js

@@ -1063,7 +1063,7 @@ const PosAddNewThing = class {
         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 }))));
     }
 };
 PosAddNewThing.style = PosAddNewThingStyle0;
@@ -2036,7 +2036,7 @@ const PosApp = class {
         }
     }
     render() {
-        return h("slot", { key: '1ed94f2f97dd52a6a80ceb6d9faa1d1c95796994' });
+        return h("slot", { key: '32436fcf8726f4c6b3079f402c296bd3c6cafd04' });
     }
 };
 
@@ -2115,7 +2115,7 @@ const PosDialog = class {
         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" }))));
     }
 };
 PosDialog.style = PosDialogStyle0;
@@ -2148,7 +2148,7 @@ const PosErrorToast = class {
         await toast.present();
     }
     render() {
-        return h("slot", { key: '4a74cfb8984c6040fec76e98ed3c8bee65fa1ee1' });
+        return h("slot", { key: '1abf0983dd843eb8b3342ec1fda0e25d02a2df5a' });
     }
 };
 
@@ -2178,7 +2178,7 @@ const PosGettingStarted = class {
 };
 PosGettingStarted.style = PosGettingStartedStyle0;
 
-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 = class {
@@ -2191,6 +2191,7 @@ const PosImage = class {
         };
         this.src = undefined;
         this.alt = undefined;
+        this.blurredBackground = false;
         this.os = undefined;
         this.dataUri = undefined;
         this.brokenFile = undefined;
@@ -2244,7 +2245,9 @@ const PosImage = class {
             // 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"],
@@ -2259,7 +2262,7 @@ const PosInternalRouter = class {
         this.uri = 'pod-os:dashboard';
     }
     render() {
-        return h("pos-app-dashboard", { key: '9f21e373afb8a99a1b85abf09f97f730afee4ed6' });
+        return h("pos-app-dashboard", { key: '44741d470c91f1faa732c5932788aa58b56805d4' });
     }
 };
 
@@ -2306,7 +2309,7 @@ const PosLogin = class {
         this.dialog.showModal();
     }
     render() {
-        return (h(Host, { key: '614aefb5576d3904c3d8e4a929011468e3b85871' }, h("div", { key: '48b6bc01839acc23a0c6643c2a950bb1a57075f3', class: "container" }, store.state.isLoggedIn ? (h("pos-resource", { uri: store.state.webId }, h("span", { class: "user-data" }, h("pos-picture", null), h("pos-label", null)))) : (''), !store.state.isLoggedIn && (h("button", { key: '7e55ec9ed0c2eb7fb3f8074e39e6adfe82328b73', id: "login", onClick: () => this.openDialog() }, "Login")), store.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" }, store.state.isLoggedIn ? (h("pos-resource", { uri: store.state.webId }, h("span", { class: "user-data" }, h("pos-picture", null), h("pos-label", null)))) : (''), !store.state.isLoggedIn && (h("button", { key: '09264faa5a12b18a805bb13cf92a9a0b190bd498', id: "login", onClick: () => this.openDialog() }, "Login")), store.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" }))));
     }
 };
 PosLogin.style = PosLoginStyle0;
@@ -2325,7 +2328,7 @@ const PosLoginForm = class {
         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();
@@ -2413,7 +2416,7 @@ const PosNavigationBar = class {
         }
     }
     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));
     }
 };
 PosNavigationBar.style = PosNavigationBarStyle0;
@@ -2444,7 +2447,7 @@ const PosNewThingForm = class {
         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;
@@ -2477,7 +2480,7 @@ const PosNewThingForm = class {
 };
 PosNewThingForm.style = PosNewThingFormStyle0;
 
-const posPictureCss = ":host{--width:300px;--height:300px;--border-radius:var(--border-radius, 0)}";
+const posPictureCss = ":host{--width:300px;--height:300px;--border-radius:var(--border-radius, 0);--object-fit:var(--object-fit, cover)}";
 const PosPictureStyle0 = posPictureCss;
 
 const PosPicture = class {
@@ -2487,6 +2490,7 @@ const PosPicture = class {
         this.receiveResource = (resource) => {
             this.resource = resource;
         };
+        this.blurredBackground = false;
         this.resource = undefined;
     }
     componentWillLoad() {
@@ -2496,7 +2500,7 @@ const PosPicture = class {
         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() });
     }
 };
 PosPicture.style = PosPictureStyle0;
@@ -2581,10 +2585,10 @@ const PosRichLink = class {
         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' }))));
     }
 };
 PosRichLink.style = PosRichLinkStyle0;
@@ -2910,7 +2914,7 @@ const PosRouter = class {
         this.routeChanged.emit(this.uri);
     }
     render() {
-        return h("slot", { key: 'a12c41f2558a536db32e0399fe51ee66d5178b4d' });
+        return h("slot", { key: '972cd1041f376ae50b45691f2ad3ae7f676ff0df' });
     }
 };
 PosRouter.style = PosRouterStyle0;
@@ -2941,7 +2945,7 @@ const PosSelectTerm = class {
         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 delegatesFocus() { return true; }
     static get watchers() { return {