ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
787 lines (779 loc) • 39.3 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, ViewEncapsulation, Output, Injectable, Input, HostBinding, TemplateRef, forwardRef, ViewChild, NgModule } from '@angular/core';
import * as i2$1 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { isTemplateRef } from 'ng-zorro-antd-mobile/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i1 from 'ng-zorro-antd-mobile/locale-provider';
import { LocaleProviderService } from 'ng-zorro-antd-mobile/locale-provider';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
class CustomKeyboardComponent {
constructor(_localeProvider) {
this._localeProvider = _localeProvider;
this.prefixCls = 'am-number-keyboard';
this.okText = '';
this._locale = {};
this._unsubscribe$ = new Subject();
this.onClick = new EventEmitter();
}
tdClick(e) {
this.onClick.emit(e);
}
ngOnInit() {
this.wrapCls = {
[`${this.prefixCls}-item`]: true
};
this.wrapperCls = {
[`${this.prefixCls}-wrapper`]: true
};
this._localeProvider.localeChange.pipe(takeUntil(this._unsubscribe$)).subscribe(_ => {
this._locale = this._localeProvider.getLocaleSubObj('InputItem');
this.okText = this._locale.confirmLabel;
});
}
ngOnDestroy() {
this._unsubscribe$.next();
this._unsubscribe$.complete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CustomKeyboardComponent, deps: [{ token: i1.LocaleProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: CustomKeyboardComponent, selector: "CustomKeyboard", outputs: { onClick: "onClick" }, providers: [LocaleProviderService], ngImport: i0, template: "<div [ngClass]=\"wrapperCls\">\n <table>\n <tbody>\n <tr>\n <td [ngClass]=\"wrapCls\" (click)=\"tdClick(1)\">1</td>\n <td [ngClass]=\"wrapCls\" (click)=\"tdClick(2)\">2</td>\n <td [ngClass]=\"wrapCls\" (click)=\"tdClick(3)\">3</td>\n <td class=\"keyboard-delete\" [rowSpan]=\"2\" [ngClass]=\"wrapCls\" (click)=\"tdClick('delete')\"></td>\n </tr>\n <tr>\n <td [ngClass]=\"wrapCls\" (click)=\"tdClick(4)\">4</td>\n <td [ngClass]=\"wrapCls\" (click)=\"tdClick(5)\">5</td>\n <td [ngClass]=\"wrapCls\" (click)=\"tdClick(6)\">6</td>\n </tr>\n <tr>\n <td [ngClass]=\"wrapCls\" (click)=\"tdClick(7)\">7</td>\n <td [ngClass]=\"wrapCls\" (click)=\"tdClick(8)\">8</td>\n <td [ngClass]=\"wrapCls\" (click)=\"tdClick(9)\">9</td>\n <td class=\"keyboard-confirm\" [rowSpan]=\"2\" [ngClass]=\"wrapCls\" (click)=\"tdClick('confirm')\">{{ okText }}</td>\n </tr>\n <tr>\n <td [ngClass]=\"wrapCls\" (click)=\"tdClick('.')\">.</td>\n <td [ngClass]=\"wrapCls\" (click)=\"tdClick(0)\">0</td>\n <td class=\"keyboard-hide\" [ngClass]=\"wrapCls\" (click)=\"tdClick('hide')\"></td>\n </tr>\n </tbody>\n </table>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CustomKeyboardComponent, decorators: [{
type: Component,
args: [{ selector: 'CustomKeyboard', encapsulation: ViewEncapsulation.None, providers: [LocaleProviderService], template: "<div [ngClass]=\"wrapperCls\">\n <table>\n <tbody>\n <tr>\n <td [ngClass]=\"wrapCls\" (click)=\"tdClick(1)\">1</td>\n <td [ngClass]=\"wrapCls\" (click)=\"tdClick(2)\">2</td>\n <td [ngClass]=\"wrapCls\" (click)=\"tdClick(3)\">3</td>\n <td class=\"keyboard-delete\" [rowSpan]=\"2\" [ngClass]=\"wrapCls\" (click)=\"tdClick('delete')\"></td>\n </tr>\n <tr>\n <td [ngClass]=\"wrapCls\" (click)=\"tdClick(4)\">4</td>\n <td [ngClass]=\"wrapCls\" (click)=\"tdClick(5)\">5</td>\n <td [ngClass]=\"wrapCls\" (click)=\"tdClick(6)\">6</td>\n </tr>\n <tr>\n <td [ngClass]=\"wrapCls\" (click)=\"tdClick(7)\">7</td>\n <td [ngClass]=\"wrapCls\" (click)=\"tdClick(8)\">8</td>\n <td [ngClass]=\"wrapCls\" (click)=\"tdClick(9)\">9</td>\n <td class=\"keyboard-confirm\" [rowSpan]=\"2\" [ngClass]=\"wrapCls\" (click)=\"tdClick('confirm')\">{{ okText }}</td>\n </tr>\n <tr>\n <td [ngClass]=\"wrapCls\" (click)=\"tdClick('.')\">.</td>\n <td [ngClass]=\"wrapCls\" (click)=\"tdClick(0)\">0</td>\n <td class=\"keyboard-hide\" [ngClass]=\"wrapCls\" (click)=\"tdClick('hide')\"></td>\n </tr>\n </tbody>\n </table>\n</div>\n" }]
}], ctorParameters: () => [{ type: i1.LocaleProviderService }], propDecorators: { onClick: [{
type: Output
}] } });
class CustomInputService {
static { this.compRef = null; }
static { this.appRef = null; }
static { this.isShow = false; }
static { this.clickValue = null; }
static { this._inputCompFactory = null; }
static { this._keyboardPrefixCls = 'am-number-keyboard'; }
constructor(_appRef, _cfr) {
this._appRef = _appRef;
this._cfr = _cfr;
CustomInputService.appRef = this._appRef;
CustomInputService._inputCompFactory = this._cfr.resolveComponentFactory(CustomKeyboardComponent);
}
static getShowStatus() {
return CustomInputService.isShow;
}
static showKeyboard() {
if (!this.isShow) {
if (this.compRef) {
this.compRef.instance.wrapperCls = {
[`am-number-keyboard-wrapper`]: true
};
}
else {
let container = document.querySelector(`#${this._keyboardPrefixCls}-container`);
if (!container) {
container = document.createElement('div');
container.setAttribute('id', `${this._keyboardPrefixCls}-container`);
document.body.appendChild(container);
container.appendChild(document.createElement(CustomInputService._inputCompFactory.selector));
this.compRef = this.appRef.bootstrap(CustomInputService._inputCompFactory);
this.compRef.instance.onClick.subscribe(e => {
this.clickValue = e;
});
}
}
this.isShow = true;
}
}
static hideKeyboard() {
if (this.compRef && this.isShow) {
this.isShow = false;
this.compRef.instance.wrapperCls = {
[`am-number-keyboard-wrapper`]: true,
[`am-number-keyboard-wrapper-hide`]: true
};
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CustomInputService, deps: [{ token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CustomInputService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CustomInputService, decorators: [{
type: Injectable
}], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.ComponentFactoryResolver }] });
class CustomInputComponent {
get value() {
return this._value;
}
set value(v) {
if (typeof v === 'undefined' || v === null) {
this._value = '';
}
else if (this._maxLength !== undefined && this._maxLength >= 0) {
this._value = v.toString().substr(0, this._maxLength);
}
else {
this._value = v.toString();
}
}
set defaultValue(value) {
this._defaultValue = value;
if (!this._value) {
this._value = this._defaultValue.toString();
}
}
set maxLength(value) {
this._maxLength = value;
}
get placeholder() {
return this._placeholder;
}
set placeholder(value) {
this._placeholder = value;
}
set editable(value) {
this._editable = value;
}
set disabled(value) {
this._disabled = value;
}
get fontColor() {
return this._fontColor;
}
set fontColor(value) {
this._fontColor = value;
}
set moneyKeyboardAlign(value) {
this._moneyKeyboardAlign = value;
this.setContainerCls();
}
set setFocus(value) {
if (value) {
this._setFocus = value.focus;
if (this._setFocus) {
this.inputFocus();
}
}
}
constructor(_ref, _customInputService, _ngZone) {
this._ref = _ref;
this._customInputService = _customInputService;
this._ngZone = _ngZone;
this.keyboardPrefixCls = 'am-number-keyboard';
this.focus = false;
this._value = '';
this._defaultValue = '';
this._placeholder = '';
this._editable = true;
this._disabled = false;
this._setFocus = false;
this.onChange = new EventEmitter();
this.onBlur = new EventEmitter();
this.onFocus = new EventEmitter();
this.clsFakeContainer = true;
this.inputFocus = () => {
this.removeBlurListener();
const focus = this.focus;
if (!focus || this._setFocus) {
this.onInputFocus();
}
setTimeout(() => {
this.addBlurListener();
}, 50);
};
this.doBlur = ev => {
const value = this._value;
// 点击是否是组件本身
let parentFound = false;
// 点击目标是否是custom-input
let isInput = false;
// 点击目标是否是custom-keyboard
let isKeyboard = false;
let isClear = false;
let target = ev.target;
while (target && target !== null && !parentFound) {
if (target === this._ref.nativeElement) {
parentFound = true;
}
if (target.localName === 'custominput') {
isInput = true;
}
if (target.localName === 'customkeyboard') {
isKeyboard = true;
}
if (target.className.indexOf('am-input-clear') >= 0) {
isClear = true;
}
target = target.parentElement;
}
// 当点击目标是本身的时候，获取焦点、不隐藏keyboard
// 当点击目标不是本身但是其他的custom-input时，失去焦点、不隐藏keyboard
// 当点击目标是keyboard时，不失去焦点，不隐藏keyboard
if (parentFound) {
this.focus = true;
}
else if (isInput) {
this._setFocus = false;
this.focus = false;
this.onBlur.emit(this._value);
}
if (this.focus && isKeyboard) {
this.focus = true;
this.onKeyboardClick(CustomInputService.clickValue);
}
if (!parentFound && !isInput && !isKeyboard && !isClear && !this._setFocus) {
this.focus = false;
this._setFocus = false;
this.onBlur.emit(this._value);
CustomInputService.hideKeyboard();
}
this.setFakeInputCls();
};
this.removeBlurListener = () => {
document.removeEventListener('click', this.doBlur, false);
};
this.addBlurListener = () => {
document.addEventListener('click', this.doBlur, false);
};
this.onInputBlur = value => {
this.focus = false;
this.setFakeInputCls();
this.onBlur.emit(this._value);
CustomInputService.hideKeyboard();
};
this.onInputFocus = () => {
this.onFocus.emit(this._value);
this.focus = true;
this._setFocus = false;
this.setFakeInputCls();
setTimeout(() => {
CustomInputService.showKeyboard();
}, 100);
};
this.setFakeInputCls = () => {
this.fakeInputCls = {
[`fake-input`]: true,
['fake-input-disabled']: this._disabled,
['focus']: this.focus
};
};
this.setContainerCls = () => {
this.clsFakeContainerLeft = this._moneyKeyboardAlign === 'left';
};
this.onKeyboardClick = keyboardItemValue => {
// 只允许一个小数点且不能是首位
if (keyboardItemValue === '.' && (this._value.includes('.') || this._value === '')) {
return;
}
let valueAfterChange;
// 删除键
if (keyboardItemValue === 'delete') {
valueAfterChange = this._value.substring(0, this._value.length - 1);
this.onChange.emit(valueAfterChange);
// 确认键
}
else if (keyboardItemValue === 'confirm') {
valueAfterChange = this._value;
this.onChange.emit(valueAfterChange);
this.onInputBlur(this._value);
// 收起键
}
else if (keyboardItemValue === 'hide') {
valueAfterChange = this._value;
this.onInputBlur(valueAfterChange);
}
else {
if (this._maxLength !== undefined &&
+this._maxLength >= 0 &&
(this._value + keyboardItemValue).length > this._maxLength) {
valueAfterChange = (this._value + keyboardItemValue).substr(0, this._maxLength);
this.onChange.emit(valueAfterChange);
}
else {
valueAfterChange = this._value + keyboardItemValue;
this.onChange.emit(valueAfterChange);
}
}
this._ngZone.run(() => {
this._value = valueAfterChange;
});
};
}
onFakeInputClick() {
if (this._preventKeyboard) {
return;
}
this.inputFocus();
}
ngOnInit() {
this._preventKeyboard = this._disabled || !this._editable;
this.setFakeInputCls();
this.setContainerCls();
}
ngOnDestroy() {
this.removeBlurListener();
if (CustomInputService) {
CustomInputService.hideKeyboard();
CustomInputService.compRef = null;
}
const container = document.querySelector(`#${this.keyboardPrefixCls}-container`);
if (container) {
container.remove();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CustomInputComponent, deps: [{ token: i0.ElementRef }, { token: CustomInputService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: CustomInputComponent, selector: "CustomInput", inputs: { value: "value", defaultValue: "defaultValue", maxLength: "maxLength", placeholder: "placeholder", editable: "editable", disabled: "disabled", fontColor: "fontColor", moneyKeyboardAlign: "moneyKeyboardAlign", setFocus: "setFocus" }, outputs: { onChange: "onChange", onBlur: "onBlur", onFocus: "onFocus" }, host: { properties: { "class.fake-input-container": "this.clsFakeContainer", "class.fake-input-container-left": "this.clsFakeContainerLeft" } }, providers: [CustomInputService], ngImport: i0, template: "<div *ngIf=\"value === ''\" class=\"fake-input-placeholder\">\n {{ placeholder }}\n</div>\n<div [ngClass]=\"fakeInputCls\" [style.color]=\"fontColor\" (click)=\"onFakeInputClick()\">\n {{ value }}\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CustomInputComponent, decorators: [{
type: Component,
args: [{ selector: 'CustomInput', encapsulation: ViewEncapsulation.None, providers: [CustomInputService], template: "<div *ngIf=\"value === ''\" class=\"fake-input-placeholder\">\n {{ placeholder }}\n</div>\n<div [ngClass]=\"fakeInputCls\" [style.color]=\"fontColor\" (click)=\"onFakeInputClick()\">\n {{ value }}\n</div>\n" }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: CustomInputService }, { type: i0.NgZone }], propDecorators: { value: [{
type: Input
}], defaultValue: [{
type: Input
}], maxLength: [{
type: Input
}], placeholder: [{
type: Input
}], editable: [{
type: Input
}], disabled: [{
type: Input
}], fontColor: [{
type: Input
}], moneyKeyboardAlign: [{
type: Input
}], setFocus: [{
type: Input
}], onChange: [{
type: Output
}], onBlur: [{
type: Output
}], onFocus: [{
type: Output
}], clsFakeContainer: [{
type: HostBinding,
args: ['class.fake-input-container']
}], clsFakeContainerLeft: [{
type: HostBinding,
args: ['class.fake-input-container-left']
}] } });
class InputItemComponent {
get type() {
return this._type;
}
set type(value) {
if (value && value.length > 0) {
this.inputType = value;
if (value === 'bankCard' || value === 'phone') {
this._type = 'tel';
}
else if (value === 'password') {
this._type = 'password';
}
else if (value === 'digit') {
this._type = 'number';
}
else {
this._type = value;
}
if (value === 'number') {
this._type = 'text';
this.pattern = '[0-9]*';
}
}
}
get value() {
return this._value;
}
set value(v) {
if (typeof v === 'undefined' || v === null) {
this._value = '';
}
else {
this._value = v;
}
}
get defaultValue() {
return this._defaultValue;
}
set defaultValue(value) {
this._defaultValue = value;
if (!this._value) {
this._value = this._defaultValue;
}
}
get placeholder() {
return this._placeholder;
}
set placeholder(value) {
this._placeholder = value;
}
get editable() {
return this._editable;
}
set editable(value) {
this._editable = value;
}
get disabled() {
return this._disabled;
}
set disabled(value) {
this._disabled = value;
this.clsDisabled = value;
}
get clear() {
return this._clear;
}
set clear(value) {
this._clear = value;
}
get maxLength() {
return this._maxLength;
}
set maxLength(value) {
this._maxLength = value;
}
get error() {
return this._error;
}
set error(value) {
this._error = value;
this.clsError = value;
}
get extra() {
return this._extra;
}
set extra(value) {
if (value instanceof TemplateRef) {
this.ngTemplate = true;
}
else {
this.ngTemplate = false;
}
this._extra = value;
}
set labelNumber(value) {
this._labelNumber = value;
this.setCls();
}
set updatePlaceholder(value) {
this._updatePlaceholder = value;
}
get prefixListCls() {
return this._prefixListCls;
}
set prefixListCls(value) {
this._prefixListCls = value;
this.render.addClass(this._el, value + '-item');
this.render.addClass(this._el, value + '-item-middle');
}
get name() {
return this._name;
}
set name(value) {
this._name = value;
}
get moneyKeyboardAlign() {
return this._moneyKeyboardAlign;
}
set moneyKeyboardAlign(value) {
this._moneyKeyboardAlign = value;
}
set locale(value) {
this._locale = value;
}
get fontColor() {
return this._fontColor;
}
set fontColor(value) {
this._fontColor = value;
}
set focus(value) {
if (value && value.focus) {
this.autoFocus = value.focus;
if (this._type === 'money') {
this.setFocus = value;
}
else if (this.inputElementRef) {
this._focus = true;
this.inputElementRef.nativeElement.focus();
this.inputFocus('');
}
}
}
get content() {
return this._content;
}
set content(value) {
this._content = value;
this.setCls();
}
constructor(element, render) {
this.element = element;
this.render = render;
this.prefixCls = 'am-input';
this.setFocus = {};
this.pattern = '';
this.autoFocus = false;
this.inputType = 'text';
this.ngTemplate = false;
this.isTemplateRef = isTemplateRef;
this._type = 'text';
this._defaultValue = '';
this._placeholder = '';
this._editable = true;
this._disabled = false;
this._clear = false;
this._error = false;
this._extra = '';
this._labelNumber = 5;
this._updatePlaceholder = false;
this._prefixListCls = 'am-list';
this._moneyKeyboardAlign = 'right';
this._focus = false;
this._isClear = false;
this._content = '';
this._inputLock = false;
this.compositionFilter = true;
this.onChange = new EventEmitter();
this.onBlur = new EventEmitter();
this.onFocus = new EventEmitter();
this.onErrorClick = new EventEmitter();
this.onExtraClick = new EventEmitter();
this.clsItem = true;
this.clsDisabled = this._disabled;
this.clsError = this._error;
this.clsFocus = this._focus;
this.clsAndroid = this._focus;
this._onChange = (_) => { };
this._el = element.nativeElement;
}
setCls() {
if (this.lableRef.nativeElement.children.length > 0 ||
(this.lableRef.nativeElement && this.lableRef.nativeElement.innerText !== '') ||
this._content != undefined) {
this.labelCls = {
[`${this.prefixCls}-label`]: true,
[`${this.prefixCls}-label-2`]: this._labelNumber === 2,
[`${this.prefixCls}-label-3`]: this._labelNumber === 3,
[`${this.prefixCls}-label-4`]: this._labelNumber === 4,
[`${this.prefixCls}-label-5`]: this._labelNumber === 5,
[`${this.prefixCls}-label-6`]: this._labelNumber === 6,
[`${this.prefixCls}-label-7`]: this._labelNumber === 7
};
}
this.controlCls = { [`${this.prefixCls}-control`]: true };
}
inputChange(inputValue) {
// 'compositionend' is earlier than ngModelChange, Therefore use timer to make ngModelChange runs after 'compositionend' event
setTimeout(() => {
if (this.compositionFilter && this._inputLock && this.inputType === 'text') {
return;
}
let value = inputValue;
switch (this.inputType) {
case 'bankCard':
value = value.replace(/\D/g, '').replace(/(....)(?=.)/g, '$1 ');
break;
case 'phone':
value = value.replace(/\D/g, '').substring(0, 11);
const valueLen = value.length;
if (valueLen > 3 && valueLen < 8) {
value = `${value.substr(0, 3)} ${value.substr(3)}`;
}
else if (valueLen >= 8) {
value = `${value.substr(0, 3)} ${value.substr(3, 4)} ${value.substr(7)}`;
}
break;
case 'number':
value = value.replace(/\D/g, '');
break;
}
if (this.inputType !== 'text') {
this._value = value;
}
this._onChange(this._value);
this.onChange.emit(this._value);
}, 0);
}
compositionStart() {
this._inputLock = true;
}
compositionEnd() {
this._inputLock = false;
}
inputFocus(value) {
if (!this._editable && document.activeElement instanceof HTMLElement) {
document.activeElement.blur();
}
setTimeout(() => {
this._focus = true;
this.clsFocus = true;
this.clsAndroid = true;
}, 100);
this.onFocus.emit(value);
}
inputBlur(value) {
setTimeout(() => {
if (!this._isClear) {
this._focus = false;
this.clsFocus = false;
this.clsAndroid = false;
this.onBlur.emit(value);
}
this._isClear = false;
}, 100);
}
clearInput() {
if (this._type !== 'password' && this._updatePlaceholder) {
this._placeholder = this._value;
}
this._value = '';
this.onChange.emit(this._value);
this._onChange(this._value);
this._isClear = true;
this.inputFocus(this._value);
}
errorClick(e) {
if (this.onErrorClick) {
this.onErrorClick.emit(e);
}
}
extraClick(e) {
if (this.onExtraClick) {
this.onExtraClick.emit(e);
}
}
writeValue(value) {
if (typeof value === undefined || value === null) {
this._value = '';
}
else {
this._value = value;
}
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
registerOnChange(fn) {
this._onChange = fn;
}
registerOnTouched(fn) { }
ngOnInit() {
this.setCls();
this.render.addClass(this._el, this._prefixListCls + '-item');
this.render.addClass(this._el, this._prefixListCls + '-item-middle');
}
ngAfterViewInit() {
setTimeout(() => {
this.setCls();
}, 0);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: InputItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: InputItemComponent, selector: "InputItem, nzm-input-item", inputs: { type: "type", value: "value", defaultValue: "defaultValue", placeholder: "placeholder", editable: "editable", disabled: "disabled", clear: "clear", maxLength: "maxLength", error: "error", extra: "extra", labelNumber: "labelNumber", updatePlaceholder: "updatePlaceholder", prefixListCls: "prefixListCls", name: "name", moneyKeyboardAlign: "moneyKeyboardAlign", locale: "locale", fontColor: "fontColor", focus: "focus", content: "content", compositionFilter: "compositionFilter" }, outputs: { onChange: "onChange", onBlur: "onBlur", onFocus: "onFocus", onErrorClick: "onErrorClick", onExtraClick: "onExtraClick" }, host: { properties: { "class.am-input-item": "this.clsItem", "class.am-input-disabled": "this.clsDisabled", "class.am-input-error": "this.clsError", "class.am-input-focus": "this.clsFocus", "class.am-input-android,": "this.clsAndroid" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => InputItemComponent),
multi: true
}
], viewQueries: [{ propertyName: "lableRef", first: true, predicate: ["lableContent"], descendants: true, static: true }, { propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div class=\"{{ prefixListCls }}-line\">\n <div #lableContent [ngClass]=\"labelCls\">\n <ng-template *ngIf=\"isTemplateRef(content)\" [ngTemplateOutlet]=\"content\"></ng-template>\n <ng-container *ngIf=\"!isTemplateRef(content)\">{{ content }}</ng-container>\n </div>\n <div [ngClass]=\"controlCls\">\n <CustomInput\n *ngIf=\"type === 'money'\"\n [value]=\"value\"\n [defaultValue]=\"defaultValue\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [editable]=\"editable\"\n [fontColor]=\"fontColor\"\n [moneyKeyboardAlign]=\"moneyKeyboardAlign\"\n [setFocus]=\"setFocus\"\n [maxLength]=\"maxLength\"\n (onChange)=\"inputChange($event)\"\n (onBlur)=\"inputBlur(value)\"\n (onFocus)=\"inputFocus(value)\"\n >\n </CustomInput>\n <div *ngIf=\"type !== 'money'\">\n <input\n #inputElement\n style=\"outline:none\"\n [type]=\"type\"\n [name]=\"name\"\n [(ngModel)]=\"value\"\n [defaultValue]=\"defaultValue\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readOnly]=\"!editable\"\n [autofocus]=\"autoFocus\"\n [maxlength]=\"maxLength\"\n [pattern]=\"pattern\"\n [style.color]=\"fontColor\"\n (ngModelChange)=\"inputChange($event)\"\n (compositionstart)=\"compositionStart()\"\n (compositionend)=\"compositionEnd()\"\n (blur)=\"inputBlur(value)\"\n (focus)=\"inputFocus(value)\"\n />\n </div>\n </div>\n <div\n *ngIf=\"clear && editable && !disabled && (value && value.length > 0)\"\n class=\"{{ prefixCls }}-clear\"\n (click)=\"clearInput()\"\n ></div>\n <div *ngIf=\"error\" class=\"{{ prefixCls }}-error-extra\" (click)=\"errorClick($event)\"></div>\n <div *ngIf=\"extra !== ''\" class=\"{{ prefixCls }}-extra\" (click)=\"extraClick($event)\">\n <ng-container *ngIf=\"!ngTemplate\">{{ extra }}</ng-container>\n <ng-template *ngIf=\"ngTemplate\" [ngTemplateOutlet]=\"extra\"></ng-template>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CustomInputComponent, selector: "CustomInput", inputs: ["value", "defaultValue", "maxLength", "placeholder", "editable", "disabled", "fontColor", "moneyKeyboardAlign", "setFocus"], outputs: ["onChange", "onBlur", "onFocus"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: InputItemComponent, decorators: [{
type: Component,
args: [{ selector: 'InputItem, nzm-input-item', providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => InputItemComponent),
multi: true
}
], template: "<div class=\"{{ prefixListCls }}-line\">\n <div #lableContent [ngClass]=\"labelCls\">\n <ng-template *ngIf=\"isTemplateRef(content)\" [ngTemplateOutlet]=\"content\"></ng-template>\n <ng-container *ngIf=\"!isTemplateRef(content)\">{{ content }}</ng-container>\n </div>\n <div [ngClass]=\"controlCls\">\n <CustomInput\n *ngIf=\"type === 'money'\"\n [value]=\"value\"\n [defaultValue]=\"defaultValue\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [editable]=\"editable\"\n [fontColor]=\"fontColor\"\n [moneyKeyboardAlign]=\"moneyKeyboardAlign\"\n [setFocus]=\"setFocus\"\n [maxLength]=\"maxLength\"\n (onChange)=\"inputChange($event)\"\n (onBlur)=\"inputBlur(value)\"\n (onFocus)=\"inputFocus(value)\"\n >\n </CustomInput>\n <div *ngIf=\"type !== 'money'\">\n <input\n #inputElement\n style=\"outline:none\"\n [type]=\"type\"\n [name]=\"name\"\n [(ngModel)]=\"value\"\n [defaultValue]=\"defaultValue\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readOnly]=\"!editable\"\n [autofocus]=\"autoFocus\"\n [maxlength]=\"maxLength\"\n [pattern]=\"pattern\"\n [style.color]=\"fontColor\"\n (ngModelChange)=\"inputChange($event)\"\n (compositionstart)=\"compositionStart()\"\n (compositionend)=\"compositionEnd()\"\n (blur)=\"inputBlur(value)\"\n (focus)=\"inputFocus(value)\"\n />\n </div>\n </div>\n <div\n *ngIf=\"clear && editable && !disabled && (value && value.length > 0)\"\n class=\"{{ prefixCls }}-clear\"\n (click)=\"clearInput()\"\n ></div>\n <div *ngIf=\"error\" class=\"{{ prefixCls }}-error-extra\" (click)=\"errorClick($event)\"></div>\n <div *ngIf=\"extra !== ''\" class=\"{{ prefixCls }}-extra\" (click)=\"extraClick($event)\">\n <ng-container *ngIf=\"!ngTemplate\">{{ extra }}</ng-container>\n <ng-template *ngIf=\"ngTemplate\" [ngTemplateOutlet]=\"extra\"></ng-template>\n </div>\n</div>\n" }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { lableRef: [{
type: ViewChild,
args: ['lableContent', { static: true }]
}], inputElementRef: [{
type: ViewChild,
args: ['inputElement']
}], type: [{
type: Input
}], value: [{
type: Input
}], defaultValue: [{
type: Input
}], placeholder: [{
type: Input
}], editable: [{
type: Input
}], disabled: [{
type: Input
}], clear: [{
type: Input
}], maxLength: [{
type: Input
}], error: [{
type: Input
}], extra: [{
type: Input
}], labelNumber: [{
type: Input
}], updatePlaceholder: [{
type: Input
}], prefixListCls: [{
type: Input
}], name: [{
type: Input
}], moneyKeyboardAlign: [{
type: Input
}], locale: [{
type: Input
}], fontColor: [{
type: Input
}], focus: [{
type: Input
}], content: [{
type: Input
}], compositionFilter: [{
type: Input
}], onChange: [{
type: Output
}], onBlur: [{
type: Output
}], onFocus: [{
type: Output
}], onErrorClick: [{
type: Output
}], onExtraClick: [{
type: Output
}], clsItem: [{
type: HostBinding,
args: ['class.am-input-item']
}], clsDisabled: [{
type: HostBinding,
args: ['class.am-input-disabled']
}], clsError: [{
type: HostBinding,
args: ['class.am-input-error']
}], clsFocus: [{
type: HostBinding,
args: ['class.am-input-focus']
}], clsAndroid: [{
type: HostBinding,
args: ['class.am-input-android,']
}] } });
class InputItemModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: InputItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: InputItemModule, declarations: [InputItemComponent, CustomKeyboardComponent, CustomInputComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule], exports: [InputItemComponent, CustomKeyboardComponent, CustomInputComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: InputItemModule, imports: [CommonModule, FormsModule, ReactiveFormsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: InputItemModule, decorators: [{
type: NgModule,
args: [{
exports: [InputItemComponent, CustomKeyboardComponent, CustomInputComponent],
declarations: [InputItemComponent, CustomKeyboardComponent, CustomInputComponent],
imports: [CommonModule, FormsModule, ReactiveFormsModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { CustomInputComponent, CustomInputService, CustomKeyboardComponent, InputItemComponent, InputItemModule };
//# sourceMappingURL=ng-zorro-antd-mobile-input-item.mjs.map