@polymer/iron-validatable-behavior - npm Package Compare versions

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

demo/cats-only.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 { IronValidatorBehavior } from '@polymer/iron-validator-behavior/iron-validator-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import {IronValidatorBehavior} from '@polymer/iron-validator-behavior/iron-validator-behavior.js';
+import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
 Polymer({
@@ -15,0 +16,0 @@

demo/validatable-input.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 { IronValidatableBehavior } from '../iron-validatable-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
+import {IronValidatableBehavior} from '../iron-validatable-behavior.js';
+
 Polymer({
@@ -16,0 +19,0 @@ _template: html`

iron-validatable-behavior.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 { IronMeta } from '@polymer/iron-meta/iron-meta.js';
+import {IronMeta} from '@polymer/iron-meta/iron-meta.js';
 
@@ -20,4 +21,4 @@ /**
 /**
- * `Use Polymer.IronValidatableBehavior` to implement an element that validates
- * user input. Use the related `Polymer.IronValidatorBehavior` to add custom
+ * `Use IronValidatableBehavior` to implement an element that validates
+ * user input. Use the related `IronValidatorBehavior` to add custom
  * validation logic to an iron-input.
@@ -28,3 +29,3 @@ *
  * `validate()` method, which in turn will call `validate()` on all its
- * children. By using `Polymer.IronValidatableBehavior`, your custom element
+ * children. By using `IronValidatableBehavior`, your custom element
  * will get a public `validate()`, which will return the validity of the
@@ -69,4 +70,3 @@ * element, and a corresponding `invalid` attribute, which can be used for
   registered: function() {
-    IronValidatableBehaviorMeta =
-        new IronMeta({type: 'validator'});
+    IronValidatableBehaviorMeta = new IronMeta({type: 'validator'});
   },
@@ -73,0 +73,0 @@

package.json

@@ -17,51 +17,23 @@ {
   "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/iron-validator-behavior": "^3.0.0-pre.21",
-    "@polymer/paper-styles": "^3.0.0-pre.21",
-    "@polymer/test-fixture": "^3.0.0-pre.21",
+    "@polymer/iron-demo-helpers": "^3.0.0-pre.20",
+    "@polymer/iron-validator-behavior": "^3.0.0-pre.20",
+    "@polymer/paper-styles": "^3.0.0-pre.20",
+    "@polymer/test-fixture": "^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-validatable-behavior.js",
-  "contributors": [
-    "T",
-    "h",
-    "e",
-    " ",
-    "P",
-    "o",
-    "l",
-    "y",
-    "m",
-    "e",
-    "r",
-    " ",
-    "A",
-    "u",
-    "t",
-    "h",
-    "o",
-    "r",
-    "s"
-  ],
+  "author": "The Polymer Authors",
   "dependencies": {
-    "@polymer/iron-meta": "^3.0.0-pre.21",
+    "@polymer/iron-meta": "^3.0.0-pre.20",
     "@polymer/polymer": "^3.0.0"
   }
 }

README.md

@@ -0,46 +1,88 @@
+[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-validatable-behavior.svg)](https://www.npmjs.com/package/@polymer/iron-validatable-behavior)
+[![Build status](https://travis-ci.org/PolymerElements/iron-validatable-behavior.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-validatable-behavior)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-validatable-behavior)
 
-<!---
+## IronValidatableBehavior
+Use `IronValidatableBehavior` to implement an element that validates user input. By using this behaviour, your custom element will get a public `validate()` method, which
+will return the validity of the element, and a corresponding `invalid` attribute,
+which can be used for styling. Can be used alongside an element implementing
+the  `IronValidatableBehavior` behaviour.
 
-This README is automatically generated from the comments in these files:
-iron-validatable-behavior.html
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-validatable-behavior),
+  [Demo](https://www.webcomponents.org/element/@polymer/iron-validatable-behavior/demo/demo/index.html).
 
-Edit those files, and our readme bot will duplicate them over here!
-Edit this file, and the bot will squash your changes :)
+## Usage
 
-The bot does some handling of markdown. Please file a bug if it does the wrong
-thing! https://github.com/PolymerLabs/tedium/issues
+### Installation
+```
+npm install --save @polymer/iron-validatable-behavior
+```
 
--->
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
+import {IronValidatableBehavior} from '@polymer/iron-validatable-behavior/iron-validatable-behavior.js';
 
-[![Build status](https://travis-ci.org/PolymerElements/iron-validatable-behavior.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-validatable-behavior)
+class SampleElement extends mixinBehaviors([IronValidatableBehavior], PolymerElement) {
+  static get template() {
+    return html`
+      <style>
+        :host {
+          border: 1px solid green;
+          color: green;
+        }
+        :host([invalid]) {
+          border: 1px solid red;
+          color: red;
+        }
+      </style>
+      <input id="input">
+    `;
 
-_[Demo and API docs](https://elements.polymer-project.org/elements/iron-validatable-behavior)_
+    // Override this method if you want to implement custom validity
+    // for your element. This element is only valid if the value in the
+    // input is "cat".
+    function _getValidity() {
+      return this.$.input.value === 'cat';
+    }
+  }
+}
+customElements.define('sample-element', SampleElement);
+```
 
+### In an html file using the element
+```html
+<html>
+  <head>
+    <script type="module" src="./sample-element.js"></script>
+  </head>
+  <body>
+    <sample-element id="el"></sample-element>
+    <button onclick="el.validate()">Validate!</button>
+  </body>
+</html>
+```
 
-## Polymer.IronValidatableBehavior
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
 
-`Use Polymer.IronValidatableBehavior` to implement an element that validates user input.
-Use the related `Polymer.IronValidatorBehavior` to add custom validation logic to an iron-input.
+### Installation
+```sh
+git clone https://github.com/PolymerElements/iron-validatable-behavior
+cd iron-validatable-behavior
+npm install
+npm install -g polymer-cli
+```
 
-By default, an `<iron-form>` element validates its fields when the user presses the submit button.
-To validate a form imperatively, call the form's `validate()` method, which in turn will
-call `validate()` on all its children. By using `Polymer.IronValidatableBehavior`, your
-custom element will get a public `validate()`, which
-will return the validity of the element, and a corresponding `invalid` attribute,
-which can be used for styling.
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:<port>/demo/
+```
 
-To implement the custom validation logic of your element, you must override
-the protected `_getValidity()` method of this behaviour, rather than `validate()`.
-See [this](https://github.com/PolymerElements/iron-form/blob/master/demo/simple-element.html)
-for an example.
-
-### Changes in 2.0
-- `validate()` no longer requires a `value` parameter to be passed, and will use the element's `value` property if it exists
-- `validatorType` and `validatorName` were unused and have been removed
-
-### Accessibility
-
-Changing the `invalid` property, either manually or by calling `validate()` will update the
-`aria-invalid` attribute.
-
-
+### Running the tests
+```sh
+polymer test --npm
+```

New alerts

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

Improved metrics

Dev dependency count

8

decreased by-20%

Lines of code

309

increased by0.32%

Number of lines in readme file

89

increased by89.36%

Worsened metrics

Total package byte prevSize

20514

decreased by-25.59%

Number of package files

9

decreased by-50%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

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