atinc / ngx-tethys / #88

Committed 11 Aug 2025 06:37AM UTC coverage: 90.32% (+0.01%) from 90.309%

Build # #88

Build Type

push

Committed by

Commit Message

refactor(select): migrate to signal for select #TINFR-1767 (#3514)

Run Details

5535 of 6815 branches covered (81.22%)

Branch coverage included in aggregate %.

57 of 58 new or added lines in 2 files covered. (98.28%)

19 existing lines in 2 files now uncovered.

13863 of 14662 relevant lines covered (94.55%)

902.81 hits per line

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

91.43

/src/select/native-select/native-select.component.ts

import { Component, forwardRef, OnInit, input, viewChild, model, signal } from '@angular/core';
import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { TabIndexDisabledControlValueAccessorMixin } from 'ngx-tethys/core';
import { coerceBooleanProperty, elementMatchClosest } from 'ngx-tethys/util';
import { ElementRef } from '@angular/core';
import { useHostRenderer } from '@tethys/cdk/dom';
import { ThyIcon } from 'ngx-tethys/icon';
import { ThyInputDirective } from 'ngx-tethys/input';
import { SafeAny } from 'ngx-tethys/types';

export type InputSize = 'xs' | 'sm' | 'md' | 'lg' | '';

const noop = () => {};

/**
 * 下拉选择
 * @name thy-native-select
 * @order 20
 */
@Component({
    selector: 'thy-native-select',
    templateUrl: './native-select.component.html',
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => ThyNativeSelect),
            multi: true
        }
    ],
    imports: [ThyInputDirective, FormsModule, ThyIcon],
    host: {
        class: 'thy-select',
        '[attr.tabindex]': 'tabIndex',
        '(focus)': 'onFocus($event)',
        '(blur)': 'onBlur($event)'
    }
})
export class ThyNativeSelect extends TabIndexDisabledControlValueAccessorMixin implements ControlValueAccessor, OnInit {
    readonly selectElement = viewChild<ElementRef<any>>('select');

    readonly innerValue = model<SafeAny>(null);

    readonly disabled = signal<boolean>(false);

    private hostRenderer = useHostRenderer();

    readonly thySize = input<InputSize>();

    readonly name = input<string>();

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

    writeValue(obj: any): void {
        if (obj !== this.innerValue()) {
            this.innerValue.set(obj);
        }
    }

    setDisabledState?(isDisabled: boolean): void {
        this.disabled.set(isDisabled);
    }

    constructor() {
        super();
    }

    ngModelChange() {
        this.onChangeFn(this.innerValue());
        this.onTouchedFn();
    }

    ngOnInit() {
        const size = this.thySize();
        const classes = size ? [`thy-select-${size}`] : [];
        this.hostRenderer.updateClass(classes);
    }

    onBlur(event: FocusEvent) {
        if (elementMatchClosest(event?.relatedTarget as HTMLElement, 'thy-native-select')) {
            return;
        }
        this.onTouchedFn();
    }

    onFocus(event?: Event) {
        this.selectElement().nativeElement.focus();
    }

    clearSelectValue(event: Event) {
        event.stopPropagation();
        this.innerValue.set('');
        this.onChangeFn(this.innerValue());
    }
}

1	import { Component, forwardRef, OnInit, input, viewChild, model, signal } from '@angular/core';
2	import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
3	import { TabIndexDisabledControlValueAccessorMixin } from 'ngx-tethys/core';
4	import { coerceBooleanProperty, elementMatchClosest } from 'ngx-tethys/util';
5	import { ElementRef } from '@angular/core';
6	import { useHostRenderer } from '@tethys/cdk/dom';
7	import { ThyIcon } from 'ngx-tethys/icon';
8	import { ThyInputDirective } from 'ngx-tethys/input';
9	import { SafeAny } from 'ngx-tethys/types';
10
11	export type InputSize = 'xs' \| 'sm' \| 'md' \| 'lg' \| '';	1✔
12
13	const noop = () => {};
14
15	/**
16	* 下拉选择
17	* @name thy-native-select	1✔
18	* @order 20
19	*/	18✔
20	@Component({	9✔
21	selector: 'thy-native-select',
22	templateUrl: './native-select.component.html',
23	providers: [
24	{	19✔
25	provide: NG_VALUE_ACCESSOR,
26	useExisting: forwardRef(() => ThyNativeSelect),
27	multi: true	10✔
28	}	10✔
29	],	10✔
30	imports: [ThyInputDirective, FormsModule, ThyIcon],	10✔
31	host: {	10✔
32	class: 'thy-select',	10✔
33	'[attr.tabindex]': 'tabIndex',	10✔
34	'(focus)': 'onFocus($event)',	10✔
35	'(blur)': 'onBlur($event)'
36	}
UNCOV 37	})	×
UNCOV 38	export class ThyNativeSelect extends TabIndexDisabledControlValueAccessorMixin implements ControlValueAccessor, OnInit {	×
39	readonly selectElement = viewChild<ElementRef<any>>('select');
40
41	readonly innerValue = model<SafeAny>(null);	9✔
42		9!
43	readonly disabled = signal<boolean>(false);	9✔
44
45	private hostRenderer = useHostRenderer();
46		2✔
47	readonly thySize = input<InputSize>();	1✔
48
49	readonly name = input<string>();	1✔
50
51	readonly thyAllowClear = input(false, { transform: coerceBooleanProperty });
52		1✔
53	writeValue(obj: any): void {
54	if (obj !== this.innerValue()) {
55	this.innerValue.set(obj);	1✔
56	}	1✔
57	}	1✔
58
59	setDisabledState?(isDisabled: boolean): void {	1✔
60	this.disabled.set(isDisabled);	1✔
61	}
62
63	constructor() {
64	super();
65	}
66
67	ngModelChange() {
68	this.onChangeFn(this.innerValue());	1✔
69	this.onTouchedFn();
70	}
71
72	ngOnInit() {
73	const size = this.thySize();
74	const classes = size ? [`thy-select-${size}`] : [];
75	this.hostRenderer.updateClass(classes);	10✔
76	}
77
78	onBlur(event: FocusEvent) {
79	if (elementMatchClosest(event?.relatedTarget as HTMLElement, 'thy-native-select')) {
80	return;
81	}
82	this.onTouchedFn();
83	}
84
85	onFocus(event?: Event) {
86	this.selectElement().nativeElement.focus();
87	}
88
89	clearSelectValue(event: Event) {
90	event.stopPropagation();
91	this.innerValue.set('');
92	this.onChangeFn(this.innerValue());
93	}
94	}

atinc / ngx-tethys / #88

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