arrow-down-right

1import {
2  ChangeDetectionStrategy,
3  Component,
4  computed,
5  input,
6  signal,
7} from "@angular/core";
8 
9@Component({
10  selector: "hi-arrow-down-right",
11  standalone: true,
12  changeDetection: ChangeDetectionStrategy.OnPush,
13  host: {
14    "[attr.aria-label]": "'arrow-down-right'",
15    role: "img",
16    "(mouseenter)": "onMouseEnter()",
17    "(mouseleave)": "onMouseLeave()",
18  },
19  template: `<svg
20    xmlns="http://www.w3.org/2000/svg"
21    [attr.width]="size()"
22    [attr.height]="size()"
23    viewBox="0 0 24 24"
24    fill="none"
25    [attr.stroke]="color()"
26    [attr.stroke-width]="strokeWidth()"
27    stroke-linecap="round"
28    stroke-linejoin="round"
29    class="icon-svg"
30  >
31    <path
32      class="head-path"
33      [class.animate]="shouldAnimate()"
34      d="m4.5 4.5 15 15m0 0V8.25m0 11.25H8.25"
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      }
47 
48      .head-path {
49        transform-box: fill-box;
50        transform-origin: center;
51        transition: transform 0.5s ease-in-out;
52      }
53 
54      .head-path.animate {
55        animation: head-move 0.5s ease-in-out forwards;
56      }
57 
58      @keyframes head-move {
59        0% {
60          transform: translate(0, 0);
61        }
62        50% {
63          transform: translate(-3px, -3px);
64        }
65        100% {
66          transform: translate(0, 0);
67        }
68      }
69    `,
70  ],
71})
72export class ArrowDownRightIcon {
73  readonly color = input("currentColor");
74  readonly size = input(28);
75  readonly strokeWidth = input(1.5);
76  readonly animate = input(false);
77 
78  protected isHovered = signal(false);
79  protected shouldAnimate = computed(() => this.animate() || this.isHovered());
80 
81  onMouseEnter() {
82    this.isHovered.set(true);
83  }
84 
85  onMouseLeave() {
86    this.isHovered.set(false);
87  }
88}