@pod-os/elements 0.4.0 → 0.4.1-2e30028.0

package/dist/cjs/{ion-app_40.cjs.entry.js → ion-app_42.cjs.entry.js}

@@ -1844,6 +1844,366 @@ const Row = class {
 };
 Row.style = rowCss;
 
+const searchbarIosCss = ".sc-ion-searchbar-ios-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:.5;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;width:100%;color:var(--color);font-family:var(--ion-font-family, inherit);box-sizing:border-box}.ion-color.sc-ion-searchbar-ios-h{color:var(--ion-color-contrast)}.ion-color.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{background:var(--ion-color-base)}.ion-color.sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios,.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.ion-color.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{color:inherit}.searchbar-search-icon.sc-ion-searchbar-ios{color:var(--icon-color);pointer-events:none}.searchbar-input-container.sc-ion-searchbar-ios{display:block;position:relative;flex-shrink:1;width:100%}.searchbar-input.sc-ion-searchbar-ios{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--border-radius);display:block;width:100%;border:0;outline:none;background:var(--background);font-family:inherit;box-shadow:var(--box-shadow);box-sizing:border-box;appearance:none}.searchbar-input.sc-ion-searchbar-ios::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios::-webkit-search-cancel-button,.searchbar-input.sc-ion-searchbar-ios::-ms-clear{display:none}.searchbar-cancel-button.sc-ion-searchbar-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:none;height:100%;border:0;outline:none;color:var(--cancel-button-color);cursor:pointer;appearance:none}.searchbar-cancel-button.sc-ion-searchbar-ios>div.sc-ion-searchbar-ios{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.searchbar-clear-button.sc-ion-searchbar-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:none;min-height:0;outline:none;color:var(--clear-button-color);appearance:none}.searchbar-has-value.searchbar-should-show-clear.sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios{display:block}.searchbar-disabled.sc-ion-searchbar-ios-h{cursor:default;opacity:0.4;pointer-events:none}.sc-ion-searchbar-ios-h{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.07);--border-radius:10px;--box-shadow:none;--cancel-button-color:var(--ion-color-primary, #3880ff);--clear-button-color:var(--ion-color-step-600, #666666);--color:var(--ion-text-color, #000);--icon-color:var(--ion-color-step-600, #666666);padding-left:12px;padding-right:12px;padding-top:12px;padding-bottom:12px;height:60px;contain:strict}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.sc-ion-searchbar-ios-h{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}.searchbar-input-container.sc-ion-searchbar-ios{height:36px}.searchbar-search-icon.sc-ion-searchbar-ios{margin-left:calc(50% - 60px);left:5px;top:0;position:absolute;width:22px;height:100%;contain:strict}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-search-icon.sc-ion-searchbar-ios{margin-left:unset;-webkit-margin-start:calc(50% - 60px);margin-inline-start:calc(50% - 60px)}}[dir=rtl].sc-ion-searchbar-ios .searchbar-search-icon.sc-ion-searchbar-ios,[dir=rtl].sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,[dir=rtl] .sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{left:unset;right:unset;right:5px}.searchbar-input.sc-ion-searchbar-ios{padding-left:28px;padding-right:28px;padding-top:0;padding-bottom:0;height:100%;font-size:17px;font-weight:400;contain:strict}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-input.sc-ion-searchbar-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:28px;padding-inline-start:28px;-webkit-padding-end:28px;padding-inline-end:28px}}.searchbar-clear-button.sc-ion-searchbar-ios{right:0;top:0;background-position:center;position:absolute;width:30px;height:100%;border:0;background-color:transparent}[dir=rtl].sc-ion-searchbar-ios .searchbar-clear-button.sc-ion-searchbar-ios,[dir=rtl].sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios,[dir=rtl] .sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios{left:unset;right:unset;left:0}.searchbar-clear-icon.sc-ion-searchbar-ios{width:18px;height:100%}.searchbar-cancel-button.sc-ion-searchbar-ios{padding-left:8px;padding-right:0;padding-top:0;padding-bottom:0;flex-shrink:0;background-color:transparent;font-size:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-cancel-button.sc-ion-searchbar-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:0;padding-inline-end:0}}.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{margin-left:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{margin-left:unset;-webkit-margin-start:0;margin-inline-start:0}}.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{padding-left:30px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{padding-left:unset;-webkit-padding-start:30px;padding-inline-start:30px}}.searchbar-has-focus.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.searchbar-should-show-cancel.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{display:block}.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{transition:all 300ms ease}.searchbar-animated.searchbar-has-focus.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.searchbar-animated.searchbar-should-show-cancel.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{opacity:1;pointer-events:auto}.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{margin-right:-100%;transform:translate3d(0,  0,  0);transition:all 300ms ease;opacity:0;pointer-events:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{margin-right:unset;-webkit-margin-end:-100%;margin-inline-end:-100%}}.searchbar-no-animate.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,.searchbar-no-animate.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios,.searchbar-no-animate.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{transition-duration:0ms}.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{color:var(--ion-color-base)}@media (any-hover: hover){.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios:hover{color:var(--ion-color-tint)}}ion-toolbar.sc-ion-searchbar-ios-h,ion-toolbar .sc-ion-searchbar-ios-h{padding-top:1px;padding-bottom:15px;height:52px}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color),ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color){color:inherit}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-cancel-button.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-cancel-button.sc-ion-searchbar-ios{color:currentColor}ion-toolbar.ion-color.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{color:currentColor;opacity:0.5}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-input.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-input.sc-ion-searchbar-ios{background:rgba(var(--ion-color-contrast-rgb), 0.07);color:currentColor}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-clear-button.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-clear-button.sc-ion-searchbar-ios{color:currentColor;opacity:0.5}";
+
+const searchbarMdCss = ".sc-ion-searchbar-md-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:.5;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;width:100%;color:var(--color);font-family:var(--ion-font-family, inherit);box-sizing:border-box}.ion-color.sc-ion-searchbar-md-h{color:var(--ion-color-contrast)}.ion-color.sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md{background:var(--ion-color-base)}.ion-color.sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md,.ion-color.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md,.ion-color.sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md{color:inherit}.searchbar-search-icon.sc-ion-searchbar-md{color:var(--icon-color);pointer-events:none}.searchbar-input-container.sc-ion-searchbar-md{display:block;position:relative;flex-shrink:1;width:100%}.searchbar-input.sc-ion-searchbar-md{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--border-radius);display:block;width:100%;border:0;outline:none;background:var(--background);font-family:inherit;box-shadow:var(--box-shadow);box-sizing:border-box;appearance:none}.searchbar-input.sc-ion-searchbar-md::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-md::-webkit-search-cancel-button,.searchbar-input.sc-ion-searchbar-md::-ms-clear{display:none}.searchbar-cancel-button.sc-ion-searchbar-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:none;height:100%;border:0;outline:none;color:var(--cancel-button-color);cursor:pointer;appearance:none}.searchbar-cancel-button.sc-ion-searchbar-md>div.sc-ion-searchbar-md{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.searchbar-clear-button.sc-ion-searchbar-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:none;min-height:0;outline:none;color:var(--clear-button-color);appearance:none}.searchbar-has-value.searchbar-should-show-clear.sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md{display:block}.searchbar-disabled.sc-ion-searchbar-md-h{cursor:default;opacity:0.4;pointer-events:none}.sc-ion-searchbar-md-h{--background:var(--ion-background-color, #fff);--border-radius:2px;--box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);--cancel-button-color:var(--ion-color-step-900, #1a1a1a);--clear-button-color:initial;--color:var(--ion-color-step-850, #262626);--icon-color:var(--ion-color-step-600, #666666);padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px;background:inherit}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.sc-ion-searchbar-md-h{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}.searchbar-search-icon.sc-ion-searchbar-md{left:16px;top:11px;width:21px;height:21px}[dir=rtl].sc-ion-searchbar-md .searchbar-search-icon.sc-ion-searchbar-md,[dir=rtl].sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md{left:unset;right:unset;right:16px}.searchbar-cancel-button.sc-ion-searchbar-md{left:5px;top:0;background-color:transparent;font-size:1.6em}[dir=rtl].sc-ion-searchbar-md .searchbar-cancel-button.sc-ion-searchbar-md,[dir=rtl].sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md{left:unset;right:unset;right:5px}.searchbar-search-icon.sc-ion-searchbar-md,.searchbar-cancel-button.sc-ion-searchbar-md{position:absolute}.searchbar-search-icon.ion-activated.sc-ion-searchbar-md,.searchbar-cancel-button.ion-activated.sc-ion-searchbar-md{background-color:transparent}.searchbar-input.sc-ion-searchbar-md{padding-left:55px;padding-right:55px;padding-top:6px;padding-bottom:6px;background-position:left 8px center;height:auto;font-size:16px;font-weight:400;line-height:30px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-input.sc-ion-searchbar-md{padding-left:unset;padding-right:unset;-webkit-padding-start:55px;padding-inline-start:55px;-webkit-padding-end:55px;padding-inline-end:55px}}[dir=rtl].sc-ion-searchbar-md .searchbar-input.sc-ion-searchbar-md,[dir=rtl].sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md{background-position:right 8px center}.searchbar-clear-button.sc-ion-searchbar-md{right:13px;top:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;position:absolute;height:100%;border:0;background-color:transparent}[dir=rtl].sc-ion-searchbar-md .searchbar-clear-button.sc-ion-searchbar-md,[dir=rtl].sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md{left:unset;right:unset;left:13px}.searchbar-clear-button.ion-activated.sc-ion-searchbar-md{background-color:transparent}.searchbar-clear-icon.sc-ion-searchbar-md{width:22px;height:100%}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md{display:block}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md,.searchbar-should-show-cancel.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md{display:block}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md+.searchbar-search-icon.sc-ion-searchbar-md,.searchbar-should-show-cancel.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md+.searchbar-search-icon.sc-ion-searchbar-md{display:none}ion-toolbar.sc-ion-searchbar-md-h,ion-toolbar .sc-ion-searchbar-md-h{padding-left:7px;padding-right:7px;padding-top:3px;padding-bottom:3px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){ion-toolbar.sc-ion-searchbar-md-h,ion-toolbar .sc-ion-searchbar-md-h{padding-left:unset;padding-right:unset;-webkit-padding-start:7px;padding-inline-start:7px;-webkit-padding-end:7px;padding-inline-end:7px}}";
+
+const Searchbar = class {
+  constructor(hostRef) {
+    index$1.registerInstance(this, hostRef);
+    this.ionInput = index$1.createEvent(this, "ionInput", 7);
+    this.ionChange = index$1.createEvent(this, "ionChange", 7);
+    this.ionCancel = index$1.createEvent(this, "ionCancel", 7);
+    this.ionClear = index$1.createEvent(this, "ionClear", 7);
+    this.ionBlur = index$1.createEvent(this, "ionBlur", 7);
+    this.ionFocus = index$1.createEvent(this, "ionFocus", 7);
+    this.ionStyle = index$1.createEvent(this, "ionStyle", 7);
+    this.isCancelVisible = false;
+    this.shouldAlignLeft = true;
+    this.focused = false;
+    this.noAnimate = true;
+    /**
+     * If `true`, enable searchbar animation.
+     */
+    this.animated = false;
+    /**
+     * Set the input's autocomplete property.
+     */
+    this.autocomplete = 'off';
+    /**
+     * Set the input's autocorrect property.
+     */
+    this.autocorrect = 'off';
+    /**
+     * Set the cancel button icon. Only applies to `md` mode.
+     * Defaults to `"arrow-back-sharp"`.
+     */
+    this.cancelButtonIcon = ionicGlobal.config.get('backButtonIcon', 'arrow-back-sharp');
+    /**
+     * Set the the cancel button text. Only applies to `ios` mode.
+     */
+    this.cancelButtonText = 'Cancel';
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
+     */
+    this.debounce = 250;
+    /**
+     * If `true`, the user cannot interact with the input.
+     */
+    this.disabled = false;
+    /**
+     * Set the input's placeholder.
+     * `placeholder` can accept either plaintext or HTML as a string.
+     * To display characters normally reserved for HTML, they
+     * must be escaped. For example `<Ionic>` would become
+     * `&lt;Ionic&gt;`
+     *
+     * For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+     */
+    this.placeholder = 'Search';
+    /**
+     * Sets the behavior for the cancel button. Defaults to `"never"`.
+     * Setting to `"focus"` shows the cancel button on focus.
+     * Setting to `"never"` hides the cancel button.
+     * Setting to `"always"` shows the cancel button regardless
+     * of focus state.
+     */
+    this.showCancelButton = 'never';
+    /**
+     * Sets the behavior for the clear button. Defaults to `"focus"`.
+     * Setting to `"focus"` shows the clear button on focus if the
+     * input is not empty.
+     * Setting to `"never"` hides the clear button.
+     * Setting to `"always"` shows the clear button regardless
+     * of focus state, but only if the input is not empty.
+     */
+    this.showClearButton = 'focus';
+    /**
+     * If `true`, enable spellcheck on the input.
+     */
+    this.spellcheck = false;
+    /**
+     * Set the type of the input.
+     */
+    this.type = 'search';
+    /**
+     * the value of the searchbar.
+     */
+    this.value = '';
+    /**
+     * Clears the input field and triggers the control change.
+     */
+    this.onClearInput = (ev, shouldFocus) => {
+      this.ionClear.emit();
+      if (ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+      }
+      // setTimeout() fixes https://github.com/ionic-team/ionic/issues/7527
+      // wait for 4 frames
+      setTimeout(() => {
+        const value = this.getValue();
+        if (value !== '') {
+          this.value = '';
+          this.ionInput.emit();
+          /**
+           * When tapping clear button
+           * ensure input is focused after
+           * clearing input so users
+           * can quickly start typing.
+           */
+          if (shouldFocus && !this.focused) {
+            this.setFocus();
+          }
+        }
+      }, 16 * 4);
+    };
+    /**
+     * Clears the input field and tells the input to blur since
+     * the clearInput function doesn't want the input to blur
+     * then calls the custom cancel function if the user passed one in.
+     */
+    this.onCancelSearchbar = (ev) => {
+      if (ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+      }
+      this.ionCancel.emit();
+      this.onClearInput();
+      if (this.nativeInput) {
+        this.nativeInput.blur();
+      }
+    };
+    /**
+     * Update the Searchbar input value when the input changes
+     */
+    this.onInput = (ev) => {
+      const input = ev.target;
+      if (input) {
+        this.value = input.value;
+      }
+      this.ionInput.emit(ev);
+    };
+    /**
+     * Sets the Searchbar to not focused and checks if it should align left
+     * based on whether there is a value in the searchbar or not.
+     */
+    this.onBlur = () => {
+      this.focused = false;
+      this.ionBlur.emit();
+      this.positionElements();
+    };
+    /**
+     * Sets the Searchbar to focused and active on input focus.
+     */
+    this.onFocus = () => {
+      this.focused = true;
+      this.ionFocus.emit();
+      this.positionElements();
+    };
+  }
+  debounceChanged() {
+    this.ionChange = helpers.debounceEvent(this.ionChange, this.debounce);
+  }
+  valueChanged() {
+    const inputEl = this.nativeInput;
+    const value = this.getValue();
+    if (inputEl && inputEl.value !== value) {
+      inputEl.value = value;
+    }
+    this.ionChange.emit({ value });
+  }
+  showCancelButtonChanged() {
+    requestAnimationFrame(() => {
+      this.positionElements();
+      index$1.forceUpdate(this);
+    });
+  }
+  connectedCallback() {
+    this.emitStyle();
+  }
+  componentDidLoad() {
+    this.positionElements();
+    this.debounceChanged();
+    setTimeout(() => {
+      this.noAnimate = false;
+    }, 300);
+  }
+  emitStyle() {
+    this.ionStyle.emit({
+      'searchbar': true
+    });
+  }
+  /**
+   * Sets focus on the specified `ion-searchbar`. Use this method instead of the global
+   * `input.focus()`.
+   */
+  async setFocus() {
+    if (this.nativeInput) {
+      this.nativeInput.focus();
+    }
+  }
+  /**
+   * Returns the native `<input>` element used under the hood.
+   */
+  getInputElement() {
+    return Promise.resolve(this.nativeInput);
+  }
+  /**
+   * Positions the input search icon, placeholder, and the cancel button
+   * based on the input value and if it is focused. (ios only)
+   */
+  positionElements() {
+    const value = this.getValue();
+    const prevAlignLeft = this.shouldAlignLeft;
+    const mode = ionicGlobal.getIonMode(this);
+    const shouldAlignLeft = (!this.animated || value.trim() !== '' || !!this.focused);
+    this.shouldAlignLeft = shouldAlignLeft;
+    if (mode !== 'ios') {
+      return;
+    }
+    if (prevAlignLeft !== shouldAlignLeft) {
+      this.positionPlaceholder();
+    }
+    if (this.animated) {
+      this.positionCancelButton();
+    }
+  }
+  /**
+   * Positions the input placeholder
+   */
+  positionPlaceholder() {
+    const inputEl = this.nativeInput;
+    if (!inputEl) {
+      return;
+    }
+    const isRTL = document.dir === 'rtl';
+    const iconEl = (this.el.shadowRoot || this.el).querySelector('.searchbar-search-icon');
+    if (this.shouldAlignLeft) {
+      inputEl.removeAttribute('style');
+      iconEl.removeAttribute('style');
+    }
+    else {
+      // Create a dummy span to get the placeholder width
+      const doc = document;
+      const tempSpan = doc.createElement('span');
+      tempSpan.innerText = this.placeholder || '';
+      doc.body.appendChild(tempSpan);
+      // Get the width of the span then remove it
+      helpers.raf(() => {
+        const textWidth = tempSpan.offsetWidth;
+        tempSpan.remove();
+        // Calculate the input padding
+        const inputLeft = 'calc(50% - ' + (textWidth / 2) + 'px)';
+        // Calculate the icon margin
+        const iconLeft = 'calc(50% - ' + ((textWidth / 2) + 30) + 'px)';
+        // Set the input padding start and icon margin start
+        if (isRTL) {
+          inputEl.style.paddingRight = inputLeft;
+          iconEl.style.marginRight = iconLeft;
+        }
+        else {
+          inputEl.style.paddingLeft = inputLeft;
+          iconEl.style.marginLeft = iconLeft;
+        }
+      });
+    }
+  }
+  /**
+   * Show the iOS Cancel button on focus, hide it offscreen otherwise
+   */
+  positionCancelButton() {
+    const isRTL = document.dir === 'rtl';
+    const cancelButton = (this.el.shadowRoot || this.el).querySelector('.searchbar-cancel-button');
+    const shouldShowCancel = this.shouldShowCancelButton();
+    if (cancelButton && shouldShowCancel !== this.isCancelVisible) {
+      const cancelStyle = cancelButton.style;
+      this.isCancelVisible = shouldShowCancel;
+      if (shouldShowCancel) {
+        if (isRTL) {
+          cancelStyle.marginLeft = '0';
+        }
+        else {
+          cancelStyle.marginRight = '0';
+        }
+      }
+      else {
+        const offset = cancelButton.offsetWidth;
+        if (offset > 0) {
+          if (isRTL) {
+            cancelStyle.marginLeft = -offset + 'px';
+          }
+          else {
+            cancelStyle.marginRight = -offset + 'px';
+          }
+        }
+      }
+    }
+  }
+  getValue() {
+    return this.value || '';
+  }
+  hasValue() {
+    return this.getValue() !== '';
+  }
+  /**
+   * Determines whether or not the cancel button should be visible onscreen.
+   * Cancel button should be shown if one of two conditions applies:
+   * 1. `showCancelButton` is set to `always`.
+   * 2. `showCancelButton` is set to `focus`, and the searchbar has been focused.
+   */
+  shouldShowCancelButton() {
+    if ((this.showCancelButton === 'never') || (this.showCancelButton === 'focus' && !this.focused)) {
+      return false;
+    }
+    return true;
+  }
+  /**
+   * Determines whether or not the clear button should be visible onscreen.
+   * Clear button should be shown if one of two conditions applies:
+   * 1. `showClearButton` is set to `always`.
+   * 2. `showClearButton` is set to `focus`, and the searchbar has been focused.
+   */
+  shouldShowClearButton() {
+    if ((this.showClearButton === 'never') || (this.showClearButton === 'focus' && !this.focused)) {
+      return false;
+    }
+    return true;
+  }
+  render() {
+    const { cancelButtonText } = this;
+    const animated = this.animated && ionicGlobal.config.getBoolean('animated', true);
+    const mode = ionicGlobal.getIonMode(this);
+    const clearIcon = this.clearIcon || (mode === 'ios' ? 'close-circle' : 'close-sharp');
+    const searchIcon = this.searchIcon || (mode === 'ios' ? 'search-outline' : 'search-sharp');
+    const shouldShowCancelButton = this.shouldShowCancelButton();
+    const cancelButton = (this.showCancelButton !== 'never') && (index$1.h("button", { "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, index$1.h("div", { "aria-hidden": "true" }, mode === 'md'
+      ? index$1.h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })
+      : cancelButtonText)));
+    return (index$1.h(index$1.Host, { role: "search", "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
+        [mode]: true,
+        'searchbar-animated': animated,
+        'searchbar-disabled': this.disabled,
+        'searchbar-no-animate': animated && this.noAnimate,
+        'searchbar-has-value': this.hasValue(),
+        'searchbar-left-aligned': this.shouldAlignLeft,
+        'searchbar-has-focus': this.focused,
+        'searchbar-should-show-clear': this.shouldShowClearButton(),
+        'searchbar-should-show-cancel': this.shouldShowCancelButton()
+      }) }, index$1.h("div", { class: "searchbar-input-container" }, index$1.h("input", { "aria-label": "search text", disabled: this.disabled, ref: el => this.nativeInput = el, class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }), mode === 'md' && cancelButton, index$1.h("ion-icon", { "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), index$1.h("button", { "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onMouseDown: ev => this.onClearInput(ev, true), onTouchStart: ev => this.onClearInput(ev, true) }, index$1.h("ion-icon", { "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+  }
+  get el() { return index$1.getElement(this); }
+  static get watchers() { return {
+    "debounce": ["debounceChanged"],
+    "value": ["valueChanged"],
+    "showCancelButton": ["showCancelButtonChanged"]
+  }; }
+};
+Searchbar.style = {
+  ios: searchbarIosCss,
+  md: searchbarMdCss
+};
+
 const skeletonTextCss = ":host{--background:rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065);border-radius:var(--border-radius, inherit);display:block;width:100%;height:inherit;margin-top:4px;margin-bottom:4px;background:var(--background);line-height:10px;user-select:none;pointer-events:none}span{display:inline-block}:host(.in-media){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;height:100%}:host(.skeleton-text-animated){position:relative;background:linear-gradient(to right, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065) 8%, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.135) 18%, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065) 33%);background-size:800px 104px;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:shimmer;animation-timing-function:linear}@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}";
 
 const SkeletonText = class {
@@ -24924,6 +25284,22 @@ var require_regenerator = __commonJS({
 // ../node_modules/@xmldom/xmldom/lib/conventions.js
 var require_conventions = __commonJS({
   "../node_modules/@xmldom/xmldom/lib/conventions.js"(exports) {
+    function find(list, predicate, ac) {
+      if (ac === void 0) {
+        ac = Array.prototype;
+      }
+      if (list && typeof ac.find === "function") {
+        return ac.find.call(list, predicate);
+      }
+      for (var i = 0; i < list.length; i++) {
+        if (Object.prototype.hasOwnProperty.call(list, i)) {
+          var item = list[i];
+          if (predicate.call(void 0, item, i, list)) {
+            return item;
+          }
+        }
+      }
+    }
     function freeze(object, oc) {
       if (oc === void 0) {
         oc = Object;
@@ -24961,6 +25337,7 @@ var require_conventions = __commonJS({
       XMLNS: "http://www.w3.org/2000/xmlns/"
     });
     exports.assign = assign;
+    exports.find = find;
     exports.freeze = freeze;
     exports.MIME_TYPE = MIME_TYPE;
     exports.NAMESPACE = NAMESPACE;
@@ -24971,6 +25348,7 @@ var require_conventions = __commonJS({
 var require_dom = __commonJS({
   "../node_modules/@xmldom/xmldom/lib/dom.js"(exports) {
     var conventions = require_conventions();
+    var find = conventions.find;
     var NAMESPACE = conventions.NAMESPACE;
     function notEmptyString(input) {
       return input !== "";
@@ -25078,6 +25456,12 @@ var require_dom = __commonJS({
           serializeToString(this[i], buf, isHTML, nodeFilter);
         }
         return buf.join("");
+      },
+      filter: function(predicate) {
+        return Array.prototype.filter.call(this, predicate);
+      },
+      indexOf: function(item) {
+        return Array.prototype.indexOf.call(this, item);
       }
     };
     function LiveNodeList(node, refresh) {
@@ -25140,7 +25524,7 @@ var require_dom = __commonJS({
           }
         }
       } else {
-        throw DOMException(NOT_FOUND_ERR, new Error(el.tagName + "@" + attr));
+        throw new DOMException(NOT_FOUND_ERR, new Error(el.tagName + "@" + attr));
       }
     }
     NamedNodeMap.prototype = {
@@ -25242,7 +25626,7 @@ var require_dom = __commonJS({
         return _insertBefore(this, newChild, refChild);
       },
       replaceChild: function(newChild, oldChild) {
-        this.insertBefore(newChild, oldChild);
+        _insertBefore(this, newChild, oldChild, assertPreReplacementValidityInDocument);
         if (oldChild) {
           this.removeChild(oldChild);
         }
@@ -25329,6 +25713,7 @@ var require_dom = __commonJS({
       }
     }
     function Document() {
+      this.ownerDocument = this;
     }
     function _onAddAttribute(doc, el, newAttr) {
       doc && doc._inc++;
@@ -25381,41 +25766,153 @@ var require_dom = __commonJS({
       _onUpdateChild(parentNode.ownerDocument, parentNode);
       return child;
     }
-    function _insertBefore(parentNode, newChild, nextChild) {
-      var cp = newChild.parentNode;
+    function hasValidParentNodeType(node) {
+      return node && (node.nodeType === Node3.DOCUMENT_NODE || node.nodeType === Node3.DOCUMENT_FRAGMENT_NODE || node.nodeType === Node3.ELEMENT_NODE);
+    }
+    function hasInsertableNodeType(node) {
+      return node && (isElementNode(node) || isTextNode(node) || isDocTypeNode(node) || node.nodeType === Node3.DOCUMENT_FRAGMENT_NODE || node.nodeType === Node3.COMMENT_NODE || node.nodeType === Node3.PROCESSING_INSTRUCTION_NODE);
+    }
+    function isDocTypeNode(node) {
+      return node && node.nodeType === Node3.DOCUMENT_TYPE_NODE;
+    }
+    function isElementNode(node) {
+      return node && node.nodeType === Node3.ELEMENT_NODE;
+    }
+    function isTextNode(node) {
+      return node && node.nodeType === Node3.TEXT_NODE;
+    }
+    function isElementInsertionPossible(doc, child) {
+      var parentChildNodes = doc.childNodes || [];
+      if (find(parentChildNodes, isElementNode) || isDocTypeNode(child)) {
+        return false;
+      }
+      var docTypeNode = find(parentChildNodes, isDocTypeNode);
+      return !(child && docTypeNode && parentChildNodes.indexOf(docTypeNode) > parentChildNodes.indexOf(child));
+    }
+    function isElementReplacementPossible(doc, child) {
+      var parentChildNodes = doc.childNodes || [];
+      function hasElementChildThatIsNotChild(node) {
+        return isElementNode(node) && node !== child;
+      }
+      if (find(parentChildNodes, hasElementChildThatIsNotChild)) {
+        return false;
+      }
+      var docTypeNode = find(parentChildNodes, isDocTypeNode);
+      return !(child && docTypeNode && parentChildNodes.indexOf(docTypeNode) > parentChildNodes.indexOf(child));
+    }
+    function assertPreInsertionValidity1to5(parent2, node, child) {
+      if (!hasValidParentNodeType(parent2)) {
+        throw new DOMException(HIERARCHY_REQUEST_ERR, "Unexpected parent node type " + parent2.nodeType);
+      }
+      if (child && child.parentNode !== parent2) {
+        throw new DOMException(NOT_FOUND_ERR, "child not in parent");
+      }
+      if (!hasInsertableNodeType(node) || isDocTypeNode(node) && parent2.nodeType !== Node3.DOCUMENT_NODE) {
+        throw new DOMException(
+          HIERARCHY_REQUEST_ERR,
+          "Unexpected node type " + node.nodeType + " for parent node type " + parent2.nodeType
+        );
+      }
+    }
+    function assertPreInsertionValidityInDocument(parent2, node, child) {
+      var parentChildNodes = parent2.childNodes || [];
+      var nodeChildNodes = node.childNodes || [];
+      if (node.nodeType === Node3.DOCUMENT_FRAGMENT_NODE) {
+        var nodeChildElements = nodeChildNodes.filter(isElementNode);
+        if (nodeChildElements.length > 1 || find(nodeChildNodes, isTextNode)) {
+          throw new DOMException(HIERARCHY_REQUEST_ERR, "More than one element or text in fragment");
+        }
+        if (nodeChildElements.length === 1 && !isElementInsertionPossible(parent2, child)) {
+          throw new DOMException(HIERARCHY_REQUEST_ERR, "Element in fragment can not be inserted before doctype");
+        }
+      }
+      if (isElementNode(node)) {
+        if (!isElementInsertionPossible(parent2, child)) {
+          throw new DOMException(HIERARCHY_REQUEST_ERR, "Only one element can be added and only after doctype");
+        }
+      }
+      if (isDocTypeNode(node)) {
+        if (find(parentChildNodes, isDocTypeNode)) {
+          throw new DOMException(HIERARCHY_REQUEST_ERR, "Only one doctype is allowed");
+        }
+        var parentElementChild = find(parentChildNodes, isElementNode);
+        if (child && parentChildNodes.indexOf(parentElementChild) < parentChildNodes.indexOf(child)) {
+          throw new DOMException(HIERARCHY_REQUEST_ERR, "Doctype can only be inserted before an element");
+        }
+        if (!child && parentElementChild) {
+          throw new DOMException(HIERARCHY_REQUEST_ERR, "Doctype can not be appended since element is present");
+        }
+      }
+    }
+    function assertPreReplacementValidityInDocument(parent2, node, child) {
+      var parentChildNodes = parent2.childNodes || [];
+      var nodeChildNodes = node.childNodes || [];
+      if (node.nodeType === Node3.DOCUMENT_FRAGMENT_NODE) {
+        var nodeChildElements = nodeChildNodes.filter(isElementNode);
+        if (nodeChildElements.length > 1 || find(nodeChildNodes, isTextNode)) {
+          throw new DOMException(HIERARCHY_REQUEST_ERR, "More than one element or text in fragment");
+        }
+        if (nodeChildElements.length === 1 && !isElementReplacementPossible(parent2, child)) {
+          throw new DOMException(HIERARCHY_REQUEST_ERR, "Element in fragment can not be inserted before doctype");
+        }
+      }
+      if (isElementNode(node)) {
+        if (!isElementReplacementPossible(parent2, child)) {
+          throw new DOMException(HIERARCHY_REQUEST_ERR, "Only one element can be added and only after doctype");
+        }
+      }
+      if (isDocTypeNode(node)) {
+        let hasDoctypeChildThatIsNotChild2 = function(node2) {
+          return isDocTypeNode(node2) && node2 !== child;
+        };
+        if (find(parentChildNodes, hasDoctypeChildThatIsNotChild2)) {
+          throw new DOMException(HIERARCHY_REQUEST_ERR, "Only one doctype is allowed");
+        }
+        var parentElementChild = find(parentChildNodes, isElementNode);
+        if (child && parentChildNodes.indexOf(parentElementChild) < parentChildNodes.indexOf(child)) {
+          throw new DOMException(HIERARCHY_REQUEST_ERR, "Doctype can only be inserted before an element");
+        }
+      }
+    }
+    function _insertBefore(parent2, node, child, _inDocumentAssertion) {
+      assertPreInsertionValidity1to5(parent2, node, child);
+      if (parent2.nodeType === Node3.DOCUMENT_NODE) {
+        (_inDocumentAssertion || assertPreInsertionValidityInDocument)(parent2, node, child);
+      }
+      var cp = node.parentNode;
       if (cp) {
-        cp.removeChild(newChild);
+        cp.removeChild(node);
       }
-      if (newChild.nodeType === DOCUMENT_FRAGMENT_NODE) {
-        var newFirst = newChild.firstChild;
+      if (node.nodeType === DOCUMENT_FRAGMENT_NODE) {
+        var newFirst = node.firstChild;
         if (newFirst == null) {
-          return newChild;
+          return node;
         }
-        var newLast = newChild.lastChild;
+        var newLast = node.lastChild;
       } else {
-        newFirst = newLast = newChild;
+        newFirst = newLast = node;
       }
-      var pre = nextChild ? nextChild.previousSibling : parentNode.lastChild;
+      var pre = child ? child.previousSibling : parent2.lastChild;
       newFirst.previousSibling = pre;
-      newLast.nextSibling = nextChild;
+      newLast.nextSibling = child;
       if (pre) {
         pre.nextSibling = newFirst;
       } else {
-        parentNode.firstChild = newFirst;
+        parent2.firstChild = newFirst;
       }
-      if (nextChild == null) {
-        parentNode.lastChild = newLast;
+      if (child == null) {
+        parent2.lastChild = newLast;
       } else {
-        nextChild.previousSibling = newLast;
+        child.previousSibling = newLast;
       }
       do {
-        newFirst.parentNode = parentNode;
+        newFirst.parentNode = parent2;
       } while (newFirst !== newLast && (newFirst = newFirst.nextSibling));
-      _onUpdateChild(parentNode.ownerDocument || parentNode, parentNode);
-      if (newChild.nodeType == DOCUMENT_FRAGMENT_NODE) {
-        newChild.firstChild = newChild.lastChild = null;
+      _onUpdateChild(parent2.ownerDocument || parent2, parent2);
+      if (node.nodeType == DOCUMENT_FRAGMENT_NODE) {
+        node.firstChild = node.lastChild = null;
       }
-      return newChild;
+      return node;
     }
     function _appendSingleChild(parentNode, newChild) {
       if (newChild.parentNode) {
@@ -25449,10 +25946,12 @@ var require_dom = __commonJS({
           }
           return newChild;
         }
-        if (this.documentElement == null && newChild.nodeType == ELEMENT_NODE) {
+        _insertBefore(this, newChild, refChild);
+        newChild.ownerDocument = this;
+        if (this.documentElement === null && newChild.nodeType === ELEMENT_NODE) {
           this.documentElement = newChild;
         }
-        return _insertBefore(this, newChild, refChild), newChild.ownerDocument = this, newChild;
+        return newChild;
       },
       removeChild: function(oldChild) {
         if (this.documentElement == oldChild) {
@@ -25460,6 +25959,16 @@ var require_dom = __commonJS({
         }
         return _removeChild(this, oldChild);
       },
+      replaceChild: function(newChild, oldChild) {
+        _insertBefore(this, newChild, oldChild, assertPreReplacementValidityInDocument);
+        newChild.ownerDocument = this;
+        if (oldChild) {
+          this.removeChild(oldChild);
+        }
+        if (isElementNode(newChild)) {
+          this.documentElement = newChild;
+        }
+      },
       importNode: function(importedNode, deep) {
         return importNode(this, importedNode, deep);
       },
@@ -40027,30 +40536,30 @@ const PosApp = class {
   }
 };
 
-const PosAppGeneric = class {
+const PosAppBrowser = class {
   constructor(hostRef) {
     index$1.registerInstance(this, hostRef);
   }
   render() {
-    return (index$1.h("ion-grid", null, index$1.h("ion-row", null, index$1.h("ion-col", { size: "12", "size-sm": true }, index$1.h("ion-card", null, index$1.h("ion-card-header", null, index$1.h("pos-picture", null), index$1.h("ion-card-title", null, index$1.h("pos-label", null))), index$1.h("ion-card-content", null, index$1.h("pos-description", null)))), index$1.h("ion-col", { size: "12", "size-sm": true }, index$1.h("pos-literals", null)), index$1.h("ion-col", { size: "12", "size-sm": true }, index$1.h("pos-relations", null), index$1.h("pos-reverse-relations", null)))));
+    return (index$1.h("pos-app", null, index$1.h("ion-header", null, index$1.h("ion-toolbar", null, index$1.h("ion-title", { slot: "start" }, "PodOS"), index$1.h("pos-login", null))), index$1.h("ion-content", null, index$1.h("pos-router", null)), index$1.h("ion-footer", null, index$1.h("ion-toolbar", null, index$1.h("ion-title", null, "PodOS Browser")))));
   }
 };
 
-const PosAppRdfDocument = class {
+const PosAppGeneric = class {
   constructor(hostRef) {
     index$1.registerInstance(this, hostRef);
   }
   render() {
-    return (index$1.h("ion-grid", null, index$1.h("ion-row", null, index$1.h("ion-col", { size: "12", "size-sm": true }, index$1.h("pos-subjects", null)), index$1.h("ion-col", { size: "12", "size-sm": true }, index$1.h("ion-card", null, index$1.h("ion-card-header", null, index$1.h("ion-card-title", null, index$1.h("pos-label", null)), index$1.h("pos-literals", null)))))));
+    return (index$1.h("ion-grid", null, index$1.h("ion-row", null, index$1.h("ion-col", { size: "12", "size-sm": true }, index$1.h("ion-card", null, index$1.h("ion-card-header", null, index$1.h("pos-picture", null), index$1.h("ion-card-title", null, index$1.h("pos-label", null))), index$1.h("ion-card-content", null, index$1.h("pos-description", null)))), index$1.h("ion-col", { size: "12", "size-sm": true }, index$1.h("pos-literals", null)), index$1.h("ion-col", { size: "12", "size-sm": true }, index$1.h("pos-relations", null), index$1.h("pos-reverse-relations", null)))));
   }
 };
 
-const PosDemoApp = class {
+const PosAppRdfDocument = class {
   constructor(hostRef) {
     index$1.registerInstance(this, hostRef);
   }
   render() {
-    return (index$1.h("pos-app", null, index$1.h("ion-header", null, index$1.h("ion-toolbar", null, index$1.h("ion-title", { slot: "start" }, "pod os"), index$1.h("pos-login", null))), index$1.h("ion-content", null, index$1.h("pos-router", null)), index$1.h("ion-footer", null, index$1.h("ion-toolbar", null, index$1.h("ion-title", null, "Footer")))));
+    return (index$1.h("ion-grid", null, index$1.h("ion-row", null, index$1.h("ion-col", { size: "12", "size-sm": true }, index$1.h("pos-subjects", null)), index$1.h("ion-col", { size: "12", "size-sm": true }, index$1.h("ion-card", null, index$1.h("ion-card-header", null, index$1.h("ion-card-title", null, index$1.h("pos-label", null)), index$1.h("pos-literals", null)))))));
   }
 };
 
@@ -40216,6 +40725,25 @@ const PosLogin = class {
 };
 PosLogin.style = posLoginCss;
 
+const PosNavigationBar = class {
+  constructor(hostRef) {
+    index$1.registerInstance(this, hostRef);
+    this.linkEmitter = index$1.createEvent(this, "pod-os:link", 7);
+    this.uri = '';
+    this.value = this.uri;
+  }
+  onChange(event) {
+    this.value = event.detail.value;
+  }
+  onSubmit(event) {
+    event.preventDefault();
+    this.linkEmitter.emit(this.value);
+  }
+  render() {
+    return (index$1.h("form", { onSubmit: e => this.onSubmit(e) }, index$1.h("ion-searchbar", { enterkeyhint: "search", placeholder: "Enter URI", value: this.uri, onIonChange: e => this.onChange(e) })));
+  }
+};
+
 const posPictureCss = ":host{--width:300px;--height:300px;--border-radius:var(--border-radius, 0)}";
 
 const PosPicture = class {
@@ -40748,7 +41276,7 @@ const PosRouter = class {
   }
   render() {
     console.log('render router', this.uri);
-    return (index$1.h(Router.Switch, null, index$1.h(Route, { path: match('', { exact: false }) }, index$1.h("pos-resource", { key: this.uri, uri: this.uri }, index$1.h("pos-type-router", null)))));
+    return (index$1.h(Router.Switch, null, index$1.h(Route, { path: match('', { exact: false }) }, index$1.h("pos-navigation-bar", { uri: this.uri }), index$1.h("pos-resource", { key: this.uri, uri: this.uri }, index$1.h("pos-type-router", null)))));
   }
 };
 
@@ -40816,18 +41344,20 @@ exports.ion_list = List;
 exports.ion_progress_bar = ProgressBar;
 exports.ion_ripple_effect = RippleEffect;
 exports.ion_row = Row;
+exports.ion_searchbar = Searchbar;
 exports.ion_skeleton_text = SkeletonText;
 exports.ion_title = ToolbarTitle;
 exports.ion_toolbar = Toolbar;
 exports.pos_app = PosApp;
+exports.pos_app_browser = PosAppBrowser;
 exports.pos_app_generic = PosAppGeneric;
 exports.pos_app_rdf_document = PosAppRdfDocument;
-exports.pos_demo_app = PosDemoApp;
 exports.pos_description = PosDescription;
 exports.pos_image = PosImage;
 exports.pos_label = PosLabel;
 exports.pos_literals = PosLiterals;
 exports.pos_login = PosLogin;
+exports.pos_navigation_bar = PosNavigationBar;
 exports.pos_picture = PosPicture;
 exports.pos_relations = PosRelations;
 exports.pos_resource = PosResource;