D-Net

import {Component, ElementRef, EventEmitter, Input, OnInit, Output} from "@angular/core";

import {fromEvent, Subscription} from 'rxjs';

import {delay} from "rxjs/operators";

@Component({

  selector: 'fs-modal',

  template: `

    <div class="fs-modal">

      <div class="fs-modal-bg" (click)="close()"></div>

      <div id="fs-modal" class="fs-modal-dialog">

        <!--<a class="close" (click)="close()">

          <icon name="close"></icon>

        </a>-->

        <div class="header">

          <div class="uk-flex-middle uk-grid" uk-grid>

            <h4 *ngIf="title" class="uk-margin-remove uk-width-expand uk-text-truncate">{{title}}</h4>

            <div *ngIf="cancelButton || okButton" class="uk-flex uk-flex-right">

              <div>

                <ng-content select="[actions]"></ng-content>

              </div>

              <button *ngIf="cancelButton" class="uk-button uk-button-secondary outlined uk-margin-small-left" [disabled]="cancelButtonDisabled" (click)="close()">{{cancelButtonText}}</button>

              <button *ngIf="okButton" class="uk-button uk-button-secondary uk-margin-small-left" [disabled]="okButtonDisabled" (click)="ok()">{{okButtonText}}</button>

            </div>

          </div>

        </div>

        <div class="content">

          <ng-content></ng-content>

        </div>

      </div>

    </div>

  `

})

export class FullScreenModalComponent implements OnInit {

  okButtonText = 'OK';

  cancelButtonText = 'Cancel';

  cancelButton: boolean = false;

  okButton: boolean = false;

  title: string = null;

  @Input()

  okButtonDisabled = false;

  @Input()

  cancelButtonDisabled = false;

  @Output()

  okEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();

  @Output()

  cancelEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();

  opened: boolean = false;

  private readonly element: any;

  private subscriptions: any[] = [];

  private clickedInside: boolean;

  constructor(private el: ElementRef) {

    this.element = el.nativeElement;

  }

  ngOnInit() {

    if (typeof document !== "undefined") {

      document.body.appendChild(this.element);

      this.subscriptions.push(fromEvent(document, 'keydown').pipe(delay(1)).subscribe((event: KeyboardEvent) => {

        if(event.keyCode === 27) {

          this.close();

        }

      }));

    }

  }

  ngOnDestroy(): void {

    this.element.remove();

    this.subscriptions.forEach(subscription => {

      if (subscription instanceof Subscription) {

        subscription.unsubscribe();

      }

    })

  }

  open() {

    if (typeof document !== "undefined") {

      this.opened = true;

      document.getElementsByTagName('html')[0].classList.add('fs-modal-open');

    }

  }

  close() {

    if (typeof document !== "undefined" && this.opened) {

        document.getElementsByTagName('html')[0].classList.remove('fs-modal-open');

        this.opened = false;

        this.cancelEmitter.emit();

    }

  }

  ok() {

    this.close();

    this.okEmitter.emit(true);

  }

}