arrow-right

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-right",
16  standalone: true,
17  changeDetection: ChangeDetectionStrategy.OnPush,
18  host: {
19    "[attr.aria-label]": "'arrow-right'",
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  >
36    <path class="head-path" [class.animate]="shouldAnimate()" d="M13.5 4.5 21 12m0 0-7.5 7.5" />
37    <path #linePath d="M21 12H3" />
38  </svg>`,
39  styles: [
40    `
41      :host {
42        display: inline-block;
43      }
44      .icon-svg {
45        transform-box: fill-box;
46        transform-origin: center;
47      }
48      .head-path {
49        transform-box: fill-box;
50        transform-origin: center;
51        transition: transform 0.4s ease-in-out;
52      }
53      .head-path.animate {
54        animation: head-translate 0.4s ease-in-out forwards;
55      }
56      @keyframes head-translate {
57        0% {
58          transform: translateX(0);
59        }
60        50% {
61          transform: translateX(-3px);
62        }
63        100% {
64          transform: translateX(0);
65        }
66      }
67    `,
68  ],
69})
70export class ArrowRightIcon {
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 linePathRef =
80    viewChild<ElementRef<SVGPathElement>>("linePath");
81  private readonly destroyRef = inject(DestroyRef);
82 
83  private readonly LINE_PATH_KEYFRAMES = [
84    "M21 12H3",
85    "M18 12H3",
86    "M21 12H3",
87  ] as const;
88  private readonly LINE_PATH_TIMES = [0, 0.5, 1] as const;
89  private readonly lineAnimationDuration = 400;
90  private readonly NUMBER_PATTERN = /-?\d*\.?\d+(?:e[-+]?\d+)?/gi;
91  private lineAnimationFrame: number | null = null;
92  private readonly parsedLinePaths: { template: string; numbers: number[] }[];
93  private readonly lineTemplate: string;
94  private readonly lineNumberCount: number;
95  private readonly canMorphLine: boolean;
96 
97// … truncated