arrow-trending-up

1import {
2  ChangeDetectionStrategy,
3  Component,
4  computed,
5  DestroyRef,
6  type ElementRef,
7  effect,
8  inject,
9  input,
10  signal,
11  viewChild,
12} from "@angular/core";
13 
14@Component({
15  selector: "hi-arrow-trending-up",
16  standalone: true,
17  changeDetection: ChangeDetectionStrategy.OnPush,
18  host: {
19    "[attr.aria-label]": "'arrow-trending-up'",
20    role: "img",
21    "(mouseenter)": "onMouseEnter()",
22    "(mouseleave)": "onMouseLeave()",
23  },
24  template: `<svg
25    xmlns="http://www.w3.org/2000/svg"
26    [attr.width]="size()"
27    [attr.height]="size()"
28    viewBox="0 0 24 24"
29    fill="none"
30    [attr.stroke]="color()"
31    [attr.stroke-width]="strokeWidth()"
32    stroke-linecap="round"
33    stroke-linejoin="round"
34    class="icon-svg"
35    [class.animate]="shouldAnimate()"
36  >
37    <path
38      #pathElement
39      d="M2.25 18L9 11.25L13.3064 15.5564C14.5101 13.188 16.5042 11.2022 19.1203 10.0375L21.8609 8.81726"
40    />
41    <path #arrowElement d="M21.8609 8.81726L15.9196 6.53662M21.8609 8.81726L19.5802 14.7585" />
42  </svg>`,
43  styles: [
44    `
45      :host {
46        display: inline-block;
47      }
48      .icon-svg {
49        transform-box: fill-box;
50        transform-origin: center;
51        transition: transform 0.5s ease-in-out;
52      }
53      .icon-svg.animate {
54        animation: svg-translate 0.5s ease-in-out forwards;
55      }
56      @keyframes svg-translate {
57        0% {
58          transform: translate(0, 0);
59        }
60        50% {
61          transform: translate(2px, -2px);
62        }
63        100% {
64          transform: translate(0, 0);
65        }
66      }
67    `,
68  ],
69})
70export class ArrowTrendingUpIcon {
71  readonly color = input("currentColor");
72  readonly size = input(28);
73  readonly strokeWidth = input(1.5);
74  readonly animate = input(false);
75 
76  protected isHovered = signal(false);
77  protected shouldAnimate = computed(() => this.animate() || this.isHovered());
78 
79  private readonly pathRef =
80    viewChild<ElementRef<SVGPathElement>>("pathElement");
81  private readonly arrowRef =
82    viewChild<ElementRef<SVGPathElement>>("arrowElement");
83  private readonly destroyRef = inject(DestroyRef);
84 
85  private pathAnimation: Animation | null = null;
86  private arrowAnimation: Animation | null = null;
87  private arrowTimeout: ReturnType<typeof setTimeout> | null = null;
88 
89  constructor() {
90    effect(() => {
91      if (this.shouldAnimate()) {
92        this.startAnimation();
93      } else {
94        this.stopAnimation();
95      }
96    });
97// … truncated