archive-box-x-mark

1import {
2  ChangeDetectionStrategy,
3  Component,
4  computed,
5  input,
6  signal,
7} from "@angular/core";
8 
9@Component({
10  selector: "hi-archive-box-x-mark",
11  standalone: true,
12  changeDetection: ChangeDetectionStrategy.OnPush,
13  host: {
14    "[attr.aria-label]": "'archive-box-x-mark'",
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      class="archiveboxxmark-path"
33      [class.archiveboxxmark-path-animate]="shouldAnimate()"
34      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"
35    />
36    <path
37      class="archiveboxxmark-path"
38      [class.archiveboxxmark-path-animate]="shouldAnimate()"
39      d="M20.25 7.5L19.6246 18.1321"
40    />
41    <path
42      class="archiveboxxmark-path"
43      [class.archiveboxxmark-path-animate]="shouldAnimate()"
44      d="M3.75 7.5L4.37542 18.1321"
45    />
46    <path
47      d="M9.75 11.625L14.25 16.125"
48      pathLength="1"
49      class="archiveboxxmark-xline archiveboxxmark-xline1"
50      [class.archiveboxxmark-xdraw]="shouldAnimate()"
51    />
52    <path
53      d="M14.25 11.625L9.75 16.125"
54      pathLength="1"
55      class="archiveboxxmark-xline archiveboxxmark-xline2"
56      [class.archiveboxxmark-xdraw]="shouldAnimate()"
57    />
58    <path
59      class="archiveboxxmark-lid"
60      [class.archiveboxxmark-lid-animate]="shouldAnimate()"
61      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"
62    />
63  </svg>`,
64  styles: [
65    `
66      :host {
67        display: inline-block;
68      }
69 
70      .icon-svg {
71        transform-box: fill-box;
72        transform-origin: center;
73      }
74 
75      .archiveboxxmark-path {
76        transform-box: fill-box;
77        transform-origin: center;
78        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
79      }
80 
81      .archiveboxxmark-path.archiveboxxmark-path-animate {
82        transform: translateY(1px);
83      }
84 
85      .archiveboxxmark-lid {
86        transform-box: fill-box;
87        transform-origin: center;
88// … truncated