q2-tecton-elements 1.10.3 → 1.10.4

package/dist/collection/components/q2-tab-container/index.js

@@ -1,4 +1,4 @@
-import { Component, Prop, Element, Event, State, Listen, Watch, h } from '@stencil/core';
+import { Component, Prop, Element, Event, State, Listen, Watch, h, Fragment } from '@stencil/core';
 import { createGuid, loc, addSmoothScrollPolyfill } from 'src/utils';
 addSmoothScrollPolyfill();
 const userAgent = navigator.userAgent.toLowerCase();
@@ -11,6 +11,9 @@ export class Q2TabContainer {
     this.lastScrolled = new Date(null).getTime();
     this.hasLeft = false;
     this.hasRight = false;
+    this.scrollEnabled = false;
+    this.showScrollLeft = false;
+    this.showScrollRight = false;
     ///////// Actions /////////
     this.updateTabData = () => {
       this.updateTabPaneProps();
@@ -24,131 +27,97 @@ export class Q2TabContainer {
       });
     };
     this.setTabs = () => {
-      this.tabs = this.tabPanes.map(({ label, value }) => {
-        return {
-          label: (label && loc(label)) || '',
-          value
-        };
-      });
+      this.tabs = this.tabPanes.map(({ label, value }) => ({
+        label: (label && loc(label)) || '',
+        value
+      }));
     };
     this.onTabClick = (event) => {
+      const isAlreadySelected = this.value === event.target.dataset.value;
+      if (isAlreadySelected)
+        return;
       this.change.emit({
         value: event.target.dataset.value
       });
     };
     this.onTabKeyDown = (event) => {
       const value = event.target.dataset.value;
-      if (event.key === 'ArrowRight' || event.key === 'Right') {
-        this.moveToAdjacentTab(value, 'next');
-        return;
-      }
-      if (event.key === 'ArrowLeft' || event.key === 'Left') {
-        this.moveToAdjacentTab(value, 'prev');
-        return;
-      }
-      if (event.code === 'Space' || event.code === 'Enter') {
-        // to prevent triggering scroll when press the space key
-        event.preventDefault();
-        this.change.emit({ value });
-        return;
+      switch (event.key) {
+        case 'ArrowRight':
+          event.preventDefault();
+          this.moveToAdjacentTab(value, 'next');
+          break;
+        case 'ArrowLeft':
+          event.preventDefault();
+          this.moveToAdjacentTab(value, 'prev');
+          break;
+        case 'Home':
+          event.preventDefault();
+          this.moveToAdjacentTab(value, 'first');
+          break;
+        case 'End':
+          event.preventDefault();
+          this.moveToAdjacentTab(value, 'last');
+          break;
+        case 'Space':
+        case 'Enter':
+          event.preventDefault();
+          this.change.emit({ value });
+          break;
       }
     };
     this.moveToAdjacentTab = (value, direction) => {
       let index = this.tabs.map(({ value }) => value).indexOf(value);
-      let newIndex = direction === 'next'
-        ? Math.min(index + 1, this.tabs.length - 1)
-        : Math.max(index - 1, 0);
-      if (index !== newIndex) {
-        const focusedTab = this.moveFocus(newIndex);
-        // Scroll only if it overflows
-        if (this.tabList.scrollWidth > this.tabList.clientWidth) {
-          // Scroll only if it's first or last tab
-          if (newIndex !== 0 && newIndex !== this.tabs.length - 1) {
-            this.scrollByKeyboard(direction, focusedTab);
-          }
-          else {
-            // first or last element: just show or hide nav arrow
-            this.onTabScroll(direction);
-          }
-        }
+      let newIndex;
+      switch (direction) {
+        case 'next':
+          newIndex = Math.min(index + 1, this.tabs.length - 1);
+          break;
+        case 'prev':
+          newIndex = Math.max(index - 1, 0);
+          break;
+        case 'first':
+          newIndex = 0;
+          break;
+        case 'last':
+          newIndex = this.tabs.length - 1;
+          break;
       }
+      if (index === newIndex)
+        return;
+      this.moveFocus(newIndex, false);
     };
     this.moveFocus = (index, preventScroll = true) => {
       const focusedValue = this.tabs[index].value;
-      const focusedTab = this.hostElement.shadowRoot.querySelector(`.tab-list a[data-value="${focusedValue}"]`);
+      const focusedTab = this.listElement.querySelector(`[data-value="${focusedValue}"]`);
       focusedTab.focus({ preventScroll });
+      const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;
+      this.listElement.scrollTo({
+        left,
+        behavior: 'smooth'
+      });
       return focusedTab;
     };
-    this.calculateKeyboardScroll = (direction, focusedTab) => {
-      const { left: tabListLeft } = this.tabList.getBoundingClientRect();
-      const { left: focusedTabLeft } = focusedTab.getBoundingClientRect();
-      const arrowWidth = 46;
-      let scrollAmount = 0;
-      // check how much focused tab overflows
-      if (direction === 'next' &&
-        focusedTabLeft + focusedTab.clientWidth >
-          tabListLeft + this.tabList.clientWidth + arrowWidth) {
-        scrollAmount =
-          this.tabList.scrollLeft +
-            arrowWidth +
-            (focusedTabLeft + focusedTab.clientWidth) -
-            (tabListLeft + this.tabList.clientWidth);
-      }
-      else if (direction === 'prev' && focusedTabLeft + arrowWidth < tabListLeft) {
-        scrollAmount = this.tabList.scrollLeft - arrowWidth + (focusedTabLeft - tabListLeft);
-      }
-      return scrollAmount;
+    this.checkScrollState = () => {
+      const { scrollLeft, scrollWidth, clientWidth } = this.listElement;
+      this.scrollEnabled = scrollWidth > clientWidth;
+      this.showScrollLeft = !!scrollLeft;
+      this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;
     };
-    this.scrollByKeyboard = (direction, focusedTab) => {
-      const scrollAmount = this.calculateKeyboardScroll(direction, focusedTab);
-      if (scrollAmount !== 0) {
-        this.tabList.scroll({ left: scrollAmount, behavior: 'smooth' });
-        // wait to finish scroll then show or hide nav arrow
-        setTimeout(() => this.onTabScroll(), 100);
-      }
-    };
-    this.calculateTabScroll = ({ direction, scrollWidth, clientWidth, scrollLeft }) => {
-      const directions = { prev: -1, next: 1 };
-      // step 0 means no scroll needed, re-render or resize can trigger this
-      const step = directions[direction] || 0;
-      const scrollRate = 0.5; // half of visual width
-      const delta = Math.round(clientWidth * scrollRate);
-      const newScrollLeft = scrollLeft + step * delta;
-      const scrolled = clientWidth + newScrollLeft;
-      const hasLeft = newScrollLeft > 0;
-      const hasRight = scrollWidth > scrolled;
-      return {
-        newScrollLeft,
-        hasLeft,
-        hasRight
-      };
-    };
-    this.onTabScroll = (direction) => {
-      // throttle under 50ms due to re-rendering & resizing
-      const now = new Date().getTime();
-      if (now - this.lastScrolled < 50)
-        return;
-      this.lastScrolled = now;
-      if (!this.tabList)
-        return;
-      let { scrollWidth, clientWidth, scrollLeft } = this.tabList;
-      const { newScrollLeft, hasLeft, hasRight } = this.calculateTabScroll({
-        direction,
-        scrollWidth,
-        clientWidth,
-        scrollLeft
+    this.onScrollBtnClick = (direction) => {
+      const scrollAmount = Math.floor(this.listElement.clientWidth / 2);
+      this.listElement.scrollBy({
+        left: direction === 'left' ? -scrollAmount : scrollAmount,
+        behavior: 'smooth'
       });
-      this.hasLeft = hasLeft;
-      this.hasRight = hasRight;
-      if (direction) {
-        this.tabList.scroll({ left: newScrollLeft, behavior: 'smooth' });
-      }
+    };
+    this.onSlotChange = () => {
+      this.checkScrollState();
     };
   }
   resizeIframe() {
-    return (window.TectonElements &&
-      window.TectonElements.resizeIframe &&
-      window.TectonElements.resizeIframe());
+    var _a, _b;
+    return (_b = (_a = window.TectonElements) === null || _a === void 0 ? void 0 : _a.resizeIframe) === null || _b === void 0 ? void 0 : _b.call(_a);
   }
   get tabPanes() {
     const tabPanes = this.hostElement.querySelectorAll('q2-tab-pane, tecton-tab-pane');
@@ -170,7 +139,7 @@ export class Q2TabContainer {
     }
   }
   onResize() {
-    this.onTabScroll();
+    this.checkScrollState();
   }
   onFocus() {
     // firefox receives focus on overflowed element even if it's not interactive element
@@ -184,25 +153,26 @@ export class Q2TabContainer {
     const observer = new MutationObserver(this.updateTabData);
     observer.observe(this.hostElement, { childList: true, attributes: true });
     this.mutationObserver = observer;
+    this.resizeObserver = new ResizeObserver(() => this.checkScrollState());
     this.updateTabData();
   }
   componentDidRender() {
     this.scheduledAfterRender.forEach(fn => fn());
     this.scheduledAfterRender = [];
     this.settled.emit();
-    this.onTabScroll();
   }
   componentDidLoad() {
+    this.resizeObserver.observe(this.listElement);
+    this.checkScrollState();
     const index = this.tabs.findIndex(el => el.value === this.value);
-    // move focus if the value is valid and not the first tab's value
-    if (index > 0) {
-      this.scheduledAfterRender.push(() => {
-        const tab = this.moveFocus(index, false);
-        tab.blur();
-      });
-    }
+    this.scheduledAfterRender.push(() => {
+      const tab = this.moveFocus(Math.max(index, 0), false);
+      this.value = tab.dataset.value;
+      tab.blur();
+    });
   }
   disconnectedCallback() {
+    this.resizeObserver.disconnect();
     this.mutationObserver.disconnect();
     this.mutationObserver = null;
   }
@@ -220,30 +190,29 @@ export class Q2TabContainer {
   }
   ///////// View Methods /////////
   render() {
-    return (h("div", { class: "tab-container" },
-      h("ul", { class: `tab-list ${this.noPrint ? 'no-print' : ''}`, role: "tablist" },
-        this.hasLeft && (h("li", { role: "presentation", class: "nav nav-left", onClick: () => this.onTabScroll('prev') },
-          h("div", { class: "arrow-container" },
-            h("a", null,
-              h("q2-icon", { type: "chevron-left" }))))),
-        this.tabs.map((tab, index) => this.generateTab(tab, index)),
-        this.hasRight && (h("li", { role: "presentation", class: "nav nav-right", onClick: () => this.onTabScroll('next') },
-          h("div", { class: "arrow-container" },
-            h("a", null,
-              h("q2-icon", { type: "chevron-right" })))))),
+    return (h(Fragment, null,
+      h("div", { class: "tab-container" },
+        this.scrollEnabled && (h(Fragment, null,
+          h("div", { class: "gradient-left", hidden: !this.showScrollLeft }),
+          h("div", { class: "gradient-right", hidden: !this.showScrollRight }),
+          h("q2-btn", { class: "btn-left", hidden: !this.showScrollLeft, onClick: () => this.onScrollBtnClick('left') },
+            h("q2-icon", { type: "chevron-left" })),
+          h("q2-btn", { class: "btn-right", hidden: !this.showScrollRight, onClick: () => this.onScrollBtnClick('right') },
+            h("q2-icon", { type: "chevron-right" })))),
+        h("ul", { onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.generateTab(tab, index)))),
       h("div", { class: "tab-content" },
-        h("slot", null))));
+        h("slot", { onSlotchange: () => this.onSlotChange() }))));
   }
   generateTab(tab, index) {
     const { label, value } = tab;
     const isSelected = this.selectedTabValue === value;
     return (h("li", { role: "presentation" },
-      h("a", { id: `tab-${this.guid}-${index}`, href: "javascript://", "data-value": value, "test-id": "tabLink", tabIndex: isSelected ? 0 : -1, role: "tab", "aria-selected": `${isSelected}`, "aria-controls": `tab-pane-${this.guid}-${index}`, onClick: this.onTabClick, onKeyDown: this.onTabKeyDown }, label)));
+      h("button", { id: `tab-${this.guid}-${index}`, "data-value": value, "test-id": "tabLink", tabIndex: isSelected ? 0 : -1, role: "tab", "aria-selected": isSelected ? 'true' : undefined, "aria-controls": `tab-pane-${this.guid}-${index}`, onClick: this.onTabClick, onKeyDown: this.onTabKeyDown }, label)));
   }
   static get is() { return "q2-tab-container"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["styles.css"]
+    "$": ["styles.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["styles.css"]
@@ -339,6 +308,9 @@ export class Q2TabContainer {
   static get states() { return {
     "hasLeft": {},
     "hasRight": {},
+    "scrollEnabled": {},
+    "showScrollLeft": {},
+    "showScrollRight": {},
     "tabs": {}
   }; }
   static get events() { return [{

package/dist/collection/components/q2-tab-container/styles.css

@@ -64,120 +64,140 @@ button {
     visibility: hidden;
 }
 
+:host {
+  display: block;
+  position: relative;
+}
+
+button {
+  cursor: pointer;
+  margin: 0;
+}
 
 .tab-container {
-    position: relative;
-    display: flex;
-    flex-direction: column;
+  position: relative;
 }
-.tab-list {
-    padding: 0;
-    display: flex;
-    margin: 0;
-    list-style: none;
-    border-bottom: 1px solid
-        var(--tct-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));
-    white-space: nowrap;
-    overflow-x: hidden;
-    align-items: center;
+
+ul {
+  --comp-container-padding: var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-1, var(--app-scale-1, 5px)) 0;
+  padding: var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));
+  display: flex;
+  gap: var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1, 5px))));
+  list-style: none;
+  border-bottom: 1px solid var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));
+  overflow-x: auto;
+  align-items: center;
+  scrollbar-width: none;
+  scrollbar-color: transparent;
 }
-.tab-list li.nav {
-    position: absolute;
-    height: 44px;
-    width: 46px;
-}
-.tab-list li.nav-left {
-    left: -15px;
-    background: linear-gradient(to right, var(--tct-section-bg, var(--t-section-bg, #ffffff)) 60%, rgba(255,255,255,0));
-}
-.tab-list li.nav-right  {
-    right: -15px;
-    background: linear-gradient(to left, var(--tct-section-bg, var(--t-section-bg, #ffffff)) 60%, rgba(255,255,255,0));
-}
-.tab-list li.nav .arrow-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: inherit;
-    width: inherit;
-    cursor: pointer;
-}
-.tab-list li.nav .arrow-container a {
-    padding: 0;
-    margin: 0;
-    height: inherit;
-    width: inherit;
-    border-bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.tab-list li.nav .arrow-container a q2-icon {
-    width: 19px;
-    height: 19px;
-}
-
-.tab-list a {
-    width: var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%));
-    text-align: center;
-    text-decoration: none;
-    padding: var(--tct-scale-2, var(--app-scale-2, 10px));
-    margin: var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-1, var(--app-scale-1, 5px))
-        0;
-    color: var(--tct-tab-inactive-color, var(--t-tab-inactive, inherit));
-    font-size: var(--tct-tab-font-size, var(--t-tab-font-size, 17px));
-    border-bottom: 3px solid transparent;
-    display: block;
-    transition: color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)),
-        border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
-}
-
-:host([type='section']) .tab-list a {
-    font-size: inherit;
-    padding: var(--tct-scale-2, var(--app-scale-2, 10px))
-        var(--tct-scale-1, var(--app-scale-1, 5px));
+ul::-webkit-scrollbar {
+  width: 0;
+  height: 0;
 }
-
-@media screen and (max-width: 767px) {
-    .tab-list a {
-        font-size: inherit;
-        padding: var(--tct-scale-2, var(--app-scale-2, 10px))
-            var(--tct-scale-1, var(--app-scale-1, 5px));
-    }
+ul::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+ul::-webkit-scrollbar-track {
+  background: transparent;
 }
-
 @media print {
-    .tab-list.no-print {
-        display: none;
-    }
+  ul.no-print {
+    display: none;
+  }
+}
+
+li {
+  flex: 0 0 auto;
+}
+li button {
+  background: var(--tct-tab-inactive-bg-color, var(--t-tab-inactive-bg-color, transparent));
+  border-width: var(--tct-tab-inactive-border-width, var(--t-tab-inactive-border-width, 0 0 3px 0));
+  border-color: var(--tct-tab-inactive-border-color, var(--t-tab-inactive-border-color, transparent));
+  border-style: var(--tct-tab-inactive-border-style, var(--t-tab-inactive-border-style, solid));
+  border-radius: var(--tct-tab-border-radius, var(--t-tab-border-radius, 0));
+  width: var(--tct-tab-width, var(--t-tab-width, 100%));
+  text-align: var(--tct-tab-text-align, var(--t-tab-text-align, center));
+  text-decoration: var(--tct-tab-text-decoration, var(--t-tab-text-decoration, none));
+  padding: var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2, 10px))));
+  color: var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));
+  font-size: var(--tct-tab-font-size, var(--t-tab-font-size, 17px));
+  display: block;
+  transition: color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
+}
+:host([type=section]) li button {
+  --comp-tab-section-padding: var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px));
+  font-size: inherit;
+  padding: var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)));
+}
+li button:hover {
+  color: var(--tct-tab-hover-color, var(--t-tab-hover-color, var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e))));
+  background-color: var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit));
+  width: var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%));
+}
+li button[aria-selected=true] {
+  color: var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));
+  border-color: var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentColor));
+  border-style: var(--tct-tab-active-border-style, var(--t-tab-active-border-style, solid));
+  width: var(--tct-tab-active-width, var(--t-tab-active-width, 100%));
+  background-color: var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit));
+}
+:host([color=alt]) li button {
+  color: var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive-color, inherit));
+}
+:host([color=alt]) li button:hover, :host([color=alt]) li button[aria-selected=true] {
+  color: var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit));
+}
+@media screen and (max-width: 767px) {
+  li button {
+    --comp-tab-padding: var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px));
+    font-size: inherit;
+    padding: var(--tct-tab-padding, var(--t-tab-padding, var(--comp-tab-padding)));
+  }
 }
 
-.tab-list a:hover {
-    color: var(--tct-tab-active-color, var(--t-tab-active, #2e2e2e));
-    background-color: var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit));
-    width: var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%));
+.tab-content {
+  --comp-tab-content-padding: var(--tct-scale-2, var(--app-scale-2, 10px)) 0;
+  padding: var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding)));
+}
+.tab-content:focus {
+  outline: none;
+  box-shadow: none;
 }
 
-.tab-list a[aria-selected='true'] {
-    color: var(--tct-tab-active-color, var(--t-tab-active, #2e2e2e));
-    border-color: currentColor;
-    width: var(--tct-tab-active-width, var(--t-tab-active-width, 100%));
-    background-color: var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit));
+.gradient-left,
+.gradient-right {
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 44px;
 }
 
-:host([color='alt']) .tab-list a {
-    color: var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive, inherit));
+.gradient-left {
+  background-image: linear-gradient(to right, var(--t-base), var(--t-base-a0));
+  left: 0;
 }
 
-:host([color='alt']) .tab-list a:hover,
-:host([color='alt']) .tab-list a[aria-selected='true'] {
-    color: var(--tct-tab-alt-active-color, var(--t-tab-alt-active, inherit));
+.gradient-right {
+  background-image: linear-gradient(to right, var(--t-base-a0), var(--t-base));
+  right: 0;
 }
 
-.tab-content {
-    padding: var(--tct-scale-2, var(--app-scale-2, 10px)) 0;
+.btn-left,
+.btn-right {
+  --tct-icon-size: 18px;
+  --tct-btn-icon-hover-bg: transparent;
+  --tct-btn-icon-width: 22px;
+  --tct-icon-stroke-primary: var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));
+  position: absolute;
+  top: calc(50% - 22px);
+  z-index: 2;
 }
-.tab-content:focus {
-	outline: none;
-	box-shadow: none;
+
+.btn-left {
+  left: 0;
 }
+
+.btn-right {
+  right: 0;
+}

package/dist/collection/components/tecton-tab-pane/index.js

@@ -14,6 +14,13 @@ export class TectonTabPane {
       .slice(-2)
       .join('-');
   }
+  componentWillRender() {
+    const loadingWrapper = this.hostElement.shadowRoot.querySelector('.loading-wrapper');
+    if (loadingWrapper) {
+      loadingWrapper.style.minHeight = this.minHeight;
+      loadingWrapper.hidden = !this.selected;
+    }
+  }
   componentWillLoad() {
     this._showForm = this.showForm;
   }
@@ -26,7 +33,11 @@ export class TectonTabPane {
   }
   ///////// Observers /////////
   selectedObserver() {
+    const loader = this.hostElement.shadowRoot.querySelector('div[slot="loading-wrapper"]');
     this._showForm = this.showForm; // reset state
+    if (loader) {
+      loader.hidden = !this.selected;
+    }
   }
   ///////// View Methods /////////
   render() {

package/dist/collection/utils/index.js

@@ -1,13 +1,19 @@
 import { h } from '@stencil/core';
 import smoothscroll from 'smoothscroll-polyfill';
 export function addSmoothScrollPolyfill() {
-  const userAgent = navigator.userAgent.toLowerCase();
-  const isSafari = userAgent.includes('safari') && !userAgent.includes('chrome');
-  if (!isSafari)
+  if (!isSafari())
     return false;
   smoothscroll.polyfill();
   return (window['__forceSmoothScrollPolyfill__'] = true);
 }
+export function isFirefox() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  return userAgent.includes('firefox');
+}
+export function isSafari() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  return userAgent.includes('safari') && !userAgent.includes('chrome');
+}
 let guid = 1000;
 export function createGuid() {
   return guid++;

package/dist/esm/click-elsewhere.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, g as getElement } from './index-5fa3e016.js';
+import { r as registerInstance, c as createEvent, g as getElement } from './index-be8376c0.js';
 
 const ClickElsewhere = class {
   constructor(hostRef) {