arrow-turn-up-right

1import {
2  ChangeDetectionStrategy,
3  Component,
4  computed,
5  input,
6  signal,
7} from "@angular/core";
8 
9@Component({
10  selector: "hi-arrow-turn-up-right",
11  standalone: true,
12  changeDetection: ChangeDetectionStrategy.OnPush,
13  host: {
14    "[attr.aria-label]": "'arrow-turn-up-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    [class.arrowturnupright-animate]="shouldAnimate()"
31  >
32    <path d="m16.49 12 3.75-3.751m0 0-3.75-3.75m3.75 3.75H3.74V19.5" />
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        transition: transform 0.45s ease-in-out;
44      }
45 
46      .icon-svg.arrowturnupright-animate {
47        animation: arrowturnupright-animate 0.45s ease-in-out forwards;
48      }
49 
50      @keyframes arrowturnupright-animate {
51        0% {
52          transform: scaleX(1) translateX(0);
53        }
54        50% {
55          transform: scaleX(1.15) translateX(2px);
56        }
57        100% {
58          transform: scaleX(1) translateX(0);
59        }
60      }
61    `,
62  ],
63})
64export class ArrowTurnUpRightIcon {
65  readonly color = input("currentColor");
66  readonly size = input(28);
67  readonly strokeWidth = input(1.5);
68  readonly animate = input(false);
69 
70  protected isHovered = signal(false);
71  protected shouldAnimate = computed(() => this.animate() || this.isHovered());
72 
73  onMouseEnter() {
74    this.isHovered.set(true);
75  }
76 
77  onMouseLeave() {
78    this.isHovered.set(false);
79  }
80}