Skip to content

Commit 9140195

Browse files
travisttravist
committed
Expanding the components to allow for more functionality.
1 parent 72ddbed commit 9140195

File tree

6 files changed

+111
-52
lines changed

6 files changed

+111
-52
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
"@angular/router": "^18.1.2",
4949
"@compodoc/compodoc": "^1.1.25",
5050
"@formio/deprecated-types": "^0.1.0",
51-
"@formio/js": "^5.0.0-rc.59",
51+
"@formio/js": "^5.0.0-rc.96",
5252
"@types/jasmine": "^5.1.4",
5353
"@types/jasminewd2": "^2.0.13",
5454
"@types/node": "^22.0.0",

‎projects/angular-formio/embed/src/builder.component.ts‎

Lines changed: 53 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component, ElementRef, Input, ViewChild, Output, EventEmitter, AfterViewInit } from '@angular/core';
2-
import { FormioCore as Formio } from '@formio/js';
2+
import { FormBuilder } from '@formio/js';
3+
import WebformBuilder from '@formio/js/lib/cjs/WebformBuilder';
34

45
@Component({
56
selector: 'formio-builder',
@@ -9,11 +10,59 @@ export class FormioBuilder implements AfterViewInit {
910
@ViewChild('formio') element: ElementRef;
1011
@Input() form?: Object | null;
1112
@Input() options?: Object = {};
12-
@Output() ready = new EventEmitter<Formio>();
13+
@Output() change = new EventEmitter<any>();
14+
@Output() ready = new EventEmitter<any>();
1315
@Output() error = new EventEmitter<any>();
16+
public builder: FormBuilder;
17+
public componentAdding = false;
18+
get instance(): WebformBuilder {
19+
return this.builder.instance;
20+
}
1421
ngAfterViewInit(): void {
15-
Formio.builder(this.element.nativeElement, this.form, this.options).then((builder) => {
16-
this.ready.emit(builder);
22+
this.builder = new FormBuilder(this.element.nativeElement, this.form, this.options);
23+
this.builder.ready.then(() => {
24+
this.instance.on('addComponent', (component, parent, path, index, isNew) => {
25+
if (isNew) {
26+
this.componentAdding = true;
27+
} else {
28+
this.change.emit({
29+
type: 'addComponent',
30+
builder: this.instance,
31+
form: this.instance.schema,
32+
component: component,
33+
parent: parent,
34+
path: path,
35+
index: index
36+
});
37+
this.componentAdding = false;
38+
}
39+
});
40+
this.instance.on('saveComponent', (component, original, parent, path, index, isNew) => {
41+
this.change.emit({
42+
type: this.componentAdding ? 'addComponent' : 'saveComponent',
43+
builder: this.instance,
44+
form: this.instance.schema,
45+
component: component,
46+
originalComponent: original,
47+
parent: parent,
48+
path: path,
49+
index: index,
50+
isNew: isNew || false
51+
});
52+
this.componentAdding = false;
53+
});
54+
this.instance.on('removeComponent', (component, parent, path, index) => {
55+
this.change.emit({
56+
type: 'deleteComponent',
57+
builder: this.instance,
58+
form: this.instance.schema,
59+
component: component,
60+
parent: parent,
61+
path: path,
62+
index: index
63+
});
64+
});
65+
this.ready.emit(this.instance);
1766
}).catch((err) => this.error.emit(err));
1867
}
1968
}

‎projects/angular-formio/embed/src/formio.component.ts‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,36 @@
11
import { Component, ViewChild, ElementRef, Input, Output, EventEmitter, OnChanges, AfterViewInit } from '@angular/core';
2-
import { FormioCore as Formio } from '@formio/js';
2+
import { FormioCore as Formio, Webform } from '@formio/js';
3+
import { Form, Submission } from '@formio/core/types'
34

45
@Component({
56
selector: 'formio',
67
template: '<div #formio></div>'
78
})
89
export class FormioComponent implements AfterViewInit {
910
@Input() src?: string;
10-
@Input() form?: Object | null;
11-
@Input() submission?: Object | null;
12-
@Input() options?: Object = {};
13-
@Output() ready = new EventEmitter<Formio>();
11+
@Input() form?: Form | null;
12+
@Input() submission?: Submission | null;
13+
@Input() url?: string;
14+
@Input() options?: Webform["options"] = {};
15+
@Output() ready = new EventEmitter<Webform>();
1416
@Output() submit = new EventEmitter<object>();
1517
@Output() error = new EventEmitter<any>();
18+
@Output() change = new EventEmitter<any>();
1619
@ViewChild('formio') element: ElementRef;
20+
public instance: Webform;
1721
ngAfterViewInit(): void {
18-
Formio.createForm(this.element.nativeElement, this.src || this.form, this.options).then((form) => {
22+
Formio.createForm(this.element.nativeElement, this.src || this.form, this.options).then((form: Webform) => {
23+
this.instance = form;
24+
if (this.url) {
25+
form.url = this.url;
26+
}
1927
if (this.submission) {
2028
form.submission = this.submission;
2129
}
2230
this.ready.emit(form);
2331
form.on('submit', (submission) => this.submit.emit(submission));
2432
form.on('error', (err) => this.error.emit(err));
33+
form.on('change', (event) => this.change.emit(event));
2534
}).catch((err) => this.error.emit(err));
2635
}
2736
}

‎projects/angular-formio/src/formio.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export class FormioAppConfig {
1414
apiUrl?: string,
1515
baseUrl?: string,
1616
appUrl?: string,
17-
projectUrl?: string
17+
projectUrl?: string
1818
} = {}) {
1919
this.apiUrl = config.apiUrl || config.baseUrl;
2020
this.appUrl = config.appUrl || config.projectUrl;

‎projects/angular-formio/src/formio.utils.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { RouterModule } from '@angular/router';
2-
import { find, trim, each, intersection } from 'lodash';
2+
import { each } from 'lodash';
33

44
export function extendRouter(Class: any, config: any, ClassRoutes: any) {
55
each(Class.decorators, decorator => {
@@ -11,7 +11,9 @@ export function extendRouter(Class: any, config: any, ClassRoutes: any) {
1111
each(arg.imports, (_import, index) => {
1212
if (
1313
(_import.ngModule && (_import.ngModule.name === 'RouterModule')) ||
14-
(_import.name === 'RouterModule')
14+
(_import.ngModule && (_import.ngModule.name === '_RouterModule')) ||
15+
(_import.name === 'RouterModule') ||
16+
(_import.name === '_RouterModule')
1517
) {
1618
arg.imports[index] = RouterModule.forChild(ClassRoutes(config));
1719
}

‎yarn.lock‎

Lines changed: 37 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1938,10 +1938,10 @@
19381938
resolved "https://registry.npmjs.org/@foliojs-fork/restructure/-/restructure-2.0.2.tgz#73759aba2aff1da87b7c4554e6839c70d43c92b4"
19391939
integrity sha512-59SgoZ3EXbkfSX7b63tsou/SDGzwUEK6MuB5sKqgVK1/XE0fxmpsOb9DQI8LXW3KfGnAjImCGhhEb7uPPAUVNA==
19401940

1941-
"@formio/bootstrap@^3.0.0-rc.25":
1942-
version "3.0.0-rc.21-dev.90.e1f0b93"
1943-
resolved "https://registry.npmjs.org/@formio/bootstrap/-/bootstrap-3.0.0-rc.21-dev.90.e1f0b93.tgz#fd669cecbf4ab2f58ad91d1a67e55dfbcad1d2b7"
1944-
integrity sha512-hNw2XvCU1hzdke42Gos2MnvWbUQjjhLPLPoRAqxEwxzg0lMeR5Xc9wlw1jRhHEwbpvF8c5bBVnnxfX/ilfah4A==
1941+
"@formio/bootstrap@3.0.0-rc.41":
1942+
version "3.0.0-rc.41"
1943+
resolved "https://registry.npmjs.org/@formio/bootstrap/-/bootstrap-3.0.0-rc.41.tgz#460b10ab1f4771df379369909840587de4a7438a"
1944+
integrity sha512-jGPxTNHZEnt7c9MO7agx/Ni4K4utcTjK6ePlGX8tPlJzOMbzI45JU3SD12f4i1g9oWIyHSMJoP//soCvrkTTOA==
19451945

19461946
"@formio/choices.js@^10.2.1":
19471947
version "10.2.1"
@@ -1952,20 +1952,20 @@
19521952
fuse.js "^6.6.2"
19531953
redux "^4.2.0"
19541954

1955-
"@formio/core@^2.1.0-dev.tt.13":
1956-
version "2.1.0-rc.3"
1957-
resolved "https://registry.npmjs.org/@formio/core/-/core-2.1.0-rc.3.tgz#d2022a66ad7e07e89248899231d406dd179fa812"
1958-
integrity sha512-/WMbVo1Gda9cIKSak8gUNk8T+MXcYjJ+hHi4XTrBG28c+oQppHDmh4zm2tnBH5YP3elrpaPa917lVdJXa3iqxw==
1955+
"@formio/core@2.3.0-rc.18":
1956+
version "2.3.0-rc.18"
1957+
resolved "https://registry.npmjs.org/@formio/core/-/core-2.3.0-rc.18.tgz#44f0eaf854d8dc6bbbad1753786f2b13939eac6e"
1958+
integrity sha512-inkZLOSpYBiatQa8uJUII+cRk23URlyK4HkS09pHJG/857dxwfn0BIalSc9loTgFawjg6E3UuzCTfjfgUY6MDA==
19591959
dependencies:
1960-
"@types/json-logic-js" "^2.0.5"
1960+
"@types/json-logic-js" "^2.0.7"
19611961
browser-cookies "^1.2.0"
1962-
core-js "^3.33.2"
1963-
dayjs "^1.11.10"
1964-
dompurify "^3.0.6"
1962+
core-js "^3.37.1"
1963+
dayjs "^1.11.11"
1964+
dompurify "^3.1.4"
19651965
eventemitter3 "^5.0.0"
19661966
fast-json-patch "^3.1.1"
19671967
fetch-ponyfill "^7.1.0"
1968-
inputmask "^5.0.9-beta.45"
1968+
inputmask "5.0.8"
19691969
json-logic-js "^2.0.2"
19701970
lodash "^4.17.21"
19711971
moment "^2.29.4"
@@ -1975,15 +1975,15 @@
19751975
resolved "https://registry.npmjs.org/@formio/deprecated-types/-/deprecated-types-0.1.0.tgz#e8db67b93a2eded12efd640a10c7ddf0cffa2441"
19761976
integrity sha512-jNc3Nw55nc75KESg+KPxxdG9ktnERTYodScAx3eh/J2dlA06N2Korafhu9zmwcDis8lOqtEz3X89cVxpJM9MzQ==
19771977

1978-
"@formio/js@^5.0.0-rc.59":
1979-
version "5.0.0-rc.59"
1980-
resolved "https://registry.npmjs.org/@formio/js/-/js-5.0.0-rc.59.tgz#88f91b88b1200989e4809e921420552f24a2de16"
1981-
integrity sha512-z+x3dDZPA/Bblkyitt+uPiRhY7jSkEwdSrqsg77UajMNZGpnqIefZdBZi9ZknxWQZ5x9S3jIVcLxZWdNb2D1yA==
1978+
"@formio/js@^5.0.0-rc.96":
1979+
version "5.0.0-rc.96"
1980+
resolved "https://registry.npmjs.org/@formio/js/-/js-5.0.0-rc.96.tgz#70994ab5c6a240435f460fc32139ea57b3313683"
1981+
integrity sha512-WMHgv13rAqjGX5qntPSHlfv7Ccg/IXM6+jOango6UqHBQCr2mZWprpOTDkfO2MewVvYVwZGgnWO7TfLacfoWZg==
19821982
dependencies:
1983-
"@formio/bootstrap" "^3.0.0-rc.25"
1983+
"@formio/bootstrap" "3.0.0-rc.41"
19841984
"@formio/choices.js" "^10.2.1"
1985-
"@formio/core" "^2.1.0-dev.tt.13"
1986-
"@formio/text-mask-addons" "^3.8.0-formio.2"
1985+
"@formio/core" "2.3.0-rc.18"
1986+
"@formio/text-mask-addons" "^3.8.0-formio.3"
19871987
"@formio/vanilla-text-mask" "^5.1.1-formio.1"
19881988
abortcontroller-polyfill "^1.7.5"
19891989
autocompleter "^8.0.4"
@@ -2000,7 +2000,6 @@
20002000
eventemitter3 "^5.0.1"
20012001
fast-deep-equal "^3.1.3"
20022002
fast-json-patch "^3.1.1"
2003-
fetch-ponyfill "^7.1.0"
20042003
idb "^7.1.1"
20052004
inputmask "^5.0.8"
20062005
ismobilejs "^1.1.1"
@@ -2017,10 +2016,10 @@
20172016
uuid "^9.0.0"
20182017
vanilla-picker "^2.12.3"
20192018

2020-
"@formio/text-mask-addons@^3.8.0-formio.2":
2021-
version "3.8.0-formio.2"
2022-
resolved "https://registry.npmjs.org/@formio/text-mask-addons/-/text-mask-addons-3.8.0-formio.2.tgz#b9489e68911c70a31997b97dd846d8a7cca6abdb"
2023-
integrity sha512-H4Sm+1Sx59jbrlKxtKbzethhp5OIcP8Oi4JBpsvH/SB8P/KCRmtjKbN5ACqURnXmYtBHLJC6Yr9KZibOVRGxpA==
2019+
"@formio/text-mask-addons@^3.8.0-formio.3":
2020+
version "3.8.0-formio.3"
2021+
resolved "https://registry.npmjs.org/@formio/text-mask-addons/-/text-mask-addons-3.8.0-formio.3.tgz#9da71371a2cb6f781e5e9f90246f25b3d053f75d"
2022+
integrity sha512-izNhggJTaCEJNOhtdCkouLxBP3byl+ObsHTdp9RpKwNz0k/ZIy/0xuelk1NY4vAjKojnJPiAjtxn+rrcZnEkpw==
20242023

20252024
"@formio/vanilla-text-mask@^5.1.1-formio.1":
20262025
version "5.1.1-formio.1"
@@ -2795,7 +2794,7 @@
27952794
dependencies:
27962795
"@types/jasmine" "*"
27972796

2798-
"@types/json-logic-js@^2.0.5":
2797+
"@types/json-logic-js@^2.0.7":
27992798
version "2.0.7"
28002799
resolved "https://registry.npmjs.org/@types/json-logic-js/-/json-logic-js-2.0.7.tgz#09a70a932d0be937618a9fc791291b069e637fb0"
28012800
integrity sha512-fucvZmbjqa1+gpw/nIwcP+ZIYHTvmwxuQQFKw/yU7+ZSD63z/xgY5pWN7sYUDRzg2Wf9STapL+7c66FNzhU6+Q==
@@ -4128,7 +4127,7 @@ core-js-compat@^3.36.1:
41284127
dependencies:
41294128
browserslist "^4.23.0"
41304129

4131-
core-js@^3.33.2, core-js@^3.37.1:
4130+
core-js@^3.37.1:
41324131
version "3.37.1"
41334132
resolved "https://registry.npmjs.org/core-js/-/core-js-3.37.1.tgz#d21751ddb756518ac5a00e4d66499df981a62db9"
41344133
integrity sha512-Xn6qmxrQZyB0FFY8E3bgRXei3lWDJHhvI+u0q9TKIYM49G8pAr0FgnnrFRAmsbptZL1yxRADVXn+x5AGsbBfyw==
@@ -4306,10 +4305,10 @@ date-format@^4.0.14:
43064305
resolved "https://registry.npmjs.org/date-format/-/date-format-4.0.14.tgz#7a8e584434fb169a521c8b7aa481f355810d9400"
43074306
integrity sha512-39BOQLs9ZjKh0/patS9nrT8wc3ioX3/eA/zgbKNopnF2wCqJEoxywwwElATYvRsXdnOxA/OQeQoFZ3rFjVajhg==
43084307

4309-
dayjs@^1.11.10:
4310-
version "1.11.10"
4311-
resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
4312-
integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==
4308+
dayjs@^1.11.11:
4309+
version "1.11.13"
4310+
resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz#92430b0139055c3ebb60150aa13e860a4b5a366c"
4311+
integrity sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==
43134312

43144313
debug@2.6.9:
43154314
version "2.6.9"
@@ -4555,11 +4554,16 @@ domhandler@^5.0.2, domhandler@^5.0.3:
45554554
dependencies:
45564555
domelementtype "^2.3.0"
45574556

4558-
dompurify@^3.0.6, dompurify@^3.1.3:
4557+
dompurify@^3.1.3:
45594558
version "3.1.4"
45604559
resolved "https://registry.npmjs.org/dompurify/-/dompurify-3.1.4.tgz#42121304b2b3a6bae22f80131ff8a8f3f3c56be2"
45614560
integrity sha512-2gnshi6OshmuKil8rMZuQCGiUF3cUxHY3NGDzUAdUx/NPEe5DVnO8BDoAQouvgwnx0R/+a6jUn36Z0FSdq8vww==
45624561

4562+
dompurify@^3.1.4:
4563+
version "3.1.6"
4564+
resolved "https://registry.npmjs.org/dompurify/-/dompurify-3.1.6.tgz#43c714a94c6a7b8801850f82e756685300a027e2"
4565+
integrity sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ==
4566+
45634567
domutils@^3.0.1:
45644568
version "3.1.0"
45654569
resolved "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
@@ -5921,16 +5925,11 @@ injection-js@^2.4.0:
59215925
dependencies:
59225926
tslib "^2.0.0"
59235927

5924-
inputmask@^5.0.8:
5928+
inputmask@5.0.8, inputmask@^5.0.8:
59255929
version "5.0.8"
59265930
resolved "https://registry.npmjs.org/inputmask/-/inputmask-5.0.8.tgz#cd0f70b058c3291a0d4f27de25dbfc179c998bb4"
59275931
integrity sha512-1WcbyudPTXP1B28ozWWyFa6QRIUG4KiLoyR6LFHlpT4OfTzRqFfWgHFadNvRuMN1S9XNVz9CdNvCGjJi+uAMqQ==
59285932

5929-
inputmask@^5.0.9-beta.45:
5930-
version "5.0.9-beta.70"
5931-
resolved "https://registry.npmjs.org/inputmask/-/inputmask-5.0.9-beta.70.tgz#86630eb60d0800a47a2b6cabee720d3ba41b654a"
5932-
integrity sha512-+8aqRwBxDNDi4zqKPo6te3zH+KWRSO3KA6EpANN5N8tDF3zd44AnbbOUI/g3RslavAaDuqwDMsPZwsxn3zWNMA==
5933-
59345933
internal-slot@^1.0.7:
59355934
version "1.0.7"
59365935
resolved "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz#c06dcca3ed874249881007b0a5523b172a190802"

0 commit comments

Comments
 (0)