@lrnwebcomponents/absolute-position-behavior - npm Package Compare versions

Comparing version 4.2.0 to 7.0.0

absolute-position-behavior.js

@@ -143,2 +143,4 @@ /**
       super();
+      this._ticking = false;
+      this.scrollTarget = window;
       this.auto = false;
@@ -145,0 +147,0 @@ this.fitToVisibleBounds = false;

absolute-position-behavior.umd.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("lit")):"function"==typeof define&&define.amd?define(["exports","lit"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).AbsolutePositionBehavior={},t.lit)}(this,(function(t,e){"use strict";function n(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,o)}return n}function o(t){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{};e%2?n(Object(o),!0).forEach((function(e){l(t,e,o[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):n(Object(o)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))}))}return t}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,b(o.key),o)}}function s(t,e,n){return e&&r(t.prototype,e),n&&r(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}function l(t,e,n){return(e=b(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function u(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&c(t,e)}function a(t){return a=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},a(t)}function c(t,e){return c=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},c(t,e)}function f(t,e){if(e&&("object"==typeof e||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}function p(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var n,o=a(t);if(e){var i=a(this).constructor;n=Reflect.construct(o,arguments,i)}else n=o.apply(this,arguments);return f(this,n)}}function h(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=a(t)););return t}function d(){return d="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(t,e,n){var o=h(t,e);if(o){var i=Object.getOwnPropertyDescriptor(o,e);return i.get?i.get.call(arguments.length<3?t:n):i.value}},d.apply(this,arguments)}function y(t,e){return e||(e=t.slice(0)),Object.freeze(Object.defineProperties(t,{raw:{value:Object.freeze(e)}}))}function b(t){var e=function(t,e){if("object"!=typeof t||null===t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var o=n.call(t,e||"default");if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:String(e)}window.AbsolutePositionStateManager=window.AbsolutePositionStateManager||{},window.AbsolutePositionStateManager.requestAvailability=function(){if(!window.AbsolutePositionStateManager.instance){window.AbsolutePositionStateManager.instance=document.createElement("absolute-position-state-manager");var t=window.AbsolutePositionStateManager.instance;document.body.appendChild(t)}return window.AbsolutePositionStateManager.instance};var v,m,g=function(t){u(n,t);var e=p(n);function n(){var t;return i(this,n),(t=e.call(this)).elements=[],t.__timeout=!1,t.__observer=new MutationObserver((function(e){return t.checkMutations(e)})),t}return s(n,[{key:"loadElement",value:function(t){this.elements.length<1&&(this.__observer.observe(document,{attributes:!0,childList:!0,subtree:!0,characterData:!0}),this.updateElements(),document.addEventListener("load",this.updateElements),window.addEventListener("resize",this._handleResize)),this.elements.filter((function(e){return e===t})).length<1&&(this.elements.push(t),t.style.top=0,t.style.left=0),this.positionElement(t)}},{key:"unloadElement",value:function(t){this.elements=this.elements.filter((function(e){return e!==t})),this.elements.length<1&&this.removeEventListeners()}},{key:"_handleScroll",value:function(){this.__timeout2&&clearTimeout(this.__timeout2),this.__timeout2=setTimeout(window.AbsolutePositionStateManager.instance.updateStickyElements(),1e3)}},{key:"_handleResize",value:function(){this.__timeout&&clearTimeout(this.__timeout),this.__timeout=setTimeout(window.AbsolutePositionStateManager.instance.updateElements(),250)}},{key:"checkMutations",value:function(t){var e=this,n=!1;t.forEach((function(t){n||(n=n||!("attributes"===t.type&&"style"===t.attributeName&&e.elements.includes(t.target)))})),n&&(this.__timeout&&clearTimeout(this.__timeout),this.__timeout=setTimeout(window.AbsolutePositionStateManager.instance.updateElements(),250))}},{key:"findTarget",value:function(t){for(var e="#"+t.for,n=t.target,o=t;t.for&&!n&&o&&o.parentNode&&o!==document;)n=(o=o.parentNode)?o.querySelector(e):void 0,11===o.nodeType&&(o=o.host),n=!n&&o?o.querySelector(e):n;return n}},{key:"removeEventListeners",value:function(){this.__observer&&this.__observer.disconnect&&this.__observer.disconnect(),document.removeEventListener("load",this.updateElements),window.removeEventListener("resize",this._handleResize),this.__watchSticky&&window.removeEventListener("scroll",this._handleScroll)}},{key:"updateElements",value:function(){var t=this;this.elements.forEach((function(e){return t.positionElement(e)})),this.loadSticky()}},{key:"updateStickyElements",value:function(){var t=this;this.elements.forEach((function(e){e.sticky&&t.positionElement(e)}))}},{key:"loadSticky",value:function(){!this.__watchSticky&&this.elements.filter((function(t){return t.sticky})).length>0?(this.__watchSticky=!0,window.addEventListener("scroll",this._handleScroll)):this.__watchSticky&&this.elements.filter((function(t){return t.sticky})).length<1&&(window.removeEventListener("scroll",this._handleScroll),this.__watchSticky=!1)}},{key:"_getParentNode",value:function(t){var e=t.parentNode;return null!=e&&e.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&(e=e.host),e}},{key:"positionElement",value:function(t){t.position||(t.position="bottom"),t.style.position="absolute",t.style.top||(t.style.top="0px"),t.style.left||(t.style.left="0px");var e=this.findTarget(t),n=t.offsetParent,o=e&&e.getBoundingClientRect?e.getBoundingClientRect():{};if(e&&n){t.justify&&(t.style.width="".concat(o.width,"px"));var i=document.body.getBoundingClientRect(),r=n.getBoundingClientRect(),s=t.getBoundingClientRect(),l=parseFloat(t.offset),u=function(t){return parseFloat(t.replace("px",""))},a=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.position;return"left"!==e&&"right"!==e},c=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.position;return"left"===e||"top"===e},f=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:a(t.position),n=e?u(t.style.left)-s.left:u(t.style.top)-s.top,r=e?"left":"top",l=function(t){return e?t.width:t.height},c=n+l(i)-l(s),f=n;return"end"===t.positionAlign?f+=o[r]-l(s)+l(o):"start"===t.positionAlign?f+=o[r]:f+=o[r]-l(s)/2+l(o)/2,t.fitToVisibleBounds?Math.max(n,Math.min(c,f)):f},p=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.position,n=a(e)?u(t.style.top)-s.top:u(t.style.left)-s.left,i=t.allowOverlap||"visible"!=window.getComputedStyle(t,null).overflowY?s.height:Math.max(s.height,t.scrollHeight),r=t.allowOverlap||"visible"!=window.getComputedStyle(t,null).overflowX?s.width:Math.max(s.width,t.scrollWidth);return"top"===e?o.top+n-i-l:"left"===e?o.left+n-r-l:o[e]+n+l},h=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.position,n=function(t){return a(e)?s.height+l:s.width+l};return c(e)?o[e]-i[e]>n:i[e]-o[e]>n},d=!1!==t.fitToVisibleBounds&&!h(t.position),y={top:["bottom","left","right"],left:["right","top","bottom"],bottom:["top","right","left"],right:["left","bottom","top"]};d&&h(y[t.position][0])?t.position=y[t.position][0]:d&&h(y[t.position][1])?t.position=y[t.position][1]:d&&h(y[t.position][2])&&(t.position=y[t.position][2]);var b=a(t.position)?p():f(),v=a(t.position)?f():p();if(t.sticky){var m=window.pageYOffset||(document.documentElement||document.body.parentNode||document.body).scrollTop,g=window.innerHeight,w=0===s.height&&t.children&&t.children[0]?t.children[0].offsetHeight:s.height,_=o.top-s.height<0&&o.top+o.height>20+w,O=o.top+o.height+s.height>g&&o.top<g-w;"top"===t.position&&_&&(b=m-n.offsetTop+(w-s.height)),"bottom"===t.position&&O&&(b=m+g-n.offsetTop-w)}t.style.top=b+"px",t.style.left=v+"px",t.__positions={self:s,parent:r,target:o}}}},{key:"disconnectedCallback",value:function(){this.removeEventListeners(),d(a(n.prototype),"disconnectedCallback",this).call(this)}}],[{key:"tag",get:function(){return"absolute-position-state-manager"}},{key:"properties",get:function(){return{elements:{type:Array},__observer:{type:Object},__timeout:{type:Object},__timeout2:{type:Object}}}}]),n}(e.LitElement);customElements.define(g.tag,g);var w=function(t){return function(t){u(r,t);var n=p(r);function r(){var t;return i(this,r),(t=n.call(this)).auto=!1,t.fitToVisibleBounds=!1,t.for=null,t.offset=0,t.position="bottom",t.target=null,t.sticky=!1,t.hidden=!1,t.__positions={},t.__observe=!1,t}return s(r,[{key:"render",value:function(){return e.html(v||(v=y([" <slot></slot>"])))}},{key:"updated",value:function(t){var e=this,n=!1;this.shadowRoot&&!this.hidden&&(t.forEach((function(t,o){"auto"===o&&e.auto&&e.setPosition(),"auto"!==o||e.auto||e.unsetPosition(),["allowOverlap","fitToVisibleBounds","for","offset","position","justify","positionAlign","target","hidden","sticky"].includes(o)&&e[o]!==t&&(n=!0)})),n&&this.updatePosition())}},{key:"setPosition",value:function(){this.__observe=!0,window.AbsolutePositionStateManager.requestAvailability().loadElement(this)}},{key:"unsetPosition",value:function(){this.__observe=!1,window.AbsolutePositionStateManager.requestAvailability().unloadElement(this)}},{key:"updatePosition",value:function(){!this.hidden&&this.auto&&0==this.__observe&&window.AbsolutePositionStateManager.requestAvailability().loadElement(this),this.auto&&!0!==this.__observe||window.AbsolutePositionStateManager.requestAvailability().positionElement(this)}},{key:"disconnectedCallback",value:function(){this.unsetPosition(),d(a(r.prototype),"disconnectedCallback",this).call(this)}}],[{key:"styles",get:function(){return[e.css(m||(m=y(["\n          :host {\n            display: inline-block;\n            z-index: 99999999999;\n            position: absolute;\n          }\n\n          :host([hidden]) {\n            display: none;\n          }\n        "])))]}},{key:"properties",get:function(){return o(o({},d(a(r),"properties",this)),{},{allowOverlap:{type:Boolean,attribute:"allow-overlap"},auto:{type:Boolean,attribute:"auto"},fitToVisibleBounds:{type:Boolean,attribute:"fit-to-visible-bounds"},hidden:{type:Boolean,reflect:!0,attribute:"hidden"},for:{type:String,attribute:"for",reflect:!0},offset:{type:Number,attribute:"offset"},sticky:{type:Boolean,attribute:"sticky",reflect:!0},position:{type:String,attribute:"position",reflect:!0},positionAlign:{type:String,attribute:"position-align",reflect:!0},justify:{type:Boolean,reflect:!0,attribute:"justify"},target:{type:Object},__positions:{type:Object}})}},{key:"tag",get:function(){return"absolute-position-behavior"}}]),r}(t)},_=function(t){u(n,t);var e=p(n);function n(){return i(this,n),e.apply(this,arguments)}return s(n)}(w(e.LitElement));customElements.define(_.tag,_),t.AbsolutePositionBehavior=_,t.AbsolutePositionBehaviorClass=w,Object.defineProperty(t,"__esModule",{value:!0})}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("lit")):"function"==typeof define&&define.amd?define(["exports","lit"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).AbsolutePositionBehavior={},t.lit)}(this,(function(t,e){"use strict";function o(t,e){var o=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),o.push.apply(o,i)}return o}function i(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{};e%2?o(Object(i),!0).forEach((function(e){l(t,e,i[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):o(Object(i)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))}))}return t}function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){for(var o=0;o<e.length;o++){var i=e[o];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,b(i.key),i)}}function s(t,e,o){return e&&r(t.prototype,e),o&&r(t,o),Object.defineProperty(t,"prototype",{writable:!1}),t}function l(t,e,o){return(e=b(e))in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}function a(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&c(t,e)}function u(t){return u=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},u(t)}function c(t,e){return c=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},c(t,e)}function f(t,e){if(e&&("object"==typeof e||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}function p(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var o,i=u(t);if(e){var n=u(this).constructor;o=Reflect.construct(i,arguments,n)}else o=i.apply(this,arguments);return f(this,o)}}function h(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=u(t)););return t}function d(){return d="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(t,e,o){var i=h(t,e);if(i){var n=Object.getOwnPropertyDescriptor(i,e);return n.get?n.get.call(arguments.length<3?t:o):n.value}},d.apply(this,arguments)}function y(t,e){return e||(e=t.slice(0)),Object.freeze(Object.defineProperties(t,{raw:{value:Object.freeze(e)}}))}function b(t){var e=function(t,e){if("object"!=typeof t||null===t)return t;var o=t[Symbol.toPrimitive];if(void 0!==o){var i=o.call(t,e||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:String(e)}window.AbsolutePositionStateManager=window.AbsolutePositionStateManager||{},window.AbsolutePositionStateManager.requestAvailability=function(){if(!window.AbsolutePositionStateManager.instance){window.AbsolutePositionStateManager.instance=document.createElement("absolute-position-state-manager");var t=window.AbsolutePositionStateManager.instance;document.body.appendChild(t)}return window.AbsolutePositionStateManager.instance};var v,g,m=function(t){a(o,t);var e=p(o);function o(){var t;return n(this,o),(t=e.call(this)).elements=[],t.__timeout=!1,t.__observer=new MutationObserver((function(e){return t.checkMutations(e)})),t}return s(o,[{key:"loadElement",value:function(t){this.elements.length<1&&(this.__observer.observe(document,{attributes:!0,childList:!0,subtree:!0,characterData:!0}),this.updateElements(),document.addEventListener("load",this.updateElements),window.addEventListener("resize",this._handleResize)),this.elements.filter((function(e){return e===t})).length<1&&(this.elements.push(t),t.style.top=0,t.style.left=0),this.positionElement(t)}},{key:"unloadElement",value:function(t){this.elements=this.elements.filter((function(e){return e!==t})),this.elements.length<1&&this.removeEventListeners()}},{key:"_handleScroll",value:function(){this.__timeout2&&clearTimeout(this.__timeout2),this.__timeout2=setTimeout(window.AbsolutePositionStateManager.instance.updateStickyElements(),1e3)}},{key:"_handleResize",value:function(){this.__timeout&&clearTimeout(this.__timeout),this.__timeout=setTimeout(window.AbsolutePositionStateManager.instance.updateElements(),250)}},{key:"checkMutations",value:function(t){var e=this,o=!1;t.forEach((function(t){o||(o=o||!("attributes"===t.type&&"style"===t.attributeName&&e.elements.includes(t.target)))})),o&&(this.__timeout&&clearTimeout(this.__timeout),this.__timeout=setTimeout(window.AbsolutePositionStateManager.instance.updateElements(),250))}},{key:"findTarget",value:function(t){for(var e="#"+t.for,o=t.target,i=t;t.for&&!o&&i&&i.parentNode&&i!==document;)o=(i=i.parentNode)?i.querySelector(e):void 0,11===i.nodeType&&(i=i.host),o=!o&&i?i.querySelector(e):o;return o}},{key:"removeEventListeners",value:function(){this.__observer&&this.__observer.disconnect&&this.__observer.disconnect(),document.removeEventListener("load",this.updateElements),window.removeEventListener("resize",this._handleResize),this.__watchSticky&&this.scrollTarget.removeEventListener("scroll",this._handleScroll)}},{key:"updateElements",value:function(){var t=this;this.elements.forEach((function(e){return t.positionElement(e)})),this.loadSticky()}},{key:"updateStickyElements",value:function(){var t=this;this.elements.forEach((function(e){e.sticky&&t.positionElement(e)}))}},{key:"loadSticky",value:function(){!this.__watchSticky&&this.elements.filter((function(t){return t.sticky})).length>0&&this.scrollTarget?(this.__watchSticky=!0,this.scrollTarget.addEventListener("scroll",this._handleScroll,{passive:!0})):this.__watchSticky&&this.elements.filter((function(t){return t.sticky})).length<1&&this.scrollTarget&&(this.scrollTarget.removeEventListener("scroll",this._handleScroll,{passive:!0}),this.__watchSticky=!1)}},{key:"_getParentNode",value:function(t){var e=t.parentNode;return null!=e&&e.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&(e=e.host),e}},{key:"positionElement",value:function(t){t.position||(t.position="bottom"),t.style.position="absolute",t.style.top||(t.style.top="0px"),t.style.left||(t.style.left="0px");var e=this.findTarget(t),o=t.offsetParent,i=e&&e.getBoundingClientRect?e.getBoundingClientRect():{};if(e&&o){t.justify&&(t.style.width="".concat(i.width,"px"));var n=document.body.getBoundingClientRect(),r=o.getBoundingClientRect(),s=t.getBoundingClientRect(),l=parseFloat(t.offset),a=function(t){return parseFloat(t.replace("px",""))},u=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.position;return"left"!==e&&"right"!==e},c=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.position;return"left"===e||"top"===e},f=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:u(t.position),o=e?a(t.style.left)-s.left:a(t.style.top)-s.top,r=e?"left":"top",l=function(t){return e?t.width:t.height},c=o+l(n)-l(s),f=o;return"end"===t.positionAlign?f+=i[r]-l(s)+l(i):"start"===t.positionAlign?f+=i[r]:f+=i[r]-l(s)/2+l(i)/2,t.fitToVisibleBounds?Math.max(o,Math.min(c,f)):f},p=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.position,o=u(e)?a(t.style.top)-s.top:a(t.style.left)-s.left,n=t.allowOverlap||"visible"!=window.getComputedStyle(t,null).overflowY?s.height:Math.max(s.height,t.scrollHeight),r=t.allowOverlap||"visible"!=window.getComputedStyle(t,null).overflowX?s.width:Math.max(s.width,t.scrollWidth);return"top"===e?i.top+o-n-l:"left"===e?i.left+o-r-l:i[e]+o+l},h=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.position,o=function(t){return u(e)?s.height+l:s.width+l};return c(e)?i[e]-n[e]>o:n[e]-i[e]>o},d=!1!==t.fitToVisibleBounds&&!h(t.position),y={top:["bottom","left","right"],left:["right","top","bottom"],bottom:["top","right","left"],right:["left","bottom","top"]};d&&h(y[t.position][0])?t.position=y[t.position][0]:d&&h(y[t.position][1])?t.position=y[t.position][1]:d&&h(y[t.position][2])&&(t.position=y[t.position][2]);var b=u(t.position)?p():f(),v=u(t.position)?f():p();if(t.sticky){var g=window.pageYOffset||(document.documentElement||document.body.parentNode||document.body).scrollTop,m=window.innerHeight,w=0===s.height&&t.children&&t.children[0]?t.children[0].offsetHeight:s.height,_=i.top-s.height<0&&i.top+i.height>20+w,O=i.top+i.height+s.height>m&&i.top<m-w;"top"===t.position&&_&&(b=g-o.offsetTop+(w-s.height)),"bottom"===t.position&&O&&(b=g+m-o.offsetTop-w)}t.style.top=b+"px",t.style.left=v+"px",t.__positions={self:s,parent:r,target:i}}}},{key:"disconnectedCallback",value:function(){this.removeEventListeners(),d(u(o.prototype),"disconnectedCallback",this).call(this)}}],[{key:"tag",get:function(){return"absolute-position-state-manager"}},{key:"properties",get:function(){return{scrollTarget:{type:Object},elements:{type:Array},__observer:{type:Object},__timeout:{type:Object},__timeout2:{type:Object}}}}]),o}(e.LitElement);customElements.define(m.tag,m);var w=function(t){return function(t){a(r,t);var o=p(r);function r(){var t;return n(this,r),(t=o.call(this))._ticking=!1,t.scrollTarget=window,t.auto=!1,t.fitToVisibleBounds=!1,t.for=null,t.offset=0,t.position="bottom",t.target=null,t.sticky=!1,t.hidden=!1,t.__positions={},t.__observe=!1,t}return s(r,[{key:"render",value:function(){return e.html(v||(v=y([" <slot></slot>"])))}},{key:"updated",value:function(t){var e=this,o=!1;this.shadowRoot&&!this.hidden&&(t.forEach((function(t,i){"auto"===i&&e.auto&&e.setPosition(),"auto"!==i||e.auto||e.unsetPosition(),["allowOverlap","fitToVisibleBounds","for","offset","position","justify","positionAlign","target","hidden","sticky"].includes(i)&&e[i]!==t&&(o=!0)})),o&&this.updatePosition())}},{key:"setPosition",value:function(){this.__observe=!0,window.AbsolutePositionStateManager.requestAvailability().loadElement(this)}},{key:"unsetPosition",value:function(){this.__observe=!1,window.AbsolutePositionStateManager.requestAvailability().unloadElement(this)}},{key:"updatePosition",value:function(){!this.hidden&&this.auto&&0==this.__observe&&window.AbsolutePositionStateManager.requestAvailability().loadElement(this),this.auto&&!0!==this.__observe||window.AbsolutePositionStateManager.requestAvailability().positionElement(this)}},{key:"disconnectedCallback",value:function(){this.unsetPosition(),d(u(r.prototype),"disconnectedCallback",this).call(this)}}],[{key:"styles",get:function(){return[e.css(g||(g=y(["\n          :host {\n            display: inline-block;\n            z-index: 99999999999;\n            position: absolute;\n          }\n\n          :host([hidden]) {\n            display: none;\n          }\n        "])))]}},{key:"properties",get:function(){return i(i({},d(u(r),"properties",this)),{},{allowOverlap:{type:Boolean,attribute:"allow-overlap"},auto:{type:Boolean,attribute:"auto"},fitToVisibleBounds:{type:Boolean,attribute:"fit-to-visible-bounds"},hidden:{type:Boolean,reflect:!0,attribute:"hidden"},for:{type:String,attribute:"for",reflect:!0},offset:{type:Number,attribute:"offset"},sticky:{type:Boolean,attribute:"sticky",reflect:!0},position:{type:String,attribute:"position",reflect:!0},positionAlign:{type:String,attribute:"position-align",reflect:!0},justify:{type:Boolean,reflect:!0,attribute:"justify"},target:{type:Object},__positions:{type:Object}})}},{key:"tag",get:function(){return"absolute-position-behavior"}}]),r}(t)},_=function(t){a(o,t);var e=p(o);function o(){return n(this,o),e.apply(this,arguments)}return s(o)}(w(e.LitElement));customElements.define(_.tag,_),t.AbsolutePositionBehavior=_,t.AbsolutePositionBehaviorClass=w,Object.defineProperty(t,"__esModule",{value:!0})}));

analysis.json

@@ -19,3 +19,3 @@ {
         "end": {
-          "line": 228,
+          "line": 230,
           "column": 1
@@ -49,7 +49,7 @@ }
             "start": {
-              "line": 81,
+              "line": 84,
               "column": 2
             },
             "end": {
-              "line": 100,
+              "line": 103,
               "column": 3
@@ -74,7 +74,7 @@ }
             "start": {
-              "line": 106,
+              "line": 109,
               "column": 2
             },
             "end": {
-              "line": 109,
+              "line": 112,
               "column": 3
@@ -99,7 +99,7 @@ }
             "start": {
-              "line": 114,
+              "line": 117,
               "column": 2
             },
             "end": {
-              "line": 120,
+              "line": 123,
               "column": 3
@@ -120,7 +120,7 @@ }
             "start": {
-              "line": 125,
+              "line": 128,
               "column": 2
             },
             "end": {
-              "line": 131,
+              "line": 134,
               "column": 3
@@ -141,7 +141,7 @@ }
             "start": {
-              "line": 142,
+              "line": 145,
               "column": 2
             },
             "end": {
-              "line": 162,
+              "line": 165,
               "column": 3
@@ -166,7 +166,7 @@ }
             "start": {
-              "line": 176,
+              "line": 179,
               "column": 2
             },
             "end": {
-              "line": 194,
+              "line": 197,
               "column": 3
@@ -192,7 +192,7 @@ }
             "start": {
-              "line": 200,
+              "line": 203,
               "column": 2
             },
             "end": {
-              "line": 207,
+              "line": 210,
               "column": 3
@@ -213,7 +213,7 @@ }
             "start": {
-              "line": 213,
+              "line": 216,
               "column": 2
             },
             "end": {
-              "line": 216,
+              "line": 219,
               "column": 3
@@ -234,7 +234,7 @@ }
             "start": {
-              "line": 221,
+              "line": 224,
               "column": 2
             },
             "end": {
-              "line": 225,
+              "line": 228,
               "column": 3
@@ -255,7 +255,7 @@ }
             "start": {
-              "line": 231,
+              "line": 234,
               "column": 2
             },
             "end": {
-              "line": 246,
+              "line": 255,
               "column": 3
@@ -276,7 +276,7 @@ }
             "start": {
-              "line": 248,
+              "line": 257,
               "column": 2
             },
             "end": {
-              "line": 258,
+              "line": 267,
               "column": 3
@@ -298,7 +298,7 @@ }
             "start": {
-              "line": 265,
+              "line": 274,
               "column": 2
             },
             "end": {
-              "line": 413,
+              "line": 422,
               "column": 3
@@ -323,7 +323,7 @@ }
             "start": {
-              "line": 418,
+              "line": 427,
               "column": 2
             },
             "end": {
-              "line": 421,
+              "line": 430,
               "column": 3
@@ -348,3 +348,3 @@ }
         "end": {
-          "line": 422,
+          "line": 431,
           "column": 1
@@ -386,7 +386,7 @@ }
             "start": {
-              "line": 154,
+              "line": 156,
               "column": 4
             },
             "end": {
-              "line": 179,
+              "line": 181,
               "column": 5
@@ -411,7 +411,7 @@ }
             "start": {
-              "line": 185,
+              "line": 187,
               "column": 4
             },
             "end": {
-              "line": 190,
+              "line": 192,
               "column": 5
@@ -432,7 +432,7 @@ }
             "start": {
-              "line": 196,
+              "line": 198,
               "column": 4
             },
             "end": {
-              "line": 201,
+              "line": 203,
               "column": 5
@@ -453,7 +453,7 @@ }
             "start": {
-              "line": 207,
+              "line": 209,
               "column": 4
             },
             "end": {
-              "line": 218,
+              "line": 220,
               "column": 5
@@ -474,7 +474,7 @@ }
             "start": {
-              "line": 223,
+              "line": 225,
               "column": 4
             },
             "end": {
-              "line": 226,
+              "line": 228,
               "column": 5
@@ -499,3 +499,3 @@ }
         "end": {
-          "line": 227,
+          "line": 229,
           "column": 3
@@ -527,7 +527,7 @@ }
         "start": {
-          "line": 236,
+          "line": 238,
           "column": 0
         },
         "end": {
-          "line": 238,
+          "line": 240,
           "column": 4
@@ -534,0 +534,0 @@ }

custom-elements.json

@@ -6,3 +6,3 @@ {
       "name": "absolute-position-behavior",
-      "description": "`absolute-position-behavior`\nabstracts absolute positioning behavior to be resusable in other elements\n\nAttributes:\n\n  * `allow-overlap` {`boolean`} - Element has absolututely positioned children, such as menus\nand tooltips that are allowed to overlap the target\n\n  * `position-align` {`string`} - Aligns at the start, or end fo target. Default is centered.\n\n  * `justify` {`boolean`} - \n\n  * `auto` {`boolean`} - Element is positioned from connected to disconnected?\nOtherwise setPosition and unsetPosition must be called manually.\n\n  * `fit-to-visible-bounds` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\n  * `for` {`string`} - The id of the element that the tooltip is anchored to. This element\nmust be a sibling of the tooltip. If this property is not set,\nthen the tooltip will be centered to the parent node containing it.\n\n  * `offset` {`number`} - The spacing between the top of the tooltip and the element it is\nanchored to.\n\n  * `position` {`string`} - Positions the tooltip to the top, right, bottom, left of its content.\n\n  * `target` - The actual target element\n\n  * `sticky` {`boolean`} - Stays on screen while target is on screen\n\n  * `hidden` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\n  * `__positions` - The element's style\n\nProperties:\n\n  * `allowOverlap` {`boolean`} - Element has absolututely positioned children, such as menus\nand tooltips that are allowed to overlap the target\n\n  * `positionAlign` {`string`} - Aligns at the start, or end fo target. Default is centered.\n\n  * `justify` {`boolean`} - \n\n  * `auto` {`boolean`} - Element is positioned from connected to disconnected?\nOtherwise setPosition and unsetPosition must be called manually.\n\n  * `fitToVisibleBounds` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\n  * `for` {`string`} - The id of the element that the tooltip is anchored to. This element\nmust be a sibling of the tooltip. If this property is not set,\nthen the tooltip will be centered to the parent node containing it.\n\n  * `offset` {`number`} - The spacing between the top of the tooltip and the element it is\nanchored to.\n\n  * `position` {`string`} - Positions the tooltip to the top, right, bottom, left of its content.\n\n  * `target` - The actual target element\n\n  * `sticky` {`boolean`} - Stays on screen while target is on screen\n\n  * `hidden` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\n  * `__positions` - The element's style\n\n  * `__observe` {`boolean`} - ",
+      "description": "`absolute-position-behavior`\nabstracts absolute positioning behavior to be resusable in other elements\n\nAttributes:\n\n  * `allow-overlap` {`boolean`} - Element has absolututely positioned children, such as menus\nand tooltips that are allowed to overlap the target\n\n  * `position-align` {`string`} - Aligns at the start, or end fo target. Default is centered.\n\n  * `justify` {`boolean`} - \n\n  * `auto` {`boolean`} - Element is positioned from connected to disconnected?\nOtherwise setPosition and unsetPosition must be called manually.\n\n  * `fit-to-visible-bounds` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\n  * `for` {`string`} - The id of the element that the tooltip is anchored to. This element\nmust be a sibling of the tooltip. If this property is not set,\nthen the tooltip will be centered to the parent node containing it.\n\n  * `offset` {`number`} - The spacing between the top of the tooltip and the element it is\nanchored to.\n\n  * `position` {`string`} - Positions the tooltip to the top, right, bottom, left of its content.\n\n  * `target` - The actual target element\n\n  * `sticky` {`boolean`} - Stays on screen while target is on screen\n\n  * `hidden` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\n  * `__positions` - The element's style\n\nProperties:\n\n  * `allowOverlap` {`boolean`} - Element has absolututely positioned children, such as menus\nand tooltips that are allowed to overlap the target\n\n  * `positionAlign` {`string`} - Aligns at the start, or end fo target. Default is centered.\n\n  * `justify` {`boolean`} - \n\n  * `_ticking` {`boolean`} - \n\n  * `scrollTarget` - \n\n  * `auto` {`boolean`} - Element is positioned from connected to disconnected?\nOtherwise setPosition and unsetPosition must be called manually.\n\n  * `fitToVisibleBounds` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\n  * `for` {`string`} - The id of the element that the tooltip is anchored to. This element\nmust be a sibling of the tooltip. If this property is not set,\nthen the tooltip will be centered to the parent node containing it.\n\n  * `offset` {`number`} - The spacing between the top of the tooltip and the element it is\nanchored to.\n\n  * `position` {`string`} - Positions the tooltip to the top, right, bottom, left of its content.\n\n  * `target` - The actual target element\n\n  * `sticky` {`boolean`} - Stays on screen while target is on screen\n\n  * `hidden` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\n  * `__positions` - The element's style\n\n  * `__observe` {`boolean`} - ",
       "attributes": [
@@ -67,5 +67,9 @@ {
       "name": "absolute-position-state-manager",
-      "description": "`absolute-position-state-manager`\nmanages state of multiple absolute-positioned elements on a page\n\nAttributes:\n\n  * `__timeout2` - resize timeout\n\n  * `elements` {`any[]`} - Stores an array of all elements using manager.\n\n  * `__timeout` - resize timeout\n\n  * `__observer` - mutation observer\n\nProperties:\n\n  * `__timeout2` - resize timeout\n\n  * `elements` {`any[]`} - Stores an array of all elements using manager.\n\n  * `__timeout` - resize timeout\n\n  * `__observer` - mutation observer",
+      "description": "`absolute-position-state-manager`\nmanages state of multiple absolute-positioned elements on a page\n\nAttributes:\n\n  * `scrollTarget` - \n\n  * `__timeout2` - resize timeout\n\n  * `elements` {`any[]`} - Stores an array of all elements using manager.\n\n  * `__timeout` - resize timeout\n\n  * `__observer` - mutation observer\n\nProperties:\n\n  * `scrollTarget` - \n\n  * `__timeout2` - resize timeout\n\n  * `elements` {`any[]`} - Stores an array of all elements using manager.\n\n  * `__timeout` - resize timeout\n\n  * `__observer` - mutation observer",
       "attributes": [
         {
+          "name": "scrollTarget",
+          "description": "`scrollTarget` - \n\nProperty: scrollTarget"
+        },
+        {
           "name": "__timeout2",
@@ -90,3 +94,3 @@ "description": "`__timeout2` - resize timeout\n\nProperty: __timeout2"
       "name": "absolute-position-behavior",
-      "description": "`absolute-position-behavior`\nabstracts absolute positioning behavior to be resusable in other elements\n\nAttributes:\n\n  * `allow-overlap` {`boolean`} - Element has absolututely positioned children, such as menus\nand tooltips that are allowed to overlap the target\n\n  * `position-align` {`string`} - Aligns at the start, or end fo target. Default is centered.\n\n  * `justify` {`boolean`} - \n\n  * `auto` {`boolean`} - Element is positioned from connected to disconnected?\nOtherwise setPosition and unsetPosition must be called manually.\n\n  * `fit-to-visible-bounds` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\n  * `for` {`string`} - The id of the element that the tooltip is anchored to. This element\nmust be a sibling of the tooltip. If this property is not set,\nthen the tooltip will be centered to the parent node containing it.\n\n  * `offset` {`number`} - The spacing between the top of the tooltip and the element it is\nanchored to.\n\n  * `position` {`string`} - Positions the tooltip to the top, right, bottom, left of its content.\n\n  * `target` - The actual target element\n\n  * `sticky` {`boolean`} - Stays on screen while target is on screen\n\n  * `hidden` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\n  * `__positions` - The element's style\n\nProperties:\n\n  * `allowOverlap` {`boolean`} - Element has absolututely positioned children, such as menus\nand tooltips that are allowed to overlap the target\n\n  * `positionAlign` {`string`} - Aligns at the start, or end fo target. Default is centered.\n\n  * `justify` {`boolean`} - \n\n  * `auto` {`boolean`} - Element is positioned from connected to disconnected?\nOtherwise setPosition and unsetPosition must be called manually.\n\n  * `fitToVisibleBounds` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\n  * `for` {`string`} - The id of the element that the tooltip is anchored to. This element\nmust be a sibling of the tooltip. If this property is not set,\nthen the tooltip will be centered to the parent node containing it.\n\n  * `offset` {`number`} - The spacing between the top of the tooltip and the element it is\nanchored to.\n\n  * `position` {`string`} - Positions the tooltip to the top, right, bottom, left of its content.\n\n  * `target` - The actual target element\n\n  * `sticky` {`boolean`} - Stays on screen while target is on screen\n\n  * `hidden` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\n  * `__positions` - The element's style\n\n  * `__observe` {`boolean`} - ",
+      "description": "`absolute-position-behavior`\nabstracts absolute positioning behavior to be resusable in other elements\n\nAttributes:\n\n  * `allow-overlap` {`boolean`} - Element has absolututely positioned children, such as menus\nand tooltips that are allowed to overlap the target\n\n  * `position-align` {`string`} - Aligns at the start, or end fo target. Default is centered.\n\n  * `justify` {`boolean`} - \n\n  * `auto` {`boolean`} - Element is positioned from connected to disconnected?\nOtherwise setPosition and unsetPosition must be called manually.\n\n  * `fit-to-visible-bounds` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\n  * `for` {`string`} - The id of the element that the tooltip is anchored to. This element\nmust be a sibling of the tooltip. If this property is not set,\nthen the tooltip will be centered to the parent node containing it.\n\n  * `offset` {`number`} - The spacing between the top of the tooltip and the element it is\nanchored to.\n\n  * `position` {`string`} - Positions the tooltip to the top, right, bottom, left of its content.\n\n  * `target` - The actual target element\n\n  * `sticky` {`boolean`} - Stays on screen while target is on screen\n\n  * `hidden` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\n  * `__positions` - The element's style\n\nProperties:\n\n  * `allowOverlap` {`boolean`} - Element has absolututely positioned children, such as menus\nand tooltips that are allowed to overlap the target\n\n  * `positionAlign` {`string`} - Aligns at the start, or end fo target. Default is centered.\n\n  * `justify` {`boolean`} - \n\n  * `_ticking` {`boolean`} - \n\n  * `scrollTarget` - \n\n  * `auto` {`boolean`} - Element is positioned from connected to disconnected?\nOtherwise setPosition and unsetPosition must be called manually.\n\n  * `fitToVisibleBounds` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\n  * `for` {`string`} - The id of the element that the tooltip is anchored to. This element\nmust be a sibling of the tooltip. If this property is not set,\nthen the tooltip will be centered to the parent node containing it.\n\n  * `offset` {`number`} - The spacing between the top of the tooltip and the element it is\nanchored to.\n\n  * `position` {`string`} - Positions the tooltip to the top, right, bottom, left of its content.\n\n  * `target` - The actual target element\n\n  * `sticky` {`boolean`} - Stays on screen while target is on screen\n\n  * `hidden` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\n  * `__positions` - The element's style\n\n  * `__observe` {`boolean`} - ",
       "attributes": [
@@ -93,0 +97,0 @@ {

lib/absolute-position-state-manager.js

@@ -39,2 +39,5 @@ /**
     return {
+      scrollTarget: {
+        type: Object,
+      },
       /**
@@ -208,3 +211,3 @@ * Stores an array of all elements using manager.
     if (this.__watchSticky)
-      window.removeEventListener("scroll", this._handleScroll);
+      this.scrollTarget.removeEventListener("scroll", this._handleScroll);
   }
@@ -238,11 +241,17 @@
       !this.__watchSticky &&
-      this.elements.filter((el) => el.sticky).length > 0
+      this.elements.filter((el) => el.sticky).length > 0 &&
+      this.scrollTarget
     ) {
       this.__watchSticky = true;
-      window.addEventListener("scroll", this._handleScroll);
+      this.scrollTarget.addEventListener("scroll", this._handleScroll, {
+        passive: true,
+      });
     } else if (
       this.__watchSticky &&
-      this.elements.filter((el) => el.sticky).length < 1
+      this.elements.filter((el) => el.sticky).length < 1 &&
+      this.scrollTarget
     ) {
-      window.removeEventListener("scroll", this._handleScroll);
+      this.scrollTarget.removeEventListener("scroll", this._handleScroll, {
+        passive: true,
+      });
       this.__watchSticky = false;
@@ -249,0 +258,0 @@ }

package.json

@@ -20,3 +20,3 @@ {
   },
-  "version": "4.2.0",
+  "version": "7.0.0",
   "description": "Abstracting the positioning behavior from paper-tooltip to be resusable in other elements",
@@ -46,6 +46,6 @@ "repository": {
   "dependencies": {
-    "lit": "^2.6.1"
+    "lit": "^2.7.2"
   },
   "devDependencies": {
-    "@lrnwebcomponents/deduping-fix": "^4.0.0",
+    "@lrnwebcomponents/deduping-fix": "^7.0.0",
     "@open-wc/testing": "3.0.4",
@@ -70,3 +70,3 @@ "@polymer/iron-component-page": "github:PolymerElements/iron-component-page",
   ],
-  "gitHead": "6afcd512f3d42c2987ba1dd7b0067f28448e4418"
+  "gitHead": "619ebdfc0aac017516b65f4e6eb1c12080dff39e"
 }

src/absolute-position-behavior.js

@@ -143,2 +143,4 @@ /**
       super();
+      this._ticking = false;
+      this.scrollTarget = window;
       this.auto = false;
@@ -145,0 +147,0 @@ this.fitToVisibleBounds = false;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

122590

increased by0.58%

Lines of code

2045

increased by0.89%

Dependency changes

• Updatedlit@^2.7.2