Split the code into separate methods

The MarkingService now takes care of the selection and its validation.
The text component sends its change via elementValueChanged.

- Check if button element is available in the toolbox
- Add the button to the canvas
- Change button label and check reflection on the canvas

This shows a outline on potential dropLists when dragging an item.

- Remove grab cursor from the canvas as it is no longer draggable (was
  in an earlier version)
- Fix element visual overlaying the resize element. Now the actual
  element is hidden, while the resize is going on.

Element cursor are changed so that there is a 'grab' cursor on hover
and a 'grabbing' cursor while active (clicked but not dragged yet)
and while dragging.
The resize cursor always stays the same, as there is not alternative
active curser (like grab/grabbing) for this.

On the dynamic overlay the curser cannot be set while the element
is being dragged. I assume it is because of 'relative' positioning.
The element is taken out of the DOM and pointer events don't work,
including cursors. This is why the body needs to be cursor-styled.
Cursors are set dynamically in the component via CSS class.
When dragging starts it is set and removed when it ends.

Also add an additional direct input for font color.

Move the first tab to it's own component. File still is way to long and
unwieldy.

This structure moves closer to the structure template the team decided
on. Components and services are kept in dedicated folders instead of
following the logical code structure. This is still not the case here as
the unit-view component is still nested, but it's closer.

Now correctly uses the multiline dialog.

Use global styles and remove unecessary styling commands. The dialog 
window will mostly size itself.

Use separate method with a name to know what this nested loop is for.

Before the children were simple javascript objects missing the methods 
of out proper typescript objects. Not it correctly calls the constructor 
on all row elements instead of just assigning the value.

Read the formerly used 'options' array.

All elements now use the elementValueChanged event. Also
formValueChanged is changed.

Also reorder translations a bit.

Options and value were the same thing anyway and the value was updated 
once anything was changed within that dropList.
The player though needs a start value and this way we have one.

Interactions are mutually exclusive (for now). The string values 
describe which interaction is possible.

Supplement to commit "Refactor elements to use the model's value"

AudioComponent and VideoComponent inherit from
MediaPlayerElementComponent to avoid duplicate code

This change mainly helps the editor.
The idea is to make the element components have the correct value of
their model and don't rely on the formcontrol value. The formcontrol
can be hard to manipulate, especially in compound elements. Setting
the model value is way easier.

The formcontrols are kept and should not interfere.