github.com/web-platform-tests/wpt.fyi@v0.0.0-20240530210107-70cf978996f1/webapp/components/channel-picker.js (about) 1 import '../node_modules/@polymer/paper-dropdown-menu/paper-dropdown-menu.js'; 2 import '../node_modules/@polymer/paper-item/paper-icon-item.js'; 3 import '../node_modules/@polymer/paper-checkbox/paper-checkbox.js'; 4 import '../node_modules/@polymer/paper-listbox/paper-listbox.js'; 5 import '../node_modules/@polymer/polymer/lib/elements/dom-repeat.js'; 6 import { html, PolymerElement } from '../node_modules/@polymer/polymer/polymer-element.js'; 7 import './display-logo.js'; 8 import { Channels, DefaultBrowserNames, ProductInfo } from './product-info.js'; 9 10 class ChannelPicker extends ProductInfo(PolymerElement) { 11 static get is() { 12 return 'channel-picker'; 13 } 14 15 static get template() { 16 return html` 17 <paper-dropdown-menu label="Channel" no-animations> 18 <paper-listbox slot="dropdown-content" selected="{{ channel }}" attr-for-selected="value"> 19 <paper-item value="any">Any</paper-item> 20 <template is="dom-repeat" items="[[channels]]" as="channel"> 21 <paper-icon-item value="[[channel]]"> 22 <display-logo slot="item-icon" product="[[productWithChannel(browser, channel)]]" small></display-logo> 23 [[displayName(channel)]] 24 </paper-icon-item> 25 </template> 26 </paper-listbox> 27 </paper-dropdown-menu> 28 `; 29 } 30 31 static get properties() { 32 return { 33 browser: { 34 type: String, 35 value: DefaultBrowserNames[0], 36 notify: true, 37 }, 38 channel: { 39 type: String, 40 value: 'stable', 41 notify: true, 42 }, 43 channels: { 44 type: Array, 45 value: Array.from(Channels), 46 } 47 }; 48 } 49 50 productWithChannel(browser, channel) { 51 return { 52 browser_name: browser, 53 labels: [channel], 54 }; 55 } 56 } 57 window.customElements.define(ChannelPicker.is, ChannelPicker); 58 export { ChannelPicker };