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

Comparing version 3.0.6 to 3.0.7

absolute-position-behavior.js

@@ -5,32 +5,34 @@ /**
  */
-import { LitElement, html, css } from "lit-element/lit-element.js";
+import { LitElement, html, css } from "lit";
 import "./lib/absolute-position-state-manager.js";
-
 /**
- * `absolute-position-behavior`
- * abstracts absolute positioning behavior to be resusable in other elements
- * @demo ./demo/index.html
- * @element absolute-position-behavior
+ * @customElement
+ * @class
  */
-class AbsolutePositionBehavior extends LitElement {
+const AbsolutePositionBehaviorClass = function (SuperClass) {
+  return class extends SuperClass {
+    
   //styles function
   static get styles() {
-    return [
+    return  [
+      
       css`
-        :host {
-          display: inline-block;
-          z-index: 99999999999;
-          position: absolute;
-        }
+:host {
+  display: inline-block;
+  z-index: 99999999999;
+  position: absolute;
+}
 
-        :host([hidden]) {
-          display: none;
-        }
-      `,
+:host([hidden]) {
+  display: none;
+}
+      `
     ];
   }
 
-  // render function
+// render function
   render() {
-    return html` <slot></slot>`;
+    return html`
+
+<slot></slot>`;
   }
@@ -41,147 +43,173 @@
     return {
-      ...super.properties,
-
-      /**
-       * 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",
-      },
-      /**
-       * 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,
-      },
-      /**
-       * The actual target element
-       */
-      target: {
-        type: Object,
-      },
-      /**
-       * The element's style
-       */
-      __positions: {
-        type: Object,
-      },
-    };
-  }
-
+  
+  ...super.properties,
+  
   /**
-   * Store tag name to make it easier to obtain directly.
-   * @notice function name must be here for tooling to operate correctly
+   * Element is positioned from connected to disconnected?
+   * Otherwise setPosition and unsetPosition must be called manually.
    */
-  static get tag() {
-    return "absolute-position-behavior";
-  }
-
-  constructor() {
-    super();
-    this.auto = false;
-    this.fitToVisibleBounds = false;
-    this.for = null;
-    this.offset = 0;
-    this.position = "bottom";
-    this.target = null;
-    this.__positions = {};
-    this.__observe = false;
-    this.__manager = window.AbsolutePositionStateManager.requestAvailability();
-  }
-
-  updated(changedProperties) {
-    changedProperties.forEach((oldValue, propName) => {
-      if (propName === "auto" && this.auto) this.setPosition();
-      if (propName === "auto" && !this.auto) this.unsetPosition();
-      if (propName === "fitToVisibleBounds") this.updatePosition();
-      if (propName === "for") this.updatePosition();
-      if (propName === "offset") this.updatePosition();
-      if (propName === "position") this.updatePosition();
-      if (propName === "positionAlign") this.updatePosition();
-      if (propName === "target") this.updatePosition();
-      if (propName === "hidden") this.updatePosition();
-    });
-  }
-
+  "auto": {
+    "type": Boolean,
+    "attribute": "auto"
+  },
   /**
-   * Registers element with AbsolutePositionStateManager
-   * @returns {void}
+   * If true, no parts of the tooltip will ever be shown offscreen.
    */
-  setPosition() {
-    this.__observe = true;
-    this.__manager.loadElement(this);
-  }
-
+  "fitToVisibleBounds": {
+    "type": Boolean,
+    "attribute": "fit-to-visible-bounds"
+  },
   /**
-   * Unregisters element with AbsolutePositionStateManager
-   * @returns {void}
+   * If true, no parts of the tooltip will ever be shown offscreen.
    */
-  unsetPosition() {
-    this.__observe = false;
-    this.__manager.unloadElement(this);
-  }
-
+  "hidden": {
+    "type": Boolean,
+    "reflect": true,
+    "attribute": "hidden"
+  },
   /**
-   * Updates  element's position
-   * @returns {void}
+   * 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.
    */
-  updatePosition() {
-    if (this.__observe === true) {
-      this.__manager.positionElement(this);
-    }
-  }
+  "for": {
+    "type": String,
+    "attribute": "for",
+    "reflect": true
+  },
   /**
-   * life cycle, element is removed from DOM
-   * @returns {void}
+   * The spacing between the top of the tooltip and the element it is
+   * anchored to.
    */
-  disconnectedCallback() {
-    this.unsetPosition();
-    super.disconnectedCallback();
+  "offset": {
+    "type": Number,
+    "attribute": "offset"
+  },
+  /**
+   * 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
   }
 }
+;
+  }
+
+    /**
+     * Store tag name to make it easier to obtain directly.
+     * @notice function name must be here for tooling to operate correctly
+     */
+    static get tag() {
+      return "absolute-position-behavior";
+    }
+
+    constructor() {
+      super();
+      this.auto = false;
+      this.fitToVisibleBounds = false;
+      this.for = null;
+      this.offset = 0;
+      this.position = "bottom";
+      this.target = null;
+      this.hidden = false;
+      this.__positions = {};
+      this.__observe = false;
+    }
+
+    updated(changedProperties) {
+      if (this.shadowRoot && !this.hidden) {
+        changedProperties.forEach((oldValue, propName) => {
+          if (propName === "auto" && this.auto) this.setPosition();
+          if (propName === "auto" && !this.auto) this.unsetPosition();
+          if (propName === "fitToVisibleBounds") this.updatePosition();
+          if (propName === "for") this.updatePosition();
+          if (propName === "offset") this.updatePosition();
+          if (propName === "position") this.updatePosition();
+          if (propName === "positionAlign") this.updatePosition();
+          if (propName === "target") this.updatePosition();
+          if (propName === "hidden") this.updatePosition();
+        });
+      }
+    }
+
+    /**
+     * Registers element with AbsolutePositionStateManager
+     * @returns {void}
+     */
+    setPosition() {
+      this.__observe = true;
+      window.AbsolutePositionStateManager.requestAvailability().loadElement(
+        this
+      );
+    }
+
+    /**
+     * Unregisters element with AbsolutePositionStateManager
+     * @returns {void}
+     */
+    unsetPosition() {
+      this.__observe = false;
+      window.AbsolutePositionStateManager.requestAvailability().unloadElement(
+        this
+      );
+    }
+
+    /**
+     * Updates  element's position
+     * @returns {void}
+     */
+    updatePosition() {
+      if (this.__observe === true) {
+        window.AbsolutePositionStateManager.requestAvailability().positionElement(
+          this
+        );
+      }
+    }
+    /**
+     * life cycle, element is removed from DOM
+     * @returns {void}
+     */
+    disconnectedCallback() {
+      this.unsetPosition();
+      super.disconnectedCallback();
+    }
+  };
+};
+
+/**
+ * `absolute-position-behavior`
+ * abstracts absolute positioning behavior to be resusable in other elements
+ * @demo ./demo/index.html
+ * @element absolute-position-behavior
+ */
+class AbsolutePositionBehavior extends AbsolutePositionBehaviorClass(
+  LitElement
+) {}
 window.customElements.define(
@@ -191,2 +219,2 @@ AbsolutePositionBehavior.tag,
 );
-export { 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-element/lit-element.js")):"function"==typeof define&&define.amd?define(["exports","lit-element/lit-element.js"],e):e((t=t||self).AbsolutePositionBehavior={},t.litElement_js)}(this,function(t,e){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(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 i(t,e,n){return e&&o(t.prototype,e),n&&o(t,n),t}function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function s(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 u(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?s(Object(n),!0).forEach(function(e){r(t,e,n[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):s(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})}return 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}}),e&&c(t,e)}function l(t){return(l=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function c(t,e){return(c=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function f(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}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 Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}();return function(){var n,o=l(t);if(e){var i=l(this).constructor;n=Reflect.construct(o,arguments,i)}else n=o.apply(this,arguments);return f(this,n)}}function d(t,e,n){return(d="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,e,n){var o=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=l(t)););return t}(t,e);if(o){var i=Object.getOwnPropertyDescriptor(o,e);return i.get?i.get.call(n):i.value}})(t,e,n||t)}function h(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=function(t){a(r,e.LitElement);var o=p(r);function r(){var t;return n(this,r),(t=o.call(this)).elements=[],t.__timeout=!1,t.__observer=new MutationObserver(function(e){return t.checkMutations(e)}),t}return i(r,null,[{key:"tag",get:function(){return"absolute-position-state-manager"}},{key:"properties",get:function(){return{elements:{type:Array},__observer:{type:Object},__timeout:{type:Object}}}}]),i(r,[{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.push(t),t.style.top=0,t.style.left=0,this.positionElement(t)}},{key:"unloadElement",value:function(t){this.elements.filter(function(e){return e===t}),this.elements.length<1&&this.removeEventListeners()}},{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.updateElements()}},{key:"findTarget",value:function(t){for(var e="#"+t.for,n=t.target,o=t;void 0!==t.for&&null===n&&null!==o&&null!==o.parentNode&&o!==document;)11===(o=o.parentNode).nodeType&&(o=o.host),n=o?o.querySelector(e):null;return n}},{key:"removeEventListeners",value:function(){this.__observer&&this.__observer.disconnect&&this.__observer.disconnect(),document.removeEventListener("load",this.updateElements),window.removeEventListener("resize",this._handleResize)}},{key:"updateElements",value:function(){var t=this;this.elements.forEach(function(e){return t.positionElement(e)})}},{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");var e=this.findTarget(t),n=t.offsetParent;if(e&&n){var o=parseFloat(t.offset),i=document.body.getBoundingClientRect(),r=n.getBoundingClientRect(),s=e.getBoundingClientRect(),u=t.getBoundingClientRect(),a=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.position;return"left"!==e&&"right"!==e},l=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:a(t.position),n=function(t){return parseFloat(t.replace("px",""))},o=e?n(t.style.left)-u.left:n(t.style.top)-u.top,r=e?"left":"top",l=function(t){return e?t.width:t.height},c=o+l(i)-l(u),f=o;return"end"===t.positionAlign?f+=s[r]-l(u)+l(s):"start"===t.positionAlign?f+=s[r]:f+=s[r]-l(u)/2+l(s)/2,t.fitToVisibleBounds?Math.max(o,Math.min(c,f))+"px":f+"px"},c=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.position,n=function(t){return parseFloat(t.replace("px",""))},i=a(e)?n(t.style.top)-u.top:n(t.style.left)-u.left;return"top"===e?s.top+i-u.height-o+"px":"left"===e?s.left+i-u.width-o+"px":s[e]+i+o+"px"},f=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.position,n=function(t){return a(e)?u.height+o:u.width+o};return function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.position;return"left"===e||"top"===e}(e)?s[e]-i[e]>n:i[e]-s[e]>n},p=!1!==t.fitToVisibleBounds&&!f(t.position),d={top:["bottom","left","right"],left:["right","top","bottom"],bottom:["top","right","left"],right:["left","bottom","top"]};t.style.position="absolute",p&&f(d[t.position][0])?t.position=d[t.position][0]:p&&f(d[t.position][1])?t.position=d[t.position][1]:p&&f(d[t.position][2])?t.position=d[t.position][2]:(t.style.top=a(t.position)?c():l(),t.style.left=a(t.position)?l():c(),t.__positions={self:u,parent:r,target:s})}}},{key:"disconnectedCallback",value:function(){this.removeEventListeners(),d(l(r.prototype),"disconnectedCallback",this).call(this)}}]),r}();function y(){var t=h(["\n:host {\n  display: inline-block;\n  z-index: 99999999999;\n  position: absolute;\n}\n\n:host([hidden]) {\n  display: none;\n}\n      "]);return y=function(){return t},t}function v(){var t=h(["\n\n<slot></slot>"]);return v=function(){return t},t}window.customElements.define(b.tag,b);var g=function(t){a(r,e.LitElement);var o=p(r);function r(){var t;return n(this,r),(t=o.call(this)).auto=!1,t.fitToVisibleBounds=!1,t.for=null,t.offset=0,t.position="bottom",t.target=null,t.__positions={},t.__observe=!1,t.__manager=window.AbsolutePositionStateManager.requestAvailability(),t}return i(r,[{key:"render",value:function(){return e.html(v())}}],[{key:"styles",get:function(){return[e.css(y())]}},{key:"properties",get:function(){return u(u({},d(l(r),"properties",this)),{},{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"},position:{type:String,attribute:"position",reflect:!0},positionAlign:{type:String,attribute:"position-align",reflect:!0},target:{type:Object},__positions:{type:Object}})}},{key:"tag",get:function(){return"absolute-position-behavior"}}]),i(r,[{key:"updated",value:function(t){var e=this;t.forEach(function(t,n){"auto"===n&&e.auto&&e.setPosition(),"auto"!==n||e.auto||e.unsetPosition(),"fitToVisibleBounds"===n&&e.updatePosition(),"for"===n&&e.updatePosition(),"offset"===n&&e.updatePosition(),"position"===n&&e.updatePosition(),"positionAlign"===n&&e.updatePosition(),"target"===n&&e.updatePosition(),"hidden"===n&&e.updatePosition()})}},{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(),d(l(r.prototype),"disconnectedCallback",this).call(this)}}]),r}();window.customElements.define(g.tag,g),t.AbsolutePositionBehavior=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){u(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),t}function u(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}}),e&&c(t,e)}function l(t){return(l=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function c(t,e){return(c=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function f(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}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=l(t);if(e){var i=l(this).constructor;n=Reflect.construct(o,arguments,i)}else n=o.apply(this,arguments);return f(this,n)}}function d(t,e,n){return(d="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,e,n){var o=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=l(t)););return t}(t,e);if(o){var i=Object.getOwnPropertyDescriptor(o,e);return i.get?i.get.call(n):i.value}})(t,e,n||t)}function h(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,y,v=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.push(t),t.style.top=0,t.style.left=0,this.positionElement(t)}},{key:"unloadElement",value:function(t){this.elements.filter((function(e){return e===t})),this.elements.length<1&&this.removeEventListeners()}},{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.updateElements()}},{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)}},{key:"updateElements",value:function(){var t=this;this.elements.forEach((function(e){return t.positionElement(e)}))}},{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");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=parseFloat(t.offset),r=document.body.getBoundingClientRect(),s=n.getBoundingClientRect(),u=t.getBoundingClientRect(),a=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.position;return"left"!==e&&"right"!==e},l=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.position;return"left"===e||"top"===e},c=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:a(t.position),n=function(t){return parseFloat(t.replace("px",""))},i=e?n(t.style.left)-u.left:n(t.style.top)-u.top,s=e?"left":"top",l=function(t){return e?t.width:t.height},c=i+l(r)-l(u),f=i;return"end"===t.positionAlign?f+=o[s]-l(u)+l(o):"start"===t.positionAlign?f+=o[s]:f+=o[s]-l(u)/2+l(o)/2,t.fitToVisibleBounds?Math.max(i,Math.min(c,f))+"px":f+"px"},f=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.position,n=function(t){return parseFloat(t.replace("px",""))},r=a(e)?n(t.style.top)-u.top:n(t.style.left)-u.left,s="visible"==window.getComputedStyle(t,null).overflowY?Math.max(u.height,t.scrollHeight):u.height,l="visible"==window.getComputedStyle(t,null).overflowX?Math.max(u.width,t.scrollWidth):u.width;return"top"===e?o.top+r-s-i+"px":"left"===e?o.left+r-l-i+"px":o[e]+r+i+"px"},p=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.position,n=function(t){return a(e)?u.height+i:u.width+i};return l(e)?o[e]-r[e]>n:r[e]-o[e]>n},d=!1!==t.fitToVisibleBounds&&!p(t.position),h={top:["bottom","left","right"],left:["right","top","bottom"],bottom:["top","right","left"],right:["left","bottom","top"]};t.style.position="absolute",d&&p(h[t.position][0])?t.position=h[t.position][0]:d&&p(h[t.position][1])?t.position=h[t.position][1]:d&&p(h[t.position][2])?t.position=h[t.position][2]:(t.style.top=a(t.position)?f():c(),t.style.left=a(t.position)?c():f(),t.__positions={self:u,parent:s,target:o})}}},{key:"disconnectedCallback",value:function(){this.removeEventListeners(),d(l(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}}}}]),n}(e.LitElement);window.customElements.define(v.tag,v);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.__positions={},t.__observe=!1,t.__manager=window.AbsolutePositionStateManager.requestAvailability(),t}return s(r,[{key:"render",value:function(){return e.html(b||(b=h(["\n\n<slot></slot>"])))}},{key:"updated",value:function(t){var e=this;t.forEach((function(t,n){"auto"===n&&e.auto&&e.setPosition(),"auto"!==n||e.auto||e.unsetPosition(),"fitToVisibleBounds"===n&&e.updatePosition(),"for"===n&&e.updatePosition(),"offset"===n&&e.updatePosition(),"position"===n&&e.updatePosition(),"justify"===n&&e.updatePosition(),"positionAlign"===n&&e.updatePosition(),"target"===n&&e.updatePosition(),"hidden"===n&&e.updatePosition()}))}},{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(),d(l(r.prototype),"disconnectedCallback",this).call(this)}}],[{key:"styles",get:function(){return[e.css(y||(y=h(["\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(l(r),"properties",this)),{},{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"},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)},m=function(t){a(n,t);var e=p(n);function n(){return i(this,n),e.apply(this,arguments)}return n}(g(e.LitElement));window.customElements.define(m.tag,m),t.AbsolutePositionBehavior=m,t.AbsolutePositionBehaviorClass=g,Object.defineProperty(t,"__esModule",{value:!0})}));

analysis.json

 {
   "schema_version": "1.0.0",
+  "elements": [
+    {
+      "description": "",
+      "summary": "",
+      "path": "absolute-position-behavior.js",
+      "properties": [],
+      "methods": [],
+      "staticMethods": [],
+      "demos": [],
+      "metadata": {},
+      "sourceRange": {
+        "start": {
+          "line": 10,
+          "column": 38
+        },
+        "end": {
+          "line": 201,
+          "column": 1
+        }
+      },
+      "privacy": "public",
+      "superclass": "HTMLElement",
+      "name": "AbsolutePositionBehaviorClass",
+      "attributes": [],
+      "events": [],
+      "styling": {
+        "cssVariables": [],
+        "selectors": []
+      },
+      "slots": []
+    }
+  ],
   "classes": [
@@ -112,3 +144,3 @@ {
             "end": {
-              "line": 168,
+              "line": 169,
               "column": 3
@@ -134,7 +166,7 @@ }
             "start": {
-              "line": 174,
+              "line": 175,
               "column": 2
             },
             "end": {
-              "line": 179,
+              "line": 180,
               "column": 3
@@ -155,7 +187,7 @@ }
             "start": {
-              "line": 185,
+              "line": 186,
               "column": 2
             },
             "end": {
-              "line": 187,
+              "line": 188,
               "column": 3
@@ -176,7 +208,7 @@ }
             "start": {
-              "line": 189,
+              "line": 190,
               "column": 2
             },
             "end": {
-              "line": 199,
+              "line": 200,
               "column": 3
@@ -198,7 +230,7 @@ }
             "start": {
-              "line": 206,
+              "line": 207,
               "column": 2
             },
             "end": {
-              "line": 294,
+              "line": 304,
               "column": 3
@@ -223,7 +255,7 @@ }
             "start": {
-              "line": 299,
+              "line": 309,
               "column": 2
             },
             "end": {
-              "line": 302,
+              "line": 312,
               "column": 3
@@ -248,3 +280,3 @@ }
         "end": {
-          "line": 303,
+          "line": 313,
           "column": 1
@@ -258,3 +290,3 @@ }
     {
-      "description": "`absolute-position-behavior`\nabstracts absolute positioning behavior to be resusable in other elements",
+      "description": "",
       "summary": "",
@@ -270,7 +302,7 @@ "path": "absolute-position-behavior.js",
             "start": {
-              "line": 34,
+              "line": 32,
               "column": 2
             },
             "end": {
-              "line": 38,
+              "line": 36,
               "column": 3
@@ -288,8 +320,8 @@ }
             "start": {
-              "line": 140,
-              "column": 2
+              "line": 143,
+              "column": 4
             },
             "end": {
-              "line": 152,
-              "column": 3
+              "line": 157,
+              "column": 5
             }
@@ -313,8 +345,8 @@ },
             "start": {
-              "line": 158,
-              "column": 2
+              "line": 163,
+              "column": 4
             },
             "end": {
-              "line": 161,
-              "column": 3
+              "line": 168,
+              "column": 5
             }
@@ -334,8 +366,8 @@ },
             "start": {
-              "line": 167,
-              "column": 2
+              "line": 174,
+              "column": 4
             },
             "end": {
-              "line": 170,
-              "column": 3
+              "line": 179,
+              "column": 5
             }
@@ -355,8 +387,8 @@ },
             "start": {
-              "line": 176,
-              "column": 2
+              "line": 185,
+              "column": 4
             },
             "end": {
-              "line": 180,
-              "column": 3
+              "line": 191,
+              "column": 5
             }
@@ -376,8 +408,8 @@ },
             "start": {
-              "line": 185,
-              "column": 2
+              "line": 196,
+              "column": 4
             },
             "end": {
-              "line": 188,
-              "column": 3
+              "line": 199,
+              "column": 5
             }
@@ -393,2 +425,24 @@ },
       "staticMethods": [],
+      "demos": [],
+      "metadata": {},
+      "sourceRange": {
+        "start": {
+          "line": 11,
+          "column": 9
+        },
+        "end": {
+          "line": 200,
+          "column": 3
+        }
+      },
+      "privacy": "public",
+      "superclass": "SuperClass"
+    },
+    {
+      "description": "`absolute-position-behavior`\nabstracts absolute positioning behavior to be resusable in other elements",
+      "summary": "",
+      "path": "absolute-position-behavior.js",
+      "properties": [],
+      "methods": [],
+      "staticMethods": [],
       "demos": [
@@ -407,12 +461,11 @@ {
         "start": {
-          "line": 13,
+          "line": 209,
           "column": 0
         },
         "end": {
-          "line": 189,
-          "column": 1
+          "line": 211,
+          "column": 4
         }
       },
       "privacy": "public",
-      "superclass": "LitElement",
       "name": "AbsolutePositionBehavior"
@@ -419,0 +472,0 @@ }

lib/absolute-position-state-manager.js

@@ -5,3 +5,3 @@ /**
  */
-import { LitElement } from "lit-element/lit-element.js";
+import { LitElement } from "lit";
 
@@ -159,11 +159,12 @@ // register globally so we can make sure there is only one
     while (
-      el.for !== undefined &&
-      target === null &&
-      ancestor !== null &&
-      ancestor.parentNode !== null &&
+      !!el.for &&
+      !target &&
+      !!ancestor &&
+      !!ancestor.parentNode &&
       ancestor !== document
     ) {
       ancestor = ancestor.parentNode;
+      target = ancestor ? ancestor.querySelector(selector) : undefined;
       if (ancestor.nodeType === 11) ancestor = ancestor.host;
-      target = ancestor ? ancestor.querySelector(selector) : null;
+      target = !target && ancestor ? ancestor.querySelector(selector) : target;
     }
@@ -214,8 +215,9 @@ return target;
     let target = this.findTarget(el),
-      parent = el.offsetParent;
+      parent = el.offsetParent,
+      t = !target || target.getBoundingClientRect();
     if (!target || !parent) return;
+    if (el.justify) el.style.width = `${t.width}px`;
     let offset = parseFloat(el.offset),
       w = document.body.getBoundingClientRect(),
       p = parent.getBoundingClientRect(),
-      t = target.getBoundingClientRect(),
       e = el.getBoundingClientRect(),
@@ -255,7 +257,15 @@ //place element before vertically?
             ? pxToNum(el.style.top) - e.top
-            : pxToNum(el.style.left) - e.left;
+            : pxToNum(el.style.left) - e.left,
+          eh =
+            window.getComputedStyle(el, null).overflowY == "visible"
+              ? Math.max(e.height, el.scrollHeight)
+              : e.height,
+          ew =
+            window.getComputedStyle(el, null).overflowX == "visible"
+              ? Math.max(e.width, el.scrollWidth)
+              : e.width;
         return pos === "top"
-          ? t.top + adjust - e.height - offset + "px"
+          ? t.top + adjust - eh - offset + "px"
           : pos === "left"
-          ? t.left + adjust - e.width - offset + "px"
+          ? t.left + adjust - ew - offset + "px"
           : t[pos] + adjust + offset + "px";
@@ -262,0 +272,0 @@ },

package.json

@@ -20,3 +20,3 @@ {
   },
-  "version": "3.0.6",
+  "version": "3.0.7",
   "description": "Abstracting the positioning behavior from paper-tooltip to be resusable in other elements",
@@ -32,9 +32,11 @@ "repository": {
   "scripts": {
-    "test": "wct --configFile ../../wct.conf.json node_modules/@lrnwebcomponents/absolute-position-behavior/test/",
     "start": "yarn run dev",
-    "build": "gulp --gulpfile=gulpfile.cjs && rollup -c && prettier --ignore-path ../../.prettierignore --write \"**/*.{js,json}\" && wca analyze \"**/*.js\" --format vscode --outFile vscode-html-custom-data.json",
+    "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 vscode-html-custom-data.json",
     "dev": "concurrently --kill-others \"yarn run watch\" \"yarn run serve\"",
     "watch": "gulp dev --gulpfile=gulpfile.cjs",
     "serve": "es-dev-server -c ../../es-dev-server.config.js",
-    "lighthouse": "gulp lighthouse --gulpfile=gulpfile.cjs"
+    "lighthouse": "gulp lighthouse --gulpfile=gulpfile.cjs",
+    "test": "web-test-runner \"test/**/*.test.js\" --node-resolve",
+    "test:watch": "web-test-runner \"test/**/*.test.js\" --node-resolve --watch",
+    "test:browsers": "web-test-runner \"test/**/*.test.js\" --node-resolve --playwright --browsers chromium firefox webkit"
   },
@@ -46,3 +48,3 @@ "author": {
   "dependencies": {
-    "lit-element": "2.4.0"
+    "lit": "2.0.0-rc.2"
   },
@@ -56,6 +58,11 @@ "devDependencies": {
     "gulp-babel": "8.0.0",
-    "lodash": "4.17.19",
+    "lodash": "^4.17.21",
     "polymer-cli": "1.9.11",
     "wct-browser-legacy": "1.0.2",
-    "web-animations-js": "2.3.2"
+    "web-animations-js": "2.3.2",
+    "@open-wc/testing": "2.5.33",
+    "@web/test-runner": "0.13.5",
+    "@web/test-runner-commands": "0.4.5",
+    "@web/test-runner-playwright": "0.8.6",
+    "@web/test-runner-puppeteer": "0.10.0"
   },
@@ -69,4 +76,3 @@ "private": false,
     "html"
-  ],
-  "gitHead": "ce5d24bc5829a7d5ea73218759db007619359682"
+  ]
 }

src/absolute-position-behavior-properties.json

@@ -59,2 +59,7 @@ {
   },
+  "justify": {
+    "type": "Boolean",
+    "reflect": true,
+    "attribute": "justify"
+  },
   /**
@@ -61,0 +66,0 @@ * The actual target element

src/absolute-position-behavior.js

@@ -5,85 +5,102 @@ /**
  */
-import { LitElement, html, css } from "lit-element/lit-element.js";
+import { LitElement, html, css } from "lit";
 import "./lib/absolute-position-state-manager.js";
-
 /**
- * `absolute-position-behavior`
- * abstracts absolute positioning behavior to be resusable in other elements
- * @demo ./demo/index.html
- * @element absolute-position-behavior
+ * @customElement
+ * @class
  */
-class AbsolutePositionBehavior extends LitElement {
-  /* REQUIRED FOR TOOLING DO NOT TOUCH */
+const AbsolutePositionBehaviorClass = function (SuperClass) {
+  return class extends SuperClass {
+    /* REQUIRED FOR TOOLING DO NOT TOUCH */
 
-  /**
-   * Store tag name to make it easier to obtain directly.
-   * @notice function name must be here for tooling to operate correctly
-   */
-  static get tag() {
-    return "absolute-position-behavior";
-  }
+    /**
+     * Store tag name to make it easier to obtain directly.
+     * @notice function name must be here for tooling to operate correctly
+     */
+    static get tag() {
+      return "absolute-position-behavior";
+    }
 
-  constructor() {
-    super();
-    this.auto = false;
-    this.fitToVisibleBounds = false;
-    this.for = null;
-    this.offset = 0;
-    this.position = "bottom";
-    this.target = null;
-    this.__positions = {};
-    this.__observe = false;
-    this.__manager = window.AbsolutePositionStateManager.requestAvailability();
-  }
+    constructor() {
+      super();
+      this.auto = false;
+      this.fitToVisibleBounds = false;
+      this.for = null;
+      this.offset = 0;
+      this.position = "bottom";
+      this.target = null;
+      this.hidden = false;
+      this.__positions = {};
+      this.__observe = false;
+    }
 
-  updated(changedProperties) {
-    changedProperties.forEach((oldValue, propName) => {
-      if (propName === "auto" && this.auto) this.setPosition();
-      if (propName === "auto" && !this.auto) this.unsetPosition();
-      if (propName === "fitToVisibleBounds") this.updatePosition();
-      if (propName === "for") this.updatePosition();
-      if (propName === "offset") this.updatePosition();
-      if (propName === "position") this.updatePosition();
-      if (propName === "positionAlign") this.updatePosition();
-      if (propName === "target") this.updatePosition();
-      if (propName === "hidden") this.updatePosition();
-    });
-  }
+    updated(changedProperties) {
+      if (this.shadowRoot && !this.hidden) {
+        changedProperties.forEach((oldValue, propName) => {
+          if (propName === "auto" && this.auto) this.setPosition();
+          if (propName === "auto" && !this.auto) this.unsetPosition();
+          if (propName === "fitToVisibleBounds") this.updatePosition();
+          if (propName === "for") this.updatePosition();
+          if (propName === "offset") this.updatePosition();
+          if (propName === "position") this.updatePosition();
+          if (propName === "positionAlign") this.updatePosition();
+          if (propName === "target") this.updatePosition();
+          if (propName === "hidden") this.updatePosition();
+        });
+      }
+    }
 
-  /**
-   * Registers element with AbsolutePositionStateManager
-   * @returns {void}
-   */
-  setPosition() {
-    this.__observe = true;
-    this.__manager.loadElement(this);
-  }
+    /**
+     * Registers element with AbsolutePositionStateManager
+     * @returns {void}
+     */
+    setPosition() {
+      this.__observe = true;
+      window.AbsolutePositionStateManager.requestAvailability().loadElement(
+        this
+      );
+    }
 
-  /**
-   * Unregisters element with AbsolutePositionStateManager
-   * @returns {void}
-   */
-  unsetPosition() {
-    this.__observe = false;
-    this.__manager.unloadElement(this);
-  }
+    /**
+     * Unregisters element with AbsolutePositionStateManager
+     * @returns {void}
+     */
+    unsetPosition() {
+      this.__observe = false;
+      window.AbsolutePositionStateManager.requestAvailability().unloadElement(
+        this
+      );
+    }
 
-  /**
-   * Updates  element's position
-   * @returns {void}
-   */
-  updatePosition() {
-    if (this.__observe === true) {
-      this.__manager.positionElement(this);
+    /**
+     * Updates  element's position
+     * @returns {void}
+     */
+    updatePosition() {
+      if (this.__observe === true) {
+        window.AbsolutePositionStateManager.requestAvailability().positionElement(
+          this
+        );
+      }
     }
-  }
-  /**
-   * life cycle, element is removed from DOM
-   * @returns {void}
-   */
-  disconnectedCallback() {
-    this.unsetPosition();
-    super.disconnectedCallback();
-  }
-}
+    /**
+     * life cycle, element is removed from DOM
+     * @returns {void}
+     */
+    disconnectedCallback() {
+      this.unsetPosition();
+      super.disconnectedCallback();
+    }
+  };
+};
+
+/**
+ * `absolute-position-behavior`
+ * abstracts absolute positioning behavior to be resusable in other elements
+ * @demo ./demo/index.html
+ * @element absolute-position-behavior
+ */
+class AbsolutePositionBehavior extends AbsolutePositionBehaviorClass(
+  LitElement
+) {}
 window.customElements.define(
@@ -93,2 +110,2 @@ AbsolutePositionBehavior.tag,
 );
-export { AbsolutePositionBehavior };
+export { AbsolutePositionBehaviorClass, AbsolutePositionBehavior };

vscode-html-custom-data.json

@@ -6,3 +6,3 @@ {
       "name": "absolute-position-behavior",
-      "description": "`absolute-position-behavior`\nabstracts absolute positioning behavior to be resusable in other elements\n\nAttributes:\n\n  * `hidden` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\n  * `position-align` {`string`} - Aligns at the start, or end fo target. Default is centered.\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  * `__positions` - The element's style\n\nProperties:\n\n  * `hidden` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\n  * `positionAlign` {`string`} - Aligns at the start, or end fo target. Default is centered.\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  * `__positions` - The element's style\n\n  * `__observe` {`boolean`} - \n\n  * `__manager` - ",
+      "description": "`absolute-position-behavior`\nabstracts absolute positioning behavior to be resusable in other elements\n\nAttributes:\n\n  * `hidden` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\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  * `__positions` - The element's style\n\nProperties:\n\n  * `hidden` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\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  * `__positions` - The element's style\n\n  * `__observe` {`boolean`} - \n\n  * `__manager` - ",
       "attributes": [
@@ -19,2 +19,7 @@ {
         {
+          "name": "justify",
+          "description": "`justify` {`boolean`} - \n\nProperty: justify",
+          "valueSet": "v"
+        },
+        {
           "name": "auto",
@@ -21,0 +26,0 @@ "description": "`auto` {`boolean`} - Element is positioned from connected to disconnected?\nOtherwise setPosition and unsetPosition must be called manually.\n\nProperty: auto\n\nDefault: false",

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

128046

increased by29.35%

Number of package files

27

increased by3.85%

Lines of code

2531

increased by59.18%

Worsened metrics

Dev dependency count

15

increased by50%

Dependency changes

• + Addedlit@2.0.0-rc.2

• + Added@lit-labs/ssr-dom-shim@1.2.1(transitive)

• + Added@lit/reactive-element@1.6.3(transitive)

• + Added@types/trusted-types@2.0.7(transitive)

• + Addedlit@2.0.0-rc.2(transitive)

• + Addedlit-element@3.3.3(transitive)

• + Addedlit-html@2.8.0(transitive)

• - Removedlit-element@2.4.0

• - Removedlit-element@2.4.0(transitive)

• - Removedlit-html@1.4.1(transitive)