51b024ed-5c4c-47b8-bc8e-232ba92db63a

Committed 19 Aug 2024 10:29AM UTC coverage: 90.463% (-0.005%) from 90.468%

Build # 51b024ed-5c4c-47b8-bc8e-232ba92db63a

Build Type

Pull #3158

circleci

Committed by

cmm-va

Commit Message

feat(color-picker): hex column does not show alpha value #TINFR-62

Pull Request Pull Request #3158: feat(color-picker): hex column does not show alpha value #TINFR-62

Run Details

5503 of 6728 branches covered (81.79%)

Branch coverage included in aggregate %.

6 of 6 new or added lines in 1 file covered. (100.0%)

3 existing lines in 1 file now uncovered.

13259 of 14012 relevant lines covered (94.63%)

996.98 hits per line

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

81.48

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

import { Component, EventEmitter, HostBinding, Input, Output } 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',
    standalone: true,
    imports: [ThyInputDirective, FormsModule, ThyEnterDirective, ThyInputNumber, ThyInputGroup]
})
export class ThyColorInputs {
    @HostBinding('class.thy-color-inputs') className = true;

    innerColor: ThyColor;

    hex: string;

    @Input()
    set color(value: ThyColor) {
        this.alpha = Math.round(value.rgba.alpha * 100);
        this.innerColor = value;
        this.hex = this.innerColor.toHexString(false).slice(1, 7);
    }

    get color() {
        return this.innerColor;
    }

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

    alpha: number;

    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.innerColor.rgba.red, this.innerColor.rgba.green, this.innerColor.rgba.blue, alpha);
        }
        this.colorChange.emit(newColor);
    }
}

1	import { Component, EventEmitter, HostBinding, Input, Output } 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',	1✔
13	templateUrl: './inputs.component.html',
14	standalone: true,	10✔
15	imports: [ThyInputDirective, FormsModule, ThyEnterDirective, ThyInputNumber, ThyInputGroup]	10✔
16	})
17	export class ThyColorInputs {
18	@HostBinding('class.thy-color-inputs') className = true;	12✔
19		12✔
20	innerColor: ThyColor;	12✔
21
22	hex: string;
23		130✔
24	@Input()
25	set color(value: ThyColor) {
26	this.alpha = Math.round(value.rgba.alpha * 100);
27	this.innerColor = value;	3✔
28	this.hex = this.innerColor.toHexString(false).slice(1, 7);	3✔
29	}	2✔
30		2!
UNCOV 31	get color() {	×
32	return this.innerColor;
UNCOV 33	}	×
34
35	@Output()
36	public colorChange = new EventEmitter<ThyColor>(false);	2✔
37		2!
UNCOV 38	alpha: number;	×
39
40	onInputChange(event: Event, type: string) {	2✔
41	let newColor;
42	const alpha = this.alpha / 100;
43	if (type === 'hex') {	1✔
44	let finalDisplayValue = this.hex;
45	if (this.hex.length === 3) {	3✔
46	finalDisplayValue = this.hex
47	.split('')	1✔
48	.map(value => value + value)
49	.join('');
50	}
51	finalDisplayValue = `#${finalDisplayValue}`;
52	if (alpha !== 1) {
53	finalDisplayValue += ((1 << 8) \| Math.round(alpha * 255)).toString(16).substr(1);	1✔
54	}
55	newColor = new ThyColor(finalDisplayValue);
56	} else {
57	newColor = new ThyColor().setRgba(this.innerColor.rgba.red, this.innerColor.rgba.green, this.innerColor.rgba.blue, alpha);
58	}
59	this.colorChange.emit(newColor);
60	}
61	}

atinc / ngx-tethys / 51b024ed-5c4c-47b8-bc8e-232ba92db63a

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