arrow-down

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-down",
16  standalone: true,
17  changeDetection: ChangeDetectionStrategy.OnPush,
18  host: {
19    "[attr.aria-label]": "'arrow-down'",
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="M19.5 13.5 12 21m0 0-7.5-7.5" />
37    <path #linePath d="M12 21V3" />
38  </svg>`,
39  styles: [
40    `
41      :host {
42        display: inline-block;
43      }
44 
45      .icon-svg {
46        transform-box: fill-box;
47        transform-origin: center;
48      }
49 
50      .head-path {
51        transform-box: fill-box;
52        transform-origin: center;
53        transition: transform 0.4s ease-in-out;
54      }
55 
56      .head-path.animate {
57        animation: head-translate 0.4s ease-in-out forwards;
58      }
59 
60      @keyframes head-translate {
61        0% {
62          transform: translateY(0);
63        }
64        50% {
65          transform: translateY(-3px);
66        }
67        100% {
68          transform: translateY(0);
69        }
70      }
71    `,
72  ],
73})
74export class ArrowDownIcon {
75  readonly color = input("currentColor");
76  readonly size = input(28);
77  readonly strokeWidth = input(1.5);
78  readonly animate = input(false);
79 
80  protected isHovered = signal(false);
81  protected shouldAnimate = computed(() => this.animate() || this.isHovered());
82 
83  private readonly linePathRef =
84    viewChild<ElementRef<SVGPathElement>>("linePath");
85  private readonly destroyRef = inject(DestroyRef);
86 
87  private readonly LINE_PATH_KEYFRAMES = [
88    "M12 21V3",
89    "M12 18V3",
90    "M12 21V3",
91  ] as const;
92  private readonly LINE_PATH_TIMES = [0, 0.5, 1] as const;
93  private readonly lineAnimationDuration = 400;
94  private readonly NUMBER_PATTERN = /-?\d*\.?\d+(?:e[-+]?\d+)?/gi;
95 
96  private lineAnimationFrame: number | null = null;
97  private readonly parsedLinePaths: { template: string; numbers: number[] }[];
98  private readonly lineTemplate: string;
99  private readonly lineNumberCount: number;
100  private readonly canMorphLine: boolean;
101 
102// … truncated