// Copyright 2021 The Chromium Authors // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */ import * as Lit from '../../lit/lit.js'; import * as VisualLogging from '../../visual_logging/visual_logging.js'; import expandableListStyles from './expandableList.css.js'; const {html, Directives: {ifDefined}} = Lit; export interface ExpandableListData { rows: Lit.TemplateResult[]; title?: string; } export class ExpandableList extends HTMLElement { readonly #shadow = this.attachShadow({mode: 'open'}); #expanded = false; #rows: Lit.TemplateResult[] = []; #title?: string; set data(data: ExpandableListData) { this.#rows = data.rows; this.#title = data.title; this.#render(); } #onArrowClick(): void { this.#expanded = !this.#expanded; this.#render(); } #render(): void { if (this.#rows.length < 1) { return; } // Disabled until https://crbug.com/1079231 is fixed. // clang-format off Lit.render( html`

${this.#rows.length > 1 ? html` ` : Lit.nothing}

${this.#rows.filter((_, index) => (this.#expanded || index === 0)).map(row => html` ${row} `)}

`, this.#shadow, {host: this}); // clang-format on } } customElements.define('devtools-expandable-list', ExpandableList); declare global { interface HTMLElementTagNameMap { 'devtools-expandable-list': ExpandableList; } }