@nanoporetech-digital/components 2.10.1 → 2.11.0

package/dist/esm-es5/nano-sticker.entry.js

@@ -1,5 +1,5 @@
 var __awaiter=this&&this.__awaiter||function(t,e,i,s){function o(t){return t instanceof i?t:new i((function(e){e(t)}))}return new(i||(i=Promise))((function(i,n){function r(t){try{h(s.next(t))}catch(e){n(e)}}function c(t){try{h(s["throw"](t))}catch(e){n(e)}}function h(t){t.done?i(t.value):o(t.value).then(r,c)}h((s=s.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var i={label:0,sent:function(){if(n[0]&1)throw n[1];return n[1]},trys:[],ops:[]},s,o,n,r;return r={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function c(t){return function(e){return h([t,e])}}function h(r){if(s)throw new TypeError("Generator is already executing.");while(i)try{if(s=1,o&&(n=r[0]&2?o["return"]:r[0]?o["throw"]||((n=o["return"])&&n.call(o),0):o.next)&&!(n=n.call(o,r[1])).done)return n;if(o=0,n)r=[r[0]&2,n.value];switch(r[0]){case 0:case 1:n=r;break;case 4:i.label++;return{value:r[1],done:false};case 5:i.label++;o=r[1];r=[0];continue;case 7:r=i.ops.pop();i.trys.pop();continue;default:if(!(n=i.trys,n=n.length>0&&n[n.length-1])&&(r[0]===6||r[0]===2)){i=0;continue}if(r[0]===3&&(!n||r[1]>n[0]&&r[1]<n[3])){i.label=r[1];break}if(r[0]===6&&i.label<n[1]){i.label=n[1];n=r;break}if(n&&i.label<n[2]){i.label=n[2];i.ops.push(r);break}if(n[2])i.ops.pop();i.trys.pop();continue}r=e.call(t,i)}catch(c){r=[6,c];o=0}finally{s=n=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};
 /*!
  * Web Components for Nanopore digital Web Apps
- */import{r as registerInstance,c as createEvent,h,e as Host,g as getElement}from"./index-c42becad.js";import{i as index}from"./ResizeObserver.es-724af9fd.js";import{r as raf,h as hasShadowDom,b as browserCanUseCssVariables}from"./index-bf53664b.js";import{a as getOffset}from"./dom-faa69d29.js";import{d as debounce}from"./throttle-d3d933cd.js";var 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(t){return t instanceof Document?window.pageYOffset:t.scrollTop}function _getOffset(t,e){var i=e instanceof Document?document.documentElement:e;return getOffset(t,i)}var Sticker=function(){function t(t){var e=this;registerInstance(this,t);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;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;this.autoResize=true;this.isSticky=true;this.offset=0;this.position="top";this.quietMode={h:600,w:600};this.hideOnNewStickers=true;this.breakPointMax=null;this.breakPointMin=null;this.setupParentResizeListener=function(){if(e.parentSizeObserver){e.parentSizeObserver.disconnect();e.parentSizeObserver=undefined}e.parentSizeObserver=new index((function(t){for(var i=0,s=t;i<s.length;i++){var o=s[i];var n=void 0,r=void 0;if(o.contentRect.height)n=o.contentRect.height;if(o.contentRect.width)r=o.contentRect.width;if(typeof e.quietMode==="object"){if(r<e.quietMode.w||n<e.quietMode.h)e.quietModeIsOn=true;else e.quietModeIsOn=false}if(e.breakPointMin){if(r>e.breakPointMin)e.isSticky=true;else e.isSticky=false}if(e.breakPointMax){if(r<e.breakPointMax)e.isSticky=true;else e.isSticky=false}if(e.isRootSticker&&e.sticker&&e.autoResize)e.sticker.style.width=e.host.scrollWidth+"px"}}));var t=e.scrollParent instanceof Document?e.scrollParent.documentElement:e.scrollParent;if(t)e.parentSizeObserver.observe(t)};this.onStickToDisplayEvent=function(t){if(t.detail.sticker!==e.stickToEle)return;switch(t.type){case"nanoHide":e._offset=0;e.cacheOffset=e.offset;e.offset=0;if(!e.isStuck)e.moveTrigger(false);if(!e.isRootSticker&&e.quietModeIsOn){raf((function(){e.stickToEle.style.minHeight=e.stickToEleInitSize.height+(e.host.scrollHeight+(typeof e.cacheOffset==="object"?e.cacheOffset.v:e.cacheOffset))+"px";e.stickToEle.setTriggerPos(e.stickToEleInitSize.height*-1)}))}break;case"nanoShow":e._offset=e.stickToEleInitSize.height;e.offset=e.cacheOffset;e.moveTrigger(true);if(!e.isRootSticker&&e.quietModeIsOn){raf((function(){e.stickToEle.style.minHeight="";e.stickToEle.setTriggerPos(0)}))}break;case"nanoStuck":e.stickToEleInitSize=e.stickToEle.getBoundingClientRect();e._offset=e.stickToEleInitSize.height;break}};this.onStickEvent=function(t){return __awaiter(e,void 0,void 0,(function(){var e,i;return __generator(this,(function(s){switch(s.label){case 0:e=t.detail?t.detail.sticker:null;if(!e||e.position!==this.position)return[2];return[4,e.getTriggerPos()];case 1:i=s.sent();if(t.type==="nanoStuck"&&e!==this.host&&e.scrollParent===this.host.scrollParent){this.stickerIndex++;if(!this.hideOnNewStickers)return[2];if(this.positions.includes("top")&&this.triggerPos.top<i.top||this.positions.includes("bottom")&&this.triggerPos.top>i.top){this.multiStickerHide=true;this.stuckCounter++}}if(t.type==="nanoUnstuck"&&e!==this.host&&e.scrollParent===this.host.scrollParent){this.stickerIndex--;if(!this.hideOnNewStickers)return[2];if(this.positions.includes("top")&&this.triggerPos.top<i.top||this.positions.includes("bottom")&&this.triggerPos.top>i.top){this.stuckCounter--;if(this.stuckCounter<1)this.multiStickerHide=false}}return[2]}}))}))};this.onScroll=function(){var t=_getScrollTop(e.scrollParent);if(t<e.scrollPosCache){if(!e.positions.includes("bottom"))e.handleScrollTo();else e.handleScrollAway(t)}if(t>e.scrollPosCache){if(!e.positions.includes("bottom"))e.handleScrollAway(t);else e.handleScrollTo()}e.scrollPosCache=t}}t.prototype.isHiding=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.hide]}))}))};t.prototype.isSticking=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.shouldStick();return[2,this.isStuck]}))}))};t.prototype.setTriggerPos=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){return[2,this._offset=t]}))}))};t.prototype.getTriggerPos=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.triggerPos]}))}))};t.prototype.pauseHiding=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){return[2,this.pauseHide=t]}))}))};t.prototype.updateTriggerOffset=function(){if(!this.trigger||!this.scrollParent||!this.listenForScrollParent)return;this.triggerPos=_getOffset(this.trigger,this.scrollParent)};t.prototype.stickerResizeListener=function(){var t=this;if(this.contentSizeObserver){this.contentSizeObserver.disconnect();this.contentSizeObserver=undefined}this.contentSizeObserver=new index((function(e){for(var i=0,s=e;i<s.length;i++){var o=s[i];if(t.pauseResizeWatcher)return;if(o.contentRect.height){if(t.position==="top")t.host.style.height=o.contentRect.height+"px";if(t.position==="bottom")t.host.style.minHeight=o.contentRect.height+"px"}}}));this.contentSizeObserver.observe(this.content)};t.prototype.quietModeChange=function(){var t=this;if(this.quietMode==="on")raf((function(){return t.quietModeIsOn=true}));else if(this.quietMode==="off")raf((function(){return t.quietModeIsOn=false}))};t.prototype.setOffset=function(){var t,e,i,s;var o=this;this.trigger.setAttribute("style","");var n,r,c,h;var a=this.isRootSticker||this.stickToEle?this.sticker:this.host;if(!a)return;if(typeof this.offset==="object")t=this.offset,n=t.v,r=t.h;else n=r=this.offset;if(typeof this._offset==="object")e=this._offset,i=e.v,n=i===void 0?c:i,s=e.h,r=s===void 0?h:s;else c=h=this._offset;var l=function(t){var e=t.match(/(top|bottom)/)?n:r;u(t);a.style[t]=e+"px";if(!browserCanUseCssVariables())return;if(e)o.host.style.setProperty("--hide-transform-amount","(110% + "+e+"px)");else o.host.style.setProperty("--hide-transform-amount",null)};var u=function(t){var e=t.match(/(top|bottom)/)?n+c:r+h;o.trigger.style[t]=e*-1+"px";o.trigger.style.position="relative";o.trigger.style.height="1px"};if(this.positions.includes("start")&&this.isRtl||this.positions.includes("end")&&!this.isRtl)l("right");if(this.positions.includes("end")&&this.isRtl||this.positions.includes("start")&&!this.isRtl)l("left");if(this.positions.includes("top"))l("top");if(this.positions.includes("bottom"))l("bottom")};t.prototype.positionChange=function(){this.positions=this.position.split("-");this.setOffset()};t.prototype.stuckChange=function(){return __awaiter(this,void 0,void 0,(function(){var t;var e=this;return __generator(this,(function(i){if(this.isStuck){if(this.stickToEle){t=hasShadowDom(this.host)?this.host.children:this.content.children;this.slottedContent=Array.from(t);this.slottedContent.forEach((function(t){if(hasShadowDom(e.host))e.stickToEle.appendChild(t);else e.stickToEle.querySelector(".sticker-content").appendChild(t);t.style.order=e.stickerIndex+""}));this.nanoStuck.emit({sticker:this.stickToEle})}else this.nanoStuck.emit({sticker:this.host})}else{this.scrollHide=false;if(this.stickToEle){this.slottedContent.forEach((function(t){e.host.appendChild(t);t.style.order=""}));this.nanoUnstuck.emit({sticker:this.stickToEle})}else this.nanoUnstuck.emit({sticker:this.host})}return[2]}))}))};t.prototype.attachScrollListeners=function(){if(this.quietModeIsOn)this.scrollParent.addEventListener("scroll",this.onScroll,{passive:true,capture:false});else if(this.scrollParent){this.scrollParent.removeEventListener("scroll",this.onScroll);this.moveTrigger(true)}};t.prototype.handleParentEvents=function(t,e){if(e===void 0){e=null}if(!this.listenForScrollParent)return;if(e)this.manageListenersOnParent(false,e);if(this.scrollParent)this.manageListenersOnParent(!this.stickToEle)};t.prototype.stickToEleChange=function(t,e){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(e){e.removeEventListener("nanoHide",this.onStickToDisplayEvent);e.removeEventListener("nanoShow",this.onStickToDisplayEvent);e.removeEventListener("nanoStuck",this.onStickToDisplayEvent);e.removeEventListener("nanoUnstuck",this.onStickToDisplayEvent)}};t.prototype.stickToChange=function(){if(this.stickTo)this.stickToEle=this.scrollParent.querySelector(this.stickTo);else this.stickToEle=undefined};t.prototype.visibilityDecisionHandler=function(){if(this.multiStickerHide||this.scrollHide)this.hide=true;else this.hide=false};t.prototype.handleHideChange=function(){if(this.hide)this.nanoHide.emit({sticker:this.host});else this.nanoShow.emit({sticker:this.host})};t.prototype.setupIO=function(){var t=this;if(this.io){this.io.disconnect();this.io=undefined}if(!this.scrollParent||!this.hasBootstrapped||!this.trigger)return;this.isRootSticker=this.scrollParent instanceof Document;var e=this.scrollParent;if(this.scrollParent instanceof Document)e=null;this.io=new window.IntersectionObserver((function(e){if(t.pauseResizeWatcher||!t.isSticky)return;t.shouldStick(e.slice(-1)[0])}),{root:e});this.io.observe(this.trigger)};t.prototype.manageListenersOnParent=function(t,e){var i=e||this.scrollParent;if(!i)return;if(!t){try{if(this.quietModeIsOn)i.removeEventListener("scroll",this.onScroll);i.removeEventListener("nanoStuck",this.onStickEvent);i.removeEventListener("nanoUnstuck",this.onStickEvent)}catch(s){console.error("Events haven`t been added")}}else{i.addEventListener("nanoStuck",this.onStickEvent);i.addEventListener("nanoUnstuck",this.onStickEvent);if(this.quietModeIsOn)this.attachScrollListeners()}this.setupParentResizeListener()};t.prototype.handleScrollTo=function(){this.scrollPosThresholdCache=null;if(!this.scrollHide)return;if(this.scrollingTo!==true){this._offset=this.cacheOffset||this._offset}this.scrollingTo=true;this.scrollHide=false};t.prototype.handleScrollAway=function(t){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=t;else if(!this.pauseHide&&Math.abs(t-this.scrollPosThresholdCache)>100)this.scrollHide=true};t.prototype.moveTrigger=function(t){if(this.positions.includes("bottom")&&!t||!this.positions.includes("bottom")&&t){this.host.parentNode.insertBefore(this.trigger,this.host)}else this.host.parentNode.insertBefore(this.trigger,this.host.nextSibling)};t.prototype.getScrollParent=function(){var t=/(auto|scroll)/;var e=function(t,i){if(t.parentNode===null){return i}return e(t.parentNode,i.concat([t]))};var i=function(t,e){return getComputedStyle(t,null).getPropertyValue(e)};var s=function(t){return i(t,"overflow")+i(t,"overflow-y")+i(t,"overflow-x")};var o=function(e){return t.test(s(e))};var n=document.documentElement.getBoundingClientRect().height;var r=function(t){if(!(t instanceof HTMLElement))return;var i=e(t,[]);return i.find((function(t){return o(t)&&t.getBoundingClientRect().height!==n}))||document};return r(this.host)};t.prototype.shouldStick=function(t){var e;if(this.positions.includes("top")){if(!this.isRootSticker)e=_getOffset(this.trigger,this.scrollParent).top;else e=this.trigger.getBoundingClientRect().top;this.isStuck=e<-1}else if(this.positions.includes("bottom")){e=this.trigger.getBoundingClientRect().top;var i=t&&t.rootBounds?t.rootBounds:(this.scrollParent instanceof Document?document.documentElement:this.scrollParent).getBoundingClientRect();this.isStuck=e>i.height+i.top}};t.prototype.bootstrapGurantor=function(){var t=this;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((function(e){return e.position===t.position})).findIndex((function(e){return e===t.host}));this.setOffset();this.stickerResizeListener();this.setupParentResizeListener();this.slottedContent=Array.from(this.host.children);this.slottedContent.forEach((function(e){e.style.order=t.stickerIndex+""}));this.updateTriggerOffset();this.stickToChange();this.setupIO();this.onStickToDisplayEvent=debounce(this.onStickToDisplayEvent,50)};t.prototype.connectedCallback=function(){var t=this;this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";document.documentElement.addEventListener("nanoComponentsReady",(function(){setTimeout((function(e){return t.bootstrapGurantor()}),200)}));setTimeout((function(e){if(!t.hasBootstrapped)t.bootstrapGurantor()}),1e3)};t.prototype.disconnectedCallback=function(){if(this.io){this.io.disconnect();this.io=undefined}if(this.parentSizeObserver){this.parentSizeObserver.disconnect();this.parentSizeObserver=undefined}this.scrollParent=null;this.hasBootstrapped=false};t.prototype.render=function(){var t=this;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:function(e){return t.sticker=e}},h("div",{class:"sticker-content",ref:function(e){return t.content=e}},h("slot",null))))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){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"]}},enumerable:false,configurable:true});return t}();Sticker.style=stickerCss;export{Sticker as nano_sticker};
+ */import{r as registerInstance,c as createEvent,h,e as Host,g as getElement}from"./index-c42becad.js";import{r as raf,h as hasShadowDom,b as browserCanUseCssVariables}from"./index-bf53664b.js";import{a as getOffset}from"./dom-faa69d29.js";import{d as debounce}from"./throttle-d3d933cd.js";var 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(t){return t instanceof Document?window.pageYOffset:t.scrollTop}function _getOffset(t,e){var i=e instanceof Document?document.documentElement:e;return getOffset(t,i)}var Sticker=function(){function t(t){var e=this;registerInstance(this,t);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;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;this.autoResize=true;this.isSticky=true;this.offset=0;this.position="top";this.quietMode={h:600,w:600};this.hideOnNewStickers=true;this.breakPointMax=null;this.breakPointMin=null;this.setupParentResizeListener=function(){if(e.parentSizeObserver){e.parentSizeObserver.disconnect();e.parentSizeObserver=undefined}e.parentSizeObserver=new ResizeObserver((function(t){for(var i=0,s=t;i<s.length;i++){var o=s[i];var n=void 0,r=void 0;if(o.contentRect.height)n=o.contentRect.height;if(o.contentRect.width)r=o.contentRect.width;if(typeof e.quietMode==="object"){if(r<e.quietMode.w||n<e.quietMode.h)e.quietModeIsOn=true;else e.quietModeIsOn=false}if(e.breakPointMin){if(r>e.breakPointMin)e.isSticky=true;else e.isSticky=false}if(e.breakPointMax){if(r<e.breakPointMax)e.isSticky=true;else e.isSticky=false}if(e.isRootSticker&&e.sticker&&e.autoResize)e.sticker.style.width=e.host.scrollWidth+"px"}}));var t=e.scrollParent instanceof Document?e.scrollParent.documentElement:e.scrollParent;if(t)e.parentSizeObserver.observe(t)};this.onStickToDisplayEvent=function(t){if(t.detail.sticker!==e.stickToEle)return;switch(t.type){case"nanoHide":e._offset=0;e.cacheOffset=e.offset;e.offset=0;if(!e.isStuck)e.moveTrigger(false);if(!e.isRootSticker&&e.quietModeIsOn){raf((function(){e.stickToEle.style.minHeight=e.stickToEleInitSize.height+(e.host.scrollHeight+(typeof e.cacheOffset==="object"?e.cacheOffset.v:e.cacheOffset))+"px";e.stickToEle.setTriggerPos(e.stickToEleInitSize.height*-1)}))}break;case"nanoShow":e._offset=e.stickToEleInitSize.height;e.offset=e.cacheOffset;e.moveTrigger(true);if(!e.isRootSticker&&e.quietModeIsOn){raf((function(){e.stickToEle.style.minHeight="";e.stickToEle.setTriggerPos(0)}))}break;case"nanoStuck":e.stickToEleInitSize=e.stickToEle.getBoundingClientRect();e._offset=e.stickToEleInitSize.height;break}};this.onStickEvent=function(t){return __awaiter(e,void 0,void 0,(function(){var e,i;return __generator(this,(function(s){switch(s.label){case 0:e=t.detail?t.detail.sticker:null;if(!e||e.position!==this.position)return[2];return[4,e.getTriggerPos()];case 1:i=s.sent();if(t.type==="nanoStuck"&&e!==this.host&&e.scrollParent===this.host.scrollParent){this.stickerIndex++;if(!this.hideOnNewStickers)return[2];if(this.positions.includes("top")&&this.triggerPos.top<i.top||this.positions.includes("bottom")&&this.triggerPos.top>i.top){this.multiStickerHide=true;this.stuckCounter++}}if(t.type==="nanoUnstuck"&&e!==this.host&&e.scrollParent===this.host.scrollParent){this.stickerIndex--;if(!this.hideOnNewStickers)return[2];if(this.positions.includes("top")&&this.triggerPos.top<i.top||this.positions.includes("bottom")&&this.triggerPos.top>i.top){this.stuckCounter--;if(this.stuckCounter<1)this.multiStickerHide=false}}return[2]}}))}))};this.onScroll=function(){var t=_getScrollTop(e.scrollParent);if(t<e.scrollPosCache){if(!e.positions.includes("bottom"))e.handleScrollTo();else e.handleScrollAway(t)}if(t>e.scrollPosCache){if(!e.positions.includes("bottom"))e.handleScrollAway(t);else e.handleScrollTo()}e.scrollPosCache=t}}t.prototype.isHiding=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.hide]}))}))};t.prototype.isSticking=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.shouldStick();return[2,this.isStuck]}))}))};t.prototype.setTriggerPos=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){return[2,this._offset=t]}))}))};t.prototype.getTriggerPos=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.triggerPos]}))}))};t.prototype.pauseHiding=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){return[2,this.pauseHide=t]}))}))};t.prototype.updateTriggerOffset=function(){if(!this.trigger||!this.scrollParent||!this.listenForScrollParent)return;this.triggerPos=_getOffset(this.trigger,this.scrollParent)};t.prototype.stickerResizeListener=function(){var t=this;if(this.contentSizeObserver){this.contentSizeObserver.disconnect();this.contentSizeObserver=undefined}this.contentSizeObserver=new ResizeObserver((function(e){for(var i=0,s=e;i<s.length;i++){var o=s[i];if(t.pauseResizeWatcher)return;if(o.contentRect.height){if(t.position==="top")t.host.style.height=o.contentRect.height+"px";if(t.position==="bottom")t.host.style.minHeight=o.contentRect.height+"px"}}}));this.contentSizeObserver.observe(this.content)};t.prototype.quietModeChange=function(){var t=this;if(this.quietMode==="on")raf((function(){return t.quietModeIsOn=true}));else if(this.quietMode==="off")raf((function(){return t.quietModeIsOn=false}))};t.prototype.setOffset=function(){var t,e,i,s;var o=this;this.trigger.setAttribute("style","");var n,r,c,h;var a=this.isRootSticker||this.stickToEle?this.sticker:this.host;if(!a)return;if(typeof this.offset==="object")t=this.offset,n=t.v,r=t.h;else n=r=this.offset;if(typeof this._offset==="object")e=this._offset,i=e.v,n=i===void 0?c:i,s=e.h,r=s===void 0?h:s;else c=h=this._offset;var l=function(t){var e=t.match(/(top|bottom)/)?n:r;u(t);a.style[t]=e+"px";if(!browserCanUseCssVariables())return;if(e)o.host.style.setProperty("--hide-transform-amount","(110% + "+e+"px)");else o.host.style.setProperty("--hide-transform-amount",null)};var u=function(t){var e=t.match(/(top|bottom)/)?n+c:r+h;o.trigger.style[t]=e*-1+"px";o.trigger.style.position="relative";o.trigger.style.height="1px"};if(this.positions.includes("start")&&this.isRtl||this.positions.includes("end")&&!this.isRtl)l("right");if(this.positions.includes("end")&&this.isRtl||this.positions.includes("start")&&!this.isRtl)l("left");if(this.positions.includes("top"))l("top");if(this.positions.includes("bottom"))l("bottom")};t.prototype.positionChange=function(){this.positions=this.position.split("-");this.setOffset()};t.prototype.stuckChange=function(){return __awaiter(this,void 0,void 0,(function(){var t;var e=this;return __generator(this,(function(i){if(this.isStuck){if(this.stickToEle){t=hasShadowDom(this.host)?this.host.children:this.content.children;this.slottedContent=Array.from(t);this.slottedContent.forEach((function(t){if(hasShadowDom(e.host))e.stickToEle.appendChild(t);else e.stickToEle.querySelector(".sticker-content").appendChild(t);t.style.order=e.stickerIndex+""}));this.nanoStuck.emit({sticker:this.stickToEle})}else this.nanoStuck.emit({sticker:this.host})}else{this.scrollHide=false;if(this.stickToEle){this.slottedContent.forEach((function(t){e.host.appendChild(t);t.style.order=""}));this.nanoUnstuck.emit({sticker:this.stickToEle})}else this.nanoUnstuck.emit({sticker:this.host})}return[2]}))}))};t.prototype.attachScrollListeners=function(){if(this.quietModeIsOn)this.scrollParent.addEventListener("scroll",this.onScroll,{passive:true,capture:false});else if(this.scrollParent){this.scrollParent.removeEventListener("scroll",this.onScroll);this.moveTrigger(true)}};t.prototype.handleParentEvents=function(t,e){if(e===void 0){e=null}if(!this.listenForScrollParent)return;if(e)this.manageListenersOnParent(false,e);if(this.scrollParent)this.manageListenersOnParent(!this.stickToEle)};t.prototype.stickToEleChange=function(t,e){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(e){e.removeEventListener("nanoHide",this.onStickToDisplayEvent);e.removeEventListener("nanoShow",this.onStickToDisplayEvent);e.removeEventListener("nanoStuck",this.onStickToDisplayEvent);e.removeEventListener("nanoUnstuck",this.onStickToDisplayEvent)}};t.prototype.stickToChange=function(){if(this.stickTo)this.stickToEle=this.scrollParent.querySelector(this.stickTo);else this.stickToEle=undefined};t.prototype.visibilityDecisionHandler=function(){if(this.multiStickerHide||this.scrollHide)this.hide=true;else this.hide=false};t.prototype.handleHideChange=function(){if(this.hide)this.nanoHide.emit({sticker:this.host});else this.nanoShow.emit({sticker:this.host})};t.prototype.setupIO=function(){var t=this;if(this.io){this.io.disconnect();this.io=undefined}if(!this.scrollParent||!this.hasBootstrapped||!this.trigger)return;this.isRootSticker=this.scrollParent instanceof Document;var e=this.scrollParent;if(this.scrollParent instanceof Document)e=null;this.io=new window.IntersectionObserver((function(e){if(t.pauseResizeWatcher||!t.isSticky)return;t.shouldStick(e.slice(-1)[0])}),{root:e});this.io.observe(this.trigger)};t.prototype.manageListenersOnParent=function(t,e){var i=e||this.scrollParent;if(!i)return;if(!t){try{if(this.quietModeIsOn)i.removeEventListener("scroll",this.onScroll);i.removeEventListener("nanoStuck",this.onStickEvent);i.removeEventListener("nanoUnstuck",this.onStickEvent)}catch(s){console.error("Events haven`t been added")}}else{i.addEventListener("nanoStuck",this.onStickEvent);i.addEventListener("nanoUnstuck",this.onStickEvent);if(this.quietModeIsOn)this.attachScrollListeners()}this.setupParentResizeListener()};t.prototype.handleScrollTo=function(){this.scrollPosThresholdCache=null;if(!this.scrollHide)return;if(this.scrollingTo!==true){this._offset=this.cacheOffset||this._offset}this.scrollingTo=true;this.scrollHide=false};t.prototype.handleScrollAway=function(t){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=t;else if(!this.pauseHide&&Math.abs(t-this.scrollPosThresholdCache)>100)this.scrollHide=true};t.prototype.moveTrigger=function(t){if(this.positions.includes("bottom")&&!t||!this.positions.includes("bottom")&&t){this.host.parentNode.insertBefore(this.trigger,this.host)}else this.host.parentNode.insertBefore(this.trigger,this.host.nextSibling)};t.prototype.getScrollParent=function(){var t=/(auto|scroll)/;var e=function(t,i){if(t.parentNode===null){return i}return e(t.parentNode,i.concat([t]))};var i=function(t,e){return getComputedStyle(t,null).getPropertyValue(e)};var s=function(t){return i(t,"overflow")+i(t,"overflow-y")+i(t,"overflow-x")};var o=function(e){return t.test(s(e))};var n=document.documentElement.getBoundingClientRect().height;var r=function(t){if(!(t instanceof HTMLElement))return;var i=e(t,[]);return i.find((function(t){return o(t)&&t.getBoundingClientRect().height!==n}))||document};return r(this.host)};t.prototype.shouldStick=function(t){var e;if(this.positions.includes("top")){if(!this.isRootSticker)e=_getOffset(this.trigger,this.scrollParent).top;else e=this.trigger.getBoundingClientRect().top;this.isStuck=e<-1}else if(this.positions.includes("bottom")){e=this.trigger.getBoundingClientRect().top;var i=t&&t.rootBounds?t.rootBounds:(this.scrollParent instanceof Document?document.documentElement:this.scrollParent).getBoundingClientRect();this.isStuck=e>i.height+i.top}};t.prototype.bootstrapGurantor=function(){var t=this;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((function(e){return e.position===t.position})).findIndex((function(e){return e===t.host}));this.setOffset();this.stickerResizeListener();this.setupParentResizeListener();this.slottedContent=Array.from(this.host.children);this.slottedContent.forEach((function(e){e.style.order=t.stickerIndex+""}));this.updateTriggerOffset();this.stickToChange();this.setupIO();this.onStickToDisplayEvent=debounce(this.onStickToDisplayEvent,50)};t.prototype.connectedCallback=function(){var t=this;this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";document.documentElement.addEventListener("nanoComponentsReady",(function(){setTimeout((function(e){return t.bootstrapGurantor()}),200)}));setTimeout((function(e){if(!t.hasBootstrapped)t.bootstrapGurantor()}),1e3)};t.prototype.disconnectedCallback=function(){if(this.io){this.io.disconnect();this.io=undefined}if(this.parentSizeObserver){this.parentSizeObserver.disconnect();this.parentSizeObserver=undefined}this.scrollParent=null;this.hasBootstrapped=false};t.prototype.render=function(){var t=this;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:function(e){return t.sticker=e}},h("div",{class:"sticker-content",ref:function(e){return t.content=e}},h("slot",null))))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){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"]}},enumerable:false,configurable:true});return t}();Sticker.style=stickerCss;export{Sticker as nano_sticker};
 //# sourceMappingURL=nano-sticker.entry.js.map

package/dist/esm-es5/nano-sticker.entry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["src/components/sticker/sticker.scss?tag=nano-sticker&encapsulation=shadow","src/components/sticker/sticker.tsx"],"names":["stickerCss","_getScrollTop","ele","Document","window","pageYOffset","scrollTop","_getOffset","parent","parentEle","document","documentElement","getOffset","Sticker","class_1","hostRef","_this","this","isRtl","scrollPosCache","scrollPosThresholdCache","cacheOffset","pauseResizeWatcher","listenForScrollParent","positions","pauseHide","hasBootstrapped","isStuck","isRootSticker","hide","scrollHide","multiStickerHide","scrollingTo","quietModeIsOn","stuckCounter","stickerIndex","_offset","autoResize","isSticky","offset","position","quietMode","h","w","hideOnNewStickers","breakPointMax","breakPointMin","setupParentResizeListener","parentSizeObserver","disconnect","undefined","ResizeObserver","entries","_i","entries_1","length","entry","height","width","contentRect","sticker","style","host","scrollWidth","toWatch","scrollParent","observe","onStickToDisplayEvent","e","detail","stickToEle","type","moveTrigger","raf","minHeight","stickToEleInitSize","scrollHeight","v","setTriggerPos","getBoundingClientRect","onStickEvent","__awaiter","getTriggerPos","incomingTriggerPos","_a","sent","includes","triggerPos","top","onScroll","y","handleScrollTo","handleScrollAway","prototype","isHiding","isSticking","shouldStick","pauseHiding","pause","updateTriggerOffset","trigger","stickerResizeListener","contentSizeObserver","entries_2","content","quietModeChange","setOffset","setAttribute","_v","_h","_b","_c","_d","setPos","pos","u","match","setTriggetPos","browserCanUseCssVariables","setProperty","positionChange","split","stuckChange","hasShadowDom","children","slottedContent","Array","from","forEach","child","appendChild","querySelector","order","nanoStuck","emit","nanoUnstuck","attachScrollListeners","addEventListener","passive","capture","removeEventListener","handleParentEvents","_","oldParent","manageListenersOnParent","stickToEleChange","oldEle","stickToChange","stickTo","visibilityDecisionHandler","handleHideChange","nanoHide","nanoShow","setupIO","io","root","IntersectionObserver","slice","addEvents","console","error","currScroll","Math","abs","toInitial","parentNode","insertBefore","nextSibling","getScrollParent","regex","parents","_node","ps","concat","prop","getComputedStyle","getPropertyValue","overflow","scroll","test","docHeight","HTMLElement","find","data","scrollAmt","parentBounding","rootBounds","bootstrapGurantor","createElement","classList","add","querySelectorAll","filter","findIndex","debounce","connectedCallback","dir","ownerDocument","setTimeout","disconnectedCallback","render","Host","sticky","siblings","index","stuck","placed-bottom","placed-top","placed-end","placed-start","class","ref","div"],"mappings":"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","sourcesContent":["@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n  * @prop --stuck-left: The left position when your sticker is stuck. This can be useful to force your sticker to fill the viewport for example. Defaults to initial\n  * @prop --stuck-right: The right position when your sticker is stuck. This can be useful to force your sticker to fill the viewport for example. Defaults to initial\n  * @prop --stuck-z-index: The z-index order to display your sticker. Can be useful when displaying multiple stickers simultaneously. Defaults to #{$layer-index-menubar};\n  @prop --top-hide: This is used for the hide transform animation (e.g. when quiet-mode is on). Defaults to translateY(-110%);\n  @prop --bottom-hide: This is used for the hide transform animation (e.g. when quiet-mode is on). Defaults to translateY(110%);\n  */\n\n  --stuck-left: initial;\n  --stuck-right: initial;\n  --stuck-z-index: #{$layer-index-menubar};\n  --top-hide: translateY(-110%);\n  --bottom-hide: translateY(110%);\n\n  display: block;\n  max-width: 100%;\n}\n\n:host([sticky]) {\n  position: sticky;\n  transition: 0.3s ease transform;\n  will-change: min-height;\n}\n\n:host([sticky][stuck]) {\n  left: var(--stuck-left);\n  right: var(--stuck-right);\n  z-index: var(--stuck-z-index) !important;\n}\n\n:host([sticky][hide][placed-top]) {\n  transform: var(--top-hide);\n}\n\n:host([sticky][hide][placed-bottom]) {\n  transform: var(--bottom-hide);\n}\n\n:host([sticky][index='1']) {\n  z-index: calc(var(--stuck-z-index) + 1);\n}\n\n:host([sticky][index='2']) {\n  z-index: calc(var(--stuck-z-index) + 2);\n}\n\n:host([sticky][index='3']) {\n  z-index: calc(var(--stuck-z-index) + 3);\n}\n\n:host([sticky][index='4']) {\n  z-index: calc(var(--stuck-z-index) + 4);\n}\n\n:host([sticky][index='5']) {\n  z-index: calc(var(--stuck-z-index) + 5);\n}\n\n.sticker {\n  display: inherit;\n  max-width: inherit;\n  width: 100%;\n\n  &:not(.stuck) {\n    width: auto !important;\n  }\n\n  &.sticky {\n    transition: 0.3s ease all;\n    position: relative;\n\n    :host([index='1']) & {\n      z-index: calc(var(--stuck-z-index) + 1);\n    }\n\n    :host([index='2']) & {\n      z-index: calc(var(--stuck-z-index) + 2);\n    }\n\n    :host([index='3']) & {\n      z-index: calc(var(--stuck-z-index) + 3);\n    }\n\n    :host([index='4']) & {\n      z-index: calc(var(--stuck-z-index) + 4);\n    }\n\n    :host([index='5']) & {\n      z-index: calc(var(--stuck-z-index) + 5);\n    }\n  }\n\n  &.stuck {\n    position: fixed;\n    left: var(--stuck-left);\n    right: var(--stuck-right);\n    z-index: var(--stuck-z-index);\n    transform: translateY(0);\n\n    :host([placed-top]) & {\n      top: 0;\n    }\n\n    :host([placed-bottom]) & {\n      bottom: 0;\n    }\n\n    &.hide {\n      :host([placed-top]) & {\n        transform: var(--top-hide);\n      }\n\n      :host([placed-bottom]) & {\n        transform: var(--bottom-hide);\n      }\n    }\n  }\n}\n\n.sticker-content {\n  display: flex;\n  flex-wrap: wrap;\n}\n","import {\n  Component,\n  ComponentInterface,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport {\n  browserCanUseCssVariables,\n  debounce,\n  getOffset,\n  hasShadowDom,\n  raf,\n} from '../../utils';\n\nfunction _getScrollTop(ele: HTMLElement | Document) {\n  return ele instanceof Document ? window.pageYOffset : ele.scrollTop;\n}\n\nfunction _getOffset(ele: HTMLElement, parent: HTMLElement | Document) {\n  let parentEle =\n    parent instanceof Document ? document.documentElement : parent;\n  return getOffset(ele, parentEle);\n}\n\ntype Positions = 'top' | 'bottom' | 'start' | 'end';\n\n/**\n * The Sticker component is a toolbox for 'sticking' items to scrolling containers.\n *\n */\n@Component({\n  tag: 'nano-sticker',\n  styleUrl: 'sticker.scss',\n  shadow: true,\n})\nexport class Sticker implements ComponentInterface {\n  private isRtl: boolean = false;\n  private io: IntersectionObserver;\n  private contentSizeObserver: ResizeObserver;\n  private parentSizeObserver: ResizeObserver;\n  private sticker: HTMLDivElement;\n  private content: HTMLDivElement;\n  private scrollPosCache = 0;\n  private scrollPosThresholdCache = 0;\n  private cacheOffset: number | { v: number; h: number } = 0;\n  private slottedContent: Element[];\n  private pauseResizeWatcher = false;\n  private listenForScrollParent = false;\n  private stickToEleInitSize?: DOMRect;\n  private positions: Positions[] = [];\n  private pauseHide: boolean = false;\n  private hasBootstrapped = false;\n\n  @Element() host: HTMLNanoStickerElement;\n\n  // Internal State\n\n  @State() isStuck = false;\n  @State() isRootSticker = true;\n  @State() hide = false;\n  @State() scrollHide = false;\n  @State() multiStickerHide = false;\n  @State() scrollingTo = false;\n  @State() quietModeIsOn = false;\n  @State() stuckCounter = 0;\n  @State() stickerIndex = 0;\n  @State() stickToEle?: HTMLNanoStickerElement;\n  @State() triggerPos: { top: number; left: number };\n  @State() trigger: HTMLDivElement;\n  @State() _offset: number | { v: number; h: number } = 0;\n\n  // Public API\n\n  /** Only applicable to root stickers. When applied the sticker will grow or shrink to the scrollParent size */\n  @Prop() autoResize = true;\n\n  /** Manually enable / disabled sticky behaviour */\n  @Prop({ mutable: true }) isSticky = true;\n\n  /** Distance the item should be stuck from the sticky edge. */\n  @Prop({ mutable: true }) offset: number | { v: number; h: number } = 0;\n\n  /** The edge of the scroll-parent to stick to */\n  @Prop() position: 'top' | 'bottom' = 'top';\n  // other opts I'd like one day. 'start' | 'end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'\n\n  /** When applied, the sticker will hide when the scroll-parent\n   * is scrolling away from the sticker's stuck position and show when scrolling toward it.\n   * By default this will apply when the parent is below either the h or w dimensions */\n  @Prop() quietMode: 'on' | 'off' | { h: number; w: number } = {\n    h: 600,\n    w: 600,\n  };\n\n  /** When applied stickers will hide upon new stickers being stuck to the same position */\n  @Prop() hideOnNewStickers = true;\n\n  /** The max width of the item to implement sticky behaviour. */\n  @Prop() breakPointMax: null | number = null;\n\n  /** The min width of the item to implement sticky behaviour. */\n  @Prop() breakPointMin: null | number = null;\n\n  /** Define which scroll element to listen & stick to.\n   * By default, it will find traverse the DOM to find the closest. */\n  @Prop({ mutable: true }) scrollParent?: HTMLElement | Document;\n\n  /** Upon being stuck, attach the sticker to another sticker element.\n   * A JS query selector that returns a <nano-sticker> */\n  @Prop() stickTo: string;\n\n  // Broadcasted Events\n\n  /** Emitted when a sticker is stuck */\n  @Event() nanoStuck!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  /** Emitted when a sticker is unstuck */\n  @Event() nanoUnstuck!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  /** Emitted when a sticker is hidden */\n  @Event() nanoHide!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  /** Emitted when a sticker is showing */\n  @Event() nanoShow!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  // Public methods\n\n  /**\n   * Method to return the visibility status of the sticker\n   * @returns boolean\n   */\n  @Method()\n  async isHiding() {\n    return this.hide;\n  }\n\n  /**\n   * Method to return the stuck status of the sticker\n   * @returns boolean\n   */\n  @Method()\n  async isSticking() {\n    this.shouldStick();\n    return this.isStuck;\n  }\n\n  /** @internal */\n  @Method()\n  async setTriggerPos(offset: number | { v: number; h: number }) {\n    return (this._offset = offset);\n  }\n\n  /** @internal */\n  @Method()\n  async getTriggerPos() {\n    return this.triggerPos;\n  }\n\n  /** @internal */\n  @Method()\n  async pauseHiding(pause: boolean) {\n    return (this.pauseHide = pause);\n  }\n\n  // Watchers\n\n  /** Keep a note of trigger position. Need this to track sticker order in the DOM */\n  @Watch('trigger')\n  @Watch('scrollParent')\n  updateTriggerOffset() {\n    if (!this.trigger || !this.scrollParent || !this.listenForScrollParent)\n      return;\n    this.triggerPos = _getOffset(this.trigger, this.scrollParent);\n  }\n\n  /** A root sticker is a fixed element Or this sticker is sticking to another.\n   * We need a content resize watcher to make sure we maintain a correct placeholder size in the body */\n  @Watch('position')\n  stickerResizeListener() {\n    if (this.contentSizeObserver) {\n      this.contentSizeObserver.disconnect();\n      this.contentSizeObserver = undefined;\n    }\n\n    this.contentSizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (this.pauseResizeWatcher) return;\n\n        if (entry.contentRect.height) {\n          if (this.position === 'top')\n            this.host.style.height = entry.contentRect.height + 'px';\n          if (this.position === 'bottom')\n            this.host.style.minHeight = entry.contentRect.height + 'px';\n        }\n      }\n    });\n    this.contentSizeObserver.observe(this.content);\n  }\n\n  @Watch('quietMode')\n  quietModeChange() {\n    if (this.quietMode === 'on') raf(() => (this.quietModeIsOn = true));\n    else if (this.quietMode === 'off') raf(() => (this.quietModeIsOn = false));\n  }\n\n  /** offset is part of the public API but we also use it to manipulate trigger points */\n  @Watch('offset')\n  @Watch('_offset')\n  setOffset() {\n    this.trigger.setAttribute('style', '');\n    let v: number, h: number, _v: number, _h: number;\n    let sticker: HTMLElement =\n      this.isRootSticker || this.stickToEle ? this.sticker : this.host;\n\n    if (!sticker) return;\n\n    if (typeof this.offset === 'object') ({ v, h } = this.offset);\n    else v = h = this.offset;\n\n    if (typeof this._offset === 'object') ({ v = _v, h = _h } = this._offset);\n    else _v = _h = this._offset;\n\n    const setPos = (pos: 'top' | 'bottom' | 'left' | 'right') => {\n      let u = pos.match(/(top|bottom)/) ? v : h;\n      setTriggetPos(pos);\n      sticker.style[pos] = u + 'px';\n      if (!browserCanUseCssVariables()) return;\n      if (u)\n        this.host.style.setProperty(\n          '--hide-transform-amount',\n          `(110% + ${u}px)`\n        );\n      else this.host.style.setProperty('--hide-transform-amount', null);\n    };\n\n    const setTriggetPos = (pos: 'top' | 'bottom' | 'left' | 'right') => {\n      let u = pos.match(/(top|bottom)/) ? v + _v : h + _h;\n      this.trigger.style[pos] = u * -1 + 'px';\n      this.trigger.style.position = 'relative';\n      this.trigger.style.height = '1px';\n    };\n\n    if (\n      (this.positions.includes('start') && this.isRtl) ||\n      (this.positions.includes('end') && !this.isRtl)\n    )\n      setPos('right');\n\n    if (\n      (this.positions.includes('end') && this.isRtl) ||\n      (this.positions.includes('start') && !this.isRtl)\n    )\n      setPos('left');\n\n    if (this.positions.includes('top')) setPos('top');\n    if (this.positions.includes('bottom')) setPos('bottom');\n  }\n\n  @Watch('position')\n  positionChange() {\n    this.positions = this.position.split('-') as Positions[];\n    this.setOffset();\n  }\n\n  /** If this sticker is attached to a 'master' sticker (stickToEle),\n   * here we move the content of this sticker in and out accordingly */\n  @Watch('isStuck')\n  async stuckChange() {\n    if (this.isStuck) {\n      if (this.stickToEle) {\n        let content = hasShadowDom(this.host)\n          ? this.host.children\n          : this.content.children;\n        this.slottedContent = Array.from(content);\n\n        this.slottedContent.forEach((child: HTMLElement) => {\n          if (hasShadowDom(this.host)) this.stickToEle.appendChild(child);\n          else\n            this.stickToEle\n              .querySelector('.sticker-content')\n              .appendChild(child);\n          child.style.order = this.stickerIndex + '';\n        });\n\n        this.nanoStuck.emit({ sticker: this.stickToEle });\n      } else this.nanoStuck.emit({ sticker: this.host });\n    } else {\n      this.scrollHide = false;\n\n      if (this.stickToEle) {\n        this.slottedContent.forEach((child: HTMLElement) => {\n          this.host.appendChild(child);\n          child.style.order = '';\n        });\n        this.nanoUnstuck.emit({ sticker: this.stickToEle });\n      } else this.nanoUnstuck.emit({ sticker: this.host });\n    }\n  }\n\n  /** attach scroll listener. 'hides' stickers when scrolling away from trigger and 'shows' when scrolling toward */\n  @Watch('quietModeIsOn')\n  attachScrollListeners() {\n    if (this.quietModeIsOn)\n      this.scrollParent.addEventListener('scroll', this.onScroll, {\n        passive: true,\n        capture: false,\n      });\n    else if (this.scrollParent) {\n      this.scrollParent.removeEventListener('scroll', this.onScroll);\n      this.moveTrigger(true);\n    }\n  }\n\n  /** Add / remove parent scrolling listeners. If there's stickToEle we need to remove them */\n  @Watch('scrollParent')\n  @Watch('stickToEle')\n  handleParentEvents(_, oldParent: null | HTMLElement = null) {\n    if (!this.listenForScrollParent) return;\n    if (oldParent) this.manageListenersOnParent(false, oldParent);\n    if (this.scrollParent) this.manageListenersOnParent(!this.stickToEle);\n  }\n\n  /** Add remove specific listeners if we're sticking to a sticker.\n   * We need to adjust triggers according to the status of the 'master'  */\n  @Watch('stickToEle')\n  stickToEleChange(_, oldEle: null | HTMLNanoStickerElement) {\n    if (this.stickToEle) {\n      this.stickToEle.addEventListener('nanoHide', this.onStickToDisplayEvent);\n      this.stickToEle.addEventListener('nanoShow', this.onStickToDisplayEvent);\n      this.stickToEle.addEventListener('nanoStuck', this.onStickToDisplayEvent);\n      this.stickToEle.addEventListener(\n        'nanoUnstuck',\n        this.onStickToDisplayEvent\n      );\n    }\n    if (oldEle) {\n      oldEle.removeEventListener('nanoHide', this.onStickToDisplayEvent);\n      oldEle.removeEventListener('nanoShow', this.onStickToDisplayEvent);\n      oldEle.removeEventListener('nanoStuck', this.onStickToDisplayEvent);\n      oldEle.removeEventListener('nanoUnstuck', this.onStickToDisplayEvent);\n    }\n  }\n\n  /** Find and set the stickToEle from the public, selector string */\n  @Watch('stickTo')\n  stickToChange() {\n    if (this.stickTo)\n      this.stickToEle = this.scrollParent.querySelector(this.stickTo);\n    else this.stickToEle = undefined;\n  }\n\n  /** 2 potential criteria for hiding. Multi-stickers or quietmode. */\n  @Watch('multiStickerHide')\n  @Watch('scrollHide')\n  visibilityDecisionHandler() {\n    if (this.multiStickerHide || this.scrollHide) this.hide = true;\n    else this.hide = false;\n  }\n\n  @Watch('hide')\n  handleHideChange() {\n    if (this.hide) this.nanoHide.emit({ sticker: this.host });\n    else this.nanoShow.emit({ sticker: this.host });\n  }\n\n  @Watch('scrollParent')\n  setupIO() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n    if (!this.scrollParent || !this.hasBootstrapped || !this.trigger) return;\n\n    this.isRootSticker = this.scrollParent instanceof Document;\n    let root = this.scrollParent;\n    if (this.scrollParent instanceof Document) root = null;\n\n    this.io = new window.IntersectionObserver(\n      (_) => {\n        if (this.pauseResizeWatcher || !this.isSticky) return;\n        this.shouldStick(_.slice(-1)[0]);\n      },\n      { root: root as HTMLElement }\n    );\n\n    this.io.observe(this.trigger);\n  }\n\n  // Private methods / handlers\n\n  /** Assesses the public API quitemode and works out if it should be applied atm.\n   * If 'smallscreen', or there is a breakpointmax / min it will add a resizeobserver to conditionally add behaviour */\n  private setupParentResizeListener = () => {\n    if (this.parentSizeObserver) {\n      this.parentSizeObserver.disconnect();\n      this.parentSizeObserver = undefined;\n    }\n\n    this.parentSizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        let height: number, width: number;\n        if (entry.contentRect.height) height = entry.contentRect.height;\n        if (entry.contentRect.width) width = entry.contentRect.width;\n\n        if (typeof this.quietMode === 'object') {\n          if (width < this.quietMode.w || height < this.quietMode.h)\n            this.quietModeIsOn = true;\n          else this.quietModeIsOn = false;\n        }\n\n        if (this.breakPointMin) {\n          if (width > this.breakPointMin) this.isSticky = true;\n          else this.isSticky = false;\n        }\n\n        if (this.breakPointMax) {\n          if (width < this.breakPointMax) this.isSticky = true;\n          else this.isSticky = false;\n        }\n\n        if (this.isRootSticker && this.sticker && this.autoResize)\n          this.sticker.style.width = this.host.scrollWidth + 'px';\n      }\n    });\n\n    let toWatch =\n      this.scrollParent instanceof Document\n        ? this.scrollParent.documentElement\n        : this.scrollParent;\n    if (toWatch) this.parentSizeObserver.observe(toWatch);\n  };\n\n  /** For stickTo stickers. We listen to the events from the 'master' sticker to ammend the hide/show trigger\n   * Main diffs from rootstickers / non is height being on 'master' */\n  private onStickToDisplayEvent = (\n    e: CustomEvent<{ sticker: HTMLNanoStickerElement }>\n  ) => {\n    if (e.detail.sticker !== this.stickToEle) return;\n\n    switch (e.type) {\n      case 'nanoHide':\n        this._offset = 0;\n        this.cacheOffset = this.offset;\n        this.offset = 0;\n        /** trigger moves down, underneath sticker if the main sticker hides */\n        if (!this.isStuck) this.moveTrigger(false);\n\n        /** If it's an actual 'position: sticky' element, we need to give the sticker an appropriate height.\n         * This minimises content jumping around as items are added */\n        if (!this.isRootSticker && this.quietModeIsOn) {\n          raf(() => {\n            this.stickToEle.style.minHeight =\n              this.stickToEleInitSize.height +\n              (this.host.scrollHeight +\n                (typeof this.cacheOffset === 'object'\n                  ? this.cacheOffset.v\n                  : this.cacheOffset)) +\n              'px';\n            this.stickToEle.setTriggerPos(this.stickToEleInitSize.height * -1);\n          });\n        }\n        break;\n      case 'nanoShow':\n        this._offset = this.stickToEleInitSize.height;\n        this.offset = this.cacheOffset;\n        this.moveTrigger(true);\n\n        /** reset master sticker size */\n        if (!this.isRootSticker && this.quietModeIsOn) {\n          raf(() => {\n            this.stickToEle.style.minHeight = '';\n            this.stickToEle.setTriggerPos(0);\n          });\n        }\n        break;\n      case 'nanoStuck':\n        this.stickToEleInitSize = this.stickToEle.getBoundingClientRect();\n        this._offset = this.stickToEleInitSize.height;\n        break;\n    }\n  };\n\n  /** Add or removes event listeners / observers on scrolling parent\n   * for when the scrolling parent changes, or, this sticker is sticking to another */\n  private manageListenersOnParent(\n    addEvents: boolean,\n    ele?: HTMLElement | Document\n  ) {\n    let scrollParent = ele || this.scrollParent;\n\n    if (!scrollParent) return;\n\n    if (!addEvents) {\n      try {\n        if (this.quietModeIsOn)\n          scrollParent.removeEventListener('scroll', this.onScroll);\n        scrollParent.removeEventListener('nanoStuck', this.onStickEvent);\n        scrollParent.removeEventListener('nanoUnstuck', this.onStickEvent);\n      } catch (e) {\n        console.error('Events haven`t been added');\n      }\n    } else {\n      scrollParent.addEventListener('nanoStuck', this.onStickEvent);\n      scrollParent.addEventListener('nanoUnstuck', this.onStickEvent);\n\n      if (this.quietModeIsOn) this.attachScrollListeners();\n    }\n    this.setupParentResizeListener();\n  }\n\n  /** Handler applied to scrolling parent. When 'hideOnNewStickers' is true, hide this sticker on subsequent stuck stickers.  */\n  private onStickEvent = async (\n    e: CustomEvent<{ sticker: HTMLNanoStickerElement }>\n  ) => {\n    let sticker = e.detail ? e.detail.sticker : null;\n    if (!sticker || sticker.position !== this.position) return;\n\n    const incomingTriggerPos = await sticker.getTriggerPos();\n\n    if (\n      e.type === 'nanoStuck' &&\n      sticker !== this.host &&\n      sticker.scrollParent === this.host.scrollParent\n    ) {\n      this.stickerIndex++;\n\n      if (!this.hideOnNewStickers) return;\n\n      if (\n        (this.positions.includes('top') &&\n          this.triggerPos.top < incomingTriggerPos.top) ||\n        (this.positions.includes('bottom') &&\n          this.triggerPos.top > incomingTriggerPos.top)\n      ) {\n        this.multiStickerHide = true;\n        this.stuckCounter++;\n      }\n    }\n\n    if (\n      e.type === 'nanoUnstuck' &&\n      sticker !== this.host &&\n      sticker.scrollParent === this.host.scrollParent\n    ) {\n      this.stickerIndex--;\n\n      if (!this.hideOnNewStickers) return;\n\n      if (\n        (this.positions.includes('top') &&\n          this.triggerPos.top < incomingTriggerPos.top) ||\n        (this.positions.includes('bottom') &&\n          this.triggerPos.top > incomingTriggerPos.top)\n      ) {\n        this.stuckCounter--;\n        if (this.stuckCounter < 1) this.multiStickerHide = false;\n      }\n    }\n  };\n\n  /** Scroll handler applied to scrolling parent. Only applied when quietmode is on.\n   * 'hides' stickers when scrolling over 100px away from trigger and 'shows' when scrolling toward */\n  private onScroll = () => {\n    let y: number = _getScrollTop(this.scrollParent);\n\n    // scrolling up\n    if (y < this.scrollPosCache) {\n      if (!this.positions.includes('bottom')) this.handleScrollTo();\n      else this.handleScrollAway(y);\n    }\n\n    // scrolling down\n    if (y > this.scrollPosCache) {\n      if (!this.positions.includes('bottom')) this.handleScrollAway(y);\n      else this.handleScrollTo();\n    }\n    this.scrollPosCache = y;\n  };\n\n  /** Watch for scroll direction. Only applies when quietmode is on.\n   * We need to addjust the position of the trigger when the sticker is hidden */\n  private handleScrollTo() {\n    this.scrollPosThresholdCache = null;\n    if (!this.scrollHide) return;\n\n    if (this.scrollingTo !== true) {\n      this._offset = this.cacheOffset || this._offset;\n    }\n    this.scrollingTo = true;\n    this.scrollHide = false;\n  }\n\n  private handleScrollAway(currScroll: number) {\n    if (this.scrollHide) return;\n\n    if (!this.isStuck) return;\n\n    if (this.scrollingTo !== false) {\n      this.cacheOffset = this._offset;\n      this._offset = 0;\n    }\n    this.scrollingTo = false;\n\n    if (!this.scrollPosThresholdCache)\n      this.scrollPosThresholdCache = currScroll;\n    else if (\n      !this.pauseHide &&\n      Math.abs(currScroll - this.scrollPosThresholdCache) > 100\n    )\n      this.scrollHide = true;\n  }\n\n  private moveTrigger(toInitial?: boolean) {\n    if (\n      (this.positions.includes('bottom') && !toInitial) ||\n      (!this.positions.includes('bottom') && toInitial)\n    ) {\n      this.host.parentNode.insertBefore(this.trigger, this.host);\n    } else\n      this.host.parentNode.insertBefore(this.trigger, this.host.nextSibling);\n  }\n\n  /** Gets the 'closest' scrolling parent */\n  private getScrollParent() {\n    const regex = /(auto|scroll)/;\n    const parents = (_node: Node, ps: Node[]) => {\n      if (_node.parentNode === null) {\n        return ps;\n      }\n      return parents(_node.parentNode, ps.concat([_node]));\n    };\n    const style = (_node, prop) =>\n      getComputedStyle(_node, null).getPropertyValue(prop);\n    const overflow = (_node) =>\n      style(_node, 'overflow') +\n      style(_node, 'overflow-y') +\n      style(_node, 'overflow-x');\n    const scroll = (_node) => regex.test(overflow(_node));\n    const docHeight = document.documentElement.getBoundingClientRect().height;\n\n    const scrollParent = (_node: HTMLElement) => {\n      if (!(_node instanceof HTMLElement)) return;\n\n      const ps = parents(_node, []);\n      return (\n        ps.find(\n          (ele) =>\n            scroll(ele) && ele.getBoundingClientRect().height !== docHeight\n        ) || document\n      );\n    };\n\n    return scrollParent(this.host);\n  }\n\n  private shouldStick(data?: IntersectionObserverEntry) {\n    let scrollAmt: number;\n\n    if (this.positions.includes('top')) {\n      if (!this.isRootSticker)\n        scrollAmt = _getOffset(this.trigger, this.scrollParent).top;\n      else scrollAmt = this.trigger.getBoundingClientRect().top;\n      this.isStuck = scrollAmt < -1;\n    } else if (this.positions.includes('bottom')) {\n      scrollAmt = this.trigger.getBoundingClientRect().top;\n      const parentBounding =\n        data && data.rootBounds\n          ? data.rootBounds\n          : (this.scrollParent instanceof Document\n              ? document.documentElement\n              : this.scrollParent\n            ).getBoundingClientRect();\n      this.isStuck = scrollAmt > parentBounding.height + parentBounding.top;\n    }\n  }\n\n  private bootstrapGurantor() {\n    this.hasBootstrapped = true;\n\n    this.scrollParent = this.scrollParent || this.getScrollParent();\n    this.isRootSticker = this.scrollParent instanceof Document;\n\n    this.trigger = this.trigger || document.createElement('div');\n    this.trigger.classList.add('sticker-trigger');\n\n    this.positionChange();\n    this.moveTrigger(true);\n    this.quietModeChange();\n\n    this.listenForScrollParent = true;\n    this.handleParentEvents(true);\n\n    this.stickerIndex = Array.from(\n      this.scrollParent.querySelectorAll('nano-sticker')\n    )\n      .filter(\n        (sticker: HTMLNanoStickerElement) => sticker.position === this.position\n      )\n      .findIndex((sticker) => sticker === this.host);\n\n    this.setOffset();\n    this.stickerResizeListener();\n    this.setupParentResizeListener();\n\n    // bit of a hack ... add default 'order'. Required for 'stickTo' elements.\n    this.slottedContent = Array.from(this.host.children);\n    this.slottedContent.forEach((child: HTMLElement) => {\n      child.style.order = this.stickerIndex + '';\n    });\n\n    this.updateTriggerOffset();\n    this.stickToChange();\n    this.setupIO();\n    this.onStickToDisplayEvent = debounce(this.onStickToDisplayEvent, 50);\n  }\n\n  // Stencil metthods\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    // this is all horrible.... shrug\n    document.documentElement.addEventListener('nanoComponentsReady', () => {\n      setTimeout((_) => this.bootstrapGurantor(), 200);\n    });\n    setTimeout((_) => {\n      if (!this.hasBootstrapped) this.bootstrapGurantor();\n    }, 1000);\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n\n    if (this.parentSizeObserver) {\n      this.parentSizeObserver.disconnect();\n      this.parentSizeObserver = undefined;\n    }\n\n    this.scrollParent = null;\n    this.hasBootstrapped = false;\n  }\n\n  render() {\n    return (\n      <Host\n        sticky={!this.isRootSticker && !this.stickToEle && this.isSticky}\n        hide={this.hide && this.isStuck}\n        siblings={this.stuckCounter}\n        index={this.stickerIndex}\n        stuck={this.isStuck && this.isSticky}\n        placed-bottom={this.positions.includes('bottom')}\n        placed-top={this.positions.includes('top')}\n        placed-end={this.positions.includes('end')}\n        placed-start={this.positions.includes('start')}\n      >\n        <div\n          class={{\n            sticker: true,\n            sticky: this.isRootSticker && this.isSticky,\n            stuck: this.isStuck && this.isRootSticker && this.isSticky,\n            hide: this.isRootSticker && this.hide && this.isStuck,\n          }}\n          ref={(div) => (this.sticker = div)}\n        >\n          <div class=\"sticker-content\" ref={(div) => (this.content = div)}>\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/sticker/sticker.scss?tag=nano-sticker&encapsulation=shadow","src/components/sticker/sticker.tsx"],"names":["stickerCss","_getScrollTop","ele","Document","window","pageYOffset","scrollTop","_getOffset","parent","parentEle","document","documentElement","getOffset","Sticker","class_1","hostRef","_this","this","isRtl","scrollPosCache","scrollPosThresholdCache","cacheOffset","pauseResizeWatcher","listenForScrollParent","positions","pauseHide","hasBootstrapped","isStuck","isRootSticker","hide","scrollHide","multiStickerHide","scrollingTo","quietModeIsOn","stuckCounter","stickerIndex","_offset","autoResize","isSticky","offset","position","quietMode","h","w","hideOnNewStickers","breakPointMax","breakPointMin","setupParentResizeListener","parentSizeObserver","disconnect","undefined","ResizeObserver","entries","_i","entries_1","length","entry","height","width","contentRect","sticker","style","host","scrollWidth","toWatch","scrollParent","observe","onStickToDisplayEvent","e","detail","stickToEle","type","moveTrigger","raf","minHeight","stickToEleInitSize","scrollHeight","v","setTriggerPos","getBoundingClientRect","onStickEvent","__awaiter","getTriggerPos","incomingTriggerPos","_a","sent","includes","triggerPos","top","onScroll","y","handleScrollTo","handleScrollAway","prototype","isHiding","isSticking","shouldStick","pauseHiding","pause","updateTriggerOffset","trigger","stickerResizeListener","contentSizeObserver","entries_2","content","quietModeChange","setOffset","setAttribute","_v","_h","_b","_c","_d","setPos","pos","u","match","setTriggetPos","browserCanUseCssVariables","setProperty","positionChange","split","stuckChange","hasShadowDom","children","slottedContent","Array","from","forEach","child","appendChild","querySelector","order","nanoStuck","emit","nanoUnstuck","attachScrollListeners","addEventListener","passive","capture","removeEventListener","handleParentEvents","_","oldParent","manageListenersOnParent","stickToEleChange","oldEle","stickToChange","stickTo","visibilityDecisionHandler","handleHideChange","nanoHide","nanoShow","setupIO","io","root","IntersectionObserver","slice","addEvents","console","error","currScroll","Math","abs","toInitial","parentNode","insertBefore","nextSibling","getScrollParent","regex","parents","_node","ps","concat","prop","getComputedStyle","getPropertyValue","overflow","scroll","test","docHeight","HTMLElement","find","data","scrollAmt","parentBounding","rootBounds","bootstrapGurantor","createElement","classList","add","querySelectorAll","filter","findIndex","debounce","connectedCallback","dir","ownerDocument","setTimeout","disconnectedCallback","render","Host","sticky","siblings","index","stuck","placed-bottom","placed-top","placed-end","placed-start","class","ref","div"],"mappings":"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","sourcesContent":["@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n  * @prop --stuck-left: The left position when your sticker is stuck. This can be useful to force your sticker to fill the viewport for example. Defaults to initial\n  * @prop --stuck-right: The right position when your sticker is stuck. This can be useful to force your sticker to fill the viewport for example. Defaults to initial\n  * @prop --stuck-z-index: The z-index order to display your sticker. Can be useful when displaying multiple stickers simultaneously. Defaults to #{$layer-index-menubar};\n  @prop --top-hide: This is used for the hide transform animation (e.g. when quiet-mode is on). Defaults to translateY(-110%);\n  @prop --bottom-hide: This is used for the hide transform animation (e.g. when quiet-mode is on). Defaults to translateY(110%);\n  */\n\n  --stuck-left: initial;\n  --stuck-right: initial;\n  --stuck-z-index: #{$layer-index-menubar};\n  --top-hide: translateY(-110%);\n  --bottom-hide: translateY(110%);\n\n  display: block;\n  max-width: 100%;\n}\n\n:host([sticky]) {\n  position: sticky;\n  transition: 0.3s ease transform;\n  will-change: min-height;\n}\n\n:host([sticky][stuck]) {\n  left: var(--stuck-left);\n  right: var(--stuck-right);\n  z-index: var(--stuck-z-index) !important;\n}\n\n:host([sticky][hide][placed-top]) {\n  transform: var(--top-hide);\n}\n\n:host([sticky][hide][placed-bottom]) {\n  transform: var(--bottom-hide);\n}\n\n:host([sticky][index='1']) {\n  z-index: calc(var(--stuck-z-index) + 1);\n}\n\n:host([sticky][index='2']) {\n  z-index: calc(var(--stuck-z-index) + 2);\n}\n\n:host([sticky][index='3']) {\n  z-index: calc(var(--stuck-z-index) + 3);\n}\n\n:host([sticky][index='4']) {\n  z-index: calc(var(--stuck-z-index) + 4);\n}\n\n:host([sticky][index='5']) {\n  z-index: calc(var(--stuck-z-index) + 5);\n}\n\n.sticker {\n  display: inherit;\n  max-width: inherit;\n  width: 100%;\n\n  &:not(.stuck) {\n    width: auto !important;\n  }\n\n  &.sticky {\n    transition: 0.3s ease all;\n    position: relative;\n\n    :host([index='1']) & {\n      z-index: calc(var(--stuck-z-index) + 1);\n    }\n\n    :host([index='2']) & {\n      z-index: calc(var(--stuck-z-index) + 2);\n    }\n\n    :host([index='3']) & {\n      z-index: calc(var(--stuck-z-index) + 3);\n    }\n\n    :host([index='4']) & {\n      z-index: calc(var(--stuck-z-index) + 4);\n    }\n\n    :host([index='5']) & {\n      z-index: calc(var(--stuck-z-index) + 5);\n    }\n  }\n\n  &.stuck {\n    position: fixed;\n    left: var(--stuck-left);\n    right: var(--stuck-right);\n    z-index: var(--stuck-z-index);\n    transform: translateY(0);\n\n    :host([placed-top]) & {\n      top: 0;\n    }\n\n    :host([placed-bottom]) & {\n      bottom: 0;\n    }\n\n    &.hide {\n      :host([placed-top]) & {\n        transform: var(--top-hide);\n      }\n\n      :host([placed-bottom]) & {\n        transform: var(--bottom-hide);\n      }\n    }\n  }\n}\n\n.sticker-content {\n  display: flex;\n  flex-wrap: wrap;\n}\n","import {\n  Component,\n  ComponentInterface,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\nimport {\n  browserCanUseCssVariables,\n  debounce,\n  getOffset,\n  hasShadowDom,\n  raf,\n} from '../../utils';\n\nfunction _getScrollTop(ele: HTMLElement | Document) {\n  return ele instanceof Document ? window.pageYOffset : ele.scrollTop;\n}\n\nfunction _getOffset(ele: HTMLElement, parent: HTMLElement | Document) {\n  let parentEle =\n    parent instanceof Document ? document.documentElement : parent;\n  return getOffset(ele, parentEle);\n}\n\ntype Positions = 'top' | 'bottom' | 'start' | 'end';\n\n/**\n * The Sticker component is a toolbox for 'sticking' items to scrolling containers.\n *\n */\n@Component({\n  tag: 'nano-sticker',\n  styleUrl: 'sticker.scss',\n  shadow: true,\n})\nexport class Sticker implements ComponentInterface {\n  private isRtl: boolean = false;\n  private io: IntersectionObserver;\n  private contentSizeObserver: ResizeObserver;\n  private parentSizeObserver: ResizeObserver;\n  private sticker: HTMLDivElement;\n  private content: HTMLDivElement;\n  private scrollPosCache = 0;\n  private scrollPosThresholdCache = 0;\n  private cacheOffset: number | { v: number; h: number } = 0;\n  private slottedContent: Element[];\n  private pauseResizeWatcher = false;\n  private listenForScrollParent = false;\n  private stickToEleInitSize?: DOMRect;\n  private positions: Positions[] = [];\n  private pauseHide: boolean = false;\n  private hasBootstrapped = false;\n\n  @Element() host: HTMLNanoStickerElement;\n\n  // Internal State\n\n  @State() isStuck = false;\n  @State() isRootSticker = true;\n  @State() hide = false;\n  @State() scrollHide = false;\n  @State() multiStickerHide = false;\n  @State() scrollingTo = false;\n  @State() quietModeIsOn = false;\n  @State() stuckCounter = 0;\n  @State() stickerIndex = 0;\n  @State() stickToEle?: HTMLNanoStickerElement;\n  @State() triggerPos: { top: number; left: number };\n  @State() trigger: HTMLDivElement;\n  @State() _offset: number | { v: number; h: number } = 0;\n\n  // Public API\n\n  /** Only applicable to root stickers. When applied the sticker will grow or shrink to the scrollParent size */\n  @Prop() autoResize = true;\n\n  /** Manually enable / disabled sticky behaviour */\n  @Prop({ mutable: true }) isSticky = true;\n\n  /** Distance the item should be stuck from the sticky edge. */\n  @Prop({ mutable: true }) offset: number | { v: number; h: number } = 0;\n\n  /** The edge of the scroll-parent to stick to */\n  @Prop() position: 'top' | 'bottom' = 'top';\n  // other opts I'd like one day. 'start' | 'end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'\n\n  /** When applied, the sticker will hide when the scroll-parent\n   * is scrolling away from the sticker's stuck position and show when scrolling toward it.\n   * By default this will apply when the parent is below either the h or w dimensions */\n  @Prop() quietMode: 'on' | 'off' | { h: number; w: number } = {\n    h: 600,\n    w: 600,\n  };\n\n  /** When applied stickers will hide upon new stickers being stuck to the same position */\n  @Prop() hideOnNewStickers = true;\n\n  /** The max width of the item to implement sticky behaviour. */\n  @Prop() breakPointMax: null | number = null;\n\n  /** The min width of the item to implement sticky behaviour. */\n  @Prop() breakPointMin: null | number = null;\n\n  /** Define which scroll element to listen & stick to.\n   * By default, it will find traverse the DOM to find the closest. */\n  @Prop({ mutable: true }) scrollParent?: HTMLElement | Document;\n\n  /** Upon being stuck, attach the sticker to another sticker element.\n   * A JS query selector that returns a <nano-sticker> */\n  @Prop() stickTo: string;\n\n  // Broadcasted Events\n\n  /** Emitted when a sticker is stuck */\n  @Event() nanoStuck!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  /** Emitted when a sticker is unstuck */\n  @Event() nanoUnstuck!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  /** Emitted when a sticker is hidden */\n  @Event() nanoHide!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  /** Emitted when a sticker is showing */\n  @Event() nanoShow!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  // Public methods\n\n  /**\n   * Method to return the visibility status of the sticker\n   * @returns boolean\n   */\n  @Method()\n  async isHiding() {\n    return this.hide;\n  }\n\n  /**\n   * Method to return the stuck status of the sticker\n   * @returns boolean\n   */\n  @Method()\n  async isSticking() {\n    this.shouldStick();\n    return this.isStuck;\n  }\n\n  /** @internal */\n  @Method()\n  async setTriggerPos(offset: number | { v: number; h: number }) {\n    return (this._offset = offset);\n  }\n\n  /** @internal */\n  @Method()\n  async getTriggerPos() {\n    return this.triggerPos;\n  }\n\n  /** @internal */\n  @Method()\n  async pauseHiding(pause: boolean) {\n    return (this.pauseHide = pause);\n  }\n\n  // Watchers\n\n  /** Keep a note of trigger position. Need this to track sticker order in the DOM */\n  @Watch('trigger')\n  @Watch('scrollParent')\n  updateTriggerOffset() {\n    if (!this.trigger || !this.scrollParent || !this.listenForScrollParent)\n      return;\n    this.triggerPos = _getOffset(this.trigger, this.scrollParent);\n  }\n\n  /** A root sticker is a fixed element Or this sticker is sticking to another.\n   * We need a content resize watcher to make sure we maintain a correct placeholder size in the body */\n  @Watch('position')\n  stickerResizeListener() {\n    if (this.contentSizeObserver) {\n      this.contentSizeObserver.disconnect();\n      this.contentSizeObserver = undefined;\n    }\n\n    this.contentSizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (this.pauseResizeWatcher) return;\n\n        if (entry.contentRect.height) {\n          if (this.position === 'top')\n            this.host.style.height = entry.contentRect.height + 'px';\n          if (this.position === 'bottom')\n            this.host.style.minHeight = entry.contentRect.height + 'px';\n        }\n      }\n    });\n    this.contentSizeObserver.observe(this.content);\n  }\n\n  @Watch('quietMode')\n  quietModeChange() {\n    if (this.quietMode === 'on') raf(() => (this.quietModeIsOn = true));\n    else if (this.quietMode === 'off') raf(() => (this.quietModeIsOn = false));\n  }\n\n  /** offset is part of the public API but we also use it to manipulate trigger points */\n  @Watch('offset')\n  @Watch('_offset')\n  setOffset() {\n    this.trigger.setAttribute('style', '');\n    let v: number, h: number, _v: number, _h: number;\n    let sticker: HTMLElement =\n      this.isRootSticker || this.stickToEle ? this.sticker : this.host;\n\n    if (!sticker) return;\n\n    if (typeof this.offset === 'object') ({ v, h } = this.offset);\n    else v = h = this.offset;\n\n    if (typeof this._offset === 'object') ({ v = _v, h = _h } = this._offset);\n    else _v = _h = this._offset;\n\n    const setPos = (pos: 'top' | 'bottom' | 'left' | 'right') => {\n      let u = pos.match(/(top|bottom)/) ? v : h;\n      setTriggetPos(pos);\n      sticker.style[pos] = u + 'px';\n      if (!browserCanUseCssVariables()) return;\n      if (u)\n        this.host.style.setProperty(\n          '--hide-transform-amount',\n          `(110% + ${u}px)`\n        );\n      else this.host.style.setProperty('--hide-transform-amount', null);\n    };\n\n    const setTriggetPos = (pos: 'top' | 'bottom' | 'left' | 'right') => {\n      let u = pos.match(/(top|bottom)/) ? v + _v : h + _h;\n      this.trigger.style[pos] = u * -1 + 'px';\n      this.trigger.style.position = 'relative';\n      this.trigger.style.height = '1px';\n    };\n\n    if (\n      (this.positions.includes('start') && this.isRtl) ||\n      (this.positions.includes('end') && !this.isRtl)\n    )\n      setPos('right');\n\n    if (\n      (this.positions.includes('end') && this.isRtl) ||\n      (this.positions.includes('start') && !this.isRtl)\n    )\n      setPos('left');\n\n    if (this.positions.includes('top')) setPos('top');\n    if (this.positions.includes('bottom')) setPos('bottom');\n  }\n\n  @Watch('position')\n  positionChange() {\n    this.positions = this.position.split('-') as Positions[];\n    this.setOffset();\n  }\n\n  /** If this sticker is attached to a 'master' sticker (stickToEle),\n   * here we move the content of this sticker in and out accordingly */\n  @Watch('isStuck')\n  async stuckChange() {\n    if (this.isStuck) {\n      if (this.stickToEle) {\n        let content = hasShadowDom(this.host)\n          ? this.host.children\n          : this.content.children;\n        this.slottedContent = Array.from(content);\n\n        this.slottedContent.forEach((child: HTMLElement) => {\n          if (hasShadowDom(this.host)) this.stickToEle.appendChild(child);\n          else\n            this.stickToEle\n              .querySelector('.sticker-content')\n              .appendChild(child);\n          child.style.order = this.stickerIndex + '';\n        });\n\n        this.nanoStuck.emit({ sticker: this.stickToEle });\n      } else this.nanoStuck.emit({ sticker: this.host });\n    } else {\n      this.scrollHide = false;\n\n      if (this.stickToEle) {\n        this.slottedContent.forEach((child: HTMLElement) => {\n          this.host.appendChild(child);\n          child.style.order = '';\n        });\n        this.nanoUnstuck.emit({ sticker: this.stickToEle });\n      } else this.nanoUnstuck.emit({ sticker: this.host });\n    }\n  }\n\n  /** attach scroll listener. 'hides' stickers when scrolling away from trigger and 'shows' when scrolling toward */\n  @Watch('quietModeIsOn')\n  attachScrollListeners() {\n    if (this.quietModeIsOn)\n      this.scrollParent.addEventListener('scroll', this.onScroll, {\n        passive: true,\n        capture: false,\n      });\n    else if (this.scrollParent) {\n      this.scrollParent.removeEventListener('scroll', this.onScroll);\n      this.moveTrigger(true);\n    }\n  }\n\n  /** Add / remove parent scrolling listeners. If there's stickToEle we need to remove them */\n  @Watch('scrollParent')\n  @Watch('stickToEle')\n  handleParentEvents(_, oldParent: null | HTMLElement = null) {\n    if (!this.listenForScrollParent) return;\n    if (oldParent) this.manageListenersOnParent(false, oldParent);\n    if (this.scrollParent) this.manageListenersOnParent(!this.stickToEle);\n  }\n\n  /** Add remove specific listeners if we're sticking to a sticker.\n   * We need to adjust triggers according to the status of the 'master'  */\n  @Watch('stickToEle')\n  stickToEleChange(_, oldEle: null | HTMLNanoStickerElement) {\n    if (this.stickToEle) {\n      this.stickToEle.addEventListener('nanoHide', this.onStickToDisplayEvent);\n      this.stickToEle.addEventListener('nanoShow', this.onStickToDisplayEvent);\n      this.stickToEle.addEventListener('nanoStuck', this.onStickToDisplayEvent);\n      this.stickToEle.addEventListener(\n        'nanoUnstuck',\n        this.onStickToDisplayEvent\n      );\n    }\n    if (oldEle) {\n      oldEle.removeEventListener('nanoHide', this.onStickToDisplayEvent);\n      oldEle.removeEventListener('nanoShow', this.onStickToDisplayEvent);\n      oldEle.removeEventListener('nanoStuck', this.onStickToDisplayEvent);\n      oldEle.removeEventListener('nanoUnstuck', this.onStickToDisplayEvent);\n    }\n  }\n\n  /** Find and set the stickToEle from the public, selector string */\n  @Watch('stickTo')\n  stickToChange() {\n    if (this.stickTo)\n      this.stickToEle = this.scrollParent.querySelector(this.stickTo);\n    else this.stickToEle = undefined;\n  }\n\n  /** 2 potential criteria for hiding. Multi-stickers or quietmode. */\n  @Watch('multiStickerHide')\n  @Watch('scrollHide')\n  visibilityDecisionHandler() {\n    if (this.multiStickerHide || this.scrollHide) this.hide = true;\n    else this.hide = false;\n  }\n\n  @Watch('hide')\n  handleHideChange() {\n    if (this.hide) this.nanoHide.emit({ sticker: this.host });\n    else this.nanoShow.emit({ sticker: this.host });\n  }\n\n  @Watch('scrollParent')\n  setupIO() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n    if (!this.scrollParent || !this.hasBootstrapped || !this.trigger) return;\n\n    this.isRootSticker = this.scrollParent instanceof Document;\n    let root = this.scrollParent;\n    if (this.scrollParent instanceof Document) root = null;\n\n    this.io = new window.IntersectionObserver(\n      (_) => {\n        if (this.pauseResizeWatcher || !this.isSticky) return;\n        this.shouldStick(_.slice(-1)[0]);\n      },\n      { root: root as HTMLElement }\n    );\n\n    this.io.observe(this.trigger);\n  }\n\n  // Private methods / handlers\n\n  /** Assesses the public API quitemode and works out if it should be applied atm.\n   * If 'smallscreen', or there is a breakpointmax / min it will add a resizeobserver to conditionally add behaviour */\n  private setupParentResizeListener = () => {\n    if (this.parentSizeObserver) {\n      this.parentSizeObserver.disconnect();\n      this.parentSizeObserver = undefined;\n    }\n\n    this.parentSizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        let height: number, width: number;\n        if (entry.contentRect.height) height = entry.contentRect.height;\n        if (entry.contentRect.width) width = entry.contentRect.width;\n\n        if (typeof this.quietMode === 'object') {\n          if (width < this.quietMode.w || height < this.quietMode.h)\n            this.quietModeIsOn = true;\n          else this.quietModeIsOn = false;\n        }\n\n        if (this.breakPointMin) {\n          if (width > this.breakPointMin) this.isSticky = true;\n          else this.isSticky = false;\n        }\n\n        if (this.breakPointMax) {\n          if (width < this.breakPointMax) this.isSticky = true;\n          else this.isSticky = false;\n        }\n\n        if (this.isRootSticker && this.sticker && this.autoResize)\n          this.sticker.style.width = this.host.scrollWidth + 'px';\n      }\n    });\n\n    let toWatch =\n      this.scrollParent instanceof Document\n        ? this.scrollParent.documentElement\n        : this.scrollParent;\n    if (toWatch) this.parentSizeObserver.observe(toWatch);\n  };\n\n  /** For stickTo stickers. We listen to the events from the 'master' sticker to ammend the hide/show trigger\n   * Main diffs from rootstickers / non is height being on 'master' */\n  private onStickToDisplayEvent = (\n    e: CustomEvent<{ sticker: HTMLNanoStickerElement }>\n  ) => {\n    if (e.detail.sticker !== this.stickToEle) return;\n\n    switch (e.type) {\n      case 'nanoHide':\n        this._offset = 0;\n        this.cacheOffset = this.offset;\n        this.offset = 0;\n        /** trigger moves down, underneath sticker if the main sticker hides */\n        if (!this.isStuck) this.moveTrigger(false);\n\n        /** If it's an actual 'position: sticky' element, we need to give the sticker an appropriate height.\n         * This minimises content jumping around as items are added */\n        if (!this.isRootSticker && this.quietModeIsOn) {\n          raf(() => {\n            this.stickToEle.style.minHeight =\n              this.stickToEleInitSize.height +\n              (this.host.scrollHeight +\n                (typeof this.cacheOffset === 'object'\n                  ? this.cacheOffset.v\n                  : this.cacheOffset)) +\n              'px';\n            this.stickToEle.setTriggerPos(this.stickToEleInitSize.height * -1);\n          });\n        }\n        break;\n      case 'nanoShow':\n        this._offset = this.stickToEleInitSize.height;\n        this.offset = this.cacheOffset;\n        this.moveTrigger(true);\n\n        /** reset master sticker size */\n        if (!this.isRootSticker && this.quietModeIsOn) {\n          raf(() => {\n            this.stickToEle.style.minHeight = '';\n            this.stickToEle.setTriggerPos(0);\n          });\n        }\n        break;\n      case 'nanoStuck':\n        this.stickToEleInitSize = this.stickToEle.getBoundingClientRect();\n        this._offset = this.stickToEleInitSize.height;\n        break;\n    }\n  };\n\n  /** Add or removes event listeners / observers on scrolling parent\n   * for when the scrolling parent changes, or, this sticker is sticking to another */\n  private manageListenersOnParent(\n    addEvents: boolean,\n    ele?: HTMLElement | Document\n  ) {\n    let scrollParent = ele || this.scrollParent;\n\n    if (!scrollParent) return;\n\n    if (!addEvents) {\n      try {\n        if (this.quietModeIsOn)\n          scrollParent.removeEventListener('scroll', this.onScroll);\n        scrollParent.removeEventListener('nanoStuck', this.onStickEvent);\n        scrollParent.removeEventListener('nanoUnstuck', this.onStickEvent);\n      } catch (e) {\n        console.error('Events haven`t been added');\n      }\n    } else {\n      scrollParent.addEventListener('nanoStuck', this.onStickEvent);\n      scrollParent.addEventListener('nanoUnstuck', this.onStickEvent);\n\n      if (this.quietModeIsOn) this.attachScrollListeners();\n    }\n    this.setupParentResizeListener();\n  }\n\n  /** Handler applied to scrolling parent. When 'hideOnNewStickers' is true, hide this sticker on subsequent stuck stickers.  */\n  private onStickEvent = async (\n    e: CustomEvent<{ sticker: HTMLNanoStickerElement }>\n  ) => {\n    let sticker = e.detail ? e.detail.sticker : null;\n    if (!sticker || sticker.position !== this.position) return;\n\n    const incomingTriggerPos = await sticker.getTriggerPos();\n\n    if (\n      e.type === 'nanoStuck' &&\n      sticker !== this.host &&\n      sticker.scrollParent === this.host.scrollParent\n    ) {\n      this.stickerIndex++;\n\n      if (!this.hideOnNewStickers) return;\n\n      if (\n        (this.positions.includes('top') &&\n          this.triggerPos.top < incomingTriggerPos.top) ||\n        (this.positions.includes('bottom') &&\n          this.triggerPos.top > incomingTriggerPos.top)\n      ) {\n        this.multiStickerHide = true;\n        this.stuckCounter++;\n      }\n    }\n\n    if (\n      e.type === 'nanoUnstuck' &&\n      sticker !== this.host &&\n      sticker.scrollParent === this.host.scrollParent\n    ) {\n      this.stickerIndex--;\n\n      if (!this.hideOnNewStickers) return;\n\n      if (\n        (this.positions.includes('top') &&\n          this.triggerPos.top < incomingTriggerPos.top) ||\n        (this.positions.includes('bottom') &&\n          this.triggerPos.top > incomingTriggerPos.top)\n      ) {\n        this.stuckCounter--;\n        if (this.stuckCounter < 1) this.multiStickerHide = false;\n      }\n    }\n  };\n\n  /** Scroll handler applied to scrolling parent. Only applied when quietmode is on.\n   * 'hides' stickers when scrolling over 100px away from trigger and 'shows' when scrolling toward */\n  private onScroll = () => {\n    let y: number = _getScrollTop(this.scrollParent);\n\n    // scrolling up\n    if (y < this.scrollPosCache) {\n      if (!this.positions.includes('bottom')) this.handleScrollTo();\n      else this.handleScrollAway(y);\n    }\n\n    // scrolling down\n    if (y > this.scrollPosCache) {\n      if (!this.positions.includes('bottom')) this.handleScrollAway(y);\n      else this.handleScrollTo();\n    }\n    this.scrollPosCache = y;\n  };\n\n  /** Watch for scroll direction. Only applies when quietmode is on.\n   * We need to addjust the position of the trigger when the sticker is hidden */\n  private handleScrollTo() {\n    this.scrollPosThresholdCache = null;\n    if (!this.scrollHide) return;\n\n    if (this.scrollingTo !== true) {\n      this._offset = this.cacheOffset || this._offset;\n    }\n    this.scrollingTo = true;\n    this.scrollHide = false;\n  }\n\n  private handleScrollAway(currScroll: number) {\n    if (this.scrollHide) return;\n\n    if (!this.isStuck) return;\n\n    if (this.scrollingTo !== false) {\n      this.cacheOffset = this._offset;\n      this._offset = 0;\n    }\n    this.scrollingTo = false;\n\n    if (!this.scrollPosThresholdCache)\n      this.scrollPosThresholdCache = currScroll;\n    else if (\n      !this.pauseHide &&\n      Math.abs(currScroll - this.scrollPosThresholdCache) > 100\n    )\n      this.scrollHide = true;\n  }\n\n  private moveTrigger(toInitial?: boolean) {\n    if (\n      (this.positions.includes('bottom') && !toInitial) ||\n      (!this.positions.includes('bottom') && toInitial)\n    ) {\n      this.host.parentNode.insertBefore(this.trigger, this.host);\n    } else\n      this.host.parentNode.insertBefore(this.trigger, this.host.nextSibling);\n  }\n\n  /** Gets the 'closest' scrolling parent */\n  private getScrollParent() {\n    const regex = /(auto|scroll)/;\n    const parents = (_node: Node, ps: Node[]) => {\n      if (_node.parentNode === null) {\n        return ps;\n      }\n      return parents(_node.parentNode, ps.concat([_node]));\n    };\n    const style = (_node, prop) =>\n      getComputedStyle(_node, null).getPropertyValue(prop);\n    const overflow = (_node) =>\n      style(_node, 'overflow') +\n      style(_node, 'overflow-y') +\n      style(_node, 'overflow-x');\n    const scroll = (_node) => regex.test(overflow(_node));\n    const docHeight = document.documentElement.getBoundingClientRect().height;\n\n    const scrollParent = (_node: HTMLElement) => {\n      if (!(_node instanceof HTMLElement)) return;\n\n      const ps = parents(_node, []);\n      return (\n        ps.find(\n          (ele) =>\n            scroll(ele) && ele.getBoundingClientRect().height !== docHeight\n        ) || document\n      );\n    };\n\n    return scrollParent(this.host);\n  }\n\n  private shouldStick(data?: IntersectionObserverEntry) {\n    let scrollAmt: number;\n\n    if (this.positions.includes('top')) {\n      if (!this.isRootSticker)\n        scrollAmt = _getOffset(this.trigger, this.scrollParent).top;\n      else scrollAmt = this.trigger.getBoundingClientRect().top;\n      this.isStuck = scrollAmt < -1;\n    } else if (this.positions.includes('bottom')) {\n      scrollAmt = this.trigger.getBoundingClientRect().top;\n      const parentBounding =\n        data && data.rootBounds\n          ? data.rootBounds\n          : (this.scrollParent instanceof Document\n              ? document.documentElement\n              : this.scrollParent\n            ).getBoundingClientRect();\n      this.isStuck = scrollAmt > parentBounding.height + parentBounding.top;\n    }\n  }\n\n  private bootstrapGurantor() {\n    this.hasBootstrapped = true;\n\n    this.scrollParent = this.scrollParent || this.getScrollParent();\n    this.isRootSticker = this.scrollParent instanceof Document;\n\n    this.trigger = this.trigger || document.createElement('div');\n    this.trigger.classList.add('sticker-trigger');\n\n    this.positionChange();\n    this.moveTrigger(true);\n    this.quietModeChange();\n\n    this.listenForScrollParent = true;\n    this.handleParentEvents(true);\n\n    this.stickerIndex = Array.from(\n      this.scrollParent.querySelectorAll('nano-sticker')\n    )\n      .filter(\n        (sticker: HTMLNanoStickerElement) => sticker.position === this.position\n      )\n      .findIndex((sticker) => sticker === this.host);\n\n    this.setOffset();\n    this.stickerResizeListener();\n    this.setupParentResizeListener();\n\n    // bit of a hack ... add default 'order'. Required for 'stickTo' elements.\n    this.slottedContent = Array.from(this.host.children);\n    this.slottedContent.forEach((child: HTMLElement) => {\n      child.style.order = this.stickerIndex + '';\n    });\n\n    this.updateTriggerOffset();\n    this.stickToChange();\n    this.setupIO();\n    this.onStickToDisplayEvent = debounce(this.onStickToDisplayEvent, 50);\n  }\n\n  // Stencil metthods\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    // this is all horrible.... shrug\n    document.documentElement.addEventListener('nanoComponentsReady', () => {\n      setTimeout((_) => this.bootstrapGurantor(), 200);\n    });\n    setTimeout((_) => {\n      if (!this.hasBootstrapped) this.bootstrapGurantor();\n    }, 1000);\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n\n    if (this.parentSizeObserver) {\n      this.parentSizeObserver.disconnect();\n      this.parentSizeObserver = undefined;\n    }\n\n    this.scrollParent = null;\n    this.hasBootstrapped = false;\n  }\n\n  render() {\n    return (\n      <Host\n        sticky={!this.isRootSticker && !this.stickToEle && this.isSticky}\n        hide={this.hide && this.isStuck}\n        siblings={this.stuckCounter}\n        index={this.stickerIndex}\n        stuck={this.isStuck && this.isSticky}\n        placed-bottom={this.positions.includes('bottom')}\n        placed-top={this.positions.includes('top')}\n        placed-end={this.positions.includes('end')}\n        placed-start={this.positions.includes('start')}\n      >\n        <div\n          class={{\n            sticker: true,\n            sticky: this.isRootSticker && this.isSticky,\n            stuck: this.isStuck && this.isRootSticker && this.isSticky,\n            hide: this.isRootSticker && this.hide && this.isStuck,\n          }}\n          ref={(div) => (this.sticker = div)}\n        >\n          <div class=\"sticker-content\" ref={(div) => (this.content = div)}>\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/esm-es5/nano-tab-group.entry.js

@@ -1,5 +1,5 @@
-var __awaiter=this&&this.__awaiter||function(t,a,e,n){function o(t){return t instanceof e?t:new e((function(a){a(t)}))}return new(e||(e=Promise))((function(e,r){function i(t){try{l(n.next(t))}catch(a){r(a)}}function s(t){try{l(n["throw"](t))}catch(a){r(a)}}function l(t){t.done?e(t.value):o(t.value).then(i,s)}l((n=n.apply(t,a||[])).next())}))};var __generator=this&&this.__generator||function(t,a){var e={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},n,o,r,i;return i={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function s(t){return function(a){return l([t,a])}}function l(i){if(n)throw new TypeError("Generator is already executing.");while(e)try{if(n=1,o&&(r=i[0]&2?o["return"]:i[0]?o["throw"]||((r=o["return"])&&r.call(o),0):o.next)&&!(r=r.call(o,i[1])).done)return r;if(o=0,r)i=[i[0]&2,r.value];switch(i[0]){case 0:case 1:r=i;break;case 4:e.label++;return{value:i[1],done:false};case 5:e.label++;o=i[1];i=[0];continue;case 7:i=e.ops.pop();e.trys.pop();continue;default:if(!(r=e.trys,r=r.length>0&&r[r.length-1])&&(i[0]===6||i[0]===2)){e=0;continue}if(i[0]===3&&(!r||i[1]>r[0]&&i[1]<r[3])){e.label=i[1];break}if(i[0]===6&&e.label<r[1]){e.label=r[1];r=i;break}if(r&&e.label<r[2]){e.label=r[2];e.ops.push(i);break}if(r[2])e.ops.pop();e.trys.pop();continue}i=a.call(t,e)}catch(s){i=[6,s];o=0}finally{n=r=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}};
+var __awaiter=this&&this.__awaiter||function(t,a,e,o){function n(t){return t instanceof e?t:new e((function(a){a(t)}))}return new(e||(e=Promise))((function(e,r){function i(t){try{l(o.next(t))}catch(a){r(a)}}function s(t){try{l(o["throw"](t))}catch(a){r(a)}}function l(t){t.done?e(t.value):n(t.value).then(i,s)}l((o=o.apply(t,a||[])).next())}))};var __generator=this&&this.__generator||function(t,a){var e={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},o,n,r,i;return i={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function s(t){return function(a){return l([t,a])}}function l(i){if(o)throw new TypeError("Generator is already executing.");while(e)try{if(o=1,n&&(r=i[0]&2?n["return"]:i[0]?n["throw"]||((r=n["return"])&&r.call(n),0):n.next)&&!(r=r.call(n,i[1])).done)return r;if(n=0,r)i=[i[0]&2,r.value];switch(i[0]){case 0:case 1:r=i;break;case 4:e.label++;return{value:i[1],done:false};case 5:e.label++;n=i[1];i=[0];continue;case 7:i=e.ops.pop();e.trys.pop();continue;default:if(!(r=e.trys,r=r.length>0&&r[r.length-1])&&(i[0]===6||i[0]===2)){e=0;continue}if(i[0]===3&&(!r||i[1]>r[0]&&i[1]<r[3])){e.label=i[1];break}if(i[0]===6&&e.label<r[1]){e.label=r[1];r=i;break}if(r&&e.label<r[2]){e.label=r[2];e.ops.push(i);break}if(r[2])e.ops.pop();e.trys.pop();continue}i=a.call(t,e)}catch(s){i=[6,s];n=0}finally{o=r=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}};
 /*!
  * Web Components for Nanopore digital Web Apps
- */import{r as registerInstance,c as createEvent,h,e as Host,g as getElement}from"./index-c42becad.js";import{i as index}from"./ResizeObserver.es-724af9fd.js";import{s as scrollIntoView}from"./scroll-881feb46.js";import{f as focusVisible}from"./focus-visible-8b2c14da.js";import{d as displayTransition,r as raf}from"./index-bf53664b.js";import{C as ComponentStore}from"./component-store-d238fee4.js";import{g as getDirectChildren,a as getOffset}from"./dom-faa69d29.js";import{c as createColorClasses}from"./theme-1d4c8719.js";import"./_commonjsHelpers-e401b2a2.js";import"./throttle-d3d933cd.js";var tabGroupCss=':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{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:0;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255, 255, 255);--scroll-btn-color:"currentColor";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-container-bg:"transparent";--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius);--tab-text-color:#007495;--shadow-opacity:0.1;--fade-transparency:0;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (max-width: 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(nano-tab){--tab-indicator-color:var(--indicator-color);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius)}:host(.legacy) ::slotted(nano-tab){--tab-indicator-color:#90c6e7;--border-radius:3px;--tab-indicator-size:5px;--bg-rgb:255, 255, 255}:host([placement=start]),:host([placement=end]){--content-padding:1rem;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#007495;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--tab-text-color:rgba(var(--nano-color-base-rgb), 0.7)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}.nano-tab-group{display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:0;width:100%;-webkit-box-flex:inherit;-ms-flex:inherit;flex:inherit}.nano-tab-group__tabs{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}.nano-tab-group__active-tab-indicator{position:absolute;-webkit-transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group:not(.focus-visible) ::slotted(nano-tab){--focus-shadow:none}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--tabs-container-bg)}.nano-tab-group button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;top:0;bottom:0;border:unset;z-index:2;-webkit-transition:var(--nano-transition-fast, 0.3s) ease opacity;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}.nano-tab-group__scroll-button:focus{outline:none}.nano-tab-group__scroll-button.is-shown{opacity:1}.nano-tab-group__scroll-button.focus-visible:focus{-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tab-group__scroll-button--left{left:0}.nano-tab-group__scroll-button--right{right:0}.nano-tab-group__scroll-button nano-icon{font-size:16px}.nano-tab-group--top{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:"";width:86%;-webkit-box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));height:10px;position:absolute;left:7%;bottom:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-left:var(--tabs-padding-start);padding-right:var(--tabs-padding-end);padding-top:var(--tabs-padding-top);padding-bottom:var(--tabs-padding-bottom);display:-webkit-box;display:-ms-flexbox;display:flex;overflow-x:auto;overflow-y:hidden;-webkit-transition:var(--nano-transition-medium, 0.5s) ease;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, var(--fade-transparency))), color-stop(rgba(0, 0, 0, var(--fade-transparency))), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, var(--fade-transparency))), to(rgba(0, 0, 0, var(--fade-transparency))));-webkit-mask-image:linear-gradient(to left, rgba(0, 0, 0, var(--fade-transparency)) 0, rgba(0, 0, 0, var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - (var(--tabs-padding-end) * 2)), rgba(0, 0, 0, var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, var(--fade-transparency)));mask-image:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, var(--fade-transparency))), color-stop(rgba(0, 0, 0, var(--fade-transparency))), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, var(--fade-transparency))), to(rgba(0, 0, 0, var(--fade-transparency))));mask-image:linear-gradient(to left, rgba(0, 0, 0, var(--fade-transparency)) 0, rgba(0, 0, 0, var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - (var(--tabs-padding-end) * 2)), rgba(0, 0, 0, var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, var(--fade-transparency)));-webkit-mask-size:calc(100% + calc(var(--tabs-padding-end) * 4));mask-size:calc(100% + calc(var(--tabs-padding-end) * 4));-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar{width:0;height:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nano-tab-group--top .nano-tab-group__nav{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--tabs-padding-start);padding-inline-start:var(--tabs-padding-start);-webkit-padding-end:var(--tabs-padding-end);padding-inline-end:var(--tabs-padding-end)}}.nano-tab-group--top .nano-tab-group__nav::after{content:" ";padding-left:0;padding-right:var(--tabs-padding-end);padding-top:var(--tabs-padding-top);padding-bottom:var(--tabs-padding-bottom);line-height:1;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nano-tab-group--top .nano-tab-group__nav::after{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--tabs-padding-end);padding-inline-end:var(--tabs-padding-end)}}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + (var(--tabs-padding-end) * 2));mask-size:calc(100% + (var(--tabs-padding-end) * 2))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.nano-tab-group--top .nano-tab-group__tabs{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;text-align:center;color:var(--tab-text-color);width:auto}.nano-tab-group--top .nano-tab-group__active-tab-indicator{bottom:-2px;border-bottom:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--top .nano-tab-group__body{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;background:var(--content-bg);position:relative;overflow:hidden;width:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.nano-tab-group--start{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.nano-tab-group--start .nano-tab-group__tabs{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb))}:host(:not([dir=rtl])) .nano-tab-group--start .nano-tab-group__tabs{border-left:solid var(--indicator-size) var(--indicator-track-color);text-align:left}:host([dir=rtl]) .nano-tab-group--start .nano-tab-group__tabs{border-right:solid var(--indicator-size) var(--indicator-track-color);text-align:right}:host(:not([dir=rtl])) .nano-tab-group--start .nano-tab-group__active-tab-indicator{left:calc(-1 * 2px);border-left:solid var(--indicator-size) var(--indicator-color)}:host([dir=rtl]) .nano-tab-group--start .nano-tab-group__active-tab-indicator{right:calc(-1 * 2px);border-right:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:var(--content-padding);overflow:hidden;border-top-left-radius:0;border-top-right-radius:var(--content-border-radius);border-bottom-right-radius:var(--content-border-radius);border-bottom-left-radius:0}.nano-tab-group--start .nano-tab-group__body[dir=rtl]{border-top-left-radius:var(--content-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--content-border-radius)}';var TabGroup=function(){function t(t){var a=this;registerInstance(this,t);this.nanoTabShow=createEvent(this,"nanoTabShow",7);this.nanoTabHide=createEvent(this,"nanoTabHide",7);this.nanoTabWillClose=createEvent(this,"nanoTabWillClose",7);this.nanoTabClose=createEvent(this,"nanoTabClose",7);this.initialTouchX=null;this.initialTouchY=null;this.mutationObservers=new WeakMap;this.hasScrollControls=false;this.hideControlRight=true;this.hideControlLeft=true;this.isLegacy=!document.head.attachShadow;this.placement="top";this.noScrollControls=false;this.storeMethod="session";this.updateScrollControls=function(){if(a.noScrollControls){a.hasScrollControls=false}else{a.hasScrollControls=["top"].includes(a.placement)&&a.nav.scrollWidth>a.nav.clientWidth&&a.nav.scrollWidth>a.tabs.clientWidth}};this.handleClick=function(t){var e=t.target;var n=e.closest("nano-tab");if(n)a.setActiveTab(n)};this.handleKeyDown=function(t){if(["Enter"," "].includes(t.key)){var e=t.target;var n=e.closest("nano-tab");if(n){a.setActiveTab(n);t.preventDefault()}}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){var o=document.activeElement;if(o&&o.tagName.toLowerCase()==="nano-tab"){var r=a.getAllActiveTabs;var i=r.indexOf(o);if(t.key==="Home"){i=0}else if(t.key==="End"){i=r.length-1}else if(a.isRtl&&t.key==="ArrowRight"||!a.isRtl&&t.key==="ArrowLeft"){i=Math.max(0,i-1)}else if(a.isRtl&&t.key==="ArrowLeft"||!a.isRtl&&t.key==="ArrowRight"){i=Math.min(r.length-1,i+1)}r[i].setFocus();if(["top"].includes(a.placement)){scrollIntoView(r[i],a.nav,"horizontal","center")}t.preventDefault()}}};this.handleTabScroll=function(){if(!a.hasScrollControls){a.hideControlLeft=a.hideControlRight=true;return}var t=a.isRtl?a.nav.scrollLeft===0:a.nav.scrollWidth-a.nav.scrollLeft===a.nav.clientWidth;var e=a.isRtl?a.nav.scrollWidth+a.nav.scrollLeft===a.nav.clientWidth:a.nav.scrollLeft===0;if(e){a.hideControlLeft=true;a.hideControlRight=false}else if(t){a.hideControlLeft=false;a.hideControlRight=true}else{a.hideControlRight=false;a.hideControlLeft=false}};this.handleBtnClick=function(t){if(t===void 0){t=false}var e=a.getNavWidth();var n;if(t)n=a.nav.scrollLeft+e-20;else n=a.nav.scrollLeft-e+20;try{a.nav.scroll({left:n,behavior:"smooth"})}catch(o){a.nav.scrollLeft=n}};this.handleTouchStart=function(t){if(a.disableSwipe)return;var e=t.changedTouches[0];a.initialTouchX=e.pageX;a.initialTouchY=e.pageY};this.handleTouchEnd=function(t){if(a.disableSwipe)return;var e=t.changedTouches[0];var n=e.pageX-a.initialTouchX;var o=e.pageY-a.initialTouchY;var r=70;var i=a.initialTouchX-e.clientX;var s=a.initialTouchY-e.clientY;var l=Math.abs(n)>=r&&Math.abs(o)<=r;var c=a.getAllActiveTabs;var b=c.findIndex((function(t){return t.active}));if(l){var d=n<0&&a.placement==="top"||n>0&&a.placement!=="top"?1:-1;if(c[b+d]){a.setActiveTab(c[b+d]);if(Math.abs(i)>Math.abs(s)){if(i>0)a.activePanel.setAttribute("animation-dir","left");else a.activePanel.setAttribute("animation-dir","right")}}}a.initialTouchX=null;a.initialTouchY=null};this.handleContentSlotChange=function(){setTimeout((function(){a.setAriaLabels();a.setActiveTab(a.getActiveTab||a.getAllActiveTabs[0],false)}))};this.handleTabSlotChange=function(t){setTimeout((function(){a.setAriaLabels();a.handleTabScroll();a.setActiveTab(a.getActiveTab||a.getAllActiveTabs[0],false);a.updateScrollControls()}),500);var e=t.target.assignedNodes({flatten:true});e.forEach((function(t){if(!a.mutationObservers.get(t)){var e=new MutationObserver((function(){setTimeout((function(){a.syncActiveTabIndicator();a.handleTabScroll();a.updateScrollControls()}),500)}));a.mutationObservers.set(t,e);e.observe(t,{characterData:true,childList:true,subtree:true})}}))}}t.prototype.handleTabNameChange=function(){var t=this;if(this.activeTab&&this.activeTab.panel===this.tab)return;var a=this.getAllActiveTabs.find((function(a){return a.panel===t.tab}));this.setActiveTab(a)};t.prototype.handlePlacementChange=function(){this.syncActiveTabIndicator()};t.prototype.handleNoScrollControlsChange=function(){this.updateScrollControls()};t.prototype.hideRightBtn=function(){if(!this.rightBtn)return;displayTransition(this.rightBtn,"is-shown",!this.hideControlRight)};t.prototype.hideLeftBtn=function(){if(!this.leftBtn)return;displayTransition(this.leftBtn,"is-shown",!this.hideControlLeft)};t.prototype.watchScrollControls=function(){var t=this;if(this.hasScrollControls)setTimeout((function(a){return t.handleTabScroll()}),20);else setTimeout((function(a){t.hideControlLeft=t.hideControlRight=true}),20)};t.prototype.show=function(t){return __awaiter(this,void 0,void 0,(function(){var a;return __generator(this,(function(e){if(this.activeTab&&this.activeTab.panel===t)return[2];a=this.getAllActiveTabs.find((function(a){return a.panel===t}));if(a)this.setActiveTab(a);return[2]}))}))};Object.defineProperty(t.prototype,"getAllActiveTabs",{get:function(){return this.getAllTabs.filter((function(t){return!t.disabled}))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"getAllTabs",{get:function(){return getDirectChildren(this.host,"nano-tab")},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"getAllPanels",{get:function(){return getDirectChildren(this.host,"nano-tab-content")},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"getActiveTab",{get:function(){return this.getAllActiveTabs.find((function(t){return t.active}))},enumerable:false,configurable:true});t.prototype.setActiveTab=function(t,a){var e=this;if(a===void 0){a=true}if(t&&t!==this.activeTab&&!t.disabled&&this.getAllActiveTabs.includes(t)){var n=this.activeTab;this.activeTab=t;this.tab=t.panel;this.getAllActiveTabs.map((function(t){return t.active=t===e.activeTab}));this.getAllPanels.map((function(t){if(t.name===e.activeTab.panel){t.active=true;e.activePanel=t}else t.active=false;t.removeAttribute("animation-dir")}));this.syncActiveTabIndicator();if(["top"].includes(this.placement)){scrollIntoView(this.activeTab,this.nav,"horizontal","center")}if(a){if(n){this.nanoTabHide.emit({name:n.panel})}this.nanoTabShow.emit({name:this.activeTab.panel})}}};t.prototype.setAriaLabels=function(){var t=this.getAllActiveTabs;var a=this.getAllPanels;t.map((function(t){var e=a.find((function(a){return a.name===t.panel}));if(e){t.setAttribute("aria-controls",e.getAttribute("id"));e.setAttribute("aria-labelledby",t.getAttribute("id"))}}))};t.prototype.syncActiveTabIndicator=function(){var t=this;var a;this.getAllTabs.forEach((function(a){return a.setAttribute("direction",t.placement==="top"?"horizontal":"vertical")}));var e=this.getActiveTab;var n=((a=e.shadowRoot.querySelector(".nanotab"))===null||a===void 0?void 0:a.clientWidth)||0;var o=e.clientHeight;var r=getOffset(e,this.tabs);var i=r.top+this.nav.scrollTop;var s=r.left;switch(this.placement){case"top":this.activeTabIndicator.style.width=n+"px";this.activeTabIndicator.style.height=null;this.activeTabIndicator.style.transform="translateX("+s+"px)";break;case"start":this.activeTabIndicator.style.width=null;this.activeTabIndicator.style.height=o+"px";this.activeTabIndicator.style.transform="translateY("+i+"px)";break}};t.prototype.getNavWidth=function(){if(!this.nav)return 0;var t=getComputedStyle(this.nav);var a=this.nav.clientWidth;return a-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)};t.prototype.handleTabClose=function(t){var a;var e=this.getAllActiveTabs.indexOf(t.target);var n=t.target;if(e<0)return;var o=this.getAllPanels.find((function(t){return t.name===n.panel}));if(!o)return;t.stopImmediatePropagation();var r=this.nanoTabWillClose.emit({name:n.panel});if(r.defaultPrevented)return;if(n.active){e=e===0?1:e-1;var i=(a=this.getAllActiveTabs[e])===null||a===void 0?void 0:a.panel;if(i)this.host.show(i)}n.remove();o.remove();this.nanoTabClose.emit({name:n.panel})};t.prototype.componentDidLoad=function(){var t=this;var a=new IntersectionObserver((function(a,e){if(a[0].intersectionRatio>0){t.setAriaLabels();t.setActiveTab(t.getActiveTab||t.getAllActiveTabs[0],false);if(t.storeId)ComponentStore.init(t,["tab"],t.storeMethod,t.storeId);e.unobserve(a[0].target)}}));a.observe(this.host);focusVisible.observe(this.tabGroup);if(this.leftBtn){focusVisible.observe(this.leftBtn);focusVisible.observe(this.rightBtn)}this.resizeObserver=new index((function(){setTimeout((function(){t.updateScrollControls();t.syncActiveTabIndicator();scrollIntoView(t.activeTab,t.nav,"horizontal","center")}),500)}));this.resizeObserver.observe(this.nav);raf((function(){return t.updateScrollControls()}))};t.prototype.connectedCallback=function(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"};t.prototype.disconnectedCallback=function(){focusVisible.unobserve(this.tabGroup);if(this.leftBtn){focusVisible.unobserve(this.leftBtn);focusVisible.unobserve(this.rightBtn)}if(this.resizeObserver)this.resizeObserver.unobserve(this.nav)};t.prototype.render=function(){var t=this;this.isRtl=this.host.ownerDocument.dir==="rtl";return h(Host,{class:Object.assign(Object.assign({},createColorClasses(this.color)),{legacy:this.isLegacy}),dir:this.isRtl?"rtl":null},h("div",{part:"base",ref:function(a){return t.tabGroup=a},class:{"nano-tab-group":true,"nano-tab-group--top":this.placement==="top","nano-tab-group--start":this.placement==="start","nano-tab-group--has-scroll-controls":this.hasScrollControls,"nano-tab-group--has-scroll-controls-left":!this.hideControlLeft,"nano-tab-group--has-scroll-controls-right":!this.hideControlRight},onClick:this.handleClick,onKeyDown:this.handleKeyDown},h("div",{class:"nano-tab-group__nav-container",part:"nav"},this.placement==="top"&&h("button",{class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--left":true},ref:function(a){return t.leftBtn=a},onClick:function(){return t.handleBtnClick(false)}},h("nano-icon",{name:"light/chevron-left"})),h("div",{ref:function(a){return t.nav=a},class:"nano-tab-group__nav",onScroll:this.handleTabScroll},h("div",{ref:function(a){return t.tabs=a},part:"tabs",class:"nano-tab-group__tabs",role:"tablist"},h("div",{ref:function(a){return t.activeTabIndicator=a},part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),h("slot",{name:"tabs",onSlotchange:this.handleTabSlotChange}))),this.placement==="top"&&h("button",{class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--right":true},ref:function(a){return t.rightBtn=a},onClick:function(){return t.handleBtnClick(true)}},h("nano-icon",{name:"light/chevron-right"}))),h("slot",{name:"tab-content-header"}),h("div",{part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},h("slot",{onSlotchange:this.handleContentSlotChange}))))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}},enumerable:false,configurable:true});return t}();TabGroup.style=tabGroupCss;export{TabGroup as nano_tab_group};
+ */import{r as registerInstance,c as createEvent,h,e as Host,g as getElement}from"./index-c42becad.js";import{s as scrollIntoView}from"./scroll-881feb46.js";import{f as focusVisible}from"./focus-visible-8b2c14da.js";import{d as displayTransition,r as raf}from"./index-bf53664b.js";import{C as ComponentStore}from"./component-store-d238fee4.js";import{g as getDirectChildren,a as getOffset}from"./dom-faa69d29.js";import{c as createColorClasses}from"./theme-1d4c8719.js";import"./_commonjsHelpers-e401b2a2.js";import"./throttle-d3d933cd.js";var tabGroupCss=':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{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:0;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255, 255, 255);--scroll-btn-color:"currentColor";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-container-bg:"transparent";--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius);--tab-text-color:#007495;--shadow-opacity:0.1;--fade-transparency:0;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (max-width: 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(nano-tab){--tab-indicator-color:var(--indicator-color);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius)}:host(.legacy) ::slotted(nano-tab){--tab-indicator-color:#90c6e7;--border-radius:3px;--tab-indicator-size:5px;--bg-rgb:255, 255, 255}:host([placement=start]),:host([placement=end]){--content-padding:1rem;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#007495;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--tab-text-color:rgba(var(--nano-color-base-rgb), 0.7)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}.nano-tab-group{display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:0;width:100%;-webkit-box-flex:inherit;-ms-flex:inherit;flex:inherit}.nano-tab-group__tabs{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}.nano-tab-group__active-tab-indicator{position:absolute;-webkit-transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group:not(.focus-visible) ::slotted(nano-tab){--focus-shadow:none}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--tabs-container-bg)}.nano-tab-group button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;top:0;bottom:0;border:unset;z-index:2;-webkit-transition:var(--nano-transition-fast, 0.3s) ease opacity;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}.nano-tab-group__scroll-button:focus{outline:none}.nano-tab-group__scroll-button.is-shown{opacity:1}.nano-tab-group__scroll-button.focus-visible:focus{-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tab-group__scroll-button--left{left:0}.nano-tab-group__scroll-button--right{right:0}.nano-tab-group__scroll-button nano-icon{font-size:16px}.nano-tab-group--top{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:"";width:86%;-webkit-box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));height:10px;position:absolute;left:7%;bottom:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-left:var(--tabs-padding-start);padding-right:var(--tabs-padding-end);padding-top:var(--tabs-padding-top);padding-bottom:var(--tabs-padding-bottom);display:-webkit-box;display:-ms-flexbox;display:flex;overflow-x:auto;overflow-y:hidden;-webkit-transition:var(--nano-transition-medium, 0.5s) ease;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, var(--fade-transparency))), color-stop(rgba(0, 0, 0, var(--fade-transparency))), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, var(--fade-transparency))), to(rgba(0, 0, 0, var(--fade-transparency))));-webkit-mask-image:linear-gradient(to left, rgba(0, 0, 0, var(--fade-transparency)) 0, rgba(0, 0, 0, var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - (var(--tabs-padding-end) * 2)), rgba(0, 0, 0, var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, var(--fade-transparency)));mask-image:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, var(--fade-transparency))), color-stop(rgba(0, 0, 0, var(--fade-transparency))), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, var(--fade-transparency))), to(rgba(0, 0, 0, var(--fade-transparency))));mask-image:linear-gradient(to left, rgba(0, 0, 0, var(--fade-transparency)) 0, rgba(0, 0, 0, var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - (var(--tabs-padding-end) * 2)), rgba(0, 0, 0, var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, var(--fade-transparency)));-webkit-mask-size:calc(100% + calc(var(--tabs-padding-end) * 4));mask-size:calc(100% + calc(var(--tabs-padding-end) * 4));-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar{width:0;height:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nano-tab-group--top .nano-tab-group__nav{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--tabs-padding-start);padding-inline-start:var(--tabs-padding-start);-webkit-padding-end:var(--tabs-padding-end);padding-inline-end:var(--tabs-padding-end)}}.nano-tab-group--top .nano-tab-group__nav::after{content:" ";padding-left:0;padding-right:var(--tabs-padding-end);padding-top:var(--tabs-padding-top);padding-bottom:var(--tabs-padding-bottom);line-height:1;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nano-tab-group--top .nano-tab-group__nav::after{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--tabs-padding-end);padding-inline-end:var(--tabs-padding-end)}}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + (var(--tabs-padding-end) * 2));mask-size:calc(100% + (var(--tabs-padding-end) * 2))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.nano-tab-group--top .nano-tab-group__tabs{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;text-align:center;color:var(--tab-text-color);width:auto}.nano-tab-group--top .nano-tab-group__active-tab-indicator{bottom:-2px;border-bottom:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--top .nano-tab-group__body{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;background:var(--content-bg);position:relative;overflow:hidden;width:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.nano-tab-group--start{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.nano-tab-group--start .nano-tab-group__tabs{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb))}:host(:not([dir=rtl])) .nano-tab-group--start .nano-tab-group__tabs{border-left:solid var(--indicator-size) var(--indicator-track-color);text-align:left}:host([dir=rtl]) .nano-tab-group--start .nano-tab-group__tabs{border-right:solid var(--indicator-size) var(--indicator-track-color);text-align:right}:host(:not([dir=rtl])) .nano-tab-group--start .nano-tab-group__active-tab-indicator{left:calc(-1 * 2px);border-left:solid var(--indicator-size) var(--indicator-color)}:host([dir=rtl]) .nano-tab-group--start .nano-tab-group__active-tab-indicator{right:calc(-1 * 2px);border-right:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:var(--content-padding);overflow:hidden;border-top-left-radius:0;border-top-right-radius:var(--content-border-radius);border-bottom-right-radius:var(--content-border-radius);border-bottom-left-radius:0}.nano-tab-group--start .nano-tab-group__body[dir=rtl]{border-top-left-radius:var(--content-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--content-border-radius)}';var TabGroup=function(){function t(t){var a=this;registerInstance(this,t);this.nanoTabShow=createEvent(this,"nanoTabShow",7);this.nanoTabHide=createEvent(this,"nanoTabHide",7);this.nanoTabWillClose=createEvent(this,"nanoTabWillClose",7);this.nanoTabClose=createEvent(this,"nanoTabClose",7);this.initialTouchX=null;this.initialTouchY=null;this.mutationObservers=new WeakMap;this.hasScrollControls=false;this.hideControlRight=true;this.hideControlLeft=true;this.isLegacy=!document.head.attachShadow;this.placement="top";this.noScrollControls=false;this.storeMethod="session";this.updateScrollControls=function(){if(a.noScrollControls){a.hasScrollControls=false}else{a.hasScrollControls=["top"].includes(a.placement)&&a.nav.scrollWidth>a.nav.clientWidth&&a.nav.scrollWidth>a.tabs.clientWidth}};this.handleClick=function(t){var e=t.target;var o=e.closest("nano-tab");if(o)a.setActiveTab(o)};this.handleKeyDown=function(t){if(["Enter"," "].includes(t.key)){var e=t.target;var o=e.closest("nano-tab");if(o){a.setActiveTab(o);t.preventDefault()}}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){var n=document.activeElement;if(n&&n.tagName.toLowerCase()==="nano-tab"){var r=a.getAllActiveTabs;var i=r.indexOf(n);if(t.key==="Home"){i=0}else if(t.key==="End"){i=r.length-1}else if(a.isRtl&&t.key==="ArrowRight"||!a.isRtl&&t.key==="ArrowLeft"){i=Math.max(0,i-1)}else if(a.isRtl&&t.key==="ArrowLeft"||!a.isRtl&&t.key==="ArrowRight"){i=Math.min(r.length-1,i+1)}r[i].setFocus();if(["top"].includes(a.placement)){scrollIntoView(r[i],a.nav,"horizontal","center")}t.stopPropagation();t.preventDefault()}}};this.handleTabScroll=function(){if(!a.hasScrollControls){a.hideControlLeft=a.hideControlRight=true;return}var t=a.isRtl?a.nav.scrollLeft===0:a.nav.scrollWidth-a.nav.scrollLeft===a.nav.clientWidth;var e=a.isRtl?a.nav.scrollWidth+a.nav.scrollLeft===a.nav.clientWidth:a.nav.scrollLeft===0;if(e){a.hideControlLeft=true;a.hideControlRight=false}else if(t){a.hideControlLeft=false;a.hideControlRight=true}else{a.hideControlRight=false;a.hideControlLeft=false}};this.handleBtnClick=function(t){if(t===void 0){t=false}var e=a.getNavWidth();var o;if(t)o=a.nav.scrollLeft+e-20;else o=a.nav.scrollLeft-e+20;try{a.nav.scroll({left:o,behavior:"smooth"})}catch(n){a.nav.scrollLeft=o}};this.handleTouchStart=function(t){if(a.disableSwipe)return;var e=t.changedTouches[0];a.initialTouchX=e.pageX;a.initialTouchY=e.pageY};this.handleTouchEnd=function(t){if(a.disableSwipe)return;var e=t.changedTouches[0];var o=e.pageX-a.initialTouchX;var n=e.pageY-a.initialTouchY;var r=70;var i=a.initialTouchX-e.clientX;var s=a.initialTouchY-e.clientY;var l=Math.abs(o)>=r&&Math.abs(n)<=r;var c=a.getAllActiveTabs;var b=c.findIndex((function(t){return t.active}));if(l){var d=o<0&&a.placement==="top"||o>0&&a.placement!=="top"?1:-1;if(c[b+d]){a.setActiveTab(c[b+d]);if(Math.abs(i)>Math.abs(s)){if(i>0)a.activePanel.setAttribute("animation-dir","left");else a.activePanel.setAttribute("animation-dir","right")}}}a.initialTouchX=null;a.initialTouchY=null};this.handleContentSlotChange=function(){setTimeout((function(){a.setAriaLabels();a.setActiveTab(a.getActiveTab||a.getAllActiveTabs[0],false)}))};this.handleTabSlotChange=function(t){setTimeout((function(){a.setAriaLabels();a.handleTabScroll();a.setActiveTab(a.getActiveTab||a.getAllActiveTabs[0],false);a.updateScrollControls()}),500);var e=t.target.assignedNodes({flatten:true});e.forEach((function(t){if(!a.mutationObservers.get(t)){var e=new MutationObserver((function(){setTimeout((function(){a.syncActiveTabIndicator();a.handleTabScroll();a.updateScrollControls()}),500)}));a.mutationObservers.set(t,e);e.observe(t,{characterData:true,childList:true,subtree:true})}}))}}t.prototype.handleTabNameChange=function(){var t=this;if(this.activeTab&&this.activeTab.panel===this.tab)return;var a=this.getAllActiveTabs.find((function(a){return a.panel===t.tab}));this.setActiveTab(a)};t.prototype.handlePlacementChange=function(){this.syncActiveTabIndicator()};t.prototype.handleNoScrollControlsChange=function(){this.updateScrollControls()};t.prototype.hideRightBtn=function(){if(!this.rightBtn)return;displayTransition(this.rightBtn,"is-shown",!this.hideControlRight)};t.prototype.hideLeftBtn=function(){if(!this.leftBtn)return;displayTransition(this.leftBtn,"is-shown",!this.hideControlLeft)};t.prototype.watchScrollControls=function(){var t=this;if(this.hasScrollControls)setTimeout((function(a){return t.handleTabScroll()}),20);else setTimeout((function(a){t.hideControlLeft=t.hideControlRight=true}),20)};t.prototype.show=function(t){return __awaiter(this,void 0,void 0,(function(){var a;return __generator(this,(function(e){if(this.activeTab&&this.activeTab.panel===t)return[2];a=this.getAllActiveTabs.find((function(a){return a.panel===t}));if(a)this.setActiveTab(a);return[2]}))}))};Object.defineProperty(t.prototype,"getAllActiveTabs",{get:function(){return this.getAllTabs.filter((function(t){return!t.disabled}))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"getAllTabs",{get:function(){return getDirectChildren(this.host,"nano-tab")},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"getAllPanels",{get:function(){return getDirectChildren(this.host,"nano-tab-content")},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"getActiveTab",{get:function(){return this.getAllActiveTabs.find((function(t){return t.active}))},enumerable:false,configurable:true});t.prototype.setActiveTab=function(t,a){var e=this;if(a===void 0){a=true}if(t&&t!==this.activeTab&&!t.disabled&&this.getAllActiveTabs.includes(t)){var o=this.activeTab;this.activeTab=t;this.tab=t.panel;this.getAllActiveTabs.map((function(t){return t.active=t===e.activeTab}));this.getAllPanels.map((function(t){if(t.name===e.activeTab.panel){t.active=true;e.activePanel=t}else t.active=false;t.removeAttribute("animation-dir")}));this.syncActiveTabIndicator();if(["top"].includes(this.placement)){scrollIntoView(this.activeTab,this.nav,"horizontal","center")}if(a){if(o){this.nanoTabHide.emit({name:o.panel})}this.nanoTabShow.emit({name:this.activeTab.panel})}}};t.prototype.setAriaLabels=function(){var t=this.getAllActiveTabs;var a=this.getAllPanels;t.map((function(t){var e=a.find((function(a){return a.name===t.panel}));if(e){t.setAttribute("aria-controls",e.getAttribute("id"));e.setAttribute("aria-labelledby",t.getAttribute("id"))}}))};t.prototype.syncActiveTabIndicator=function(){var t=this;var a;this.getAllTabs.forEach((function(a){return a.setAttribute("direction",t.placement==="top"?"horizontal":"vertical")}));var e=this.getActiveTab;var o=((a=e.shadowRoot.querySelector(".nanotab"))===null||a===void 0?void 0:a.clientWidth)||0;var n=e.clientHeight;var r=getOffset(e,this.tabs);var i=r.top+this.nav.scrollTop;var s=r.left;switch(this.placement){case"top":this.activeTabIndicator.style.width=o+"px";this.activeTabIndicator.style.height=null;this.activeTabIndicator.style.transform="translateX("+s+"px)";break;case"start":this.activeTabIndicator.style.width=null;this.activeTabIndicator.style.height=n+"px";this.activeTabIndicator.style.transform="translateY("+i+"px)";break}};t.prototype.getNavWidth=function(){if(!this.nav)return 0;var t=getComputedStyle(this.nav);var a=this.nav.clientWidth;return a-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)};t.prototype.handleTabClose=function(t){var a;var e=this.getAllActiveTabs.indexOf(t.target);var o=t.target;if(e<0)return;var n=this.getAllPanels.find((function(t){return t.name===o.panel}));if(!n)return;t.stopImmediatePropagation();var r=this.nanoTabWillClose.emit({name:o.panel});if(r.defaultPrevented)return;if(o.active){e=e===0?1:e-1;var i=(a=this.getAllActiveTabs[e])===null||a===void 0?void 0:a.panel;if(i)this.host.show(i)}o.remove();n.remove();this.nanoTabClose.emit({name:o.panel})};t.prototype.componentDidLoad=function(){var t=this;var a=new IntersectionObserver((function(a,e){if(a[0].intersectionRatio>0){t.setAriaLabels();t.setActiveTab(t.getActiveTab||t.getAllActiveTabs[0],false);if(t.storeId)ComponentStore.init(t,["tab"],t.storeMethod,t.storeId);e.unobserve(a[0].target)}}));a.observe(this.host);focusVisible.observe(this.tabGroup);if(this.leftBtn){focusVisible.observe(this.leftBtn);focusVisible.observe(this.rightBtn)}this.resizeObserver=new ResizeObserver((function(){setTimeout((function(){t.updateScrollControls();t.syncActiveTabIndicator();scrollIntoView(t.activeTab,t.nav,"horizontal","center")}),500)}));this.resizeObserver.observe(this.nav);raf((function(){return t.updateScrollControls()}))};t.prototype.connectedCallback=function(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"};t.prototype.disconnectedCallback=function(){focusVisible.unobserve(this.tabGroup);if(this.leftBtn){focusVisible.unobserve(this.leftBtn);focusVisible.unobserve(this.rightBtn)}if(this.resizeObserver)this.resizeObserver.unobserve(this.nav)};t.prototype.render=function(){var t=this;this.isRtl=this.host.ownerDocument.dir==="rtl";return h(Host,{class:Object.assign(Object.assign({},createColorClasses(this.color)),{legacy:this.isLegacy}),dir:this.isRtl?"rtl":null},h("div",{part:"base",ref:function(a){return t.tabGroup=a},class:{"nano-tab-group":true,"nano-tab-group--top":this.placement==="top","nano-tab-group--start":this.placement==="start","nano-tab-group--has-scroll-controls":this.hasScrollControls,"nano-tab-group--has-scroll-controls-left":!this.hideControlLeft,"nano-tab-group--has-scroll-controls-right":!this.hideControlRight},onClick:this.handleClick,onKeyDown:this.handleKeyDown},h("div",{class:"nano-tab-group__nav-container",part:"nav"},this.placement==="top"&&h("button",{class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--left":true},ref:function(a){return t.leftBtn=a},onClick:function(){return t.handleBtnClick(false)}},h("nano-icon",{name:"light/chevron-left"})),h("div",{ref:function(a){return t.nav=a},class:"nano-tab-group__nav",onScroll:this.handleTabScroll},h("div",{ref:function(a){return t.tabs=a},part:"tabs",class:"nano-tab-group__tabs",role:"tablist"},h("div",{ref:function(a){return t.activeTabIndicator=a},part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),h("slot",{name:"tabs",onSlotchange:this.handleTabSlotChange}))),this.placement==="top"&&h("button",{class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--right":true},ref:function(a){return t.rightBtn=a},onClick:function(){return t.handleBtnClick(true)}},h("nano-icon",{name:"light/chevron-right"}))),h("slot",{name:"tab-content-header"}),h("div",{part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},h("slot",{onSlotchange:this.handleContentSlotChange}))))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}},enumerable:false,configurable:true});return t}();TabGroup.style=tabGroupCss;export{TabGroup as nano_tab_group};
 //# sourceMappingURL=nano-tab-group.entry.js.map