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 };