D-Net

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

@Component({

  selector: 'fs-modal',

  template: `

    <div class="fs-modal" [class.uk-hidden]="!opened">

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

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

      </a>

      <div class="header">

        <div class="uk-position-relative uk-height-1-1">

          <h5 *ngIf="title" class="uk-position-center">

            {{title}}

          </h5>

          <div class="uk-position-center-right uk-visible@m">

            <button class="uk-button uk-button-secondary outlined" (click)="close()">{{cancelButtonText}}</button>

            <button class="uk-button uk-button-secondary space" (click)="ok()">{{okButtonText}}</button>

          </div>

        </div>

      </div>

      <div class="content">

        <div class="content-header">

          <div class="uk-flex uk-flex-center uk-width-1-1 uk-margin-medium-bottom uk-hidden@m">

            <button class="uk-button uk-button-secondary outlined" (click)="close()">{{cancelButtonText}}</button>

            <button class="uk-button uk-button-secondary space" (click)="ok()">{{okButtonText}}</button>

          </div>

          <ng-content select="[header]">

          </ng-content>

        </div>

        <div class="content-inner">

          <ng-content></ng-content>

        </div>

      </div>

    </div>

  `

})

export class FullScreenModalComponent implements OnInit {

  okButtonText = 'OK';

  cancelButtonText = 'Cancel';

  title: string = null;

  @Input()

  customKeys: boolean = false;

  @Output()

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

  opened: boolean = false;

  private readonly element: any;

  constructor(private el: ElementRef) {

    this.element = el.nativeElement;

  }

  ngOnInit() {

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

      document.body.appendChild(this.element);

    }

  }

  ngOnDestroy(): void {

    this.element.remove();

  }

  open() {

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

      this.opened = true;

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

    }

  }

  close() {

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

      this.opened = false;

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

    }

  }

  ok() {

    this.close();

    this.okEmitter.emit(true);

  }

}

import {NgModule} from "@angular/core";

import {CommonModule} from "@angular/common";

import {FullScreenModalComponent} from "./full-screen-modal.component";

import {IconsModule} from "../../icons/icons.module";

import {IconsService} from "../../icons/icons.service";

import {close} from "../../icons/icons";

@NgModule({

  imports: [CommonModule, IconsModule],

  declarations: [FullScreenModalComponent],

  exports: [FullScreenModalComponent]

})

export class FullScreenModalModule {

  constructor(private iconsService: IconsService) {

    this.iconsService.registerIcons([close])

  }

}