arrow-path-rounded-square

1import {
2  ChangeDetectionStrategy,
3  Component,
4  computed,
5  input,
6  signal,
7} from "@angular/core";
8 
9@Component({
10  selector: "hi-arrow-path-rounded-square",
11  standalone: true,
12  changeDetection: ChangeDetectionStrategy.OnPush,
13  host: {
14    "[attr.aria-label]": "'arrow-path-rounded-square'",
15    role: "img",
16    "(mouseenter)": "onMouseEnter()",
17    "(mouseleave)": "onMouseLeave()",
18  },
19  template: `<svg
20    #svgElement
21    xmlns="http://www.w3.org/2000/svg"
22    [attr.width]="size()"
23    [attr.height]="size()"
24    viewBox="0 0 24 24"
25    fill="none"
26    [attr.stroke]="color()"
27    [attr.stroke-width]="strokeWidth()"
28    stroke-linecap="round"
29    stroke-linejoin="round"
30    class="icon-svg"
31    [class.animate]="shouldAnimate()"
32  >
33    <path
34      d="M19.5 12C19.5 10.7681 19.4536 9.54699 19.3624 8.3384C19.2128 6.35425 17.6458 4.78724 15.6616 4.63757C14.453 4.54641 13.2319 4.5 12 4.5C10.7681 4.5 9.54699 4.54641 8.3384 4.63757C6.35425 4.78724 4.78724 6.35425 4.63757 8.3384C4.62097 8.55852 4.60585 8.77906 4.59222 9M19.5 12L22.5 9M19.5 12L16.5 9M4.5 12C4.5 13.2319 4.54641 14.453 4.63757 15.6616C4.78724 17.6458 6.35425 19.2128 8.3384 19.3624C9.54699 19.4536 10.7681 19.5 12 19.5C13.2319 19.5 14.453 19.4536 15.6616 19.3624C17.6458 19.2128 19.2128 17.6458 19.3624 15.6616C19.379 15.4415 19.3941 15.2209 19.4078 15M4.5 12L7.5 15M4.5 12L1.5 15"
35    />
36  </svg>`,
37  styles: [
38    `
39      :host {
40        display: inline-block;
41      }
42 
43      .icon-svg {
44        transform-box: fill-box;
45        transform-origin: center;
46        transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
47      }
48 
49      .icon-svg.animate {
50        animation: rotate-spring 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
51      }
52 
53      @keyframes rotate-spring {
54        0% {
55          transform: rotate(0deg);
56        }
57        100% {
58          transform: rotate(180deg);
59        }
60      }
61    `,
62  ],
63})
64export class ArrowPathRoundedSquareIcon {
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}