adjustments-horizontal

1import {
2  ChangeDetectionStrategy,
3  Component,
4  computed,
5  DestroyRef,
6  effect,
7  inject,
8  input,
9  signal,
10} from "@angular/core";
11 
12type HorizontalStateKey =
13  | "row1RightX1"
14  | "row1LeftX2"
15  | "row1KnobCX"
16  | "row2RightX1"
17  | "row2LeftX2"
18  | "row2KnobCX"
19  | "row3RightX1"
20  | "row3LeftX2"
21  | "row3KnobCX";
22 
23type HorizontalState = Record<HorizontalStateKey, number>;
24 
25@Component({
26  selector: "hi-adjustments-horizontal",
27  standalone: true,
28  changeDetection: ChangeDetectionStrategy.OnPush,
29  host: {
30    "[attr.aria-label]": "'adjustments-horizontal'",
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 [attr.x1]="row1RightX1()" x2="20.25" y1="6" y2="6" />
48    <line x1="3.75" [attr.x2]="row1LeftX2()" y1="6" y2="6" />
49    <circle [attr.cx]="row1KnobCX()" cy="6" fill="none" r="1.5" />
50 
51    <line [attr.x1]="row2RightX1()" x2="20.25" y1="12" y2="12" />
52    <line x1="3.75" [attr.x2]="row2LeftX2()" y1="12" y2="12" />
53    <circle [attr.cx]="row2KnobCX()" cy="12" fill="none" r="1.5" />
54 
55    <line [attr.x1]="row3RightX1()" x2="20.25" y1="18" y2="18" />
56    <line x1="3.75" [attr.x2]="row3LeftX2()" y1="18" y2="18" />
57    <circle [attr.cx]="row3KnobCX()" cy="18" 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 AdjustmentsHorizontalIcon {
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 row1RightX1 = signal(10.5);
81  protected row1LeftX2 = signal(7.5);
82  protected row1KnobCX = signal(9);
83  protected row2RightX1 = signal(16.5);
84  protected row2LeftX2 = signal(13.5);
85  protected row2KnobCX = signal(15);
86  protected row3RightX1 = signal(10.5);
87  protected row3LeftX2 = signal(7.5);
88  protected row3KnobCX = signal(9);
89 
90  private readonly DURATION_MS = 450;
91  private readonly NORMAL_STATE: HorizontalState = {
92// … truncated