@pod-os/elements 0.7.1-92705ee.0 → 0.7.1-a71f01c.0

package/dist/components/header.js

@@ -0,0 +1,360 @@
+import { readTask, writeTask, proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getIonMode } from './ionic-global.js';
+import { g as getScrollElement, a as findIonContent, p as printIonContentErrorMsg } from './index5.js';
+import { l as clamp, i as inheritAriaAttributes } from './helpers.js';
+import { h as hostContext } from './theme.js';
+
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const TRANSITION = 'all 0.2s ease-in-out';
+const cloneElement = (tagName) => {
+  const getCachedEl = document.querySelector(`${tagName}.ion-cloned-element`);
+  if (getCachedEl !== null) {
+    return getCachedEl;
+  }
+  const clonedEl = document.createElement(tagName);
+  clonedEl.classList.add('ion-cloned-element');
+  clonedEl.style.setProperty('display', 'none');
+  document.body.appendChild(clonedEl);
+  return clonedEl;
+};
+const createHeaderIndex = (headerEl) => {
+  if (!headerEl) {
+    return;
+  }
+  const toolbars = headerEl.querySelectorAll('ion-toolbar');
+  return {
+    el: headerEl,
+    toolbars: Array.from(toolbars).map((toolbar) => {
+      const ionTitleEl = toolbar.querySelector('ion-title');
+      return {
+        el: toolbar,
+        background: toolbar.shadowRoot.querySelector('.toolbar-background'),
+        ionTitleEl,
+        innerTitleEl: ionTitleEl ? ionTitleEl.shadowRoot.querySelector('.toolbar-title') : null,
+        ionButtonsEl: Array.from(toolbar.querySelectorAll('ion-buttons')),
+      };
+    }),
+  };
+};
+const handleContentScroll = (scrollEl, scrollHeaderIndex, contentEl) => {
+  readTask(() => {
+    const scrollTop = scrollEl.scrollTop;
+    const scale = clamp(1, 1 + -scrollTop / 500, 1.1);
+    // Native refresher should not cause titles to scale
+    const nativeRefresher = contentEl.querySelector('ion-refresher.refresher-native');
+    if (nativeRefresher === null) {
+      writeTask(() => {
+        scaleLargeTitles(scrollHeaderIndex.toolbars, scale);
+      });
+    }
+  });
+};
+const setToolbarBackgroundOpacity = (headerEl, opacity) => {
+  /**
+   * Fading in the backdrop opacity
+   * should happen after the large title
+   * has collapsed, so it is handled
+   * by handleHeaderFade()
+   */
+  if (headerEl.collapse === 'fade') {
+    return;
+  }
+  if (opacity === undefined) {
+    headerEl.style.removeProperty('--opacity-scale');
+  }
+  else {
+    headerEl.style.setProperty('--opacity-scale', opacity.toString());
+  }
+};
+const handleToolbarBorderIntersection = (ev, mainHeaderIndex, scrollTop) => {
+  if (!ev[0].isIntersecting) {
+    return;
+  }
+  /**
+   * There is a bug in Safari where overflow scrolling on a non-body element
+   * does not always reset the scrollTop position to 0 when letting go. It will
+   * set to 1 once the rubber band effect has ended. This causes the background to
+   * appear slightly on certain app setups.
+   *
+   * Additionally, we check if user is rubber banding (scrolling is negative)
+   * as this can mean they are using pull to refresh. Once the refresher starts,
+   * the content is transformed which can cause the intersection observer to erroneously
+   * fire here as well.
+   */
+  const scale = ev[0].intersectionRatio > 0.9 || scrollTop <= 0 ? 0 : ((1 - ev[0].intersectionRatio) * 100) / 75;
+  setToolbarBackgroundOpacity(mainHeaderIndex.el, scale === 1 ? undefined : scale);
+};
+/**
+ * If toolbars are intersecting, hide the scrollable toolbar content
+ * and show the primary toolbar content. If the toolbars are not intersecting,
+ * hide the primary toolbar content and show the scrollable toolbar content
+ */
+const handleToolbarIntersection = (ev, mainHeaderIndex, scrollHeaderIndex, scrollEl) => {
+  writeTask(() => {
+    const scrollTop = scrollEl.scrollTop;
+    handleToolbarBorderIntersection(ev, mainHeaderIndex, scrollTop);
+    const event = ev[0];
+    const intersection = event.intersectionRect;
+    const intersectionArea = intersection.width * intersection.height;
+    const rootArea = event.rootBounds.width * event.rootBounds.height;
+    const isPageHidden = intersectionArea === 0 && rootArea === 0;
+    const leftDiff = Math.abs(intersection.left - event.boundingClientRect.left);
+    const rightDiff = Math.abs(intersection.right - event.boundingClientRect.right);
+    const isPageTransitioning = intersectionArea > 0 && (leftDiff >= 5 || rightDiff >= 5);
+    if (isPageHidden || isPageTransitioning) {
+      return;
+    }
+    if (event.isIntersecting) {
+      setHeaderActive(mainHeaderIndex, false);
+      setHeaderActive(scrollHeaderIndex);
+    }
+    else {
+      /**
+       * There is a bug with IntersectionObserver on Safari
+       * where `event.isIntersecting === false` when cancelling
+       * a swipe to go back gesture. Checking the intersection
+       * x, y, width, and height provides a workaround. This bug
+       * does not happen when using Safari + Web Animations,
+       * only Safari + CSS Animations.
+       */
+      const hasValidIntersection = (intersection.x === 0 && intersection.y === 0) || (intersection.width !== 0 && intersection.height !== 0);
+      if (hasValidIntersection && scrollTop > 0) {
+        setHeaderActive(mainHeaderIndex);
+        setHeaderActive(scrollHeaderIndex, false);
+        setToolbarBackgroundOpacity(mainHeaderIndex.el);
+      }
+    }
+  });
+};
+const setHeaderActive = (headerIndex, active = true) => {
+  const headerEl = headerIndex.el;
+  if (active) {
+    headerEl.classList.remove('header-collapse-condense-inactive');
+    headerEl.removeAttribute('aria-hidden');
+  }
+  else {
+    headerEl.classList.add('header-collapse-condense-inactive');
+    headerEl.setAttribute('aria-hidden', 'true');
+  }
+};
+const scaleLargeTitles = (toolbars = [], scale = 1, transition = false) => {
+  toolbars.forEach((toolbar) => {
+    const ionTitle = toolbar.ionTitleEl;
+    const titleDiv = toolbar.innerTitleEl;
+    if (!ionTitle || ionTitle.size !== 'large') {
+      return;
+    }
+    titleDiv.style.transition = transition ? TRANSITION : '';
+    titleDiv.style.transform = `scale3d(${scale}, ${scale}, 1)`;
+  });
+};
+const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
+  readTask(() => {
+    const scrollTop = scrollEl.scrollTop;
+    const baseElHeight = baseEl.clientHeight;
+    const fadeStart = condenseHeader ? condenseHeader.clientHeight : 0;
+    /**
+     * If we are using fade header with a condense
+     * header, then the toolbar backgrounds should
+     * not begin to fade in until the condense
+     * header has fully collapsed.
+     *
+     * Additionally, the main content should not
+     * overflow out of the container until the
+     * condense header has fully collapsed. When
+     * using just the condense header the content
+     * should overflow out of the container.
+     */
+    if (condenseHeader !== null && scrollTop < fadeStart) {
+      baseEl.style.setProperty('--opacity-scale', '0');
+      scrollEl.style.setProperty('clip-path', `inset(${baseElHeight}px 0px 0px 0px)`);
+      return;
+    }
+    const distanceToStart = scrollTop - fadeStart;
+    const fadeDuration = 10;
+    const scale = clamp(0, distanceToStart / fadeDuration, 1);
+    writeTask(() => {
+      scrollEl.style.removeProperty('clip-path');
+      baseEl.style.setProperty('--opacity-scale', scale.toString());
+    });
+  });
+};
+
+const headerIosCss = "ion-header{display:block;position:relative;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-ios ion-toolbar:last-of-type{--border-width:0 0 0.55px}@supports (backdrop-filter: blur(0)){.header-background{left:0;right:0;top:0;bottom:0;position:absolute;backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:.8}.header-collapse-condense-inactive .header-background{backdrop-filter:blur(20px)}}.header-ios.ion-no-border ion-toolbar:last-of-type{--border-width:0}.header-collapse-fade ion-toolbar{--opacity-scale:inherit}.header-collapse-condense{z-index:9}.header-collapse-condense ion-toolbar{position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:7px;z-index:1}.header-collapse-condense ion-toolbar{--background:var(--ion-background-color, #fff);z-index:0}.header-collapse-condense ion-toolbar:last-of-type{--border-width:0px}.header-collapse-condense ion-toolbar ion-searchbar{height:48px;padding-top:0px;padding-bottom:13px}.header-collapse-main{--opacity-scale:1}.header-collapse-main ion-toolbar{--opacity-scale:inherit}.header-collapse-main ion-toolbar.in-toolbar ion-title,.header-collapse-main ion-toolbar.in-toolbar ion-buttons{transition:all 0.2s ease-in-out}.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse{opacity:0;pointer-events:none}.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse{visibility:hidden}";
+
+const headerMdCss = "ion-header{display:block;position:relative;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-md::after{left:0;bottom:-5px;background-position:left 0 top -2px;position:absolute;width:100%;height:5px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAHBAMAAADzDtBxAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABXRSTlMUCS0gBIh/TXEAAAAaSURBVAjXYxCEAgY4UIICBmMogMsgFLtAAQCNSwXZKOdPxgAAAABJRU5ErkJggg==);background-repeat:repeat-x;content:\"\"}[dir=rtl] .header-md::after,:host-context([dir=rtl]) .header-md::after{left:unset;right:unset;right:0}[dir=rtl] .header-md::after,:host-context([dir=rtl]) .header-md::after{background-position:right 0 top -2px}.header-collapse-condense{display:none}.header-md.ion-no-border::after{display:none}";
+
+const Header = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.inheritedAttributes = {};
+    /**
+     * If `true`, the header will be translucent.
+     * Only applies when the mode is `"ios"` and the device supports
+     * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+     *
+     * Note: In order to scroll content behind the header, the `fullscreen`
+     * attribute needs to be set on the content.
+     */
+    this.translucent = false;
+    this.setupFadeHeader = async (contentEl, condenseHeader) => {
+      const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
+      /**
+       * Handle fading of toolbars on scroll
+       */
+      this.contentScrollCallback = () => {
+        handleHeaderFade(this.scrollEl, this.el, condenseHeader);
+      };
+      scrollEl.addEventListener('scroll', this.contentScrollCallback);
+      handleHeaderFade(this.scrollEl, this.el, condenseHeader);
+    };
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAriaAttributes(this.el);
+  }
+  componentDidLoad() {
+    this.checkCollapsibleHeader();
+  }
+  componentDidUpdate() {
+    this.checkCollapsibleHeader();
+  }
+  disconnectedCallback() {
+    this.destroyCollapsibleHeader();
+  }
+  async checkCollapsibleHeader() {
+    const mode = getIonMode(this);
+    if (mode !== 'ios') {
+      return;
+    }
+    const { collapse } = this;
+    const hasCondense = collapse === 'condense';
+    const hasFade = collapse === 'fade';
+    this.destroyCollapsibleHeader();
+    if (hasCondense) {
+      const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+      const contentEl = pageEl ? findIonContent(pageEl) : null;
+      // Cloned elements are always needed in iOS transition
+      writeTask(() => {
+        const title = cloneElement('ion-title');
+        title.size = 'large';
+        cloneElement('ion-back-button');
+      });
+      await this.setupCondenseHeader(contentEl, pageEl);
+    }
+    else if (hasFade) {
+      const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+      const contentEl = pageEl ? findIonContent(pageEl) : null;
+      if (!contentEl) {
+        printIonContentErrorMsg(this.el);
+        return;
+      }
+      const condenseHeader = contentEl.querySelector('ion-header[collapse="condense"]');
+      await this.setupFadeHeader(contentEl, condenseHeader);
+    }
+  }
+  destroyCollapsibleHeader() {
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = undefined;
+    }
+    if (this.scrollEl && this.contentScrollCallback) {
+      this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
+      this.contentScrollCallback = undefined;
+    }
+    if (this.collapsibleMainHeader) {
+      this.collapsibleMainHeader.classList.remove('header-collapse-main');
+      this.collapsibleMainHeader = undefined;
+    }
+  }
+  async setupCondenseHeader(contentEl, pageEl) {
+    if (!contentEl || !pageEl) {
+      printIonContentErrorMsg(this.el);
+      return;
+    }
+    if (typeof IntersectionObserver === 'undefined') {
+      return;
+    }
+    this.scrollEl = await getScrollElement(contentEl);
+    const headers = pageEl.querySelectorAll('ion-header');
+    this.collapsibleMainHeader = Array.from(headers).find((header) => header.collapse !== 'condense');
+    if (!this.collapsibleMainHeader) {
+      return;
+    }
+    const mainHeaderIndex = createHeaderIndex(this.collapsibleMainHeader);
+    const scrollHeaderIndex = createHeaderIndex(this.el);
+    if (!mainHeaderIndex || !scrollHeaderIndex) {
+      return;
+    }
+    setHeaderActive(mainHeaderIndex, false);
+    setToolbarBackgroundOpacity(mainHeaderIndex.el, 0);
+    /**
+     * Handle interaction between toolbar collapse and
+     * showing/hiding content in the primary ion-header
+     * as well as progressively showing/hiding the main header
+     * border as the top-most toolbar collapses or expands.
+     */
+    const toolbarIntersection = (ev) => {
+      handleToolbarIntersection(ev, mainHeaderIndex, scrollHeaderIndex, this.scrollEl);
+    };
+    this.intersectionObserver = new IntersectionObserver(toolbarIntersection, {
+      root: contentEl,
+      threshold: [0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
+    });
+    this.intersectionObserver.observe(scrollHeaderIndex.toolbars[scrollHeaderIndex.toolbars.length - 1].el);
+    /**
+     * Handle scaling of large iOS titles and
+     * showing/hiding border on last toolbar
+     * in primary header
+     */
+    this.contentScrollCallback = () => {
+      handleContentScroll(this.scrollEl, scrollHeaderIndex, contentEl);
+    };
+    this.scrollEl.addEventListener('scroll', this.contentScrollCallback);
+    writeTask(() => {
+      if (this.collapsibleMainHeader !== undefined) {
+        this.collapsibleMainHeader.classList.add('header-collapse-main');
+      }
+    });
+  }
+  render() {
+    const { translucent, inheritedAttributes } = this;
+    const mode = getIonMode(this);
+    const collapse = this.collapse || 'none';
+    // banner role must be at top level, so remove role if inside a menu
+    const roleType = hostContext('ion-menu', this.el) ? 'none' : 'banner';
+    return (h(Host, Object.assign({ role: roleType, class: {
+        [mode]: true,
+        // Used internally for styling
+        [`header-${mode}`]: true,
+        [`header-translucent`]: this.translucent,
+        [`header-collapse-${collapse}`]: true,
+        [`header-translucent-${mode}`]: this.translucent,
+      } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { class: "header-background" }), h("slot", null)));
+  }
+  get el() { return this; }
+  static get style() { return {
+    ios: headerIosCss,
+    md: headerMdCss
+  }; }
+}, [36, "ion-header", {
+    "collapse": [1],
+    "translucent": [4]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-header"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-header":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Header);
+      }
+      break;
+  } });
+}
+
+export { Header as H, defineCustomElement as d };

package/dist/{esm/helpers-44e3bd9f.js → components/helpers.js}

@@ -1,3 +1,49 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const transitionEndAsync = (el, expectedDuration = 0) => {
+  return new Promise((resolve) => {
+    transitionEnd(el, expectedDuration, resolve);
+  });
+};
+/**
+ * Allows developer to wait for a transition
+ * to finish and fallback to a timer if the
+ * transition is cancelled or otherwise
+ * never finishes. Also see transitionEndAsync
+ * which is an await-able version of this.
+ */
+const transitionEnd = (el, expectedDuration = 0, callback) => {
+  let unRegTrans;
+  let animationTimeout;
+  const opts = { passive: true };
+  const ANIMATION_FALLBACK_TIMEOUT = 500;
+  const unregister = () => {
+    if (unRegTrans) {
+      unRegTrans();
+    }
+  };
+  const onTransitionEnd = (ev) => {
+    if (ev === undefined || el === ev.target) {
+      unregister();
+      callback(ev);
+    }
+  };
+  if (el) {
+    el.addEventListener('webkitTransitionEnd', onTransitionEnd, opts);
+    el.addEventListener('transitionend', onTransitionEnd, opts);
+    animationTimeout = setTimeout(onTransitionEnd, expectedDuration + ANIMATION_FALLBACK_TIMEOUT);
+    unRegTrans = () => {
+      if (animationTimeout) {
+        clearTimeout(animationTimeout);
+        animationTimeout = undefined;
+      }
+      el.removeEventListener('webkitTransitionEnd', onTransitionEnd, opts);
+      el.removeEventListener('transitionend', onTransitionEnd, opts);
+    };
+  }
+  return unregister;
+};
 /**
  * Waits for a component to be ready for
  * both custom element and non-custom element builds.
@@ -12,6 +58,7 @@
  */
 const componentOnReady = (el, callback) => {
   if (el.componentOnReady) {
+    // eslint-disable-next-line custom-rules/no-component-on-ready-method
     el.componentOnReady().then((resolvedEl) => callback(resolvedEl));
   }
   else {
@@ -30,7 +77,7 @@ const componentOnReady = (el, callback) => {
  */
 const inheritAttributes = (el, attributes = []) => {
   const attributeObject = {};
-  attributes.forEach(attr => {
+  attributes.forEach((attr) => {
     if (el.hasAttribute(attr)) {
       const value = el.getAttribute(attr);
       if (value !== null) {
@@ -103,14 +150,21 @@ const ariaAttributes = [
  * Returns an array of aria attributes that should be copied from
  * the shadow host element to a target within the light DOM.
  * @param el The element that the attributes should be copied from.
+ * @param ignoreList The list of aria-attributes to ignore reflecting and removing from the host.
+ * Use this in instances where we manually specify aria attributes on the `<Host>` element.
  */
-const inheritAriaAttributes = (el) => {
-  return inheritAttributes(el, ariaAttributes);
+const inheritAriaAttributes = (el, ignoreList) => {
+  let attributesToInherit = ariaAttributes;
+  if (ignoreList && ignoreList.length > 0) {
+    attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr));
+  }
+  return inheritAttributes(el, attributesToInherit);
 };
 const addEventListener = (el, eventName, callback, opts) => {
+  var _a;
   if (typeof window !== 'undefined') {
     const win = window;
-    const config = win && win.Ionic && win.Ionic.config;
+    const config = (_a = win === null || win === void 0 ? void 0 : win.Ionic) === null || _a === void 0 ? void 0 : _a.config;
     if (config) {
       const ael = config.get('_ael');
       if (ael) {
@@ -124,9 +178,10 @@ const addEventListener = (el, eventName, callback, opts) => {
   return el.addEventListener(eventName, callback, opts);
 };
 const removeEventListener = (el, eventName, callback, opts) => {
+  var _a;
   if (typeof window !== 'undefined') {
     const win = window;
-    const config = win && win.Ionic && win.Ionic.config;
+    const config = (_a = win === null || win === void 0 ? void 0 : win.Ionic) === null || _a === void 0 ? void 0 : _a.config;
     if (config) {
       const rel = config.get('_rel');
       if (rel) {
@@ -174,6 +229,23 @@ const findItemLabel = (componentEl) => {
   }
   return null;
 };
+const focusElement = (el) => {
+  el.focus();
+  /**
+   * When programmatically focusing an element,
+   * the focus-visible utility will not run because
+   * it is expecting a keyboard event to have triggered this;
+   * however, there are times when we need to manually control
+   * this behavior so we call the `setFocus` method on ion-app
+   * which will let us explicitly set the elements to focus.
+   */
+  if (el.classList.contains('ion-focusable')) {
+    const app = el.closest('ion-app');
+    if (app) {
+      app.setFocus([el]);
+    }
+  }
+};
 /**
  * This method is used for Ionic's input components that use Shadow DOM. In
  * order to properly label the inputs to work with screen readers, we need
@@ -195,12 +267,8 @@ const getAriaLabel = (componentEl, inputId) => {
   // Grab the id off of the component in case they are using
   // a custom label using the label element
   const componentId = componentEl.id;
-  let labelId = labelledBy !== null && labelledBy.trim() !== ''
-    ? labelledBy
-    : inputId + '-lbl';
-  let label = labelledBy !== null && labelledBy.trim() !== ''
-    ? document.getElementById(labelledBy)
-    : findItemLabel(componentEl);
+  let labelId = labelledBy !== null && labelledBy.trim() !== '' ? labelledBy : inputId + '-lbl';
+  let label = labelledBy !== null && labelledBy.trim() !== '' ? document.getElementById(labelledBy) : findItemLabel(componentEl);
   if (label) {
     if (labelledBy === null) {
       label.id = labelId;
@@ -257,7 +325,7 @@ const assert = (actual, reason) => {
   if (!actual) {
     const message = 'ASSERT: ' + reason;
     console.error(message);
-    debugger; // tslint:disable-line
+    debugger; // eslint-disable-line
     throw new Error(message);
   }
 };
@@ -289,8 +357,10 @@ const pointerCoord = (ev) => {
 const isEndSide = (side) => {
   const isRTL = document.dir === 'rtl';
   switch (side) {
-    case 'start': return isRTL;
-    case 'end': return !isRTL;
+    case 'start':
+      return isRTL;
+    case 'end':
+      return !isRTL;
     default:
       throw new Error(`"${side}" is not a valid value for [side]. Use "start" or "end" instead.`);
   }
@@ -299,7 +369,7 @@ const debounceEvent = (event, wait) => {
   const original = event._original || event;
   return {
     _original: event,
-    emit: debounce(original.emit.bind(original), wait)
+    emit: debounce(original.emit.bind(original), wait),
   };
 };
 const debounce = (func, wait = 0) => {
@@ -309,5 +379,32 @@ const debounce = (func, wait = 0) => {
     timer = setTimeout(func, wait, ...args);
   };
 };
+/**
+ * Check whether the two string maps are shallow equal.
+ *
+ * undefined is treated as an empty map.
+ *
+ * @returns whether the keys are the same and the values are shallow equal.
+ */
+const shallowEqualStringMap = (map1, map2) => {
+  map1 !== null && map1 !== void 0 ? map1 : (map1 = {});
+  map2 !== null && map2 !== void 0 ? map2 : (map2 = {});
+  if (map1 === map2) {
+    return true;
+  }
+  const keys1 = Object.keys(map1);
+  if (keys1.length !== Object.keys(map2).length) {
+    return false;
+  }
+  for (const k1 of keys1) {
+    if (!(k1 in map2)) {
+      return false;
+    }
+    if (map1[k1] !== map2[k1]) {
+      return false;
+    }
+  }
+  return true;
+};
 
-export { componentOnReady as a, addEventListener as b, clamp as c, debounceEvent as d, removeEventListener as e, getAriaLabel as f, getElementRoot as g, hasShadowDom as h, inheritAriaAttributes as i, renderHiddenInput as j, findItemLabel as k, inheritAttributes as l, isEndSide as m, assert as n, debounce as o, pointerCoord as p, now as q, raf as r };
+export { addEventListener as a, removeEventListener as b, renderHiddenInput as c, componentOnReady as d, inheritAttributes as e, debounceEvent as f, getElementRoot as g, findItemLabel as h, inheritAriaAttributes as i, isEndSide as j, assert as k, clamp as l, getAriaLabel as m, debounce as n, focusElement as o, pointerCoord as p, hasShadowDom as q, raf as r, shallowEqualStringMap as s, transitionEndAsync as t, now as u };