arrow-turn-left-up

1import {
2  ChangeDetectionStrategy,
3  Component,
4  computed,
5  input,
6  signal,
7} from "@angular/core";
8 
9@Component({
10  selector: "hi-arrow-turn-left-up",
11  standalone: true,
12  changeDetection: ChangeDetectionStrategy.OnPush,
13  host: {
14    "[attr.aria-label]": "'arrow-turn-left-up'",
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    [class.arrowturnleftup-animate]="shouldAnimate()"
31  >
32    <path d="M11.99 7.5 8.24 3.75m0 0L4.49 7.5m3.75-3.75v16.499h11.25" />
33  </svg>`,
34  styles: [
35    `
36      :host {
37        display: inline-block;
38      }
39 
40      .icon-svg {
41        transform-box: fill-box;
42        transform-origin: center;
43      }
44 
45      .icon-svg.arrowturnleftup-animate {
46        animation: arrowturnleftup-animate 0.45s ease-in-out forwards;
47      }
48 
49      @keyframes arrowturnleftup-animate {
50        0% {
51          transform: scaleY(1) translateY(0);
52        }
53        50% {
54          transform: scaleY(1.15) translateY(-2px);
55        }
56        100% {
57          transform: scaleY(1) translateY(0);
58        }
59      }
60    `,
61  ],
62})
63export class ArrowTurnLeftUpIcon {
64  readonly color = input("currentColor");
65  readonly size = input(28);
66  readonly strokeWidth = input(1.5);
67  readonly animate = input(false);
68 
69  protected isHovered = signal(false);
70  protected shouldAnimate = computed(() => this.animate() || this.isHovered());
71 
72  onMouseEnter() {
73    this.isHovered.set(true);
74  }
75 
76  onMouseLeave() {
77    this.isHovered.set(false);
78  }
79}