Split jslib into multiple modules (#363)

* Split jslib into multiple modules

angular/src/components/modal.component.ts

@@ -0,0 +1,78 @@
+import {
+    Component,
+    ComponentFactoryResolver,
+    EventEmitter,
+    OnDestroy,
+    Output,
+    Type,
+    ViewChild,
+    ViewContainerRef,
+} from '@angular/core';
+
+import { MessagingService } from 'jslib-common/abstractions/messaging.service';
+
+@Component({
+    selector: 'app-modal',
+    template: `<ng-template #container></ng-template>`,
+})
+export class ModalComponent implements OnDestroy {
+    @Output() onClose = new EventEmitter();
+    @Output() onClosed = new EventEmitter();
+    @Output() onShow = new EventEmitter();
+    @Output() onShown = new EventEmitter();
+    @ViewChild('container', { read: ViewContainerRef, static: true }) container: ViewContainerRef;
+    parentContainer: ViewContainerRef = null;
+    fade: boolean = true;
+
+    constructor(protected componentFactoryResolver: ComponentFactoryResolver,
+        protected messagingService: MessagingService) { }
+
+    ngOnDestroy() {
+        document.body.classList.remove('modal-open');
+        document.body.removeChild(document.querySelector('.modal-backdrop'));
+    }
+
+    show<T>(type: Type<T>, parentContainer: ViewContainerRef, fade: boolean = true,
+        setComponentParameters: (component: T) => void = null): T {
+        this.onShow.emit();
+        this.messagingService.send('modalShow');
+        this.parentContainer = parentContainer;
+        this.fade = fade;
+
+        document.body.classList.add('modal-open');
+        const backdrop = document.createElement('div');
+        backdrop.className = 'modal-backdrop' + (this.fade ? ' fade' : '');
+        document.body.appendChild(backdrop);
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory<T>(type);
+        const componentRef = this.container.createComponent<T>(factory);
+        if (setComponentParameters != null) {
+            setComponentParameters(componentRef.instance);
+        }
+
+        document.querySelector('.modal-dialog').addEventListener('click', (e: Event) => {
+            e.stopPropagation();
+        });
+
+        const modals = Array.from(document.querySelectorAll('.modal, .modal *[data-dismiss="modal"]'));
+        for (const closeElement of modals) {
+            closeElement.addEventListener('click', event => {
+                this.close();
+            });
+        }
+
+        this.onShown.emit();
+        this.messagingService.send('modalShown');
+        return componentRef.instance;
+    }
+
+    close() {
+        this.onClose.emit();
+        this.messagingService.send('modalClose');
+        this.onClosed.emit();
+        this.messagingService.send('modalClosed');
+        if (this.parentContainer != null) {
+            this.parentContainer.clear();
+        }
+    }
+}