npm - @pod-os/elements - Versions diffs - 0.26.1-rc.39433d3.0 → 0.26.1-rc.5fcb63b.0 - Mend

@pod-os/elements 0.26.1-rc.39433d3.0 → 0.26.1-rc.5fcb63b.0

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

Files changed (125) hide show

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

@@ -2,17 +2,19 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { L as LabelIndex } from './index10.js';
 import { s as subscribePodOs } from './PodOsAware.js';
 import { s as store } from './session.js';
+import './chunk.HVTXQL7M.js';
 import { d as defineCustomElement$3 } from './progress-bar.js';
 import { d as defineCustomElement$2 } from './pos-label2.js';
 import { d as defineCustomElement$1 } from './pos-resource2.js';
-const posMakeFindableCss = "button.main {\n  display: flex;\n  transition:\n    width 200ms,\n    background-color 500ms,\n    color 500ms,\n    border-color 500ms;\n  max-width: var(--size-40);\n  flex-direction: row;\n  overflow: hidden;\n  height: var(--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\n.options {\n  position: absolute;\n  animation: fadeIn 300ms;\n  padding: 0;\n  margin-top: var(--size-1);\n  z-index: var(--layer-top);\n\n  ol {\n    display: flex;\n    flex-direction: column;\n    box-shadow: var(--shadow-md);\n    backdrop-filter: var(--blur-md);\n    border-radius: var(--radius-xs);\n    overflow: hidden;\n    color: var(--color-grey-900);\n    background-color: var(--color-grey-200);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    label {\n      display: flex;\n      justify-content: flex-start;\n      align-items: center;\n      transition: all 300ms var(--ease-in-out-sine);\n      margin: 0;\n      border: none;\n      outline: none;\n      padding: var(--size-2);\n      width: var(--size-full);\n\n      &:hover,\n      &:focus {\n        filter: brightness(80%);\n      }\n\n      &:active {\n        filter: brightness(90%);\n      }\n    }\n  }\n  label:has(input:checked) {\n    background-color: var(--color-green-100);\n  }\n}\n\nsvg {\n  display: inline-block;\n  height: var(--size-6);\n  flex-shrink: 0;\n  flex-grow: 0;\n  width: var(--size-6);\n}\n\nbutton.main:hover,\nbutton.open {\n  &.success {\n    background: var(--color-green-200);\n  }\n  width: var(--size-full);\n  height: var(--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\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n";
+const posMakeFindableCss = "button.main {\n  display: flex;\n  transition:\n    width 200ms,\n    background-color 500ms,\n    color 500ms,\n    border-color 500ms;\n  max-width: var(--size-40);\n  flex-direction: row;\n  overflow: hidden;\n  height: var(--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";
 const PosMakeFindableStyle0 = posMakeFindableCss;
 const PosMakeFindable = /*@__PURE__*/ proxyCustomElement(class PosMakeFindable extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.__attachShadow();
         this.subscribePodOs = createEvent(this, "pod-os:init", 7);
         this.errorEmitter = createEvent(this, "pod-os:error", 7);
         this.indexUpdatedEmitter = createEvent(this, "pod-os:search:index-updated", 7);
@@ -35,17 +37,6 @@ const PosMakeFindable = /*@__PURE__*/ proxyCustomElement(class PosMakeFindable e
     disconnectedCallback() {
         this.unsubscribeSessionChange && this.unsubscribeSessionChange();
     }
-    hideOptions(event) {
-        // @ts-ignore
-        if (!this.el.contains(event.target)) {
-            this.showOptions = false;
-        }
-    }
-    handleKeyDown(ev) {
-        if (ev.key === 'Escape') {
-            this.showOptions = false;
-        }
-    }
     updateUri(uri) {
         this.thing = this.os.store.get(uri);
         this.isIndexed = this.checkIfIndexed(uri);
@@ -56,6 +47,7 @@ const PosMakeFindable = /*@__PURE__*/ proxyCustomElement(class PosMakeFindable e
     getLabelIndexes(profile) {
         if (profile) {
             this.indexes = profile.getPrivateLabelIndexes().map(it => this.os.store.get(it).assume(LabelIndex));
+            this.showOptions = this.indexes.length > 1;
             this.isIndexed = this.checkIfIndexed(this.uri);
         }
     }
@@ -66,10 +58,7 @@ const PosMakeFindable = /*@__PURE__*/ proxyCustomElement(class PosMakeFindable e
             await this.addToLabelIndex(index);
             this.indexUpdatedEmitter.emit(index);
         }
-        else if (this.indexes.length > 1) {
-            this.showOptions = !this.showOptions;
-        }
-        else {
+        else if (this.indexes.length === 0) {
             const index = await this.createDefaultLabelIndex();
             await this.addToLabelIndex(index);
             this.indexCreatedEmitter.emit(index);
@@ -83,7 +72,6 @@ const PosMakeFindable = /*@__PURE__*/ proxyCustomElement(class PosMakeFindable e
         catch (e) {
             this.errorEmitter.emit(e);
         }
-        this.showOptions = false;
     }
     async createDefaultLabelIndex() {
         try {
@@ -98,9 +86,16 @@ const PosMakeFindable = /*@__PURE__*/ proxyCustomElement(class PosMakeFindable e
             return null;
         }
         const label = 'Make this findable';
-        return (h(Host, null, h("button", { type: "button", "aria-label": label, class: { main: true, open: this.showOptions, success: this.isIndexed }, onClick: e => this.onClick(e), title: "" }, this.isIndexed ? h(IconSuccess, null) : h(IconMakeFindable, null), h("p", null, label)), this.showOptions && (h("div", { class: "options" }, h("ol", { role: "listbox" }, this.indexes.map((index) => (h("li", { role: "option" }, h("label", null, h("input", { type: "checkbox", checked: index.contains(this.uri), onChange: e => this.chooseOption(e, index) }), h("pos-resource", { uri: index.uri, lazy: true }, h("pos-label", null)))))))))));
+        const button = (h("button", { type: "button", slot: "trigger", "aria-label": label, class: { main: true, success: this.isIndexed }, onClick: e => this.onClick(e), title: "" }, this.isIndexed ? h(IconSuccess, null) : h(IconMakeFindable, null), h("p", null, label)));
+        if (this.showOptions) {
+            return (h(Host, null, h("sl-dropdown", null, button, h("sl-menu", { role: "listbox" }, this.indexes.map((index) => (h("sl-menu-item", { role: "option", value: index, type: "checkbox", checked: index.contains(this.uri) }, h("pos-resource", { uri: index.uri, lazy: true }, h("pos-label", null)))))))));
+        }
+        else {
+            return button;
+        }
     }
-    async chooseOption(e, index) {
+    async onSelect(e) {
+        const index = e.detail.item.value;
         e.preventDefault();
         await this.addToLabelIndex(index);
         this.indexUpdatedEmitter.emit(index);
@@ -110,7 +105,7 @@ const PosMakeFindable = /*@__PURE__*/ proxyCustomElement(class PosMakeFindable e
         "uri": ["updateUri"]
     }; }
     static get style() { return PosMakeFindableStyle0; }
-}, [0, "pos-make-findable", {
+}, [1, "pos-make-findable", {
         "uri": [1],
         "os": [32],
         "thing": [32],
@@ -118,7 +113,7 @@ const PosMakeFindable = /*@__PURE__*/ proxyCustomElement(class PosMakeFindable e
         "unsubscribeSessionChange": [32],
         "showOptions": [32],
         "isIndexed": [32]
-    }, [[4, "click", "hideOptions"], [0, "keydown", "handleKeyDown"]], {
+    }, [[0, "sl-select", "onSelect"]], {
         "uri": ["updateUri"]
     }]);
 const IconMakeFindable = () => (h("svg", { role: "presentation", 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" })));

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

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

@@ -25,7 +25,7 @@ const PosNavigationBar = /*@__PURE__*/ proxyCustomElement(class PosNavigationBar
     }
     render() {
         const ariaLabel = this.current ? `${this.current.label()} (Click to search or enter URI)` : 'Search or enter URI';
-        return (h("section", { key: '1b507d50bd24f257023fe980f1ffdb3abe903577', class: "current" }, this.current && this.searchIndexReady && h("pos-make-findable", { key: 'e96559f40418154a26350705ae6e3dbf8057a424', uri: this.current.uri }), h("button", { key: '2ac476bd89918e71ca10cc945952f8c9905865df', "aria-label": ariaLabel, onClick: () => this.onClick() }, h("div", { key: 'd34b73e2090f08cab8533d03a7b206d420bfa8c2' }, this.current ? this.current.label() : 'Search or enter URI'), this.icon())));
+        return (h("section", { key: '4b942ac9ddb8c7ec9325197dc0906c8e236586d9', class: "current" }, this.current && this.searchIndexReady && h("pos-make-findable", { key: '4202379b075353cf6c0214fbc5a00b892ad948e1', uri: this.current.uri }), h("button", { key: 'e59f5644299d8eee98d3fd179a1796aa837bb0cc', "aria-label": ariaLabel, onClick: () => this.onClick() }, h("div", { key: '4a4df2d898be9c916b3fa31b00bd9bf2b3beabd1' }, this.current ? this.current.label() : 'Search or enter URI'), this.icon())));
     }
     icon() {
         return (h("svg", { "aria-hidden": "true", 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: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" })));

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

@@ -321,7 +321,7 @@ const PosNavigation = /*@__PURE__*/ proxyCustomElement(class PosNavigation exten
         }
     }
     render() {
-        return (h("nav", { key: '5c6c07b6b2f9ccb0e45bd59b5e477d8ed3d52c2d' }, h("search", { key: '19997ad34212d679547ad5e1bb2f5ea53e576361' }, h("pos-navigation-bar", { key: '2d1c073b2c53ba8cd5afbb595cc95015e5a50e5b', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), h("dialog", { key: '55de5a58604feaf54426b643b434560dbc55a9a1', ref: el => (this.dialogRef = el) }, h("form", { key: '50c064938ec275b53bde81d9bb6c86e0c708a625', method: "dialog", onSubmit: () => this.onSubmit() }, h("input", { key: 'ca06fd69e8346cb8bb0868560f39987b4545c8f5', ref: el => (this.inputRef = el), enterkeyhint: "search", "aria-label": "Search or enter URI", placeholder: "Search or enter URI", value: this.uri, onChange: e => this.onChange(e), onInput: e => this.onChange(e), role: "combobox", "aria-autocomplete": "list", "aria-expanded": this.suggestions.length > 0, "aria-controls": "suggestions-list", "aria-activedescendant": this.selectedIndex >= 0 ? `option-${this.selectedIndex}` : null }), this.suggestions.length > 0 ? (h("div", { class: "suggestions" }, h("ol", { id: "suggestions-list", role: "listbox", "aria-label": "Search results" }, this.suggestions.map((it, index) => (h("li", { id: `option-${index}`, role: "option", "aria-selected": index === this.selectedIndex ? 'true' : 'false' }, h("pos-rich-link", { uri: it.ref }))))))) : null)))));
+        return (h("nav", { key: 'c6f9915d7778a332aa0e2f3b19b733da63b55d3a' }, h("search", { key: '2911efe53775a82d6c87ba823adfd2f37d196994' }, h("pos-navigation-bar", { key: 'ce9d62d0fdc81df2f6c7f7750b5c4fc98e2b0240', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), h("dialog", { key: 'cab1f4261e43e8318582d6b37096301a7ef987cc', ref: el => (this.dialogRef = el) }, h("form", { key: '3caed872d467ef70c3b097da4f337f492bafdc9f', method: "dialog", onSubmit: () => this.onSubmit() }, h("input", { key: '72ba8d15816608dab944f7d8541713bbf177c1c2', ref: el => (this.inputRef = el), enterkeyhint: "search", "aria-label": "Search or enter URI", placeholder: "Search or enter URI", value: this.uri, onChange: e => this.onChange(e), onInput: e => this.onChange(e), role: "combobox", "aria-autocomplete": "list", "aria-expanded": this.suggestions.length > 0, "aria-controls": "suggestions-list", "aria-activedescendant": this.selectedIndex >= 0 ? `option-${this.selectedIndex}` : null }), this.suggestions.length > 0 ? (h("div", { class: "suggestions" }, h("ol", { id: "suggestions-list", role: "listbox", "aria-label": "Search results" }, this.suggestions.map((it, index) => (h("li", { id: `option-${index}`, role: "option", "aria-selected": index === this.selectedIndex ? 'true' : 'false' }, h("pos-rich-link", { uri: it.ref }))))))) : null)))));
     }
     static get watchers() { return {
         "uri": ["updateResource"],

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

@@ -25,7 +25,7 @@ const PosNewThingForm = /*@__PURE__*/ proxyCustomElement(class PosNewThingForm e
         subscribePodOs(this);
     }
     render() {
-        return (h("form", { key: '6d8a76b95abc98ab382b425b2dd8894983bb9522', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: '6fe391ac186c0b0a8e6bb3265e66469dac3ab187', htmlFor: "type" }, "Type"), h("pos-select-term", { key: '33b50596c8cd22d8ce2b1af114277fa9bfd80355', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: '8681f29f0c20d59c2be10a1f49cc38dea6abd19d', htmlFor: "name" }, "Name"), h("input", { key: 'f5905d871b55821f7019134d972e1f156c55f49e', id: "name", type: "text", value: this.name, onInput: e => this.handleChange(e) }), this.newUri ? (h("div", { id: "new-uri", title: "This will be the URI of the new thing" }, this.newUri)) : null, h("input", { key: 'dade4834abecd9bf2fc8eb5bca0b1f60784287a4', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
+        return (h("form", { key: '947421a1e826b4cc59a5d92cf83d25726257c871', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: 'fd239a8b7c9d7b6f833acc794c4ce44d884d240f', htmlFor: "type" }, "Type"), h("pos-select-term", { key: '04b2e4bfdb8590bcb4bc4c822780bffd126488fa', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: 'fa363e0adf2d73c0f22ce90588504ec3b8b6cb6f', htmlFor: "name" }, "Name"), h("input", { key: 'b3c9ff73ea9b1e1e1c059287f3876935fc845699', id: "name", type: "text", value: this.name, onInput: e => this.handleChange(e) }), this.newUri ? (h("div", { id: "new-uri", title: "This will be the URI of the new thing" }, this.newUri)) : null, h("input", { key: 'a804450dd5c59ee847f736861e0eeb6616476081', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.name = event.target.value;

package/dist/components/pos-rich-link2.js CHANGED Viewed

@@ -15,10 +15,10 @@ const PosRichLink = /*@__PURE__*/ proxyCustomElement(class PosRichLink extends H
         this.linkEmitter = createEvent(this, "pod-os:link", 7);
     }
     render() {
-        return (h("pos-resource", { key: '389fb8817f5a7ff77965a8bb9924f48af15c528c', lazy: true, uri: this.uri }, h("p", { key: '1946deeff38a510800ef1558fd6374f65d72cd7f', class: "content" }, h("a", { key: '776c99ca32c7cd7fac30ab1f18b1c024b234d85f', href: this.uri, onClick: e => {
+        return (h("pos-resource", { key: 'f41ba8c5430e96e47d176b4e85633bad4ee9b0a7', lazy: true, uri: this.uri }, h("p", { key: '0a92fa1df51d78c0e8d1f6d47af078cb0cbe264a', class: "content" }, h("a", { key: '27c623707a5cbc6618d5a70e0eacc2fd5552d7dd', href: this.uri, onClick: e => {
                 e.preventDefault();
                 this.linkEmitter.emit(this.uri);
-            } }, h("pos-label", { key: '0ddb22c414f2e4d61cf1beabb301b723b78235e1' })), h("span", { key: 'd2730c1fcc1c1521a7527bdb7a63c091ff49746c', class: "url" }, new URL(this.uri).host), h("pos-description", { key: '53867e57b7403aed46e94a5f3df0b8389bc68244' }))));
+            } }, h("pos-label", { key: 'e8cb96334502e2f2fad85c35096baa3a6cc890cb' })), h("span", { key: '0f0feeee5e65f982d54cd474c42ed14759d2e834', class: "url" }, new URL(this.uri).host), h("pos-description", { key: '87a7cdf2c0e1f523ecdbed2e786d948f267ad303' }))));
     }
     static get style() { return PosRichLinkStyle0; }
 }, [1, "pos-rich-link", {

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

@@ -327,7 +327,7 @@ const PosRouter = /*@__PURE__*/ proxyCustomElement(class PosRouter extends HTMLE
         this.routeChanged.emit(this.uri);
     }
     render() {
-        return h("slot", { key: 'a5a451a8ddf4a30c6e5cbb2faf61d44f5a286df9' });
+        return h("slot", { key: 'e3d70ed25e70d8273a2c820bb92fec69b7f70f25' });
     }
     static get style() { return PosRouterStyle0; }
 }, [4, "pos-router", {

package/dist/components/pos-select-term2.js CHANGED Viewed

@@ -28,7 +28,7 @@ const PosSelectTerm = /*@__PURE__*/ proxyCustomElement(class PosSelectTerm exten
         this.termSelected.emit({ uri: event.target.value });
     }
     render() {
-        return (h(Host, { key: '7f7d48443893800bb818e67865fccdbe1d10d44a' }, h("input", { key: 'ee24690418d5a4d6e357154e12685fa9975754f9', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: '78fde7ccb4e0750e902da139b02810c15c21db3e', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
+        return (h(Host, { key: 'c9529ceaf82d8aa1a3f73532e8ca0f99aa3fc4e6' }, h("input", { key: '2de0e74b99ae5dd7aa6d7bdea4289b9e25b7629e', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: '92e240a12c0d733c15b8daf971e3026a1d535561', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
     }
     static get delegatesFocus() { return true; }
     static get watchers() { return {

package/dist/components/pos-setting-offline-cache2.js CHANGED Viewed

@@ -11,7 +11,7 @@ const PosSettingOfflineCache = /*@__PURE__*/ proxyCustomElement(class PosSetting
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'b598a0dbe21fe9e7f1aa0f51f0b53c270feb8add' }, h("div", { key: '5cec10cc63203c8421bbb627643f1365899cc850' }, h("h2", { key: '094528da7d8567e8a2ba6e82fb1c05b2f4dc7b22' }, h("svg", { key: '3d3e8b17420ba7352877eb1c6bca17d3791b1bd6', xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, h("path", { key: '065bc78382b03bd2bcc3c812a71e9f27c4e3251c', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" })), "Cache Settings"), h("p", { key: '5e5d2ec497039791f82a857a709157e6b97efdfe', class: "info" }, "\u2139 Enable offline cache to be able to access previously loaded data while offline."), h("p", { key: 'd4ff4a3a17df1e5ed7ce076abbf98def4ebdac7d', class: "warn" }, "\u26A0 Private data may be stored on this device. Only enable it, if you trust this device."), h("label", { key: '1d1aa4f7b4b5fa53080cc5635a20ccee3faee29d' }, h("input", { key: '4223888802ea51dec26a3d23abdd9c28098de5aa', type: "checkbox", checked: localSettings.state.offlineCache, onChange: ev => (localSettings.state.offlineCache = ev.target.checked) }), "Enable offline cache"))));
+        return (h(Host, { key: 'f024e7d542cfc87a4dc0a1f22694b664086ebd60' }, h("div", { key: 'e88e694cefa4a2361ca8c67f1bd023fda1b70f2a' }, h("h2", { key: 'c4b2e6270f26a2eb7f62e5076b40834903fc10e4' }, h("svg", { key: 'd63643c1ed908c6fe9ab4ff6c47b13848c714c32', xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, h("path", { key: '78f055556bb175ea17d0db1ccf78c16343d67d3f', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" })), "Cache Settings"), h("p", { key: '3045ae3214b9e91feb34857ce45a3db6529f2959', class: "info" }, "\u2139 Enable offline cache to be able to access previously loaded data while offline."), h("p", { key: '9987c1cb59b62e1eb06c67a9c646a9a2f125529a', class: "warn" }, "\u26A0 Private data may be stored on this device. Only enable it, if you trust this device."), h("label", { key: '55dd3c0fa7ece9a59437e7818d6cfa9b0e9eb5bf' }, h("input", { key: '22874f8a39b5016b71818fa1d6226bf66ff969c3', type: "checkbox", checked: localSettings.state.offlineCache, onChange: ev => (localSettings.state.offlineCache = ev.target.checked) }), "Enable offline cache"))));
     }
     static get style() { return PosSettingOfflineCacheStyle0; }
 }, [1, "pos-setting-offline-cache"]);

package/dist/components/pos-user-menu.d.ts ADDED Viewed

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

package/dist/components/pos-user-menu.js ADDED Viewed

@@ -0,0 +1,8 @@
+import { P as PosUserMenu$1, d as defineCustomElement$1 } from './pos-user-menu2.js';
+const PosUserMenu = PosUserMenu$1;
+const defineCustomElement = defineCustomElement$1;
+export { PosUserMenu, defineCustomElement };
+//# sourceMappingURL=pos-user-menu.js.map

package/dist/components/pos-user-menu.js.map ADDED Viewed

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

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

@@ -0,0 +1,293 @@
+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 { 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';
+import { d as defineCustomElement$4 } from './pos-image2.js';
+import { d as defineCustomElement$3 } from './pos-label2.js';
+import { d as defineCustomElement$2 } from './pos-picture2.js';
+import { d as defineCustomElement$1 } from './pos-resource2.js';
+// src/components/avatar/avatar.styles.ts
+var avatar_styles_default = i`
+  :host {
+    display: inline-block;
+    --size: 3rem;
+  }
+  .avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: var(--size);
+    height: var(--size);
+    background-color: var(--sl-color-neutral-400);
+    font-family: var(--sl-font-sans);
+    font-size: calc(var(--size) * 0.5);
+    font-weight: var(--sl-font-weight-normal);
+    color: var(--sl-color-neutral-0);
+    user-select: none;
+    -webkit-user-select: none;
+    vertical-align: middle;
+  }
+  .avatar--circle,
+  .avatar--circle .avatar__image {
+    border-radius: var(--sl-border-radius-circle);
+  }
+  .avatar--rounded,
+  .avatar--rounded .avatar__image {
+    border-radius: var(--sl-border-radius-medium);
+  }
+  .avatar--square {
+    border-radius: 0;
+  }
+  .avatar__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .avatar__initials {
+    line-height: 1;
+    text-transform: uppercase;
+  }
+  .avatar__image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    overflow: hidden;
+  }
+`;
+var SlAvatar = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasError = false;
+    this.image = "";
+    this.label = "";
+    this.initials = "";
+    this.loading = "eager";
+    this.shape = "circle";
+  }
+  handleImageChange() {
+    this.hasError = false;
+  }
+  handleImageLoadError() {
+    this.hasError = true;
+    this.emit("sl-error");
+  }
+  render() {
+    const avatarWithImage = x`
+      <img
+        part="image"
+        class="avatar__image"
+        src="${this.image}"
+        loading="${this.loading}"
+        alt=""
+        @error="${this.handleImageLoadError}"
+      />
+    `;
+    let avatarWithoutImage = x``;
+    if (this.initials) {
+      avatarWithoutImage = x`<div part="initials" class="avatar__initials">${this.initials}</div>`;
+    } else {
+      avatarWithoutImage = x`
+        <div part="icon" class="avatar__icon" aria-hidden="true">
+          <slot name="icon">
+            <sl-icon name="person-fill" library="system"></sl-icon>
+          </slot>
+        </div>
+      `;
+    }
+    return x`
+      <div
+        part="base"
+        class=${e({
+      avatar: true,
+      "avatar--circle": this.shape === "circle",
+      "avatar--rounded": this.shape === "rounded",
+      "avatar--square": this.shape === "square"
+    })}
+        role="img"
+        aria-label=${this.label}
+      >
+        ${this.image && !this.hasError ? avatarWithImage : avatarWithoutImage}
+      </div>
+    `;
+  }
+};
+SlAvatar.styles = [component_styles_default, avatar_styles_default];
+SlAvatar.dependencies = {
+  "sl-icon": SlIcon
+};
+__decorateClass([
+  r()
+], SlAvatar.prototype, "hasError", 2);
+__decorateClass([
+  n()
+], SlAvatar.prototype, "image", 2);
+__decorateClass([
+  n()
+], SlAvatar.prototype, "label", 2);
+__decorateClass([
+  n()
+], SlAvatar.prototype, "initials", 2);
+__decorateClass([
+  n()
+], SlAvatar.prototype, "loading", 2);
+__decorateClass([
+  n({ reflect: true })
+], SlAvatar.prototype, "shape", 2);
+__decorateClass([
+  watch("image")
+], SlAvatar.prototype, "handleImageChange", 1);
+SlAvatar.define("sl-avatar");
+// src/components/divider/divider.styles.ts
+var divider_styles_default = i`
+  :host {
+    --color: var(--sl-panel-border-color);
+    --width: var(--sl-panel-border-width);
+    --spacing: var(--sl-spacing-medium);
+  }
+  :host(:not([vertical])) {
+    display: block;
+    border-top: solid var(--width) var(--color);
+    margin: var(--spacing) 0;
+  }
+  :host([vertical]) {
+    display: inline-block;
+    height: 100%;
+    border-left: solid var(--width) var(--color);
+    margin: 0 var(--spacing);
+  }
+`;
+var SlDivider = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.vertical = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "separator");
+  }
+  handleVerticalChange() {
+    this.setAttribute("aria-orientation", this.vertical ? "vertical" : "horizontal");
+  }
+};
+SlDivider.styles = [component_styles_default, divider_styles_default];
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlDivider.prototype, "vertical", 2);
+__decorateClass([
+  watch("vertical")
+], SlDivider.prototype, "handleVerticalChange", 1);
+SlDivider.define("sl-divider");
+const posUserMenuCss = "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";
+const PosUserMenuStyle0 = posUserMenuCss;
+const PosUserMenu = /*@__PURE__*/ proxyCustomElement(class PosUserMenu extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.logout = createEvent(this, "pod-os:logout", 7);
+        this.link = createEvent(this, "pod-os:link", 7);
+    }
+    onSelect(e) {
+        const { value } = e.detail.item;
+        if (value === 'logout') {
+            this.logout.emit();
+        }
+        else if (value === 'profile') {
+            this.link.emit(this.webId);
+        }
+        else if (value === 'dashboard') {
+            this.link.emit('pod-os:dashboard');
+        }
+        else if (value === 'settings') {
+            this.link.emit('pod-os:settings');
+        }
+    }
+    render() {
+        if (!this.webId)
+            return null; //?
+        return (h("pos-resource", { uri: this.webId }, h("sl-dropdown", null, h("button", { slot: "trigger", "aria-label": "User menu" }, h("pos-picture", null, h("sl-avatar", null))), h("sl-menu", null, h("sl-menu-item", { value: "dashboard" }, "Dashboard"), h("sl-menu-item", { value: "profile" }, h("pos-label", null)), h("sl-menu-item", { value: "settings" }, "Settings"), h("sl-divider", null), h("sl-menu-item", { value: "logout" }, "Logout")))));
+    }
+    static get style() { return PosUserMenuStyle0; }
+}, [1, "pos-user-menu", {
+        "webId": [1, "web-id"]
+    }, [[0, "sl-select", "onSelect"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pos-user-menu", "ion-icon", "ion-progress-bar", "ion-skeleton-text", "pos-image", "pos-label", "pos-picture", "pos-resource"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pos-user-menu":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PosUserMenu);
+            }
+            break;
+        case "ion-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ion-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ion-skeleton-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "pos-image":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "pos-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "pos-picture":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "pos-resource":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+export { PosUserMenu as P, defineCustomElement as d };
+//# sourceMappingURL=pos-user-menu2.js.map

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

@@ -0,0 +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}