Skip to content

Expanding the components to allow for more functionality. #1105

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lane-formio merged 5 commits into from
Dec 24, 2024
Merged

Expanding the components to allow for more functionality. #1105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9140195
Expanding the components to allow for more functionality.
travist Oct 30, 2024
1c47a44
Updated build.
travist Nov 1, 2024
8025463
Merge branch 'master' of github.com:formio/angular into expand-embed-lib
travist Dec 18, 2024
e797d9b
Updated versions.
travist Dec 18, 2024
12ea2d4
Add yarn.lock to expand-embed-lib
lane-formio Dec 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@formio/angular",
"version": "8.0.0-rc.3",
"version": "8.1.0-rc.1",
"scripts": {
"ng": "ng",
"build": "ng build angular-formio",
Expand All @@ -10,7 +10,7 @@
"docs:build": "compodoc -p tsconfig.json -n angular-formio -d docs --hideGenerator",
"docs:serve": "npm run docs:build -- -s",
"docs:watch": "npm run docs:build -- -s -w",
"publish": "npm run build:prod && npm publish ./dist/angular-formio --tag=8x",
"publish": "npm run build:prod && npm publish ./dist/angular-formio --tag=rc",
"publish:latest": "npm run build:prod && npm publish ./dist/angular-formio",
"test": "ng test",
"lint": "ng lint",
Expand Down Expand Up @@ -48,7 +48,7 @@
"@angular/router": "^18.1.2",
"@compodoc/compodoc": "^1.1.25",
"@formio/deprecated-types": "^0.1.0",
"@formio/js": "^5.0.0-rc.59",
"@formio/js": "^5.0.0",
"@types/jasmine": "^5.1.4",
"@types/jasminewd2": "^2.0.13",
"@types/node": "^22.0.0",
Expand Down
57 changes: 53 additions & 4 deletions projects/angular-formio/embed/src/builder.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Component, ElementRef, Input, ViewChild, Output, EventEmitter, AfterViewInit } from '@angular/core';
import { FormioCore as Formio } from '@formio/js';
import { FormBuilder } from '@formio/js';
import WebformBuilder from '@formio/js/lib/cjs/WebformBuilder';

@Component({
selector: 'formio-builder',
Expand All @@ -9,11 +10,59 @@ export class FormioBuilder implements AfterViewInit {
@ViewChild('formio') element: ElementRef;
@Input() form?: Object | null;
@Input() options?: Object = {};
@Output() ready = new EventEmitter<Formio>();
@Output() change = new EventEmitter<any>();
@Output() ready = new EventEmitter<any>();
@Output() error = new EventEmitter<any>();
public builder: FormBuilder;
public componentAdding = false;
get instance(): WebformBuilder {
return this.builder.instance;
}
ngAfterViewInit(): void {
Formio.builder(this.element.nativeElement, this.form, this.options).then((builder) => {
this.ready.emit(builder);
this.builder = new FormBuilder(this.element.nativeElement, this.form, this.options);
this.builder.ready.then(() => {
this.instance.on('addComponent', (component, parent, path, index, isNew) => {
if (isNew) {
this.componentAdding = true;
} else {
this.change.emit({
type: 'addComponent',
builder: this.instance,
form: this.instance.schema,
component: component,
parent: parent,
path: path,
index: index
});
this.componentAdding = false;
}
});
this.instance.on('saveComponent', (component, original, parent, path, index, isNew) => {
this.change.emit({
type: this.componentAdding ? 'addComponent' : 'saveComponent',
builder: this.instance,
form: this.instance.schema,
component: component,
originalComponent: original,
parent: parent,
path: path,
index: index,
isNew: isNew || false
});
this.componentAdding = false;
});
this.instance.on('removeComponent', (component, parent, path, index) => {
this.change.emit({
type: 'deleteComponent',
builder: this.instance,
form: this.instance.schema,
component: component,
parent: parent,
path: path,
index: index
});
});
this.ready.emit(this.instance);
}).catch((err) => this.error.emit(err));
}
}
21 changes: 15 additions & 6 deletions projects/angular-formio/embed/src/formio.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,36 @@
import { Component, ViewChild, ElementRef, Input, Output, EventEmitter, OnChanges, AfterViewInit } from '@angular/core';
import { FormioCore as Formio } from '@formio/js';
import { FormioCore as Formio, Webform } from '@formio/js';
import { Form, Submission } from '@formio/core/types'

@Component({
selector: 'formio',
template: '<div #formio></div>'
})
export class FormioComponent implements AfterViewInit {
@Input() src?: string;
@Input() form?: Object | null;
@Input() submission?: Object | null;
@Input() options?: Object = {};
@Output() ready = new EventEmitter<Formio>();
@Input() form?: Form | null;
@Input() submission?: Submission | null;
@Input() url?: string;
@Input() options?: Webform["options"] = {};
@Output() ready = new EventEmitter<Webform>();
@Output() submit = new EventEmitter<object>();
@Output() error = new EventEmitter<any>();
@Output() change = new EventEmitter<any>();
@ViewChild('formio') element: ElementRef;
public instance: Webform;
ngAfterViewInit(): void {
Formio.createForm(this.element.nativeElement, this.src || this.form, this.options).then((form) => {
Formio.createForm(this.element.nativeElement, this.src || this.form, this.options).then((form: Webform) => {
this.instance = form;
if (this.url) {
form.url = this.url;
}
if (this.submission) {
form.submission = this.submission;
}
this.ready.emit(form);
form.on('submit', (submission) => this.submit.emit(submission));
form.on('error', (err) => this.error.emit(err));
form.on('change', (event) => this.change.emit(event));
}).catch((err) => this.error.emit(err));
}
}
4 changes: 2 additions & 2 deletions projects/angular-formio/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@formio/angular",
"version": "8.0.0-rc.3",
"version": "8.1.0-rc.1",
"repository": {
"type": "git",
"url": "https://github.com/formio/angular-formio"
Expand Down Expand Up @@ -28,7 +28,7 @@
"@angular/core": "^16.0.0 || ^17.0.0 || ^18.0.0",
"@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0",
"@angular/elements": "^16.0.0 || ^17.0.0 || ^18.0.0",
"@formio/js": "^5.0.0-rc.54",
"@formio/js": "^5.0.0",
"zone.js": "~0.13.0 || ~0.14.0",
"lodash": "^4.17.20",
"ngx-bootstrap": "^10.0.0 || ^11.0.0 || ^12.0.0 || ^18.0.0",
Expand Down
2 changes: 1 addition & 1 deletion projects/angular-formio/src/formio.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export class FormioAppConfig {
apiUrl?: string,
baseUrl?: string,
appUrl?: string,
projectUrl?: string
projectUrl?: string
} = {}) {
this.apiUrl = config.apiUrl || config.baseUrl;
this.appUrl = config.appUrl || config.projectUrl;
Expand Down
6 changes: 4 additions & 2 deletions projects/angular-formio/src/formio.utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { RouterModule } from '@angular/router';
import { find, trim, each, intersection } from 'lodash';
import { each } from 'lodash';

export function extendRouter(Class: any, config: any, ClassRoutes: any) {
each(Class.decorators, decorator => {
Expand All @@ -11,7 +11,9 @@ export function extendRouter(Class: any, config: any, ClassRoutes: any) {
each(arg.imports, (_import, index) => {
if (
(_import.ngModule && (_import.ngModule.name === 'RouterModule')) ||
(_import.name === 'RouterModule')
(_import.ngModule && (_import.ngModule.name === '_RouterModule')) ||
(_import.name === 'RouterModule') ||
(_import.name === '_RouterModule')
) {
arg.imports[index] = RouterModule.forChild(ClassRoutes(config));
}
Expand Down
76 changes: 40 additions & 36 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1938,10 +1938,10 @@
resolved "https://registry.npmjs.org/@foliojs-fork/restructure/-/restructure-2.0.2.tgz#73759aba2aff1da87b7c4554e6839c70d43c92b4"
integrity sha512-59SgoZ3EXbkfSX7b63tsou/SDGzwUEK6MuB5sKqgVK1/XE0fxmpsOb9DQI8LXW3KfGnAjImCGhhEb7uPPAUVNA==

"@formio/bootstrap@^3.0.0-rc.25":
version "3.0.0-rc.21-dev.90.e1f0b93"
resolved "https://registry.npmjs.org/@formio/bootstrap/-/bootstrap-3.0.0-rc.21-dev.90.e1f0b93.tgz#fd669cecbf4ab2f58ad91d1a67e55dfbcad1d2b7"
integrity sha512-hNw2XvCU1hzdke42Gos2MnvWbUQjjhLPLPoRAqxEwxzg0lMeR5Xc9wlw1jRhHEwbpvF8c5bBVnnxfX/ilfah4A==
"@formio/bootstrap@3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@formio/bootstrap/-/bootstrap-3.0.0.tgz#a5b5ba7bbe7f2a7bcf76c826cce7d804889750fa"
integrity sha512-9a2JMY/qU/UUQ3BvlxrZfAjy/v5unwkXXBdy98+MiUbmQVaLi8ITIsA/YeYkRKFQW8V6BSbOoTlJhmVvxdvPnA==

"@formio/choices.js@^10.2.1":
version "10.2.1"
Expand All @@ -1952,20 +1952,20 @@
fuse.js "^6.6.2"
redux "^4.2.0"

"@formio/core@^2.1.0-dev.tt.13":
version "2.1.0-rc.3"
resolved "https://registry.npmjs.org/@formio/core/-/core-2.1.0-rc.3.tgz#d2022a66ad7e07e89248899231d406dd179fa812"
integrity sha512-/WMbVo1Gda9cIKSak8gUNk8T+MXcYjJ+hHi4XTrBG28c+oQppHDmh4zm2tnBH5YP3elrpaPa917lVdJXa3iqxw==
"@formio/core@2.3.0":
version "2.3.0"
resolved "https://registry.yarnpkg.com/@formio/core/-/core-2.3.0.tgz#33f58e0ac6da273e096b6b86b0ec68a440d1a9f2"
integrity sha512-jAlNm0vaSZQ9RSxt79PqeHdXYv/1i+zNfasVWbH1xRJSicJK0JcdodrBaDw8kKnEh0UmflW6RyIiaMyDbww4Ug==
dependencies:
"@types/json-logic-js" "^2.0.5"
"@types/json-logic-js" "^2.0.7"
browser-cookies "^1.2.0"
core-js "^3.33.2"
dayjs "^1.11.10"
dompurify "^3.0.6"
core-js "^3.37.1"
dayjs "^1.11.11"
dompurify "^3.1.4"
eventemitter3 "^5.0.0"
fast-json-patch "^3.1.1"
fetch-ponyfill "^7.1.0"
inputmask "^5.0.9-beta.45"
inputmask "^5.0.9"
json-logic-js "^2.0.2"
lodash "^4.17.21"
moment "^2.29.4"
Expand All @@ -1975,15 +1975,15 @@
resolved "https://registry.npmjs.org/@formio/deprecated-types/-/deprecated-types-0.1.0.tgz#e8db67b93a2eded12efd640a10c7ddf0cffa2441"
integrity sha512-jNc3Nw55nc75KESg+KPxxdG9ktnERTYodScAx3eh/J2dlA06N2Korafhu9zmwcDis8lOqtEz3X89cVxpJM9MzQ==

"@formio/js@^5.0.0-rc.59":
version "5.0.0-rc.59"
resolved "https://registry.npmjs.org/@formio/js/-/js-5.0.0-rc.59.tgz#88f91b88b1200989e4809e921420552f24a2de16"
integrity sha512-z+x3dDZPA/Bblkyitt+uPiRhY7jSkEwdSrqsg77UajMNZGpnqIefZdBZi9ZknxWQZ5x9S3jIVcLxZWdNb2D1yA==
"@formio/js@^5.0.0":
version "5.0.0"
resolved "https://registry.yarnpkg.com/@formio/js/-/js-5.0.0.tgz#6ff716b5b06f2e08e62eae26c4e4a78dd25b0494"
integrity sha512-Ly3f7q2wo5oFjlECKFtkIMy+Ah9HyAkf6ob70OrF/6MooSPF3hEu9euXouEWOoNdI+Tokr690/GdM2sDZtYzww==
dependencies:
"@formio/bootstrap" "^3.0.0-rc.25"
"@formio/bootstrap" "3.0.0"
"@formio/choices.js" "^10.2.1"
"@formio/core" "^2.1.0-dev.tt.13"
"@formio/text-mask-addons" "^3.8.0-formio.2"
"@formio/core" "2.3.0"
"@formio/text-mask-addons" "^3.8.0-formio.3"
"@formio/vanilla-text-mask" "^5.1.1-formio.1"
abortcontroller-polyfill "^1.7.5"
autocompleter "^8.0.4"
Expand All @@ -2000,7 +2000,6 @@
eventemitter3 "^5.0.1"
fast-deep-equal "^3.1.3"
fast-json-patch "^3.1.1"
fetch-ponyfill "^7.1.0"
idb "^7.1.1"
inputmask "^5.0.8"
ismobilejs "^1.1.1"
Expand All @@ -2017,10 +2016,10 @@
uuid "^9.0.0"
vanilla-picker "^2.12.3"

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

"@formio/vanilla-text-mask@^5.1.1-formio.1":
version "5.1.1-formio.1"
Expand Down Expand Up @@ -2795,7 +2794,7 @@
dependencies:
"@types/jasmine" "*"

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

core-js@^3.33.2, core-js@^3.37.1:
core-js@^3.37.1:
version "3.37.1"
resolved "https://registry.npmjs.org/core-js/-/core-js-3.37.1.tgz#d21751ddb756518ac5a00e4d66499df981a62db9"
integrity sha512-Xn6qmxrQZyB0FFY8E3bgRXei3lWDJHhvI+u0q9TKIYM49G8pAr0FgnnrFRAmsbptZL1yxRADVXn+x5AGsbBfyw==
Expand Down Expand Up @@ -4306,10 +4305,10 @@ date-format@^4.0.14:
resolved "https://registry.npmjs.org/date-format/-/date-format-4.0.14.tgz#7a8e584434fb169a521c8b7aa481f355810d9400"
integrity sha512-39BOQLs9ZjKh0/patS9nrT8wc3ioX3/eA/zgbKNopnF2wCqJEoxywwwElATYvRsXdnOxA/OQeQoFZ3rFjVajhg==

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

debug@2.6.9:
version "2.6.9"
Expand Down Expand Up @@ -4555,11 +4554,16 @@ domhandler@^5.0.2, domhandler@^5.0.3:
dependencies:
domelementtype "^2.3.0"

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

dompurify@^3.1.4:
version "3.1.6"
resolved "https://registry.npmjs.org/dompurify/-/dompurify-3.1.6.tgz#43c714a94c6a7b8801850f82e756685300a027e2"
integrity sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ==

domutils@^3.0.1:
version "3.1.0"
resolved "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
Expand Down Expand Up @@ -5931,10 +5935,10 @@ inputmask@^5.0.8:
resolved "https://registry.npmjs.org/inputmask/-/inputmask-5.0.8.tgz#cd0f70b058c3291a0d4f27de25dbfc179c998bb4"
integrity sha512-1WcbyudPTXP1B28ozWWyFa6QRIUG4KiLoyR6LFHlpT4OfTzRqFfWgHFadNvRuMN1S9XNVz9CdNvCGjJi+uAMqQ==

inputmask@^5.0.9-beta.45:
version "5.0.9-beta.70"
resolved "https://registry.npmjs.org/inputmask/-/inputmask-5.0.9-beta.70.tgz#86630eb60d0800a47a2b6cabee720d3ba41b654a"
integrity sha512-+8aqRwBxDNDi4zqKPo6te3zH+KWRSO3KA6EpANN5N8tDF3zd44AnbbOUI/g3RslavAaDuqwDMsPZwsxn3zWNMA==
inputmask@^5.0.9:
version "5.0.9"
resolved "https://registry.yarnpkg.com/inputmask/-/inputmask-5.0.9.tgz#7bf4e83f5e199c88c0edf28545dc23fa208ef4be"
integrity sha512-s0lUfqcEbel+EQXtehXqwCJGShutgieOaIImFKC/r4reYNvX3foyrChl6LOEvaEgxEbesePIrw1Zi2jhZaDZbQ==

internal-slot@^1.0.7:
version "1.0.7"
Expand Down