profile-image-changer

Stencil web component — profile image changer utility (like Falcon student portal).

Build

cd profile-image-changer
npm install
npm run build

The dist/ and loader/ folders are generated after build.

Usage in React (app-page-first)

// 1. Load the custom element once
import { defineCustomElements } from 'profile-image-changer/loader';
defineCustomElements();

// 2. Use in JSX
<profile-image-changer
  user-name="MD Tausif Ahmad"
  avatar-base-url="https://your-tenant/static/magicbox/profile/avatars"
  current-avatar="3"
  total-avatars="20"
  grid-columns="4"
/>

Props

| Prop | Type | Default | Description | |------------------|---------|----------------------|-------------------------------------| | user-name | string | 'User' | Display name | | avatar-base-url| string | '' | Base URL for avatar images | | current-avatar | string | '1' | Currently selected avatar id | | total-avatars | number | 20 | Total avatars in library grid | | grid-columns | number | 4 | Grid column count | | show-name | boolean | true | Show username below avatar | | change-label | string | 'Click to change…' | Tooltip / hint text | | apply-label | string | 'Apply' | Apply button text | | cancel-label | string | 'Cancel' | Cancel button text |

Events

| Event | Detail | Description | |------------------|-------------------------------------|-------------------------------------| | avatarChanged | { avatarId, avatarUrl } | Fires after Apply | | libraryToggled | { open: boolean } | Fires on open/close of grid panel |

Also dispatches window CustomEvent MAGICBOX.USER_PROFILE_UPDATE for PubSub compatibility.

Node 14 compatibility

Uses @stencil/core@^2.22.2 which supports Node 14.x.