ng-click-outside - npm Package Compare versions

Comparing version 3.2.0 to 3.3.0

lib/click-outside.directive.d.ts

@@ -6,8 +6,9 @@ import { ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges, NgZone } from '@angular/core';
     private platformId;
+    clickOutsideEnabled: boolean;
     attachOutsideOnClick: boolean;
     delayClickOutsideInit: boolean;
+    emitOnBlur: boolean;
     exclude: string;
     excludeBeforeClick: boolean;
     clickOutsideEvents: string;
-    clickOutsideEnabled: boolean;
     clickOutside: EventEmitter<Event>;
@@ -22,6 +23,17 @@ private _nodesExcluded;
     private _initOnClickBody();
-    private _initClickListeners();
     private _excludeCheck();
     private _onClickBody(ev);
+    /**
+     * Resolves problem with outside click on iframe
+     * @see https://github.com/arkon/ng-click-outside/issues/32
+     */
+    private _onWindowBlur(ev);
+    private _emit(ev);
     private _shouldExclude(target);
+    private _initClickOutsideListener();
+    private _removeClickOutsideListener();
+    private _initAttachOutsideOnClickListener();
+    private _removeAttachOutsideOnClickListener();
+    private _initWindowBlurListener();
+    private _removeWindowBlurListener();
 }

lib/click-outside.directive.js

@@ -10,8 +10,9 @@ "use strict";
         this.platformId = platformId;
+        this.clickOutsideEnabled = true;
         this.attachOutsideOnClick = false;
         this.delayClickOutsideInit = false;
+        this.emitOnBlur = false;
         this.exclude = '';
         this.excludeBeforeClick = false;
         this.clickOutsideEvents = '';
-        this.clickOutsideEnabled = true;
         this.clickOutside = new core_1.EventEmitter();
@@ -22,2 +23,3 @@ this._nodesExcluded = [];
         this._onClickBody = this._onClickBody.bind(this);
+        this._onWindowBlur = this._onWindowBlur.bind(this);
     }
@@ -31,10 +33,8 @@ ClickOutsideDirective.prototype.ngOnInit = function () {
     ClickOutsideDirective.prototype.ngOnDestroy = function () {
-        var _this = this;
         if (!common_1.isPlatformBrowser(this.platformId)) {
             return;
         }
-        if (this.attachOutsideOnClick) {
-            this._events.forEach(function (e) { return _this._el.nativeElement.removeEventListener(e, _this._initOnClickBody); });
-        }
-        this._events.forEach(function (e) { return document.body.removeEventListener(e, _this._onClickBody); });
+        this._removeClickOutsideListener();
+        this._removeAttachOutsideOnClickListener();
+        this._removeWindowBlurListener();
     };
@@ -45,3 +45,3 @@ ClickOutsideDirective.prototype.ngOnChanges = function (changes) {
         }
-        if (changes['attachOutsideOnClick'] || changes['exclude']) {
+        if (changes['attachOutsideOnClick'] || changes['exclude'] || changes['emitOnBlur']) {
             this._init();
@@ -51,3 +51,2 @@ }
     ClickOutsideDirective.prototype._init = function () {
-        var _this = this;
         if (this.clickOutsideEvents !== '') {
@@ -58,5 +57,3 @@ this._events = this.clickOutsideEvents.split(',').map(function (e) { return e.trim(); });
         if (this.attachOutsideOnClick) {
-            this._ngZone.runOutsideAngular(function () {
-                _this._events.forEach(function (e) { return _this._el.nativeElement.addEventListener(e, _this._initOnClickBody); });
-            });
+            this._initAttachOutsideOnClickListener();
         }
@@ -66,17 +63,14 @@ else {
         }
+        if (this.emitOnBlur) {
+            this._initWindowBlurListener();
+        }
     };
     ClickOutsideDirective.prototype._initOnClickBody = function () {
         if (this.delayClickOutsideInit) {
-            setTimeout(this._initClickListeners.bind(this));
+            setTimeout(this._initClickOutsideListener.bind(this));
         }
         else {
-            this._initClickListeners();
+            this._initClickOutsideListener();
         }
     };
-    ClickOutsideDirective.prototype._initClickListeners = function () {
-        var _this = this;
-        this._ngZone.runOutsideAngular(function () {
-            _this._events.forEach(function (e) { return document.body.addEventListener(e, _this._onClickBody); });
-        });
-    };
     ClickOutsideDirective.prototype._excludeCheck = function () {
@@ -96,3 +90,2 @@ if (this.exclude) {
     ClickOutsideDirective.prototype._onClickBody = function (ev) {
-        var _this = this;
         if (!this.clickOutsideEnabled) {
@@ -105,8 +98,27 @@ return;
         if (!this._el.nativeElement.contains(ev.target) && !this._shouldExclude(ev.target)) {
-            this._ngZone.run(function () { return _this.clickOutside.emit(ev); });
+            this._emit(ev);
             if (this.attachOutsideOnClick) {
-                this._events.forEach(function (e) { return document.body.removeEventListener(e, _this._onClickBody); });
+                this._removeClickOutsideListener();
             }
         }
     };
+    /**
+     * Resolves problem with outside click on iframe
+     * @see https://github.com/arkon/ng-click-outside/issues/32
+     */
+    ClickOutsideDirective.prototype._onWindowBlur = function (ev) {
+        var _this = this;
+        setTimeout(function () {
+            if (!document.hidden) {
+                _this._emit(ev);
+            }
+        });
+    };
+    ClickOutsideDirective.prototype._emit = function (ev) {
+        var _this = this;
+        if (!this.clickOutsideEnabled) {
+            return;
+        }
+        this._ngZone.run(function () { return _this.clickOutside.emit(ev); });
+    };
     ClickOutsideDirective.prototype._shouldExclude = function (target) {
@@ -121,2 +133,38 @@ for (var _i = 0, _a = this._nodesExcluded; _i < _a.length; _i++) {
     };
+    ClickOutsideDirective.prototype._initClickOutsideListener = function () {
+        var _this = this;
+        this._ngZone.runOutsideAngular(function () {
+            _this._events.forEach(function (e) { return document.body.addEventListener(e, _this._onClickBody); });
+        });
+    };
+    ClickOutsideDirective.prototype._removeClickOutsideListener = function () {
+        var _this = this;
+        this._ngZone.runOutsideAngular(function () {
+            _this._events.forEach(function (e) { return document.body.removeEventListener(e, _this._onClickBody); });
+        });
+    };
+    ClickOutsideDirective.prototype._initAttachOutsideOnClickListener = function () {
+        var _this = this;
+        this._ngZone.runOutsideAngular(function () {
+            _this._events.forEach(function (e) { return _this._el.nativeElement.addEventListener(e, _this._initOnClickBody); });
+        });
+    };
+    ClickOutsideDirective.prototype._removeAttachOutsideOnClickListener = function () {
+        var _this = this;
+        this._ngZone.runOutsideAngular(function () {
+            _this._events.forEach(function (e) { return _this._el.nativeElement.removeEventListener(e, _this._initOnClickBody); });
+        });
+    };
+    ClickOutsideDirective.prototype._initWindowBlurListener = function () {
+        var _this = this;
+        this._ngZone.runOutsideAngular(function () {
+            window.addEventListener('blur', _this._onWindowBlur);
+        });
+    };
+    ClickOutsideDirective.prototype._removeWindowBlurListener = function () {
+        var _this = this;
+        this._ngZone.runOutsideAngular(function () {
+            window.removeEventListener('blur', _this._onWindowBlur);
+        });
+    };
     ClickOutsideDirective.decorators = [
@@ -133,8 +181,9 @@ { type: core_1.Injectable },
     ClickOutsideDirective.propDecorators = {
+        'clickOutsideEnabled': [{ type: core_1.Input },],
         'attachOutsideOnClick': [{ type: core_1.Input },],
         'delayClickOutsideInit': [{ type: core_1.Input },],
+        'emitOnBlur': [{ type: core_1.Input },],
         'exclude': [{ type: core_1.Input },],
         'excludeBeforeClick': [{ type: core_1.Input },],
         'clickOutsideEvents': [{ type: core_1.Input },],
-        'clickOutsideEnabled': [{ type: core_1.Input },],
         'clickOutside': [{ type: core_1.Output },],
@@ -141,0 +190,0 @@ };

lib/click-outside.directive.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"ClickOutsideDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[clickOutside]"}]}],"members":{"attachOutsideOnClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"delayClickOutsideInit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"exclude":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"excludeBeforeClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"clickOutsideEvents":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"clickOutsideEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"clickOutside":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID"}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","name":"Object"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"_init":[{"__symbolic":"method"}],"_initOnClickBody":[{"__symbolic":"method"}],"_initClickListeners":[{"__symbolic":"method"}],"_excludeCheck":[{"__symbolic":"method"}],"_onClickBody":[{"__symbolic":"method"}],"_shouldExclude":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ClickOutsideDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[clickOutside]"}]}],"members":{"attachOutsideOnClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"delayClickOutsideInit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"exclude":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"excludeBeforeClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"clickOutsideEvents":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"clickOutsideEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"clickOutside":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID"}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","name":"Object"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"_init":[{"__symbolic":"method"}],"_initOnClickBody":[{"__symbolic":"method"}],"_initClickListeners":[{"__symbolic":"method"}],"_excludeCheck":[{"__symbolic":"method"}],"_onClickBody":[{"__symbolic":"method"}],"_shouldExclude":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"ClickOutsideDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[clickOutside]"}]}],"members":{"clickOutsideEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"attachOutsideOnClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"delayClickOutsideInit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"emitOnBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"exclude":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"excludeBeforeClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"clickOutsideEvents":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"clickOutside":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID"}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","name":"Object"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"_init":[{"__symbolic":"method"}],"_initOnClickBody":[{"__symbolic":"method"}],"_excludeCheck":[{"__symbolic":"method"}],"_onClickBody":[{"__symbolic":"method"}],"_onWindowBlur":[{"__symbolic":"method"}],"_emit":[{"__symbolic":"method"}],"_shouldExclude":[{"__symbolic":"method"}],"_initClickOutsideListener":[{"__symbolic":"method"}],"_removeClickOutsideListener":[{"__symbolic":"method"}],"_initAttachOutsideOnClickListener":[{"__symbolic":"method"}],"_removeAttachOutsideOnClickListener":[{"__symbolic":"method"}],"_initWindowBlurListener":[{"__symbolic":"method"}],"_removeWindowBlurListener":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ClickOutsideDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[clickOutside]"}]}],"members":{"clickOutsideEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"attachOutsideOnClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"delayClickOutsideInit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"emitOnBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"exclude":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"excludeBeforeClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"clickOutsideEvents":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"clickOutside":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID"}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","name":"Object"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"_init":[{"__symbolic":"method"}],"_initOnClickBody":[{"__symbolic":"method"}],"_excludeCheck":[{"__symbolic":"method"}],"_onClickBody":[{"__symbolic":"method"}],"_onWindowBlur":[{"__symbolic":"method"}],"_emit":[{"__symbolic":"method"}],"_shouldExclude":[{"__symbolic":"method"}],"_initClickOutsideListener":[{"__symbolic":"method"}],"_removeClickOutsideListener":[{"__symbolic":"method"}],"_initAttachOutsideOnClickListener":[{"__symbolic":"method"}],"_removeAttachOutsideOnClickListener":[{"__symbolic":"method"}],"_initWindowBlurListener":[{"__symbolic":"method"}],"_removeWindowBlurListener":[{"__symbolic":"method"}]}}}}]

package.json

 {
   "name": "ng-click-outside",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Angular 4+ directive for handling click events outside an element.",
@@ -35,3 +35,3 @@ "repository": {
     "build": "npm run lint && rimraf lib && ngc",
-    "prepublish": "npm run build"
+    "prepare": "npm run build"
   },
@@ -38,0 +38,0 @@ "peerDependencies": {

README.md

@@ -67,3 +67,4 @@ # ng-click-outside
 | `delayClickOutsideInit` | boolean | `false` | Delays the initialization of the click outside handler. This may help for items that are conditionally shown ([see issue #13](https://github.com/arkon/ng-click-outside/issues/13)). |
+| `emitOnBlur` | boolean | `false` | If enabled, emits an event when user clicks outside of applications' window while it's visible. Especially useful if page contains iframes. |
 | `exclude` | string | | A comma-separated string of DOM element queries to exclude when clicking outside of the element. For example: `[exclude]="'button,.btn-primary'"`. |
 | `excludeBeforeClick` | boolean | `false` | By default, `clickOutside` registers excluded DOM elements on init. This property refreshes the list before the `clickOutside` event is triggered. This is useful for ensuring that excluded elements added to the DOM after init are excluded (e.g. ng2-bootstrap popover: this allows for clicking inside the `.popover-content` area if specified in `exclude`). |

src/click-outside.directive.ts

@@ -22,8 +22,12 @@ import {
 
+  @Input() clickOutsideEnabled: boolean = true;
+
   @Input() attachOutsideOnClick: boolean = false;
   @Input() delayClickOutsideInit: boolean = false;
+  @Input() emitOnBlur: boolean = false;
+
   @Input() exclude: string = '';
   @Input() excludeBeforeClick: boolean = false;
+
   @Input() clickOutsideEvents: string = '';
-  @Input() clickOutsideEnabled: boolean = true;
 
@@ -35,7 +39,9 @@ @Output() clickOutside: EventEmitter<Event> = new EventEmitter<Event>();
 
-  constructor(private _el: ElementRef,
-              private _ngZone: NgZone,
-              @Inject(PLATFORM_ID) private platformId: Object) {
+  constructor(
+      private _el: ElementRef,
+      private _ngZone: NgZone,
+      @Inject(PLATFORM_ID) private platformId: Object) {
     this._initOnClickBody = this._initOnClickBody.bind(this);
     this._onClickBody = this._onClickBody.bind(this);
+    this._onWindowBlur = this._onWindowBlur.bind(this);
   }
@@ -52,7 +58,5 @@
 
-    if (this.attachOutsideOnClick) {
-      this._events.forEach(e => this._el.nativeElement.removeEventListener(e, this._initOnClickBody));
-    }
-
-    this._events.forEach(e => document.body.removeEventListener(e, this._onClickBody));
+    this._removeClickOutsideListener();
+    this._removeAttachOutsideOnClickListener();
+    this._removeWindowBlurListener();
   }
@@ -63,3 +67,3 @@
 
-    if (changes['attachOutsideOnClick'] || changes['exclude']) {
+    if (changes['attachOutsideOnClick'] || changes['exclude'] || changes['emitOnBlur']) {
       this._init();
@@ -77,8 +81,10 @@ }
     if (this.attachOutsideOnClick) {
-      this._ngZone.runOutsideAngular(() => {
-        this._events.forEach(e => this._el.nativeElement.addEventListener(e, this._initOnClickBody));
-      });
+      this._initAttachOutsideOnClickListener();
     } else {
       this._initOnClickBody();
     }
+
+    if (this.emitOnBlur) {
+      this._initWindowBlurListener();
+    }
   }
@@ -88,14 +94,8 @@
     if (this.delayClickOutsideInit) {
-      setTimeout(this._initClickListeners.bind(this));
+      setTimeout(this._initClickOutsideListener.bind(this));
     } else {
-      this._initClickListeners();
+      this._initClickOutsideListener();
     }
   }
 
-  private _initClickListeners() {
-    this._ngZone.runOutsideAngular(() => {
-      this._events.forEach(e => document.body.addEventListener(e, this._onClickBody));
-    });
-  }
-
   private _excludeCheck() {
@@ -115,5 +115,3 @@ if (this.exclude) {
   private _onClickBody(ev: Event) {
-    if (!this.clickOutsideEnabled) {
-      return;
-    }
+    if (!this.clickOutsideEnabled) { return; }
 
@@ -125,6 +123,6 @@ if (this.excludeBeforeClick) {
     if (!this._el.nativeElement.contains(ev.target) && !this._shouldExclude(ev.target)) {
-      this._ngZone.run(() => this.clickOutside.emit(ev));
+      this._emit(ev);
 
       if (this.attachOutsideOnClick) {
-        this._events.forEach(e => document.body.removeEventListener(e, this._onClickBody));
+        this._removeClickOutsideListener();
       }
@@ -134,2 +132,20 @@ }
 
+  /**
+   * Resolves problem with outside click on iframe
+   * @see https://github.com/arkon/ng-click-outside/issues/32
+   */
+  private _onWindowBlur(ev: Event) {
+    setTimeout(() => {
+      if (!document.hidden) {
+        this._emit(ev);
+      }
+    });
+  }
+
+  private _emit(ev: Event) {
+    if (!this.clickOutsideEnabled) { return; }
+
+    this._ngZone.run(() => this.clickOutside.emit(ev));
+  }
+
   private _shouldExclude(target): boolean {
@@ -144,2 +160,39 @@ for (let excludedNode of this._nodesExcluded) {
   }
+
+  private _initClickOutsideListener() {
+    this._ngZone.runOutsideAngular(() => {
+      this._events.forEach(e => document.body.addEventListener(e, this._onClickBody));
+    });
+  }
+
+  private _removeClickOutsideListener() {
+    this._ngZone.runOutsideAngular(() => {
+      this._events.forEach(e => document.body.removeEventListener(e, this._onClickBody));
+    });
+  }
+
+  private _initAttachOutsideOnClickListener() {
+    this._ngZone.runOutsideAngular(() => {
+      this._events.forEach(e => this._el.nativeElement.addEventListener(e, this._initOnClickBody));
+    });
+  }
+
+  private _removeAttachOutsideOnClickListener() {
+    this._ngZone.runOutsideAngular(() => {
+      this._events.forEach(e => this._el.nativeElement.removeEventListener(e, this._initOnClickBody));
+    });
+  }
+
+  private _initWindowBlurListener() {
+    this._ngZone.runOutsideAngular(() => {
+      window.addEventListener('blur', this._onWindowBlur);
+    });
+  }
+
+  private _removeWindowBlurListener() {
+    this._ngZone.runOutsideAngular(() => {
+      window.removeEventListener('blur', this._onWindowBlur);
+    });
+  }
+
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

27174

increased by20.66%

Lines of code

408

increased by33.33%

Number of lines in readme file

70

increased by1.45%

No dependency changes