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

Comparing version 2.1.0 to 2.1.1

absolute-position-behavior.amd.js

@@ -1,2 +0,2 @@
-define(["exports","./node_modules/@polymer/polymer/polymer-element.js","./lib/absolute-position-state-manager.js"],function(_exports,_polymerElement,_absolutePositionStateManager){"use strict";Object.defineProperty(_exports,"__esModule",{value:!0});_exports.AbsolutePositionBehavior=void 0;function _templateObject_8105416081c011e982224906d291fc8b(){var data=babelHelpers.taggedTemplateLiteral(["\n<style>:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n</style>\n<slot></slot>"]);_templateObject_8105416081c011e982224906d291fc8b=function _templateObject_8105416081c011e982224906d291fc8b(){return data};return data}/**
+define(["exports","./node_modules/@polymer/polymer/polymer-element.js","./lib/absolute-position-state-manager.js"],function(_exports,_polymerElement,_absolutePositionStateManager){"use strict";Object.defineProperty(_exports,"__esModule",{value:!0});_exports.AbsolutePositionBehavior=void 0;function _templateObject_3937f3c0ab1211e998418fccae0dbe82(){var data=babelHelpers.taggedTemplateLiteral(["\n<style>:host {\n  display: inline-block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n</style>\n<slot></slot>"]);_templateObject_3937f3c0ab1211e998418fccae0dbe82=function _templateObject_3937f3c0ab1211e998418fccae0dbe82(){return data};return data}/**
  * `absolute-position-behavior`
@@ -15,33 +15,38 @@ * `Abstracting the positioning behavior from paper-tooltip to be resusable in other elements`
    * life cycle, element is ready
+   * @returns {void}
    */},{key:"ready",value:function ready(){babelHelpers.get(babelHelpers.getPrototypeOf(AbsolutePositionBehavior.prototype),"ready",this).call(this)}/**
    * Registers the element with AbsolutePositionStateManager
+   * @returns {void}
    */},{key:"setPosition",value:function setPosition(){var root=this;root.__observe=!0;root.__manager.loadElement(root)}/**
    * Unregisters the element with AbsolutePositionStateManager
+   * @returns {void}
    */},{key:"unsetPosition",value:function unsetPosition(){var root=this;root.__observe=!1;root.__manager.unloadElement(root)}/**
    * Updates  the element's position
+   * @returns {void}
    */},{key:"updatePosition",value:function updatePosition(){var root=this;if(!0===root.__observe){root.__manager.positionElement(root)}}/**
    * life cycle, element is removed from the DOM
+   * @returns {void}
    */},{key:"disconnectedCallback",value:function disconnectedCallback(){this.unsetPosition();babelHelpers.get(babelHelpers.getPrototypeOf(AbsolutePositionBehavior.prototype),"disconnectedCallback",this).call(this)}}],[{key:"template",// render function
-get:function get(){return(0,_polymerElement.html)(_templateObject_8105416081c011e982224906d291fc8b())}// properties available to the custom element for data binding
-},{key:"properties",get:function get(){return{/**
+get:function get(){return(0,_polymerElement.html)(_templateObject_3937f3c0ab1211e998418fccae0dbe82())}// properties available to the custom element for data binding
+},{key:"properties",get:function get(){var props={/**
    * Element is positioned from connected to disconnected?
    * Otherwise setPosition and unsetPosition must be called manually.
-   */auto:{type:"Boolean",value:!1},/**
+   */auto:{type:Boolean,value:!1},/**
    * If true, no parts of the tooltip will ever be shown offscreen.
-   */fitToVisibleBounds:{type:"Boolean",value:!1,observer:"updatePosition"},/**
+   */fitToVisibleBounds:{type:Boolean,value:!1,observer:"updatePosition"},/**
    * 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",observer:"updatePosition",reflectToAttribute:!0},/**
+   */for:{type:String,observer:"updatePosition",reflectToAttribute:!0},/**
    * The spacing between the top of the tooltip and the element it is
    * anchored to.
-   */offset:{type:"Number",value:0,observer:"updatePosition"},/**
+   */offset:{type:Number,value:0,observer:"updatePosition"},/**
    * Positions the tooltip to the top, right, bottom, left of its content.
-   */position:{type:"String",value:"bottom",observer:"updatePosition",reflectToAttribute:!0},/**
+   */position:{type:String,value:"bottom",observer:"updatePosition",reflectToAttribute:!0},/**
    * The actual target element
-   */target:{type:"Object",observer:"updatePosition"},/**
+   */target:{type:Object,observer:"updatePosition"},/**
    * The element's style
-   */__positions:{type:"Object"}}}/**
+   */__positions:{type:Object}};if(babelHelpers.get(babelHelpers.getPrototypeOf(AbsolutePositionBehavior),"properties",this)){props=Object.assign(props,babelHelpers.get(babelHelpers.getPrototypeOf(AbsolutePositionBehavior),"properties",this))}return props}/**
    * Store the tag name to make it easier to obtain directly.
    * @notice function name must be here for tooling to operate correctly
    */},{key:"tag",get:function get(){return"absolute-position-behavior"}}]);return AbsolutePositionBehavior}(_polymerElement.PolymerElement);_exports.AbsolutePositionBehavior=AbsolutePositionBehavior;window.customElements.define(AbsolutePositionBehavior.tag,AbsolutePositionBehavior)});

absolute-position-behavior.es6.js

@@ -17,3 +17,3 @@ /**
 <style>:host {
-  display: block;
+  display: inline-block;
 }
@@ -26,21 +26,21 @@
 <slot></slot>`}// properties available to the custom element for data binding
-static get properties(){return{/**
+static get properties(){let props={/**
    * Element is positioned from connected to disconnected?
    * Otherwise setPosition and unsetPosition must be called manually.
-   */auto:{type:"Boolean",value:!1},/**
+   */auto:{type:Boolean,value:!1},/**
    * If true, no parts of the tooltip will ever be shown offscreen.
-   */fitToVisibleBounds:{type:"Boolean",value:!1,observer:"updatePosition"},/**
+   */fitToVisibleBounds:{type:Boolean,value:!1,observer:"updatePosition"},/**
    * 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",observer:"updatePosition",reflectToAttribute:!0},/**
+   */for:{type:String,observer:"updatePosition",reflectToAttribute:!0},/**
    * The spacing between the top of the tooltip and the element it is
    * anchored to.
-   */offset:{type:"Number",value:0,observer:"updatePosition"},/**
+   */offset:{type:Number,value:0,observer:"updatePosition"},/**
    * Positions the tooltip to the top, right, bottom, left of its content.
-   */position:{type:"String",value:"bottom",observer:"updatePosition",reflectToAttribute:!0},/**
+   */position:{type:String,value:"bottom",observer:"updatePosition",reflectToAttribute:!0},/**
    * The actual target element
-   */target:{type:"Object",observer:"updatePosition"},/**
+   */target:{type:Object,observer:"updatePosition"},/**
    * The element's style
-   */__positions:{type:"Object"}}}/**
+   */__positions:{type:Object}};if(super.properties){props=Object.assign(props,super.properties)}return props}/**
    * Store the tag name to make it easier to obtain directly.
@@ -52,10 +52,15 @@ * @notice function name must be here for tooling to operate correctly
    * life cycle, element is ready
+   * @returns {void}
    */ready(){super.ready()}/**
    * Registers the element with AbsolutePositionStateManager
+   * @returns {void}
    */setPosition(){let root=this;root.__observe=!0;root.__manager.loadElement(root)}/**
    * Unregisters the element with AbsolutePositionStateManager
+   * @returns {void}
    */unsetPosition(){let root=this;root.__observe=!1;root.__manager.unloadElement(root)}/**
    * Updates  the element's position
+   * @returns {void}
    */updatePosition(){let root=this;if(!0===root.__observe){root.__manager.positionElement(root)}}/**
    * life cycle, element is removed from the DOM
+   * @returns {void}
    */disconnectedCallback(){this.unsetPosition();super.disconnectedCallback()}}window.customElements.define(AbsolutePositionBehavior.tag,AbsolutePositionBehavior);export{AbsolutePositionBehavior};

absolute-position-behavior.js

@@ -25,3 +25,3 @@ /**
         :host {
-          display: block;
+          display: inline-block;
         }
@@ -39,3 +39,3 @@
   static get properties() {
-    return {
+    let props = {
       /**
@@ -46,3 +46,3 @@ * Element is positioned from connected to disconnected?
       auto: {
-        type: "Boolean",
+        type: Boolean,
         value: false
@@ -54,3 +54,3 @@ },
       fitToVisibleBounds: {
-        type: "Boolean",
+        type: Boolean,
         value: false,
@@ -65,3 +65,3 @@ observer: "updatePosition"
       for: {
-        type: "String",
+        type: String,
         observer: "updatePosition",
@@ -75,3 +75,3 @@ reflectToAttribute: true
       offset: {
-        type: "Number",
+        type: Number,
         value: 0,
@@ -84,3 +84,3 @@ observer: "updatePosition"
       position: {
-        type: "String",
+        type: String,
         value: "bottom",
@@ -94,3 +94,3 @@ observer: "updatePosition",
       target: {
-        type: "Object",
+        type: Object,
         observer: "updatePosition"
@@ -102,5 +102,9 @@ },
       __positions: {
-        type: "Object"
+        type: Object
       }
     };
+    if (super.properties) {
+      props = Object.assign(props, super.properties);
+    }
+    return props;
   }
@@ -129,2 +133,3 @@
    * life cycle, element is ready
+   * @returns {void}
    */
@@ -136,2 +141,3 @@ ready() {
    * Registers the element with AbsolutePositionStateManager
+   * @returns {void}
    */
@@ -146,2 +152,3 @@ setPosition() {
    * Unregisters the element with AbsolutePositionStateManager
+   * @returns {void}
    */
@@ -156,2 +163,3 @@ unsetPosition() {
    * Updates  the element's position
+   * @returns {void}
    */
@@ -166,2 +174,3 @@ updatePosition() {
    * life cycle, element is removed from the DOM
+   * @returns {void}
    */
@@ -168,0 +177,0 @@ disconnectedCallback() {

absolute-position-behavior.umd.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@polymer/polymer/polymer-element.js"),require("@polymer/iron-resizable-behavior/iron-resizable-behavior.js")):"function"==typeof define&&define.amd?define(["exports","@polymer/polymer/polymer-element.js","@polymer/iron-resizable-behavior/iron-resizable-behavior.js"],t):t((e=e||self).AbsolutePositionBehavior={},e.polymerElement_js)}(this,function(e,t){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function i(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e}function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&a(e,t)}function s(e){return(s=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function a(e,t){return(a=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function l(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function u(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?l(e):t}function c(e,t,n){return(c="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,t,n){var o=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=s(e)););return e}(e,t);if(o){var i=Object.getOwnPropertyDescriptor(o,t);return i.get?i.get.call(n):i.value}})(e,t,n||e)}window.AbsolutePositionStateManager=window.AbsolutePositionStateManager||{},window.AbsolutePositionStateManager.requestAvailability=function(){return window.AbsolutePositionStateManager.instance||(window.AbsolutePositionStateManager.instance=document.createElement("absolute-position-state-manager"),document.body.appendChild(window.AbsolutePositionStateManager.instance)),window.AbsolutePositionStateManager.instance};var f=function(e){function o(){var e;n(this,o);l(e=u(this,s(o).call(this)));return window.AbsolutePositionStateManager.instance?e:(window.AbsolutePositionStateManager.instance=l(e),u(e,l(e)))}return r(o,t.PolymerElement),i(o,null,[{key:"tag",get:function(){return"absolute-position-state-manager"}},{key:"properties",get:function(){return{els:{type:Array,value:[]}}}}]),i(o,[{key:"connectedCallback",value:function(){c(s(o.prototype),"connectedCallback",this).call(this)}},{key:"loadElement",value:function(e){this.__on=void 0!==this.__on&&this.__on,this.els.push(e),this.positionElement(e),this.__on||this.addEventListeners(),this.__on=!0}},{key:"unloadElement",value:function(e){this.els.filter(function(e){return e==e}),this.__on=this.els>0,this.__on||this.removeEventListeners()}},{key:"addEventListeners",value:function(){var e=this;e.__timeout=!1,e.updateElements(),document.addEventListener("load",e.updateElements()),window.addEventListener("resize",function(){clearTimeout(e.__timeout),e.__timeout=setTimeout(e.updateElements(),250)}),e.__observer=new MutationObserver(function(t){e.checkMutations(t)}),e.__observer.observe(document,{attributes:!0,childList:!0,subtree:!0,characterData:!0})}},{key:"checkMutations",value:function(e){var t=this,n=!1;e.forEach(function(e){n||(n=n||!("attributes"===e.type&&"style"===e.attributeName&&t.els.includes(e.target)))}),n&&this.updateElements()}},{key:"findTarget",value:function(e){for(var t="#"+e.for,n=1===document.querySelectorAll(t).length?document.querySelector(t):null,o=e.target||n,i=e;void 0!==e.for&&null===o&&null!==i&&i!==document;)11===(i=i.parentNode).nodeType&&(i=i.host),o=i?i.querySelector(t):null;return o}},{key:"removeEventListeners",value:function(){var e=this;document.removeEventListener("load",e.updateElements()),window.removeEventListener("resize",function(){clearTimeout(e.__timeout),e.__timeout=setTimeout(e.updateElements(),250)}),e.__observer&&e.__observer.disconnect()}},{key:"updateElements",value:function(){var e=this;e.els.forEach(function(t){e.positionElement(t)})}},{key:"positionElement",value:function(e){var t=this.findTarget(e);if(t&&e.offsetParent){var n,o,i,r,s=e.offset,a=e.offsetParent.getBoundingClientRect(),l=t.getBoundingClientRect(),u=e.getBoundingClientRect(),c=(l.width-u.width)/2,f=(l.height-u.height)/2;switch(e.position){case"top":n=l.left+c,o=l.top-u.height-s;break;case"bottom":n=l.left+c,o=l.top+l.height+s;break;case"left":n=l.left-u.width-s,o=l.top+f;break;case"right":n=l.left+l.width+s,o=l.top+f}e.style.position="absolute",i=n+"px",r=o+"px",e.fitToVisibleBounds&&(n-s<a.left||u.width>a.width?i=a.left+"px":u.right>a.right&&(i=l.right-u.width+"px"),o-s<a.top||u.height>a.height?r=a.top+"px":u.bottom>a.bottom&&(i=l.bottom-u.height+"px")),e.style.left=i,e.style.top=r,e.__positions={self:u,parent:a,target:l}}}},{key:"disconnectedCallback",value:function(){this.removeEventListeners(),c(s(o.prototype),"disconnectedCallback",this).call(this)}}]),o}();function p(){var e,t,n=(e=["\n<style>:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n</style>\n<slot></slot>"],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return p=function(){return n},n}window.customElements.define(f.tag,f);var d=function(e){function o(){return n(this,o),u(this,s(o).apply(this,arguments))}return r(o,t.PolymerElement),i(o,[{key:"connectedCallback",value:function(){c(s(o.prototype),"connectedCallback",this).call(this);this.__observe=!1,this.__manager=window.AbsolutePositionStateManager.requestAvailability(),!1!==this.auto&&this.setPosition()}},{key:"ready",value:function(){c(s(o.prototype),"ready",this).call(this)}},{key:"setPosition",value:function(){this.__observe=!0,this.__manager.loadElement(this)}},{key:"unsetPosition",value:function(){this.__observe=!1,this.__manager.unloadElement(this)}},{key:"updatePosition",value:function(){!0===this.__observe&&this.__manager.positionElement(this)}},{key:"disconnectedCallback",value:function(){this.unsetPosition(),c(s(o.prototype),"disconnectedCallback",this).call(this)}}],[{key:"template",get:function(){return t.html(p())}},{key:"properties",get:function(){return{auto:{type:"Boolean",value:!1},fitToVisibleBounds:{type:"Boolean",value:!1,observer:"updatePosition"},for:{type:"String",observer:"updatePosition",reflectToAttribute:!0},offset:{type:"Number",value:0,observer:"updatePosition"},position:{type:"String",value:"bottom",observer:"updatePosition",reflectToAttribute:!0},target:{type:"Object",observer:"updatePosition"},__positions:{type:"Object"}}}},{key:"tag",get:function(){return"absolute-position-behavior"}}]),o}();window.customElements.define(d.tag,d),e.AbsolutePositionBehavior=d,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@polymer/polymer/polymer-element.js"),require("@polymer/iron-resizable-behavior/iron-resizable-behavior.js")):"function"==typeof define&&define.amd?define(["exports","@polymer/polymer/polymer-element.js","@polymer/iron-resizable-behavior/iron-resizable-behavior.js"],t):t((e=e||self).AbsolutePositionBehavior={},e.polymerElement_js)}(this,function(e,t){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function i(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e}function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&a(e,t)}function s(e){return(s=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function a(e,t){return(a=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function u(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function l(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?u(e):t}function c(e,t,n){return(c="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,t,n){var o=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=s(e)););return e}(e,t);if(o){var i=Object.getOwnPropertyDescriptor(o,t);return i.get?i.get.call(n):i.value}})(e,t,n||e)}window.AbsolutePositionStateManager=window.AbsolutePositionStateManager||{},window.AbsolutePositionStateManager.requestAvailability=function(){return window.AbsolutePositionStateManager.instance||(window.AbsolutePositionStateManager.instance=document.createElement("absolute-position-state-manager"),document.body.appendChild(window.AbsolutePositionStateManager.instance)),window.AbsolutePositionStateManager.instance};var p=function(e){function o(){var e;n(this,o);u(e=l(this,s(o).call(this)));return window.AbsolutePositionStateManager.instance?e:(window.AbsolutePositionStateManager.instance=u(e),l(e,u(e)))}return r(o,t.PolymerElement),i(o,null,[{key:"tag",get:function(){return"absolute-position-state-manager"}},{key:"properties",get:function(){return{els:{type:Array,value:[]}}}}]),i(o,[{key:"connectedCallback",value:function(){c(s(o.prototype),"connectedCallback",this).call(this)}},{key:"loadElement",value:function(e){this.__on=void 0!==this.__on&&this.__on,this.els.push(e),this.positionElement(e),this.__on||this.addEventListeners(),this.__on=!0}},{key:"unloadElement",value:function(e){this.els.filter(function(e){return e==e}),this.__on=this.els>0,this.__on||this.removeEventListeners()}},{key:"addEventListeners",value:function(){var e=this;e.__timeout=!1,e.updateElements(),document.addEventListener("load",e.updateElements()),window.addEventListener("resize",function(){clearTimeout(e.__timeout),e.__timeout=setTimeout(e.updateElements(),250)}),e.__observer=new MutationObserver(function(t){e.checkMutations(t)}),e.__observer.observe(document,{attributes:!0,childList:!0,subtree:!0,characterData:!0})}},{key:"checkMutations",value:function(e){var t=this,n=!1;e.forEach(function(e){n||(n=n||!("attributes"===e.type&&"style"===e.attributeName&&t.els.includes(e.target)))}),n&&this.updateElements()}},{key:"findTarget",value:function(e){for(var t="#"+e.for,n=1===document.querySelectorAll(t).length?document.querySelector(t):null,o=e.target||n,i=e;void 0!==e.for&&null===o&&null!==i&&i!==document;)11===(i=i.parentNode).nodeType&&(i=i.host),o=i?i.querySelector(t):null;return o}},{key:"removeEventListeners",value:function(){var e=this;document.removeEventListener("load",e.updateElements()),window.removeEventListener("resize",function(){clearTimeout(e.__timeout),e.__timeout=setTimeout(e.updateElements(),250)}),e.__observer&&e.__observer.disconnect()}},{key:"updateElements",value:function(){var e=this;e.els.forEach(function(t){e.positionElement(t)})}},{key:"positionElement",value:function(e){var t=this.findTarget(e);if(t&&e.offsetParent){var n=e.offset,o=e.offsetParent.getBoundingClientRect(),i=t.getBoundingClientRect(),r=e.getBoundingClientRect(),s=function(e){return"left"!==e&&"right"!==e},a=function(){var t=s(e.position)?"left":"top",n=s(e.position)?"right":"bottom",a=function(t){return s(e.position)?t.width:t.height},u=i[t]-a(r)/2+a(i)/2,l=o[t],c=o[n]-a(r);return e.fitToVisibleBounds?Math.max(l,Math.min(c,u))+"px":u+"px"},u=function(){return"top"===e.position?i.top-r.height-n+"px":"left"===e.position?i.left-r.width-n+"px":i[e.position]+n+"px"},l=function(e){var t=s(e)?r.height+n:r.width+n;return function(e){return"left"===e||"top"===e}(e)?i[e]-o[e]>t:o[e]-i[e]>t},c=!1!==e.fitToVisibleBounds&&!l(e.position),p={top:["bottom","left","right"],left:["right","top","bottom"],bottom:["top","right","left"],right:["left","bottom","top"]};c&&l(p[e.position][0])?e.position=p[e.position][0]:c&&l(p[e.position][1])?e.position=p[e.position][1]:c&&l(p[e.position][2])?e.position=p[e.position][2]:(e.style.position="absolute",e.style.top=s(e.position)?u():a(),e.style.left=s(e.position)?a():u(),e.__positions={self:r,parent:o,target:i})}}},{key:"disconnectedCallback",value:function(){this.removeEventListeners(),c(s(o.prototype),"disconnectedCallback",this).call(this)}}]),o}();function f(){var e,t,n=(e=["\n<style>:host {\n  display: inline-block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n</style>\n<slot></slot>"],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return f=function(){return n},n}window.customElements.define(p.tag,p);var d=function(e){function o(){return n(this,o),l(this,s(o).apply(this,arguments))}return r(o,t.PolymerElement),i(o,[{key:"connectedCallback",value:function(){c(s(o.prototype),"connectedCallback",this).call(this);this.__observe=!1,this.__manager=window.AbsolutePositionStateManager.requestAvailability(),!1!==this.auto&&this.setPosition()}},{key:"ready",value:function(){c(s(o.prototype),"ready",this).call(this)}},{key:"setPosition",value:function(){this.__observe=!0,this.__manager.loadElement(this)}},{key:"unsetPosition",value:function(){this.__observe=!1,this.__manager.unloadElement(this)}},{key:"updatePosition",value:function(){!0===this.__observe&&this.__manager.positionElement(this)}},{key:"disconnectedCallback",value:function(){this.unsetPosition(),c(s(o.prototype),"disconnectedCallback",this).call(this)}}],[{key:"template",get:function(){return t.html(f())}},{key:"properties",get:function(){var e={auto:{type:Boolean,value:!1},fitToVisibleBounds:{type:Boolean,value:!1,observer:"updatePosition"},for:{type:String,observer:"updatePosition",reflectToAttribute:!0},offset:{type:Number,value:0,observer:"updatePosition"},position:{type:String,value:"bottom",observer:"updatePosition",reflectToAttribute:!0},target:{type:Object,observer:"updatePosition"},__positions:{type:Object}};return c(s(o),"properties",this)&&(e=Object.assign(e,c(s(o),"properties",this))),e}},{key:"tag",get:function(){return"absolute-position-behavior"}}]),o}();window.customElements.define(d.tag,d),e.AbsolutePositionBehavior=d,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=absolute-position-behavior.umd.js.map

gulpfile.js

@@ -36,6 +36,8 @@ const gulp = require("gulp");
           }
-          let props = "{}";
-          props = fs.readFileSync(
+          let rawprops = "{}";
+          rawprops = fs.readFileSync(
             path.join("./", packageJson.wcfactory.files.properties)
           );
+          let props = `${rawprops}`;
+          props = props.replace(/\"type\": \"(\w+)\"/g, '"type": $1');
           let cssResult = "<style>";
@@ -42,0 +44,0 @@ if (

lib/absolute-position-state-manager.js

@@ -222,62 +222,85 @@ /**
       elRect = el.getBoundingClientRect(),
-      centerOffset = (targetRect.width - elRect.width) / 2,
-      middleOffset = (targetRect.height - elRect.height) / 2,
-      elLeft,
-      elTop,
-      styleLeft,
-      styleRight,
-      styleTop,
-      styleBottom;
-    switch (el.position) {
-      case "top":
-        elLeft = targetRect.left + centerOffset;
-        elTop = targetRect.top - elRect.height - offset;
-        break;
-      case "bottom":
-        elLeft = targetRect.left + centerOffset;
-        elTop = targetRect.top + targetRect.height + offset;
-        break;
-      case "left":
-        elLeft = targetRect.left - elRect.width - offset;
-        elTop = targetRect.top + middleOffset;
-        break;
-      case "right":
-        elLeft = targetRect.left + targetRect.width + offset;
-        elTop = targetRect.top + middleOffset;
-        break;
+      /**
+       * place the element before the vertically?
+       * @param {string} position as in "top", "left", "right", or "bottom"
+       */
+      vertical = position => {
+        return position !== "left" && position !== "right";
+      },
+      /**
+       * place the element before the target?
+       */
+      before = position => {
+        return position === "left" || position === "top";
+      },
+      /**
+       * fits the element within the parent's boundaries;
+       * if element is larget than the parent,
+       * it will be aligned where parent begins
+       */
+      fitToBounds = () => {
+        let pos1 = vertical(el.position) ? "left" : "top",
+          pos2 = vertical(el.position) ? "right" : "bottom",
+          getRect = rect => {
+            return vertical(el.position) ? rect.width : rect.height;
+          },
+          coord =
+            targetRect[pos1] - getRect(elRect) / 2 + getRect(targetRect) / 2, //works for left
+          min = parentRect[pos1],
+          max = parentRect[pos2] - getRect(elRect);
+        return el.fitToVisibleBounds
+          ? Math.max(min, Math.min(max, coord)) + "px" //Math.max(min, Math.min(max, coord)) + "px"
+          : coord + "px";
+      },
+      /**
+       * adds or subtracts the offset from the target based on a given postion
+       */
+      getCoord = () => {
+        return el.position === "top"
+          ? targetRect.top - elRect.height - offset + "px"
+          : el.position === "left"
+          ? targetRect.left - elRect.width - offset + "px"
+          : targetRect[el.position] + offset + "px";
+      },
+      /**
+       * determines if there is room for the element between
+       * the parent and target in a given position;
+       * if no room in any position it will return the original position
+       */
+      isFit = position => {
+        let size = vertical(position)
+          ? elRect.height + offset
+          : elRect.width + offset;
+        return before(position)
+          ? targetRect[position] - parentRect[position] > size
+          : parentRect[position] - targetRect[position] > size;
+      };
+    let flip = el.fitToVisibleBounds !== false && !isFit(el.position),
+      flipData = {
+        top: ["bottom", "left", "right"],
+        left: ["right", "top", "bottom"],
+        bottom: ["top", "right", "left"],
+        right: ["left", "bottom", "top"]
+      };
+    /*
+     * fits the element according to specified postion,
+     * or finds an alternative position that fits
+     */
+    if (flip && isFit(flipData[el.position][0])) {
+      el.position = flipData[el.position][0];
+    } else if (flip && isFit(flipData[el.position][1])) {
+      el.position = flipData[el.position][1];
+    } else if (flip && isFit(flipData[el.position][2])) {
+      el.position = flipData[el.position][2];
+    } else {
+      el.style.position = "absolute";
+      el.style.top = vertical(el.position) ? getCoord() : fitToBounds();
+      el.style.left = vertical(el.position) ? fitToBounds() : getCoord();
+      //provide positions for el and target (in case furthor positioning adjustments are needed)
+      el.__positions = {
+        self: elRect,
+        parent: parentRect,
+        target: targetRect
+      };
     }
-    el.style.position = "absolute";
-    // TODO(noms): This should use IronFitBehavior if possible.
-    styleLeft = elLeft + "px";
-    styleTop = elTop + "px";
-    if (el.fitToVisibleBounds) {
-      /// if the left side is off-screen
-      if (
-        elLeft - offset < parentRect.left ||
-        elRect.width > parentRect.width
-      ) {
-        styleLeft = parentRect.left + "px";
-        /// if the right side is off-screen
-      } else if (elRect.right > parentRect.right) {
-        styleLeft = targetRect.right - elRect.width + "px";
-      }
-      //if the top is off screen
-      if (
-        elTop - offset < parentRect.top ||
-        elRect.height > parentRect.height
-      ) {
-        styleTop = parentRect.top + "px";
-        // if the bottom is off screen
-      } else if (elRect.bottom > parentRect.bottom) {
-        styleLeft = targetRect.bottom - elRect.height + "px";
-      }
-    }
-    el.style.left = styleLeft;
-    el.style.top = styleTop;
-    //provide positions for el and target (in case furthor positioning adjustments are needed)
-    el.__positions = {
-      self: elRect,
-      parent: parentRect,
-      target: targetRect
-    };
   }
@@ -284,0 +307,0 @@

package.json

@@ -19,3 +19,3 @@ {
   },
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Abstracting the positioning behavior from paper-tooltip to be resusable in other elements",
@@ -47,3 +47,3 @@ "repository": {
   "devDependencies": {
-    "@lrnwebcomponents/deduping-fix": "^2.0.9",
+    "@lrnwebcomponents/deduping-fix": "^2.1.1",
     "@polymer/iron-component-page": "github:PolymerElements/iron-component-page",
@@ -55,3 +55,3 @@ "@polymer/iron-demo-helpers": "^3.1.0",
     "gulp-sourcemaps": "2.6.5",
-    "lodash": "4.17.11",
+    "lodash": "4.17.13",
     "polymer-cli": "1.9.9",
@@ -69,3 +69,3 @@ "wct-browser-legacy": "1.0.2",
   ],
-  "gitHead": "38a0c3ad00e8447837037bde2dc1172273a3a311"
+  "gitHead": "377805ee041d6205232182b01f8e05a177ef3bf7"
 }

src/absolute-position-behavior.js

@@ -43,2 +43,3 @@ /**
    * life cycle, element is ready
+   * @returns {void}
    */
@@ -50,2 +51,3 @@ ready() {
    * Registers the element with AbsolutePositionStateManager
+   * @returns {void}
    */
@@ -60,2 +62,3 @@ setPosition() {
    * Unregisters the element with AbsolutePositionStateManager
+   * @returns {void}
    */
@@ -70,2 +73,3 @@ unsetPosition() {
    * Updates  the element's position
+   * @returns {void}
    */
@@ -80,2 +84,3 @@ updatePosition() {
    * life cycle, element is removed from the DOM
+   * @returns {void}
    */
@@ -82,0 +87,0 @@ disconnectedCallback() {

No alert changes

Worsened metrics

Total package byte prevSize

353949

decreased by-0.44%

Lines of code

9066

decreased by-2.02%

No dependency changes