@getflip/swirl-components 0.2.0 → 0.3.0

package/dist/components/flip-pagination.js

@@ -0,0 +1,103 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$4 } from './flip-button2.js';
+import { d as defineCustomElement$3 } from './flip-icon-expand-more2.js';
+import { d as defineCustomElement$2 } from './flip-visually-hidden2.js';
+
+const flipPaginationCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.pagination{display:block;width:100%}.pagination--variant-simple .pagination__list{gap:var(--s-space-4)}.pagination__list{display:flex;margin:0;padding:0;justify-content:flex-start;align-items:center;line-height:var(--s-line-height-base);list-style:none;gap:var(--s-space-8)}@media (--from-tablet){.pagination__list{gap:var(--s-space-16)}}.pagination__advanced-label{display:flex;align-items:center;gap:var(--s-space-8);white-space:nowrap}.pagination__page-select-container{position:relative}.pagination__page-select{display:inline-flex;padding-right:var(--s-space-16);border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:center;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pagination__page-select:focus{outline-color:var(--s-focus-default)}.pagination__page-select-icon{position:absolute;top:50%;right:0;transform:translateY(-50%);pointer-events:none}";
+
+const FlipPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.setPage = createEvent(this, "setPage", 7);
+    this.accessibleNextButtonLabel = "Next page";
+    this.accessiblePrevButtonLabel = "Previous page";
+    this.nextButtonLabel = "Next";
+    this.pageLabel = "out of";
+    this.prevButtonLabel = "Prev";
+    this.pageSelectLabel = "Select a page";
+    this.variant = "default";
+    this.onPrevButtonClick = () => {
+      const prevPage = Math.max(this.page - 1, 1);
+      if (this.page === prevPage) {
+        return;
+      }
+      this.setPage.emit(prevPage);
+    };
+    this.onNextButtonClick = () => {
+      const nextPage = Math.min(this.page + 1, this.pages);
+      if (this.page === nextPage) {
+        return;
+      }
+      this.setPage.emit(nextPage);
+    };
+    this.onSelect = (event) => {
+      const page = +event.target.value;
+      if (this.page === page) {
+        return;
+      }
+      this.setPage.emit(page);
+    };
+  }
+  render() {
+    const hideButtonLabels = this.variant !== "advanced";
+    const showPageLabel = this.variant !== "simple";
+    const showDropDown = this.variant === "advanced";
+    const ariaPageLabel = `${this.page} ${this.pageLabel} ${this.pages}`;
+    const className = classnames("pagination", `pagination--variant-${this.variant}`);
+    return (h(Host, null, h("nav", { "aria-label": this.label, class: className }, h("ul", { class: "pagination__list" }, h("li", { class: "pagination__list-item" }, h("flip-button", { class: "pagination__prev-button", disabled: this.page <= 1, flipAriaLabel: this.accessiblePrevButtonLabel, hideLabel: hideButtonLabels, icon: "<flip-icon-chevron-left></flip-icon-chevron-left>", intent: "primary", label: this.prevButtonLabel, onClick: this.onPrevButtonClick })), showPageLabel ? (h("li", { class: "pagination__list-item" }, h("span", null, showDropDown ? (h("span", { "aria-current": "page", class: "pagination__advanced-label" }, h("span", { class: "pagination__page-select-container" }, h("select", { "aria-label": this.pageSelectLabel, class: "pagination__page-select", onChange: this.onSelect }, new Array(this.pages)
+      .fill(undefined)
+      .map((_, index) => index + 1)
+      .map((page) => (h("option", { selected: this.page === page, value: String(page) }, page)))), h("flip-icon-expand-more", { "aria-hidden": "true", class: "pagination__page-select-icon", size: 16 })), h("span", { "aria-hidden": "true" }, this.pageLabel, " ", this.pages))) : (h("span", { "aria-current": "page" }, ariaPageLabel))))) : (h("li", { class: "pagination__list-item" }, h("flip-visually-hidden", null, h("span", { "aria-current": "page" }, ariaPageLabel)))), h("li", { class: "pagination__list-item" }, h("flip-button", { class: "pagination__next-button", disabled: this.page >= this.pages, flipAriaLabel: this.accessibleNextButtonLabel, hideLabel: hideButtonLabels, icon: "<flip-icon-chevron-right></flip-icon-chevron-right>", iconPosition: "end", intent: "primary", label: this.nextButtonLabel, onClick: this.onNextButtonClick }))))));
+  }
+  static get style() { return flipPaginationCss; }
+}, [1, "flip-pagination", {
+    "accessibleNextButtonLabel": [1, "accessible-next-button-label"],
+    "accessiblePrevButtonLabel": [1, "accessible-prev-button-label"],
+    "nextButtonLabel": [1, "next-button-label"],
+    "pageLabel": [1, "page-label"],
+    "prevButtonLabel": [1, "prev-button-label"],
+    "label": [1],
+    "page": [2],
+    "pages": [2],
+    "pageSelectLabel": [1, "page-select-label"],
+    "variant": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-pagination", "flip-button", "flip-icon-expand-more", "flip-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-pagination":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipPagination$1);
+      }
+      break;
+    case "flip-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "flip-icon-expand-more":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "flip-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipPagination = FlipPagination$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipPagination, defineCustomElement };
+
+//# sourceMappingURL=flip-pagination.js.map

package/dist/components/flip-pagination.js.map

@@ -0,0 +1 @@
+{"file":"flip-pagination.js","mappings":"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","names":["FlipPagination"],"sources":["./src/components/flip-pagination/flip-pagination.css?tag=flip-pagination&encapsulation=shadow","./src/components/flip-pagination/flip-pagination.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.pagination {\n  display: block;\n  width: 100%;\n}\n\n.pagination--variant-simple {\n  & .pagination__list {\n    gap: var(--s-space-4);\n  }\n}\n\n.pagination__list {\n  display: flex;\n  margin: 0;\n  padding: 0;\n  justify-content: flex-start;\n  align-items: center;\n  line-height: var(--s-line-height-base);\n  list-style: none;\n  gap: var(--s-space-8);\n\n  @media (--from-tablet) {\n    gap: var(--s-space-16);\n  }\n}\n\n.pagination__advanced-label {\n  display: flex;\n  align-items: center;\n  gap: var(--s-space-8);\n  white-space: nowrap;\n}\n\n.pagination__page-select-container {\n  position: relative;\n}\n\n.pagination__page-select {\n  display: inline-flex;\n  padding-right: var(--s-space-16);\n  border: none;\n  background-color: transparent;\n  font: inherit;\n  line-height: var(--s-line-height-base);\n  text-align: center;\n  cursor: pointer;\n  appearance: none;\n\n  &:focus {\n    outline-color: var(--s-focus-default);\n  }\n}\n\n.pagination__page-select-icon {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n  pointer-events: none;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipPaginationVariant = \"default\" | \"simple\" | \"advanced\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-pagination.css\",\n  tag: \"flip-pagination\",\n})\nexport class FlipPagination {\n  @Prop() accessibleNextButtonLabel?: string = \"Next page\";\n  @Prop() accessiblePrevButtonLabel?: string = \"Previous page\";\n  @Prop() nextButtonLabel?: string = \"Next\";\n  @Prop() pageLabel?: string = \"out of\";\n  @Prop() prevButtonLabel?: string = \"Prev\";\n  @Prop() label!: string;\n  @Prop() page!: number;\n  @Prop() pages!: number;\n  @Prop() pageSelectLabel?: string = \"Select a page\";\n  @Prop() variant?: FlipPaginationVariant = \"default\";\n\n  @Event() setPage: EventEmitter<number>;\n\n  private onPrevButtonClick = () => {\n    const prevPage = Math.max(this.page - 1, 1);\n\n    if (this.page === prevPage) {\n      return;\n    }\n\n    this.setPage.emit(prevPage);\n  };\n\n  private onNextButtonClick = () => {\n    const nextPage = Math.min(this.page + 1, this.pages);\n\n    if (this.page === nextPage) {\n      return;\n    }\n\n    this.setPage.emit(nextPage);\n  };\n\n  private onSelect = (event: Event) => {\n    const page = +(event.target as HTMLSelectElement).value;\n\n    if (this.page === page) {\n      return;\n    }\n\n    this.setPage.emit(page);\n  };\n\n  render() {\n    const hideButtonLabels = this.variant !== \"advanced\";\n    const showPageLabel = this.variant !== \"simple\";\n    const showDropDown = this.variant === \"advanced\";\n\n    const ariaPageLabel = `${this.page} ${this.pageLabel} ${this.pages}`;\n\n    const className = classnames(\n      \"pagination\",\n      `pagination--variant-${this.variant}`\n    );\n\n    return (\n      <Host>\n        <nav aria-label={this.label} class={className}>\n          <ul class=\"pagination__list\">\n            <li class=\"pagination__list-item\">\n              <flip-button\n                class=\"pagination__prev-button\"\n                disabled={this.page <= 1}\n                flipAriaLabel={this.accessiblePrevButtonLabel}\n                hideLabel={hideButtonLabels}\n                icon=\"<flip-icon-chevron-left></flip-icon-chevron-left>\"\n                intent=\"primary\"\n                label={this.prevButtonLabel}\n                onClick={this.onPrevButtonClick}\n              ></flip-button>\n            </li>\n            {showPageLabel ? (\n              <li class=\"pagination__list-item\">\n                <span>\n                  {showDropDown ? (\n                    <span\n                      aria-current=\"page\"\n                      class=\"pagination__advanced-label\"\n                    >\n                      <span class=\"pagination__page-select-container\">\n                        <select\n                          aria-label={this.pageSelectLabel}\n                          class=\"pagination__page-select\"\n                          onChange={this.onSelect}\n                        >\n                          {new Array(this.pages)\n                            .fill(undefined)\n                            .map((_, index) => index + 1)\n                            .map((page) => (\n                              <option\n                                selected={this.page === page}\n                                value={String(page)}\n                              >\n                                {page}\n                              </option>\n                            ))}\n                        </select>\n                        <flip-icon-expand-more\n                          aria-hidden=\"true\"\n                          class=\"pagination__page-select-icon\"\n                          size={16}\n                        ></flip-icon-expand-more>\n                      </span>\n                      <span aria-hidden=\"true\">\n                        {this.pageLabel} {this.pages}\n                      </span>\n                    </span>\n                  ) : (\n                    <span aria-current=\"page\">{ariaPageLabel}</span>\n                  )}\n                </span>\n              </li>\n            ) : (\n              <li class=\"pagination__list-item\">\n                <flip-visually-hidden>\n                  <span aria-current=\"page\">{ariaPageLabel}</span>\n                </flip-visually-hidden>\n              </li>\n            )}\n            <li class=\"pagination__list-item\">\n              <flip-button\n                class=\"pagination__next-button\"\n                disabled={this.page >= this.pages}\n                flipAriaLabel={this.accessibleNextButtonLabel}\n                hideLabel={hideButtonLabels}\n                icon=\"<flip-icon-chevron-right></flip-icon-chevron-right>\"\n                iconPosition=\"end\"\n                intent=\"primary\"\n                label={this.nextButtonLabel}\n                onClick={this.onNextButtonClick}\n              ></flip-button>\n            </li>\n          </ul>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/flip-popover.js

@@ -1,431 +1,8 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { a as autoUpdate, c as computePosition, s as shift, f as flip } from './floating-ui.dom.esm.js';
-import { c as classnames } from './index2.js';
-import { q as querySelectorAllDeep } from './utils.js';
-
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-// Older browsers don't support event options, feature detect it.
-
-// Adopted and modified solution from Bohdan Didukh (2017)
-// https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi
-
-var hasPassiveEvents = false;
-if (typeof window !== 'undefined') {
-  var passiveTestOptions = {
-    get passive() {
-      hasPassiveEvents = true;
-      return undefined;
-    }
-  };
-  window.addEventListener('testPassive', null, passiveTestOptions);
-  window.removeEventListener('testPassive', null, passiveTestOptions);
-}
-
-var isIosDevice = typeof window !== 'undefined' && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1);
-
-
-var locks = [];
-var documentListenerAdded = false;
-var initialClientY = -1;
-var previousBodyOverflowSetting = void 0;
-var previousBodyPosition = void 0;
-var previousBodyPaddingRight = void 0;
-
-// returns true if `el` should be allowed to receive touchmove events.
-var allowTouchMove = function allowTouchMove(el) {
-  return locks.some(function (lock) {
-    if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {
-      return true;
-    }
-
-    return false;
-  });
-};
-
-var preventDefault = function preventDefault(rawEvent) {
-  var e = rawEvent || window.event;
-
-  // For the case whereby consumers adds a touchmove event listener to document.
-  // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })
-  // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then
-  // the touchmove event on document will break.
-  if (allowTouchMove(e.target)) {
-    return true;
-  }
-
-  // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).
-  if (e.touches.length > 1) return true;
-
-  if (e.preventDefault) e.preventDefault();
-
-  return false;
-};
-
-var setOverflowHidden = function setOverflowHidden(options) {
-  // If previousBodyPaddingRight is already set, don't set it again.
-  if (previousBodyPaddingRight === undefined) {
-    var _reserveScrollBarGap = !!options && options.reserveScrollBarGap === true;
-    var scrollBarGap = window.innerWidth - document.documentElement.clientWidth;
-
-    if (_reserveScrollBarGap && scrollBarGap > 0) {
-      var computedBodyPaddingRight = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right'), 10);
-      previousBodyPaddingRight = document.body.style.paddingRight;
-      document.body.style.paddingRight = computedBodyPaddingRight + scrollBarGap + 'px';
-    }
-  }
-
-  // If previousBodyOverflowSetting is already set, don't set it again.
-  if (previousBodyOverflowSetting === undefined) {
-    previousBodyOverflowSetting = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-  }
-};
-
-var restoreOverflowSetting = function restoreOverflowSetting() {
-  if (previousBodyPaddingRight !== undefined) {
-    document.body.style.paddingRight = previousBodyPaddingRight;
-
-    // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it
-    // can be set again.
-    previousBodyPaddingRight = undefined;
-  }
-
-  if (previousBodyOverflowSetting !== undefined) {
-    document.body.style.overflow = previousBodyOverflowSetting;
-
-    // Restore previousBodyOverflowSetting to undefined
-    // so setOverflowHidden knows it can be set again.
-    previousBodyOverflowSetting = undefined;
-  }
-};
-
-var setPositionFixed = function setPositionFixed() {
-  return window.requestAnimationFrame(function () {
-    // If previousBodyPosition is already set, don't set it again.
-    if (previousBodyPosition === undefined) {
-      previousBodyPosition = {
-        position: document.body.style.position,
-        top: document.body.style.top,
-        left: document.body.style.left
-      };
-
-      // Update the dom inside an animation frame 
-      var _window = window,
-          scrollY = _window.scrollY,
-          scrollX = _window.scrollX,
-          innerHeight = _window.innerHeight;
-
-      document.body.style.position = 'fixed';
-      document.body.style.top = -scrollY;
-      document.body.style.left = -scrollX;
-
-      setTimeout(function () {
-        return window.requestAnimationFrame(function () {
-          // Attempt to check if the bottom bar appeared due to the position change
-          var bottomBarHeight = innerHeight - window.innerHeight;
-          if (bottomBarHeight && scrollY >= innerHeight) {
-            // Move the content further up so that the bottom bar doesn't hide it
-            document.body.style.top = -(scrollY + bottomBarHeight);
-          }
-        });
-      }, 300);
-    }
-  });
-};
-
-var restorePositionSetting = function restorePositionSetting() {
-  if (previousBodyPosition !== undefined) {
-    // Convert the position from "px" to Int
-    var y = -parseInt(document.body.style.top, 10);
-    var x = -parseInt(document.body.style.left, 10);
-
-    // Restore styles
-    document.body.style.position = previousBodyPosition.position;
-    document.body.style.top = previousBodyPosition.top;
-    document.body.style.left = previousBodyPosition.left;
-
-    // Restore scroll
-    window.scrollTo(x, y);
-
-    previousBodyPosition = undefined;
-  }
-};
-
-// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions
-var isTargetElementTotallyScrolled = function isTargetElementTotallyScrolled(targetElement) {
-  return targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;
-};
-
-var handleScroll = function handleScroll(event, targetElement) {
-  var clientY = event.targetTouches[0].clientY - initialClientY;
-
-  if (allowTouchMove(event.target)) {
-    return false;
-  }
-
-  if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {
-    // element is at the top of its scroll.
-    return preventDefault(event);
-  }
-
-  if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {
-    // element is at the bottom of its scroll.
-    return preventDefault(event);
-  }
-
-  event.stopPropagation();
-  return true;
-};
-
-var disableBodyScroll = function disableBodyScroll(targetElement, options) {
-  // targetElement must be provided
-  if (!targetElement) {
-    // eslint-disable-next-line no-console
-    console.error('disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.');
-    return;
-  }
-
-  // disableBodyScroll must not have been called on this targetElement before
-  if (locks.some(function (lock) {
-    return lock.targetElement === targetElement;
-  })) {
-    return;
-  }
-
-  var lock = {
-    targetElement: targetElement,
-    options: options || {}
-  };
-
-  locks = [].concat(_toConsumableArray(locks), [lock]);
-
-  if (isIosDevice) {
-    setPositionFixed();
-  } else {
-    setOverflowHidden(options);
-  }
-
-  if (isIosDevice) {
-    targetElement.ontouchstart = function (event) {
-      if (event.targetTouches.length === 1) {
-        // detect single touch.
-        initialClientY = event.targetTouches[0].clientY;
-      }
-    };
-    targetElement.ontouchmove = function (event) {
-      if (event.targetTouches.length === 1) {
-        // detect single touch.
-        handleScroll(event, targetElement);
-      }
-    };
-
-    if (!documentListenerAdded) {
-      document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
-      documentListenerAdded = true;
-    }
-  }
-};
-
-var enableBodyScroll = function enableBodyScroll(targetElement) {
-  if (!targetElement) {
-    // eslint-disable-next-line no-console
-    console.error('enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.');
-    return;
-  }
-
-  locks = locks.filter(function (lock) {
-    return lock.targetElement !== targetElement;
-  });
-
-  if (isIosDevice) {
-    targetElement.ontouchstart = null;
-    targetElement.ontouchmove = null;
-
-    if (documentListenerAdded && locks.length === 0) {
-      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
-      documentListenerAdded = false;
-    }
-  }
-
-  if (isIosDevice) {
-    restorePositionSetting();
-  } else {
-    restoreOverflowSetting();
-  }
-};
-
-const flipPopoverCss = ":host{position:relative;z-index:var(--s-z-40);display:inline-flex}:host *{box-sizing:border-box}.popover--active:not(.popover--closing) .popover__backdrop{-webkit-animation:0.15s popover-fade-in;animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{-webkit-animation:none;animation:none}}.popover--active:not(.popover--closing) .popover__content{-webkit-animation:0.15s popover-slide-in;animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{transform-origin:top left;-webkit-animation:0.15s popover-fade-scale-in;animation:0.15s popover-fade-scale-in}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{-webkit-animation:none;animation:none}}.popover--closing .popover__backdrop{-webkit-animation:0.15s popover-fade-out;animation:0.15s popover-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{-webkit-animation:none;animation:none}}.popover--closing .popover__content{-webkit-animation:0.15s popover-slide-out;animation:0.15s popover-slide-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (min-width: 768px){.popover--closing .popover__content{-webkit-animation:0.15s popover-fade-out;animation:0.15s popover-fade-out}}@media (prefers-reduced-motion){.popover--closing .popover__content{-webkit-animation:none;animation:none}}.popover--inactive .popover__content{display:none}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);-webkit-animation:0.15s popover-backdrop-fade-in;animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{-webkit-animation:none;animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;max-width:22.5rem;border-radius:var(--s-border-radius-xl);-webkit-animation:none;animation:none;box-shadow:0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:19rem;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@-webkit-keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@-webkit-keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes popover-fade-scale-in{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}";
-
-const FlipPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.active = false;
-    this.closing = false;
-    this.close = () => {
-      var _a;
-      if (this.closing) {
-        return;
-      }
-      if (this.disableAutoUpdate) {
-        this.disableAutoUpdate();
-      }
-      this.closing = true;
-      setTimeout(() => {
-        this.active = false;
-        this.closing = false;
-        this.updateTriggerAttributes();
-      }, 150);
-      this.unlockBodyScroll();
-      (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    this.open = () => {
-      this.active = true;
-      this.updateChildMenuItems();
-      this.updateTriggerAttributes();
-      requestAnimationFrame(async () => {
-        await this.reposition();
-        if (this.childMenuItems.length > 0) {
-          this.childMenuItems[0].focus();
-        }
-        else {
-          this.contentContainer.focus();
-        }
-        if (this.disableAutoUpdate) {
-          this.disableAutoUpdate();
-        }
-        this.disableAutoUpdate = autoUpdate(this.triggerEl, this.contentContainer, this.reposition);
-        this.scrollContainer.scrollTop = 0;
-        this.lockBodyScroll();
-      });
-    };
-    this.toggle = () => {
-      if (this.active) {
-        this.close();
-      }
-      else {
-        this.open();
-      }
-    };
-    this.onKeydown = (event) => {
-      if (event.code === "Escape" && this.active) {
-        this.close();
-      }
-    };
-    this.onContentClick = () => {
-      if (!this.active) {
-        return;
-      }
-      this.close();
-    };
-    this.reposition = async () => {
-      const mobile = !window.matchMedia("(min-width: 768px)").matches;
-      if (!Boolean(this.triggerEl) || !Boolean(this.contentContainer)) {
-        return;
-      }
-      if (mobile) {
-        this.position = undefined;
-        return;
-      }
-      this.position = await computePosition(this.triggerEl, this.contentContainer, {
-        middleware: [shift(), flip()],
-        placement: "bottom-start",
-        strategy: "fixed",
-      });
-    };
-  }
-  componentDidLoad() {
-    this.connectTrigger();
-    this.updateChildMenuItems();
-    this.updateTriggerAttributes();
-  }
-  disconnectedCallback() {
-    enableBodyScroll(this.scrollContainer);
-  }
-  onWindowFocusout(event) {
-    if (!this.active) {
-      return;
-    }
-    const target = event.relatedTarget;
-    const popoverLostFocus = target === null ||
-      (!this.el.contains(target) &&
-        !this.childMenuItems.some((item) => { var _a; return (_a = target.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(item); }));
-    if (popoverLostFocus) {
-      this.close();
-    }
-  }
-  connectTrigger() {
-    var _a;
-    const triggerComponent = querySelectorAllDeep(document.body, `#${this.trigger}`)[0];
-    this.triggerEl = ((triggerComponent === null || triggerComponent === void 0 ? void 0 : triggerComponent.children[0]) ||
-      ((_a = triggerComponent === null || triggerComponent === void 0 ? void 0 : triggerComponent.shadowRoot) === null || _a === void 0 ? void 0 : _a.children[0]) ||
-      triggerComponent);
-    if (!Boolean(this.triggerEl)) {
-      return;
-    }
-    this.triggerEl.addEventListener("click", this.toggle);
-  }
-  updateTriggerAttributes() {
-    if (!Boolean(this.triggerEl)) {
-      return;
-    }
-    this.triggerEl.setAttribute("aria-controls", this.popoverId);
-    this.triggerEl.setAttribute("aria-expanded", String(this.active));
-    this.triggerEl.setAttribute("aria-haspopup", "dialog");
-  }
-  updateChildMenuItems() {
-    this.childMenuItems = querySelectorAllDeep(this.el, '[role="menuitem"]');
-  }
-  lockBodyScroll() {
-    const mobile = !window.matchMedia("(min-width: 768px)").matches;
-    if (!mobile) {
-      return;
-    }
-    disableBodyScroll(this.scrollContainer);
-  }
-  unlockBodyScroll() {
-    enableBodyScroll(this.scrollContainer);
-  }
-  render() {
-    var _a, _b;
-    const className = classnames("popover", {
-      "popover--closing": this.closing,
-      "popover--active": this.active,
-      "popover--inactive": !this.active,
-    });
-    return (h(Host, { id: this.popoverId }, h("div", { class: className, onKeyDown: this.onKeydown }, h("div", { "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", onClick: this.onContentClick, role: "dialog", tabindex: "-1", ref: (el) => (this.contentContainer = el), style: {
-        top: Boolean(this.position) ? `${(_a = this.position) === null || _a === void 0 ? void 0 : _a.y}px` : "",
-        left: Boolean(this.position) ? `${(_b = this.position) === null || _b === void 0 ? void 0 : _b.x}px` : "",
-      } }, h("span", { class: "popover__handle" }), h("div", { class: "popover__scroll-container", ref: (el) => (this.scrollContainer = el) }, h("slot", null))), this.active && (h("div", { class: "popover__backdrop", onClick: this.close })))));
-  }
-  get el() { return this; }
-  static get style() { return flipPopoverCss; }
-}, [1, "flip-popover", {
-    "label": [1],
-    "popoverId": [1, "popover-id"],
-    "trigger": [1],
-    "active": [32],
-    "closing": [32],
-    "position": [32]
-  }, [[8, "focusout", "onWindowFocusout"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["flip-popover"];
-  components.forEach(tagName => { switch (tagName) {
-    case "flip-popover":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, FlipPopover$1);
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
+import { F as FlipPopover$1, d as defineCustomElement$1 } from './flip-popover2.js';
 
 const FlipPopover = FlipPopover$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipPopover, defineCustomElement };
+
+//# sourceMappingURL=flip-popover.js.map

package/dist/components/flip-popover.js.map

@@ -0,0 +1 @@
+{"file":"flip-popover.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}