106 lines
2.6 KiB
TypeScript
106 lines
2.6 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright 2020 Google LLC. All Rights Reserved.
|
|
* Licensed under the Apache License, Version 2.0 (the 'License');
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an 'AS IS' BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*
|
|
*/
|
|
|
|
import '@material/mwc-tab-bar';
|
|
|
|
import {html, LitElement} from 'lit';
|
|
import {customElement, property} from 'lit/decorators.js';
|
|
|
|
import {styles} from './styles.css.js';
|
|
import './tab';
|
|
|
|
/**
|
|
* A tabbed panel.
|
|
*/
|
|
@customElement('me-tabs')
|
|
export class Tabs extends LitElement {
|
|
static styles = styles;
|
|
|
|
get panels() {
|
|
const slot = this.shadowRoot!.querySelector('slot');
|
|
return slot &&
|
|
slot.assignedElements().filter(e => e instanceof TabbedPanel) ||
|
|
[];
|
|
}
|
|
|
|
renderPanelIcon(panel: Element) {
|
|
if (panel instanceof TabbedPanel) {
|
|
return html`
|
|
<me-tab
|
|
icon='${panel.icon}'
|
|
label='${panel.label}'
|
|
></me-tab>`;
|
|
}
|
|
return html``;
|
|
}
|
|
|
|
// Mystery.. But this is required for mwc-tab-bar to correctly select the
|
|
// initial panel.
|
|
firstUpdated() {
|
|
this.requestUpdate();
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<div class="TabHeader">
|
|
<mv-link></mv-link>
|
|
<mwc-tab-bar
|
|
@MDCTabBar:activated=${this.tabActivated}>
|
|
${this.panels.map(this.renderPanelIcon)}
|
|
</mwc-tab-bar>
|
|
</div>
|
|
<div class="TabPanelContainer">
|
|
<slot @slotchange=${() => {
|
|
this.requestUpdate();
|
|
}}></slot>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
tabActivated(event: CustomEvent<{index: number}>) {
|
|
const targetIndex = event.detail.index;
|
|
this.panels.forEach((panel, index) => {
|
|
(panel as TabbedPanel).selected = index === targetIndex;
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* A panel of content, plus an icon and label to display in the tab bar.
|
|
*/
|
|
@customElement('me-tabbed-panel')
|
|
export class TabbedPanel extends LitElement {
|
|
static styles = styles;
|
|
|
|
@property({type: String, reflect: true}) icon = '';
|
|
@property({type: String}) label = '';
|
|
@property({type: Boolean}) selected = false;
|
|
|
|
render() {
|
|
return html`
|
|
<slot class="TabPanel" ?selected=${this.selected}></slot>
|
|
`;
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'me-tabbed-panel': TabbedPanel;
|
|
'me-tabs': Tabs;
|
|
}
|
|
}
|