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

95.92

/src/color-picker/color-picker-panel.component.ts

import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject, input, model, OnInit, Signal, ViewContainerRef } from '@angular/core';
import { injectLocale, ThyColorPickerLocale } from 'ngx-tethys/i18n';
import { ThyIcon } from 'ngx-tethys/icon';
import { ThyPopover, ThyPopoverRef } from 'ngx-tethys/popover';
import { coerceBooleanProperty } from 'ngx-tethys/util';
import { ThyColorPickerCustomPanel } from './color-picker-custom-panel.component';
import { ThyColor } from './helpers/color.class';

/**
 * @internal
 */
@Component({
    selector: 'thy-color-picker-panel',
    templateUrl: './color-picker-panel.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: {
        '[class.pt-4]': '!transparentColorSelectable()',
        '[class.thy-color-picker-panel]': 'true'
    },
    imports: [NgClass, NgTemplateOutlet, ThyIcon, NgStyle]
})
export class ThyColorPickerPanel implements OnInit {
    private thyPopover = inject(ThyPopover);
    private viewContainerRef = inject(ViewContainerRef);
    private thyPopoverRef = inject<ThyPopoverRef<ThyColorPickerPanel>>(ThyPopoverRef);
    locale: Signal<ThyColorPickerLocale> = injectLocale('colorPicker');

    readonly color = model<string>();

    readonly colorChange = input<(color: string) => {}>();

    readonly defaultColor = input<string, string>('', {
        transform: (value: string) => {
            return (value && new ThyColor(value).toHexString(true)) || '';
        }
    });

    readonly transparentColorSelectable = input(false, { transform: coerceBooleanProperty });

    readonly defaultColors = input<string[]>();

    recentColors: string[] = [];

    newColor: string;

    customPanelPopoverRef: ThyPopoverRef<ThyColorPickerCustomPanel>;

    ngOnInit(): void {
        const colors = localStorage.getItem('recentColors');
        if (colors) {
            this.recentColors = JSON.parse(colors);
        }
    }

    selectColor(color: string) {
        this.color.set(color);
        this.colorChange()(this.color());
        this.thyPopoverRef.close();
    }

    showMoreColor(event: Event) {
        if (!this.customPanelPopoverRef) {
            this.customPanelPopoverRef = this.thyPopover.open(ThyColorPickerCustomPanel, {
                origin: event.currentTarget as HTMLElement,
                offset: -4,
                placement: 'rightBottom',
                manualClosure: true,
                width: '260px',
                hasBackdrop: false,
                viewContainerRef: this.viewContainerRef,
                originActiveClass: 'thy-color-picker-active',
                initialState: {
                    color: this.color(),
                    pickerColorChange: (value: string) => {
                        this.newColor = value;
                        this.colorChange()(value);
                    }
                }
            });
        }
        this.customPanelPopoverRef?.afterClosed().subscribe(() => {
            if (this.newColor) {
                const index = this.recentColors.findIndex(item => item === this.newColor);
                if (index !== -1) {
                    this.recentColors.splice(index, 1);
                }
                this.recentColors.unshift(this.newColor);
                this.recentColors = this.recentColors.slice(0, 10);
                localStorage.setItem('recentColors', JSON.stringify(this.recentColors));
            }
            this.thyPopoverRef.close();
        });
    }

    getIconColor(item: string) {
        const rgba = new ThyColor(item).rgba;
        const hsp = 0.299 * rgba.red + 0.587 * rgba.green + 0.114 * rgba.blue;
        return hsp > 192 ? 'black' : 'white';
    }
}

1	import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
2	import { ChangeDetectionStrategy, Component, inject, input, model, OnInit, Signal, ViewContainerRef } from '@angular/core';
3	import { injectLocale, ThyColorPickerLocale } from 'ngx-tethys/i18n';
4	import { ThyIcon } from 'ngx-tethys/icon';
5	import { ThyPopover, ThyPopoverRef } from 'ngx-tethys/popover';
6	import { coerceBooleanProperty } from 'ngx-tethys/util';
7	import { ThyColorPickerCustomPanel } from './color-picker-custom-panel.component';
8	import { ThyColor } from './helpers/color.class';
9
10	/**
11	* @internal
12	*/
13	@Component({
14	selector: 'thy-color-picker-panel',
15	templateUrl: './color-picker-panel.component.html',	1✔
16	changeDetection: ChangeDetectionStrategy.OnPush,
17	host: {	40✔
18	'[class.pt-4]': '!transparentColorSelectable()',	40✔
19	'[class.thy-color-picker-panel]': 'true'	40✔
20	},	40✔
21	imports: [NgClass, NgTemplateOutlet, ThyIcon, NgStyle]	40✔
22	})	40✔
23	export class ThyColorPickerPanel implements OnInit {	40✔
24	private thyPopover = inject(ThyPopover);
25	private viewContainerRef = inject(ViewContainerRef);	23✔
26	private thyPopoverRef = inject<ThyPopoverRef<ThyColorPickerPanel>>(ThyPopoverRef);
27	locale: Signal<ThyColorPickerLocale> = injectLocale('colorPicker');
28		40✔
29	readonly color = model<string>();	40✔
30		40✔
31	readonly colorChange = input<(color: string) => {}>();
32
33	readonly defaultColor = input<string, string>('', {	36✔
34	transform: (value: string) => {	36✔
35	return (value && new ThyColor(value).toHexString(true)) \|\| '';	10✔
36	}
37	});
38
39	readonly transparentColorSelectable = input(false, { transform: coerceBooleanProperty });	3✔
40		3✔
41	readonly defaultColors = input<string[]>();	3✔
42
43	recentColors: string[] = [];
44		7✔
45	newColor: string;	6✔
46
47	customPanelPopoverRef: ThyPopoverRef<ThyColorPickerCustomPanel>;
48
49	ngOnInit(): void {
50	const colors = localStorage.getItem('recentColors');
51	if (colors) {
52	this.recentColors = JSON.parse(colors);
53	}
54	}
55
56	selectColor(color: string) {
NEW 57	this.color.set(color);	×
NEW 58	this.colorChange()(this.color());	×
59	this.thyPopoverRef.close();
60	}
61
62	showMoreColor(event: Event) {
63	if (!this.customPanelPopoverRef) {	7✔
64	this.customPanelPopoverRef = this.thyPopover.open(ThyColorPickerCustomPanel, {	7✔
65	origin: event.currentTarget as HTMLElement,	2✔
66	offset: -4,	2✔
67	placement: 'rightBottom',	1✔
68	manualClosure: true,
69	width: '260px',	2✔
70	hasBackdrop: false,	2✔
71	viewContainerRef: this.viewContainerRef,	2✔
72	originActiveClass: 'thy-color-picker-active',
73	initialState: {	7✔
74	color: this.color(),
75	pickerColorChange: (value: string) => {
76	this.newColor = value;
77	this.colorChange()(value);	13✔
78	}	13✔
79	}	13✔
80	});
81	}	1✔
82	this.customPanelPopoverRef?.afterClosed().subscribe(() => {
83	if (this.newColor) {
84	const index = this.recentColors.findIndex(item => item === this.newColor);
85	if (index !== -1) {
86	this.recentColors.splice(index, 1);
87	}
88	this.recentColors.unshift(this.newColor);
89	this.recentColors = this.recentColors.slice(0, 10);	1✔
90	localStorage.setItem('recentColors', JSON.stringify(this.recentColors));
91	}
92	this.thyPopoverRef.close();
93	});
94	}
95
96	getIconColor(item: string) {
97	const rgba = new ThyColor(item).rgba;
98	const hsp = 0.299 * rgba.red + 0.587 * rgba.green + 0.114 * rgba.blue;
99	return hsp > 192 ? 'black' : 'white';
100	}
101	}

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