@kre-form/ionic
Version:
1,666 lines (1,638 loc) • 108 kB
JavaScript
import * as moment_ from 'moment';
import { __awaiter } from 'tslib';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { FieldType, FieldWrapper, FormGlobalService, FieldArrayType, KreFormAttributes, KreFormModule } from '@kre-form/core';
import { cloneDeep, isNumber, round, isEmpty } from 'lodash';
import { Component, Input, Injectable, Directive, ContentChild, Renderer2, ElementRef, NgModule } from '@angular/core';
import { ModalController, ToastController, PopoverController, Platform, IonText, IonicModule } from '@ionic/angular';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldIonText extends FieldType {
constructor() {
super();
}
/**
* @return {?}
*/
ngOnInit() {
//Called after the constructor, initializing input properties, and the first call to ngOnChanges.
//Add 'implements OnInit' to the class.
// console.log('this.text:', this.text);
}
}
KreFormFieldIonText.decorators = [
{ type: Component, args: [{
selector: "kreform-field-ion-text",
template: `
<ng-container *ngIf="!!editor; else other">
<ion-input
[maxlength]="to.maxLength || 200"
[minlength]="to.minLength || 0"
[formControl]="formControl"
[ionKreFormAttributes]="field"
></ion-input>
</ng-container>
<ng-template #other>
<div class="fieldtext">{{ text }}</div>
</ng-template>
`
}] }
];
/** @nocollapse */
KreFormFieldIonText.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldIonTextArea extends FieldType {
}
KreFormFieldIonTextArea.decorators = [
{ type: Component, args: [{
selector: "kreform-field-ion-textarea",
template: `
<ng-container *ngIf="!!editor; else other">
<ion-textarea
[formControl]="formControl"
[ionKreFormAttributes]="field"
[rows]="to.rows ? to.rows : 4"
[maxlength]="to.maxLength || 500"
[minlength]="to.minLength || 0"
>
</ion-textarea>
</ng-container>
<ng-template #other>
<div class="fieldtext">{{ text }}</div>
</ng-template>
`
}] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldIonNumber extends FieldType {
/**
* @return {?}
*/
get value() {
if (this.model &&
this.model[this.key] !== undefined &&
this.model[this.key] !== null &&
this.model[this.key] !== "") {
return this.model[this.key];
}
return null;
}
/**
* @param {?} value
* @return {?}
*/
set value(value) {
this._value = value;
}
/**
* @param {?} value
* @return {?}
*/
changeValue(value) {
this.model[this.key] = value;
}
/**
* @param {?} e
* @return {?}
*/
inputBlur(e) {
if (e.target && e.target.value && this.model) {
/** @type {?} */
let value = e.target.value;
this.model[this.key] = value;
this.formControl.patchValue(value);
this.formControl.markAsTouched();
}
else {
if (e.target.value == null || e.target.value == "") {
if (this.model[this.key] != undefined && this.model[this.key] != null) {
this.model[this.key] = null;
}
}
this.formControl.patchValue(null);
this.formControl.markAsTouched();
}
}
/**
* @return {?}
*/
get number() {
/** @type {?} */
let result = this.text;
if (this.to != undefined &&
this.to != null &&
this.to["precision"] != undefined &&
this.to["precision"] != null) {
if (!!result || result === 0) {
result = round(result, this.to["precision"]);
if (!isEmpty(this.model) &&
((/** @type {?} */ (this.model))).hasOwnProperty(this.key)) {
this.model[this.key] = result;
}
}
}
return result;
}
}
KreFormFieldIonNumber.decorators = [
{ type: Component, args: [{
selector: "kreform-field-ion-number",
template: `
<ng-container *ngIf="!!editor; else other">
<ion-input
type="input"
ionKreFormFloat
[decimalNumber]="to.precision"
[ionKreFormAttributes]="field"
[max]="to.max || 999999"
[min]="to.min || -999999"
[(ngModel)]="value"
(ngModelChange)="changeValue($event)"
(ionBlur)="inputBlur($event)"
></ion-input>
</ng-container>
<ng-template #other>
<div class="fieldtext">{{ number }}</div>
</ng-template>
`
}] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldIonRadio extends FieldType {
}
KreFormFieldIonRadio.decorators = [
{ type: Component, args: [{
selector: "kreform-field-ion-radio",
template: `
<ng-container>
<ion-radio-group
[formControl]="formControl"
[ionKreFormAttributes]="field"
>
<ion-item>
<ion-label [position]="to.labelPosition" class="">
<span *ngIf="to.required" class="required-icon">*</span
>{{ to.label }} </ion-label
><ion-radio
slot="end"
[disabled]="!editor"
[value]="to.value"
mode="md"
></ion-radio
></ion-item>
</ion-radio-group>
</ng-container>
`
}] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldIonSelectComponent {
/**
* @param {?} modalController
*/
constructor(modalController) {
this.modalController = modalController;
this.isAllChecked = false;
// 缓存-当前选中
this.selectedNum = 0;
// 可选项
this.selectType = "multiple"; //single
}
//single
/**
* @return {?}
*/
get options() {
return this._options;
}
/**
* @param {?} value
* @return {?}
*/
set options(value) {
this._options = cloneDeep(value);
this._options_old = value;
}
//全选
/**
* @param {?} e
* @return {?}
*/
checkAll(e) {
if (this.isAllChecked == true) {
this.options.forEach((/**
* @param {?} e
* @return {?}
*/
(e) => {
e.checked = true;
}));
}
else {
// 全选后取消某一项不清空选中效果判断
if (this.selectedNum === this.options.length) {
this.options.forEach((/**
* @param {?} e
* @return {?}
*/
(e) => {
e.checked = false;
}));
}
}
this.setSelectNum();
}
//筛选选中
/**
* @return {?}
*/
setSelectNum() {
this.selectedNum = this.options.filter((/**
* @param {?} item
* @return {?}
*/
(item) => item.checked)).length;
this.isAllChecked =
this.options.length > 0 && this.selectedNum === this.options.length;
}
/**
* @param {?} value
* @return {?}
*/
singleCheck(value) {
this.options.map((/**
* @param {?} element
* @return {?}
*/
(element) => {
element.checked = element.value === value;
return element;
}));
}
// 0 取消 / 1 确定
/**
* @param {?} type
* @return {?}
*/
dismissModel(type) {
/** @type {?} */
let selectOptions = [];
if (type) {
selectOptions = this.options
.filter((/**
* @param {?} item
* @return {?}
*/
(item) => {
return item.checked;
}))
.map((/**
* @param {?} item
* @return {?}
*/
(item) => {
return { label: item.label, value: item.value };
}));
this.modalController.dismiss(selectOptions);
}
else {
this.modalController.dismiss();
}
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @return {?}
*/
ngAfterViewInit() { }
}
KreFormFieldIonSelectComponent.decorators = [
{ type: Component, args: [{
selector: "kreform-field-ion-select",
template: `
<div class="multi">
<div class="multi_head">
<ng-container *ngIf="selectType == 'multiple'; else other">
<ion-item>
<ion-checkbox
[(ngModel)]="isAllChecked"
(ionChange)="checkAll($event)"
></ion-checkbox>
<ion-label>
全选
<span>（{{ selectedNum }}/{{ options.length }}）</span></ion-label
>
</ion-item>
<div>
<ion-button size="small" fill="clear" (click)="dismissModel(false)"
>取消</ion-button
>
<ion-button size="small" fill="clear" (click)="dismissModel(true)"
>确定</ion-button
>
</div>
</ng-container>
<ng-template #other>
<ion-button size="small" fill="clear" (click)="dismissModel(false)"
>取消</ion-button
>
<ion-button size="small" fill="clear" (click)="dismissModel(true)"
>确定</ion-button
>
</ng-template>
</div>
<div class="multi_scroll">
<ion-item
class="multi_scroll_item hairlines-bottom"
*ngFor="let row of options"
(click)="selectType == 'single' ? singleCheck(row.value) : ''"
>
<ion-checkbox
[(ngModel)]="row.checked"
(ionChange)="selectType == 'multiple' ? setSelectNum() : ''"
></ion-checkbox>
<ion-label>{{ row.label }}</ion-label>
</ion-item>
</div>
</div>
`
}] }
];
/** @nocollapse */
KreFormFieldIonSelectComponent.ctorParameters = () => [
{ type: ModalController }
];
KreFormFieldIonSelectComponent.propDecorators = {
selectType: [{ type: Input }],
options: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormIonDialogService {
/**
* @param {?} modalController
*/
constructor(modalController) {
this.modalController = modalController;
}
/**
* @param {?} modalOptions
* @param {?} params
* @param {?} callback
* @return {?}
*/
CreateModelDialog(modalOptions, params, callback) {
return __awaiter(this, void 0, void 0, function* () {
/** @type {?} */
const modal = yield this.modalController.create({
component: modalOptions.content,
cssClass: modalOptions.class,
componentProps: Object.assign({}, params),
mode: "ios",
});
yield modal.present();
const { data } = yield modal.onDidDismiss();
callback(data, modal);
});
}
}
KreFormIonDialogService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
KreFormIonDialogService.ctorParameters = () => [
{ type: ModalController }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldIonRadioGroup extends FieldType {
/**
* @param {?} dialogService
*/
constructor(dialogService) {
super();
this.dialogService = dialogService;
}
/**
* @return {?}
*/
openPicker() {
/** @type {?} */
let options = [];
this.to.options.forEach((/**
* @param {?} item
* @return {?}
*/
(item) => {
options.push({
value: item.value,
label: item.label,
checked: this.isOptionChecked(item.value),
});
}));
/** @type {?} */
let params = {
options: options,
selectType: "single",
};
this.dialogService.CreateModelDialog({
content: KreFormFieldIonSelectComponent,
class: "part-page",
}, params, (/**
* @param {?} instance
* @return {?}
*/
(instance) => {
if (instance) {
this.formControl.patchValue(instance);
this.formControl.markAsTouched();
}
}));
}
}
KreFormFieldIonRadioGroup.decorators = [
{ type: Component, args: [{
selector: "kreform-field-ion-radiogroup",
template: `
<ng-container *ngIf="!!editor; else other">
<ion-item detail="true" (click)="openPicker()">
<div>{{ textLookUp }}</div>
</ion-item>
</ng-container>
<ng-template #other>
<div class="fieldtext">{{ textLookUp }}</div>
</ng-template>
`
}] }
];
/** @nocollapse */
KreFormFieldIonRadioGroup.ctorParameters = () => [
{ type: KreFormIonDialogService }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldIonCheckbox extends FieldType {
}
KreFormFieldIonCheckbox.decorators = [
{ type: Component, args: [{
selector: "kreform-field-ion-checkbox",
template: `
<ion-item>
<ion-label [position]="to.labelPosition">
<span *ngIf="to.required" class="required-icon">*</span>{{ to.label }}
</ion-label>
<ion-checkbox
slot="end"
mode="ios"
[formControl]="formControl"
[ionKreFormAttributes]="field"
[disabled]="!editor"
></ion-checkbox>
</ion-item>
`
}] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldIonCheckboxGroup extends FieldType {
/**
* @param {?} dialogService
*/
constructor(dialogService) {
super();
this.dialogService = dialogService;
}
/**
* @return {?}
*/
openPicker() {
/** @type {?} */
let options = [];
this.to.options.forEach((/**
* @param {?} item
* @return {?}
*/
(item) => {
options.push({
value: item.value,
label: item.label,
checked: this.isOptionChecked(item.value),
});
}));
/** @type {?} */
let params = {
options: options,
selectType: "multiple",
};
this.dialogService.CreateModelDialog({
content: KreFormFieldIonSelectComponent,
class: "part-page",
}, params, (/**
* @param {?} instance
* @return {?}
*/
(instance) => {
if (instance) {
this.formControl.patchValue(instance);
this.formControl.markAsTouched();
}
}));
}
}
KreFormFieldIonCheckboxGroup.decorators = [
{ type: Component, args: [{
selector: "kreform-field-ion-checkboxgroup",
template: `
<ng-container *ngIf="!!editor; else other">
<ion-item detail="true" (click)="openPicker()">
<div>{{ textLookUp }}</div>
</ion-item>
</ng-container>
<ng-template #other>
<div class="fieldtext">{{ textLookUp }}</div>
</ng-template>
`
}] }
];
/** @nocollapse */
KreFormFieldIonCheckboxGroup.ctorParameters = () => [
{ type: KreFormIonDialogService }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldIonImage extends FieldType {
}
KreFormFieldIonImage.decorators = [
{ type: Component, args: [{
selector: "kreform-field-ion-image",
template: `
<ion-thumbnail>
<img [src]="formControl.value" [ionKreFormAttributes]="field" />
</ion-thumbnail>
`
}] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const moment = moment_;
class KreFormFieldIonDatetime extends FieldType {
/**
* @return {?}
*/
get maxDate() {
/** @type {?} */
let time = this.to.maxDate
? moment(this.to.maxDate).format("YYYY-MM-DDTHH:mm")
: "2050-12-31T23:59";
time = time.split("T")[1] ? time : time + "T23:59";
return time;
// return this.to.maxDate;
}
/**
* @return {?}
*/
get minDate() {
/** @type {?} */
let time = this.to.minDate
? moment(this.to.minDate).format("YYYY-MM-DDTHH:mm")
: moment()
.subtract(100, "years")
.startOf("year")
.format("YYYY-MM-DDTHH:mm");
time = time.split("T")[1] ? time : time + "T00:00";
return time;
// return this.to.minDate;
}
/**
* @return {?}
*/
get format() {
/** @type {?} */
let result = "YYYY/MM/DD HH:mm";
if (this.to.type !== undefined && this.to.type !== null) {
switch (this.to.type.toLowerCase()) {
case "datetime":
break;
case "date":
result = "YYYY/MM/DD";
break;
case "year":
result = "YYYY";
break;
case "month":
result = "YYYY/MM";
break;
case "time":
result = "HH:mm";
break;
default:
break;
}
}
return result;
}
/**
* @return {?}
*/
get getText() {
/** @type {?} */
let result = "";
if (this.to.type === undefined ||
this.to.type === null ||
this.to.type === "") {
this.to.type = "datetime";
}
if (this.model != undefined &&
this.model != null &&
this.field != undefined &&
this.field != null &&
this.field.key != undefined &&
this.field.key != null &&
this.model[this.field.key] != undefined &&
this.model[this.field.key] != null &&
this.model[this.field.key] != "") {
if (moment(this.model[this.field.key]).isValid()) {
switch (this.to.type) {
case "datetime":
result = moment(this.model[this.field.key]).format("YYYY/MM/DD HH:mm");
break;
case "date":
result = moment(this.model[this.field.key]).format("YYYY/MM/DD");
break;
case "year":
result = moment(this.model[this.field.key]).format("YYYY");
break;
case "month":
result = moment(this.model[this.field.key]).format("YYYY/MM");
break;
case "time":
result = moment(this.model[this.field.key]).format("HH:mm");
break;
}
}
}
return result;
}
}
KreFormFieldIonDatetime.decorators = [
{ type: Component, args: [{
selector: "kreform-field-ion-datetime",
template: `
<ng-container *ngIf="!!editor; else other">
<ion-item detail="true">
<ion-datetime
[displayFormat]="format"
[pickerFormat]="format"
[formControl]="formControl"
[ionKreFormAttributes]="field"
doneText="确认"
cancelText="取消"
mode="ios"
[min]="minDate"
[max]="maxDate"
></ion-datetime>
</ion-item>
</ng-container>
<ng-template #other>
<div class="fieldtext">{{ getText }}</div>
</ng-template>
`
}] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormIonToastService {
/**
* @param {?} toastCtrl
*/
constructor(toastCtrl) {
this.toastCtrl = toastCtrl;
}
/**
* 弹出信息
*
* \@param: {string} message 信息提示 / {string} [position] 位置 / {number} [duration] 持续事件
* @param {?} msg
* @param {?=} position
* @param {?=} duration
* @return {?}
*/
presentToast(msg, position, duration) {
return __awaiter(this, void 0, void 0, function* () {
position = position || "bottom";
duration = duration || 1500;
/** @type {?} */
const toast = yield this.toastCtrl.create({
color: "dark",
message: msg,
position,
duration,
animated: true,
});
toast.present();
});
}
}
KreFormIonToastService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
KreFormIonToastService.ctorParameters = () => [
{ type: ToastController }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldIonTextI18Component {
/**
* @param {?} modalController
* @param {?} toastService
*/
constructor(modalController, toastService) {
this.modalController = modalController;
this.toastService = toastService;
this.editor = true;
this.required = false;
}
/**
* @return {?}
*/
get languageList() {
return this._languageList;
}
/**
* @param {?} value
* @return {?}
*/
set languageList(value) {
this._languageList = cloneDeep(value);
this._languageList_old = value;
}
// 0 取消 / 1 确定
/**
* @param {?} type
* @return {?}
*/
dismissModel(type) {
/** @type {?} */
let result;
if (type) {
result = this.languageList;
if (this.required == true) {
/** @type {?} */
let languageEmpty = result.filter((/**
* @param {?} item
* @return {?}
*/
(item) => {
if (item.value == null || item.value == "") {
return item;
}
}));
if (languageEmpty != null && languageEmpty.length > 0) {
this.toastService.presentToast("多语言字段不能为空!");
return;
}
}
this.modalController.dismiss(result);
}
else {
this.modalController.dismiss();
}
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @return {?}
*/
ngAfterViewInit() { }
}
KreFormFieldIonTextI18Component.decorators = [
{ type: Component, args: [{
selector: "kreform-field-ion-i18",
template: `
<ion-header class="contactHeader">
<ion-toolbar>
<ion-title> 多语言设置</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ng-container *ngIf="editor == true; else other">
<div *ngFor="let item of languageList">
<ion-label>
<span *ngIf="required == true" class="required-icon">*</span>
{{ item.label }}</ion-label
>
<ion-item>
<ion-input [(ngModel)]="item.value"></ion-input>
</ion-item>
</div>
</ng-container>
<ng-template #other>
<div class="fieldtext">
<div *ngFor="let item of languageList">
<ion-label>{{ item.label }}</ion-label>
<ion-item>
{{ item.value }}
</ion-item>
</div>
</div>
</ng-template>
<div class="selection-buttons">
<div class="buttons-between">
<ion-button size="small" (click)="dismissModel(false)"
>取消</ion-button
>
<ion-button
[disabled]="!editor"
size="small"
(click)="dismissModel(true)"
>确定</ion-button
>
</div>
</div>
</ion-content>
`
}] }
];
/** @nocollapse */
KreFormFieldIonTextI18Component.ctorParameters = () => [
{ type: ModalController },
{ type: KreFormIonToastService }
];
KreFormFieldIonTextI18Component.propDecorators = {
editor: [{ type: Input }],
required: [{ type: Input }],
languageList: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldIonTextI18n extends FieldType {
/**
* @param {?} dialogService
*/
constructor(dialogService) {
super();
this.dialogService = dialogService;
this.languageList = [
{ language: "chinese", label: "中", value: "" },
{ language: "english", label: "英", value: "" },
];
}
/**
* @return {?}
*/
get textlanguage() {
/** @type {?} */
let result = "";
if (this.model &&
this.model[this.key] &&
Array.isArray(this.model[this.key])) {
this.model[this.key].forEach((/**
* @param {?} element
* @return {?}
*/
(element) => {
if (element.language == "chinese") {
result = element.value;
}
}));
}
return result;
}
/**
* @return {?}
*/
openPicker() {
/** @type {?} */
let languages = [];
this.languageList.forEach((/**
* @param {?} item
* @return {?}
*/
(item) => {
languages.push({
language: item.language,
label: item.label,
value: this.getLanguageValue(item.language),
});
}));
/** @type {?} */
let params = {
languageList: languages,
required: this.to.required != undefined ? this.to.required : false,
editor: this.editor,
};
this.dialogService.CreateModelDialog({
content: KreFormFieldIonTextI18Component,
class: "full-page",
}, params, (/**
* @param {?} instance
* @param {?} modal
* @return {?}
*/
(instance, modal) => {
if (instance) {
this.formControl.patchValue(instance);
this.formControl.markAsTouched();
}
}));
}
}
KreFormFieldIonTextI18n.decorators = [
{ type: Component, args: [{
selector: "kreform-field-ion-texti18n",
template: `
<ng-container>
<ion-item detail="true" (click)="openPicker()">
<div>{{ textlanguage }}</div>
</ion-item>
</ng-container>
`
}] }
];
/** @nocollapse */
KreFormFieldIonTextI18n.ctorParameters = () => [
{ type: KreFormIonDialogService }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldIonSelect extends FieldType {
/**
* @param {?} dialogService
*/
constructor(dialogService) {
super();
this.dialogService = dialogService;
}
/**
* @return {?}
*/
get newTextLookUp() {
/** @type {?} */
let result = [];
if (this.model &&
this.model != null &&
this.model.hasOwnProperty(this.key)) {
if (this.model[this.key] !== undefined &&
this.model[this.key] != null &&
this.model[this.key].length > 0) {
if (this.to.options && ((/** @type {?} */ (this.to.options))).length > 0) {
this.model[this.key].forEach((/**
* @param {?} ele
* @return {?}
*/
(ele) => {
if (((/** @type {?} */ (this.to.options))).some((/**
* @param {?} el
* @return {?}
*/
(el) => el.value === ele.value))) {
result.push(ele.label);
}
}));
}
// result = this.model[this.key].map((item: any) => {
// return item.label;
// });
}
}
return result.join("、");
}
/**
* @return {?}
*/
openPicker() {
/** @type {?} */
let options = [];
/** @type {?} */
let selectType = "single";
if (this.to.selectType && this.to.selectType == "multiple") {
selectType = "multiple";
}
this.to.options.forEach((/**
* @param {?} item
* @return {?}
*/
(item) => {
options.push({
value: item.value,
label: item.label,
checked: this.isOptionChecked(item.value),
});
}));
/** @type {?} */
let params = {
options: options,
selectType: selectType,
};
this.dialogService.CreateModelDialog({
content: KreFormFieldIonSelectComponent,
class: "part-page",
}, params, (/**
* @param {?} instance
* @param {?} modal
* @return {?}
*/
(instance, modal) => {
if (instance) {
this.formControl.patchValue(instance);
this.formControl.markAsTouched();
}
}));
}
}
KreFormFieldIonSelect.decorators = [
{ type: Component, args: [{
selector: "kreform-field-ion-select",
template: `
<ng-container *ngIf="!!editor; else other">
<ion-item detail="true" (click)="openPicker()">
<div>{{ newTextLookUp }}</div>
</ion-item>
</ng-container>
<ng-template #other>
<div class="fieldtext">{{ textLookUp }}</div>
</ng-template>
`
}] }
];
/** @nocollapse */
KreFormFieldIonSelect.ctorParameters = () => [
{ type: KreFormIonDialogService }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldIonLine extends FieldType {
}
KreFormFieldIonLine.decorators = [
{ type: Component, args: [{
selector: "kreform-field-ion-line",
template: ` <div><hr /></div>`
}] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// <ion-icon name="eye-off-outline"></ion-icon>
class KreFormFieldIonPassword extends FieldType {
constructor() {
super();
this.showPwd = false;
}
}
KreFormFieldIonPassword.decorators = [
{ type: Component, args: [{
selector: 'kreform-field-ion-password',
template: `
<ng-container *ngIf="!!editor; else other">
<ion-input
[type]="showPwd ? 'text' : 'password'"
[formControl]="formControl"
[ionKreFormAttributes]="field"
>
</ion-input>
<ion-icon
[name]="showPwd ? 'eye-outline' : 'eye-off-outline'"
(click)="showPwd = !showPwd"
></ion-icon>
</ng-container>
<ng-template #other>
<div class="fieldtext">{{ text }}</div>
</ng-template>
`
}] }
];
/** @nocollapse */
KreFormFieldIonPassword.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// 添加管道/指令/service todo
class KreFormFieldIonHtml extends FieldType {
}
KreFormFieldIonHtml.decorators = [
{ type: Component, args: [{
selector: "kreform-field-ion-html",
template: ` <div [ngStyle]="{
color: fontProperty.color,
'font-size': fontProperty.fontSize + 'px',
'font-style': fontProperty.fontStyle ? 'italic' : 'normal',
'font-weight': fontProperty.fontWeight ? 'bold' : 'normal'
}" [innerHtml]="to.description | safeHtml"></div>`
}] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldIonTable extends FieldType {
}
KreFormFieldIonTable.decorators = [
{ type: Component, args: [{
selector: 'kreform-field-ion-table',
template: `
<ng-container>
<ion-item>table 暂不支持</ion-item>
<!-- 不太确定展示哪些字段
<div *ngFor="let item of to.options">
<ion-label>{{ item.label }}</ion-label>
<ion-item>
<div>{{ item.value }}</div></ion-item
>
</div> -->
</ng-container>
`
}] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldIonEditor extends FieldType {
}
KreFormFieldIonEditor.decorators = [
{ type: Component, args: [{
selector: "kreform-field-ion-editor",
template: `
<ng-container>
<ion-item>Editor 暂不支持</ion-item>
</ng-container>
`
}] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldIonSwitch extends FieldType {
constructor() {
super();
}
/**
* @return {?}
*/
switchValue() {
if (!!this.model[this.field.key]) {
return "是";
}
else {
return "否";
}
}
}
KreFormFieldIonSwitch.decorators = [
{ type: Component, args: [{
selector: "kreform-field-ion-switch",
template: `
<ng-container *ngIf="!!editor; else other">
<ion-toggle
[formControl]="formControl"
[ionKreFormAttributes]="field"
></ion-toggle>
</ng-container>
<ng-template #other>
<div class="fieldtext">{{text }}</div>
</ng-template>
`
}] }
];
/** @nocollapse */
KreFormFieldIonSwitch.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldIonTagsComponent {
/**
* @param {?} modalController
*/
constructor(modalController) {
this.modalController = modalController;
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @return {?}
*/
ngAfterViewInit() { }
}
KreFormFieldIonTagsComponent.decorators = [
{ type: Component, args: [{
selector: "kreform-field-ion-tags",
template: `
<div [innerHtml]="content | safeHtml"></div>
`
}] }
];
/** @nocollapse */
KreFormFieldIonTagsComponent.ctorParameters = () => [
{ type: ModalController }
];
KreFormFieldIonTagsComponent.propDecorators = {
content: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormWrapperFormField extends FieldWrapper {
/**
* @param {?} popoverController
* @param {?} globalService
*/
constructor(popoverController, globalService) {
super();
this.popoverController = popoverController;
this.globalService = globalService;
}
/**
* @param {?} tags
* @return {?}
*/
onBadge(tags) {
return __awaiter(this, void 0, void 0, function* () {
/** @type {?} */
let result = "";
switch (tags.mark) {
case "add":
result = "新增";
break;
case "modify":
result = "修改";
break;
case "remove":
result = "删除";
break;
default:
break;
}
/** @type {?} */
const popover = yield this.popoverController.create({
component: KreFormFieldIonTagsComponent,
cssClass: "field-popover",
componentProps: {
content: this.tags.content || `数据已被${result}`,
},
translucent: true,
mode: "ios",
});
yield popover.present();
});
}
/**
* @return {?}
*/
buttonClick() {
this.globalService.notifyDataChanged("FieldWrapperClick", {
rdm: Math.random(),
config: this.field,
});
}
}
KreFormWrapperFormField.decorators = [
{ type: Component, args: [{
selector: "kreform-wrapper-ion-form-field",
template: `
<ng-container *ngIf="field.type != 'html'">
<div class="item-box">
<ng-container
*ngIf="
field.type != 'line' &&
field.type != 'htmlcontent' &&
field.type != 'image' &&
field.type != 'label' &&
field.type != 'upload' &&
field.type != 'radio' &&
field.type != 'checkbox'
"
>
<ion-label
[position]="to.labelPosition"
[ngStyle]="{
color: fontProperty.color,
'font-size': fontProperty.fontSize + 'px',
'font-style': fontProperty.fontStyle ? 'italic' : 'normal',
'font-weight': fontProperty.fontWeight ? 'bold' : 'normal'
}"
>
<span *ngIf="to.required" class="required-icon">*</span
>{{ to.label }}
</ion-label>
</ng-container>
<div class="field-content-box">
<ng-template #fieldComponent></ng-template>
<div
class="field-unit"
*ngIf="to.unit && to.unit != null && to.unit != ''"
>
<span [innerHtml]="to.unit | safeHtml"></span>
</div>
<div
class="field-button"
*ngIf="to.button && to.button != null && to.button?.show == true"
>
<span
[innerHtml]="to.button.label | safeHtml"
(click)="buttonClick()"
></span>
</div>
</div>
</div>
<div class="item-error" *ngIf="showError">
<kreform-validation-message [field]="field">
</kreform-validation-message>
</div>
<ng-container *ngIf="tags.mark">
<ion-badge class="field-tags" (click)="onBadge(tags)">
{{ tags.mark | tags }}
</ion-badge>
</ng-container>
</ng-container>
`
}] }
];
/** @nocollapse */
KreFormWrapperFormField.ctorParameters = () => [
{ type: PopoverController },
{ type: FormGlobalService }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldGroup extends FieldType {
}
KreFormFieldGroup.decorators = [
{ type: Component, args: [{
selector: "group",
template: `
<div [class]="'fieldGroup ' + field.className">
<kreform-field
*ngFor="let f of field.fieldGroup"
[field]="f"
></kreform-field>
<ng-content></ng-content>
</div>
`,
host: {
"[class]": 'field.className || ""'
}
}] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldRepeat extends FieldArrayType {
/**
* @param {?} globalService
*/
constructor(globalService) {
super();
this.globalService = globalService;
this.length = 0;
}
/**
* @return {?}
*/
ngOnInit() {
if (this.formControl) {
this.formControl.valueChanges.subscribe((/**
* @param {?} res
* @return {?}
*/
(res) => {
if (res.length !== this.length) {
this.length = res.length;
if ((/** @type {?} */ (this.to)).enableInterface) {
this.globalService.notifyDataChanged("repeatLengthChange", {
rdm: Math.random(),
config: this.field,
});
}
}
}));
}
this.length = (/** @type {?} */ ((/** @type {?} */ (this.field)).fieldGroup)).length;
if (!!((/** @type {?} */ (this.field)))["repeatRole"]) {
Object.keys(((/** @type {?} */ (this.field)))["repeatRole"]).forEach((/**
* @param {?} key
* @return {?}
*/
(key) => {
/** @type {?} */
let index = Number(key.substr(key.lastIndexOf("$") + 1));
if (!!this.field.fieldGroup) {
this.field.fieldGroup.forEach((/**
* @param {?} ele
* @param {?} ind
* @return {?}
*/
(ele, ind) => {
if (index === ind) {
ele.fieldGroup.forEach((/**
* @param {?} elem
* @return {?}
*/
(elem) => {
if (!!((/** @type {?} */ (this.field)))["repeatRole"][key][elem.key]) {
if (elem.templateOptions === undefined ||
elem.templateOptions === null) {
elem.templateOptions = {};
}
if (elem.editProperty === undefined ||
elem.editProperty === null) {
elem.editProperty = {};
}
elem.templateOptions = Object.assign(elem.templateOptions, ((/** @type {?} */ (this.field)))["repeatRole"][key][elem.key]
.templateOptions);
if (((/** @type {?} */ (this.field)))["repeatRole"][key][elem.key]["editor"] === false ||
((/** @type {?} */ (this.field)))["repeatRole"][key][elem.key]["editor"] === true) {
elem.editor = ((/** @type {?} */ (this.field)))["repeatRole"][key][elem.key]["editor"];
}
if (((/** @type {?} */ (this.field)))["repeatRole"][key][elem.key]["show"] ===
false ||
((/** @type {?} */ (this.field)))["repeatRole"][key][elem.key]["show"] ===
true) {
elem.show = ((/** @type {?} */ (this.field)))["repeatRole"][key][elem.key]["show"];
}
elem.editProperty = Object.assign(elem.editProperty, ((/** @type {?} */ (this.field)))["repeatRole"][key][elem.key]
.editProperty);
}
}));
}
}));
}
}));
}
if (!!this.field.fieldGroup) {
this.field.fieldGroup.forEach((/**
* @param {?} ele
* @param {?} index
* @return {?}
*/
(ele, index) => {
ele.fieldGroup.forEach((/**
* @param {?} elem
* @return {?}
*/
(elem) => {
elem.templateOptions["index"] = index;
}));
}));
}
}
/**
* @param {?} f
* @return {?}
*/
isRemoved(f) {
/** @type {?} */
let result = true;
if (this.editor === false) {
result = false;
}
if ((/** @type {?} */ ((/** @type {?} */ ((/** @type {?} */ (f)).fieldGroup)).filter((/**
* @param {?} el
* @return {?}
*/
(el) => el.type !== "line" && el.type !== "htmlcontent")))).every((/**
* @param {?} el
* @return {?}
*/
(el) => !!(/** @type {?} */ (el)).editProperty && !!(/** @type {?} */ ((/** @type {?} */ (el)).editProperty)).delete))) {
result = false;
}
return result;
}
/**
* @return {?}
*/
addIndex() {
((/** @type {?} */ (this.field.fieldGroup))).forEach((/**
* @param {?} el
* @param {?} index
* @return {?}
*/
(el, index) => {
el.fieldGroup.forEach((/**
* @param {?} ele
* @return {?}
*/
(ele) => {
ele.templateOptions.index = index;
if (this.field &&
this.field.templateOptions &&
(!!this.field.templateOptions.index ||
this.field.templateOptions.index === 0)) {
ele.templateOptions.pIndex = this.field.templateOptions.index;
}
}));
}));
}
/**
* @param {?} i
* @param {?} isRemove
* @return {?}
*/
removed(i, isRemove) {
this.remove(i);
if (!!this.operationProperty && !!this.operationProperty.deleteEvent) {
this.globalService.notifyDataChanged("FieldWrapperClick", {
rdm: Math.random(),
config: this.field,
type: "repeat",
});
}
this.globalService.notifyDataChanged("repeatDelete", {
rdm: Math.random(),
index: i,
config: this.field,
});
this.addIndex();
}
}
KreFormFieldRepeat.decorators = [
{ type: Component, args: [{
selector: "kreform-repeat",
template: `
<ng-container
*ngIf="
field.fieldGroup !== undefined &&
field.fieldGroup !== null &&
field.fieldGroup.length > 0;
else cardEmpty
"
>
<div *ngFor="let field of field.fieldGroup; let i = index" class="row">
<kreform-field class="col" [field]="field"></kreform-field>
<div
class="repeatDel"
(click)="removed(i, isRemoved(field))"
*ngIf="isRemoved(field)"
>
<span class="del">删除</span>
</div>
</div>
</ng-container>
<ng-template #cardEmpty>
<div class="repeat-card-empty">
<div class="ant-empty-image">
<img
alt="empty"
class="ng-star-inserted"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVQAAADaCAYAAAD5X7qpAAAAAXNSR0IArs4c6QAAKNlJREFUeAHtnQmYFNW5999T3dM9O8M+bMMMqwjKIhDluoDgEtAorvkeb2LU3Bgxy71JvDEmn0Hj1ST3MWZRY5Kr3pvr8gUViEZcEUFkE2VVQYQZkB2GmWHWXqrqe0/1dFM9dM9MT3d1VXf/D09R1adOnfOe3+n599mLCA4EQAAEQAAEsoWAvlBXuspLd8J0FQfugwAIWEtAWBs9Yu+KwIanm8o9iqdCC5JvcknednGDUM3P6It016bGwATFTV6/5t83/Zbiw+b7uAYBEHAOgS5rRs4xNfsskbVORVeGU1Ar04X2pQ9P+i7XV+jucE7lteEntHNVVevtUT0VqKmG6eAMAs4jgBqqzWXy0ZP+iSym5yokevG5N+nikBbw/lGapeT57iChDxK6UqeRXs/n9VNu82yx2WQkDwIgEIdApDYU5z68LSYgm/mbT/qG