ng-auto-animate 1.0.0 → 1.1.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.
package/README.md
CHANGED
|
@@ -15,14 +15,22 @@ An Angular Directive for FormKit's [`auto-animate`](https://auto-animate.formkit
|
|
|
15
15
|
- ✅ Custom `InjectionToken` for configuring global settings and plugins.
|
|
16
16
|
- ✅ SSR-safe, running only after the view is initialized on the client-side.
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
<!--
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
Some lore for folks lurking in the code:
|
|
21
|
+
|
|
22
|
+
## Why a separate wrapper library?
|
|
23
|
+
|
|
24
|
+
TLDR; Issues with setting up builds in original repo.
|
|
25
|
+
|
|
26
|
+
A publishable library for Angular needs [`ng-packagr`](https://github.com/ng-packagr/ng-packagr) and Angular CLI for proper scaffolding and 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.
|
|
21
27
|
|
|
22
28
|
[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.
|
|
23
29
|
|
|
24
30
|
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`.
|
|
25
31
|
|
|
32
|
+
-->
|
|
33
|
+
|
|
26
34
|
## Installation
|
|
27
35
|
|
|
28
36
|
Install this package and its peer dependency with the package manager of your choice.
|
|
@@ -65,8 +73,8 @@ import { NgAutoAnimate } from 'ng-auto-animate';
|
|
|
65
73
|
|
|
66
74
|
```angular
|
|
67
75
|
<article auto-animate>
|
|
68
|
-
@
|
|
69
|
-
<p>
|
|
76
|
+
@if (shouldShow()) {
|
|
77
|
+
<p>Conditionally shown element</p>
|
|
70
78
|
}
|
|
71
79
|
</article>
|
|
72
80
|
```
|
|
@@ -75,7 +83,7 @@ import { NgAutoAnimate } from 'ng-auto-animate';
|
|
|
75
83
|
|
|
76
84
|
```angular
|
|
77
85
|
<article [auto-animate]="{ duration: 750 }">
|
|
78
|
-
@
|
|
86
|
+
@if (shouldShow()) {
|
|
79
87
|
<p>{{ paragraph }}</p>
|
|
80
88
|
}
|
|
81
89
|
</article>
|
|
@@ -127,10 +135,29 @@ import { NgAutoAnimate } from 'ng-auto-animate';
|
|
|
127
135
|
<article [auto-animate]="customPlugin">...</article>
|
|
128
136
|
```
|
|
129
137
|
|
|
138
|
+
1. **Disable animations.** `prefers-reduced-motion` is already respected. Additionally, we can explicitly disable animations like this:
|
|
139
|
+
|
|
140
|
+
```angular
|
|
141
|
+
<article
|
|
142
|
+
[auto-animate]="{ duration: 750 }"
|
|
143
|
+
[disableAutoAnimate]="shouldDisableAnimations()"
|
|
144
|
+
>
|
|
145
|
+
@if (shouldShow()) {
|
|
146
|
+
<p>{{ paragraph }}</p>
|
|
147
|
+
}
|
|
148
|
+
</article>
|
|
149
|
+
```
|
|
150
|
+
|
|
130
151
|
## Missing support for something?
|
|
131
152
|
|
|
132
153
|
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)
|
|
133
154
|
|
|
155
|
+
## Support us
|
|
156
|
+
|
|
157
|
+
Is AutoAnimate saving you time?
|
|
158
|
+
|
|
159
|
+
Please consider [supporting us with a recurring or one-time donation](https://github.com/sponsors/ajitzero)! 🙏
|
|
160
|
+
|
|
134
161
|
## License
|
|
135
162
|
|
|
136
163
|
[MIT](https://github.com/ajitzero/ng-auto-animate/blob/main/LICENSE).
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, inject, Injector, ElementRef, input, computed, afterNextRender, effect, Directive } from '@angular/core';
|
|
2
|
+
import { InjectionToken, inject, Injector, ElementRef, input, booleanAttribute, computed, afterNextRender, effect, Directive } from '@angular/core';
|
|
3
3
|
import autoAnimate from '@formkit/auto-animate';
|
|
4
4
|
|
|
5
5
|
const isPlugin = (config) => typeof config === 'function';
|
|
@@ -16,9 +16,15 @@ class NgAutoAnimate {
|
|
|
16
16
|
this._injector = inject(Injector);
|
|
17
17
|
this._elementRef = inject(ElementRef);
|
|
18
18
|
this._globalOptions = inject(AUTO_ANIMATE_CONFIG);
|
|
19
|
+
this.disableAutoAnimate = input(false, { ...(ngDevMode ? { debugName: "disableAutoAnimate" } : {}), transform: booleanAttribute });
|
|
19
20
|
this.autoAnimateOptions = input('', { ...(ngDevMode ? { debugName: "autoAnimateOptions" } : {}), alias: 'auto-animate' });
|
|
20
21
|
this._options = computed(() => {
|
|
22
|
+
const disabled = this.disableAutoAnimate();
|
|
21
23
|
const localOptions = this.autoAnimateOptions();
|
|
24
|
+
if (disabled) {
|
|
25
|
+
// Exit early. These options won't be passed anyway.
|
|
26
|
+
return {};
|
|
27
|
+
}
|
|
22
28
|
if (typeof localOptions === 'string') {
|
|
23
29
|
// Default case, when no options or plugin is passed
|
|
24
30
|
return this._globalOptions;
|
|
@@ -37,17 +43,21 @@ class NgAutoAnimate {
|
|
|
37
43
|
}, ...(ngDevMode ? [{ debugName: "_options" }] : []));
|
|
38
44
|
afterNextRender(() => {
|
|
39
45
|
effect(() => {
|
|
40
|
-
|
|
46
|
+
const disabled = this.disableAutoAnimate();
|
|
47
|
+
const options = this._options();
|
|
48
|
+
if (!disabled) {
|
|
49
|
+
autoAnimate(this._elementRef.nativeElement, options);
|
|
50
|
+
}
|
|
41
51
|
}, { injector: this._injector });
|
|
42
52
|
});
|
|
43
53
|
}
|
|
44
54
|
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 }); }
|
|
55
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", type: NgAutoAnimate, isStandalone: true, selector: "[auto-animate]", inputs: { disableAutoAnimate: { classPropertyName: "disableAutoAnimate", publicName: "disableAutoAnimate", isSignal: true, isRequired: false, transformFunction: null }, autoAnimateOptions: { classPropertyName: "autoAnimateOptions", publicName: "auto-animate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
46
56
|
}
|
|
47
57
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgAutoAnimate, decorators: [{
|
|
48
58
|
type: Directive,
|
|
49
59
|
args: [{ selector: '[auto-animate]' }]
|
|
50
|
-
}], ctorParameters: () => [], propDecorators: { autoAnimateOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "auto-animate", required: false }] }] } });
|
|
60
|
+
}], ctorParameters: () => [], propDecorators: { disableAutoAnimate: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAutoAnimate", required: false }] }], autoAnimateOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "auto-animate", required: false }] }] } });
|
|
51
61
|
|
|
52
62
|
/**
|
|
53
63
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
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 {
|
|
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 {\n\tDirective,\n\tElementRef,\n\tInjector,\n\tafterNextRender,\n\tbooleanAttribute,\n\tcomputed,\n\teffect,\n\tinject,\n\tinput,\n} 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 disableAutoAnimate = input(false, { transform: booleanAttribute });\n\tpublic readonly autoAnimateOptions = input<AutoAnimationConfig | string>('', { alias: 'auto-animate' });\n\n\tprivate readonly _options = computed(() => {\n\t\tconst disabled = this.disableAutoAnimate();\n\t\tconst localOptions = this.autoAnimateOptions();\n\n\t\tif (disabled) {\n\t\t\t// Exit early. These options won't be passed anyway.\n\t\t\treturn {};\n\t\t}\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\tconst disabled = this.disableAutoAnimate();\n\t\t\t\t\tconst options = this._options();\n\n\t\t\t\t\tif (!disabled) {\n\t\t\t\t\t\tautoAnimate(this._elementRef.nativeElement, options);\n\t\t\t\t\t}\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;;MCKa,aAAa,CAAA;AAoCzB,IAAA,WAAA,GAAA;AAnCiB,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,CAAC,KAAK,+DAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;QAClE,IAAA,CAAA,kBAAkB,GAAG,KAAK,CAA+B,EAAE,+DAAI,KAAK,EAAE,cAAc,EAAA,CAAG;AAEtF,QAAA,IAAA,CAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;AACzC,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,kBAAkB,EAAE;AAC1C,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,kBAAkB,EAAE;YAE9C,IAAI,QAAQ,EAAE;;AAEb,gBAAA,OAAO,EAAE;YACV;AAEA,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,MAAM,QAAQ,GAAG,IAAI,CAAC,kBAAkB,EAAE;AAC1C,gBAAA,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,EAAE;gBAE/B,IAAI,CAAC,QAAQ,EAAE;oBACd,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,OAAO,CAAC;gBACrD;YACD,CAAC,EACD,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,CAC5B;AACF,QAAA,CAAC,CAAC;IACH;8GAlDY,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,oBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,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;;;ACfzC;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
2
|
import { InjectionToken, Provider } from '@angular/core';
|
|
3
3
|
import * as _formkit_auto_animate from '@formkit/auto-animate';
|
|
4
4
|
import { AutoAnimateOptions, AutoAnimationPlugin } from '@formkit/auto-animate';
|
|
@@ -11,11 +11,12 @@ declare class NgAutoAnimate {
|
|
|
11
11
|
private readonly _injector;
|
|
12
12
|
private readonly _elementRef;
|
|
13
13
|
private readonly _globalOptions;
|
|
14
|
-
readonly
|
|
14
|
+
readonly disableAutoAnimate: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
15
|
+
readonly autoAnimateOptions: _angular_core.InputSignal<string | AutoAnimationConfig>;
|
|
15
16
|
private readonly _options;
|
|
16
17
|
constructor();
|
|
17
|
-
static ɵfac:
|
|
18
|
-
static ɵdir:
|
|
18
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgAutoAnimate, never>;
|
|
19
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgAutoAnimate, "[auto-animate]", never, { "disableAutoAnimate": { "alias": "disableAutoAnimate"; "required": false; "isSignal": true; }; "autoAnimateOptions": { "alias": "auto-animate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
19
20
|
}
|
|
20
21
|
|
|
21
22
|
declare const isPlugin: (config: AutoAnimationConfig) => config is _formkit_auto_animate.AutoAnimationPlugin;
|