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):

[!TIP] Once you import this module library, it'll automatically handle most of components (those marked as No directive required), the rest will need to pass directive explicitly

Angular 17

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

Angular 16

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

Angular < 16

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

To request for new component, please submit issue or PR

Installation

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

# for Angular 17
npm install primeng-shadowdom-directives@^17.0.0

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

# 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