arrow-up-left

1import {
2  ChangeDetectionStrategy,
3  Component,
4  computed,
5  input,
6  signal,
7} from "@angular/core";
8 
9@Component({
10  selector: "hi-arrow-up-left",
11  standalone: true,
12  changeDetection: ChangeDetectionStrategy.OnPush,
13  host: {
14    "[attr.aria-label]": "'arrow-up-left'",
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      #arrowPath
33      class="arrow-path"
34      [class.animate]="shouldAnimate()"
35      d="m19.5 19.5-15-15m0 0v11.25m0-11.25h11.25"
36    />
37  </svg>`,
38  styles: [
39    `
40      :host {
41        display: inline-block;
42      }
43 
44      .icon-svg {
45        transform-box: fill-box;
46        transform-origin: center;
47      }
48 
49      .arrow-path {
50        transform-box: fill-box;
51        transform-origin: 0% 0%;
52        transition: transform 0.5s ease-in-out;
53      }
54 
55      .arrow-path.animate {
56        animation: arrow-move 0.5s ease-in-out forwards;
57      }
58 
59      @keyframes arrow-move {
60        0% {
61          transform: translate(0, 0) scale(1);
62        }
63        50% {
64          transform: translate(4px, 4px) scale(0.85);
65        }
66        100% {
67          transform: translate(0, 0) scale(1);
68        }
69      }
70    `,
71  ],
72})
73export class ArrowUpLeftIcon {
74  readonly color = input("currentColor");
75  readonly size = input(28);
76  readonly strokeWidth = input(1.5);
77  readonly animate = input(false);
78 
79  protected isHovered = signal(false);
80  protected shouldAnimate = computed(() => this.animate() || this.isHovered());
81 
82  onMouseEnter() {
83    this.isHovered.set(true);
84  }
85 
86  onMouseLeave() {
87    this.isHovered.set(false);
88  }
89}