fusion-wc-people

Description

Comprehensive web component library for selecting and viewing people/users with advanced search functionality and multiple display modes.

Components

<fwc-people-picker>

Interactive person selector with search, keyboard navigation, and multi-select support.

<fwc-people-viewer>

Display selected people in list or table format with customizable columns.

Installation

npm install @equinor/fusion-wc-people

Examples

<!-- Simple picker -->
<fwc-people-picker></fwc-people-picker>

<!-- Viewer with pre-loaded people -->
<fwc-people-viewer 
  resolveIds="azure-id-1,azure-id-2,azure-id-3"
  viewMode="table">
</fwc-people-viewer>

Events

The fwc-people-picker and fwc-people-viewer both share the same events.

<!-- 
  Selection events
  @selection-changed: PersonInfo[]
  @person-added: PersonInfo
  @person-removed: PersonInfo
-->
<fwc-people-picker
  @selection-changed=${handler}
  @person-added=${handler}
  @person-removed=${handler}
></fwc-people-picker>

PersonProvider

Its required to wrap these components with fwc-person-provider components.

The provider is usually delivered by the portal or cli. but you can also create a custom provider.

<!-- Wrap components in person provider -->
<fwc-person-provider>
  <fwc-people-picker></fwc-people-picker>
</fwc-person-provider>

Key Features

• ⌨️ Keyboard navigation (Arrow keys, Enter, Escape)
• 🔍 Debounced search (300ms)
• 👤 Single/multiple selection modes
• 📊 List and table view modes
• 🎨 Avatar customization
• 🔄 Service principal support

Properties

fwc-people-picker

| Property | Type | Description | | ---------- | ------ | ------------- | | people | PersonInfo[] | Array of PersonInfo objects to set as selected people in the picker. Mostly used when using PersonPicker as a controlled component. | | resolveIds | string[] | Array of person azureIds to pre-resolve and display as selected people. PS: will only resolve on mount. | | placeholder | string | Placeholder text shown in the search input. | | multiple | boolean | Whether multiple people can be selected. Defaults to true. | | showSelectedPeople | boolean | Whether to show selected people below the input. Defaults to true. This must be paired with multiple to be effective. | | subtitle | keyof PersonInfo | Subtitle text field from PersonInfo displayed in the People Pills. | | secondarySubtitle | keyof PersonInfo | Secondary subtitle field from PersonInfo displayed in the search result list. | | noResultTitle | string | Title to show when suggest task has no results | | noResultSubtitle | string | Subtitle to show when suggest task has no results |

fwc-people-viewer

| Property | Type | Description | | ---------- | ------ | ------------- | | people | PersonInfo[] | Array of PersonInfo objects to display in the viewer. | | resolveIds | string[] | Array of person azureIds to pre-resolve and display as selected people. PS: will only resolve on mount. | | viewMode | 'list \| table' | The view mode to display the people in. Defaults to 'list'. | | showViewMode | boolean | Whether to show the view mode selector. Defaults to true. | | tableColumns | string[] | Array of column names to display in the table. Defaults to ['avatar', 'name', 'type', 'email', 'mobilePhone', 'jobTitle', 'department', 'manager', 'remove']. | | subtitle | keyof PersonInfo | Subtitle text field from PersonInfo displayed in the People Pills. |