### Install Dependencies

Source: https://github.com/bpmn-io/bpmn-js-properties-panel/blob/main/README.md

Run this command to install all project dependencies before starting development.

```sh
npm install
```

--------------------------------

### Run Development Commands

Source: https://github.com/bpmn-io/bpmn-js-properties-panel/blob/main/README.md

Execute these commands for various development tasks. Use 'npm run all' to build and test, 'npm start' for a local modeler, and 'npm run dev' for the full development setup.

```sh
# build the library and run all tests
npm run all
```

```sh
# spin up a single local modeler instance
npm start
```

```sh
# run the full development setup
npm run dev
```

--------------------------------

### Register Custom Properties Provider

Source: https://github.com/bpmn-io/bpmn-js-properties-panel/blob/main/README.md

Shows how to register a custom properties provider with the properties panel. This allows for extending or modifying the displayed properties.

```javascript
class ExamplePropertiesProvider {
  constructor(propertiesPanel) {
    propertiesPanel.registerProvider(500, this);
  }

  getGroups(element) {
    return (groups) => {

      // add, modify or remove groups
      // ...

      return groups;
    };
  }
}

ExamplePropertiesProvider.$inject = [ 'propertiesPanel' ];
```

--------------------------------

### Dynamically Attach Properties Panel

Source: https://github.com/bpmn-io/bpmn-js-properties-panel/blob/main/README.md

Demonstrates how to detach the properties panel from its current container and attach it to a different HTML element.

```javascript
const propertiesPanel = bpmnJS.get('propertiesPanel');

// detach the panel
propertiesPanel.detach();

// attach it to some other element
propertiesPanel.attachTo('#other-properties');
```

--------------------------------

### Bootstrap bpmn-js with Properties Panel

Source: https://github.com/bpmn-io/bpmn-js-properties-panel/blob/main/README.md

Integrates the bpmn-js modeler with the properties panel and its provider. Ensure the HTML elements for the canvas and properties panel are present.

```javascript
import BpmnModeler from 'bpmn-js/lib/Modeler';
import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,
} from 'bpmn-js-properties-panel';

const modeler = new BpmnModeler({
  container: '#canvas',
  propertiesPanel: {
    parent: '#properties'
  },
  additionalModules: [
    BpmnPropertiesPanelModule,
    BpmnPropertiesProviderModule
  ]
});
```

--------------------------------

### BpmnPropertiesPanelRenderer#registerProvider

Source: https://github.com/bpmn-io/bpmn-js-properties-panel/blob/main/README.md

Registers a new properties provider with a given priority. Providers are responsible for defining the groups and fields displayed in the properties panel.

```APIDOC
## BpmnPropertiesPanelRenderer#registerProvider(priority: Number, provider: PropertiesProvider) => void

### Description
Register a new properties provider to the properties panel.

### Method
registerProvider

### Parameters
#### Path Parameters
- **priority** (Number) - Required - The priority of the provider. Higher numbers indicate higher priority.
- **provider** (PropertiesProvider) - Required - The properties provider instance to register.

### Request Example
```javascript
class ExamplePropertiesProvider {
  constructor(propertiesPanel) {
    propertiesPanel.registerProvider(500, this);
  }

  getGroups(element) {
    return (groups) => {

      // add, modify or remove groups
      // ...

      return groups;
    };
  }
}

ExamplePropertiesProvider.$inject = [ 'propertiesPanel' ];
```
```

--------------------------------

### Include Properties Panel Stylesheet

Source: https://github.com/bpmn-io/bpmn-js-properties-panel/blob/main/README.md

Add this HTML link tag to your document to apply the default styling for the properties panel.

```html
<link rel="stylesheet" href="https://unpkg.com/@bpmn-io/properties-panel/dist/assets/properties-panel.css">
```

--------------------------------

### Bootstrap bpmn-js with Camunda 8 Properties Panel

Source: https://github.com/bpmn-io/bpmn-js-properties-panel/blob/main/README.md

Configures the bpmn-js modeler to include Camunda 8 specific properties editing. Requires the Camunda 8 moddle extension and behaviors.

```javascript
import BpmnModeler from 'bpmn-js/lib/Modeler';
import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,
  ZeebePropertiesProviderModule // Camunda 8 provider
} from 'bpmn-js-properties-panel';

// Camunda 8 moddle extension
import zeebeModdle from 'zeebe-bpmn-moddle/resources/zeebe';

// Camunda 8 behaviors
import ZeebeBehaviorsModule from 'camunda-bpmn-js-behaviors/lib/camunda-cloud';

const modeler = new BpmnModeler({
  container: '#canvas',
  propertiesPanel: {
    parent: '#properties'
  },
  additionalModules: [
    BpmnPropertiesPanelModule,
    BpmnPropertiesProviderModule,
    ZeebePropertiesProviderModule,
    ZeebeBehaviorsModule
  ],
  moddleExtensions: {
    zeebe: zeebeModdle
  }
});
```

--------------------------------

### BpmnPropertiesPanelRenderer#attachTo

Source: https://github.com/bpmn-io/bpmn-js-properties-panel/blob/main/README.md

Attaches the properties panel to a specified container element on the page. This allows for dynamic placement of the panel.

```APIDOC
## BpmnPropertiesPanelRenderer#attachTo(container: HTMLElement) => void

### Description
Attach the properties panel to a parent node.

### Method
attachTo

### Parameters
#### Path Parameters
- **container** (HTMLElement) - Required - The HTML element to attach the properties panel to.

### Request Example
```javascript
const propertiesPanel = modeler.get('propertiesPanel');

propertiesPanel.attachTo('#other-properties');
```
```

--------------------------------

### Attach Properties Panel to Container

Source: https://github.com/bpmn-io/bpmn-js-properties-panel/blob/main/README.md

Attaches the properties panel to a specified HTML element. This is part of the API for dynamic panel management.

```javascript
const propertiesPanel = modeler.get('propertiesPanel');

propertiesPanel.attachTo('#other-properties');
```

--------------------------------

### Detach Properties Panel

Source: https://github.com/bpmn-io/bpmn-js-properties-panel/blob/main/README.md

Detaches the properties panel from its current parent element. This is part of the API for dynamic panel management.

```javascript
const propertiesPanel = modeler.get('propertiesPanel');

propertiesPanel.detach();
```

--------------------------------

### BpmnPropertiesPanelRenderer#detach

Source: https://github.com/bpmn-io/bpmn-js-properties-panel/blob/main/README.md

Detaches the properties panel from its current parent node. This is useful for removing the panel from the DOM.

```APIDOC
## BpmnPropertiesPanelRenderer#detach() => void

### Description
Detach the properties panel from its parent node.

### Method
detach

### Request Example
```javascript
const propertiesPanel = modeler.get('propertiesPanel');

propertiesPanel.detach();
```
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.