ng-click-outside2 - npm Package Compare versions

Comparing version 13.0.0 to 14.0.0

lib/ng-click-outside.directive.d.ts

@@ -1,2 +0,2 @@
-import { ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import { NgClickOutsideExcludeToken } from "./ng-click-outside-exclude.directive";
@@ -22,5 +22,2 @@ import * as i0 from "@angular/core";
 export declare class NgClickOutsideDirective implements OnChanges, OnDestroy {
-    private _el;
-    private _ngZone;
-    private document;
     /**
@@ -43,7 +40,2 @@ * Enables directive.
     /**
-     *  If enabled, emits an event when user clicks outside of applications' window while it's visible.
-     *  Especially useful if page contains iframes.
-     */
-    emitOnBlur: boolean;
-    /**
      * A comma-separated list of events to cause the trigger.
@@ -59,4 +51,7 @@ * ### For example, for additional mobile support:
     excludeDirective: NgClickOutsideExcludeToken | null;
+    private _el;
+    private _ngZone;
+    private document;
     private _events;
-    constructor(_el: ElementRef, _ngZone: NgZone, document: Document);
+    constructor();
     ngOnDestroy(): void;
@@ -67,7 +62,2 @@ ngOnChanges(changes: SimpleChanges): void;
     private _onClickBody;
-    /**
-     * Resolves problem with outside click on iframe
-     * @see https://github.com/arkon/ng-click-outside/issues/32
-     */
-    private _onWindowBlur;
     private _emit;
@@ -78,6 +68,4 @@ private _initClickOutsideListener;
     private _removeAttachOutsideOnClickListener;
-    private _initWindowBlurListener;
-    private _removeWindowBlurListener;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgClickOutsideDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgClickOutsideDirective, "[clickOutside]", never, { "clickOutsideEnabled": { "alias": "clickOutsideEnabled"; "required": false; }; "attachOutsideOnClick": { "alias": "attachOutsideOnClick"; "required": false; }; "delayClickOutsideInit": { "alias": "delayClickOutsideInit"; "required": false; }; "emitOnBlur": { "alias": "emitOnBlur"; "required": false; }; "clickOutsideEvents": { "alias": "clickOutsideEvents"; "required": false; }; }, { "clickOutside": "clickOutside"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgClickOutsideDirective, "[clickOutside]", never, { "clickOutsideEnabled": { "alias": "clickOutsideEnabled"; "required": false; }; "attachOutsideOnClick": { "alias": "attachOutsideOnClick"; "required": false; }; "delayClickOutsideInit": { "alias": "delayClickOutsideInit"; "required": false; }; "clickOutsideEvents": { "alias": "clickOutsideEvents"; "required": false; }; }, { "clickOutside": "clickOutside"; }, never, never, true, never>;
 }

package.json

 {
   "name": "ng-click-outside2",
-  "version": "13.0.0",
+  "version": "14.0.0",
   "description": "Angular directive for handling click events outside an element.",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -7,2 +7,4 @@ # ng-click-outside2
 [![Love Angular badge](https://img.shields.io/badge/angular-love-blue?logo=angular&angular=love)](https://www.github.com/angular/angular)
+[![GitHub issues](https://img.shields.io/github/issues/Kr0san89/ng-click-outside.svg "GitHub issues")](https://github.com/Kr0san89/ng-click-outside)
+[![GitHub stars](https://img.shields.io/github/stars/Kr0san89/ng-click-outside.svg "GitHub stars")](https://github.com/Kr0san89/ng-click-outside)
 
@@ -20,4 +22,5 @@ Angular directive for handling click events outside an element.
 2. [Compatibility](#compatibility)
-3. [Usage](#usage)
-4. [Migration from ng-click-outside](#migration-from-ng-click-outside)
+3. [Options](#options)
+4. [Usage](#example-usage)
+5. [Migration from ng-click-outside](#migration-from-ng-click-outside)
 
@@ -35,3 +38,3 @@ ## Installation
 | 14,15,16 | 11.x.x  | `ng-click-outside2@^11.0.0` |
-| 16       | 12.x.x  | `ng-click-outside2@^12.0.0` |
+| 16,17    | 12.x.x  | `ng-click-outside2@^12.0.0` |
 | 17       | 13.x.x  | `ng-click-outside2@^13.0.0` |
@@ -41,4 +44,17 @@
 
-## Usage
 
+
+### Options
+
+| Property name | Type    | Default   | Description                                                                                                                                                                                                                                       |
+| ------------- |---------|-----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `attachOutsideOnClick` | boolean | `false`   | By default, the outside click event handler is automatically attached. Explicitely setting this to `true` sets the handler after the element is clicked. The outside click event handler will then be removed after a click outside has occurred. |
+| `clickOutsideEnabled` | boolean | `true`    | Enables directive.                                                                                                                                                                                                                                |
+| `clickOutsideEvents` | string  | `'click'` | A comma-separated list of events to cause the trigger. For example, for additional mobile support: `[clickOutsideEvents]="'click,touchstart'"`.                                                                                                   |
+| `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)).                                                              |
+| `clickOutsideEmitOnBlur` | -       | -         | If enabled, emits an `blurWindow` event when user clicks outside of applications' window while it's visible. Especially useful if page contains iframes. (Import `NgClickOutsideEmitOnBlurDirective`)                                                                                |
+| `clickOutsideExclude` | string  |           | A comma-separated string of DOM element queries to exclude when clicking outside of the element. (Import NgClickOutsideExcludeDirective) For example: `[clickOutsideExclude]="'button,.btn-primary'"`.                                            |
+
+## Example Usage
+
 Add `NgClickOutsideDirective` to your imports:
@@ -73,13 +89,31 @@
 
-### Options
+### Usage with Excluding classes
+```typescript
+import {NgClickOutsideDirective} from 'ng-click-outside2';
 
-| Property name | Type | Default | Description                                                                                                                                                                                                                                       |
-| ------------- | ---- | ------- |---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `attachOutsideOnClick` | boolean | `false` | By default, the outside click event handler is automatically attached. Explicitely setting this to `true` sets the handler after the element is clicked. The outside click event handler will then be removed after a click outside has occurred. |
-| `clickOutsideEnabled` | boolean | `true` | Enables directive.                                                                                                                                                                                                                                |
-| `clickOutsideEvents` | string | `'click'` | A comma-separated list of events to cause the trigger. For example, for additional mobile support: `[clickOutsideEvents]="'click,touchstart'"`.                                                                                                   |
-| `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.                                                                                                       |
-| `clickOutsideExclude` | string | | A comma-separated string of DOM element queries to exclude when clicking outside of the element. (Import NgClickOutsideExcludeDirective) For example: `[clickOutsideExclude]="'button,.btn-primary'"`.                                                                                      |
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, NgClickOutsideDirective, NgClickOutsideExcludeDirective],
+  bootstrap: [AppComponent]
+})
+class AppModule {}
+```
 
+You can then use the directive in your templates:
+
+```typescript
+@Component({
+  selector: 'app',
+  template: `
+    <div (clickOutside)="onClickedOutside($event)" [clickOutsideExclude]="'.foo'">Click outside this</div>
+  `
+})
+export class AppComponent {
+  onClickedOutside(e: Event) {
+    console.log('Clicked outside:', e);
+  }
+}
+```
+
+
 ## Migration from ng-click-outside
@@ -86,0 +120,0 @@

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

Number of lines in readme file

128

increased by36.17%

Worsened metrics

Total package byte prevSize

54181

decreased by-10.94%

Lines of code

510

decreased by-14.14%

No dependency changes