ng-auto-animate 0.0.1 → 0.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
|
@@ -1,7 +1,93 @@
|
|
|
1
1
|
# ng-auto-animate
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
An Angular Directive to use FormKit's [auto-animate](https://auto-animate.formkit.com) library, within Angular projects.
|
|
4
|
+
|
|
5
|
+
### Highlights:
|
|
6
|
+
- ✅ Standalone Directive, for Angular v14 and above. Tested on Node 18.x, but should work on previous versions.
|
|
7
|
+
- ✅ Custom `InjectionToken` for configuring global settings.
|
|
8
|
+
- 🚫 Currently, it does not support [plugins](https://auto-animate.formkit.com/#plugins). WIP: See [#5](https://github.com/ajitzero/ng-auto-animate/issues/5).
|
|
9
|
+
|
|
10
|
+
### Why a new wrapper library?
|
|
11
|
+
A publishable library for Angular needs `ng-packr` and Angular CLI for proper scaffolding and finalized formatting. Migrating the repository structure for `auto-animate` is a non-trivial ask, and would need an unbiased build system like [Nx](https://nx.dev) (which I am using here) or some other similar tool.
|
|
12
|
+
|
|
13
|
+
[Justin Schroeder](https://github.com/justin-schroeder), the creator of `auto-animate`, 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.
|
|
14
|
+
|
|
15
|
+
If there is a simpler solution, I would be willing to submit a PR with my changes here to the original project.
|
|
16
|
+
|
|
17
|
+
### Installation
|
|
18
|
+
1. Install the peer dependency.
|
|
19
|
+
```bash
|
|
20
|
+
npm i @formkit/auto-animate
|
|
21
|
+
```
|
|
22
|
+
1. Install this package.
|
|
23
|
+
```bash
|
|
24
|
+
npm i ng-auto-animate
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### Usage
|
|
28
|
+
1. Default usage:
|
|
29
|
+
```html
|
|
30
|
+
<article auto-animate>
|
|
31
|
+
<p *ngFor="let paragraph of paragraphs">
|
|
32
|
+
{{ paragraph }}
|
|
33
|
+
</p>
|
|
34
|
+
</article>
|
|
35
|
+
```
|
|
36
|
+
1. Pass one-off options:
|
|
37
|
+
```html
|
|
38
|
+
<article [auto-animate]="{ duration: 750 }">
|
|
39
|
+
<p *ngFor="let paragraph of paragraphs">
|
|
40
|
+
{{ paragraph }}
|
|
41
|
+
</p>
|
|
42
|
+
</article>
|
|
43
|
+
```
|
|
44
|
+
1. Configure global default options:
|
|
45
|
+
```ts
|
|
46
|
+
// src/app/app.config.ts
|
|
47
|
+
import { ApplicationConfig } from '@angular/core';
|
|
48
|
+
import { GLOBAL_AUTO_ANIMATE_OPTIONS } from 'ng-auto-animate';
|
|
49
|
+
|
|
50
|
+
export const appConfig: ApplicationConfig = {
|
|
51
|
+
providers: [
|
|
52
|
+
{
|
|
53
|
+
provide: GLOBAL_AUTO_ANIMATE_OPTIONS,
|
|
54
|
+
useValue: {
|
|
55
|
+
duration: 750,
|
|
56
|
+
easing: 'ease-out',
|
|
57
|
+
// etc.
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
// other providers
|
|
61
|
+
],
|
|
62
|
+
};
|
|
4
63
|
|
|
5
|
-
|
|
64
|
+
// main.ts
|
|
65
|
+
import { bootstrapApplication } from '@angular/platform-browser';
|
|
66
|
+
import { appConfig } from './app/app.config';
|
|
67
|
+
import { AppComponent } from './app/app.component';
|
|
6
68
|
|
|
7
|
-
|
|
69
|
+
bootstrapApplication(AppComponent, appConfig).catch((err) =>
|
|
70
|
+
console.error(err)
|
|
71
|
+
);
|
|
72
|
+
```
|
|
73
|
+
```html
|
|
74
|
+
<article auto-animate> <!-- Default usage -->
|
|
75
|
+
<p *ngFor="let paragraph of paragraphs">
|
|
76
|
+
{{ paragraph }}
|
|
77
|
+
</p>
|
|
78
|
+
</article>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### Missing support for something?
|
|
82
|
+
|
|
83
|
+
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)
|
|
84
|
+
|
|
85
|
+
### License
|
|
86
|
+
|
|
87
|
+
[MIT](https://github.com/ajitzero/ng-auto-animate/blob/main/LICENSE).
|
|
88
|
+
|
|
89
|
+
Built by [Ajit Panigrahi](https://github.com/ajitzero). Original library by [Justin Schroeder](https://github.com/justin-schroeder) and many contributors.
|
|
90
|
+
|
|
91
|
+
---
|
|
92
|
+
|
|
93
|
+
This library was generated with [Nx](https://nx.dev).
|
|
@@ -1,23 +1,45 @@
|
|
|
1
|
-
import { Directive, ElementRef, Input, inject } from '@angular/core';
|
|
1
|
+
import { Directive, ElementRef, InjectionToken, Input, inject } from '@angular/core';
|
|
2
2
|
import autoAnimate from '@formkit/auto-animate';
|
|
3
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
|
+
});
|
|
4
8
|
class NgAutoAnimateDirective {
|
|
5
9
|
constructor() {
|
|
6
10
|
this.el = inject(ElementRef);
|
|
11
|
+
this.globalOptions = inject(GLOBAL_AUTO_ANIMATE_OPTIONS);
|
|
7
12
|
this._options = {};
|
|
8
13
|
}
|
|
9
|
-
set
|
|
10
|
-
|
|
14
|
+
set explicitOptions(_options) {
|
|
15
|
+
if (typeof _options === 'string') {
|
|
16
|
+
// Default case, when no options or plugin is passed
|
|
17
|
+
this._options = this.globalOptions;
|
|
18
|
+
}
|
|
19
|
+
else {
|
|
20
|
+
// When either some options or a plugin is passed
|
|
21
|
+
if (isPlugin(this.globalOptions) || isPlugin(_options)) {
|
|
22
|
+
// A plugin must replace any previously set options or plugin.
|
|
23
|
+
// A plugin must be replaced by options or another plugin.
|
|
24
|
+
this._options = _options;
|
|
25
|
+
}
|
|
26
|
+
else {
|
|
27
|
+
// When plugins are not involved
|
|
28
|
+
this._options = {
|
|
29
|
+
...this.globalOptions,
|
|
30
|
+
..._options,
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
}
|
|
11
34
|
}
|
|
12
35
|
get options() {
|
|
13
36
|
return this._options;
|
|
14
37
|
}
|
|
15
38
|
ngAfterViewInit() {
|
|
16
|
-
this.
|
|
17
|
-
autoAnimate(this.el.nativeElement, { ...this.options });
|
|
39
|
+
autoAnimate(this.el.nativeElement, this.options);
|
|
18
40
|
}
|
|
19
41
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: NgAutoAnimateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
20
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.6", type: NgAutoAnimateDirective, isStandalone: true, selector: "[auto-animate]", inputs: {
|
|
42
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.6", type: NgAutoAnimateDirective, isStandalone: true, selector: "[auto-animate]", inputs: { explicitOptions: ["auto-animate", "explicitOptions"] }, ngImport: i0 }); }
|
|
21
43
|
}
|
|
22
44
|
export { NgAutoAnimateDirective };
|
|
23
45
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: NgAutoAnimateDirective, decorators: [{
|
|
@@ -26,8 +48,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.6", ngImpor
|
|
|
26
48
|
selector: '[auto-animate]',
|
|
27
49
|
standalone: true,
|
|
28
50
|
}]
|
|
29
|
-
}], propDecorators: {
|
|
51
|
+
}], propDecorators: { explicitOptions: [{
|
|
30
52
|
type: Input,
|
|
31
53
|
args: ['auto-animate']
|
|
32
54
|
}] } });
|
|
33
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
55
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctYXV0by1hbmltYXRlLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMvbmctYXV0by1hbmltYXRlL3NyYy9saWIvbmctYXV0by1hbmltYXRlLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQWlCLFNBQVMsRUFBRSxVQUFVLEVBQUUsY0FBYyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDcEcsT0FBTyxXQUF3RCxNQUFNLHVCQUF1QixDQUFDOztBQUU3RixNQUFNLFFBQVEsR0FBRyxDQUFDLE1BQXlELEVBQUUsRUFBRSxDQUM3RSxPQUFPLE1BQU0sS0FBSyxVQUFVLENBQUM7QUFFL0IsTUFBTSxDQUFDLE1BQU0sMkJBQTJCLEdBQUcsSUFBSSxjQUFjLENBQzNELHNDQUFzQyxFQUFFO0lBQ3hDLE9BQU8sRUFBRSxHQUFHLEVBQUUsQ0FBQyxDQUFDLEVBQUUsQ0FBQztDQUNwQixDQUFDLENBQUM7QUFFSCxNQUlhLHNCQUFzQjtJQUpuQztRQUtVLE9BQUUsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7UUFDeEIsa0JBQWEsR0FBRyxNQUFNLENBQUMsMkJBQTJCLENBQUMsQ0FBQztRQXlCcEQsYUFBUSxHQUFzRCxFQUFFLENBQUM7S0FLMUU7SUE1QkMsSUFDSSxlQUFlLENBQUMsUUFBb0U7UUFDdEYsSUFBSSxPQUFPLFFBQVEsS0FBSyxRQUFRLEVBQUU7WUFDaEMsb0RBQW9EO1lBQ3BELElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQztTQUNwQzthQUFNO1lBQ0wsaURBQWlEO1lBQ2pELElBQUksUUFBUSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxRQUFRLENBQUMsUUFBUSxDQUFDLEVBQUU7Z0JBQ3RELCtEQUErRDtnQkFDL0QsMERBQTBEO2dCQUMxRCxJQUFJLENBQUMsUUFBUSxHQUFHLFFBQVEsQ0FBQzthQUMxQjtpQkFBTTtnQkFDTCxnQ0FBZ0M7Z0JBQ2hDLElBQUksQ0FBQyxRQUFRLEdBQUc7b0JBQ2QsR0FBRyxJQUFJLENBQUMsYUFBYTtvQkFDckIsR0FBRyxRQUFRO2lCQUNaLENBQUM7YUFDSDtTQUNGO0lBQ0gsQ0FBQztJQUNELElBQUksT0FBTztRQUNULE9BQU8sSUFBSSxDQUFDLFFBQVEsQ0FBQztJQUN2QixDQUFDO0lBR0QsZUFBZTtRQUNiLFdBQVcsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFBRSxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDbkQsQ0FBQzs4R0EvQlUsc0JBQXNCO2tHQUF0QixzQkFBc0I7O1NBQXRCLHNCQUFzQjsyRkFBdEIsc0JBQXNCO2tCQUpsQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxnQkFBZ0I7b0JBQzFCLFVBQVUsRUFBRSxJQUFJO2lCQUNqQjs4QkFNSyxlQUFlO3NCQURsQixLQUFLO3VCQUFDLGNBQWMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEluamVjdGlvblRva2VuLCBJbnB1dCwgaW5qZWN0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgYXV0b0FuaW1hdGUsIHsgQXV0b0FuaW1hdGVPcHRpb25zLCBBdXRvQW5pbWF0aW9uUGx1Z2luIH0gZnJvbSAnQGZvcm1raXQvYXV0by1hbmltYXRlJztcblxuY29uc3QgaXNQbHVnaW4gPSAoY29uZmlnOiBQYXJ0aWFsPEF1dG9BbmltYXRlT3B0aW9ucz4gfCBBdXRvQW5pbWF0aW9uUGx1Z2luKSA9PlxuICB0eXBlb2YgY29uZmlnID09PSAnZnVuY3Rpb24nO1xuXG5leHBvcnQgY29uc3QgR0xPQkFMX0FVVE9fQU5JTUFURV9PUFRJT05TID0gbmV3IEluamVjdGlvblRva2VuPFBhcnRpYWw8QXV0b0FuaW1hdGVPcHRpb25zPiB8IEF1dG9BbmltYXRpb25QbHVnaW4+KFxuICAnR2xvYmFsIEF1dG9BbmltYXRlIE9wdGlvbnMgb3IgUGx1Z2luJywge1xuICBmYWN0b3J5OiAoKSA9PiAoe30pLFxufSk7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1thdXRvLWFuaW1hdGVdJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbn0pXG5leHBvcnQgY2xhc3MgTmdBdXRvQW5pbWF0ZURpcmVjdGl2ZSBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xuICBwcml2YXRlIGVsID0gaW5qZWN0KEVsZW1lbnRSZWYpO1xuICBwcml2YXRlIGdsb2JhbE9wdGlvbnMgPSBpbmplY3QoR0xPQkFMX0FVVE9fQU5JTUFURV9PUFRJT05TKTtcblxuICBASW5wdXQoJ2F1dG8tYW5pbWF0ZScpXG4gIHNldCBleHBsaWNpdE9wdGlvbnMoX29wdGlvbnM6IFBhcnRpYWw8QXV0b0FuaW1hdGVPcHRpb25zPiB8IEF1dG9BbmltYXRpb25QbHVnaW4gfCBzdHJpbmcpIHtcbiAgICBpZiAodHlwZW9mIF9vcHRpb25zID09PSAnc3RyaW5nJykge1xuICAgICAgLy8gRGVmYXVsdCBjYXNlLCB3aGVuIG5vIG9wdGlvbnMgb3IgcGx1Z2luIGlzIHBhc3NlZFxuICAgICAgdGhpcy5fb3B0aW9ucyA9IHRoaXMuZ2xvYmFsT3B0aW9ucztcbiAgICB9IGVsc2Uge1xuICAgICAgLy8gV2hlbiBlaXRoZXIgc29tZSBvcHRpb25zIG9yIGEgcGx1Z2luIGlzIHBhc3NlZFxuICAgICAgaWYgKGlzUGx1Z2luKHRoaXMuZ2xvYmFsT3B0aW9ucykgfHwgaXNQbHVnaW4oX29wdGlvbnMpKSB7XG4gICAgICAgIC8vIEEgcGx1Z2luIG11c3QgcmVwbGFjZSBhbnkgcHJldmlvdXNseSBzZXQgb3B0aW9ucyBvciBwbHVnaW4uIFxuICAgICAgICAvLyBBIHBsdWdpbiBtdXN0IGJlIHJlcGxhY2VkIGJ5IG9wdGlvbnMgb3IgYW5vdGhlciBwbHVnaW4uXG4gICAgICAgIHRoaXMuX29wdGlvbnMgPSBfb3B0aW9ucztcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIC8vIFdoZW4gcGx1Z2lucyBhcmUgbm90IGludm9sdmVkXG4gICAgICAgIHRoaXMuX29wdGlvbnMgPSB7XG4gICAgICAgICAgLi4udGhpcy5nbG9iYWxPcHRpb25zLFxuICAgICAgICAgIC4uLl9vcHRpb25zLFxuICAgICAgICB9O1xuICAgICAgfVxuICAgIH1cbiAgfVxuICBnZXQgb3B0aW9ucygpIHtcbiAgICByZXR1cm4gdGhpcy5fb3B0aW9ucztcbiAgfVxuICBwcml2YXRlIF9vcHRpb25zOiBQYXJ0aWFsPEF1dG9BbmltYXRlT3B0aW9ucz4gfCBBdXRvQW5pbWF0aW9uUGx1Z2luID0ge307XG5cbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIGF1dG9BbmltYXRlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgdGhpcy5vcHRpb25zKTtcbiAgfVxufVxuIl19
|
|
@@ -1,24 +1,46 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, ElementRef, Directive, Input } from '@angular/core';
|
|
2
|
+
import { InjectionToken, inject, ElementRef, Directive, Input } from '@angular/core';
|
|
3
3
|
import autoAnimate from '@formkit/auto-animate';
|
|
4
4
|
|
|
5
|
+
const isPlugin = (config) => typeof config === 'function';
|
|
6
|
+
const GLOBAL_AUTO_ANIMATE_OPTIONS = new InjectionToken('Global AutoAnimate Options or Plugin', {
|
|
7
|
+
factory: () => ({}),
|
|
8
|
+
});
|
|
5
9
|
class NgAutoAnimateDirective {
|
|
6
10
|
constructor() {
|
|
7
11
|
this.el = inject(ElementRef);
|
|
12
|
+
this.globalOptions = inject(GLOBAL_AUTO_ANIMATE_OPTIONS);
|
|
8
13
|
this._options = {};
|
|
9
14
|
}
|
|
10
|
-
set
|
|
11
|
-
|
|
15
|
+
set explicitOptions(_options) {
|
|
16
|
+
if (typeof _options === 'string') {
|
|
17
|
+
// Default case, when no options or plugin is passed
|
|
18
|
+
this._options = this.globalOptions;
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
// When either some options or a plugin is passed
|
|
22
|
+
if (isPlugin(this.globalOptions) || isPlugin(_options)) {
|
|
23
|
+
// A plugin must replace any previously set options or plugin.
|
|
24
|
+
// A plugin must be replaced by options or another plugin.
|
|
25
|
+
this._options = _options;
|
|
26
|
+
}
|
|
27
|
+
else {
|
|
28
|
+
// When plugins are not involved
|
|
29
|
+
this._options = {
|
|
30
|
+
...this.globalOptions,
|
|
31
|
+
..._options,
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
}
|
|
12
35
|
}
|
|
13
36
|
get options() {
|
|
14
37
|
return this._options;
|
|
15
38
|
}
|
|
16
39
|
ngAfterViewInit() {
|
|
17
|
-
this.
|
|
18
|
-
autoAnimate(this.el.nativeElement, { ...this.options });
|
|
40
|
+
autoAnimate(this.el.nativeElement, this.options);
|
|
19
41
|
}
|
|
20
42
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: NgAutoAnimateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
21
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.6", type: NgAutoAnimateDirective, isStandalone: true, selector: "[auto-animate]", inputs: {
|
|
43
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.6", type: NgAutoAnimateDirective, isStandalone: true, selector: "[auto-animate]", inputs: { explicitOptions: ["auto-animate", "explicitOptions"] }, ngImport: i0 }); }
|
|
22
44
|
}
|
|
23
45
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: NgAutoAnimateDirective, decorators: [{
|
|
24
46
|
type: Directive,
|
|
@@ -26,7 +48,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.6", ngImpor
|
|
|
26
48
|
selector: '[auto-animate]',
|
|
27
49
|
standalone: true,
|
|
28
50
|
}]
|
|
29
|
-
}], propDecorators: {
|
|
51
|
+
}], propDecorators: { explicitOptions: [{
|
|
30
52
|
type: Input,
|
|
31
53
|
args: ['auto-animate']
|
|
32
54
|
}] } });
|
|
@@ -35,5 +57,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.6", ngImpor
|
|
|
35
57
|
* Generated bundle index. Do not edit.
|
|
36
58
|
*/
|
|
37
59
|
|
|
38
|
-
export { NgAutoAnimateDirective };
|
|
60
|
+
export { GLOBAL_AUTO_ANIMATE_OPTIONS, NgAutoAnimateDirective };
|
|
39
61
|
//# sourceMappingURL=ng-auto-animate.mjs.map
|
|
@@ -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 { AfterViewInit, Directive, ElementRef, Input, inject } from '@angular/core';\nimport autoAnimate, { AutoAnimateOptions } from '@formkit/auto-animate';\n\n\n@Directive({\n selector: '[auto-animate]',\n standalone: true,\n})\nexport class NgAutoAnimateDirective implements AfterViewInit {\n private el = inject(ElementRef);\n\n @Input('auto-animate')\n set
|
|
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, inject } from '@angular/core';\nimport autoAnimate, { AutoAnimateOptions, AutoAnimationPlugin } from '@formkit/auto-animate';\n\nconst isPlugin = (config: Partial<AutoAnimateOptions> | AutoAnimationPlugin) =>\n typeof config === 'function';\n\nexport const GLOBAL_AUTO_ANIMATE_OPTIONS = new InjectionToken<Partial<AutoAnimateOptions> | AutoAnimationPlugin>(\n 'Global AutoAnimate Options or Plugin', {\n factory: () => ({}),\n});\n\n@Directive({\n selector: '[auto-animate]',\n standalone: true,\n})\nexport class NgAutoAnimateDirective implements AfterViewInit {\n private el = inject(ElementRef);\n private globalOptions = inject(GLOBAL_AUTO_ANIMATE_OPTIONS);\n\n @Input('auto-animate')\n set explicitOptions(_options: Partial<AutoAnimateOptions> | AutoAnimationPlugin | string) {\n if (typeof _options === 'string') {\n // Default case, when no options or plugin is passed\n this._options = this.globalOptions;\n } else {\n // When either some options or a plugin is passed\n if (isPlugin(this.globalOptions) || isPlugin(_options)) {\n // A plugin must replace any previously set options or plugin. \n // A plugin must be replaced by options or another plugin.\n this._options = _options;\n } else {\n // When plugins are not involved\n this._options = {\n ...this.globalOptions,\n ..._options,\n };\n }\n }\n }\n get options() {\n return this._options;\n }\n private _options: Partial<AutoAnimateOptions> | AutoAnimationPlugin = {};\n\n ngAfterViewInit(): void {\n autoAnimate(this.el.nativeElement, this.options);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAGA,MAAM,QAAQ,GAAG,CAAC,MAAyD,KACzE,OAAO,MAAM,KAAK,UAAU,CAAC;MAElB,2BAA2B,GAAG,IAAI,cAAc,CAC3D,sCAAsC,EAAE;AACxC,IAAA,OAAO,EAAE,OAAO,EAAE,CAAC;AACpB,CAAA,EAAE;AAEH,MAIa,sBAAsB,CAAA;AAJnC,IAAA,WAAA,GAAA;AAKU,QAAA,IAAA,CAAA,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;AACxB,QAAA,IAAA,CAAA,aAAa,GAAG,MAAM,CAAC,2BAA2B,CAAC,CAAC;QAyBpD,IAAQ,CAAA,QAAA,GAAsD,EAAE,CAAC;AAK1E,KAAA;IA5BC,IACI,eAAe,CAAC,QAAoE,EAAA;AACtF,QAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;;AAEhC,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC;AACpC,SAAA;AAAM,aAAA;;YAEL,IAAI,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,EAAE;;;AAGtD,gBAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAC1B,aAAA;AAAM,iBAAA;;gBAEL,IAAI,CAAC,QAAQ,GAAG;oBACd,GAAG,IAAI,CAAC,aAAa;AACrB,oBAAA,GAAG,QAAQ;iBACZ,CAAC;AACH,aAAA;AACF,SAAA;KACF;AACD,IAAA,IAAI,OAAO,GAAA;QACT,OAAO,IAAI,CAAC,QAAQ,CAAC;KACtB;IAGD,eAAe,GAAA;QACb,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;KAClD;8GA/BU,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,eAAA,EAAA,CAAA,cAAA,EAAA,iBAAA,CAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAAtB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAJlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA,CAAA;8BAMK,eAAe,EAAA,CAAA;sBADlB,KAAK;uBAAC,cAAc,CAAA;;;ACnBvB;;AAEG;;;;"}
|
|
@@ -1,12 +1,14 @@
|
|
|
1
|
-
import { AfterViewInit } from '@angular/core';
|
|
2
|
-
import { AutoAnimateOptions } from '@formkit/auto-animate';
|
|
1
|
+
import { AfterViewInit, InjectionToken } from '@angular/core';
|
|
2
|
+
import { AutoAnimateOptions, AutoAnimationPlugin } from '@formkit/auto-animate';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
|
+
export declare const GLOBAL_AUTO_ANIMATE_OPTIONS: InjectionToken<Partial<AutoAnimateOptions> | AutoAnimationPlugin>;
|
|
4
5
|
export declare class NgAutoAnimateDirective implements AfterViewInit {
|
|
5
6
|
private el;
|
|
6
|
-
|
|
7
|
-
|
|
7
|
+
private globalOptions;
|
|
8
|
+
set explicitOptions(_options: Partial<AutoAnimateOptions> | AutoAnimationPlugin | string);
|
|
9
|
+
get options(): Partial<AutoAnimateOptions> | AutoAnimationPlugin;
|
|
8
10
|
private _options;
|
|
9
11
|
ngAfterViewInit(): void;
|
|
10
12
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgAutoAnimateDirective, never>;
|
|
11
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<NgAutoAnimateDirective, "[auto-animate]", never, { "
|
|
13
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<NgAutoAnimateDirective, "[auto-animate]", never, { "explicitOptions": { "alias": "auto-animate"; "required": false; }; }, {}, never, never, true, never>;
|
|
12
14
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ng-auto-animate",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Add motion to your apps with a single line of code. An Angular Directive to use FormKit's auto-animate library.",
|
|
5
|
+
"repository": "https://github.com/ajitzero/ng-auto-animate.git",
|
|
6
|
+
"author": "Ajit Panigrahi <ajitzero@gmail.com>",
|
|
7
|
+
"license": "MIT",
|
|
4
8
|
"peerDependencies": {
|
|
5
9
|
"@angular/common": "^16.0.0",
|
|
6
10
|
"@angular/core": "^16.0.0",
|