Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@polymer/iron-dropdown

Package Overview
Dependencies
Maintainers
9
Versions
32
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@polymer/iron-dropdown - npm Package Compare versions

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

demo/polymer.svg
iron-dropdown-scroll-manager.d.ts
iron-dropdown.d.ts

15

demo/grow-height-animation.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 { NeonAnimationBehavior } from '@polymer/neon-animation/neon-animation-behavior.js';
import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
import {NeonAnimationBehavior} from '@polymer/neon-animation/neon-animation-behavior.js';
import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
Polymer({

@@ -15,0 +16,0 @@ is: 'expand-animation',

17

demo/x-select.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
*/

@@ -13,4 +14,6 @@ import '../iron-dropdown.js';

import './grow-height-animation.js';
import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import '@polymer/neon-animation/animations/fade-in-animation.js';
import '@polymer/neon-animation/animations/fade-out-animation.js';
import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
Polymer({

@@ -17,0 +20,0 @@ _template: html`

13

iron-dropdown-scroll-manager.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
*/

@@ -15,2 +16,2 @@ import * as ironScrollManager from '@polymer/iron-overlay-behavior/iron-scroll-manager.js';

*/
export { ironScrollManager as IronDropdownScrollManager };
export {ironScrollManager as IronDropdownScrollManager};

44

iron-dropdown.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
*/
/*TODO remove this import */
import '@polymer/polymer/polymer-legacy.js';
import {IronA11yKeysBehavior} from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
import {IronControlState} from '@polymer/iron-behaviors/iron-control-state.js';
import {IronOverlayBehavior, IronOverlayBehaviorImpl} from '@polymer/iron-overlay-behavior/iron-overlay-behavior.js';
import {NeonAnimationRunnerBehavior} from '@polymer/neon-animation/neon-animation-runner-behavior.js';
import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
/**

@@ -30,24 +40,8 @@ `<iron-dropdown>` is a generalized element that is useful when you have

In the above example, the `<div>` assigned to the `dropdown-content` slot will be
hidden until the dropdown element has `opened` set to true, or when the `open`
method is called on the element.
In the above example, the `<div>` assigned to the `dropdown-content` slot will
be hidden until the dropdown element has `opened` set to true, or when the
`open` method is called on the element.
@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 { IronControlState } from '@polymer/iron-behaviors/iron-control-state.js';
import { IronOverlayBehavior, IronOverlayBehaviorImpl } from '@polymer/iron-overlay-behavior/iron-overlay-behavior.js';
import { NeonAnimationRunnerBehavior } from '@polymer/neon-animation/neon-animation-runner-behavior.js';
import './iron-dropdown-scroll-manager.js';
import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { IronA11yKeysBehavior } from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
Polymer({

@@ -54,0 +48,0 @@ _template: html`

9

manifest.json

@@ -13,6 +13,3 @@ {

},
"index.html": {
"convertedUrl": "index.html",
"exports": {}
},
"index.html": null,
"demo/index.html": {

@@ -37,8 +34,4 @@ "convertedUrl": "demo/index.html",

"exports": {}
},
"test/x-scrollable-element.html": {
"convertedUrl": "test/x-scrollable-element.html",
"exports": {}
}
}
}

36

package.json

@@ -16,25 +16,17 @@ {

"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-test-helpers": "^3.0.0-pre.21",
"@polymer/iron-demo-helpers": "^3.0.0-pre.20",
"@polymer/iron-image": "^3.0.0-pre.20",
"@polymer/iron-test-helpers": "^3.0.0-pre.20",
"@webcomponents/webcomponentsjs": "^2.0.0",
"wct-browser-legacy": "^1.0.1",
"web-animations-js": "^2.3.1",
"@polymer/iron-image": "^3.0.0-pre.21",
"wct-browser-legacy": "^1.0.1",
"@webcomponents/webcomponentsjs": "^2.0.0"
"webmat": "^0.2.2",
"@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-dropdown.js",

@@ -44,6 +36,6 @@ "author": "The Polymer Authors",

"@polymer/polymer": "^3.0.0",
"@polymer/iron-behaviors": "^3.0.0-pre.21",
"@polymer/iron-overlay-behavior": "^3.0.0-pre.21",
"@polymer/neon-animation": "^3.0.0-pre.21"
"@polymer/iron-behaviors": "^3.0.0-pre.20",
"@polymer/iron-overlay-behavior": "^3.0.0-pre.20",
"@polymer/neon-animation": "^3.0.0-pre.20"
}
}

124

README.md

@@ -0,35 +1,115 @@

[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-dropdown.svg)](https://www.npmjs.com/package/@polymer/iron-dropdown)
[![Build status](https://travis-ci.org/PolymerElements/iron-dropdown.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-dropdown)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-dropdown)
_[Demo and API docs](https://elements.polymer-project.org/elements/iron-dropdown)_
## &lt;iron-dropdown&gt;
`<iron-dropdown>` displays content inside a fixed-position container,
positioned relative to another element.
## &lt;iron-dropdown&gt;
See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-dropdown),
[Demo](https://www.webcomponents.org/element/@polymer/iron-dropdown/demo/demo/index.html).
`<iron-dropdown>` is a generalized element that is useful when you have
hidden content (`dropdown-content`) that is revealed due to some change in
state that should cause it to do so.
## Usage
Note that this is a low-level element intended to be used as part of other
composite elements that cause dropdowns to be revealed.
### Installation
Examples of elements that might be implemented using an `iron-dropdown`
include comboboxes, menubuttons, selects. The list goes on.
```
npm install --save @polymer/iron-dropdown
```
The `<iron-dropdown>` element exposes attributes that allow the position
of the `dropdown-content` relative to the `dropdown-trigger` to be
configured.
### In an HTML file
```html
<iron-dropdown horizontal-align="right" vertical-align="top">
<div slot="dropdown-content">Hello!</div>
</iron-dropdown>
<html>
<head>
<script type="module">
import '@polymer/iron-dropdown/iron-dropdown.js';
</script>
<style>
#container {
display: inline-block;
}
iron-dropdown {
border: 1px solid gray;
background: white;
font-size: 2em;
}
</style>
</head>
<body>
<div id="container">
<button onclick="dropdown.open();">open the iron-dropdown</button>
<iron-dropdown id="dropdown" no-overlap>
<div slot="dropdown-content">Hello!</div>
</iron-dropdown>
</div>
</body>
</html>
```
In the above example, the `<div>` assigned to the `dropdown-content` slot will be
hidden until the dropdown element has `opened` set to true, or when the `open`
method is called on the element.
### In a Polymer 3 element
### Changes in 2.0
- Removed the private property `_focusTarget` which was deprecated.
- `neon-animation 2.0` doesn't import the Web Animations polyfill, so you'll have to import it ([see example](demo/index.html))
- Distribution moved from the `class="dropdown-content"` to `slot="dropdown-content"`
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/iron-dropdown/iron-dropdown.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
<style>
:host {
display: inline-block;
}
iron-dropdown {
border: 1px solid gray;
background: white;
font-size: 2em;
}
</style>
<button on-click="_openDropdown">open the dropdown</button>
<iron-dropdown id="dropdown" horizontal-align="right" vertical-align="top">
<div slot="dropdown-content">Hello!</div>
</iron-dropdown>
`;
}
_openDropdown() {
this.$.dropdown.open();
}
}
customElements.define('sample-element', SampleElement);
```
In the above example, the `<div>` assigned to the `dropdown-content` slot will
be hidden until the dropdown element has `opened` set to true, or when the
`open` method is called on the element.
## 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-dropdown
cd iron-dropdown
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
```
.github/CODEOWNERS
.github/ISSUE_TEMPLATE.md
.travis.yml
gen-tsd.json
index.html
test/index.html
test/iron-dropdown.html
test/x-scrollable-element.html
wct.conf.json
demo/index.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc