ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
347 lines (342 loc) • 15.6 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, forwardRef, Component, ViewChild, Input, Output, HostBinding, NgModule } from '@angular/core';
import * as i2 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class TextareaItemComponent {
get value() {
return this._value;
}
set value(v) {
if (typeof v === 'undefined' || v === null) {
this._value = '';
}
else {
this._value = v;
}
this.textRef.nativeElement.value = this._value;
this._onChange(this._value);
}
get defaultValue() {
return this._defaultValue;
}
set defaultValue(value) {
this._defaultValue = value;
this._value = this._defaultValue;
this.textRef.nativeElement.value = this._value;
}
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.setCls();
}
get clear() {
return this._clear;
}
set clear(value) {
this._clear = value;
}
get rows() {
return this._rows;
}
set rows(value) {
this._rows = value;
this.setCls();
}
get error() {
return this._error;
}
set error(value) {
this._error = value;
this.setCls();
}
set labelNumber(value) {
this._labelNumber = value;
this.setCls();
}
get count() {
return this._count;
}
set count(value) {
this._count = value;
this.setCls();
this.setCharacterLength();
}
get prefixListCls() {
return this._prefixListCls;
}
set prefixListCls(value) {
this._prefixListCls = value;
this.setCls();
}
set name(value) {
this._name = value;
this.textRef.nativeElement.name = this._name;
}
set autoHeight(value) {
this._autoHeight = value;
}
get title() {
return this._title;
}
set title(value) {
this._title = value;
this.isTitleString = true;
if (typeof value !== 'string') {
this.isTitleString = false;
}
}
set focus(value) {
if (value && value.focus) {
this.textRef.nativeElement.focus();
this.inputFocus('');
}
}
get autoFocus() {
return this._autoFocus;
}
set autoFocus(value) {
this._autoFocus = value;
}
constructor(element, render) {
this.element = element;
this.render = render;
this.prefixCls = 'am-textarea';
this.isTitleString = true;
this.maxLength = Infinity;
this._prefixListCls = 'am-list';
this._defaultValue = '';
this._placeholder = '';
this._editable = true;
this._disabled = false;
this._clear = false;
this._rows = 1;
this._error = false;
this._labelNumber = 5;
this._name = '';
this._focus = false;
this._autoFocus = false;
this._isClear = false;
this._isClickingClear = false;
this.onChange = new EventEmitter();
this.onBlur = new EventEmitter();
this.onFocus = new EventEmitter();
this.onErrorClick = new EventEmitter();
this.clsItem = true;
this._onChange = (_) => { };
this._el = element.nativeElement;
}
setCls() {
this.hasCount = this._count > 0 && this._rows > 1;
this.render.addClass(this._el, this._prefixListCls + '-item');
this.clsSingleLine = this._rows === 1 && !this._autoHeight;
this.clsDisabled = this._disabled;
this.clsError = this._error;
this.clsFocus = this._focus;
this.clsHasCount = this.hasCount;
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 };
this.clearCls = {
[`${this.prefixCls}-clear-active`]: this._isClickingClear
};
}
setCharacterLength() {
this.characterLength = this.countSymbols(this._value);
if (this._count > 0) {
this.maxLength = this._count - this.characterLength + (this._value ? this._value.length : 0);
}
}
inputChange(e) {
this._value = e;
this.textRef.nativeElement.value = this._value;
this.setCharacterLength();
this._onChange(this._value);
this.onChange.emit(this._value);
}
inputFocus(value) {
this._focus = true;
this.setCls();
if (value !== undefined) {
this.onFocus.emit(value);
}
}
inputBlur(value, event) {
setTimeout(() => {
this._focus = false;
this.setCls();
this.onBlur.emit(value);
this._isClear = false;
}, 100);
}
clearInput() {
this._isClickingClear = true;
this.setCls();
setTimeout(() => {
this._value = '';
this.inputChange('');
this.inputFocus(this._value);
this._isClickingClear = false;
this.setCls();
}, 100);
}
errorClick(e) {
if (this.onErrorClick) {
this.onErrorClick.emit(e);
}
}
reAlignHeight() {
const textareaDom = this.textRef.nativeElement;
textareaDom.style.height = '';
textareaDom.style.height = `${textareaDom.scrollHeight}px`;
}
countSymbols(text = '') {
const regexAstralSymbols = /[\uD800-\uDBFF][\uDC00-\uDFFF]|\n/g;
return text.replace(regexAstralSymbols, '_').length;
}
writeValue(value) {
if (typeof value === 'undefined' || value === null) {
this._value = '';
}
else {
this._value = value;
}
this.setCharacterLength();
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
registerOnChange(fn) {
this._onChange = fn;
}
registerOnTouched(fn) { }
ngOnInit() {
this.textRef.nativeElement.value = this._value;
this.setCls();
this.setCharacterLength();
}
ngAfterContentChecked() {
if (this._autoHeight) {
this.reAlignHeight();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TextareaItemComponent, 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: TextareaItemComponent, selector: "TextareaItem , nzm-textarea-item", inputs: { value: "value", defaultValue: "defaultValue", placeholder: "placeholder", editable: "editable", disabled: "disabled", clear: "clear", rows: "rows", error: "error", labelNumber: "labelNumber", count: "count", prefixListCls: "prefixListCls", name: "name", autoHeight: "autoHeight", title: "title", focus: "focus", autoFocus: "autoFocus" }, outputs: { onChange: "onChange", onBlur: "onBlur", onFocus: "onFocus", onErrorClick: "onErrorClick" }, host: { properties: { "class.am-textarea-item": "this.clsItem", "class.am-textarea-disabled": "this.clsDisabled", "class.am-textarea-error": "this.clsError", "class.am-textarea-focus": "this.clsFocus", "class.am-textarea-item-single-line": "this.clsSingleLine", "class.am-textarea-has-count": "this.clsHasCount" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TextareaItemComponent),
multi: true
}
], viewQueries: [{ propertyName: "textRef", first: true, predicate: ["text"], descendants: true, static: true }], ngImport: i0, template: "<div *ngIf=\"title && isTitleString\" [ngClass]=\"labelCls\">{{ title }}</div>\n<div *ngIf=\"title && !isTitleString\" [ngClass]=\"labelCls\">\n <ng-template [ngTemplateOutlet]=\"title\"></ng-template>\n</div>\n<div [ngClass]=\"controlCls\">\n <textarea\n #text\n [rows]=\"rows\"\n [maxlength]=\"maxLength\"\n [(ngModel)]=\"value\"\n [defaultValue]=\"defaultValue\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readOnly]=\"!editable\"\n [autofocus]=\"autoFocus\"\n (ngModelChange)=\"inputChange($event)\"\n (blur)=\"inputBlur(value, $event)\"\n (focus)=\"inputFocus(value)\"\n ></textarea>\n</div>\n<div\n *ngIf=\"clear && editable && !disabled && (value && value.length > 0)\"\n class=\"{{ prefixCls }}-clear\"\n [ngClass]=\"clearCls\"\n (click)=\"clearInput()\"\n></div>\n<div *ngIf=\"error\" class=\"{{ prefixCls }}-error-extra\" (click)=\"errorClick($event)\"></div>\n<span *ngIf=\"hasCount\" class=\"{{ prefixCls }}-count\">\n <span>{{ characterLength }}</span\n >/{{ count }}\n</span>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TextareaItemComponent, decorators: [{
type: Component,
args: [{ selector: 'TextareaItem , nzm-textarea-item', providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TextareaItemComponent),
multi: true
}
], template: "<div *ngIf=\"title && isTitleString\" [ngClass]=\"labelCls\">{{ title }}</div>\n<div *ngIf=\"title && !isTitleString\" [ngClass]=\"labelCls\">\n <ng-template [ngTemplateOutlet]=\"title\"></ng-template>\n</div>\n<div [ngClass]=\"controlCls\">\n <textarea\n #text\n [rows]=\"rows\"\n [maxlength]=\"maxLength\"\n [(ngModel)]=\"value\"\n [defaultValue]=\"defaultValue\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readOnly]=\"!editable\"\n [autofocus]=\"autoFocus\"\n (ngModelChange)=\"inputChange($event)\"\n (blur)=\"inputBlur(value, $event)\"\n (focus)=\"inputFocus(value)\"\n ></textarea>\n</div>\n<div\n *ngIf=\"clear && editable && !disabled && (value && value.length > 0)\"\n class=\"{{ prefixCls }}-clear\"\n [ngClass]=\"clearCls\"\n (click)=\"clearInput()\"\n></div>\n<div *ngIf=\"error\" class=\"{{ prefixCls }}-error-extra\" (click)=\"errorClick($event)\"></div>\n<span *ngIf=\"hasCount\" class=\"{{ prefixCls }}-count\">\n <span>{{ characterLength }}</span\n >/{{ count }}\n</span>\n" }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { textRef: [{
type: ViewChild,
args: ['text', { static: true }]
}], value: [{
type: Input
}], defaultValue: [{
type: Input
}], placeholder: [{
type: Input
}], editable: [{
type: Input
}], disabled: [{
type: Input
}], clear: [{
type: Input
}], rows: [{
type: Input
}], error: [{
type: Input
}], labelNumber: [{
type: Input
}], count: [{
type: Input
}], prefixListCls: [{
type: Input
}], name: [{
type: Input
}], autoHeight: [{
type: Input
}], title: [{
type: Input
}], focus: [{
type: Input
}], autoFocus: [{
type: Input
}], onChange: [{
type: Output
}], onBlur: [{
type: Output
}], onFocus: [{
type: Output
}], onErrorClick: [{
type: Output
}], clsItem: [{
type: HostBinding,
args: ['class.am-textarea-item']
}], clsDisabled: [{
type: HostBinding,
args: ['class.am-textarea-disabled']
}], clsError: [{
type: HostBinding,
args: ['class.am-textarea-error']
}], clsFocus: [{
type: HostBinding,
args: ['class.am-textarea-focus']
}], clsSingleLine: [{
type: HostBinding,
args: ['class.am-textarea-item-single-line']
}], clsHasCount: [{
type: HostBinding,
args: ['class.am-textarea-has-count']
}] } });
class TextareaItemModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TextareaItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: TextareaItemModule, declarations: [TextareaItemComponent], imports: [CommonModule, FormsModule], exports: [TextareaItemComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TextareaItemModule, imports: [CommonModule, FormsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TextareaItemModule, decorators: [{
type: NgModule,
args: [{
exports: [TextareaItemComponent],
declarations: [TextareaItemComponent],
imports: [CommonModule, FormsModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TextareaItemComponent, TextareaItemModule };
//# sourceMappingURL=ng-zorro-antd-mobile-textarea-item.mjs.map