arrow-up-on-square

1import {
2  ChangeDetectionStrategy,
3  Component,
4  computed,
5  input,
6  signal,
7} from "@angular/core";
8 
9@Component({
10  selector: "hi-arrow-up-on-square",
11  standalone: true,
12  changeDetection: ChangeDetectionStrategy.OnPush,
13  host: {
14    "[attr.aria-label]": "'arrow-up-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="M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15"
33    />
34    <path class="arrow-path" [class.animate]="shouldAnimate()" d="M15 5.25l-3-3m0 0-3 3m3-3V15" />
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-path {
48        transform-box: fill-box;
49        transform-origin: center;
50      }
51 
52      .arrow-path.animate {
53        animation: arrow-up-on-square-shift 0.4s ease-in-out;
54      }
55 
56      @keyframes arrow-up-on-square-shift {
57        0% {
58          transform: translateY(0);
59        }
60        33.333% {
61          transform: translateY(2px);
62        }
63        66.666% {
64          transform: translateY(-2px);
65        }
66        100% {
67          transform: translateY(0);
68        }
69      }
70    `,
71  ],
72})
73export class ArrowUpOnSquareIcon {
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}