1a2b40f4-d0f1-4a92-b98b-b0c5ec4535e4

Committed 21 May 2025 02:14AM UTC coverage: 90.22%. Remained the same

Build # 1a2b40f4-d0f1-4a92-b98b-b0c5ec4535e4

Build Type

push

circleci

Committed by

web-flow

Commit Message

feat(colorPicker): migrate to signal for colorPicker (#3450)

Run Details

5560 of 6827 branches covered (81.44%)

Branch coverage included in aggregate %.

60 of 67 new or added lines in 8 files covered. (89.55%)

5 existing lines in 3 files now uncovered.

13646 of 14461 relevant lines covered (94.36%)

902.91 hits per line

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

79.41

/src/color-picker/parts/inputs/inputs.component.ts

import { Component, effect, HostBinding, input, OnInit, output, signal, WritableSignal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ThyInputDirective, ThyInputGroup } from 'ngx-tethys/input';
import { ThyInputNumber } from 'ngx-tethys/input-number';
import { ThyEnterDirective } from 'ngx-tethys/shared';
import { ThyColor } from '../../helpers/color.class';

/**
 * @internal
 */
@Component({
    selector: 'thy-color-inputs',
    templateUrl: './inputs.component.html',
    imports: [ThyInputDirective, FormsModule, ThyEnterDirective, ThyInputNumber, ThyInputGroup]
})
export class ThyColorInputs implements OnInit {
    @HostBinding('class.thy-color-inputs') className = true;

    readonly color = input<ThyColor>();

    readonly colorChange = output<ThyColor>();

    readonly hex: WritableSignal<string> = signal('');

    readonly alpha: WritableSignal<number> = signal(100);

    constructor() {
        effect(() => {
            this.hex.set(this.color()?.toHexString(false).slice(1, 7) || '');
            this.alpha.set(Math.round(this.color()?.rgba.alpha * 100) || 100);
        });
    }

    ngOnInit(): void {}

    onInputChange(event: Event, type: string) {
        let newColor;
        const alpha = this.alpha() / 100;
        if (type === 'hex') {
            let finalDisplayValue = this.hex();
            if (this.hex().length === 3) {
                finalDisplayValue = this.hex()
                    .split('')
                    .map(value => value + value)
                    .join('');
            }
            finalDisplayValue = `#${finalDisplayValue}`;
            if (alpha !== 1) {
                finalDisplayValue += ((1 << 8) | Math.round(alpha * 255)).toString(16).substr(1);
            }
            newColor = new ThyColor(finalDisplayValue);
        } else {
            newColor = new ThyColor().setRgba(this.color().rgba.red, this.color().rgba.green, this.color().rgba.blue, alpha);
        }
        this.colorChange.emit(newColor);
    }
}

1	import { Component, effect, HostBinding, input, OnInit, output, signal, WritableSignal } from '@angular/core';
2	import { FormsModule } from '@angular/forms';
3	import { ThyInputDirective, ThyInputGroup } from 'ngx-tethys/input';
4	import { ThyInputNumber } from 'ngx-tethys/input-number';
5	import { ThyEnterDirective } from 'ngx-tethys/shared';
6	import { ThyColor } from '../../helpers/color.class';
7
8	/**
9	* @internal
10	*/
11	@Component({
12	selector: 'thy-color-inputs',
13	templateUrl: './inputs.component.html',	1✔
14	imports: [ThyInputDirective, FormsModule, ThyEnterDirective, ThyInputNumber, ThyInputGroup]
15	})	10✔
16	export class ThyColorInputs implements OnInit {	10✔
17	@HostBinding('class.thy-color-inputs') className = true;	10✔
18		10✔
19	readonly color = input<ThyColor>();	10✔
20		10✔
21	readonly colorChange = output<ThyColor>();	12!
22		12!
23	readonly hex: WritableSignal<string> = signal('');
24
25	readonly alpha: WritableSignal<number> = signal(100);
26
27	constructor() {
28	effect(() => {	3✔
29	this.hex.set(this.color()?.toHexString(false).slice(1, 7) \|\| '');	3✔
30	this.alpha.set(Math.round(this.color()?.rgba.alpha * 100) \|\| 100);	2✔
31	});	2!
NEW 32	}	×
33
NEW 34	ngOnInit(): void {}	×
35
36	onInputChange(event: Event, type: string) {
37	let newColor;	2✔
38	const alpha = this.alpha() / 100;	2!
UNCOV 39	if (type === 'hex') {	×
40	let finalDisplayValue = this.hex();
41	if (this.hex().length === 3) {	2✔
42	finalDisplayValue = this.hex()
43	.split('')
44	.map(value => value + value)	1✔
45	.join('');
46	}	3✔
47	finalDisplayValue = `#${finalDisplayValue}`;
48	if (alpha !== 1) {	1✔
49	finalDisplayValue += ((1 << 8) \| Math.round(alpha * 255)).toString(16).substr(1);	1✔
50	}
51	newColor = new ThyColor(finalDisplayValue);
52	} else {
53	newColor = new ThyColor().setRgba(this.color().rgba.red, this.color().rgba.green, this.color().rgba.blue, alpha);
54	}
55	this.colorChange.emit(newColor);	1✔
56	}
57	}

atinc / ngx-tethys / 1a2b40f4-d0f1-4a92-b98b-b0c5ec4535e4

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