{"_id":"@aliabbas101/dotlottie-angular","_rev":"2-a70d9df6ee56554bf94354c1521e5b75","name":"@aliabbas101/dotlottie-angular","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@aliabbas101/dotlottie-angular","version":"0.0.1","keywords":["angular","lottie","dotlottie","animation","wrapper"],"author":{"url":"https://syedalirizvi.dev","name":"Syed Ali Rizvi","email":"aliabbas7861@outlook.com"},"license":"MIT","_id":"@aliabbas101/dotlottie-angular@0.0.1","maintainers":[{"name":"aliabbas101","email":"aliabbas7861@outlook.com"}],"homepage":"https://github.com/aliabbas101/dotlottie-angular#readme","bugs":{"url":"https://github.com/aliabbas101/dotlottie-angular/issues"},"dist":{"shasum":"d8079846bcb352744ca3f43f98cabbe32d633ea0","tarball":"https://registry.npmjs.org/@aliabbas101/dotlottie-angular/-/dotlottie-angular-0.0.1.tgz","fileCount":5,"integrity":"sha512-06NrVKbVv0HcD/hL6nQBOzPlQx0acjBkNxXx5l05ctauTcm6mSKTLcFt3rdVQeRwiBymoibto6XLJwf3xioudg==","signatures":[{"sig":"MEQCIBZiAfpV3IS2fFCxSt/mULaLvFthWtOzZcnZ42A5psi1AiBvdkyNTdwIGFrkyUU2Fj3SDg2cEvLWs/Phv985U3fmZg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":80571},"type":"module","module":"fesm2022/aliabbas101-dotlottie-angular.mjs","exports":{".":{"types":"./types/aliabbas101-dotlottie-angular.d.ts","default":"./fesm2022/aliabbas101-dotlottie-angular.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"9fedcecf8f18ad5e761e77c2b53e0104f0833027","typings":"types/aliabbas101-dotlottie-angular.d.ts","_npmUser":{"name":"aliabbas101","email":"aliabbas7861@outlook.com"},"repository":{"url":"git+https://github.com/aliabbas101/dotlottie-angular.git","type":"git"},"_npmVersion":"10.9.2","description":"Angular wrapper for @lottiefiles/dotlottie-web","directories":{},"sideEffects":false,"_nodeVersion":"22.14.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^21.2.0","@angular/common":"^21.2.0","@lottiefiles/dotlottie-web":"^0.74.0"},"_npmOperationalInternal":{"tmp":"tmp/dotlottie-angular_0.0.1_1781868269948_0.9743721317061764","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@aliabbas101/dotlottie-angular","version":"0.0.2","description":"Angular wrapper for @lottiefiles/dotlottie-web","keywords":["angular","lottie","dotlottie","animation","wrapper"],"author":{"name":"Syed Ali Rizvi","email":"aliabbas7861@outlook.com","url":"https://syedalirizvi.dev"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/aliabbas101/dotlottie-angular.git"},"peerDependencies":{"@angular/common":"^21.2.0","@angular/core":"^21.2.0","@lottiefiles/dotlottie-web":"^0.74.0"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"module":"fesm2022/aliabbas101-dotlottie-angular.mjs","typings":"types/aliabbas101-dotlottie-angular.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./types/aliabbas101-dotlottie-angular.d.ts","default":"./fesm2022/aliabbas101-dotlottie-angular.mjs"}},"type":"module","_id":"@aliabbas101/dotlottie-angular@0.0.2","gitHead":"5d528951c893f70466fed5e77b5e22cffdba8376","bugs":{"url":"https://github.com/aliabbas101/dotlottie-angular/issues"},"homepage":"https://github.com/aliabbas101/dotlottie-angular#readme","_nodeVersion":"22.22.3","_npmVersion":"10.9.8","dist":{"integrity":"sha512-68rdYJJPD/uiV7oFkb5g0cDuafzCcH3NFUoptGG+aPYm35DLfR3sr/4BzvFq3Y0xXgryYetoK2P5wmB8JfI7Qg==","shasum":"a3f9e33636d0a78085e6aa791f9010a614b0a586","tarball":"https://registry.npmjs.org/@aliabbas101/dotlottie-angular/-/dotlottie-angular-0.0.2.tgz","fileCount":5,"unpackedSize":86540,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCNka8BpkvlTQcIf641uZQM0qzWykdUkFGrCC0BTTiOGgIgbTsqT2nxaCRG7qRSRPTfJr8y9SDrglkjr79lzdDHMF4="}]},"_npmUser":{"name":"aliabbas101","email":"aliabbas7861@outlook.com"},"directories":{},"maintainers":[{"name":"aliabbas101","email":"aliabbas7861@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dotlottie-angular_0.0.2_1781868530885_0.2739558154435189"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-19T11:24:29.750Z","modified":"2026-06-19T11:28:51.162Z","0.0.1":"2026-06-19T11:24:30.078Z","0.0.2":"2026-06-19T11:28:51.043Z"},"bugs":{"url":"https://github.com/aliabbas101/dotlottie-angular/issues"},"author":{"name":"Syed Ali Rizvi","email":"aliabbas7861@outlook.com","url":"https://syedalirizvi.dev"},"license":"MIT","homepage":"https://github.com/aliabbas101/dotlottie-angular#readme","keywords":["angular","lottie","dotlottie","animation","wrapper"],"repository":{"type":"git","url":"git+https://github.com/aliabbas101/dotlottie-angular.git"},"description":"Angular wrapper for @lottiefiles/dotlottie-web","maintainers":[{"name":"aliabbas101","email":"aliabbas7861@outlook.com"}],"readme":"# dotlottie-angular\n\nAngular wrapper for [`@lottiefiles/dotlottie-web`](https://github.com/LottieFiles/dotlottie-web) —\nthe official Rust/WASM-powered Lottie & dotLottie player.\n\n## Files\n\n```\nindex.ts                      ← public barrel\nlib/\n  dotlottie.types.ts          ← shared TypeScript types\n  dotlottie.component.ts      ← <dot-lottie> standalone component\n  dotlottie.directive.ts      ← canvas[dotLottie] standalone directive\n  dotlottie.service.ts        ← DotLottieService (imperative / shared instances)\n  dotlottie.module.ts         ← NgModule for non-standalone apps\n```\n\n---\n\n## Installation\n\n```bash\nnpm install @lottiefiles/dotlottie-web\n# copy the lib/ folder into your project's shared library, e.g. src/lib/dotlottie/\n```\n\n---\n\n## Usage\n\n### 1. Component (recommended for most cases)\n\nDrop `<dot-lottie>` anywhere in a template. Size it with Tailwind or plain CSS —\nthe inner `<canvas>` fills the host element automatically.\n\n```html\n<!-- standalone app.component.html -->\n<dot-lottie\n  src=\"assets/animations/welcome.lottie\"\n  [loop]=\"true\"\n  [autoplay]=\"true\"\n  [speed]=\"1\"\n  class=\"w-36 h-36\"\n  (playerReady)=\"onReady($event)\"\n  (complete)=\"onComplete()\"\n></dot-lottie>\n```\n\n```ts\n// app.component.ts\nimport { DotLottieComponent } from '@/lib/dotlottie';\nimport type { DotLottie } from '@/lib/dotlottie';\n\n@Component({\n  standalone: true,\n  imports: [DotLottieComponent],\n  templateUrl: './app.component.html',\n})\nexport class AppComponent {\n  onReady(player: DotLottie) {\n    console.log('total frames:', player.totalFrames);\n  }\n\n  onComplete() {\n    console.log('animation finished');\n  }\n}\n```\n\n### 2. Directive (use on your own `<canvas>`)\n\nUse `canvas[dotLottie]` when you need to own the canvas element directly —\nuseful for custom `id`, `aria-*`, or fixed pixel dimensions.\n\n```html\n<canvas\n  dotLottie\n  [src]=\"animSrc\"\n  [loop]=\"true\"\n  [autoplay]=\"true\"\n  width=\"200\"\n  height=\"200\"\n  class=\"rounded-xl\"\n  (complete)=\"onDone()\"\n></canvas>\n```\n\n```ts\nimport { DotLottieDirective } from '@/lib/dotlottie';\n\n@Component({\n  standalone: true,\n  imports: [DotLottieDirective],\n  template: `...`,\n})\nexport class MyComponent {\n  animSrc = 'assets/animations/success.lottie';\n}\n```\n\n### 3. Service (imperative / shared instances)\n\nUse `DotLottieService` to create and control players from TypeScript —\nuseful for route-level pre-loading or cross-component control.\n\n```ts\nimport { DotLottieService } from '@/lib/dotlottie';\n\n@Component({ ... })\nexport class HeroComponent implements AfterViewInit {\n  @ViewChild('canvas') canvasRef!: ElementRef<HTMLCanvasElement>;\n\n  constructor(private lottie: DotLottieService) {}\n\n  ngAfterViewInit() {\n    this.lottie.create('hero', {\n      canvas: this.canvasRef.nativeElement,\n      src: 'assets/hero.lottie',\n      autoplay: false,\n      loop: true,\n    });\n  }\n\n  play()  { this.lottie.play('hero');  }\n  pause() { this.lottie.pause('hero'); }\n\n  ngOnDestroy() {\n    this.lottie.destroy('hero');\n  }\n}\n```\n\n### 4. NgModule (non-standalone apps)\n\n```ts\nimport { DotLottieModule } from '@/lib/dotlottie';\n\n@NgModule({\n  imports: [DotLottieModule],\n})\nexport class AppModule {}\n```\n\n---\n\n## All Inputs\n\n| Input                    | Type                  | Default       | Description                                   |\n|--------------------------|-----------------------|---------------|-----------------------------------------------|\n| `src` *(required)*       | `string`              | —             | URL or data-URI of `.lottie` / `.json` file   |\n| `autoplay`               | `boolean`             | `true`        | Start playing immediately after load          |\n| `loop`                   | `boolean`             | `false`       | Loop the animation                            |\n| `speed`                  | `number`              | `1`           | Playback speed multiplier                     |\n| `backgroundColor`        | `string`              | `''`          | CSS color string for canvas background        |\n| `mode`                   | `Mode`                | `'forward'`   | `forward` / `reverse` / `bounce` / `reverse-bounce` |\n| `segment`                | `[number, number]`    | `undefined`   | `[startFrame, endFrame]` to play              |\n| `useFrameInterpolation`  | `boolean`             | `true`        | Smooth sub-frame playback                     |\n| `renderConfig`           | `RenderConfig`        | `undefined`   | `{ autoResize, devicePixelRatio, freezeOnOffscreen }` |\n| `layout`                 | `Layout`              | `undefined`   | `{ fit, align }` — controls canvas layout     |\n| `animationId`            | `string`              | `undefined`   | For multi-animation `.lottie` files           |\n| `themeId`                | `string`              | `undefined`   | Theme ID from `.lottie` manifest              |\n| `stateMachineId`         | `string`              | `undefined`   | State machine to activate after load          |\n\n---\n\n## All Outputs\n\n| Output                                    | Payload                                            |\n|-------------------------------------------|----------------------------------------------------|\n| `playerReady`                             | `DotLottie` instance                               |\n| `load`                                    | `void`                                             |\n| `loadError`                               | `{ error: Error }`                                 |\n| `ready`                                   | `void`                                             |\n| `play`                                    | `void`                                             |\n| `pause`                                   | `void`                                             |\n| `stop`                                    | `void`                                             |\n| `complete`                                | `void`                                             |\n| `loop`                                    | `{ loopCount: number }`                            |\n| `frame`                                   | `{ currentFrame: number }`                         |\n| `render`                                  | `{ currentFrame: number }`                         |\n| `freeze`                                  | `void`                                             |\n| `unfreeze`                                | `void`                                             |\n| `destroy`                                 | `void`                                             |\n| `stateMachineStart`                       | `void`                                             |\n| `stateMachineStop`                        | `void`                                             |\n| `stateMachineTransition`                  | `{ fromState: string; toState: string }`           |\n| `stateMachineStateEntered`                | `{ state: string }`                                |\n| `stateMachineBooleanInputValueChange`     | `{ inputName, oldValue, newValue: boolean }`       |\n| `stateMachineNumericInputValueChange`     | `{ inputName, oldValue, newValue: number }`        |\n\n---\n\n## Accessing the player instance via template reference\n\n```html\n<dot-lottie\n  #lottie\n  src=\"assets/confetti.lottie\"\n  [autoplay]=\"false\"\n  class=\"w-24 h-24\"\n></dot-lottie>\n\n<button (click)=\"lottie.play_anim()\">Play</button>\n<button (click)=\"lottie.pause_anim()\">Pause</button>\n<button (click)=\"lottie.seekToFrame(0)\">Reset</button>\n```\n","readmeFilename":"README.md"}