ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
311 lines (306 loc) • 17 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, forwardRef, Component, ViewEncapsulation, ViewChild, Input, Output, NgModule } from '@angular/core';
import { style, state, animate, transition, trigger } from '@angular/animations';
import * as i1 from 'ng-zorro-antd-mobile/locale-provider';
import { LocaleProviderModule } from 'ng-zorro-antd-mobile/locale-provider';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import * as i3 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
class SearchBarComponent {
set defaultValue(value) {
this._defaultValue = value;
this._value = value;
this.inputElementRef.nativeElement.value = this._value;
}
get value() {
return this._value;
}
set value(v) {
this._value = v || '';
this.inputElementRef.nativeElement.value = this._value;
this.setClass();
}
get placeholder() {
return this._placeholder;
}
set placeholder(value) {
this._placeholder = value;
}
get showCancelButton() {
return this._showCancelButton;
}
set showCancelButton(value) {
this._showCancelButton = value;
this.setClass();
}
get cancelText() {
return this._cancelText;
}
set cancelText(value) {
if (value !== undefined) {
this._cancelText = value;
this._isCustomText = true;
}
}
get disabled() {
return this._disabled;
}
set disabled(value) {
this._disabled = value;
}
get maxLength() {
return this._maxLength;
}
set maxLength(value) {
this._maxLength = value;
}
set setFocus(value) {
if (value) {
if (value.focusValue) {
this._focus = true;
this.inputElementRef.nativeElement.focus();
this._blurFromOnClear = true;
this.onSearchbarFocus();
}
else {
this._blurFromOnClear = false;
this.onSearchbarBlur();
}
}
}
constructor(_elementRef, _localeProvider) {
this._elementRef = _elementRef;
this._localeProvider = _localeProvider;
this.prefixCls = 'am-search';
this.cancelCls = {
[`${this.prefixCls}-cancel`]: true
};
this.isComposing = false;
this._defaultValue = '';
this._value = '';
this._placeholder = '';
this._showCancelButton = false;
this._disabled = false;
this._focus = false;
this._isSubmit = false;
this._isCustomText = false;
this._isClearClicking = false;
this._blurFromOnClear = false;
this.locale = {};
this._unsubscribe$ = new Subject();
this.onSubmit = new EventEmitter();
this.onChange = new EventEmitter();
this.onFocus = new EventEmitter();
this.onBlur = new EventEmitter();
this.onCancel = new EventEmitter();
this.onClear = new EventEmitter();
this.onChangeFn = () => { };
this.onTouchFn = () => { };
}
setClass() {
this.wrapCls = {
[`${this.prefixCls}`]: true,
[`${this.prefixCls}-start`]: !!(this._focus || (this._value && this._value.length > 0)) && !this._disabled
};
this.cancelCls = {
[`${this.prefixCls}-cancel`]: true,
[`${this.prefixCls}-cancel-show`]: this._showCancelButton || this._focus || (this._value && this._value.length > 0),
[`${this.prefixCls}-cancel-anim`]: this._focus
};
this.clearCls = {
[`${this.prefixCls}-clear`]: this._value && this._value.length > 0,
[`${this.prefixCls}-clear-show`]: this._value && this._value.length > 0 && !this._isSubmit,
[`${this.prefixCls}-clear-active`]: this._isClearClicking
};
}
setStyle() {
if (this._inputContainerRef.className.indexOf(`${this.prefixCls}-start`) > -1) {
const realWidth = this._syntheticPhContainerRef.getBoundingClientRect().width;
this._syntheticPhRef.style.width = Math.ceil(realWidth) + 'px';
if (!this._showCancelButton) {
this._rightBtnRef.style.marginRight = '0';
}
}
else {
this._syntheticPhRef.style.width = '100%';
if (!this._showCancelButton) {
this._rightBtnInitMarginLeft = window.getComputedStyle(this._rightBtnRef)['margin-left'];
const btnMarginRight = this._rightBtnRef.offsetWidth + parseInt(this._rightBtnInitMarginLeft, 10);
this._rightBtnRef.style.marginRight = '-' + btnMarginRight + 'px';
}
}
}
onSearchbarBlur() {
const self = this;
setTimeout(() => {
if (!self._blurFromOnClear && self._value === '' && self._focus) {
self._focus = false;
self._value = '';
self.onBlur.emit();
self.setClass();
}
self._blurFromOnClear = false;
}, 50);
}
onSearchbarFocus() {
this._focus = true;
this._isSubmit = false;
this.onFocus.emit();
this.setClass();
}
onSearchbarChange(e) {
this._focus = true;
this._value = e;
this.onChange.emit(e);
this.onChangeFn(e);
this.setClass();
}
onSearchSubmit(e) {
e.preventDefault();
this._value = e.target[0].value;
this._isSubmit = true;
this.onSubmit.emit(this._value);
this.setClass();
this._blurFromOnClear = true;
this.inputElementRef.nativeElement.blur();
}
onSearchbarCancel() {
this._focus = false;
this._value = '';
this.onCancel.emit();
this.setClass();
}
onSearchbarClear() {
this._blurFromOnClear = true;
this._isClearClicking = true;
this.onSearchbarChange('');
this.inputElementRef.nativeElement.focus();
this.onClear.emit(this._value);
this.setClass();
setTimeout(() => {
this._value = '';
this._isClearClicking = false;
this._blurFromOnClear = false;
this.setClass();
}, 100);
this.onSearchbarFocus();
}
onSetCompositionState(isComposing) {
this.isComposing = isComposing;
}
writeValue(value) {
this._value = value || '';
this.inputElementRef.nativeElement.value = this._value;
this.setClass();
}
registerOnChange(fn) {
this.onChangeFn = fn;
}
registerOnTouched(fn) {
this.onTouchFn = fn;
}
ngOnInit() {
this.setClass();
this._localeProvider.localeChange.pipe(takeUntil(this._unsubscribe$)).subscribe(_ => {
this.locale = this._localeProvider.getLocaleSubObj('SearchBar');
this._cancelText = this._isCustomText ? this._cancelText : this.locale.cancelText;
});
}
ngAfterViewInit() {
this._syntheticPhContainerRef = this._elementRef.nativeElement.getElementsByClassName(`${this.prefixCls}-synthetic-ph-container`)[0];
this._syntheticPhRef = this._elementRef.nativeElement.getElementsByClassName(`${this.prefixCls}-synthetic-ph`)[0];
this._rightBtnRef = this._elementRef.nativeElement.getElementsByClassName('cancel')[0];
this._inputContainerRef = this._elementRef.nativeElement.getElementsByClassName(`${this.prefixCls}`)[0];
}
ngAfterViewChecked() {
this.setStyle();
}
ngOnDestroy() {
this._unsubscribe$.next();
this._unsubscribe$.complete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SearchBarComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocaleProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SearchBarComponent, selector: "SearchBar, nzm-search-bar", inputs: { defaultValue: "defaultValue", value: "value", placeholder: "placeholder", showCancelButton: "showCancelButton", cancelText: "cancelText", disabled: "disabled", maxLength: "maxLength", setFocus: "setFocus" }, outputs: { onSubmit: "onSubmit", onChange: "onChange", onFocus: "onFocus", onBlur: "onBlur", onCancel: "onCancel", onClear: "onClear" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SearchBarComponent),
multi: true
}
], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["search"], descendants: true, static: true }], ngImport: i0, template: "<form name=\"myForm\" class=\"{{ prefixCls }}\" [ngClass]=\"wrapCls\" action=\"#\" (submit)=\"onSearchSubmit($event)\">\n <div class=\"{{ prefixCls }}-input\">\n <div\n class=\"{{ prefixCls }}-synthetic-ph\"\n style=\"box-sizing:unset\"\n [@cancelButtonState]=\"showCancelButton ? 'visible' : 'hidden'\"\n >\n <span class=\"{{ prefixCls }}-synthetic-ph-container\">\n <i class=\"{{ prefixCls }}-synthetic-ph-icon\"></i>\n <span\n class=\"{{ prefixCls }}-synthetic-ph-placeholder\"\n [ngStyle]=\"{ visibility: placeholder && !isComposing && !value ? 'visible' : 'hidden' }\"\n >\n {{ placeholder }}\n </span>\n </span>\n </div>\n <input\n #search\n class=\"{{ prefixCls }}-value\"\n style=\"outline:none;\"\n [name]=\"'search'\"\n [type]=\"'search'\"\n [disabled]=\"disabled\"\n [maxlength]=\"maxLength\"\n [placeholder]=\"placeholder\"\n [ngModel]=\"value\"\n (blur)=\"onSearchbarBlur()\"\n (focus)=\"onSearchbarFocus()\"\n (ngModelChange)=\"onSearchbarChange($event)\"\n (compositionstart)=\"onSetCompositionState(true)\"\n (compositionend)=\"onSetCompositionState(false)\"\n />\n <a [ngClass]=\"clearCls\" style=\"box-sizing: content-box;transition: 0s\" (click)=\"onSearchbarClear()\"></a>\n </div>\n <div class=\"cancel\" [ngClass]=\"cancelCls\" (click)=\"onSearchbarCancel()\">\n {{ cancelText }}\n </div>\n</form>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], animations: [
trigger('cancelButtonState', [
state('visible', style({ width: '*' })),
state('hidden', style({ width: '100%' })),
transition('visible =>hidden', [animate(300, style({ width: '100%' }))]),
transition('hidden => visible', [animate(300, style({ width: '*' }))])
])
], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SearchBarComponent, decorators: [{
type: Component,
args: [{ selector: 'SearchBar, nzm-search-bar', encapsulation: ViewEncapsulation.None, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SearchBarComponent),
multi: true
}
], animations: [
trigger('cancelButtonState', [
state('visible', style({ width: '*' })),
state('hidden', style({ width: '100%' })),
transition('visible =>hidden', [animate(300, style({ width: '100%' }))]),
transition('hidden => visible', [animate(300, style({ width: '*' }))])
])
], template: "<form name=\"myForm\" class=\"{{ prefixCls }}\" [ngClass]=\"wrapCls\" action=\"#\" (submit)=\"onSearchSubmit($event)\">\n <div class=\"{{ prefixCls }}-input\">\n <div\n class=\"{{ prefixCls }}-synthetic-ph\"\n style=\"box-sizing:unset\"\n [@cancelButtonState]=\"showCancelButton ? 'visible' : 'hidden'\"\n >\n <span class=\"{{ prefixCls }}-synthetic-ph-container\">\n <i class=\"{{ prefixCls }}-synthetic-ph-icon\"></i>\n <span\n class=\"{{ prefixCls }}-synthetic-ph-placeholder\"\n [ngStyle]=\"{ visibility: placeholder && !isComposing && !value ? 'visible' : 'hidden' }\"\n >\n {{ placeholder }}\n </span>\n </span>\n </div>\n <input\n #search\n class=\"{{ prefixCls }}-value\"\n style=\"outline:none;\"\n [name]=\"'search'\"\n [type]=\"'search'\"\n [disabled]=\"disabled\"\n [maxlength]=\"maxLength\"\n [placeholder]=\"placeholder\"\n [ngModel]=\"value\"\n (blur)=\"onSearchbarBlur()\"\n (focus)=\"onSearchbarFocus()\"\n (ngModelChange)=\"onSearchbarChange($event)\"\n (compositionstart)=\"onSetCompositionState(true)\"\n (compositionend)=\"onSetCompositionState(false)\"\n />\n <a [ngClass]=\"clearCls\" style=\"box-sizing: content-box;transition: 0s\" (click)=\"onSearchbarClear()\"></a>\n </div>\n <div class=\"cancel\" [ngClass]=\"cancelCls\" (click)=\"onSearchbarCancel()\">\n {{ cancelText }}\n </div>\n</form>\n" }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.LocaleProviderService }], propDecorators: { inputElementRef: [{
type: ViewChild,
args: ['search', { static: true }]
}], defaultValue: [{
type: Input
}], value: [{
type: Input
}], placeholder: [{
type: Input
}], showCancelButton: [{
type: Input
}], cancelText: [{
type: Input
}], disabled: [{
type: Input
}], maxLength: [{
type: Input
}], setFocus: [{
type: Input
}], onSubmit: [{
type: Output
}], onChange: [{
type: Output
}], onFocus: [{
type: Output
}], onBlur: [{
type: Output
}], onCancel: [{
type: Output
}], onClear: [{
type: Output
}] } });
class SearchBarModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SearchBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: SearchBarModule, declarations: [SearchBarComponent], imports: [CommonModule, FormsModule, LocaleProviderModule], exports: [SearchBarComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SearchBarModule, imports: [CommonModule, FormsModule, LocaleProviderModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SearchBarModule, decorators: [{
type: NgModule,
args: [{
exports: [SearchBarComponent],
declarations: [SearchBarComponent],
imports: [CommonModule, FormsModule, LocaleProviderModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { SearchBarComponent, SearchBarModule };
//# sourceMappingURL=ng-zorro-antd-mobile-search-bar.mjs.map