Refactor: Overlay and dynamically styled components

This PR introduces an core change in the way a modal/dialog is built. It borrows the idea of Overlay from Material2.

A ModalOverlay is the core component upon which a modal is built.

An underlaying overlay service is used to manage overlay lifecycle, behaviour (click to close, etc..) and more.

With this change some new directives are used as helpers for plugin implementation.

To allows click detection support OverlayDialogBoundary directive can be set on a container which will close the windows on every click outside of it (as lock as isBlocking is set to false) this can also be set via code with the overlay service.

To specify a view container (for contained modal, within an element) a developer had to get a reference to the view container of that element (@ViewChild). Now OverlayTarget can be used to set an id to a view container which later can be referenced by given the string (id) instead of the viewContainerRef object.

Another feature that ease up plugin development is the base component class BaseDynamicComponent which provides API support for dynamically adding components, applying styles and getting transition and animation lifecycle notification. This is useful for modal plugins based on CSS frameworks (e.g: bootstrap) where animation and styles are based on CSS classes. This reduces the code required by such plugins significantly.

Angular 2 native plugins should use the angular animation api.

With the introduction of overlays plugins are only responsible for setting the inner content of an overlay (an overlay comes empty), which is done by implementing the create function on a Modal class.

shlomiassaf / ngx-modialog

Refactor: Overlay and dynamically styled components #153