d9ae709b-3c27-4b69-b125-b8b80b54f90b

import {
    ChangeDetectionStrategy,
    Component,
    ElementRef,
    EventEmitter,
    HostBinding,
    Input,
    OnChanges,
    Output,
    Renderer2,
    SimpleChanges,
    ViewChild
} from '@angular/core';
import { ThyCoordinatesDirective } from '../../coordinates.directive';
import ThyColor from '../../helpers/color.class';

/**
 * @internal
 */
@Component({
    selector: 'thy-alpha',
    templateUrl: './alpha.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    standalone: true,
    imports: [ThyCoordinatesDirective]
})
export class ThyAlphaComponent implements OnChanges {
    @HostBinding('class.thy-alpha') className = true;

    @Input() color: ThyColor;

    constructor(private readonly renderer: Renderer2) {}

    @ViewChild('pointer', { static: true })
    public pointer: ElementRef;

    @ViewChild('gradient', { static: true })
    public gradient: ElementRef;

    @Output()
    public colorChange = new EventEmitter<ThyColor>(false);

    setBackground() {
        this.renderer.setStyle(
            this.gradient.nativeElement,
            'background',
            `linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(${this.color.rgba.red},
            ${this.color.rgba.green},
            ${this.color.rgba.blue},
            1) 100%)`
        );
    }

    ngOnChanges(changes: SimpleChanges): void {
        if (changes.color && changes.color.previousValue !== changes.color.currentValue) {
            this.setBackground();
            this.changePointerPosition(this.color.alpha);
        }
    }

    private changePointerPosition(alpha: number): void {
        const x = alpha * 100;
        this.renderer.setStyle(this.pointer.nativeElement, 'left', `${x}%`);
    }

    handleChange(event: {
        x: number;
        y: number;
        top: number;
        left: number;
        containerHeight: number;
        containerWidth: number;
        $event: Event;
    }) {
        let x;
        if (event.left < 0) {
            x = 0;
        } else if (event.left > event.containerWidth) {
            x = 1;
        } else {
            x = Math.round((event.left * 100) / event.containerWidth) / 100;
        }
        this.changePointerPosition(x);
        this.colorChange.emit(new ThyColor({ h: this.color.hue, s: this.color.saturation, v: this.color.value, alpha: x }));
    }
}

1	import {
2	ChangeDetectionStrategy,
3	Component,
4	ElementRef,
5	EventEmitter,
6	HostBinding,
7	Input,
8	OnChanges,
9	Output,	1✔
10	Renderer2,
11	SimpleChanges,	×
12	ViewChild	×
13	} from '@angular/core';	×
14	import { ThyCoordinatesDirective } from '../../coordinates.directive';
15	import ThyColor from '../../helpers/color.class';
16		×
17	/**
18	* @internal
19	*/
20	@Component({
21	selector: 'thy-alpha',
22	templateUrl: './alpha.component.html',	×
23	changeDetection: ChangeDetectionStrategy.OnPush,	×
24	standalone: true,	×
25	imports: [ThyCoordinatesDirective]
26	})
27	export class ThyAlphaComponent implements OnChanges {
28	@HostBinding('class.thy-alpha') className = true;	×
29		×
30	@Input() color: ThyColor;
31
32	constructor(private readonly renderer: Renderer2) {}
33		×
34	@ViewChild('pointer', { static: true })	×
35	public pointer: ElementRef;
36		×
37	@ViewChild('gradient', { static: true })	×
38	public gradient: ElementRef;
39
40	@Output()	×
41	public colorChange = new EventEmitter<ThyColor>(false);
42		×
43	setBackground() {	×
44	this.renderer.setStyle(
45	this.gradient.nativeElement,	1✔
46	'background',
47	`linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(${this.color.rgba.red},
48	${this.color.rgba.green},	1✔
49	${this.color.rgba.blue},
50	1) 100%)`
51	);
52	}
53
54	ngOnChanges(changes: SimpleChanges): void {
55	if (changes.color && changes.color.previousValue !== changes.color.currentValue) {
56	this.setBackground();	1✔
57	this.changePointerPosition(this.color.alpha);
58	}
59	}
60
61	private changePointerPosition(alpha: number): void {
62	const x = alpha * 100;
63	this.renderer.setStyle(this.pointer.nativeElement, 'left', `${x}%`);
64	}
65
66	handleChange(event: {
67	x: number;
68	y: number;
69	top: number;
70	left: number;
71	containerHeight: number;
72	containerWidth: number;
73	$event: Event;
74	}) {
75	let x;
76	if (event.left < 0) {
77	x = 0;
78	} else if (event.left > event.containerWidth) {
79	x = 1;
80	} else {
81	x = Math.round((event.left * 100) / event.containerWidth) / 100;
82	}
83	this.changePointerPosition(x);
84	this.colorChange.emit(new ThyColor({ h: this.color.hue, s: this.color.saturation, v: this.color.value, alpha: x }));
85	}
86	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous