@pod-os/elements 0.29.0 → 0.29.1-rc.0f2bda0.0

package/dist/components/pos-document2.js

@@ -4,7 +4,7 @@ import { B as BrokenFile } from './BrokenFile.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './skeleton-text.js';
 
-const posDocumentCss = "iframe{background-color:white;width:100%;height:100vh}.error{display:flex;opacity:0.8;background:repeating-linear-gradient(-45deg, rgba(150, 0, 0, 0.1), rgba(150, 0, 0, 0.1) 10px, #fff 5px, #fff 25px);flex-direction:column;border:1px solid red;color:black;align-items:center;justify-content:center;word-break:break-all;padding:1rem;box-sizing:border-box}.error ion-icon{color:#282828;--ionicon-stroke-width:calc(var(--width) / 5);font-size:calc(var(--width) / 2)}a{text-decoration:none;width:var(--width);height:var(--height)}.code{font-weight:bold;font-size:calc(var(--width) / 8)}.text{font-size:calc(var(--width) / 20)}";
+const posDocumentCss = "iframe{background-color:var(--pos-background-color);width:100%;height:100vh}.error{display:flex;opacity:0.8;background:repeating-linear-gradient(-45deg, rgba(150, 0, 0, 0.1), rgba(150, 0, 0, 0.1) 10px, #fff 5px, #fff 25px);flex-direction:column;border:1px solid red;color:black;align-items:center;justify-content:center;word-break:break-all;padding:1rem;box-sizing:border-box}.error ion-icon{color:#282828;--ionicon-stroke-width:calc(var(--width) / 5);font-size:calc(var(--width) / 2)}a{text-decoration:none;width:var(--width);height:var(--height)}.code{font-weight:bold;font-size:calc(var(--width) / 8)}.text{font-size:calc(var(--width) / 20)}";
 const PosDocumentStyle0 = posDocumentCss;
 
 const PosDocument = /*@__PURE__*/ proxyCustomElement(class PosDocument extends HTMLElement {

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

@@ -1 +1 @@
-{"file":"pos-document2.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,gnBAAgnB,CAAC;AACxoB,0BAAe,cAAc;;MCShB,WAAW;IALxB;;;;;;QAsBU,YAAO,GAAY,IAAI,CAAC;QAchC,UAAK,GAAG,OAAO,EAAS;YACtB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC;KAkCH;IAzCC,iBAAiB;QACfA,KAAO,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QACvD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3C;IAQD,MAAM,SAAS;QACb,IAAI;YACF,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC/C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC1C,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE;gBACf,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;gBAChD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;aACnB;iBAAM;gBACL,IAAI,CAAC,UAAU,GAAG,IAAsB,CAAC;aAC1C;SACF;QAAC,OAAO,GAAG,EAAE;YACZ,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;SAClB;gBAAS;YACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,yBAAmB,QAAQ,EAAE,IAAI,GAAsB,CAAC;SAChE;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,WAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAO,CAAC;SACtD;QACD,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,OAAO,EAAC,UAAU,IAAC,IAAI,EAAE,IAAI,CAAC,UAAU,GAAI,CAAC;SAC9C;QACD,OAAO,cAAQ,GAAG,EAAE,IAAI,CAAC,OAAO,GAAW,CAAC;KAC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["session"],"sources":["src/components/pos-document/pos-document.css?tag=pos-document&encapsulation=shadow","src/components/pos-document/pos-document.tsx"],"sourcesContent":["iframe {\n  background-color: white;\n  width: 100%;\n  height: 100vh;\n}\n\n/* consolidate with styles from pos-image */\n.error {\n  display: flex;\n  opacity: 0.8;\n  background: repeating-linear-gradient(-45deg, rgba(150, 0, 0, 0.1), rgba(150, 0, 0, 0.1) 10px, #fff 5px, #fff 25px);\n  flex-direction: column;\n  border: 1px solid red;\n  color: black;\n  align-items: center;\n  justify-content: center;\n  word-break: break-all;\n  padding: 1rem;\n  box-sizing: border-box;\n}\n\n.error ion-icon {\n  color: #282828;\n  --ionicon-stroke-width: calc(var(--width) / 5);\n  font-size: calc(var(--width) / 2);\n}\n\na {\n  text-decoration: none;\n  width: var(--width);\n  height: var(--height);\n}\n\n.code {\n  font-weight: bold;\n  font-size: calc(var(--width) / 8);\n}\n\n.text {\n  font-size: calc(var(--width) / 20);\n}\n","import { PodOS, BrokenFile as BrokenFileData } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport session from '../../store/session';\nimport { BrokenFile } from '../broken-file/BrokenFile';\n\n@Component({\n  tag: 'pos-document',\n  styleUrl: 'pos-document.css',\n  shadow: true,\n})\nexport class PosDocument {\n  @Prop() src: string;\n\n  @Prop() alt: string;\n\n  @State() os: PodOS;\n\n  @State()\n  private dataUri: string;\n\n  @State()\n  private brokenFile: BrokenFileData;\n\n  @State()\n  private error: Error;\n\n  @State()\n  private loading: boolean = true;\n\n  @Event({ eventName: 'pod-os:init' }) initializeOsEmitter: EventEmitter;\n\n  /**\n   * Indicates that the resource given in `src` property has been loaded.\n   */\n  @Event({ eventName: 'pod-os:resource-loaded' }) resourceLoadedEmitter: EventEmitter<string>;\n\n  componentWillLoad() {\n    session.onChange('isLoggedIn', () => this.fetchBlob());\n    this.initializeOsEmitter.emit(this.setOs);\n  }\n\n  setOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  @Watch('os')\n  @Watch('src')\n  async fetchBlob() {\n    try {\n      this.loading = true;\n      const file = await this.os.fetchFile(this.src);\n      this.resourceLoadedEmitter.emit(this.src);\n      if (file.blob()) {\n        this.dataUri = URL.createObjectURL(file.blob());\n        this.error = null;\n      } else {\n        this.brokenFile = file as BrokenFileData;\n      }\n    } catch (err) {\n      this.error = err;\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  render() {\n    if (this.loading) {\n      return <ion-skeleton-text animated={true}></ion-skeleton-text>;\n    }\n    if (this.error) {\n      return <div class=\"error\">{this.error.message}</div>;\n    }\n    if (this.brokenFile) {\n      return <BrokenFile file={this.brokenFile} />;\n    }\n    return <iframe src={this.dataUri}></iframe>;\n  }\n}\n"],"version":3}
+{"file":"pos-document2.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,soBAAsoB,CAAC;AAC9pB,0BAAe,cAAc;;MCShB,WAAW;IALxB;;;;;;QAsBU,YAAO,GAAY,IAAI,CAAC;QAchC,UAAK,GAAG,OAAO,EAAS;YACtB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC;KAkCH;IAzCC,iBAAiB;QACfA,KAAO,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QACvD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3C;IAQD,MAAM,SAAS;QACb,IAAI;YACF,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC/C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC1C,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE;gBACf,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;gBAChD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;aACnB;iBAAM;gBACL,IAAI,CAAC,UAAU,GAAG,IAAsB,CAAC;aAC1C;SACF;QAAC,OAAO,GAAG,EAAE;YACZ,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;SAClB;gBAAS;YACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,yBAAmB,QAAQ,EAAE,IAAI,GAAsB,CAAC;SAChE;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,WAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAO,CAAC;SACtD;QACD,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,OAAO,EAAC,UAAU,IAAC,IAAI,EAAE,IAAI,CAAC,UAAU,GAAI,CAAC;SAC9C;QACD,OAAO,cAAQ,GAAG,EAAE,IAAI,CAAC,OAAO,GAAW,CAAC;KAC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["session"],"sources":["src/components/pos-document/pos-document.css?tag=pos-document&encapsulation=shadow","src/components/pos-document/pos-document.tsx"],"sourcesContent":["iframe {\n  background-color: var(--pos-background-color);\n  width: 100%;\n  height: 100vh;\n}\n\n/* consolidate with styles from pos-image */\n.error {\n  display: flex;\n  opacity: 0.8;\n  background: repeating-linear-gradient(-45deg, rgba(150, 0, 0, 0.1), rgba(150, 0, 0, 0.1) 10px, #fff 5px, #fff 25px);\n  flex-direction: column;\n  border: 1px solid red;\n  color: black;\n  align-items: center;\n  justify-content: center;\n  word-break: break-all;\n  padding: 1rem;\n  box-sizing: border-box;\n}\n\n.error ion-icon {\n  color: #282828;\n  --ionicon-stroke-width: calc(var(--width) / 5);\n  font-size: calc(var(--width) / 2);\n}\n\na {\n  text-decoration: none;\n  width: var(--width);\n  height: var(--height);\n}\n\n.code {\n  font-weight: bold;\n  font-size: calc(var(--width) / 8);\n}\n\n.text {\n  font-size: calc(var(--width) / 20);\n}\n","import { PodOS, BrokenFile as BrokenFileData } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport session from '../../store/session';\nimport { BrokenFile } from '../broken-file/BrokenFile';\n\n@Component({\n  tag: 'pos-document',\n  styleUrl: 'pos-document.css',\n  shadow: true,\n})\nexport class PosDocument {\n  @Prop() src: string;\n\n  @Prop() alt: string;\n\n  @State() os: PodOS;\n\n  @State()\n  private dataUri: string;\n\n  @State()\n  private brokenFile: BrokenFileData;\n\n  @State()\n  private error: Error;\n\n  @State()\n  private loading: boolean = true;\n\n  @Event({ eventName: 'pod-os:init' }) initializeOsEmitter: EventEmitter;\n\n  /**\n   * Indicates that the resource given in `src` property has been loaded.\n   */\n  @Event({ eventName: 'pod-os:resource-loaded' }) resourceLoadedEmitter: EventEmitter<string>;\n\n  componentWillLoad() {\n    session.onChange('isLoggedIn', () => this.fetchBlob());\n    this.initializeOsEmitter.emit(this.setOs);\n  }\n\n  setOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  @Watch('os')\n  @Watch('src')\n  async fetchBlob() {\n    try {\n      this.loading = true;\n      const file = await this.os.fetchFile(this.src);\n      this.resourceLoadedEmitter.emit(this.src);\n      if (file.blob()) {\n        this.dataUri = URL.createObjectURL(file.blob());\n        this.error = null;\n      } else {\n        this.brokenFile = file as BrokenFileData;\n      }\n    } catch (err) {\n      this.error = err;\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  render() {\n    if (this.loading) {\n      return <ion-skeleton-text animated={true}></ion-skeleton-text>;\n    }\n    if (this.error) {\n      return <div class=\"error\">{this.error.message}</div>;\n    }\n    if (this.brokenFile) {\n      return <BrokenFile file={this.brokenFile} />;\n    }\n    return <iframe src={this.dataUri}></iframe>;\n  }\n}\n"],"version":3}

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

@@ -3,6 +3,7 @@ import { L as LabelIndex } from './index10.js';
 import { s as subscribePodOs } from './PodOsAware.js';
 import { s as store } from './session.js';
 import './chunk.HVTXQL7M.js';
+import './chunk.YHLNUJ7P.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';

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

@@ -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&encapsulation=shadow","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(--pos-navigation-bar-height);\n  width: var(--pos-navigation-bar-height);\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-md);\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  &:focus {\n    outline: var(--pos-input-focus-outline);\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,\nsl-dropdown[open] button {\n  &.success {\n    background: var(--color-green-200);\n    color: var(--color-green-700);\n  }\n  width: var(--size-full);\n  height: var(--pos-navigation-bar-height);\n  background: var(--pos-background-color);\n  color: var(--pos-normal-text-color);\n\n  p {\n    display: inline-block;\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\nimport './shoelace';\n\n@Component({\n  tag: 'pos-make-findable',\n  styleUrl: 'pos-make-findable.css',\n  shadow: true,\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  @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.showOptions = this.indexes.length > 1;\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 === 0) {\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\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    const button = (\n      <button\n        type=\"button\"\n        slot=\"trigger\"\n        aria-label={label}\n        class={{ main: true, success: this.isIndexed }}\n        onClick={e => this.onClick(e)}\n        title=\"\"\n      >\n        {this.isIndexed ? <IconSuccess /> : <IconMakeFindable />}\n        <p>{label}</p>\n      </button>\n    );\n    if (this.showOptions) {\n      return (\n        <Host>\n          <sl-dropdown>\n            {button}\n            <sl-menu role=\"listbox\">\n              {this.indexes.map((index: LabelIndex) => (\n                <sl-menu-item role=\"option\" value={index} type=\"checkbox\" checked={index.contains(this.uri)}>\n                  <pos-resource uri={index.uri} lazy={true}>\n                    <pos-label></pos-label>\n                  </pos-resource>\n                </sl-menu-item>\n              ))}\n            </sl-menu>\n          </sl-dropdown>\n        </Host>\n      );\n    } else {\n      return button;\n    }\n  }\n\n  @Listen('sl-select')\n  async onSelect(e: CustomEvent<{ item: { value: LabelIndex } }>) {\n    const index = e.detail.item.value;\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}
+{"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&encapsulation=shadow","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(--pos-navigation-bar-height);\n  width: var(--pos-navigation-bar-height);\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-md);\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  &:focus {\n    outline: var(--pos-input-focus-outline);\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,\nsl-dropdown[open] button {\n  &.success {\n    background: var(--color-green-200);\n    color: var(--color-green-700);\n  }\n  width: var(--size-full);\n  height: var(--pos-navigation-bar-height);\n  background: var(--pos-background-color);\n  color: var(--pos-normal-text-color);\n\n  p {\n    display: inline-block;\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\nimport './shoelace';\n\n@Component({\n  tag: 'pos-make-findable',\n  styleUrl: 'pos-make-findable.css',\n  shadow: true,\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  @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.showOptions = this.indexes.length > 1;\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 === 0) {\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\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    const button = (\n      <button\n        type=\"button\"\n        slot=\"trigger\"\n        aria-label={label}\n        class={{ main: true, success: this.isIndexed }}\n        onClick={e => this.onClick(e)}\n        title=\"\"\n      >\n        {this.isIndexed ? <IconSuccess /> : <IconMakeFindable />}\n        <p>{label}</p>\n      </button>\n    );\n    if (this.showOptions) {\n      return (\n        <Host>\n          <sl-dropdown>\n            {button}\n            <sl-menu role=\"listbox\">\n              {this.indexes.map((index: LabelIndex) => (\n                <sl-menu-item role=\"option\" value={index} type=\"checkbox\" checked={index.contains(this.uri)}>\n                  <pos-resource uri={index.uri} lazy={true}>\n                    <pos-label></pos-label>\n                  </pos-resource>\n                </sl-menu-item>\n              ))}\n            </sl-menu>\n          </sl-dropdown>\n        </Host>\n      );\n    } else {\n      return button;\n    }\n  }\n\n  @Listen('sl-select')\n  async onSelect(e: CustomEvent<{ item: { value: LabelIndex } }>) {\n    const index = e.detail.item.value;\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-tool-select.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PosToolSelect extends Components.PosToolSelect, HTMLElement {}
+export const PosToolSelect: {
+    prototype: PosToolSelect;
+    new (): PosToolSelect;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,8 @@
+import { P as PosToolSelect$1, d as defineCustomElement$1 } from './pos-tool-select2.js';
+
+const PosToolSelect = PosToolSelect$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PosToolSelect, defineCustomElement };
+
+//# sourceMappingURL=pos-tool-select.js.map

package/dist/components/pos-tool-select.js.map

@@ -0,0 +1 @@
+{"file":"pos-tool-select.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/pos-tool-select2.js

@@ -0,0 +1,50 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { S as SlIcon } from './chunk.YHLNUJ7P.js';
+
+SlIcon.define("sl-icon");
+
+const posToolSelectCss = ":host {\n  --button-size: var(--size-16);\n  display: block;\n  position: sticky;\n  align-self: flex-start;\n  top: 0;\n  overflow: auto;\n  min-width: var(--button-size);\n  z-index: var(--layer-1);\n}\n\n[role='tablist'] {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  border-right: var(--size-px) solid var(--pos-border-color);\n\n  button {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 0;\n    font-size: var(--size-6);\n    position: relative;\n    overflow: hidden;\n    outline: none;\n    border: none;\n    width: var(--button-size);\n    min-width: var(--button-size);\n    height: var(--button-size);\n    min-height: var(--button-size);\n    background-color: var(--pos-background-color);\n\n    &::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 0;\n      height: 0;\n      border-radius: 100%;\n      background: color-mix(in srgb, var(--pos-primary-color), transparent 50%);\n      transform: translate(-50%, -50%);\n      opacity: 1;\n    }\n\n    &:active::after,\n    &:focus::after {\n      width: calc(var(--button-size) * 1.5);\n      height: calc(var(--button-size) * 1.5);\n      opacity: 0;\n      transition:\n        width 0.5s ease-out,\n        height 0.5s ease-out,\n        opacity 1s ease-out;\n    }\n\n    &:focus-visible {\n      border: var(--size-px) solid var(--pos-primary-color);\n    }\n\n    @media (min-width: 640px) {\n      &[aria-selected] {\n        border-right: var(--size-1) solid var(--pos-primary-color);\n      }\n    }\n\n    .text {\n      font-size: var(--size-3);\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      width: 100%;\n      overflow: hidden;\n    }\n  }\n}\n\n@media (max-width: 640px) {\n  :host {\n    position: fixed;\n    top: unset;\n    bottom: 0;\n    width: 100dvw;\n  }\n  [role='tablist'] {\n    flex-direction: row;\n    background-color: var(--pos-background-color);\n\n    border-top: var(--size-px) solid var(--pos-border-color);\n\n    button {\n      &[aria-selected] {\n        border-top: var(--size-1) solid var(--pos-primary-color);\n      }\n    }\n  }\n}\n";
+const PosToolSelectStyle0 = posToolSelectCss;
+
+const PosToolSelect = /*@__PURE__*/ proxyCustomElement(class PosToolSelect extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.toolSelected = createEvent(this, "pod-os:tool-selected", 7);
+        /**
+         * All tools that are available
+         */
+        this.tools = [];
+    }
+    render() {
+        if (this.tools.length > 1) {
+            return (h("div", { role: "tablist", "aria-label": "Tools", "aria-multiselectable": "false" }, this.tools.map(it => {
+                var _a;
+                return (h("button", { role: "tab", "aria-selected": ((_a = this.selected) === null || _a === void 0 ? void 0 : _a.element) === it.element, onClick: () => this.toolSelected.emit(it) }, h("sl-icon", { name: it.icon }), h("span", { class: "text" }, it.label)));
+            })));
+        }
+        return null;
+    }
+    static get style() { return PosToolSelectStyle0; }
+}, [1, "pos-tool-select", {
+        "selected": [16],
+        "tools": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pos-tool-select"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pos-tool-select":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PosToolSelect);
+            }
+            break;
+    } });
+}
+
+export { PosToolSelect as P, defineCustomElement as d };
+
+//# sourceMappingURL=pos-tool-select2.js.map

package/dist/components/pos-tool-select2.js.map

@@ -0,0 +1 @@
+{"file":"pos-tool-select2.js","mappings":";;;AAMA,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC;;ACNxB,MAAM,gBAAgB,GAAG,8qEAA8qE,CAAC;AACxsE,4BAAe,gBAAgB;;MCSlB,aAAa;IAL1B;;;;;;;;QAgBE,UAAK,GAAiB,EAAE,CAAC;KAwB1B;IAnBC,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACzB,QACE,WAAK,IAAI,EAAC,SAAS,gBAAY,OAAO,0BAAsB,OAAO,IAChE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;;gBAAI,QACpB,cACE,IAAI,EAAC,KAAK,mBACK,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,OAAO,MAAK,EAAE,CAAC,OAAO,EACpD,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,IAEzC,eAAS,IAAI,EAAE,EAAE,CAAC,IAAI,GAAY,EAClC,YAAM,KAAK,EAAC,MAAM,IAAE,EAAE,CAAC,KAAK,CAAQ,CAC7B,EACV;aAAA,CAAC,CACE,EACN;SACH;QACD,OAAO,IAAI,CAAC;KACb;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.ZGGPD2XJ.js","src/components/pos-tool-select/pos-tool-select.css?tag=pos-tool-select&encapsulation=shadow","src/components/pos-tool-select/pos-tool-select.tsx"],"sourcesContent":["import {\n  SlIcon\n} from \"./chunk.YHLNUJ7P.js\";\n\n// src/components/icon/icon.ts\nvar icon_default = SlIcon;\nSlIcon.define(\"sl-icon\");\n\nexport {\n  icon_default\n};\n",":host {\n  --button-size: var(--size-16);\n  display: block;\n  position: sticky;\n  align-self: flex-start;\n  top: 0;\n  overflow: auto;\n  min-width: var(--button-size);\n  z-index: var(--layer-1);\n}\n\n[role='tablist'] {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  border-right: var(--size-px) solid var(--pos-border-color);\n\n  button {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 0;\n    font-size: var(--size-6);\n    position: relative;\n    overflow: hidden;\n    outline: none;\n    border: none;\n    width: var(--button-size);\n    min-width: var(--button-size);\n    height: var(--button-size);\n    min-height: var(--button-size);\n    background-color: var(--pos-background-color);\n\n    &::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 0;\n      height: 0;\n      border-radius: 100%;\n      background: color-mix(in srgb, var(--pos-primary-color), transparent 50%);\n      transform: translate(-50%, -50%);\n      opacity: 1;\n    }\n\n    &:active::after,\n    &:focus::after {\n      width: calc(var(--button-size) * 1.5);\n      height: calc(var(--button-size) * 1.5);\n      opacity: 0;\n      transition:\n        width 0.5s ease-out,\n        height 0.5s ease-out,\n        opacity 1s ease-out;\n    }\n\n    &:focus-visible {\n      border: var(--size-px) solid var(--pos-primary-color);\n    }\n\n    @media (min-width: 640px) {\n      &[aria-selected] {\n        border-right: var(--size-1) solid var(--pos-primary-color);\n      }\n    }\n\n    .text {\n      font-size: var(--size-3);\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      width: 100%;\n      overflow: hidden;\n    }\n  }\n}\n\n@media (max-width: 640px) {\n  :host {\n    position: fixed;\n    top: unset;\n    bottom: 0;\n    width: 100dvw;\n  }\n  [role='tablist'] {\n    flex-direction: row;\n    background-color: var(--pos-background-color);\n\n    border-top: var(--size-px) solid var(--pos-border-color);\n\n    button {\n      &[aria-selected] {\n        border-top: var(--size-1) solid var(--pos-primary-color);\n      }\n    }\n  }\n}\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { ToolConfig } from '../pos-type-router/selectToolsForTypes';\n\nimport './shoelace';\n\n@Component({\n  tag: 'pos-tool-select',\n  styleUrl: 'pos-tool-select.css',\n  shadow: true,\n})\nexport class PosToolSelect {\n  /**\n   * The tool that is currently selected\n   */\n  @Prop()\n  selected: ToolConfig;\n\n  /**\n   * All tools that are available\n   */\n  @Prop()\n  tools: ToolConfig[] = [];\n\n  @Event({ eventName: 'pod-os:tool-selected' })\n  toolSelected: EventEmitter<ToolConfig>;\n\n  render() {\n    if (this.tools.length > 1) {\n      return (\n        <div role=\"tablist\" aria-label=\"Tools\" aria-multiselectable=\"false\">\n          {this.tools.map(it => (\n            <button\n              role=\"tab\"\n              aria-selected={this.selected?.element === it.element}\n              onClick={() => this.toolSelected.emit(it)}\n            >\n              <sl-icon name={it.icon}></sl-icon>\n              <span class=\"text\">{it.label}</span>\n            </button>\n          ))}\n        </div>\n      );\n    }\n    return null;\n  }\n}\n"],"version":3}

package/dist/components/pos-type-router2.js

@@ -1,38 +1,82 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as subscribeResource } from './ResourceAware.js';
+import { d as defineCustomElement$1 } from './pos-tool-select2.js';
 
-var AvailableApps;
-(function (AvailableApps) {
-    AvailableApps["Generic"] = "pos-app-generic";
-    AvailableApps["RdfDocument"] = "pos-app-rdf-document";
-    AvailableApps["DocumentViewer"] = "pos-app-document-viewer";
-    AvailableApps["ImageViewer"] = "pos-app-image-viewer";
-    AvailableApps["LdpContainer"] = "pos-app-ldp-container";
-})(AvailableApps || (AvailableApps = {}));
-// TODO: remove duplication with pos-container-contents/selectIconForTypes
-function containsType(types, typeUri) {
-    return types.some(type => type.uri === typeUri);
+const AvailableTools = {
+    Generic: {
+        element: 'pos-app-generic',
+        label: 'Data',
+        icon: 'list-ul',
+        types: [], // since this is included everywhere, it does not need to specify types
+    },
+    RdfDocument: {
+        element: 'pos-app-rdf-document',
+        label: 'Things',
+        icon: 'diagram-2',
+        types: [
+            {
+                uri: 'http://www.w3.org/2007/ont/link#RDFDocument',
+                priority: 20,
+            },
+        ],
+    },
+    DocumentViewer: {
+        element: 'pos-app-document-viewer',
+        label: 'Doc',
+        icon: 'file-text',
+        types: [
+            {
+                uri: mimeType('application/pdf'),
+                priority: 30,
+            },
+            {
+                uri: 'http://www.w3.org/2007/ont/link#Document',
+                priority: 10,
+            },
+        ],
+    },
+    ImageViewer: {
+        element: 'pos-app-image-viewer',
+        label: 'Pic',
+        icon: 'file-image',
+        types: [
+            {
+                uri: 'http://purl.org/dc/terms/Image',
+                priority: 20,
+            },
+        ],
+    },
+    LdpContainer: {
+        element: 'pos-app-ldp-container',
+        label: 'Content',
+        icon: 'folder',
+        types: [{ uri: 'http://www.w3.org/ns/ldp#Container', priority: 30 }],
+    },
+};
+function mimeType(mimeType) {
+    return 'http://www.w3.org/ns/iana/media-types/' + mimeType + '#Resource';
 }
-function selectAppForTypes(types) {
-    if (containsType(types, 'http://www.w3.org/ns/ldp#Container')) {
-        return AvailableApps.LdpContainer;
-    }
-    else if (containsType(types, 'http://www.w3.org/2007/ont/link#RDFDocument')) {
-        return AvailableApps.RdfDocument;
-    }
-    else if (containsType(types, 'http://www.w3.org/ns/iana/media-types/application/pdf#Resource')) {
-        return AvailableApps.DocumentViewer;
-    }
-    else if (containsType(types, 'http://purl.org/dc/terms/Image')) {
-        return AvailableApps.ImageViewer;
-    }
-    else if (containsType(types, 'http://www.w3.org/2007/ont/link#Document')) {
-        return AvailableApps.DocumentViewer;
-    }
-    else {
-        return AvailableApps.Generic;
-    }
+function selectToolsForTypes(types) {
+    const typeUris = new Set(types.map(type => type.uri));
+    return Object.values(AvailableTools)
+        .map(maxPriorityFor(typeUris))
+        .filter(onlyRelevant)
+        .toSorted(byPriority)
+        .map(it => it.tool)
+        .concat(AvailableTools.Generic);
+}
+const maxPriorityFor = (typeUris) => tool => ({
+    tool,
+    priority: maxPriority(tool.types, typeUris),
+});
+function maxPriority(types, typeUris) {
+    return types.filter(type => typeUris.has(type.uri)).reduce((max, type) => Math.max(max, type.priority), 0);
 }
+const onlyRelevant = (it) => it.priority > 0;
+const byPriority = (a, b) => b.priority - a.priority;
+
+const posTypeRouterCss = "section {\n  display: flex;\n  flex-direction: row;\n}\n\n.transition {\n  position: relative;\n  flex-grow: 1;\n  .tool {\n    position: absolute;\n  }\n}\n\n.tool {\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  &.visible {\n    animation: fadeIn 300ms ease-in;\n  }\n  &.hidden {\n    animation: fadeOut 300ms ease-in;\n  }\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@media (max-width: 640px) {\n  section {\n    --toolbar-size: var(--size-16);\n    flex-direction: column-reverse;\n    padding-bottom: var(--toolbar-size);\n    pos-tool-select {\n      --button-size: var(--toolbar-size);\n    }\n  }\n}\n";
+const PosTypeRouterStyle0 = posTypeRouterCss;
 
 const PosTypeRouter = /*@__PURE__*/ proxyCustomElement(class PosTypeRouter extends HTMLElement {
     constructor() {
@@ -40,34 +84,67 @@ const PosTypeRouter = /*@__PURE__*/ proxyCustomElement(class PosTypeRouter exten
         this.__registerHost();
         this.__attachShadow();
         this.subscribeResource = createEvent(this, "pod-os:resource", 7);
+        this.transitioning = false;
         this.receiveResource = (resource) => {
-            this.types = resource.types();
+            var _a;
+            const types = resource.types();
+            this.availableTools = selectToolsForTypes(types);
+            this.currentTool = (_a = this.availableTools.find(it => it.element === this.initialTool)) !== null && _a !== void 0 ? _a : this.availableTools[0];
         };
     }
     componentWillLoad() {
         subscribeResource(this);
+        const urlParams = new URLSearchParams(window.location.search);
+        const toolParam = urlParams.get('tool');
+        if (toolParam) {
+            this.initialTool = toolParam;
+        }
+    }
+    handleToolSelected(event) {
+        this.oldTool = this.currentTool;
+        this.currentTool = event.detail;
+        this.transitioning = true;
+        const url = new URL(window.location.href);
+        url.searchParams.set('tool', event.detail.element);
+        window.history.replaceState({}, '', url.toString());
     }
     render() {
-        return this.types ? this.renderApp() : null;
+        return this.availableTools ? this.renderApp() : null;
     }
     renderApp() {
-        const App = selectAppForTypes(this.types);
-        return h(App, null);
+        var _a;
+        const SelectedTool = this.currentTool.element;
+        const OldTool = (_a = this.oldTool) === null || _a === void 0 ? void 0 : _a.element;
+        return (h("section", null, h("pos-tool-select", { selected: this.currentTool, tools: this.availableTools }), h("div", { class: { transition: this.transitioning }, onAnimationEnd: () => this.removeOldTool() }, OldTool && h(OldTool, { class: "tool hidden" }), h(SelectedTool, { class: "tool visible" }))));
+    }
+    removeOldTool() {
+        this.oldTool = null;
+        this.transitioning = false;
     }
+    static get style() { return PosTypeRouterStyle0; }
 }, [1, "pos-type-router", {
-        "types": [32]
-    }]);
+        "initialTool": [32],
+        "availableTools": [32],
+        "oldTool": [32],
+        "currentTool": [32],
+        "transitioning": [32]
+    }, [[0, "pod-os:tool-selected", "handleToolSelected"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-type-router"];
+    const components = ["pos-type-router", "pos-tool-select"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-type-router":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosTypeRouter);
             }
             break;
+        case "pos-tool-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
     } });
 }
 

package/dist/components/pos-type-router2.js.map

@@ -1 +1 @@
-{"file":"pos-type-router2.js","mappings":";;;AAEA,IAAY,aAMX;AAND,WAAY,aAAa;IACvB,4CAA2B,CAAA;IAC3B,qDAAoC,CAAA;IACpC,2DAA0C,CAAA;IAC1C,qDAAoC,CAAA;IACpC,uDAAsC,CAAA;AACxC,CAAC,EANW,aAAa,KAAb,aAAa,QAMxB;AAED;AACA,SAAS,YAAY,CAAC,KAAgB,EAAE,OAAe;IACrD,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,GAAG,KAAK,OAAO,CAAC,CAAC;AAClD,CAAC;SAEe,iBAAiB,CAAC,KAAgB;IAChD,IAAI,YAAY,CAAC,KAAK,EAAE,oCAAoC,CAAC,EAAE;QAC7D,OAAO,aAAa,CAAC,YAAY,CAAC;KACnC;SAAM,IAAI,YAAY,CAAC,KAAK,EAAE,6CAA6C,CAAC,EAAE;QAC7E,OAAO,aAAa,CAAC,WAAW,CAAC;KAClC;SAAM,IAAI,YAAY,CAAC,KAAK,EAAE,gEAAgE,CAAC,EAAE;QAChG,OAAO,aAAa,CAAC,cAAc,CAAC;KACrC;SAAM,IAAI,YAAY,CAAC,KAAK,EAAE,gCAAgC,CAAC,EAAE;QAChE,OAAO,aAAa,CAAC,WAAW,CAAC;KAClC;SAAM,IAAI,YAAY,CAAC,KAAK,EAAE,0CAA0C,CAAC,EAAE;QAC1E,OAAO,aAAa,CAAC,cAAc,CAAC;KACrC;SAAM;QACL,OAAO,aAAa,CAAC,OAAO,CAAC;KAC9B;AACH;;MCpBa,aAAa;IAJ1B;;;;;QAcE,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,EAAE,CAAC;SAC/B,CAAC;KAUH;IAhBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAMD,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC;KAC7C;IAEO,SAAS;QACf,MAAM,GAAG,GAAG,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1C,OAAO,EAAC,GAAG,OAAG,CAAC;KAChB;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-type-router/selectAppForTypes.ts","src/components/pos-type-router/pos-type-router.tsx"],"sourcesContent":["import { RdfType } from '@pod-os/core';\n\nexport enum AvailableApps {\n  Generic = 'pos-app-generic',\n  RdfDocument = 'pos-app-rdf-document',\n  DocumentViewer = 'pos-app-document-viewer',\n  ImageViewer = 'pos-app-image-viewer',\n  LdpContainer = 'pos-app-ldp-container',\n}\n\n// TODO: remove duplication with pos-container-contents/selectIconForTypes\nfunction containsType(types: RdfType[], typeUri: string) {\n  return types.some(type => type.uri === typeUri);\n}\n\nexport function selectAppForTypes(types: RdfType[]) {\n  if (containsType(types, 'http://www.w3.org/ns/ldp#Container')) {\n    return AvailableApps.LdpContainer;\n  } else if (containsType(types, 'http://www.w3.org/2007/ont/link#RDFDocument')) {\n    return AvailableApps.RdfDocument;\n  } else if (containsType(types, 'http://www.w3.org/ns/iana/media-types/application/pdf#Resource')) {\n    return AvailableApps.DocumentViewer;\n  } else if (containsType(types, 'http://purl.org/dc/terms/Image')) {\n    return AvailableApps.ImageViewer;\n  } else if (containsType(types, 'http://www.w3.org/2007/ont/link#Document')) {\n    return AvailableApps.DocumentViewer;\n  } else {\n    return AvailableApps.Generic;\n  }\n}\n","import { RdfType, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\nimport { selectAppForTypes } from './selectAppForTypes';\n\n@Component({\n  tag: 'pos-type-router',\n  shadow: true,\n})\nexport class PosTypeRouter implements ResourceAware {\n  @State() types: RdfType[];\n\n  @Event({ eventName: 'pod-os:resource' })\n  subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.types = resource.types();\n  };\n\n  render() {\n    return this.types ? this.renderApp() : null;\n  }\n\n  private renderApp() {\n    const App = selectAppForTypes(this.types);\n    return <App />;\n  }\n}\n"],"version":3}
+{"file":"pos-type-router2.js","mappings":"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","names":[],"sources":["src/components/pos-type-router/selectToolsForTypes.ts","src/components/pos-type-router/pos-type-router.css?tag=pos-type-router&encapsulation=shadow","src/components/pos-type-router/pos-type-router.tsx"],"sourcesContent":["import { RdfType } from '@pod-os/core';\n\nexport interface ToolConfig {\n  element: string;\n  label: string;\n  icon: string;\n  types: TypePriority[];\n}\n\ninterface TypePriority {\n  uri: string;\n  priority: number;\n}\n\ninterface ToolPriority {\n  tool: ToolConfig;\n  priority: number;\n}\n\nexport const AvailableTools: { [key: string]: ToolConfig } = {\n  Generic: {\n    element: 'pos-app-generic',\n    label: 'Data',\n    icon: 'list-ul',\n    types: [], // since this is included everywhere, it does not need to specify types\n  },\n  RdfDocument: {\n    element: 'pos-app-rdf-document',\n    label: 'Things',\n    icon: 'diagram-2',\n    types: [\n      {\n        uri: 'http://www.w3.org/2007/ont/link#RDFDocument',\n        priority: 20,\n      },\n    ],\n  },\n  DocumentViewer: {\n    element: 'pos-app-document-viewer',\n    label: 'Doc',\n    icon: 'file-text',\n    types: [\n      {\n        uri: mimeType('application/pdf'),\n        priority: 30,\n      },\n      {\n        uri: 'http://www.w3.org/2007/ont/link#Document',\n        priority: 10,\n      },\n    ],\n  },\n  ImageViewer: {\n    element: 'pos-app-image-viewer',\n    label: 'Pic',\n    icon: 'file-image',\n    types: [\n      {\n        uri: 'http://purl.org/dc/terms/Image',\n        priority: 20,\n      },\n    ],\n  },\n  LdpContainer: {\n    element: 'pos-app-ldp-container',\n    label: 'Content',\n    icon: 'folder',\n    types: [{ uri: 'http://www.w3.org/ns/ldp#Container', priority: 30 }],\n  },\n};\n\nfunction mimeType(mimeType: string) {\n  return 'http://www.w3.org/ns/iana/media-types/' + mimeType + '#Resource';\n}\n\nexport function selectToolsForTypes(types: RdfType[]) {\n  const typeUris = new Set(types.map(type => type.uri));\n\n  return Object.values(AvailableTools)\n    .map(maxPriorityFor(typeUris))\n    .filter(onlyRelevant)\n    .toSorted(byPriority)\n    .map(it => it.tool)\n    .concat(AvailableTools.Generic);\n}\n\nconst maxPriorityFor = (typeUris: Set<string>) => tool =>\n  ({\n    tool,\n    priority: maxPriority(tool.types, typeUris),\n  }) as ToolPriority;\n\nfunction maxPriority(types: TypePriority[], typeUris: Set<string>): number {\n  return types.filter(type => typeUris.has(type.uri)).reduce((max, type) => Math.max(max, type.priority), 0);\n}\n\nconst onlyRelevant = (it: ToolPriority) => it.priority > 0;\n\nconst byPriority = (a: ToolPriority, b: ToolPriority) => b.priority - a.priority;\n","section {\n  display: flex;\n  flex-direction: row;\n}\n\n.transition {\n  position: relative;\n  flex-grow: 1;\n  .tool {\n    position: absolute;\n  }\n}\n\n.tool {\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  &.visible {\n    animation: fadeIn 300ms ease-in;\n  }\n  &.hidden {\n    animation: fadeOut 300ms ease-in;\n  }\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@media (max-width: 640px) {\n  section {\n    --toolbar-size: var(--size-16);\n    flex-direction: column-reverse;\n    padding-bottom: var(--toolbar-size);\n    pos-tool-select {\n      --button-size: var(--toolbar-size);\n    }\n  }\n}\n","import { Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Listen, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\nimport { selectToolsForTypes, ToolConfig } from './selectToolsForTypes';\n\n@Component({\n  tag: 'pos-type-router',\n  shadow: true,\n  styleUrl: 'pos-type-router.css',\n})\nexport class PosTypeRouter implements ResourceAware {\n  @State() initialTool: string;\n  @State() availableTools: ToolConfig[];\n  @State() oldTool: ToolConfig;\n  @State() currentTool: ToolConfig;\n\n  @State() transitioning: boolean = false;\n\n  @Event({ eventName: 'pod-os:resource' })\n  subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n    const urlParams = new URLSearchParams(window.location.search);\n    const toolParam = urlParams.get('tool');\n    if (toolParam) {\n      this.initialTool = toolParam;\n    }\n  }\n\n  @Listen('pod-os:tool-selected')\n  handleToolSelected(event: CustomEvent<ToolConfig>) {\n    this.oldTool = this.currentTool;\n    this.currentTool = event.detail;\n    this.transitioning = true;\n    const url = new URL(window.location.href);\n    url.searchParams.set('tool', event.detail.element);\n    window.history.replaceState({}, '', url.toString());\n  }\n\n  receiveResource = (resource: Thing) => {\n    const types = resource.types();\n    this.availableTools = selectToolsForTypes(types);\n    this.currentTool = this.availableTools.find(it => it.element === this.initialTool) ?? this.availableTools[0];\n  };\n\n  render() {\n    return this.availableTools ? this.renderApp() : null;\n  }\n\n  private renderApp() {\n    const SelectedTool = this.currentTool.element;\n    const OldTool = this.oldTool?.element;\n    return (\n      <section>\n        <pos-tool-select selected={this.currentTool} tools={this.availableTools}></pos-tool-select>\n        <div class={{ transition: this.transitioning }} onAnimationEnd={() => this.removeOldTool()}>\n          {OldTool && <OldTool class=\"tool hidden\"></OldTool>}\n          <SelectedTool class=\"tool visible\"></SelectedTool>\n        </div>\n      </section>\n    );\n  }\n\n  private removeOldTool() {\n    this.oldTool = null;\n    this.transitioning = false;\n  }\n}\n"],"version":3}

package/dist/components/pos-user-menu2.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { i, c as component_styles_default, S as SlIcon, _ as __decorateClass, w as watch, a as ShoelaceElement, x, e, r, n } from './chunk.HVTXQL7M.js';
+import { e } from './chunk.HVTXQL7M.js';
+import { i, c as component_styles_default, S as SlIcon, _ as __decorateClass, w as watch, a as ShoelaceElement, x, r, n } from './chunk.YHLNUJ7P.js';
 import { d as defineCustomElement$7 } from './icon.js';
 import { d as defineCustomElement$6 } from './progress-bar.js';
 import { d as defineCustomElement$5 } from './skeleton-text.js';

package/dist/components/pos-user-menu2.js.map

@@ -1 +1 @@
-{"file":"pos-user-menu2.js","mappings":"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","names":["css","html","classMap","state","property"],"sources":["../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.K35GSB4N.js","../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.WREZSXX4.js","../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.24ZZSBUF.js","../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.SUSCR7CI.js","../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.5ZSXZIE6.js","../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.IVVHNXMC.js","src/components/pos-user-menu/pos-user-menu.css?tag=pos-user-menu&encapsulation=shadow","src/components/pos-user-menu/pos-user-menu.tsx"],"sourcesContent":["// src/components/avatar/avatar.styles.ts\nimport { css } from \"lit\";\nvar avatar_styles_default = css`\n  :host {\n    display: inline-block;\n\n    --size: 3rem;\n  }\n\n  .avatar {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    width: var(--size);\n    height: var(--size);\n    background-color: var(--sl-color-neutral-400);\n    font-family: var(--sl-font-sans);\n    font-size: calc(var(--size) * 0.5);\n    font-weight: var(--sl-font-weight-normal);\n    color: var(--sl-color-neutral-0);\n    user-select: none;\n    -webkit-user-select: none;\n    vertical-align: middle;\n  }\n\n  .avatar--circle,\n  .avatar--circle .avatar__image {\n    border-radius: var(--sl-border-radius-circle);\n  }\n\n  .avatar--rounded,\n  .avatar--rounded .avatar__image {\n    border-radius: var(--sl-border-radius-medium);\n  }\n\n  .avatar--square {\n    border-radius: 0;\n  }\n\n  .avatar__icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  .avatar__initials {\n    line-height: 1;\n    text-transform: uppercase;\n  }\n\n  .avatar__image {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    overflow: hidden;\n  }\n`;\n\nexport {\n  avatar_styles_default\n};\n","import {\n  avatar_styles_default\n} from \"./chunk.K35GSB4N.js\";\nimport {\n  SlIcon\n} from \"./chunk.YHLNUJ7P.js\";\nimport {\n  watch\n} from \"./chunk.GMYPQTFK.js\";\nimport {\n  component_styles_default\n} from \"./chunk.TUVJKY7S.js\";\nimport {\n  ShoelaceElement\n} from \"./chunk.4TUIT776.js\";\nimport {\n  __decorateClass\n} from \"./chunk.KAW7D32O.js\";\n\n// src/components/avatar/avatar.component.ts\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nvar SlAvatar = class extends ShoelaceElement {\n  constructor() {\n    super(...arguments);\n    this.hasError = false;\n    this.image = \"\";\n    this.label = \"\";\n    this.initials = \"\";\n    this.loading = \"eager\";\n    this.shape = \"circle\";\n  }\n  handleImageChange() {\n    this.hasError = false;\n  }\n  handleImageLoadError() {\n    this.hasError = true;\n    this.emit(\"sl-error\");\n  }\n  render() {\n    const avatarWithImage = html`\n      <img\n        part=\"image\"\n        class=\"avatar__image\"\n        src=\"${this.image}\"\n        loading=\"${this.loading}\"\n        alt=\"\"\n        @error=\"${this.handleImageLoadError}\"\n      />\n    `;\n    let avatarWithoutImage = html``;\n    if (this.initials) {\n      avatarWithoutImage = html`<div part=\"initials\" class=\"avatar__initials\">${this.initials}</div>`;\n    } else {\n      avatarWithoutImage = html`\n        <div part=\"icon\" class=\"avatar__icon\" aria-hidden=\"true\">\n          <slot name=\"icon\">\n            <sl-icon name=\"person-fill\" library=\"system\"></sl-icon>\n          </slot>\n        </div>\n      `;\n    }\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n      avatar: true,\n      \"avatar--circle\": this.shape === \"circle\",\n      \"avatar--rounded\": this.shape === \"rounded\",\n      \"avatar--square\": this.shape === \"square\"\n    })}\n        role=\"img\"\n        aria-label=${this.label}\n      >\n        ${this.image && !this.hasError ? avatarWithImage : avatarWithoutImage}\n      </div>\n    `;\n  }\n};\nSlAvatar.styles = [component_styles_default, avatar_styles_default];\nSlAvatar.dependencies = {\n  \"sl-icon\": SlIcon\n};\n__decorateClass([\n  state()\n], SlAvatar.prototype, \"hasError\", 2);\n__decorateClass([\n  property()\n], SlAvatar.prototype, \"image\", 2);\n__decorateClass([\n  property()\n], SlAvatar.prototype, \"label\", 2);\n__decorateClass([\n  property()\n], SlAvatar.prototype, \"initials\", 2);\n__decorateClass([\n  property()\n], SlAvatar.prototype, \"loading\", 2);\n__decorateClass([\n  property({ reflect: true })\n], SlAvatar.prototype, \"shape\", 2);\n__decorateClass([\n  watch(\"image\")\n], SlAvatar.prototype, \"handleImageChange\", 1);\n\nexport {\n  SlAvatar\n};\n","import {\n  SlAvatar\n} from \"./chunk.WREZSXX4.js\";\n\n// src/components/avatar/avatar.ts\nvar avatar_default = SlAvatar;\nSlAvatar.define(\"sl-avatar\");\n\nexport {\n  avatar_default\n};\n","// src/components/divider/divider.styles.ts\nimport { css } from \"lit\";\nvar divider_styles_default = css`\n  :host {\n    --color: var(--sl-panel-border-color);\n    --width: var(--sl-panel-border-width);\n    --spacing: var(--sl-spacing-medium);\n  }\n\n  :host(:not([vertical])) {\n    display: block;\n    border-top: solid var(--width) var(--color);\n    margin: var(--spacing) 0;\n  }\n\n  :host([vertical]) {\n    display: inline-block;\n    height: 100%;\n    border-left: solid var(--width) var(--color);\n    margin: 0 var(--spacing);\n  }\n`;\n\nexport {\n  divider_styles_default\n};\n","import {\n  divider_styles_default\n} from \"./chunk.SUSCR7CI.js\";\nimport {\n  watch\n} from \"./chunk.GMYPQTFK.js\";\nimport {\n  component_styles_default\n} from \"./chunk.TUVJKY7S.js\";\nimport {\n  ShoelaceElement\n} from \"./chunk.4TUIT776.js\";\nimport {\n  __decorateClass\n} from \"./chunk.KAW7D32O.js\";\n\n// src/components/divider/divider.component.ts\nimport { property } from \"lit/decorators.js\";\nvar SlDivider = class extends ShoelaceElement {\n  constructor() {\n    super(...arguments);\n    this.vertical = false;\n  }\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"separator\");\n  }\n  handleVerticalChange() {\n    this.setAttribute(\"aria-orientation\", this.vertical ? \"vertical\" : \"horizontal\");\n  }\n};\nSlDivider.styles = [component_styles_default, divider_styles_default];\n__decorateClass([\n  property({ type: Boolean, reflect: true })\n], SlDivider.prototype, \"vertical\", 2);\n__decorateClass([\n  watch(\"vertical\")\n], SlDivider.prototype, \"handleVerticalChange\", 1);\n\nexport {\n  SlDivider\n};\n","import {\n  SlDivider\n} from \"./chunk.5ZSXZIE6.js\";\n\n// src/components/divider/divider.ts\nvar divider_default = SlDivider;\nSlDivider.define(\"sl-divider\");\n\nexport {\n  divider_default\n};\n","button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  cursor: pointer;\n  border-radius: 50%;\n  pos-picture {\n    --width: 40px;\n    --height: 40px;\n    --border-radius: 50%;\n  }\n  sl-avatar {\n    --size: 40px;\n  }\n}\n\nsl-dropdown {\n  display: block;\n}\n","import { Component, Event, EventEmitter, h, Listen, Prop } from '@stencil/core';\n\nimport './shoelace';\n\n@Component({\n  tag: 'pos-user-menu',\n  shadow: true,\n  styleUrl: 'pos-user-menu.css',\n})\nexport class PosUserMenu {\n  @Prop()\n  webId!: string;\n\n  @Event({ eventName: 'pod-os:logout' })\n  logout: EventEmitter;\n\n  @Event({ eventName: 'pod-os:link' })\n  link: EventEmitter;\n\n  @Listen('sl-select')\n  onSelect(e: CustomEvent<{ item: { value: 'profile' | 'logout' | 'dashboard' } }>) {\n    const { value } = e.detail.item;\n    if (value === 'logout') {\n      this.logout.emit();\n    } else if (value === 'profile') {\n      this.link.emit(this.webId);\n    } else if (value === 'dashboard') {\n      this.link.emit('pod-os:dashboard');\n    } else if (value === 'settings') {\n      this.link.emit('pod-os:settings');\n    }\n  }\n\n  render() {\n    if (!this.webId) return null; //?\n    return (\n      <pos-resource uri={this.webId}>\n        <sl-dropdown>\n          <button slot=\"trigger\" aria-label=\"User menu\">\n            <pos-picture>\n              <sl-avatar></sl-avatar>\n            </pos-picture>\n          </button>\n          <sl-menu>\n            <sl-menu-item value=\"dashboard\">Dashboard</sl-menu-item>\n            <sl-menu-item value=\"profile\">\n              <pos-label></pos-label>\n            </sl-menu-item>\n            <sl-menu-item value=\"settings\">Settings</sl-menu-item>\n            <sl-divider></sl-divider>\n            <sl-menu-item value=\"logout\">Logout</sl-menu-item>\n          </sl-menu>\n        </sl-dropdown>\n      </pos-resource>\n    );\n  }\n}\n"],"version":3}
+{"file":"pos-user-menu2.js","mappings":"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","names":["css","html","classMap","state","property"],"sources":["../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.K35GSB4N.js","../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.WREZSXX4.js","../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.24ZZSBUF.js","../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.SUSCR7CI.js","../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.5ZSXZIE6.js","../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.IVVHNXMC.js","src/components/pos-user-menu/pos-user-menu.css?tag=pos-user-menu&encapsulation=shadow","src/components/pos-user-menu/pos-user-menu.tsx"],"sourcesContent":["// src/components/avatar/avatar.styles.ts\nimport { css } from \"lit\";\nvar avatar_styles_default = css`\n  :host {\n    display: inline-block;\n\n    --size: 3rem;\n  }\n\n  .avatar {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    width: var(--size);\n    height: var(--size);\n    background-color: var(--sl-color-neutral-400);\n    font-family: var(--sl-font-sans);\n    font-size: calc(var(--size) * 0.5);\n    font-weight: var(--sl-font-weight-normal);\n    color: var(--sl-color-neutral-0);\n    user-select: none;\n    -webkit-user-select: none;\n    vertical-align: middle;\n  }\n\n  .avatar--circle,\n  .avatar--circle .avatar__image {\n    border-radius: var(--sl-border-radius-circle);\n  }\n\n  .avatar--rounded,\n  .avatar--rounded .avatar__image {\n    border-radius: var(--sl-border-radius-medium);\n  }\n\n  .avatar--square {\n    border-radius: 0;\n  }\n\n  .avatar__icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  .avatar__initials {\n    line-height: 1;\n    text-transform: uppercase;\n  }\n\n  .avatar__image {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    overflow: hidden;\n  }\n`;\n\nexport {\n  avatar_styles_default\n};\n","import {\n  avatar_styles_default\n} from \"./chunk.K35GSB4N.js\";\nimport {\n  SlIcon\n} from \"./chunk.YHLNUJ7P.js\";\nimport {\n  watch\n} from \"./chunk.GMYPQTFK.js\";\nimport {\n  component_styles_default\n} from \"./chunk.TUVJKY7S.js\";\nimport {\n  ShoelaceElement\n} from \"./chunk.4TUIT776.js\";\nimport {\n  __decorateClass\n} from \"./chunk.KAW7D32O.js\";\n\n// src/components/avatar/avatar.component.ts\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nvar SlAvatar = class extends ShoelaceElement {\n  constructor() {\n    super(...arguments);\n    this.hasError = false;\n    this.image = \"\";\n    this.label = \"\";\n    this.initials = \"\";\n    this.loading = \"eager\";\n    this.shape = \"circle\";\n  }\n  handleImageChange() {\n    this.hasError = false;\n  }\n  handleImageLoadError() {\n    this.hasError = true;\n    this.emit(\"sl-error\");\n  }\n  render() {\n    const avatarWithImage = html`\n      <img\n        part=\"image\"\n        class=\"avatar__image\"\n        src=\"${this.image}\"\n        loading=\"${this.loading}\"\n        alt=\"\"\n        @error=\"${this.handleImageLoadError}\"\n      />\n    `;\n    let avatarWithoutImage = html``;\n    if (this.initials) {\n      avatarWithoutImage = html`<div part=\"initials\" class=\"avatar__initials\">${this.initials}</div>`;\n    } else {\n      avatarWithoutImage = html`\n        <div part=\"icon\" class=\"avatar__icon\" aria-hidden=\"true\">\n          <slot name=\"icon\">\n            <sl-icon name=\"person-fill\" library=\"system\"></sl-icon>\n          </slot>\n        </div>\n      `;\n    }\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n      avatar: true,\n      \"avatar--circle\": this.shape === \"circle\",\n      \"avatar--rounded\": this.shape === \"rounded\",\n      \"avatar--square\": this.shape === \"square\"\n    })}\n        role=\"img\"\n        aria-label=${this.label}\n      >\n        ${this.image && !this.hasError ? avatarWithImage : avatarWithoutImage}\n      </div>\n    `;\n  }\n};\nSlAvatar.styles = [component_styles_default, avatar_styles_default];\nSlAvatar.dependencies = {\n  \"sl-icon\": SlIcon\n};\n__decorateClass([\n  state()\n], SlAvatar.prototype, \"hasError\", 2);\n__decorateClass([\n  property()\n], SlAvatar.prototype, \"image\", 2);\n__decorateClass([\n  property()\n], SlAvatar.prototype, \"label\", 2);\n__decorateClass([\n  property()\n], SlAvatar.prototype, \"initials\", 2);\n__decorateClass([\n  property()\n], SlAvatar.prototype, \"loading\", 2);\n__decorateClass([\n  property({ reflect: true })\n], SlAvatar.prototype, \"shape\", 2);\n__decorateClass([\n  watch(\"image\")\n], SlAvatar.prototype, \"handleImageChange\", 1);\n\nexport {\n  SlAvatar\n};\n","import {\n  SlAvatar\n} from \"./chunk.WREZSXX4.js\";\n\n// src/components/avatar/avatar.ts\nvar avatar_default = SlAvatar;\nSlAvatar.define(\"sl-avatar\");\n\nexport {\n  avatar_default\n};\n","// src/components/divider/divider.styles.ts\nimport { css } from \"lit\";\nvar divider_styles_default = css`\n  :host {\n    --color: var(--sl-panel-border-color);\n    --width: var(--sl-panel-border-width);\n    --spacing: var(--sl-spacing-medium);\n  }\n\n  :host(:not([vertical])) {\n    display: block;\n    border-top: solid var(--width) var(--color);\n    margin: var(--spacing) 0;\n  }\n\n  :host([vertical]) {\n    display: inline-block;\n    height: 100%;\n    border-left: solid var(--width) var(--color);\n    margin: 0 var(--spacing);\n  }\n`;\n\nexport {\n  divider_styles_default\n};\n","import {\n  divider_styles_default\n} from \"./chunk.SUSCR7CI.js\";\nimport {\n  watch\n} from \"./chunk.GMYPQTFK.js\";\nimport {\n  component_styles_default\n} from \"./chunk.TUVJKY7S.js\";\nimport {\n  ShoelaceElement\n} from \"./chunk.4TUIT776.js\";\nimport {\n  __decorateClass\n} from \"./chunk.KAW7D32O.js\";\n\n// src/components/divider/divider.component.ts\nimport { property } from \"lit/decorators.js\";\nvar SlDivider = class extends ShoelaceElement {\n  constructor() {\n    super(...arguments);\n    this.vertical = false;\n  }\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"separator\");\n  }\n  handleVerticalChange() {\n    this.setAttribute(\"aria-orientation\", this.vertical ? \"vertical\" : \"horizontal\");\n  }\n};\nSlDivider.styles = [component_styles_default, divider_styles_default];\n__decorateClass([\n  property({ type: Boolean, reflect: true })\n], SlDivider.prototype, \"vertical\", 2);\n__decorateClass([\n  watch(\"vertical\")\n], SlDivider.prototype, \"handleVerticalChange\", 1);\n\nexport {\n  SlDivider\n};\n","import {\n  SlDivider\n} from \"./chunk.5ZSXZIE6.js\";\n\n// src/components/divider/divider.ts\nvar divider_default = SlDivider;\nSlDivider.define(\"sl-divider\");\n\nexport {\n  divider_default\n};\n","button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  cursor: pointer;\n  border-radius: 50%;\n  pos-picture {\n    --width: 40px;\n    --height: 40px;\n    --border-radius: 50%;\n  }\n  sl-avatar {\n    --size: 40px;\n  }\n}\n\nsl-dropdown {\n  display: block;\n}\n","import { Component, Event, EventEmitter, h, Listen, Prop } from '@stencil/core';\n\nimport './shoelace';\n\n@Component({\n  tag: 'pos-user-menu',\n  shadow: true,\n  styleUrl: 'pos-user-menu.css',\n})\nexport class PosUserMenu {\n  @Prop()\n  webId!: string;\n\n  @Event({ eventName: 'pod-os:logout' })\n  logout: EventEmitter;\n\n  @Event({ eventName: 'pod-os:link' })\n  link: EventEmitter;\n\n  @Listen('sl-select')\n  onSelect(e: CustomEvent<{ item: { value: 'profile' | 'logout' | 'dashboard' } }>) {\n    const { value } = e.detail.item;\n    if (value === 'logout') {\n      this.logout.emit();\n    } else if (value === 'profile') {\n      this.link.emit(this.webId);\n    } else if (value === 'dashboard') {\n      this.link.emit('pod-os:dashboard');\n    } else if (value === 'settings') {\n      this.link.emit('pod-os:settings');\n    }\n  }\n\n  render() {\n    if (!this.webId) return null; //?\n    return (\n      <pos-resource uri={this.webId}>\n        <sl-dropdown>\n          <button slot=\"trigger\" aria-label=\"User menu\">\n            <pos-picture>\n              <sl-avatar></sl-avatar>\n            </pos-picture>\n          </button>\n          <sl-menu>\n            <sl-menu-item value=\"dashboard\">Dashboard</sl-menu-item>\n            <sl-menu-item value=\"profile\">\n              <pos-label></pos-label>\n            </sl-menu-item>\n            <sl-menu-item value=\"settings\">Settings</sl-menu-item>\n            <sl-divider></sl-divider>\n            <sl-menu-item value=\"logout\">Logout</sl-menu-item>\n          </sl-menu>\n        </sl-dropdown>\n      </pos-resource>\n    );\n  }\n}\n"],"version":3}