arrow-down-on-square-stack

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-stack",
11  standalone: true,
12  changeDetection: ChangeDetectionStrategy.OnPush,
13  host: {
14    "[attr.aria-label]": "'arrow-down-on-square-stack'",
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="M7.5 7.5H6.75C5.50736 7.5 4.5 8.50736 4.5 9.75V17.25C4.5 18.4926 5.50736 19.5 6.75 19.5H14.25C15.4926 19.5 16.5 18.4926 16.5 17.25V9.75C16.5 8.50736 15.4926 7.5 14.25 7.5H13.5"
33    />
34    <path
35      class="arrow-path"
36      [class.animate]="shouldAnimate()"
37      d="M7.5 11.25L10.5 14.25M10.5 14.25L13.5 11.25M10.5 14.25L10.5 1.5"
38    />
39    <path
40      d="M16.5 10.5H17.25C18.4926 10.5 19.5 11.5074 19.5 12.75V20.25C19.5 21.4926 18.4926 22.5 17.25 22.5H9.75C8.50736 22.5 7.5 21.4926 7.5 20.25V19.5"
41    />
42  </svg>`,
43  styles: [
44    `
45      :host {
46        display: inline-block;
47      }
48 
49      .icon-svg {
50        transform-box: fill-box;
51        transform-origin: center;
52      }
53 
54      .arrow-path {
55        transform-box: fill-box;
56        transform-origin: center;
57        transition: transform 0.4s ease-in-out;
58      }
59 
60      .arrow-path.animate {
61        animation: arrow-translate 0.4s ease-in-out forwards;
62      }
63 
64      @keyframes arrow-translate {
65        0% {
66          transform: translateY(0);
67        }
68        33% {
69          transform: translateY(-1px);
70        }
71        66% {
72          transform: translateY(1px);
73        }
74        100% {
75          transform: translateY(0);
76        }
77      }
78    `,
79  ],
80})
81export class ArrowDownOnSquareStackIcon {
82  readonly color = input("currentColor");
83  readonly size = input(28);
84  readonly strokeWidth = input(1.5);
85  readonly animate = input(false);
86 
87  protected isHovered = signal(false);
88  protected shouldAnimate = computed(() => this.animate() || this.isHovered());
89 
90  onMouseEnter() {
91    this.isHovered.set(true);
92  }
93 
94  onMouseLeave() {
95    this.isHovered.set(false);
96  }
97}