",
14 | "license": "MIT",
15 | "bugs": {
16 | "url": "https://github.com/formioapp/ngFormBuilder/issues"
17 | },
18 | "homepage": "https://github.com/formioapp/ngFormBuilder",
19 | "devDependencies": {
20 | "babel-core": "^6.26.3",
21 | "babel-preset-env": "^1.7.0",
22 | "babelify": "^10.0.0",
23 | "brfs": "^2.0.2",
24 | "browserify": "^16.5.0",
25 | "del": "^5.1.0",
26 | "eslint-config-formio": "^1.1.0",
27 | "gulp": "^4.0.2",
28 | "gulp-concat": "^2.6.0",
29 | "gulp-cssnano": "^2.1.3",
30 | "gulp-derequire": "^2.1.0",
31 | "gulp-eslint": "^6.0.0",
32 | "gulp-filter": "^6.0.0",
33 | "gulp-livereload": "^4.0.2",
34 | "gulp-load-plugins": "^2.0.2",
35 | "gulp-rename": "^1.4.0",
36 | "gulp-replace": "^1.0.0",
37 | "gulp-streamify": "^1.0.2",
38 | "gulp-uglify": "^3.0.2",
39 | "main-bower-files": "^2.13.3",
40 | "natives": "^1.1.6",
41 | "run-sequence": "^2.2.0",
42 | "shallow-copy": "0.0.1",
43 | "strictify": "^0.2.0",
44 | "uglifyify": "^5.0.2",
45 | "vinyl-source-stream": "^2.0.0",
46 | "watchify": "^3.11.1"
47 | },
48 | "browserify": {
49 | "transform": [
50 | "strictify",
51 | "brfs"
52 | ]
53 | },
54 | "dependencies": {
55 | "angular": "^1.7.9",
56 | "angular-ckeditor-legacy": "^1.0.3",
57 | "angular-drag-and-drop-lists": "^2.1.0",
58 | "angular-ui-bootstrap": "^2.5.6",
59 | "formiojs": "^3.28.1",
60 | "lodash": "^4.17.15",
61 | "ng-dialog": "^1.4.0",
62 | "ng-formio": "^2.41.0",
63 | "ng-tags-input": "^3.2.0",
64 | "vanilla-text-mask": "^5.1.1"
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/src/components/address.js:
--------------------------------------------------------------------------------
1 | module.exports = function(app) {
2 | app.config([
3 | 'formioComponentsProvider',
4 | function(formioComponentsProvider) {
5 | formioComponentsProvider.register('address', {
6 | icon: 'fa fa-home',
7 | views: [
8 | {
9 | name: 'Display',
10 | template: 'formio/components/address/display.html'
11 | },
12 | {
13 | name: 'Validation',
14 | template: 'formio/components/address/validate.html'
15 | },
16 | {
17 | name: 'API',
18 | template: 'formio/components/common/api.html'
19 | },
20 | {
21 | name: 'Layout',
22 | template: 'formio/components/common/layout.html'
23 | },
24 | {
25 | name: 'Conditional',
26 | template: 'formio/components/common/conditional.html'
27 | }
28 | ],
29 | documentation: 'http://help.form.io/userguide/#address'
30 | });
31 | }
32 | ]);
33 | app.run([
34 | '$templateCache',
35 | function($templateCache) {
36 | // Create the settings markup.
37 | $templateCache.put('formio/components/address/display.html',
38 | '' +
39 | '' +
48 | '{{\'Region Bias\' | formioTranslate}} ' +
49 | '
' +
51 | '' +
52 | '{{\'Google Maps API Key\' | formioTranslate}} ' +
53 | '
' +
55 | ' '
66 | );
67 |
68 | $templateCache.put('formio/components/address/validate.html',
69 | '' +
70 | ' '
74 | );
75 | }
76 | ]);
77 | };
78 |
--------------------------------------------------------------------------------
/src/components/button.js:
--------------------------------------------------------------------------------
1 | module.exports = function(app) {
2 | app.config([
3 | 'formioComponentsProvider',
4 | 'FORM_OPTIONS',
5 | function(
6 | formioComponentsProvider,
7 | FORM_OPTIONS
8 | ) {
9 | formioComponentsProvider.register('button', {
10 | onEdit: ['$scope', function($scope) {
11 | $scope.actions = FORM_OPTIONS.actions;
12 | $scope.sizes = FORM_OPTIONS.sizes;
13 | $scope.themes = FORM_OPTIONS.themes;
14 | }],
15 | icon: 'fa fa-stop',
16 | views: [
17 | {
18 | name: 'Display',
19 | template: 'formio/components/button/display.html'
20 | },
21 | {
22 | name: 'API',
23 | template: 'formio/components/common/api.html'
24 | },
25 | {
26 | name: 'Layout',
27 | template: 'formio/components/common/layout.html'
28 | },
29 | {
30 | name: 'Conditional',
31 | template: 'formio/components/common/conditional.html'
32 | }
33 | ],
34 | documentation: 'http://help.form.io/userguide/#button'
35 | });
36 | }
37 | ]);
38 | app.run([
39 | '$templateCache',
40 | function($templateCache) {
41 | // Create the settings markup.
42 | $templateCache.put('formio/components/button/display.html',
43 | '' +
44 | '' +
46 | '{{\'Action\' | formioTranslate}} ' +
47 | '
' +
49 | '' +
50 | ' {{\'Submission State\' | formioTranslate}} ' +
51 | '
' +
53 | '' +
54 | ' {{\'Button Event\' | formioTranslate}} ' +
55 | '
' +
57 | '' +
58 | ' {{\'Button Url\'' +
59 | ' | formioTranslate}} ' +
60 | '
' +
63 | '' +
67 | ' {{\'Button Custom Logic\' | formioTranslate}} ' +
68 | '
' +
70 | '' +
71 | '{{\'Theme\' | formioTranslate}} ' +
72 | '
' +
74 | '' +
75 | '{{\'Size\' | formioTranslate}} ' +
76 | '
' +
78 | ' '
88 | );
89 | }
90 | ]);
91 | };
92 |
--------------------------------------------------------------------------------
/src/components/checkbox.js:
--------------------------------------------------------------------------------
1 | module.exports = function(app) {
2 | app.config([
3 | 'formioComponentsProvider',
4 | function(formioComponentsProvider) {
5 | formioComponentsProvider.register('checkbox', {
6 | icon: 'fa fa-check-square',
7 | onEdit: ['$scope', function($scope) {
8 | $scope.inputTypes = [
9 | {
10 | name: 'checkbox',
11 | title: 'Checkbox'
12 | },
13 | {
14 | name: 'radio',
15 | title: 'Radio'
16 | }
17 | ];
18 |
19 | $scope.labelPositions = [
20 | {
21 | value: 'top',
22 | title: 'Top'
23 | },
24 | {
25 | value: 'left',
26 | title: 'Left'
27 | },
28 | {
29 | value: 'right',
30 | title: 'Right'
31 | },
32 | {
33 | value: 'bottom',
34 | title: 'Bottom'
35 | }
36 | ];
37 |
38 | if (!$scope.component.labelPosition) {
39 | $scope.component.labelPosition = 'right';
40 | }
41 | }],
42 | views: [
43 | {
44 | name: 'Display',
45 | template: 'formio/components/checkbox/display.html'
46 | },
47 | {
48 | name: 'Data',
49 | template: 'formio/components/common/data.html'
50 | },
51 | {
52 | name: 'Validation',
53 | template: 'formio/components/checkbox/validate.html'
54 | },
55 | {
56 | name: 'API',
57 | template: 'formio/components/common/api.html'
58 | },
59 | {
60 | name: 'Layout',
61 | template: 'formio/components/common/layout.html'
62 | },
63 | {
64 | name: 'Conditional',
65 | template: 'formio/components/common/conditional.html'
66 | }
67 | ],
68 | documentation: 'http://help.form.io/userguide/#checkbox'
69 | });
70 | }
71 | ]);
72 | app.run([
73 | '$templateCache',
74 | function($templateCache) {
75 | // Create the settings markup.
76 | $templateCache.put('formio/components/checkbox/display.html',
77 | '' +
78 | '' +
81 | '{{\'Label Position\' | formioTranslate}} ' +
82 | '
' +
84 | '' +
87 | '{{\'Input Type\' | formioTranslate}} ' +
88 | '
' +
90 | '' +
91 | ' {{\'Radio Key\' | formioTranslate}} ' +
92 | '
' +
94 | '' +
95 | ' {{\'Radio Value\' | formioTranslate}} ' +
96 | '
' +
98 | ' '
111 | );
112 |
113 | $templateCache.put('formio/components/checkbox/validate.html',
114 | '' +
115 | ' '
119 | );
120 | }
121 | ]);
122 | };
123 |
--------------------------------------------------------------------------------
/src/components/columns.js:
--------------------------------------------------------------------------------
1 | module.exports = function(app) {
2 | app.config([
3 | 'formioComponentsProvider',
4 | function(formioComponentsProvider) {
5 | formioComponentsProvider.register('columns', {
6 | onEdit: ['$scope', function($scope) {
7 | $scope.removeColumn = function(index) {
8 | $scope.component.columns.splice(index, 1);
9 | };
10 | $scope.addColumn = function() {
11 | $scope.component.columns.push({components: [], width: 1, offset: 0, push: 0, pull: 0});
12 | };
13 | }],
14 | fbtemplate: 'formio/formbuilder/columns.html',
15 | icon: 'fa fa-columns',
16 | documentation: 'http://help.form.io/userguide/#columns',
17 | noDndOverlay: true,
18 | confirmRemove: true,
19 | views: [
20 | {
21 | name: 'Display',
22 | template: 'formio/components/columns/display.html'
23 | },
24 | {
25 | name: 'API',
26 | template: 'formio/components/common/api.html'
27 | },
28 | {
29 | name: 'Conditional',
30 | template: 'formio/components/common/conditional.html'
31 | }
32 | ]
33 | });
34 | }
35 | ]);
36 | app.run([
37 | '$templateCache',
38 | function($templateCache) {
39 | $templateCache.put('formio/formbuilder/columns.html',
40 | '' +
41 | '
' +
42 | '
' +
44 | '
' +
48 | ' '
79 | );
80 | }
81 | ]);
82 | };
83 |
--------------------------------------------------------------------------------
/src/components/container.js:
--------------------------------------------------------------------------------
1 | module.exports = function(app) {
2 | app.config([
3 | 'formioComponentsProvider',
4 | function(formioComponentsProvider) {
5 | formioComponentsProvider.register('container', {
6 | fbtemplate: 'formio/formbuilder/container.html',
7 | views: [
8 | {
9 | name: 'Display',
10 | template: 'formio/components/container/display.html'
11 | }, {
12 | name: 'API',
13 | template: 'formio/components/common/api.html'
14 | },
15 | {
16 | name: 'Conditional',
17 | template: 'formio/components/common/conditional.html'
18 | }
19 | ],
20 | documentation: 'http://help.form.io/userguide/#container',
21 | noDndOverlay: true,
22 | confirmRemove: true
23 | });
24 | }
25 | ]);
26 |
27 | app.run([
28 | '$templateCache',
29 | function($templateCache) {
30 | $templateCache.put('formio/components/container/display.html',
31 | '' +
32 | ' '
44 | );
45 |
46 | $templateCache.put('formio/formbuilder/container.html',
47 | '' +
48 | '' +
49 | '{{ component.label }} ' +
50 | ' ' +
52 | '' +
54 | '{{ component.label }} ' +
55 | ' ' +
57 | ' '
58 | );
59 | }
60 | ]);
61 | };
62 |
--------------------------------------------------------------------------------
/src/components/content.js:
--------------------------------------------------------------------------------
1 | module.exports = function(app) {
2 | app.config([
3 | 'formioComponentsProvider',
4 | function(formioComponentsProvider) {
5 | formioComponentsProvider.register('content', {
6 | fbtemplate: 'formio/formbuilder/content.html',
7 | icon: 'fa fa-html5',
8 | documentation: 'http://help.form.io/userguide/#content-component',
9 | controller: function(settings, $scope) {
10 | $scope.ckeditorOptions = {
11 | allowedContent: true,
12 | toolbarGroups: [
13 | {name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
14 | {name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi', 'paragraph', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']},
15 | {name: 'links', groups: ['links']},
16 | {name: 'insert', groups: ['insert']},
17 | '/',
18 | {name: 'styles', groups: ['Styles', 'Format', 'Font', 'FontSize']},
19 | {name: 'colors', groups: ['colors']},
20 | {name: 'clipboard', groups: ['clipboard', 'undo']},
21 | {name: 'editing', groups: ['find', 'selection', 'spellchecker', 'editing']},
22 | {name: 'document', groups: ['mode', 'document', 'doctools']},
23 | {name: 'others', groups: ['others']},
24 | {name: 'tools', groups: ['tools']}
25 | ],
26 | extraPlugins: 'justify,font',
27 | removeButtons: 'Cut,Copy,Paste,Underline,Subscript,Superscript,Scayt,About',
28 | uiColor: '#eeeeee',
29 | height: '400px',
30 | width: '100%'
31 | };
32 | $scope.$watch('component.html', function() {
33 | $scope.$emit('formBuilder:update', $scope.component);
34 | });
35 | },
36 | views: [
37 | {
38 | name: 'Display',
39 | template: 'formio/components/common/display.html'
40 | },
41 | {
42 | name: 'API',
43 | template: 'formio/components/common/api.html'
44 | },
45 | {
46 | name: 'Conditional',
47 | template: 'formio/components/common/conditional.html'
48 | }
49 | ]
50 | });
51 | }
52 | ]);
53 | app.run([
54 | '$templateCache',
55 | function($templateCache) {
56 | $templateCache.put('formio/formbuilder/content.html',
57 | '' +
58 | '' +
58 | '
' +
59 | ''
60 | );
61 | }
62 | ]);
63 | };
64 |
--------------------------------------------------------------------------------
/src/components/datagrid.js:
--------------------------------------------------------------------------------
1 | module.exports = function(app) {
2 | app.config([
3 | 'formioComponentsProvider',
4 | 'FORM_OPTIONS',
5 | function(
6 | formioComponentsProvider,
7 | FORM_OPTIONS
8 | ) {
9 | formioComponentsProvider.register('datagrid', {
10 | fbtemplate: 'formio/formbuilder/datagrid.html',
11 | icon: 'fa fa-th',
12 | onEdit: ['$scope', function($scope) {
13 | $scope.themes = FORM_OPTIONS.themes;
14 | if (!$scope.component.addAnotherPosition) {
15 | $scope.component.addAnotherPosition = 'bottom';
16 | }
17 | $scope.addAnotherPosition = [
18 | {
19 | value: 'top',
20 | title: 'Top'
21 | },
22 | {
23 | value: 'bottom',
24 | title: 'Bottom'
25 | },
26 | {
27 | value: 'both',
28 | title: 'Both'
29 | }
30 | ];
31 | }],
32 | views: [
33 | {
34 | name: 'Display',
35 | template: 'formio/components/datagrid/display.html'
36 | },
37 | {
38 | name: 'Validation',
39 | template: 'formio/components/datagrid/validate.html'
40 | },
41 | {
42 | name: 'API',
43 | template: 'formio/components/common/api.html'
44 | },
45 | {
46 | name: 'Conditional',
47 | template: 'formio/components/common/conditional.html'
48 | }
49 | ],
50 | documentation: 'http://help.form.io/userguide/#datagrid',
51 | noDndOverlay: true,
52 | confirmRemove: true
53 | });
54 | }
55 | ]);
56 |
57 | app.run([
58 | '$templateCache',
59 | function($templateCache) {
60 | $templateCache.put('formio/components/datagrid/display.html',
61 | '' +
62 | '' +
68 | '{{\'Add Another Position\' | formioTranslate}} ' +
69 | '
' +
71 | ' '
84 | );
85 |
86 | $templateCache.put('formio/components/datagrid/validate.html',
87 | '' +
88 | ' '
93 | );
94 | }
95 | ]);
96 | };
97 |
--------------------------------------------------------------------------------
/src/components/day.js:
--------------------------------------------------------------------------------
1 | module.exports = function(app) {
2 | app.config([
3 | 'formioComponentsProvider',
4 | function(formioComponentsProvider) {
5 | formioComponentsProvider.register('day', {
6 | icon: 'fa fa-calendar',
7 | views: [
8 | {
9 | name: 'Display',
10 | template: 'formio/components/day/display.html'
11 | },
12 | {
13 | name: 'Data',
14 | template: 'formio/components/common/data.html'
15 | },
16 | {
17 | name: 'Validation',
18 | template: 'formio/components/day/validate.html'
19 | },
20 | {
21 | name: 'API',
22 | template: 'formio/components/common/api.html'
23 | },
24 | {
25 | name: 'Layout',
26 | template: 'formio/components/common/layout.html'
27 | },
28 | {
29 | name: 'Conditional',
30 | template: 'formio/components/common/conditional.html'
31 | }
32 | ],
33 | documentation: 'http://help.form.io/userguide/#day'
34 | });
35 | }
36 | ]);
37 | app.run([
38 | '$templateCache',
39 | function($templateCache) {
40 | // Create the settings markup.
41 | $templateCache.put('formio/components/day/display.html',
42 | '' +
43 | ' '
69 | );
70 |
71 | $templateCache.put('formio/components/day/validate.html',
72 | '' +
73 | ' '
79 | );
80 | }
81 | ]);
82 | };
83 |
--------------------------------------------------------------------------------
/src/components/editgrid.js:
--------------------------------------------------------------------------------
1 | module.exports = function(app) {
2 | app.config([
3 | 'formioComponentsProvider',
4 | function(formioComponentsProvider) {
5 | formioComponentsProvider.register('editgrid', {
6 | fbtemplate: 'formio/formbuilder/editgrid.html',
7 | icon: 'fa fa-tasks',
8 | views: [
9 | {
10 | name: 'Display',
11 | template: 'formio/components/editgrid/display.html'
12 | },
13 | {
14 | name: 'Templates',
15 | template: 'formio/components/editgrid/templates.html'
16 | },
17 | {
18 | name: 'Validation',
19 | template: 'formio/components/editgrid/validate.html'
20 | },
21 | {
22 | name: 'API',
23 | template: 'formio/components/common/api.html'
24 | },
25 | {
26 | name: 'Conditional',
27 | template: 'formio/components/common/conditional.html'
28 | }
29 | ],
30 | documentation: 'http://help.form.io/userguide/#editgrid',
31 | noDndOverlay: true,
32 | confirmRemove: true
33 | });
34 | }
35 | ]);
36 |
37 | app.run([
38 | '$templateCache',
39 | function($templateCache) {
40 | $templateCache.put('formio/components/editgrid/display.html',
41 | '' +
42 | ' '
53 | );
54 |
55 | $templateCache.put('formio/components/editgrid/templates.html',
56 | '' +
57 | '' +
62 | '' +
67 | '' +
72 | ' '
78 | );
79 |
80 | $templateCache.put('formio/components/editgrid/validate.html',
81 | '' +
82 | ' {{\'Row View Validation\' | formioTranslate}} ' +
83 | ' ' +
84 | ' ' +
85 | ' Normal validation does not run when a row is in "View" mode. This validation allows running custom view validation and returning an error per row.
' +
86 | ' You must assign the valid variable as either true or an error message if validation fails.
' +
87 | ' The variables row , component , and valid are provided.
' +
88 | ' ' +
89 | ' '
92 | );
93 |
94 | $templateCache.put('formio/formbuilder/editgrid.html',
95 | '' +
96 | '' +
97 | '{{ component.label }} ' +
98 | ' ' +
100 | ' '
102 | );
103 |
104 | }
105 | ]);
106 | };
107 |
--------------------------------------------------------------------------------
/src/components/email.js:
--------------------------------------------------------------------------------
1 | var _cloneDeep = require('lodash/cloneDeep');
2 | var _each = require('lodash/each');
3 | module.exports = function(app) {
4 | app.config([
5 | 'formioComponentsProvider',
6 | function(formioComponentsProvider) {
7 | var views = _cloneDeep(formioComponentsProvider.$get().components.textfield.views);
8 | _each(views, function(view) {
9 | if (view.name === 'Validation') {
10 | view.template = 'formio/components/email/validate.html';
11 | }
12 | });
13 | formioComponentsProvider.register('email', {
14 | icon: 'fa fa-at',
15 | views: views,
16 | documentation: 'http://help.form.io/userguide/#email'
17 | });
18 | }
19 | ]);
20 | app.run([
21 | '$templateCache',
22 | function($templateCache) {
23 | $templateCache.put('formio/components/email/validate.html',
24 | '' +
25 | '' +
28 | '
{{\'Kickbox\' | formioTranslate}} ' +
29 | '
' +
30 | '
{{\'Validate this email using the Kickbox email validation service.\' | formioTranslate}}
' +
31 | '
' +
32 | '' +
33 | ' ' +
35 | '
' +
36 | '
' +
37 | '
'
44 | );
45 | }
46 | ]);
47 | };
48 |
--------------------------------------------------------------------------------
/src/components/fieldset.js:
--------------------------------------------------------------------------------
1 | module.exports = function(app) {
2 | app.config([
3 | 'formioComponentsProvider',
4 | function(formioComponentsProvider) {
5 | formioComponentsProvider.register('fieldset', {
6 | fbtemplate: 'formio/formbuilder/fieldset.html',
7 | icon: 'fa fa-th-large',
8 | views: [
9 | {
10 | name: 'Display',
11 | template: 'formio/components/fieldset/display.html'
12 | },
13 | {
14 | name: 'Layout',
15 | template: 'formio/components/common/layout.html'
16 | },
17 | {
18 | name: 'API',
19 | template: 'formio/components/common/api.html'
20 | },
21 | {
22 | name: 'Conditional',
23 | template: 'formio/components/common/conditional.html'
24 | }
25 | ],
26 | documentation: 'http://help.form.io/userguide/#fieldset',
27 | keepChildrenOnRemove: true,
28 | noDndOverlay: true,
29 | confirmRemove: true
30 | });
31 | }
32 | ]);
33 | app.run([
34 | '$templateCache',
35 | function($templateCache) {
36 | $templateCache.put('formio/formbuilder/fieldset.html',
37 | '' +
38 | '' +
39 | '{{ component.legend }} ' +
40 | ' ' +
42 | ' '
44 | );
45 |
46 | // Create the settings markup.
47 | $templateCache.put('formio/components/fieldset/display.html',
48 | '' +
49 | ' '
57 | );
58 | }
59 | ]);
60 | };
61 |
--------------------------------------------------------------------------------
/src/components/file.js:
--------------------------------------------------------------------------------
1 | var _map = require('lodash/map');
2 | module.exports = function(app) {
3 | app.config([
4 | 'formioComponentsProvider',
5 | function(
6 | formioComponentsProvider
7 | ) {
8 | formioComponentsProvider.register('file', {
9 | onEdit: [
10 | '$scope',
11 | 'Formio',
12 | function($scope, Formio) {
13 | // Pull out title and name from the list of storage plugins.
14 | $scope.storage = _map(Formio.providers.storage, function(storage, key) {
15 | return {
16 | title: storage.title,
17 | name: key
18 | };
19 | });
20 | }
21 | ],
22 | icon: 'fa fa-file',
23 | views: [
24 | {
25 | name: 'Display',
26 | template: 'formio/components/file/display.html'
27 | },
28 | {
29 | name: 'Validation',
30 | template: 'formio/components/file/validate.html'
31 | },
32 | {
33 | name: 'API',
34 | template: 'formio/components/common/api.html'
35 | },
36 | {
37 | name: 'Layout',
38 | template: 'formio/components/common/layout.html'
39 | },
40 | {
41 | name: 'Conditional',
42 | template: 'formio/components/common/conditional.html'
43 | }
44 | ],
45 | documentation: 'http://help.form.io/userguide/#file'
46 | });
47 | }
48 | ]);
49 | app.run([
50 | '$templateCache',
51 | function($templateCache) {
52 | // Create the settings markup.
53 | $templateCache.put('formio/components/file/display.html',
54 | '' +
55 | '' +
60 | '{{\'Storage\' | formioTranslate}} ' +
61 | '
' +
63 | ' '
82 | );
83 |
84 | $templateCache.put('formio/components/file/validate.html',
85 | '' +
86 | ' '
91 | );
92 | }
93 | ]);
94 | };
95 |
--------------------------------------------------------------------------------
/src/components/form.js:
--------------------------------------------------------------------------------
1 | module.exports = function(app) {
2 | app.config([
3 | 'formioComponentsProvider',
4 | function(formioComponentsProvider) {
5 | formioComponentsProvider.register('form', {
6 | fbtemplate: 'formio/formbuilder/form.html',
7 | icon: 'fa fa-wpforms',
8 | views: [
9 | {
10 | name: 'Display',
11 | template: 'formio/components/form/display.html'
12 | },
13 | {
14 | name: 'Data',
15 | template: 'formio/components/common/data.html'
16 | },
17 | {
18 | name: 'API',
19 | template: 'formio/components/common/api.html'
20 | },
21 | {
22 | name: 'Conditional',
23 | template: 'formio/components/common/conditional.html'
24 | }
25 | ],
26 | documentation: 'http://help.form.io/userguide/#form',
27 | onEdit: ['$scope', function($scope) {
28 | $scope.forms = [];
29 | $scope.component.project = $scope.formio.projectId;
30 | $scope.formio.loadForms({params: {
31 | limit: 4294967295,
32 | select: '_id,title,type'
33 | }}).then(function(forms) {
34 | var data = [];
35 | if ($scope.form._id) {
36 | angular.forEach(forms, function(form) {
37 | if (form._id !== $scope.form._id) {
38 | data.push(form);
39 | }
40 | });
41 | $scope.forms = data;
42 | }
43 | else {
44 | $scope.forms = forms;
45 | }
46 |
47 | if (!$scope.component.form) {
48 | $scope.component.form = forms[0]._id;
49 | }
50 | });
51 | }]
52 | });
53 |
54 | // Override the controller for form building.
55 | var formComponent = formioComponentsProvider.$get().components.form;
56 | var formController = formComponent.controller;
57 | formComponent.controller = [
58 | '$scope',
59 | '$controller',
60 | function(
61 | $scope,
62 | $controller
63 | ) {
64 | if (!$scope.builder) {
65 | return $controller(formController, {$scope: $scope});
66 | }
67 |
68 | var forms = {};
69 | $scope.form = {title: 'Unknown form'};
70 | $scope.formio.loadForms({params: {
71 | limit: 4294967295,
72 | select: '_id,title,type'
73 | }}).then(function(formioForms) {
74 | angular.forEach(formioForms, function(form) {
75 | forms[form._id] = form;
76 | });
77 |
78 | if (
79 | $scope.component.form &&
80 | ($scope.form._id !== $scope.component.form) &&
81 | forms.hasOwnProperty($scope.component.form)
82 | ) {
83 | $scope.form = forms[$scope.component.form];
84 | }
85 | });
86 |
87 | $scope.$watch('component.form', function(formId) {
88 | if (!formId || !forms.hasOwnProperty(formId)) {
89 | return;
90 | }
91 | $scope.form = forms[formId];
92 | });
93 | }
94 | ];
95 | }
96 | ]);
97 | app.run([
98 | '$templateCache',
99 | function($templateCache) {
100 | $templateCache.put('formio/formbuilder/form.html', '{{ form.title }} {{ form.type }} ');
101 |
102 | // Create the settings markup.
103 | $templateCache.put('formio/components/form/display.html',
104 | '' +
105 | '' +
109 | '{{\'Form\' | formioTranslate}} ' +
110 | '
' +
112 | ' '
120 | );
121 | }
122 | ]);
123 | };
124 |
--------------------------------------------------------------------------------
/src/components/hidden.js:
--------------------------------------------------------------------------------
1 | module.exports = function(app) {
2 | app.config([
3 | 'formioComponentsProvider',
4 | function(formioComponentsProvider) {
5 | formioComponentsProvider.register('hidden', {
6 | fbtemplate: 'formio/formbuilder/hidden.html',
7 | icon: 'fa fa-user-secret',
8 | views: [
9 | {
10 | name: 'Display',
11 | template: 'formio/components/hidden/display.html'
12 | },
13 | {
14 | name: 'Data',
15 | template: 'formio/components/common/data.html'
16 | },
17 | {
18 | name: 'Validation',
19 | template: 'formio/components/hidden/validation.html'
20 | },
21 | {
22 | name: 'API',
23 | template: 'formio/components/common/api.html'
24 | },
25 | {
26 | name: 'Conditional',
27 | template: 'formio/components/common/conditional.html'
28 | }
29 | ],
30 | documentation: 'http://help.form.io/userguide/#hidden'
31 | });
32 | }
33 | ]);
34 | app.run([
35 | '$templateCache',
36 | function($templateCache) {
37 | $templateCache.put('formio/formbuilder/hidden.html', '{{ component.label }} ');
38 |
39 | // Create the settings markup.
40 | $templateCache.put('formio/components/hidden/display.html',
41 | '' +
42 | ' '
49 | );
50 |
51 | $templateCache.put('formio/components/hidden/validation.html',
52 | '' +
53 | ' '
55 | );
56 | }
57 | ]);
58 | };
59 |
--------------------------------------------------------------------------------
/src/components/htmlelement.js:
--------------------------------------------------------------------------------
1 | module.exports = function(app) {
2 | app.config([
3 | 'formioComponentsProvider',
4 | function(formioComponentsProvider) {
5 | formioComponentsProvider.register('htmlelement', {
6 | fbtemplate: 'formio/formbuilder/htmlelement.html',
7 | icon: 'fa fa-code',
8 | views: [
9 | {
10 | name: 'Display',
11 | template: 'formio/components/htmlelement/display.html'
12 | },
13 | {
14 | name: 'API',
15 | template: 'formio/components/common/api.html'
16 | },
17 | {
18 | name: 'Conditional',
19 | template: 'formio/components/common/conditional.html'
20 | }
21 | ],
22 | documentation: 'http://help.form.io/userguide/#html-element-component'
23 | });
24 | }
25 | ]);
26 | app.run([
27 | '$templateCache',
28 | function($templateCache) {
29 | $templateCache.put('formio/formbuilder/htmlelement.html',
30 | '{{ \'HTML Element with no content\' | formioTranslate }}
'
31 | );
32 |
33 | // Create the settings markup.
34 | $templateCache.put('formio/components/htmlelement/display.html',
35 | '' +
36 | '' +
52 | '{{\'Content\' | formioTranslate}} ' +
53 | '' +
54 | '
' +
55 | ' '
56 | );
57 | }
58 | ]);
59 | };
60 |
--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
1 | var app = angular.module('ngFormBuilder');
2 |
3 | // Basic
4 | require('./components')(app);
5 | require('./textfield')(app);
6 | require('./number')(app);
7 | require('./password')(app);
8 | require('./textarea')(app);
9 | require('./checkbox')(app);
10 | require('./selectboxes')(app);
11 | require('./select')(app);
12 | require('./radio')(app);
13 | require('./htmlelement')(app);
14 | require('./content')(app);
15 | require('./button')(app);
16 |
17 | // Special
18 | require('./email')(app);
19 | require('./phonenumber')(app);
20 | require('./address')(app);
21 | require('./datetime')(app);
22 | require('./day')(app);
23 | require('./time')(app);
24 | require('./currency')(app);
25 | require('./hidden')(app);
26 | require('./resource')(app);
27 | require('./file')(app);
28 | require('./form')(app);
29 | require('./signature')(app);
30 | require('./custom')(app);
31 | require('./datagrid')(app);
32 | require('./editgrid')(app);
33 | require('./survey')(app);
34 |
35 | // Layout
36 | require('./columns')(app);
37 | require('./fieldset')(app);
38 | require('./container')(app);
39 | require('./page')(app);
40 | require('./panel')(app);
41 | require('./table')(app);
42 | require('./well')(app);
43 |
--------------------------------------------------------------------------------
/src/components/page.js:
--------------------------------------------------------------------------------
1 | module.exports = function(app) {
2 | app.config([
3 | 'formioComponentsProvider',
4 | function(formioComponentsProvider) {
5 | formioComponentsProvider.register('page', {
6 | fbtemplate: 'formio/formbuilder/page.html'
7 | });
8 | }
9 | ]);
10 | app.run([
11 | '$templateCache',
12 | function($templateCache) {
13 | $templateCache.put('formio/formbuilder/page.html',
14 | '' +
57 | '
' +
58 | '{{ component.title }} ' +
59 | ' ' +
61 | '
' +
62 | '
' +
64 | '
' +
70 | '' +
73 | '{{\'Theme\' | formioTranslate}} ' +
74 | '
' +
76 | '' +
77 | 'Show Breadcrumb ' +
78 | '
' +
80 | ' '
86 | );
87 |
88 | $templateCache.put('formio/components/panel/conditional.html',
89 | '' +
91 | '' +
92 | '
' +
93 | '
' +
94 | ' Enter custom conditional code.
' +
95 | '
You must assign the next variable with the API key of the next page.
' +
96 | '
The global variable data is provided, and allows you to access the data of any form component, by using its API key.
' +
97 | '
Also moment library is available, and allows you to manipulate dates in a convenient way.
' +
98 | '' +
99 | '
' +
101 | '
' +
102 | ' Execute custom next page with JSON and JsonLogic .
' +
103 | '
Submission data is available as JsonLogic variables, with the same api key as your components.
' +
104 | '
Click here for an example
' +
105 | '' +
106 | '
' +
107 | '
'
109 | );
110 | }
111 | ]);
112 | };
113 |
--------------------------------------------------------------------------------
/src/components/password.js:
--------------------------------------------------------------------------------
1 | module.exports = function(app) {
2 | app.config([
3 | 'formioComponentsProvider',
4 | function(formioComponentsProvider) {
5 | formioComponentsProvider.register('password', {
6 | icon: 'fa fa-asterisk',
7 | views: [
8 | {
9 | name: 'Display',
10 | template: 'formio/components/password/display.html'
11 | },
12 | {
13 | name: 'Validation',
14 | template: 'formio/components/textfield/validate.html'
15 | },
16 | {
17 | name: 'API',
18 | template: 'formio/components/common/api.html'
19 | },
20 | {
21 | name: 'Layout',
22 | template: 'formio/components/common/layout.html'
23 | },
24 | {
25 | name: 'Conditional',
26 | template: 'formio/components/common/conditional.html'
27 | }
28 | ],
29 | documentation: 'http://help.form.io/userguide/#password',
30 | template: 'formio/components/password.html'
31 | });
32 | }
33 | ]);
34 | app.run([
35 | '$templateCache',
36 | function(
37 | $templateCache
38 | ) {
39 | // Disable dragging on password inputs because it breaks dndLists
40 | var textFieldTmpl = $templateCache.get('formio/components/textfield.html');
41 | var passwordTmpl = textFieldTmpl.replace(
42 | /' +
43 | ' '
68 | );
69 |
70 | // Create the Validation markup.
71 | $templateCache.put('formio/components/phoneNumber/validate.html',
72 | '' +
73 | ' '
77 | );
78 | }
79 | ]);
80 | };
81 |
--------------------------------------------------------------------------------
/src/components/radio.js:
--------------------------------------------------------------------------------
1 | module.exports = function(app) {
2 | app.config([
3 | 'formioComponentsProvider',
4 | function(formioComponentsProvider) {
5 | formioComponentsProvider.register('radio', {
6 | icon: 'fa fa-dot-circle-o',
7 | views: [
8 | {
9 | name: 'Display',
10 | template: 'formio/components/radio/display.html'
11 | },
12 | {
13 | name: 'Data',
14 | template: 'formio/components/common/data.html'
15 | },
16 | {
17 | name: 'Validation',
18 | template: 'formio/components/radio/validate.html'
19 | },
20 | {
21 | name: 'API',
22 | template: 'formio/components/common/api.html'
23 | },
24 | {
25 | name: 'Layout',
26 | template: 'formio/components/common/layout.html'
27 | },
28 | {
29 | name: 'Conditional',
30 | template: 'formio/components/common/conditional.html'
31 | }
32 | ],
33 | documentation: 'http://help.form.io/userguide/#radio'
34 | });
35 | }
36 | ]);
37 | app.run([
38 | '$templateCache',
39 | function($templateCache) {
40 | // Create the settings markup.
41 | $templateCache.put('formio/components/radio/display.html',
42 | '' +
43 | ' '
65 | );
66 | // Create the API markup.
67 | $templateCache.put('formio/components/radio/validate.html',
68 | '' +
69 | ' '
73 | );
74 | }
75 | ]);
76 | };
77 |
--------------------------------------------------------------------------------
/src/components/resource.js:
--------------------------------------------------------------------------------
1 | module.exports = function(app) {
2 | app.config([
3 | 'formioComponentsProvider',
4 | function(formioComponentsProvider) {
5 | formioComponentsProvider.register('resource', {
6 | onEdit: ['$scope', function($scope) {
7 | $scope.resources = [];
8 | $scope.component.project = $scope.formio.projectId;
9 | $scope.formio.loadForms({params: {
10 | type: 'resource',
11 | limit: 4294967295,
12 | select: '_id,title'
13 | }}).then(function(resources) {
14 | $scope.resources = resources;
15 | if (!$scope.component.resource) {
16 | $scope.component.resource = resources[0]._id;
17 | }
18 | });
19 | }],
20 | icon: 'fa fa-files-o',
21 | views: [
22 | {
23 | name: 'Display',
24 | template: 'formio/components/resource/display.html'
25 | },
26 | {
27 | name: 'Validation',
28 | template: 'formio/components/resource/validate.html'
29 | },
30 | {
31 | name: 'API',
32 | template: 'formio/components/common/api.html'
33 | },
34 | {
35 | name: 'Layout',
36 | template: 'formio/components/common/layout.html'
37 | },
38 | {
39 | name: 'Conditional',
40 | template: 'formio/components/common/conditional.html'
41 | }
42 | ],
43 | documentation: 'http://help.form.io/userguide/#resource'
44 | });
45 | }
46 | ]);
47 | app.run([
48 | '$templateCache',
49 | function($templateCache) {
50 | // Create the settings markup.
51 | $templateCache.put('formio/components/resource/display.html',
52 | '' +
53 | '' +
59 | '{{\'Resource\' | formioTranslate}} ' +
60 | '
' +
62 | '' +
63 | '{{\'Select Fields\' | formioTranslate}} ' +
64 | '
' +
66 | '' +
67 | '{{\'Search Fields\' | formioTranslate}} ' +
68 | '
' +
70 | '' +
71 | '{{\'Item Template\' | formioTranslate}} ' +
72 | '' +
73 | '
' +
74 | ' '
90 | );
91 |
92 | // Create the API markup.
93 | $templateCache.put('formio/components/resource/validate.html',
94 | '' +
95 | ' '
98 | );
99 | }
100 | ]);
101 | };
102 |
--------------------------------------------------------------------------------
/src/components/selectboxes.js:
--------------------------------------------------------------------------------
1 | module.exports = function(app) {
2 | app.config([
3 | 'formioComponentsProvider',
4 | function(formioComponentsProvider) {
5 | formioComponentsProvider.register('selectboxes', {
6 | icon: 'fa fa-plus-square',
7 | views: [
8 | {
9 | name: 'Display',
10 | template: 'formio/components/selectboxes/display.html'
11 | },
12 | {
13 | name: 'Validation',
14 | template: 'formio/components/selectboxes/validate.html'
15 | },
16 | {
17 | name: 'API',
18 | template: 'formio/components/selectboxes/api.html'
19 | },
20 | {
21 | name: 'Layout',
22 | template: 'formio/components/common/layout.html'
23 | },
24 | {
25 | name: 'Conditional',
26 | template: 'formio/components/common/conditional.html'
27 | }
28 | ],
29 | documentation: 'http://help.form.io/userguide/#selectboxes'
30 | });
31 | }
32 | ]);
33 | app.run([
34 | '$templateCache',
35 | function($templateCache) {
36 | // Create the settings markup.
37 | $templateCache.put('formio/components/selectboxes/display.html',
38 | '' +
39 | ' '
60 | );
61 |
62 | // Create the API markup.
63 | $templateCache.put('formio/components/selectboxes/api.html',
64 | '' +
65 | '' +
67 | '' +
68 | '
' +
70 | ' ' +
71 | ' '
72 | );
73 |
74 | // Create the API markup.
75 | $templateCache.put('formio/components/selectboxes/validate.html',
76 | '' +
77 | ' '
81 | );
82 | }
83 | ]);
84 | };
85 |
--------------------------------------------------------------------------------
/src/components/signature.js:
--------------------------------------------------------------------------------
1 | module.exports = function(app) {
2 | app.config([
3 | 'formioComponentsProvider',
4 | function(formioComponentsProvider) {
5 | formioComponentsProvider.register('signature', {
6 | icon: 'fa fa-pencil',
7 | views: [
8 | {
9 | name: 'Display',
10 | template: 'formio/components/signature/display.html'
11 | },
12 | {
13 | name: 'Validation',
14 | template: 'formio/components/signature/validate.html'
15 | },
16 | {
17 | name: 'API',
18 | template: 'formio/components/common/api.html'
19 | },
20 | {
21 | name: 'Layout',
22 | template: 'formio/components/common/layout.html'
23 | },
24 | {
25 | name: 'Conditional',
26 | template: 'formio/components/common/conditional.html'
27 | }
28 | ],
29 | documentation: 'http://help.form.io/userguide/#signature'
30 | });
31 | }
32 | ]);
33 | app.run([
34 | '$templateCache',
35 | function($templateCache) {
36 | // Create the settings markup.
37 | $templateCache.put('formio/components/signature/display.html',
38 | '' +
39 | ' '
54 | );
55 |
56 | // Create the Validation markup.
57 | $templateCache.put('formio/components/signature/validate.html',
58 | '' +
59 | ' '
62 | );
63 | }
64 | ]);
65 | };
66 |
--------------------------------------------------------------------------------
/src/components/survey.js:
--------------------------------------------------------------------------------
1 | module.exports = function(app) {
2 | app.config([
3 | 'formioComponentsProvider',
4 | function(formioComponentsProvider) {
5 | formioComponentsProvider.register('survey', {
6 | icon: 'fa fa-list',
7 | views: [
8 | {
9 | name: 'Display',
10 | template: 'formio/components/survey/display.html'
11 | },
12 | {
13 | name: 'Validation',
14 | template: 'formio/components/survey/validate.html'
15 | },
16 | {
17 | name: 'API',
18 | template: 'formio/components/common/api.html'
19 | },
20 | {
21 | name: 'Layout',
22 | template: 'formio/components/common/layout.html'
23 | },
24 | {
25 | name: 'Conditional',
26 | template: 'formio/components/common/conditional.html'
27 | }
28 | ],
29 | documentation: 'http://help.form.io/userguide/#survey'
30 | });
31 | }
32 | ]);
33 | app.run([
34 | '$templateCache',
35 | function($templateCache) {
36 | // Create the settings markup.
37 | $templateCache.put('formio/components/survey/display.html',
38 | '' +
39 | ' '
59 | );
60 | // Create the API markup.
61 | $templateCache.put('formio/components/survey/validate.html',
62 | '' +
63 | ' '
67 | );
68 | }
69 | ]);
70 | };
71 |
--------------------------------------------------------------------------------
/src/components/table.js:
--------------------------------------------------------------------------------
1 | module.exports = function(app) {
2 | app.config([
3 | 'formioComponentsProvider',
4 | function(formioComponentsProvider) {
5 | formioComponentsProvider.register('table', {
6 | fbtemplate: 'formio/formbuilder/table.html',
7 | documentation: 'http://help.form.io/userguide/#table',
8 | noDndOverlay: true,
9 | confirmRemove: true,
10 | icon: 'fa fa-table',
11 | views: [
12 | {
13 | name: 'Display',
14 | template: 'formio/components/table/display.html'
15 | },
16 | {
17 | name: 'Layout',
18 | template: 'formio/components/common/layout.html'
19 | },
20 | {
21 | name: 'API',
22 | template: 'formio/components/common/api.html'
23 | },
24 | {
25 | name: 'Conditional',
26 | template: 'formio/components/common/conditional.html'
27 | }
28 | ]
29 | });
30 | }
31 | ]);
32 | app.run([
33 | '$templateCache',
34 | function($templateCache) {
35 | var tableClasses = "{'table-striped': component.striped, ";
36 | tableClasses += "'table-bordered': component.bordered, ";
37 | tableClasses += "'table-hover': component.hover, ";
38 | tableClasses += "'table-condensed': component.condensed}";
39 | $templateCache.put('formio/formbuilder/table.html',
40 | '' +
41 | '
' +
42 | '' +
43 | '{{ header }} ' +
44 | ' ' +
46 | '' +
47 | '' +
48 | ' ' +
50 | ' ' +
51 | ' ' +
52 | '
' +
53 | '
' +
58 | ' '
67 | );
68 | }
69 | ]);
70 | };
71 |
--------------------------------------------------------------------------------
/src/components/time.js:
--------------------------------------------------------------------------------
1 | var _cloneDeep = require('lodash/cloneDeep');
2 | var _each = require('lodash/each');
3 |
4 | module.exports = function(app) {
5 | app.config([
6 | 'formioComponentsProvider',
7 | function(formioComponentsProvider) {
8 | var views = _cloneDeep(formioComponentsProvider.$get().components.textfield.views);
9 | _each(views, function(view) {
10 | if (view.name === 'Display') {
11 | view.template = 'formio/components/time/display.html';
12 | }
13 | });
14 | formioComponentsProvider.register('time', {
15 | icon: 'fa fa-clock-o',
16 | views: views,
17 | documentation: 'http://help.form.io/userguide/#time'
18 | });
19 | }
20 | ]);
21 | app.run([
22 | '$templateCache',
23 | function($templateCache) {
24 | $templateCache.put('formio/components/time/display.html',
25 | '' +
26 | ' '
47 | );
48 | }
49 | ]);
50 | };
51 |
--------------------------------------------------------------------------------
/src/components/well.js:
--------------------------------------------------------------------------------
1 | module.exports = function(app) {
2 | app.config([
3 | 'formioComponentsProvider',
4 | function(formioComponentsProvider) {
5 | formioComponentsProvider.register('well', {
6 | fbtemplate: 'formio/formbuilder/well.html',
7 | icon: 'fa fa-square-o',
8 | documentation: 'http://help.form.io/userguide/#well',
9 | noDndOverlay: true,
10 | confirmRemove: true,
11 | views: [
12 | {
13 | name: 'Display',
14 | template: 'formio/components/well/display.html'
15 | },
16 | {
17 | name: 'API',
18 | template: 'formio/components/common/api.html'
19 | },
20 | {
21 | name: 'Conditional',
22 | template: 'formio/components/common/conditional.html'
23 | }
24 | ]
25 | });
26 | }
27 | ]);
28 | app.run([
29 | '$templateCache',
30 | function($templateCache) {
31 | $templateCache.put('formio/formbuilder/well.html',
32 | '' +
33 | '
'
35 | );
36 | $templateCache.put('formio/components/well/display.html',
37 | '' +
38 | ''
42 | );
43 | }
44 | ]);
45 | };
46 |
--------------------------------------------------------------------------------
/src/constants/formOptions.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | actions: [
3 | {
4 | name: 'submit',
5 | title: 'Submit'
6 | },
7 | {
8 | name: 'saveState',
9 | title: 'Save in state'
10 | },
11 | {
12 | name: 'event',
13 | title: 'Event'
14 | },
15 | {
16 | name: 'custom',
17 | title: 'Custom'
18 | },
19 | {
20 | name: 'reset',
21 | title: 'Reset'
22 | },
23 | {
24 | name: 'delete',
25 | title: 'Delete'
26 | },
27 | {
28 | name: 'url',
29 | title: 'POST to URL'
30 | },
31 | {
32 | name: 'oauth',
33 | title: 'OAuth'
34 | }
35 | ],
36 | themes: [
37 | {
38 | name: 'default',
39 | title: 'Default'
40 | },
41 | {
42 | name: 'primary',
43 | title: 'Primary'
44 | },
45 | {
46 | name: 'info',
47 | title: 'Info'
48 | },
49 | {
50 | name: 'success',
51 | title: 'Success'
52 | },
53 | {
54 | name: 'danger',
55 | title: 'Danger'
56 | },
57 | {
58 | name: 'warning',
59 | title: 'Warning'
60 | }
61 | ],
62 | sizes: [
63 | {
64 | name: 'xs',
65 | title: 'Extra Small'
66 | },
67 | {
68 | name: 'sm',
69 | title: 'Small'
70 | },
71 | {
72 | name: 'md',
73 | title: 'Medium'
74 | },
75 | {
76 | name: 'lg',
77 | title: 'Large'
78 | }
79 | ]
80 | };
81 |
--------------------------------------------------------------------------------
/src/directives/formBuilderComponent.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Create the form-builder-component directive.
3 | * Extend the formio-component directive and change the template.
4 | */
5 | module.exports = [
6 | 'formioComponentDirective',
7 | function(formioComponentDirective) {
8 | return angular.extend({}, formioComponentDirective[0], {
9 | scope: false,
10 | templateUrl: 'formio/formbuilder/component.html'
11 | });
12 | }
13 | ];
14 |
--------------------------------------------------------------------------------
/src/directives/formBuilderConditional.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | var utils = require('formiojs/utils').default;
3 | var _get = require('lodash/get');
4 | var _reject = require('lodash/reject');
5 | module.exports = [
6 | function() {
7 | return {
8 | restrict: 'E',
9 | scope: true,
10 | template: '' +
11 | '' +
12 | '' +
13 | 'This component should Display:' +
14 | '' +
15 | '{{item.toString()}} ' +
16 | ' ' +
17 | '' +
19 | '{{item !== "" ? item.label + " (" + item.key + ")" : ""}} ' +
20 | ' ' +
21 | '
' +
24 | '' +
25 | '
' +
26 | '
' +
27 | ' Enter custom conditional code.
' +
28 | '
You must assign the show variable as either true or false .
' +
29 | '
The global variable data is provided, and allows you to access the data of any form component, by using its API key.
' +
30 | '
Also moment library is available, and allows you to manipulate dates in a convenient way.
' +
31 | '
Note: Advanced Conditional logic will override the results of the Simple Conditional logic.
' +
32 | '' +
33 | '
' +
35 | '
' +
36 | ' Execute custom validation logic with JSON and JsonLogic .
' +
37 | '
Submission data is available as JsonLogic variables, with the same api key as your components.
' +
38 | '
Click here for an example
' +
39 | '' +
40 | '
' +
41 | '
',
43 | controller: [
44 | '$scope',
45 | function(
46 | $scope) {
47 | // Default the current components conditional logic.
48 | $scope.component = $scope.component || {};
49 | $scope.component.conditional = $scope.component.conditional || {};
50 |
51 | // The available logic functions.
52 | $scope._booleans = ['', 'true', 'false'];
53 |
54 | // Filter the list of available form components for conditional logic.
55 | $scope._components = _get($scope, 'form.components') || [];
56 | $scope._components = utils.flattenComponents($scope._components);
57 | // Remove non-input/button fields because they don't make sense.
58 | // FA-890 - Dont allow the current component to be a conditional trigger.
59 | $scope._components = _reject($scope._components, function(c) {
60 | return !c.input || (c.type === 'button') || (c.key === $scope.component.key) || (!c.label && !c.key);
61 | });
62 |
63 | // Add default item to the components list.
64 | $scope._components.unshift('');
65 |
66 | // Default and watch the show logic.
67 | $scope.component.conditional.show = $scope.component.conditional.show || '';
68 | // Coerce show var to supported value.
69 | var _booleanMap = {
70 | '': '',
71 | 'true': 'true',
72 | 'false': 'false'
73 | };
74 | $scope.component.conditional.show = _booleanMap.hasOwnProperty($scope.component.conditional.show)
75 | ? _booleanMap[$scope.component.conditional.show]
76 | : '';
77 |
78 | // Default and watch the when logic.
79 | $scope.component.conditional.when = $scope.component.conditional.when || null;
80 |
81 | // Default and watch the search logic.
82 | $scope.component.conditional.eq = $scope.component.conditional.eq || '';
83 |
84 | // Track the status of the accordion panels open state.
85 | $scope.status = {
86 | simple: !$scope.component.customConditional,
87 | advanced: !!$scope.component.customConditional
88 | };
89 | }
90 | ]
91 | };
92 | }
93 | ];
94 |
--------------------------------------------------------------------------------
/src/directives/formBuilderElement.js:
--------------------------------------------------------------------------------
1 | module.exports = [
2 | 'formioElementDirective',
3 | function(formioElementDirective) {
4 | return angular.extend({}, formioElementDirective[0], {
5 | scope: false,
6 | controller: [
7 | '$scope',
8 | 'formioComponents',
9 | function(
10 | $scope,
11 | formioComponents
12 | ) {
13 | $scope.builder = true;
14 | $scope.formComponent = formioComponents.components[$scope.component.type] || formioComponents.components.custom;
15 | if ($scope.formComponent.fbtemplate) {
16 | $scope.template = $scope.formComponent.fbtemplate;
17 | }
18 | }
19 | ]
20 | });
21 | }
22 | ];
23 |
--------------------------------------------------------------------------------
/src/directives/formBuilderList.js:
--------------------------------------------------------------------------------
1 | module.exports = [
2 | function() {
3 | return {
4 | scope: {
5 | component: '=',
6 | formio: '=',
7 | form: '=',
8 | parent: '=?',
9 | path: '=?',
10 | // # of items needed in the list before hiding the
11 | // drag and drop prompt div
12 | hideDndBoxCount: '=',
13 | rootList: '=',
14 | options: '=',
15 | data:'=?'
16 | },
17 | restrict: 'E',
18 | replace: true,
19 | controller: 'formBuilderDnd',
20 | templateUrl: 'formio/formbuilder/list.html'
21 | };
22 | }
23 | ];
24 |
--------------------------------------------------------------------------------
/src/directives/formBuilderOption.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This directive creates a field for tweaking component options.
3 | * This needs at least a property attribute specifying what property
4 | * of the component to bind to.
5 | *
6 | * If the property is defined in COMMON_OPTIONS above, it will automatically
7 | * populate its label, placeholder, input type, and tooltip. If not, you may specify
8 | * those via attributes (except for tooltip, which you can specify with the title attribute).
9 | * The generated input will also carry over any other properties you specify on this directive.
10 | */
11 | module.exports = ['COMMON_OPTIONS', '$filter', function(COMMON_OPTIONS, $filter) {
12 | return {
13 | restrict: 'E',
14 | require: 'property',
15 | priority: 2,
16 | replace: true,
17 | template: function(el, attrs) {
18 | var formioTranslate = $filter('formioTranslate');
19 |
20 | var property = attrs.property;
21 | var label = attrs.label || (COMMON_OPTIONS[property] && COMMON_OPTIONS[property].label);
22 | var placeholder = attrs.placeholder || (COMMON_OPTIONS[property] && COMMON_OPTIONS[property].placeholder) || null;
23 | var type = attrs.type || (COMMON_OPTIONS[property] && COMMON_OPTIONS[property].type) || 'text';
24 | var tooltip = attrs.tooltip || (COMMON_OPTIONS[property] && COMMON_OPTIONS[property].tooltip) || '';
25 | var step = attrs.step || (COMMON_OPTIONS[property] && COMMON_OPTIONS[property].step) || '';
26 |
27 | var input = type === 'textarea' ? angular.element('') : angular.element('' +
65 | '' +
66 | input.prop('outerHTML') +
67 | ' ' + formioTranslate(label) + ' ' +
68 | '
';
69 | }
70 |
71 | var helpMessage = '';
72 | switch (property) {
73 | case 'label':
74 | helpMessage = 'You must provide a label for this component. ';
75 | break;
76 | default:
77 | break;
78 | }
79 |
80 | input.addClass('form-control');
81 | return '';
86 | }
87 | };
88 | }];
89 |
--------------------------------------------------------------------------------
/src/directives/formBuilderOptionCustomValidation.js:
--------------------------------------------------------------------------------
1 | /**
2 | * A directive for editing a component's custom validation.
3 | */
4 | module.exports = function() {
5 | return {
6 | restrict: 'E',
7 | replace: true,
8 | template: '' +
9 | '' +
10 | '
' +
11 | ' ' +
12 | '
' +
13 | '
' +
14 | ' Enter custom validation code.
' +
15 | '
You must assign the valid variable as either true or an error message if validation fails.
' +
16 | '
The global variables input , component , and valid are provided.
' +
17 | ' ' +
18 | '
' +
19 | '
' +
20 | ' ' +
21 | ' Secret Validation ' +
22 | ' ' +
23 | '
' +
24 | '
Check this if you wish to perform the validation ONLY on the server side. This keeps your validation logic private and secret.
' +
25 | '
' +
26 | '
' +
28 | '
' +
29 | ' Execute custom validation logic with JSON and JsonLogic .
' +
30 | '
Submission data is available as JsonLogic variables, with the same api key as your components.
' +
31 | '
Click here for an example
' +
32 | ' ' +
33 | '
' +
34 | '
' +
36 | '
' +
10 | '{{\'Input Format\' | formioTranslate}} ' +
11 | '
';
13 | },
14 | controller: ['$scope', function($scope) {
15 | $scope.formats = [
16 | {
17 | value: 'plain',
18 | title: 'Plain'
19 | },
20 | {
21 | value: 'html',
22 | title: 'HTML'
23 | },
24 | {
25 | value: 'raw',
26 | title: 'Raw (Insecure)'
27 | }
28 | ];
29 |
30 | if (!$scope.component.inputFormat) {
31 | if ($scope.component.type === 'textarea') {
32 | $scope.$watch('component.wysiwyg', function(wysiwyg) {
33 | $scope.component.inputFormat = wysiwyg ? 'html' : 'plain';
34 | });
35 | }
36 |
37 | $scope.component.inputFormat = 'plain';
38 | }
39 | }]
40 | };
41 | };
42 |
--------------------------------------------------------------------------------
/src/directives/formBuilderOptionInputsLabelPosition.js:
--------------------------------------------------------------------------------
1 | /**
2 | * A directive for a field to edit a component inputs' label position.
3 | */
4 | module.exports = function() {
5 | return {
6 | restrict: 'E',
7 | replace: true,
8 | template: function() {
9 | return '' +
10 | '{{\'Inputs Label Position\' | formioTranslate}} ' +
11 | '
';
13 | },
14 | controller: ['$scope', function($scope) {
15 | $scope.inputsLabelPosition = [
16 | {
17 | value: 'top',
18 | title: 'Top'
19 | },
20 | {
21 | value: 'left',
22 | title: 'Left'
23 | },
24 | {
25 | value: 'right',
26 | title: 'Right'
27 | },
28 | {
29 | value: 'bottom',
30 | title: 'Bottom'
31 | }
32 | ];
33 |
34 | if (!$scope.component.inputsLabelPosition) {
35 | $scope.component.inputsLabelPosition = 'top';
36 | }
37 | }]
38 | };
39 | };
40 |
--------------------------------------------------------------------------------
/src/directives/formBuilderOptionKey.js:
--------------------------------------------------------------------------------
1 | /**
2 | * A directive for a field to edit a component's key.
3 | */
4 | module.exports = function() {
5 | return {
6 | restrict: 'E',
7 | replace: true,
8 | template: function() {
9 | return '';
20 | },
21 | controller: ['$scope', 'BuilderUtils', function($scope, BuilderUtils) {
22 | BuilderUtils.uniquify($scope.form, $scope.component);
23 |
24 | $scope.onBlur = function() {
25 | $scope.component.lockKey = true;
26 |
27 | // If they try to input an empty key, refill it with default and let uniquify make it unique.
28 | if (!$scope.component.key && $scope.formComponents[$scope.component.type].settings.key) {
29 | $scope.component.key = $scope.formComponents[$scope.component.type].settings.key;
30 | $scope.component.lockKey = false; // Also unlock key
31 | BuilderUtils.uniquify($scope.form, $scope.component);
32 | }
33 | };
34 |
35 | $scope.shouldWarnAboutEmbedding = function() {
36 | if (!$scope.component || !$scope.component.key) {
37 | return false;
38 | }
39 | return !$scope.component.source && $scope.component.key.indexOf('.') !== -1;
40 | };
41 | }]
42 | };
43 | };
44 |
--------------------------------------------------------------------------------
/src/directives/formBuilderOptionLabelPosition.js:
--------------------------------------------------------------------------------
1 | /**
2 | * A directive for a field to edit a component's label position.
3 | */
4 | module.exports = function() {
5 | return {
6 | restrict: 'E',
7 | replace: true,
8 | template: function() {
9 | return '' +
10 | '
' +
11 | '{{\'Label Position\' | formioTranslate}} ' +
12 | '
' +
14 | '
' +
15 | ' {{\'Label Width\' | formioTranslate}} ' +
16 | '
' +
18 | '
' +
19 | ' {{\'Label Margin\' | formioTranslate}} ' +
20 | '
' +
22 | '
' +
10 | '{{\'Options Label Position\' | formioTranslate}} ' +
11 | '
';
13 | },
14 | controller: ['$scope', function($scope) {
15 | $scope.optionsLabelPositions = [
16 | {
17 | value: 'top',
18 | title: 'Top'
19 | },
20 | {
21 | value: 'left',
22 | title: 'Left'
23 | },
24 | {
25 | value: 'right',
26 | title: 'Right'
27 | },
28 | {
29 | value: 'bottom',
30 | title: 'Bottom'
31 | }
32 | ];
33 |
34 | if (!$scope.component.optionsLabelPosition) {
35 | $scope.component.optionsLabelPosition = 'right';
36 | }
37 | }]
38 | };
39 | };
40 |
--------------------------------------------------------------------------------
/src/directives/formBuilderOptionShortcut.js:
--------------------------------------------------------------------------------
1 | /**
2 | * A directive for a field to edit a component's shortcut.
3 | */
4 | module.exports = function() {
5 | return {
6 | restrict: 'E',
7 | replace: true,
8 | template: function() {
9 | return '' +
10 | '' +
11 | ' {{\'Shortcut\' | formioTranslate}} ' +
12 | '
';
14 | },
15 | controller: ['$scope', 'BuilderUtils', function($scope, BuilderUtils) {
16 | $scope.shortcuts = BuilderUtils.getAvailableShortcuts($scope.form, $scope.component);
17 | }]
18 | };
19 | };
20 |
--------------------------------------------------------------------------------
/src/directives/formBuilderOptionTags.js:
--------------------------------------------------------------------------------
1 | /**
2 | * A directive for a field to edit a component's tags.
3 | */
4 | var _map = require('lodash/map');
5 | module.exports = function() {
6 | return {
7 | restrict: 'E',
8 | replace: true,
9 | template: function() {
10 | return '' +
11 | '' +
12 | ' Field Tags ' +
13 | '
';
15 | },
16 | controller: ['$scope', function($scope) {
17 | $scope.component.tags = $scope.component.tags || [];
18 | $scope.tags = _map($scope.component.tags, function(tag) {
19 | return {text: tag};
20 | });
21 |
22 | $scope.addTag = function(tag) {
23 | if (!$scope.component) {
24 | return;
25 | }
26 | if (!$scope.component.tags) {
27 | $scope.component.tags = [];
28 | }
29 | $scope.component.tags.push(tag.text);
30 | };
31 | $scope.removeTag = function(tag) {
32 | if ($scope.component.tags && $scope.component.tags.length) {
33 | var tagIndex = $scope.component.tags.indexOf(tag.text);
34 | if (tagIndex !== -1) {
35 | $scope.component.tags.splice(tagIndex, 1);
36 | }
37 | }
38 | };
39 | }]
40 | };
41 | };
42 |
--------------------------------------------------------------------------------
/src/directives/formBuilderRow.js:
--------------------------------------------------------------------------------
1 | module.exports = [
2 | function() {
3 | return {
4 | scope: {
5 | component: '=',
6 | formio: '=',
7 | form: '=',
8 | // # of items needed in the list before hiding the
9 | // drag and drop prompt div
10 | hideDndBoxCount: '=',
11 | options: '='
12 | },
13 | restrict: 'E',
14 | replace: true,
15 | controller: 'formBuilderDnd',
16 | templateUrl: 'formio/formbuilder/row.html'
17 | };
18 | }
19 | ];
20 |
--------------------------------------------------------------------------------
/src/directives/formBuilderTable.js:
--------------------------------------------------------------------------------
1 | /**
2 | * A directive for a table builder
3 | */
4 | var _merge = require('lodash/merge');
5 | module.exports = function() {
6 | return {
7 | restrict: 'E',
8 | replace: true,
9 | template: function() {
10 | return '';
20 | },
21 | controller: [
22 | '$scope',
23 | function($scope) {
24 | $scope.builder = true;
25 | var changeTable = function() {
26 | /*eslint-disable max-depth */
27 | if ($scope.component.numRows && $scope.component.numCols) {
28 | var tmpTable = [];
29 | $scope.component.rows.splice($scope.component.numRows);
30 | for (var row = 0; row < $scope.component.numRows; row++) {
31 | if ($scope.component.rows[row]) {
32 | $scope.component.rows[row].splice($scope.component.numCols);
33 | }
34 | for (var col = 0; col < $scope.component.numCols; col++) {
35 | if (!tmpTable[row]) {
36 | tmpTable[row] = [];
37 | }
38 | tmpTable[row][col] = {components:[]};
39 | }
40 | }
41 | $scope.component.rows = _merge(tmpTable, $scope.component.rows);
42 | /*eslint-enable max-depth */
43 | }
44 | };
45 |
46 | $scope.$watch('component.numRows', changeTable);
47 | $scope.$watch('component.numCols', changeTable);
48 | }
49 | ]
50 | };
51 | };
52 |
--------------------------------------------------------------------------------
/src/directives/formBuilderTooltip.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Invokes Bootstrap's popover jquery plugin on an element
3 | * Tooltip text can be provided via title attribute or
4 | * as the value for this directive.
5 | */
6 | module.exports = ['$filter', function($filter) {
7 | return {
8 | restrict: 'A',
9 | replace: false,
10 | link: function($scope, el, attrs) {
11 | var formioTranslate = $filter('formioTranslate');
12 |
13 | if (attrs.formBuilderTooltip || attrs.title) {
14 | var tooltip = el;
15 | if (attrs.popoverAppend !== 'false') {
16 | tooltip = angular.element('
2 |
3 | {{ component.label }}
4 |
6 |
7 |
8 |
9 |
10 | {{ (component.label || '') | formioTranslate:null:builder }}
11 |
12 |
13 |
14 |
15 |
16 |
21 |
30 |
37 |
38 |
39 |
40 | Datagrid Components
41 |
42 |
43 |
44 |
45 |
46 |
47 |