@pod-os/elements 0.22.2-0b8a8a5.0 → 0.22.2-8c35355.0

package/dist/components/pos-app-browser.js

@@ -1,25 +1,26 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$u } from './card.js';
-import { d as defineCustomElement$t } from './card-content.js';
-import { d as defineCustomElement$s } from './card-header.js';
-import { d as defineCustomElement$r } from './icon.js';
-import { d as defineCustomElement$q } from './progress-bar.js';
-import { d as defineCustomElement$p } from './ripple-effect.js';
-import { d as defineCustomElement$o } from './searchbar.js';
-import { d as defineCustomElement$n } from './skeleton-text.js';
-import { d as defineCustomElement$m } from './pos-add-new-thing2.js';
-import { d as defineCustomElement$l } from './pos-app2.js';
-import { d as defineCustomElement$k } from './pos-app-dashboard2.js';
-import { d as defineCustomElement$j } from './pos-description2.js';
-import { d as defineCustomElement$i } from './pos-dialog2.js';
-import { d as defineCustomElement$h } from './pos-error-toast2.js';
-import { d as defineCustomElement$g } from './pos-example-resources2.js';
-import { d as defineCustomElement$f } from './pos-getting-started2.js';
-import { d as defineCustomElement$e } from './pos-image2.js';
-import { d as defineCustomElement$d } from './pos-internal-router2.js';
-import { d as defineCustomElement$c } from './pos-label2.js';
-import { d as defineCustomElement$b } from './pos-login2.js';
-import { d as defineCustomElement$a } from './pos-login-form2.js';
+import { d as defineCustomElement$v } from './card.js';
+import { d as defineCustomElement$u } from './card-content.js';
+import { d as defineCustomElement$t } from './card-header.js';
+import { d as defineCustomElement$s } from './icon.js';
+import { d as defineCustomElement$r } from './progress-bar.js';
+import { d as defineCustomElement$q } from './ripple-effect.js';
+import { d as defineCustomElement$p } from './searchbar.js';
+import { d as defineCustomElement$o } from './skeleton-text.js';
+import { d as defineCustomElement$n } from './pos-add-new-thing2.js';
+import { d as defineCustomElement$m } from './pos-app2.js';
+import { d as defineCustomElement$l } from './pos-app-dashboard2.js';
+import { d as defineCustomElement$k } from './pos-description2.js';
+import { d as defineCustomElement$j } from './pos-dialog2.js';
+import { d as defineCustomElement$i } from './pos-error-toast2.js';
+import { d as defineCustomElement$h } from './pos-example-resources2.js';
+import { d as defineCustomElement$g } from './pos-getting-started2.js';
+import { d as defineCustomElement$f } from './pos-image2.js';
+import { d as defineCustomElement$e } from './pos-internal-router2.js';
+import { d as defineCustomElement$d } from './pos-label2.js';
+import { d as defineCustomElement$c } from './pos-login2.js';
+import { d as defineCustomElement$b } from './pos-login-form2.js';
+import { d as defineCustomElement$a } from './pos-make-findable2.js';
 import { d as defineCustomElement$9 } from './pos-navigation-bar2.js';
 import { d as defineCustomElement$8 } from './pos-new-thing-form2.js';
 import { d as defineCustomElement$7 } from './pos-picture2.js';
@@ -74,7 +75,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-app-browser", "ion-card", "ion-card-content", "ion-card-header", "ion-icon", "ion-progress-bar", "ion-ripple-effect", "ion-searchbar", "ion-skeleton-text", "pos-add-new-thing", "pos-app", "pos-app-dashboard", "pos-description", "pos-dialog", "pos-error-toast", "pos-example-resources", "pos-getting-started", "pos-image", "pos-internal-router", "pos-label", "pos-login", "pos-login-form", "pos-navigation-bar", "pos-new-thing-form", "pos-picture", "pos-resource", "pos-rich-link", "pos-router", "pos-select-term", "pos-type-router"];
+    const components = ["pos-app-browser", "ion-card", "ion-card-content", "ion-card-header", "ion-icon", "ion-progress-bar", "ion-ripple-effect", "ion-searchbar", "ion-skeleton-text", "pos-add-new-thing", "pos-app", "pos-app-dashboard", "pos-description", "pos-dialog", "pos-error-toast", "pos-example-resources", "pos-getting-started", "pos-image", "pos-internal-router", "pos-label", "pos-login", "pos-login-form", "pos-make-findable", "pos-navigation-bar", "pos-new-thing-form", "pos-picture", "pos-resource", "pos-rich-link", "pos-router", "pos-select-term", "pos-type-router"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-app-browser":
             if (!customElements.get(tagName)) {
@@ -83,105 +84,110 @@ function defineCustomElement$1() {
             break;
         case "ion-card":
             if (!customElements.get(tagName)) {
-                defineCustomElement$u();
+                defineCustomElement$v();
             }
             break;
         case "ion-card-content":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$u();
             }
             break;
         case "ion-card-header":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$t();
             }
             break;
         case "ion-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$s();
             }
             break;
         case "ion-progress-bar":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$r();
             }
             break;
         case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$q();
             }
             break;
         case "ion-searchbar":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$p();
             }
             break;
         case "ion-skeleton-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$o();
             }
             break;
         case "pos-add-new-thing":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$n();
             }
             break;
         case "pos-app":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$m();
             }
             break;
         case "pos-app-dashboard":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$l();
             }
             break;
         case "pos-description":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$k();
             }
             break;
         case "pos-dialog":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$j();
             }
             break;
         case "pos-error-toast":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$i();
             }
             break;
         case "pos-example-resources":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$h();
             }
             break;
         case "pos-getting-started":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$g();
             }
             break;
         case "pos-image":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$f();
             }
             break;
         case "pos-internal-router":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$e();
             }
             break;
         case "pos-label":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$d();
             }
             break;
         case "pos-login":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "pos-login-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "pos-make-findable":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }

package/dist/components/pos-app-browser.js.map

@@ -1 +1 @@
-{"file":"pos-app-browser.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,gBAAgB,GAAG,mpBAAmpB,CAAC;AAC7qB,4BAAe,gBAAgB;;MCKlBA,eAAa;IAJ1B;;;QAKU,2BAAsB,GAAY,KAAK,CAAC;;;;;;;QAQxC,SAAI,GAAyB,YAAY,CAAC;QAEzC,QAAG,GAAG,EAAE,CAAC;KAgCnB;IA9BC,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,gEAAS,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,IAC1D,0EACE,mEAAY,IAAI,EAAE,IAAI,CAAC,IAAI,4BAA0B,CAAC,KAAK,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,IAC7E,iEACE,0EAAmB,YAAY,EAAE,IAAI,CAAC,GAAG,GAAsB,EAC/D,2EAAoB,GAAG,EAAE,IAAI,CAAC,GAAG,KAAK,kBAAkB,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,GAAuB,EAC/F,mEAAuB,CAChB,EACT,+DACG,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,SAAS,CAAC,IAC7B,2BAAqB,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,KAEtC,oBAAc,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,IACxC,0BAAmB,CACN,CAChB,CACI,EACP,iEACE,EAAC,IAAI,sDAAG,EACR,+EAA0B,CACnB,CACE,CACG,CACV,CACL,EACP;KACH;;;;;;;AAGH,MAAM,IAAI,GAAG;IACX,QACE,WAAK,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B,IAC3D,YACE,CAAC,EAAC,6CAA6C,EAC/C,KAAK,EAAE;YACL,MAAM,EAAE,SAAS;YACjB,QAAQ,EAAE,SAAS;YACnB,cAAc,EAAE,IAAI;SACrB,qBACe,OAAO,GACvB,EAEF,YACE,CAAC,EAAC,0EAA0E,EAC5E,KAAK,EAAE;YACL,MAAM,EAAE,OAAO;YACf,QAAQ,EAAE,OAAO;YACjB,cAAc,EAAE,IAAI;SACrB,qBACe,OAAO,GACvB,EAEF,YACE,CAAC,EAAC,gDAAgD,EAClD,KAAK,EAAE;YACL,MAAM,EAAE,SAAS;YACjB,QAAQ,EAAE,SAAS;YACnB,cAAc,EAAE,IAAI;SACrB,qBACe,OAAO,GACvB,CACE,EACN;AACJ,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PosAppBrowser"],"sources":["src/apps/pos-app-browser/pos-app-browser.css?tag=pos-app-browser","src/apps/pos-app-browser/pos-app-browser.tsx"],"sourcesContent":["pos-router {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\npos-navigation-bar {\n  max-width: var(--width-lg);\n  margin: 0;\n}\n\npos-add-new-thing,\npos-login {\n  flex: 0 1 auto; /* Behält die Breite des Inhalts bei */\n}\n\nheader,\nfooter {\n  display: flex;\n  gap: var(--size-1);\n  height: auto;\n  justify-content: center;\n  align-items: center;\n  padding: var(--size-1);\n}\n\nfooter svg {\n  width: var(--size-5);\n  height: var(--size-5);\n}\n\nfooter {\n  font-size: var(--scale-fluid-000);\n}\n\nheader {\n  flex-wrap: wrap;\n  padding: 0 var(--size-8);\n}\n\nmain {\n  flex: 1;\n  max-height: 100vh;\n  overflow: auto;\n}\n\n@media (max-width: 640px) {\n  header {\n    padding: 0 var(--size-1) var(--size-1);\n    justify-content: space-between;\n  }\n\n  pos-navigation-bar {\n    flex-basis: 100%;\n    order: 0;\n  }\n\n  pos-add-new-thing,\n  pos-login {\n    order: 1;\n  }\n}\n","import { Component, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'pos-app-browser',\n  styleUrl: 'pos-app-browser.css',\n})\nexport class PosAppBrowser {\n  @Prop() restorePreviousSession: boolean = false;\n\n  /**\n   * The mode the app is running in:\n   *\n   * - standalone:  use this when you deploy it as a standalone web application\n   * - pod: use this when you host this app as a default interface for you pod\n   */\n  @Prop() mode: 'standalone' | 'pod' = 'standalone';\n\n  @State() uri = '';\n\n  render() {\n    return (\n      <Host>\n        <pos-app restorePreviousSession={this.restorePreviousSession}>\n          <pos-error-toast>\n            <pos-router mode={this.mode} onPod-os:route-changed={e => (this.uri = e.detail)}>\n              <header>\n                <pos-add-new-thing referenceUri={this.uri}></pos-add-new-thing>\n                <pos-navigation-bar uri={this.uri === 'pod-os:dashboard' ? '' : this.uri}></pos-navigation-bar>\n                <pos-login></pos-login>\n              </header>\n              <main>\n                {this.uri.startsWith('pod-os:') ? (\n                  <pos-internal-router uri={this.uri} />\n                ) : (\n                  <pos-resource key={this.uri} uri={this.uri}>\n                    <pos-type-router />\n                  </pos-resource>\n                )}\n              </main>\n              <footer>\n                <Logo />\n                <span>PodOS Browser</span>\n              </footer>\n            </pos-router>\n          </pos-error-toast>\n        </pos-app>\n      </Host>\n    );\n  }\n}\n\nconst Logo = () => {\n  return (\n    <svg viewBox=\"0 0 400 400\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M50 350 L50 100 L200 50 L350 100 L350 350 Z\"\n        style={{\n          'fill': '#008BF8',\n          'stroke': '#008BF8',\n          'stroke-width': '70',\n        }}\n        stroke-linejoin=\"round\"\n      />\n\n      <path\n        d=\"M100 300 L100 150 L200 120 L300 150 L300 300 L130 300 L130 370 L100 370Z\"\n        style={{\n          'fill': 'white',\n          'stroke': 'white',\n          'stroke-width': '45',\n        }}\n        stroke-linejoin=\"round\"\n      />\n\n      <path\n        d=\"M150 250 L150 200 L200 180 L250 200 L250 250 Z\"\n        style={{\n          'fill': '#DC0073',\n          'stroke': '#DC0073',\n          'stroke-width': '20',\n        }}\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  );\n};\n"],"version":3}
+{"file":"pos-app-browser.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,gBAAgB,GAAG,mpBAAmpB,CAAC;AAC7qB,4BAAe,gBAAgB;;MCKlBA,eAAa;IAJ1B;;;QAKU,2BAAsB,GAAY,KAAK,CAAC;;;;;;;QAQxC,SAAI,GAAyB,YAAY,CAAC;QAEzC,QAAG,GAAG,EAAE,CAAC;KAgCnB;IA9BC,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,gEAAS,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,IAC1D,0EACE,mEAAY,IAAI,EAAE,IAAI,CAAC,IAAI,4BAA0B,CAAC,KAAK,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,IAC7E,iEACE,0EAAmB,YAAY,EAAE,IAAI,CAAC,GAAG,GAAsB,EAC/D,2EAAoB,GAAG,EAAE,IAAI,CAAC,GAAG,KAAK,kBAAkB,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,GAAuB,EAC/F,mEAAuB,CAChB,EACT,+DACG,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,SAAS,CAAC,IAC7B,2BAAqB,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,KAEtC,oBAAc,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,IACxC,0BAAmB,CACN,CAChB,CACI,EACP,iEACE,EAAC,IAAI,sDAAG,EACR,+EAA0B,CACnB,CACE,CACG,CACV,CACL,EACP;KACH;;;;;;;AAGH,MAAM,IAAI,GAAG;IACX,QACE,WAAK,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B,IAC3D,YACE,CAAC,EAAC,6CAA6C,EAC/C,KAAK,EAAE;YACL,MAAM,EAAE,SAAS;YACjB,QAAQ,EAAE,SAAS;YACnB,cAAc,EAAE,IAAI;SACrB,qBACe,OAAO,GACvB,EAEF,YACE,CAAC,EAAC,0EAA0E,EAC5E,KAAK,EAAE;YACL,MAAM,EAAE,OAAO;YACf,QAAQ,EAAE,OAAO;YACjB,cAAc,EAAE,IAAI;SACrB,qBACe,OAAO,GACvB,EAEF,YACE,CAAC,EAAC,gDAAgD,EAClD,KAAK,EAAE;YACL,MAAM,EAAE,SAAS;YACjB,QAAQ,EAAE,SAAS;YACnB,cAAc,EAAE,IAAI;SACrB,qBACe,OAAO,GACvB,CACE,EACN;AACJ,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PosAppBrowser"],"sources":["src/apps/pos-app-browser/pos-app-browser.css?tag=pos-app-browser","src/apps/pos-app-browser/pos-app-browser.tsx"],"sourcesContent":["pos-router {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\npos-navigation-bar {\n  max-width: var(--width-lg);\n  margin: 0;\n}\n\npos-add-new-thing,\npos-login {\n  flex: 0 1 auto; /* Behält die Breite des Inhalts bei */\n}\n\nheader,\nfooter {\n  display: flex;\n  gap: var(--size-1);\n  height: auto;\n  justify-content: center;\n  align-items: center;\n  padding: var(--size-1);\n}\n\nfooter svg {\n  width: var(--size-5);\n  height: var(--size-5);\n}\n\nfooter {\n  font-size: var(--scale-fluid-000);\n}\n\nheader {\n  flex-wrap: wrap;\n  padding: 0 var(--size-8);\n}\n\nmain {\n  flex: 1;\n  max-height: 100vh;\n  overflow: auto;\n}\n\n@media (max-width: 640px) {\n  header {\n    padding: 0 var(--size-1) var(--size-1);\n    justify-content: space-between;\n  }\n\n  pos-navigation-bar {\n    flex-basis: 100%;\n    order: 0;\n  }\n\n  pos-add-new-thing,\n  pos-login {\n    order: 1;\n  }\n}\n","import { Component, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'pos-app-browser',\n  styleUrl: 'pos-app-browser.css',\n})\nexport class PosAppBrowser {\n  @Prop() restorePreviousSession: boolean = false;\n\n  /**\n   * The mode the app is running in:\n   *\n   * - standalone:  use this when you deploy it as a standalone web application\n   * - pod: use this when you host this app as a default interface for you pod\n   */\n  @Prop() mode: 'standalone' | 'pod' = 'standalone';\n\n  @State() uri = '';\n\n  render() {\n    return (\n      <Host>\n        <pos-app restorePreviousSession={this.restorePreviousSession}>\n          <pos-error-toast>\n            <pos-router mode={this.mode} onPod-os:route-changed={e => (this.uri = e.detail)}>\n              <header>\n                <pos-add-new-thing referenceUri={this.uri}></pos-add-new-thing>\n                <pos-navigation-bar uri={this.uri === 'pod-os:dashboard' ? '' : this.uri}></pos-navigation-bar>\n                <pos-login></pos-login>\n              </header>\n              <main>\n                {this.uri.startsWith('pod-os:') ? (\n                  <pos-internal-router uri={this.uri} />\n                ) : (\n                  <pos-resource key={this.uri} uri={this.uri}>\n                    <pos-type-router />\n                  </pos-resource>\n                )}\n              </main>\n              <footer>\n                <Logo />\n                <span>PodOS Browser</span>\n              </footer>\n            </pos-router>\n          </pos-error-toast>\n        </pos-app>\n      </Host>\n    );\n  }\n}\n\nconst Logo = () => {\n  return (\n    <svg viewBox=\"0 0 400 400\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M50 350 L50 100 L200 50 L350 100 L350 350 Z\"\n        style={{\n          'fill': '#008BF8',\n          'stroke': '#008BF8',\n          'stroke-width': '70',\n        }}\n        stroke-linejoin=\"round\"\n      />\n\n      <path\n        d=\"M100 300 L100 150 L200 120 L300 150 L300 300 L130 300 L130 370 L100 370Z\"\n        style={{\n          'fill': 'white',\n          'stroke': 'white',\n          'stroke-width': '45',\n        }}\n        stroke-linejoin=\"round\"\n      />\n\n      <path\n        d=\"M150 250 L150 200 L200 180 L250 200 L250 250 Z\"\n        style={{\n          'fill': '#DC0073',\n          'stroke': '#DC0073',\n          'stroke-width': '20',\n        }}\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  );\n};\n"],"version":3}

package/dist/components/pos-container-contents2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { L as LdpContainer } from './index10.js';
+import { a as LdpContainer } from './index10.js';
 import { s as subscribeResource } from './ResourceAware.js';
 import { d as defineCustomElement$a } from './card.js';
 import { d as defineCustomElement$9 } from './card-content.js';

package/dist/components/pos-make-findable.js

@@ -1,139 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as LabelIndex } from './index10.js';
-import { s as subscribePodOs } from './PodOsAware.js';
-import { s as store } from './session.js';
-import { d as defineCustomElement$8 } from './card.js';
-import { d as defineCustomElement$7 } from './card-content.js';
-import { d as defineCustomElement$6 } from './card-header.js';
-import { d as defineCustomElement$5 } from './progress-bar.js';
-import { d as defineCustomElement$4 } from './ripple-effect.js';
-import { d as defineCustomElement$3 } from './pos-label2.js';
-import { d as defineCustomElement$2 } from './pos-resource2.js';
-
-const posMakeFindableCss = "button.main {\n  display: flex;\n  transition: width 200ms;\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\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    button {\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        filter: brightness(80%);\n      }\n\n      &:active {\n        filter: brightness(90%);\n      }\n    }\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  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 PosMakeFindableStyle0 = posMakeFindableCss;
-
-const PosMakeFindable$1 = /*@__PURE__*/ proxyCustomElement(class PosMakeFindable extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.subscribePodOs = createEvent(this, "pod-os:init", 7);
-        this.indexes = [];
-        this.showOptions = false;
-        this.receivePodOs = async (os) => {
-            this.os = os;
-            this.thing = this.os.store.get(this.uri);
-            this.getLabelIndexes(store.state.profile);
-            this.unsubscribeSessionChange = store.onChange('profile', profile => {
-                this.getLabelIndexes(profile);
-            });
-        };
-    }
-    componentWillLoad() {
-        subscribePodOs(this);
-    }
-    disconnectedCallback() {
-        this.unsubscribeSessionChange && this.unsubscribeSessionChange();
-    }
-    hideOptions(event) {
-        // @ts-ignore
-        if (event.target.parentNode !== this.el) {
-            this.showOptions = false;
-        }
-    }
-    updateUri(uri) {
-        this.thing = this.os.store.get(uri);
-    }
-    getLabelIndexes(profile) {
-        if (profile) {
-            this.indexes = profile.getPrivateLabelIndexes().map(it => this.os.store.get(it).assume(LabelIndex));
-        }
-    }
-    async onClick(e) {
-        e.preventDefault();
-        if (this.indexes.length === 1) {
-            await this.addToLabelIndex(this.indexes[0]);
-        }
-        else if (this.indexes.length > 1) {
-            this.showOptions = true;
-        }
-    }
-    async addToLabelIndex(index) {
-        await this.os.addToLabelIndex(this.thing, index);
-    }
-    render() {
-        if (!store.state.isLoggedIn) {
-            return null;
-        }
-        return (h(Host, null, h("button", { class: { main: true, open: this.showOptions }, onClick: e => this.onClick(e), title: "" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", 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" })), h("p", null, "Make this findable")), this.showOptions && (h("div", { class: "options" }, h("ol", { role: "listbox" }, this.indexes.map((index) => (h("li", { role: "option" }, h("button", { onClick: e => this.chooseOption(e, index) }, h("pos-resource", { uri: index.uri, lazy: true }, h("pos-label", null)))))))))));
-    }
-    async chooseOption(e, index) {
-        e.preventDefault();
-        await this.addToLabelIndex(index);
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "uri": ["updateUri"]
-    }; }
-    static get style() { return PosMakeFindableStyle0; }
-}, [0, "pos-make-findable", {
-        "uri": [1],
-        "os": [32],
-        "thing": [32],
-        "indexes": [32],
-        "unsubscribeSessionChange": [32],
-        "showOptions": [32]
-    }, [[8, "click", "hideOptions"]], {
-        "uri": ["updateUri"]
-    }]);
-function defineCustomElement$1() {
-    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"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pos-make-findable":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PosMakeFindable$1);
-            }
-            break;
-        case "ion-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "ion-card-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "ion-card-header":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "ion-progress-bar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "ion-ripple-effect":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "pos-label":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "pos-resource":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
+import { P as PosMakeFindable$1, d as defineCustomElement$1 } from './pos-make-findable2.js';
 
 const PosMakeFindable = PosMakeFindable$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/pos-make-findable.js.map

@@ -1 +1 @@
-{"file":"pos-make-findable.js","mappings":"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","names":["PosMakeFindable","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: width 200ms;\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\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    button {\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        filter: brightness(80%);\n      }\n\n      &:active {\n        filter: brightness(90%);\n      }\n    }\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  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, 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\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: 'window' })\n  hideOptions(event: MouseEvent) {\n    // @ts-ignore\n    if (event.target.parentNode !== this.el) {\n      this.showOptions = false;\n    }\n  }\n\n  @Watch('uri')\n  updateUri(uri: string) {\n    this.thing = this.os.store.get(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    }\n  }\n\n  private async onClick(e: MouseEvent) {\n    e.preventDefault();\n    if (this.indexes.length === 1) {\n      await this.addToLabelIndex(this.indexes[0]);\n    } else if (this.indexes.length > 1) {\n      this.showOptions = true;\n    }\n  }\n\n  private async addToLabelIndex(index: LabelIndex) {\n    await this.os.addToLabelIndex(this.thing, index);\n  }\n\n  render() {\n    if (!session.state.isLoggedIn) {\n      return null;\n    }\n\n    return (\n      <Host>\n        <button class={{ main: true, open: this.showOptions }} onClick={e => this.onClick(e)} title=\"\">\n          <svg\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          <p>Make this findable</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                  <button onClick={e => this.chooseOption(e, index)}>\n                    <pos-resource uri={index.uri} lazy={true}>\n                      <pos-label></pos-label>\n                    </pos-resource>\n                  </button>\n                </li>\n              ))}\n            </ol>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private async chooseOption(e: MouseEvent, index: LabelIndex) {\n    e.preventDefault();\n    await this.addToLabelIndex(index);\n  }\n}\n"],"version":3}
+{"file":"pos-make-findable.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -0,0 +1,152 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+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$2 } from './pos-label2.js';
+import { d as defineCustomElement$1 } from './pos-resource2.js';
+
+const posMakeFindableCss = "button.main {\n  display: flex;\n  transition: width 200ms;\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\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    button {\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        filter: brightness(80%);\n      }\n\n      &:active {\n        filter: brightness(90%);\n      }\n    }\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  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 PosMakeFindableStyle0 = posMakeFindableCss;
+
+const PosMakeFindable = /*@__PURE__*/ proxyCustomElement(class PosMakeFindable extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.subscribePodOs = createEvent(this, "pod-os:init", 7);
+        this.errorEmitter = createEvent(this, "pod-os:error", 7);
+        this.indexes = [];
+        this.showOptions = false;
+        this.receivePodOs = async (os) => {
+            this.os = os;
+            this.thing = this.os.store.get(this.uri);
+            this.getLabelIndexes(store.state.profile);
+            this.unsubscribeSessionChange = store.onChange('profile', profile => {
+                this.getLabelIndexes(profile);
+            });
+        };
+    }
+    componentWillLoad() {
+        subscribePodOs(this);
+    }
+    disconnectedCallback() {
+        this.unsubscribeSessionChange && this.unsubscribeSessionChange();
+    }
+    hideOptions(event) {
+        // @ts-ignore
+        if (event.target.parentNode !== this.el) {
+            this.showOptions = false;
+        }
+    }
+    handleKeyDown(ev) {
+        if (ev.key === 'Escape') {
+            this.showOptions = false;
+        }
+    }
+    updateUri(uri) {
+        this.thing = this.os.store.get(uri);
+    }
+    getLabelIndexes(profile) {
+        if (profile) {
+            this.indexes = profile.getPrivateLabelIndexes().map(it => this.os.store.get(it).assume(LabelIndex));
+        }
+    }
+    async onClick(e) {
+        e.preventDefault();
+        if (this.indexes.length === 1) {
+            await this.addToLabelIndex(this.indexes[0]);
+        }
+        else if (this.indexes.length > 1) {
+            this.showOptions = true;
+        }
+    }
+    async addToLabelIndex(index) {
+        try {
+            await this.os.addToLabelIndex(this.thing, index);
+        }
+        catch (e) {
+            this.errorEmitter.emit(e);
+        }
+        this.showOptions = false;
+    }
+    render() {
+        if (!store.state.isLoggedIn) {
+            return null;
+        }
+        return (h(Host, null, h("button", { type: "button", class: { main: true, open: this.showOptions }, onClick: e => this.onClick(e), title: "" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", 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" })), h("p", null, "Make this findable")), this.showOptions && (h("div", { class: "options" }, h("ol", { role: "listbox" }, this.indexes.map((index) => (h("li", { role: "option" }, h("button", { onClick: e => this.chooseOption(e, index) }, h("pos-resource", { uri: index.uri, lazy: true }, h("pos-label", null)))))))))));
+    }
+    async chooseOption(e, index) {
+        e.preventDefault();
+        await this.addToLabelIndex(index);
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "uri": ["updateUri"]
+    }; }
+    static get style() { return PosMakeFindableStyle0; }
+}, [0, "pos-make-findable", {
+        "uri": [1],
+        "os": [32],
+        "thing": [32],
+        "indexes": [32],
+        "unsubscribeSessionChange": [32],
+        "showOptions": [32]
+    }, [[8, "click", "hideOptions"], [0, "keydown", "handleKeyDown"]], {
+        "uri": ["updateUri"]
+    }]);
+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"];
+    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();
+            }
+            break;
+        case "pos-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "pos-resource":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { PosMakeFindable as P, defineCustomElement as d };
+
+//# sourceMappingURL=pos-make-findable2.js.map

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

@@ -0,0 +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: width 200ms;\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\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    button {\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        filter: brightness(80%);\n      }\n\n      &:active {\n        filter: brightness(90%);\n      }\n    }\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  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\n  @Event({ eventName: 'pod-os:error' }) errorEmitter: 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: 'window' })\n  hideOptions(event: MouseEvent) {\n    // @ts-ignore\n    if (event.target.parentNode !== this.el) {\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  }\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    }\n  }\n\n  private async onClick(e: MouseEvent) {\n    e.preventDefault();\n    if (this.indexes.length === 1) {\n      await this.addToLabelIndex(this.indexes[0]);\n    } else if (this.indexes.length > 1) {\n      this.showOptions = true;\n    }\n  }\n\n  private async addToLabelIndex(index: LabelIndex) {\n    try {\n      await this.os.addToLabelIndex(this.thing, index);\n    } catch (e) {\n      this.errorEmitter.emit(e);\n    }\n\n    this.showOptions = false;\n  }\n\n  render() {\n    if (!session.state.isLoggedIn) {\n      return null;\n    }\n\n    return (\n      <Host>\n        <button type=\"button\" class={{ main: true, open: this.showOptions }} onClick={e => this.onClick(e)} title=\"\">\n          <svg\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          <p>Make this findable</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                  <button onClick={e => this.chooseOption(e, index)}>\n                    <pos-resource uri={index.uri} lazy={true}>\n                      <pos-label></pos-label>\n                    </pos-resource>\n                  </button>\n                </li>\n              ))}\n            </ol>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private async chooseOption(e: MouseEvent, index: LabelIndex) {\n    e.preventDefault();\n    await this.addToLabelIndex(index);\n  }\n}\n"],"version":3}