@pod-os/elements 0.26.0 → 0.26.1-rc.2988a4e.0

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

@@ -0,0 +1,115 @@
+:host {
+  --pos-navigation-bar-height: var(--size-10);
+}
+
+search {
+  position: relative;
+}
+
+.suggestions ol {
+  border: 1px solid var(--pos-border-color);
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.suggestions {
+  width: 100%;
+  overflow-y: auto;
+  max-height: 90dvh;
+  li {
+    padding: 1rem;
+    background-color: var(--pos-background-color);
+    pos-rich-link {
+      --background-color: inherit;
+    }
+    &[aria-selected='true'] {
+      background-color: var(--pos-primary-color);
+      &:hover {
+        background-color: var(--pos-primary-color);
+      }
+    }
+    &:hover {
+      background-color: var(--pos-border-color);
+    }
+  }
+}
+
+.suggestions li.selected pos-rich-link {
+  --label-color: white;
+  --description-color: var(--pos-border-color);
+  --uri-color: var(--pos-subtle-text-color);
+}
+
+dialog {
+  position: absolute;
+  margin-top: calc(-1 * var(--pos-navigation-bar-height));
+  padding: 0;
+  width: 100%;
+  max-width: 100%;
+  min-width: 100%;
+  overflow: hidden;
+  max-height: 100dvh;
+  background-color: var(--pos-background-color);
+  color: var(--pos-normal-text-color);
+  border: var(--pos-border-color);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  form {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    input {
+      display: flex;
+      font-size: var(--scale-1);
+      height: var(--pos-navigation-bar-height);
+      border-top-left-radius: var(--radius-md);
+      border-top-right-radius: var(--radius-md);
+      padding-left: var(--size-2);
+      width: 100%;
+      border: none;
+      outline: none;
+      color: var(--pos-normal-text-color);
+      background-color: var(--pos-input-background-color);
+      box-sizing: border-box;
+    }
+  }
+}
+
+dialog[open] {
+  display: flex;
+  z-index: var(--layer-top);
+  animation: slideIn 100ms ease-out;
+}
+
+@media (max-width: 640px) {
+  search {
+    position: unset;
+  }
+  dialog {
+    margin-top: var(--size-1);
+    top: 0;
+    width: 95dvw;
+    max-width: unset;
+    min-width: unset;
+    form {
+      input {
+        height: var(--size-12);
+        font-size: var(--scale-fluid-3);
+      }
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/dist/collection/components/{pos-navigation-bar/pos-navigation-bar.js → pos-navigation/pos-navigation.js}

@@ -1,19 +1,39 @@
 import { h } from "@stencil/core";
+import { debounceTime, Subject } from "rxjs";
 import session from "../../store/session";
 import { subscribePodOs } from "../events/PodOsAware";
-export class PosNavigationBar {
+export class PosNavigation {
     constructor() {
+        /**
+         * Initial value of the navigation bar
+         */
         this.uri = '';
-        this.value = this.uri;
+        /**
+         * Current value of the input field
+         */
+        this.inputValue = this.uri;
         this.searchIndex = undefined;
         this.suggestions = [];
         this.selectedIndex = -1;
+        this.resource = null;
+        this.changeEvents = new Subject();
+        this.debouncedSearch = null;
         this.receivePodOs = async (os) => {
             this.os = os;
         };
     }
+    updateResource() {
+        var _a;
+        try {
+            this.resource = this.uri ? (_a = this.os) === null || _a === void 0 ? void 0 : _a.store.get(this.uri) : null;
+        }
+        catch (_b) {
+            this.resource = null;
+        }
+    }
     componentWillLoad() {
         subscribePodOs(this);
+        this.updateResource();
         session.onChange('isLoggedIn', async (isLoggedIn) => {
             if (isLoggedIn) {
                 await this.buildSearchIndex();
@@ -22,6 +42,11 @@ export class PosNavigationBar {
                 this.clearSearchIndex();
             }
         });
+        this.debouncedSearch = this.changeEvents.pipe(debounceTime(300)).subscribe(() => this.search());
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.debouncedSearch) === null || _a === void 0 ? void 0 : _a.unsubscribe();
     }
     async buildSearchIndex() {
         this.searchIndex = await this.os.buildSearchIndex(session.state.profile);
@@ -29,16 +54,33 @@ export class PosNavigationBar {
     rebuildSearchIndex() {
         this.searchIndex.rebuild();
     }
+    openNavigationDialog(e) {
+        var _a, _b;
+        this.resource = e.detail;
+        if (e.detail) {
+            this.inputValue = e.detail.uri;
+            this.search();
+        }
+        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.select();
+        (_b = this.dialogRef) === null || _b === void 0 ? void 0 : _b.show();
+    }
     clearSearchIndex() {
         var _a;
         (_a = this.searchIndex) === null || _a === void 0 ? void 0 : _a.clear();
     }
     onChange(event) {
-        this.value = event.detail.value;
-        this.search();
+        this.inputValue = event.target.value;
+        this.changeEvents.next();
+    }
+    closeDialog() {
+        var _a;
+        (_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.close();
+        this.selectedIndex = -1;
     }
     clearSuggestions() {
+        var _a;
         this.suggestions = [];
+        (_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.close();
         this.selectedIndex = -1;
     }
     onClickSelf(event) {
@@ -46,7 +88,7 @@ export class PosNavigationBar {
     }
     handleKeyDown(ev) {
         if (ev.key === 'Escape') {
-            this.clearSuggestions();
+            this.closeDialog();
         }
         else if (ev.key === 'ArrowDown') {
             ev.preventDefault();
@@ -59,31 +101,30 @@ export class PosNavigationBar {
     }
     search() {
         if (this.searchIndex) {
-            this.suggestions = this.value ? this.searchIndex.search(this.value) : [];
+            this.suggestions = this.inputValue ? this.searchIndex.search(this.inputValue) : [];
         }
     }
-    onSubmit(event) {
-        event.preventDefault();
+    onSubmit() {
         if (this.suggestions && this.selectedIndex > -1) {
             this.linkEmitter.emit(this.suggestions[this.selectedIndex].ref);
         }
         else {
-            this.linkEmitter.emit(this.value);
+            this.linkEmitter.emit(this.inputValue);
         }
     }
     render() {
-        return (h("form", { key: 'e92382c2024642ea5c0b5abb00f1759003f74c78', onSubmit: e => this.onSubmit(e) }, this.searchIndex && this.uri ? h("pos-make-findable", { uri: this.uri }) : '', h("div", { key: 'c32607860e8aa1fe6d6d182c0e2a056f40b6f1b7', class: "bar" }, h("ion-searchbar", { key: '6f281c307640200da6c57a0660e27901f55d375d', enterkeyhint: "search", placeholder: "Search or enter URI", value: this.uri, debounce: 300, onIonChange: e => this.onChange(e), onIonInput: e => this.onChange(e) }), this.suggestions.length > 0 ? (h("div", { class: "suggestions" }, h("ol", null, this.suggestions.map((it, index) => (h("li", { class: index === this.selectedIndex ? 'selected' : '' }, h("pos-rich-link", { uri: it.ref }))))))) : null)));
+        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-bar"; }
+    static get is() { return "pos-navigation"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["pos-navigation-bar.css"]
+            "$": ["pos-navigation.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["pos-navigation-bar.css"]
+            "$": ["pos-navigation.css"]
         };
     }
     static get properties() {
@@ -100,7 +141,7 @@ export class PosNavigationBar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Initial value of the navigation bar"
                 },
                 "getter": false,
                 "setter": false,
@@ -113,10 +154,11 @@ export class PosNavigationBar {
     static get states() {
         return {
             "os": {},
-            "value": {},
+            "inputValue": {},
             "searchIndex": {},
             "suggestions": {},
-            "selectedIndex": {}
+            "selectedIndex": {},
+            "resource": {}
         };
     }
     static get events() {
@@ -152,6 +194,15 @@ export class PosNavigationBar {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "uri",
+                "methodName": "updateResource"
+            }, {
+                "propName": "os",
+                "methodName": "updateResource"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "pod-os:search:index-created",
@@ -165,9 +216,15 @@ export class PosNavigationBar {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "pod-os:navigate",
+                "method": "openNavigationDialog",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "click",
-                "method": "clearSuggestions",
+                "method": "closeDialog",
                 "target": "document",
                 "capture": false,
                 "passive": false
@@ -192,4 +249,4 @@ export class PosNavigationBar {
             }];
     }
 }
-//# sourceMappingURL=pos-navigation-bar.js.map
+//# sourceMappingURL=pos-navigation.js.map

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

@@ -0,0 +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                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/collection/components/pos-new-thing-form/pos-new-thing-form.js

@@ -14,7 +14,7 @@ export class PosNewThingForm {
         subscribePodOs(this);
     }
     render() {
-        return (h("form", { key: '9ee9d0ab4f31bfc55865ef697d410b37977b1051', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: 'a6f807d2034d55e5218c01375c4ff36564924bfb', htmlFor: "type" }, "Type"), h("pos-select-term", { key: 'f6001d6801bee97c03121d57742a595c8d5d5bd7', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: '9365561d47d72e0153bb743f4fdf5ca7a1b5dcc0', htmlFor: "name" }, "Name"), h("input", { key: 'c93de873370a1123441a33d27c53c954bcc5f5ce', id: "name", type: "text", value: this.name, onInput: e => this.handleChange(e) }), this.newUri ? (h("div", { id: "new-uri", title: "This will be the URI of the new thing" }, this.newUri)) : null, h("input", { key: '9fc1fb39f7c582a069876642cc17678303c7d72b', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
+        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 })));
     }
     handleChange(event) {
         this.name = event.target.value;

package/dist/collection/components/pos-rich-link/pos-rich-link.css

@@ -23,7 +23,7 @@ p.content {
 
 a {
   color: var(--label-color);
-  max-width: var(--prose-lg);
+  max-width: min(100%, var(--prose-lg));
   text-decoration: underline;
   overflow: hidden;
   white-space: nowrap;

package/dist/collection/components/pos-rich-link/pos-rich-link.js

@@ -1,10 +1,10 @@
 import { h } from "@stencil/core";
 export class PosRichLink {
     render() {
-        return (h("pos-resource", { key: '0a794cc8287b13f163a813dc6a4f87b2f00e028b', lazy: true, uri: this.uri }, h("p", { key: 'b7a44482a82cd69228f144b04e9ec20b84410339', class: "content" }, h("a", { key: '0d218d4d5c1991c767b66f0d37c5476038e7a0fb', href: this.uri, onClick: e => {
+        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 => {
                 e.preventDefault();
                 this.linkEmitter.emit(this.uri);
-            } }, h("pos-label", { key: 'd04048986a7a4da138608f187a2f27e6313d9a6e' })), h("span", { key: '53a05023aa2fec4725e1d7e59acee9888476ecac', class: "url" }, new URL(this.uri).host), h("pos-description", { key: 'a73de2d208b684a9f555cda312e94df4282afba0' }))));
+            } }, h("pos-label", { key: '0ddb22c414f2e4d61cf1beabb301b723b78235e1' })), h("span", { key: 'd2730c1fcc1c1521a7527bdb7a63c091ff49746c', class: "url" }, new URL(this.uri).host), h("pos-description", { key: '53867e57b7403aed46e94a5f3df0b8389bc68244' }))));
     }
     static get is() { return "pos-rich-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pos-router/pos-router.css

@@ -6,6 +6,6 @@
   margin-left: 0.5rem;
 }
 
-pos-navigation-bar {
+pos-navigation {
   flex-grow: 1;
 }

package/dist/collection/components/pos-router/pos-router.js

@@ -38,7 +38,7 @@ export class PosRouter {
         this.routeChanged.emit(this.uri);
     }
     render() {
-        return h("slot", { key: '221db70a52ce7ebc7e9c171142dcf94f252fa985' });
+        return h("slot", { key: 'a5a451a8ddf4a30c6e5cbb2faf61d44f5a286df9' });
     }
     static get is() { return "pos-router"; }
     static get originalStyleUrls() {

package/dist/collection/components/pos-select-term/pos-select-term.js

@@ -19,7 +19,7 @@ export class PosSelectTerm {
         this.termSelected.emit({ uri: event.target.value });
     }
     render() {
-        return (h(Host, { key: '7a548735e2a0478fa1e63e2a880ca61f0f43d91c' }, h("input", { key: '9549691026f4bf42a3048f2af3a78bd71536b160', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: 'adfd77a001389d6cc092e3b054ef12e45d562d54', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
+        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))))));
     }
     static get is() { return "pos-select-term"; }
     static get encapsulation() { return "shadow"; }