@ajsf/bootstrap3
Version:
Angular JSON Schema Form builder using Bootstrap 3 UI
297 lines (290 loc) • 21.6 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, Injectable, NgModule } from '@angular/core';
import * as i1 from '@ajsf/core';
import { inArray, addClasses, Framework, JsonSchemaFormModule, WidgetLibraryModule, JsonSchemaFormService, FrameworkLibraryService, WidgetLibraryService } from '@ajsf/core';
import cloneDeep from 'lodash/cloneDeep';
import map from 'lodash/map';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
/**
* Bootstrap 3 framework for Angular JSON Schema Form.
*/
class Bootstrap3FrameworkComponent {
constructor(changeDetector, jsf) {
this.changeDetector = changeDetector;
this.jsf = jsf;
this.frameworkInitialized = false;
this.formControl = null;
this.debugOutput = '';
this.debug = '';
this.parentArray = null;
this.isOrderable = false;
}
get showRemoveButton() {
if (!this.options.removable || this.options.readonly ||
this.layoutNode.type === '$ref') {
return false;
}
if (this.layoutNode.recursiveReference) {
return true;
}
if (!this.layoutNode.arrayItem || !this.parentArray) {
return false;
}
// If array length <= minItems, don't allow removing any items
return this.parentArray.items.length - 1 <= this.parentArray.options.minItems ? false :
// For removable list items, allow removing any item
this.layoutNode.arrayItemType === 'list' ? true :
// For removable tuple items, only allow removing last item in list
this.layoutIndex[this.layoutIndex.length - 1] === this.parentArray.items.length - 2;
}
ngOnInit() {
this.initializeFramework();
if (this.layoutNode.arrayItem && this.layoutNode.type !== '$ref') {
this.parentArray = this.jsf.getParentNode(this);
if (this.parentArray) {
this.isOrderable = this.layoutNode.arrayItemType === 'list' &&
!this.options.readonly && this.parentArray.options.orderable;
}
}
}
ngOnChanges() {
if (!this.frameworkInitialized) {
this.initializeFramework();
}
}
initializeFramework() {
if (this.layoutNode) {
this.options = cloneDeep(this.layoutNode.options);
this.widgetLayoutNode = {
...this.layoutNode,
options: cloneDeep(this.layoutNode.options)
};
this.widgetOptions = this.widgetLayoutNode.options;
this.formControl = this.jsf.getFormControl(this);
this.options.isInputWidget = inArray(this.layoutNode.type, [
'button', 'checkbox', 'checkboxes-inline', 'checkboxes', 'color',
'date', 'datetime-local', 'datetime', 'email', 'file', 'hidden',
'image', 'integer', 'month', 'number', 'password', 'radio',
'radiobuttons', 'radios-inline', 'radios', 'range', 'reset', 'search',
'select', 'submit', 'tel', 'text', 'textarea', 'time', 'url', 'week'
]);
this.options.title = this.setTitle();
this.options.htmlClass =
addClasses(this.options.htmlClass, 'schema-form-' + this.layoutNode.type);
if (this.layoutNode.type !== 'flex') {
this.options.htmlClass =
this.layoutNode.type === 'array' ?
addClasses(this.options.htmlClass, 'list-group') :
this.layoutNode.arrayItem && this.layoutNode.type !== '$ref' ?
addClasses(this.options.htmlClass, 'list-group-item') :
addClasses(this.options.htmlClass, 'form-group');
}
this.widgetOptions.htmlClass = '';
this.options.labelHtmlClass =
addClasses(this.options.labelHtmlClass, 'control-label');
this.widgetOptions.activeClass =
addClasses(this.widgetOptions.activeClass, 'active');
this.options.fieldAddonLeft =
this.options.fieldAddonLeft || this.options.prepend;
this.options.fieldAddonRight =
this.options.fieldAddonRight || this.options.append;
// Add asterisk to titles if required
if (this.options.title && this.layoutNode.type !== 'tab' &&
!this.options.notitle && this.options.required &&
!this.options.title.includes('*')) {
this.options.title += ' <strong class="text-danger">*</strong>';
}
// Set miscelaneous styles and settings for each control type
switch (this.layoutNode.type) {
// Checkbox controls
case 'checkbox':
case 'checkboxes':
this.widgetOptions.htmlClass = addClasses(this.widgetOptions.htmlClass, 'checkbox');
break;
case 'checkboxes-inline':
this.widgetOptions.htmlClass = addClasses(this.widgetOptions.htmlClass, 'checkbox');
this.widgetOptions.itemLabelHtmlClass = addClasses(this.widgetOptions.itemLabelHtmlClass, 'checkbox-inline');
break;
// Radio controls
case 'radio':
case 'radios':
this.widgetOptions.htmlClass = addClasses(this.widgetOptions.htmlClass, 'radio');
break;
case 'radios-inline':
this.widgetOptions.htmlClass = addClasses(this.widgetOptions.htmlClass, 'radio');
this.widgetOptions.itemLabelHtmlClass = addClasses(this.widgetOptions.itemLabelHtmlClass, 'radio-inline');
break;
// Button sets - checkboxbuttons and radiobuttons
case 'checkboxbuttons':
case 'radiobuttons':
this.widgetOptions.htmlClass = addClasses(this.widgetOptions.htmlClass, 'btn-group');
this.widgetOptions.itemLabelHtmlClass = addClasses(this.widgetOptions.itemLabelHtmlClass, 'btn');
this.widgetOptions.itemLabelHtmlClass = addClasses(this.widgetOptions.itemLabelHtmlClass, this.options.style || 'btn-default');
this.widgetOptions.fieldHtmlClass = addClasses(this.widgetOptions.fieldHtmlClass, 'sr-only');
break;
// Single button controls
case 'button':
case 'submit':
this.widgetOptions.fieldHtmlClass = addClasses(this.widgetOptions.fieldHtmlClass, 'btn');
this.widgetOptions.fieldHtmlClass = addClasses(this.widgetOptions.fieldHtmlClass, this.options.style || 'btn-info');
break;
// Containers - arrays and fieldsets
case 'array':
case 'fieldset':
case 'section':
case 'conditional':
case 'advancedfieldset':
case 'authfieldset':
case 'selectfieldset':
case 'optionfieldset':
this.options.messageLocation = 'top';
break;
case 'tabarray':
case 'tabs':
this.widgetOptions.htmlClass = addClasses(this.widgetOptions.htmlClass, 'tab-content');
this.widgetOptions.fieldHtmlClass = addClasses(this.widgetOptions.fieldHtmlClass, 'tab-pane');
this.widgetOptions.labelHtmlClass = addClasses(this.widgetOptions.labelHtmlClass, 'nav nav-tabs');
break;
// 'Add' buttons - references
case '$ref':
this.widgetOptions.fieldHtmlClass = addClasses(this.widgetOptions.fieldHtmlClass, 'btn pull-right');
this.widgetOptions.fieldHtmlClass = addClasses(this.widgetOptions.fieldHtmlClass, this.options.style || 'btn-default');
this.options.icon = 'glyphicon glyphicon-plus';
break;
// Default - including regular inputs
default:
this.widgetOptions.fieldHtmlClass = addClasses(this.widgetOptions.fieldHtmlClass, 'form-control');
}
if (this.formControl) {
this.updateHelpBlock(this.formControl.status);
this.formControl.statusChanges.subscribe(status => this.updateHelpBlock(status));
if (this.options.debug) {
const vars = [];
this.debugOutput = map(vars, thisVar => JSON.stringify(thisVar, null, 2)).join('\n');
}
}
this.frameworkInitialized = true;
}
}
updateHelpBlock(status) {
this.options.helpBlock = status === 'INVALID' &&
this.options.enableErrorState && this.formControl.errors &&
(this.formControl.dirty || this.options.feedbackOnRender) ?
this.jsf.formatErrors(this.formControl.errors, this.options.validationMessages) :
this.options.description || this.options.help || null;
}
setTitle() {
switch (this.layoutNode.type) {
case 'button':
case 'checkbox':
case 'section':
case 'help':
case 'msg':
case 'submit':
case 'message':
case 'tabarray':
case 'tabs':
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;
case 'fieldset':
this.widgetOptions.title = this.options.title;
return null;
default:
this.widgetOptions.title = null;
return this.jsf.setItemTitle(this);
}
}
removeItem() {
this.jsf.removeItem(this);
}
}
Bootstrap3FrameworkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: Bootstrap3FrameworkComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
Bootstrap3FrameworkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: Bootstrap3FrameworkComponent, selector: "bootstrap-3-framework", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, usesOnChanges: true, ngImport: i0, template: "<div\n [class]=\"options?.htmlClass || ''\"\n [class.has-feedback]=\"options?.feedback && options?.isInputWidget &&\n (formControl?.dirty || options?.feedbackOnRender)\"\n [class.has-error]=\"options?.enableErrorState && formControl?.errors &&\n (formControl?.dirty || options?.feedbackOnRender)\"\n [class.has-success]=\"options?.enableSuccessState && !formControl?.errors &&\n (formControl?.dirty || options?.feedbackOnRender)\">\n\n <button *ngIf=\"showRemoveButton\"\n class=\"close pull-right\"\n type=\"button\"\n (click)=\"removeItem()\">\n <span aria-hidden=\"true\">×</span>\n <span class=\"sr-only\">Close</span>\n </button>\n <div *ngIf=\"options?.messageLocation === 'top'\">\n <p *ngIf=\"options?.helpBlock\"\n class=\"help-block\"\n [innerHTML]=\"options?.helpBlock\"></p>\n </div>\n\n <label *ngIf=\"options?.title && layoutNode?.type !== 'tab'\"\n [attr.for]=\"'control' + layoutNode?._id\"\n [class]=\"options?.labelHtmlClass || ''\"\n [class.sr-only]=\"options?.notitle\"\n [innerHTML]=\"options?.title\"></label>\n <p *ngIf=\"layoutNode?.type === 'submit' && jsf?.formOptions?.fieldsRequired\">\n <strong class=\"text-danger\">*</strong> = required fields\n </p>\n <div [class.input-group]=\"options?.fieldAddonLeft || options?.fieldAddonRight\">\n <span *ngIf=\"options?.fieldAddonLeft\"\n class=\"input-group-addon\"\n [innerHTML]=\"options?.fieldAddonLeft\"></span>\n\n <select-widget-widget\n [layoutNode]=\"widgetLayoutNode\"\n [dataIndex]=\"dataIndex\"\n [layoutIndex]=\"layoutIndex\"></select-widget-widget>\n\n <span *ngIf=\"options?.fieldAddonRight\"\n class=\"input-group-addon\"\n [innerHTML]=\"options?.fieldAddonRight\"></span>\n </div>\n\n <span *ngIf=\"options?.feedback && options?.isInputWidget &&\n !options?.fieldAddonRight && !layoutNode.arrayItem &&\n (formControl?.dirty || options?.feedbackOnRender)\"\n [class.glyphicon-ok]=\"options?.enableSuccessState && !formControl?.errors\"\n [class.glyphicon-remove]=\"options?.enableErrorState && formControl?.errors\"\n aria-hidden=\"true\"\n class=\"form-control-feedback glyphicon\"></span>\n <div *ngIf=\"options?.messageLocation !== 'top'\">\n <p *ngIf=\"options?.helpBlock\"\n class=\"help-block\"\n [innerHTML]=\"options?.helpBlock\"></p>\n </div>\n</div>\n\n<div *ngIf=\"debug && debugOutput\">debug:\n <pre>{{debugOutput}}</pre>\n</div>\n", styles: [":host ::ng-deep .list-group-item .form-control-feedback{top:40px}:host ::ng-deep .checkbox,:host ::ng-deep .radio{margin-top:0;margin-bottom:0}:host ::ng-deep .checkbox-inline,:host ::ng-deep .checkbox-inline+.checkbox-inline,:host ::ng-deep .checkbox-inline+.radio-inline,:host ::ng-deep .radio-inline,:host ::ng-deep .radio-inline+.radio-inline,:host ::ng-deep .radio-inline+.checkbox-inline{margin-left:0;margin-right:10px}:host ::ng-deep .checkbox-inline:last-child,:host ::ng-deep .radio-inline:last-child{margin-right:0}:host ::ng-deep .ng-invalid.ng-touched{border:1px solid #f44336}\n"], dependencies: [{ kind: "component", type: i1.SelectWidgetComponent, selector: "select-widget-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: Bootstrap3FrameworkComponent, decorators: [{
type: Component,
args: [{ selector: 'bootstrap-3-framework', template: "<div\n [class]=\"options?.htmlClass || ''\"\n [class.has-feedback]=\"options?.feedback && options?.isInputWidget &&\n (formControl?.dirty || options?.feedbackOnRender)\"\n [class.has-error]=\"options?.enableErrorState && formControl?.errors &&\n (formControl?.dirty || options?.feedbackOnRender)\"\n [class.has-success]=\"options?.enableSuccessState && !formControl?.errors &&\n (formControl?.dirty || options?.feedbackOnRender)\">\n\n <button *ngIf=\"showRemoveButton\"\n class=\"close pull-right\"\n type=\"button\"\n (click)=\"removeItem()\">\n <span aria-hidden=\"true\">×</span>\n <span class=\"sr-only\">Close</span>\n </button>\n <div *ngIf=\"options?.messageLocation === 'top'\">\n <p *ngIf=\"options?.helpBlock\"\n class=\"help-block\"\n [innerHTML]=\"options?.helpBlock\"></p>\n </div>\n\n <label *ngIf=\"options?.title && layoutNode?.type !== 'tab'\"\n [attr.for]=\"'control' + layoutNode?._id\"\n [class]=\"options?.labelHtmlClass || ''\"\n [class.sr-only]=\"options?.notitle\"\n [innerHTML]=\"options?.title\"></label>\n <p *ngIf=\"layoutNode?.type === 'submit' && jsf?.formOptions?.fieldsRequired\">\n <strong class=\"text-danger\">*</strong> = required fields\n </p>\n <div [class.input-group]=\"options?.fieldAddonLeft || options?.fieldAddonRight\">\n <span *ngIf=\"options?.fieldAddonLeft\"\n class=\"input-group-addon\"\n [innerHTML]=\"options?.fieldAddonLeft\"></span>\n\n <select-widget-widget\n [layoutNode]=\"widgetLayoutNode\"\n [dataIndex]=\"dataIndex\"\n [layoutIndex]=\"layoutIndex\"></select-widget-widget>\n\n <span *ngIf=\"options?.fieldAddonRight\"\n class=\"input-group-addon\"\n [innerHTML]=\"options?.fieldAddonRight\"></span>\n </div>\n\n <span *ngIf=\"options?.feedback && options?.isInputWidget &&\n !options?.fieldAddonRight && !layoutNode.arrayItem &&\n (formControl?.dirty || options?.feedbackOnRender)\"\n [class.glyphicon-ok]=\"options?.enableSuccessState && !formControl?.errors\"\n [class.glyphicon-remove]=\"options?.enableErrorState && formControl?.errors\"\n aria-hidden=\"true\"\n class=\"form-control-feedback glyphicon\"></span>\n <div *ngIf=\"options?.messageLocation !== 'top'\">\n <p *ngIf=\"options?.helpBlock\"\n class=\"help-block\"\n [innerHTML]=\"options?.helpBlock\"></p>\n </div>\n</div>\n\n<div *ngIf=\"debug && debugOutput\">debug:\n <pre>{{debugOutput}}</pre>\n</div>\n", styles: [":host ::ng-deep .list-group-item .form-control-feedback{top:40px}:host ::ng-deep .checkbox,:host ::ng-deep .radio{margin-top:0;margin-bottom:0}:host ::ng-deep .checkbox-inline,:host ::ng-deep .checkbox-inline+.checkbox-inline,:host ::ng-deep .checkbox-inline+.radio-inline,:host ::ng-deep .radio-inline,:host ::ng-deep .radio-inline+.radio-inline,:host ::ng-deep .radio-inline+.checkbox-inline{margin-left:0;margin-right:10px}:host ::ng-deep .checkbox-inline:last-child,:host ::ng-deep .radio-inline:last-child{margin-right:0}:host ::ng-deep .ng-invalid.ng-touched{border:1px solid #f44336}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
type: Input
}], layoutIndex: [{
type: Input
}], dataIndex: [{
type: Input
}] } });
// Bootstrap 3 Framework
// https://github.com/valor-software/ng2-bootstrap
class Bootstrap3Framework extends Framework {
constructor() {
super(...arguments);
this.name = 'bootstrap-3';
this.framework = Bootstrap3FrameworkComponent;
this.stylesheets = [
'//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css',
'//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css',
];
this.scripts = [
'//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',
'//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js',
'//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js',
];
}
}
Bootstrap3Framework.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: Bootstrap3Framework, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
Bootstrap3Framework.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: Bootstrap3Framework });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: Bootstrap3Framework, decorators: [{
type: Injectable
}] });
class Bootstrap3FrameworkModule {
}
Bootstrap3FrameworkModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: Bootstrap3FrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
Bootstrap3FrameworkModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: Bootstrap3FrameworkModule, declarations: [Bootstrap3FrameworkComponent], imports: [JsonSchemaFormModule,
CommonModule,
WidgetLibraryModule], exports: [JsonSchemaFormModule,
Bootstrap3FrameworkComponent] });
Bootstrap3FrameworkModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: Bootstrap3FrameworkModule, providers: [
JsonSchemaFormService,
FrameworkLibraryService,
WidgetLibraryService,
{ provide: Framework, useClass: Bootstrap3Framework, multi: true },
], imports: [JsonSchemaFormModule,
CommonModule,
WidgetLibraryModule, JsonSchemaFormModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: Bootstrap3FrameworkModule, decorators: [{
type: NgModule,
args: [{
imports: [
JsonSchemaFormModule,
CommonModule,
WidgetLibraryModule,
],
declarations: [
Bootstrap3FrameworkComponent,
],
exports: [
JsonSchemaFormModule,
Bootstrap3FrameworkComponent,
],
providers: [
JsonSchemaFormService,
FrameworkLibraryService,
WidgetLibraryService,
{ provide: Framework, useClass: Bootstrap3Framework, multi: true },
]
}]
}] });
/*
* Public API Surface of @ajsf/bootstrap3
*/
/**
* Generated bundle index. Do not edit.
*/
export { Bootstrap3Framework, Bootstrap3FrameworkComponent, Bootstrap3FrameworkModule };
//# sourceMappingURL=ajsf-bootstrap3.mjs.map