primeng-shadowdom-directives/README.md

Directives that make PrimeNG plays nicely with ShadowDOM

# 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

<details>
  <summary>Angular 17</summary>
  
  - [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`)
</details>

<details>
  <summary>Angular 16</summary>
  
  - [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`)
</details>

<details>
  <summary>Angular < 16</summary>
  
  - [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`)
</details>

To request for new component, please submit issue or PR
# Installation
This package is available on npm registry. Install it with command:
```sh
# 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

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

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

@NgModule({
  imports: [
    PrimeNGShadowDOMDirective, // import here
    ...
  ],
})
export class AppModule { }
```
Then in your component file, apply the directives:
```html
<!-- dropdown -->
<p-dropdown psdDropdown ...></p-dropdown>

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

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

<!-- and others -->
```

## Helper functions
Other than directives, we also provide helper functions to help fix some other problems related PrimeNG + Shadow dom. See usage below

### Table resizable column
First assign a ref to `p-table`
```html
<p-table #dt>
```

Then access it using ViewChild:
```ts
@ViewChild('dt') dt!: Table;
```

Finally:
```ts
// you can call it in ngAfterViewInit or at any later time when you're sure that the view is rendered on screen
ngAfterViewInit() {
  ensureResizableColumn(this.dt, this.el.nativeElement.shadowRoot);
}
```

# 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