https://wpt.fyi/node_modules/@polymer/paper-listbox/paper-listbox.js

1/**
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at
5http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
6http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
7found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
8part of the polymer project is also subject to an additional IP rights grant
9found at http://polymer.github.io/PATENTS.txt
10*/
11import '/node_modules/@polymer/polymer/polymer-legacy.js';
12import '/node_modules/@polymer/paper-styles/default-theme.js';
13
14import {IronMenuBehavior} from '/node_modules/@polymer/iron-menu-behavior/iron-menu-behavior.js';
15import {Polymer} from '/node_modules/@polymer/polymer/lib/legacy/polymer-fn.js';
16import {html} from '/node_modules/@polymer/polymer/lib/utils/html-tag.js';
17
18/**
19Material design:
20[Menus](https://www.google.com/design/spec/components/menus.html)
21
22`<paper-listbox>` implements an accessible listbox control with Material Design
23styling. The focused item is highlighted, and the selected item has bolded text.
24
25    <paper-listbox>
26      <paper-item>Item 1</paper-item>
27      <paper-item>Item 2</paper-item>
28    </paper-listbox>
29
30An initial selection can be specified with the `selected` attribute.
31
32    <paper-listbox selected="0">
33      <paper-item>Item 1</paper-item>
34      <paper-item>Item 2</paper-item>
35    </paper-listbox>
36
37Make a multi-select listbox with the `multi` attribute. Items in a multi-select
38listbox can be deselected, and multiple item can be selected.
39
40    <paper-listbox multi>
41      <paper-item>Item 1</paper-item>
42      <paper-item>Item 2</paper-item>
43    </paper-listbox>
44
45### Styling
46
47The following custom properties and mixins are available for styling:
48
49Custom property | Description | Default
50----------------|-------------|----------
51`--paper-listbox-background-color`   | Menu background color |
52`--primary-background-color`
53`--paper-listbox-color`              | Menu foreground color |
54`--primary-text-color`
55`--paper-listbox`                    | Mixin applied to the listbox | `{}`
56
57### Accessibility
58
59`<paper-listbox>` has `role="listbox"` by default. A multi-select listbox will
60also have `aria-multiselectable` set. It implements key bindings to navigate
61through the listbox with the up and down arrow keys, esc to exit the listbox,
62and enter to activate a listbox item. Typing the first letter of a listbox item
63will also focus it.
64
65@group Paper Elements
66@element paper-listbox
67@demo demo/index.html
68*/
69Polymer({
70  _template: html`
71    <style>
72      :host {
73        display: block;
74        padding: 8px 0;
75
76        background: var(--paper-listbox-background-color, var(--primary-background-color));
77        color: var(--paper-listbox-color, var(--primary-text-color));
78
79        @apply --paper-listbox;
80      }
81    </style>
82
83    <slot></slot>
84`,
85
86  is: 'paper-listbox',
87  behaviors: [IronMenuBehavior],
88
89  /** @private */
90  hostAttributes: {role: 'listbox'}
91});