@dvirus-js/angular 0.0.2 → 0.0.4

package/fesm2022/dvirus-js-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, output, effect, Directive } from '@angular/core';
+import { inject, ElementRef, EventEmitter, Output, Input, Directive } from '@angular/core';
 
 /**
  * Directive that emits an event when a click occurs outside the host element or a group of elements.
@@ -22,42 +22,41 @@ class ClickOutsideDirective {
      * Optional group of elements to consider as 'inside'.
      * If the click is inside any of these, the event will not fire.
      */
-    group = input([], ...(ngDevMode ? [{ debugName: "group" }] : []));
+    group = [];
     /**
      * Event emitted when a click occurs outside the host and group elements.
      */
-    clickOutside = output();
+    clickOutside = new EventEmitter();
     /**
      * Handles document click events and emits if the click is outside.
      * @param event MouseEvent from the document
      */
     handleClick = (event) => {
-        const allElements = [this.el.nativeElement, ...this.group()];
+        const allElements = [this.el.nativeElement, ...this.group];
         const clickedInside = allElements.some((el) => el.contains(event.target));
         if (!clickedInside) {
             this.clickOutside.emit(event);
         }
     };
-    /**
-     * Sets up the document click listener and cleans up on destroy.
-     */
-    constructor() {
-        effect((cleanFn) => {
-            document.addEventListener('click', this.handleClick, true);
-            cleanFn(() => {
-                document.removeEventListener('click', this.handleClick, true);
-            });
-        });
+    ngOnInit() {
+        document.addEventListener('click', this.handleClick, true);
+    }
+    ngOnDestroy() {
+        document.removeEventListener('click', this.handleClick, true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.4", type: ClickOutsideDirective, isStandalone: true, selector: "[djsClickOutside]", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickOutside: "clickOutside" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.4", type: ClickOutsideDirective, isStandalone: true, selector: "[djsClickOutside]", inputs: { group: "group" }, outputs: { clickOutside: "clickOutside" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ClickOutsideDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[djsClickOutside]',
                 }]
-        }], ctorParameters: () => [], propDecorators: { group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], clickOutside: [{ type: i0.Output, args: ["clickOutside"] }] } });
+        }], propDecorators: { group: [{
+                type: Input
+            }], clickOutside: [{
+                type: Output
+            }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/dvirus-js-angular.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dvirus-js-angular.mjs","sources":["../../../../../packages/angular/angular-utils/src/lib/directives/click-outside.directive.ts","../../../../../packages/angular/angular-utils/src/dvirus-js-angular.ts"],"sourcesContent":["import { Directive, effect, ElementRef, inject, input, output } from '@angular/core';\n\n/**\n * Directive that emits an event when a click occurs outside the host element or a group of elements.\n *\n * Usage:\n * ```html\n * <div [clickOutside]=\"handler\"></div>\n * ```\n *\n * - Emits `clickOutside` when a click is detected outside the host and any elements in the `group` input.\n * - Useful for closing popups, dropdowns, or dialogs when clicking outside.\n */\n@Directive({\n  selector: '[djsClickOutside]',\n})\nexport class ClickOutsideDirective {\n  /**\n   * Reference to the host element.\n   * @internal\n   */\n  private el = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  /**\n   * Optional group of elements to consider as 'inside'.\n   * If the click is inside any of these, the event will not fire.\n   */\n  group = input<HTMLElement[]>([]);\n\n  /**\n   * Event emitted when a click occurs outside the host and group elements.\n   */\n  clickOutside = output<MouseEvent>();\n\n  /**\n   * Handles document click events and emits if the click is outside.\n   * @param event MouseEvent from the document\n   */\n  private handleClick = (event: MouseEvent) => {\n    const allElements = [this.el.nativeElement, ...this.group()];\n    const clickedInside = allElements.some((el) => el.contains(event.target as Node));\n\n    if (!clickedInside) {\n      this.clickOutside.emit(event);\n    }\n  };\n\n  /**\n   * Sets up the document click listener and cleans up on destroy.\n   */\n  constructor() {\n    effect((cleanFn) => {\n      document.addEventListener('click', this.handleClick, true);\n\n      cleanFn(() => {\n        document.removeEventListener('click', this.handleClick, true);\n      });\n    });\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA;;;;;;;;;;AAUG;MAIU,qBAAqB,CAAA;AAChC;;;AAGG;AACK,IAAA,EAAE,GAAG,MAAM,CAA0B,UAAU,CAAC;AAExD;;;AAGG;AACH,IAAA,KAAK,GAAG,KAAK,CAAgB,EAAE,iDAAC;AAEhC;;AAEG;IACH,YAAY,GAAG,MAAM,EAAc;AAEnC;;;AAGG;AACK,IAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;AAC1C,QAAA,MAAM,WAAW,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QAC5D,MAAM,aAAa,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,CAAC;QAEjF,IAAI,CAAC,aAAa,EAAE;AAClB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;QAC/B;AACF,IAAA,CAAC;AAED;;AAEG;AACH,IAAA,WAAA,GAAA;AACE,QAAA,MAAM,CAAC,CAAC,OAAO,KAAI;YACjB,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC;YAE1D,OAAO,CAAC,MAAK;gBACX,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC;AAC/D,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC,CAAC;IACJ;uGA1CW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAArB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAHjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,mBAAmB;AAC9B,iBAAA;;;ACfD;;AAEG;;;;"}
+{"version":3,"file":"dvirus-js-angular.mjs","sources":["../../../../../packages/angular/angular-utils/src/lib/directives/click-outside.directive.ts","../../../../../packages/angular/angular-utils/src/dvirus-js-angular.ts"],"sourcesContent":["import { Directive, ElementRef, EventEmitter, inject, Input, OnDestroy, OnInit, Output } from '@angular/core';\n\n/**\n * Directive that emits an event when a click occurs outside the host element or a group of elements.\n *\n * Usage:\n * ```html\n * <div [clickOutside]=\"handler\"></div>\n * ```\n *\n * - Emits `clickOutside` when a click is detected outside the host and any elements in the `group` input.\n * - Useful for closing popups, dropdowns, or dialogs when clicking outside.\n */\n@Directive({\n  selector: '[djsClickOutside]',\n})\nexport class ClickOutsideDirective implements OnInit, OnDestroy {\n  /**\n   * Reference to the host element.\n   * @internal\n   */\n  private el = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  /**\n   * Optional group of elements to consider as 'inside'.\n   * If the click is inside any of these, the event will not fire.\n   */\n  @Input() group: HTMLElement[] = [];\n\n  /**\n   * Event emitted when a click occurs outside the host and group elements.\n   */\n  @Output() clickOutside = new EventEmitter<MouseEvent>();\n\n  /**\n   * Handles document click events and emits if the click is outside.\n   * @param event MouseEvent from the document\n   */\n  private handleClick = (event: MouseEvent) => {\n    const allElements = [this.el.nativeElement, ...this.group];\n    const clickedInside = allElements.some((el) => el.contains(event.target as Node));\n\n    if (!clickedInside) {\n      this.clickOutside.emit(event);\n    }\n  };\n\n  ngOnInit(): void {\n    document.addEventListener('click', this.handleClick, true);\n  }\n\n  ngOnDestroy(): void {\n    document.removeEventListener('click', this.handleClick, true);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA;;;;;;;;;;AAUG;MAIU,qBAAqB,CAAA;AAChC;;;AAGG;AACK,IAAA,EAAE,GAAG,MAAM,CAA0B,UAAU,CAAC;AAExD;;;AAGG;IACM,KAAK,GAAkB,EAAE;AAElC;;AAEG;AACO,IAAA,YAAY,GAAG,IAAI,YAAY,EAAc;AAEvD;;;AAGG;AACK,IAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;AAC1C,QAAA,MAAM,WAAW,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC1D,MAAM,aAAa,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,CAAC;QAEjF,IAAI,CAAC,aAAa,EAAE;AAClB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;QAC/B;AACF,IAAA,CAAC;IAED,QAAQ,GAAA;QACN,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC;IAC5D;IAEA,WAAW,GAAA;QACT,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC;IAC/D;uGArCW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAArB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAHjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,mBAAmB;AAC9B,iBAAA;;sBAYE;;sBAKA;;;AChCH;;AAEG;;;;"}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@dvirus-js/angular",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "peerDependencies": {
-    "@angular/core": "^21.1.0",
-    "@angular/forms": "^21.1.0"
+    "@angular/core": ">=16.0.0 <22.0.0",
+    "@angular/forms": ">=16.0.0 <22.0.0"
   },
   "sideEffects": false,
   "publishConfig": {

package/types/dvirus-js-angular.d.ts

@@ -1,4 +1,5 @@
-import * as _angular_core from '@angular/core';
+import * as i0 from '@angular/core';
+import { OnInit, OnDestroy, EventEmitter } from '@angular/core';
 
 /**
  * Directive that emits an event when a click occurs outside the host element or a group of elements.
@@ -11,7 +12,7 @@ import * as _angular_core from '@angular/core';
  * - Emits `clickOutside` when a click is detected outside the host and any elements in the `group` input.
  * - Useful for closing popups, dropdowns, or dialogs when clicking outside.
  */
-declare class ClickOutsideDirective {
+declare class ClickOutsideDirective implements OnInit, OnDestroy {
     /**
      * Reference to the host element.
      * @internal
@@ -21,22 +22,20 @@ declare class ClickOutsideDirective {
      * Optional group of elements to consider as 'inside'.
      * If the click is inside any of these, the event will not fire.
      */
-    group: _angular_core.InputSignal<HTMLElement[]>;
+    group: HTMLElement[];
     /**
      * Event emitted when a click occurs outside the host and group elements.
      */
-    clickOutside: _angular_core.OutputEmitterRef<MouseEvent>;
+    clickOutside: EventEmitter<MouseEvent>;
     /**
      * Handles document click events and emits if the click is outside.
      * @param event MouseEvent from the document
      */
     private handleClick;
-    /**
-     * Sets up the document click listener and cleans up on destroy.
-     */
-    constructor();
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClickOutsideDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ClickOutsideDirective, "[djsClickOutside]", never, { "group": { "alias": "group"; "required": false; "isSignal": true; }; }, { "clickOutside": "clickOutside"; }, never, never, true, never>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClickOutsideDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ClickOutsideDirective, "[djsClickOutside]", never, { "group": { "alias": "group"; "required": false; }; }, { "clickOutside": "clickOutside"; }, never, never, true, never>;
 }
 
 export { ClickOutsideDirective };