ifx-f2p2 v1.0.1

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

Events