npm - @pod-os/elements - Versions diffs - 0.26.1-rc.6fb2bdc.0 → 0.26.1-rc.82a37be.0 - Mend

@pod-os/elements 0.26.1-rc.6fb2bdc.0 → 0.26.1-rc.82a37be.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 (78) hide show

package/dist/collection/components/pos-navigation/bar/pos-navigation-bar.css CHANGED Viewed

@@ -14,6 +14,9 @@ section.current {
 section.current button {
   cursor: pointer;
   font-size: var(--scale-1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
   flex-grow: 1;
   background: none;
   color: var(--pos-normal-text-color);
@@ -25,4 +28,11 @@ section.current button {
   &:focus {
     text-decoration: underline;
   }
+  :first-child {
+    flex-grow: 1;
+  }
+  svg {
+    width: var(--size-6);
+    color: var(--pos-subtle-text-color);
+  }
 }

package/dist/collection/components/pos-navigation/bar/pos-navigation-bar.js CHANGED Viewed

@@ -11,7 +11,10 @@ export class PosNavigationBar {
     }
     render() {
         const ariaLabel = this.current ? `${this.current.label()} (Click to search or enter URI)` : 'Search or enter URI';
-        return (h("section", { key: '79ac5c5dc2d6c2d44e852f9671d0895a29fb62a6', class: "current" }, this.current && this.searchIndexReady && h("pos-make-findable", { key: 'be92d99ead125c1a29520639da6dfd6e28007d85', uri: this.current.uri }), h("button", { key: '4ecdd49e46614f604c36ef760422d54f99ab00f1', "aria-label": ariaLabel, onClick: () => this.onClick() }, this.current ? this.current.label() : '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())));
+    }
+    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" })));
     }
     static get is() { return "pos-navigation-bar"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"pos-navigation-bar.js","sourceRoot":"","sources":["../../../../../src/components/pos-navigation/bar/pos-navigation-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQhF,MAAM,OAAO,gBAAgB;IAMnB,OAAO;QACb,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC;IAGD,QAAQ,CAAC,CAAgB;QACvB,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAC9C,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,iCAAiC,CAAC,CAAC,CAAC,qBAAqB,CAAC;QAElH,OAAO,CACL,gEAAS,KAAK,EAAC,SAAS;YACrB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,gBAAgB,IAAI,0EAAmB,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,GAAsB;YACxG,6EAAoB,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,~~IACzD~~,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,qBAAqB,~~CACrD~~,CACD,CACX,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Listen, Prop } from '@stencil/core';\nimport { Thing } from '@pod-os/core';\n\n@Component({\n tag: 'pos-navigation-bar',\n shadow: true,\n styleUrl: 'pos-navigation-bar.css',\n})\nexport class PosNavigationBar {\n @Prop() current?: Thing;\n @Prop() searchIndexReady: boolean;\n\n @Event({ eventName: 'pod-os:navigate' }) navigate: EventEmitter;\n\n private onClick() {\n this.navigate.emit(this.current);\n }\n\n @Listen('keydown', { target: 'document' })\n activate(e: KeyboardEvent) {\n if ((e.ctrlKey \|\| e.metaKey) && e.key === 'k') {\n e.preventDefault();\n this.navigate.emit(this.current);\n }\n }\n\n render() {\n const ariaLabel = this.current ? `${this.current.label()} (Click to search or enter URI)` : 'Search or enter URI';\n\n return (\n <section class=\"current\">\n {this.current && this.searchIndexReady && <pos-make-findable uri={this.current.uri}></pos-make-findable>}\n <button aria-label={ariaLabel} onClick={() => this.onClick()}>\n {this.current ? this.current.label() : 'Search or enter URI'}\n </button>\n </section>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pos-navigation-bar.js","sourceRoot":"","sources":["../../../../../src/components/pos-navigation/bar/pos-navigation-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQhF,MAAM,OAAO,gBAAgB;IAMnB,OAAO;QACb,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC;IAGD,QAAQ,CAAC,CAAgB;QACvB,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAC9C,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,iCAAiC,CAAC,CAAC,CAAC,qBAAqB,CAAC;QAElH,OAAO,CACL,gEAAS,KAAK,EAAC,SAAS;YACrB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,gBAAgB,IAAI,0EAAmB,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,GAAsB;YACxG,6EAAoB,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE;gBAC1D,8DAAM,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAO;gBACvE,IAAI,CAAC,IAAI,EAAE,CACL,CACD,CACX,CAAC;IACJ,CAAC;IAEO,IAAI;QACV,OAAO,CACL,0BACc,MAAM,EAClB,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,kBACN,KAAK,EAClB,MAAM,EAAC,cAAc;YAErB,8BACiB,OAAO,qBACN,OAAO,EACvB,CAAC,EAAC,+EAA+E,GACjF,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Listen, Prop } from '@stencil/core';\nimport { Thing } from '@pod-os/core';\n\n@Component({\n tag: 'pos-navigation-bar',\n shadow: true,\n styleUrl: 'pos-navigation-bar.css',\n})\nexport class PosNavigationBar {\n @Prop() current?: Thing;\n @Prop() searchIndexReady: boolean;\n\n @Event({ eventName: 'pod-os:navigate' }) navigate: EventEmitter;\n\n private onClick() {\n this.navigate.emit(this.current);\n }\n\n @Listen('keydown', { target: 'document' })\n activate(e: KeyboardEvent) {\n if ((e.ctrlKey \|\| e.metaKey) && e.key === 'k') {\n e.preventDefault();\n this.navigate.emit(this.current);\n }\n }\n\n render() {\n const ariaLabel = this.current ? `${this.current.label()} (Click to search or enter URI)` : 'Search or enter URI';\n\n return (\n <section class=\"current\">\n {this.current && this.searchIndexReady && <pos-make-findable uri={this.current.uri}></pos-make-findable>}\n <button aria-label={ariaLabel} onClick={() => this.onClick()}>\n <div>{this.current ? this.current.label() : 'Search or enter URI'}</div>\n {this.icon()}\n </button>\n </section>\n );\n }\n\n private icon() {\n return (\n <svg\n aria-hidden=\"true\"\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=\"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\"\n />\n </svg>\n );\n }\n}\n"]}

package/dist/collection/components/pos-navigation/pos-navigation.css CHANGED Viewed

@@ -25,7 +25,7 @@ search {
     pos-rich-link {
       --background-color: inherit;
     }
-    &.selected {
+    &[aria-selected='true'] {
       background-color: var(--pos-primary-color);
       &:hover {
         background-color: var(--pos-primary-color);

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

@@ -113,7 +113,7 @@ export class PosNavigation {
         }
     }
     render() {
-        return (h("nav", { key: 'f09437fdd0bdfc5912af62658f1f32ab54c439c8' }, h("search", { key: 'fa09fec64bacfe1460a1fad256e509a480dd6a01' }, h("pos-navigation-bar", { key: '8dcd35cad5858da049ae942152f3cebe884aa761', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), h("dialog", { key: '3ad61d48a6c5fcd0b010950c702e9488a9fd5160', ref: el => (this.dialogRef = el) }, h("form", { key: '1c23af28daf15f635d4c36002ca6fe153e33b48e', method: "dialog", onSubmit: () => this.onSubmit() }, h("input", { key: 'f11ff492c9333e5f6110630b9b6b3f3b5c127660', ref: el => (this.inputRef = el), enterkeyhint: "search", placeholder: "Search or enter URI", value: this.uri, onChange: e => this.onChange(e), onInput: e => this.onChange(e) }), this.suggestions.length > 0 ? (h("div", { class: "suggestions" }, h("ol", null, this.suggestions.map((it, index) => (h("li", { class: index === this.selectedIndex ? 'selected' : '' }, h("pos-rich-link", { uri: it.ref }))))))) : null)))));
+        return (h("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)))));
     }
     static get is() { return "pos-navigation"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"pos-navigation.js","sourceRoot":"","sources":["../../../../src/components/pos-navigation/pos-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PodOS, SearchIndex, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { debounceTime, Subject } from 'rxjs';\n\nimport session from '../../store/session';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\n\ninterface NavigateEvent {\n detail: Thing \| null;\n}\n\n@Component({\n tag: 'pos-navigation',\n shadow: true,\n styleUrl: 'pos-navigation.css',\n})\nexport class PosNavigation implements PodOsAware {\n @State() private os: PodOS;\n private dialogRef?: HTMLDialogElement;\n\n private inputRef?: HTMLInputElement;\n\n @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n /*\n Initial value of the navigation bar\n /\n @Prop() uri: string = '';\n\n /\n Current value of the input field\n */\n @State() private inputValue: string = this.uri;\n\n @Event({ eventName: 'pod-os:link' }) linkEmitter: EventEmitter;\n\n @State() searchIndex?: SearchIndex = undefined;\n\n @State() private suggestions = [];\n\n @State() private selectedIndex = -1;\n\n @State() private resource: Thing = null;\n\n private readonly changeEvents = new Subject<void>();\n private debouncedSearch = null;\n\n @Watch('uri')\n @Watch('os')\n updateResource(): void {\n try {\n this.resource = this.uri ? this.os?.store.get(this.uri) : null;\n } catch {\n this.resource = null;\n }\n }\n\n componentWillLoad() {\n subscribePodOs(this);\n this.updateResource();\n session.onChange('isLoggedIn', async isLoggedIn => {\n if (isLoggedIn) {\n await this.buildSearchIndex();\n } else {\n this.clearSearchIndex();\n }\n });\n this.debouncedSearch = this.changeEvents.pipe(debounceTime(300)).subscribe(() => this.search());\n }\n\n disconnectedCallback() {\n this.debouncedSearch?.unsubscribe();\n }\n\n @Listen('pod-os:search:index-created')\n private async buildSearchIndex() {\n this.searchIndex = await this.os.buildSearchIndex(session.state.profile);\n }\n\n @Listen('pod-os:search:index-updated')\n rebuildSearchIndex() {\n this.searchIndex.rebuild();\n }\n\n @Listen('pod-os:navigate')\n openNavigationDialog(e: NavigateEvent) {\n this.resource = e.detail;\n if (e.detail) {\n this.inputValue = e.detail.uri;\n this.search();\n }\n this.inputRef?.select();\n this.dialogRef?.show();\n }\n\n private clearSearchIndex() {\n this.searchIndex?.clear();\n }\n\n receivePodOs = async (os: PodOS) => {\n this.os = os;\n };\n\n private onChange(event) {\n this.inputValue = event.target.value;\n this.changeEvents.next();\n }\n\n @Listen('click', { target: 'document' })\n closeDialog() {\n this.dialogRef?.close();\n this.selectedIndex = -1;\n }\n\n @Listen('pod-os:link')\n clearSuggestions() {\n this.suggestions = [];\n this.dialogRef?.close();\n this.selectedIndex = -1;\n }\n\n @Listen('click')\n onClickSelf(event) {\n event.stopPropagation();\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Escape') {\n this.closeDialog();\n } else if (ev.key === 'ArrowDown') {\n ev.preventDefault();\n this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n } else if (ev.key === 'ArrowUp') {\n ev.preventDefault();\n this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n }\n }\n\n private search() {\n if (this.searchIndex) {\n this.suggestions = this.inputValue ? this.searchIndex.search(this.inputValue) : [];\n }\n }\n\n private onSubmit() {\n if (this.suggestions && this.selectedIndex > -1) {\n this.linkEmitter.emit(this.suggestions[this.selectedIndex].ref);\n } else {\n this.linkEmitter.emit(this.inputValue);\n }\n }\n\n render() {\n return (\n <nav>\n <search>\n <pos-navigation-bar\n searchIndexReady={this.searchIndex !== undefined}\n current={this.resource}\n ></pos-navigation-bar>\n <dialog ref={el => (this.dialogRef = el)}>\n <form method=\"dialog\" onSubmit={() => this.onSubmit()}>\n <input\n ref={el => (this.inputRef = el)}\n enterkeyhint=\"search\"\n placeholder=\"Search or enter URI\"\n value={this.uri}\n onChange={e => this.onChange(e)}\n onInput={e => this.onChange(e)}\n />\n {this.suggestions.length > 0 ? (\n <div class=\"suggestions\">\n <ol>\n {this.suggestions.map((it, index) => (\n <li class={index === this.selectedIndex ? 'selected' : ''}>\n <pos-rich-link uri={it.ref}></pos-rich-link>\n </li>\n ))}\n </ol>\n </div>\n ) : null}\n </form>\n </dialog>\n </search>\n </nav>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pos-navigation.js","sourceRoot":"","sources":["../../../../src/components/pos-navigation/pos-navigation.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAE7C,OAAO,OAAO,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAiC,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAWrF,MAAM,OAAO,aAAa;IAL1B;QAaE;;WAEG;QACK,QAAG,GAAW,EAAE,CAAC;QAEzB;;WAEG;QACc,eAAU,GAAW,IAAI,CAAC,GAAG,CAAC;QAItC,gBAAW,GAAiB,SAAS,CAAC;QAE9B,gBAAW,GAAG,EAAE,CAAC;QAEjB,kBAAa,GAAG,CAAC,CAAC,CAAC;QAEnB,aAAQ,GAAU,IAAI,CAAC;QAEvB,iBAAY,GAAG,IAAI,OAAO,EAAQ,CAAC;QAC5C,oBAAe,GAAG,IAAI,CAAC;QAsD/B,iBAAY,GAAG,KAAK,EAAE,EAAS,EAAE,EAAE;YACjC,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACf,CAAC,CAAC;KAiGH;IArJC,cAAc;;QACZ,IAAI,CAAC;YACH,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,EAAE,0CAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QACjE,CAAC;QAAC,WAAM,CAAC;YACP,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,cAAc,CAAC,IAAI,CAAC,CAAC;QACrB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,OAAO,CAAC,QAAQ,CAAC,YAAY,EAAE,KAAK,EAAC,UAAU,EAAC,EAAE;YAChD,IAAI,UAAU,EAAE,CAAC;gBACf,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAChC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,CAAC;QACH,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAClG,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,eAAe,0CAAE,WAAW,EAAE,CAAC;IACtC,CAAC;IAGO,KAAK,CAAC,gBAAgB;QAC5B,IAAI,CAAC,WAAW,GAAG,MAAM,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC3E,CAAC;IAGD,kBAAkB;QAChB,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;IAC7B,CAAC;IAGD,oBAAoB,CAAC,CAAgB;;QACnC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC;QACzB,IAAI,CAAC,CAAC,MAAM,EAAE,CAAC;YACb,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC;YAC/B,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;QACD,MAAA,IAAI,CAAC,QAAQ,0CAAE,MAAM,EAAE,CAAC;QACxB,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,EAAE,CAAC;IACzB,CAAC;IAEO,gBAAgB;;QACtB,MAAA,IAAI,CAAC,WAAW,0CAAE,KAAK,EAAE,CAAC;IAC5B,CAAC;IAMO,QAAQ,CAAC,KAAK;QACpB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACrC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC;IAGD,WAAW;;QACT,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE,CAAC;QACxB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;IAC1B,CAAC;IAGD,gBAAgB;;QACd,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;QACtB,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE,CAAC;QACxB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;IAC1B,CAAC;IAGD,WAAW,CAAC,KAAK;QACf,KAAK,CAAC,eAAe,EAAE,CAAC;IAC1B,CAAC;IAGD,aAAa,CAAC,EAAiB;QAC7B,IAAI,EAAE,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YACxB,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;aAAM,IAAI,EAAE,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YAClC,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACrF,CAAC;aAAM,IAAI,EAAE,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;YAChC,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAC3D,CAAC;IACH,CAAC;IAEO,MAAM;QACZ,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QACrF,CAAC;IACH,CAAC;IAEO,QAAQ;QACd,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,EAAE,CAAC;YAChD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,CAAC;QAClE,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL;YACE;gBACE,2EACE,gBAAgB,EAAE,IAAI,CAAC,WAAW,KAAK,SAAS,EAChD,OAAO,EAAE,IAAI,CAAC,QAAQ,GACF;gBACtB,+DAAQ,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;oBACtC,6DAAM,MAAM,EAAC,QAAQ,EAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;wBACnD,8DACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,EAC/B,YAAY,EAAC,QAAQ,gBACV,qBAAqB,EAChC,WAAW,EAAC,qBAAqB,EACjC,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAC/B,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAC9B,IAAI,EAAC,UAAU,uBACG,MAAM,mBACT,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,mBAC5B,kBAAkB,2BACT,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,IAAI,GACtF;wBACD,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC7B,WAAK,KAAK,EAAC,aAAa;4BACtB,UAAI,EAAE,EAAC,kBAAkB,EAAC,IAAI,EAAC,SAAS,gBAAY,gBAAgB,IACjE,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CACnC,UACE,EAAE,EAAE,UAAU,KAAK,EAAE,EACrB,IAAI,EAAC,QAAQ,mBACE,KAAK,KAAK,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;gCAE9D,qBAAe,GAAG,EAAE,EAAE,CAAC,GAAG,GAAkB,CACzC,CACN,CAAC,CACC,CACD,CACP,CAAC,CAAC,CAAC,IAAI,CACH,CACA,CACF,CACL,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { PodOS, SearchIndex, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { debounceTime, Subject } from 'rxjs';\n\nimport session from '../../store/session';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\n\ninterface NavigateEvent {\n detail: Thing \| null;\n}\n\n@Component({\n tag: 'pos-navigation',\n shadow: true,\n styleUrl: 'pos-navigation.css',\n})\nexport class PosNavigation implements PodOsAware {\n @State() private os: PodOS;\n private dialogRef?: HTMLDialogElement;\n\n private inputRef?: HTMLInputElement;\n\n @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n /*\n Initial value of the navigation bar\n /\n @Prop() uri: string = '';\n\n /\n Current value of the input field\n */\n @State() private inputValue: string = this.uri;\n\n @Event({ eventName: 'pod-os:link' }) linkEmitter: EventEmitter;\n\n @State() searchIndex?: SearchIndex = undefined;\n\n @State() private suggestions = [];\n\n @State() private selectedIndex = -1;\n\n @State() private resource: Thing = null;\n\n private readonly changeEvents = new Subject<void>();\n private debouncedSearch = null;\n\n @Watch('uri')\n @Watch('os')\n updateResource(): void {\n try {\n this.resource = this.uri ? this.os?.store.get(this.uri) : null;\n } catch {\n this.resource = null;\n }\n }\n\n componentWillLoad() {\n subscribePodOs(this);\n this.updateResource();\n session.onChange('isLoggedIn', async isLoggedIn => {\n if (isLoggedIn) {\n await this.buildSearchIndex();\n } else {\n this.clearSearchIndex();\n }\n });\n this.debouncedSearch = this.changeEvents.pipe(debounceTime(300)).subscribe(() => this.search());\n }\n\n disconnectedCallback() {\n this.debouncedSearch?.unsubscribe();\n }\n\n @Listen('pod-os:search:index-created')\n private async buildSearchIndex() {\n this.searchIndex = await this.os.buildSearchIndex(session.state.profile);\n }\n\n @Listen('pod-os:search:index-updated')\n rebuildSearchIndex() {\n this.searchIndex.rebuild();\n }\n\n @Listen('pod-os:navigate')\n openNavigationDialog(e: NavigateEvent) {\n this.resource = e.detail;\n if (e.detail) {\n this.inputValue = e.detail.uri;\n this.search();\n }\n this.inputRef?.select();\n this.dialogRef?.show();\n }\n\n private clearSearchIndex() {\n this.searchIndex?.clear();\n }\n\n receivePodOs = async (os: PodOS) => {\n this.os = os;\n };\n\n private onChange(event) {\n this.inputValue = event.target.value;\n this.changeEvents.next();\n }\n\n @Listen('click', { target: 'document' })\n closeDialog() {\n this.dialogRef?.close();\n this.selectedIndex = -1;\n }\n\n @Listen('pod-os:link')\n clearSuggestions() {\n this.suggestions = [];\n this.dialogRef?.close();\n this.selectedIndex = -1;\n }\n\n @Listen('click')\n onClickSelf(event) {\n event.stopPropagation();\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Escape') {\n this.closeDialog();\n } else if (ev.key === 'ArrowDown') {\n ev.preventDefault();\n this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n } else if (ev.key === 'ArrowUp') {\n ev.preventDefault();\n this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n }\n }\n\n private search() {\n if (this.searchIndex) {\n this.suggestions = this.inputValue ? this.searchIndex.search(this.inputValue) : [];\n }\n }\n\n private onSubmit() {\n if (this.suggestions && this.selectedIndex > -1) {\n this.linkEmitter.emit(this.suggestions[this.selectedIndex].ref);\n } else {\n this.linkEmitter.emit(this.inputValue);\n }\n }\n\n render() {\n return (\n <nav>\n <search>\n <pos-navigation-bar\n searchIndexReady={this.searchIndex !== undefined}\n current={this.resource}\n ></pos-navigation-bar>\n <dialog ref={el => (this.dialogRef = el)}>\n <form method=\"dialog\" onSubmit={() => this.onSubmit()}>\n <input\n ref={el => (this.inputRef = el)}\n enterkeyhint=\"search\"\n aria-label=\"Search or enter URI\"\n placeholder=\"Search or enter URI\"\n value={this.uri}\n onChange={e => this.onChange(e)}\n onInput={e => this.onChange(e)}\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-expanded={this.suggestions.length > 0}\n aria-controls=\"suggestions-list\"\n aria-activedescendant={this.selectedIndex >= 0 ? `option-${this.selectedIndex}` : null}\n />\n {this.suggestions.length > 0 ? (\n <div class=\"suggestions\">\n <ol id=\"suggestions-list\" role=\"listbox\" aria-label=\"Search results\">\n {this.suggestions.map((it, index) => (\n <li\n id={`option-${index}`}\n role=\"option\"\n aria-selected={index === this.selectedIndex ? 'true' : 'false'}\n >\n <pos-rich-link uri={it.ref}></pos-rich-link>\n </li>\n ))}\n </ol>\n </div>\n ) : null}\n </form>\n </dialog>\n </search>\n </nav>\n );\n }\n}\n"]}

package/dist/components/pos-add-new-thing2.js CHANGED Viewed

@@ -17,7 +17,7 @@ const PosAddNewThing = /*@__PURE__*/ proxyCustomElement(class PosAddNewThing ext
         this.dialog.showModal();
     }
     render() {
-        return (h(Host, { key: '6142a141ef03ca93a362a6b00ebe8d515c3a677a' }, h("button", { key: '72ecf353cd3a7d2d68f9ef28eb1bbe7fdb88b700', id: "new", title: "Add a new thing", onClick: () => this.openDialog() }, h("ion-icon", { key: 'bd05d75c42c10de6df519575787fc66eafb22930', name: "add-circle-outline" })), h("pos-dialog", { key: '23cf0118149704dfca16758970e4f4658e87e946', ref: el => (this.dialog = el) }, h("span", { key: '5af7b7f618cc20684c39134b5ea295400e651cb6', slot: "title" }, "Add a new thing"), h("pos-new-thing-form", { key: '895496c2f6ede3c8677d9d918e0b13582090baed', slot: "content", referenceUri: this.referenceUri }))));
+        return (h(Host, { key: '5ed3ba3982467778ed2b9b02090c230acb6b1762' }, h("button", { key: '96ff5dbd0ba4ca4d8c1d25045efa06fea062e9cf', id: "new", title: "Add a new thing", onClick: () => this.openDialog() }, h("ion-icon", { key: '201a19c8ecb39e0e913d3fb8cf1ebee06bc41df5', name: "add-circle-outline" })), h("pos-dialog", { key: '421da81e6faf52119fe600cc388663299eab67ec', ref: el => (this.dialog = el) }, h("span", { key: '454e6e05dc478e9c1b378cb3308f006fab4d8738', slot: "title" }, "Add a new thing"), h("pos-new-thing-form", { key: 'a469379848776a4c7e9f8e3f94da76ba048d7fab', slot: "content", referenceUri: this.referenceUri }))));
     }
     static get style() { return PosAddNewThingStyle0; }
 }, [1, "pos-add-new-thing", {

package/dist/components/pos-app-generic.js CHANGED Viewed

@@ -27,7 +27,7 @@ const PosAppGeneric$1 = /*@__PURE__*/ proxyCustomElement(class PosAppGeneric ext
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '170a57d59474ac6fa887251c96dfe64f93308e3f' }, h("section", { key: '208917e280149067f5a0c946636853f23fc83d7b' }, h("article", { key: '62c8f8a2b37455d7ec4ffc11cbb7e46b7262a6e8', "aria-labelledby": "thing-title" }, h("header", { key: '2f85c4bffecfa3e0f55ed07d98397647cfcd4acc' }, h("pos-picture", { key: '1094acb0b8cac8c9a8acaca29abeeaa5cc00aca0', blurredBackground: true }), h("h1", { key: 'eba5144dd2cf94fdfdc7514c26d68aecc8361139', id: "thing-title" }, h("pos-label", { key: 'ac03525509d037740d1b329fbaf64c68f9ea5376' })), h("pos-type-badges", { key: '0dbdb698a8a77a5a500a440142e078860b3c0681' })), h("main", { key: 'd87bfa4cf8bfb9b0ba633dff40f7d42478265cc1' }, h("pos-description", { key: 'c5c3b64864f8bc9d8e72b1a87f92bdd2435b4e41' })))), h("section", { key: 'f013653e7eafd26e6daa53c76a95d12939d356bd' }, h("pos-literals", { key: 'd34963cc5eed8c6e6baa3963009c352043f30db5' })), h("section", { key: 'ab70a3d890665c4ecfe987f35437de1a5dc3e655' }, h("pos-relations", { key: 'f8751d31a54b240cad0f089a9aea5123dc0c0bae' }), h("pos-reverse-relations", { key: '5aff024840f92393d69f0816263751efc6cb57f3' }))));
+        return (h(Host, { key: 'afbda65361df3b386348ee06a65c08b407d65708' }, h("section", { key: '78e6810a94e06e79e7f373c217de914e975d9a76' }, h("article", { key: 'daa8864317ef4354554a92d7e9de6f6bf7bbe24e', "aria-labelledby": "thing-title" }, h("header", { key: 'ca81075f3cfd0acf9915f738b691598759f554cd' }, h("pos-picture", { key: '682ea8c946bae1886a60f5985d13f3dc696d5108', blurredBackground: true }), h("h1", { key: '8e97b2c9b38c919eda5d896f2072c3ed1906daf2', id: "thing-title" }, h("pos-label", { key: '4e35e238dd6913756742f8eee0da96c7442fe12b' })), h("pos-type-badges", { key: '552b29a529807a1ea14316f620db410019b7a232' })), h("main", { key: '5ff73a76535daf5de695335adea4711f9c67355f' }, h("pos-description", { key: '3b4731fc93bd11c5221630c0547bdd1e5a78e416' })))), h("section", { key: 'e8f9950a602d197ec9bb0b28cc64ed68fd3989f4' }, h("pos-literals", { key: 'b2aae4058c620be3790cf1e4bb223667e2311247' })), h("section", { key: 'b9ad586436b66c12b562402a779289a97f3fbdd0' }, h("pos-relations", { key: '123da027d9a78aa1465d6d5bea91f671d48a8a90' }), h("pos-reverse-relations", { key: '97d3a4f3b7a276668c58aed5cee1b97683e333ce' }))));
     }
     static get style() { return PosAppGenericStyle0; }
 }, [1, "pos-app-generic"]);

package/dist/components/pos-app-ldp-container.js CHANGED Viewed

@@ -28,7 +28,7 @@ const PosAppLdpContainer$1 = /*@__PURE__*/ proxyCustomElement(class PosAppLdpCon
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '76b7a2ab73232cbea2a7352527fd4fc35a75c66b' }, h("section", { key: '28d455d6e4b640de624a2c684133a6d4c7de2100' }, h("pos-container-contents", { key: '8e518a1122461108b3d33d66664f67feb55527c4' }), h("details", { key: '6be9b8cf613a54213e8281c0a4bf4e8235c1b4b1' }, h("summary", { key: '541ff3bbe8ec736361ea59fef319141a743c93ee' }, "All subjects"), h("pos-subjects", { key: '4e1927ea2365c354c7d1abf2eca50d892e1ac2bc' }))), h("section", { key: 'c9156ae4584e7f5803a7427b97844c3bbeae86bf' }, h("article", { key: 'c3fdc4cf0d4dd6624c63c2c6f4cf1c852a2468fc' }, h("header", { key: '4103d4a971e51942afeff1a26aca17454a962f31' }, h("h1", { key: 'eb000f4bac564b0255e28c44c112180a4558e323' }, h("pos-label", { key: '700a53e05c33d9c5a923dd5f73ecfb4ee969bc9d' })), h("pos-type-badges", { key: '15c37fc60de0e9ff1d36280da42bf0cc42c0c27c' })), h("pos-literals", { key: '4bf833339c2bedd888248e3893633496d2f61bd0' })))));
+        return (h(Host, { key: 'd1073c803fe6786740408b1e66fd415f0e26de90' }, h("section", { key: '288eaceb2e30282f9018c6bf6759586df637cfaf' }, h("pos-container-contents", { key: '9a6522288ea9df7b902dc5169ee69157a0df5840' }), h("details", { key: 'acf9410c0aec5244a2e1d1bb207aff32f9b21786' }, h("summary", { key: '27b26d9f81a9f4e20d793b28e70476063ff94374' }, "All subjects"), h("pos-subjects", { key: 'abaee22e92eabe54ea7a4b12c66419d78da0ae6d' }))), h("section", { key: '5d74265b93009aaa9cf6df0cc6fe18f5f91ca64f' }, h("article", { key: '81e460004603c914734133b39b7b77af50a439eb' }, h("header", { key: '16fa3a62c8c5cf4e0d07d57e007341679e33c195' }, h("h1", { key: 'a98c66bddb8294caa635d6c75cc7d6d28fac8b88' }, h("pos-label", { key: '9f3f29c4a49529dba5c34fb3c2e08a58c6621c7b' })), h("pos-type-badges", { key: '08866ce24fd093422a9ee6ec52ef9aa9197735e8' })), h("pos-literals", { key: '8e7dfe19b317a49a167e607e2e658b7c66e9b289' })))));
     }
     static get style() { return PosAppLdpContainerStyle0 + PosAppLdpContainerStyle1; }
 }, [1, "pos-app-ldp-container"]);

package/dist/components/pos-app-rdf-document.js CHANGED Viewed

@@ -26,7 +26,7 @@ const PosAppRdfDocument$1 = /*@__PURE__*/ proxyCustomElement(class PosAppRdfDocu
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '9dd4b79cd54b3d2d61eea562b41a397cc1841279' }, h("section", { key: 'ec97b4983b9c45a5420b8e15b1b5d13a2b78f505' }, h("pos-subjects", { key: '7ca852dee46a4f1bb64cebccb397e2df7045be82' })), h("section", { key: '9aaf18c750b9847234ebb6d92c3c4ab605ff306e' }, h("article", { key: 'd794f6f83cfa49a37a759f0b8fa16b28038ec10b', "aria-labelledby": "doc-title" }, h("header", { key: 'bebbe27160a15351a1eabaa8c1ebb449beaa1005' }, h("h1", { key: 'cf5ba1875f2e22f162d2878789106738aac3d97c', id: "doc-title" }, h("pos-label", { key: 'fcb1a84e354ab5e2842077a6417c5b77ac9d87ed' })), h("pos-type-badges", { key: '370688f50c2906e069686d35a177c88b68de0a98' })), h("pos-literals", { key: '56bc40269a0269301603f3e9f101ad52738fca6a' })))));
+        return (h(Host, { key: '065921cc8beaab90ca56ff993a5d77673af22e18' }, h("section", { key: '9beb103877957c15a494d1604e2ae844172ddc03' }, h("pos-subjects", { key: '5e65e4c5f343e4f0a9ae124dfee4424894e181ff' })), h("section", { key: 'e8beb80dea5f126bcec14a2a3bec7b07aa7c0c15' }, h("article", { key: '38b1603b9bd834b219b4a3ab506c74a12f8d0569', "aria-labelledby": "doc-title" }, h("header", { key: 'c9818e9bd0795205821dab36057469d32e255c15' }, h("h1", { key: '2d676a39fb302e22a07c831e738d96587cfcc3a0', id: "doc-title" }, h("pos-label", { key: 'f5344016de55d828fb9a17c1e0fe43a699593244' })), h("pos-type-badges", { key: 'c273ec23e82f59a89fab79eeff367a23992796a3' })), h("pos-literals", { key: 'ffc386e8934568cf677e105f05d2a1e55d374463' })))));
     }
     static get style() { return PosAppRdfDocumentStyle0 + PosAppRdfDocumentStyle1; }
 }, [1, "pos-app-rdf-document"]);

package/dist/components/pos-app-settings2.js CHANGED Viewed

@@ -11,7 +11,7 @@ const PosAppSettings = /*@__PURE__*/ proxyCustomElement(class PosAppSettings ext
         this.__attachShadow();
     }
     render() {
-        return h("pos-setting-offline-cache", { key: 'f065206f6291089773a19045243f04b6ce35eeb9' });
+        return h("pos-setting-offline-cache", { key: '0da588136a4c7c4238e0387bfe0649464ccd1c7d' });
     }
     static get style() { return PosAppSettingsStyle0; }
 }, [1, "pos-app-settings"]);

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

@@ -610,7 +610,7 @@ const PosApp = /*@__PURE__*/ proxyCustomElement(class PosApp extends HTMLElement
         }
     }
     render() {
-        return h("slot", { key: '988c393af75e8bd0f4ff2b4c04fe33b1ed686fa7' });
+        return h("slot", { key: '402887f3383b6053da157df211c28977720db8e2' });
     }
 }, [4, "pos-app", {
         "restorePreviousSession": [4, "restore-previous-session"],

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

@@ -16,7 +16,7 @@ const PosDialog = /*@__PURE__*/ proxyCustomElement(class PosDialog extends HTMLE
         this.dialog.close();
     }
     render() {
-        return (h(Host, { key: '168dc7d1cf3feabd5f9b2b3f9add6b04467b36ef' }, h("dialog", { key: '8bbfb245d9ff066d111c116c1715be25b0907403', ref: el => (this.dialog = el) }, h("header", { key: '94e28eb2b8147cb6b2aedda0d8e6a5158117788e' }, h("slot", { key: 'a40c2d397b9f54056d4fd8089fdfcc1e446b6d61', name: "title" }), h("button", { key: 'f0f64f5aaafc331f9e3d0fb6201c453600157db1', tabindex: -1, id: "close", title: "Close", onClick: () => this.close() }, h("ion-icon", { key: 'd94a0cf3d19d7caa3717690004101e3ff4748760', name: "close-outline" }))), h("slot", { key: '3181fafe55869add4a587bf4726226055e98588d', name: "content" }))));
+        return (h(Host, { key: '307e23d3f92eae595a6bb9fd3e2487387d9b02c2' }, h("dialog", { key: '4c21714a0e2e84d809fe46b75d875c961ff8240c', ref: el => (this.dialog = el) }, h("header", { key: '0b9276c31a8deffa524a65b744d0ced04a753c1b' }, h("slot", { key: 'f4bcf72fcb25ea2619a0d7a40f524a10a91c0ca6', name: "title" }), h("button", { key: '8afb0911e29f8b4c81ff31f498266b398125327a', tabindex: -1, id: "close", title: "Close", onClick: () => this.close() }, h("ion-icon", { key: '464669b8a7f2aa1a1d274f933bb394a61abffc99', name: "close-outline" }))), h("slot", { key: 'f9fa43f73f8c295b6c728b4c7e7e3bf5c3be8948', name: "content" }))));
     }
     static get style() { return PosDialogStyle0; }
 }, [4, "pos-dialog", {

package/dist/components/pos-error-toast2.js CHANGED Viewed

@@ -37,7 +37,7 @@ const PosErrorToast = /*@__PURE__*/ proxyCustomElement(class PosErrorToast exten
         await toast.present();
     }
     render() {
-        return (h(Host, { key: 'c1ee5f8a19177c79a3fe377fa27e4a32ffa9db9f' }, h("ion-toast", { key: '8759a3436a5caa16a11a2900a5f67d0dd205d097', trigger: "never", message: "Workarround to preload ion-toast and ion-ripple-effect to be able to show errors while offline", duration: 0 }, h("ion-ripple-effect", { key: '990aa24f2a18750ec5307498acda539b784c86c4' })), h("slot", { key: 'bea0650cc211dc2a161e7c634825adc045647d84' })));
+        return (h(Host, { key: '0dce513e04101d3b9011c635f5aab8897a246385' }, h("ion-toast", { key: '956224c61589fca317f8143055344c857aa894cf', trigger: "never", message: "Workarround to preload ion-toast and ion-ripple-effect to be able to show errors while offline", duration: 0 }, h("ion-ripple-effect", { key: 'e96e65e2f06b61970e241639e7c429a90404517e' })), h("slot", { key: '8869125c64fb97f9736e30df0a748c9ce6aec1da' })));
     }
 }, [1, "pos-error-toast", undefined, [[8, "unhandledrejection", "unhandledRejection"], [0, "pod-os:error", "catchError"]]]);
 function defineCustomElement() {

package/dist/components/pos-getting-started2.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-const posGettingStartedCss = ":host{border:var(--size-px) solid var(--pos-border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--size-8);max-width:var(--size-96);background:var(--pos-card-background)}.question{font-weight:var(--weight-semibold)}a{font-weight:var(--weight-bold);color:var(--pos-primary-color)}";
+const posGettingStartedCss = ":host{border:var(--size-px) solid var(--pos-border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--size-8);max-width:var(--size-96);background:var(--pos-card-background)}.question{font-weight:var(--weight-semibold)}a{font-weight:var(--weight-bold);color:var(--pos-primary-color)}button.login{background:none;color:var(--pos-primary-color);display:inline;text-decoration:underline;border:none;padding:0;margin:0;cursor:pointer;font-size:unset}";
 const PosGettingStartedStyle0 = posGettingStartedCss;
 const PosGettingStarted = /*@__PURE__*/ proxyCustomElement(class PosGettingStarted extends HTMLElement {
@@ -8,9 +8,10 @@ const PosGettingStarted = /*@__PURE__*/ proxyCustomElement(class PosGettingStart
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.login = createEvent(this, "pod-os:login", 7);
     }
     render() {
-        return (h(Host, { key: 'a31a64545a5960ce8e34f0c612d2755e465c1131' }, h("div", { key: '29ec2c449fd5334e47199dece7c01c2a71ab6d98' }, h("h2", { key: 'e680003831826c8cd4615de083f9f9c305513c29' }, "Getting started \uD83D\uDE80"), h("p", { key: '8e80305087bee4c8ec05ac7cb16096caf0c61ad0' }, "\uD83D\uDD0E Enter a URL into the above navigation bar to browse through the web of data. "), h("p", { key: '4d7ba95047694e636934cb7a03c291adb0678bb6' }, "\uD83D\uDD10 Sign in to access private resources on your Solid Pod or those of your friends or coworkers.")), h("div", { key: '167ac903fa88b9be6cf00f2f5bfea23d8dfd14c9' }, h("p", { key: 'a0b06f944e534b889502a96c935686a3b7f349d0', class: "question" }, "New to Solid?"), h("p", { key: '8c26c4d20d0fcdb075ad4c0ea5ff012d22dee081' }, h("a", { key: 'd9bc5b7bfd213012078729e25e42b4ea8b970573', href: "https://solidproject.org/for-developers#hosted-pod-services" }, "Get a Pod \u2192"))), h("div", { key: '223f171699e3acf5f1c5c4819621bddc49db41f1' }, h("p", { key: 'e83cfd2b01c5abaf30f0053ef261c68ae0919f0a', class: "question" }, "Want to dig deeper into PodOS?"), h("p", { key: '8ccdbd60a250850c4105e99545f09755109ced86' }, h("a", { key: 'f72a83533b846bd8e8e798b0dd71cfc585a8d104', href: "http://pod-os.org" }, "Learn more \u2192")))));
+        return (h(Host, { key: '963476081378811bc5623921ca7f4dc5ac18b9f7' }, h("div", { key: 'df6a7a5bab3c026d1960c03a4d008f8bff0b1c9d' }, h("h2", { key: '9e7a1e2c081f87275641fe99afb72c1f8ef65115' }, "Getting started \uD83D\uDE80"), h("p", { key: 'dac8ca58a733d66ab80fa79ef59d62a254b3b83f' }, "\uD83D\uDD0E Enter a URL into the above navigation bar to browse through the web of data. "), h("p", { key: 'c90fbc4f7c09893f6ded65befe4c77f673df6db2' }, "\uD83D\uDD10", ' ', h("button", { key: '2688b10503c6d518a7a48601f35e1f20741d71c7', class: "login", onClick: () => this.login.emit() }, "Sign in"), ' ', "to access private resources on your Solid Pod or those of your friends or coworkers.")), h("div", { key: '5990c65adc978df16ec7b73c3be2b6b4b3a48ce3' }, h("p", { key: '8fd4cb0941da30c3b438338a557a6d4fb9d7ff33', class: "question" }, "New to Solid?"), h("p", { key: 'd6b06063acaac1d55dc0aea86c3d80f4e7c8ca6f' }, h("a", { key: 'b0a49b4e170c89f736cf9bd2dd567cfafbcec31c', href: "https://solidproject.org/for-developers#hosted-pod-services" }, "Get a Pod \u2192"))), h("div", { key: '7c88ea4bb3982346343cf10e6196d2d07057a24e' }, h("p", { key: '22cfb601fada05ca7b5f274f0b6a81d360344764', class: "question" }, "Want to dig deeper into PodOS?"), h("p", { key: 'fb03d0f84714feb53b1b053390a5e7b9686e610e' }, h("a", { key: '1681d6d1c860589ca1624abc3c05121ccde3f951', href: "http://pod-os.org" }, "Learn more \u2192")))));
     }
     static get style() { return PosGettingStartedStyle0; }
 }, [1, "pos-getting-started"]);

package/dist/components/pos-getting-started2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pos-getting-started2.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,~~yTAAyT~~,CAAC;~~AACvV~~,gCAAe,oBAAoB;;MCMtB,iBAAiB~~;;;;;;IAC5B~~,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DACE,4FAA2B,EAC3B,yJAAuF,EACvF,~~wKAAsG~~,~~CAClG~~,EACN,8DACE,0DAAG,KAAK,EAAC,UAAU,oBAAkB,EACrC,4DACE,0DAAG,IAAI,EAAC,6DAA6D,uBAAqB,CACxF,CACA,EACN,8DACE,0DAAG,KAAK,EAAC,UAAU,qCAAmC,EACtD,4DACE,0DAAG,IAAI,EAAC,mBAAmB,wBAAsB,CAC/C,CACA,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/apps/pos-app-dashboard/pos-getting-started/pos-getting-started.css?tag=pos-getting-started&encapsulation=shadow","src/apps/pos-app-dashboard/pos-getting-started/pos-getting-started.tsx"],"sourcesContent":[":host {\n border: var(--size-px) solid var(--pos-border-color);\n border-radius: var(--radius-lg);\n box-shadow: var(--shadow-md);\n padding: var(--size-8);\n max-width: var(--size-96);\n background: var(--pos-card-background);\n}\n\n.question {\n font-weight: var(--weight-semibold);\n}\n\na {\n font-weight: var(--weight-bold);\n color: var(--pos-primary-color);\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'pos-getting-started',\n styleUrl: 'pos-getting-started.css',\n shadow: true,\n})\nexport class PosGettingStarted {\n render() {\n return (\n <Host>\n <div>\n <h2>Getting started 🚀</h2>\n <p>🔎 Enter a URL into the above navigation bar to browse through the web of data. </p>\n <p>🔐 Sign in to access private resources on your Solid Pod or those of your friends or coworkers~~.</~~p>\n </div>\n <div>\n <p class=\"question\">New to Solid?</p>\n <p>\n <a href=\"https://solidproject.org/for-developers#hosted-pod-services\">Get a Pod →</a>\n </p>\n </div>\n <div>\n <p class=\"question\">Want to dig deeper into PodOS?</p>\n <p>\n <a href=\"http://pod-os.org\">Learn more →</a>\n </p>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pos-getting-started2.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,4dAA4d,CAAC;AAC1f,gCAAe,oBAAoB;;MCMtB,iBAAiB;;;;;;;IAI5B,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DACE,4FAA2B,EAC3B,yJAAuF,EACvF,4EACK,GAAG,EACN,+DAAQ,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,cAE7C,EAAC,GAAG,yFAEX,CACA,EACN,8DACE,0DAAG,KAAK,EAAC,UAAU,oBAAkB,EACrC,4DACE,0DAAG,IAAI,EAAC,6DAA6D,uBAAqB,CACxF,CACA,EACN,8DACE,0DAAG,KAAK,EAAC,UAAU,qCAAmC,EACtD,4DACE,0DAAG,IAAI,EAAC,mBAAmB,wBAAsB,CAC/C,CACA,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/apps/pos-app-dashboard/pos-getting-started/pos-getting-started.css?tag=pos-getting-started&encapsulation=shadow","src/apps/pos-app-dashboard/pos-getting-started/pos-getting-started.tsx"],"sourcesContent":[":host {\n border: var(--size-px) solid var(--pos-border-color);\n border-radius: var(--radius-lg);\n box-shadow: var(--shadow-md);\n padding: var(--size-8);\n max-width: var(--size-96);\n background: var(--pos-card-background);\n}\n\n.question {\n font-weight: var(--weight-semibold);\n}\n\na {\n font-weight: var(--weight-bold);\n color: var(--pos-primary-color);\n}\n\nbutton.login {\n background: none;\n color: var(--pos-primary-color);\n display: inline;\n text-decoration: underline;\n border: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n font-size: unset;\n}\n","import { Component, Event, EventEmitter, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'pos-getting-started',\n styleUrl: 'pos-getting-started.css',\n shadow: true,\n})\nexport class PosGettingStarted {\n @Event({ eventName: 'pod-os:login' })\n login: EventEmitter<void>;\n\n render() {\n return (\n <Host>\n <div>\n <h2>Getting started 🚀</h2>\n <p>🔎 Enter a URL into the above navigation bar to browse through the web of data. </p>\n <p>\n 🔐{' '}\n <button class=\"login\" onClick={() => this.login.emit()}>\n Sign in\n </button>{' '}\n to access private resources on your Solid Pod or those of your friends or coworkers.\n </p>\n </div>\n <div>\n <p class=\"question\">New to Solid?</p>\n <p>\n <a href=\"https://solidproject.org/for-developers#hosted-pod-services\">Get a Pod →</a>\n </p>\n </div>\n <div>\n <p class=\"question\">Want to dig deeper into PodOS?</p>\n <p>\n <a href=\"http://pod-os.org\">Learn more →</a>\n </p>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -40,7 +40,7 @@ const PosLiterals = /*@__PURE__*/ proxyCustomElement(class PosLiterals extends H
         }
     }
     render() {
-        return (h(Host, { key: '26dd446e53e4157e6b635b5d711abf9ddf50b821' }, this.data.length > 0 ? (h("dl", null, this.data.map(it => (h("div", { class: "predicate-values" }, h("dt", null, h("pos-predicate", { uri: it.predicate, label: it.label })), h("div", { class: "values" }, it.values.map(value => (h("dd", null, value))))))))) : null, h("pos-add-literal-value", { key: '756003351bba9399d1a53242c0153b18fc0b4b19', "onPod-os:added-literal-value": event => this.literalValueAdded(event.detail) })));
+        return (h(Host, { key: '571f571381d9a9c4bcf0188a782c46485266a3d8' }, this.data.length > 0 ? (h("dl", null, this.data.map(it => (h("div", { class: "predicate-values" }, h("dt", null, h("pos-predicate", { uri: it.predicate, label: it.label })), h("div", { class: "values" }, it.values.map(value => (h("dd", null, value))))))))) : null, h("pos-add-literal-value", { key: 'e1b58aba48a56e60ec8bb1087f054972bb2c437c', "onPod-os:added-literal-value": event => this.literalValueAdded(event.detail) })));
     }
     static get style() { return PosLiteralsStyle0; }
 }, [1, "pos-literals", {

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

@@ -16,7 +16,7 @@ const PosLoginForm = /*@__PURE__*/ proxyCustomElement(class PosLoginForm extends
         this.canSubmit = Boolean(this.idpUrl);
     }
     render() {
-        return (h("form", { key: '193d3790329d1480fd6b14fd55a0d8cee8ce61dd', method: "dialog", onSubmit: () => this.handleSubmit() }, h("label", { key: 'd85ea6b508c9f229e1125f8cc97092335458b94a', htmlFor: "idpUrl" }, "Please enter your Identity Provider"), h("input", { key: 'a2f5e9955b27a8c1fab14c8f087fab167a19dc9a', id: "idpUrl", type: "url", value: this.idpUrl, required: true, onInput: e => this.handleChange(e), list: "suggestedIssuers", placeholder: "Type to search..." }), h("datalist", { key: 'fa0924b31e1a4fcdc794931dd2073022ab4ce95b', id: "suggestedIssuers" }, h("option", { key: 'c3495be7c2a98494ac3ca7fe504edd4b1b232394', value: "https://solidcommunity.net" }, "solidcommunity.net"), h("option", { key: '7fd17434388ed31468df8682dcfc2b4263c27ccb', value: "https://solidweb.org" }, "solidweb.org"), h("option", { key: '4c2a5854fc2499198b289181136cbd0a2fd9c1e1', value: "https://solidweb.me" }, "solidweb.me"), h("option", { key: '02a81104db23c62e0d42b8b45b95eccbd16fc108', value: "https://inrupt.net" }, "inrupt.net"), h("option", { key: 'd7c15dca86800cafc5a974920e40bd117fa50194', value: "https://login.inrupt.com" }, "Inrupt PodSpaces"), h("option", { key: '93ff71136f1775098fda80db5d437f37b51c496f', value: "https://trinpod.us" }, "trinpod.us"), h("option", { key: '481f1630526e324cb24b38c0077b1aeb496b4690', value: "https://use.id" }, "use.id"), h("option", { key: 'abd85ffba7532ba488bf0a4c18a2da2f3dc481ee', value: "https://solid.redpencil.io" }, "redpencil.io"), h("option", { key: '339562d277c4af2e10344f385d00aa4cc37375fa', value: "https://datapod.grant.io" }, "Data Pod (grant.io)"), h("option", { key: '918224ac5af806666a7b77bc8049dcf79800ab8c', value: "https://teamid.live" }, "teamid.live")), h("input", { key: '1ad3ef7998237d30c5eaf5bc9eebe55ede09d0a8', id: "login", type: "submit", value: "Login", disabled: !this.canSubmit })));
+        return (h("form", { key: 'ddd05b4f905b65b2b5da556b3e9562bbff1812b0', method: "dialog", onSubmit: () => this.handleSubmit() }, h("label", { key: 'a23f430387db8339efe42d680d0659122b4503c2', htmlFor: "idpUrl" }, "Please enter your Identity Provider"), h("input", { key: '23c7209c3a4ecd79f305dc23961508f41ede85d3', id: "idpUrl", type: "url", value: this.idpUrl, required: true, onInput: e => this.handleChange(e), list: "suggestedIssuers", placeholder: "Type to search..." }), h("datalist", { key: '663730bddeb65eb5c58116ea329e00eee4b64a0f', id: "suggestedIssuers" }, h("option", { key: '71f0b94980ae6b38732f5f4319e1a5d4dad36f77', value: "https://solidcommunity.net" }, "solidcommunity.net"), h("option", { key: 'a18600e5fd7c6892f64b1b8e70480d564e9c39f6', value: "https://solidweb.org" }, "solidweb.org"), h("option", { key: '5528ee847f979c29d8d9725a13d51f7ae88cb82c', value: "https://solidweb.me" }, "solidweb.me"), h("option", { key: '9f1b85fbc78dc9870112053c61ece17d20dd89ec', value: "https://inrupt.net" }, "inrupt.net"), h("option", { key: '6bdaac53eae2b6830a2146e980542565dead33b7', value: "https://login.inrupt.com" }, "Inrupt PodSpaces"), h("option", { key: 'd5f243d1e7656bbca35b1c9920d4e2b867abed68', value: "https://trinpod.us" }, "trinpod.us"), h("option", { key: '1a9f2aab20d25a09b31ae47858c638e065ac27b5', value: "https://use.id" }, "use.id"), h("option", { key: 'f275d341b26be71158d6e5bd44ed138f54da823e', value: "https://solid.redpencil.io" }, "redpencil.io"), h("option", { key: '0945f4829972e9bdb37deb406d24d63e5bf30e8f', value: "https://datapod.grant.io" }, "Data Pod (grant.io)"), h("option", { key: '4cce12430b365c241a126ece63865c8dfa6e195e', value: "https://teamid.live" }, "teamid.live")), h("input", { key: 'd46215b8314e845b4ba6df750537ec6c8a14f8ed', id: "login", type: "submit", value: "Login", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.validate();

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

@@ -19,11 +19,13 @@ const PosLogin = /*@__PURE__*/ proxyCustomElement(class PosLogin extends HTMLEle
         this.__registerHost();
         this.__attachShadow();
         this.initializeOsEmitter = createEvent(this, "pod-os:init", 7);
+        this.customLoggedInComponent = false;
         this.setOs = async (os) => {
             this.os = os;
         };
     }
     componentWillLoad() {
+        this.customLoggedInComponent = !!this.host.querySelector('[slot="if-logged-in"]');
         this.initializeOsEmitter.emit(this.setOs);
     }
     login(event) {
@@ -33,16 +35,30 @@ const PosLogin = /*@__PURE__*/ proxyCustomElement(class PosLogin extends HTMLEle
     logout() {
         this.os.logout();
     }
+    onLogin() {
+        this.openDialog();
+    }
     openDialog() {
         this.dialog.showModal();
     }
     render() {
-        return (h(Host, { key: '6349e0939fb22cddc9a6e47d424ce2badd518dcd' }, h("div", { key: '940d720ae5a7b951fe4a1bf411e463add43d93d0', class: "container" }, store.state.isLoggedIn ? (h("pos-resource", { uri: store.state.webId }, h("span", { class: "user-data" }, h("pos-picture", null), h("pos-label", null)))) : (''), !store.state.isLoggedIn && (h("button", { key: '40aeea2f9686c9792c3952f8b899f9e819895bae', id: "login", onClick: () => this.openDialog() }, "Login")), store.state.isLoggedIn && (h("button", { key: 'dd8129f4ae6b590231c33d072f4094b7bfc99da5', id: "logout", onClick: () => this.logout() }, "Logout"))), h("pos-dialog", { key: '33278d394f830f5c6040c3c22dc720440dd9d75c', ref: el => (this.dialog = el) }, h("span", { key: '96d3c645cacb1b38bd9adca8562ae4068eeabe11', slot: "title" }, "Sign in to your Pod"), h("pos-login-form", { key: '0c296b68774e4e2c1ed6091c305348b36e80178f', "onPod-os:idp-url-selected": ev => this.login(ev), slot: "content" }))));
+        return (h(Host, { key: '7e69a8cba87f4f7ccc1fdcf2945d240997191354' }, h("div", { key: '5083252a92113e3e215828a954bc1c5feb30db2b', class: "container" }, !store.state.isLoggedIn ? (h("button", { id: "login", onClick: () => this.openDialog() }, "Login")) : (this.loggedInComponents())), h("pos-dialog", { key: '17499523a10346d3f120aee19287e7d8788e2d04', ref: el => (this.dialog = el) }, h("span", { key: 'e7b066d3f2a2d5f4867412d4d399bb9bd261eee4', slot: "title" }, "Sign in to your Pod"), h("pos-login-form", { key: 'd44157b3ec87726c2ad89ad453899bdeb37a293e', "onPod-os:idp-url-selected": ev => this.login(ev), slot: "content" }))));
+    }
+    loggedInComponents() {
+        return this.customLoggedInComponent ? h("slot", { name: "if-logged-in" }) : this.defaultLoggedInComponents();
+    }
+    defaultLoggedInComponents() {
+        return [
+            h("pos-resource", { uri: store.state.webId }, h("span", { class: "user-data" }, h("pos-picture", null), h("pos-label", null))),
+            h("button", { id: "logout", onClick: () => this.logout() }, "Logout"),
+        ];
     }
+    get host() { return this; }
     static get style() { return PosLoginStyle0; }
 }, [1, "pos-login", {
-        "os": [32]
-    }]);
+        "os": [32],
+        "customLoggedInComponent": [32]
+    }, [[4, "pod-os:login", "onLogin"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

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

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

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

@@ -4,7 +4,7 @@ import { d as defineCustomElement$3 } from './pos-label2.js';
 import { d as defineCustomElement$2 } from './pos-make-findable2.js';
 import { d as defineCustomElement$1 } from './pos-resource2.js';
-const posNavigationBarCss = "section.current {\n  display: flex;\n  height: var(--pos-navigation-bar-height);\n  flex-grow: 1;\n  gap: 0;\n  background-color: var(--pos-input-background-color);\n  border-radius: var(--radius-md);\n  width: 100%;\n  &:focus-within {\n    outline: var(--pos-input-focus-outline);\n  }\n}\n\nsection.current button {\n  cursor: pointer;\n  font-size: var(--scale-1);\n  flex-grow: 1;\n  background: none;\n  color: var(--pos-normal-text-color);\n  outline: none;\n  border: none;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  &:focus {\n    text-decoration: underline;\n  }\n}\n";
+const posNavigationBarCss = "section.current {\n  display: flex;\n  height: var(--pos-navigation-bar-height);\n  flex-grow: 1;\n  gap: 0;\n  background-color: var(--pos-input-background-color);\n  border-radius: var(--radius-md);\n  width: 100%;\n  &:focus-within {\n    outline: var(--pos-input-focus-outline);\n  }\n}\n\nsection.current button {\n  cursor: pointer;\n  font-size: var(--scale-1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-grow: 1;\n  background: none;\n  color: var(--pos-normal-text-color);\n  outline: none;\n  border: none;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  &:focus {\n    text-decoration: underline;\n  }\n  :first-child {\n    flex-grow: 1;\n  }\n  svg {\n    width: var(--size-6);\n    color: var(--pos-subtle-text-color);\n  }\n}\n";
 const PosNavigationBarStyle0 = posNavigationBarCss;
 const PosNavigationBar = /*@__PURE__*/ proxyCustomElement(class PosNavigationBar extends HTMLElement {
@@ -25,7 +25,10 @@ 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: '79ac5c5dc2d6c2d44e852f9671d0895a29fb62a6', class: "current" }, this.current && this.searchIndexReady && h("pos-make-findable", { key: 'be92d99ead125c1a29520639da6dfd6e28007d85', uri: this.current.uri }), h("button", { key: '4ecdd49e46614f604c36ef760422d54f99ab00f1', "aria-label": ariaLabel, onClick: () => this.onClick() }, this.current ? this.current.label() : '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())));
+    }
+    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" })));
     }
     static get style() { return PosNavigationBarStyle0; }
 }, [1, "pos-navigation-bar", {

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

	@@ -1 +1 @@
1	- {"file":"pos-navigation-bar2.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,~~omBAAomB~~,CAAC;~~AACjoB~~,+BAAe,mBAAmB;;MCOrB,gBAAgB;;;;;;;IAMnB,OAAO;QACb,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAClC;IAGD,QAAQ,CAAC,CAAgB;QACvB,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,KAAK,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;YAC7C,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SAClC;KACF;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,iCAAiC,GAAG,qBAAqB,CAAC;QAElH,QACE,gEAAS,KAAK,EAAC,SAAS,IACrB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,gBAAgB,IAAI,0EAAmB,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,GAAsB,EACxG,6EAAoB,SAAS,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,~~IACzD~~,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,qBAAqB,~~CACrD~~,CACD,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-navigation/bar/pos-navigation-bar.css?tag=pos-navigation-bar&encapsulation=shadow","src/components/pos-navigation/bar/pos-navigation-bar.tsx"],"sourcesContent":["section.current {\n display: flex;\n height: var(--pos-navigation-bar-height);\n flex-grow: 1;\n gap: 0;\n background-color: var(--pos-input-background-color);\n border-radius: var(--radius-md);\n width: 100%;\n &:focus-within {\n outline: var(--pos-input-focus-outline);\n }\n}\n\nsection.current button {\n cursor: pointer;\n font-size: var(--scale-1);\n flex-grow: 1;\n background: none;\n color: var(--pos-normal-text-color);\n outline: none;\n border: none;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n &:focus {\n text-decoration: underline;\n }\n}\n","import { Component, Event, EventEmitter, h, Listen, Prop } from '@stencil/core';\nimport { Thing } from '@pod-os/core';\n\n@Component({\n tag: 'pos-navigation-bar',\n shadow: true,\n styleUrl: 'pos-navigation-bar.css',\n})\nexport class PosNavigationBar {\n @Prop() current?: Thing;\n @Prop() searchIndexReady: boolean;\n\n @Event({ eventName: 'pod-os:navigate' }) navigate: EventEmitter;\n\n private onClick() {\n this.navigate.emit(this.current);\n }\n\n @Listen('keydown', { target: 'document' })\n activate(e: KeyboardEvent) {\n if ((e.ctrlKey \|\| e.metaKey) && e.key === 'k') {\n e.preventDefault();\n this.navigate.emit(this.current);\n }\n }\n\n render() {\n const ariaLabel = this.current ? `${this.current.label()} (Click to search or enter URI)` : 'Search or enter URI';\n\n return (\n <section class=\"current\">\n {this.current && this.searchIndexReady && <pos-make-findable uri={this.current.uri}></pos-make-findable>}\n <button aria-label={ariaLabel} onClick={() => this.onClick()}>\n {this.current ? this.current.label() : 'Search or enter URI'}\n </button>\n </section>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pos-navigation-bar2.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,uyBAAuyB,CAAC;AACp0B,+BAAe,mBAAmB;;MCOrB,gBAAgB;;;;;;;IAMnB,OAAO;QACb,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAClC;IAGD,QAAQ,CAAC,CAAgB;QACvB,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,KAAK,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;YAC7C,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SAClC;KACF;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,iCAAiC,GAAG,qBAAqB,CAAC;QAElH,QACE,gEAAS,KAAK,EAAC,SAAS,IACrB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,gBAAgB,IAAI,0EAAmB,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,GAAsB,EACxG,6EAAoB,SAAS,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,IAC1D,8DAAM,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,qBAAqB,CAAO,EACvE,IAAI,CAAC,IAAI,EAAE,CACL,CACD,EACV;KACH;IAEO,IAAI;QACV,QACE,0BACc,MAAM,EAClB,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,kBACN,KAAK,EAClB,MAAM,EAAC,cAAc,IAErB,8BACiB,OAAO,qBACN,OAAO,EACvB,CAAC,EAAC,+EAA+E,GACjF,CACE,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-navigation/bar/pos-navigation-bar.css?tag=pos-navigation-bar&encapsulation=shadow","src/components/pos-navigation/bar/pos-navigation-bar.tsx"],"sourcesContent":["section.current {\n display: flex;\n height: var(--pos-navigation-bar-height);\n flex-grow: 1;\n gap: 0;\n background-color: var(--pos-input-background-color);\n border-radius: var(--radius-md);\n width: 100%;\n &:focus-within {\n outline: var(--pos-input-focus-outline);\n }\n}\n\nsection.current button {\n cursor: pointer;\n font-size: var(--scale-1);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-grow: 1;\n background: none;\n color: var(--pos-normal-text-color);\n outline: none;\n border: none;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n &:focus {\n text-decoration: underline;\n }\n :first-child {\n flex-grow: 1;\n }\n svg {\n width: var(--size-6);\n color: var(--pos-subtle-text-color);\n }\n}\n","import { Component, Event, EventEmitter, h, Listen, Prop } from '@stencil/core';\nimport { Thing } from '@pod-os/core';\n\n@Component({\n tag: 'pos-navigation-bar',\n shadow: true,\n styleUrl: 'pos-navigation-bar.css',\n})\nexport class PosNavigationBar {\n @Prop() current?: Thing;\n @Prop() searchIndexReady: boolean;\n\n @Event({ eventName: 'pod-os:navigate' }) navigate: EventEmitter;\n\n private onClick() {\n this.navigate.emit(this.current);\n }\n\n @Listen('keydown', { target: 'document' })\n activate(e: KeyboardEvent) {\n if ((e.ctrlKey \|\| e.metaKey) && e.key === 'k') {\n e.preventDefault();\n this.navigate.emit(this.current);\n }\n }\n\n render() {\n const ariaLabel = this.current ? `${this.current.label()} (Click to search or enter URI)` : 'Search or enter URI';\n\n return (\n <section class=\"current\">\n {this.current && this.searchIndexReady && <pos-make-findable uri={this.current.uri}></pos-make-findable>}\n <button aria-label={ariaLabel} onClick={() => this.onClick()}>\n <div>{this.current ? this.current.label() : 'Search or enter URI'}</div>\n {this.icon()}\n </button>\n </section>\n );\n }\n\n private icon() {\n return (\n <svg\n aria-hidden=\"true\"\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=\"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\"\n />\n </svg>\n );\n }\n}\n"],"version":3}

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

@@ -202,7 +202,7 @@ function debounceTime(dueTime, scheduler = asyncScheduler) {
     });
 }
-const posNavigationCss = ":host {\n  --pos-navigation-bar-height: var(--size-10);\n}\n\nsearch {\n  position: relative;\n}\n\n.suggestions ol {\n  border: 1px solid var(--pos-border-color);\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n}\n\n.suggestions {\n  width: 100%;\n  overflow-y: auto;\n  max-height: 90dvh;\n  li {\n    padding: 1rem;\n    background-color: var(--pos-background-color);\n    pos-rich-link {\n      --background-color: inherit;\n    }\n    &.selected {\n      background-color: var(--pos-primary-color);\n      &:hover {\n        background-color: var(--pos-primary-color);\n      }\n    }\n    &:hover {\n      background-color: var(--pos-border-color);\n    }\n  }\n}\n\n.suggestions li.selected pos-rich-link {\n  --label-color: white;\n  --description-color: var(--pos-border-color);\n  --uri-color: var(--pos-subtle-text-color);\n}\n\ndialog {\n  position: absolute;\n  margin-top: calc(-1 * var(--pos-navigation-bar-height));\n  padding: 0;\n  width: 100%;\n  max-width: 100%;\n  min-width: 100%;\n  overflow: hidden;\n  max-height: 100dvh;\n  background-color: var(--pos-background-color);\n  color: var(--pos-normal-text-color);\n  border: var(--pos-border-color);\n  border-radius: var(--radius-md);\n  box-shadow: var(--shadow-md);\n  form {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    width: 100%;\n    align-items: center;\n    input {\n      display: flex;\n      font-size: var(--scale-1);\n      height: var(--pos-navigation-bar-height);\n      border-top-left-radius: var(--radius-md);\n      border-top-right-radius: var(--radius-md);\n      padding-left: var(--size-2);\n      width: 100%;\n      border: none;\n      outline: none;\n      color: var(--pos-normal-text-color);\n      background-color: var(--pos-input-background-color);\n      box-sizing: border-box;\n    }\n  }\n}\n\ndialog[open] {\n  display: flex;\n  z-index: var(--layer-top);\n  animation: slideIn 100ms ease-out;\n}\n\n@media (max-width: 640px) {\n  search {\n    position: unset;\n  }\n  dialog {\n    margin-top: var(--size-1);\n    top: 0;\n    width: 95dvw;\n    max-width: unset;\n    min-width: unset;\n    form {\n      input {\n        height: var(--size-12);\n        font-size: var(--scale-fluid-3);\n      }\n    }\n  }\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n";
+const posNavigationCss = ":host {\n  --pos-navigation-bar-height: var(--size-10);\n}\n\nsearch {\n  position: relative;\n}\n\n.suggestions ol {\n  border: 1px solid var(--pos-border-color);\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n}\n\n.suggestions {\n  width: 100%;\n  overflow-y: auto;\n  max-height: 90dvh;\n  li {\n    padding: 1rem;\n    background-color: var(--pos-background-color);\n    pos-rich-link {\n      --background-color: inherit;\n    }\n    &[aria-selected='true'] {\n      background-color: var(--pos-primary-color);\n      &:hover {\n        background-color: var(--pos-primary-color);\n      }\n    }\n    &:hover {\n      background-color: var(--pos-border-color);\n    }\n  }\n}\n\n.suggestions li.selected pos-rich-link {\n  --label-color: white;\n  --description-color: var(--pos-border-color);\n  --uri-color: var(--pos-subtle-text-color);\n}\n\ndialog {\n  position: absolute;\n  margin-top: calc(-1 * var(--pos-navigation-bar-height));\n  padding: 0;\n  width: 100%;\n  max-width: 100%;\n  min-width: 100%;\n  overflow: hidden;\n  max-height: 100dvh;\n  background-color: var(--pos-background-color);\n  color: var(--pos-normal-text-color);\n  border: var(--pos-border-color);\n  border-radius: var(--radius-md);\n  box-shadow: var(--shadow-md);\n  form {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    width: 100%;\n    align-items: center;\n    input {\n      display: flex;\n      font-size: var(--scale-1);\n      height: var(--pos-navigation-bar-height);\n      border-top-left-radius: var(--radius-md);\n      border-top-right-radius: var(--radius-md);\n      padding-left: var(--size-2);\n      width: 100%;\n      border: none;\n      outline: none;\n      color: var(--pos-normal-text-color);\n      background-color: var(--pos-input-background-color);\n      box-sizing: border-box;\n    }\n  }\n}\n\ndialog[open] {\n  display: flex;\n  z-index: var(--layer-top);\n  animation: slideIn 100ms ease-out;\n}\n\n@media (max-width: 640px) {\n  search {\n    position: unset;\n  }\n  dialog {\n    margin-top: var(--size-1);\n    top: 0;\n    width: 95dvw;\n    max-width: unset;\n    min-width: unset;\n    form {\n      input {\n        height: var(--size-12);\n        font-size: var(--scale-fluid-3);\n      }\n    }\n  }\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n";
 const PosNavigationStyle0 = posNavigationCss;
 const PosNavigation = /*@__PURE__*/ proxyCustomElement(class PosNavigation extends HTMLElement {
@@ -321,7 +321,7 @@ const PosNavigation = /*@__PURE__*/ proxyCustomElement(class PosNavigation exten
         }
     }
     render() {
-        return (h("nav", { key: 'f09437fdd0bdfc5912af62658f1f32ab54c439c8' }, h("search", { key: 'fa09fec64bacfe1460a1fad256e509a480dd6a01' }, h("pos-navigation-bar", { key: '8dcd35cad5858da049ae942152f3cebe884aa761', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), h("dialog", { key: '3ad61d48a6c5fcd0b010950c702e9488a9fd5160', ref: el => (this.dialogRef = el) }, h("form", { key: '1c23af28daf15f635d4c36002ca6fe153e33b48e', method: "dialog", onSubmit: () => this.onSubmit() }, h("input", { key: 'f11ff492c9333e5f6110630b9b6b3f3b5c127660', ref: el => (this.inputRef = el), enterkeyhint: "search", placeholder: "Search or enter URI", value: this.uri, onChange: e => this.onChange(e), onInput: e => this.onChange(e) }), this.suggestions.length > 0 ? (h("div", { class: "suggestions" }, h("ol", null, this.suggestions.map((it, index) => (h("li", { class: index === this.selectedIndex ? 'selected' : '' }, h("pos-rich-link", { uri: it.ref }))))))) : null)))));
+        return (h("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)))));
     }
     static get watchers() { return {
         "uri": ["updateResource"],