Events

<ProfilePicture
  extCustomerId="demo-user-1769431807927-pd9dtmn1"
  alt="Kerry Nicholson"
  interactive={{ pressable: true }}
  onLoad={() => console.log('Image loaded')}
  onError={() => console.log('Image failed')}
  onCdnError={(e) => console.log('CDN error:', e.error)}
  onClick={(detail) => console.log('Clicked:', detail)}
/>

<profile-picture
  id="avatar"
  ext-customer-id="demo-user-1769431807927-pd9dtmn1"
  alt="Kerry Nicholson"
  interactive='{"pressable": true}'
></profile-picture>

<script>
  const avatar = document.getElementById('avatar');
  avatar.addEventListener('load', () => console.log('Image loaded'));
  avatar.addEventListener('error', () => console.log('Image failed'));
  avatar.addEventListener('cdn-error', (e) => console.log('CDN error:', e.detail.error));
  avatar.addEventListener('profile-picture-click', (e) => console.log('Clicked:', e.detail));
</script>

<template>
  <profile-picture
    ext-customer-id="demo-user-1769431807927-pd9dtmn1"
    alt="Kerry Nicholson"
    :interactive="JSON.stringify({ pressable: true })"
    @load="handleLoad"
    @error="handleError"
    @profile-picture-click="handleClick"
  />
</template>

@Component({
  template: `
    <profile-picture
      ext-customer-id="demo-user-1769431807927-pd9dtmn1"
      alt="Kerry Nicholson"
      [attr.interactive]="interactiveJson"
      (load)="onLoad()"
      (error)="onError()"
      (profile-picture-click)="onClick($event)"
    ></profile-picture>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AvatarComponent {
  interactiveJson = JSON.stringify({ pressable: true });
  onLoad() { console.log('loaded'); }
  onError() { console.log('error'); }
  onClick(e: CustomEvent) { console.log('clicked', e.detail); }
}

<profile-picture
  ext-customer-id="demo-user-1769431807927-pd9dtmn1"
  alt="Kerry Nicholson"
  interactive='{"pressable": true}'
  on:load={() => console.log('loaded')}
  on:error={() => console.log('error')}
  on:profile-picture-click={(e) => console.log('clicked', e.detail)}
/>

<ProfilePictureGroup
  max={3}
  size="lg"
  showAddButton
  onAvatarClick={(user) => console.log('Avatar:', user.name)}
  onAvatarHover={(user) => console.log('Hover:', user.name)}
  onCounterClick={(hiddenUsers, open) => console.log('Counter:', { hiddenUsers, open })}
  onDropdownItemClick={(user) => console.log('Dropdown:', user.name)}
  onAddClick={() => console.log('Add clicked')}
>
  {users.map(u => (
    <ProfilePicture key={u.id} extCustomerId={u.id} alt={u.name} data-user-id={u.id} />
  ))}
</ProfilePictureGroup>

<profile-picture-group id="group" max="3" size="lg" show-add-button>
  <profile-picture ext-customer-id="demo-user-1769431807927-pd9dtmn1" alt="Kerry Nicholson" data-user-id="demo-user-1769431807927-pd9dtmn1"></profile-picture>
  <profile-picture ext-customer-id="demo-user-1769429613186-q8x65t0" alt="Sarah Chen" data-user-id="demo-user-1769429613186-q8x65t0"></profile-picture>
  <profile-picture ext-customer-id="demo-user-1769430228786-ompo3g1" alt="Emma Liu" data-user-id="demo-user-1769430228786-ompo3g1"></profile-picture>
  <profile-picture ext-customer-id="demo-user-1769430441537-fs5i098" alt="Marcus Webb" data-user-id="demo-user-1769430441537-fs5i098"></profile-picture>
</profile-picture-group>

<script>
  const group = document.getElementById('group');
  group.addEventListener('avatar-click', (e) => console.log('Avatar:', e.detail));
  group.addEventListener('counter-click', (e) => console.log('Counter:', e.detail));
  group.addEventListener('dropdown-item-click', (e) => console.log('Dropdown:', e.detail));
  group.addEventListener('add-click', () => console.log('Add clicked'));
</script>