open-index/open-npm huggingface dataset:
npm package: @polymer/iron-flex-layout
Description: Provide flexbox-based layouts
Author: The Polymer Authors
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-flex-layout.svg)](https://www.npmjs.com/package/@polymer/iron-flex-layout)
[![Build status](https://travis-ci.org/PolymerElements/iron-flex-layout.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-flex-layout)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-flex-layout)

## &lt;iron-flex-layout&gt;
The `<iron-flex-layout>` component provides simple ways to use
[CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes),
also known as flexbox. Note that this is an old element, that was written
before all modern browsers had non-prefixed flex styles. As such, nowadays you
don't really need to use this element anymore, and can use CSS flex styles
directly in your code.

See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-flex-layout),
  [Demo](https://www.webcomponents.org/element/@polymer/iron-flex-layout/demo/demo/index.html).

This component provides two different ways to use flexbox:

1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
The layout class stylesheet provides a simple set of class-based flexbox rules, that
let you specify layout properties directly in markup. You must include this file
in every element that needs to use them.

1. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html).
The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function.

## Usage

### Installation
```
npm install --save @polymer/iron-flex-layout
```

### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/iron-flex-layout/iron-flex-layout-classes.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
      <style>
        .test { width: 100px; }
      </style>
      <div class="layout horizontal center-center">
        <div class="test">horizontal layout center alignment</div>
      </div>
    `;
  }
}
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/iron-flex-layout
cd iron-flex-layout
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
```
npm package: @polymer/iron-form
Description: Wrapper around native form that submits native and custom elements
Author: The Polymer Authors
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-form.svg)](https://www.npmjs.com/package/@polymer/iron-form)
[![Build status](https://travis-ci.org/PolymerElements/iron-form.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-form)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-form)


## &lt;iron-form&gt;
`<iron-form>` is a wrapper around the HTML `<form>` element, that can
validate and submit both custom and native HTML elements.

It has two modes: if `allow-redirect` is true, then after the form submission you
will be redirected to the server response. Otherwise, if it is false, it will
use an `iron-ajax` element to submit the form contents to the server.

See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-form),
  [Demo](https://www.webcomponents.org/element/@polymer/iron-form/demo/demo/index.html).

## Usage

### Installation
```
npm install --save @polymer/iron-form
```

### In an html file
```html
<html>
  <head>
    <script type="module">
      import '@polymer/iron-form/iron-form.js';
      import '@polymer/paper-checkbox/paper-checkbox.js';
    </script>
  </head>
  <body>
    <iron-form>
      <form method="get" action="/form/handler">
        <input type="text" name="name" value="Batman">
        <input type="checkbox" name="donuts" checked> I like donuts<br>
        <paper-checkbox name="cheese" value="yes" checked></paper-checkbox>
      </form>
    </iron-form>
  </body>
</html>
```
By default, a native `<button>` element (or `input type="submit"`) will submit this form.
However, if you want to submit it from a custom element's click handler, you need to explicitly
call the `iron-form`'s `submit` method:

```html
  <paper-button raised onclick="submitForm()">Submit</paper-button>

  function submitForm() {
    document.getElementById('iron-form').submit();
  }
```

### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/iron-form/iron-form.js';
import '@polymer/paper-checkbox/paper-checkbox.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
    <iron-form>
      <form method="get" action="/form/handler">
        <input type="text" name="name" value="Batman">
        <input type="checkbox" name="donuts" checked> I like donuts<br>
        <paper-checkbox name="cheese" value="yes" checked></paper-checkbox>
      </form>
    </iron-form>
    `;
  }
}
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/iron-form
cd iron-form
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
```
npm package: @polymer/iron-form-element-behavior
Description: Enables a custom element to be included in an iron-form
Author: The Polymer Authors
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-form-element-behavior.svg)](https://www.npmjs.com/package/@polymer/iron-form-element-behavior)
[![Build status](https://travis-ci.org/PolymerElements/iron-form-element-behavior.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-form-element-behavior)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-form-element-behavior)

## IronFormElementBehavior
`IronFormElementBehavior` adds a `name`, `value` and `required` properties to
a custom element. This element is deprecated, and only exists for back compatibility
with Polymer 1.x (where `iron-form` was a type extension), and
it is not something you want to use. No contributions or fixes will be accepted.

See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-form-element-behavior).

## Usage

### Installation
```
npm install --save @polymer/iron-form-element-behavior
```

### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {IronFormElementBehavior} from '@polymer/iron-form-element-behavior/iron-form-element-behavior.js';

class SampleElement extends mixinBehaviors([IronFormElementBehavior], PolymerElement) {
  static get template() {
    return html`
      <style>
        :host {
          display: block;
        }
      </style>
      <input name="[[name]]" value="{{value}}">
    `;
  }
}
customElements.define('sample-element', SampleElement);
```
npm package: @polymer/iron-icon
Description: An element that supports displaying an icon
Author: The Polymer Authors
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-icon.svg)](https://www.npmjs.com/package/@polymer/iron-icon)
[![Build status](https://travis-ci.org/PolymerElements/iron-icon.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-icon)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-icon)

## &lt;iron-icon&gt;

The `iron-icon` element displays an icon. By default an icon renders as a 24px
square.

See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-icon),
 [Demo](https://www.webcomponents.org/element/@polymer/iron-icon/demo/demo/index.html).

## Usage

### Installation

```
npm install --save @polymer/iron-icon
```

### In an HTML file

```html
<html>
  <head>
    <script type="module">
      import '@polymer/iron-icon/iron-icon.js';
    </script>
  </head>
  <body>
    <iron-icon src="demo/location.png"></iron-icon>

    <!-- You can use an icon from an imported iconset. -->
    <script type="module">
      import '@polymer/iron-icons/iron-icons.js';
    </script>
    <iron-icon icon="search"></iron-icon>
  </body>
</html>
```

### 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-icon/iron-icon.js';

class ExampleElement extends PolymerElement {
  static get template() {
    return html`
      <iron-icon src="demo/location.png"></iron-icon>
    `;
  }
}

customElements.define('example-element', ExampleElement);
```

## 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/iron-icon
cd iron-icon
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
```
npm package: @polymer/iron-icons
Description: A set of icons for use with iron-icon
Author: The Polymer Authors
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-icons.svg)](https://www.npmjs.com/package/@polymer/iron-icons)
[![Build status](https://travis-ci.org/PolymerElements/iron-icons.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-icons)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-icons)

## &lt;iron-icons&gt;

`iron-icons` is a utility import that includes the definition for the
`iron-icon` element, `iron-iconset-svg` element, as well as an import for the
default icon set.

See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-icons),
 [Demo](https://www.webcomponents.org/element/@polymer/iron-icons/demo/demo/index.html).

## Usage

### Installation

```
npm install --save @polymer/iron-icons
```

### In an HTML file

```html
<html>
  <head>
    <script type="module">
      import '@polymer/iron-icon/iron-icon.js';
      import '@polymer/iron-icons/iron-icons.js';
    </script>
  </head>
  <body>
    <iron-icon icon="search"></iron-icon>
  </body>
</html>
```

### 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-icon/iron-icon.js';
import '@polymer/iron-icons/iron-icons.js';

class ExampleElement extends PolymerElement {
  static get template() {
    return html`
      <iron-icon icon="search"></iron-icon>
    `;
  }
}

customElements.define('example-element', ExampleElement);
```

## 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/iron-icons
cd iron-icons
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
```
npm package: @polymer/iron-iconset
Description: Represents a set of icons
Author: The Polymer Authors
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-iconset.svg)](https://www.npmjs.com/package/@polymer/iron-iconset)
[![Build status](https://travis-ci.org/PolymerElements/iron-iconset.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-iconset)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-iconset)

## &lt;iron-iconset&gt;

The `iron-iconset` element allows users to define their own icon sets.

See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-iconset),
  [Demo](https://www.webcomponents.org/element/@polymer/iron-iconset/demo/demo/index.html).

## Usage

### Installation

```
npm install --save @polymer/iron-iconset
```

### In an HTML file

```html
<html>
  <head>
    <script type="module">
      import '@polymer/iron-iconset/iron-iconset.js';
    </script>
  </head>
  <body>
    <iron-iconset id="my-icons" src="my-icons.png" width="96" size="24"
        icons="location place starta stopb bus car train walk">
    </iron-iconset>
  </body>
</html>
```

### 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-iconset/iron-iconset.js';

class ExampleElement extends PolymerElement {
  static get template() {
    return html`
      <iron-iconset id="my-icons" src="my-icons.png" width="96" size="24"
          icons="location place starta stopb bus car train walk">
      </iron-iconset>
    `;
  }
}

customElements.define('example-element', ExampleElement);
```

## 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/iron-iconset
cd iron-iconset
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
```
npm package: @polymer/iron-image
Description: An image-displaying element with lots of convenient features
Author: The Polymer Authors
Latest version: 3.0.2

[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-image.svg)](https://www.npmjs.com/package/@polymer/iron-image)
[![Build status](https://travis-ci.org/PolymerElements/iron-image.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-image)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-image)

## &lt;iron-image&gt;

`iron-image` is an element for displaying an image that provides useful sizing
and preloading options not found on the standard `<img>` tag.

See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-image),
  [Demo](https://www.webcomponents.org/element/@polymer/iron-image/demo/demo/index.html).

## Usage

### Installation

```
npm install --save @polymer/iron-image
```

### In an HTML file

```html
<html>
  <head>
    <script type="module">
      import '@polymer/iron-image/iron-image.js';
    </script>
    <style>
      iron-image {
        width: 400px;
        height: 400px;
        background-color: lightgray;
      }
    </style>
  </head>
  <body>
    <iron-image sizing="cover" preload src="http://lorempixel.com/600/400"></iron-image>
  </body>
</html>
```

### 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-image/iron-image.js';

class ExampleElement extends PolymerElement {
  static get template() {
    return html`
      <iron-image sizing="contain" fade src="http://lorempixel.com/600/400"></iron-image>
    `;
  }
}

customElements.define('example-element', ExampleElement);
```

## 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/iron-image
cd iron-image
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
```
npm package: @polymer/iron-input
Description: An input element with data binding
Author: The Polymer Authors
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-input.svg)](https://www.npmjs.com/package/@polymer/iron-input)
[![Build status](https://travis-ci.org/PolymerElements/iron-input.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-input)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-input)

## &lt;iron-input&gt;
`<iron-input>` adds two-way binding and custom validators using `Polymer.IronValidatorBehavior`
to `<input>`.

See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-input),
  [Demo](https://www.webcomponents.org/element/@polymer/iron-input/demo/demo/index.html).

## Usage

### Installation
```
npm install --save @polymer/iron-input
```

### In an html file
```html
<html>
  <head>
    <script type="module">
      import '@polymer/iron-input/iron-input.js';
    </script>
  </head>
  <body>
    <iron-input>
      <input>
    </iron-input>
  </body>
</html>
```
### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/iron-input/iron-input.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <iron-input>
        <input>
      </iron-input>
    `;
  }
}
customElements.define('sample-element', SampleElement);
```

### Two-way binding

By default you can only get notified of changes to an `input`'s `value` due to user input:

```html
<input value="{{myValue::input}}">
```

`iron-input` adds the `bind-value` property that mirrors the `value` property, and can be used
for two-way data binding. `bind-value` will notify if it is changed either by user input or by script.

```html
<iron-input bind-value="{{bindValue}}">
  <input value="{{value::input}}">
</iron-input>
```

### Custom validators

You can use custom validators that implement `Polymer.IronValidatorBehavior` with `<iron-input>`.

```html
<iron-input auto-validate validator="my-custom-validator">
  <input placeholder="only 'cat' is valid">
 </iron-input>
```

### Stopping invalid input

It may be desirable to only allow users to enter certain characters. You can use the
`prevent-invalid-input` and `allowed-pattern` attributes together to accomplish this. This feature
is separate from validation, and `allowed-pattern` does not affect how the input is validated.

```html
<!-- only allow characters that match [0-9] -->
<iron-input allowed-pattern="[0-9]">
  <input pattern="\d{5}">
</iron-input>
```


## 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/iron-input
cd iron-input
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
```
npm package: @polymer/iron-jsonp-library
Description: Loads jsonp libraries
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-jsonp-library.svg)](https://www.npmjs.com/package/@polymer/iron-jsonp-library)
[![Build status](https://travis-ci.org/PolymerElements/iron-jsonp-library.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-jsonp-library)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-jsonp-library)

## &lt;iron-jsonp-library&gt;
Loads specified jsonp library.

See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-jsonp-library),
  [Demo](https://www.webcomponents.org/element/@polymer/iron-jsonp-library/demo/demo/index.html).

## Polymer.IronJsonpLibraryBehavior

`Polymer.IronJsonpLibraryBehavior` loads a jsonp library.
Multiple components can request same library, only one copy will load.

Some libraries require a specific global function be defined.
If this is the case, specify the `callbackName` property.

You should use an HTML Import to load library dependencies
when possible instead of using this element.

## Usage

### Installation
```
npm install --save @polymer/iron-jsonp-library
```

### In an html file
```html
<html>
  <head>
    <script type="module">
      import '@polymer/polymer/lib/elements/dom-bind.js';
      import '@polymer/iron-jsonp-library/iron-jsonp-library.js';
    </script>
  </head>
  <body>
    <dom-bind>
      <template>
        <iron-jsonp-library
            library-url="https://apis.google.com/js/plusone.js?onload=%%callback%%"
            notify-event="api-load"
            library-loaded="{{loaded}}">
        </iron-jsonp-library>
        <span>Library Loaded: [[loaded]]</span>
      </template>
    </dom-bind>
  </body>
</html>
```

### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/iron-jsonp-library/iron-jsonp-library.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <iron-jsonp-library
            library-url="https://apis.google.com/js/plusone.js?onload=%%callback%%"
            notify-event="api-load"
            library-loaded="{{loaded}}">
        </iron-jsonp-library>
        <span>Library Loaded: [[loaded]]</span>
    `;
  }
}
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/iron-jsonp-library
cd iron-jsonp-library
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
```
npm package: @polymer/iron-label
Description: A version of the `<label>` element that works with custom elements as well as native elements
Author: The Polymer Authors
Latest version: 3.0.1


[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-label.svg)](https://www.npmjs.com/package/@polymer/iron-label)
[![Build status](https://travis-ci.org/PolymerElements/iron-label.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-label)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-label)

## &lt;iron-label&gt;
`<iron-label>` provides a version of the `<label>` element that works with Custom Elements as well as native elements. All text in the `iron-label` will be applied to the target element as a screen-reader accessible description.

See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-label),
  [Demo](https://www.webcomponents.org/element/@polymer/iron-label/demo/demo/index.html).

## Usage

### Installation
```
npm install --save @polymer/iron-label
```

### In an html file
```html
<html>
  <head>
    <script type="module">
      import '@polymer/iron-label/iron-label.js';
      import '@polymer/paper-button/paper-button.js';
    </script>
  </head>
  <body>
    <iron-label>Label for a button
      <paper-button>button</paper-button>
    </iron-label>

    <iron-label for="foo">Label for the foo button</iron-label>
    <paper-button id="foo">Another button</paper-button>
  </body>
</html>
```
### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/iron-label/iron-label.js';
import '@polymer/paper-button/paper-button.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <iron-label>Label for a button
        <paper-button>button</paper-button>
      </iron-label>

      <iron-label for="foo">Label for the foo button</iron-label>
      <paper-button id="foo">Another button</paper-button>
    `;
  }
}
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/iron-label
cd iron-label
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
```
npm package: @polymer/iron-localstorage
Description: Provides access to local storage
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-localstorage.svg)](https://www.npmjs.com/package/@polymer/iron-localstorage)
[![Build status](https://travis-ci.org/PolymerElements/iron-localstorage.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-localstorage)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-localstorage)

⚠️ This element is deprecated ⚠️

## &lt;iron-localstorage&gt;
Element access to Web Storage API (window.localStorage) by keeping `value`
property in sync with localStorage.

Value is saved as json by default.

See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-localstorage),
  [Demo](https://www.webcomponents.org/element/@polymer/iron-localstorage/demo/demo/index.html).

## Usage

### Installation
```
npm install --save @polymer/iron-localstorage
```

### In an html file
```html
<html>
  <body>
    <iron-localstorage name="my-app-storage"></iron-localstorage>

    <script type="module">
      import '@polymer/iron-localstorage/iron-localstorage.js';

      const ls = document.querySelector('iron-localstorage');
      // initializes default if nothing has been stored
      function initializeDefaultCartoon() {
        ls.value = {
          name: "Mickey",
          hasEars: true
        };
      }

      ls.addEventListener(
          'iron-local-storage-load-empty', initializeDefaultCartoon);

      // use path set api to propagate changes to localstorage
      function makeModifications() {
        ls.set('value.name', "Minions");
        ls.set('value.hasEars', false);
      }
    </script>
  </body>
</html>
```

### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/iron-localstorage/iron-localstorage.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <iron-localstorage name="my-app-storage"
          value="{{cartoon}}"
          on-iron-localstorage-load-empty="initializeDefaultCartoon">
      </iron-localstorage>
    `;
  }

  static get properties() {
    return {
      cartoon: { type: Object },
    }
  }

  // initializes default if nothing has been stored
  initializeDefaultCartoon() {
    this.cartoon = {
      name: "Mickey",
      hasEars: true
    }
  }

  // use path set api to propagate changes to localstorage
  makeModifications() {
    this.set('cartoon.name', "Minions");
    this.set('cartoon.hasEars', false);
  }
}
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/iron-localstorage
cd iron-localstorage
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
```
npm package: @polymer/iron-media-query
Description: Lets you bind to a CSS media query
Author: The Polymer Authors
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-media-query.svg)](https://www.npmjs.com/package/@polymer/iron-media-query)
[![Build status](https://travis-ci.org/PolymerElements/iron-media-query.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-media-query)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-media-query)

## &lt;iron-media-query&gt;
`iron-media-query` can be used to data bind to a CSS media query.
The `query` property is a bare CSS media query.
The `query-matches` property is a boolean representing whether the page matches that media query.

See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-media-query),
  [Demo](https://www.webcomponents.org/element/@polymer/iron-media-query/demo/demo/index.html).

## Usage

### Installation
```
npm install --save @polymer/iron-media-query
```

### In an html file
```html
<html>
  <head>
    <script type="module">
      import '@polymer/iron-media-query/iron-media-query.js';
    </script>
  </head>
  <body>
    <iron-media-query query="(min-width: 600px)"></iron-media-query>
  </body>
</html>
```
### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/iron-media-query/iron-media-query.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <iron-media-query query="(min-width: 600px)"></iron-media-query>
    `;
  }
}
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/iron-media-query
cd iron-media-query
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
```
npm package: @polymer/iron-menu-behavior
Description: Provides accessible menu behavior
Author: The Polymer Authors
Latest version: 3.0.2

[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-menu-behavior.svg)](https://www.npmjs.com/package/@polymer/iron-menu-behavior)
[![Build status](https://travis-ci.org/PolymerElements/iron-menu-behavior.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-menu-behavior)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-menu-behavior)

## `IronMenuBehavior`, `IronMenubarBehavior`

`IronMenuBehavior` and `IronMenubarBehavior` implement accessible menu and
menubar behaviors.

See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-menu-behavior),
  [Demo](https://www.webcomponents.org/element/@polymer/iron-menu-behavior/demo/demo/index.html).

## Usage

### Installation

```
npm install --save @polymer/iron-menu-behavior
```

### In a Polymer 3 element

```js
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';

import {IronMenuBehavior} from '@polymer/iron-menu-behavior/iron-menu-behavior.js';

class SimpleMenu extends mixinBehaviors(IronMenuBehavior, PolymerElement) {
  static get template() {
    return html`
      <style>
        :host > ::slotted(*) {
          display: block;
        }

        :host > ::slotted(.iron-selected) {
          color: white;
          background-color: var(--google-blue-500);
        }
      </style>

      <slot></slot>
    `;
  }
}

customElements.define('simple-menu', SimpleMenu);
```

Then, in your HTML:

```html
<script type="module" src="./simple-menu.js"></script>

<style>
simple-menu .iron-selected {
  background-color: blue;
  color: white;
}
</style>

<simple-menu>
  <div role="menuitem">Item 0</div>
  <div role="menuitem">Item 1</div>
  <div role="menuitem" disabled aria-disabled="true">Item 2 (disabled)</div>
</simple-menu>
```

## 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/iron-menu-behavior
cd iron-menu-behavior
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
```
npm package: @polymer/iron-meta
Description: Useful for sharing information across a DOM tree
Author: The Polymer Authors
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-meta.svg)](https://www.npmjs.com/package/@polymer/iron-meta)
[![Build status](https://travis-ci.org/PolymerElements/iron-meta.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-meta)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-meta)

## &lt;iron-meta&gt;

`iron-meta` is a generic element you can use for sharing information across the
DOM tree.

See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-meta),
  [Demo](https://www.webcomponents.org/element/@polymer/iron-meta/demo/demo/index.html).

## Usage

### Installation

```
npm install --save @polymer/iron-meta
```

### In an HTML file

```html
<html>
  <head>
    <script type="module">
      import '@polymer/iron-meta/iron-meta.js';
    </script>
  </head>
  <body>
    <iron-meta key="info" value="foo"></iron-meta>
    <!-- Other elements reading from the key 'info' see the value 'foo'. -->
  </body>
</html>
```

### 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-meta/iron-meta.js';

class ExampleElement extends PolymerElement {
  static get properties() {
    return {
      prop: String,
    };
  }

  static get template() {
    return html`
      <iron-meta key="info" value="{{prop}}"></iron-meta>
      info: [[prop]]
    `;
  }
}

customElements.define('example-element', ExampleElement);
```

## 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/iron-meta
cd iron-meta
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
```
npm package: @polymer/iron-page-url
Description: Bidirectional data binding into the page's URL.
Latest version: 0.0.3


<!---

This README is automatically generated from the comments in these files:
iron-page-url.html

Edit those files, and our readme bot will duplicate them over here!
Edit this file, and the bot will squash your changes :)

The bot does some handling of markdown. Please file a bug if it does the wrong
thing! https://github.com/PolymerLabs/tedium/issues

-->

[![Build Status](https://travis-ci.org/PolymerElements/iron-page-url.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-page-url)

_[Demo and API Docs](https://elements.polymer-project.org/elements/iron-page-url)_


##&lt;iron-page-url&gt;

The `iron-page-url` element manages binding to and from the current URL.

iron-page-url is the first, and lowest level element in the Polymer team's
routing system. This is a beta release of iron-page-url as we continue work
on higher level elements, and as such iron-page-url may undergo breaking
changes.

#### Properties

When the URL is: `/search?query=583#details` iron-page-url's properties will be:

* path: `'/search'`
* query: `'query=583'`
* hash: `'details'`

These bindings are bidirectional. Modifying them will in turn modify the URL.

iron-page-url is only active while it is attached to the document.

#### Links

While iron-page-url is active in the document it will intercept clicks on links
within your site, updating the URL pushing the updated URL out through the
databinding system. iron-page-url only intercepts clicks with the intent to
open in the same window, so middle mouse clicks and ctrl/cmd clicks work fine.

You can customize this behavior with the `urlSpaceRegex`.

#### Dwell Time

iron-page-url protects against accidental history spamming by only adding
entries to the user's history if the URL stays unchanged for `dwellTime`
milliseconds.
npm package: @polymer/iron-pages
Description: Organizes a set of pages and shows one at a time
Author: The Polymer Authors
Latest version: 3.0.1

[![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://webcomponents.org/element/@polymer/iron-pages)

## &lt;iron-pages&gt;

`iron-pages` is used to select one of its children to show. One use is to cycle
through a list of children "pages".

See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-pages),
  [Demo](https://www.webcomponents.org/element/@polymer/iron-pages/demo/demo/index.html).

## Usage

### Installation

```
npm install --save @polymer/iron-pages
```

### In an HTML file

```html
<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>
```

### 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);
```

## 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/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
```
npm package: @polymer/iron-range-behavior
Description: Provides a behavior for something with a minimum and maximum value
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-range-behavior.svg)](https://www.npmjs.com/package/@polymer/iron-range-behavior)
[![Build status](https://travis-ci.org/PolymerElements/iron-range-behavior.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-range-behavior)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-range-behavior)

## `IronRangeBehavior`

`IronRangeBehavior` provides the behavior for something with a minimum to
maximum range.

See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-range-behavior),
  [Demo](https://www.webcomponents.org/element/@polymer/iron-range-behavior/demo/demo/index.html).

## Usage

### Installation

```
npm install --save @polymer/iron-range-behavior
```

### In a Polymer 3 element

```js
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';

import {IronRangeBehavior} from '@polymer/iron-range-behavior/iron-range-behavior.js';

class SimpleRange extends mixinBehaviors(IronRangeBehavior, PolymerElement) {
  static get template() {
    return html`
      <style>
        :host {
          display: inline-flex;
          align-items: center;
        }

        :host > * {
          margin: 0.125em;
        }

        #barContainer {
          display: inline-block;
          position: relative;
          border: 0.125em solid gray;
          height: 1em;
          width: 12em;
        }

        #bar {
          position: absolute;
          top: 0.125em;
          bottom: 0.125em;
          left: 0.125em;
          background-color: blue;
        }
      </style>

      <span>[[ratio]]%</span>
      <div id="barContainer"><div id="bar" style="width: {{ratio}}%;"></div></div>
    `;
  }
}

customElements.define('simple-range', SimpleRange);
```

Then, in your HTML:

```html
<simple-range min="0" max="200" value="120"></simple-range>
```

## 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/iron-range-behavior
cd iron-range-behavior
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
```
npm package: @polymer/iron-resizable-behavior
Description: Coordinates the flow of resizeable elements
Author: The Polymer Authors
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-resizable-behavior.svg)](https://www.npmjs.com/package/@polymer/iron-resizable-behavior)
[![Build status](https://travis-ci.org/PolymerElements/iron-resizable-behavior.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-resizable-behavior)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-resizable-behavior)

## IronResizableBehavior

`IronResizableBehavior` is a behavior that can be used in Polymer elements to
coordinate the flow of resize events between "resizers" (elements that control the
size or hidden state of their children) and "resizables" (elements that need to be
notified when they are resized or un-hidden by their parents in order to take
action on their new measurements).

Elements that perform measurement should add the `IronResizableBehavior` behavior to
their element definition and listen for the `iron-resize` event on themselves.
This event will be fired when they become showing after having been hidden,
when they are resized explicitly by another resizable, or when the window has been
resized.

Note, the `iron-resize` event is non-bubbling.

See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-resizable-behavior),
  [Demo](https://www.webcomponents.org/element/@polymer/iron-resizable-behavior/demo/demo/index.html).

## Usage

### Installation
```
npm install --save @polymer/iron-resizable-behavior
```

### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';

class SampleElement extends mixinBehaviors([IronResizableBehavior], PolymerElement) {
  static get template() {
    return html`
      <style>
        :host {
          display: block;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
        }
      </style>
      <span>width: [[width]] </span>
      <span>height: [[height]]</span>
    `;
  }

  static get properties() {
    return {
      width: Number,
      height: Number,
    }
  }

  connectedCallback() {
    super.connectedCallback();
    this.addEventListener('iron-resize', this.onIronResize.bind(this));
  }

  onIronResize() {
    this.width = this.offsetWidth;
    this.height = this.offsetHeight;
  }
}
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/iron-resizable-behavior
cd iron-resizable-behavior
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
```
npm package: @polymer/iron-scroll-target-behavior
Description: Allows to define a scroller target
Author: The Polymer Authors
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-scroll-target-behavior.svg)](https://www.npmjs.com/package/@polymer/iron-scroll-target-behavior)
[![Build status](https://travis-ci.org/PolymerElements/iron-scroll-target-behavior.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-scroll-target-behavior)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-scroll-target-behavior)

## IronScrollTargetBehavior

`IronScrollTargetBehavior` allows an element to respond to scroll events from a
designated scroll target.

Elements that consume this behavior can override the `_scrollHandler`
method to add logic on the scroll event.

See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-scroll-target-behavior),
  [Demo](https://www.webcomponents.org/element/@polymer/iron-scroll-target-behavior/demo/demo/index.html).

## Usage

### Installation
```
npm install --save @polymer/iron-scroll-target-behavior
```

### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {IronScrollTargetBehavior} from '@polymer/iron-scroll-target-behavior/iron-scroll-target-behavior.js';

class SampleElement extends mixinBehaviors(IronScrollTargetBehavior, PolymerElement) {
  static get template() {
    return html`
      <p>Scrollable content here</p>
    `;
  }

  _scrollHandler() {
    console.log('_scrollHandler', this._scrollTop, this._scrollLeft);
  }
}
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/iron-scroll-target-behavior
cd iron-scroll-target-behavior
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
```
npm package: @polymer/iron-signals
Description: Basic publish-subscribe functionality
Latest version: 0.0.3


<!---

This README is automatically generated from the comments in these files:
iron-signals.html

Edit those files, and our readme bot will duplicate them over here!
Edit this file, and the bot will squash your changes :)

The bot does some handling of markdown. Please file a bug if it does the wrong
thing! https://github.com/PolymerLabs/tedium/issues

-->

[![Build Status](https://travis-ci.org/PolymerElements/iron-signals.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-signals)

_[Demo and API Docs](https://elements.polymer-project.org/elements/iron-signals)_


##&lt;iron-signals&gt;

`iron-signals` provides basic publish-subscribe functionality.

Note: avoid using `iron-signals` whenever you can use
a controller (parent element) to mediate communication
instead.

To send a signal, fire a custom event of type `iron-signal`, with
a detail object containing `name` and `data` fields.

```javascript
this.fire('iron-signal', {name: 'hello', data: null});
```

To receive a signal, listen for `iron-signal-<name>` event on a
`iron-signals` element.

  <iron-signals on-iron-signal-hello="{{helloSignal}}">

You can fire a signal event from anywhere, and all
`iron-signals` elements will receive the event, regardless
of where they are in DOM.