eriklumme

import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';

registerStyles('vaadin-combo-box-item', css`
    .symbol { font-weight: bold }
    .name { font-size: 0.8rem }
`);

eriklumme

<vaadin-combo-box 
    @filter-changed=${this.onStockSearchStringChanged} 
    .renderer=${this.renderSearchBoxItems}
    id="stock-search" 
    label="Search for a stock symbol" 
    item-label-path="symbol">
</vaadin-combo-box>

...

eriklumme

private searchApiURL = 'https://financialmodelingprep.com/api/v3/search?query=<query>&exchange=NASDAQ';

private onStockSearchStringChanged(filterEvent: any) {
    let searchString = filterEvent.detail.value;
    if (!searchString) {
        this.stockSearchBox.filteredItems  = [];
        return;
    }

    const url = this.searchApiURL.replace('<query>', searchString);

eriklumme

import {LitElement, html, css, customElement, property, query} from 'lit-element';
...
import '@vaadin/vaadin-combo-box';
import '@vaadin/vaadin-button';
import '@vaadin/vaadin-ordered-layout';

...

@query("#stock-search")
private stockSearchBox: any;

eriklumme

:host {
    display: flex;
    flex-flow: column;
    box-sizing: border-box;
    padding: var(--lumo-space-l);
}

eriklumme

static get styles() {
    return css`
    .percentage {
        color: green;
        font-weight: bold;
    }
    .percentage.negative {
        color: red;
    }
`;

eriklumme

render() {
    return html`
        <vaadin-grid .items=${this.items}>
            <vaadin-grid-column path="symbol"></vaadin-grid-column>
            <vaadin-grid-column path="price"></vaadin-grid-column>
            <vaadin-grid-column .renderer=${this.renderPercentage} header="Percentage change"></vaadin-grid-column>
        </vaadin-grid>
    `;
}

eriklumme

firstUpdated() {
    this.updateGrid();
}

private updateGrid() {
    StockService.getStocks().then(stocks => {
        let symbols = stocks.map(stock => stock.symbol).concat(',');
        let url = this.stockAPIBaseUrl + symbols;

        fetch(url)

eriklumme

@property({ type: Array })
private items = [];

firstUpdated() {
    StockService.getStocks().then(stocks => this.items = stocks);
}

eriklumme

render() {
    return html`
        <vaadin-grid .items=${this.items}>
            <vaadin-grid-column path="symbol"></vaadin-grid-column>
        </vaadin-grid>
    `;
}