archive-box

1import {
2  ChangeDetectionStrategy,
3  Component,
4  computed,
5  input,
6  signal,
7} from "@angular/core";
8 
9@Component({
10  selector: "hi-archive-box",
11  standalone: true,
12  changeDetection: ChangeDetectionStrategy.OnPush,
13  host: {
14    "[attr.aria-label]": "'archive-box'",
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    <g class="path-group" [class.animate]="shouldAnimate()">
32      <path
33        d="M19.6246 18.1321C19.5546 19.3214 18.5698 20.25 17.3785 20.25H6.62154C5.43022 20.25 4.44538 19.3214 4.37542 18.1321"
34      />
35      <path d="M20.25 7.5L19.6246 18.1321" />
36      <path d="M3.75 7.5L4.37542 18.1321" />
37      <path d="M9.99976 11.25H13.9998" />
38    </g>
39    <path
40      class="lid-group"
41      [class.animate]="shouldAnimate()"
42      d="M3.375 7.5H20.625C21.2463 7.5 21.75 6.99632 21.75 6.375V4.875C21.75 4.25368 21.2463 3.75 20.625 3.75H3.375C2.75368 3.75 2.25 4.25368 2.25 4.875V6.375C2.25 6.99632 2.75368 7.5 3.375 7.5Z"
43    />
44  </svg>`,
45  styles: [
46    `
47      :host {
48        display: inline-block;
49      }
50 
51      .icon-svg {
52        transform-box: fill-box;
53        transform-origin: center;
54      }
55 
56      .path-group {
57        transform-box: fill-box;
58        transform-origin: center;
59        transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
60      }
61 
62      .path-group.animate {
63        animation: path-translate 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
64      }
65 
66      .lid-group {
67        transform-box: fill-box;
68        transform-origin: center;
69        transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
70      }
71 
72      .lid-group.animate {
73        animation: lid-translate 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
74      }
75 
76      @keyframes path-translate {
77        0% {
78          transform: translateY(0);
79        }
80        100% {
81          transform: translateY(1px);
82        }
83      }
84 
85      @keyframes lid-translate {
86        0% {
87          transform: translateY(0);
88        }
89        100% {
90          transform: translateY(-1.5px);
91        }
92      }
93    `,
94  ],
95})
96export class ArchiveBoxIcon {
97  readonly color = input("currentColor");
98// … truncated