arrow-top-right-on-square

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