@pod-os/elements 0.26.0 → 0.26.1-rc.2078d14.0

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

@@ -1,16 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { s as store } from './session.js';
-import { s as subscribePodOs } from './PodOsAware.js';
-import { d as defineCustomElement$8 } from './icon.js';
-import { d as defineCustomElement$7 } from './progress-bar.js';
-import { d as defineCustomElement$6 } from './searchbar.js';
-import { d as defineCustomElement$5 } from './pos-description2.js';
-import { d as defineCustomElement$4 } from './pos-label2.js';
-import { d as defineCustomElement$3 } from './pos-make-findable2.js';
-import { d as defineCustomElement$2 } from './pos-resource2.js';
-import { d as defineCustomElement$1 } from './pos-rich-link2.js';
+import { d as defineCustomElement$4 } from './progress-bar.js';
+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 = ".suggestions ol {\n  border: 1px solid var(--pos-border-color);\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  margin: 0;\n  padding: 0;\n  z-index: var(--layer-top);\n  list-style-type: none;\n  box-shadow: var(--shadow-xl);\n}\n\n.suggestions {\n  position: relative;\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\nion-searchbar {\n  width: 100%;\n}\n\nform {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.bar {\n  flex-grow: 1;\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  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 PosNavigationBarStyle0 = posNavigationBarCss;
 
 const PosNavigationBar = /*@__PURE__*/ proxyCustomElement(class PosNavigationBar extends HTMLElement {
@@ -18,135 +12,53 @@ const PosNavigationBar = /*@__PURE__*/ proxyCustomElement(class PosNavigationBar
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.subscribePodOs = createEvent(this, "pod-os:init", 7);
-        this.linkEmitter = createEvent(this, "pod-os:link", 7);
-        this.uri = '';
-        this.value = this.uri;
-        this.searchIndex = undefined;
-        this.suggestions = [];
-        this.selectedIndex = -1;
-        this.receivePodOs = async (os) => {
-            this.os = os;
-        };
+        this.navigate = createEvent(this, "pod-os:navigate", 7);
     }
-    componentWillLoad() {
-        subscribePodOs(this);
-        store.onChange('isLoggedIn', async (isLoggedIn) => {
-            if (isLoggedIn) {
-                await this.buildSearchIndex();
-            }
-            else {
-                this.clearSearchIndex();
-            }
-        });
-    }
-    async buildSearchIndex() {
-        this.searchIndex = await this.os.buildSearchIndex(store.state.profile);
-    }
-    rebuildSearchIndex() {
-        this.searchIndex.rebuild();
-    }
-    clearSearchIndex() {
-        var _a;
-        (_a = this.searchIndex) === null || _a === void 0 ? void 0 : _a.clear();
+    onClick() {
+        this.navigate.emit(this.current);
     }
-    onChange(event) {
-        this.value = event.detail.value;
-        this.search();
-    }
-    clearSuggestions() {
-        this.suggestions = [];
-        this.selectedIndex = -1;
-    }
-    onClickSelf(event) {
-        event.stopPropagation();
-    }
-    handleKeyDown(ev) {
-        if (ev.key === 'Escape') {
-            this.clearSuggestions();
-        }
-        else if (ev.key === 'ArrowDown') {
-            ev.preventDefault();
-            this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);
-        }
-        else if (ev.key === 'ArrowUp') {
-            ev.preventDefault();
-            this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
-        }
-    }
-    search() {
-        if (this.searchIndex) {
-            this.suggestions = this.value ? this.searchIndex.search(this.value) : [];
-        }
-    }
-    onSubmit(event) {
-        event.preventDefault();
-        if (this.suggestions && this.selectedIndex > -1) {
-            this.linkEmitter.emit(this.suggestions[this.selectedIndex].ref);
-        }
-        else {
-            this.linkEmitter.emit(this.value);
+    activate(e) {
+        if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+            e.preventDefault();
+            this.navigate.emit(this.current);
         }
     }
     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)));
+        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')));
     }
     static get style() { return PosNavigationBarStyle0; }
 }, [1, "pos-navigation-bar", {
-        "uri": [1],
-        "os": [32],
-        "value": [32],
-        "searchIndex": [32],
-        "suggestions": [32],
-        "selectedIndex": [32]
-    }, [[0, "pod-os:search:index-created", "buildSearchIndex"], [0, "pod-os:search:index-updated", "rebuildSearchIndex"], [4, "click", "clearSuggestions"], [0, "pod-os:link", "clearSuggestions"], [0, "click", "onClickSelf"], [0, "keydown", "handleKeyDown"]]]);
+        "current": [16],
+        "searchIndexReady": [4, "search-index-ready"]
+    }, [[4, "keydown", "activate"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-navigation-bar", "ion-icon", "ion-progress-bar", "ion-searchbar", "pos-description", "pos-label", "pos-make-findable", "pos-resource", "pos-rich-link"];
+    const components = ["pos-navigation-bar", "ion-progress-bar", "pos-label", "pos-make-findable", "pos-resource"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-navigation-bar":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosNavigationBar);
             }
             break;
-        case "ion-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
         case "ion-progress-bar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "ion-searchbar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "pos-description":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "pos-label":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "pos-make-findable":
+        case "pos-label":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "pos-resource":
+        case "pos-make-findable":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
             break;
-        case "pos-rich-link":
+        case "pos-resource":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

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

@@ -1 +1 @@
-{"file":"pos-navigation-bar2.js","mappings":"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","names":["session"],"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":[".suggestions ol {\n  border: 1px solid var(--pos-border-color);\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  margin: 0;\n  padding: 0;\n  z-index: var(--layer-top);\n  list-style-type: none;\n  box-shadow: var(--shadow-xl);\n}\n\n.suggestions {\n  position: relative;\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\nion-searchbar {\n  width: 100%;\n}\n\nform {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.bar {\n  flex-grow: 1;\n}\n","import { PodOS, SearchIndex } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\n\nimport session from '../../store/session';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\n\n@Component({\n  tag: 'pos-navigation-bar',\n  shadow: true,\n  styleUrl: 'pos-navigation-bar.css',\n})\nexport class PosNavigationBar implements PodOsAware {\n  @State() os: PodOS;\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n  @Prop() uri: string = '';\n\n  @State() value: string = this.uri;\n\n  @Event({ eventName: 'pod-os:link' }) linkEmitter: EventEmitter;\n\n  @State() searchIndex?: SearchIndex = undefined;\n\n  @State() suggestions = [];\n\n  @State() selectedIndex = -1;\n\n  componentWillLoad() {\n    subscribePodOs(this);\n    session.onChange('isLoggedIn', async isLoggedIn => {\n      if (isLoggedIn) {\n        await this.buildSearchIndex();\n      } else {\n        this.clearSearchIndex();\n      }\n    });\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  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.value = event.detail.value;\n    this.search();\n  }\n\n  @Listen('click', { target: 'document' })\n  @Listen('pod-os:link')\n  clearSuggestions() {\n    this.suggestions = [];\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.clearSuggestions();\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.value ? this.searchIndex.search(this.value) : [];\n    }\n  }\n\n  private onSubmit(event) {\n    event.preventDefault();\n    if (this.suggestions && this.selectedIndex > -1) {\n      this.linkEmitter.emit(this.suggestions[this.selectedIndex].ref);\n    } else {\n      this.linkEmitter.emit(this.value);\n    }\n  }\n\n  render() {\n    return (\n      <form onSubmit={e => this.onSubmit(e)}>\n        {this.searchIndex && this.uri ? <pos-make-findable uri={this.uri}></pos-make-findable> : ''}\n        <div class=\"bar\">\n          <ion-searchbar\n            enterkeyhint=\"search\"\n            placeholder=\"Search or enter URI\"\n            value={this.uri}\n            debounce={300}\n            onIonChange={e => this.onChange(e)}\n            onIonInput={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        </div>\n      </form>\n    );\n  }\n}\n"],"version":3}
+{"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}

package/dist/components/pos-navigation.d.ts

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

package/dist/components/pos-navigation.js

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

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

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

package/dist/components/pos-navigation2.js

@@ -0,0 +1,394 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { s as store } from './session.js';
+import { s as subscribePodOs } from './PodOsAware.js';
+import { d as defineCustomElement$7 } from './progress-bar.js';
+import { d as defineCustomElement$6 } from './pos-description2.js';
+import { d as defineCustomElement$5 } from './pos-label2.js';
+import { d as defineCustomElement$4 } from './pos-make-findable2.js';
+import { d as defineCustomElement$3 } from './pos-navigation-bar2.js';
+import { d as defineCustomElement$2 } from './pos-resource2.js';
+import { d as defineCustomElement$1 } from './pos-rich-link2.js';
+import { b as Subscription, d as arrRemove, a as operate, c as createOperatorSubscriber, S as Subject } from './Subject.js';
+
+const dateTimestampProvider = {
+    now() {
+        return (dateTimestampProvider.delegate || Date).now();
+    },
+    delegate: undefined,
+};
+
+class Action extends Subscription {
+    constructor(scheduler, work) {
+        super();
+    }
+    schedule(state, delay = 0) {
+        return this;
+    }
+}
+
+const intervalProvider = {
+    setInterval(handler, timeout, ...args) {
+        const { delegate } = intervalProvider;
+        if (delegate === null || delegate === void 0 ? void 0 : delegate.setInterval) {
+            return delegate.setInterval(handler, timeout, ...args);
+        }
+        return setInterval(handler, timeout, ...args);
+    },
+    clearInterval(handle) {
+        const { delegate } = intervalProvider;
+        return ((delegate === null || delegate === void 0 ? void 0 : delegate.clearInterval) || clearInterval)(handle);
+    },
+    delegate: undefined,
+};
+
+class AsyncAction extends Action {
+    constructor(scheduler, work) {
+        super(scheduler, work);
+        this.scheduler = scheduler;
+        this.work = work;
+        this.pending = false;
+    }
+    schedule(state, delay = 0) {
+        var _a;
+        if (this.closed) {
+            return this;
+        }
+        this.state = state;
+        const id = this.id;
+        const scheduler = this.scheduler;
+        if (id != null) {
+            this.id = this.recycleAsyncId(scheduler, id, delay);
+        }
+        this.pending = true;
+        this.delay = delay;
+        this.id = (_a = this.id) !== null && _a !== void 0 ? _a : this.requestAsyncId(scheduler, this.id, delay);
+        return this;
+    }
+    requestAsyncId(scheduler, _id, delay = 0) {
+        return intervalProvider.setInterval(scheduler.flush.bind(scheduler, this), delay);
+    }
+    recycleAsyncId(_scheduler, id, delay = 0) {
+        if (delay != null && this.delay === delay && this.pending === false) {
+            return id;
+        }
+        if (id != null) {
+            intervalProvider.clearInterval(id);
+        }
+        return undefined;
+    }
+    execute(state, delay) {
+        if (this.closed) {
+            return new Error('executing a cancelled action');
+        }
+        this.pending = false;
+        const error = this._execute(state, delay);
+        if (error) {
+            return error;
+        }
+        else if (this.pending === false && this.id != null) {
+            this.id = this.recycleAsyncId(this.scheduler, this.id, null);
+        }
+    }
+    _execute(state, _delay) {
+        let errored = false;
+        let errorValue;
+        try {
+            this.work(state);
+        }
+        catch (e) {
+            errored = true;
+            errorValue = e ? e : new Error('Scheduled action threw falsy error');
+        }
+        if (errored) {
+            this.unsubscribe();
+            return errorValue;
+        }
+    }
+    unsubscribe() {
+        if (!this.closed) {
+            const { id, scheduler } = this;
+            const { actions } = scheduler;
+            this.work = this.state = this.scheduler = null;
+            this.pending = false;
+            arrRemove(actions, this);
+            if (id != null) {
+                this.id = this.recycleAsyncId(scheduler, id, null);
+            }
+            this.delay = null;
+            super.unsubscribe();
+        }
+    }
+}
+
+class Scheduler {
+    constructor(schedulerActionCtor, now = Scheduler.now) {
+        this.schedulerActionCtor = schedulerActionCtor;
+        this.now = now;
+    }
+    schedule(work, delay = 0, state) {
+        return new this.schedulerActionCtor(this, work).schedule(state, delay);
+    }
+}
+Scheduler.now = dateTimestampProvider.now;
+
+class AsyncScheduler extends Scheduler {
+    constructor(SchedulerAction, now = Scheduler.now) {
+        super(SchedulerAction, now);
+        this.actions = [];
+        this._active = false;
+    }
+    flush(action) {
+        const { actions } = this;
+        if (this._active) {
+            actions.push(action);
+            return;
+        }
+        let error;
+        this._active = true;
+        do {
+            if ((error = action.execute(action.state, action.delay))) {
+                break;
+            }
+        } while ((action = actions.shift()));
+        this._active = false;
+        if (error) {
+            while ((action = actions.shift())) {
+                action.unsubscribe();
+            }
+            throw error;
+        }
+    }
+}
+
+const asyncScheduler = new AsyncScheduler(AsyncAction);
+
+function debounceTime(dueTime, scheduler = asyncScheduler) {
+    return operate((source, subscriber) => {
+        let activeTask = null;
+        let lastValue = null;
+        let lastTime = null;
+        const emit = () => {
+            if (activeTask) {
+                activeTask.unsubscribe();
+                activeTask = null;
+                const value = lastValue;
+                lastValue = null;
+                subscriber.next(value);
+            }
+        };
+        function emitWhenIdle() {
+            const targetTime = lastTime + dueTime;
+            const now = scheduler.now();
+            if (now < targetTime) {
+                activeTask = this.schedule(undefined, targetTime - now);
+                subscriber.add(activeTask);
+                return;
+            }
+            emit();
+        }
+        source.subscribe(createOperatorSubscriber(subscriber, (value) => {
+            lastValue = value;
+            lastTime = scheduler.now();
+            if (!activeTask) {
+                activeTask = scheduler.schedule(emitWhenIdle, dueTime);
+                subscriber.add(activeTask);
+            }
+        }, () => {
+            emit();
+            subscriber.complete();
+        }, undefined, () => {
+            lastValue = activeTask = null;
+        }));
+    });
+}
+
+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 PosNavigationStyle0 = posNavigationCss;
+
+const PosNavigation = /*@__PURE__*/ proxyCustomElement(class PosNavigation extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.subscribePodOs = createEvent(this, "pod-os:init", 7);
+        this.linkEmitter = createEvent(this, "pod-os:link", 7);
+        /**
+         * Initial value of the navigation bar
+         */
+        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();
+        store.onChange('isLoggedIn', async (isLoggedIn) => {
+            if (isLoggedIn) {
+                await this.buildSearchIndex();
+            }
+            else {
+                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(store.state.profile);
+    }
+    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.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) {
+        event.stopPropagation();
+    }
+    handleKeyDown(ev) {
+        if (ev.key === 'Escape') {
+            this.closeDialog();
+        }
+        else if (ev.key === 'ArrowDown') {
+            ev.preventDefault();
+            this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);
+        }
+        else if (ev.key === 'ArrowUp') {
+            ev.preventDefault();
+            this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
+        }
+    }
+    search() {
+        if (this.searchIndex) {
+            this.suggestions = this.inputValue ? this.searchIndex.search(this.inputValue) : [];
+        }
+    }
+    onSubmit() {
+        if (this.suggestions && this.selectedIndex > -1) {
+            this.linkEmitter.emit(this.suggestions[this.selectedIndex].ref);
+        }
+        else {
+            this.linkEmitter.emit(this.inputValue);
+        }
+    }
+    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)))));
+    }
+    static get watchers() { return {
+        "uri": ["updateResource"],
+        "os": ["updateResource"]
+    }; }
+    static get style() { return PosNavigationStyle0; }
+}, [1, "pos-navigation", {
+        "uri": [1],
+        "os": [32],
+        "inputValue": [32],
+        "searchIndex": [32],
+        "suggestions": [32],
+        "selectedIndex": [32],
+        "resource": [32]
+    }, [[0, "pod-os:search:index-created", "buildSearchIndex"], [0, "pod-os:search:index-updated", "rebuildSearchIndex"], [0, "pod-os:navigate", "openNavigationDialog"], [4, "click", "closeDialog"], [0, "pod-os:link", "clearSuggestions"], [0, "click", "onClickSelf"], [0, "keydown", "handleKeyDown"]], {
+        "uri": ["updateResource"],
+        "os": ["updateResource"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pos-navigation", "ion-progress-bar", "pos-description", "pos-label", "pos-make-findable", "pos-navigation-bar", "pos-resource", "pos-rich-link"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pos-navigation":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PosNavigation);
+            }
+            break;
+        case "ion-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "pos-description":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "pos-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "pos-make-findable":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "pos-navigation-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "pos-resource":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "pos-rich-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { PosNavigation as P, defineCustomElement as d };
+
+//# sourceMappingURL=pos-navigation2.js.map