adjustments-vertical

1import {
2  ChangeDetectionStrategy,
3  Component,
4  computed,
5  DestroyRef,
6  effect,
7  inject,
8  input,
9  signal,
10} from "@angular/core";
11 
12type VerticalStateKey =
13  | "col1TopY2"
14  | "col1BottomY1"
15  | "col1KnobCY"
16  | "col2TopY2"
17  | "col2BottomY1"
18  | "col2KnobCY"
19  | "col3TopY2"
20  | "col3BottomY1"
21  | "col3KnobCY";
22 
23type VerticalState = Record<VerticalStateKey, number>;
24 
25@Component({
26  selector: "hi-adjustments-vertical",
27  standalone: true,
28  changeDetection: ChangeDetectionStrategy.OnPush,
29  host: {
30    "[attr.aria-label]": "'adjustments-vertical'",
31    role: "img",
32    "(mouseenter)": "onMouseEnter()",
33    "(mouseleave)": "onMouseLeave()",
34  },
35  template: `<svg
36    xmlns="http://www.w3.org/2000/svg"
37    [attr.width]="size()"
38    [attr.height]="size()"
39    viewBox="0 0 24 24"
40    fill="none"
41    [attr.stroke]="color()"
42    [attr.stroke-width]="strokeWidth()"
43    stroke-linecap="round"
44    stroke-linejoin="round"
45    class="icon-svg"
46  >
47    <line x1="6" x2="6" y1="3.75" [attr.y2]="col1TopY2()" />
48    <line x1="6" x2="6" [attr.y1]="col1BottomY1()" y2="20.25" />
49    <circle cx="6" [attr.cy]="col1KnobCY()" fill="none" r="1.5" />
50 
51    <line x1="12" x2="12" y1="3.75" [attr.y2]="col2TopY2()" />
52    <line x1="12" x2="12" [attr.y1]="col2BottomY1()" y2="20.25" />
53    <circle cx="12" [attr.cy]="col2KnobCY()" fill="none" r="1.5" />
54 
55    <line x1="18" x2="18" y1="3.75" [attr.y2]="col3TopY2()" />
56    <line x1="18" x2="18" [attr.y1]="col3BottomY1()" y2="20.25" />
57    <circle cx="18" [attr.cy]="col3KnobCY()" fill="none" r="1.5" />
58  </svg>`,
59  styles: [
60    `
61      :host {
62        display: inline-block;
63      }
64      .icon-svg {
65        transform-box: fill-box;
66        transform-origin: center;
67      }
68    `,
69  ],
70})
71export class AdjustmentsVerticalIcon {
72  readonly color = input("currentColor");
73  readonly size = input(28);
74  readonly strokeWidth = input(1.5);
75  readonly animate = input(false);
76 
77  protected isHovered = signal(false);
78  protected shouldAnimate = computed(() => this.animate() || this.isHovered());
79 
80  protected col1TopY2 = signal(13.5);
81  protected col1BottomY1 = signal(16.5);
82  protected col1KnobCY = signal(15);
83  protected col2TopY2 = signal(7.5);
84  protected col2BottomY1 = signal(10.5);
85  protected col2KnobCY = signal(9);
86  protected col3TopY2 = signal(13.5);
87  protected col3BottomY1 = signal(16.5);
88  protected col3KnobCY = signal(15);
89 
90  private readonly DURATION_MS = 450;
91  private readonly NORMAL_STATE: VerticalState = {
92    col1TopY2: 13.5,
93// … truncated