Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | 125x 126x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 1x 1x 1x 1x 1x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 57x 57x 56x 56x 125x 125x 125x 125x 124x 124x 124x 124x 124x 125x 125x 125x 125x 125x | import { css, html, PropertyValueMap, TemplateResult } from 'lit';
import { property } from 'lit/decorators.js';
import { RapidElement } from '../RapidElement';
import { getClasses } from '../utils';
export class Tab extends RapidElement {
static get styles() {
return css`
:host {
display: none;
flex-direction: column;
min-height: 0;
pointer-events: none;
}
:host(.selected) {
display: flex;
flex-grow: 1;
pointer-events: auto;
}
`;
}
@property({ type: String })
name: string;
@property({ type: String })
icon: string;
@property({ type: Boolean })
selected = false;
@property({ type: Boolean })
alert = false;
@property({ type: Boolean })
hidden = false;
@property({ type: Boolean })
hideEmpty = false;
// show just that there is activity instead of count
@property({ type: Boolean })
activity = false;
@property({ type: Number })
count = 0;
@property({ type: Boolean })
checked = false;
@property({ type: Boolean })
dirty = false;
public updated(
changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
): void {
super.updated(changes);
if (changes.has('selected')) {
this.classList.toggle('selected', this.selected);
}
}
public hasBadge() {
return this.count > 0;
}
public handleDetailsChanged(event: CustomEvent) {
if ('dirty' in event.detail) {
this.dirty = event.detail.dirty;
}
if ('count' in event.detail) {
this.count = event.detail.count;
if (this.hideEmpty) {
this.hidden = this.count === 0;
}
}
}
public render(): TemplateResult {
return html`<slot
@temba-details-changed=${this.handleDetailsChanged}
class="${getClasses({ selected: this.selected })}"
></slot> `;
}
}
|