Gathering detailed insights and metrics for @polymer/paper-listbox
Gathering detailed insights and metrics for @polymer/paper-listbox
Installations
npm install @polymer/paper-listboxDeveloper
Developer Guide
BETA
Module System
CommonJS
Min. Node Version
Typescript Support
No
Node Version
10.9.0
NPM Version
6.4.1
Statistics
21 Stars
139 Commits
16 Forks
17 Watching
15 Branches
26 Contributors
Updated on 29 Apr 2022
Bundle Size
135.58 kB
Minified
38.97 kB
Minified + Gzipped
Languages
HTML (52.12%)
JavaScript (47.88%)
Total Downloads
Cumulative downloads
Total Downloads
2,660,769
Last day
21.1%
1,816
Compared to previous day
Last week
8%
11,133
Compared to previous week
Last month
-10.7%
46,246
Compared to previous month
Last year
0.8%
606,936
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Versions
<paper-listbox>
<paper-listbox> implements an accessible listbox control with Material Design styling. The focused item
is highlighted, and the selected item has bolded text.
1<paper-listbox> 2 <paper-item>Item 1</paper-item> 3 <paper-item>Item 2</paper-item> 4</paper-listbox>
An initial selection can be specified with the selected attribute.
1<paper-listbox selected="0"> 2 <paper-item>Item 1</paper-item> 3 <paper-item>Item 2</paper-item> 4</paper-listbox>
Make a multi-select listbox with the multi attribute. Items in a multi-select listbox can be deselected,
and multiple item can be selected.
1<paper-listbox multi> 2 <paper-item>Item 1</paper-item> 3 <paper-item>Item 2</paper-item> 4</paper-listbox>
Styling
The following custom properties and mixins are available for styling:
| Custom property | Description | Default |
|---|---|---|
--paper-listbox-background-color | Menu background color | --primary-background-color |
--paper-listbox-color | Menu foreground color | --primary-text-color |
--paper-listbox | Mixin applied to the listbox | {} |
Accessibility
<paper-listbox> has role="listbox" by default. A multi-select listbox will also have
aria-multiselectable set. It implements key bindings to navigate through the listbox with the up and
down arrow keys, esc to exit the listbox, and enter to activate a listbox item. Typing the first letter
of a listbox item will also focus it.
See: Documentation, Demo.
Usage
Installation
npm install --save @polymer/paper-listbox
In an html file
1<html> 2 <head> 3 <script type="module"> 4 import '@polymer/paper-listbox/paper-listbox.js'; 5 </script> 6 </head> 7 <body> 8 <paper-listbox> 9 <div role="option">item 1</div> 10 <div role="option">item 2</div> 11 <div role="option">item 3</div> 12 </paper-listbox> 13 </body> 14</html>
In a Polymer 3 element
1import {PolymerElement, html} from '@polymer/polymer'; 2import '@polymer/paper-listbox/paper-listbox.js'; 3 4class SampleElement extends PolymerElement { 5 static get template() { 6 return html` 7 <paper-listbox> 8 <div role="option">item 1</div> 9 <div role="option">item 2</div> 10 <div role="option">item 3</div> 11 </paper-listbox> 12 `; 13 } 14} 15customElements.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
1git clone https://github.com/PolymerElements/paper-listbox 2cd paper-listbox 3npm install 4npm install -g polymer-cli
Running the demo locally
1polymer serve --npm 2open http://127.0.0.1:<port>/demo/
Running the tests
1polymer test --npm
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
Found 3/24 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 10 are checked with a SAST tool
Reason
29 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-h6ch-v84p-w6p9
- Warn: Project is vulnerable to: GHSA-qh2h-chj9-jffq
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
- Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm
- Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
- Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-xf5p-87ch-gxw2
- Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
- Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m / GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-wvhm-4hhf-97x9
- Warn: Project is vulnerable to: GHSA-h4hr-7fg3-h35w
- Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg
- Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96
- Warn: Project is vulnerable to: GHSA-3949-f494-cm99
- Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
- Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
Score
1.6
/10
Last Scanned on 2024-11-25
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More