Primeng Shadowdom Directives

Set of directives to fix PrimeNg "overlay" components got-chas when rendered inside ShadowDOM

Below are list of components that currently supported (all directives start with prefix psd = PrimeNg ShadowDOM Directive):

Angular >= 16

• Calendar (No directive required)
• Dropdown (No directive required)
• Dropdown inside Paginator (No directive required)
• Menu (psdMenu)
• Multi Select (No directive required)
• Tooltip (No directive required)
• Auto Complete (psdAutoComplete)
• Cascade Select (No directive required)
• Color Picker (No directive required)
• Mega Menu (psdMegaMenu)
• Menu Bar (psdMenuBar)
• Confirm Popup (No directive required)
• Overlay Panel (psdOverlayPanel)
• Slide Menu (psdSlideMenu)
• Split Button (psdSplitButton)
• Tiered Menu (psdTieredMenu)
• Tree Select (No directive required)
• Input Mask (psdInputMask)

Angular < 16

• Calendar (psdCalendar)
• Dropdown (psdDropdown)
• Dropdown inside Paginator (psdPaginator)
• Menu (No directive required)
• Multi Select (psdMultiSelect)
• Tooltip (No directive required)
• Auto Complete (psdAutoComplete)
• Cascade Select (psdCascadeSelect)
• Color Picker (No directive required)
• Mega Menu (psdMegaMenu)
• Menu Bar (psdMenuBar)
• Confirm Popup (psdConfirmPopup)
• Overlay Panel (psdOverlayPanel)
• Slide Menu (No directive required)
• Split Button (No directive required)
• Tiered Menu (No directive required)
• Tree Select (psdTreeSelect)
• Input Mask (psdInputMask)

Note that not all components need custom directive, since this library already contains some logics which reduce the effort of writing custom directive for those components. That means for components marked as No directive required, they just work.

To request for new component, please submit issue or PR

Installation

This package is available on npm registry. Install it with command:

# for Angular >= 16
npm install primeng-shadowdom-directives

# for Angular < 16
npm install primeng-shadowdom-directives@^0.2.2

Usage

Import this package into your module where you want to apply these directives (normally will be app.module.ts)

import { PrimeNGShadowDOMDirective } from 'primeng-shadowdom-directives';

@NgModule({
  imports: [
    PrimeNGShadowDOMDirective, // import here
    ...
  ],
})
export class AppModule { }

Then in your component file, apply the directives:

<!-- dropdown -->
<p-dropdown psdDropdown ...></p-dropdown>

<!-- calendar -->
<p-calendar psdCalendar ...></p-calendar>

<!-- multi select -->
<p-multiSelect psdMultiSelect ...></p-multiSelect>

<!-- and others -->

Demo

Check projects/demo-app to see samples on how to use this package.

To run the demo, first run

npm install

Then build the directives:

npm run build

# watch mode
npm run watch

Finally start the demo-app:

npm start

Now you can access from browser at: http://localhost:4200