arrow-up-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-up-on-square-stack",
11  standalone: true,
12  changeDetection: ChangeDetectionStrategy.OnPush,
13  host: {
14    "[attr.aria-label]": "'arrow-up-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="M13.5 4.5L10.5 1.5M10.5 1.5L7.5 4.5M10.5 1.5L10.5 12.75"
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      }
58 
59      .arrow-path.animate {
60        animation: arrow-up-on-square-stack-shift 0.4s ease-in-out;
61      }
62 
63      @keyframes arrow-up-on-square-stack-shift {
64        0% {
65          transform: translateY(0);
66        }
67        33.333% {
68          transform: translateY(1px);
69        }
70        66.666% {
71          transform: translateY(-1px);
72        }
73        100% {
74          transform: translateY(0);
75        }
76      }
77    `,
78  ],
79})
80export class ArrowUpOnSquareStackIcon {
81  readonly color = input("currentColor");
82  readonly size = input(28);
83  readonly strokeWidth = input(1.5);
84  readonly animate = input(false);
85 
86  protected isHovered = signal(false);
87  protected shouldAnimate = computed(() => this.animate() || this.isHovered());
88 
89  onMouseEnter() {
90    this.isHovered.set(true);
91  }
92 
93  onMouseLeave() {
94    this.isHovered.set(false);
95  }
96}