ECP UI SDK v1.0 - Component Library

🎨 ECP UI SDK Component Library

v1.0 Web Components Framework-Agnostic

Complete component library for the ECP platform. All components are built with Vanilla JavaScript, use Shadow DOM for encapsulation, CSS custom properties for theming, and work seamlessly across all ECP modules (MON+, TTM+, ALM, CMDB, ITSM).

Components Implemented: 9 core components ready for production use.

📝 Font Controls

Adjust font size across the entire application with localStorage persistence.

Examples:

With custom range:

Without label:

<ecp-font-controls></ecp-font-controls>

🔍 Search Input

Search input with debouncing, clear button, and keyboard support (Escape to clear).

Examples:

With minimum length requirement:

<ecp-search-input placeholder="Search..."></ecp-search-input>

🎛️ Filter Select

Filter dropdown with "All" option and customizable labels.

<ecp-filter-select label="Status" options='["Open","Closed"]'></ecp-filter-select>

📄 Pagination

Complete pagination controls with page size selector and item count display.

Standard Pagination (150 items):

Custom Page Sizes (500 items):

Minimal (no page size selector):

<ecp-pagination total="150" page-size="25"></ecp-pagination>

🔔 Toast Notifications

Notification toasts with auto-dismiss, stacking, and multiple variants.

Try Different Variants:

// Show toast ECP.Toast.success('Success message!'); ECP.Toast.error('Error message!'); ECP.Toast.show('Custom message', 'info', { duration: 5000 });

💬 Modal Dialog

Flexible modal/dialog component with backdrop, animations, and accessibility.

Try Different Modals:

<ecp-modal id="myModal" title="Modal Title" size="md"> <p>Modal content goes here</p> <div slot="footer"> <button onclick="document.getElementById('myModal').hide()">Close</button> </div> </ecp-modal> // Show: document.getElementById('myModal').show()

📊 Complete Example: Data Table View

Combining multiple components for a typical data table interface.

ID Name Status Type Created
#001 Implement search feature Active Task 2026-03-01
#002 Fix authentication bug Pending Issue 2026-03-02
#003 Add export functionality Active Request 2026-03-03

🌙 Theme Switcher

Switch between System, Dark, and Light themes with localStorage persistence.

← Click to cycle through themes

Without label:

<ecp-theme-switcher></ecp-theme-switcher>

☰ Hamburger Menu

Unified navigation across all ECP modules with admin menu support.

Different Module Configurations:

TTM+ Module:

MON+ with Admin:

ALM Module:

<ecp-hamburger-menu module="mon" entity-id="EOO3467"></ecp-hamburger-menu>

📚 Documentation

For complete specifications, guidelines, and migration instructions:

This is a small modal dialog.

Perfect for quick confirmations or brief messages.

This is a medium modal dialog with more content.

It can contain forms, tables, or other complex content.

Features:

This is a large modal for extensive content.

Component Status Description
ecp-font-controls Ready Font size adjustment
ecp-search-input Ready Search with debouncing
ecp-filter-select Ready Filter dropdown
ecp-pagination Ready Pagination controls

Are you sure you want to delete this item?

This action cannot be undone.