@nanoporetech-digital/components 1.15.6 → 2.1.0

package/dist/components/sticker.js

@@ -0,0 +1,665 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { i as index } from './ResizeObserver.es.js';
+import { r as raf, h as hasShadowDom, b as browserCanUseCssVariables } from './index2.js';
+import { a as getOffset } from './dom.js';
+import { d as debounce } from './throttle.js';
+
+const stickerCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--stuck-left:initial;--stuck-right:initial;--stuck-z-index:var(--nano-layer-index-menubar, 10);--top-hide:translateY(-110%);--bottom-hide:translateY(110%);display:block;max-width:100%}:host([sticky]){position:-webkit-sticky;position:sticky;-webkit-transition:0.3s ease transform;transition:0.3s ease transform;will-change:min-height}:host([sticky][stuck]){left:var(--stuck-left);right:var(--stuck-right);z-index:var(--stuck-z-index) !important}:host([sticky][hide][placed-top]){-webkit-transform:var(--top-hide);transform:var(--top-hide)}:host([sticky][hide][placed-bottom]){-webkit-transform:var(--bottom-hide);transform:var(--bottom-hide)}:host([sticky][index=\"1\"]){z-index:calc(var(--stuck-z-index) + 1)}:host([sticky][index=\"2\"]){z-index:calc(var(--stuck-z-index) + 2)}:host([sticky][index=\"3\"]){z-index:calc(var(--stuck-z-index) + 3)}:host([sticky][index=\"4\"]){z-index:calc(var(--stuck-z-index) + 4)}:host([sticky][index=\"5\"]){z-index:calc(var(--stuck-z-index) + 5)}.sticker{display:inherit;max-width:inherit;width:100%}.sticker:not(.stuck){width:auto !important}.sticker.sticky{-webkit-transition:0.3s ease all;transition:0.3s ease all;position:relative}:host([index=\"1\"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 1)}:host([index=\"2\"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 2)}:host([index=\"3\"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 3)}:host([index=\"4\"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 4)}:host([index=\"5\"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 5)}.sticker.stuck{position:fixed;left:var(--stuck-left);right:var(--stuck-right);z-index:var(--stuck-z-index);-webkit-transform:translateY(0);transform:translateY(0)}:host([placed-top]) .sticker.stuck{top:0}:host([placed-bottom]) .sticker.stuck{bottom:0}:host([placed-top]) .sticker.stuck.hide{-webkit-transform:var(--top-hide);transform:var(--top-hide)}:host([placed-bottom]) .sticker.stuck.hide{-webkit-transform:var(--bottom-hide);transform:var(--bottom-hide)}.sticker-content{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}";
+
+function _getScrollTop(ele) {
+  return ele instanceof Document ? window.pageYOffset : ele.scrollTop;
+}
+function _getOffset(ele, parent) {
+  let parentEle = parent instanceof Document ? document.documentElement : parent;
+  return getOffset(ele, parentEle);
+}
+let Sticker = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.nanoStuck = createEvent(this, "nanoStuck", 7);
+    this.nanoUnstuck = createEvent(this, "nanoUnstuck", 7);
+    this.nanoHide = createEvent(this, "nanoHide", 7);
+    this.nanoShow = createEvent(this, "nanoShow", 7);
+    this.isRtl = false;
+    this.scrollPosCache = 0;
+    this.scrollPosThresholdCache = 0;
+    this.cacheOffset = 0;
+    this.pauseResizeWatcher = false;
+    this.listenForScrollParent = false;
+    this.positions = [];
+    this.pauseHide = false;
+    this.hasBootstrapped = false;
+    // Internal State
+    this.isStuck = false;
+    this.isRootSticker = true;
+    this.hide = false;
+    this.scrollHide = false;
+    this.multiStickerHide = false;
+    this.scrollingTo = false;
+    this.quietModeIsOn = false;
+    this.stuckCounter = 0;
+    this.stickerIndex = 0;
+    this._offset = 0;
+    // Public API
+    /** Only applicable to root stickers. When applied the sticker will grow or shrink to the scrollParent size */
+    this.autoResize = true;
+    /** Manually enable / disabled sticky behaviour */
+    this.isSticky = true;
+    /** Distance the item should be stuck from the sticky edge. */
+    this.offset = 0;
+    /** The edge of the scroll-parent to stick to */
+    this.position = 'top';
+    // other opts I'd like one day. 'start' | 'end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'
+    /** When applied, the sticker will hide when the scroll-parent
+     * is scrolling away from the sticker's stuck position and show when scrolling toward it.
+     * By default this will apply when the parent is below either the h or w dimensions */
+    this.quietMode = {
+      h: 600,
+      w: 600,
+    };
+    /** When applied stickers will hide upon new stickers being stuck to the same position */
+    this.hideOnNewStickers = true;
+    /** The max width of the item to implement sticky behaviour. */
+    this.breakPointMax = null;
+    /** The min width of the item to implement sticky behaviour. */
+    this.breakPointMin = null;
+    // Private methods / handlers
+    /** Assesses the public API quitemode and works out if it should be applied atm.
+     * If 'smallscreen', or there is a breakpointmax / min it will add a resizeobserver to conditionally add behaviour */
+    this.setupParentResizeListener = () => {
+      if (this.parentSizeObserver) {
+        this.parentSizeObserver.disconnect();
+        this.parentSizeObserver = undefined;
+      }
+      this.parentSizeObserver = new index((entries) => {
+        for (const entry of entries) {
+          let height, width;
+          if (entry.contentRect.height)
+            height = entry.contentRect.height;
+          if (entry.contentRect.width)
+            width = entry.contentRect.width;
+          if (typeof this.quietMode === 'object') {
+            if (width < this.quietMode.w || height < this.quietMode.h)
+              this.quietModeIsOn = true;
+            else
+              this.quietModeIsOn = false;
+          }
+          if (this.breakPointMin) {
+            if (width > this.breakPointMin)
+              this.isSticky = true;
+            else
+              this.isSticky = false;
+          }
+          if (this.breakPointMax) {
+            if (width < this.breakPointMax)
+              this.isSticky = true;
+            else
+              this.isSticky = false;
+          }
+          if (this.isRootSticker && this.sticker && this.autoResize)
+            this.sticker.style.width = this.host.scrollWidth + 'px';
+        }
+      });
+      let toWatch = this.scrollParent instanceof Document
+        ? this.scrollParent.documentElement
+        : this.scrollParent;
+      if (toWatch)
+        this.parentSizeObserver.observe(toWatch);
+    };
+    /** For stickTo stickers. We listen to the events from the 'master' sticker to ammend the hide/show trigger
+     * Main diffs from rootstickers / non is height being on 'master' */
+    this.onStickToDisplayEvent = (e) => {
+      if (e.detail.sticker !== this.stickToEle)
+        return;
+      switch (e.type) {
+        case 'nanoHide':
+          this._offset = 0;
+          this.cacheOffset = this.offset;
+          this.offset = 0;
+          /** trigger moves down, underneath sticker if the main sticker hides */
+          if (!this.isStuck)
+            this.moveTrigger(false);
+          /** If it's an actual 'position: sticky' element, we need to give the sticker an appropriate height.
+           * This minimises content jumping around as items are added */
+          if (!this.isRootSticker && this.quietModeIsOn) {
+            raf(() => {
+              this.stickToEle.style.minHeight =
+                this.stickToEleInitSize.height +
+                  (this.host.scrollHeight +
+                    (typeof this.cacheOffset === 'object'
+                      ? this.cacheOffset.v
+                      : this.cacheOffset)) +
+                  'px';
+              this.stickToEle.setTriggerPos(this.stickToEleInitSize.height * -1);
+            });
+          }
+          break;
+        case 'nanoShow':
+          this._offset = this.stickToEleInitSize.height;
+          this.offset = this.cacheOffset;
+          this.moveTrigger(true);
+          /** reset master sticker size */
+          if (!this.isRootSticker && this.quietModeIsOn) {
+            raf(() => {
+              this.stickToEle.style.minHeight = '';
+              this.stickToEle.setTriggerPos(0);
+            });
+          }
+          break;
+        case 'nanoStuck':
+          this.stickToEleInitSize = this.stickToEle.getBoundingClientRect();
+          this._offset = this.stickToEleInitSize.height;
+          break;
+      }
+    };
+    /** Handler applied to scrolling parent. When 'hideOnNewStickers' is true, hide this sticker on subsequent stuck stickers.  */
+    this.onStickEvent = async (e) => {
+      let sticker = e.detail ? e.detail.sticker : null;
+      if (!sticker || sticker.position !== this.position)
+        return;
+      const incomingTriggerPos = await sticker.getTriggerPos();
+      if (e.type === 'nanoStuck' &&
+        sticker !== this.host &&
+        sticker.scrollParent === this.host.scrollParent) {
+        this.stickerIndex++;
+        if (!this.hideOnNewStickers)
+          return;
+        if ((this.positions.includes('top') &&
+          this.triggerPos.top < incomingTriggerPos.top) ||
+          (this.positions.includes('bottom') &&
+            this.triggerPos.top > incomingTriggerPos.top)) {
+          this.multiStickerHide = true;
+          this.stuckCounter++;
+        }
+      }
+      if (e.type === 'nanoUnstuck' &&
+        sticker !== this.host &&
+        sticker.scrollParent === this.host.scrollParent) {
+        this.stickerIndex--;
+        if (!this.hideOnNewStickers)
+          return;
+        if ((this.positions.includes('top') &&
+          this.triggerPos.top < incomingTriggerPos.top) ||
+          (this.positions.includes('bottom') &&
+            this.triggerPos.top > incomingTriggerPos.top)) {
+          this.stuckCounter--;
+          if (this.stuckCounter < 1)
+            this.multiStickerHide = false;
+        }
+      }
+    };
+    /** Scroll handler applied to scrolling parent. Only applied when quietmode is on.
+     * 'hides' stickers when scrolling over 100px away from trigger and 'shows' when scrolling toward */
+    this.onScroll = () => {
+      let y = _getScrollTop(this.scrollParent);
+      // scrolling up
+      if (y < this.scrollPosCache) {
+        if (!this.positions.includes('bottom'))
+          this.handleScrollTo();
+        else
+          this.handleScrollAway(y);
+      }
+      // scrolling down
+      if (y > this.scrollPosCache) {
+        if (!this.positions.includes('bottom'))
+          this.handleScrollAway(y);
+        else
+          this.handleScrollTo();
+      }
+      this.scrollPosCache = y;
+    };
+  }
+  // Public methods
+  /**
+   * Method to return the visibility status of the sticker
+   * @returns boolean
+   */
+  async isHiding() {
+    return this.hide;
+  }
+  /**
+   * Method to return the stuck status of the sticker
+   * @returns boolean
+   */
+  async isSticking() {
+    this.shouldStick();
+    return this.isStuck;
+  }
+  /** @internal */
+  async setTriggerPos(offset) {
+    return (this._offset = offset);
+  }
+  /** @internal */
+  async getTriggerPos() {
+    return this.triggerPos;
+  }
+  /** @internal */
+  async pauseHiding(pause) {
+    return (this.pauseHide = pause);
+  }
+  // Watchers
+  /** Keep a note of trigger position. Need this to track sticker order in the DOM */
+  updateTriggerOffset() {
+    if (!this.trigger || !this.scrollParent || !this.listenForScrollParent)
+      return;
+    this.triggerPos = _getOffset(this.trigger, this.scrollParent);
+  }
+  /** A root sticker is a fixed element Or this sticker is sticking to another.
+   * We need a content resize watcher to make sure we maintain a correct placeholder size in the body */
+  stickerResizeListener() {
+    if (this.contentSizeObserver) {
+      this.contentSizeObserver.disconnect();
+      this.contentSizeObserver = undefined;
+    }
+    this.contentSizeObserver = new index((entries) => {
+      for (const entry of entries) {
+        if (this.pauseResizeWatcher)
+          return;
+        if (entry.contentRect.height) {
+          if (this.position === 'top')
+            this.host.style.height = entry.contentRect.height + 'px';
+          if (this.position === 'bottom')
+            this.host.style.minHeight = entry.contentRect.height + 'px';
+        }
+      }
+    });
+    this.contentSizeObserver.observe(this.content);
+  }
+  quietModeChange() {
+    if (this.quietMode === 'on')
+      raf(() => (this.quietModeIsOn = true));
+    else if (this.quietMode === 'off')
+      raf(() => (this.quietModeIsOn = false));
+  }
+  /** offset is part of the public API but we also use it to manipulate trigger points */
+  setOffset() {
+    this.trigger.setAttribute('style', '');
+    let v, h, _v, _h;
+    let sticker = this.isRootSticker || this.stickToEle ? this.sticker : this.host;
+    if (!sticker)
+      return;
+    if (typeof this.offset === 'object')
+      ({ v, h } = this.offset);
+    else
+      v = h = this.offset;
+    if (typeof this._offset === 'object')
+      ({ v = _v, h = _h } = this._offset);
+    else
+      _v = _h = this._offset;
+    const setPos = (pos) => {
+      let u = pos.match(/(top|bottom)/) ? v : h;
+      setTriggetPos(pos);
+      sticker.style[pos] = u + 'px';
+      if (!browserCanUseCssVariables())
+        return;
+      if (u)
+        this.host.style.setProperty('--hide-transform-amount', `(110% + ${u}px)`);
+      else
+        this.host.style.setProperty('--hide-transform-amount', null);
+    };
+    const setTriggetPos = (pos) => {
+      let u = pos.match(/(top|bottom)/) ? v + _v : h + _h;
+      this.trigger.style[pos] = u * -1 + 'px';
+      this.trigger.style.position = 'relative';
+      this.trigger.style.height = '1px';
+    };
+    if ((this.positions.includes('start') && this.isRtl) ||
+      (this.positions.includes('end') && !this.isRtl))
+      setPos('right');
+    if ((this.positions.includes('end') && this.isRtl) ||
+      (this.positions.includes('start') && !this.isRtl))
+      setPos('left');
+    if (this.positions.includes('top'))
+      setPos('top');
+    if (this.positions.includes('bottom'))
+      setPos('bottom');
+  }
+  positionChange() {
+    this.positions = this.position.split('-');
+    this.setOffset();
+  }
+  /** If this sticker is attached to a 'master' sticker (stickToEle),
+   * here we move the content of this sticker in and out accordingly */
+  async stuckChange() {
+    if (this.isStuck) {
+      if (this.stickToEle) {
+        let content = hasShadowDom(this.host)
+          ? this.host.children
+          : this.content.children;
+        this.slottedContent = Array.from(content);
+        this.slottedContent.forEach((child) => {
+          if (hasShadowDom(this.host))
+            this.stickToEle.appendChild(child);
+          else
+            this.stickToEle
+              .querySelector('.sticker-content')
+              .appendChild(child);
+          child.style.order = this.stickerIndex + '';
+        });
+        this.nanoStuck.emit({ sticker: this.stickToEle });
+      }
+      else
+        this.nanoStuck.emit({ sticker: this.host });
+    }
+    else {
+      this.scrollHide = false;
+      if (this.stickToEle) {
+        this.slottedContent.forEach((child) => {
+          this.host.appendChild(child);
+          child.style.order = '';
+        });
+        this.nanoUnstuck.emit({ sticker: this.stickToEle });
+      }
+      else
+        this.nanoUnstuck.emit({ sticker: this.host });
+    }
+  }
+  /** attach scroll listener. 'hides' stickers when scrolling away from trigger and 'shows' when scrolling toward */
+  attachScrollListeners() {
+    if (this.quietModeIsOn)
+      this.scrollParent.addEventListener('scroll', this.onScroll, {
+        passive: true,
+        capture: false,
+      });
+    else {
+      this.scrollParent.removeEventListener('scroll', this.onScroll);
+      this.moveTrigger(true);
+    }
+  }
+  /** Add / remove parent scrolling listeners. If there's stickToEle we need to remove them */
+  handleParentEvents(_, oldParent = null) {
+    if (!this.listenForScrollParent)
+      return;
+    if (oldParent)
+      this.manageListenersOnParent(false, oldParent);
+    if (this.scrollParent)
+      this.manageListenersOnParent(!this.stickToEle);
+  }
+  /** Add remove specific listeners if we're sticking to a sticker.
+   * We need to adjust triggers according to the status of the 'master'  */
+  stickToEleChange(_, oldEle) {
+    if (this.stickToEle) {
+      this.stickToEle.addEventListener('nanoHide', this.onStickToDisplayEvent);
+      this.stickToEle.addEventListener('nanoShow', this.onStickToDisplayEvent);
+      this.stickToEle.addEventListener('nanoStuck', this.onStickToDisplayEvent);
+      this.stickToEle.addEventListener('nanoUnstuck', this.onStickToDisplayEvent);
+    }
+    if (oldEle) {
+      oldEle.removeEventListener('nanoHide', this.onStickToDisplayEvent);
+      oldEle.removeEventListener('nanoShow', this.onStickToDisplayEvent);
+      oldEle.removeEventListener('nanoStuck', this.onStickToDisplayEvent);
+      oldEle.removeEventListener('nanoUnstuck', this.onStickToDisplayEvent);
+    }
+  }
+  /** Find and set the stickToEle from the public, selector string */
+  stickToChange() {
+    if (this.stickTo)
+      this.stickToEle = this.scrollParent.querySelector(this.stickTo);
+    else
+      this.stickToEle = undefined;
+  }
+  /** 2 potential criteria for hiding. Multi-stickers or quietmode. */
+  visibilityDecisionHandler() {
+    if (this.multiStickerHide || this.scrollHide)
+      this.hide = true;
+    else
+      this.hide = false;
+  }
+  handleHideChange() {
+    if (this.hide)
+      this.nanoHide.emit({ sticker: this.host });
+    else
+      this.nanoShow.emit({ sticker: this.host });
+  }
+  setupIO() {
+    if (this.io) {
+      this.io.disconnect();
+      this.io = undefined;
+    }
+    if (!this.scrollParent || !this.hasBootstrapped || !this.trigger)
+      return;
+    this.isRootSticker = this.scrollParent instanceof Document;
+    let root = this.scrollParent;
+    if (this.scrollParent instanceof Document)
+      root = null;
+    this.io = new window.IntersectionObserver((_) => {
+      if (this.pauseResizeWatcher || !this.isSticky)
+        return;
+      this.shouldStick(_.slice(-1)[0]);
+    }, { root: root });
+    this.io.observe(this.trigger);
+  }
+  /** Add or removes event listeners / observers on scrolling parent
+   * for when the scrolling parent changes, or, this sticker is sticking to another */
+  manageListenersOnParent(addEvents, ele) {
+    let scrollParent = ele || this.scrollParent;
+    if (!scrollParent)
+      return;
+    if (!addEvents) {
+      try {
+        if (this.quietModeIsOn)
+          scrollParent.removeEventListener('scroll', this.onScroll);
+        scrollParent.removeEventListener('nanoStuck', this.onStickEvent);
+        scrollParent.removeEventListener('nanoUnstuck', this.onStickEvent);
+      }
+      catch (e) {
+        console.error('Events haven`t been added');
+      }
+    }
+    else {
+      scrollParent.addEventListener('nanoStuck', this.onStickEvent);
+      scrollParent.addEventListener('nanoUnstuck', this.onStickEvent);
+      if (this.quietModeIsOn)
+        this.attachScrollListeners();
+    }
+    this.setupParentResizeListener();
+  }
+  /** Watch for scroll direction. Only applies when quietmode is on.
+   * We need to addjust the position of the trigger when the sticker is hidden */
+  handleScrollTo() {
+    this.scrollPosThresholdCache = null;
+    if (!this.scrollHide)
+      return;
+    if (this.scrollingTo !== true) {
+      this._offset = this.cacheOffset || this._offset;
+    }
+    this.scrollingTo = true;
+    this.scrollHide = false;
+  }
+  handleScrollAway(currScroll) {
+    if (this.scrollHide)
+      return;
+    if (!this.isStuck)
+      return;
+    if (this.scrollingTo !== false) {
+      this.cacheOffset = this._offset;
+      this._offset = 0;
+    }
+    this.scrollingTo = false;
+    if (!this.scrollPosThresholdCache)
+      this.scrollPosThresholdCache = currScroll;
+    else if (!this.pauseHide &&
+      Math.abs(currScroll - this.scrollPosThresholdCache) > 100)
+      this.scrollHide = true;
+  }
+  moveTrigger(toInitial) {
+    if ((this.positions.includes('bottom') && !toInitial) ||
+      (!this.positions.includes('bottom') && toInitial)) {
+      this.host.parentNode.insertBefore(this.trigger, this.host);
+    }
+    else
+      this.host.parentNode.insertBefore(this.trigger, this.host.nextSibling);
+  }
+  /** Gets the 'closest' scrolling parent */
+  getScrollParent() {
+    const regex = /(auto|scroll)/;
+    const parents = (_node, ps) => {
+      if (_node.parentNode === null) {
+        return ps;
+      }
+      return parents(_node.parentNode, ps.concat([_node]));
+    };
+    const style = (_node, prop) => getComputedStyle(_node, null).getPropertyValue(prop);
+    const overflow = (_node) => style(_node, 'overflow') +
+      style(_node, 'overflow-y') +
+      style(_node, 'overflow-x');
+    const scroll = (_node) => regex.test(overflow(_node));
+    const docHeight = document.documentElement.getBoundingClientRect().height;
+    const scrollParent = (_node) => {
+      if (!(_node instanceof HTMLElement))
+        return;
+      const ps = parents(_node, []);
+      return (ps.find((ele) => scroll(ele) && ele.getBoundingClientRect().height !== docHeight) || document);
+    };
+    return scrollParent(this.host);
+  }
+  shouldStick(data) {
+    let scrollAmt;
+    if (this.positions.includes('top')) {
+      if (!this.isRootSticker)
+        scrollAmt = _getOffset(this.trigger, this.scrollParent).top;
+      else
+        scrollAmt = this.trigger.getBoundingClientRect().top;
+      this.isStuck = scrollAmt < -1;
+    }
+    else if (this.positions.includes('bottom')) {
+      scrollAmt = this.trigger.getBoundingClientRect().top;
+      const parentBounding = data && data.rootBounds
+        ? data.rootBounds
+        : (this.scrollParent instanceof Document
+          ? document.documentElement
+          : this.scrollParent).getBoundingClientRect();
+      this.isStuck = scrollAmt > parentBounding.height + parentBounding.top;
+    }
+  }
+  bootstrapGurantor() {
+    this.hasBootstrapped = true;
+    this.scrollParent = this.scrollParent || this.getScrollParent();
+    this.isRootSticker = this.scrollParent instanceof Document;
+    this.trigger = this.trigger || document.createElement('div');
+    this.trigger.classList.add('sticker-trigger');
+    this.positionChange();
+    this.moveTrigger(true);
+    this.quietModeChange();
+    this.listenForScrollParent = true;
+    this.handleParentEvents(true);
+    this.stickerIndex = Array.from(this.scrollParent.querySelectorAll('nano-sticker'))
+      .filter((sticker) => sticker.position === this.position)
+      .findIndex((sticker) => sticker === this.host);
+    this.setOffset();
+    this.stickerResizeListener();
+    this.setupParentResizeListener();
+    // bit of a hack ... add default 'order'. Required for 'stickTo' elements.
+    this.slottedContent = Array.from(this.host.children);
+    this.slottedContent.forEach((child) => {
+      child.style.order = this.stickerIndex + '';
+    });
+    this.updateTriggerOffset();
+    this.stickToChange();
+    this.setupIO();
+    this.onStickToDisplayEvent = debounce(this.onStickToDisplayEvent, 50);
+  }
+  // Stencil metthods
+  connectedCallback() {
+    this.isRtl =
+      this.host.dir === 'rtl' ||
+        this.host.ownerDocument.dir === 'rtl';
+    // this is all horrible.... shrug
+    document.documentElement.addEventListener('nanoComponentsReady', () => {
+      setTimeout((_) => this.bootstrapGurantor(), 200);
+    });
+    setTimeout((_) => {
+      if (!this.hasBootstrapped)
+        this.bootstrapGurantor();
+    }, 1000);
+  }
+  disconnectedCallback() {
+    if (this.io) {
+      this.io.disconnect();
+      this.io = undefined;
+    }
+    if (this.parentSizeObserver) {
+      this.parentSizeObserver.disconnect();
+      this.parentSizeObserver = undefined;
+    }
+    this.quietMode = 'off';
+    this.scrollParent = null;
+  }
+  render() {
+    return (h(Host, { sticky: !this.isRootSticker && !this.stickToEle && this.isSticky, hide: this.hide && this.isStuck, siblings: this.stuckCounter, index: this.stickerIndex, stuck: this.isStuck && this.isSticky, "placed-bottom": this.positions.includes('bottom'), "placed-top": this.positions.includes('top'), "placed-end": this.positions.includes('end'), "placed-start": this.positions.includes('start') }, h("div", { class: {
+        sticker: true,
+        sticky: this.isRootSticker && this.isSticky,
+        stuck: this.isStuck && this.isRootSticker && this.isSticky,
+        hide: this.isRootSticker && this.hide && this.isStuck,
+      }, ref: (div) => (this.sticker = div) }, h("div", { class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", null)))));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "trigger": ["updateTriggerOffset"],
+    "scrollParent": ["updateTriggerOffset", "handleParentEvents", "setupIO"],
+    "position": ["stickerResizeListener", "positionChange"],
+    "quietMode": ["quietModeChange"],
+    "offset": ["setOffset"],
+    "_offset": ["setOffset"],
+    "isStuck": ["stuckChange"],
+    "quietModeIsOn": ["attachScrollListeners"],
+    "stickToEle": ["handleParentEvents", "stickToEleChange"],
+    "stickTo": ["stickToChange"],
+    "multiStickerHide": ["visibilityDecisionHandler"],
+    "scrollHide": ["visibilityDecisionHandler"],
+    "hide": ["handleHideChange"]
+  }; }
+  static get style() { return stickerCss; }
+};
+Sticker = /*@__PURE__*/ proxyCustomElement(Sticker, [1, "nano-sticker", {
+    "autoResize": [4, "auto-resize"],
+    "isSticky": [1028, "is-sticky"],
+    "offset": [1026],
+    "position": [1],
+    "quietMode": [1, "quiet-mode"],
+    "hideOnNewStickers": [4, "hide-on-new-stickers"],
+    "breakPointMax": [2, "break-point-max"],
+    "breakPointMin": [2, "break-point-min"],
+    "scrollParent": [1040],
+    "stickTo": [1, "stick-to"],
+    "isStuck": [32],
+    "isRootSticker": [32],
+    "hide": [32],
+    "scrollHide": [32],
+    "multiStickerHide": [32],
+    "scrollingTo": [32],
+    "quietModeIsOn": [32],
+    "stuckCounter": [32],
+    "stickerIndex": [32],
+    "stickToEle": [32],
+    "triggerPos": [32],
+    "trigger": [32],
+    "_offset": [32],
+    "isHiding": [64],
+    "isSticking": [64],
+    "setTriggerPos": [64],
+    "getTriggerPos": [64],
+    "pauseHiding": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["nano-sticker"];
+  components.forEach(tagName => { switch (tagName) {
+    case "nano-sticker":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Sticker);
+      }
+      break;
+  } });
+}
+
+export { Sticker as S, defineCustomElement as d };
+
+//# sourceMappingURL=sticker.js.map