arrow-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-up",
16  standalone: true,
17  changeDetection: ChangeDetectionStrategy.OnPush,
18  host: {
19    "[attr.aria-label]": "'arrow-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  >
36    <path class="head-path" [class.animate]="shouldAnimate()" d="M4.5 10.5 12 3m0 0 7.5 7.5" />
37    <path #linePath d="M12 3v18" />
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: translateY(0);
59        }
60        50% {
61          transform: translateY(3px);
62        }
63        100% {
64          transform: translateY(0);
65        }
66      }
67    `,
68  ],
69})
70export class ArrowUpIcon {
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    "M12 3v18",
85    "M12 6v15",
86    "M12 3v18",
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  constructor() {
98// … truncated