e62d3b10-1466-49c3-aabd-707148681fc8

Committed 14 Jun 2024 08:24AM UTC coverage: 90.422%. Remained the same

Build # e62d3b10-1466-49c3-aabd-707148681fc8

Build Type

push

circleci

Committed by

minlovehua

Commit Message

feat: use the ngx-tethys/util's coerceBooleanProperty instead of booleanAttribute #INFR-12648

Run Details

5467 of 6692 branches covered (81.69%)

Branch coverage included in aggregate %.

117 of 120 new or added lines in 66 files covered. (97.5%)

183 existing lines in 46 files now uncovered.

13216 of 13970 relevant lines covered (94.6%)

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

atinc / ngx-tethys / e62d3b10-1466-49c3-aabd-707148681fc8

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