arrow-down-on-square

1import {
2  ChangeDetectionStrategy,
3  Component,
4  computed,
5  input,
6  signal,
7} from "@angular/core";
8 
9@Component({
10  selector: "hi-arrow-down-on-square",
11  standalone: true,
12  changeDetection: ChangeDetectionStrategy.OnPush,
13  host: {
14    "[attr.aria-label]": "'arrow-down-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="M9 12l3 3m0 0 3-3m-3 3V2.25" />
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        transition: transform 0.4s ease-in-out;
51      }
52 
53      .arrow-path.animate {
54        animation: arrow-translate 0.4s ease-in-out forwards;
55      }
56 
57      @keyframes arrow-translate {
58        0% {
59          transform: translateY(0);
60        }
61        33% {
62          transform: translateY(-2px);
63        }
64        66% {
65          transform: translateY(2px);
66        }
67        100% {
68          transform: translateY(0);
69        }
70      }
71    `,
72  ],
73})
74export class ArrowDownOnSquareIcon {
75  readonly color = input("currentColor");
76  readonly size = input(28);
77  readonly strokeWidth = input(1.5);
78  readonly animate = input(false);
79 
80  protected isHovered = signal(false);
81  protected shouldAnimate = computed(() => this.animate() || this.isHovered());
82 
83  onMouseEnter() {
84    this.isHovered.set(true);
85  }
86 
87  onMouseLeave() {
88    this.isHovered.set(false);
89  }
90}