@dvirus-js/angular 0.0.2

package/README.md

@@ -0,0 +1,3 @@
+# angular-utils
+
+This library was generated with [Nx](https://nx.dev).

package/fesm2022/dvirus-js-angular.mjs

@@ -0,0 +1,67 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, output, effect, Directive } from '@angular/core';
+
+/**
+ * Directive that emits an event when a click occurs outside the host element or a group of elements.
+ *
+ * Usage:
+ * ```html
+ * <div [clickOutside]="handler"></div>
+ * ```
+ *
+ * - 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.
+ */
+class ClickOutsideDirective {
+    /**
+     * Reference to the host element.
+     * @internal
+     */
+    el = inject(ElementRef);
+    /**
+     * 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" }] : []));
+    /**
+     * Event emitted when a click occurs outside the host and group elements.
+     */
+    clickOutside = output();
+    /**
+     * 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 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);
+            });
+        });
+    }
+    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 });
+}
+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"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ClickOutsideDirective };
+//# sourceMappingURL=dvirus-js-angular.mjs.map

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

@@ -0,0 +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;;;;"}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@dvirus-js/angular",
+  "version": "0.0.2",
+  "peerDependencies": {
+    "@angular/core": "^21.1.0",
+    "@angular/forms": "^21.1.0"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "fesm2022/dvirus-js-angular.mjs",
+  "typings": "types/dvirus-js-angular.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/dvirus-js-angular.d.ts",
+      "default": "./fesm2022/dvirus-js-angular.mjs"
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

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

@@ -0,0 +1,42 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Directive that emits an event when a click occurs outside the host element or a group of elements.
+ *
+ * Usage:
+ * ```html
+ * <div [clickOutside]="handler"></div>
+ * ```
+ *
+ * - 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 {
+    /**
+     * Reference to the host element.
+     * @internal
+     */
+    private el;
+    /**
+     * 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[]>;
+    /**
+     * Event emitted when a click occurs outside the host and group elements.
+     */
+    clickOutside: _angular_core.OutputEmitterRef<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>;
+}
+
+export { ClickOutsideDirective };