c0ef8457-a839-451f-8b72-80fd73106231

Committed 02 Apr 2024 02:27PM UTC coverage: 90.524% (-0.06%) from 90.585%

Build # c0ef8457-a839-451f-8b72-80fd73106231

Build Type

Pull #3062

circleci

Committed by

minlovehua

Commit Message

refactor(all): use the transform attribute of @Input() instead of @InputBoolean() and @InputNumber()

Pull Request Pull Request #3062: refactor(all): use the transform attribute of @input() instead of @InputBoolean() and @InputNumber()

Run Details

4987 of 6108 branches covered (81.65%)

Branch coverage included in aggregate %.

217 of 223 new or added lines in 82 files covered. (97.31%)

202 existing lines in 53 files now uncovered.

12246 of 12929 relevant lines covered (94.72%)

1055.59 hits per line

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

89.47

/src/shared/option/option.component.ts

import {
    Component,
    Input,
    TemplateRef,
    ViewChild,
    ChangeDetectionStrategy,
    HostBinding,
    HostListener,
    ElementRef,
    ChangeDetectorRef,
    EventEmitter,
    OnDestroy,
    Output,
    Inject,
    Optional,
    booleanAttribute
} from '@angular/core';
import { Highlightable } from '@angular/cdk/a11y';
import { SelectOptionBase } from './select-option-base';
import { ENTER, SPACE, hasModifierKey } from 'ngx-tethys/util';
import {
    IThyOptionGroupComponent,
    IThyOptionParentComponent,
    THY_OPTION_GROUP_COMPONENT,
    THY_OPTION_PARENT_COMPONENT
} from './option.token';
import { NgIf } from '@angular/common';
import { ThyIcon } from 'ngx-tethys/icon';

export class ThyOptionSelectionChangeEvent {
    constructor(public option: ThyOption, public isUserInput = false) {}
}

export class ThyOptionVisibleChangeEvent {
    option: ThyOption;
}

/**
 * @private
 * @order 20
 */
@Component({
    selector: 'thy-option',
    templateUrl: './option.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    standalone: true,
    imports: [NgIf, ThyIcon]
})
export class ThyOption extends SelectOptionBase implements OnDestroy, Highlightable {
    private _selected = false;
    private _hidden = false;
    private _disabled = false;

    @Input() thyValue: any;

    @Input() thyRawValue: any;

    @Input() thyLabelText: string;

    @Input() thyShowOptionCustom: boolean;

    @Input() thySearchKey: string;

    @HostBinding('class.thy-option-item') _isOptionItem = true;

    @ViewChild(TemplateRef, { static: true }) template: TemplateRef<any>;

    @Input({ transform: booleanAttribute })
    @HostBinding(`class.disabled`)
    set thyDisabled(value: boolean) {
        this._disabled = value;
    }

    get thyDisabled(): boolean {
        return this._disabled;
    }

    get disabled(): boolean {
        return this.hidden || this._disabled;
    }

    @HostBinding('class.hidden')
    get hidden(): boolean {
        return this._hidden;
    }

    @HostBinding('attr.tabindex')
    get tabIndex(): string {
        return this.disabled ? '-1' : '0';
    }

    @HostBinding(`class.active`)
    get selected(): boolean {
        return this._selected;
    }

    @Output() readonly selectionChange: EventEmitter<ThyOptionSelectionChangeEvent> = new EventEmitter();
    @Output() readonly visibleChange: EventEmitter<ThyOptionVisibleChangeEvent> = new EventEmitter();

    constructor(
        public element: ElementRef<HTMLElement>,
        @Optional() @Inject(THY_OPTION_PARENT_COMPONENT) public parent: IThyOptionParentComponent,
        @Optional() @Inject(THY_OPTION_GROUP_COMPONENT) public group: IThyOptionGroupComponent,
        private cdr: ChangeDetectorRef
    ) {
        super();
    }

    getHostElement(): HTMLElement {
        return this.element.nativeElement;
    }

    @HostListener('click', ['$event'])
    onClick(event: Event) {
        this.selectViaInteraction();
    }

    @HostListener('keydown', ['$event'])
    handleKeydown(event: KeyboardEvent): void {
        if ((event.keyCode === ENTER || event.keyCode === SPACE) && !hasModifierKey(event)) {
            this.selectViaInteraction();
            event.preventDefault();
        }
    }

    selectViaInteraction(): void {
        if (!this.disabled) {
            this._selected = this.parent.isMultiple ? !this._selected : true;
            this.cdr.markForCheck();
            this.emitSelectionChangeEvent(true);
        }
    }

    select(event?: Event): void {
        if (!this.disabled) {
            if (!this._selected) {
                this._selected = true;
                this.emitSelectionChangeEvent();
                this.cdr.markForCheck();
            }
        }
    }

    deselect(): void {
        if (this._selected || this.disabled) {
            this._selected = false;
            this.emitSelectionChangeEvent();
            this.cdr.markForCheck();
        }
    }

    hideOption() {
        if (!this._hidden) {
            this._hidden = true;
            this.visibleChange.emit({ option: this });
            this.cdr.markForCheck();
        }
    }

    showOption() {
        if (this._hidden) {
            this._hidden = false;
            this.visibleChange.emit({ option: this });
            this.cdr.markForCheck();
        }
    }

    matchSearchText(searchText: string): boolean {
        if (this.thySearchKey) {
            if (this.thySearchKey.toLowerCase().indexOf(searchText.toLowerCase()) >= 0) {
                return true;
            } else {
                return false;
            }
        } else {
            if (this.thyLabelText.toLowerCase().indexOf(searchText.toLowerCase()) >= 0) {
                return true;
            } else {
                return false;
            }
        }
    }

    setActiveStyles(): void {
        this.getHostElement().classList.add('hover');
        this.cdr.markForCheck();
    }

    setInactiveStyles(): void {
        this.getHostElement().classList.remove('hover');
        this.cdr.markForCheck();
    }

    getLabel(): string {
        return '';
    }

    private emitSelectionChangeEvent(isUserInput = false): void {
        this.selectionChange.emit(new ThyOptionSelectionChangeEvent(this, isUserInput));
    }

    ngOnDestroy() {}
}

1	import {
2	Component,
3	Input,
4	TemplateRef,
5	ViewChild,
6	ChangeDetectionStrategy,
7	HostBinding,
8	HostListener,
9	ElementRef,
10	ChangeDetectorRef,	×
11	EventEmitter,	116✔
12	OnDestroy,	116✔
13	Output,
14	Inject,
15	Optional,
16	booleanAttribute
17	} from '@angular/core';
18	import { Highlightable } from '@angular/cdk/a11y';
19	import { SelectOptionBase } from './select-option-base';
20	import { ENTER, SPACE, hasModifierKey } from 'ngx-tethys/util';
21	import {	1✔
22	IThyOptionGroupComponent,
23	IThyOptionParentComponent,	581✔
24	THY_OPTION_GROUP_COMPONENT,
25	THY_OPTION_PARENT_COMPONENT
26	} from './option.token';	4,714✔
27	import { NgIf } from '@angular/common';
28	import { ThyIcon } from 'ngx-tethys/icon';
29		4,961✔
30	export class ThyOptionSelectionChangeEvent {
31	constructor(public option: ThyOption, public isUserInput = false) {}
32	}	9,939✔
33
34	export class ThyOptionVisibleChangeEvent {
35	option: ThyOption;	4,714✔
36	}
37
38	/**	4,894✔
39	* @private
40	* @order 20
41	*/	950✔
42	@Component({	950✔
43	selector: 'thy-option',	950✔
44	templateUrl: './option.component.html',	950✔
45	changeDetection: ChangeDetectionStrategy.OnPush,	950✔
46	standalone: true,	950✔
47	imports: [NgIf, ThyIcon]	950✔
48	})	950✔
49	export class ThyOption extends SelectOptionBase implements OnDestroy, Highlightable {	950✔
50	private _selected = false;	950✔
51	private _hidden = false;	950✔
52	private _disabled = false;
53
54	@Input() thyValue: any;	165✔
55
56	@Input() thyRawValue: any;
57		28✔
58	@Input() thyLabelText: string;
59
UNCOV 60	@Input() thyShowOptionCustom: boolean;	×
61		×
62	@Input() thySearchKey: string;	×
63
64	@HostBinding('class.thy-option-item') _isOptionItem = true;
65
66	@ViewChild(TemplateRef, { static: true }) template: TemplateRef<any>;	37✔
67		36✔
68	@Input({ transform: booleanAttribute })	36✔
69	@HostBinding(`class.disabled`)	36✔
70	set thyDisabled(value: boolean) {
71	this._disabled = value;
72	}
73		91✔
74	get thyDisabled(): boolean {	89✔
75	return this._disabled;	47✔
76	}	47✔
77		47✔
78	get disabled(): boolean {
79	return this.hidden \|\| this._disabled;
80	}
81
82	@HostBinding('class.hidden')	35✔
83	get hidden(): boolean {	30✔
84	return this._hidden;	30✔
85	}	30✔
86
87	@HostBinding('attr.tabindex')
88	get tabIndex(): string {
89	return this.disabled ? '-1' : '0';	40✔
90	}	34✔
91		34✔
92	@HostBinding(`class.active`)	34✔
93	get selected(): boolean {
94	return this._selected;
95	}
96		12✔
97	@Output() readonly selectionChange: EventEmitter<ThyOptionSelectionChangeEvent> = new EventEmitter();	7✔
98	@Output() readonly visibleChange: EventEmitter<ThyOptionVisibleChangeEvent> = new EventEmitter();	7✔
99		7✔
100	constructor(
101	public element: ElementRef<HTMLElement>,
102	@Optional() @Inject(THY_OPTION_PARENT_COMPONENT) public parent: IThyOptionParentComponent,
103	@Optional() @Inject(THY_OPTION_GROUP_COMPONENT) public group: IThyOptionGroupComponent,	52✔
104	private cdr: ChangeDetectorRef	8✔
105	) {	1✔
106	super();
107	}
108		7✔
109	getHostElement(): HTMLElement {
110	return this.element.nativeElement;
111	}
112		44✔
113	@HostListener('click', ['$event'])	11✔
114	onClick(event: Event) {
115	this.selectViaInteraction();
116	}	33✔
117
118	@HostListener('keydown', ['$event'])
119	handleKeydown(event: KeyboardEvent): void {
120	if ((event.keyCode === ENTER \|\| event.keyCode === SPACE) && !hasModifierKey(event)) {
121	this.selectViaInteraction();	117✔
122	event.preventDefault();	117✔
123	}
124	}
125		48✔
126	selectViaInteraction(): void {	48✔
127	if (!this.disabled) {
128	this._selected = this.parent.isMultiple ? !this._selected : true;
129	this.cdr.markForCheck();	×
130	this.emitSelectionChangeEvent(true);
131	}	77✔
132	}	113✔
133
134	select(event?: Event): void {
135	if (!this.disabled) {	1✔
136	if (!this._selected) {
137	this._selected = true;
138	this.emitSelectionChangeEvent();
139	this.cdr.markForCheck();
140	}
141	}	1✔
142	}
143
144	deselect(): void {
145	if (this._selected \|\| this.disabled) {
146	this._selected = false;
147	this.emitSelectionChangeEvent();
148	this.cdr.markForCheck();
149	}
150	}
151
152	hideOption() {
153	if (!this._hidden) {
154	this._hidden = true;
155	this.visibleChange.emit({ option: this });
156	this.cdr.markForCheck();
157	}
158	}
159		1✔
160	showOption() {
161	if (this._hidden) {
162	this._hidden = false;
163	this.visibleChange.emit({ option: this });
164	this.cdr.markForCheck();
165	}
166	}
167
168	matchSearchText(searchText: string): boolean {
169	if (this.thySearchKey) {
170	if (this.thySearchKey.toLowerCase().indexOf(searchText.toLowerCase()) >= 0) {
171	return true;
172	} else {
173	return false;
174	}
175	} else {
176	if (this.thyLabelText.toLowerCase().indexOf(searchText.toLowerCase()) >= 0) {
177	return true;
178	} else {
179	return false;
180	}
181	}
182	}
183
184	setActiveStyles(): void {
185	this.getHostElement().classList.add('hover');
186	this.cdr.markForCheck();
187	}
188
189	setInactiveStyles(): void {
190	this.getHostElement().classList.remove('hover');
191	this.cdr.markForCheck();
192	}
193
194	getLabel(): string {
195	return '';
196	}
197
198	private emitSelectionChangeEvent(isUserInput = false): void {
199	this.selectionChange.emit(new ThyOptionSelectionChangeEvent(this, isUserInput));
200	}
201
202	ngOnDestroy() {}
203	}

atinc / ngx-tethys / c0ef8457-a839-451f-8b72-80fd73106231

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