archive-box-arrow-down

1import {
2  ChangeDetectionStrategy,
3  Component,
4  computed,
5  input,
6  signal,
7} from "@angular/core";
8 
9@Component({
10  selector: "hi-archive-box-arrow-down",
11  standalone: true,
12  changeDetection: ChangeDetectionStrategy.OnPush,
13  host: {
14    "[attr.aria-label]": "'archive-box-arrow-down'",
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="path-group"
33      [class.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 class="path-group" [class.animate]="shouldAnimate()" d="M20.25 7.5L19.6246 18.1321" />
37    <path class="path-group" [class.animate]="shouldAnimate()" d="M3.75 7.5L4.37542 18.1321" />
38    <path class="arrow-group" [class.animate]="shouldAnimate()" d="M12 10.5V17.25" />
39    <path class="arrow-group" [class.animate]="shouldAnimate()" d="M12 17.25L9 14.25" />
40    <path class="arrow-group" [class.animate]="shouldAnimate()" d="M12 17.25L15 14.25" />
41    <path
42      class="lid-group"
43      [class.animate]="shouldAnimate()"
44      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"
45    />
46  </svg>`,
47  styles: [
48    `
49      :host {
50        display: inline-block;
51      }
52 
53      .icon-svg {
54        transform-box: fill-box;
55        transform-origin: center;
56      }
57 
58      .path-group {
59        transform-box: fill-box;
60        transform-origin: center;
61        transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
62      }
63 
64      .path-group.animate {
65        animation: path-translate 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
66      }
67 
68      .arrow-group {
69        transform-box: fill-box;
70        transform-origin: center;
71        transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
72      }
73 
74      .arrow-group.animate {
75        animation: arrow-translate 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
76      }
77 
78      .lid-group {
79        transform-box: fill-box;
80        transform-origin: center;
81// … truncated