{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "arrow-trending-down",
  "type": "registry:component",
  "title": "arrow-trending-down",
  "description": "Animated arrow-trending-down icon for Angular",
  "author": "Aniket Pawar <pawaraniket508@gmail.com>",
  "registryDependencies": [],
  "dependencies": [],
  "files": [
    {
      "path": "packages/angular/src/icons/arrow-trending-down.ts",
      "type": "registry:component",
      "target": "~/src/app/components/heroicons-animated/arrow-trending-down.ts",
      "content": "import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  type ElementRef,\n  effect,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from \"@angular/core\";\n\n@Component({\n  selector: \"hi-arrow-trending-down\",\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    \"[attr.aria-label]\": \"'arrow-trending-down'\",\n    role: \"img\",\n    \"(mouseenter)\": \"onMouseEnter()\",\n    \"(mouseleave)\": \"onMouseLeave()\",\n  },\n  template: `<svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    [attr.width]=\"size()\"\n    [attr.height]=\"size()\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    [attr.stroke]=\"color()\"\n    [attr.stroke-width]=\"strokeWidth()\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    class=\"icon-svg\"\n    [class.animate]=\"shouldAnimate()\"\n  >\n    <path\n      #pathElement\n      d=\"M2.25 6L9 12.75L13.3064 8.44365C14.5101 10.812 16.5042 12.7978 19.1203 13.9625L21.8609 15.1827\"\n    />\n    <path #arrowElement d=\"M21.8609 15.1827L15.9196 17.4634M21.8609 15.1827L19.5802 9.24152\" />\n  </svg>`,\n  styles: [\n    `\n      :host {\n        display: inline-block;\n      }\n      .icon-svg {\n        transform-box: fill-box;\n        transform-origin: center;\n        transition: transform 0.5s ease-in-out;\n      }\n      .icon-svg.animate {\n        animation: svg-translate 0.5s ease-in-out forwards;\n      }\n      @keyframes svg-translate {\n        0% {\n          transform: translate(0, 0);\n        }\n        50% {\n          transform: translate(2px, 2px);\n        }\n        100% {\n          transform: translate(0, 0);\n        }\n      }\n    `,\n  ],\n})\nexport class ArrowTrendingDownIcon {\n  readonly color = input(\"currentColor\");\n  readonly size = input(28);\n  readonly strokeWidth = input(1.5);\n  readonly animate = input(false);\n\n  protected isHovered = signal(false);\n  protected shouldAnimate = computed(() => this.animate() || this.isHovered());\n\n  private readonly pathRef =\n    viewChild<ElementRef<SVGPathElement>>(\"pathElement\");\n  private readonly arrowRef =\n    viewChild<ElementRef<SVGPathElement>>(\"arrowElement\");\n  private readonly destroyRef = inject(DestroyRef);\n\n  private pathAnimation: Animation | null = null;\n  private arrowAnimation: Animation | null = null;\n  private arrowTimeout: ReturnType<typeof setTimeout> | null = null;\n\n  constructor() {\n    effect(() => {\n      if (this.shouldAnimate()) {\n        this.startAnimation();\n      } else {\n        this.stopAnimation();\n      }\n    });\n    this.destroyRef.onDestroy(() => this.stopAnimation());\n  }\n\n  private startAnimation() {\n    const pathEl = this.pathRef()?.nativeElement;\n    const arrowEl = this.arrowRef()?.nativeElement;\n\n    if (pathEl) {\n      const pathLength = pathEl.getTotalLength();\n      pathEl.style.strokeDasharray = `${pathLength}`;\n      pathEl.style.strokeDashoffset = `${pathLength}`;\n      pathEl.style.opacity = \"0\";\n      this.pathAnimation = pathEl.animate(\n        [\n          { strokeDashoffset: pathLength, opacity: 0 },\n          { strokeDashoffset: 0, opacity: 1 },\n        ],\n        { duration: 400, easing: \"ease-in-out\", fill: \"forwards\" as FillMode }\n      );\n    }\n\n    if (arrowEl) {\n      const arrowLength = arrowEl.getTotalLength();\n      arrowEl.style.strokeDasharray = `${arrowLength}`;\n      arrowEl.style.strokeDashoffset = `${arrowLength * 0.5}`;\n      arrowEl.style.opacity = \"0\";\n      this.arrowTimeout = setTimeout(() => {\n        if (arrowEl) {\n          this.arrowAnimation = arrowEl.animate(\n            [\n              { strokeDashoffset: arrowLength * 0.5, opacity: 0 },\n              { strokeDashoffset: 0, opacity: 1 },\n            ],\n            {\n              duration: 300,\n              easing: \"ease-in-out\",\n              fill: \"forwards\" as FillMode,\n            }\n          );\n        }\n      }, 300);\n    }\n  }\n\n  private stopAnimation() {\n    if (this.arrowTimeout) {\n      clearTimeout(this.arrowTimeout);\n      this.arrowTimeout = null;\n    }\n    if (this.pathAnimation) {\n      this.pathAnimation.cancel();\n      this.pathAnimation = null;\n    }\n    if (this.arrowAnimation) {\n      this.arrowAnimation.cancel();\n      this.arrowAnimation = null;\n    }\n    const pathEl = this.pathRef()?.nativeElement;\n    const arrowEl = this.arrowRef()?.nativeElement;\n    if (pathEl) {\n      pathEl.style.strokeDasharray = \"\";\n      pathEl.style.strokeDashoffset = \"\";\n      pathEl.style.opacity = \"1\";\n    }\n    if (arrowEl) {\n      arrowEl.style.strokeDasharray = \"\";\n      arrowEl.style.strokeDashoffset = \"\";\n      arrowEl.style.opacity = \"1\";\n    }\n  }\n\n  onMouseEnter() {\n    this.isHovered.set(true);\n  }\n  onMouseLeave() {\n    this.isHovered.set(false);\n  }\n}\n"
    }
  ]
}