@polymer/paper-dialog-scrollable - npm Package Compare versions

Comparing version 3.0.0-pre.21 to 3.0.0-pre.22

package.json

@@ -17,32 +17,24 @@ {
   "devDependencies": {
-    "@polymer/gen-typescript-declarations": "^1.2.2",
-    "bower": "^1.8.0",
     "webmat": "^0.2.0",
-    "@polymer/iron-component-page": "^3.0.0-pre.21",
-    "@polymer/iron-demo-helpers": "^3.0.0-pre.21",
-    "@polymer/paper-button": "^3.0.0-pre.21",
-    "@polymer/paper-dialog": "^3.0.0-pre.21",
+    "@polymer/iron-demo-helpers": "^3.0.0-pre.20",
+    "@polymer/paper-button": "^3.0.0-pre.20",
+    "@polymer/paper-dialog": "^3.0.0-pre.20",
     "wct-browser-legacy": "^1.0.1",
-    "@webcomponents/webcomponentsjs": "^2.0.0"
+    "@webcomponents/webcomponentsjs": "^2.0.0",
+    "@polymer/gen-typescript-declarations": "^1.5.0"
   },
   "scripts": {
-    "update-types": "bower install && gen-typescript-declarations --deleteExisting --outDir .",
-    "format": "webmat && npm run update-types"
+    "format": "webmat",
+    "generate-types": "gen-typescript-declarations --deleteExisting --outDir .",
+    "prepack": "npm run generate-types"
   },
-  "version": "3.0.0-pre.21",
-  "resolutions": {
-    "inherits": "2.0.3",
-    "samsam": "1.1.3",
-    "supports-color": "3.1.2",
-    "type-detect": "1.0.0",
-    "@webcomponents/webcomponentsjs": "2.0.0-beta.2"
-  },
+  "version": "3.0.0-pre.22",
   "main": "paper-dialog-scrollable.js",
   "author": "The Polymer Authors",
   "dependencies": {
-    "@polymer/iron-flex-layout": "^3.0.0-pre.21",
-    "@polymer/paper-dialog-behavior": "^3.0.0-pre.21",
-    "@polymer/paper-styles": "^3.0.0-pre.21",
+    "@polymer/iron-flex-layout": "^3.0.0-pre.20",
+    "@polymer/paper-dialog-behavior": "^3.0.0-pre.20",
+    "@polymer/paper-styles": "^3.0.0-pre.20",
     "@polymer/polymer": "^3.0.0"
   }
 }

paper-dialog-scrollable.js

 /**
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
 */
+import '@polymer/polymer/polymer-legacy.js';
+import '@polymer/iron-flex-layout/iron-flex-layout.js';
+import '@polymer/paper-styles/default-theme.js';
+
+import {PaperDialogBehaviorImpl} from '@polymer/paper-dialog-behavior/paper-dialog-behavior.js';
+import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
 /**
-Material design: [Dialogs](https://www.google.com/design/spec/components/dialogs.html)
+Material design:
+[Dialogs](https://www.google.com/design/spec/components/dialogs.html)
 
-`paper-dialog-scrollable` implements a scrolling area used in a Material Design dialog. It shows
-a divider at the top and/or bottom indicating more content, depending on scroll position. Use this
-together with elements implementing `Polymer.PaperDialogBehavior`.
+`paper-dialog-scrollable` implements a scrolling area used in a Material Design
+dialog. It shows a divider at the top and/or bottom indicating more content,
+depending on scroll position. Use this together with elements implementing
+`Polymer.PaperDialogBehavior`.
 
@@ -27,9 +38,10 @@ <paper-dialog-impl>
 
-It shows a top divider after scrolling if it is not the first child in its parent container,
-indicating there is more content above. It shows a bottom divider if it is scrollable and it is not
-the last child in its parent container, indicating there is more content below. The bottom divider
-is hidden if it is scrolled to the bottom.
+It shows a top divider after scrolling if it is not the first child in its
+parent container, indicating there is more content above. It shows a bottom
+divider if it is scrollable and it is not the last child in its parent
+container, indicating there is more content below. The bottom divider is hidden
+if it is scrolled to the bottom.
 
-If `paper-dialog-scrollable` is not a direct child of the element implementing `Polymer.PaperDialogBehavior`,
-remember to set the `dialogElement`:
+If `paper-dialog-scrollable` is not a direct child of the element implementing
+`Polymer.PaperDialogBehavior`, remember to set the `dialogElement`:
 
@@ -50,3 +62,4 @@ <paper-dialog-impl id="myDialog">
     <script>
-      var scrollable = Polymer.dom(myDialog).querySelector('paper-dialog-scrollable');
+      var scrollable =
+Polymer.dom(myDialog).querySelector('paper-dialog-scrollable');
       scrollable.dialogElement = myDialog;
@@ -67,14 +80,2 @@ </script>
 */
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
-import '@polymer/polymer/polymer-legacy.js';
-
-import '@polymer/iron-flex-layout/iron-flex-layout.js';
-import { PaperDialogBehaviorImpl } from '@polymer/paper-dialog-behavior/paper-dialog-behavior.js';
-import '@polymer/paper-styles/default-theme.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 Polymer({
@@ -173,4 +174,3 @@ _template: html`
     if (this.dialogElement && this.dialogElement.behaviors &&
-        this.dialogElement.behaviors.indexOf(PaperDialogBehaviorImpl) >=
-            0) {
+        this.dialogElement.behaviors.indexOf(PaperDialogBehaviorImpl) >= 0) {
       this.dialogElement.sizingTarget = this.scrollTarget;
@@ -177,0 +177,0 @@ this.scrollTarget.classList.remove('fit');

README.md

@@ -0,14 +1,12 @@
+[![Published on NPM](https://img.shields.io/npm/v/@polymer/paper-dialog-scrollable.svg)](https://www.npmjs.com/package/@polymer/paper-dialog-scrollable)
 [![Build status](https://travis-ci.org/PolymerElements/paper-dialog-scrollable.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-dialog-scrollable)
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/PolymerElements/paper-dialog-scrollable)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/paper-dialog-scrollable)
 
 ## <paper-dialog-scrollable>
-
-Material design: [Dialogs](https://www.google.com/design/spec/components/dialogs.html)
-
 `paper-dialog-scrollable` implements a scrolling area used in a Material Design dialog. It shows
 a divider at the top and/or bottom indicating more content, depending on scroll position. Use this
-together with elements implementing `Polymer.PaperDialogBehavior`.
+together with elements implementing `PaperDialogBehavior`.
 
 ```html
-<paper-dialog-impl>
+<paper-dialog>
   <h2>Header</h2>
@@ -21,3 +19,3 @@ <paper-dialog-scrollable>
   </div>
-</paper-dialog-impl>
+</paper-dialog>
 ```
@@ -30,7 +28,7 @@
 
-If `paper-dialog-scrollable` is not a direct child of the element implementing `Polymer.PaperDialogBehavior`,
+If `paper-dialog-scrollable` is not a direct child of the element implementing `PaperDialogBehavior`,
 remember to set the `dialogElement`:
 
 ```html
-<paper-dialog-impl id="myDialog">
+<paper-dialog id="myDialog">
   <h2>Header</h2>
@@ -46,6 +44,6 @@ <div class="my-content-wrapper">
   </div>
-</paper-dialog-impl>
+</paper-dialog>
 
 <script>
-  var scrollable = Polymer.dom(myDialog).querySelector('paper-dialog-scrollable');
+  var scrollable = myDialog.querySelector('paper-dialog-scrollable');
   scrollable.dialogElement = myDialog;
@@ -63,2 +61,79 @@ </script>
 
+See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-dialog-scrollable),
+  [Demo](https://www.webcomponents.org/element/@polymer/paper-dialog-scrollable/demo/demo/index.html).
 
+## Usage
+
+### Installation
+```
+npm install --save @polymer/paper-dialog-scrollable
+```
+
+### In an html file
+```html
+<html>
+  <head>
+    <script type="module">
+      import '@polymer/paper-dialog/paper-dialog.js';
+      import '@polymer/paper-dialog-scrollable/paper-dialog-scrollable.js';
+    </script>
+  </head>
+  <body>
+    <button onclick="dialog.open()">Open</button>
+    <paper-dialog id="dialog">
+      <h2>Heading</h2>
+      <paper-dialog-scrollable>
+        <p>Scrolalble content...</p>
+      </paper-dialog-scrollable>
+    </paper-dialog>
+  </body>
+</html>
+```
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/paper-dialog/paper-dialog.js';
+import '@polymer/paper-dialog-scrollable/paper-dialog-scrollable.js';
+
+class SampleElement extends PolymerElement {
+  static get template() {
+    return html`
+      <button on-click="_openDialog">Open</button>
+      <paper-dialog id="dialog">
+        <h2>Heading</h2>
+        <paper-dialog-scrollable>
+          <p>Scrolalble content...</p>
+        </paper-dialog-scrollable>
+      </paper-dialog>
+    `;
+  }
+
+  _openDialog() {
+    this.$.dialog.open();
+  }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/paper-dialog-scrollable
+cd paper-dialog-scrollable
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:<port>/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```

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

Dev dependency count

7

decreased by-22.22%

Lines of code

266

increased by22.58%

Number of lines in readme file

136

increased by122.95%

Worsened metrics

Total package byte prevSize

37553

decreased by-35.08%

Number of package files

8

decreased by-46.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@polymer/iron-flex-layout@^3.0.0-pre.20

• Updated@polymer/paper-dialog-behavior@^3.0.0-pre.20

• Updated@polymer/paper-styles@^3.0.0-pre.20