@polymer/iron-pages - npm Package Compare versions

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

iron-pages.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 {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
+import {IronSelectableBehavior} from '@polymer/iron-selector/iron-selectable.js';
+import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
 /**
-`iron-pages` is used to select one of its children to show. One use is to cycle through a list of
-children "pages".
+`iron-pages` is used to select one of its children to show. One use is to cycle
+through a list of children "pages".
 
@@ -30,16 +38,4 @@ Example:
 @group Iron Elements
-@hero hero.svg
 @demo demo/index.html
 */
-/*
-  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 { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
-import { IronSelectableBehavior } from '@polymer/iron-selector/iron-selectable.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 Polymer({
@@ -46,0 +42,0 @@ _template: html`

package.json

@@ -15,30 +15,22 @@ {
   "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-styles": "^3.0.0-pre.21",
+    "@polymer/iron-demo-helpers": "^3.0.0-pre.20",
+    "@polymer/paper-styles": "^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": "iron-pages.js",
   "author": "The Polymer Authors",
   "dependencies": {
-    "@polymer/iron-resizable-behavior": "^3.0.0-pre.21",
-    "@polymer/iron-selector": "^3.0.0-pre.21",
+    "@polymer/iron-resizable-behavior": "^3.0.0-pre.20",
+    "@polymer/iron-selector": "^3.0.0-pre.20",
     "@polymer/polymer": "^3.0.0"
   }
 }

README.md

@@ -0,33 +1,90 @@
+[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-pages.svg)](https://www.npmjs.com/package/@polymer/iron-pages)
 [![Build status](https://travis-ci.org/PolymerElements/iron-pages.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-pages)
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/PolymerElements/iron-pages)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-pages)
 
-_[Demo and API docs](https://elements.polymer-project.org/elements/iron-pages)_
+## <iron-pages>
 
+`iron-pages` is used to select one of its children to show. One use is to cycle
+through a list of children "pages".
 
-## <iron-pages>
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-pages),
+  [Demo](https://www.webcomponents.org/element/@polymer/iron-pages/demo/demo/index.html).
 
-`iron-pages` is used to select one of its children to show. One use is to cycle through a list of
-children "pages".
+## Usage
 
-Example:
+### Installation
 
+```
+npm install --save @polymer/iron-pages
+```
+
+### In an HTML file
+
 ```html
-<iron-pages selected="0">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-</iron-pages>
+<html>
+  <head>
+    <script type="module">
+      import '@polymer/iron-pages/iron-pages.js';
+    </script>
+  </head>
+  <body>
+    <iron-pages selected="0">
+      <div>Page 0</div>
+      <div>Page 1</div>
+      <div>Page 2</div>
+      <div>Page 3</div>
+    </iron-pages>
+  </body>
+</html>
+```
 
-<script>
-  document.addEventListener('click', function(e) {
-    var pages = document.querySelector('iron-pages');
-    pages.selectNext();
-  });
-</script>
+### In a Polymer 3 element
+
+```js
+import {PolymerElement} from '@polymer/polymer/polymer-element.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
+import '@polymer/iron-pages/iron-pages.js';
+
+class ExampleElement extends PolymerElement {
+  static get template() {
+    return html`
+      <iron-pages selected="0">
+        <div>Page 0</div>
+        <div>Page 1</div>
+        <div>Page 2</div>
+        <div>Page 3</div>
+      </iron-pages>
+    `;
+  }
+}
+
+customElements.define('example-element', ExampleElement);
 ```
 
-### Notable breaking changes between 1.x and 2.x (hybrid):
+## Contributing
 
-IronSelectableBehavior and IronMultiSelectableBehavior, which are used by
-iron-pages, introduce multiple breaking changes. Please see the README for those
-behaviors for more detail.
+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/iron-pages
+cd iron-pages
+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

6

decreased by-25%

Number of lines in readme file

91

increased by167.65%

Worsened metrics

Total package byte prevSize

16858

decreased by-43.16%

Number of package files

8

decreased by-52.94%

Lines of code

138

decreased by-7.38%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@polymer/iron-resizable-behavior@^3.0.0-pre.20

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