@pod-os/elements 0.26.1-rc.e49d800.0 → 0.27.0

package/dist/esm/ion-icon_31.entry.js

@@ -1,4110 +0,0 @@
-import { d as getAssetPath, r as registerInstance, h, H as Host, e as getElement, f as readTask, w as writeTask, i as createEvent, j as getRenderingRef, k as forceUpdate } from './index-46d8987d.js';
-import { c as clamp, g as getElementRoot, r as raf } from './helpers-bc137989.js';
-import { c as createColorClasses$1, h as hostContext, g as getClassMap } from './theme-d75c68ae.js';
-import { c as config$1, g as getIonMode$1 } from './ionic-global-dc58df6a.js';
-import { E as ENABLE_HTML_CONTENT_DEFAULT, s as sanitizeDOMString } from './index-ce4e7029.js';
-import { c as createLockController } from './lock-controller-10217ff6.js';
-import { p as printIonWarning } from './index-f7ac0403.js';
-import { O as OVERLAY_GESTURE_PRIORITY, c as createDelegateController, a as createTriggerController, i as isCancel, p as prepareOverlay, s as setOverlayId, b as present, d as dismiss, e as eventMethod, f as safeCall, G as GESTURE, t as toastController } from './overlays-d7fc4ce2.js';
-import { c as createAnimation } from './animation-756697b9.js';
-import { w as win } from './index-6b94f340.js';
-import { createGesture } from './index-38fe935b.js';
-import { c as createStore$1, s as store, B as BrokenFile } from './BrokenFile-0b9882ef.js';
-import { P as PodOS, N as NoOfflineCache, L as LabelIndex } from './index-f3176f87.js';
-import { s as subscribeResource } from './ResourceAware-5f237305.js';
-import './gesture-controller-958242a2.js';
-import { s as subscribePodOs } from './PodOsAware-132573cd.js';
-import './hardware-back-button-87b1549b.js';
-import './framework-delegate-65b5c396.js';
-
-let CACHED_MAP;
-const getIconMap = () => {
-  if (typeof window === 'undefined') {
-    return new Map();
-  }
-  else {
-    if (!CACHED_MAP) {
-      const win = window;
-      win.Ionicons = win.Ionicons || {};
-      CACHED_MAP = win.Ionicons.map = win.Ionicons.map || new Map();
-    }
-    return CACHED_MAP;
-  }
-};
-const getUrl = (i) => {
-  let url = getSrc(i.src);
-  if (url) {
-    return url;
-  }
-  url = getName(i.name, i.icon, i.mode, i.ios, i.md);
-  if (url) {
-    return getNamedUrl(url, i);
-  }
-  if (i.icon) {
-    url = getSrc(i.icon);
-    if (url) {
-      return url;
-    }
-    url = getSrc(i.icon[i.mode]);
-    if (url) {
-      return url;
-    }
-  }
-  return null;
-};
-const getNamedUrl = (iconName, iconEl) => {
-  const url = getIconMap().get(iconName);
-  if (url) {
-    return url;
-  }
-  try {
-    return getAssetPath(`svg/${iconName}.svg`);
-  }
-  catch (e) {
-    /**
-     * In the custom elements build version of ionicons, referencing an icon
-     * by name will throw an invalid URL error because the asset path is not defined.
-     * This catches that error and logs something that is more developer-friendly.
-     * We also include a reference to the ion-icon element so developers can
-     * figure out which instance of ion-icon needs to be updated.
-     */
-    console.warn(`[Ionicons Warning]: Could not load icon with name "${iconName}". Ensure that the icon is registered using addIcons or that the icon SVG data is passed directly to the icon component.`, iconEl);
-  }
-};
-const getName = (iconName, icon, mode, ios, md) => {
-  // default to "md" if somehow the mode wasn't set
-  mode = (mode && toLower(mode)) === 'ios' ? 'ios' : 'md';
-  // if an icon was passed in using the ios or md attributes
-  // set the iconName to whatever was passed in
-  if (ios && mode === 'ios') {
-    iconName = toLower(ios);
-  }
-  else if (md && mode === 'md') {
-    iconName = toLower(md);
-  }
-  else {
-    if (!iconName && icon && !isSrc(icon)) {
-      iconName = icon;
-    }
-    if (isStr(iconName)) {
-      iconName = toLower(iconName);
-    }
-  }
-  if (!isStr(iconName) || iconName.trim() === '') {
-    return null;
-  }
-  // only allow alpha characters and dash
-  const invalidChars = iconName.replace(/[a-z]|-|\d/gi, '');
-  if (invalidChars !== '') {
-    return null;
-  }
-  return iconName;
-};
-const getSrc = (src) => {
-  if (isStr(src)) {
-    src = src.trim();
-    if (isSrc(src)) {
-      return src;
-    }
-  }
-  return null;
-};
-const isSrc = (str) => str.length > 0 && /(\/|\.)/.test(str);
-const isStr = (val) => typeof val === 'string';
-const toLower = (val) => val.toLowerCase();
-/**
- * Elements inside of web components sometimes need to inherit global attributes
- * set on the host. For example, the inner input in `ion-input` should inherit
- * the `title` attribute that developers set directly on `ion-input`. This
- * helper function should be called in componentWillLoad and assigned to a variable
- * that is later used in the render function.
- *
- * This does not need to be reactive as changing attributes on the host element
- * does not trigger a re-render.
- */
-const inheritAttributes = (el, attributes = []) => {
-  const attributeObject = {};
-  attributes.forEach(attr => {
-    if (el.hasAttribute(attr)) {
-      const value = el.getAttribute(attr);
-      if (value !== null) {
-        attributeObject[attr] = el.getAttribute(attr);
-      }
-      el.removeAttribute(attr);
-    }
-  });
-  return attributeObject;
-};
-/**
- * Returns `true` if the document or host element
- * has a `dir` set to `rtl`. The host value will always
- * take priority over the root document value.
- */
-const isRTL = (hostEl) => {
-  if (hostEl) {
-    if (hostEl.dir !== '') {
-      return hostEl.dir.toLowerCase() === 'rtl';
-    }
-  }
-  return (document === null || document === void 0 ? void 0 : document.dir.toLowerCase()) === 'rtl';
-};
-
-const validateContent = (svgContent) => {
-  const div = document.createElement('div');
-  div.innerHTML = svgContent;
-  // setup this way to ensure it works on our buddy IE
-  for (let i = div.childNodes.length - 1; i >= 0; i--) {
-    if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {
-      div.removeChild(div.childNodes[i]);
-    }
-  }
-  // must only have 1 root element
-  const svgElm = div.firstElementChild;
-  if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {
-    const svgClass = svgElm.getAttribute('class') || '';
-    svgElm.setAttribute('class', (svgClass + ' s-ion-icon').trim());
-    // root element must be an svg
-    // lets double check we've got valid elements
-    // do not allow scripts
-    if (isValid(svgElm)) {
-      return div.innerHTML;
-    }
-  }
-  return '';
-};
-const isValid = (elm) => {
-  if (elm.nodeType === 1) {
-    if (elm.nodeName.toLowerCase() === 'script') {
-      return false;
-    }
-    for (let i = 0; i < elm.attributes.length; i++) {
-      const name = elm.attributes[i].name;
-      if (isStr(name) && name.toLowerCase().indexOf('on') === 0) {
-        return false;
-      }
-    }
-    for (let i = 0; i < elm.childNodes.length; i++) {
-      if (!isValid(elm.childNodes[i])) {
-        return false;
-      }
-    }
-  }
-  return true;
-};
-const isSvgDataUrl = (url) => url.startsWith('data:image/svg+xml');
-const isEncodedDataUrl = (url) => url.indexOf(';utf8,') !== -1;
-
-const ioniconContent = new Map();
-const requests = new Map();
-let parser;
-const getSvgContent = (url, sanitize) => {
-  // see if we already have a request for this url
-  let req = requests.get(url);
-  if (!req) {
-    if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {
-      /**
-       * If the url is a data url of an svg, then try to parse it
-       * with the DOMParser. This works with content security policies enabled.
-       */
-      if (isSvgDataUrl(url) && isEncodedDataUrl(url)) {
-        if (!parser) {
-          /**
-           * Create an instance of the DOM parser. This creates a single
-           * parser instance for the entire app, which is more efficient.
-           */
-          parser = new DOMParser();
-        }
-        const doc = parser.parseFromString(url, 'text/html');
-        const svg = doc.querySelector('svg');
-        if (svg) {
-          ioniconContent.set(url, svg.outerHTML);
-        }
-        return Promise.resolve();
-      }
-      else {
-        // we don't already have a request
-        req = fetch(url).then((rsp) => {
-          if (rsp.ok) {
-            return rsp.text().then((svgContent) => {
-              if (svgContent && sanitize !== false) {
-                svgContent = validateContent(svgContent);
-              }
-              ioniconContent.set(url, svgContent || '');
-            });
-          }
-          ioniconContent.set(url, '');
-        });
-        // cache for the same requests
-        requests.set(url, req);
-      }
-    }
-    else {
-      // set to empty for ssr scenarios and resolve promise
-      ioniconContent.set(url, '');
-      return Promise.resolve();
-    }
-  }
-  return req;
-};
-
-const iconCss = ":host{display:inline-block;width:1em;height:1em;contain:strict;fill:currentColor;box-sizing:content-box !important}:host .ionicon{stroke:currentColor}.ionicon-fill-none{fill:none}.ionicon-stroke-width{stroke-width:32px;stroke-width:var(--ionicon-stroke-width, 32px)}.icon-inner,.ionicon,svg{display:block;height:100%;width:100%}@supports (background: -webkit-named-image(i)){:host(.icon-rtl) .icon-inner{transform:scaleX(-1)}}@supports not selector(:dir(rtl)) and selector(:host-context([dir='rtl'])){:host(.icon-rtl) .icon-inner{transform:scaleX(-1)}}:host(.flip-rtl):host-context([dir='rtl']) .icon-inner{transform:scaleX(-1)}@supports selector(:dir(rtl)){:host(.flip-rtl:dir(rtl)) .icon-inner{transform:scaleX(-1)}:host(.flip-rtl:dir(ltr)) .icon-inner{transform:scaleX(1)}}:host(.icon-small){font-size:1.125rem !important}:host(.icon-large){font-size:2rem !important}:host(.ion-color){color:var(--ion-color-base) !important}:host(.ion-color-primary){--ion-color-base:var(--ion-color-primary, #3880ff)}:host(.ion-color-secondary){--ion-color-base:var(--ion-color-secondary, #0cd1e8)}:host(.ion-color-tertiary){--ion-color-base:var(--ion-color-tertiary, #f4a942)}:host(.ion-color-success){--ion-color-base:var(--ion-color-success, #10dc60)}:host(.ion-color-warning){--ion-color-base:var(--ion-color-warning, #ffce00)}:host(.ion-color-danger){--ion-color-base:var(--ion-color-danger, #f14141)}:host(.ion-color-light){--ion-color-base:var(--ion-color-light, #f4f5f8)}:host(.ion-color-medium){--ion-color-base:var(--ion-color-medium, #989aa2)}:host(.ion-color-dark){--ion-color-base:var(--ion-color-dark, #222428)}";
-const IonIconStyle0 = iconCss;
-
-const Icon = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.iconName = null;
-        this.inheritedAttributes = {};
-        this.didLoadIcon = false;
-        this.svgContent = undefined;
-        this.isVisible = false;
-        this.mode = getIonMode();
-        this.color = undefined;
-        this.ios = undefined;
-        this.md = undefined;
-        this.flipRtl = undefined;
-        this.name = undefined;
-        this.src = undefined;
-        this.icon = undefined;
-        this.size = undefined;
-        this.lazy = false;
-        this.sanitize = true;
-    }
-    componentWillLoad() {
-        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
-    }
-    connectedCallback() {
-        // purposely do not return the promise here because loading
-        // the svg file should not hold up loading the app
-        // only load the svg if it's visible
-        this.waitUntilVisible(this.el, '50px', () => {
-            this.isVisible = true;
-            this.loadIcon();
-        });
-    }
-    componentDidLoad() {
-        /**
-         * Addresses an Angular issue where property values are assigned after the 'connectedCallback' but prior to the registration of watchers.
-         * This enhancement ensures the loading of an icon when the component has finished rendering and the icon has yet to apply the SVG data.
-         * This modification pertains to the usage of Angular's binding syntax:
-         * `<ion-icon [name]="myIconName"></ion-icon>`
-         */
-        if (!this.didLoadIcon) {
-            this.loadIcon();
-        }
-    }
-    disconnectedCallback() {
-        if (this.io) {
-            this.io.disconnect();
-            this.io = undefined;
-        }
-    }
-    waitUntilVisible(el, rootMargin, cb) {
-        if (this.lazy && typeof window !== 'undefined' && window.IntersectionObserver) {
-            const io = (this.io = new window.IntersectionObserver((data) => {
-                if (data[0].isIntersecting) {
-                    io.disconnect();
-                    this.io = undefined;
-                    cb();
-                }
-            }, { rootMargin }));
-            io.observe(el);
-        }
-        else {
-            // browser doesn't support IntersectionObserver
-            // so just fallback to always show it
-            cb();
-        }
-    }
-    loadIcon() {
-        if (this.isVisible) {
-            const url = getUrl(this);
-            if (url) {
-                if (ioniconContent.has(url)) {
-                    // sync if it's already loaded
-                    this.svgContent = ioniconContent.get(url);
-                }
-                else {
-                    // async if it hasn't been loaded
-                    getSvgContent(url, this.sanitize).then(() => (this.svgContent = ioniconContent.get(url)));
-                }
-                this.didLoadIcon = true;
-            }
-        }
-        this.iconName = getName(this.name, this.icon, this.mode, this.ios, this.md);
-    }
-    render() {
-        const { flipRtl, iconName, inheritedAttributes, el } = this;
-        const mode = this.mode || 'md';
-        // we have designated that arrows & chevrons should automatically flip (unless flip-rtl is set to false) because "back" is left in ltr and right in rtl, and "forward" is the opposite
-        const shouldAutoFlip = iconName
-            ? (iconName.includes('arrow') || iconName.includes('chevron')) && flipRtl !== false
-            : false;
-        // if shouldBeFlippable is true, the icon should change direction when `dir` changes
-        const shouldBeFlippable = flipRtl || shouldAutoFlip;
-        return (h(Host, Object.assign({ role: "img", class: Object.assign(Object.assign({ [mode]: true }, createColorClasses(this.color)), { [`icon-${this.size}`]: !!this.size, 'flip-rtl': shouldBeFlippable, 'icon-rtl': shouldBeFlippable && isRTL(el) }) }, inheritedAttributes), this.svgContent ? (h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (h("div", { class: "icon-inner" }))));
-    }
-    static get assetsDirs() { return ["svg"]; }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "name": ["loadIcon"],
-        "src": ["loadIcon"],
-        "icon": ["loadIcon"],
-        "ios": ["loadIcon"],
-        "md": ["loadIcon"]
-    }; }
-};
-const getIonMode = () => (typeof document !== 'undefined' && document.documentElement.getAttribute('mode')) || 'md';
-const createColorClasses = (color) => {
-    return color
-        ? {
-            'ion-color': true,
-            [`ion-color-${color}`]: true,
-        }
-        : null;
-};
-Icon.style = IonIconStyle0;
-
-const progressBarIosCss = ":host{--background:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.3);--progress-background:var(--ion-color-primary, #3880ff);--buffer-background:var(--background);display:block;position:relative;width:100%;contain:strict;direction:ltr;overflow:hidden}.progress,.progress-indeterminate,.indeterminate-bar-primary,.indeterminate-bar-secondary,.progress-buffer-bar{left:0;right:0;top:0;bottom:0;position:absolute;width:100%;height:100%}.buffer-circles-container,.buffer-circles{left:0;right:0;top:0;bottom:0;position:absolute}.buffer-circles{right:-10px;left:-10px;}.progress,.progress-buffer-bar,.buffer-circles-container{transform-origin:left top;transition:transform 150ms linear}.progress,.progress-indeterminate{background:var(--progress-background);z-index:2}.progress-buffer-bar{background:var(--buffer-background);z-index:1}.buffer-circles-container{overflow:hidden}.indeterminate-bar-primary{top:0;right:0;bottom:0;left:-145.166611%;animation:primary-indeterminate-translate 2s infinite linear}.indeterminate-bar-primary .progress-indeterminate{animation:primary-indeterminate-scale 2s infinite linear;animation-play-state:inherit}.indeterminate-bar-secondary{top:0;right:0;bottom:0;left:-54.888891%;animation:secondary-indeterminate-translate 2s infinite linear}.indeterminate-bar-secondary .progress-indeterminate{animation:secondary-indeterminate-scale 2s infinite linear;animation-play-state:inherit}.buffer-circles{background-image:radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%);background-repeat:repeat-x;background-position:5px center;background-size:10px 10px;z-index:0;animation:buffering 450ms infinite linear}:host(.progress-bar-reversed){transform:scaleX(-1)}:host(.progress-paused) .indeterminate-bar-secondary,:host(.progress-paused) .indeterminate-bar-primary,:host(.progress-paused) .buffer-circles{animation-play-state:paused}:host(.ion-color) .progress-buffer-bar{background:rgba(var(--ion-color-base-rgb), 0.3)}:host(.ion-color) .buffer-circles{background-image:radial-gradient(ellipse at center, rgba(var(--ion-color-base-rgb), 0.3) 0%, rgba(var(--ion-color-base-rgb), 0.3) 30%, transparent 30%)}:host(.ion-color) .progress,:host(.ion-color) .progress-indeterminate{background:var(--ion-color-base)}@keyframes primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(83.67142%)}100%{transform:translateX(200.611057%)}}@keyframes primary-indeterminate-scale{0%{transform:scaleX(0.08)}36.65%{animation-timing-function:cubic-bezier(0.334731, 0.12482, 0.785844, 1);transform:scaleX(0.08)}69.15%{animation-timing-function:cubic-bezier(0.06, 0.11, 0.6, 1);transform:scaleX(0.661479)}100%{transform:scaleX(0.08)}}@keyframes secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);transform:translateX(37.651913%)}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(84.386165%)}100%{transform:translateX(160.277782%)}}@keyframes secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);transform:scaleX(0.08)}19.15%{animation-timing-function:cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);transform:scaleX(0.457104)}44.15%{animation-timing-function:cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);transform:scaleX(0.72796)}100%{transform:scaleX(0.08)}}@keyframes buffering{to{transform:translateX(-10px)}}:host{height:3px}";
-const IonProgressBarIosStyle0 = progressBarIosCss;
-
-const progressBarMdCss = ":host{--background:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.3);--progress-background:var(--ion-color-primary, #3880ff);--buffer-background:var(--background);display:block;position:relative;width:100%;contain:strict;direction:ltr;overflow:hidden}.progress,.progress-indeterminate,.indeterminate-bar-primary,.indeterminate-bar-secondary,.progress-buffer-bar{left:0;right:0;top:0;bottom:0;position:absolute;width:100%;height:100%}.buffer-circles-container,.buffer-circles{left:0;right:0;top:0;bottom:0;position:absolute}.buffer-circles{right:-10px;left:-10px;}.progress,.progress-buffer-bar,.buffer-circles-container{transform-origin:left top;transition:transform 150ms linear}.progress,.progress-indeterminate{background:var(--progress-background);z-index:2}.progress-buffer-bar{background:var(--buffer-background);z-index:1}.buffer-circles-container{overflow:hidden}.indeterminate-bar-primary{top:0;right:0;bottom:0;left:-145.166611%;animation:primary-indeterminate-translate 2s infinite linear}.indeterminate-bar-primary .progress-indeterminate{animation:primary-indeterminate-scale 2s infinite linear;animation-play-state:inherit}.indeterminate-bar-secondary{top:0;right:0;bottom:0;left:-54.888891%;animation:secondary-indeterminate-translate 2s infinite linear}.indeterminate-bar-secondary .progress-indeterminate{animation:secondary-indeterminate-scale 2s infinite linear;animation-play-state:inherit}.buffer-circles{background-image:radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%);background-repeat:repeat-x;background-position:5px center;background-size:10px 10px;z-index:0;animation:buffering 450ms infinite linear}:host(.progress-bar-reversed){transform:scaleX(-1)}:host(.progress-paused) .indeterminate-bar-secondary,:host(.progress-paused) .indeterminate-bar-primary,:host(.progress-paused) .buffer-circles{animation-play-state:paused}:host(.ion-color) .progress-buffer-bar{background:rgba(var(--ion-color-base-rgb), 0.3)}:host(.ion-color) .buffer-circles{background-image:radial-gradient(ellipse at center, rgba(var(--ion-color-base-rgb), 0.3) 0%, rgba(var(--ion-color-base-rgb), 0.3) 30%, transparent 30%)}:host(.ion-color) .progress,:host(.ion-color) .progress-indeterminate{background:var(--ion-color-base)}@keyframes primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(83.67142%)}100%{transform:translateX(200.611057%)}}@keyframes primary-indeterminate-scale{0%{transform:scaleX(0.08)}36.65%{animation-timing-function:cubic-bezier(0.334731, 0.12482, 0.785844, 1);transform:scaleX(0.08)}69.15%{animation-timing-function:cubic-bezier(0.06, 0.11, 0.6, 1);transform:scaleX(0.661479)}100%{transform:scaleX(0.08)}}@keyframes secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);transform:translateX(37.651913%)}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(84.386165%)}100%{transform:translateX(160.277782%)}}@keyframes secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);transform:scaleX(0.08)}19.15%{animation-timing-function:cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);transform:scaleX(0.457104)}44.15%{animation-timing-function:cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);transform:scaleX(0.72796)}100%{transform:scaleX(0.08)}}@keyframes buffering{to{transform:translateX(-10px)}}:host{height:4px}";
-const IonProgressBarMdStyle0 = progressBarMdCss;
-
-const ProgressBar = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.type = 'determinate';
-        this.reversed = false;
-        this.value = 0;
-        this.buffer = 1;
-        this.color = undefined;
-    }
-    render() {
-        const { color, type, reversed, value, buffer } = this;
-        const paused = config$1.getBoolean('_testing');
-        const mode = getIonMode$1(this);
-        return (h(Host, { key: '944b79ed6fce1b2c0ed48681cd8517a5abbddd80', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses$1(color, {
-                [mode]: true,
-                [`progress-bar-${type}`]: true,
-                'progress-paused': paused,
-                'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed,
-            }) }, type === 'indeterminate' ? renderIndeterminate() : renderProgress(value, buffer)));
-    }
-};
-const renderIndeterminate = () => {
-    return (h("div", { part: "track", class: "progress-buffer-bar" }, h("div", { class: "indeterminate-bar-primary" }, h("span", { part: "progress", class: "progress-indeterminate" })), h("div", { class: "indeterminate-bar-secondary" }, h("span", { part: "progress", class: "progress-indeterminate" }))));
-};
-const renderProgress = (value, buffer) => {
-    const finalValue = clamp(0, value, 1);
-    const finalBuffer = clamp(0, buffer, 1);
-    return [
-        h("div", { part: "progress", class: "progress", style: { transform: `scaleX(${finalValue})` } }),
-        /**
-         * Buffer circles with two container to move
-         * the circles behind the buffer progress
-         * with respecting the animation.
-         * When finalBuffer === 1, we use display: none
-         * instead of removing the element to avoid flickering.
-         */
-        h("div", { class: { 'buffer-circles-container': true, 'ion-hide': finalBuffer === 1 }, style: { transform: `translateX(${finalBuffer * 100}%)` } }, h("div", { class: "buffer-circles-container", style: { transform: `translateX(-${finalBuffer * 100}%)` } }, h("div", { part: "stream", class: "buffer-circles" }))),
-        h("div", { part: "track", class: "progress-buffer-bar", style: { transform: `scaleX(${finalBuffer})` } }),
-    ];
-};
-ProgressBar.style = {
-    ios: IonProgressBarIosStyle0,
-    md: IonProgressBarMdStyle0
-};
-
-const rippleEffectCss = ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:strict;pointer-events:none}:host(.unbounded){contain:layout size style}.ripple-effect{border-radius:50%;position:absolute;background-color:currentColor;color:inherit;contain:strict;opacity:0;animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;will-change:transform, opacity;pointer-events:none}.fade-out{transform:translate(var(--translate-end)) scale(var(--final-scale, 1));animation:150ms fadeOutAnimation forwards}@keyframes rippleAnimation{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:scale(1)}to{transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@keyframes fadeInAnimation{from{animation-timing-function:linear;opacity:0}to{opacity:0.16}}@keyframes fadeOutAnimation{from{animation-timing-function:linear;opacity:0.16}to{opacity:0}}";
-const IonRippleEffectStyle0 = rippleEffectCss;
-
-const RippleEffect = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.type = 'bounded';
-    }
-    /**
-     * Adds the ripple effect to the parent element.
-     *
-     * @param x The horizontal coordinate of where the ripple should start.
-     * @param y The vertical coordinate of where the ripple should start.
-     */
-    async addRipple(x, y) {
-        return new Promise((resolve) => {
-            readTask(() => {
-                const rect = this.el.getBoundingClientRect();
-                const width = rect.width;
-                const height = rect.height;
-                const hypotenuse = Math.sqrt(width * width + height * height);
-                const maxDim = Math.max(height, width);
-                const maxRadius = this.unbounded ? maxDim : hypotenuse + PADDING;
-                const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);
-                const finalScale = maxRadius / initialSize;
-                let posX = x - rect.left;
-                let posY = y - rect.top;
-                if (this.unbounded) {
-                    posX = width * 0.5;
-                    posY = height * 0.5;
-                }
-                const styleX = posX - initialSize * 0.5;
-                const styleY = posY - initialSize * 0.5;
-                const moveX = width * 0.5 - posX;
-                const moveY = height * 0.5 - posY;
-                writeTask(() => {
-                    const div = document.createElement('div');
-                    div.classList.add('ripple-effect');
-                    const style = div.style;
-                    style.top = styleY + 'px';
-                    style.left = styleX + 'px';
-                    style.width = style.height = initialSize + 'px';
-                    style.setProperty('--final-scale', `${finalScale}`);
-                    style.setProperty('--translate-end', `${moveX}px, ${moveY}px`);
-                    const container = this.el.shadowRoot || this.el;
-                    container.appendChild(div);
-                    setTimeout(() => {
-                        resolve(() => {
-                            removeRipple(div);
-                        });
-                    }, 225 + 100);
-                });
-            });
-        });
-    }
-    get unbounded() {
-        return this.type === 'unbounded';
-    }
-    render() {
-        const mode = getIonMode$1(this);
-        return (h(Host, { key: 'f1129019a6d556b008c754aeb79618c69baea9f8', role: "presentation", class: {
-                [mode]: true,
-                unbounded: this.unbounded,
-            } }));
-    }
-    get el() { return getElement(this); }
-};
-const removeRipple = (ripple) => {
-    ripple.classList.add('fade-out');
-    setTimeout(() => {
-        ripple.remove();
-    }, 200);
-};
-const PADDING = 10;
-const INITIAL_ORIGIN_SCALE = 0.5;
-RippleEffect.style = IonRippleEffectStyle0;
-
-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 IonSkeletonTextStyle0 = skeletonTextCss;
-
-const SkeletonText = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.ionStyle = createEvent(this, "ionStyle", 7);
-        this.animated = false;
-    }
-    componentWillLoad() {
-        this.emitStyle();
-    }
-    emitStyle() {
-        // The emitted property is used by item in order
-        // to add the item-skeleton-text class which applies
-        // overflow: hidden to its label
-        const style = {
-            'skeleton-text': true,
-        };
-        this.ionStyle.emit(style);
-    }
-    render() {
-        const animated = this.animated && config$1.getBoolean('animated', true);
-        const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
-        const mode = getIonMode$1(this);
-        return (h(Host, { key: '4dab0fd2de666de12ad8f6dc6ed1e1de0be67ddd', class: {
-                [mode]: true,
-                'skeleton-text-animated': animated,
-                'in-media': inMedia,
-            } }, h("span", { key: 'f8f908ec24d65e63b14d9a54640a5f18f0fa8fa5' }, "\u00A0")));
-    }
-    get el() { return getElement(this); }
-};
-SkeletonText.style = IonSkeletonTextStyle0;
-
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-/**
- * Calculate the CSS top and bottom position of the toast, to be used
- * as starting points for the animation keyframes.
- *
- * The default animations for both MD and iOS
- * use translateY, which calculates from the
- * top edge of the screen. This behavior impacts
- * how we compute the offset when a toast has
- * position='bottom' since we need to calculate from
- * the bottom edge of the screen instead.
- *
- * @param position The value of the toast's position prop.
- * @param positionAnchor The element the toast should be anchored to,
- * if applicable.
- * @param mode The toast component's mode (md, ios, etc).
- * @param toast A reference to the toast element itself.
- */
-function getAnimationPosition(position, positionAnchor, mode, toast) {
-    /**
-     * Start with a predefined offset from the edge the toast will be
-     * positioned relative to, whether on the screen or anchor element.
-     */
-    let offset;
-    if (mode === 'md') {
-        offset = position === 'top' ? 8 : -8;
-    }
-    else {
-        offset = position === 'top' ? 10 : -10;
-    }
-    /**
-     * If positionAnchor is defined, add in the distance from the target
-     * screen edge to the target anchor edge. For position="top", the
-     * bottom anchor edge is targeted. For position="bottom", the top
-     * anchor edge is targeted.
-     */
-    if (positionAnchor && win) {
-        warnIfAnchorIsHidden(positionAnchor, toast);
-        const box = positionAnchor.getBoundingClientRect();
-        if (position === 'top') {
-            offset += box.bottom;
-        }
-        else if (position === 'bottom') {
-            /**
-             * Just box.top is the distance from the top edge of the screen
-             * to the top edge of the anchor. We want to calculate from the
-             * bottom edge of the screen instead.
-             */
-            offset -= win.innerHeight - box.top;
-        }
-        /**
-         * We don't include safe area here because that should already be
-         * accounted for when checking the position of the anchor.
-         */
-        return {
-            top: `${offset}px`,
-            bottom: `${offset}px`,
-        };
-    }
-    else {
-        return {
-            top: `calc(${offset}px + var(--ion-safe-area-top, 0px))`,
-            bottom: `calc(${offset}px - var(--ion-safe-area-bottom, 0px))`,
-        };
-    }
-}
-/**
- * If the anchor element is hidden, getBoundingClientRect()
- * will return all 0s for it, which can cause unexpected
- * results in the position calculation when animating.
- */
-function warnIfAnchorIsHidden(positionAnchor, toast) {
-    if (positionAnchor.offsetParent === null) {
-        printIonWarning('The positionAnchor element for ion-toast was found in the DOM, but appears to be hidden. This may lead to unexpected positioning of the toast.', toast);
-    }
-}
-/**
- * Returns the top offset required to place
- * the toast in the middle of the screen.
- * Only needed when position="toast".
- * @param toastHeight - The height of the ion-toast element
- * @param wrapperHeight - The height of the .toast-wrapper element
- * inside the toast's shadow root.
- */
-const getOffsetForMiddlePosition = (toastHeight, wrapperHeight) => {
-    return Math.floor(toastHeight / 2 - wrapperHeight / 2);
-};
-
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-/**
- * iOS Toast Enter Animation
- */
-const iosEnterAnimation = (baseEl, opts) => {
-    const baseAnimation = createAnimation();
-    const wrapperAnimation = createAnimation();
-    const { position, top, bottom } = opts;
-    const root = getElementRoot(baseEl);
-    const wrapperEl = root.querySelector('.toast-wrapper');
-    wrapperAnimation.addElement(wrapperEl);
-    switch (position) {
-        case 'top':
-            wrapperAnimation.fromTo('transform', 'translateY(-100%)', `translateY(${top})`);
-            break;
-        case 'middle':
-            const topPosition = getOffsetForMiddlePosition(baseEl.clientHeight, wrapperEl.clientHeight);
-            wrapperEl.style.top = `${topPosition}px`;
-            wrapperAnimation.fromTo('opacity', 0.01, 1);
-            break;
-        default:
-            wrapperAnimation.fromTo('transform', 'translateY(100%)', `translateY(${bottom})`);
-            break;
-    }
-    return baseAnimation.easing('cubic-bezier(.155,1.105,.295,1.12)').duration(400).addAnimation(wrapperAnimation);
-};
-
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-/**
- * iOS Toast Leave Animation
- */
-const iosLeaveAnimation = (baseEl, opts) => {
-    const baseAnimation = createAnimation();
-    const wrapperAnimation = createAnimation();
-    const { position, top, bottom } = opts;
-    const root = getElementRoot(baseEl);
-    const wrapperEl = root.querySelector('.toast-wrapper');
-    wrapperAnimation.addElement(wrapperEl);
-    switch (position) {
-        case 'top':
-            wrapperAnimation.fromTo('transform', `translateY(${top})`, 'translateY(-100%)');
-            break;
-        case 'middle':
-            wrapperAnimation.fromTo('opacity', 0.99, 0);
-            break;
-        default:
-            wrapperAnimation.fromTo('transform', `translateY(${bottom})`, 'translateY(100%)');
-            break;
-    }
-    return baseAnimation.easing('cubic-bezier(.36,.66,.04,1)').duration(300).addAnimation(wrapperAnimation);
-};
-
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-/**
- * MD Toast Enter Animation
- */
-const mdEnterAnimation = (baseEl, opts) => {
-    const baseAnimation = createAnimation();
-    const wrapperAnimation = createAnimation();
-    const { position, top, bottom } = opts;
-    const root = getElementRoot(baseEl);
-    const wrapperEl = root.querySelector('.toast-wrapper');
-    wrapperAnimation.addElement(wrapperEl);
-    switch (position) {
-        case 'top':
-            wrapperEl.style.setProperty('transform', `translateY(${top})`);
-            wrapperAnimation.fromTo('opacity', 0.01, 1);
-            break;
-        case 'middle':
-            const topPosition = getOffsetForMiddlePosition(baseEl.clientHeight, wrapperEl.clientHeight);
-            wrapperEl.style.top = `${topPosition}px`;
-            wrapperAnimation.fromTo('opacity', 0.01, 1);
-            break;
-        default:
-            wrapperEl.style.setProperty('transform', `translateY(${bottom})`);
-            wrapperAnimation.fromTo('opacity', 0.01, 1);
-            break;
-    }
-    return baseAnimation.easing('cubic-bezier(.36,.66,.04,1)').duration(400).addAnimation(wrapperAnimation);
-};
-
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-/**
- * md Toast Leave Animation
- */
-const mdLeaveAnimation = (baseEl) => {
-    const baseAnimation = createAnimation();
-    const wrapperAnimation = createAnimation();
-    const root = getElementRoot(baseEl);
-    const wrapperEl = root.querySelector('.toast-wrapper');
-    wrapperAnimation.addElement(wrapperEl).fromTo('opacity', 0.99, 0);
-    return baseAnimation.easing('cubic-bezier(.36,.66,.04,1)').duration(300).addAnimation(wrapperAnimation);
-};
-
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-/**
- * Create a gesture that allows the Toast
- * to be swiped to dismiss.
- * @param el - The Toast element
- * @param toastPosition - The last computed position of the Toast. This is computed in the "present" method.
- * @param onDismiss - A callback to fire when the Toast was swiped to dismiss.
- */
-const createSwipeToDismissGesture = (el, toastPosition, onDismiss) => {
-    /**
-     * Users should swipe on the visible toast wrapper
-     * rather than on ion-toast which covers the entire screen.
-     * When testing the class instance the inner wrapper will not
-     * be defined. As a result, we use a placeholder element in those environments.
-     */
-    const wrapperEl = getElementRoot(el).querySelector('.toast-wrapper');
-    const hostElHeight = el.clientHeight;
-    const wrapperElBox = wrapperEl.getBoundingClientRect();
-    /**
-     * The maximum amount that
-     * the toast can be swiped. This should
-     * account for the wrapper element's height
-     * too so the toast can be swiped offscreen
-     * completely.
-     */
-    let MAX_SWIPE_DISTANCE = 0;
-    /**
-     * The step value at which a toast
-     * is eligible for dismissing via gesture.
-     */
-    const DISMISS_THRESHOLD = 0.5;
-    /**
-     * The middle position Toast starts 50% of the way
-     * through the animation, so we need to use this
-     * as the starting point for our step values.
-     */
-    const STEP_OFFSET = el.position === 'middle' ? 0.5 : 0;
-    /**
-     * When the Toast is at the top users will be
-     * swiping up. As a result, the delta values will be
-     * negative numbers which will result in negative steps
-     * and thresholds. As a result, we need to make those numbers
-     * positive.
-     */
-    const INVERSION_FACTOR = el.position === 'top' ? -1 : 1;
-    /**
-     * The top offset that places the
-     * toast in the middle of the screen.
-     * Only needed when position="middle".
-     */
-    const topPosition = getOffsetForMiddlePosition(hostElHeight, wrapperElBox.height);
-    const SWIPE_UP_DOWN_KEYFRAMES = [
-        { offset: 0, transform: `translateY(-${topPosition + wrapperElBox.height}px)` },
-        { offset: 0.5, transform: `translateY(0px)` },
-        { offset: 1, transform: `translateY(${topPosition + wrapperElBox.height}px)` },
-    ];
-    const swipeAnimation = createAnimation('toast-swipe-to-dismiss-animation')
-        .addElement(wrapperEl)
-        /**
-         * The specific value here does not actually
-         * matter. We just need this to be a positive
-         * value so the animation does not jump
-         * to the end when the user beings to drag.
-         */
-        .duration(100);
-    switch (el.position) {
-        case 'middle':
-            MAX_SWIPE_DISTANCE = hostElHeight + wrapperElBox.height;
-            swipeAnimation.keyframes(SWIPE_UP_DOWN_KEYFRAMES);
-            /**
-             * Toast can be swiped up or down but
-             * should start in the middle of the screen.
-             */
-            swipeAnimation.progressStart(true, 0.5);
-            break;
-        case 'top':
-            /**
-             * The bottom edge of the wrapper
-             * includes the distance between the top
-             * of the screen and the top of the wrapper
-             * as well as the wrapper height so the wrapper
-             * can be dragged fully offscreen.
-             */
-            MAX_SWIPE_DISTANCE = wrapperElBox.bottom;
-            swipeAnimation.keyframes([
-                { offset: 0, transform: `translateY(${toastPosition.top})` },
-                { offset: 1, transform: 'translateY(-100%)' },
-            ]);
-            swipeAnimation.progressStart(true, 0);
-            break;
-        case 'bottom':
-        default:
-            /**
-             * This computes the distance between the
-             * top of the wrapper and the bottom of the
-             * screen including the height of the wrapper
-             * element so it can be dragged fully offscreen.
-             */
-            MAX_SWIPE_DISTANCE = hostElHeight - wrapperElBox.top;
-            swipeAnimation.keyframes([
-                { offset: 0, transform: `translateY(${toastPosition.bottom})` },
-                { offset: 1, transform: 'translateY(100%)' },
-            ]);
-            swipeAnimation.progressStart(true, 0);
-            break;
-    }
-    const computeStep = (delta) => {
-        return (delta * INVERSION_FACTOR) / MAX_SWIPE_DISTANCE;
-    };
-    const onMove = (detail) => {
-        const step = STEP_OFFSET + computeStep(detail.deltaY);
-        swipeAnimation.progressStep(step);
-    };
-    const onEnd = (detail) => {
-        const velocity = detail.velocityY;
-        const threshold = ((detail.deltaY + velocity * 1000) / MAX_SWIPE_DISTANCE) * INVERSION_FACTOR;
-        /**
-         * Disable the gesture for the remainder of the animation.
-         * It will be re-enabled if the toast animates back to
-         * its initial presented position.
-         */
-        gesture.enable(false);
-        let shouldDismiss = true;
-        let playTo = 1;
-        let step = 0;
-        let remainingDistance = 0;
-        if (el.position === 'middle') {
-            /**
-             * A middle positioned Toast appears
-             * in the middle of the screen (at animation offset 0.5).
-             * As a result, the threshold will be calculated relative
-             * to this starting position. In other words at animation offset 0.5
-             * the threshold will be 0. We want the middle Toast to be eligible
-             * for dismiss when the user has swiped either half way up or down the
-             * screen. As a result, we divide DISMISS_THRESHOLD in half. We also
-             * consider when the threshold is a negative in the event the
-             * user drags up (since the deltaY will also be negative).
-             */
-            shouldDismiss = threshold >= DISMISS_THRESHOLD / 2 || threshold <= -DISMISS_THRESHOLD / 2;
-            /**
-             * Since we are replacing the keyframes
-             * below the animation always starts from
-             * the beginning of the new keyframes.
-             * Similarly, we are always playing to
-             * the end of the new keyframes.
-             */
-            playTo = 1;
-            step = 0;
-            /**
-             * The Toast should animate from wherever its
-             * current position is to the desired end state.
-             *
-             * To begin, we get the current position of the
-             * Toast for its starting state.
-             */
-            const wrapperElBox = wrapperEl.getBoundingClientRect();
-            const startOffset = wrapperElBox.top - topPosition;
-            const startPosition = `${startOffset}px`;
-            /**
-             * If the deltaY is negative then the user is swiping
-             * up, so the Toast should animate to the top of the screen.
-             * If the deltaY is positive then the user is swiping
-             * down, so the Toast should animate to the bottom of the screen.
-             * We also account for when the deltaY is 0, but realistically
-             * that should never happen because it means the user did not drag
-             * the toast.
-             */
-            const offsetFactor = detail.deltaY <= 0 ? -1 : 1;
-            const endOffset = (topPosition + wrapperElBox.height) * offsetFactor;
-            /**
-             * If the Toast should dismiss
-             * then we need to figure out which edge of
-             * the screen it should animate towards.
-             * By default, the Toast will come
-             * back to its default state in the
-             * middle of the screen.
-             */
-            const endPosition = shouldDismiss ? `${endOffset}px` : '0px';
-            const KEYFRAMES = [
-                { offset: 0, transform: `translateY(${startPosition})` },
-                { offset: 1, transform: `translateY(${endPosition})` },
-            ];
-            swipeAnimation.keyframes(KEYFRAMES);
-            /**
-             * Compute the remaining amount of pixels the
-             * toast needs to move to be fully dismissed.
-             */
-            remainingDistance = endOffset - startOffset;
-        }
-        else {
-            shouldDismiss = threshold >= DISMISS_THRESHOLD;
-            playTo = shouldDismiss ? 1 : 0;
-            step = computeStep(detail.deltaY);
-            /**
-             * Compute the remaining amount of pixels the
-             * toast needs to move to be fully dismissed.
-             */
-            const remainingStepAmount = shouldDismiss ? 1 - step : step;
-            remainingDistance = remainingStepAmount * MAX_SWIPE_DISTANCE;
-        }
-        /**
-         * The animation speed should depend on how quickly
-         * the user flicks the toast across the screen. However,
-         * it should be no slower than 200ms.
-         * We use Math.abs on the remainingDistance because that value
-         * can be negative when swiping up on a middle position toast.
-         */
-        const duration = Math.min(Math.abs(remainingDistance) / Math.abs(velocity), 200);
-        swipeAnimation
-            .onFinish(() => {
-            if (shouldDismiss) {
-                onDismiss();
-                swipeAnimation.destroy();
-            }
-            else {
-                if (el.position === 'middle') {
-                    /**
-                     * If the toast snapped back to
-                     * the middle of the screen we need
-                     * to reset the keyframes
-                     * so the toast can be swiped
-                     * up or down again.
-                     */
-                    swipeAnimation.keyframes(SWIPE_UP_DOWN_KEYFRAMES).progressStart(true, 0.5);
-                }
-                else {
-                    swipeAnimation.progressStart(true, 0);
-                }
-                /**
-                 * If the toast did not dismiss then
-                 * the user should be able to swipe again.
-                 */
-                gesture.enable(true);
-            }
-            /**
-             * This must be a one time callback
-             * otherwise a new callback will
-             * be added every time onEnd runs.
-             */
-        }, { oneTimeCallback: true })
-            .progressEnd(playTo, step, duration);
-    };
-    const gesture = createGesture({
-        el: wrapperEl,
-        gestureName: 'toast-swipe-to-dismiss',
-        gesturePriority: OVERLAY_GESTURE_PRIORITY,
-        /**
-         * Toast only supports vertical swipes.
-         * This needs to be updated if we later
-         * support horizontal swipes.
-         */
-        direction: 'y',
-        onMove,
-        onEnd,
-    });
-    return gesture;
-};
-
-const toastIosCss = ":host{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;--white-space:normal;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}@supports (inset-inline-start: 0){:host{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host{left:0}:host-context([dir=rtl]){left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)){left:unset;right:unset;right:0}}}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);box-shadow:var(--box-shadow)}@supports (inset-inline-start: 0){.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}}@supports not (inset-inline-start: 0){.toast-wrapper{left:var(--start);right:var(--end)}:host-context([dir=rtl]) .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}[dir=rtl] .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}@supports selector(:dir(rtl)){.toast-wrapper:dir(rtl){left:unset;right:unset;left:var(--end);right:var(--start)}}}.toast-wrapper.toast-top{transform:translate3d(0,  -100%,  0);top:0}.toast-wrapper.toast-bottom{transform:translate3d(0,  100%,  0);bottom:0}.toast-container{display:flex;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-layout-stacked .toast-container{flex-wrap:wrap}.toast-layout-baseline .toast-content{display:flex;flex:1;flex-direction:column;justify-content:center}.toast-icon{-webkit-margin-start:16px;margin-inline-start:16px}.toast-content{min-width:0}.toast-message{flex:1;white-space:var(--white-space)}.toast-button-group{display:flex}.toast-layout-stacked .toast-button-group{justify-content:end;width:100%}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon,.toast-button-icon{font-size:1.4em}.toast-button-inner{display:flex;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--background:var(--ion-color-step-50, #f2f2f2);--border-radius:14px;--button-color:var(--ion-color-primary, #3880ff);--color:var(--ion-color-step-850, #262626);--max-width:700px;--max-height:478px;--start:10px;--end:10px;font-size:clamp(14px, 0.875rem, 43.4px)}.toast-wrapper{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;z-index:10}@supports (backdrop-filter: blur(0)){:host(.toast-translucent) .toast-wrapper{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);backdrop-filter:saturate(180%) blur(20px)}:host(.ion-color.toast-translucent) .toast-wrapper{background:rgba(var(--ion-color-base-rgb), 0.8)}}.toast-wrapper.toast-middle{opacity:0.01}.toast-content{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:15px;padding-bottom:15px}.toast-header{margin-bottom:2px;font-weight:500}.toast-button{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:10px;padding-bottom:10px;min-height:44px;transition:background-color, opacity 100ms linear;border:0;background-color:transparent;font-family:var(--ion-font-family);font-size:clamp(17px, 1.0625rem, 21.998px);font-weight:500;overflow:hidden}.toast-button.ion-activated{opacity:0.4}@media (any-hover: hover){.toast-button:hover{opacity:0.6}}";
-const IonToastIosStyle0 = toastIosCss;
-
-const toastMdCss = ":host{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;--white-space:normal;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}@supports (inset-inline-start: 0){:host{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host{left:0}:host-context([dir=rtl]){left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)){left:unset;right:unset;right:0}}}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);box-shadow:var(--box-shadow)}@supports (inset-inline-start: 0){.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}}@supports not (inset-inline-start: 0){.toast-wrapper{left:var(--start);right:var(--end)}:host-context([dir=rtl]) .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}[dir=rtl] .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}@supports selector(:dir(rtl)){.toast-wrapper:dir(rtl){left:unset;right:unset;left:var(--end);right:var(--start)}}}.toast-wrapper.toast-top{transform:translate3d(0,  -100%,  0);top:0}.toast-wrapper.toast-bottom{transform:translate3d(0,  100%,  0);bottom:0}.toast-container{display:flex;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-layout-stacked .toast-container{flex-wrap:wrap}.toast-layout-baseline .toast-content{display:flex;flex:1;flex-direction:column;justify-content:center}.toast-icon{-webkit-margin-start:16px;margin-inline-start:16px}.toast-content{min-width:0}.toast-message{flex:1;white-space:var(--white-space)}.toast-button-group{display:flex}.toast-layout-stacked .toast-button-group{justify-content:end;width:100%}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon,.toast-button-icon{font-size:1.4em}.toast-button-inner{display:flex;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--background:var(--ion-color-step-800, #333333);--border-radius:4px;--box-shadow:0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);--button-color:var(--ion-color-primary, #3880ff);--color:var(--ion-color-step-50, #f2f2f2);--max-width:700px;--start:8px;--end:8px;font-size:0.875rem}.toast-wrapper{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;opacity:0.01;z-index:10}.toast-content{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:14px;padding-bottom:14px}.toast-header{margin-bottom:2px;font-weight:500;line-height:1.25rem}.toast-message{line-height:1.25rem}.toast-layout-baseline .toast-button-group-start{-webkit-margin-start:8px;margin-inline-start:8px}.toast-layout-stacked .toast-button-group-start{-webkit-margin-end:8px;margin-inline-end:8px;margin-top:8px}.toast-layout-baseline .toast-button-group-end{-webkit-margin-end:8px;margin-inline-end:8px}.toast-layout-stacked .toast-button-group-end{-webkit-margin-end:8px;margin-inline-end:8px;margin-bottom:8px}.toast-button{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:10px;padding-bottom:10px;position:relative;background-color:transparent;font-family:var(--ion-font-family);font-size:0.875rem;font-weight:500;letter-spacing:0.84px;text-transform:uppercase;overflow:hidden}.toast-button-cancel{color:var(--ion-color-step-100, #e6e6e6)}.toast-button-icon-only{border-radius:50%;-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px;padding-top:9px;padding-bottom:9px;width:36px;height:36px}@media (any-hover: hover){.toast-button:hover{background-color:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.08)}.toast-button-cancel:hover{background-color:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.08)}}";
-const IonToastMdStyle0 = toastMdCss;
-
-const Toast = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.didPresent = createEvent(this, "ionToastDidPresent", 7);
-        this.willPresent = createEvent(this, "ionToastWillPresent", 7);
-        this.willDismiss = createEvent(this, "ionToastWillDismiss", 7);
-        this.didDismiss = createEvent(this, "ionToastDidDismiss", 7);
-        this.didPresentShorthand = createEvent(this, "didPresent", 7);
-        this.willPresentShorthand = createEvent(this, "willPresent", 7);
-        this.willDismissShorthand = createEvent(this, "willDismiss", 7);
-        this.didDismissShorthand = createEvent(this, "didDismiss", 7);
-        this.delegateController = createDelegateController(this);
-        this.lockController = createLockController();
-        this.triggerController = createTriggerController();
-        this.customHTMLEnabled = config$1.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
-        this.presented = false;
-        this.dispatchCancelHandler = (ev) => {
-            const role = ev.detail.role;
-            if (isCancel(role)) {
-                const cancelButton = this.getButtons().find((b) => b.role === 'cancel');
-                this.callButtonHandler(cancelButton);
-            }
-        };
-        /**
-         * Create a new swipe gesture so Toast
-         * can be swiped to dismiss.
-         */
-        this.createSwipeGesture = (toastPosition) => {
-            const gesture = (this.gesture = createSwipeToDismissGesture(this.el, toastPosition, () => {
-                /**
-                 * If the gesture completed then
-                 * we should dismiss the toast.
-                 */
-                this.dismiss(undefined, GESTURE);
-            }));
-            gesture.enable(true);
-        };
-        /**
-         * Destroy an existing swipe gesture
-         * so Toast can no longer be swiped to dismiss.
-         */
-        this.destroySwipeGesture = () => {
-            const { gesture } = this;
-            if (gesture === undefined) {
-                return;
-            }
-            gesture.destroy();
-            this.gesture = undefined;
-        };
-        /**
-         * Returns `true` if swipeGesture
-         * is configured to a value that enables the swipe behavior.
-         * Returns `false` otherwise.
-         */
-        this.prefersSwipeGesture = () => {
-            const { swipeGesture } = this;
-            return swipeGesture === 'vertical';
-        };
-        this.revealContentToScreenReader = false;
-        this.overlayIndex = undefined;
-        this.delegate = undefined;
-        this.hasController = false;
-        this.color = undefined;
-        this.enterAnimation = undefined;
-        this.leaveAnimation = undefined;
-        this.cssClass = undefined;
-        this.duration = config$1.getNumber('toastDuration', 0);
-        this.header = undefined;
-        this.layout = 'baseline';
-        this.message = undefined;
-        this.keyboardClose = false;
-        this.position = 'bottom';
-        this.positionAnchor = undefined;
-        this.buttons = undefined;
-        this.translucent = false;
-        this.animated = true;
-        this.icon = undefined;
-        this.htmlAttributes = undefined;
-        this.swipeGesture = undefined;
-        this.isOpen = false;
-        this.trigger = undefined;
-    }
-    swipeGestureChanged() {
-        /**
-         * If the Toast is presented, then we need to destroy
-         * any actives gestures before a new gesture is potentially
-         * created below.
-         *
-         * If the Toast is dismissed, then no gesture should be available
-         * since the Toast is not visible. This case should never
-         * happen since the "dismiss" method handles destroying
-         * any active swipe gestures, but we keep this code
-         * around to handle the first case.
-         */
-        this.destroySwipeGesture();
-        /**
-         * A new swipe gesture should only be created
-         * if the Toast is presented. If the Toast is not
-         * yet presented then the "present" method will
-         * handle calling the swipe gesture setup function.
-         */
-        if (this.presented && this.prefersSwipeGesture()) {
-            /**
-             * If the Toast is presented then
-             * lastPresentedPosition is defined.
-             */
-            this.createSwipeGesture(this.lastPresentedPosition);
-        }
-    }
-    onIsOpenChange(newValue, oldValue) {
-        if (newValue === true && oldValue === false) {
-            this.present();
-        }
-        else if (newValue === false && oldValue === true) {
-            this.dismiss();
-        }
-    }
-    triggerChanged() {
-        const { trigger, el, triggerController } = this;
-        if (trigger) {
-            triggerController.addClickListener(el, trigger);
-        }
-    }
-    connectedCallback() {
-        prepareOverlay(this.el);
-        this.triggerChanged();
-    }
-    disconnectedCallback() {
-        this.triggerController.removeClickListener();
-    }
-    componentWillLoad() {
-        setOverlayId(this.el);
-    }
-    componentDidLoad() {
-        /**
-         * If toast was rendered with isOpen="true"
-         * then we should open toast immediately.
-         */
-        if (this.isOpen === true) {
-            raf(() => this.present());
-        }
-        /**
-         * When binding values in frameworks such as Angular
-         * it is possible for the value to be set after the Web Component
-         * initializes but before the value watcher is set up in Stencil.
-         * As a result, the watcher callback may not be fired.
-         * We work around this by manually calling the watcher
-         * callback when the component has loaded and the watcher
-         * is configured.
-         */
-        this.triggerChanged();
-    }
-    /**
-     * Present the toast overlay after it has been created.
-     */
-    async present() {
-        const unlock = await this.lockController.lock();
-        await this.delegateController.attachViewToDom();
-        const { el, position } = this;
-        const anchor = this.getAnchorElement();
-        const animationPosition = getAnimationPosition(position, anchor, getIonMode$1(this), el);
-        /**
-         * Cache the calculated position of the toast, so we can re-use it
-         * in the dismiss animation.
-         */
-        this.lastPresentedPosition = animationPosition;
-        await present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, {
-            position,
-            top: animationPosition.top,
-            bottom: animationPosition.bottom,
-        });
-        /**
-         * Content is revealed to screen readers after
-         * the transition to avoid jank since this
-         * state updates will cause a re-render.
-         */
-        this.revealContentToScreenReader = true;
-        if (this.duration > 0) {
-            this.durationTimeout = setTimeout(() => this.dismiss(undefined, 'timeout'), this.duration);
-        }
-        /**
-         * If the Toast has a swipe gesture then we can
-         * create the gesture so users can swipe the
-         * presented Toast.
-         */
-        if (this.prefersSwipeGesture()) {
-            this.createSwipeGesture(animationPosition);
-        }
-        unlock();
-    }
-    /**
-     * Dismiss the toast overlay after it has been presented.
-     *
-     * @param data Any data to emit in the dismiss events.
-     * @param role The role of the element that is dismissing the toast.
-     * This can be useful in a button handler for determining which button was
-     * clicked to dismiss the toast.
-     * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-     *
-     * This is a no-op if the overlay has not been presented yet. If you want
-     * to remove an overlay from the DOM that was never presented, use the
-     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
-     */
-    async dismiss(data, role) {
-        var _a, _b;
-        const unlock = await this.lockController.lock();
-        const { durationTimeout, position, lastPresentedPosition } = this;
-        if (durationTimeout) {
-            clearTimeout(durationTimeout);
-        }
-        const dismissed = await dismiss(this, data, role, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, 
-        /**
-         * Fetch the cached position that was calculated back in the present
-         * animation. We always want to animate the dismiss from the same
-         * position the present stopped at, so the animation looks continuous.
-         */
-        {
-            position,
-            top: (_a = lastPresentedPosition === null || lastPresentedPosition === void 0 ? void 0 : lastPresentedPosition.top) !== null && _a !== void 0 ? _a : '',
-            bottom: (_b = lastPresentedPosition === null || lastPresentedPosition === void 0 ? void 0 : lastPresentedPosition.bottom) !== null && _b !== void 0 ? _b : '',
-        });
-        if (dismissed) {
-            this.delegateController.removeViewFromDom();
-            this.revealContentToScreenReader = false;
-        }
-        this.lastPresentedPosition = undefined;
-        /**
-         * If the Toast has a swipe gesture then we can
-         * safely destroy it now that it is dismissed.
-         */
-        this.destroySwipeGesture();
-        unlock();
-        return dismissed;
-    }
-    /**
-     * Returns a promise that resolves when the toast did dismiss.
-     */
-    onDidDismiss() {
-        return eventMethod(this.el, 'ionToastDidDismiss');
-    }
-    /**
-     * Returns a promise that resolves when the toast will dismiss.
-     */
-    onWillDismiss() {
-        return eventMethod(this.el, 'ionToastWillDismiss');
-    }
-    getButtons() {
-        const buttons = this.buttons
-            ? this.buttons.map((b) => {
-                return typeof b === 'string' ? { text: b } : b;
-            })
-            : [];
-        return buttons;
-    }
-    /**
-     * Returns the element specified by the positionAnchor prop,
-     * or undefined if prop's value is an ID string and the element
-     * is not found in the DOM.
-     */
-    getAnchorElement() {
-        const { position, positionAnchor, el } = this;
-        /**
-         * If positionAnchor is undefined then
-         * no anchor should be used when presenting the toast.
-         */
-        if (positionAnchor === undefined) {
-            return;
-        }
-        if (position === 'middle' && positionAnchor !== undefined) {
-            printIonWarning('The positionAnchor property is ignored when using position="middle".', this.el);
-            return undefined;
-        }
-        if (typeof positionAnchor === 'string') {
-            /**
-             * If the anchor is defined as an ID, find the element.
-             * We do this on every present so the toast doesn't need
-             * to account for the surrounding DOM changing since the
-             * last time it was presented.
-             */
-            const foundEl = document.getElementById(positionAnchor);
-            if (foundEl === null) {
-                printIonWarning(`An anchor element with an ID of "${positionAnchor}" was not found in the DOM.`, el);
-                return undefined;
-            }
-            return foundEl;
-        }
-        if (positionAnchor instanceof HTMLElement) {
-            return positionAnchor;
-        }
-        printIonWarning('Invalid positionAnchor value:', positionAnchor, el);
-        return undefined;
-    }
-    async buttonClick(button) {
-        const role = button.role;
-        if (isCancel(role)) {
-            return this.dismiss(undefined, role);
-        }
-        const shouldDismiss = await this.callButtonHandler(button);
-        if (shouldDismiss) {
-            return this.dismiss(undefined, role);
-        }
-        return Promise.resolve();
-    }
-    async callButtonHandler(button) {
-        if (button === null || button === void 0 ? void 0 : button.handler) {
-            // a handler has been provided, execute it
-            // pass the handler the values from the inputs
-            try {
-                const rtn = await safeCall(button.handler);
-                if (rtn === false) {
-                    // if the return value of the handler is false then do not dismiss
-                    return false;
-                }
-            }
-            catch (e) {
-                console.error(e);
-            }
-        }
-        return true;
-    }
-    renderButtons(buttons, side) {
-        if (buttons.length === 0) {
-            return;
-        }
-        const mode = getIonMode$1(this);
-        const buttonGroupsClasses = {
-            'toast-button-group': true,
-            [`toast-button-group-${side}`]: true,
-        };
-        return (h("div", { class: buttonGroupsClasses }, buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", class: buttonClass(b), tabIndex: 0, onClick: () => this.buttonClick(b), part: buttonPart(b) }), h("div", { class: "toast-button-inner" }, b.icon && (h("ion-icon", { "aria-hidden": "true", icon: b.icon, slot: b.text === undefined ? 'icon-only' : undefined, class: "toast-button-icon" })), b.text), mode === 'md' && (h("ion-ripple-effect", { type: b.icon !== undefined && b.text === undefined ? 'unbounded' : 'bounded' })))))));
-    }
-    /**
-     * Render the `message` property.
-     * @param key - A key to give the element a stable identity. This is used to improve compatibility with screen readers.
-     * @param ariaHidden - If "true" then content will be hidden from screen readers.
-     */
-    renderToastMessage(key, ariaHidden = null) {
-        const { customHTMLEnabled, message } = this;
-        if (customHTMLEnabled) {
-            return (h("div", { key: key, "aria-hidden": ariaHidden, class: "toast-message", part: "message", innerHTML: sanitizeDOMString(message) }));
-        }
-        return (h("div", { key: key, "aria-hidden": ariaHidden, class: "toast-message", part: "message" }, message));
-    }
-    /**
-     * Render the `header` property.
-     * @param key - A key to give the element a stable identity. This is used to improve compatibility with screen readers.
-     * @param ariaHidden - If "true" then content will be hidden from screen readers.
-     */
-    renderHeader(key, ariaHidden = null) {
-        return (h("div", { key: key, class: "toast-header", "aria-hidden": ariaHidden, part: "header" }, this.header));
-    }
-    render() {
-        const { layout, el, revealContentToScreenReader, header, message } = this;
-        const allButtons = this.getButtons();
-        const startButtons = allButtons.filter((b) => b.side === 'start');
-        const endButtons = allButtons.filter((b) => b.side !== 'start');
-        const mode = getIonMode$1(this);
-        const wrapperClass = {
-            'toast-wrapper': true,
-            [`toast-${this.position}`]: true,
-            [`toast-layout-${layout}`]: true,
-        };
-        /**
-         * Stacked buttons are only meant to be
-         *  used with one type of button.
-         */
-        if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
-            printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
-        }
-        return (h(Host, Object.assign({ key: '23803334fb668f6ce7044d3a321cb84bc753bd16', tabindex: "-1" }, this.htmlAttributes, { style: {
-                zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '7cd7138ba079fccf97f318b91e9986491ab4214d', class: wrapperClass }, h("div", { key: '93b78fa64e24435adeb77a04c1d1d53d2f093864', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '9a3c71b164ebcfba2540acb7568beffa76b62f47', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: 'feb9268102d844f1314205f7440de7066cf0620e', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "swipeGesture": ["swipeGestureChanged"],
-        "isOpen": ["onIsOpenChange"],
-        "trigger": ["triggerChanged"]
-    }; }
-};
-const buttonClass = (button) => {
-    return Object.assign({ 'toast-button': true, 'toast-button-icon-only': button.icon !== undefined && button.text === undefined, [`toast-button-${button.role}`]: button.role !== undefined, 'ion-focusable': true, 'ion-activatable': true }, getClassMap(button.cssClass));
-};
-const buttonPart = (button) => {
-    return isCancel(button.role) ? 'button cancel' : 'button';
-};
-Toast.style = {
-    ios: IonToastIosStyle0,
-    md: IonToastMdStyle0
-};
-
-const posAddNewThingCss = ":host{font-family:var(--font-sans);display:block}button#new{cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;width:var(--size-10);height:var(--size-10);background-color:var(--pos-primary-color);color:var(--pos-primary-text-color);font-size:var(--scale-6);border-radius:var(--radius-xs)}button#new:hover,button#new:focus{outline:none;filter:brightness(110%);box-shadow:var(--shadow-sm)}pos-new-thing-form{margin:var(--scale-3)}";
-const PosAddNewThingStyle0 = posAddNewThingCss;
-
-const PosAddNewThing = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    openDialog() {
-        this.dialog.showModal();
-    }
-    render() {
-        return (h(Host, { key: '5ed3ba3982467778ed2b9b02090c230acb6b1762' }, h("button", { key: '96ff5dbd0ba4ca4d8c1d25045efa06fea062e9cf', id: "new", title: "Add a new thing", onClick: () => this.openDialog() }, h("ion-icon", { key: '201a19c8ecb39e0e913d3fb8cf1ebee06bc41df5', name: "add-circle-outline" })), h("pos-dialog", { key: '421da81e6faf52119fe600cc388663299eab67ec', ref: el => (this.dialog = el) }, h("span", { key: '454e6e05dc478e9c1b378cb3308f006fab4d8738', slot: "title" }, "Add a new thing"), h("pos-new-thing-form", { key: 'a469379848776a4c7e9f8e3f94da76ba048d7fab', slot: "content", referenceUri: this.referenceUri }))));
-    }
-};
-PosAddNewThing.style = PosAddNewThingStyle0;
-
-const storedSettings = localStorage.getItem('settings');
-const initialSettings = storedSettings
-    ? JSON.parse(storedSettings)
-    : {
-        offlineCache: false,
-    };
-const localSettings = createStore$1(initialSettings);
-persistChanges();
-syncChangesAcrossTabs();
-function persistChanges() {
-    localSettings.on('set', () => {
-        const snapshot = JSON.stringify(localSettings.state);
-        localStorage.setItem('settings', snapshot);
-    });
-}
-function syncChangesAcrossTabs() {
-    window.addEventListener('storage', event => {
-        if (event.key === 'settings' && event.newValue) {
-            const newSettings = JSON.parse(event.newValue);
-            localSettings.state.offlineCache = newSettings.offlineCache;
-        }
-    });
-}
-
-const instanceOfAny = (object, constructors) => constructors.some((c) => object instanceof c);
-
-let idbProxyableTypes;
-let cursorAdvanceMethods;
-// This is a function to prevent it throwing up in node environments.
-function getIdbProxyableTypes() {
-    return (idbProxyableTypes ||
-        (idbProxyableTypes = [
-            IDBDatabase,
-            IDBObjectStore,
-            IDBIndex,
-            IDBCursor,
-            IDBTransaction,
-        ]));
-}
-// This is a function to prevent it throwing up in node environments.
-function getCursorAdvanceMethods() {
-    return (cursorAdvanceMethods ||
-        (cursorAdvanceMethods = [
-            IDBCursor.prototype.advance,
-            IDBCursor.prototype.continue,
-            IDBCursor.prototype.continuePrimaryKey,
-        ]));
-}
-const transactionDoneMap = new WeakMap();
-const transformCache = new WeakMap();
-const reverseTransformCache = new WeakMap();
-function promisifyRequest(request) {
-    const promise = new Promise((resolve, reject) => {
-        const unlisten = () => {
-            request.removeEventListener('success', success);
-            request.removeEventListener('error', error);
-        };
-        const success = () => {
-            resolve(wrap(request.result));
-            unlisten();
-        };
-        const error = () => {
-            reject(request.error);
-            unlisten();
-        };
-        request.addEventListener('success', success);
-        request.addEventListener('error', error);
-    });
-    // This mapping exists in reverseTransformCache but doesn't exist in transformCache. This
-    // is because we create many promises from a single IDBRequest.
-    reverseTransformCache.set(promise, request);
-    return promise;
-}
-function cacheDonePromiseForTransaction(tx) {
-    // Early bail if we've already created a done promise for this transaction.
-    if (transactionDoneMap.has(tx))
-        return;
-    const done = new Promise((resolve, reject) => {
-        const unlisten = () => {
-            tx.removeEventListener('complete', complete);
-            tx.removeEventListener('error', error);
-            tx.removeEventListener('abort', error);
-        };
-        const complete = () => {
-            resolve();
-            unlisten();
-        };
-        const error = () => {
-            reject(tx.error || new DOMException('AbortError', 'AbortError'));
-            unlisten();
-        };
-        tx.addEventListener('complete', complete);
-        tx.addEventListener('error', error);
-        tx.addEventListener('abort', error);
-    });
-    // Cache it for later retrieval.
-    transactionDoneMap.set(tx, done);
-}
-let idbProxyTraps = {
-    get(target, prop, receiver) {
-        if (target instanceof IDBTransaction) {
-            // Special handling for transaction.done.
-            if (prop === 'done')
-                return transactionDoneMap.get(target);
-            // Make tx.store return the only store in the transaction, or undefined if there are many.
-            if (prop === 'store') {
-                return receiver.objectStoreNames[1]
-                    ? undefined
-                    : receiver.objectStore(receiver.objectStoreNames[0]);
-            }
-        }
-        // Else transform whatever we get back.
-        return wrap(target[prop]);
-    },
-    set(target, prop, value) {
-        target[prop] = value;
-        return true;
-    },
-    has(target, prop) {
-        if (target instanceof IDBTransaction &&
-            (prop === 'done' || prop === 'store')) {
-            return true;
-        }
-        return prop in target;
-    },
-};
-function replaceTraps(callback) {
-    idbProxyTraps = callback(idbProxyTraps);
-}
-function wrapFunction(func) {
-    // Due to expected object equality (which is enforced by the caching in `wrap`), we
-    // only create one new func per func.
-    // Cursor methods are special, as the behaviour is a little more different to standard IDB. In
-    // IDB, you advance the cursor and wait for a new 'success' on the IDBRequest that gave you the
-    // cursor. It's kinda like a promise that can resolve with many values. That doesn't make sense
-    // with real promises, so each advance methods returns a new promise for the cursor object, or
-    // undefined if the end of the cursor has been reached.
-    if (getCursorAdvanceMethods().includes(func)) {
-        return function (...args) {
-            // Calling the original function with the proxy as 'this' causes ILLEGAL INVOCATION, so we use
-            // the original object.
-            func.apply(unwrap(this), args);
-            return wrap(this.request);
-        };
-    }
-    return function (...args) {
-        // Calling the original function with the proxy as 'this' causes ILLEGAL INVOCATION, so we use
-        // the original object.
-        return wrap(func.apply(unwrap(this), args));
-    };
-}
-function transformCachableValue(value) {
-    if (typeof value === 'function')
-        return wrapFunction(value);
-    // This doesn't return, it just creates a 'done' promise for the transaction,
-    // which is later returned for transaction.done (see idbObjectHandler).
-    if (value instanceof IDBTransaction)
-        cacheDonePromiseForTransaction(value);
-    if (instanceOfAny(value, getIdbProxyableTypes()))
-        return new Proxy(value, idbProxyTraps);
-    // Return the same value back if we're not going to transform it.
-    return value;
-}
-function wrap(value) {
-    // We sometimes generate multiple promises from a single IDBRequest (eg when cursoring), because
-    // IDB is weird and a single IDBRequest can yield many responses, so these can't be cached.
-    if (value instanceof IDBRequest)
-        return promisifyRequest(value);
-    // If we've already transformed this value before, reuse the transformed value.
-    // This is faster, but it also provides object equality.
-    if (transformCache.has(value))
-        return transformCache.get(value);
-    const newValue = transformCachableValue(value);
-    // Not all types are transformed.
-    // These may be primitive types, so they can't be WeakMap keys.
-    if (newValue !== value) {
-        transformCache.set(value, newValue);
-        reverseTransformCache.set(newValue, value);
-    }
-    return newValue;
-}
-const unwrap = (value) => reverseTransformCache.get(value);
-
-/**
- * Open a database.
- *
- * @param name Name of the database.
- * @param version Schema version.
- * @param callbacks Additional callbacks.
- */
-function openDB(name, version, { blocked, upgrade, blocking, terminated } = {}) {
-    const request = indexedDB.open(name, version);
-    const openPromise = wrap(request);
-    if (upgrade) {
-        request.addEventListener('upgradeneeded', (event) => {
-            upgrade(wrap(request.result), event.oldVersion, event.newVersion, wrap(request.transaction), event);
-        });
-    }
-    if (blocked) {
-        request.addEventListener('blocked', (event) => blocked(
-        // Casting due to https://github.com/microsoft/TypeScript-DOM-lib-generator/pull/1405
-        event.oldVersion, event.newVersion, event));
-    }
-    openPromise
-        .then((db) => {
-        if (terminated)
-            db.addEventListener('close', () => terminated());
-        if (blocking) {
-            db.addEventListener('versionchange', (event) => blocking(event.oldVersion, event.newVersion, event));
-        }
-    })
-        .catch(() => { });
-    return openPromise;
-}
-
-const readMethods = ['get', 'getKey', 'getAll', 'getAllKeys', 'count'];
-const writeMethods = ['put', 'add', 'delete', 'clear'];
-const cachedMethods = new Map();
-function getMethod(target, prop) {
-    if (!(target instanceof IDBDatabase &&
-        !(prop in target) &&
-        typeof prop === 'string')) {
-        return;
-    }
-    if (cachedMethods.get(prop))
-        return cachedMethods.get(prop);
-    const targetFuncName = prop.replace(/FromIndex$/, '');
-    const useIndex = prop !== targetFuncName;
-    const isWrite = writeMethods.includes(targetFuncName);
-    if (
-    // Bail if the target doesn't exist on the target. Eg, getAll isn't in Edge.
-    !(targetFuncName in (useIndex ? IDBIndex : IDBObjectStore).prototype) ||
-        !(isWrite || readMethods.includes(targetFuncName))) {
-        return;
-    }
-    const method = async function (storeName, ...args) {
-        // isWrite ? 'readwrite' : undefined gzipps better, but fails in Edge :(
-        const tx = this.transaction(storeName, isWrite ? 'readwrite' : 'readonly');
-        let target = tx.store;
-        if (useIndex)
-            target = target.index(args.shift());
-        // Must reject if op rejects.
-        // If it's a write operation, must reject if tx.done rejects.
-        // Must reject with op rejection first.
-        // Must resolve with op value.
-        // Must handle both promises (no unhandled rejections)
-        return (await Promise.all([
-            target[targetFuncName](...args),
-            isWrite && tx.done,
-        ]))[0];
-    };
-    cachedMethods.set(prop, method);
-    return method;
-}
-replaceTraps((oldTraps) => ({
-    ...oldTraps,
-    get: (target, prop, receiver) => getMethod(target, prop) || oldTraps.get(target, prop, receiver),
-    has: (target, prop) => !!getMethod(target, prop) || oldTraps.has(target, prop),
-}));
-
-const advanceMethodProps = ['continue', 'continuePrimaryKey', 'advance'];
-const methodMap = {};
-const advanceResults = new WeakMap();
-const ittrProxiedCursorToOriginalProxy = new WeakMap();
-const cursorIteratorTraps = {
-    get(target, prop) {
-        if (!advanceMethodProps.includes(prop))
-            return target[prop];
-        let cachedFunc = methodMap[prop];
-        if (!cachedFunc) {
-            cachedFunc = methodMap[prop] = function (...args) {
-                advanceResults.set(this, ittrProxiedCursorToOriginalProxy.get(this)[prop](...args));
-            };
-        }
-        return cachedFunc;
-    },
-};
-async function* iterate(...args) {
-    // tslint:disable-next-line:no-this-assignment
-    let cursor = this;
-    if (!(cursor instanceof IDBCursor)) {
-        cursor = await cursor.openCursor(...args);
-    }
-    if (!cursor)
-        return;
-    cursor = cursor;
-    const proxiedCursor = new Proxy(cursor, cursorIteratorTraps);
-    ittrProxiedCursorToOriginalProxy.set(proxiedCursor, cursor);
-    // Map this double-proxy back to the original, so other cursor methods work.
-    reverseTransformCache.set(proxiedCursor, unwrap(cursor));
-    while (cursor) {
-        yield proxiedCursor;
-        // If one of the advancing methods was not called, call continue().
-        cursor = await (advanceResults.get(proxiedCursor) || cursor.continue());
-        advanceResults.delete(proxiedCursor);
-    }
-}
-function isIteratorProp(target, prop) {
-    return ((prop === Symbol.asyncIterator &&
-        instanceOfAny(target, [IDBIndex, IDBObjectStore, IDBCursor])) ||
-        (prop === 'iterate' && instanceOfAny(target, [IDBIndex, IDBObjectStore])));
-}
-replaceTraps((oldTraps) => ({
-    ...oldTraps,
-    get(target, prop, receiver) {
-        if (isIteratorProp(target, prop))
-            return iterate;
-        return oldTraps.get(target, prop, receiver);
-    },
-    has(target, prop) {
-        return isIteratorProp(target, prop) || oldTraps.has(target, prop);
-    },
-}));
-
-/**
- * An offline cache backed by the browsers IndexedDB storage
- */
-class IndexedDbOfflineCache {
-    constructor() {
-        this.dbPromise = openDB('OfflineCacheDB', 1, {
-            upgrade(db) {
-                if (!db.objectStoreNames.contains('documents')) {
-                    const store = db.createObjectStore('documents', { keyPath: 'url' });
-                    store.createIndex('url-revision', ['url', 'revision']);
-                }
-            },
-        });
-    }
-    async clear() {
-        const db = await this.dbPromise;
-        return db.clear('documents');
-    }
-    async get(url) {
-        const db = await this.dbPromise;
-        return await db.get('documents', url);
-    }
-    async put(document) {
-        const db = await this.dbPromise;
-        const existing = await db.getFromIndex('documents', 'url-revision', [document.url, document.revision]);
-        if (existing) {
-            return; // No need to update if the revision is the same
-        }
-        await db.put('documents', document);
-    }
-}
-
-class NavigatorOnlineStatus {
-    isOnline() {
-        return navigator.onLine;
-    }
-}
-
-const createPodOS = (settings) => {
-    return new PodOS({
-        offlineCache: settings.offlineCache ? new IndexedDbOfflineCache() : new NoOfflineCache(),
-        onlineStatus: new NavigatorOnlineStatus(),
-    });
-};
-
-function isFunction(value) {
-    return typeof value === 'function';
-}
-
-function createErrorClass(createImpl) {
-    const _super = (instance) => {
-        Error.call(instance);
-        instance.stack = new Error().stack;
-    };
-    const ctorFunc = createImpl(_super);
-    ctorFunc.prototype = Object.create(Error.prototype);
-    ctorFunc.prototype.constructor = ctorFunc;
-    return ctorFunc;
-}
-
-const UnsubscriptionError = createErrorClass((_super) => function UnsubscriptionErrorImpl(errors) {
-    _super(this);
-    this.message = errors
-        ? `${errors.length} errors occurred during unsubscription:
-${errors.map((err, i) => `${i + 1}) ${err.toString()}`).join('\n  ')}`
-        : '';
-    this.name = 'UnsubscriptionError';
-    this.errors = errors;
-});
-
-function arrRemove(arr, item) {
-    if (arr) {
-        const index = arr.indexOf(item);
-        0 <= index && arr.splice(index, 1);
-    }
-}
-
-class Subscription {
-    constructor(initialTeardown) {
-        this.initialTeardown = initialTeardown;
-        this.closed = false;
-        this._parentage = null;
-        this._finalizers = null;
-    }
-    unsubscribe() {
-        let errors;
-        if (!this.closed) {
-            this.closed = true;
-            const { _parentage } = this;
-            if (_parentage) {
-                this._parentage = null;
-                if (Array.isArray(_parentage)) {
-                    for (const parent of _parentage) {
-                        parent.remove(this);
-                    }
-                }
-                else {
-                    _parentage.remove(this);
-                }
-            }
-            const { initialTeardown: initialFinalizer } = this;
-            if (isFunction(initialFinalizer)) {
-                try {
-                    initialFinalizer();
-                }
-                catch (e) {
-                    errors = e instanceof UnsubscriptionError ? e.errors : [e];
-                }
-            }
-            const { _finalizers } = this;
-            if (_finalizers) {
-                this._finalizers = null;
-                for (const finalizer of _finalizers) {
-                    try {
-                        execFinalizer(finalizer);
-                    }
-                    catch (err) {
-                        errors = errors !== null && errors !== void 0 ? errors : [];
-                        if (err instanceof UnsubscriptionError) {
-                            errors = [...errors, ...err.errors];
-                        }
-                        else {
-                            errors.push(err);
-                        }
-                    }
-                }
-            }
-            if (errors) {
-                throw new UnsubscriptionError(errors);
-            }
-        }
-    }
-    add(teardown) {
-        var _a;
-        if (teardown && teardown !== this) {
-            if (this.closed) {
-                execFinalizer(teardown);
-            }
-            else {
-                if (teardown instanceof Subscription) {
-                    if (teardown.closed || teardown._hasParent(this)) {
-                        return;
-                    }
-                    teardown._addParent(this);
-                }
-                (this._finalizers = (_a = this._finalizers) !== null && _a !== void 0 ? _a : []).push(teardown);
-            }
-        }
-    }
-    _hasParent(parent) {
-        const { _parentage } = this;
-        return _parentage === parent || (Array.isArray(_parentage) && _parentage.includes(parent));
-    }
-    _addParent(parent) {
-        const { _parentage } = this;
-        this._parentage = Array.isArray(_parentage) ? (_parentage.push(parent), _parentage) : _parentage ? [_parentage, parent] : parent;
-    }
-    _removeParent(parent) {
-        const { _parentage } = this;
-        if (_parentage === parent) {
-            this._parentage = null;
-        }
-        else if (Array.isArray(_parentage)) {
-            arrRemove(_parentage, parent);
-        }
-    }
-    remove(teardown) {
-        const { _finalizers } = this;
-        _finalizers && arrRemove(_finalizers, teardown);
-        if (teardown instanceof Subscription) {
-            teardown._removeParent(this);
-        }
-    }
-}
-Subscription.EMPTY = (() => {
-    const empty = new Subscription();
-    empty.closed = true;
-    return empty;
-})();
-const EMPTY_SUBSCRIPTION = Subscription.EMPTY;
-function isSubscription(value) {
-    return (value instanceof Subscription ||
-        (value && 'closed' in value && isFunction(value.remove) && isFunction(value.add) && isFunction(value.unsubscribe)));
-}
-function execFinalizer(finalizer) {
-    if (isFunction(finalizer)) {
-        finalizer();
-    }
-    else {
-        finalizer.unsubscribe();
-    }
-}
-
-const config = {
-    onUnhandledError: null,
-    onStoppedNotification: null,
-    Promise: undefined,
-    useDeprecatedSynchronousErrorHandling: false,
-    useDeprecatedNextContext: false,
-};
-
-const timeoutProvider = {
-    setTimeout(handler, timeout, ...args) {
-        const { delegate } = timeoutProvider;
-        if (delegate === null || delegate === void 0 ? void 0 : delegate.setTimeout) {
-            return delegate.setTimeout(handler, timeout, ...args);
-        }
-        return setTimeout(handler, timeout, ...args);
-    },
-    clearTimeout(handle) {
-        const { delegate } = timeoutProvider;
-        return ((delegate === null || delegate === void 0 ? void 0 : delegate.clearTimeout) || clearTimeout)(handle);
-    },
-    delegate: undefined,
-};
-
-function reportUnhandledError(err) {
-    timeoutProvider.setTimeout(() => {
-        const { onUnhandledError } = config;
-        if (onUnhandledError) {
-            onUnhandledError(err);
-        }
-        else {
-            throw err;
-        }
-    });
-}
-
-function noop() { }
-
-const COMPLETE_NOTIFICATION = (() => createNotification('C', undefined, undefined))();
-function errorNotification(error) {
-    return createNotification('E', undefined, error);
-}
-function nextNotification(value) {
-    return createNotification('N', value, undefined);
-}
-function createNotification(kind, value, error) {
-    return {
-        kind,
-        value,
-        error,
-    };
-}
-
-let context = null;
-function errorContext(cb) {
-    if (config.useDeprecatedSynchronousErrorHandling) {
-        const isRoot = !context;
-        if (isRoot) {
-            context = { errorThrown: false, error: null };
-        }
-        cb();
-        if (isRoot) {
-            const { errorThrown, error } = context;
-            context = null;
-            if (errorThrown) {
-                throw error;
-            }
-        }
-    }
-    else {
-        cb();
-    }
-}
-
-class Subscriber extends Subscription {
-    constructor(destination) {
-        super();
-        this.isStopped = false;
-        if (destination) {
-            this.destination = destination;
-            if (isSubscription(destination)) {
-                destination.add(this);
-            }
-        }
-        else {
-            this.destination = EMPTY_OBSERVER;
-        }
-    }
-    static create(next, error, complete) {
-        return new SafeSubscriber(next, error, complete);
-    }
-    next(value) {
-        if (this.isStopped) {
-            handleStoppedNotification(nextNotification(value), this);
-        }
-        else {
-            this._next(value);
-        }
-    }
-    error(err) {
-        if (this.isStopped) {
-            handleStoppedNotification(errorNotification(err), this);
-        }
-        else {
-            this.isStopped = true;
-            this._error(err);
-        }
-    }
-    complete() {
-        if (this.isStopped) {
-            handleStoppedNotification(COMPLETE_NOTIFICATION, this);
-        }
-        else {
-            this.isStopped = true;
-            this._complete();
-        }
-    }
-    unsubscribe() {
-        if (!this.closed) {
-            this.isStopped = true;
-            super.unsubscribe();
-            this.destination = null;
-        }
-    }
-    _next(value) {
-        this.destination.next(value);
-    }
-    _error(err) {
-        try {
-            this.destination.error(err);
-        }
-        finally {
-            this.unsubscribe();
-        }
-    }
-    _complete() {
-        try {
-            this.destination.complete();
-        }
-        finally {
-            this.unsubscribe();
-        }
-    }
-}
-const _bind = Function.prototype.bind;
-function bind(fn, thisArg) {
-    return _bind.call(fn, thisArg);
-}
-class ConsumerObserver {
-    constructor(partialObserver) {
-        this.partialObserver = partialObserver;
-    }
-    next(value) {
-        const { partialObserver } = this;
-        if (partialObserver.next) {
-            try {
-                partialObserver.next(value);
-            }
-            catch (error) {
-                handleUnhandledError(error);
-            }
-        }
-    }
-    error(err) {
-        const { partialObserver } = this;
-        if (partialObserver.error) {
-            try {
-                partialObserver.error(err);
-            }
-            catch (error) {
-                handleUnhandledError(error);
-            }
-        }
-        else {
-            handleUnhandledError(err);
-        }
-    }
-    complete() {
-        const { partialObserver } = this;
-        if (partialObserver.complete) {
-            try {
-                partialObserver.complete();
-            }
-            catch (error) {
-                handleUnhandledError(error);
-            }
-        }
-    }
-}
-class SafeSubscriber extends Subscriber {
-    constructor(observerOrNext, error, complete) {
-        super();
-        let partialObserver;
-        if (isFunction(observerOrNext) || !observerOrNext) {
-            partialObserver = {
-                next: (observerOrNext !== null && observerOrNext !== void 0 ? observerOrNext : undefined),
-                error: error !== null && error !== void 0 ? error : undefined,
-                complete: complete !== null && complete !== void 0 ? complete : undefined,
-            };
-        }
-        else {
-            let context;
-            if (this && config.useDeprecatedNextContext) {
-                context = Object.create(observerOrNext);
-                context.unsubscribe = () => this.unsubscribe();
-                partialObserver = {
-                    next: observerOrNext.next && bind(observerOrNext.next, context),
-                    error: observerOrNext.error && bind(observerOrNext.error, context),
-                    complete: observerOrNext.complete && bind(observerOrNext.complete, context),
-                };
-            }
-            else {
-                partialObserver = observerOrNext;
-            }
-        }
-        this.destination = new ConsumerObserver(partialObserver);
-    }
-}
-function handleUnhandledError(error) {
-    {
-        reportUnhandledError(error);
-    }
-}
-function defaultErrorHandler(err) {
-    throw err;
-}
-function handleStoppedNotification(notification, subscriber) {
-    const { onStoppedNotification } = config;
-    onStoppedNotification && timeoutProvider.setTimeout(() => onStoppedNotification(notification, subscriber));
-}
-const EMPTY_OBSERVER = {
-    closed: true,
-    next: noop,
-    error: defaultErrorHandler,
-    complete: noop,
-};
-
-const observable = (() => (typeof Symbol === 'function' && Symbol.observable) || '@@observable')();
-
-function identity(x) {
-    return x;
-}
-
-function pipeFromArray(fns) {
-    if (fns.length === 0) {
-        return identity;
-    }
-    if (fns.length === 1) {
-        return fns[0];
-    }
-    return function piped(input) {
-        return fns.reduce((prev, fn) => fn(prev), input);
-    };
-}
-
-class Observable {
-    constructor(subscribe) {
-        if (subscribe) {
-            this._subscribe = subscribe;
-        }
-    }
-    lift(operator) {
-        const observable = new Observable();
-        observable.source = this;
-        observable.operator = operator;
-        return observable;
-    }
-    subscribe(observerOrNext, error, complete) {
-        const subscriber = isSubscriber(observerOrNext) ? observerOrNext : new SafeSubscriber(observerOrNext, error, complete);
-        errorContext(() => {
-            const { operator, source } = this;
-            subscriber.add(operator
-                ?
-                    operator.call(subscriber, source)
-                : source
-                    ?
-                        this._subscribe(subscriber)
-                    :
-                        this._trySubscribe(subscriber));
-        });
-        return subscriber;
-    }
-    _trySubscribe(sink) {
-        try {
-            return this._subscribe(sink);
-        }
-        catch (err) {
-            sink.error(err);
-        }
-    }
-    forEach(next, promiseCtor) {
-        promiseCtor = getPromiseCtor(promiseCtor);
-        return new promiseCtor((resolve, reject) => {
-            const subscriber = new SafeSubscriber({
-                next: (value) => {
-                    try {
-                        next(value);
-                    }
-                    catch (err) {
-                        reject(err);
-                        subscriber.unsubscribe();
-                    }
-                },
-                error: reject,
-                complete: resolve,
-            });
-            this.subscribe(subscriber);
-        });
-    }
-    _subscribe(subscriber) {
-        var _a;
-        return (_a = this.source) === null || _a === void 0 ? void 0 : _a.subscribe(subscriber);
-    }
-    [observable]() {
-        return this;
-    }
-    pipe(...operations) {
-        return pipeFromArray(operations)(this);
-    }
-    toPromise(promiseCtor) {
-        promiseCtor = getPromiseCtor(promiseCtor);
-        return new promiseCtor((resolve, reject) => {
-            let value;
-            this.subscribe((x) => (value = x), (err) => reject(err), () => resolve(value));
-        });
-    }
-}
-Observable.create = (subscribe) => {
-    return new Observable(subscribe);
-};
-function getPromiseCtor(promiseCtor) {
-    var _a;
-    return (_a = promiseCtor !== null && promiseCtor !== void 0 ? promiseCtor : config.Promise) !== null && _a !== void 0 ? _a : Promise;
-}
-function isObserver(value) {
-    return value && isFunction(value.next) && isFunction(value.error) && isFunction(value.complete);
-}
-function isSubscriber(value) {
-    return (value && value instanceof Subscriber) || (isObserver(value) && isSubscription(value));
-}
-
-function hasLift(source) {
-    return isFunction(source === null || source === void 0 ? void 0 : source.lift);
-}
-function operate(init) {
-    return (source) => {
-        if (hasLift(source)) {
-            return source.lift(function (liftedSource) {
-                try {
-                    return init(liftedSource, this);
-                }
-                catch (err) {
-                    this.error(err);
-                }
-            });
-        }
-        throw new TypeError('Unable to lift unknown Observable type');
-    };
-}
-
-function createOperatorSubscriber(destination, onNext, onComplete, onError, onFinalize) {
-    return new OperatorSubscriber(destination, onNext, onComplete, onError, onFinalize);
-}
-class OperatorSubscriber extends Subscriber {
-    constructor(destination, onNext, onComplete, onError, onFinalize, shouldUnsubscribe) {
-        super(destination);
-        this.onFinalize = onFinalize;
-        this.shouldUnsubscribe = shouldUnsubscribe;
-        this._next = onNext
-            ? function (value) {
-                try {
-                    onNext(value);
-                }
-                catch (err) {
-                    destination.error(err);
-                }
-            }
-            : super._next;
-        this._error = onError
-            ? function (err) {
-                try {
-                    onError(err);
-                }
-                catch (err) {
-                    destination.error(err);
-                }
-                finally {
-                    this.unsubscribe();
-                }
-            }
-            : super._error;
-        this._complete = onComplete
-            ? function () {
-                try {
-                    onComplete();
-                }
-                catch (err) {
-                    destination.error(err);
-                }
-                finally {
-                    this.unsubscribe();
-                }
-            }
-            : super._complete;
-    }
-    unsubscribe() {
-        var _a;
-        if (!this.shouldUnsubscribe || this.shouldUnsubscribe()) {
-            const { closed } = this;
-            super.unsubscribe();
-            !closed && ((_a = this.onFinalize) === null || _a === void 0 ? void 0 : _a.call(this));
-        }
-    }
-}
-
-const ObjectUnsubscribedError = createErrorClass((_super) => function ObjectUnsubscribedErrorImpl() {
-    _super(this);
-    this.name = 'ObjectUnsubscribedError';
-    this.message = 'object unsubscribed';
-});
-
-class Subject extends Observable {
-    constructor() {
-        super();
-        this.closed = false;
-        this.currentObservers = null;
-        this.observers = [];
-        this.isStopped = false;
-        this.hasError = false;
-        this.thrownError = null;
-    }
-    lift(operator) {
-        const subject = new AnonymousSubject(this, this);
-        subject.operator = operator;
-        return subject;
-    }
-    _throwIfClosed() {
-        if (this.closed) {
-            throw new ObjectUnsubscribedError();
-        }
-    }
-    next(value) {
-        errorContext(() => {
-            this._throwIfClosed();
-            if (!this.isStopped) {
-                if (!this.currentObservers) {
-                    this.currentObservers = Array.from(this.observers);
-                }
-                for (const observer of this.currentObservers) {
-                    observer.next(value);
-                }
-            }
-        });
-    }
-    error(err) {
-        errorContext(() => {
-            this._throwIfClosed();
-            if (!this.isStopped) {
-                this.hasError = this.isStopped = true;
-                this.thrownError = err;
-                const { observers } = this;
-                while (observers.length) {
-                    observers.shift().error(err);
-                }
-            }
-        });
-    }
-    complete() {
-        errorContext(() => {
-            this._throwIfClosed();
-            if (!this.isStopped) {
-                this.isStopped = true;
-                const { observers } = this;
-                while (observers.length) {
-                    observers.shift().complete();
-                }
-            }
-        });
-    }
-    unsubscribe() {
-        this.isStopped = this.closed = true;
-        this.observers = this.currentObservers = null;
-    }
-    get observed() {
-        var _a;
-        return ((_a = this.observers) === null || _a === void 0 ? void 0 : _a.length) > 0;
-    }
-    _trySubscribe(subscriber) {
-        this._throwIfClosed();
-        return super._trySubscribe(subscriber);
-    }
-    _subscribe(subscriber) {
-        this._throwIfClosed();
-        this._checkFinalizedStatuses(subscriber);
-        return this._innerSubscribe(subscriber);
-    }
-    _innerSubscribe(subscriber) {
-        const { hasError, isStopped, observers } = this;
-        if (hasError || isStopped) {
-            return EMPTY_SUBSCRIPTION;
-        }
-        this.currentObservers = null;
-        observers.push(subscriber);
-        return new Subscription(() => {
-            this.currentObservers = null;
-            arrRemove(observers, subscriber);
-        });
-    }
-    _checkFinalizedStatuses(subscriber) {
-        const { hasError, thrownError, isStopped } = this;
-        if (hasError) {
-            subscriber.error(thrownError);
-        }
-        else if (isStopped) {
-            subscriber.complete();
-        }
-    }
-    asObservable() {
-        const observable = new Observable();
-        observable.source = this;
-        return observable;
-    }
-}
-Subject.create = (destination, source) => {
-    return new AnonymousSubject(destination, source);
-};
-class AnonymousSubject extends Subject {
-    constructor(destination, source) {
-        super();
-        this.destination = destination;
-        this.source = source;
-    }
-    next(value) {
-        var _a, _b;
-        (_b = (_a = this.destination) === null || _a === void 0 ? void 0 : _a.next) === null || _b === void 0 ? void 0 : _b.call(_a, value);
-    }
-    error(err) {
-        var _a, _b;
-        (_b = (_a = this.destination) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.call(_a, err);
-    }
-    complete() {
-        var _a, _b;
-        (_b = (_a = this.destination) === null || _a === void 0 ? void 0 : _a.complete) === null || _b === void 0 ? void 0 : _b.call(_a);
-    }
-    _subscribe(subscriber) {
-        var _a, _b;
-        return (_b = (_a = this.source) === null || _a === void 0 ? void 0 : _a.subscribe(subscriber)) !== null && _b !== void 0 ? _b : EMPTY_SUBSCRIPTION;
-    }
-}
-
-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);
-
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-function __values(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-}
-
-function __await(v) {
-    return this instanceof __await ? (this.v = v, this) : new __await(v);
-}
-
-function __asyncGenerator(thisArg, _arguments, generator) {
-    if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
-    var g = generator.apply(thisArg, _arguments || []), i, q = [];
-    return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-    function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
-    function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
-    function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
-    function fulfill(value) { resume("next", value); }
-    function reject(value) { resume("throw", value); }
-    function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
-}
-
-function __asyncValues(o) {
-    if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
-    var m = o[Symbol.asyncIterator], i;
-    return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-const isArrayLike = ((x) => x && typeof x.length === 'number' && typeof x !== 'function');
-
-function isPromise(value) {
-    return isFunction(value === null || value === void 0 ? void 0 : value.then);
-}
-
-function isInteropObservable(input) {
-    return isFunction(input[observable]);
-}
-
-function isAsyncIterable(obj) {
-    return Symbol.asyncIterator && isFunction(obj === null || obj === void 0 ? void 0 : obj[Symbol.asyncIterator]);
-}
-
-function createInvalidObservableTypeError(input) {
-    return new TypeError(`You provided ${input !== null && typeof input === 'object' ? 'an invalid object' : `'${input}'`} where a stream was expected. You can provide an Observable, Promise, ReadableStream, Array, AsyncIterable, or Iterable.`);
-}
-
-function getSymbolIterator() {
-    if (typeof Symbol !== 'function' || !Symbol.iterator) {
-        return '@@iterator';
-    }
-    return Symbol.iterator;
-}
-const iterator = getSymbolIterator();
-
-function isIterable(input) {
-    return isFunction(input === null || input === void 0 ? void 0 : input[iterator]);
-}
-
-function readableStreamLikeToAsyncGenerator(readableStream) {
-    return __asyncGenerator(this, arguments, function* readableStreamLikeToAsyncGenerator_1() {
-        const reader = readableStream.getReader();
-        try {
-            while (true) {
-                const { value, done } = yield __await(reader.read());
-                if (done) {
-                    return yield __await(void 0);
-                }
-                yield yield __await(value);
-            }
-        }
-        finally {
-            reader.releaseLock();
-        }
-    });
-}
-function isReadableStreamLike(obj) {
-    return isFunction(obj === null || obj === void 0 ? void 0 : obj.getReader);
-}
-
-function innerFrom(input) {
-    if (input instanceof Observable) {
-        return input;
-    }
-    if (input != null) {
-        if (isInteropObservable(input)) {
-            return fromInteropObservable(input);
-        }
-        if (isArrayLike(input)) {
-            return fromArrayLike(input);
-        }
-        if (isPromise(input)) {
-            return fromPromise(input);
-        }
-        if (isAsyncIterable(input)) {
-            return fromAsyncIterable(input);
-        }
-        if (isIterable(input)) {
-            return fromIterable(input);
-        }
-        if (isReadableStreamLike(input)) {
-            return fromReadableStreamLike(input);
-        }
-    }
-    throw createInvalidObservableTypeError(input);
-}
-function fromInteropObservable(obj) {
-    return new Observable((subscriber) => {
-        const obs = obj[observable]();
-        if (isFunction(obs.subscribe)) {
-            return obs.subscribe(subscriber);
-        }
-        throw new TypeError('Provided object does not correctly implement Symbol.observable');
-    });
-}
-function fromArrayLike(array) {
-    return new Observable((subscriber) => {
-        for (let i = 0; i < array.length && !subscriber.closed; i++) {
-            subscriber.next(array[i]);
-        }
-        subscriber.complete();
-    });
-}
-function fromPromise(promise) {
-    return new Observable((subscriber) => {
-        promise
-            .then((value) => {
-            if (!subscriber.closed) {
-                subscriber.next(value);
-                subscriber.complete();
-            }
-        }, (err) => subscriber.error(err))
-            .then(null, reportUnhandledError);
-    });
-}
-function fromIterable(iterable) {
-    return new Observable((subscriber) => {
-        for (const value of iterable) {
-            subscriber.next(value);
-            if (subscriber.closed) {
-                return;
-            }
-        }
-        subscriber.complete();
-    });
-}
-function fromAsyncIterable(asyncIterable) {
-    return new Observable((subscriber) => {
-        process(asyncIterable, subscriber).catch((err) => subscriber.error(err));
-    });
-}
-function fromReadableStreamLike(readableStream) {
-    return fromAsyncIterable(readableStreamLikeToAsyncGenerator(readableStream));
-}
-function process(asyncIterable, subscriber) {
-    var asyncIterable_1, asyncIterable_1_1;
-    var e_1, _a;
-    return __awaiter(this, void 0, void 0, function* () {
-        try {
-            for (asyncIterable_1 = __asyncValues(asyncIterable); asyncIterable_1_1 = yield asyncIterable_1.next(), !asyncIterable_1_1.done;) {
-                const value = asyncIterable_1_1.value;
-                subscriber.next(value);
-                if (subscriber.closed) {
-                    return;
-                }
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (asyncIterable_1_1 && !asyncIterable_1_1.done && (_a = asyncIterable_1.return)) yield _a.call(asyncIterable_1);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
-        subscriber.complete();
-    });
-}
-
-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;
-        }));
-    });
-}
-
-function takeUntil(notifier) {
-    return operate((source, subscriber) => {
-        innerFrom(notifier).subscribe(createOperatorSubscriber(subscriber, () => subscriber.complete(), noop));
-        !subscriber.closed && source.subscribe(subscriber);
-    });
-}
-
-const PosApp = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.sessionRestoredEmitter = createEvent(this, "pod-os:session-restored", 7);
-        this.restorePreviousSession = false;
-        this.disconnected$ = new Subject();
-    }
-    componentWillLoad() {
-        this.unsubscribeSettings = localSettings.on('set', () => {
-            this.os = createPodOS(localSettings.state);
-        });
-        this.os = createPodOS(localSettings.state);
-        this.os.onSessionRestore(url => {
-            this.sessionRestoredEmitter.emit({ url });
-        });
-        this.os.handleIncomingRedirect(this.restorePreviousSession);
-        this.os
-            .observeSession()
-            .pipe(takeUntil(this.disconnected$))
-            .subscribe(async (sessionInfo) => {
-            store.state.webId = sessionInfo.webId;
-            if (sessionInfo.isLoggedIn) {
-                const profile = await this.os.fetchProfile(sessionInfo.webId);
-                store.state.profile = profile;
-            }
-            store.state.isLoggedIn = sessionInfo.isLoggedIn;
-        });
-    }
-    disconnectedCallback() {
-        this.unsubscribeSettings();
-        this.disconnected$.next();
-        this.disconnected$.unsubscribe();
-    }
-    async initializeOs(event) {
-        event.stopPropagation();
-        event.detail(this.os);
-    }
-    async loadModule(event) {
-        event.stopPropagation();
-        if (event.detail.module === 'contacts') {
-            const module = await this.os.loadContactsModule();
-            event.detail.receiver(module);
-        }
-        else {
-            throw Error(`Unknown module "${event.detail.module}"`);
-        }
-    }
-    render() {
-        return h("slot", { key: '402887f3383b6053da157df211c28977720db8e2' });
-    }
-};
-
-const posAppBrowserCss = "pos-router {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\npos-navigation {\n  max-width: var(--width-lg);\n  margin: 0;\n  min-width: var(--size-32);\n  flex-shrink: 1; /* Ensure navigation can shrink */\n}\n\npos-add-new-thing,\npos-login {\n  flex: 0 1 auto;\n  flex-shrink: 0; /* Ensure those items don't shrink */\n}\n\nheader,\nfooter {\n  display: flex;\n  gap: var(--size-1);\n  height: auto;\n  justify-content: center;\n  align-items: center;\n  padding: var(--size-1);\n}\n\nfooter svg {\n  width: var(--size-5);\n  height: var(--size-5);\n}\n\nfooter {\n  font-size: var(--scale-fluid-000);\n\n  .settings {\n    padding: 0 var(--size-1);\n    text-decoration: none;\n    background-color: var(--pos-background-color);\n    border: 1px solid var(--pos-secondary-border-color);\n    color: var(--pos-secondary-border-color);\n    border-radius: var(--radius-xs);\n\n    &:hover {\n      background-color: var(--pos-secondary-border-color);\n      color: var(--pos-background-color);\n    }\n  }\n}\n\nheader {\n  flex-wrap: nowrap;\n  padding: var(--size-1) var(--size-8);\n}\n\nmain {\n  flex: 1;\n  max-height: 100vh;\n  overflow: auto;\n}\n\n@media (max-width: 640px) {\n  header {\n    padding: var(--size-1);\n    justify-content: space-between;\n  }\n}\n";
-const PosAppBrowserStyle0 = posAppBrowserCss;
-
-const PosAppBrowser = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.restorePreviousSession = false;
-        /**
-         * The mode the app is running in:
-         *
-         * - standalone: use this when you deploy it as a standalone web application
-         * - pod: use this when you host this app as a default interface for you pod
-         */
-        this.mode = 'standalone';
-        this.uri = '';
-    }
-    render() {
-        return (h(Host, { key: 'd2c863f8abf790352cdf9c830a1baa8d7aee95a8' }, h("pos-app", { key: '163415bea00a0a18f5e97f5cb7f3e5b9f5910f61', restorePreviousSession: this.restorePreviousSession }, h("pos-error-toast", { key: '799735b00aff86946259013132079814520ced7e' }, h("pos-router", { key: 'bdb89d03d93937399ec38b0b2c1d695feea248b9', mode: this.mode, "onPod-os:route-changed": e => (this.uri = e.detail) }, h("header", { key: 'e828af57fa2d8842c058197a826ac488cbb2a968' }, h("pos-add-new-thing", { key: '28eed0a89a4e554e88ea4fce13b2dd59c5ce0149', referenceUri: this.uri }), h("pos-navigation", { key: '16a06ae6aea6ac316cacc4ffa52442b3ada62d62', uri: this.uri === 'pod-os:dashboard' ? '' : this.uri }), h("pos-login", { key: '9577c4aa8a18af341715b6e51946dbb4481ef963' })), h("main", { key: '73dc7ba162440c5198a31f5a4b060dc2c2d1c70a' }, this.mainContent()), h("footer", { key: 'cb18c8eb3abc1ee62426db39a61e650df2906241' }, h(Logo, { key: 'e9205f06faa7153310a17470f55b97a423cf6691' }), h("span", { key: '7be0a255d0ca50d961f122fdfc9fd3bb3fdfd624' }, "PodOS Browser"), h("span", { key: '3ed17bc88faffbcfa973278c76f63a2a199ec026' }, "|"), h("a", { key: 'ab88d3e93e59b918dd21b8cd42b70522dc532730', class: "settings", href: "?uri=pod-os%3Asettings" }, "\u2699 Settings")))))));
-    }
-    mainContent() {
-        if (this.uri === '') {
-            return null;
-        }
-        if (this.uri.startsWith('pod-os:')) {
-            return h("pos-internal-router", { uri: this.uri });
-        }
-        return (h("pos-resource", { key: this.uri, uri: this.uri }, h("pos-type-router", null)));
-    }
-};
-const Logo = () => {
-    return (h("svg", { viewBox: "0 0 400 400", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M50 350 L50 100 L200 50 L350 100 L350 350 Z", style: {
-            'fill': '#008BF8',
-            'stroke': '#008BF8',
-            'stroke-width': '70',
-        }, "stroke-linejoin": "round" }), h("path", { d: "M100 300 L100 150 L200 120 L300 150 L300 300 L130 300 L130 370 L100 370Z", style: {
-            'fill': 'white',
-            'stroke': 'white',
-            'stroke-width': '45',
-        }, "stroke-linejoin": "round" }), h("path", { d: "M150 250 L150 200 L200 180 L250 200 L250 250 Z", style: {
-            'fill': '#DC0073',
-            'stroke': '#DC0073',
-            'stroke-width': '20',
-        }, "stroke-linejoin": "round" })));
-};
-PosAppBrowser.style = PosAppBrowserStyle0;
-
-const posAppDashboardCss = ":host{display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--size-12), var(--size-96)));gap:var(--size-4);padding:var(--size-2);justify-content:center;align-items:start;justify-items:stretch}";
-const PosAppDashboardStyle0 = posAppDashboardCss;
-
-const PosAppDashboard = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        return (h(Host, { key: 'c467fa44eac028bc1a1546423ac92a5e1e9a98d2' }, h("pos-getting-started", { key: 'f62088d7cc2c199617eecbfd771b2f22db1a7431' }), h("pos-example-resources", { key: '6285bd2160042582ee113f81e7e6e02139d67f45' })));
-    }
-};
-PosAppDashboard.style = PosAppDashboardStyle0;
-
-const posAppSettingsCss = ":host{display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--size-12), var(--size-96)));gap:var(--size-4);padding:var(--size-2);justify-content:center;align-items:start;justify-items:stretch}";
-const PosAppSettingsStyle0 = posAppSettingsCss;
-
-const PosAppSettings = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        return h("pos-setting-offline-cache", { key: '0da588136a4c7c4238e0387bfe0649464ccd1c7d' });
-    }
-};
-PosAppSettings.style = PosAppSettingsStyle0;
-
-const PosDescription = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.subscribeResource = createEvent(this, "pod-os:resource", 7);
-        this.receiveResource = (resource) => {
-            this.resource = resource;
-        };
-    }
-    componentWillLoad() {
-        subscribeResource(this);
-    }
-    render() {
-        return this.resource ? this.resource.description() : null;
-    }
-};
-
-const posDialogCss = "dialog{background-color:var(--pos-background-color);color:var(--pos-normal-text-color);border:none;border-radius:var(--radius-md);box-shadow:var(--shadow-md);max-width:var(--width-xs);animation:slideIn 0.2s ease-out}dialog::backdrop{background:rgba(0, 0, 0, 0.5);backdrop-filter:var(--blur-sm);animation:fadeIn 0.2s ease-out}@media (prefers-color-scheme: dark){dialog::backdrop{background:rgb(100, 100, 100, 0.5)}}dialog header>:first-child{flex-grow:1;font-weight:var(--weight-light);font-size:var(--scale-2);font-family:var(--font-sans);margin:0}dialog header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:var(--scale-0);border-bottom-style:inset;padding:0 0 var(--scale-0) 0}dialog>:last-child{display:block;margin-top:var(--scale-3)}button#close{cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;background:none;font-size:var(--scale-3);color:var(--color-grey-500)}button#close:hover{color:var(--pos-secondary-border-color)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideIn{from{opacity:0;transform:translateY(-20px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}";
-const PosDialogStyle0 = posDialogCss;
-
-const PosDialog = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    showModal() {
-        this.dialog.showModal();
-    }
-    close() {
-        this.dialog.close();
-    }
-    render() {
-        return (h(Host, { key: '52b46535cab915321a93f84fa8b2f662d2e8e4ea' }, h("dialog", { key: 'e6c57b54805f48084c0a0ef2fa32fda9938f4c17', ref: el => (this.dialog = el) }, h("header", { key: 'aee8b90512a18b8e87084009433e963d1a9b3fd1' }, h("slot", { key: '3aa5a212f5774316ffaf0b9a1a04607690a2bcac', name: "title" }), h("button", { key: 'f3da0669f952023cfcc792b2b801670c94e49400', tabindex: -1, id: "close", title: "Close", onClick: () => this.close() }, h("ion-icon", { key: '90b5835a6f79c587c651d1d5e599fa9079a1d1e9', name: "close-outline" }))), h("slot", { key: '9fa7fa1e7f6077aca2a6eb40d806b1d7b9237eef', name: "content" }))));
-    }
-};
-PosDialog.style = PosDialogStyle0;
-
-const PosErrorToast = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    async unhandledRejection(event) {
-        event.stopPropagation();
-        console.error('unhandled promise rejection', event);
-        await this.showToast(event.reason.toString());
-    }
-    async catchError(event) {
-        event.stopPropagation();
-        console.error(event.detail);
-        await this.showToast(event.detail.message);
-    }
-    async showToast(message) {
-        const toast = await toastController.create({
-            message,
-            duration: 10000,
-            position: 'top',
-            color: 'danger',
-            buttons: [
-                {
-                    text: 'Dismiss',
-                    role: 'cancel',
-                },
-            ],
-        });
-        await toast.present();
-    }
-    render() {
-        return (h(Host, { key: '0dce513e04101d3b9011c635f5aab8897a246385' }, h("ion-toast", { key: '956224c61589fca317f8143055344c857aa894cf', trigger: "never", message: "Workarround to preload ion-toast and ion-ripple-effect to be able to show errors while offline", duration: 0 }, h("ion-ripple-effect", { key: 'e96e65e2f06b61970e241639e7c429a90404517e' })), h("slot", { key: '8869125c64fb97f9736e30df0a748c9ce6aec1da' })));
-    }
-};
-
-const posExampleResourcesCss = ":host{border:var(--size-px) solid var(--pos-border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--size-8);max-width:var(--size-96);background:var(--pos-card-background)}.links{display:flex;flex-direction:column;gap:var(--size-3);max-width:80vw}";
-const PosExampleResourcesStyle0 = posExampleResourcesCss;
-
-const PosExampleResources = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        return (h(Host, { key: 'b6a491caa9ea624cdba3cca92fcc9444a3c38290' }, h("div", { key: '458ceb259d7070d38eb13aea9f3b303f174a5c56' }, h("h2", { key: '1d571afb47c256f2ac873840c6fe8bc8408cc9a6' }, "Try these... \uD83D\uDCA1"), h("p", { key: '7de1dac7a92becb01ec7aab4cf96c45fa95f7de6' }, "No idea where to start? Try these example resources, and follow your nose \uD83D\uDC43"), h("div", { key: 'b94cc5571f5b7af0bcc660fc8812ca08ca2db482', class: "links" }, h("pos-rich-link", { key: 'e2c414d51b79e27667a42d04fa66e879a2ecf2a2', uri: "https://pod-os.solidcommunity.net/profile/card#me" }), h("pos-rich-link", { key: 'e54479349363d67d027612bbcdb2167f9ab6ec03', uri: "https://angelo.veltens.org/profile/card#me" }), h("pos-rich-link", { key: '1c743eafd11d46f6bdd31face3bf1083abd1e045', uri: "https://angelo.veltens.org/public/bookmarks" }), h("pos-rich-link", { key: '3e47cd67a0ab44a1921ec4f0e5e9f24404826494', uri: "https://solidos.solidcommunity.net/profile/card#me" })))));
-    }
-};
-PosExampleResources.style = PosExampleResourcesStyle0;
-
-const posGettingStartedCss = ":host{border:var(--size-px) solid var(--pos-border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--size-8);max-width:var(--size-96);background:var(--pos-card-background)}.question{font-weight:var(--weight-semibold)}a{font-weight:var(--weight-bold);color:var(--pos-primary-color)}button.login{background:none;color:var(--pos-primary-color);display:inline;text-decoration:underline;border:none;padding:0;margin:0;cursor:pointer;font-size:unset}";
-const PosGettingStartedStyle0 = posGettingStartedCss;
-
-const PosGettingStarted = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.login = createEvent(this, "pod-os:login", 7);
-    }
-    render() {
-        return (h(Host, { key: '963476081378811bc5623921ca7f4dc5ac18b9f7' }, h("div", { key: 'df6a7a5bab3c026d1960c03a4d008f8bff0b1c9d' }, h("h2", { key: '9e7a1e2c081f87275641fe99afb72c1f8ef65115' }, "Getting started \uD83D\uDE80"), h("p", { key: 'dac8ca58a733d66ab80fa79ef59d62a254b3b83f' }, "\uD83D\uDD0E Enter a URL into the above navigation bar to browse through the web of data. "), h("p", { key: 'c90fbc4f7c09893f6ded65befe4c77f673df6db2' }, "\uD83D\uDD10", ' ', h("button", { key: '2688b10503c6d518a7a48601f35e1f20741d71c7', class: "login", onClick: () => this.login.emit() }, "Sign in"), ' ', "to access private resources on your Solid Pod or those of your friends or coworkers.")), h("div", { key: '5990c65adc978df16ec7b73c3be2b6b4b3a48ce3' }, h("p", { key: '8fd4cb0941da30c3b438338a557a6d4fb9d7ff33', class: "question" }, "New to Solid?"), h("p", { key: 'd6b06063acaac1d55dc0aea86c3d80f4e7c8ca6f' }, h("a", { key: 'b0a49b4e170c89f736cf9bd2dd567cfafbcec31c', href: "https://solidproject.org/for-developers#hosted-pod-services" }, "Get a Pod \u2192"))), h("div", { key: '7c88ea4bb3982346343cf10e6196d2d07057a24e' }, h("p", { key: '22cfb601fada05ca7b5f274f0b6a81d360344764', class: "question" }, "Want to dig deeper into PodOS?"), h("p", { key: 'fb03d0f84714feb53b1b053390a5e7b9686e610e' }, h("a", { key: '1681d6d1c860589ca1624abc3c05121ccde3f951', href: "http://pod-os.org" }, "Learn more \u2192")))));
-    }
-};
-PosGettingStarted.style = PosGettingStartedStyle0;
-
-const posImageCss = ":host{display:flex;background-size:cover;background-repeat:no-repeat;background-position:center;border-radius:inherit}img,ion-skeleton-text,div.error{border-radius:var(--border-radius);width:var(--width);height:var(--height);max-width:var(--max-width);max-height:var(--max-height);object-fit:var(--object-fit)}img{backdrop-filter:var(--blur-xl)}.error{display:flex;opacity:0.8;background:repeating-linear-gradient(-45deg, rgba(150, 0, 0, 0.1), rgba(150, 0, 0, 0.1) 10px, #fff 5px, #fff 25px);flex-direction:column;border:1px solid red;color:black;align-items:center;justify-content:center;word-break:break-all;padding:1rem;box-sizing:border-box}.error ion-icon{color:#282828;--ionicon-stroke-width:calc(var(--width) / 5);font-size:calc(var(--width) / 2)}a.error{text-decoration:none;width:var(--width);height:var(--height)}.code{font-weight:bold;font-size:calc(var(--width) / 8)}.text{font-size:calc(var(--width) / 20)}";
-const PosImageStyle0 = posImageCss;
-
-const PosImage = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.initializeOsEmitter = createEvent(this, "pod-os:init", 7);
-        this.resourceLoadedEmitter = createEvent(this, "pod-os:resource-loaded", 7);
-        /**
-         * Use a blurred version of the image as its own background, if the image is scaled down to fit into the container.
-         */
-        this.blurredBackground = false;
-        this.loading = true;
-        this.setOs = async (os) => {
-            this.os = os;
-        };
-    }
-    componentWillLoad() {
-        store.onChange('isLoggedIn', () => this.fetchBlob());
-        this.initializeOsEmitter.emit(this.setOs);
-    }
-    async fetchBlob() {
-        try {
-            this.loading = true;
-            this.imageError = null;
-            this.networkError = null;
-            this.brokenFile = null;
-            const file = await this.os.fetchFile(this.src);
-            this.resourceLoadedEmitter.emit(this.src);
-            if (file.blob()) {
-                this.dataUri = URL.createObjectURL(file.blob());
-            }
-            else {
-                this.brokenFile = file;
-            }
-        }
-        catch (err) {
-            this.networkError = err;
-        }
-        finally {
-            this.loading = false;
-        }
-    }
-    onImageError(err) {
-        this.networkError = null;
-        this.imageError = err;
-    }
-    render() {
-        if (this.loading) {
-            return h("ion-skeleton-text", { animated: true });
-        }
-        if (this.networkError) {
-            // probably a CORS error
-            return h("img", { alt: this.alt, src: this.src, onError: err => this.onImageError(err) });
-        }
-        if (this.brokenFile) {
-            // fetching worked, but HTTP response was not ok
-            return h(BrokenFile, { file: this.brokenFile });
-        }
-        if (this.imageError) {
-            // if even the loading via classic <img src="..."> failed, render a link
-            return (h("div", { class: "error" }, h("a", { href: this.src }, this.src)));
-        }
-        return (h(Host, { style: {
-                backgroundImage: this.blurredBackground ? `url('${this.dataUri}')` : null,
-            } }, h("img", { src: this.dataUri, alt: this.alt })));
-    }
-    static get watchers() { return {
-        "os": ["fetchBlob"],
-        "src": ["fetchBlob"]
-    }; }
-};
-PosImage.style = PosImageStyle0;
-
-const PosInternalRouter = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.uri = 'pod-os:dashboard';
-    }
-    render() {
-        return this.uri === 'pod-os:settings' ? (h("pos-app-settings", null)) : (h("pos-app-dashboard", null));
-    }
-};
-
-const PosLabel = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.subscribeResource = createEvent(this, "pod-os:resource", 7);
-        this.receiveResource = (resource) => {
-            this.resource = resource;
-        };
-    }
-    componentWillLoad() {
-        subscribeResource(this);
-    }
-    render() {
-        return this.resource ? this.resource.label() : null;
-    }
-};
-
-const posLoginCss = ".container{display:flex;align-items:center;gap:var(--size-2)}.user-data{align-items:center;display:inline-flex;gap:10px}.user-data pos-picture{--width:40px;--height:40px;--border-radius:50%}pos-login-form{margin:var(--size-2)}dialog{margin-top:var(--size-10)}button#login,button#logout{outline:none;font-weight:var(--weight-bold);letter-spacing:var(--letter-xl);border:none;box-sizing:border-box;border-radius:var(--radius-xs);padding:var(--size-2);box-shadow:var(--shadow-sm);color:var(--pos-primary-text-color);background-color:var(--pos-primary-color)}button#login:focus-within,button#logout:focus-within{outline:var(--pos-input-focus-outline)}button#login:focus,button#login:hover,button#logout:focus,button#logout:hover{filter:brightness(110%);box-shadow:var(--shadow-md)}";
-const PosLoginStyle0 = posLoginCss;
-
-const PosLogin = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.initializeOsEmitter = createEvent(this, "pod-os:init", 7);
-        this.setOs = async (os) => {
-            this.os = os;
-        };
-    }
-    componentWillLoad() {
-        this.initializeOsEmitter.emit(this.setOs);
-    }
-    login(event) {
-        const idpUrl = event.detail;
-        this.os.login(idpUrl);
-    }
-    logout() {
-        this.os.logout();
-    }
-    onLogin() {
-        this.openDialog();
-    }
-    openDialog() {
-        this.dialog.showModal();
-    }
-    render() {
-        return (h(Host, { key: '3a9b64d2fde82e4067095067d852f3a793c9c6a2' }, h("div", { key: '36ce0bb0f9d85b90f5faf9dc47c64c8d0dcf88e9', class: "container" }, store.state.isLoggedIn ? (h("pos-resource", { uri: store.state.webId }, h("span", { class: "user-data" }, h("pos-picture", null), h("pos-label", null)))) : (''), !store.state.isLoggedIn && (h("button", { key: '228a4dd94d2497acc6f3ecd13f70e2ff40daf8dc', id: "login", onClick: () => this.openDialog() }, "Login")), store.state.isLoggedIn && (h("button", { key: '2212c8e0c939656179a66c2b3ff74227dab42476', id: "logout", onClick: () => this.logout() }, "Logout"))), h("pos-dialog", { key: '2cd9a1060b1494606848d3dcaea21cad2ede8103', ref: el => (this.dialog = el) }, h("span", { key: '4852dc345b9271c6aca71d4615627d76985d548d', slot: "title" }, "Sign in to your Pod"), h("pos-login-form", { key: 'f6919d6a8863d3c8535ba786a5334741550bc8a5', "onPod-os:idp-url-selected": ev => this.login(ev), slot: "content" }))));
-    }
-};
-PosLogin.style = PosLoginStyle0;
-
-const posLoginFormCss = ":host{display:block;margin:0}form{display:flex;flex-direction:column;gap:var(--size-4)}input{outline:var(--pos-input-outline);padding:var(--scale-000);border:none;border-radius:var(--radius-xs);width:var(--size-full);box-sizing:border-box;background:var(--pos-input-background-color);color:var(--pos-normal-text-color)}input:focus-within{outline:var(--pos-input-focus-outline)}input#login{outline:none;box-shadow:var(--shadow-sm);cursor:pointer;color:var(--pos-primary-text-color);background-color:var(--pos-primary-color)}input#login:disabled{cursor:default;color:var(--pos-disabled-text-color);background-color:var(--pos-disabled-color);box-shadow:none}input#login:hover:not(:disabled),input#login:focus{filter:brightness(110%);box-shadow:var(--shadow-md)}";
-const PosLoginFormStyle0 = posLoginFormCss;
-
-const PosLoginForm = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.idpUrlSelected = createEvent(this, "pod-os:idp-url-selected", 7);
-        this.idpUrl = '';
-        this.canSubmit = false;
-    }
-    validate() {
-        this.canSubmit = Boolean(this.idpUrl);
-    }
-    render() {
-        return (h("form", { key: '6c54aa03972bf5af3779c1e3f874b99574232821', method: "dialog", onSubmit: () => this.handleSubmit() }, h("label", { key: 'a5def7569abeb0a2591886d48fa0deb2c7f6039c', htmlFor: "idpUrl" }, "Please enter your Identity Provider"), h("input", { key: '1da8575dccea9a777f00cb8a7f96435654a582bc', id: "idpUrl", type: "url", value: this.idpUrl, required: true, onInput: e => this.handleChange(e), list: "suggestedIssuers", placeholder: "Type to search..." }), h("datalist", { key: '1818988df2f8a825194eb3503979d6c6adac3619', id: "suggestedIssuers" }, h("option", { key: '25e1b3fd84610e0664c25c3ca9cd535bf7558357', value: "https://solidcommunity.net" }, "solidcommunity.net"), h("option", { key: '5635e434dc4bf406a3664cf5cb28489b5b9218fc', value: "https://solidweb.org" }, "solidweb.org"), h("option", { key: 'd4d301023b40f84b5f445d14290ef3bc589cff56', value: "https://solidweb.me" }, "solidweb.me"), h("option", { key: '39f968af206347c83e4271724e9090543fcec43e', value: "https://inrupt.net" }, "inrupt.net"), h("option", { key: '381767d06a60e16b9323cb15b4298db2eac71d82', value: "https://login.inrupt.com" }, "Inrupt PodSpaces"), h("option", { key: 'd4461d0bb2bfba0ec97f276951b6534dee1ffd51', value: "https://trinpod.us" }, "trinpod.us"), h("option", { key: '80aa0ef7de3ec8dd53d06402c116a6c97747a24f', value: "https://use.id" }, "use.id"), h("option", { key: '794bee3c5a2b29738f25bb67bfb918754fe016ef', value: "https://solid.redpencil.io" }, "redpencil.io"), h("option", { key: '88e27225e7252c90bfb24f21a72bd70c9e3408f4', value: "https://datapod.grant.io" }, "Data Pod (grant.io)"), h("option", { key: '033b75773e898b4fed2507c5064686fb0ad56e03', value: "https://teamid.live" }, "teamid.live")), h("input", { key: 'c8dc41c5d6a892e623d42f5b1839af2728929abd', id: "login", type: "submit", value: "Login", disabled: !this.canSubmit })));
-    }
-    handleChange(event) {
-        this.validate();
-        this.idpUrl = event.target.value;
-    }
-    async handleSubmit() {
-        this.idpUrlSelected.emit(this.idpUrl);
-    }
-    static get delegatesFocus() { return true; }
-    static get watchers() { return {
-        "idpUrl": ["validate"]
-    }; }
-};
-PosLoginForm.style = PosLoginFormStyle0;
-
-const posMakeFindableCss = "button.main {\n  display: flex;\n  transition:\n    width 200ms,\n    background-color 500ms,\n    color 500ms,\n    border-color 500ms;\n  max-width: var(--size-40);\n  flex-direction: row;\n  overflow: hidden;\n  height: var(--pos-navigation-bar-height);\n  width: var(--pos-navigation-bar-height);\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-md);\n  color: var(--pos-subtle-text-color);\n  border: var(--size-px) dashed var(--pos-subtle-text-color);\n  background-color: var(--pos-background-color);\n\n  p {\n    padding: 0;\n    margin: 0;\n    display: none;\n    white-space: nowrap;\n  }\n\n  &.success {\n    color: var(--color-green-700);\n    border-color: var(--color-green-700);\n    border-style: solid;\n    background-color: var(--color-green-100);\n  }\n\n  &:active {\n    transform: scale(0.99);\n    filter: brightness(90%);\n  }\n  &:focus {\n    outline: var(--pos-input-focus-outline);\n  }\n}\n\n.options {\n  position: absolute;\n  animation: fadeIn 300ms;\n  padding: 0;\n  margin-top: var(--size-1);\n  z-index: var(--layer-top);\n\n  ol {\n    display: flex;\n    flex-direction: column;\n    box-shadow: var(--shadow-md);\n    backdrop-filter: var(--blur-md);\n    border-radius: var(--radius-xs);\n    overflow: hidden;\n    color: var(--color-grey-900);\n    background-color: var(--color-grey-200);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    label {\n      display: flex;\n      justify-content: flex-start;\n      align-items: center;\n      transition: all 300ms var(--ease-in-out-sine);\n      margin: 0;\n      border: none;\n      outline: none;\n      padding: var(--size-2);\n      width: var(--size-full);\n\n      &:hover,\n      &:focus {\n        filter: brightness(80%);\n      }\n\n      &:active {\n        filter: brightness(90%);\n      }\n    }\n  }\n  label:has(input:checked) {\n    background-color: var(--color-green-100);\n  }\n}\n\nsvg {\n  display: inline-block;\n  height: var(--size-6);\n  flex-shrink: 0;\n  flex-grow: 0;\n  width: var(--size-6);\n}\n\nbutton.main:hover,\nbutton.open {\n  &.success {\n    background: var(--color-green-200);\n  }\n  width: var(--size-full);\n  height: var(--pos-navigation-bar-height);\n  background: var(--pos-background-color);\n  color: var(--pos-normal-text-color);\n\n  p {\n    display: inline-block;\n  }\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n";
-const PosMakeFindableStyle0 = posMakeFindableCss;
-
-const PosMakeFindable = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.subscribePodOs = createEvent(this, "pod-os:init", 7);
-        this.errorEmitter = createEvent(this, "pod-os:error", 7);
-        this.indexUpdatedEmitter = createEvent(this, "pod-os:search:index-updated", 7);
-        this.indexCreatedEmitter = createEvent(this, "pod-os:search:index-created", 7);
-        this.indexes = [];
-        this.showOptions = false;
-        this.isIndexed = false;
-        this.receivePodOs = async (os) => {
-            this.os = os;
-            this.thing = this.os.store.get(this.uri);
-            this.getLabelIndexes(store.state.profile);
-            this.unsubscribeSessionChange = store.onChange('profile', profile => {
-                this.getLabelIndexes(profile);
-            });
-        };
-    }
-    componentWillLoad() {
-        subscribePodOs(this);
-    }
-    disconnectedCallback() {
-        this.unsubscribeSessionChange && this.unsubscribeSessionChange();
-    }
-    hideOptions(event) {
-        // @ts-ignore
-        if (!this.el.contains(event.target)) {
-            this.showOptions = false;
-        }
-    }
-    handleKeyDown(ev) {
-        if (ev.key === 'Escape') {
-            this.showOptions = false;
-        }
-    }
-    updateUri(uri) {
-        this.thing = this.os.store.get(uri);
-        this.isIndexed = this.checkIfIndexed(uri);
-    }
-    checkIfIndexed(uri) {
-        return this.indexes.some(it => it.contains(uri));
-    }
-    getLabelIndexes(profile) {
-        if (profile) {
-            this.indexes = profile.getPrivateLabelIndexes().map(it => this.os.store.get(it).assume(LabelIndex));
-            this.isIndexed = this.checkIfIndexed(this.uri);
-        }
-    }
-    async onClick(e) {
-        e.preventDefault();
-        if (this.indexes.length === 1) {
-            const index = this.indexes[0];
-            await this.addToLabelIndex(index);
-            this.indexUpdatedEmitter.emit(index);
-        }
-        else if (this.indexes.length > 1) {
-            this.showOptions = !this.showOptions;
-        }
-        else {
-            const index = await this.createDefaultLabelIndex();
-            await this.addToLabelIndex(index);
-            this.indexCreatedEmitter.emit(index);
-        }
-    }
-    async addToLabelIndex(index) {
-        try {
-            await this.os.addToLabelIndex(this.thing, index);
-            this.isIndexed = true;
-        }
-        catch (e) {
-            this.errorEmitter.emit(e);
-        }
-        this.showOptions = false;
-    }
-    async createDefaultLabelIndex() {
-        try {
-            return await this.os.createDefaultLabelIndex(store.state.profile);
-        }
-        catch (e) {
-            this.errorEmitter.emit(e);
-        }
-    }
-    render() {
-        if (!store.state.isLoggedIn || !this.uri) {
-            return null;
-        }
-        const label = 'Make this findable';
-        return (h(Host, null, h("button", { type: "button", "aria-label": label, class: { main: true, open: this.showOptions, success: this.isIndexed }, onClick: e => this.onClick(e), title: "" }, this.isIndexed ? h(IconSuccess, null) : h(IconMakeFindable, null), h("p", null, label)), this.showOptions && (h("div", { class: "options" }, h("ol", { role: "listbox" }, this.indexes.map((index) => (h("li", { role: "option" }, h("label", null, h("input", { type: "checkbox", checked: index.contains(this.uri), onChange: e => this.chooseOption(e, index) }), h("pos-resource", { uri: index.uri, lazy: true }, h("pos-label", null)))))))))));
-    }
-    async chooseOption(e, index) {
-        e.preventDefault();
-        await this.addToLabelIndex(index);
-        this.indexUpdatedEmitter.emit(index);
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "uri": ["updateUri"]
-    }; }
-};
-const IconMakeFindable = () => (h("svg", { role: "presentation", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Zm3.75 11.625a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" })));
-const IconSuccess = () => (h("svg", { role: "presentation", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 0 1 9 9v.375M10.125 2.25A3.375 3.375 0 0 1 13.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 0 1 3.375 3.375M9 15l2.25 2.25L15 12" })));
-PosMakeFindable.style = PosMakeFindableStyle0;
-
-const posNavigationCss = ":host {\n  --pos-navigation-bar-height: var(--size-10);\n}\n\nsearch {\n  position: relative;\n}\n\n.suggestions ol {\n  border: 1px solid var(--pos-border-color);\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n}\n\n.suggestions {\n  width: 100%;\n  overflow-y: auto;\n  max-height: 90dvh;\n  li {\n    padding: 1rem;\n    background-color: var(--pos-background-color);\n    pos-rich-link {\n      --background-color: inherit;\n    }\n    &[aria-selected='true'] {\n      background-color: var(--pos-primary-color);\n      &:hover {\n        background-color: var(--pos-primary-color);\n      }\n    }\n    &:hover {\n      background-color: var(--pos-border-color);\n    }\n  }\n}\n\n.suggestions li.selected pos-rich-link {\n  --label-color: white;\n  --description-color: var(--pos-border-color);\n  --uri-color: var(--pos-subtle-text-color);\n}\n\ndialog {\n  position: absolute;\n  margin-top: calc(-1 * var(--pos-navigation-bar-height));\n  padding: 0;\n  width: 100%;\n  max-width: 100%;\n  min-width: 100%;\n  overflow: hidden;\n  max-height: 100dvh;\n  background-color: var(--pos-background-color);\n  color: var(--pos-normal-text-color);\n  border: var(--pos-border-color);\n  border-radius: var(--radius-md);\n  box-shadow: var(--shadow-md);\n  form {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    width: 100%;\n    align-items: center;\n    input {\n      display: flex;\n      font-size: var(--scale-1);\n      height: var(--pos-navigation-bar-height);\n      border-top-left-radius: var(--radius-md);\n      border-top-right-radius: var(--radius-md);\n      padding-left: var(--size-2);\n      width: 100%;\n      border: none;\n      outline: none;\n      color: var(--pos-normal-text-color);\n      background-color: var(--pos-input-background-color);\n      box-sizing: border-box;\n    }\n  }\n}\n\ndialog[open] {\n  display: flex;\n  z-index: var(--layer-top);\n  animation: slideIn 100ms ease-out;\n}\n\n@media (max-width: 640px) {\n  search {\n    position: unset;\n  }\n  dialog {\n    margin-top: var(--size-1);\n    top: 0;\n    width: 95dvw;\n    max-width: unset;\n    min-width: unset;\n    form {\n      input {\n        height: var(--size-12);\n        font-size: var(--scale-fluid-3);\n      }\n    }\n  }\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n";
-const PosNavigationStyle0 = posNavigationCss;
-
-const PosNavigation = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        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: '311e48ae67c07f4e04bbd0c78ae85103c937a2d6' }, h("search", { key: 'd39bad3a0e6fdd3eabb5fc019fbe9c311dc9adea' }, h("pos-navigation-bar", { key: '032bf46e40d5f857c6ce597f6c43875f054c65e7', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), h("dialog", { key: '5e54d2658efb7b494fc585456e3b7c72782c8938', ref: el => (this.dialogRef = el) }, h("form", { key: '59d12120091dc9f343d006d7e01fde90c1e2e3ea', method: "dialog", onSubmit: () => this.onSubmit() }, h("input", { key: '5d415b87143ab28c8db0a003e235db63305d3094', ref: el => (this.inputRef = el), enterkeyhint: "search", "aria-label": "Search or enter URI", placeholder: "Search or enter URI", value: this.uri, onChange: e => this.onChange(e), onInput: e => this.onChange(e), role: "combobox", "aria-autocomplete": "list", "aria-expanded": this.suggestions.length > 0, "aria-controls": "suggestions-list", "aria-activedescendant": this.selectedIndex >= 0 ? `option-${this.selectedIndex}` : null }), this.suggestions.length > 0 ? (h("div", { class: "suggestions" }, h("ol", { id: "suggestions-list", role: "listbox", "aria-label": "Search results" }, this.suggestions.map((it, index) => (h("li", { id: `option-${index}`, role: "option", "aria-selected": index === this.selectedIndex ? 'true' : 'false' }, h("pos-rich-link", { uri: it.ref }))))))) : null)))));
-    }
-    static get watchers() { return {
-        "uri": ["updateResource"],
-        "os": ["updateResource"]
-    }; }
-};
-PosNavigation.style = PosNavigationStyle0;
-
-const posNavigationBarCss = "section.current {\n  display: flex;\n  height: var(--pos-navigation-bar-height);\n  flex-grow: 1;\n  gap: 0;\n  background-color: var(--pos-input-background-color);\n  border-radius: var(--radius-md);\n  width: 100%;\n  &:focus-within {\n    outline: var(--pos-input-focus-outline);\n  }\n}\n\nsection.current button {\n  cursor: pointer;\n  font-size: var(--scale-1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-grow: 1;\n  background: none;\n  color: var(--pos-normal-text-color);\n  outline: none;\n  border: none;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  &:focus {\n    text-decoration: underline;\n  }\n  :first-child {\n    flex-grow: 1;\n  }\n  svg {\n    width: var(--size-6);\n    color: var(--pos-subtle-text-color);\n  }\n}\n";
-const PosNavigationBarStyle0 = posNavigationBarCss;
-
-const PosNavigationBar = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.navigate = createEvent(this, "pod-os:navigate", 7);
-    }
-    onClick() {
-        this.navigate.emit(this.current);
-    }
-    activate(e) {
-        if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
-            e.preventDefault();
-            this.navigate.emit(this.current);
-        }
-    }
-    render() {
-        const ariaLabel = this.current ? `${this.current.label()} (Click to search or enter URI)` : 'Search or enter URI';
-        return (h("section", { key: '3bdf8dfb639a32796ffec2e5f8b65d553ea7bf60', class: "current" }, this.current && this.searchIndexReady && h("pos-make-findable", { key: '4cb1e1c567be23d856564e3a7404b1be73cda8d7', uri: this.current.uri }), h("button", { key: '0b29bcc329bc9f5d053ff711109b1c06b368c33e', "aria-label": ariaLabel, onClick: () => this.onClick() }, h("div", { key: '48c7c2f062a87f8e5f7742f5839e351d56ff2c13' }, this.current ? this.current.label() : 'Search or enter URI'), this.icon())));
-    }
-    icon() {
-        return (h("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" })));
-    }
-};
-PosNavigationBar.style = PosNavigationBarStyle0;
-
-const posNewThingFormCss = ":host{display:block}form{display:grid;grid-template-columns:var(--size-16) 1fr;grid-gap:var(--scale-0)}label{grid-column:1 / 2;display:flex;align-items:center;justify-content:flex-end}input,pos-select-term,button{grid-column:2 / 3}input,pos-select-term::part(input){outline:var(--pos-input-outline);padding:var(--scale-000);border:none;border-radius:var(--radius-xs);width:var(--size-full);box-sizing:border-box;background:var(--pos-input-background-color);color:var(--pos-normal-text-color)}input:focus-within,pos-select-term::part(input):focus-within{outline:var(--pos-input-focus-outline)}#new-uri{grid-column:1/3;cursor:default;word-break:break-all;color:var(--pos-normal-text-color);font-weight:var(--weight-light);background:var(--pos-disabled-color);padding:var(--scale-000);border-radius:var(--radius-xs)}input#create{outline:none;box-shadow:var(--shadow-sm);cursor:pointer;color:var(--pos-primary-text-color);background-color:var(--pos-primary-color)}input#create:disabled{cursor:default;color:var(--pos-disabled-text-color);background-color:var(--pos-disabled-color);box-shadow:none}input#create:hover:not(:disabled),input#create:focus{filter:brightness(110%);box-shadow:var(--shadow-md)}";
-const PosNewThingFormStyle0 = posNewThingFormCss;
-
-const PosNewThingForm = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.linkEmitter = createEvent(this, "pod-os:link", 7);
-        this.errorEmitter = createEvent(this, "pod-os:error", 7);
-        this.subscribePodOs = createEvent(this, "pod-os:init", 7);
-        this.canSubmit = false;
-        this.receivePodOs = async (os) => {
-            this.os = os;
-        };
-    }
-    validate() {
-        this.canSubmit = Boolean(this.name && this.selectedTypeUri);
-    }
-    componentWillLoad() {
-        subscribePodOs(this);
-    }
-    render() {
-        return (h("form", { key: '1091c0db993d79f6d1f0c9ac9003c544b2894709', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: 'cce3f98c89a7e820556e18ea28553774324a01a1', htmlFor: "type" }, "Type"), h("pos-select-term", { key: '72708f95553609006df33b02047421599d0167f0', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: 'a1344f66396ec7b9a0a6a298694f832e62329ce3', htmlFor: "name" }, "Name"), h("input", { key: '5f006bac7be0734dbd39edbad0f30d392bf09bad', 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: '91c88406fd206ba0211e75d01cca16434fe7f74a', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
-    }
-    handleChange(event) {
-        this.name = event.target.value;
-        this.newUri = this.os.proposeUriForNewThing(this.referenceUri, this.name);
-    }
-    onTermSelected(event) {
-        this.selectedTypeUri = event.detail.uri;
-    }
-    async handleSubmit(event) {
-        try {
-            await this.os.addNewThing(this.newUri, this.name, this.selectedTypeUri);
-            this.linkEmitter.emit(this.newUri);
-            this.reset();
-        }
-        catch (error) {
-            event.preventDefault();
-            this.errorEmitter.emit(error);
-        }
-    }
-    reset() {
-        this.name = '';
-        this.newUri = '';
-        this.selectedTypeUri = '';
-    }
-    static get delegatesFocus() { return true; }
-    static get watchers() { return {
-        "name": ["validate"],
-        "selectedTypeUri": ["validate"]
-    }; }
-};
-PosNewThingForm.style = PosNewThingFormStyle0;
-
-const posPictureCss = ":host{--width:300px;--height:300px;--border-radius:var(--border-radius, 0);--object-fit:var(--object-fit, cover)}";
-const PosPictureStyle0 = posPictureCss;
-
-const PosPicture = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.subscribeResource = createEvent(this, "pod-os:resource", 7);
-        /**
-         * Use a blurred version of the image as its own background, if the image is scaled down to fit into the container.
-         */
-        this.blurredBackground = false;
-        this.receiveResource = (resource) => {
-            this.resource = resource;
-        };
-    }
-    componentWillLoad() {
-        subscribeResource(this);
-    }
-    render() {
-        const pic = this.resource ? this.resource.picture() : null;
-        if (!pic)
-            return null;
-        return h("pos-image", { blurredBackground: this.blurredBackground, src: pic.url, alt: this.resource.label() });
-    }
-};
-PosPicture.style = PosPictureStyle0;
-
-const posResourceCss = "details.error {\n  margin: var(--size-2);\n  background-color: var(--pos-error-background-color);\n  border: var(--size-px) solid var(--pos-error-border-color);\n  padding: var(--size-2);\n  border-radius: var(--radius-md);\n\n  a {\n    color: var(--pos-normal-text-color);\n  }\n}\n";
-const PosResourceStyle0 = posResourceCss;
-
-const PosResource = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.subscribePodOs = createEvent(this, "pod-os:init", 7);
-        this.resourceLoadedEmitter = createEvent(this, "pod-os:resource-loaded", 7);
-        this.consumers = [];
-        this.lazy = false;
-        this.loading = true;
-        this.receivePodOs = async (os) => {
-            this.os = os;
-        };
-    }
-    componentWillLoad() {
-        store.onChange('isLoggedIn', () => this.loadResource());
-        subscribePodOs(this);
-    }
-    async provideResource(event) {
-        event.stopPropagation();
-        if (this.resource) {
-            event.detail(this.resource);
-        }
-        this.consumers.push(event);
-    }
-    async loadResource() {
-        await this.getResource(!this.lazy);
-    }
-    async fetch() {
-        await this.getResource(true);
-    }
-    async getResource(fetch = false) {
-        try {
-            if (fetch) {
-                this.loading = true;
-                await this.os.fetch(this.uri);
-                this.resourceLoadedEmitter.emit(this.uri);
-            }
-            this.resource = this.os.store.get(this.uri);
-            this.error = null;
-            this.consumers.forEach(consumer => {
-                consumer.detail(this.resource);
-            });
-        }
-        catch (err) {
-            this.error = err;
-        }
-        finally {
-            this.loading = false;
-        }
-    }
-    render() {
-        if (this.loading) {
-            return h("ion-progress-bar", { type: "indeterminate" });
-        }
-        if (this.error) {
-            return (h("details", { class: "error" }, h("summary", { title: "Click to expand" }, "\u26A0 Sorry, something went wrong"), h("p", null, "Status:", 
-            // @ts-ignore
-            this.error.status), h("p", null, this.error.message), h("p", null, "You can try to open the link outside PodOS: ", h("a", { href: this.uri }, this.uri))));
-        }
-        return h("slot", null);
-    }
-    static get watchers() { return {
-        "os": ["loadResource"],
-        "uri": ["loadResource"]
-    }; }
-};
-PosResource.style = PosResourceStyle0;
-
-const posRichLinkCss = ":host {\n  --background-color: inherit;\n  --label-color: var(--pos-normal-text-color);\n  --description-color: var(--pos-normal-text-color);\n  --uri-color: var(--pos-subtle-text-color);\n  --font-family: var(--font-sans);\n}\n\np.content {\n  background-color: var(--background-color);\n  line-height: var(--line-xs);\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: baseline;\n  gap: var(--size-1);\n\n  .url {\n    font-size: var(--scale-fluid-1);\n    color: var(--pos-subtle-text-color);\n  }\n}\n\na {\n  color: var(--label-color);\n  max-width: min(100%, var(--prose-lg));\n  text-decoration: underline;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-decoration-thickness: var(--size-px);\n}\n\npos-label {\n  color: var(--label-color);\n  font-size: var(--scale-fluid-2);\n  margin-bottom: var(--size-1);\n}\n\npos-description {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-weight: var(--weight-light);\n  color: var(--description-color);\n  font-size: var(--scale-fluid-2);\n}\n\n@media (min-width: 640px) {\n  pos-label {\n    font-size: var(--scale-fluid-0);\n  }\n  pos-description {\n    font-size: var(--scale-fluid-1);\n  }\n\n  p.content {\n    .url {\n      font-size: var(--scale-fluid-000);\n    }\n  }\n}\n";
-const PosRichLinkStyle0 = posRichLinkCss;
-
-const PosRichLink = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.linkEmitter = createEvent(this, "pod-os:link", 7);
-    }
-    render() {
-        return (h("pos-resource", { key: '95aa9fbc121e27b106845f4c6de96088f7538310', lazy: true, uri: this.uri }, h("p", { key: 'a277291f4c795c7c2e9c9e41ab899fe660ec67a9', class: "content" }, h("a", { key: 'b83e27d371214673bc8fe740573b4b65b2479af8', href: this.uri, onClick: e => {
-                e.preventDefault();
-                this.linkEmitter.emit(this.uri);
-            } }, h("pos-label", { key: '5c4dacc2f5b0dc18664ef5e04bc024efb2547e34' })), h("span", { key: '35cb283d89ce6f631c5e3fde3035244a0374daa0', class: "url" }, new URL(this.uri).host), h("pos-description", { key: '12d5833f05f5759c16d579d5a62742b871ff964f' }))));
-    }
-};
-PosRichLink.style = PosRichLinkStyle0;
-
-const appendToMap = (map, propName, value) => {
-    const items = map.get(propName);
-    if (!items) {
-        map.set(propName, [value]);
-    }
-    else if (!items.includes(value)) {
-        items.push(value);
-    }
-};
-const debounce = (fn, ms) => {
-    let timeoutId;
-    return (...args) => {
-        if (timeoutId) {
-            clearTimeout(timeoutId);
-        }
-        timeoutId = setTimeout(() => {
-            timeoutId = 0;
-            fn(...args);
-        }, ms);
-    };
-};
-
-/**
- * Check if a possible element isConnected.
- * The property might not be there, so we check for it.
- *
- * We want it to return true if isConnected is not a property,
- * otherwise we would remove these elements and would not update.
- *
- * Better leak in Edge than to be useless.
- */
-const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
-const cleanupElements = debounce((map) => {
-    for (let key of map.keys()) {
-        map.set(key, map.get(key).filter(isConnected));
-    }
-}, 2000);
-const stencilSubscription = () => {
-    if (typeof getRenderingRef !== 'function') {
-        // If we are not in a stencil project, we do nothing.
-        // This function is not really exported by @stencil/core.
-        return {};
-    }
-    const elmsToUpdate = new Map();
-    return {
-        dispose: () => elmsToUpdate.clear(),
-        get: (propName) => {
-            const elm = getRenderingRef();
-            if (elm) {
-                appendToMap(elmsToUpdate, propName, elm);
-            }
-        },
-        set: (propName) => {
-            const elements = elmsToUpdate.get(propName);
-            if (elements) {
-                elmsToUpdate.set(propName, elements.filter(forceUpdate));
-            }
-            cleanupElements(elmsToUpdate);
-        },
-        reset: () => {
-            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));
-            cleanupElements(elmsToUpdate);
-        },
-    };
-};
-
-const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
-    let states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));
-    const handlers = {
-        dispose: [],
-        get: [],
-        set: [],
-        reset: [],
-    };
-    const reset = () => {
-        states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));
-        handlers.reset.forEach((cb) => cb());
-    };
-    const dispose = () => {
-        // Call first dispose as resetting the state would
-        // cause less updates ;)
-        handlers.dispose.forEach((cb) => cb());
-        reset();
-    };
-    const get = (propName) => {
-        handlers.get.forEach((cb) => cb(propName));
-        return states.get(propName);
-    };
-    const set = (propName, value) => {
-        const oldValue = states.get(propName);
-        if (shouldUpdate(value, oldValue, propName)) {
-            states.set(propName, value);
-            handlers.set.forEach((cb) => cb(propName, value, oldValue));
-        }
-    };
-    const state = (typeof Proxy === 'undefined'
-        ? {}
-        : new Proxy(defaultState, {
-            get(_, propName) {
-                return get(propName);
-            },
-            ownKeys(_) {
-                return Array.from(states.keys());
-            },
-            getOwnPropertyDescriptor() {
-                return {
-                    enumerable: true,
-                    configurable: true,
-                };
-            },
-            has(_, propName) {
-                return states.has(propName);
-            },
-            set(_, propName, value) {
-                set(propName, value);
-                return true;
-            },
-        }));
-    const on = (eventName, callback) => {
-        handlers[eventName].push(callback);
-        return () => {
-            removeFromArray(handlers[eventName], callback);
-        };
-    };
-    const onChange = (propName, cb) => {
-        const unSet = on('set', (key, newValue) => {
-            if (key === propName) {
-                cb(newValue);
-            }
-        });
-        const unReset = on('reset', () => cb(defaultState[propName]));
-        return () => {
-            unSet();
-            unReset();
-        };
-    };
-    const use = (...subscriptions) => {
-        const unsubs = subscriptions.reduce((unsubs, subscription) => {
-            if (subscription.set) {
-                unsubs.push(on('set', subscription.set));
-            }
-            if (subscription.get) {
-                unsubs.push(on('get', subscription.get));
-            }
-            if (subscription.reset) {
-                unsubs.push(on('reset', subscription.reset));
-            }
-            if (subscription.dispose) {
-                unsubs.push(on('dispose', subscription.dispose));
-            }
-            return unsubs;
-        }, []);
-        return () => unsubs.forEach((unsub) => unsub());
-    };
-    const forceUpdate = (key) => {
-        const oldValue = states.get(key);
-        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
-    };
-    return {
-        state,
-        get,
-        set,
-        on,
-        onChange,
-        use,
-        dispose,
-        reset,
-        forceUpdate,
-    };
-};
-const removeFromArray = (array, item) => {
-    const index = array.indexOf(item);
-    if (index >= 0) {
-        array[index] = array[array.length - 1];
-        array.length--;
-    }
-};
-
-const createStore = (defaultState, shouldUpdate) => {
-    const map = createObservableMap(defaultState, shouldUpdate);
-    map.use(stencilSubscription());
-    return map;
-};
-
-const createRouter = (opts) => {
-    var _a;
-    const win = window;
-    const url = new URL(win.location.href);
-    const parseURL = (_a = opts === null || opts === void 0 ? void 0 : opts.parseURL) !== null && _a !== void 0 ? _a : DEFAULT_PARSE_URL;
-    const { state, onChange, dispose } = createStore({
-        url,
-        activePath: parseURL(url)
-    }, (newV, oldV, prop) => {
-        if (prop === 'url') {
-            return newV.href !== oldV.href;
-        }
-        return newV !== oldV;
-    });
-    const push = (href) => {
-        history.pushState(null, null, href);
-        const url = new URL(href, document.baseURI);
-        state.url = url;
-        state.activePath = parseURL(url);
-    };
-    const match = (routes) => {
-        const { activePath } = state;
-        for (let route of routes) {
-            const params = matchPath(activePath, route.path);
-            if (params) {
-                if (route.to != null) {
-                    const to = (typeof route.to === 'string')
-                        ? route.to
-                        : route.to(activePath);
-                    push(to);
-                    return match(routes);
-                }
-                else {
-                    return { params, route };
-                }
-            }
-        }
-        return undefined;
-    };
-    const navigationChanged = () => {
-        const url = new URL(win.location.href);
-        state.url = url;
-        state.activePath = parseURL(url);
-    };
-    const Switch = (_, childrenRoutes) => {
-        const result = match(childrenRoutes);
-        if (result) {
-            if (typeof result.route.jsx === 'function') {
-                return result.route.jsx(result.params);
-            }
-            else {
-                return result.route.jsx;
-            }
-        }
-    };
-    const disposeRouter = () => {
-        win.removeEventListener('popstate', navigationChanged);
-        dispose();
-    };
-    const router = {
-        Switch,
-        get url() {
-            return state.url;
-        },
-        get activePath() {
-            return state.activePath;
-        },
-        push,
-        onChange: onChange,
-        dispose: disposeRouter,
-    };
-    // Initial update
-    navigationChanged();
-    // Listen URL changes
-    win.addEventListener('popstate', navigationChanged);
-    return router;
-};
-const matchPath = (pathname, path) => {
-    if (typeof path === 'string') {
-        if (path === pathname) {
-            return {};
-        }
-    }
-    else if (typeof path === 'function') {
-        const params = path(pathname);
-        if (params) {
-            return params === true
-                ? {}
-                : { ...params };
-        }
-    }
-    else {
-        const results = path.exec(pathname);
-        if (results) {
-            path.lastIndex = 0;
-            return { ...results };
-        }
-    }
-    return undefined;
-};
-const DEFAULT_PARSE_URL = (url) => {
-    return url.pathname.toLowerCase();
-};
-
-const posRouterCss = ".toolbar{display:flex;flex-direction:row;gap:0;align-items:center;margin-left:0.5rem}pos-navigation{flex-grow:1}";
-const PosRouterStyle0 = posRouterCss;
-
-const Router = createRouter();
-const PosRouter = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.routeChanged = createEvent(this, "pod-os:route-changed", 7);
-        /**
-         * The mode defines what default URI will be used, if no URI param is given
-         *
-         * - standalone: reroute to pod-os:dashboard
-         * - pod: reroute to the URI that is shown in the actual browser
-         */
-        this.mode = 'standalone';
-    }
-    linkClicked(e) {
-        this.navigate(e.detail);
-    }
-    sessionRestored(e) {
-        Router.push(e.detail.url);
-    }
-    componentWillLoad() {
-        this.updateUri();
-        Router.onChange('url', () => {
-            this.updateUri();
-        });
-    }
-    navigate(uri) {
-        Router.push('?uri=' + encodeURIComponent(uri));
-    }
-    updateUri() {
-        this.uri =
-            new URLSearchParams(window.location.search).get('uri') ||
-                (this.mode === 'standalone' ? 'pod-os:dashboard' : window.location.href);
-        this.routeChanged.emit(this.uri);
-    }
-    render() {
-        return h("slot", { key: '2775fc2835158ccd8d540e4f27edfd497eafe7a9' });
-    }
-};
-PosRouter.style = PosRouterStyle0;
-
-const posSelectTermCss = ":host{display:block}input{background-color:transparent;color:var(--pos-normal-text-color);border:none;padding-top:1rem;padding-bottom:1rem}input:focus{outline:none}";
-const PosSelectTermStyle0 = posSelectTermCss;
-
-const PosSelectTerm = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.subscribePodOs = createEvent(this, "pod-os:init", 7);
-        this.termSelected = createEvent(this, "pod-os:term-selected", 7);
-        this.placeholder = 'Type to search...';
-        this.value = '';
-        this.terms = [];
-        this.receivePodOs = async (os) => {
-            this.os = os;
-        };
-    }
-    componentWillLoad() {
-        subscribePodOs(this);
-    }
-    setTerms() {
-        this.terms = this.os.listKnownTerms();
-    }
-    handleChange(event) {
-        this.termSelected.emit({ uri: event.target.value });
-    }
-    render() {
-        return (h(Host, { key: '87e4eddf409058ee5fc4c3da0d26f06b10814baa' }, h("input", { key: 'b7c3c9644cfd438806263a1f5cc721f8409cfe45', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: '834ad0a974db76a5295501ba7231bd190d57b98b', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
-    }
-    static get delegatesFocus() { return true; }
-    static get watchers() { return {
-        "os": ["setTerms"]
-    }; }
-};
-PosSelectTerm.style = PosSelectTermStyle0;
-
-const posSettingOfflineCacheCss = ":host{border:var(--size-px) solid var(--pos-border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--size-8);max-width:var(--size-96);background:var(--pos-card-background)}svg{width:var(--size-8)}h2{display:flex;align-items:center}p{padding:var(--size-2)}.info{color:var(--color-grey-900);background-color:var(--color-blue-200)}.warn{color:var(--color-grey-900);background-color:var(--color-yellow-200)}";
-const PosSettingOfflineCacheStyle0 = posSettingOfflineCacheCss;
-
-const PosSettingOfflineCache = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        return (h(Host, { key: 'b598a0dbe21fe9e7f1aa0f51f0b53c270feb8add' }, h("div", { key: '5cec10cc63203c8421bbb627643f1365899cc850' }, h("h2", { key: '094528da7d8567e8a2ba6e82fb1c05b2f4dc7b22' }, h("svg", { key: '3d3e8b17420ba7352877eb1c6bca17d3791b1bd6', xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, h("path", { key: '065bc78382b03bd2bcc3c812a71e9f27c4e3251c', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" })), "Cache Settings"), h("p", { key: '5e5d2ec497039791f82a857a709157e6b97efdfe', class: "info" }, "\u2139 Enable offline cache to be able to access previously loaded data while offline."), h("p", { key: 'd4ff4a3a17df1e5ed7ce076abbf98def4ebdac7d', class: "warn" }, "\u26A0 Private data may be stored on this device. Only enable it, if you trust this device."), h("label", { key: '1d1aa4f7b4b5fa53080cc5635a20ccee3faee29d' }, h("input", { key: '4223888802ea51dec26a3d23abdd9c28098de5aa', type: "checkbox", checked: localSettings.state.offlineCache, onChange: ev => (localSettings.state.offlineCache = ev.target.checked) }), "Enable offline cache"))));
-    }
-};
-PosSettingOfflineCache.style = PosSettingOfflineCacheStyle0;
-
-var AvailableApps;
-(function (AvailableApps) {
-    AvailableApps["Generic"] = "pos-app-generic";
-    AvailableApps["RdfDocument"] = "pos-app-rdf-document";
-    AvailableApps["DocumentViewer"] = "pos-app-document-viewer";
-    AvailableApps["ImageViewer"] = "pos-app-image-viewer";
-    AvailableApps["LdpContainer"] = "pos-app-ldp-container";
-})(AvailableApps || (AvailableApps = {}));
-// TODO: remove duplication with pos-container-contents/selectIconForTypes
-function containsType(types, typeUri) {
-    return types.some(type => type.uri === typeUri);
-}
-function selectAppForTypes(types) {
-    if (containsType(types, 'http://www.w3.org/ns/ldp#Container')) {
-        return AvailableApps.LdpContainer;
-    }
-    else if (containsType(types, 'http://www.w3.org/2007/ont/link#RDFDocument')) {
-        return AvailableApps.RdfDocument;
-    }
-    else if (containsType(types, 'http://www.w3.org/ns/iana/media-types/application/pdf#Resource')) {
-        return AvailableApps.DocumentViewer;
-    }
-    else if (containsType(types, 'http://purl.org/dc/terms/Image')) {
-        return AvailableApps.ImageViewer;
-    }
-    else if (containsType(types, 'http://www.w3.org/2007/ont/link#Document')) {
-        return AvailableApps.DocumentViewer;
-    }
-    else {
-        return AvailableApps.Generic;
-    }
-}
-
-const PosTypeRouter = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.subscribeResource = createEvent(this, "pod-os:resource", 7);
-        this.receiveResource = (resource) => {
-            this.types = resource.types();
-        };
-    }
-    componentWillLoad() {
-        subscribeResource(this);
-    }
-    render() {
-        return this.types ? this.renderApp() : null;
-    }
-    renderApp() {
-        const App = selectAppForTypes(this.types);
-        return h(App, null);
-    }
-};
-
-export { Icon as ion_icon, ProgressBar as ion_progress_bar, RippleEffect as ion_ripple_effect, SkeletonText as ion_skeleton_text, Toast as ion_toast, PosAddNewThing as pos_add_new_thing, PosApp as pos_app, PosAppBrowser as pos_app_browser, PosAppDashboard as pos_app_dashboard, PosAppSettings as pos_app_settings, PosDescription as pos_description, PosDialog as pos_dialog, PosErrorToast as pos_error_toast, PosExampleResources as pos_example_resources, PosGettingStarted as pos_getting_started, PosImage as pos_image, PosInternalRouter as pos_internal_router, PosLabel as pos_label, PosLogin as pos_login, PosLoginForm as pos_login_form, PosMakeFindable as pos_make_findable, PosNavigation as pos_navigation, PosNavigationBar as pos_navigation_bar, PosNewThingForm as pos_new_thing_form, PosPicture as pos_picture, PosResource as pos_resource, PosRichLink as pos_rich_link, PosRouter as pos_router, PosSelectTerm as pos_select_term, PosSettingOfflineCache as pos_setting_offline_cache, PosTypeRouter as pos_type_router };
-
-//# sourceMappingURL=ion-icon_31.entry.js.map