npm - @pod-os/elements - Versions diffs - 0.25.2 → 0.25.3-rc.3de9abd.0 - Mend

@pod-os/elements 0.25.2 → 0.25.3-rc.3de9abd.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 (636) hide show

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

@@ -1,12 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { s as subscribeResource } from './ResourceAware.js';
-import { d as defineCustomElement$5 } from './icon.js';
-import { d as defineCustomElement$4 } from './input.js';
+import { d as defineCustomElement$4 } from './icon.js';
 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  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 posLiteralsCss = ":host {\n  --background-base-color: color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\ndd {\n  padding: 0;\n  margin: 0;\n}\n\ndl {\n  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 +40,7 @@ const PosLiterals = /*@__PURE__*/ proxyCustomElement(class PosLiterals extends H
         }
     }
     render() {
-        return (h(Host, { key: 'fbfc96a94c8a225a94cbf8d230b9ec36b935523b' }, 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: 'f0b7dda5edb7d590301a8c04a6309a774c074ccb', "onPod-os:added-literal-value": event => this.literalValueAdded(event.detail) })));
+        return (h(Host, { key: '26dd446e53e4157e6b635b5d711abf9ddf50b821' }, 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: '756003351bba9399d1a53242c0153b18fc0b4b19', "onPod-os:added-literal-value": event => this.literalValueAdded(event.detail) })));
     }
     static get style() { return PosLiteralsStyle0; }
 }, [1, "pos-literals", {
@@ -51,7 +50,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-literals", "ion-icon", "ion-input", "pos-add-literal-value", "pos-predicate", "pos-select-term"];
+    const components = ["pos-literals", "ion-icon", "pos-add-literal-value", "pos-predicate", "pos-select-term"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-literals":
             if (!customElements.get(tagName)) {
@@ -59,11 +58,6 @@ function defineCustomElement() {
             }
             break;
         case "ion-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "ion-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

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

	@@ -1 +1 @@
1	- {"file":"pos-literals2.js","mappings":"~~;;;;;;;;~~AAAA,MAAM,cAAc,GAAG,~~85BAA85B~~,CAAC;~~AACt7B~~,0BAAe,cAAc;;MCQhB,WAAW;IALxB;;;;;QAMW,SAAI,GAAc,EAAE,CAAC;QAS9B,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,QAAQ,EAAE,CAAC;SACjC,CAAC;KA2CH;IAjDC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAMD,iBAAiB,CAAC,UAAmB;QACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,SAAS,KAAK,UAAU,CAAC,SAAS,CAAC,CAAC;QAE7E,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;SACxC;aAAM;YACL,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;gBAC1B,OAAO,EAAE,CAAC,SAAS,KAAK,QAAQ,CAAC,SAAS;sBACtC;wBACE,SAAS,EAAE,QAAQ,CAAC,SAAS;wBAC7B,KAAK,EAAE,QAAQ,CAAC,KAAK;wBACrB,MAAM,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,GAAG,UAAU,CAAC,MAAM,CAAC;qBACnD;sBACD,EAAE,CAAC;aACR,CAAC,CAAC;SACJ;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IACnB,cACG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KACf,WAAK,KAAK,EAAC,kBAAkB,IAC3B,cACE,qBAAe,GAAG,EAAE,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,GAAI,CAClD,EACL,WAAK,KAAK,EAAC,QAAQ,IAChB,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,KAClB,cAAK,KAAK,CAAM,CACjB,CAAC,CACE,CACF,CACP,CAAC,CACC,IACH,IAAI,EACR,8GAAqD,KAAK,IAAI,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,GAAI,CACjG,EACP;KACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["src/components/pos-literals/pos-literals.css?tag=pos-literals&encapsulation=shadow","src/components/pos-literals/pos-literals.tsx"],"sourcesContent":[":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","import { Literal, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Host, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n tag: 'pos-literals',\n styleUrl: './pos-literals.css',\n shadow: true,\n})\nexport class PosLiterals implements ResourceAware {\n @State() data: Literal[] = [];\n\n @Event({ eventName: 'pod-os:resource' })\n subscribeResource: EventEmitter;\n\n componentWillLoad() {\n subscribeResource(this);\n }\n\n receiveResource = (resource: Thing) => {\n this.data = resource.literals();\n };\n\n literalValueAdded(newLiteral: Literal) {\n const existing = this.data.find(it => it.predicate === newLiteral.predicate);\n\n if (!existing) {\n this.data = [...this.data, newLiteral];\n } else {\n this.data = this.data.map(it => {\n return it.predicate === existing.predicate\n ? {\n predicate: existing.predicate,\n label: existing.label,\n values: [...existing.values, ...newLiteral.values],\n }\n : it;\n });\n }\n }\n\n render() {\n return (\n <Host>\n {this.data.length > 0 ? (\n <dl>\n {this.data.map(it => (\n <div class=\"predicate-values\">\n <dt>\n <pos-predicate uri={it.predicate} label={it.label} />\n </dt>\n <div class=\"values\">\n {it.values.map(value => (\n <dd>{value}</dd>\n ))}\n </div>\n </div>\n ))}\n </dl>\n ) : null}\n <pos-add-literal-value onPod-os:added-literal-value={event => this.literalValueAdded(event.detail)} />\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pos-literals2.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,m9BAAm9B,CAAC;AAC3+B,0BAAe,cAAc;;MCQhB,WAAW;IALxB;;;;;QAMW,SAAI,GAAc,EAAE,CAAC;QAS9B,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,QAAQ,EAAE,CAAC;SACjC,CAAC;KA2CH;IAjDC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAMD,iBAAiB,CAAC,UAAmB;QACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,SAAS,KAAK,UAAU,CAAC,SAAS,CAAC,CAAC;QAE7E,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;SACxC;aAAM;YACL,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;gBAC1B,OAAO,EAAE,CAAC,SAAS,KAAK,QAAQ,CAAC,SAAS;sBACtC;wBACE,SAAS,EAAE,QAAQ,CAAC,SAAS;wBAC7B,KAAK,EAAE,QAAQ,CAAC,KAAK;wBACrB,MAAM,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,GAAG,UAAU,CAAC,MAAM,CAAC;qBACnD;sBACD,EAAE,CAAC;aACR,CAAC,CAAC;SACJ;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IACnB,cACG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KACf,WAAK,KAAK,EAAC,kBAAkB,IAC3B,cACE,qBAAe,GAAG,EAAE,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,GAAI,CAClD,EACL,WAAK,KAAK,EAAC,QAAQ,IAChB,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,KAClB,cAAK,KAAK,CAAM,CACjB,CAAC,CACE,CACF,CACP,CAAC,CACC,IACH,IAAI,EACR,8GAAqD,KAAK,IAAI,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,GAAI,CACjG,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-literals/pos-literals.css?tag=pos-literals&encapsulation=shadow","src/components/pos-literals/pos-literals.tsx"],"sourcesContent":[":host {\n --background-base-color: color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);\n --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n --border-color: var(--background-base-color);\n}\n\ndd {\n padding: 0;\n margin: 0;\n}\n\ndl {\n 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","import { Literal, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Host, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n tag: 'pos-literals',\n styleUrl: './pos-literals.css',\n shadow: true,\n})\nexport class PosLiterals implements ResourceAware {\n @State() data: Literal[] = [];\n\n @Event({ eventName: 'pod-os:resource' })\n subscribeResource: EventEmitter;\n\n componentWillLoad() {\n subscribeResource(this);\n }\n\n receiveResource = (resource: Thing) => {\n this.data = resource.literals();\n };\n\n literalValueAdded(newLiteral: Literal) {\n const existing = this.data.find(it => it.predicate === newLiteral.predicate);\n\n if (!existing) {\n this.data = [...this.data, newLiteral];\n } else {\n this.data = this.data.map(it => {\n return it.predicate === existing.predicate\n ? {\n predicate: existing.predicate,\n label: existing.label,\n values: [...existing.values, ...newLiteral.values],\n }\n : it;\n });\n }\n }\n\n render() {\n return (\n <Host>\n {this.data.length > 0 ? (\n <dl>\n {this.data.map(it => (\n <div class=\"predicate-values\">\n <dt>\n <pos-predicate uri={it.predicate} label={it.label} />\n </dt>\n <div class=\"values\">\n {it.values.map(value => (\n <dd>{value}</dd>\n ))}\n </div>\n </div>\n ))}\n </dl>\n ) : null}\n <pos-add-literal-value onPod-os:added-literal-value={event => this.literalValueAdded(event.detail)} />\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-const posLoginFormCss = ":host{display:block;margin:0}form{display:flex;flex-direction:column;gap:var(--size-4)}input{outline:var(--pos-input-outline);padding:var(--scale-000);border:none;border-radius:var(--radius-xs);width:var(--size-full);box-sizing:border-box}input:focus-within{outline:var(--pos-input-focus-outline)}input#login{outline:none;box-shadow:var(--shadow-sm);cursor:pointer;color:var(--pos-primary-text-color);background-color:var(--pos-primary-color)}input#login:disabled{cursor:default;color:var(--pos-disabled-text-color);background-color:var(--pos-disabled-color);box-shadow:none}input#login:hover:not(:disabled),input#login:focus{filter:brightness(110%);box-shadow:var(--shadow-md)}";
+const posLoginFormCss = ":host{display:block;margin:0}form{display:flex;flex-direction:column;gap:var(--size-4)}input{outline:var(--pos-input-outline);padding:var(--scale-000);border:none;border-radius:var(--radius-xs);width:var(--size-full);box-sizing:border-box;background:var(--pos-input-background-color);color:var(--pos-normal-text-color)}input:focus-within{outline:var(--pos-input-focus-outline)}input#login{outline:none;box-shadow:var(--shadow-sm);cursor:pointer;color:var(--pos-primary-text-color);background-color:var(--pos-primary-color)}input#login:disabled{cursor:default;color:var(--pos-disabled-text-color);background-color:var(--pos-disabled-color);box-shadow:none}input#login:hover:not(:disabled),input#login:focus{filter:brightness(110%);box-shadow:var(--shadow-md)}";
 const PosLoginFormStyle0 = posLoginFormCss;
 const PosLoginForm = /*@__PURE__*/ proxyCustomElement(class PosLoginForm extends HTMLElement {
@@ -16,7 +16,7 @@ const PosLoginForm = /*@__PURE__*/ proxyCustomElement(class PosLoginForm extends
         this.canSubmit = Boolean(this.idpUrl);
     }
     render() {
-        return (h("form", { key: 'ad94a827203fead2cc5976e65d5dd11b76929a37', method: "dialog", onSubmit: () => this.handleSubmit() }, h("label", { key: '042115e98ac3dc97aa941b9a086a930c532bab19', htmlFor: "idpUrl" }, "Please enter your Identity Provider"), h("input", { key: '45a4621d9a21a5b21ec82f81025b2be68d5505ae', id: "idpUrl", type: "url", value: this.idpUrl, required: true, onInput: e => this.handleChange(e), list: "suggestedIssuers", placeholder: "Type to search..." }), h("datalist", { key: '1f4dd4962470e796d1a175ea2ec2d03663390a0d', id: "suggestedIssuers" }, h("option", { key: 'f00f189f9f7babbda5c109a57d380d4d44d68f79', value: "https://solidcommunity.net" }, "solidcommunity.net"), h("option", { key: 'a0a1e4171ef87cd219cb8f0c68b68d0901d3fa55', value: "https://solidweb.org" }, "solidweb.org"), h("option", { key: '4361294b71ba9b7b123dd5d1deb2692b2edfa59e', value: "https://solidweb.me" }, "solidweb.me"), h("option", { key: '0fcee23d732415ef206d8c9a4d18c31f2bcd8eca', value: "https://inrupt.net" }, "inrupt.net"), h("option", { key: '267b177e9765e09ee2aa592c8a4d4c152ad7fb0b', value: "https://login.inrupt.com" }, "Inrupt PodSpaces"), h("option", { key: '302a4d517fedeafb146d9f8a3938383c57e24f7e', value: "https://trinpod.us" }, "trinpod.us"), h("option", { key: '83fd1b92688b24f575d3ee17a9cb394c8ab16eab', value: "https://use.id" }, "use.id"), h("option", { key: '007f814795f747d9b74f7b16db986502a9b746af', value: "https://solid.redpencil.io" }, "redpencil.io"), h("option", { key: '5477d60737d194bce4c50f24a75930427b6dc9bb', value: "https://datapod.grant.io" }, "Data Pod (grant.io)"), h("option", { key: 'e289736fcc31902f783efae443f17dfda532ba9f', value: "https://teamid.live" }, "teamid.live")), h("input", { key: '69a61d727a4e2c88a7f3594b98cca42f934b649a', id: "login", type: "submit", value: "Login", disabled: !this.canSubmit })));
+        return (h("form", { key: '193d3790329d1480fd6b14fd55a0d8cee8ce61dd', method: "dialog", onSubmit: () => this.handleSubmit() }, h("label", { key: 'd85ea6b508c9f229e1125f8cc97092335458b94a', htmlFor: "idpUrl" }, "Please enter your Identity Provider"), h("input", { key: 'a2f5e9955b27a8c1fab14c8f087fab167a19dc9a', id: "idpUrl", type: "url", value: this.idpUrl, required: true, onInput: e => this.handleChange(e), list: "suggestedIssuers", placeholder: "Type to search..." }), h("datalist", { key: 'fa0924b31e1a4fcdc794931dd2073022ab4ce95b', id: "suggestedIssuers" }, h("option", { key: 'c3495be7c2a98494ac3ca7fe504edd4b1b232394', value: "https://solidcommunity.net" }, "solidcommunity.net"), h("option", { key: '7fd17434388ed31468df8682dcfc2b4263c27ccb', value: "https://solidweb.org" }, "solidweb.org"), h("option", { key: '4c2a5854fc2499198b289181136cbd0a2fd9c1e1', value: "https://solidweb.me" }, "solidweb.me"), h("option", { key: '02a81104db23c62e0d42b8b45b95eccbd16fc108', value: "https://inrupt.net" }, "inrupt.net"), h("option", { key: 'd7c15dca86800cafc5a974920e40bd117fa50194', value: "https://login.inrupt.com" }, "Inrupt PodSpaces"), h("option", { key: '93ff71136f1775098fda80db5d437f37b51c496f', value: "https://trinpod.us" }, "trinpod.us"), h("option", { key: '481f1630526e324cb24b38c0077b1aeb496b4690', value: "https://use.id" }, "use.id"), h("option", { key: 'abd85ffba7532ba488bf0a4c18a2da2f3dc481ee', value: "https://solid.redpencil.io" }, "redpencil.io"), h("option", { key: '339562d277c4af2e10344f385d00aa4cc37375fa', value: "https://datapod.grant.io" }, "Data Pod (grant.io)"), h("option", { key: '918224ac5af806666a7b77bc8049dcf79800ab8c', value: "https://teamid.live" }, "teamid.live")), h("input", { key: '1ad3ef7998237d30c5eaf5bc9eebe55ede09d0a8', id: "login", type: "submit", value: "Login", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.validate();

package/dist/components/pos-login-form2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pos-login-form2.js","mappings":";;AAAA,MAAM,eAAe,GAAG,~~wqBAAwqB~~,CAAC;~~AACjsB~~,2BAAe,eAAe;;MCQjB,YAAY;IAPzB;;;;;QAQW,WAAM,GAAW,EAAE,CAAC;QAEpB,cAAS,GAAY,KAAK,CAAC;KAkDrC;IA1CC,QAAQ;QACN,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACvC;IAED,MAAM;QACJ,QACE,6DAAM,MAAM,EAAC,QAAQ,EAAC,QAAQ,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,IACvD,8DAAO,OAAO,EAAC,QAAQ,0CAA4C,EACnE,8DACE,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,KAAK,EACV,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAClC,IAAI,EAAC,kBAAkB,EACvB,WAAW,EAAC,mBAAmB,GAC/B,EACF,iEAAU,EAAE,EAAC,kBAAkB,IAC7B,+DAAQ,KAAK,EAAC,4BAA4B,yBAA4B,EACtE,+DAAQ,KAAK,EAAC,sBAAsB,mBAAsB,EAC1D,+DAAQ,KAAK,EAAC,qBAAqB,kBAAqB,EACxD,+DAAQ,KAAK,EAAC,oBAAoB,iBAAoB,EACtD,+DAAQ,KAAK,EAAC,0BAA0B,uBAA0B,EAClE,+DAAQ,KAAK,EAAC,oBAAoB,iBAAoB,EACtD,+DAAQ,KAAK,EAAC,gBAAgB,aAAgB,EAC9C,+DAAQ,KAAK,EAAC,4BAA4B,mBAAsB,EAChE,+DAAQ,KAAK,EAAC,0BAA0B,0BAA6B,EACrE,+DAAQ,KAAK,EAAC,qBAAqB,kBAAqB,CAC/C,EACX,8DAAO,EAAE,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,OAAO,EAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS,GAAI,CACtE,EACP;KACH;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;KAClC;IAED,MAAM,YAAY;QAChB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-login-form/pos-login-form.css?tag=pos-login-form&encapsulation=shadow","src/components/pos-login-form/pos-login-form.tsx"],"sourcesContent":[":host {\n display: block;\n margin: 0\n}\n\nform {\n display: flex;\n flex-direction: column;\n gap: var(--size-4);\n}\n\ninput {\n outline: var(--pos-input-outline);\n padding: var(--scale-000);\n border: none;\n border-radius: var(--radius-xs);\n width: var(--size-full);\n box-sizing: border-box;\n}\n\ninput:focus-within {\n outline: var(--pos-input-focus-outline);\n}\n\ninput#login {\n outline: none;\n box-shadow: var(--shadow-sm);\n cursor: pointer;\n color: var(--pos-primary-text-color);\n background-color: var(--pos-primary-color);\n}\n\ninput#login:disabled {\n cursor: default;\n color: var(--pos-disabled-text-color);\n background-color: var(--pos-disabled-color);\n box-shadow: none\n}\n\ninput#login:hover:not(:disabled)~~, input~~#login:focus {\n filter: brightness(110%);\n box-shadow: var(--shadow-md);\n}\n","import { Component, Event, EventEmitter, h, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'pos-login-form',\n shadow: {\n delegatesFocus: true,\n },\n styleUrl: 'pos-login-form.css',\n})\nexport class PosLoginForm {\n @State() idpUrl: string = '';\n\n @State() canSubmit: boolean = false;\n\n /*\n Emits the selected IDP URL to use for login\n */\n @Event({ eventName: 'pod-os:idp-url-selected' }) idpUrlSelected: EventEmitter;\n\n @Watch('idpUrl')\n validate() {\n this.canSubmit = Boolean(this.idpUrl);\n }\n\n render(): any {\n return (\n <form method=\"dialog\" onSubmit={() => this.handleSubmit()}>\n <label htmlFor=\"idpUrl\">Please enter your Identity Provider</label>\n <input\n id=\"idpUrl\"\n type=\"url\"\n value={this.idpUrl}\n required={true}\n onInput={e => this.handleChange(e)}\n list=\"suggestedIssuers\"\n placeholder=\"Type to search...\"\n />\n <datalist id=\"suggestedIssuers\">\n <option value=\"https://solidcommunity.net\">solidcommunity.net</option>\n <option value=\"https://solidweb.org\">solidweb.org</option>\n <option value=\"https://solidweb.me\">solidweb.me</option>\n <option value=\"https://inrupt.net\">inrupt.net</option>\n <option value=\"https://login.inrupt.com\">Inrupt PodSpaces</option>\n <option value=\"https://trinpod.us\">trinpod.us</option>\n <option value=\"https://use.id\">use.id</option>\n <option value=\"https://solid.redpencil.io\">redpencil.io</option>\n <option value=\"https://datapod.grant.io\">Data Pod (grant.io)</option>\n <option value=\"https://teamid.live\">teamid.live</option>\n </datalist>\n <input id=\"login\" type=\"submit\" value=\"Login\" disabled={!this.canSubmit} />\n </form>\n );\n }\n\n handleChange(event) {\n this.validate();\n this.idpUrl = event.target.value;\n }\n\n async handleSubmit() {\n this.idpUrlSelected.emit(this.idpUrl);\n }\n}\n"],"version":3}
1	+ {"file":"pos-login-form2.js","mappings":";;AAAA,MAAM,eAAe,GAAG,wvBAAwvB,CAAC;AACjxB,2BAAe,eAAe;;MCQjB,YAAY;IAPzB;;;;;QAQW,WAAM,GAAW,EAAE,CAAC;QAEpB,cAAS,GAAY,KAAK,CAAC;KAkDrC;IA1CC,QAAQ;QACN,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACvC;IAED,MAAM;QACJ,QACE,6DAAM,MAAM,EAAC,QAAQ,EAAC,QAAQ,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,IACvD,8DAAO,OAAO,EAAC,QAAQ,0CAA4C,EACnE,8DACE,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,KAAK,EACV,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAClC,IAAI,EAAC,kBAAkB,EACvB,WAAW,EAAC,mBAAmB,GAC/B,EACF,iEAAU,EAAE,EAAC,kBAAkB,IAC7B,+DAAQ,KAAK,EAAC,4BAA4B,yBAA4B,EACtE,+DAAQ,KAAK,EAAC,sBAAsB,mBAAsB,EAC1D,+DAAQ,KAAK,EAAC,qBAAqB,kBAAqB,EACxD,+DAAQ,KAAK,EAAC,oBAAoB,iBAAoB,EACtD,+DAAQ,KAAK,EAAC,0BAA0B,uBAA0B,EAClE,+DAAQ,KAAK,EAAC,oBAAoB,iBAAoB,EACtD,+DAAQ,KAAK,EAAC,gBAAgB,aAAgB,EAC9C,+DAAQ,KAAK,EAAC,4BAA4B,mBAAsB,EAChE,+DAAQ,KAAK,EAAC,0BAA0B,0BAA6B,EACrE,+DAAQ,KAAK,EAAC,qBAAqB,kBAAqB,CAC/C,EACX,8DAAO,EAAE,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,OAAO,EAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS,GAAI,CACtE,EACP;KACH;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;KAClC;IAED,MAAM,YAAY;QAChB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-login-form/pos-login-form.css?tag=pos-login-form&encapsulation=shadow","src/components/pos-login-form/pos-login-form.tsx"],"sourcesContent":[":host {\n display: block;\n margin: 0;\n}\n\nform {\n display: flex;\n flex-direction: column;\n gap: var(--size-4);\n}\n\ninput {\n outline: var(--pos-input-outline);\n padding: var(--scale-000);\n border: none;\n border-radius: var(--radius-xs);\n width: var(--size-full);\n box-sizing: border-box;\n background: var(--pos-input-background-color);\n color: var(--pos-normal-text-color);\n}\n\ninput:focus-within {\n outline: var(--pos-input-focus-outline);\n}\n\ninput#login {\n outline: none;\n box-shadow: var(--shadow-sm);\n cursor: pointer;\n color: var(--pos-primary-text-color);\n background-color: var(--pos-primary-color);\n}\n\ninput#login:disabled {\n cursor: default;\n color: var(--pos-disabled-text-color);\n background-color: var(--pos-disabled-color);\n box-shadow: none;\n}\n\ninput#login:hover:not(:disabled),\ninput#login:focus {\n filter: brightness(110%);\n box-shadow: var(--shadow-md);\n}\n","import { Component, Event, EventEmitter, h, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'pos-login-form',\n shadow: {\n delegatesFocus: true,\n },\n styleUrl: 'pos-login-form.css',\n})\nexport class PosLoginForm {\n @State() idpUrl: string = '';\n\n @State() canSubmit: boolean = false;\n\n /*\n Emits the selected IDP URL to use for login\n */\n @Event({ eventName: 'pod-os:idp-url-selected' }) idpUrlSelected: EventEmitter;\n\n @Watch('idpUrl')\n validate() {\n this.canSubmit = Boolean(this.idpUrl);\n }\n\n render(): any {\n return (\n <form method=\"dialog\" onSubmit={() => this.handleSubmit()}>\n <label htmlFor=\"idpUrl\">Please enter your Identity Provider</label>\n <input\n id=\"idpUrl\"\n type=\"url\"\n value={this.idpUrl}\n required={true}\n onInput={e => this.handleChange(e)}\n list=\"suggestedIssuers\"\n placeholder=\"Type to search...\"\n />\n <datalist id=\"suggestedIssuers\">\n <option value=\"https://solidcommunity.net\">solidcommunity.net</option>\n <option value=\"https://solidweb.org\">solidweb.org</option>\n <option value=\"https://solidweb.me\">solidweb.me</option>\n <option value=\"https://inrupt.net\">inrupt.net</option>\n <option value=\"https://login.inrupt.com\">Inrupt PodSpaces</option>\n <option value=\"https://trinpod.us\">trinpod.us</option>\n <option value=\"https://use.id\">use.id</option>\n <option value=\"https://solid.redpencil.io\">redpencil.io</option>\n <option value=\"https://datapod.grant.io\">Data Pod (grant.io)</option>\n <option value=\"https://teamid.live\">teamid.live</option>\n </datalist>\n <input id=\"login\" type=\"submit\" value=\"Login\" disabled={!this.canSubmit} />\n </form>\n );\n }\n\n handleChange(event) {\n this.validate();\n this.idpUrl = event.target.value;\n }\n\n async handleSubmit() {\n this.idpUrlSelected.emit(this.idpUrl);\n }\n}\n"],"version":3}

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

@@ -1,11 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { s as store } from './session.js';
-import { d as defineCustomElement$d } from './card.js';
-import { d as defineCustomElement$c } from './card-content.js';
-import { d as defineCustomElement$b } from './card-header.js';
-import { d as defineCustomElement$a } from './icon.js';
-import { d as defineCustomElement$9 } from './progress-bar.js';
-import { d as defineCustomElement$8 } from './ripple-effect.js';
+import { d as defineCustomElement$9 } from './icon.js';
+import { d as defineCustomElement$8 } from './progress-bar.js';
 import { d as defineCustomElement$7 } from './skeleton-text.js';
 import { d as defineCustomElement$6 } from './pos-dialog2.js';
 import { d as defineCustomElement$5 } from './pos-image2.js';
@@ -41,7 +37,7 @@ const PosLogin = /*@__PURE__*/ proxyCustomElement(class PosLogin extends HTMLEle
         this.dialog.showModal();
     }
     render() {
-        return (h(Host, { key: '246bea632b952b0a004e1237697a86bd0ebfeea4' }, h("div", { key: 'cdcb1905deb0d27f79adc4ed1eeae0adb47b37f6', 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: 'dc3a1072af920e9495a2e003c1e2edf8d282de29', id: "login", onClick: () => this.openDialog() }, "Login")), store.state.isLoggedIn && (h("button", { key: 'ca04ffb1126cd26d1c80060673c036048b403c82', id: "logout", onClick: () => this.logout() }, "Logout"))), h("pos-dialog", { key: 'f832ac8272a695e1bcf826d5aa5d62843bfb4de5', ref: el => (this.dialog = el) }, h("span", { key: 'd2dd84554a068af4a044cba963aa4417b8232d93', slot: "title" }, "Sign in to your Pod"), h("pos-login-form", { key: '98b542c2ddc6828fe99857632ee90a0dae6fdf96', "onPod-os:idp-url-selected": ev => this.login(ev), slot: "content" }))));
+        return (h(Host, { key: '6349e0939fb22cddc9a6e47d424ce2badd518dcd' }, h("div", { key: '940d720ae5a7b951fe4a1bf411e463add43d93d0', 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: '40aeea2f9686c9792c3952f8b899f9e819895bae', id: "login", onClick: () => this.openDialog() }, "Login")), store.state.isLoggedIn && (h("button", { key: 'dd8129f4ae6b590231c33d072f4094b7bfc99da5', id: "logout", onClick: () => this.logout() }, "Logout"))), h("pos-dialog", { key: '33278d394f830f5c6040c3c22dc720440dd9d75c', ref: el => (this.dialog = el) }, h("span", { key: '96d3c645cacb1b38bd9adca8562ae4068eeabe11', slot: "title" }, "Sign in to your Pod"), h("pos-login-form", { key: '0c296b68774e4e2c1ed6091c305348b36e80178f', "onPod-os:idp-url-selected": ev => this.login(ev), slot: "content" }))));
     }
     static get style() { return PosLoginStyle0; }
 }, [1, "pos-login", {
@@ -51,39 +47,19 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-login", "ion-card", "ion-card-content", "ion-card-header", "ion-icon", "ion-progress-bar", "ion-ripple-effect", "ion-skeleton-text", "pos-dialog", "pos-image", "pos-label", "pos-login-form", "pos-picture", "pos-resource"];
+    const components = ["pos-login", "ion-icon", "ion-progress-bar", "ion-skeleton-text", "pos-dialog", "pos-image", "pos-label", "pos-login-form", "pos-picture", "pos-resource"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-login":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosLogin);
             }
             break;
-        case "ion-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$d();
-            }
-            break;
-        case "ion-card-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$c();
-            }
-            break;
-        case "ion-card-header":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
         case "ion-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "ion-progress-bar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "ion-ripple-effect":
+        case "ion-progress-bar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }

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

	@@ -1 +1 @@
1	- {"file":"pos-login2.js","mappings":"~~;;;;;;;;;;;;;;;;~~AAAA,MAAM,WAAW,GAAG,2wBAA2wB,CAAC;AAChyB,uBAAe,WAAW;;MCSb,QAAQ;IALrB;;;;;QAcE,UAAK,GAAG,OAAO,EAAS;YACtB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC;KAiDH;IAvDC,iBAAiB;QACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3C;IAMD,KAAK,CAAC,KAA0B;QAC9B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KACvB;IAED,MAAM;QACJ,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;KAClB;IAID,UAAU;QACR,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;KACzB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,WAAW,IACnBA,KAAO,CAAC,KAAK,CAAC,UAAU,IACvB,oBAAc,GAAG,EAAEA,KAAO,CAAC,KAAK,CAAC,KAAK,IACpC,YAAM,KAAK,EAAC,WAAW,IACrB,sBAAe,EACf,oBAAa,CACR,CACM,KAEf,EAAE,CACH,EACA,CAACA,KAAO,CAAC,KAAK,CAAC,UAAU,KACxB,+DAAQ,EAAE,EAAC,OAAO,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,YAE1C,CACV,EACAA,KAAO,CAAC,KAAK,CAAC,UAAU,KACvB,+DAAQ,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,aAEvC,CACV,CACG,EACN,mEAAY,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,MAAM,GAAG,EAA0B,CAAC,IAC/D,6DAAM,IAAI,EAAC,OAAO,0BAA2B,EAC7C,oGAA2C,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,IAAI,EAAC,SAAS,GAAG,CACvE,CACR,EACP;KACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["session"],"sources":["src/components/pos-login/pos-login.css?tag=pos-login&encapsulation=shadow","src/components/pos-login/pos-login.tsx"],"sourcesContent":[".container {\n display: flex;\n align-items: center;\n gap: var(--size-2);\n}\n.user-data {\n align-items: center;\n display: inline-flex;\n gap: 10px;\n}\n.user-data pos-picture {\n --width: 40px;\n --height: 40px;\n --border-radius: 50%;\n}\n\npos-login-form {\n margin: var(--size-2);\n}\n\ndialog {\n margin-top: var(--size-10);\n}\n\nbutton#login,\nbutton#logout {\n outline: none;\n font-weight: var(--weight-bold);\n letter-spacing: var(--letter-xl);\n border: none;\n box-sizing: border-box;\n border-radius: var(--radius-xs);\n padding: var(--size-2);\n box-shadow: var(--shadow-sm);\n color: var(--pos-primary-text-color);\n background-color: var(--pos-primary-color);\n}\n\nbutton#login:focus-within,\nbutton#logout:focus-within {\n outline: var(--pos-input-focus-outline);\n}\n\nbutton#login:focus,\nbutton#login:hover,\nbutton#logout:focus,\nbutton#logout:hover {\n filter: brightness(110%);\n box-shadow: var(--shadow-md);\n}\n","import { PodOS } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Host, State } from '@stencil/core';\n\nimport session from '../../store/session';\n\n@Component({\n tag: 'pos-login',\n shadow: true,\n styleUrl: 'pos-login.css',\n})\nexport class PosLogin {\n @Event({ eventName: 'pod-os:init' }) initializeOsEmitter: EventEmitter;\n\n @State() os: PodOS;\n\n componentWillLoad() {\n this.initializeOsEmitter.emit(this.setOs);\n }\n\n setOs = async (os: PodOS) => {\n this.os = os;\n };\n\n login(event: CustomEvent<string>) {\n const idpUrl = event.detail;\n this.os.login(idpUrl);\n }\n\n logout() {\n this.os.logout();\n }\n\n private dialog: HTMLPosDialogElement;\n\n openDialog() {\n this.dialog.showModal();\n }\n\n render() {\n return (\n <Host>\n <div class=\"container\">\n {session.state.isLoggedIn ? (\n <pos-resource uri={session.state.webId}>\n <span class=\"user-data\">\n <pos-picture />\n <pos-label />\n </span>\n </pos-resource>\n ) : (\n ''\n )}\n {!session.state.isLoggedIn && (\n <button id=\"login\" onClick={() => this.openDialog()}>\n Login\n </button>\n )}\n {session.state.isLoggedIn && (\n <button id=\"logout\" onClick={() => this.logout()}>\n Logout\n </button>\n )}\n </div>\n <pos-dialog ref={el => (this.dialog = el as HTMLPosDialogElement)}>\n <span slot=\"title\">Sign in to your Pod</span>\n <pos-login-form onPod-os:idp-url-selected={ev => this.login(ev)} slot=\"content\" />\n </pos-dialog>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pos-login2.js","mappings":";;;;;;;;;;;;AAAA,MAAM,WAAW,GAAG,2wBAA2wB,CAAC;AAChyB,uBAAe,WAAW;;MCSb,QAAQ;IALrB;;;;;QAcE,UAAK,GAAG,OAAO,EAAS;YACtB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC;KAiDH;IAvDC,iBAAiB;QACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3C;IAMD,KAAK,CAAC,KAA0B;QAC9B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KACvB;IAED,MAAM;QACJ,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;KAClB;IAID,UAAU;QACR,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;KACzB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,WAAW,IACnBA,KAAO,CAAC,KAAK,CAAC,UAAU,IACvB,oBAAc,GAAG,EAAEA,KAAO,CAAC,KAAK,CAAC,KAAK,IACpC,YAAM,KAAK,EAAC,WAAW,IACrB,sBAAe,EACf,oBAAa,CACR,CACM,KAEf,EAAE,CACH,EACA,CAACA,KAAO,CAAC,KAAK,CAAC,UAAU,KACxB,+DAAQ,EAAE,EAAC,OAAO,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,YAE1C,CACV,EACAA,KAAO,CAAC,KAAK,CAAC,UAAU,KACvB,+DAAQ,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,aAEvC,CACV,CACG,EACN,mEAAY,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,MAAM,GAAG,EAA0B,CAAC,IAC/D,6DAAM,IAAI,EAAC,OAAO,0BAA2B,EAC7C,oGAA2C,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,IAAI,EAAC,SAAS,GAAG,CACvE,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["session"],"sources":["src/components/pos-login/pos-login.css?tag=pos-login&encapsulation=shadow","src/components/pos-login/pos-login.tsx"],"sourcesContent":[".container {\n display: flex;\n align-items: center;\n gap: var(--size-2);\n}\n.user-data {\n align-items: center;\n display: inline-flex;\n gap: 10px;\n}\n.user-data pos-picture {\n --width: 40px;\n --height: 40px;\n --border-radius: 50%;\n}\n\npos-login-form {\n margin: var(--size-2);\n}\n\ndialog {\n margin-top: var(--size-10);\n}\n\nbutton#login,\nbutton#logout {\n outline: none;\n font-weight: var(--weight-bold);\n letter-spacing: var(--letter-xl);\n border: none;\n box-sizing: border-box;\n border-radius: var(--radius-xs);\n padding: var(--size-2);\n box-shadow: var(--shadow-sm);\n color: var(--pos-primary-text-color);\n background-color: var(--pos-primary-color);\n}\n\nbutton#login:focus-within,\nbutton#logout:focus-within {\n outline: var(--pos-input-focus-outline);\n}\n\nbutton#login:focus,\nbutton#login:hover,\nbutton#logout:focus,\nbutton#logout:hover {\n filter: brightness(110%);\n box-shadow: var(--shadow-md);\n}\n","import { PodOS } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Host, State } from '@stencil/core';\n\nimport session from '../../store/session';\n\n@Component({\n tag: 'pos-login',\n shadow: true,\n styleUrl: 'pos-login.css',\n})\nexport class PosLogin {\n @Event({ eventName: 'pod-os:init' }) initializeOsEmitter: EventEmitter;\n\n @State() os: PodOS;\n\n componentWillLoad() {\n this.initializeOsEmitter.emit(this.setOs);\n }\n\n setOs = async (os: PodOS) => {\n this.os = os;\n };\n\n login(event: CustomEvent<string>) {\n const idpUrl = event.detail;\n this.os.login(idpUrl);\n }\n\n logout() {\n this.os.logout();\n }\n\n private dialog: HTMLPosDialogElement;\n\n openDialog() {\n this.dialog.showModal();\n }\n\n render() {\n return (\n <Host>\n <div class=\"container\">\n {session.state.isLoggedIn ? (\n <pos-resource uri={session.state.webId}>\n <span class=\"user-data\">\n <pos-picture />\n <pos-label />\n </span>\n </pos-resource>\n ) : (\n ''\n )}\n {!session.state.isLoggedIn && (\n <button id=\"login\" onClick={() => this.openDialog()}>\n Login\n </button>\n )}\n {session.state.isLoggedIn && (\n <button id=\"logout\" onClick={() => this.logout()}>\n Logout\n </button>\n )}\n </div>\n <pos-dialog ref={el => (this.dialog = el as HTMLPosDialogElement)}>\n <span slot=\"title\">Sign in to your Pod</span>\n <pos-login-form onPod-os:idp-url-selected={ev => this.login(ev)} slot=\"content\" />\n </pos-dialog>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/pos-make-findable2.js CHANGED Viewed

@@ -2,15 +2,11 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { L as LabelIndex } from './index10.js';
 import { s as subscribePodOs } from './PodOsAware.js';
 import { s as store } from './session.js';
-import { d as defineCustomElement$7 } from './card.js';
-import { d as defineCustomElement$6 } from './card-content.js';
-import { d as defineCustomElement$5 } from './card-header.js';
-import { d as defineCustomElement$4 } from './progress-bar.js';
-import { d as defineCustomElement$3 } from './ripple-effect.js';
+import { d as defineCustomElement$3 } from './progress-bar.js';
 import { d as defineCustomElement$2 } from './pos-label2.js';
 import { d as defineCustomElement$1 } from './pos-resource2.js';
-const posMakeFindableCss = "button.main {\n  display: flex;\n  transition:\n    width 200ms,\n    background-color 500ms,\n    color 500ms,\n    border-color 500ms;\n  max-width: var(--size-40);\n  flex-direction: row;\n  overflow: hidden;\n  height: var(--size-8);\n  width: var(--size-8);\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-xs);\n  color: var(--color-grey-500);\n  border: var(--size-px) dashed var(--color-grey-500);\n  background: none;\n\n  p {\n    padding: 0;\n    margin: 0;\n    display: none;\n    white-space: nowrap;\n  }\n\n  &.success {\n    color: var(--color-green-700);\n    border-color: var(--color-green-700);\n    border-style: solid;\n    background-color: var(--color-green-100);\n  }\n\n  &:active {\n    transform: scale(0.99);\n    filter: brightness(90%);\n  }\n}\n\n.options {\n  position: absolute;\n  animation: fadeIn 300ms;\n  padding: 0;\n  margin-top: var(--size-1);\n  z-index: var(--layer-top);\n\n  ol {\n    display: flex;\n    flex-direction: column;\n    box-shadow: var(--shadow-md);\n    backdrop-filter: var(--blur-md);\n    border-radius: var(--radius-xs);\n    overflow: hidden;\n    background-color: var(--color-grey-200);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    label {\n      display: flex;\n      justify-content: flex-start;\n      align-items: center;\n      transition: all 300ms var(--ease-in-out-sine);\n      margin: 0;\n      border: none;\n      outline: none;\n      padding: var(--size-2);\n      width: var(--size-full);\n\n      &:hover,\n      &:focus {\n        filter: brightness(80%);\n      }\n\n      &:active {\n        filter: brightness(90%);\n      }\n    }\n  }\n  label:has(input:checked) {\n    background-color: var(--color-green-100);\n  }\n}\n\nsvg {\n  display: inline-block;\n  height: var(--size-6);\n  flex-shrink: 0;\n  flex-grow: 0;\n  width: var(--size-6);\n}\n\nbutton.main:hover,\nbutton.open {\n  &.success {\n    background: var(--color-green-200);\n  }\n  width: var(--size-full);\n  height: var(--size-8);\n  background: var(--color-grey-200);\n  color: var(--color-grey-700);\n\n  p {\n    display: inline-block;\n  }\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n";
+const posMakeFindableCss = "button.main {\n  display: flex;\n  transition:\n    width 200ms,\n    background-color 500ms,\n    color 500ms,\n    border-color 500ms;\n  max-width: var(--size-40);\n  flex-direction: row;\n  overflow: hidden;\n  height: var(--size-8);\n  width: var(--size-8);\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-xs);\n  color: var(--pos-subtle-text-color);\n  border: var(--size-px) dashed var(--pos-subtle-text-color);\n  background-color: var(--pos-background-color);\n\n  p {\n    padding: 0;\n    margin: 0;\n    display: none;\n    white-space: nowrap;\n  }\n\n  &.success {\n    color: var(--color-green-700);\n    border-color: var(--color-green-700);\n    border-style: solid;\n    background-color: var(--color-green-100);\n  }\n\n  &:active {\n    transform: scale(0.99);\n    filter: brightness(90%);\n  }\n}\n\n.options {\n  position: absolute;\n  animation: fadeIn 300ms;\n  padding: 0;\n  margin-top: var(--size-1);\n  z-index: var(--layer-top);\n\n  ol {\n    display: flex;\n    flex-direction: column;\n    box-shadow: var(--shadow-md);\n    backdrop-filter: var(--blur-md);\n    border-radius: var(--radius-xs);\n    overflow: hidden;\n    color: var(--color-grey-900);\n    background-color: var(--color-grey-200);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    label {\n      display: flex;\n      justify-content: flex-start;\n      align-items: center;\n      transition: all 300ms var(--ease-in-out-sine);\n      margin: 0;\n      border: none;\n      outline: none;\n      padding: var(--size-2);\n      width: var(--size-full);\n\n      &:hover,\n      &:focus {\n        filter: brightness(80%);\n      }\n\n      &:active {\n        filter: brightness(90%);\n      }\n    }\n  }\n  label:has(input:checked) {\n    background-color: var(--color-green-100);\n  }\n}\n\nsvg {\n  display: inline-block;\n  height: var(--size-6);\n  flex-shrink: 0;\n  flex-grow: 0;\n  width: var(--size-6);\n}\n\nbutton.main:hover,\nbutton.open {\n  &.success {\n    background: var(--color-green-200);\n  }\n  width: var(--size-full);\n  height: var(--size-8);\n  background: var(--pos-background-color);\n  color: var(--pos-normal-text-color);\n\n  p {\n    display: inline-block;\n  }\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n";
 const PosMakeFindableStyle0 = posMakeFindableCss;
 const PosMakeFindable = /*@__PURE__*/ proxyCustomElement(class PosMakeFindable extends HTMLElement {
@@ -131,34 +127,14 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-make-findable", "ion-card", "ion-card-content", "ion-card-header", "ion-progress-bar", "ion-ripple-effect", "pos-label", "pos-resource"];
+    const components = ["pos-make-findable", "ion-progress-bar", "pos-label", "pos-resource"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-make-findable":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosMakeFindable);
             }
             break;
-        case "ion-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "ion-card-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "ion-card-header":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
         case "ion-progress-bar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }

package/dist/components/pos-make-findable2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pos-make-findable2.js","mappings":"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","names":["session"],"sources":["src/components/pos-make-findable/pos-make-findable.css?tag=pos-make-findable","src/components/pos-make-findable/pos-make-findable.tsx"],"sourcesContent":["button.main {\n display: flex;\n transition:\n width 200ms,\n background-color 500ms,\n color 500ms,\n border-color 500ms;\n max-width: var(--size-40);\n flex-direction: row;\n overflow: hidden;\n height: var(--size-8);\n width: var(--size-8);\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-xs);\n color: var(--color-grey-500);\n border: var(--size-px) dashed var(--color-grey-500);\n background: none;\n\n p {\n padding: 0;\n margin: 0;\n display: none;\n white-space: nowrap;\n }\n\n &.success {\n color: var(--color-green-700);\n border-color: var(--color-green-700);\n border-style: solid;\n background-color: var(--color-green-100);\n }\n\n &:active {\n transform: scale(0.99);\n filter: brightness(90%);\n }\n}\n\n.options {\n position: absolute;\n animation: fadeIn 300ms;\n padding: 0;\n margin-top: var(--size-1);\n z-index: var(--layer-top);\n\n ol {\n display: flex;\n flex-direction: column;\n box-shadow: var(--shadow-md);\n backdrop-filter: var(--blur-md);\n border-radius: var(--radius-xs);\n overflow: hidden;\n background-color: var(--color-grey-200);\n padding: 0;\n margin: 0;\n list-style: none;\n label {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n transition: all 300ms var(--ease-in-out-sine);\n margin: 0;\n border: none;\n outline: none;\n padding: var(--size-2);\n width: var(--size-full);\n\n &:hover,\n &:focus {\n filter: brightness(80%);\n }\n\n &:active {\n filter: brightness(90%);\n }\n }\n }\n label:has(input:checked) {\n background-color: var(--color-green-100);\n }\n}\n\nsvg {\n display: inline-block;\n height: var(--size-6);\n flex-shrink: 0;\n flex-grow: 0;\n width: var(--size-6);\n}\n\nbutton.main:hover,\nbutton.open {\n &.success {\n background: var(--color-green-200);\n }\n width: var(--size-full);\n height: var(--size-8);\n background: var(--color-grey-200);\n color: var(--color-grey-700);\n\n p {\n display: inline-block;\n }\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\nimport { LabelIndex, PodOS, Thing, WebIdProfile } from '@pod-os/core';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\nimport session from '../../store/session';\n\n@Component({\n tag: 'pos-make-findable',\n styleUrl: 'pos-make-findable.css',\n})\nexport class PosMakeFindable implements PodOsAware {\n @Prop() uri!: string;\n\n @State() os: PodOS;\n @State() thing: Thing;\n @State() indexes: LabelIndex[] = [];\n\n @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n @State() unsubscribeSessionChange: undefined \| (() => void);\n\n @State() showOptions = false;\n @State() isIndexed = false;\n\n @Event({ eventName: 'pod-os:error' }) errorEmitter: EventEmitter;\n @Event({ eventName: 'pod-os:search:index-updated' }) indexUpdatedEmitter: EventEmitter;\n @Event({ eventName: 'pod-os:search:index-created' }) indexCreatedEmitter: EventEmitter;\n\n @Element() el: HTMLElement;\n\n componentWillLoad() {\n subscribePodOs(this);\n }\n\n disconnectedCallback() {\n this.unsubscribeSessionChange && this.unsubscribeSessionChange();\n }\n\n @Listen('click', { target: 'document' })\n hideOptions(event: MouseEvent) {\n // @ts-ignore\n if (!this.el.contains(event.target)) {\n this.showOptions = false;\n }\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Escape') {\n this.showOptions = false;\n }\n }\n\n @Watch('uri')\n updateUri(uri: string) {\n this.thing = this.os.store.get(uri);\n this.isIndexed = this.checkIfIndexed(uri);\n }\n\n private checkIfIndexed(uri: string) {\n return this.indexes.some(it => it.contains(uri));\n }\n\n receivePodOs = async (os: PodOS) => {\n this.os = os;\n this.thing = this.os.store.get(this.uri);\n this.getLabelIndexes(session.state.profile);\n this.unsubscribeSessionChange = session.onChange('profile', profile => {\n this.getLabelIndexes(profile);\n });\n };\n\n private getLabelIndexes(profile: WebIdProfile) {\n if (profile) {\n this.indexes = profile.getPrivateLabelIndexes().map(it => this.os.store.get(it).assume(LabelIndex));\n this.isIndexed = this.checkIfIndexed(this.uri);\n }\n }\n\n private async onClick(e: MouseEvent) {\n e.preventDefault();\n if (this.indexes.length === 1) {\n const index = this.indexes[0];\n await this.addToLabelIndex(index);\n this.indexUpdatedEmitter.emit(index);\n } else if (this.indexes.length > 1) {\n this.showOptions = !this.showOptions;\n } else {\n const index = await this.createDefaultLabelIndex();\n await this.addToLabelIndex(index);\n this.indexCreatedEmitter.emit(index);\n }\n }\n\n private async addToLabelIndex(index: LabelIndex) {\n try {\n await this.os.addToLabelIndex(this.thing, index);\n this.isIndexed = true;\n } catch (e) {\n this.errorEmitter.emit(e);\n }\n\n this.showOptions = false;\n }\n\n private async createDefaultLabelIndex(): Promise<LabelIndex> {\n try {\n return await this.os.createDefaultLabelIndex(session.state.profile);\n } catch (e) {\n this.errorEmitter.emit(e);\n }\n }\n\n render() {\n if (!session.state.isLoggedIn \|\| !this.uri) {\n return null;\n }\n\n const label = 'Make this findable';\n return (\n <Host>\n <button\n type=\"button\"\n aria-label={label}\n class={{ main: true, open: this.showOptions, success: this.isIndexed }}\n onClick={e => this.onClick(e)}\n title=\"\"\n >\n {this.isIndexed ? <IconSuccess /> : <IconMakeFindable />}\n <p>{label}</p>\n </button>\n {this.showOptions && (\n <div class=\"options\">\n <ol role=\"listbox\">\n {this.indexes.map((index: LabelIndex) => (\n <li role=\"option\">\n <label>\n <input\n type=\"checkbox\"\n checked={index.contains(this.uri)}\n onChange={e => this.chooseOption(e, index)}\n />\n <pos-resource uri={index.uri} lazy={true}>\n <pos-label></pos-label>\n </pos-resource>\n </label>\n </li>\n ))}\n </ol>\n </div>\n )}\n </Host>\n );\n }\n\n private async chooseOption(e: Event, index: LabelIndex) {\n e.preventDefault();\n await this.addToLabelIndex(index);\n this.indexUpdatedEmitter.emit(index);\n }\n}\n\nconst IconMakeFindable = () => (\n <svg\n role=\"presentation\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n >\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n d=\"M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Zm3.75 11.625a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z\"\n />\n </svg>\n);\n\nconst IconSuccess = () => (\n <svg\n role=\"presentation\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n >\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n d=\"M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 0 1 9 9v.375M10.125 2.25A3.375 3.375 0 0 1 13.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 0 1 3.375 3.375M9 15l2.25 2.25L15 12\"\n />\n </svg>\n);\n"],"version":3}
1	+ {"file":"pos-make-findable2.js","mappings":"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","names":["session"],"sources":["src/components/pos-make-findable/pos-make-findable.css?tag=pos-make-findable","src/components/pos-make-findable/pos-make-findable.tsx"],"sourcesContent":["button.main {\n display: flex;\n transition:\n width 200ms,\n background-color 500ms,\n color 500ms,\n border-color 500ms;\n max-width: var(--size-40);\n flex-direction: row;\n overflow: hidden;\n height: var(--size-8);\n width: var(--size-8);\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-xs);\n color: var(--pos-subtle-text-color);\n border: var(--size-px) dashed var(--pos-subtle-text-color);\n background-color: var(--pos-background-color);\n\n p {\n padding: 0;\n margin: 0;\n display: none;\n white-space: nowrap;\n }\n\n &.success {\n color: var(--color-green-700);\n border-color: var(--color-green-700);\n border-style: solid;\n background-color: var(--color-green-100);\n }\n\n &:active {\n transform: scale(0.99);\n filter: brightness(90%);\n }\n}\n\n.options {\n position: absolute;\n animation: fadeIn 300ms;\n padding: 0;\n margin-top: var(--size-1);\n z-index: var(--layer-top);\n\n ol {\n display: flex;\n flex-direction: column;\n box-shadow: var(--shadow-md);\n backdrop-filter: var(--blur-md);\n border-radius: var(--radius-xs);\n overflow: hidden;\n color: var(--color-grey-900);\n background-color: var(--color-grey-200);\n padding: 0;\n margin: 0;\n list-style: none;\n label {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n transition: all 300ms var(--ease-in-out-sine);\n margin: 0;\n border: none;\n outline: none;\n padding: var(--size-2);\n width: var(--size-full);\n\n &:hover,\n &:focus {\n filter: brightness(80%);\n }\n\n &:active {\n filter: brightness(90%);\n }\n }\n }\n label:has(input:checked) {\n background-color: var(--color-green-100);\n }\n}\n\nsvg {\n display: inline-block;\n height: var(--size-6);\n flex-shrink: 0;\n flex-grow: 0;\n width: var(--size-6);\n}\n\nbutton.main:hover,\nbutton.open {\n &.success {\n background: var(--color-green-200);\n }\n width: var(--size-full);\n height: var(--size-8);\n background: var(--pos-background-color);\n color: var(--pos-normal-text-color);\n\n p {\n display: inline-block;\n }\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\nimport { LabelIndex, PodOS, Thing, WebIdProfile } from '@pod-os/core';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\nimport session from '../../store/session';\n\n@Component({\n tag: 'pos-make-findable',\n styleUrl: 'pos-make-findable.css',\n})\nexport class PosMakeFindable implements PodOsAware {\n @Prop() uri!: string;\n\n @State() os: PodOS;\n @State() thing: Thing;\n @State() indexes: LabelIndex[] = [];\n\n @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n @State() unsubscribeSessionChange: undefined \| (() => void);\n\n @State() showOptions = false;\n @State() isIndexed = false;\n\n @Event({ eventName: 'pod-os:error' }) errorEmitter: EventEmitter;\n @Event({ eventName: 'pod-os:search:index-updated' }) indexUpdatedEmitter: EventEmitter;\n @Event({ eventName: 'pod-os:search:index-created' }) indexCreatedEmitter: EventEmitter;\n\n @Element() el: HTMLElement;\n\n componentWillLoad() {\n subscribePodOs(this);\n }\n\n disconnectedCallback() {\n this.unsubscribeSessionChange && this.unsubscribeSessionChange();\n }\n\n @Listen('click', { target: 'document' })\n hideOptions(event: MouseEvent) {\n // @ts-ignore\n if (!this.el.contains(event.target)) {\n this.showOptions = false;\n }\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Escape') {\n this.showOptions = false;\n }\n }\n\n @Watch('uri')\n updateUri(uri: string) {\n this.thing = this.os.store.get(uri);\n this.isIndexed = this.checkIfIndexed(uri);\n }\n\n private checkIfIndexed(uri: string) {\n return this.indexes.some(it => it.contains(uri));\n }\n\n receivePodOs = async (os: PodOS) => {\n this.os = os;\n this.thing = this.os.store.get(this.uri);\n this.getLabelIndexes(session.state.profile);\n this.unsubscribeSessionChange = session.onChange('profile', profile => {\n this.getLabelIndexes(profile);\n });\n };\n\n private getLabelIndexes(profile: WebIdProfile) {\n if (profile) {\n this.indexes = profile.getPrivateLabelIndexes().map(it => this.os.store.get(it).assume(LabelIndex));\n this.isIndexed = this.checkIfIndexed(this.uri);\n }\n }\n\n private async onClick(e: MouseEvent) {\n e.preventDefault();\n if (this.indexes.length === 1) {\n const index = this.indexes[0];\n await this.addToLabelIndex(index);\n this.indexUpdatedEmitter.emit(index);\n } else if (this.indexes.length > 1) {\n this.showOptions = !this.showOptions;\n } else {\n const index = await this.createDefaultLabelIndex();\n await this.addToLabelIndex(index);\n this.indexCreatedEmitter.emit(index);\n }\n }\n\n private async addToLabelIndex(index: LabelIndex) {\n try {\n await this.os.addToLabelIndex(this.thing, index);\n this.isIndexed = true;\n } catch (e) {\n this.errorEmitter.emit(e);\n }\n\n this.showOptions = false;\n }\n\n private async createDefaultLabelIndex(): Promise<LabelIndex> {\n try {\n return await this.os.createDefaultLabelIndex(session.state.profile);\n } catch (e) {\n this.errorEmitter.emit(e);\n }\n }\n\n render() {\n if (!session.state.isLoggedIn \|\| !this.uri) {\n return null;\n }\n\n const label = 'Make this findable';\n return (\n <Host>\n <button\n type=\"button\"\n aria-label={label}\n class={{ main: true, open: this.showOptions, success: this.isIndexed }}\n onClick={e => this.onClick(e)}\n title=\"\"\n >\n {this.isIndexed ? <IconSuccess /> : <IconMakeFindable />}\n <p>{label}</p>\n </button>\n {this.showOptions && (\n <div class=\"options\">\n <ol role=\"listbox\">\n {this.indexes.map((index: LabelIndex) => (\n <li role=\"option\">\n <label>\n <input\n type=\"checkbox\"\n checked={index.contains(this.uri)}\n onChange={e => this.chooseOption(e, index)}\n />\n <pos-resource uri={index.uri} lazy={true}>\n <pos-label></pos-label>\n </pos-resource>\n </label>\n </li>\n ))}\n </ol>\n </div>\n )}\n </Host>\n );\n }\n\n private async chooseOption(e: Event, index: LabelIndex) {\n e.preventDefault();\n await this.addToLabelIndex(index);\n this.indexUpdatedEmitter.emit(index);\n }\n}\n\nconst IconMakeFindable = () => (\n <svg\n role=\"presentation\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n >\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n d=\"M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Zm3.75 11.625a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z\"\n />\n </svg>\n);\n\nconst IconSuccess = () => (\n <svg\n role=\"presentation\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n >\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n d=\"M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 0 1 9 9v.375M10.125 2.25A3.375 3.375 0 0 1 13.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 0 1 3.375 3.375M9 15l2.25 2.25L15 12\"\n />\n </svg>\n);\n"],"version":3}

package/dist/components/pos-navigation-bar2.js CHANGED Viewed

@@ -1,12 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as store } from './session.js';
 import { s as subscribePodOs } from './PodOsAware.js';
-import { d as defineCustomElement$c } from './card.js';
-import { d as defineCustomElement$b } from './card-content.js';
-import { d as defineCustomElement$a } from './card-header.js';
-import { d as defineCustomElement$9 } from './icon.js';
-import { d as defineCustomElement$8 } from './progress-bar.js';
-import { d as defineCustomElement$7 } from './ripple-effect.js';
+import { d as defineCustomElement$8 } from './icon.js';
+import { d as defineCustomElement$7 } from './progress-bar.js';
 import { d as defineCustomElement$6 } from './searchbar.js';
 import { d as defineCustomElement$5 } from './pos-description2.js';
 import { d as defineCustomElement$4 } from './pos-label2.js';
@@ -14,7 +10,7 @@ import { d as defineCustomElement$3 } from './pos-make-findable2.js';
 import { d as defineCustomElement$2 } from './pos-resource2.js';
 import { d as defineCustomElement$1 } from './pos-rich-link2.js';
-const posNavigationBarCss = ":host {\n}\n\n.suggestions ol {\n  border: 1px solid var(--color-grey-200);\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  margin: 0;\n  padding: 0;\n  z-index: var(--layer-top);\n  list-style-type: none;\n  box-shadow: var(--shadow-xl);\n}\n\n.suggestions {\n  position: relative;\n  li {\n    padding: 1rem;\n    background-color: white;\n    pos-rich-link {\n      --background-color: inherit;\n    }\n    &.selected {\n      background-color: var(--color-blue);\n      &:hover {\n        background-color: var(--color-blue-700);\n      }\n    }\n    &:hover {\n      background-color: var(--color-grey-200);\n    }\n  }\n}\n\n.suggestions li.selected pos-rich-link {\n  --label-color: white;\n  --description-color: var(--color-grey-200);\n  --uri-color: var(--color-grey-200);\n}\n\nion-searchbar {\n  width: 100%;\n}\n\nform {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.bar {\n  flex-grow: 1;\n}\n";
+const posNavigationBarCss = ".suggestions ol {\n  border: 1px solid var(--pos-border-color);\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  margin: 0;\n  padding: 0;\n  z-index: var(--layer-top);\n  list-style-type: none;\n  box-shadow: var(--shadow-xl);\n}\n\n.suggestions {\n  position: relative;\n  li {\n    padding: 1rem;\n    background-color: var(--pos-background-color);\n    pos-rich-link {\n      --background-color: inherit;\n    }\n    &.selected {\n      background-color: var(--pos-primary-color);\n      &:hover {\n        background-color: var(--pos-primary-color);\n      }\n    }\n    &:hover {\n      background-color: var(--pos-border-color);\n    }\n  }\n}\n\n.suggestions li.selected pos-rich-link {\n  --label-color: white;\n  --description-color: var(--pos-border-color);\n  --uri-color: var(--pos-subtle-text-color);\n}\n\nion-searchbar {\n  width: 100%;\n}\n\nform {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.bar {\n  flex-grow: 1;\n}\n";
 const PosNavigationBarStyle0 = posNavigationBarCss;
 const PosNavigationBar = /*@__PURE__*/ proxyCustomElement(class PosNavigationBar extends HTMLElement {
@@ -93,7 +89,7 @@ const PosNavigationBar = /*@__PURE__*/ proxyCustomElement(class PosNavigationBar
         }
     }
     render() {
-        return (h("form", { key: 'dadf35124fd0908c3623ef2e358f1e751a0b7242', onSubmit: e => this.onSubmit(e) }, this.searchIndex && this.uri ? h("pos-make-findable", { uri: this.uri }) : '', h("div", { key: '64d85b0b51298e2d1b3d6ff32f36db3f80fa1796', class: "bar" }, h("ion-searchbar", { key: 'cd51737238ab42315ace5bebdcc0b4c561b02c38', 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: 'e92382c2024642ea5c0b5abb00f1759003f74c78', onSubmit: e => this.onSubmit(e) }, this.searchIndex && this.uri ? h("pos-make-findable", { uri: this.uri }) : '', h("div", { key: 'c32607860e8aa1fe6d6d182c0e2a056f40b6f1b7', class: "bar" }, h("ion-searchbar", { key: '6f281c307640200da6c57a0660e27901f55d375d', 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 style() { return PosNavigationBarStyle0; }
 }, [1, "pos-navigation-bar", {
@@ -108,39 +104,19 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-navigation-bar", "ion-card", "ion-card-content", "ion-card-header", "ion-icon", "ion-progress-bar", "ion-ripple-effect", "ion-searchbar", "pos-description", "pos-label", "pos-make-findable", "pos-resource", "pos-rich-link"];
+    const components = ["pos-navigation-bar", "ion-icon", "ion-progress-bar", "ion-searchbar", "pos-description", "pos-label", "pos-make-findable", "pos-resource", "pos-rich-link"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-navigation-bar":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosNavigationBar);
             }
             break;
-        case "ion-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$c();
-            }
-            break;
-        case "ion-card-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "ion-card-header":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
         case "ion-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "ion-progress-bar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "ion-ripple-effect":
+        case "ion-progress-bar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }

package/dist/components/pos-navigation-bar2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pos-navigation-bar2.js","mappings":"~~;;;;;;;;;;;;;;;;~~AAAA,MAAM,mBAAmB,GAAG~~,+7BAA+7B~~,CAAC;~~AAC59B~~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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["session"],"sources":["src/components/pos-navigation-bar/pos-navigation-bar.css?tag=pos-navigation-bar&encapsulation=shadow","src/components/pos-navigation-bar/pos-navigation-bar.tsx"],"sourcesContent":["~~:host {\n}\n\n~~.suggestions ol {\n border: 1px solid var(--~~color~~-~~grey~~-~~200~~);\n display: flex;\n flex-direction: column;\n position: absolute;\n margin: 0;\n padding: 0;\n z-index: var(--layer-top);\n list-style-type: none;\n box-shadow: var(--shadow-xl);\n}\n\n.suggestions {\n position: relative;\n li {\n padding: 1rem;\n background-color: ~~white~~;\n pos-rich-link {\n --background-color: inherit;\n }\n &.selected {\n background-color: var(--color~~-blue~~);\n &:hover {\n background-color: var(--~~color~~-~~blue~~-~~700~~);\n }\n }\n &:hover {\n background-color: var(--~~color~~-~~grey~~-~~200~~);\n }\n }\n}\n\n.suggestions li.selected pos-rich-link {\n --label-color: white;\n --description-color: var(--~~color~~-~~grey~~-~~200~~);\n --uri-color: var(--~~color~~-~~grey~~-~~200~~);\n}\n\nion-searchbar {\n width: 100%;\n}\n\nform {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n\n.bar {\n flex-grow: 1;\n}\n","import { PodOS, SearchIndex } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\n\nimport session from '../../store/session';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\n\n@Component({\n tag: 'pos-navigation-bar',\n shadow: true,\n styleUrl: 'pos-navigation-bar.css',\n})\nexport class PosNavigationBar implements PodOsAware {\n @State() os: PodOS;\n\n @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n @Prop() uri: string = '';\n\n @State() value: string = this.uri;\n\n @Event({ eventName: 'pod-os:link' }) linkEmitter: EventEmitter;\n\n @State() searchIndex?: SearchIndex = undefined;\n\n @State() suggestions = [];\n\n @State() selectedIndex = -1;\n\n componentWillLoad() {\n subscribePodOs(this);\n session.onChange('isLoggedIn', async isLoggedIn => {\n if (isLoggedIn) {\n await this.buildSearchIndex();\n } else {\n this.clearSearchIndex();\n }\n });\n }\n\n @Listen('pod-os:search:index-created')\n private async buildSearchIndex() {\n this.searchIndex = await this.os.buildSearchIndex(session.state.profile);\n }\n\n @Listen('pod-os:search:index-updated')\n rebuildSearchIndex() {\n this.searchIndex.rebuild();\n }\n\n private clearSearchIndex() {\n this.searchIndex?.clear();\n }\n\n receivePodOs = async (os: PodOS) => {\n this.os = os;\n };\n\n private onChange(event) {\n this.value = event.detail.value;\n this.search();\n }\n\n @Listen('click', { target: 'document' })\n @Listen('pod-os:link')\n clearSuggestions() {\n this.suggestions = [];\n this.selectedIndex = -1;\n }\n\n @Listen('click')\n onClickSelf(event) {\n event.stopPropagation();\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Escape') {\n this.clearSuggestions();\n } else if (ev.key === 'ArrowDown') {\n ev.preventDefault();\n this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n } else if (ev.key === 'ArrowUp') {\n ev.preventDefault();\n this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n }\n }\n\n private search() {\n if (this.searchIndex) {\n this.suggestions = this.value ? this.searchIndex.search(this.value) : [];\n }\n }\n\n private onSubmit(event) {\n event.preventDefault();\n if (this.suggestions && this.selectedIndex > -1) {\n this.linkEmitter.emit(this.suggestions[this.selectedIndex].ref);\n } else {\n this.linkEmitter.emit(this.value);\n }\n }\n\n render() {\n return (\n <form onSubmit={e => this.onSubmit(e)}>\n {this.searchIndex && this.uri ? <pos-make-findable uri={this.uri}></pos-make-findable> : ''}\n <div class=\"bar\">\n <ion-searchbar\n enterkeyhint=\"search\"\n placeholder=\"Search or enter URI\"\n value={this.uri}\n debounce={300}\n onIonChange={e => this.onChange(e)}\n onIonInput={e => this.onChange(e)}\n />\n {this.suggestions.length > 0 ? (\n <div class=\"suggestions\">\n <ol>\n {this.suggestions.map((it, index) => (\n <li class={index === this.selectedIndex ? 'selected' : ''}>\n <pos-rich-link uri={it.ref}></pos-rich-link>\n </li>\n ))}\n </ol>\n </div>\n ) : null}\n </div>\n </form>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pos-navigation-bar2.js","mappings":"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","names":["session"],"sources":["src/components/pos-navigation-bar/pos-navigation-bar.css?tag=pos-navigation-bar&encapsulation=shadow","src/components/pos-navigation-bar/pos-navigation-bar.tsx"],"sourcesContent":[".suggestions ol {\n border: 1px solid var(--pos-border-color);\n display: flex;\n flex-direction: column;\n position: absolute;\n margin: 0;\n padding: 0;\n z-index: var(--layer-top);\n list-style-type: none;\n box-shadow: var(--shadow-xl);\n}\n\n.suggestions {\n position: relative;\n li {\n padding: 1rem;\n background-color: var(--pos-background-color);\n pos-rich-link {\n --background-color: inherit;\n }\n &.selected {\n background-color: var(--pos-primary-color);\n &:hover {\n background-color: var(--pos-primary-color);\n }\n }\n &:hover {\n background-color: var(--pos-border-color);\n }\n }\n}\n\n.suggestions li.selected pos-rich-link {\n --label-color: white;\n --description-color: var(--pos-border-color);\n --uri-color: var(--pos-subtle-text-color);\n}\n\nion-searchbar {\n width: 100%;\n}\n\nform {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n\n.bar {\n flex-grow: 1;\n}\n","import { PodOS, SearchIndex } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\n\nimport session from '../../store/session';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\n\n@Component({\n tag: 'pos-navigation-bar',\n shadow: true,\n styleUrl: 'pos-navigation-bar.css',\n})\nexport class PosNavigationBar implements PodOsAware {\n @State() os: PodOS;\n\n @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n @Prop() uri: string = '';\n\n @State() value: string = this.uri;\n\n @Event({ eventName: 'pod-os:link' }) linkEmitter: EventEmitter;\n\n @State() searchIndex?: SearchIndex = undefined;\n\n @State() suggestions = [];\n\n @State() selectedIndex = -1;\n\n componentWillLoad() {\n subscribePodOs(this);\n session.onChange('isLoggedIn', async isLoggedIn => {\n if (isLoggedIn) {\n await this.buildSearchIndex();\n } else {\n this.clearSearchIndex();\n }\n });\n }\n\n @Listen('pod-os:search:index-created')\n private async buildSearchIndex() {\n this.searchIndex = await this.os.buildSearchIndex(session.state.profile);\n }\n\n @Listen('pod-os:search:index-updated')\n rebuildSearchIndex() {\n this.searchIndex.rebuild();\n }\n\n private clearSearchIndex() {\n this.searchIndex?.clear();\n }\n\n receivePodOs = async (os: PodOS) => {\n this.os = os;\n };\n\n private onChange(event) {\n this.value = event.detail.value;\n this.search();\n }\n\n @Listen('click', { target: 'document' })\n @Listen('pod-os:link')\n clearSuggestions() {\n this.suggestions = [];\n this.selectedIndex = -1;\n }\n\n @Listen('click')\n onClickSelf(event) {\n event.stopPropagation();\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Escape') {\n this.clearSuggestions();\n } else if (ev.key === 'ArrowDown') {\n ev.preventDefault();\n this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n } else if (ev.key === 'ArrowUp') {\n ev.preventDefault();\n this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n }\n }\n\n private search() {\n if (this.searchIndex) {\n this.suggestions = this.value ? this.searchIndex.search(this.value) : [];\n }\n }\n\n private onSubmit(event) {\n event.preventDefault();\n if (this.suggestions && this.selectedIndex > -1) {\n this.linkEmitter.emit(this.suggestions[this.selectedIndex].ref);\n } else {\n this.linkEmitter.emit(this.value);\n }\n }\n\n render() {\n return (\n <form onSubmit={e => this.onSubmit(e)}>\n {this.searchIndex && this.uri ? <pos-make-findable uri={this.uri}></pos-make-findable> : ''}\n <div class=\"bar\">\n <ion-searchbar\n enterkeyhint=\"search\"\n placeholder=\"Search or enter URI\"\n value={this.uri}\n debounce={300}\n onIonChange={e => this.onChange(e)}\n onIonInput={e => this.onChange(e)}\n />\n {this.suggestions.length > 0 ? (\n <div class=\"suggestions\">\n <ol>\n {this.suggestions.map((it, index) => (\n <li class={index === this.selectedIndex ? 'selected' : ''}>\n <pos-rich-link uri={it.ref}></pos-rich-link>\n </li>\n ))}\n </ol>\n </div>\n ) : null}\n </div>\n </form>\n );\n }\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { s as subscribePodOs } from './PodOsAware.js';
 import { d as defineCustomElement$1 } from './pos-select-term2.js';
-const posNewThingFormCss = ":host{display:block}form{display:grid;grid-template-columns:var(--size-16) 1fr;grid-gap:var(--scale-0)}label{grid-column:1 / 2;display:flex;align-items:center;justify-content:flex-end}input,pos-select-term,button{grid-column:2 / 3}input,pos-select-term::part(input){outline:var(--pos-input-outline);padding:var(--scale-000);border:none;border-radius:var(--radius-xs);width:var(--size-full);box-sizing:border-box}input:focus-within,pos-select-term::part(input):focus-within{outline:var(--pos-input-focus-outline)}#new-uri{grid-column:1/3;cursor:default;word-break:break-all;color:var(--color-grey-800);font-weight:var(--weight-light);background:var(--color-grey-100);padding:var(--scale-000);border-radius:var(--radius-xs)}input#create{outline:none;box-shadow:var(--shadow-sm);cursor:pointer;color:var(--pos-primary-text-color);background-color:var(--pos-primary-color)}input#create:disabled{cursor:default;color:var(--pos-disabled-text-color);background-color:var(--pos-disabled-color);box-shadow:none}input#create:hover:not(:disabled),input#create:focus{filter:brightness(110%);box-shadow:var(--shadow-md)}";
+const posNewThingFormCss = ":host{display:block}form{display:grid;grid-template-columns:var(--size-16) 1fr;grid-gap:var(--scale-0)}label{grid-column:1 / 2;display:flex;align-items:center;justify-content:flex-end}input,pos-select-term,button{grid-column:2 / 3}input,pos-select-term::part(input){outline:var(--pos-input-outline);padding:var(--scale-000);border:none;border-radius:var(--radius-xs);width:var(--size-full);box-sizing:border-box;background:var(--pos-input-background-color);color:var(--pos-normal-text-color)}input:focus-within,pos-select-term::part(input):focus-within{outline:var(--pos-input-focus-outline)}#new-uri{grid-column:1/3;cursor:default;word-break:break-all;color:var(--pos-normal-text-color);font-weight:var(--weight-light);background:var(--pos-disabled-color);padding:var(--scale-000);border-radius:var(--radius-xs)}input#create{outline:none;box-shadow:var(--shadow-sm);cursor:pointer;color:var(--pos-primary-text-color);background-color:var(--pos-primary-color)}input#create:disabled{cursor:default;color:var(--pos-disabled-text-color);background-color:var(--pos-disabled-color);box-shadow:none}input#create:hover:not(:disabled),input#create:focus{filter:brightness(110%);box-shadow:var(--shadow-md)}";
 const PosNewThingFormStyle0 = posNewThingFormCss;
 const PosNewThingForm = /*@__PURE__*/ proxyCustomElement(class PosNewThingForm extends HTMLElement {
@@ -25,7 +25,7 @@ const PosNewThingForm = /*@__PURE__*/ proxyCustomElement(class PosNewThingForm e
         subscribePodOs(this);
     }
     render() {
-        return (h("form", { key: 'd231729bb8d01ffa9e1f88d9488fa92041f33460', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: '739f893b508ffe8baa0b575594af48f6f690425c', htmlFor: "type" }, "Type"), h("pos-select-term", { key: '9973af04355cf8dec838a4217f711e4c8669dab4', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: '4fac8ecca95c2e16c98c35ae92ea9b7f6bd6a94a', htmlFor: "name" }, "Name"), h("input", { key: 'c922c03e656d194c3235fb374ef90fce205f7ee7', 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: 'fb39eb6c09e67315326f13e184aab93a4ed786c6', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
+        return (h("form", { key: '9ee9d0ab4f31bfc55865ef697d410b37977b1051', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: 'a6f807d2034d55e5218c01375c4ff36564924bfb', htmlFor: "type" }, "Type"), h("pos-select-term", { key: 'f6001d6801bee97c03121d57742a595c8d5d5bd7', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: '9365561d47d72e0153bb743f4fdf5ca7a1b5dcc0', htmlFor: "name" }, "Name"), h("input", { key: 'c93de873370a1123441a33d27c53c954bcc5f5ce', 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: '9fc1fb39f7c582a069876642cc17678303c7d72b', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.name = event.target.value;

package/dist/components/pos-new-thing-form2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pos-new-thing-form2.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,~~qlCAAqlC~~,CAAC;~~AACjnC~~,8BAAe,kBAAkB;;MCUpB,eAAe;IAP5B;;;;;;;QAeW,cAAS,GAAY,KAAK,CAAC;QAcpC,iBAAY,GAAG,OAAO,EAAS;YAC7B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC;KAmDH;IA5DC,QAAQ;QACN,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC;KAC7D;IAED,iBAAiB;QACf,cAAc,CAAC,IAAI,CAAC,CAAC;KACtB;IAOD,MAAM;QACJ,QACE,6DAAM,MAAM,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IACvD,8DAAO,OAAO,EAAC,MAAM,WAAa,EAClC,wEACE,EAAE,EAAC,MAAM,EACT,WAAW,EAAC,EAAE,EACd,KAAK,EAAE,IAAI,CAAC,eAAe,4BACH,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,GACnD,EACF,8DAAO,OAAO,EAAC,MAAM,WAAa,EAClC,8DAAO,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAI,EACpF,IAAI,CAAC,MAAM,IACV,WAAK,EAAE,EAAC,SAAS,EAAC,KAAK,EAAC,uCAAuC,IAC5D,IAAI,CAAC,MAAM,CACR,IACJ,IAAI,EACR,8DAAO,EAAE,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS,GAAI,CACxE,EACP;KACH;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAC/B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,qBAAqB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KAC3E;IAED,cAAc,CAAC,KAAK;QAClB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;KACzC;IAED,MAAM,YAAY,CAAC,KAAK;QACtB,IAAI;YACF,MAAM,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;YACxE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACnC,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;QAAC,OAAO,KAAK,EAAE;YACd,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC/B;KACF;IAEO,KAAK;QACX,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;QACf,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;QACjB,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;KAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-new-thing-form/pos-new-thing-form.css?tag=pos-new-thing-form&encapsulation=shadow","src/components/pos-new-thing-form/pos-new-thing-form.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\nform {\n display: grid;\n grid-template-columns: var(--size-16) 1fr;\n grid-gap: var(--scale-0);\n}\n\nlabel {\n grid-column: 1 / 2;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n}\n\ninput,\npos-select-term,\nbutton {\n grid-column: 2 / 3;\n}\n\ninput~~, pos~~-select-term::part(input) {\n outline: var(--pos-input-outline);\n padding: var(--scale-000);\n border: none;\n border-radius: var(--radius-xs);\n width: var(--size-full);\n box-sizing: border-box;\n}\n\ninput:focus-within~~, pos~~-select-term::part(input):focus-within {\n outline: var(--pos-input-focus-outline);\n}\n\n#new-uri {\n grid-column: 1/3;\n cursor: default;\n word-break: break-all;\n color: var(--~~color~~-~~grey~~-~~800~~);\n font-weight: var(--weight-light);\n background: var(--~~color~~-~~grey~~-~~100~~);\n padding: var(--scale-000);\n border-radius: var(--radius-xs);\n}\n\ninput#create {\n outline: none;\n box-shadow: var(--shadow-sm);\n cursor: pointer;\n color: var(--pos-primary-text-color);\n background-color: var(--pos-primary-color);\n}\n\ninput#create:disabled {\n cursor: default;\n color: var(--pos-disabled-text-color);\n background-color: var(--pos-disabled-color);\n box-shadow: none\n}\n\ninput#create:hover:not(:disabled)~~, input~~#create:focus {\n filter: brightness(110%);\n box-shadow: var(--shadow-md);\n}\n","import { PodOS } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\n\n@Component({\n tag: 'pos-new-thing-form',\n styleUrl: 'pos-new-thing-form.css',\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class PosNewThingForm implements PodOsAware {\n @Prop() referenceUri!: string;\n @State() os: PodOS;\n\n @State() newUri: string;\n @State() name: string;\n @State() selectedTypeUri: string;\n\n @State() canSubmit: boolean = false;\n\n @Event({ eventName: 'pod-os:link' }) linkEmitter: EventEmitter;\n @Event({ eventName: 'pod-os:error' }) errorEmitter: EventEmitter;\n\n @Watch('name')\n @Watch('selectedTypeUri')\n validate() {\n this.canSubmit = Boolean(this.name && this.selectedTypeUri);\n }\n\n componentWillLoad() {\n subscribePodOs(this);\n }\n receivePodOs = async (os: PodOS) => {\n this.os = os;\n };\n\n @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n render() {\n return (\n <form method=\"dialog\" onSubmit={e => this.handleSubmit(e)}>\n <label htmlFor=\"type\">Type</label>\n <pos-select-term\n id=\"type\"\n placeholder=\"\"\n value={this.selectedTypeUri}\n onPod-os:term-selected={e => this.onTermSelected(e)}\n />\n <label htmlFor=\"name\">Name</label>\n <input id=\"name\" type=\"text\" value={this.name} onInput={e => this.handleChange(e)} />\n {this.newUri ? (\n <div id=\"new-uri\" title=\"This will be the URI of the new thing\">\n {this.newUri}\n </div>\n ) : null}\n <input id=\"create\" type=\"submit\" value=\"Create\" disabled={!this.canSubmit} />\n </form>\n );\n }\n\n handleChange(event) {\n this.name = event.target.value;\n this.newUri = this.os.proposeUriForNewThing(this.referenceUri, this.name);\n }\n\n onTermSelected(event) {\n this.selectedTypeUri = event.detail.uri;\n }\n\n async handleSubmit(event) {\n try {\n await this.os.addNewThing(this.newUri, this.name, this.selectedTypeUri);\n this.linkEmitter.emit(this.newUri);\n this.reset();\n } catch (error) {\n event.preventDefault();\n this.errorEmitter.emit(error);\n }\n }\n\n private reset() {\n this.name = '';\n this.newUri = '';\n this.selectedTypeUri = '';\n }\n}\n"],"version":3}
1	+ {"file":"pos-new-thing-form2.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,grCAAgrC,CAAC;AAC5sC,8BAAe,kBAAkB;;MCUpB,eAAe;IAP5B;;;;;;;QAeW,cAAS,GAAY,KAAK,CAAC;QAcpC,iBAAY,GAAG,OAAO,EAAS;YAC7B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC;KAmDH;IA5DC,QAAQ;QACN,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC;KAC7D;IAED,iBAAiB;QACf,cAAc,CAAC,IAAI,CAAC,CAAC;KACtB;IAOD,MAAM;QACJ,QACE,6DAAM,MAAM,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IACvD,8DAAO,OAAO,EAAC,MAAM,WAAa,EAClC,wEACE,EAAE,EAAC,MAAM,EACT,WAAW,EAAC,EAAE,EACd,KAAK,EAAE,IAAI,CAAC,eAAe,4BACH,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,GACnD,EACF,8DAAO,OAAO,EAAC,MAAM,WAAa,EAClC,8DAAO,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAI,EACpF,IAAI,CAAC,MAAM,IACV,WAAK,EAAE,EAAC,SAAS,EAAC,KAAK,EAAC,uCAAuC,IAC5D,IAAI,CAAC,MAAM,CACR,IACJ,IAAI,EACR,8DAAO,EAAE,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS,GAAI,CACxE,EACP;KACH;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAC/B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,qBAAqB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KAC3E;IAED,cAAc,CAAC,KAAK;QAClB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;KACzC;IAED,MAAM,YAAY,CAAC,KAAK;QACtB,IAAI;YACF,MAAM,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;YACxE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACnC,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;QAAC,OAAO,KAAK,EAAE;YACd,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC/B;KACF;IAEO,KAAK;QACX,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;QACf,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;QACjB,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;KAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-new-thing-form/pos-new-thing-form.css?tag=pos-new-thing-form&encapsulation=shadow","src/components/pos-new-thing-form/pos-new-thing-form.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\nform {\n display: grid;\n grid-template-columns: var(--size-16) 1fr;\n grid-gap: var(--scale-0);\n}\n\nlabel {\n grid-column: 1 / 2;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n}\n\ninput,\npos-select-term,\nbutton {\n grid-column: 2 / 3;\n}\n\ninput,\npos-select-term::part(input) {\n outline: var(--pos-input-outline);\n padding: var(--scale-000);\n border: none;\n border-radius: var(--radius-xs);\n width: var(--size-full);\n box-sizing: border-box;\n background: var(--pos-input-background-color);\n color: var(--pos-normal-text-color);\n}\n\ninput:focus-within,\npos-select-term::part(input):focus-within {\n outline: var(--pos-input-focus-outline);\n}\n\n#new-uri {\n grid-column: 1/3;\n cursor: default;\n word-break: break-all;\n color: var(--pos-normal-text-color);\n font-weight: var(--weight-light);\n background: var(--pos-disabled-color);\n padding: var(--scale-000);\n border-radius: var(--radius-xs);\n}\n\ninput#create {\n outline: none;\n box-shadow: var(--shadow-sm);\n cursor: pointer;\n color: var(--pos-primary-text-color);\n background-color: var(--pos-primary-color);\n}\n\ninput#create:disabled {\n cursor: default;\n color: var(--pos-disabled-text-color);\n background-color: var(--pos-disabled-color);\n box-shadow: none;\n}\n\ninput#create:hover:not(:disabled),\ninput#create:focus {\n filter: brightness(110%);\n box-shadow: var(--shadow-md);\n}\n","import { PodOS } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\n\n@Component({\n tag: 'pos-new-thing-form',\n styleUrl: 'pos-new-thing-form.css',\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class PosNewThingForm implements PodOsAware {\n @Prop() referenceUri!: string;\n @State() os: PodOS;\n\n @State() newUri: string;\n @State() name: string;\n @State() selectedTypeUri: string;\n\n @State() canSubmit: boolean = false;\n\n @Event({ eventName: 'pod-os:link' }) linkEmitter: EventEmitter;\n @Event({ eventName: 'pod-os:error' }) errorEmitter: EventEmitter;\n\n @Watch('name')\n @Watch('selectedTypeUri')\n validate() {\n this.canSubmit = Boolean(this.name && this.selectedTypeUri);\n }\n\n componentWillLoad() {\n subscribePodOs(this);\n }\n receivePodOs = async (os: PodOS) => {\n this.os = os;\n };\n\n @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n render() {\n return (\n <form method=\"dialog\" onSubmit={e => this.handleSubmit(e)}>\n <label htmlFor=\"type\">Type</label>\n <pos-select-term\n id=\"type\"\n placeholder=\"\"\n value={this.selectedTypeUri}\n onPod-os:term-selected={e => this.onTermSelected(e)}\n />\n <label htmlFor=\"name\">Name</label>\n <input id=\"name\" type=\"text\" value={this.name} onInput={e => this.handleChange(e)} />\n {this.newUri ? (\n <div id=\"new-uri\" title=\"This will be the URI of the new thing\">\n {this.newUri}\n </div>\n ) : null}\n <input id=\"create\" type=\"submit\" value=\"Create\" disabled={!this.canSubmit} />\n </form>\n );\n }\n\n handleChange(event) {\n this.name = event.target.value;\n this.newUri = this.os.proposeUriForNewThing(this.referenceUri, this.name);\n }\n\n onTermSelected(event) {\n this.selectedTypeUri = event.detail.uri;\n }\n\n async handleSubmit(event) {\n try {\n await this.os.addNewThing(this.newUri, this.name, this.selectedTypeUri);\n this.linkEmitter.emit(this.newUri);\n this.reset();\n } catch (error) {\n event.preventDefault();\n this.errorEmitter.emit(error);\n }\n }\n\n private reset() {\n this.name = '';\n this.newUri = '';\n this.selectedTypeUri = '';\n }\n}\n"],"version":3}

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

@@ -1,18 +1,14 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as subscribeResource } from './ResourceAware.js';
-import { d as defineCustomElement$b } from './card.js';
-import { d as defineCustomElement$a } from './card-content.js';
-import { d as defineCustomElement$9 } from './card-header.js';
-import { d as defineCustomElement$8 } from './icon.js';
-import { d as defineCustomElement$7 } from './progress-bar.js';
-import { d as defineCustomElement$6 } from './ripple-effect.js';
+import { d as defineCustomElement$7 } from './icon.js';
+import { d as defineCustomElement$6 } from './progress-bar.js';
 import { d as defineCustomElement$5 } from './pos-description2.js';
 import { d as defineCustomElement$4 } from './pos-label2.js';
 import { d as defineCustomElement$3 } from './pos-predicate2.js';
 import { d as defineCustomElement$2 } from './pos-resource2.js';
 import { d as defineCustomElement$1 } from './pos-rich-link2.js';
-const posRelationsCss = ":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  padding: 0;\n  margin: 0;\n}\n\ndt {\n  margin-bottom: var(--size-1);\n}\n\n.predicate-values:nth-child(odd) {\n  background-color: var(--background-color-odd);\n}\n\n.predicate-values:nth-child(even) {\n  background-color: var(--background-color-even);\n}\n\n.predicate-values {\n  display: flex;\n  flex-direction: column;\n  border: var(--size-px) solid var(--border-color);\n  padding: var(--size-2);\n  gap: var(--size-1);\n\n  .values {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-3);\n  }\n}\n\npos-rich-link {\n  --background-color: inherit;\n}\n";
+const posRelationsCss = ":host {\n  --background-base-color: color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\ndd {\n  padding: 0;\n  margin: 0;\n}\n\ndl {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-1);\n  padding: 0;\n  margin: 0;\n}\n\ndt {\n  margin-bottom: var(--size-1);\n}\n\n.predicate-values:nth-child(odd) {\n  background-color: var(--background-color-odd);\n}\n\n.predicate-values:nth-child(even) {\n  background-color: var(--background-color-even);\n}\n\n.predicate-values {\n  display: flex;\n  flex-direction: column;\n  border: var(--size-px) solid var(--border-color);\n  padding: var(--size-2);\n  gap: var(--size-1);\n\n  .values {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-3);\n  }\n}\n\npos-rich-link {\n  --background-color: inherit;\n}\n";
 const PosRelationsStyle0 = posRelationsCss;
 const PosRelations = /*@__PURE__*/ proxyCustomElement(class PosRelations extends HTMLElement {
@@ -41,39 +37,19 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-relations", "ion-card", "ion-card-content", "ion-card-header", "ion-icon", "ion-progress-bar", "ion-ripple-effect", "pos-description", "pos-label", "pos-predicate", "pos-resource", "pos-rich-link"];
+    const components = ["pos-relations", "ion-icon", "ion-progress-bar", "pos-description", "pos-label", "pos-predicate", "pos-resource", "pos-rich-link"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-relations":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosRelations);
             }
             break;
-        case "ion-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "ion-card-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "ion-card-header":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
         case "ion-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "ion-progress-bar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "ion-ripple-effect":
+        case "ion-progress-bar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }