ng-auto-animate 0.4.3 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +54 -44
  2. package/fesm2022/ng-auto-animate.mjs +16 -14
  3. package/fesm2022/ng-auto-animate.mjs.map +1 -1
  4. package/package.json +17 -9
  5. package/types/ng-auto-animate.d.ts +24 -0
  6. package/esm2022/index.mjs +0 -2
  7. package/esm2022/lib/ng-auto-animate.directive.mjs +0 -48
  8. package/esm2022/ng-auto-animate.mjs +0 -5
  9. package/index.d.ts +0 -1
  10. package/lib/ng-auto-animate.directive.d.ts +0 -15
package/README.md CHANGED
@@ -1,103 +1,117 @@
1
1
  # ng-auto-animate
2
2
 
3
- An Angular Directive to use FormKit's [`auto-animate`](https://auto-animate.formkit.com) library within Angular projects.
3
+ An Angular Directive for FormKit's [`auto-animate`](https://auto-animate.formkit.com) library.
4
+
5
+ **Demo** → [https://ng-auto-animate.netlify.app/](https://ng-auto-animate.netlify.app/)
6
+
7
+ <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="MIT License"/></a>
8
+ <a href="https://www.npmjs.com/package/ng-auto-animate" title="View this project on NPM"><img src="https://img.shields.io/npm/v/ng-auto-animate" alt="NPM version" /></a>
9
+ <a href="https://www.npmjs.com/package/ng-auto-animate" title="View this project on NPM"><img src="https://img.shields.io/npm/dm/ng-auto-animate" alt="NPM downloads" /></a>
4
10
 
5
11
  ## Highlights
6
12
 
7
- - ✅ Standalone Directive, for Angular v14 and above. Tested on Node 18.x, but should work on previous versions.
13
+ - ✅ Standalone Directive, for Angular v17 and above.
14
+ - ✅ Zoneless & signals-first. RxJS is not required.
8
15
  - ✅ Custom `InjectionToken` for configuring global settings and plugins.
16
+ - ✅ SSR-safe, running only after the view is initialized on the client-side.
9
17
 
10
18
  ## Why a new wrapper library?
11
19
 
12
20
  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.
13
21
 
14
- [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.
22
+ [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.
15
23
 
16
24
  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`.
17
25
 
18
26
  ## Installation
19
27
 
20
- 1. Install the peer dependency.
28
+ Install this package and its peer dependency with the package manager of your choice.
21
29
 
22
- ```bash
23
- npm i @formkit/auto-animate
24
- ```
30
+ ```bash
31
+ npm i ng-auto-animate @formkit/auto-animate
32
+ ```
25
33
 
26
- 1. Install this package.
34
+ ```bash
35
+ pnpm i ng-auto-animate @formkit/auto-animate
36
+ ```
27
37
 
28
- ```bash
29
- npm i ng-auto-animate
30
- ```
38
+ ```bash
39
+ bun add ng-auto-animate @formkit/auto-animate
40
+ ```
41
+
42
+ ```bash
43
+ yarn add ng-auto-animate @formkit/auto-animate
44
+ ```
31
45
 
32
46
  ## Usage
33
47
 
34
48
  ### Principle
35
49
 
36
- Add the directive to the parent tag, within which DOM elements are being shown or hidden dynamically.
50
+ Add the directive to the parent tag, within which DOM elements are being dynamically shown or hidden.
37
51
 
38
- Adding the directive to the same tag which is being hidden will do nothing since it will look for changes in child nodes only.
52
+ Applying the directive to the same tag being hidden will have no effect, as it only detects changes in child nodes.
39
53
 
40
54
  ### Import Path
41
55
 
42
56
  Import and add the directive to your module or standalone component's imports array.
43
57
 
44
58
  ```ts
45
- import { NgAutoAnimateDirective } from 'ng-auto-animate';
59
+ import { NgAutoAnimate } from 'ng-auto-animate';
46
60
  ```
47
61
 
48
62
  ### Variants
49
63
 
50
64
  1. **Default usage.** This uses the default values configured by `@formkit/auto-animate`.
51
65
 
52
- ```html
66
+ ```angular
53
67
  <article auto-animate>
54
- <p *ngFor="let paragraph of paragraphs">{{ paragraph }}</p>
68
+ @for (paragraph of paragraphs; track paragraph) {
69
+ <p>{{ paragraph }}</p>
70
+ }
55
71
  </article>
56
72
  ```
57
73
 
58
- 1. **Pass one-off options.** Inline options will completely replace/override the default options.
74
+ 1. **Pass one-off options.** Inline options will completely replace and override the default options.
59
75
 
60
- ```html
76
+ ```angular
61
77
  <article [auto-animate]="{ duration: 750 }">
62
- <p *ngFor="let paragraph of paragraphs">{{ paragraph }}</p>
78
+ @for (paragraph of paragraphs; track paragraph) {
79
+ <p>{{ paragraph }}</p>
80
+ }
63
81
  </article>
64
82
  ```
65
83
 
66
- 1. **Global options.** The ideal place to configure common settings across your app.
84
+ 1. **Global options.** The ideal place to configure standard settings across your app. The supported values are `Partial<AutoAnimateOptions> | AutoAnimationPlugin`
67
85
 
68
86
  ```ts
69
87
  // src/app/app.config.ts
70
88
  import { ApplicationConfig } from '@angular/core';
71
- import { GLOBAL_AUTO_ANIMATE_OPTIONS } from 'ng-auto-animate';
89
+ import { provideAutoAnimateConfig } from 'ng-auto-animate';
90
+ import type {
91
+ AutoAnimateOptions, // Standard options like easing, duration, etc.
92
+ AutoAnimationPlugin, // Custom plugins
93
+ } from '@formkit/auto-animate';
72
94
 
73
95
  export const appConfig: ApplicationConfig = {
74
- providers: [
75
- {
76
- provide: GLOBAL_AUTO_ANIMATE_OPTIONS,
77
- useValue: {
78
- duration: 750,
79
- easing: 'ease-out',
80
- // etc.
81
- },
82
- },
83
- // other providers
84
- ],
96
+ providers: [
97
+ provideAutoAnimateConfig({ duration: 1000, easing: 'ease-out' }),
98
+ ],
85
99
  };
86
100
 
87
101
  // main.ts
88
102
  import { bootstrapApplication } from '@angular/platform-browser';
89
103
  import { appConfig } from './app/app.config';
90
- import { AppComponent } from './app/app.component';
104
+ import { App } from './app/app';
91
105
 
92
- bootstrapApplication(AppComponent, appConfig).catch(err =>
93
- console.error(err),
94
- );
106
+ bootstrapApplication(App, appConfig).catch(err => console.error(err));
95
107
  ```
96
108
 
97
- ```html
109
+ ```angular
98
110
  <article auto-animate>
99
- <!-- Default usage -->
100
- <p *ngFor="let paragraph of paragraphs">{{ paragraph }}</p>
111
+ <!-- Default usage -->
112
+ @for (paragraph of paragraphs; track paragraph) {
113
+ <p>{{ paragraph }}</p>
114
+ }
101
115
  </article>
102
116
  ```
103
117
 
@@ -115,14 +129,10 @@ import { NgAutoAnimateDirective } from 'ng-auto-animate';
115
129
 
116
130
  ## Missing support for something?
117
131
 
118
- 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)
132
+ Go through existing issues if your problem is tracked; if not, please [raise a new issue!](https://github.com/ajitzero/ng-auto-animate/issues/new/choose)
119
133
 
120
134
  ## License
121
135
 
122
136
  [MIT](https://github.com/ajitzero/ng-auto-animate/blob/main/LICENSE).
123
137
 
124
138
  Built by [Ajit Panigrahi](https://github.com/ajitzero). Original library by [Justin Schroeder](https://github.com/justin-schroeder) and many contributors.
125
-
126
- ---
127
-
128
- This library was generated with [Nx](https://nx.dev).
package/fesm2022/ng-auto-animate.mjs CHANGED
@@ -3,15 +3,20 @@ import { InjectionToken, inject, Injector, ElementRef, input, computed, afterNex
3
3
  import autoAnimate from '@formkit/auto-animate';
4
4
 
5
5
  const isPlugin = (config) => typeof config === 'function';
6
- const GLOBAL_AUTO_ANIMATE_OPTIONS = new InjectionToken('Global AutoAnimate Options or Plugin', {
6
+
7
+ const AUTO_ANIMATE_CONFIG = new InjectionToken('Global AutoAnimate Options or Plugin', {
7
8
  factory: () => ({}),
8
9
  });
9
- class NgAutoAnimateDirective {
10
+ function provideAutoAnimateConfig(config) {
11
+ return [{ provide: AUTO_ANIMATE_CONFIG, useValue: config }];
12
+ }
13
+
14
+ class NgAutoAnimate {
10
15
  constructor() {
11
16
  this._injector = inject(Injector);
12
17
  this._elementRef = inject(ElementRef);
13
- this._globalOptions = inject(GLOBAL_AUTO_ANIMATE_OPTIONS);
14
- this.autoAnimateOptions = input('', { alias: 'auto-animate' });
18
+ this._globalOptions = inject(AUTO_ANIMATE_CONFIG);
19
+ this.autoAnimateOptions = input('', { ...(ngDevMode ? { debugName: "autoAnimateOptions" } : {}), alias: 'auto-animate' });
15
20
  this._options = computed(() => {
16
21
  const localOptions = this.autoAnimateOptions();
17
22
  if (typeof localOptions === 'string') {
@@ -29,27 +34,24 @@ class NgAutoAnimateDirective {
29
34
  ...this._globalOptions,
30
35
  ...localOptions,
31
36
  };
32
- });
37
+ }, ...(ngDevMode ? [{ debugName: "_options" }] : []));
33
38
  afterNextRender(() => {
34
39
  effect(() => {
35
40
  autoAnimate(this._elementRef.nativeElement, this._options());
36
41
  }, { injector: this._injector });
37
42
  });
38
43
  }
39
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgAutoAnimateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
40
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: NgAutoAnimateDirective, isStandalone: true, selector: "[auto-animate]", inputs: { autoAnimateOptions: { classPropertyName: "autoAnimateOptions", publicName: "auto-animate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
44
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgAutoAnimate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
45
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", type: NgAutoAnimate, isStandalone: true, selector: "[auto-animate]", inputs: { autoAnimateOptions: { classPropertyName: "autoAnimateOptions", publicName: "auto-animate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
41
46
  }
42
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgAutoAnimateDirective, decorators: [{
47
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgAutoAnimate, decorators: [{
43
48
  type: Directive,
44
- args: [{
45
- selector: '[auto-animate]',
46
- standalone: true,
47
- }]
48
- }], ctorParameters: () => [] });
49
+ args: [{ selector: '[auto-animate]' }]
50
+ }], ctorParameters: () => [], propDecorators: { autoAnimateOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "auto-animate", required: false }] }] } });
49
51
 
50
52
  /**
51
53
  * Generated bundle index. Do not edit.
52
54
  */
53
55
 
54
- export { GLOBAL_AUTO_ANIMATE_OPTIONS, NgAutoAnimateDirective };
56
+ export { AUTO_ANIMATE_CONFIG, NgAutoAnimate, isPlugin, provideAutoAnimateConfig };
55
57
  //# sourceMappingURL=ng-auto-animate.mjs.map
package/fesm2022/ng-auto-animate.mjs.map CHANGED
@@ -1 +1 @@
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 {\n\tDirective,\n\tElementRef,\n\tInjectionToken,\n\tInjector,\n\tafterNextRender,\n\tcomputed,\n\teffect,\n\tinject,\n\tinput,\n} from '@angular/core';\nimport autoAnimate, { AutoAnimateOptions, AutoAnimationPlugin } from '@formkit/auto-animate';\n\nexport type AutoAnimationConfig = Partial<AutoAnimateOptions> | AutoAnimationPlugin;\n\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 {\n\tprivate readonly _injector = inject(Injector);\n\tprivate readonly _elementRef = inject(ElementRef);\n\tprivate readonly _globalOptions = inject(GLOBAL_AUTO_ANIMATE_OPTIONS);\n\n\tpublic readonly autoAnimateOptions = input<AutoAnimationConfig | string>('', { alias: 'auto-animate' });\n\tprivate readonly _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\tconstructor() {\n\t\tafterNextRender(() => {\n\t\t\teffect(\n\t\t\t\t() => {\n\t\t\t\t\tautoAnimate(this._elementRef.nativeElement, this._options());\n\t\t\t\t},\n\t\t\t\t{ injector: this._injector },\n\t\t\t);\n\t\t});\n\t}\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAeA,MAAM,QAAQ,GAAG,CAAC,MAA2B,KAAK,OAAO,MAAM,KAAK,UAAU;MAEjE,2BAA2B,GAAG,IAAI,cAAc,CAC5D,sCAAsC,EACtC;AACC,IAAA,OAAO,EAAE,OAAO,EAAE,CAAC;AACnB,CAAA;MAOW,sBAAsB,CAAA;AAyBlC,IAAA,WAAA,GAAA;AAxBiB,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC;AAC5B,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;AAChC,QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,2BAA2B,CAAC;QAErD,IAAkB,CAAA,kBAAA,GAAG,KAAK,CAA+B,EAAE,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,CAAC;AACtF,QAAA,IAAA,CAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;AACzC,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,kBAAkB,EAAE;AAC9C,YAAA,IAAI,OAAO,YAAY,KAAK,QAAQ,EAAE;;gBAErC,OAAO,IAAI,CAAC,cAAc;;;AAG3B,YAAA,IAAI,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,QAAQ,CAAC,YAAY,CAAC,EAAE;;;AAG5D,gBAAA,OAAO,YAAY;;;YAGpB,OAAO;gBACN,GAAG,IAAI,CAAC,cAAc;AACtB,gBAAA,GAAG,YAAY;aACf;AACF,SAAC,CAAC;QAGD,eAAe,CAAC,MAAK;YACpB,MAAM,CACL,MAAK;AACJ,gBAAA,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;aAC5D,EACD,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,CAC5B;AACF,SAAC,CAAC;;+GAjCS,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAtB,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;;4FAAtB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAJlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,UAAU,EAAE,IAAI;AAChB,iBAAA;;;AC3BD;;AAEG;;;;"}
1
+ {"version":3,"file":"ng-auto-animate.mjs","sources":["../../../../libs/ng-auto-animate/src/lib/is-plugin.ts","../../../../libs/ng-auto-animate/src/lib/tokens.ts","../../../../libs/ng-auto-animate/src/lib/auto-animate.ts","../../../../libs/ng-auto-animate/src/ng-auto-animate.ts"],"sourcesContent":["import { AutoAnimationConfig } from './tokens';\n\nexport const isPlugin = (config: AutoAnimationConfig) => typeof config === 'function';\n","import { InjectionToken, Provider } from '@angular/core';\nimport type { AutoAnimateOptions, AutoAnimationPlugin } from '@formkit/auto-animate';\n\nexport type AutoAnimationConfig = Partial<AutoAnimateOptions> | AutoAnimationPlugin;\n\nexport const AUTO_ANIMATE_CONFIG = new InjectionToken<AutoAnimationConfig>('Global AutoAnimate Options or Plugin', {\n\tfactory: () => ({}),\n});\n\nexport function provideAutoAnimateConfig(config: AutoAnimationConfig): Provider[] {\n\treturn [{ provide: AUTO_ANIMATE_CONFIG, useValue: config }];\n}\n","import { Directive, ElementRef, Injector, afterNextRender, computed, effect, inject, input } from '@angular/core';\nimport autoAnimate from '@formkit/auto-animate';\nimport { isPlugin } from './is-plugin';\nimport { type AutoAnimationConfig, AUTO_ANIMATE_CONFIG } from './tokens';\n\n@Directive({ selector: '[auto-animate]' })\nexport class NgAutoAnimate {\n\tprivate readonly _injector = inject(Injector);\n\tprivate readonly _elementRef = inject(ElementRef);\n\tprivate readonly _globalOptions = inject(AUTO_ANIMATE_CONFIG);\n\n\tpublic readonly autoAnimateOptions = input<AutoAnimationConfig | string>('', { alias: 'auto-animate' });\n\tprivate readonly _options = computed(() => {\n\t\tconst localOptions = this.autoAnimateOptions();\n\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\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\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\tconstructor() {\n\t\tafterNextRender(() => {\n\t\t\teffect(\n\t\t\t\t() => {\n\t\t\t\t\tautoAnimate(this._elementRef.nativeElement, this._options());\n\t\t\t\t},\n\t\t\t\t{ injector: this._injector },\n\t\t\t);\n\t\t});\n\t}\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAEO,MAAM,QAAQ,GAAG,CAAC,MAA2B,KAAK,OAAO,MAAM,KAAK;;MCG9D,mBAAmB,GAAG,IAAI,cAAc,CAAsB,sCAAsC,EAAE;AAClH,IAAA,OAAO,EAAE,OAAO,EAAE,CAAC;AACnB,CAAA;AAEK,SAAU,wBAAwB,CAAC,MAA2B,EAAA;IACnE,OAAO,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;AAC5D;;MCLa,aAAa,CAAA;AA4BzB,IAAA,WAAA,GAAA;AA3BiB,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC;AAC5B,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;AAChC,QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,mBAAmB,CAAC;QAE7C,IAAA,CAAA,kBAAkB,GAAG,KAAK,CAA+B,EAAE,+DAAI,KAAK,EAAE,cAAc,EAAA,CAAG;AACtF,QAAA,IAAA,CAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;AACzC,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,kBAAkB,EAAE;AAE9C,YAAA,IAAI,OAAO,YAAY,KAAK,QAAQ,EAAE;;gBAErC,OAAO,IAAI,CAAC,cAAc;YAC3B;;AAGA,YAAA,IAAI,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,QAAQ,CAAC,YAAY,CAAC,EAAE;;;AAG5D,gBAAA,OAAO,YAAY;YACpB;;YAGA,OAAO;gBACN,GAAG,IAAI,CAAC,cAAc;AACtB,gBAAA,GAAG,YAAY;aACf;AACF,QAAA,CAAC,oDAAC;QAGD,eAAe,CAAC,MAAK;YACpB,MAAM,CACL,MAAK;AACJ,gBAAA,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC7D,CAAC,EACD,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,CAC5B;AACF,QAAA,CAAC,CAAC;IACH;8GArCY,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAb,aAAa,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;;2FAAb,aAAa,EAAA,UAAA,EAAA,CAAA;kBADzB,SAAS;mBAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE;;;ACLzC;;AAEG;;;;"}
package/package.json CHANGED
@@ -1,9 +1,20 @@
1
1
  {
2
2
  "name": "ng-auto-animate",
3
- "version": "0.4.3",
3
+ "version": "1.0.0",
4
4
  "description": "Add motion to your apps with a single line of code. An Angular Directive to use FormKit's auto-animate library.",
5
+ "keywords": [
6
+ "angular",
7
+ "animation",
8
+ "transition"
9
+ ],
5
10
  "homepage": "https://github.com/ajitzero/ng-auto-animate/tree/main/libs/ng-auto-animate#readme",
6
- "repository": "https://github.com/ajitzero/ng-auto-animate.git",
11
+ "bugs": {
12
+ "url": "https://github.com/ajitzero/ng-auto-animate/issues"
13
+ },
14
+ "repository": {
15
+ "type": "git",
16
+ "url": "https://github.com/ajitzero/ng-auto-animate.git"
17
+ },
7
18
  "license": "MIT",
8
19
  "author": "Ajit Panigrahi <hello@ajitpanigrahi.com>",
9
20
  "sideEffects": false,
@@ -11,23 +22,20 @@
11
22
  "tslib": "^2.3.0"
12
23
  },
13
24
  "peerDependencies": {
14
- "@angular/common": "^17.1.0 - ^20.0.0",
15
- "@angular/core": "^17.1.0 - ^20.0.0",
16
- "@formkit/auto-animate": "^0.8.2"
25
+ "@angular/core": "*",
26
+ "@formkit/auto-animate": "*"
17
27
  },
18
28
  "publishConfig": {
19
29
  "access": "public"
20
30
  },
21
31
  "module": "fesm2022/ng-auto-animate.mjs",
22
- "typings": "index.d.ts",
32
+ "typings": "types/ng-auto-animate.d.ts",
23
33
  "exports": {
24
34
  "./package.json": {
25
35
  "default": "./package.json"
26
36
  },
27
37
  ".": {
28
- "types": "./index.d.ts",
29
- "esm2022": "./esm2022/ng-auto-animate.mjs",
30
- "esm": "./esm2022/ng-auto-animate.mjs",
38
+ "types": "./types/ng-auto-animate.d.ts",
31
39
  "default": "./fesm2022/ng-auto-animate.mjs"
32
40
  }
33
41
  }
package/types/ng-auto-animate.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ import * as i0 from '@angular/core';
2
+ import { InjectionToken, Provider } from '@angular/core';
3
+ import * as _formkit_auto_animate from '@formkit/auto-animate';
4
+ import { AutoAnimateOptions, AutoAnimationPlugin } from '@formkit/auto-animate';
5
+
6
+ type AutoAnimationConfig = Partial<AutoAnimateOptions> | AutoAnimationPlugin;
7
+ declare const AUTO_ANIMATE_CONFIG: InjectionToken<AutoAnimationConfig>;
8
+ declare function provideAutoAnimateConfig(config: AutoAnimationConfig): Provider[];
9
+
10
+ declare class NgAutoAnimate {
11
+ private readonly _injector;
12
+ private readonly _elementRef;
13
+ private readonly _globalOptions;
14
+ readonly autoAnimateOptions: i0.InputSignal<string | AutoAnimationConfig>;
15
+ private readonly _options;
16
+ constructor();
17
+ static ɵfac: i0.ɵɵFactoryDeclaration<NgAutoAnimate, never>;
18
+ static ɵdir: i0.ɵɵDirectiveDeclaration<NgAutoAnimate, "[auto-animate]", never, { "autoAnimateOptions": { "alias": "auto-animate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
19
+ }
20
+
21
+ declare const isPlugin: (config: AutoAnimationConfig) => config is _formkit_auto_animate.AutoAnimationPlugin;
22
+
23
+ export { AUTO_ANIMATE_CONFIG, NgAutoAnimate, isPlugin, provideAutoAnimateConfig };
24
+ export type { AutoAnimationConfig };
package/esm2022/index.mjs DELETED
@@ -1,2 +0,0 @@
1
- export * from './lib/ng-auto-animate.directive';
2
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9saWJzL25nLWF1dG8tYW5pbWF0ZS9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxpQ0FBaUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vbGliL25nLWF1dG8tYW5pbWF0ZS5kaXJlY3RpdmUnO1xuIl19
package/esm2022/lib/ng-auto-animate.directive.mjs DELETED
@@ -1,48 +0,0 @@
1
- import { Directive, ElementRef, InjectionToken, Injector, afterNextRender, computed, effect, inject, input, } from '@angular/core';
2
- import autoAnimate from '@formkit/auto-animate';
3
- import * as i0 from "@angular/core";
4
- const isPlugin = (config) => typeof config === 'function';
5
- export const GLOBAL_AUTO_ANIMATE_OPTIONS = new InjectionToken('Global AutoAnimate Options or Plugin', {
6
- factory: () => ({}),
7
- });
8
- export class NgAutoAnimateDirective {
9
- constructor() {
10
- this._injector = inject(Injector);
11
- this._elementRef = inject(ElementRef);
12
- this._globalOptions = inject(GLOBAL_AUTO_ANIMATE_OPTIONS);
13
- this.autoAnimateOptions = input('', { alias: 'auto-animate' });
14
- this._options = computed(() => {
15
- const localOptions = this.autoAnimateOptions();
16
- if (typeof localOptions === 'string') {
17
- // Default case, when no options or plugin is passed
18
- return this._globalOptions;
19
- }
20
- // When either some options or a plugin is passed
21
- if (isPlugin(this._globalOptions) || isPlugin(localOptions)) {
22
- // A plugin must replace any previously set options or plugin.
23
- // A plugin must be replaced by options or another plugin.
24
- return localOptions;
25
- }
26
- // When plugins are not involved
27
- return {
28
- ...this._globalOptions,
29
- ...localOptions,
30
- };
31
- });
32
- afterNextRender(() => {
33
- effect(() => {
34
- autoAnimate(this._elementRef.nativeElement, this._options());
35
- }, { injector: this._injector });
36
- });
37
- }
38
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgAutoAnimateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
39
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: NgAutoAnimateDirective, isStandalone: true, selector: "[auto-animate]", inputs: { autoAnimateOptions: { classPropertyName: "autoAnimateOptions", publicName: "auto-animate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
40
- }
41
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgAutoAnimateDirective, decorators: [{
42
- type: Directive,
43
- args: [{
44
- selector: '[auto-animate]',
45
- standalone: true,
46
- }]
47
- }], ctorParameters: () => [] });
48
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctYXV0by1hbmltYXRlLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMvbmctYXV0by1hbmltYXRlL3NyYy9saWIvbmctYXV0by1hbmltYXRlLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ04sU0FBUyxFQUNULFVBQVUsRUFDVixjQUFjLEVBQ2QsUUFBUSxFQUNSLGVBQWUsRUFDZixRQUFRLEVBQ1IsTUFBTSxFQUNOLE1BQU0sRUFDTixLQUFLLEdBQ0wsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxXQUF3RCxNQUFNLHVCQUF1QixDQUFDOztBQUk3RixNQUFNLFFBQVEsR0FBRyxDQUFDLE1BQTJCLEVBQUUsRUFBRSxDQUFDLE9BQU8sTUFBTSxLQUFLLFVBQVUsQ0FBQztBQUUvRSxNQUFNLENBQUMsTUFBTSwyQkFBMkIsR0FBRyxJQUFJLGNBQWMsQ0FDNUQsc0NBQXNDLEVBQ3RDO0lBQ0MsT0FBTyxFQUFFLEdBQUcsRUFBRSxDQUFDLENBQUMsRUFBRSxDQUFDO0NBQ25CLENBQ0QsQ0FBQztBQU1GLE1BQU0sT0FBTyxzQkFBc0I7SUF5QmxDO1FBeEJpQixjQUFTLEdBQUcsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQzdCLGdCQUFXLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQ2pDLG1CQUFjLEdBQUcsTUFBTSxDQUFDLDJCQUEyQixDQUFDLENBQUM7UUFFdEQsdUJBQWtCLEdBQUcsS0FBSyxDQUErQixFQUFFLEVBQUUsRUFBRSxLQUFLLEVBQUUsY0FBYyxFQUFFLENBQUMsQ0FBQztRQUN2RixhQUFRLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRTtZQUN6QyxNQUFNLFlBQVksR0FBRyxJQUFJLENBQUMsa0JBQWtCLEVBQUUsQ0FBQztZQUMvQyxJQUFJLE9BQU8sWUFBWSxLQUFLLFFBQVEsRUFBRSxDQUFDO2dCQUN0QyxvREFBb0Q7Z0JBQ3BELE9BQU8sSUFBSSxDQUFDLGNBQWMsQ0FBQztZQUM1QixDQUFDO1lBQ0QsaURBQWlEO1lBQ2pELElBQUksUUFBUSxDQUFDLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxRQUFRLENBQUMsWUFBWSxDQUFDLEVBQUUsQ0FBQztnQkFDN0QsOERBQThEO2dCQUM5RCwwREFBMEQ7Z0JBQzFELE9BQU8sWUFBWSxDQUFDO1lBQ3JCLENBQUM7WUFDRCxnQ0FBZ0M7WUFDaEMsT0FBTztnQkFDTixHQUFHLElBQUksQ0FBQyxjQUFjO2dCQUN0QixHQUFHLFlBQVk7YUFDZixDQUFDO1FBQ0gsQ0FBQyxDQUFDLENBQUM7UUFHRixlQUFlLENBQUMsR0FBRyxFQUFFO1lBQ3BCLE1BQU0sQ0FDTCxHQUFHLEVBQUU7Z0JBQ0osV0FBVyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxFQUFFLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFDO1lBQzlELENBQUMsRUFDRCxFQUFFLFFBQVEsRUFBRSxJQUFJLENBQUMsU0FBUyxFQUFFLENBQzVCLENBQUM7UUFDSCxDQUFDLENBQUMsQ0FBQztJQUNKLENBQUM7K0dBbENXLHNCQUFzQjttR0FBdEIsc0JBQXNCOzs0RkFBdEIsc0JBQXNCO2tCQUpsQyxTQUFTO21CQUFDO29CQUNWLFFBQVEsRUFBRSxnQkFBZ0I7b0JBQzFCLFVBQVUsRUFBRSxJQUFJO2lCQUNoQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG5cdERpcmVjdGl2ZSxcblx0RWxlbWVudFJlZixcblx0SW5qZWN0aW9uVG9rZW4sXG5cdEluamVjdG9yLFxuXHRhZnRlck5leHRSZW5kZXIsXG5cdGNvbXB1dGVkLFxuXHRlZmZlY3QsXG5cdGluamVjdCxcblx0aW5wdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IGF1dG9BbmltYXRlLCB7IEF1dG9BbmltYXRlT3B0aW9ucywgQXV0b0FuaW1hdGlvblBsdWdpbiB9IGZyb20gJ0Bmb3Jta2l0L2F1dG8tYW5pbWF0ZSc7XG5cbmV4cG9ydCB0eXBlIEF1dG9BbmltYXRpb25Db25maWcgPSBQYXJ0aWFsPEF1dG9BbmltYXRlT3B0aW9ucz4gfCBBdXRvQW5pbWF0aW9uUGx1Z2luO1xuXG5jb25zdCBpc1BsdWdpbiA9IChjb25maWc6IEF1dG9BbmltYXRpb25Db25maWcpID0+IHR5cGVvZiBjb25maWcgPT09ICdmdW5jdGlvbic7XG5cbmV4cG9ydCBjb25zdCBHTE9CQUxfQVVUT19BTklNQVRFX09QVElPTlMgPSBuZXcgSW5qZWN0aW9uVG9rZW48QXV0b0FuaW1hdGlvbkNvbmZpZz4oXG5cdCdHbG9iYWwgQXV0b0FuaW1hdGUgT3B0aW9ucyBvciBQbHVnaW4nLFxuXHR7XG5cdFx0ZmFjdG9yeTogKCkgPT4gKHt9KSxcblx0fSxcbik7XG5cbkBEaXJlY3RpdmUoe1xuXHRzZWxlY3RvcjogJ1thdXRvLWFuaW1hdGVdJyxcblx0c3RhbmRhbG9uZTogdHJ1ZSxcbn0pXG5leHBvcnQgY2xhc3MgTmdBdXRvQW5pbWF0ZURpcmVjdGl2ZSB7XG5cdHByaXZhdGUgcmVhZG9ubHkgX2luamVjdG9yID0gaW5qZWN0KEluamVjdG9yKTtcblx0cHJpdmF0ZSByZWFkb25seSBfZWxlbWVudFJlZiA9IGluamVjdChFbGVtZW50UmVmKTtcblx0cHJpdmF0ZSByZWFkb25seSBfZ2xvYmFsT3B0aW9ucyA9IGluamVjdChHTE9CQUxfQVVUT19BTklNQVRFX09QVElPTlMpO1xuXG5cdHB1YmxpYyByZWFkb25seSBhdXRvQW5pbWF0ZU9wdGlvbnMgPSBpbnB1dDxBdXRvQW5pbWF0aW9uQ29uZmlnIHwgc3RyaW5nPignJywgeyBhbGlhczogJ2F1dG8tYW5pbWF0ZScgfSk7XG5cdHByaXZhdGUgcmVhZG9ubHkgX29wdGlvbnMgPSBjb21wdXRlZCgoKSA9PiB7XG5cdFx0Y29uc3QgbG9jYWxPcHRpb25zID0gdGhpcy5hdXRvQW5pbWF0ZU9wdGlvbnMoKTtcblx0XHRpZiAodHlwZW9mIGxvY2FsT3B0aW9ucyA9PT0gJ3N0cmluZycpIHtcblx0XHRcdC8vIERlZmF1bHQgY2FzZSwgd2hlbiBubyBvcHRpb25zIG9yIHBsdWdpbiBpcyBwYXNzZWRcblx0XHRcdHJldHVybiB0aGlzLl9nbG9iYWxPcHRpb25zO1xuXHRcdH1cblx0XHQvLyBXaGVuIGVpdGhlciBzb21lIG9wdGlvbnMgb3IgYSBwbHVnaW4gaXMgcGFzc2VkXG5cdFx0aWYgKGlzUGx1Z2luKHRoaXMuX2dsb2JhbE9wdGlvbnMpIHx8IGlzUGx1Z2luKGxvY2FsT3B0aW9ucykpIHtcblx0XHRcdC8vIEEgcGx1Z2luIG11c3QgcmVwbGFjZSBhbnkgcHJldmlvdXNseSBzZXQgb3B0aW9ucyBvciBwbHVnaW4uXG5cdFx0XHQvLyBBIHBsdWdpbiBtdXN0IGJlIHJlcGxhY2VkIGJ5IG9wdGlvbnMgb3IgYW5vdGhlciBwbHVnaW4uXG5cdFx0XHRyZXR1cm4gbG9jYWxPcHRpb25zO1xuXHRcdH1cblx0XHQvLyBXaGVuIHBsdWdpbnMgYXJlIG5vdCBpbnZvbHZlZFxuXHRcdHJldHVybiB7XG5cdFx0XHQuLi50aGlzLl9nbG9iYWxPcHRpb25zLFxuXHRcdFx0Li4ubG9jYWxPcHRpb25zLFxuXHRcdH07XG5cdH0pO1xuXG5cdGNvbnN0cnVjdG9yKCkge1xuXHRcdGFmdGVyTmV4dFJlbmRlcigoKSA9PiB7XG5cdFx0XHRlZmZlY3QoXG5cdFx0XHRcdCgpID0+IHtcblx0XHRcdFx0XHRhdXRvQW5pbWF0ZSh0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsIHRoaXMuX29wdGlvbnMoKSk7XG5cdFx0XHRcdH0sXG5cdFx0XHRcdHsgaW5qZWN0b3I6IHRoaXMuX2luamVjdG9yIH0sXG5cdFx0XHQpO1xuXHRcdH0pO1xuXHR9XG59XG4iXX0=
package/esm2022/ng-auto-animate.mjs DELETED
@@ -1,5 +0,0 @@
1
- /**
2
- * Generated bundle index. Do not edit.
3
- */
4
- export * from './index';
5
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctYXV0by1hbmltYXRlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vbGlicy9uZy1hdXRvLWFuaW1hdGUvc3JjL25nLWF1dG8tYW5pbWF0ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ==
package/index.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from './lib/ng-auto-animate.directive';
package/lib/ng-auto-animate.directive.d.ts DELETED
@@ -1,15 +0,0 @@
1
- import { InjectionToken } from '@angular/core';
2
- import { AutoAnimateOptions, AutoAnimationPlugin } from '@formkit/auto-animate';
3
- import * as i0 from "@angular/core";
4
- export type AutoAnimationConfig = Partial<AutoAnimateOptions> | AutoAnimationPlugin;
5
- export declare const GLOBAL_AUTO_ANIMATE_OPTIONS: InjectionToken<AutoAnimationConfig>;
6
- export declare class NgAutoAnimateDirective {
7
- private readonly _injector;
8
- private readonly _elementRef;
9
- private readonly _globalOptions;
10
- readonly autoAnimateOptions: import("@angular/core").InputSignal<string | AutoAnimationConfig>;
11
- private readonly _options;
12
- constructor();
13
- static ɵfac: i0.ɵɵFactoryDeclaration<NgAutoAnimateDirective, never>;
14
- static ɵdir: i0.ɵɵDirectiveDeclaration<NgAutoAnimateDirective, "[auto-animate]", never, { "autoAnimateOptions": { "alias": "auto-animate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
15
- }