import { Directive, Input, Output, EventEmitter, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[clickOutside]',
})
export class ClickOutsideDirective {

  @Output() clickOutside = new EventEmitter<void>();

  constructor(private elementRef: ElementRef) { }

  @HostListener('document:click', ['$event.target'])
  public onClick(target) {
    const clickedInside = this.elementRef.nativeElement.contains(target);
    if (!clickedInside) {
      this.clickOutside.emit();
    }
  }
}

@HostListener('document: keydown', ['$event'])
  public onEnter(event: KeyboardEvent): void {
    if (this.elementRef.nativeElement.contains(event.target)) {
      if (event.code === 'Enter') {
        // TODO:
      }
    }
  }

@ViewChild('overlay', { static: false }) overlay: ElementRef;

//...
this.overlay.nativeElement.contains(event.target);  // always return false

Object.keys(event.target.classList).includes('item');

<div [hidden]="!show" class="item">
		Click here
  </div>

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}

Person.prototype.nationality = "English";

Person.prototype.name = function() {
  return this.firstName + " " + this.lastName;
};

var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");

Person.nationality = "English";

getComputedStyle(document.querySelector(":root")).getPropertyValue("--dark--primary");

document.querySelector('#id').classList.value.split(' ');

module.exports = {
  verbose: true,
  transform: {
    ".(ts|tsx)": "<rootdir>/node_modules/ts-jest/preprocessor.js",
    ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
  },
  testEnvironment: "node",
  testRegex: "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
  setupTestFrameworkScriptFile: "./test/_setup.ts",
  moduleFileExtensions: ["ts", "tsx", "js"],
  coveragePathIgnorePatterns: ["/node_modules/", "/test/", "src/index.ts"],
  coverageThreshold: {
    global: {
      branches: 0,
      functions: 0,
      lines: 0,
      statements: 0,
    },
  },
  collectCoverageFrom: ["src/**/*.{js,ts,tsx}"],
};

// filename: foo.js
define(['jquery'], function ($) {
  // methods
  function myFunc(){};

  // exposed public methods
  return myFunc;
});

// filename: foo.js
define(['jquery', 'underscore'], function ($, _) {
  // methods
  function a(){};    //    private because it's not returned (see below)
  function b(){};    //    public because it's returned
  function c(){};    //    public because it's returned

  // exposed public methods
  return {
    b: b,
    c: c
  }
});

define((require, exports, module) => {
  module.exports = {
    fun1: () => {
      var $ = require('jquery');
      return $('#test');
    }
  };
});

// filename: foo.js

// dependencies
var $ = require('jquery');

// methods
function myFunc(){};

// exposed public method (single)
module.exports = myFunc;

// filename: foo.js
var $ = require('jquery');
var _ = require('underscore');

// methods
function a(){};    //    private because it's omitted from module.exports (see below)
function b(){};    //    public because it's defined in module.exports
function c(){};    //    public because it's defined in module.exports

// exposed public methods
module.exports = {
  b: b,
  c: c
};

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['jquery'], factory);
  } else if (typeof exports === 'object') {
    // Node, CommonJS-like
    module.exports = factory(require('jquery'));
  } else {
    // Browser globals (root is window)
    root.returnExports = factory(root.jQuery);
  }
}(this, function ($) {
    // methods
    function myFunc(){};

    // exposed public method
    return myFunc;
}));

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['jquery', 'underscore'], factory);
  } else if (typeof exports === 'object') {
    // Node, CommonJS-like
    module.exports = factory(require('jquery'), require('underscore'));
  } else {
    // Browser globals (root is window)
    root.returnExports = factory(root.jQuery, root._);
  }
}(this, function ($, _) {
  // methods
  function a(){};    //    private because it's not returned (see below)
  function b(){};    //    public because it's returned
  function c(){};    //    public because it's returned

  // exposed public methods
  return {
    b: b,
    c: c
  }
}));

$('#GetFile').on('click', function () {
  $.ajax({
    url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/172905/test.pdf',
    method: 'GET',
    xhrFields: {
        responseType: 'blob'
    },
    success: function (response) {
        var blob = response.data;
        var a = document.createElement('a');
        var fileUrl = window.URL.createObjectURL(blob);
        var filename = 'myfile.pdf';
        /* you can also use below to get filename from backend */
        // var contentDisposition = response.headers('Content-Disposition');
        // var matches = /filename=\\"(.+?)\\"/g.exec(contentDisposition);
        // var filename = matches && matches.length > 1 ? matches\[1\] : '';
        /* but need add backend code like below, otherwise you cannot get Content-Disposition header */
        // + response.setHeader("Content-Disposition", "attachment; filename=\\"myfile.csv\\"");
        // + response.setHeader("Content-type", "application/octet-stream;charset=utf-8");
        // + response.setHeader("Access-Control-Expose-Headers","Content-Disposition");
        // work in IE
        if (window.navigator && window.navigator.msSaveBlob) {
            window.navigator.msSaveBlob(blob, filename);
            return;
        }
        a.href = fileUrl;
        a.download = filename;
        a.dispatchEvent(new MouseEvent('click'));
        setTimeout(function() {
            a.remove();
            window.URL.revokeObjectURL.bind(window.URL, fileUrl);
        });
    }
  });
});