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 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x | 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: String })
selectionColor: string;
@property({ type: String })
selectionBackground: string;
@property({ type: String })
borderColor: string = 'var(--color-widget-border)';
@property({ type: String })
activityColor: string = `var(--color-link-primary)`;
@property({ type: Boolean })
selected = false;
@property({ type: Boolean })
notify = 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> `;
}
}
|