arrow-uturn-left

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