arrow-path

1import {
2  ChangeDetectionStrategy,
3  Component,
4  computed,
5  input,
6  signal,
7} from "@angular/core";
8 
9@Component({
10  selector: "hi-arrow-path",
11  standalone: true,
12  changeDetection: ChangeDetectionStrategy.OnPush,
13  host: {
14    "[attr.aria-label]": "'arrow-path'",
15    role: "img",
16    "(mouseenter)": "onMouseEnter()",
17    "(mouseleave)": "onMouseLeave()",
18  },
19  template: `<svg
20    #svgElement
21    xmlns="http://www.w3.org/2000/svg"
22    [attr.width]="size()"
23    [attr.height]="size()"
24    viewBox="0 0 24 24"
25    fill="none"
26    [attr.stroke]="color()"
27    [attr.stroke-width]="strokeWidth()"
28    stroke-linecap="round"
29    stroke-linejoin="round"
30    class="icon-svg"
31    [class.animate]="shouldAnimate()"
32  >
33    <path
34      d="M16.0228 9.34841H21.0154V9.34663M2.98413 19.6444V14.6517M2.98413 14.6517L7.97677 14.6517M2.98413 14.6517L6.16502 17.8347C7.15555 18.8271 8.41261 19.58 9.86436 19.969C14.2654 21.1483 18.7892 18.5364 19.9685 14.1353M4.03073 9.86484C5.21 5.46374 9.73377 2.85194 14.1349 4.03121C15.5866 4.4202 16.8437 5.17312 17.8342 6.1655L21.0154 9.34663M21.0154 4.3558V9.34663"
35    />
36  </svg>`,
37  styles: [
38    `
39      :host {
40        display: inline-block;
41      }
42 
43      .icon-svg {
44        transform-box: fill-box;
45        transform-origin: center;
46        transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
47      }
48 
49      .icon-svg.animate {
50        animation: rotate-spring 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
51      }
52 
53      @keyframes rotate-spring {
54        0% {
55          transform: rotate(0deg);
56        }
57        100% {
58          transform: rotate(50deg);
59        }
60      }
61    `,
62  ],
63})
64export class ArrowPathIcon {
65  readonly color = input("currentColor");
66  readonly size = input(28);
67  readonly strokeWidth = input(1.5);
68  readonly animate = input(false);
69 
70  protected isHovered = signal(false);
71  protected shouldAnimate = computed(() => this.animate() || this.isHovered());
72 
73  onMouseEnter() {
74    this.isHovered.set(true);
75  }
76 
77  onMouseLeave() {
78    this.isHovered.set(false);
79  }
80}