d9ae709b-3c27-4b69-b125-b8b80b54f90b

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, 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 { InputBoolean } from 'ngx-tethys/core';
import { ThyIconComponent } from 'ngx-tethys/icon';

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

export class ThyOptionVisibleChangeEvent {
    option: ThyOptionComponent;
}

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

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

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