@telperion/ng-pack 1.0.0 → 1.1.1

package/README.md

@@ -74,9 +74,57 @@ Signal-based forms utilities for Angular template-driven forms.
 
 **Import:** `@telperion/ng-pack/utils`
 
-🚧 **Under Construction**
+Angular utility functions and plugins for enhanced development experience.
+
+#### Key Features
+
+- 🎯 Event modifier syntax for templates (`.pd`, `.sp`)
+- 🔗 Directive-as-service provider utility
+- 📦 Tree-shakeable and type-safe
+- ⚡ Zero dependencies
+
+#### Quick Start
+
+**Event Modifiers Plugin**
+
+```typescript
+import { provideEventModifiersPlugin } from '@telperion/ng-pack/utils';
+
+bootstrapApplication(AppComponent, {
+  providers: [provideEventModifiersPlugin()]
+});
+```
+
+```html
+<!-- Prevent default and stop propagation with modifiers -->
+<form (submit.pd)="onSubmit()">...</form>
+<div (click.sp)="handleClick()">...</div>
+<button (click.pd.sp)="handleButtonClick()">Click me</button>
+```
+
+**Provide Service Directive**
+
+```typescript
+import { provideServiceDirective } from '@telperion/ng-pack/utils';
+
+// Create an injection token
+export const ParentService = new InjectionToken<ParentDirective>("ParentService");
+
+// Provide directive as service
+@Directive({
+  selector: '[parent]',
+  providers: [provideServiceDirective(ParentService, ParentDirective)],
+})
+export class ParentDirective { }
+
+// Inject in child
+@Directive({ selector: '[child]' })
+export class ChildDirective {
+  private parent = inject(ParentService);
+}
+```
 
-Common Angular utilities and helpers.
+[Full documentation →](https://github.com/telperiontech/telperion/tree/main/libs/ng-pack/utils)
 
 ---
 

package/fesm2022/telperion-ng-pack-utils.mjs

@@ -1,17 +1,7 @@
 import * as i0 from '@angular/core';
-import { NgModule, forwardRef } from '@angular/core';
-
-class UtilsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UtilsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.5", ngImport: i0, type: UtilsModule });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UtilsModule });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UtilsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [],
-                }]
-        }] });
+import { forwardRef, Inject, Injectable } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { EventManagerPlugin, EVENT_MANAGER_PLUGINS } from '@angular/platform-browser';
 
 /**
  * Utility function to create a provider for a directive/component that can be injected as a service.
@@ -61,9 +51,76 @@ function provideServiceDirective(token, directive) {
     };
 }
 
+/**
+ * Angular Event Manager Plugin that enables event modifier syntax in templates.
+ *
+ * @example
+ * ```html
+ * <form (submit.pd)="onSubmit()">...</form>
+ * <div (click.sp)="handleClick()">...</div>
+ * <button (click.pd.sp)="handleButtonClick()">Click me</button>
+ * ```
+ */
+/**
+ * Event Manager Plugin that adds support for event modifiers.
+ * @internal
+ */
+class EventModifiersPlugin extends EventManagerPlugin {
+    /**
+     * Supported modifiers: `pd` (preventDefault), `sp` (stopPropagation)
+     */
+    static modifierMap = {
+        'pd': (e) => e.preventDefault(),
+        'sp': (e) => e.stopPropagation(),
+    };
+    constructor(doc) {
+        super(doc);
+    }
+    supports(eventName) {
+        return eventName.includes('.') &&
+            eventName.split('.').some(part => part in EventModifiersPlugin.modifierMap);
+    }
+    addEventListener(element, eventName, handler) {
+        const parts = eventName.split('.');
+        const domEventName = parts[0];
+        const modifiers = parts.slice(1).filter(m => m in EventModifiersPlugin.modifierMap);
+        const wrappedHandler = (event) => {
+            modifiers.forEach(mod => EventModifiersPlugin.modifierMap[mod](event));
+            return handler(event);
+        };
+        element.addEventListener(domEventName, wrappedHandler);
+        return () => element.removeEventListener(domEventName, wrappedHandler);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: EventModifiersPlugin, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: EventModifiersPlugin });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: EventModifiersPlugin, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }] });
+/**
+ * Provides the Event Modifiers Plugin.
+ *
+ * @example
+ * ```typescript
+ * bootstrapApplication(AppComponent, {
+ *   providers: [provideEventModifiersPlugin()]
+ * });
+ * ```
+ */
+function provideEventModifiersPlugin() {
+    return {
+        provide: EVENT_MANAGER_PLUGINS,
+        useClass: EventModifiersPlugin,
+        multi: true
+    };
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { UtilsModule, provideServiceDirective };
+export { provideEventModifiersPlugin, provideServiceDirective };
 //# sourceMappingURL=telperion-ng-pack-utils.mjs.map

package/fesm2022/telperion-ng-pack-utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"telperion-ng-pack-utils.mjs","sources":["../../utils/src/lib/utils-module.ts","../../utils/src/lib/provide-service-directive.ts","../../utils/src/telperion-ng-pack-utils.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\n\n@NgModule({\n  imports: [],\n})\nexport class UtilsModule {}\n","import { forwardRef, InjectionToken, Provider, Type } from \"@angular/core\";\r\n\r\n/**\r\n * Utility function to create a provider for a directive/component that can be injected as a service.\r\n * This is useful for cases where you want to inject a directive/component instance into another directive/component.\r\n *\r\n * Example usage:\r\n *\r\n * files:\r\n * - parent.directive.ts\r\n * - child.directive.ts\r\n * - parent.service.ts\r\n *\r\n * parent.service.ts:\r\n * ```\r\n * import { InjectionToken } from \"@angular/core\";\r\n * import type { ParentDirective } from \"./parent.directive\";\r\n *\r\n * export const ParentService = new InjectionToken<ParentDirective>(\"ParentService\");\r\n * ```\r\n *\r\n * parent.directive.ts:\r\n * ```\r\n * @Directive({\r\n *   selector: 'parent',\r\n *   providers: [provideServiceDirective(ParentService, ParentDirective)],\r\n * })\r\n * export class ParentDirective {...}\r\n * ```\r\n * child.directive.ts:\r\n * ```\r\n * @Directive({\r\n *   selector: 'child',\r\n * })\r\n * export class ChildDirective {\r\n *   #parent = inject(ParentService);\r\n * }\r\n * ```\r\n *\r\n * @param token - The injection token to provide.\r\n * @param directive - The directive/component class that will be provided.\r\n * @returns A provider object that can be used in the providers array of an Angular module or component.\r\n */\r\nexport function provideServiceDirective<T extends Type<unknown>>(\r\n  token: InjectionToken<T>,\r\n  directive: T\r\n): Provider {\r\n  return {\r\n    provide: token,\r\n    useExisting: forwardRef(() => directive)\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAKa,WAAW,CAAA;uGAAX,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;wGAAX,WAAW,EAAA,CAAA;wGAAX,WAAW,EAAA,CAAA;;2FAAX,WAAW,EAAA,UAAA,EAAA,CAAA;kBAHvB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,EAAE;AACZ,iBAAA;;;ACFD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCG;AACG,SAAU,uBAAuB,CACrC,KAAwB,EACxB,SAAY,EAAA;IAEZ,OAAO;AACL,QAAA,OAAO,EAAE,KAAK;AACd,QAAA,WAAW,EAAE,UAAU,CAAC,MAAM,SAAS;KACxC;AACH;;ACnDA;;AAEG;;;;"}
+{"version":3,"file":"telperion-ng-pack-utils.mjs","sources":["../../utils/src/provide-service-directive.ts","../../utils/src/event-modifiers.plugin.ts","../../utils/src/telperion-ng-pack-utils.ts"],"sourcesContent":["import { forwardRef, InjectionToken, Provider, Type } from \"@angular/core\";\r\n\r\n/**\r\n * Utility function to create a provider for a directive/component that can be injected as a service.\r\n * This is useful for cases where you want to inject a directive/component instance into another directive/component.\r\n *\r\n * Example usage:\r\n *\r\n * files:\r\n * - parent.directive.ts\r\n * - child.directive.ts\r\n * - parent.service.ts\r\n *\r\n * parent.service.ts:\r\n * ```\r\n * import { InjectionToken } from \"@angular/core\";\r\n * import type { ParentDirective } from \"./parent.directive\";\r\n *\r\n * export const ParentService = new InjectionToken<ParentDirective>(\"ParentService\");\r\n * ```\r\n *\r\n * parent.directive.ts:\r\n * ```\r\n * @Directive({\r\n *   selector: 'parent',\r\n *   providers: [provideServiceDirective(ParentService, ParentDirective)],\r\n * })\r\n * export class ParentDirective {...}\r\n * ```\r\n * child.directive.ts:\r\n * ```\r\n * @Directive({\r\n *   selector: 'child',\r\n * })\r\n * export class ChildDirective {\r\n *   #parent = inject(ParentService);\r\n * }\r\n * ```\r\n *\r\n * @param token - The injection token to provide.\r\n * @param directive - The directive/component class that will be provided.\r\n * @returns A provider object that can be used in the providers array of an Angular module or component.\r\n */\r\nexport function provideServiceDirective<T extends Type<unknown>>(\r\n  token: InjectionToken<T>,\r\n  directive: T\r\n): Provider {\r\n  return {\r\n    provide: token,\r\n    useExisting: forwardRef(() => directive)\r\n  }\r\n}\r\n","/**\r\n * Angular Event Manager Plugin that enables event modifier syntax in templates.\r\n *\r\n * @example\r\n * ```html\r\n * <form (submit.pd)=\"onSubmit()\">...</form>\r\n * <div (click.sp)=\"handleClick()\">...</div>\r\n * <button (click.pd.sp)=\"handleButtonClick()\">Click me</button>\r\n * ```\r\n */\r\n\r\nimport { DOCUMENT } from '@angular/common';\r\nimport { Inject, Injectable, Provider } from '@angular/core';\r\nimport { EVENT_MANAGER_PLUGINS, EventManagerPlugin } from '@angular/platform-browser';\r\n\r\n/**\r\n * Event Manager Plugin that adds support for event modifiers.\r\n * @internal\r\n */\r\n@Injectable()\r\nexport class EventModifiersPlugin extends EventManagerPlugin {\r\n  /**\r\n   * Supported modifiers: `pd` (preventDefault), `sp` (stopPropagation)\r\n   */\r\n  private static modifierMap: { [key: string]: (e: Event) => void } = {\r\n    'pd': (e: Event) => e.preventDefault(),\r\n    'sp': (e: Event) => e.stopPropagation(),\r\n  };\r\n\r\n  constructor(@Inject(DOCUMENT) doc: Document) {\r\n    super(doc);\r\n  }\r\n\r\n  supports(eventName: string): boolean {\r\n    return eventName.includes('.') &&\r\n      eventName.split('.').some(part => part in EventModifiersPlugin.modifierMap);\r\n  }\r\n\r\n  addEventListener(element: HTMLElement, eventName: string, handler: (event: Event) => void): () => void {\r\n    const parts = eventName.split('.');\r\n    const domEventName = parts[0];\r\n    const modifiers = parts.slice(1).filter(m => m in EventModifiersPlugin.modifierMap);\r\n\r\n    const wrappedHandler = (event: Event) => {\r\n      modifiers.forEach(mod => EventModifiersPlugin.modifierMap[mod](event));\r\n\r\n      return handler(event);\r\n    };\r\n\r\n    element.addEventListener(domEventName, wrappedHandler);\r\n\r\n    return () => element.removeEventListener(domEventName, wrappedHandler);\r\n  }\r\n}\r\n\r\n/**\r\n * Provides the Event Modifiers Plugin.\r\n *\r\n * @example\r\n * ```typescript\r\n * bootstrapApplication(AppComponent, {\r\n *   providers: [provideEventModifiersPlugin()]\r\n * });\r\n * ```\r\n */\r\nexport function provideEventModifiersPlugin(): Provider {\r\n  return {\r\n    provide: EVENT_MANAGER_PLUGINS,\r\n    useClass: EventModifiersPlugin,\r\n    multi: true\r\n  };\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCG;AACG,SAAU,uBAAuB,CACrC,KAAwB,EACxB,SAAY,EAAA;IAEZ,OAAO;AACL,QAAA,OAAO,EAAE,KAAK;AACd,QAAA,WAAW,EAAE,UAAU,CAAC,MAAM,SAAS;KACxC;AACH;;ACnDA;;;;;;;;;AASG;AAMH;;;AAGG;AAEG,MAAO,oBAAqB,SAAQ,kBAAkB,CAAA;AAC1D;;AAEG;IACK,OAAO,WAAW,GAA0C;QAClE,IAAI,EAAE,CAAC,CAAQ,KAAK,CAAC,CAAC,cAAc,EAAE;QACtC,IAAI,EAAE,CAAC,CAAQ,KAAK,CAAC,CAAC,eAAe,EAAE;KACxC;AAED,IAAA,WAAA,CAA8B,GAAa,EAAA;QACzC,KAAK,CAAC,GAAG,CAAC;IACZ;AAEA,IAAA,QAAQ,CAAC,SAAiB,EAAA;AACxB,QAAA,OAAO,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC;AAC5B,YAAA,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,oBAAoB,CAAC,WAAW,CAAC;IAC/E;AAEA,IAAA,gBAAgB,CAAC,OAAoB,EAAE,SAAiB,EAAE,OAA+B,EAAA;QACvF,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC;AAClC,QAAA,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC;QAC7B,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,oBAAoB,CAAC,WAAW,CAAC;AAEnF,QAAA,MAAM,cAAc,GAAG,CAAC,KAAY,KAAI;AACtC,YAAA,SAAS,CAAC,OAAO,CAAC,GAAG,IAAI,oBAAoB,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;AAEtE,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC;AACvB,QAAA,CAAC;AAED,QAAA,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,cAAc,CAAC;QAEtD,OAAO,MAAM,OAAO,CAAC,mBAAmB,CAAC,YAAY,EAAE,cAAc,CAAC;IACxE;AAhCW,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,kBASX,QAAQ,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;2GATjB,oBAAoB,EAAA,CAAA;;2FAApB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBADhC;;0BAUc,MAAM;2BAAC,QAAQ;;AA0B9B;;;;;;;;;AASG;SACa,2BAA2B,GAAA;IACzC,OAAO;AACL,QAAA,OAAO,EAAE,qBAAqB;AAC9B,QAAA,QAAQ,EAAE,oBAAoB;AAC9B,QAAA,KAAK,EAAE;KACR;AACH;;ACvEA;;AAEG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telperion/ng-pack",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",

package/types/telperion-ng-pack-utils.d.ts

@@ -1,12 +1,5 @@
-import * as i0 from '@angular/core';
 import { Type, InjectionToken, Provider } from '@angular/core';
 
-declare class UtilsModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<UtilsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<UtilsModule, never, never, never>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<UtilsModule>;
-}
-
 /**
  * Utility function to create a provider for a directive/component that can be injected as a service.
  * This is useful for cases where you want to inject a directive/component instance into another directive/component.
@@ -50,4 +43,16 @@ declare class UtilsModule {
  */
 declare function provideServiceDirective<T extends Type<unknown>>(token: InjectionToken<T>, directive: T): Provider;
 
-export { UtilsModule, provideServiceDirective };
+/**
+ * Provides the Event Modifiers Plugin.
+ *
+ * @example
+ * ```typescript
+ * bootstrapApplication(AppComponent, {
+ *   providers: [provideEventModifiersPlugin()]
+ * });
+ * ```
+ */
+declare function provideEventModifiersPlugin(): Provider;
+
+export { provideEventModifiersPlugin, provideServiceDirective };

package/utils/README.md

@@ -1,3 +1,128 @@
 # @telperion/ng-pack/utils
 
-Secondary entry point of `@telperion/ng-pack`. It can be used by importing from `@telperion/ng-pack/utils`.
+Angular utility functions and plugins for enhanced development experience
+
+## Motivation
+
+Provide reusable utilities and plugins for Angular applications to reduce boilerplate and enhance developer productivity.
+
+## Goals
+
+* TypeScript support
+* Tree-shaking
+* Minimal dependencies
+* Type-safe
+* Well documented
+* High test coverage
+
+## Installation
+
+```bash
+npm install @telperion/ng-pack
+# or
+yarn add @telperion/ng-pack
+# or
+pnpm add @telperion/ng-pack
+```
+
+## Features
+
+### Event Modifiers Plugin
+
+Angular Event Manager Plugin that enables event modifier syntax in templates, similar to Vue.js.
+
+#### Usage
+
+First, provide the plugin in your application:
+
+```typescript
+import { provideEventModifiersPlugin } from '@telperion/ng-pack/utils';
+
+bootstrapApplication(AppComponent, {
+  providers: [provideEventModifiersPlugin()]
+});
+```
+
+Then use modifiers in your templates:
+
+```html
+<!-- Prevent default form submission -->
+<form (submit.pd)="onSubmit()">...</form>
+
+<!-- Stop event propagation -->
+<div (click.sp)="handleClick()">...</div>
+
+<!-- Chain multiple modifiers -->
+<button (click.pd.sp)="handleButtonClick()">Click me</button>
+```
+
+#### Available Modifiers
+
+- `pd` - Calls `preventDefault()` on the event
+- `sp` - Calls `stopPropagation()` on the event
+
+### Provide Service Directive
+
+Utility function to create a provider for a directive/component that can be injected as a service. Useful for parent-child directive communication.
+
+#### Usage
+
+**1. Create an injection token:**
+
+```typescript
+// parent.service.ts
+import { InjectionToken } from "@angular/core";
+import type { ParentDirective } from "./parent.directive";
+
+export const ParentService = new InjectionToken<ParentDirective>("ParentService");
+```
+
+**2. Provide the directive as a service:**
+
+```typescript
+// parent.directive.ts
+import { Directive } from "@angular/core";
+import { provideServiceDirective } from "@telperion/ng-pack/utils";
+import { ParentService } from "./parent.service";
+
+@Directive({
+  selector: '[parent]',
+  providers: [provideServiceDirective(ParentService, ParentDirective)],
+})
+export class ParentDirective {
+  doSomething() {
+    console.log('Parent action');
+  }
+}
+```
+
+**3. Inject in child directive:**
+
+```typescript
+// child.directive.ts
+import { Directive, inject } from "@angular/core";
+import { ParentService } from "./parent.service";
+
+@Directive({
+  selector: '[child]',
+})
+export class ChildDirective {
+  private parent = inject(ParentService);
+
+  ngOnInit() {
+    this.parent.doSomething();
+  }
+}
+```
+
+**4. Use in template:**
+
+```html
+<div parent>
+  <div child></div>
+</div>
+```
+
+## License
+
+MIT