…isplay

## Problem
Custom FilterAssistPanel component was not displaying in NDE UI after switching
to official selector-based insertion method. Console showed CustomElementRegistry
error about constructor already being used with this registry.

## Root Cause
AppModule.ngDoBootstrap() was calling customElements.define(), creating a
double-registration conflict with the NDE framework which also tries to register
the same custom element.

## Solution
Removed customElements.define() call from ngDoBootstrap() to match official
ExLibris repository pattern. The NDE framework expects custom modules to only
CREATE and STORE custom element constructors, not register them. Framework
handles registration and insertion itself.

## Changes Made

### Core Fix
- **app.module.ts**: Removed customElements.define() call from ngDoBootstrap()
  - Now only creates custom element and stores in webComponentSelectorMap
  - Allows NDE framework to handle registration via getComponentRef() method

### Component Integration
- **customComponentMappings.ts**: Uses official NDE selector pattern
  - Maps 'nde-search-filters-side-nav-top' to FilterAssistPanelComponent
  - Position suffix (-top) instructs NDE where to insert component

- **filter-assist-panel.mount.service.ts**: Deleted manual DOM injection service
  - No longer needed with proper selector-based integration
  - Removes 64 lines of MutationObserver and manual DOM manipulation

### Configuration
- **build-settings.env**: Changed VIEW_ID from NDE to NDE_TEST
- **webpack.prod.config.js**: Disabled source maps (devtool: false)
  - Prevents Alma BO upload rejection
  - Reduces package size from 1.05MB to 570KB

### Documentation
- **SPECS.md**: Added comprehensive NDE element insertion documentation
  - Documents position suffixes (-before, -after, -top, -bottom)
  - Explains component selector vs mapping key separation
  - Provides examples of proper component architecture

- **BUGFIX_HISTORY.md**: NEW - Detailed bug fix documentation
  - Documents both FilterAssistPanel bugs and resolutions
  - Bug #1: Manual DOM injection breaking Angular change detection
  - Bug #2: Double registration preventing component display

- **NDE_INTEGRATION_RESEARCH.md**: NEW - Complete research summary
  - Official ExLibris repository analysis
  - Angular Elements best practices
  - NDE framework workflow explanation
  - Testing checklist and resources

### Helper Files
- Added screenshots showing clean vs error states
- Added NDE selectors report from DOM analysis script

## How NDE Framework Works
1. NDE loads custom module and reads selectorComponentMap
2. For entry ['nde-search-filters-side-nav-top', FilterAssistPanelComponent]:
   - Strips position suffix (-top) to get base selector
   - Calls AppModule.getComponentRef('nde-search-filters-side-nav-top')
   - Registers element with its own naming scheme
   - Inserts at position indicated by suffix

## Results
✅ Custom element displays correctly at top of filter side nav
✅ No CustomElementRegistry errors
✅ Follows official ExLibris pattern
✅ Build successful (570KB package ready for Alma BO)
✅ Cleaner architecture with framework-managed registration

## References
- Official ExLibris Repository: https://github.com/ExLibrisGroup/customModule
- ExLibris app.module.ts canonical implementation
- Angular Elements documentation on selector separation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>