arrow-down-tray

1import {
2  ChangeDetectionStrategy,
3  Component,
4  computed,
5  input,
6  signal,
7} from "@angular/core";
8 
9@Component({
10  selector: "hi-arrow-down-tray",
11  standalone: true,
12  changeDetection: ChangeDetectionStrategy.OnPush,
13  host: {
14    "[attr.aria-label]": "'arrow-down-tray'",
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 d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5" />
32    <g class="arrow-group" [class.animate]="shouldAnimate()">
33      <path d="M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
34    </g>
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-group {
48        transform-box: fill-box;
49        transform-origin: center;
50        transition: transform 0.5s ease-in-out;
51      }
52 
53      .arrow-group.animate {
54        animation: arrow-translate 0.5s ease-in-out forwards;
55      }
56 
57      @keyframes arrow-translate {
58        0% {
59          transform: translateY(0);
60        }
61        40% {
62          transform: translateY(2px);
63        }
64        100% {
65          transform: translateY(0);
66        }
67      }
68    `,
69  ],
70})
71export class ArrowDownTrayIcon {
72  readonly color = input("currentColor");
73  readonly size = input(28);
74  readonly strokeWidth = input(1.5);
75  readonly animate = input(false);
76 
77  protected isHovered = signal(false);
78  protected shouldAnimate = computed(() => this.animate() || this.isHovered());
79 
80  onMouseEnter() {
81    this.isHovered.set(true);
82  }
83 
84  onMouseLeave() {
85    this.isHovered.set(false);
86  }
87}