angular2-json-schema-form
Version:
Angular 2 JSON Schema Form builder
197 lines • 8.07 kB
JavaScript
"use strict";
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;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require("@angular/core");
var _ = require("lodash");
var json_schema_form_service_1 = require("../../library/json-schema-form.service");
var index_1 = require("../../library/utilities/index");
var MaterialDesignComponent = (function () {
function MaterialDesignComponent(changeDetector, jsf) {
this.changeDetector = changeDetector;
this.jsf = jsf;
this.controlInitialized = false;
this.formControl = null;
}
MaterialDesignComponent.prototype.ngOnInit = function () {
this.initializeControl();
};
MaterialDesignComponent.prototype.ngOnChanges = function () {
if (!this.controlInitialized)
this.initializeControl();
};
MaterialDesignComponent.prototype.initializeControl = function () {
if (this.layoutNode) {
this.options = _.cloneDeep(this.layoutNode.options);
this.widgetLayoutNode = Object.assign({}, this.layoutNode, { options: _.cloneDeep(this.layoutNode.options) });
this.widgetOptions = this.widgetLayoutNode.options;
this.layoutPointer = this.jsf.getLayoutPointer(this);
this.formControl = this.jsf.getControl(this);
this.options.title = this.setTitle();
var type = this.layoutNode.type;
switch (type) {
case 'email':
case 'integer':
case 'number':
case 'password':
case 'search':
case 'tel':
case 'text':
case 'url':
case 'color':
case 'date':
case 'datetime':
case 'datetime-local':
case 'month':
case 'range':
case 'time':
case 'week':
case 'hidden':
case 'image':
case 'updown':
case 'date-time':
case 'alt-datetime':
case 'alt-date':
this.controlType = 'input';
if (type === 'integer' || type === 'updown') {
this.inputType = 'number';
}
else if (type === 'date-time' || type === 'alt-datetime') {
this.inputType = 'datetime-local';
}
else if (type === 'alt-date') {
this.inputType = 'date';
}
else {
this.inputType = type;
}
break;
case 'textarea':
this.controlType = 'textarea';
break;
case 'file':
this.controlType = 'file';
break;
case 'select':
this.controlType = 'select';
break;
case 'checkbox':
this.controlType = 'checkbox';
break;
case 'checkboxes':
case 'checkboxes-inline':
case 'checkboxbuttons':
this.controlType = 'checkboxes';
break;
case 'radio':
case 'radios':
case 'radios-inline':
case 'radiobuttons':
this.controlType = 'radios';
break;
case 'reset':
case 'submit':
case 'button':
this.controlType = 'button';
break;
case 'fieldset':
case 'array':
case 'tab':
case 'advancedfieldset':
case 'authfieldset':
case 'optionfieldset':
case 'selectfieldset':
case 'section':
case 'conditional':
case 'actions':
case 'wizard':
this.controlType = 'fieldset';
break;
case 'tabs':
case 'tabarray':
this.controlType = 'tabs';
break;
case 'help':
case 'message':
case 'msg':
case 'html':
this.controlType = 'message';
break;
case 'template':
this.controlType = 'template';
break;
default:
this.controlType = this.layoutNode.type;
}
this.controlInitialized = true;
}
};
MaterialDesignComponent.prototype.setTitle = function () {
switch (this.layoutNode.type) {
case 'array':
case 'button':
case 'checkbox':
case 'conditional':
case 'fieldset':
case 'help':
case 'msg':
case 'message':
case 'section':
case 'submit':
case 'tabarray':
case '$ref':
return null;
case 'advancedfieldset':
this.widgetOptions.expandable = true;
this.widgetOptions.title = 'Advanced options';
return null;
case 'authfieldset':
this.widgetOptions.expandable = true;
this.widgetOptions.title = 'Authentication settings';
return null;
default:
var thisTitle = this.options.title || (isNaN(this.layoutNode.name) && this.layoutNode.name !== '-' ?
index_1.toTitleCase(this.layoutNode.name) : null);
this.widgetOptions.title = null;
if (!thisTitle)
return null;
if (thisTitle.indexOf('{') === -1 || !this.formControl || !this.dataIndex) {
return thisTitle;
}
return this.jsf.parseText(thisTitle, this.jsf.getControlValue(this), this.jsf.getControlGroup(this).value, this.dataIndex[this.dataIndex.length - 1]);
}
};
return MaterialDesignComponent;
}());
__decorate([
core_1.Input(),
__metadata("design:type", Number)
], MaterialDesignComponent.prototype, "formID", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Object)
], MaterialDesignComponent.prototype, "layoutNode", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Array)
], MaterialDesignComponent.prototype, "layoutIndex", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Array)
], MaterialDesignComponent.prototype, "dataIndex", void 0);
MaterialDesignComponent = __decorate([
core_1.Component({
selector: 'material-design-framework',
template: "\n <select-widget-widget\n [formID]=\"formID\"\n [layoutNode]=\"layoutNode\"\n [dataIndex]=\"dataIndex\"\n [layoutIndex]=\"layoutIndex\"></select-widget-widget>\n "
}),
__metadata("design:paramtypes", [core_1.ChangeDetectorRef,
json_schema_form_service_1.JsonSchemaFormService])
], MaterialDesignComponent);
exports.MaterialDesignComponent = MaterialDesignComponent;
//# sourceMappingURL=material-design.component.js.map