first commit

libs/web/tracker/presenters/src/lib/ui/avatars.ts

@@ -0,0 +1,49 @@
+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;
+}