@vaadin/vaadin-overlay - npm Package Compare versions

Comparing version 3.0.2-pre.3 to 3.1.0-alpha2

package.json

@@ -14,3 +14,3 @@ {
   "name": "@vaadin/vaadin-overlay",
-  "version": "3.0.2-pre.3",
+  "version": "3.1.0-alpha2",
   "main": "vaadin-overlay.js",
@@ -27,23 +27,25 @@ "author": "Vaadin Ltd",
     "type-detect": "1.0.0",
-    "@webcomponents/webcomponentsjs": "2.0.0"
+    "@vaadin/vaadin-themable-mixin": "1.2.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "1.1.0-alpha3"
   },
   "dependencies": {
+    "@polymer/iron-overlay-behavior": "^3.0.0-pre.12",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-themable-mixin": "^1.1.5-pre.3",
-    "@vaadin/vaadin-lumo-styles": "^1.0.0-pre.6",
-    "@polymer/iron-overlay-behavior": "^3.0.0-pre.18"
+    "@vaadin/vaadin-lumo-styles": "^1.1.0-alpha3",
+    "@vaadin/vaadin-material-styles": "^1.1.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "^1.2.0-alpha2"
   },
   "devDependencies": {
-    "@vaadin/vaadin-demo-helpers": "^1.2.5-pre.1",
-    "@polymer/iron-component-page": "^3.0.0-pre.18",
-    "@polymer/iron-demo-helpers": "^3.0.0-pre.18",
-    "@polymer/iron-test-helpers": "^3.0.0-pre.18",
+    "@polymer/iron-component-page": "^3.0.0-pre.12",
+    "@polymer/iron-demo-helpers": "^3.0.0-pre.12",
+    "@polymer/iron-form": "^3.0.0-pre.12",
+    "@polymer/iron-input": "^3.0.0-pre.12",
+    "@polymer/iron-test-helpers": "^3.0.0-pre.12",
+    "@polymer/paper-button": "^3.0.0-pre.12",
+    "@polymer/paper-input": "^3.0.0-pre.12",
     "@vaadin/vaadin-button": "^2.0.0-pre.3",
+    "@vaadin/vaadin-demo-helpers": "^2.0.0-alpha2",
     "@vaadin/vaadin-text-field": "^2.0.1-pre.2",
-    "@polymer/iron-form": "^3.0.0-pre.18",
-    "@polymer/iron-input": "^3.0.0-pre.18",
-    "@polymer/paper-button": "^3.0.0-pre.18",
-    "@polymer/paper-input": "^3.0.0-pre.18",
-    "wct-browser-legacy": "^0.0.1-pre.11"
+    "wct-browser-legacy": "0.0.1-pre.11"
   }
 }

README.md

 [![Build Status](https://travis-ci.org/vaadin/vaadin-overlay.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-overlay)
+[![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-overlay/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-overlay?branch=master)
 
@@ -3,0 +4,0 @@ # <vaadin-overlay>

src/vaadin-overlay.js

@@ -1,8 +0,2 @@
-/**
-@license
-Copyright (c) 2017 Vaadin Ltd.
-This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-*/
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
-
 import { templatize } from '@polymer/polymer/lib/utils/templatize.js';
@@ -15,2 +9,45 @@ import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { useNativeCustomElements } from '@polymer/polymer/lib/utils/settings.js';
+let overlayContentCounter = 0;
+
+const createOverlayContent = (cssText) => {
+  overlayContentCounter++;
+  const is = `vaadin-overlay-content-${overlayContentCounter}`;
+
+  const styledTemplate = document.createElement('template');
+  const style = document.createElement('style');
+  style.textContent = ':host { display: block; }' + cssText;
+  styledTemplate.content.appendChild(style);
+
+  if (window.ShadyCSS) {
+    window.ShadyCSS.prepareTemplate(styledTemplate, is);
+  }
+
+  // NOTE(platosha): Have to use an awkward IIFE returning class here
+  // to prevent this class from showing up in analysis.json & API docs.
+  /** @private */
+  const klass = (() => class extends HTMLElement {
+    static get is() {
+      return is;
+    }
+
+    connectedCallback() {
+      if (window.ShadyCSS) {
+        window.ShadyCSS.styleElement(this);
+      }
+
+      if (!this.shadowRoot) {
+        this.attachShadow({mode: 'open'});
+        this.shadowRoot.appendChild(document.importNode(styledTemplate.content, true));
+
+        // FIXME(platosha): IronFocusablesHelper does only use legacy .root
+        this.root = this.shadowRoot;
+      }
+    }
+  })();
+
+  customElements.define(klass.is, klass);
+
+  return document.createElement(is);
+};
+
 /**
@@ -238,3 +275,3 @@ * `<vaadin-overlay>` is a Polymer 2 element for creating overlays.
 
-      _shadyStyleScope: String,
+      _originalContentPart: Object,
 
@@ -550,5 +587,7 @@ _contentNodes: Array
 
-    if (this._shadyStyleScope) {
-      // NOTE(platosha): Remove the style scope related to old content.
-      this.$.content.removeAttribute('is');
+    if (this._originalContentPart) {
+      // Restore the original <div part="content">
+      this.$.content.parentNode.replaceChild(this._originalContentPart, this.$.content);
+      this.$.content = this._originalContentPart;
+      this._originalContentPart = undefined;
     }
@@ -593,28 +632,37 @@
 
+      let scopeCssText = Array.from(templateRoot.querySelectorAll('style'))
+        .reduce((result, style) => result + style.textContent, '');
+
       if (window.ShadyCSS && !window.ShadyCSS.nativeShadow) {
-        // Shady DOM
-        this._shadyStyleScope = templateRoot.host && templateRoot.host.localName;
-        if (this._shadyStyleScope && this._shadyStyleScope.indexOf('-') === -1) {
-          this._shadyStyleScope = templateRoot.host.getAttribute('is');
+        // NOTE(platosha): ShadyCSS removes <style>’s from templates, so
+        // we have to use these protected APIs to get their contents back
+        const styleInfo = window.ShadyCSS.ScopingShim
+          ._styleInfoForNode(templateRoot.host);
+        if (styleInfo) {
+          scopeCssText += styleInfo._getStyleRules().parsedCssText;
+          scopeCssText += '}';
         }
-        if (this._shadyStyleScope) {
-          // NOTE(platosha): here we trick ShadyCSS to think that the scope is
-          // what `this._shadyStyleScope` says. What we actually need is to add
-          // `style-scope ${this._shadyStyleScope}` classes to every element
-          // inside this.$.content.shadowRoot. But if we do that manually,
-          // these classes might get removed by ShadyCSS later (for example,
-          // after next flush).
-          this.$.content.setAttribute('is', this._shadyStyleScope);
-        }
-      } else {
-        // Shadow DOM
-        const scopeCssText = Array.from(templateRoot.querySelectorAll('style'))
-          .reduce((result, style) => result + style.textContent, '')
-          // The overlay root’s :host styles should not apply inside the overlay
-          .replace(/:host/g, ':host-nomatch');
+      }
 
-        if (scopeCssText) {
+      // The overlay root’s :host styles should not apply inside the overlay
+      scopeCssText = scopeCssText.replace(/:host/g, ':host-nomatch');
+
+      if (scopeCssText) {
+        if (window.ShadyCSS && !window.ShadyCSS.nativeShadow) {
+          // ShadyDOM: replace the <div part="content"> with a generated
+          // styled custom element
+          const contentPart = createOverlayContent(scopeCssText);
+          contentPart.id = 'content';
+          contentPart.setAttribute('part', 'content');
+          this.$.content.parentNode.replaceChild(contentPart, this.$.content);
+          // NOTE(platosha): carry the style scope of the content part
+          contentPart.className = this.$.content.className;
+          this._originalContentPart = this.$.content;
+          this.$.content = contentPart;
+        } else {
+          // Shadow DOM: append a style to the content shadowRoot
           const style = document.createElement('style');
           style.textContent = scopeCssText;
           this.$.content.shadowRoot.appendChild(style);
+          this._contentNodes.unshift(style);
         }
@@ -621,0 +669,0 @@ }

theme/lumo/vaadin-overlay-styles.js

 import '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
-const $_documentContainer = document.createElement('template');
+const $_documentContainer = document.createElement('div');
 $_documentContainer.setAttribute('style', 'display: none;');
@@ -13,2 +13,2 @@
 
-document.head.appendChild($_documentContainer.content);
+document.head.appendChild($_documentContainer);

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

123080

increased by39.61%

Number of package files

15

increased by25%

Lines of code

643

increased by8.07%

Number of lines in readme file

12

increased by9.09%

Worsened metrics

Dependency count

5

increased by25%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@vaadin/vaadin-material-styles@^1.1.0-alpha2

• + Added@vaadin/vaadin-material-styles@1.3.2(transitive)

• Updated@polymer/iron-overlay-behavior@^3.0.0-pre.12

• Updated@vaadin/vaadin-lumo-styles@^1.1.0-alpha3

• Updated@vaadin/vaadin-themable-mixin@^1.2.0-alpha2