d9ae709b-3c27-4b69-b125-b8b80b54f90b

import {
    AbstractControlValueAccessor,
    Constructor,
    InputBoolean,
    mixinDisabled,
    mixinInitialized,
    mixinTabIndex,
    ThyCanDisable,
    ThyHasTabIndex,
    ThyInitialized
} from 'ngx-tethys/core';

import { NgIf } from '@angular/common';
import {
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Component,
    ElementRef,
    EventEmitter,
    forwardRef,
    Input,
    OnInit,
    Output,
    ViewChild,
    ViewEncapsulation
} from '@angular/core';
import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { useHostRenderer } from '@tethys/cdk/dom';
import { ThyIconComponent } from 'ngx-tethys/icon';
import { ThyAutofocusDirective } from 'ngx-tethys/shared';
import { ThyInputDirective, ThyInputSize } from './input.directive';

import { elementMatchClosest } from 'ngx-tethys/util';

export type ThyInputSearchTheme = 'default' | 'ellipse' | 'transparent' | '';
export type ThyInputSearchIconPosition = 'before' | 'after';

export const CUSTOM_INPUT_SEARCH_CONTROL_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => ThyInputSearchComponent),
    multi: true
};

const noop = () => {};

const _MixinBase: Constructor<ThyHasTabIndex> &
    Constructor<ThyInitialized> &
    Constructor<ThyCanDisable> &
    typeof AbstractControlValueAccessor = mixinInitialized(mixinTabIndex(mixinDisabled(AbstractControlValueAccessor)));

/**
 * 搜索输入框
 * @name thy-input-search
 * @order 30
 */
@Component({
    selector: 'thy-input-search',
    templateUrl: './input-search.component.html',
    providers: [CUSTOM_INPUT_SEARCH_CONTROL_VALUE_ACCESSOR],
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: {
        class: 'thy-input form-control thy-input-search',
        '[class.thy-input-search-ellipse]': 'thyTheme === "ellipse"',
        '[class.thy-input-search-transparent]': 'thyTheme === "transparent"',
        '[class.thy-input-search-before-with-clear]': 'searchText && iconPosition === "before"',
        '[class.form-control-active]': 'focused',
        '[attr.tabindex]': 'tabIndex',
        '(focus)': 'onFocus($event)',
        '(blur)': 'onBlur($event)'
    },
    standalone: true,
    imports: [NgIf, ThyIconComponent, ThyInputDirective, ThyAutofocusDirective, FormsModule]
})
export class ThyInputSearchComponent extends _MixinBase implements ControlValueAccessor, OnInit {
    @ViewChild('input', { static: true }) inputElement: ElementRef<any>;

    private hostRenderer = useHostRenderer();

    public disabled = false;

    public autoFocus = false;

    public iconPosition: ThyInputSearchIconPosition = 'before';

    searchText: string;

    focused = false;

    /**
     * 搜索框 name 属性
     */
    @Input() name = '';

    /**
     * 搜索框 Placeholder
     */
    @Input() placeholder = '';

    /**
     * 搜索框风格
     * @type 'default' | 'ellipse' | 'transparent'
     * @default default
     */
    @Input() thyTheme: ThyInputSearchTheme;

    /**
     * 是否自动聚焦
     * @default false
     */
    @Input()
    @InputBoolean()
    set thySearchFocus(value: boolean) {
        this.autoFocus = value;
        this.focused = value;
    }

    /**
     * 搜索图标位置，当传入 after 时，搜索图标在输入框后方显示，有内容时显示为关闭按钮
     * @type
     */
    @Input() set thyIconPosition(value: ThyInputSearchIconPosition) {
        this.iconPosition = value || 'before';
        this.updateClasses();
    }

    /**
     * 输入框大小
     * @type 'xs' | 'sm' | 'md' | 'default' | 'lg'
     */
    @Input() thySize: ThyInputSize;

    /**
     * @deprecated please use thyClear
     */
    @Output() clear: EventEmitter<Event> = new EventEmitter<Event>();

    /**
     * 清除搜索事件
     */
    @Output() thyClear: EventEmitter<Event> = new EventEmitter<Event>();

    constructor(private cdr: ChangeDetectorRef, private elementRef: ElementRef) {
        super();
    }

    ngOnInit(): void {
        super.ngOnInit();
        this.updateClasses(true);
    }

    updateClasses(forceUpdate = false) {
        if (this.initialized || forceUpdate) {
            this.hostRenderer.updateClass([`thy-input-search-${this.iconPosition}`]);
        }
    }

    writeValue(value: any): void {
        this.searchText = value;
        this.cdr.markForCheck();
    }

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

    searchModelChange() {
        this.onChangeFn(this.searchText);
    }

    clearSearchText(event: Event) {
        const element = this.elementRef.nativeElement.querySelector('.input-search-control');
        element.focus();
        event.stopPropagation();
        if (this.disabled) {
            return;
        }
        this.searchText = '';
        this.onChangeFn(this.searchText);
        this.clear.emit(event);
        this.thyClear.emit(event);
    }

    onBlur(event?: FocusEvent) {
        this.focused = false;
        // Tab 聚焦后自动聚焦到 input 输入框，此分支下直接返回，无需触发 onTouchedFn
        if (elementMatchClosest(event?.relatedTarget as HTMLElement, 'thy-input-search')) {
            return;
        }
        this.onTouchedFn();
    }

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

1	import {
2	AbstractControlValueAccessor,
3	Constructor,
4	InputBoolean,
5	mixinDisabled,
6	mixinInitialized,
7	mixinTabIndex,
8	ThyCanDisable,
9	ThyHasTabIndex,
10	ThyInitialized
11	} from 'ngx-tethys/core';
12		1✔
13	import { NgIf } from '@angular/common';
14	import {	×
15	ChangeDetectionStrategy,
16	ChangeDetectorRef,
17	Component,	1✔
18	ElementRef,	1✔
19	EventEmitter,
20	forwardRef,
21	Input,
22	OnInit,
23	Output,
24	ViewChild,	1✔
25	ViewEncapsulation
26	} from '@angular/core';	×
27	import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';	×
28	import { useHostRenderer } from '@tethys/cdk/dom';
29	import { ThyIconComponent } from 'ngx-tethys/icon';
30	import { ThyAutofocusDirective } from 'ngx-tethys/shared';	×
31	import { ThyInputDirective, ThyInputSize } from './input.directive';	×
32
33	import { elementMatchClosest } from 'ngx-tethys/util';
34		×
35	export type ThyInputSearchTheme = 'default' \| 'ellipse' \| 'transparent' \| '';	×
36	export type ThyInputSearchIconPosition = 'before' \| 'after';	×
37		×
38	export const CUSTOM_INPUT_SEARCH_CONTROL_VALUE_ACCESSOR: any = {	×
39	provide: NG_VALUE_ACCESSOR,	×
40	useExisting: forwardRef(() => ThyInputSearchComponent),	×
41	multi: true	×
42	};	×
43		×
44	const noop = () => {};	×
45		×
46	const _MixinBase: Constructor<ThyHasTabIndex> &
47	Constructor<ThyInitialized> &
48	Constructor<ThyCanDisable> &	×
49	typeof AbstractControlValueAccessor = mixinInitialized(mixinTabIndex(mixinDisabled(AbstractControlValueAccessor)));	×
50
51	/**	×
52	* 搜索输入框	×
53	* @name thy-input-search	×
54	* @order 30
55	*/
56	@Component({
57	selector: 'thy-input-search',	×
58	templateUrl: './input-search.component.html',	×
59	providers: [CUSTOM_INPUT_SEARCH_CONTROL_VALUE_ACCESSOR],
60	encapsulation: ViewEncapsulation.None,
61	changeDetection: ChangeDetectionStrategy.OnPush,	×
62	host: {
63	class: 'thy-input form-control thy-input-search',
64	'[class.thy-input-search-ellipse]': 'thyTheme === "ellipse"',	×
65	'[class.thy-input-search-transparent]': 'thyTheme === "transparent"',
66	'[class.thy-input-search-before-with-clear]': 'searchText && iconPosition === "before"',
67	'[class.form-control-active]': 'focused',	×
68	'[attr.tabindex]': 'tabIndex',	×
69	'(focus)': 'onFocus($event)',	×
70	'(blur)': 'onBlur($event)'	×
71	},	×
72	standalone: true,
73	imports: [NgIf, ThyIconComponent, ThyInputDirective, ThyAutofocusDirective, FormsModule]	×
74	})	×
75	export class ThyInputSearchComponent extends _MixinBase implements ControlValueAccessor, OnInit {	×
76	@ViewChild('input', { static: true }) inputElement: ElementRef<any>;	×
77
78	private hostRenderer = useHostRenderer();
79		×
80	public disabled = false;
81		×
82	public autoFocus = false;	×
83
84	public iconPosition: ThyInputSearchIconPosition = 'before';	×
85
86	searchText: string;
87		×
88	focused = false;
89		1✔
90	/**
91	* 搜索框 name 属性
92	*/
93	@Input() name = '';	1✔
94
95	/**
96	* 搜索框 Placeholder
97	*/
98	@Input() placeholder = '';
99
100	/**
101	* 搜索框风格
102	* @type 'default' \| 'ellipse' \| 'transparent'
103	* @default default
104	*/
105	@Input() thyTheme: ThyInputSearchTheme;	1✔
106
107	/**
108	* 是否自动聚焦
109	* @default false
110	*/	1✔
111	@Input()
112	@InputBoolean()
113	set thySearchFocus(value: boolean) {
114	this.autoFocus = value;
115	this.focused = value;
116	}
117
118	/**
119	* 搜索图标位置，当传入 after 时，搜索图标在输入框后方显示，有内容时显示为关闭按钮
120	* @type
121	*/
122	@Input() set thyIconPosition(value: ThyInputSearchIconPosition) {
123	this.iconPosition = value \|\| 'before';
124	this.updateClasses();
125	}
126
127	/**
128	* 输入框大小
129	* @type 'xs' \| 'sm' \| 'md' \| 'default' \| 'lg'
130	*/
131	@Input() thySize: ThyInputSize;
132
133	/**
134	* @deprecated please use thyClear
135	*/
136	@Output() clear: EventEmitter<Event> = new EventEmitter<Event>();
137
138	/**
139	* 清除搜索事件
140	*/
141	@Output() thyClear: EventEmitter<Event> = new EventEmitter<Event>();
142
143	constructor(private cdr: ChangeDetectorRef, private elementRef: ElementRef) {
144	super();
145	}
146
147	ngOnInit(): void {
148	super.ngOnInit();
149	this.updateClasses(true);
150	}
151
152	updateClasses(forceUpdate = false) {
153	if (this.initialized \|\| forceUpdate) {
154	this.hostRenderer.updateClass([`thy-input-search-${this.iconPosition}`]);
155	}
156	}
157
158	writeValue(value: any): void {
159	this.searchText = value;
160	this.cdr.markForCheck();
161	}
162
163	setDisabledState?(isDisabled: boolean): void {
164	this.disabled = isDisabled;
165	}
166
167	searchModelChange() {
168	this.onChangeFn(this.searchText);
169	}
170
171	clearSearchText(event: Event) {
172	const element = this.elementRef.nativeElement.querySelector('.input-search-control');
173	element.focus();
174	event.stopPropagation();
175	if (this.disabled) {
176	return;
177	}
178	this.searchText = '';
179	this.onChangeFn(this.searchText);
180	this.clear.emit(event);
181	this.thyClear.emit(event);
182	}
183
184	onBlur(event?: FocusEvent) {
185	this.focused = false;
186	// Tab 聚焦后自动聚焦到 input 输入框，此分支下直接返回，无需触发 onTouchedFn
187	if (elementMatchClosest(event?.relatedTarget as HTMLElement, 'thy-input-search')) {
188	return;
189	}
190	this.onTouchedFn();
191	}
192
193	onFocus(event?: Event) {
194	this.inputElement.nativeElement.focus();
195	}
196	}

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