arrow-right-start-on-rectangle

1import {
2  ChangeDetectionStrategy,
3  Component,
4  computed,
5  input,
6  signal,
7} from "@angular/core";
8 
9@Component({
10  selector: "hi-arrow-right-start-on-rectangle",
11  standalone: true,
12  changeDetection: ChangeDetectionStrategy.OnPush,
13  host: {
14    "[attr.aria-label]": "'arrow-right-start-on-rectangle'",
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      d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15"
33    />
34    <g class="arrow-group" [class.animate]="shouldAnimate()">
35      <path d="M18 15l3-3m0 0-3-3m3 3H9" />
36    </g>
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-group {
50        transform-box: fill-box;
51        transform-origin: center;
52        transition: transform 0.5s ease-in-out;
53      }
54 
55      .arrow-group.animate {
56        animation: arrow-translate 0.5s ease-in-out forwards;
57      }
58 
59      @keyframes arrow-translate {
60        0% {
61          transform: translateX(0);
62        }
63        40% {
64          transform: translateX(2px);
65        }
66        100% {
67          transform: translateX(0);
68        }
69      }
70    `,
71  ],
72})
73export class ArrowRightStartOnRectangleIcon {
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}