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

Comparing version 7.0.0 to 7.0.1

absolute-position-behavior.js

@@ -15,3 +15,7 @@ /**
     static get styles() {
-      return [
+      let styles = [];
+      if (super.styles) {
+        styles = super.styles;
+      }
+      return [...styles,
         css`
@@ -159,2 +163,5 @@ :host {
     updated(changedProperties) {
+      if (super.updated) {
+        super.updated(changedProperties);
+      }
       let updatePosition = false;
@@ -161,0 +168,0 @@ if (this.shadowRoot && !this.hidden) {

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 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})}));
+!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)).windowControllers=new AbortController,t.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(),this.windowControllers=new AbortController,document.addEventListener("load",this.updateElements.bind(this),{signal:this.windowControllers.signal}),window.addEventListener("resize",this._handleResize.bind(this),{signal:this.windowControllers.signal})),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(),this.windowControllers.abort(),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": 230,
+          "line": 237,
           "column": 1
@@ -49,7 +49,7 @@ }
             "start": {
-              "line": 84,
+              "line": 85,
               "column": 2
             },
             "end": {
-              "line": 103,
+              "line": 109,
               "column": 3
@@ -74,7 +74,7 @@ }
             "start": {
-              "line": 109,
+              "line": 115,
               "column": 2
             },
             "end": {
-              "line": 112,
+              "line": 118,
               "column": 3
@@ -99,7 +99,7 @@ }
             "start": {
-              "line": 117,
+              "line": 123,
               "column": 2
             },
             "end": {
-              "line": 123,
+              "line": 129,
               "column": 3
@@ -120,7 +120,7 @@ }
             "start": {
-              "line": 128,
+              "line": 134,
               "column": 2
             },
             "end": {
-              "line": 134,
+              "line": 140,
               "column": 3
@@ -141,7 +141,7 @@ }
             "start": {
-              "line": 145,
+              "line": 151,
               "column": 2
             },
             "end": {
-              "line": 165,
+              "line": 171,
               "column": 3
@@ -166,7 +166,7 @@ }
             "start": {
-              "line": 179,
+              "line": 185,
               "column": 2
             },
             "end": {
-              "line": 197,
+              "line": 203,
               "column": 3
@@ -192,7 +192,7 @@ }
             "start": {
-              "line": 203,
+              "line": 209,
               "column": 2
             },
             "end": {
-              "line": 210,
+              "line": 215,
               "column": 3
@@ -213,7 +213,7 @@ }
             "start": {
-              "line": 216,
+              "line": 221,
               "column": 2
             },
             "end": {
-              "line": 219,
+              "line": 224,
               "column": 3
@@ -234,7 +234,7 @@ }
             "start": {
-              "line": 224,
+              "line": 229,
               "column": 2
             },
             "end": {
-              "line": 228,
+              "line": 233,
               "column": 3
@@ -255,7 +255,7 @@ }
             "start": {
-              "line": 234,
+              "line": 239,
               "column": 2
             },
             "end": {
-              "line": 255,
+              "line": 260,
               "column": 3
@@ -276,7 +276,7 @@ }
             "start": {
-              "line": 257,
+              "line": 262,
               "column": 2
             },
             "end": {
-              "line": 267,
+              "line": 272,
               "column": 3
@@ -298,7 +298,7 @@ }
             "start": {
-              "line": 274,
+              "line": 279,
               "column": 2
             },
             "end": {
-              "line": 422,
+              "line": 427,
               "column": 3
@@ -323,7 +323,7 @@ }
             "start": {
-              "line": 427,
+              "line": 432,
               "column": 2
             },
             "end": {
-              "line": 430,
+              "line": 435,
               "column": 3
@@ -348,3 +348,3 @@ }
         "end": {
-          "line": 431,
+          "line": 436,
           "column": 1
@@ -369,7 +369,7 @@ }
             "start": {
-              "line": 30,
+              "line": 34,
               "column": 4
             },
             "end": {
-              "line": 32,
+              "line": 36,
               "column": 5
@@ -387,7 +387,7 @@ }
             "start": {
-              "line": 156,
+              "line": 160,
               "column": 4
             },
             "end": {
-              "line": 181,
+              "line": 188,
               "column": 5
@@ -412,7 +412,7 @@ }
             "start": {
-              "line": 187,
+              "line": 194,
               "column": 4
             },
             "end": {
-              "line": 192,
+              "line": 199,
               "column": 5
@@ -433,7 +433,7 @@ }
             "start": {
-              "line": 198,
+              "line": 205,
               "column": 4
             },
             "end": {
-              "line": 203,
+              "line": 210,
               "column": 5
@@ -454,7 +454,7 @@ }
             "start": {
-              "line": 209,
+              "line": 216,
               "column": 4
             },
             "end": {
-              "line": 220,
+              "line": 227,
               "column": 5
@@ -475,7 +475,7 @@ }
             "start": {
-              "line": 225,
+              "line": 232,
               "column": 4
             },
             "end": {
-              "line": 228,
+              "line": 235,
               "column": 5
@@ -500,3 +500,3 @@ }
         "end": {
-          "line": 229,
+          "line": 236,
           "column": 3
@@ -528,7 +528,7 @@ }
         "start": {
-          "line": 238,
+          "line": 245,
           "column": 0
         },
         "end": {
-          "line": 240,
+          "line": 247,
           "column": 4
@@ -535,0 +535,0 @@ }

custom-elements.json

@@ -66,3 +66,3 @@ {
       "name": "absolute-position-state-manager",
-      "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",
+      "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  * `windowControllers` - \n\n  * `elements` {`any[]`} - Stores an array of all elements using manager.\n\n  * `__timeout` - resize timeout\n\n  * `__observer` - mutation observer",
       "attributes": [
@@ -90,62 +90,2 @@ {
       ]
-    },
-    {
-      "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  * `_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": [
-        {
-          "name": "allow-overlap",
-          "description": "`allow-overlap` {`boolean`} - Element has absolututely positioned children, such as menus\nand tooltips that are allowed to overlap the target\n\nProperty: allowOverlap",
-          "valueSet": "v"
-        },
-        {
-          "name": "position-align",
-          "description": "`position-align` {`string`} - Aligns at the start, or end fo target. Default is centered.\n\nProperty: positionAlign"
-        },
-        {
-          "name": "justify",
-          "description": "`justify` {`boolean`} - \n\nProperty: justify",
-          "valueSet": "v"
-        },
-        {
-          "name": "auto",
-          "description": "`auto` {`boolean`} - Element is positioned from connected to disconnected?\nOtherwise setPosition and unsetPosition must be called manually.\n\nProperty: auto\n\nDefault: false",
-          "valueSet": "v"
-        },
-        {
-          "name": "fit-to-visible-bounds",
-          "description": "`fit-to-visible-bounds` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\nProperty: fitToVisibleBounds\n\nDefault: false",
-          "valueSet": "v"
-        },
-        {
-          "name": "for",
-          "description": "`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\nProperty: for\n\nDefault: null"
-        },
-        {
-          "name": "offset",
-          "description": "`offset` {`number`} - The spacing between the top of the tooltip and the element it is\nanchored to.\n\nProperty: offset\n\nDefault: 0"
-        },
-        {
-          "name": "position",
-          "description": "`position` {`string`} - Positions the tooltip to the top, right, bottom, left of its content.\n\nProperty: position\n\nDefault: bottom"
-        },
-        {
-          "name": "target",
-          "description": "`target` - The actual target element\n\nProperty: target\n\nDefault: null"
-        },
-        {
-          "name": "sticky",
-          "description": "`sticky` {`boolean`} - Stays on screen while target is on screen\n\nProperty: sticky\n\nDefault: false",
-          "valueSet": "v"
-        },
-        {
-          "name": "hidden",
-          "description": "`hidden` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\nProperty: hidden\n\nDefault: false",
-          "valueSet": "v"
-        },
-        {
-          "name": "__positions",
-          "description": "`__positions` - The element's style\n\nProperty: __positions\n\nDefault: [object Object]"
-        }
-      ]
     }
@@ -152,0 +92,0 @@ ],

lib/absolute-position-state-manager.js

@@ -74,2 +74,3 @@ /**
     super();
+    this.windowControllers = new AbortController();
     this.elements = [];
@@ -96,4 +97,9 @@ this.__timeout = false;
       this.updateElements();
-      document.addEventListener("load", this.updateElements);
-      window.addEventListener("resize", this._handleResize);
+      this.windowControllers = new AbortController();
+      document.addEventListener("load", this.updateElements.bind(this), {
+        signal: this.windowControllers.signal,
+      });
+      window.addEventListener("resize", this._handleResize.bind(this), {
+        signal: this.windowControllers.signal,
+      });
     }
@@ -209,4 +215,3 @@ if (this.elements.filter((element) => element === el).length < 1) {
       this.__observer.disconnect();
-    document.removeEventListener("load", this.updateElements);
-    window.removeEventListener("resize", this._handleResize);
+    this.windowControllers.abort();
     if (this.__watchSticky)
@@ -213,0 +218,0 @@ this.scrollTarget.removeEventListener("scroll", this._handleScroll);

package.json

@@ -20,3 +20,3 @@ {
   },
-  "version": "7.0.0",
+  "version": "7.0.1",
   "description": "Abstracting the positioning behavior from paper-tooltip to be resusable in other elements",
@@ -33,3 +33,3 @@ "repository": {
     "start": "yarn run dev",
-    "build": "gulp --gulpfile=gulpfile.cjs && node --experimental-json-modules ../../node_modules/.bin/rollup --config && prettier --ignore-path ../../.prettierignore --write \"**/*.{js,json}\" && wca analyze \"**/*.js\" --format vscode --outFile custom-elements.json",
+    "build": "gulp --gulpfile=gulpfile.cjs && node --experimental-json-modules ../../node_modules/.bin/rollup --config && prettier --ignore-path ../../.prettierignore --write \"**/*.{js,json}\" && wca analyze \"{*,lib/**}.js\" --format vscode --outFile custom-elements.json",
     "dev": "concurrently --kill-others \"yarn run watch\" \"yarn run serve\"",
@@ -47,3 +47,3 @@ "watch": "gulp dev --gulpfile=gulpfile.cjs",
   "dependencies": {
-    "lit": "^2.7.2"
+    "lit": "^2.7.4"
   },
@@ -71,3 +71,3 @@ "devDependencies": {
   ],
-  "gitHead": "619ebdfc0aac017516b65f4e6eb1c12080dff39e"
+  "gitHead": "7087ebc5fd7f631a2a78ad40af08384933139929"
 }

src/absolute-position-behavior.js

@@ -15,3 +15,7 @@ /**
     static get styles() {
-      return [
+      let styles = [];
+      if (super.styles) {
+        styles = super.styles;
+      }
+      return [...styles,
         css`
@@ -159,2 +163,5 @@ :host {
     updated(changedProperties) {
+      if (super.updated) {
+        super.updated(changedProperties);
+      }
       let updatePosition = false;
@@ -161,0 +168,0 @@ if (this.shadowRoot && !this.hidden) {

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

Worsened metrics

Total package byte prevSize

117774

decreased by-3.93%

Number of downloads

22

decreased by-33.33%

Lines of code

1997

decreased by-2.35%

Dependency changes

• Updatedlit@^2.7.4