/*--------------------------------------------------------------------------------------------------------------
 *  Copyright (c) insite-gmbh. All rights reserved.
 *  Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------------------------*/
import { Component } from '@angular/core';


@Component({
  selector: 'app-modal',
  template: `
  <div class="modal fade" tabindex="-1" [ngClass]="{'in': _visibleAnimate}"
       [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': _visibleAnimate ? 1 : 0}">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <ng-content select=".app-modal-header"></ng-content>
        </div>
        <div class="modal-body">
          <ng-content select=".app-modal-body"></ng-content>
        </div>
        <div class="modal-footer">
          <ng-content select=".app-modal-footer"></ng-content>
        </div>
      </div>
    </div>
  </div>
  `
})
export class ModalComponent {
  public visible = false;
  private _visibleAnimate = false;

  public show(): void {
    this.visible = true;
    setTimeout(() => this._visibleAnimate = true);
  }

  public hide(): void {
    this._visibleAnimate = false;
    setTimeout(() => this.visible = false, 300);
  }
}