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 | 92x 94x 92x 92x 92x 92x 95x 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, TemplateResult } from 'lit';
import { property } from 'lit/decorators.js';
import { RapidElement } from '../RapidElement';
export class ContactName extends RapidElement {
@property({ type: String })
name: string;
@property({ type: String })
urn: string;
@property({ type: Number, attribute: 'icon-size' })
size = 20;
static get styles() {
return css`
:host {
display: flex;
align-items: center;
}
temba-urn {
margin-right: 0.2em;
}
.name {
font-size: var(--contact-name-font-size, 1.5rem);
overflow: hidden;
max-height: 2rem;
line-height: 2rem;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
text-overflow: ellipsis;
}
`;
}
public render(): TemplateResult {
const urn = this.urn
? html`<temba-urn size=${this.size} urn=${this.urn}></temba-urn>`
: null;
return html`
${urn}
<div class="name">
${this.name ? this.name : this.urn ? this.urn.split(':')[1] : ''}
</div>
<slot></slot>
`;
}
}
|