IFX-F2P2 Component

Overview

The ifx-f2p2 (Infineon Freaking Fast People Picker) is a reusable web component built with Stencil.js. It provides a user-friendly interface for searching and selecting people within Infineon's directory.

Features

• Accessible design
• Circular navigation and search term match highlight
• Fast, asynchronous search functionality
• Keyboard navigation support
• Lazy-loaded profile images

Installation

To use the IFX-F2P2 component in your project, install it via npm:

npm install ifx-f2p2

Usage

Basic Integration

1. Import the component in your JavaScript/TypeScript file:

import 'ifx-f2p2';

2. Use the component in your HTML/JSX:

<!-- html -->
<ifx-f2p2 min-search-chars="0"></ifx-f2p2>

// jsx
<ifx-f2p2 minSearchChars={0}></ifx-f2p2>

3. Event Handling - The component emits several events that you can listen to:

const f2p2 = document.querySelector('ifx-f2p2');

f2p2.addEventListener('ifxF2P2PersonSelected', event => {
  console.log('Person selected:', event.detail);
});

f2p2.addEventListener('ifxF2P2PersonRemoved', event => {
  console.log('Person removed:', event.detail);
});

f2p2.addEventListener('ifxF2P2SelectionChange', event => {
  console.log('Selection changed:', event.detail);
});

Configuration

| Property | Attribute | Description | Type | Default | | ---------------- | ------------------ | -------------------------------------------------------------------------------------------------- | -------- | -------------------- | | debounceTime | debounce-time | The time to wait before calling the search function after the user stops typing (in milliseconds). | number | 300 | | maxSelections | max-selections | The maximum number of people that can be selected. | number | Infinity | | minSearchChars | min-search-chars | The minimum number of characters to type before searching for people. | number | 2 | | placeholder | placeholder | The placeholder text for the search input. | string | 'Search people...' |

Events

| Event | Description | Type | | ------------------------ | ---------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ifxF2P2PersonRemoved | Emitted when a person is removed. The removed person is passed as an event detail. | CustomEvent<{ lastName: string; firstName: string; deptName: string; userid: string; ifxUserName: string; location: string; email: string; imageUrl: string; }> | | ifxF2P2PersonSelected | Emitted when a person is selected. The selected person is passed as an event detail. | CustomEvent<{ lastName: string; firstName: string; deptName: string; userid: string; ifxUserName: string; location: string; email: string; imageUrl: string; }> | | ifxF2P2SelectionChange | Emitted when the selected people change. The updated list of selected people is passed as an event detail. | CustomEvent<Person[]> |