[FEAT] Add an example of a project using Angular

[akantcheff]

Starting from the Angular default template (using Angular CLI v14), this is a first draft of an example that uses bpmn-visualization library in a single page.

Here is an overview at startup:

It includes:

• 2 buttons to load diagrams (bpmn definitions hard-coded in bpmn-diagram.service.ts)
• 5 buttons to dynamically change the fit option of the bpmn container
• a short delay (defined in environment.ts files) to simulate diagrams loading

This PR closes #20

[CLAassistant]

All committers have signed the CLA.

[tbouffard]

ℹ️ The build is failing with the following error, and it can be reproduced by locally running npm run build

Warning: bundle initial exceeded maximum budget. Budget 500.00 kB was not met by 714.83 kB with a total of 1.19 MB.

Error: bundle initial exceeded maximum budget. Budget 1.00 MB was not met by 190.83 kB with a total of 1.19 MB.

styles.f05ad5fd2c8ed71e.css   | styles        |  1.59 kB |               598 bytes
runtime.32b1771acde9ed05.js   | runtime       |  1.08 kB |               606 bytes

| Initial Total |  1.19 MB |               240.75 kB

Build at: 2022-10-18T11:42:09.948Z - Hash: 09fe22f4a37794e5 - Time: 42689ms
Error: Process completed with exit code 1.

[tbouffard]

information_source The build is failing with the following error, and it can be reproduced by locally running npm run build

Fixed in f1fc750

[tbouffard]

ℹ️ I am working on this PR to slightly improve the design and fix a few bugs.

[tbouffard]

Hi, I have completed I wanted to integrate as part of this first iteration. Improvements will be implemented later, see #409

Changes in the UI

• restore the original font styles from the Angular bootstrap project
• update various margins
• always display the BPMN container to avoid Layout shift + use a fixed width for the bpmn-container and increase it
• display the loader on top of the BPMN container, and mask the content of the BPMN container while loading (inspired from the Drag'n Drop loader of the bpmn-visualization demo)
• fit: only keep "none" and "center" less fit type to simplify the design
• remove the "Resources" section at the bottom of the pages and ensure that all elements fit in a single page

Other changes

• avoid multi instantiation of the BpmnVisualization class
• move delay logic from the top-level examples component to the service (where it belongs)
• move all files at project root for consistency and to make the common script update bpmn-visualization when a new release is available (tested by running it to bump to v0.28.0)
• bump all dependencies

Limitations that will be improved later

• "fit buttons": bind to the state of the component, so only the first click triggers the fit.
• load diagram: if a diagram is already loaded, clicking on the button to load it again, display the loader but afterwards, the content of the container doesn't change (in particular the diagram zoom level as before). This is because the state of the "diagram" doesn't change in the component

angular_14_demo_reworked.mp4

[csouchet]

It works fine in macOS.
Very good job for this first contribution 🦾

[tbouffard]

LGTM, we work together with @akantcheff and this was a great achievement.
Thanks a lot for your time.