ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
609 lines (601 loc) • 42.1 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, TemplateRef, forwardRef, Component, ViewEncapsulation, Input, Output, HostListener, Injector, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i4 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i3 from 'ng-zorro-antd-mobile/button';
import { ButtonModule } from 'ng-zorro-antd-mobile/button';
import { PopupService } from 'ng-zorro-antd-mobile/core';
import { ListModule } from 'ng-zorro-antd-mobile/list';
import { WingBlankModule } from 'ng-zorro-antd-mobile/wing-blank';
import { WhiteSpaceModule } from 'ng-zorro-antd-mobile/white-space';
import { InputItemModule } from 'ng-zorro-antd-mobile/input-item';
import { OverlayModule } from '@angular/cdk/overlay';
class ModalBaseOptions {
constructor() {
this.visible = false;
this.focus = true;
this.prefixCls = 'am-modal';
this.animated = true;
this.closable = false;
this.maskClosable = true;
this.transparent = false;
this.popup = false;
this.animationType = 'slide-down';
this.footer = [];
this.platform = 'ios';
this.defaultValue = [];
this.placeholders = [];
this.transitionName = 'am-zoom';
this.maskTransitionName = 'am-fade';
}
}
class ModalServiceCustomOptions {
constructor() {
this.maskClosable = false;
}
}
class ModalOptions extends ModalBaseOptions {
constructor() {
super(...arguments);
this.transitionName = 'am-fade';
this.maskTransitionName = 'am-fade';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ModalOptions, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ModalOptions }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ModalOptions, decorators: [{
type: Injectable
}] });
class Action {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: Action, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: Action }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: Action, decorators: [{
type: Injectable
}] });
class ModalRef {
}
class ModalComponent extends ModalRef {
set title(value) {
this.option.title = value;
}
set closable(value) {
this.option.closable = value;
}
set maskClosable(value) {
this.option.maskClosable = value;
}
set popup(value) {
this.option.popup = value;
this.setClassMap();
}
set animationType(value) {
this.option.animationType = value;
this.setClassMap();
}
set transparent(value) {
this.option.transparent = value;
this.setClassMap();
}
set footer(value) {
this.option.footer = value;
}
set platform(value) {
this.option.platform = value;
this.setClassMap();
}
set className(value) {
this.option.className = value;
this.setClassMap();
}
set wrapClassName(value) {
this.option.wrapClassName = value;
this.setClassMap();
}
set actions(value) {
this.option.footer = value;
this.setClassMap();
}
set defaultValue(value) {
this.option.defaultValue = value !== undefined ? value : ['', ''];
}
set type(value) {
this.option.type = value;
}
set placeholders(value) {
this.option.placeholders = value;
}
set operation(value) {
this.option.operation = value;
this.setClassMap();
}
panend(event) {
if (this.option.closable || this.option.maskClosable) {
if ((event && event.target && event.target.getAttribute('role') === 'dialog') ||
event.target.getAttribute('role') === 'close') {
event.preventDefault();
event.stopPropagation();
if (this.option.close) {
this.option.close();
}
else {
this.onClose.emit();
this.leaveAnimation();
}
}
}
}
constructor(option, elementRef) {
super();
this.option = option;
this.elementRef = elementRef;
this.autoFocus = { focus: true, date: new Date() };
this.transitionName = '';
this.maskTransitionName = '';
this.wrapCls = {};
this.cls = {};
this.btnGroupClass = {};
this.data = {
text: '',
password: ''
};
this.onClose = new EventEmitter();
this.afterOpenEmitter = new EventEmitter();
this.afterCloseEmitter = new EventEmitter();
}
isTemplateRef(value) {
return value instanceof TemplateRef;
}
isNoTitle(value) {
return value === '' || value === null || value === undefined;
}
setTransitionName(visible) {
if (!visible) {
this.leaveAnimation();
}
else {
if (this.option.animated) {
if (this.option.transparent) {
if (this.setActiveName(this.option.transitionName)) {
this.transitionName = this.setActiveName(this.option.transitionName);
this.maskTransitionName = this.setActiveName(this.option.maskTransitionName);
}
else {
this.transitionName = this.maskTransitionName = this.setActiveName('am-fade');
}
}
else {
if (this.setActiveName(this.option.transitionName)) {
this.transitionName = this.setActiveName(this.option.transitionName);
this.maskTransitionName = this.setActiveName(this.option.maskTransitionName);
}
else {
this.transitionName = this.maskTransitionName = this.setActiveName('am-slide-up');
}
}
if (this.option.popup) {
this.transitionName =
this.option.animationType === 'slide-up'
? this.setActiveName('am-slide-up')
: this.setActiveName('am-slide-down');
this.maskTransitionName = this.setActiveName('am-fade');
}
}
this.setClassMap();
}
}
setActiveName(name) {
return name.length > 0 ? `${name}-enter ${name}-enter-active` : null;
}
setLeaveActiveName(name) {
return name.length > 0 ? `${name}-leave ${name}-leave-active` : null;
}
setClassMap() {
this.wrapCls = {
[this.option.wrapClassName]: true,
[`${this.option.prefixCls}-wrap-popup`]: this.option.popup
};
this.cls = {
[this.option.className]: true,
[`${this.option.prefixCls}-transparent`]: this.option.transparent,
[`${this.option.prefixCls}-popup`]: this.option.popup,
[`${this.option.prefixCls}-popup-${this.option.animationType}`]: this.option.popup && this.option.animationType,
[`${this.option.prefixCls}-android`]: this.option.platform === 'android'
};
this.btnGroupClass = {
[`${this.option.prefixCls}-button-group-${this.option.footer.length === 2 && !this.option.operation ? 'h' : 'v'}`]: true,
[`${this.option.prefixCls}-button-group-${this.option.operation ? 'operation' : 'normal'}`]: true
};
}
inputChange(type, value) {
this.data[type] = value;
}
leaveAnimation() {
if (this.option.animated) {
if (this.option.transparent) {
if (this.setLeaveActiveName(this.option.transitionName)) {
this.transitionName = this.setLeaveActiveName(this.option.transitionName);
this.maskTransitionName = this.setLeaveActiveName(this.option.maskTransitionName);
}
else {
this.transitionName = this.maskTransitionName = this.setLeaveActiveName('am-fade');
}
}
else {
if (this.setLeaveActiveName(this.option.transitionName)) {
this.transitionName = this.setLeaveActiveName(this.option.transitionName);
this.maskTransitionName = this.setLeaveActiveName(this.option.maskTransitionName);
}
else {
this.transitionName = this.maskTransitionName = this.setLeaveActiveName('am-slide-up');
}
}
if (this.option.popup) {
this.transitionName =
this.option.animationType === 'slide-up'
? this.setLeaveActiveName('am-slide-up')
: this.setLeaveActiveName('am-slide-down');
this.maskTransitionName = this.setLeaveActiveName('am-fade');
}
}
setTimeout(() => {
this.option.visible = false;
if (this.onChanged) {
this.onChanged(this.option.visible);
}
}, 200);
}
writeValue(value) {
if (value) {
this.option.visible = value;
}
this.setTransitionName(value);
}
registerOnChange(fn) {
this.onChanged = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
get afterOpen() {
return this.afterOpenEmitter.asObservable();
}
get afterClose() {
return this.afterCloseEmitter.asObservable();
}
getInstance() {
return this;
}
getElement() {
return this.elementRef && this.elementRef.nativeElement;
}
close() {
if (this.option.closeWithAnimation) {
this.option.closeWithAnimation();
}
else {
this.onClose.emit();
this.leaveAnimation();
}
}
triggerOk() {
if (this.option.footer.length > 1) {
const button = this.option.footer[1];
button.onPress();
}
}
triggerCancel() {
if (this.option.footer.length > 0) {
const button = this.option.footer[0];
button.onPress();
}
}
destroy() {
this.close();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ModalComponent, deps: [{ token: ModalOptions }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ModalComponent, selector: "Modal", inputs: { title: "title", closable: "closable", maskClosable: "maskClosable", popup: "popup", animationType: "animationType", transparent: "transparent", footer: "footer", platform: "platform", className: "className", wrapClassName: "wrapClassName", actions: "actions", defaultValue: "defaultValue", type: "type", placeholders: "placeholders", operation: "operation" }, outputs: { onClose: "onClose", afterOpenEmitter: "afterOpenEmitter", afterCloseEmitter: "afterCloseEmitter" }, host: { listeners: { "mouseup": "panend($event)", "touchend": "panend($event)" } }, providers: [
ModalOptions,
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ModalComponent),
multi: true
}
], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"option.visible\">\n <div class=\"{{ option.prefixCls }}-mask {{ maskTransitionName }}\"></div>\n <div role=\"dialog\" class=\"{{ option.prefixCls }}-wrap {{ transitionName }}\" [ngClass]=\"wrapCls\">\n <div role=\"document\" class=\"{{ option.prefixCls }}\" [ngClass]=\"cls\">\n <div class=\"{{ option.prefixCls }}-content\">\n <div *ngIf=\"option.closable\" style=\"width: 100%; height: 21px;\">\n <div role=\"close\" class=\"{{ option.prefixCls }}-close\">\n <span role=\"close\" class=\"{{ option.prefixCls }}-close-x\"></span>\n </div>\n </div>\n <div *ngIf=\"!isNoTitle(option.title)\" class=\"{{ option.prefixCls }}-header\">\n <div *ngIf=\"!isTemplateRef(option.title)\" class=\"{{ option.prefixCls }}-title\">{{ option.title }}</div>\n <ng-template *ngIf=\"isTemplateRef(option.title)\" [ngTemplateOutlet]=\"option.title\"></ng-template>\n </div>\n <div class=\"{{ option.prefixCls }}-body\">\n <ng-content></ng-content>\n <div *ngIf=\"!isTemplateRef(option.message)\" class=\"{{ option.prefixCls }}-alert-content\">\n {{ option.message }}\n </div>\n <ng-template *ngIf=\"isTemplateRef(option.message)\" [ngTemplateOutlet]=\"option.message\"></ng-template>\n <ng-template *ngIf=\"option.type === 'default'\" [ngTemplateOutlet]=\"promptDefault\"></ng-template>\n <ng-template *ngIf=\"option.type === 'secure-text'\" [ngTemplateOutlet]=\"promptSecure\"></ng-template>\n <ng-template *ngIf=\"option.type === 'login-password'\" [ngTemplateOutlet]=\"promptPassword\"></ng-template>\n </div>\n <div class=\"{{ option.prefixCls }}-footer\">\n <div [ngClass]=\"btnGroupClass\" role=\"group\">\n <div\n Button\n role=\"button\"\n *ngFor=\"let button of option.footer\"\n [className]=\"'am-modal-button'\"\n [ngStyle]=\"button.style\"\n (onClick)=\"button.onPress()\"\n >\n {{ button.text }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #promptPassword>\n <div class=\"{{ option.prefixCls }}-input-container\">\n <div class=\"{{ option.prefixCls }}-input\">\n <input\n #inputElement\n autofocus\n [type]=\"'text'\"\n [placeholder]=\"option.placeholders[0] || ''\"\n [(ngModel)]=\"option.defaultValue[0]\"\n (ngModelChange)=\"inputChange('text', $event)\"\n />\n </div>\n <div className=\"{{ option.prefixCls }}-input\">\n <input\n #inputElement\n [type]=\"'password'\"\n [placeholder]=\"option.placeholders[1] || ''\"\n [(ngModel)]=\"option.defaultValue[1]\"\n (ngModelChange)=\"inputChange('password', $event)\"\n />\n </div>\n </div>\n</ng-template>\n<ng-template #promptSecure>\n <div className=\"{{ option.prefixCls }}-input-container\">\n <div className=\"{{ option.prefixCls }}-input\">\n <input\n #inputElement\n autofocus\n [type]=\"'password'\"\n [placeholder]=\"option.placeholders[0] || ''\"\n [(ngModel)]=\"option.defaultValue[0]\"\n (ngModelChange)=\"inputChange('password', $event)\"\n />\n </div>\n </div>\n</ng-template>\n<ng-template #promptDefault>\n <div className=\"{{ option.prefixCls }}-input-container\">\n <div className=\"{{ option.prefixCls }}-input\">\n <input\n #inputElement\n autofocus\n [type]=\"'text'\"\n [placeholder]=\"option.placeholders[0] || ''\"\n [(ngModel)]=\"option.defaultValue[0]\"\n (ngModelChange)=\"inputChange('text', $event)\"\n />\n </div>\n </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.ButtonComponent, selector: "[Button], nzm-button", inputs: ["type", "size", "disabled", "loading", "inline", "icon", "className"], outputs: ["onClick"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ModalComponent, decorators: [{
type: Component,
args: [{ selector: 'Modal', encapsulation: ViewEncapsulation.None, providers: [
ModalOptions,
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ModalComponent),
multi: true
}
], template: "<div *ngIf=\"option.visible\">\n <div class=\"{{ option.prefixCls }}-mask {{ maskTransitionName }}\"></div>\n <div role=\"dialog\" class=\"{{ option.prefixCls }}-wrap {{ transitionName }}\" [ngClass]=\"wrapCls\">\n <div role=\"document\" class=\"{{ option.prefixCls }}\" [ngClass]=\"cls\">\n <div class=\"{{ option.prefixCls }}-content\">\n <div *ngIf=\"option.closable\" style=\"width: 100%; height: 21px;\">\n <div role=\"close\" class=\"{{ option.prefixCls }}-close\">\n <span role=\"close\" class=\"{{ option.prefixCls }}-close-x\"></span>\n </div>\n </div>\n <div *ngIf=\"!isNoTitle(option.title)\" class=\"{{ option.prefixCls }}-header\">\n <div *ngIf=\"!isTemplateRef(option.title)\" class=\"{{ option.prefixCls }}-title\">{{ option.title }}</div>\n <ng-template *ngIf=\"isTemplateRef(option.title)\" [ngTemplateOutlet]=\"option.title\"></ng-template>\n </div>\n <div class=\"{{ option.prefixCls }}-body\">\n <ng-content></ng-content>\n <div *ngIf=\"!isTemplateRef(option.message)\" class=\"{{ option.prefixCls }}-alert-content\">\n {{ option.message }}\n </div>\n <ng-template *ngIf=\"isTemplateRef(option.message)\" [ngTemplateOutlet]=\"option.message\"></ng-template>\n <ng-template *ngIf=\"option.type === 'default'\" [ngTemplateOutlet]=\"promptDefault\"></ng-template>\n <ng-template *ngIf=\"option.type === 'secure-text'\" [ngTemplateOutlet]=\"promptSecure\"></ng-template>\n <ng-template *ngIf=\"option.type === 'login-password'\" [ngTemplateOutlet]=\"promptPassword\"></ng-template>\n </div>\n <div class=\"{{ option.prefixCls }}-footer\">\n <div [ngClass]=\"btnGroupClass\" role=\"group\">\n <div\n Button\n role=\"button\"\n *ngFor=\"let button of option.footer\"\n [className]=\"'am-modal-button'\"\n [ngStyle]=\"button.style\"\n (onClick)=\"button.onPress()\"\n >\n {{ button.text }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #promptPassword>\n <div class=\"{{ option.prefixCls }}-input-container\">\n <div class=\"{{ option.prefixCls }}-input\">\n <input\n #inputElement\n autofocus\n [type]=\"'text'\"\n [placeholder]=\"option.placeholders[0] || ''\"\n [(ngModel)]=\"option.defaultValue[0]\"\n (ngModelChange)=\"inputChange('text', $event)\"\n />\n </div>\n <div className=\"{{ option.prefixCls }}-input\">\n <input\n #inputElement\n [type]=\"'password'\"\n [placeholder]=\"option.placeholders[1] || ''\"\n [(ngModel)]=\"option.defaultValue[1]\"\n (ngModelChange)=\"inputChange('password', $event)\"\n />\n </div>\n </div>\n</ng-template>\n<ng-template #promptSecure>\n <div className=\"{{ option.prefixCls }}-input-container\">\n <div className=\"{{ option.prefixCls }}-input\">\n <input\n #inputElement\n autofocus\n [type]=\"'password'\"\n [placeholder]=\"option.placeholders[0] || ''\"\n [(ngModel)]=\"option.defaultValue[0]\"\n (ngModelChange)=\"inputChange('password', $event)\"\n />\n </div>\n </div>\n</ng-template>\n<ng-template #promptDefault>\n <div className=\"{{ option.prefixCls }}-input-container\">\n <div className=\"{{ option.prefixCls }}-input\">\n <input\n #inputElement\n autofocus\n [type]=\"'text'\"\n [placeholder]=\"option.placeholders[0] || ''\"\n [(ngModel)]=\"option.defaultValue[0]\"\n (ngModelChange)=\"inputChange('text', $event)\"\n />\n </div>\n </div>\n</ng-template>\n" }]
}], ctorParameters: () => [{ type: ModalOptions }, { type: i0.ElementRef }], propDecorators: { title: [{
type: Input
}], closable: [{
type: Input
}], maskClosable: [{
type: Input
}], popup: [{
type: Input
}], animationType: [{
type: Input
}], transparent: [{
type: Input
}], footer: [{
type: Input
}], platform: [{
type: Input
}], className: [{
type: Input
}], wrapClassName: [{
type: Input
}], actions: [{
type: Input
}], defaultValue: [{
type: Input
}], type: [{
type: Input
}], placeholders: [{
type: Input
}], operation: [{
type: Input
}], onClose: [{
type: Output
}], afterOpenEmitter: [{
type: Output
}], afterCloseEmitter: [{
type: Output
}], panend: [{
type: HostListener,
args: ['mouseup', ['$event']]
}, {
type: HostListener,
args: ['touchend', ['$event']]
}] } });
class ModalServiceComponent extends ModalComponent {
constructor(option, elementRef) {
super(option, elementRef);
this.option = option;
this.elementRef = elementRef;
this.setTransitionName(this.option.visible);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ModalServiceComponent, deps: [{ token: ModalOptions }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ModalServiceComponent, selector: "ModalService", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"option.visible\">\n <div class=\"{{ option.prefixCls }}-mask {{ maskTransitionName }}\"></div>\n <div role=\"dialog\" class=\"{{ option.prefixCls }}-wrap {{ transitionName }}\" [ngClass]=\"wrapCls\">\n <div role=\"document\" class=\"{{ option.prefixCls }}\" [ngClass]=\"cls\">\n <div class=\"{{ option.prefixCls }}-content\">\n <div *ngIf=\"option.closable\" style=\"width: 100%; height: 21px;\">\n <div role=\"close\" class=\"{{ option.prefixCls }}-close\">\n <span role=\"close\" class=\"{{ option.prefixCls }}-close-x\"></span>\n </div>\n </div>\n <div *ngIf=\"!isNoTitle(option.title)\" class=\"{{ option.prefixCls }}-header\">\n <div *ngIf=\"!isTemplateRef(option.title)\" class=\"{{ option.prefixCls }}-title\">{{ option.title }}</div>\n <ng-template *ngIf=\"isTemplateRef(option.title)\" [ngTemplateOutlet]=\"option.title\"></ng-template>\n </div>\n <div class=\"{{ option.prefixCls }}-body\">\n <ng-content></ng-content>\n <div *ngIf=\"!isTemplateRef(option.message)\" class=\"{{ option.prefixCls }}-alert-content\">\n {{ option.message }}\n </div>\n <ng-template *ngIf=\"isTemplateRef(option.message)\" [ngTemplateOutlet]=\"option.message\"></ng-template>\n <ng-template *ngIf=\"option.type === 'default'\" [ngTemplateOutlet]=\"promptDefault\"></ng-template>\n <ng-template *ngIf=\"option.type === 'secure-text'\" [ngTemplateOutlet]=\"promptSecure\"></ng-template>\n <ng-template *ngIf=\"option.type === 'login-password'\" [ngTemplateOutlet]=\"promptPassword\"></ng-template>\n </div>\n <div class=\"{{ option.prefixCls }}-footer\">\n <div [ngClass]=\"btnGroupClass\" role=\"group\">\n <div\n Button\n role=\"button\"\n *ngFor=\"let button of option.footer\"\n [className]=\"'am-modal-button'\"\n [ngStyle]=\"button.style\"\n (onClick)=\"button.onPress()\"\n >\n {{ button.text }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #promptPassword>\n <div class=\"{{ option.prefixCls }}-input-container\">\n <div class=\"{{ option.prefixCls }}-input\">\n <input\n #inputElement\n autofocus\n [type]=\"'text'\"\n [placeholder]=\"option.placeholders[0] || ''\"\n [(ngModel)]=\"option.defaultValue[0]\"\n (ngModelChange)=\"inputChange('text', $event)\"\n />\n </div>\n <div className=\"{{ option.prefixCls }}-input\">\n <input\n #inputElement\n [type]=\"'password'\"\n [placeholder]=\"option.placeholders[1] || ''\"\n [(ngModel)]=\"option.defaultValue[1]\"\n (ngModelChange)=\"inputChange('password', $event)\"\n />\n </div>\n </div>\n</ng-template>\n<ng-template #promptSecure>\n <div className=\"{{ option.prefixCls }}-input-container\">\n <div className=\"{{ option.prefixCls }}-input\">\n <input\n #inputElement\n autofocus\n [type]=\"'password'\"\n [placeholder]=\"option.placeholders[0] || ''\"\n [(ngModel)]=\"option.defaultValue[0]\"\n (ngModelChange)=\"inputChange('password', $event)\"\n />\n </div>\n </div>\n</ng-template>\n<ng-template #promptDefault>\n <div className=\"{{ option.prefixCls }}-input-container\">\n <div className=\"{{ option.prefixCls }}-input\">\n <input\n #inputElement\n autofocus\n [type]=\"'text'\"\n [placeholder]=\"option.placeholders[0] || ''\"\n [(ngModel)]=\"option.defaultValue[0]\"\n (ngModelChange)=\"inputChange('text', $event)\"\n />\n </div>\n </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.ButtonComponent, selector: "[Button], nzm-button", inputs: ["type", "size", "disabled", "loading", "inline", "icon", "className"], outputs: ["onClick"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ModalServiceComponent, decorators: [{
type: Component,
args: [{ selector: 'ModalService', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"option.visible\">\n <div class=\"{{ option.prefixCls }}-mask {{ maskTransitionName }}\"></div>\n <div role=\"dialog\" class=\"{{ option.prefixCls }}-wrap {{ transitionName }}\" [ngClass]=\"wrapCls\">\n <div role=\"document\" class=\"{{ option.prefixCls }}\" [ngClass]=\"cls\">\n <div class=\"{{ option.prefixCls }}-content\">\n <div *ngIf=\"option.closable\" style=\"width: 100%; height: 21px;\">\n <div role=\"close\" class=\"{{ option.prefixCls }}-close\">\n <span role=\"close\" class=\"{{ option.prefixCls }}-close-x\"></span>\n </div>\n </div>\n <div *ngIf=\"!isNoTitle(option.title)\" class=\"{{ option.prefixCls }}-header\">\n <div *ngIf=\"!isTemplateRef(option.title)\" class=\"{{ option.prefixCls }}-title\">{{ option.title }}</div>\n <ng-template *ngIf=\"isTemplateRef(option.title)\" [ngTemplateOutlet]=\"option.title\"></ng-template>\n </div>\n <div class=\"{{ option.prefixCls }}-body\">\n <ng-content></ng-content>\n <div *ngIf=\"!isTemplateRef(option.message)\" class=\"{{ option.prefixCls }}-alert-content\">\n {{ option.message }}\n </div>\n <ng-template *ngIf=\"isTemplateRef(option.message)\" [ngTemplateOutlet]=\"option.message\"></ng-template>\n <ng-template *ngIf=\"option.type === 'default'\" [ngTemplateOutlet]=\"promptDefault\"></ng-template>\n <ng-template *ngIf=\"option.type === 'secure-text'\" [ngTemplateOutlet]=\"promptSecure\"></ng-template>\n <ng-template *ngIf=\"option.type === 'login-password'\" [ngTemplateOutlet]=\"promptPassword\"></ng-template>\n </div>\n <div class=\"{{ option.prefixCls }}-footer\">\n <div [ngClass]=\"btnGroupClass\" role=\"group\">\n <div\n Button\n role=\"button\"\n *ngFor=\"let button of option.footer\"\n [className]=\"'am-modal-button'\"\n [ngStyle]=\"button.style\"\n (onClick)=\"button.onPress()\"\n >\n {{ button.text }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #promptPassword>\n <div class=\"{{ option.prefixCls }}-input-container\">\n <div class=\"{{ option.prefixCls }}-input\">\n <input\n #inputElement\n autofocus\n [type]=\"'text'\"\n [placeholder]=\"option.placeholders[0] || ''\"\n [(ngModel)]=\"option.defaultValue[0]\"\n (ngModelChange)=\"inputChange('text', $event)\"\n />\n </div>\n <div className=\"{{ option.prefixCls }}-input\">\n <input\n #inputElement\n [type]=\"'password'\"\n [placeholder]=\"option.placeholders[1] || ''\"\n [(ngModel)]=\"option.defaultValue[1]\"\n (ngModelChange)=\"inputChange('password', $event)\"\n />\n </div>\n </div>\n</ng-template>\n<ng-template #promptSecure>\n <div className=\"{{ option.prefixCls }}-input-container\">\n <div className=\"{{ option.prefixCls }}-input\">\n <input\n #inputElement\n autofocus\n [type]=\"'password'\"\n [placeholder]=\"option.placeholders[0] || ''\"\n [(ngModel)]=\"option.defaultValue[0]\"\n (ngModelChange)=\"inputChange('password', $event)\"\n />\n </div>\n </div>\n</ng-template>\n<ng-template #promptDefault>\n <div className=\"{{ option.prefixCls }}-input-container\">\n <div className=\"{{ option.prefixCls }}-input\">\n <input\n #inputElement\n autofocus\n [type]=\"'text'\"\n [placeholder]=\"option.placeholders[0] || ''\"\n [(ngModel)]=\"option.defaultValue[0]\"\n (ngModelChange)=\"inputChange('text', $event)\"\n />\n </div>\n </div>\n</ng-template>\n" }]
}], ctorParameters: () => [{ type: ModalOptions }, { type: i0.ElementRef }] });
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
let ModalService = class ModalService extends PopupService {
constructor() {
super(...arguments);
this.modalRef = null;
}
_open(props) {
const childInjector = Injector.create({
providers: [{ provide: ModalOptions, useValue: props }]
});
this.modalRef = this.showPopup(ModalServiceComponent, childInjector);
return this.modalRef && this.modalRef.instance;
}
closeWithAnimation() {
const options = new ModalBaseOptions();
this.modalRef.instance.transitionName = `${options.transitionName}-leave ${options.transitionName}-leave-active`;
this.modalRef.instance.maskTransitionName = `${options.maskTransitionName}-leave ${options.maskTransitionName}-leave-active`;
setTimeout(() => {
this.close();
}, 200);
}
alert(title, message, actions, platform) {
const options = new ModalOptions();
const footer = getFooter.call(this, actions);
const defaultOptions = {
visible: true,
transparent: true,
closable: false,
maskClosable: false,
platform: platform || 'ios',
title: title || '',
message: message || '',
footer,
actions: footer,
close: () => {
this.closeWithAnimation();
},
closeWithAnimation: () => {
this.closeWithAnimation();
}
};
const props = {
...options,
...defaultOptions
};
return this._open(props);
}
prompt(title, message, callbackOrActions, type, defaultValue, placeholders, platform) {
const options = new ModalOptions();
function getArgs(self, func) {
let text, password;
if (self.modalRef) {
text = self.modalRef.instance.data.text || options.defaultValue[0];
password = self.modalRef.instance.data.password || options.defaultValue[1];
}
else {
text = options.defaultValue[0];
password = options.defaultValue[1];
}
if (type === 'login-password') {
return func(text, password);
}
else if (type === 'secure-text') {
return func(password);
}
return func(text);
}
const actions = typeof callbackOrActions === 'function'
? [
{ text: 'Cancel' },
{
text: 'OK',
onPress: () => {
getArgs(this, callbackOrActions);
}
}
]
: callbackOrActions.map(item => {
return {
text: item.text,
onPress: () => {
if (item.onPress) {
return getArgs(this, item.onPress);
}
}
};
});
const footer = getFooter.call(this, actions);
const defaultOptions = {
visible: true,
transparent: true,
closable: false,
maskClosable: false,
operation: true,
className: 'm-modal-alert-content',
defaultValue: defaultValue || ['', ''],
placeholders: placeholders || [],
type: type || 'default',
title: title || '',
message: message || '',
footer,
actions: footer,
platform: platform ? platform : 'ios',
close: () => {
this.closeWithAnimation();
},
closeWithAnimation: () => {
this.closeWithAnimation();
}
};
const props = {
...options,
...defaultOptions
};
return this._open(props);
}
operation(actions, platform, customOptions) {
const options = new ModalOptions();
const footer = getFooter.call(this, actions);
const defaultOptions = {
visible: true,
transparent: true,
closable: false,
maskClosable: false,
operation: true,
className: 'am-modal-operation',
footer,
platform: platform ? platform : 'ios',
close: () => {
this.closeWithAnimation();
},
closeWithAnimation: () => {
this.closeWithAnimation();
}
};
const props = {
...options,
...defaultOptions,
...customOptions
};
return this._open(props);
}
close() {
this.hidePopup();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ModalService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ModalService, providedIn: 'root' }); }
};
ModalService = __decorate([
Injectable()
], ModalService);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ModalService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}, {
type: Injectable
}] });
function getFooter(actions) {
let _actions = actions ? actions : [{ text: 'OK', onPress: () => { } }];
return _actions.map((button) => {
const originPress = button.onPress || function () { };
button.onPress = () => {
const res = originPress();
if (res && res.then) {
res.then(() => {
this.closeWithAnimation();
});
}
else {
this.closeWithAnimation();
}
};
return button;
});
}
class ModalModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: ModalModule, declarations: [ModalComponent, ModalServiceComponent], imports: [CommonModule,
ListModule,
WingBlankModule,
WhiteSpaceModule,
ButtonModule,
InputItemModule,
FormsModule,
ReactiveFormsModule,
OverlayModule], exports: [ModalComponent, ModalServiceComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ModalModule, providers: [ModalService, PopupService], imports: [CommonModule,
ListModule,
WingBlankModule,
WhiteSpaceModule,
ButtonModule,
InputItemModule,
FormsModule,
ReactiveFormsModule,
OverlayModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ModalModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule,
ListModule,
WingBlankModule,
WhiteSpaceModule,
ButtonModule,
InputItemModule,
FormsModule,
ReactiveFormsModule,
OverlayModule
],
exports: [ModalComponent, ModalServiceComponent],
declarations: [ModalComponent, ModalServiceComponent],
providers: [ModalService, PopupService]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Action, ModalService as Modal, ModalBaseOptions, ModalComponent, ModalModule, ModalOptions, ModalRef, ModalService, ModalServiceComponent };
//# sourceMappingURL=ng-zorro-antd-mobile-modal.mjs.map