5fa9630c-19a1-4ee7-af3d-6a0c3535952a

Committed 08 Oct 2024 08:24AM UTC coverage: 90.438% (+0.007%) from 90.431%

Build # 5fa9630c-19a1-4ee7-af3d-6a0c3535952a

Build Type

push

circleci

Committed by

minlovehua

Commit Message

refactor: refactor all control-flow directives to new control-flow #TINFR-381

Run Details

5511 of 6738 branches covered (81.79%)

Branch coverage included in aggregate %.

98 of 104 new or added lines in 58 files covered. (94.23%)

113 existing lines in 17 files now uncovered.

13253 of 14010 relevant lines covered (94.6%)

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

atinc / ngx-tethys / 5fa9630c-19a1-4ee7-af3d-6a0c3535952a

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