arrow-long-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-long-down",
16  standalone: true,
17  changeDetection: ChangeDetectionStrategy.OnPush,
18  host: {
19    "[attr.aria-label]": "'arrow-long-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
37      class="head-path"
38      [class.animate]="shouldAnimate()"
39      d="M15.75 17.25 12 21m0 0-3.75-3.75"
40    />
41    <path #linePath d="M12 21V3" />
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      }
52      .head-path {
53        transform-box: fill-box;
54        transform-origin: center;
55        transition: transform 0.4s ease-in-out;
56      }
57      .head-path.animate {
58        animation: head-translate 0.4s ease-in-out forwards;
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 ArrowLongDownIcon {
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  private lineAnimationFrame: number | null = null;
96  private readonly parsedLinePaths: { template: string; numbers: number[] }[];
97  private readonly lineTemplate: string;
98  private readonly lineNumberCount: number;
99// … truncated