feat: add "make findable" to navigation bar

Author: angelo-v

elements/src/components.d.ts

@@ -80,6 +80,9 @@ export namespace Components {
     }
     interface PosLoginForm {
     }
+    interface PosMakeFindable {
+        "uri": string;
+    }
     interface PosNavigationBar {
         "uri": string;
     }
@@ -188,6 +191,10 @@ export interface PosLoginFormCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPosLoginFormElement;
 }
+export interface PosMakeFindableCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPosMakeFindableElement;
+}
 export interface PosNavigationBarCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPosNavigationBarElement;
@@ -542,6 +549,23 @@ declare global {
         prototype: HTMLPosLoginFormElement;
         new (): HTMLPosLoginFormElement;
     };
+    interface HTMLPosMakeFindableElementEventMap {
+        "pod-os:init": any;
+    }
+    interface HTMLPosMakeFindableElement extends Components.PosMakeFindable, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPosMakeFindableElementEventMap>(type: K, listener: (this: HTMLPosMakeFindableElement, ev: PosMakeFindableCustomEvent<HTMLPosMakeFindableElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPosMakeFindableElementEventMap>(type: K, listener: (this: HTMLPosMakeFindableElement, ev: PosMakeFindableCustomEvent<HTMLPosMakeFindableElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLPosMakeFindableElement: {
+        prototype: HTMLPosMakeFindableElement;
+        new (): HTMLPosMakeFindableElement;
+    };
     interface HTMLPosNavigationBarElementEventMap {
         "pod-os:init": any;
         "pod-os:link": any;
@@ -804,6 +828,7 @@ declare global {
         "pos-literals": HTMLPosLiteralsElement;
         "pos-login": HTMLPosLoginElement;
         "pos-login-form": HTMLPosLoginFormElement;
+        "pos-make-findable": HTMLPosMakeFindableElement;
         "pos-navigation-bar": HTMLPosNavigationBarElement;
         "pos-new-thing-form": HTMLPosNewThingFormElement;
         "pos-picture": HTMLPosPictureElement;
@@ -930,6 +955,10 @@ declare namespace LocalJSX {
          */
         "onPod-os:idp-url-selected"?: (event: PosLoginFormCustomEvent<any>) => void;
     }
+    interface PosMakeFindable {
+        "onPod-os:init"?: (event: PosMakeFindableCustomEvent<any>) => void;
+        "uri": string;
+    }
     interface PosNavigationBar {
         "onPod-os:init"?: (event: PosNavigationBarCustomEvent<any>) => void;
         "onPod-os:link"?: (event: PosNavigationBarCustomEvent<any>) => void;
@@ -1036,6 +1065,7 @@ declare namespace LocalJSX {
         "pos-literals": PosLiterals;
         "pos-login": PosLogin;
         "pos-login-form": PosLoginForm;
+        "pos-make-findable": PosMakeFindable;
         "pos-navigation-bar": PosNavigationBar;
         "pos-new-thing-form": PosNewThingForm;
         "pos-picture": PosPicture;
@@ -1088,6 +1118,7 @@ declare module "@stencil/core" {
             "pos-literals": LocalJSX.PosLiterals & JSXBase.HTMLAttributes<HTMLPosLiteralsElement>;
             "pos-login": LocalJSX.PosLogin & JSXBase.HTMLAttributes<HTMLPosLoginElement>;
             "pos-login-form": LocalJSX.PosLoginForm & JSXBase.HTMLAttributes<HTMLPosLoginFormElement>;
+            "pos-make-findable": LocalJSX.PosMakeFindable & JSXBase.HTMLAttributes<HTMLPosMakeFindableElement>;
             "pos-navigation-bar": LocalJSX.PosNavigationBar & JSXBase.HTMLAttributes<HTMLPosNavigationBarElement>;
             "pos-new-thing-form": LocalJSX.PosNewThingForm & JSXBase.HTMLAttributes<HTMLPosNewThingFormElement>;
             "pos-picture": LocalJSX.PosPicture & JSXBase.HTMLAttributes<HTMLPosPictureElement>;

elements/src/components/pos-navigation-bar/pos-navigation-bar.css

@@ -41,3 +41,9 @@
   --description-color: var(--color-grey-200);
   --uri-color: var(--color-grey-200);
 }
+
+.bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}

elements/src/components/pos-navigation-bar/pos-navigation-bar.spec.tsx

@@ -14,7 +14,10 @@ describe('pos-navigation-bar', () => {
     <pos-navigation-bar uri="https://pod.example/resource">
       <mock:shadow-root>
         <form>
-          <ion-searchbar debounce="300" enterkeyhint="search" placeholder="Search or enter URI" value="https://pod.example/resource"></ion-searchbar>
+          <div class="bar">
+            <pos-make-findable uri="https://pod.example/resource"></pos-make-findable>
+            <ion-searchbar debounce="300" enterkeyhint="search" placeholder="Search or enter URI" value="https://pod.example/resource"></ion-searchbar>
+          </div>
         </form>
       </mock:shadow-root>
     </pos-navigation-bar>`);

elements/src/components/pos-navigation-bar/pos-navigation-bar.tsx

@@ -93,14 +93,17 @@ export class PosNavigationBar implements PodOsAware {
   render() {
     return (
       <form onSubmit={e => this.onSubmit(e)}>
-        <ion-searchbar
-          enterkeyhint="search"
-          placeholder="Search or enter URI"
-          value={this.uri}
-          debounce={300}
-          onIonChange={e => this.onChange(e)}
-          onIonInput={e => this.onChange(e)}
-        />
+        <div class="bar">
+          <pos-make-findable uri={this.uri}></pos-make-findable>
+          <ion-searchbar
+            enterkeyhint="search"
+            placeholder="Search or enter URI"
+            value={this.uri}
+            debounce={300}
+            onIonChange={e => this.onChange(e)}
+            onIonInput={e => this.onChange(e)}
+          />
+        </div>
         {this.suggestions.length > 0 ? (
           <div class="suggestions">
             <ol>