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

Comparing version 4.1.0 to 4.1.1

absolute-position-behavior.js

@@ -240,6 +240,3 @@ /**
 ) {}
-window.customElements.define(
-  AbsolutePositionBehavior.tag,
-  AbsolutePositionBehavior
-);
+customElements.define(AbsolutePositionBehavior.tag, AbsolutePositionBehavior);
 export { AbsolutePositionBehaviorClass, AbsolutePositionBehavior };

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,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 in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,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:function(t){return t.__proto__||Object.getPrototypeOf(t)},u(t)}function c(t,e){return c=Object.setPrototypeOf||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=u(t);if(e){var i=u(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=u(t)););return t}function d(){return d="undefined"!=typeof Reflect&&Reflect.get?Reflect.get: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)}}))}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 b,v,m=function(t){a(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();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),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),n=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=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=u(e)?a(t.style.top)-s.top:a(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 u(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=u(t.position)?p():f(),v=u(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(u(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);window.customElements.define(m.tag,m);var g=function(t){return function(t){a(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(b||(b=y(["\n\n<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(u(r.prototype),"disconnectedCallback",this).call(this)}}],[{key:"styles",get:function(){return[e.css(v||(v=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(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)},w=function(t){a(n,t);var e=p(n);function n(){return i(this,n),e.apply(this,arguments)}return s(n)}(g(e.LitElement));window.customElements.define(w.tag,w),t.AbsolutePositionBehavior=w,t.AbsolutePositionBehaviorClass=g,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 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})}));

analysis.json

@@ -19,3 +19,3 @@ {
         "end": {
-          "line": 234,
+          "line": 228,
           "column": 1
@@ -291,3 +291,3 @@ }
             "end": {
-              "line": 410,
+              "line": 413,
               "column": 3
@@ -312,7 +312,7 @@ }
             "start": {
-              "line": 415,
+              "line": 418,
               "column": 2
             },
             "end": {
-              "line": 418,
+              "line": 421,
               "column": 3
@@ -337,3 +337,3 @@ }
         "end": {
-          "line": 419,
+          "line": 422,
           "column": 1
@@ -358,8 +358,8 @@ }
             "start": {
-              "line": 32,
-              "column": 2
+              "line": 30,
+              "column": 4
             },
             "end": {
-              "line": 36,
-              "column": 3
+              "line": 32,
+              "column": 5
             }
@@ -376,7 +376,7 @@ },
             "start": {
-              "line": 160,
+              "line": 154,
               "column": 4
             },
             "end": {
-              "line": 185,
+              "line": 179,
               "column": 5
@@ -401,7 +401,7 @@ }
             "start": {
-              "line": 191,
+              "line": 185,
               "column": 4
             },
             "end": {
-              "line": 196,
+              "line": 190,
               "column": 5
@@ -422,7 +422,7 @@ }
             "start": {
-              "line": 202,
+              "line": 196,
               "column": 4
             },
             "end": {
-              "line": 207,
+              "line": 201,
               "column": 5
@@ -443,7 +443,7 @@ }
             "start": {
-              "line": 213,
+              "line": 207,
               "column": 4
             },
             "end": {
-              "line": 224,
+              "line": 218,
               "column": 5
@@ -464,7 +464,7 @@ }
             "start": {
-              "line": 229,
+              "line": 223,
               "column": 4
             },
             "end": {
-              "line": 232,
+              "line": 226,
               "column": 5
@@ -489,3 +489,3 @@ }
         "end": {
-          "line": 233,
+          "line": 227,
           "column": 3
@@ -517,7 +517,7 @@ }
         "start": {
-          "line": 242,
+          "line": 236,
           "column": 0
         },
         "end": {
-          "line": 244,
+          "line": 238,
           "column": 4
@@ -524,0 +524,0 @@ }

custom-elements.json

@@ -88,4 +88,59 @@ {
       "name": "absolute-position-behavior",
-      "description": "`absolute-position-behavior`\nabstracts absolute positioning behavior to be resusable in other elements\n\nProperties:\n\n  * `auto` {`boolean`} - \n\n  * `fitToVisibleBounds` {`boolean`} - \n\n  * `for` - \n\n  * `offset` {`number`} - \n\n  * `position` {`string`} - \n\n  * `target` - \n\n  * `sticky` {`boolean`} - \n\n  * `hidden` {`boolean`} - \n\n  * `__positions` - \n\n  * `__observe` {`boolean`} - ",
-      "attributes": []
+      "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`} - ",
+      "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]"
+        }
+      ]
     }
@@ -92,0 +147,0 @@ ],

lib/absolute-position-state-manager.js

@@ -276,5 +276,8 @@ /**
     //continue only if there is a target and a parent
-    let target = this.findTarget(el),
-      parent = el.offsetParent,
-      t = !target || target.getBoundingClientRect();
+    let target = this.findTarget(el);
+    let parent = el.offsetParent;
+    let t =
+      target && target.getBoundingClientRect
+        ? target.getBoundingClientRect()
+        : {};
     if (!target || !parent) return;
@@ -422,3 +425,3 @@ //if justify is set, re-adjust element to
 }
-window.customElements.define(
+customElements.define(
   AbsolutePositionStateManager.tag,
@@ -425,0 +428,0 @@ AbsolutePositionStateManager

package.json

@@ -20,3 +20,3 @@ {
   },
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Abstracting the positioning behavior from paper-tooltip to be resusable in other elements",
@@ -46,3 +46,3 @@ "repository": {
   "dependencies": {
-    "lit": "^2.2.8"
+    "lit": "^2.6.1"
   },
@@ -54,5 +54,5 @@ "devDependencies": {
     "@polymer/iron-demo-helpers": "3.1.0",
-    "@web/dev-server": "0.1.31",
+    "@web/dev-server": "0.1.34",
     "@webcomponents/webcomponentsjs": "2.6.0",
-    "concurrently": "7.0.0",
+    "concurrently": "7.4.0",
     "gulp-babel": "8.0.0",
@@ -71,3 +71,3 @@ "lodash": "^4.17.21",
   ],
-  "gitHead": "4770bd248a313aee84314a95ffdad8ff25a22188"
+  "gitHead": "5fd3b49314297b354117d2fb80bad4c953c07ae7"
 }

src/absolute-position-behavior.js

@@ -13,4 +13,122 @@ /**
   return class extends SuperClass {
-    /* REQUIRED FOR TOOLING DO NOT TOUCH */
+    //styles function
+    static get styles() {
+      return [
+        css`
+          :host {
+            display: inline-block;
+            z-index: 99999999999;
+            position: absolute;
+          }
 
+          :host([hidden]) {
+            display: none;
+          }
+        `,
+      ];
+    }
+
+    // render function
+    render() {
+      return html` <slot></slot>`;
+    }
+
+    // properties available to the custom element for data binding
+    static get properties() {
+      return {
+        ...super.properties,
+
+        /**
+         * Element has absolututely positioned children, such as menus
+         * and tooltips that are allowed to overlap the target
+         */
+        allowOverlap: {
+          type: Boolean,
+          attribute: "allow-overlap",
+        },
+        /**
+         * Element is positioned from connected to disconnected?
+         * Otherwise setPosition and unsetPosition must be called manually.
+         */
+        auto: {
+          type: Boolean,
+          attribute: "auto",
+        },
+        /**
+         * If true, no parts of the tooltip will ever be shown offscreen.
+         */
+        fitToVisibleBounds: {
+          type: Boolean,
+          attribute: "fit-to-visible-bounds",
+        },
+        /**
+         * If true, no parts of the tooltip will ever be shown offscreen.
+         */
+        hidden: {
+          type: Boolean,
+          reflect: true,
+          attribute: "hidden",
+        },
+        /**
+         * The id of the element that the tooltip is anchored to. This element
+         * must be a sibling of the tooltip. If this property is not set,
+         * then the tooltip will be centered to the parent node containing it.
+         */
+        for: {
+          type: String,
+          attribute: "for",
+          reflect: true,
+        },
+        /**
+         * The spacing between the top of the tooltip and the element it is
+         * anchored to.
+         */
+        offset: {
+          type: Number,
+          attribute: "offset",
+        },
+        /**
+         * Stays on screen while target is on screen
+         */
+        sticky: {
+          type: Boolean,
+          attribute: "sticky",
+          reflect: true,
+        },
+        /**
+         * Positions the tooltip to the top, right, bottom, left of its content.
+         */
+        position: {
+          type: String,
+          attribute: "position",
+          reflect: true,
+        },
+        /**
+         * Aligns at the start, or end fo target. Default is centered.
+         */
+        positionAlign: {
+          type: String,
+          attribute: "position-align",
+          reflect: true,
+        },
+        justify: {
+          type: Boolean,
+          reflect: true,
+          attribute: "justify",
+        },
+        /**
+         * The actual target element
+         */
+        target: {
+          type: Object,
+        },
+        /**
+         * The element's style
+         */
+        __positions: {
+          type: Object,
+        },
+      };
+    }
+
     /**
@@ -123,6 +241,3 @@ * Store tag name to make it easier to obtain directly.
 ) {}
-window.customElements.define(
-  AbsolutePositionBehavior.tag,
-  AbsolutePositionBehavior
-);
+customElements.define(AbsolutePositionBehavior.tag, AbsolutePositionBehavior);
 export { AbsolutePositionBehaviorClass, AbsolutePositionBehavior };

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

121879

decreased by-15.23%

Number of package files

21

decreased by-22.22%

Lines of code

2027

decreased by-27.5%

Dependency changes

• Updatedlit@^2.6.1