50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
|
|
import { initials } from './copy';
|
|
|
|
/** Overlapping initials (members of a project, people on a ticket). */
|
|
@Component({
|
|
selector: 'ts-avatars',
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
template: `
|
|
@for (name of names().slice(0, max()); track $index) {
|
|
<span class="ts-avatar" [attr.title]="name">{{ initialsOf(name) }}</span>
|
|
}
|
|
@if (names().length > max()) {
|
|
<span class="ts-avatar ts-avatar--more"
|
|
>+{{ names().length - max() }}</span
|
|
>
|
|
}
|
|
`,
|
|
styles: `
|
|
:host {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding-left: 0.375rem;
|
|
}
|
|
.ts-avatar {
|
|
display: inline-grid;
|
|
place-items: center;
|
|
width: var(--ts-avatar-size, 1.75rem);
|
|
height: var(--ts-avatar-size, 1.75rem);
|
|
margin-left: -0.375rem;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--ts-surface);
|
|
background: color-mix(in srgb, var(--ts-brand) 18%, var(--ts-surface));
|
|
color: color-mix(in srgb, var(--ts-brand) 70%, var(--ts-ink));
|
|
font-family: var(--ts-font-mono);
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0;
|
|
}
|
|
.ts-avatar--more {
|
|
background: var(--ts-sunken);
|
|
color: var(--ts-muted);
|
|
}
|
|
`,
|
|
})
|
|
export class AvatarsComponent {
|
|
readonly names = input.required<readonly string[]>();
|
|
readonly max = input(5);
|
|
protected readonly initialsOf = initials;
|
|
}
|