ng-auto-animate 0.3.1 → 0.3.2

package/README.md

@@ -1,41 +1,131 @@
 # ng-auto-animate
 
-Mono-repo for the library and demo app.
+An Angular Directive to use FormKit's [`auto-animate`](https://auto-animate.formkit.com) library within Angular projects.
 
-- Library:
-  - ⭐️ [Source & README](https://github.com/ajitzero/ng-auto-animate/tree/main/libs/ng-auto-animate) (Visit here first)
-  - [NPM](https://www.npmjs.com/package/ng-auto-animate).
-- Demo app, deployed via Netlify:
-  - [Source](https://github.com/ajitzero/ng-auto-animate/tree/main/apps/demo)
-  - [Live Demo](https://ng-auto-animate.netlify.app/)
-- Original library docs:
-  - ⭐️ [Source & README](https://github.com/formkit/auto-animate) (For everything else)
-  - [Live Demo](https://auto-animate.formkit.com)
+## Highlights
 
-### Missing support for something?
+- ✅ Standalone Directive, for Angular v14 and above. Tested on Node 18.x, but should work on previous versions.
+- ✅ Custom `InjectionToken` for configuring global settings and plugins.
 
-Go through existing issues if your problem is already being tracked, otherwise [raise an issue!](https://github.com/ajitzero/ng-auto-animate/issues/new)
+## Why a new wrapper library?
 
-### License
+A publishable library for Angular needs [`ng-packagr`](https://github.com/ng-packagr/ng-packagr) and Angular CLI for proper scaffolding and finalized formatting. Migrating the repository structure for `auto-animate` is a non-trivial task and would need an unbiased build system like [Nx](https://nx.dev) (which I am using here) or some other similar tool.
 
-[MIT](https://github.com/ajitzero/ng-auto-animate/blob/main/LICENSE).
+[Justin Schroeder](https://github.com/justin-schroeder), the creator of [`auto-animate`](https://auto-animate.formkit.com), has been supportive towards [contributions](https://github.com/formkit/auto-animate/pull/38) for Angular integration, but he [does not work with Angular](https://github.com/formkit/auto-animate/issues/72#issuecomment-1222732238) and is unable to work towards this actively. I, too, would not be able to do much in his shoes, especially when it requires replacing all build actions, scripts and the project structure, all to support a single framework.
 
-Built by [Ajit Panigrahi](https://github.com/ajitzero). Original library by [Justin Schroeder](https://github.com/justin-schroeder) and many contributors.
+If there is a simpler solution, I would be willing to submit a PR with my changes here to the original project, especially the support for global options/plugin via an `InjectionToken`.
 
----
-<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
+## Installation
+
+1. Install the peer dependency.
+
+    ```bash
+    npm i @formkit/auto-animate
+    ```
+
+1. Install this package.
+
+    ```bash
+    npm i ng-auto-animate
+    ```
+
+## Usage
+
+### Principle
+
+Add the directive to the parent tag, within which DOM elements are being shown or hidden dynamically.
+
+Adding the directive to the same tag which is being hidden will do nothing since it will look for changes in child nodes only.
+
+### Import Path
+
+Import and add the directive to your module or standalone component's imports array.
+```ts
+import { NgAutoAnimateDirective } from 'ng-auto-animate'; 
+```
+
+### Variants
+
+1. **Default usage.** This uses the default values configured by `@formkit/auto-animate`.
 
-✨ **This workspace has been generated by [Nx, a Smart, fast and extensible build system.](https://nx.dev)** ✨
+    ```html
+    <article auto-animate>
+      <p *ngFor="let paragraph of paragraphs">
+        {{ paragraph }}
+      </p>
+    </article>
+    ```
 
+1. **Pass one-off options.** Inline options will completely replace/override the default options.
 
-## Start the demo app
+    ```html
+    <article [auto-animate]="{ duration: 750 }">
+      <p *ngFor="let paragraph of paragraphs">
+        {{ paragraph }}
+      </p>
+    </article>
+    ```
 
-To start the development server run `nx serve demo`. Open your browser and navigate to http://localhost:4200/. Happy coding!
+1. **Global options.** The ideal place to configure common settings across your app.
 
-## Want better Editor Integration?
+    ```ts
+    // src/app/app.config.ts
+    import { ApplicationConfig } from '@angular/core';
+    import { GLOBAL_AUTO_ANIMATE_OPTIONS } from 'ng-auto-animate';
 
-Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.
+    export const appConfig: ApplicationConfig = {
+      providers: [
+        {
+          provide: GLOBAL_AUTO_ANIMATE_OPTIONS,
+          useValue: {
+            duration: 750,
+            easing: 'ease-out',
+            // etc.
+          },
+        },
+        // other providers
+      ],
+    };
 
-## Ready to deploy?
+    // main.ts
+    import { bootstrapApplication } from '@angular/platform-browser';
+    import { appConfig } from './app/app.config';
+    import { AppComponent } from './app/app.component';
+
+    bootstrapApplication(AppComponent, appConfig).catch((err) =>
+      console.error(err)
+    );
+    ```
+
+    ```html
+    <article auto-animate> <!-- Default usage -->
+      <p *ngFor="let paragraph of paragraphs">
+        {{ paragraph }}
+      </p>
+    </article>
+    ```
+
+1. **Custom plugins.** Same support as `@formkit/auto-animate`.
+    > See the example here in the [demo app](https://github.com/ajitzero/ng-auto-animate/blob/0f305d97a9a30ab715b1c41304572519f0d27894/apps/demo/src/app/app.component.ts#L68) for a "bouncy" effect.
+
+    ```ts
+    customPlugin: AutoAnimationPlugin = (...) => {...};
+    ```
+
+    ```html
+    <article [auto-animate]="customPlugin">...</article>
+    ```
+
+## Missing support for something?
+
+Go through existing issues if your problem is already being tracked; otherwise, [raise an issue!](https://github.com/ajitzero/ng-auto-animate/issues/new/choose)
+
+## License
+
+[MIT](https://github.com/ajitzero/ng-auto-animate/blob/main/LICENSE).
+
+Built by [Ajit Panigrahi](https://github.com/ajitzero). Original library by [Justin Schroeder](https://github.com/justin-schroeder) and many contributors.
+
+---
 
-Just run `nx build demoapp` to build the application. The build artifacts will be stored in the `dist/` directory, ready to be deployed.
+This library was generated with [Nx](https://nx.dev).

package/esm2022/index.mjs

@@ -0,0 +1,2 @@
+export * from './lib/ng-auto-animate.directive';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9saWJzL25nLWF1dG8tYW5pbWF0ZS9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxpQ0FBaUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vbGliL25nLWF1dG8tYW5pbWF0ZS5kaXJlY3RpdmUnO1xuIl19

package/esm2022/lib/ng-auto-animate.directive.mjs

@@ -0,0 +1,45 @@
+import { Directive, ElementRef, InjectionToken, computed, inject, input } from '@angular/core';
+import autoAnimate from '@formkit/auto-animate';
+import * as i0 from "@angular/core";
+const isPlugin = (config) => typeof config === 'function';
+export const GLOBAL_AUTO_ANIMATE_OPTIONS = new InjectionToken('Global AutoAnimate Options or Plugin', {
+    factory: () => ({}),
+});
+export class NgAutoAnimateDirective {
+    constructor() {
+        this.el = inject(ElementRef);
+        this.globalOptions = inject(GLOBAL_AUTO_ANIMATE_OPTIONS);
+        this.autoAnimateOptions = input('', { alias: 'auto-animate' });
+        this.options = computed(() => {
+            const localOptions = this.autoAnimateOptions();
+            if (typeof localOptions === 'string') {
+                // Default case, when no options or plugin is passed
+                return this.globalOptions;
+            }
+            // When either some options or a plugin is passed
+            if (isPlugin(this.globalOptions) || isPlugin(localOptions)) {
+                // A plugin must replace any previously set options or plugin.
+                // A plugin must be replaced by options or another plugin.
+                return localOptions;
+            }
+            // When plugins are not involved
+            return {
+                ...this.globalOptions,
+                ...localOptions,
+            };
+        });
+    }
+    ngAfterViewInit() {
+        autoAnimate(this.el.nativeElement, this.options());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: NgAutoAnimateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.4", type: NgAutoAnimateDirective, isStandalone: true, selector: "[auto-animate]", inputs: { autoAnimateOptions: { classPropertyName: "autoAnimateOptions", publicName: "auto-animate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: NgAutoAnimateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[auto-animate]',
+                    standalone: true,
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctYXV0by1hbmltYXRlLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMvbmctYXV0by1hbmltYXRlL3NyYy9saWIvbmctYXV0by1hbmltYXRlLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQWlCLFNBQVMsRUFBRSxVQUFVLEVBQUUsY0FBYyxFQUFTLFFBQVEsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3JILE9BQU8sV0FBd0QsTUFBTSx1QkFBdUIsQ0FBQzs7QUFHN0YsTUFBTSxRQUFRLEdBQUcsQ0FBQyxNQUEyQixFQUFFLEVBQUUsQ0FBQyxPQUFPLE1BQU0sS0FBSyxVQUFVLENBQUM7QUFFL0UsTUFBTSxDQUFDLE1BQU0sMkJBQTJCLEdBQUcsSUFBSSxjQUFjLENBQzVELHNDQUFzQyxFQUN0QztJQUNDLE9BQU8sRUFBRSxHQUFHLEVBQUUsQ0FBQyxDQUFDLEVBQUUsQ0FBQztDQUNuQixDQUNELENBQUM7QUFNRixNQUFNLE9BQU8sc0JBQXNCO0lBSm5DO1FBS2tCLE9BQUUsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7UUFDeEIsa0JBQWEsR0FBRyxNQUFNLENBQUMsMkJBQTJCLENBQUMsQ0FBQztRQUVyRSx1QkFBa0IsR0FBRyxLQUFLLENBQStCLEVBQUUsRUFBRSxFQUFFLEtBQUssRUFBRSxjQUFjLEVBQUUsQ0FBQyxDQUFDO1FBQ2hGLFlBQU8sR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFO1lBQy9CLE1BQU0sWUFBWSxHQUFHLElBQUksQ0FBQyxrQkFBa0IsRUFBRSxDQUFDO1lBQy9DLElBQUksT0FBTyxZQUFZLEtBQUssUUFBUSxFQUFFLENBQUM7Z0JBQ3RDLG9EQUFvRDtnQkFDcEQsT0FBTyxJQUFJLENBQUMsYUFBYSxDQUFDO1lBQzNCLENBQUM7WUFDRCxpREFBaUQ7WUFDakQsSUFBSSxRQUFRLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLFFBQVEsQ0FBQyxZQUFZLENBQUMsRUFBRSxDQUFDO2dCQUM1RCw4REFBOEQ7Z0JBQzlELDBEQUEwRDtnQkFDMUQsT0FBTyxZQUFZLENBQUM7WUFDckIsQ0FBQztZQUNELGdDQUFnQztZQUNoQyxPQUFPO2dCQUNOLEdBQUcsSUFBSSxDQUFDLGFBQWE7Z0JBQ3JCLEdBQUcsWUFBWTthQUNmLENBQUM7UUFDSCxDQUFDLENBQUMsQ0FBQztLQUtIO0lBSEEsZUFBZTtRQUNkLFdBQVcsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFBRSxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUMsQ0FBQztJQUNwRCxDQUFDOzhHQTFCVyxzQkFBc0I7a0dBQXRCLHNCQUFzQjs7MkZBQXRCLHNCQUFzQjtrQkFKbEMsU0FBUzttQkFBQztvQkFDVixRQUFRLEVBQUUsZ0JBQWdCO29CQUMxQixVQUFVLEVBQUUsSUFBSTtpQkFDaEIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEluamVjdGlvblRva2VuLCBJbnB1dCwgY29tcHV0ZWQsIGluamVjdCwgaW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCBhdXRvQW5pbWF0ZSwgeyBBdXRvQW5pbWF0ZU9wdGlvbnMsIEF1dG9BbmltYXRpb25QbHVnaW4gfSBmcm9tICdAZm9ybWtpdC9hdXRvLWFuaW1hdGUnO1xuXG5leHBvcnQgdHlwZSBBdXRvQW5pbWF0aW9uQ29uZmlnID0gUGFydGlhbDxBdXRvQW5pbWF0ZU9wdGlvbnM+IHwgQXV0b0FuaW1hdGlvblBsdWdpbjtcbmNvbnN0IGlzUGx1Z2luID0gKGNvbmZpZzogQXV0b0FuaW1hdGlvbkNvbmZpZykgPT4gdHlwZW9mIGNvbmZpZyA9PT0gJ2Z1bmN0aW9uJztcblxuZXhwb3J0IGNvbnN0IEdMT0JBTF9BVVRPX0FOSU1BVEVfT1BUSU9OUyA9IG5ldyBJbmplY3Rpb25Ub2tlbjxBdXRvQW5pbWF0aW9uQ29uZmlnPihcblx0J0dsb2JhbCBBdXRvQW5pbWF0ZSBPcHRpb25zIG9yIFBsdWdpbicsXG5cdHtcblx0XHRmYWN0b3J5OiAoKSA9PiAoe30pLFxuXHR9LFxuKTtcblxuQERpcmVjdGl2ZSh7XG5cdHNlbGVjdG9yOiAnW2F1dG8tYW5pbWF0ZV0nLFxuXHRzdGFuZGFsb25lOiB0cnVlLFxufSlcbmV4cG9ydCBjbGFzcyBOZ0F1dG9BbmltYXRlRGlyZWN0aXZlIGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XG5cdHByaXZhdGUgcmVhZG9ubHkgZWwgPSBpbmplY3QoRWxlbWVudFJlZik7XG5cdHByaXZhdGUgcmVhZG9ubHkgZ2xvYmFsT3B0aW9ucyA9IGluamVjdChHTE9CQUxfQVVUT19BTklNQVRFX09QVElPTlMpO1xuXG5cdGF1dG9BbmltYXRlT3B0aW9ucyA9IGlucHV0PEF1dG9BbmltYXRpb25Db25maWcgfCBzdHJpbmc+KCcnLCB7IGFsaWFzOiAnYXV0by1hbmltYXRlJyB9KTtcblx0cHJpdmF0ZSBvcHRpb25zID0gY29tcHV0ZWQoKCkgPT4ge1xuXHRcdGNvbnN0IGxvY2FsT3B0aW9ucyA9IHRoaXMuYXV0b0FuaW1hdGVPcHRpb25zKCk7XG5cdFx0aWYgKHR5cGVvZiBsb2NhbE9wdGlvbnMgPT09ICdzdHJpbmcnKSB7XG5cdFx0XHQvLyBEZWZhdWx0IGNhc2UsIHdoZW4gbm8gb3B0aW9ucyBvciBwbHVnaW4gaXMgcGFzc2VkXG5cdFx0XHRyZXR1cm4gdGhpcy5nbG9iYWxPcHRpb25zO1xuXHRcdH1cblx0XHQvLyBXaGVuIGVpdGhlciBzb21lIG9wdGlvbnMgb3IgYSBwbHVnaW4gaXMgcGFzc2VkXG5cdFx0aWYgKGlzUGx1Z2luKHRoaXMuZ2xvYmFsT3B0aW9ucykgfHwgaXNQbHVnaW4obG9jYWxPcHRpb25zKSkge1xuXHRcdFx0Ly8gQSBwbHVnaW4gbXVzdCByZXBsYWNlIGFueSBwcmV2aW91c2x5IHNldCBvcHRpb25zIG9yIHBsdWdpbi5cblx0XHRcdC8vIEEgcGx1Z2luIG11c3QgYmUgcmVwbGFjZWQgYnkgb3B0aW9ucyBvciBhbm90aGVyIHBsdWdpbi5cblx0XHRcdHJldHVybiBsb2NhbE9wdGlvbnM7XG5cdFx0fVxuXHRcdC8vIFdoZW4gcGx1Z2lucyBhcmUgbm90IGludm9sdmVkXG5cdFx0cmV0dXJuIHtcblx0XHRcdC4uLnRoaXMuZ2xvYmFsT3B0aW9ucyxcblx0XHRcdC4uLmxvY2FsT3B0aW9ucyxcblx0XHR9O1xuXHR9KTtcblxuXHRuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG5cdFx0YXV0b0FuaW1hdGUodGhpcy5lbC5uYXRpdmVFbGVtZW50LCB0aGlzLm9wdGlvbnMoKSk7XG5cdH1cbn1cbiJdfQ==

package/esm2022/ng-auto-animate.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctYXV0by1hbmltYXRlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vbGlicy9uZy1hdXRvLWFuaW1hdGUvc3JjL25nLWF1dG8tYW5pbWF0ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ==

package/fesm2022/ng-auto-animate.mjs

@@ -0,0 +1,52 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, input, computed, Directive } from '@angular/core';
+import autoAnimate from '@formkit/auto-animate';
+
+const isPlugin = (config) => typeof config === 'function';
+const GLOBAL_AUTO_ANIMATE_OPTIONS = new InjectionToken('Global AutoAnimate Options or Plugin', {
+    factory: () => ({}),
+});
+class NgAutoAnimateDirective {
+    constructor() {
+        this.el = inject(ElementRef);
+        this.globalOptions = inject(GLOBAL_AUTO_ANIMATE_OPTIONS);
+        this.autoAnimateOptions = input('', { alias: 'auto-animate' });
+        this.options = computed(() => {
+            const localOptions = this.autoAnimateOptions();
+            if (typeof localOptions === 'string') {
+                // Default case, when no options or plugin is passed
+                return this.globalOptions;
+            }
+            // When either some options or a plugin is passed
+            if (isPlugin(this.globalOptions) || isPlugin(localOptions)) {
+                // A plugin must replace any previously set options or plugin.
+                // A plugin must be replaced by options or another plugin.
+                return localOptions;
+            }
+            // When plugins are not involved
+            return {
+                ...this.globalOptions,
+                ...localOptions,
+            };
+        });
+    }
+    ngAfterViewInit() {
+        autoAnimate(this.el.nativeElement, this.options());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: NgAutoAnimateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.4", type: NgAutoAnimateDirective, isStandalone: true, selector: "[auto-animate]", inputs: { autoAnimateOptions: { classPropertyName: "autoAnimateOptions", publicName: "auto-animate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: NgAutoAnimateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[auto-animate]',
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GLOBAL_AUTO_ANIMATE_OPTIONS, NgAutoAnimateDirective };
+//# sourceMappingURL=ng-auto-animate.mjs.map

package/fesm2022/ng-auto-animate.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-auto-animate.mjs","sources":["../../../../libs/ng-auto-animate/src/lib/ng-auto-animate.directive.ts","../../../../libs/ng-auto-animate/src/ng-auto-animate.ts"],"sourcesContent":["import { AfterViewInit, Directive, ElementRef, InjectionToken, Input, computed, inject, input } from '@angular/core';\nimport autoAnimate, { AutoAnimateOptions, AutoAnimationPlugin } from '@formkit/auto-animate';\n\nexport type AutoAnimationConfig = Partial<AutoAnimateOptions> | AutoAnimationPlugin;\nconst isPlugin = (config: AutoAnimationConfig) => typeof config === 'function';\n\nexport const GLOBAL_AUTO_ANIMATE_OPTIONS = new InjectionToken<AutoAnimationConfig>(\n\t'Global AutoAnimate Options or Plugin',\n\t{\n\t\tfactory: () => ({}),\n\t},\n);\n\n@Directive({\n\tselector: '[auto-animate]',\n\tstandalone: true,\n})\nexport class NgAutoAnimateDirective implements AfterViewInit {\n\tprivate readonly el = inject(ElementRef);\n\tprivate readonly globalOptions = inject(GLOBAL_AUTO_ANIMATE_OPTIONS);\n\n\tautoAnimateOptions = input<AutoAnimationConfig | string>('', { alias: 'auto-animate' });\n\tprivate options = computed(() => {\n\t\tconst localOptions = this.autoAnimateOptions();\n\t\tif (typeof localOptions === 'string') {\n\t\t\t// Default case, when no options or plugin is passed\n\t\t\treturn this.globalOptions;\n\t\t}\n\t\t// When either some options or a plugin is passed\n\t\tif (isPlugin(this.globalOptions) || isPlugin(localOptions)) {\n\t\t\t// A plugin must replace any previously set options or plugin.\n\t\t\t// A plugin must be replaced by options or another plugin.\n\t\t\treturn localOptions;\n\t\t}\n\t\t// When plugins are not involved\n\t\treturn {\n\t\t\t...this.globalOptions,\n\t\t\t...localOptions,\n\t\t};\n\t});\n\n\tngAfterViewInit(): void {\n\t\tautoAnimate(this.el.nativeElement, this.options());\n\t}\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAIA,MAAM,QAAQ,GAAG,CAAC,MAA2B,KAAK,OAAO,MAAM,KAAK,UAAU,CAAC;MAElE,2BAA2B,GAAG,IAAI,cAAc,CAC5D,sCAAsC,EACtC;AACC,IAAA,OAAO,EAAE,OAAO,EAAE,CAAC;AACnB,CAAA,EACA;MAMW,sBAAsB,CAAA;AAJnC,IAAA,WAAA,GAAA;AAKkB,QAAA,IAAA,CAAA,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;AACxB,QAAA,IAAA,CAAA,aAAa,GAAG,MAAM,CAAC,2BAA2B,CAAC,CAAC;QAErE,IAAkB,CAAA,kBAAA,GAAG,KAAK,CAA+B,EAAE,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,CAAC,CAAC;AAChF,QAAA,IAAA,CAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AAC/B,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;AAC/C,YAAA,IAAI,OAAO,YAAY,KAAK,QAAQ,EAAE;;gBAErC,OAAO,IAAI,CAAC,aAAa,CAAC;aAC1B;;AAED,YAAA,IAAI,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,QAAQ,CAAC,YAAY,CAAC,EAAE;;;AAG3D,gBAAA,OAAO,YAAY,CAAC;aACpB;;YAED,OAAO;gBACN,GAAG,IAAI,CAAC,aAAa;AACrB,gBAAA,GAAG,YAAY;aACf,CAAC;AACH,SAAC,CAAC,CAAC;AAKH,KAAA;IAHA,eAAe,GAAA;AACd,QAAA,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;KACnD;8GA1BW,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAAtB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAJlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,UAAU,EAAE,IAAI;AAChB,iBAAA,CAAA;;;AChBD;;AAEG;;;;"}

package/lib/ng-auto-animate.directive.d.ts

@@ -0,0 +1,14 @@
+import { AfterViewInit, InjectionToken } from '@angular/core';
+import { AutoAnimateOptions, AutoAnimationPlugin } from '@formkit/auto-animate';
+import * as i0 from "@angular/core";
+export type AutoAnimationConfig = Partial<AutoAnimateOptions> | AutoAnimationPlugin;
+export declare const GLOBAL_AUTO_ANIMATE_OPTIONS: InjectionToken<AutoAnimationConfig>;
+export declare class NgAutoAnimateDirective implements AfterViewInit {
+    private readonly el;
+    private readonly globalOptions;
+    autoAnimateOptions: import("@angular/core").InputSignal<string | AutoAnimationConfig>;
+    private options;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgAutoAnimateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgAutoAnimateDirective, "[auto-animate]", never, { "autoAnimateOptions": { "alias": "auto-animate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/package.json

@@ -1,78 +1,34 @@
 {
-	"name": "ng-auto-animate",
-	"version": "0.3.1",
-	"license": "MIT",
-	"scripts": {
-		"clean": "rimraf dist ./node_modules ./.angular",
-		"format": "prettier -w --cache **.{ts,js,json,html,scss,css}"
-	},
-	"dependencies": {
-		"@angular/animations": "18.0.4",
-		"@angular/common": "18.0.4",
-		"@angular/compiler": "18.0.4",
-		"@angular/core": "18.0.4",
-		"@angular/forms": "18.0.4",
-		"@angular/platform-browser": "18.0.4",
-		"@angular/platform-browser-dynamic": "18.0.4",
-		"@angular/router": "18.0.4",
-		"@formkit/auto-animate": "^0.8.2",
-		"@nx/angular": "19.3.0",
-		"rxjs": "~7.8.0",
-		"tslib": "^2.3.0"
-	},
-	"devDependencies": {
-		"@angular-devkit/build-angular": "18.0.5",
-		"@angular-devkit/core": "18.0.5",
-		"@angular-devkit/schematics": "18.0.5",
-		"@angular-eslint/eslint-plugin": "~16.0.0",
-		"@angular-eslint/eslint-plugin-template": "~16.0.0",
-		"@angular-eslint/template-parser": "~16.0.0",
-		"@angular/cli": "18.0.5",
-		"@angular/compiler-cli": "18.0.4",
-		"@angular/language-service": "18.0.4",
-		"@nx/cypress": "19.3.0",
-		"@nx/eslint": "19.3.0",
-		"@nx/eslint-plugin": "19.3.0",
-		"@nx/jest": "19.3.0",
-		"@nx/js": "19.3.0",
-		"@nx/web": "19.3.0",
-		"@nx/workspace": "19.3.0",
-		"@schematics/angular": "~16.0.0",
-		"@semantic-release/changelog": "^6.0.3",
-		"@semantic-release/commit-analyzer": "^10.0.1",
-		"@semantic-release/exec": "^6.0.3",
-		"@semantic-release/git": "^10.0.1",
-		"@semantic-release/release-notes-generator": "^11.0.4",
-		"@types/jest": "^29.4.0",
-		"@types/node": "^18.16.9",
-		"@typescript-eslint/eslint-plugin": "7.9.0",
-		"@typescript-eslint/parser": "7.9.0",
-		"conventional-changelog-conventionalcommits": "^6.1.0",
-		"cypress": "^4.2.0",
-		"cz-conventional-changelog": "^3.3.0",
-		"eslint": "8.57.0",
-		"eslint-config-prettier": "9.1.0",
-		"eslint-plugin-cypress": "2.15.2",
-		"jest": "^29.4.1",
-		"jest-environment-jsdom": "^29.4.1",
-		"jest-preset-angular": "14.1.1",
-		"ng-packagr": "^18.0.0",
-		"nx": "19.3.0",
-		"nx-release": "^3.1.5",
-		"postcss": "^8.4.31",
-		"postcss-import": "~14.1.0",
-		"postcss-preset-env": "~7.5.0",
-		"postcss-url": "~10.1.3",
-		"prettier": "^3.3.2",
-		"replace-json-property": "^1.9.0",
-		"rimraf": "^5.0.7",
-		"ts-jest": "^29.1.0",
-		"ts-node": "10.9.1",
-		"typescript": "5.4"
-	},
-	"config": {
-		"commitizen": {
-			"path": "./node_modules/cz-conventional-changelog"
-		}
-	}
-}
+  "name": "ng-auto-animate",
+  "version": "0.3.2",
+  "description": "Add motion to your apps with a single line of code. An Angular Directive to use FormKit's auto-animate library.",
+  "repository": "https://github.com/ajitzero/ng-auto-animate.git",
+  "homepage": "https://github.com/ajitzero/ng-auto-animate/tree/main/libs/ng-auto-animate#readme",
+  "author": "Ajit Panigrahi <hello@ajitpanigrahi.com>",
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/common": "^18.0.0",
+    "@angular/core": "^18.0.0",
+    "@formkit/auto-animate": "^0.8.2"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "fesm2022/ng-auto-animate.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/ng-auto-animate.mjs",
+      "esm": "./esm2022/ng-auto-animate.mjs",
+      "default": "./fesm2022/ng-auto-animate.mjs"
+    }
+  }
+}

package/.editorconfig

@@ -1,13 +0,0 @@
-# Editor configuration, see http://editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.md]
-max_line_length = off
-trim_trailing_whitespace = false

package/.eslintignore

@@ -1 +0,0 @@
-node_modules

package/.eslintrc.json

@@ -1,48 +0,0 @@
-{
-	"root": true,
-	"ignorePatterns": ["**/*"],
-	"plugins": ["@nx"],
-	"overrides": [
-		{
-			"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-			"rules": {
-				"@nx/enforce-module-boundaries": [
-					"error",
-					{
-						"enforceBuildableLibDependency": true,
-						"allow": [],
-						"depConstraints": [
-							{
-								"sourceTag": "*",
-								"onlyDependOnLibsWithTags": ["*"]
-							}
-						]
-					}
-				]
-			}
-		},
-		{
-			"files": ["*.ts", "*.tsx"],
-			"extends": ["plugin:@nx/typescript"],
-			"rules": {
-				"@typescript-eslint/no-extra-semi": "error",
-				"no-extra-semi": "off"
-			}
-		},
-		{
-			"files": ["*.js", "*.jsx"],
-			"extends": ["plugin:@nx/javascript"],
-			"rules": {
-				"@typescript-eslint/no-extra-semi": "error",
-				"no-extra-semi": "off"
-			}
-		},
-		{
-			"files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],
-			"env": {
-				"jest": true
-			},
-			"rules": {}
-		}
-	]
-}

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,32 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: 'bug: X does not work when Y'
-labels: bug, unverified
-assignees: ajitzero
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Version Info (please complete the following information):**
- - Angular: [e.g. v14.3.0]
- - Node: [e.g. 18.4.0]
- - ng-auto-animate: [e.g. 0.0.2]
-
-**Additional context**
-Add any other context about the problem here.

package/.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,20 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: 'feat: Support X when Y'
-labels: enhancement, unconfirmed
-assignees: ajitzero
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

package/.github/auto_assign.yml

@@ -1,17 +0,0 @@
-# Set to true to add reviewers to pull requests
-addReviewers: true
-
-# Set to true to add assignees to pull requests
-addAssignees: true
-
-# A list of reviewers to be added to pull requests (GitHub user name)
-reviewers:
-  - ajitzero
-
-# A list of keywords to be skipped the process that add reviewers if pull requests include it
-skipKeywords:
-  - wip
-
-# A number of reviewers added to the pull request
-# Set 0 to add all the reviewers (default: 0)
-numberOfReviewers: 1

package/.github/workflows/ci.yml

@@ -1,24 +0,0 @@
-name: CI
-on:
-  push:
-    branches:
-      - '*'
-      - '*/*'
-      - '**'
-      - '!main'
-jobs:
-  main:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-      - uses: nrwl/nx-set-shas@v3
-      - name: Install deps
-        run: npm ci --legacy-peer-deps
-      - name: Lint affected
-        run: npx nx affected -t lint
-      # - name: Test affected
-      #   run: npx nx affected -t test --configuration=ci
-      - name: Build affected
-        run: npx nx affected -t build

package/.github/workflows/npm-publish.yml

@@ -1,23 +0,0 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
-
-name: Node.js Package
-
-on: [workflow_dispatch]
-# on:
-#   release:
-#     types: [created]
-
-jobs:
-  publish-npm:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 22
-          registry-url: https://registry.npmjs.org/
-      - run: npm ci
-      - run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/release.yml

@@ -1,32 +0,0 @@
-name: RELEASE
-
-on: [workflow_dispatch]
-
-permissions:
-  contents: read # for checkout
-  
-jobs:
-  main:
-    name: Version and Publish
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: .node-version
-      - uses: nrwl/nx-set-shas@v3
-      - name: Install deps
-        run: npm ci
-      - name: Lint
-        run: npx nx run-many -t lint
-      # - name: Test
-      #   run: npx nx run-many -t test --configuration=ci
-      - name: Release
-        run: npx semantic-release
-        env:
-          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.node-version

@@ -1 +0,0 @@
-v22.3.0

package/.prettierignore

@@ -1,7 +0,0 @@
-# Add files here to ignore them from prettier formatting
-/dist
-/coverage
-.angular
-
-/.nx/cache
-/.nx/workspace-data