UNPKG

@formio-tmt/angular

Version:

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.4.

807 lines (794 loc) 215 kB
import * as i0 from '@angular/core'; import { Injectable, EventEmitter, Component, Optional, Input, Output, ViewChild, Pipe, ViewEncapsulation, NgModule } from '@angular/core'; import { Observable } from 'rxjs'; import { Formio, Utils, Form, FormBuilder, Components } from '@formio-tmt/js'; export { Components, Formio, Utils as FormioUtils, Templates } from '@formio-tmt/js'; import { RouterModule } from '@angular/router'; import { each, assign, get, isEmpty, isArray, isNil, clone } from 'lodash'; import * as i1 from '@angular/common'; import { CommonModule } from '@angular/common'; import { createCustomElement } from '@angular/elements'; class FormioAppConfig { appUrl = ''; apiUrl = ''; icons; formOnly; static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: FormioAppConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: FormioAppConfig }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: FormioAppConfig, decorators: [{ type: Injectable }] }); class FormioError { message; component; silent; constructor(message, component, silent) { this.message = message; this.component = component; this.silent = silent; } } class FormioService { url; options; formio; constructor(url, options) { this.url = url; this.options = options; this.formio = new Formio(this.url, this.options); } requestWrapper(fn) { let record; let called = false; return Observable.create((observer) => { try { if (!called) { called = true; fn() .then((_record) => { record = _record; observer.next(record); observer.complete(); }) .catch((err) => observer.error(err)); } else if (record) { observer.next(record); observer.complete(); } } catch (err) { observer.error(err); } }); } saveForm(form, options) { return this.requestWrapper(() => this.formio.saveForm(form, options)); } loadForm(query, options) { return this.requestWrapper(() => this.formio.loadForm(query, options)); } loadForms(query, options) { return this.requestWrapper(() => this.formio.loadForms(query, options)); } loadSubmission(query, options) { return this.requestWrapper(() => this.formio.loadSubmission(query, options)); } userPermissions(user, form, submission) { return this.requestWrapper(() => this.formio.userPermissions(user, form, submission)); } deleteSubmission(data, options) { return this.requestWrapper(() => this.formio.deleteSubmission(data, options)); } saveSubmission(submission, options) { return this.requestWrapper(() => this.formio.saveSubmission(submission, options)); } loadSubmissions(query, options) { return this.requestWrapper(() => this.formio.loadSubmissions(query, options)); } } class FormioPromiseService { url; options; formioService; constructor(url, options) { this.url = url; this.options = options; this.formioService = new FormioService(url, options); } saveForm(form, options) { return this.formioService.saveForm(form, options).toPromise(); } loadForm(query, options) { return this.formioService.loadForm(query, options).toPromise(); } loadSubmission(query, options) { return this.formioService.loadSubmission(query, options).toPromise(); } userPermissions(user, form, submission) { return this.formioService.userPermissions(user, form, submission).toPromise(); } deleteSubmission(data, options) { return this.formioService.deleteSubmission(data, options).toPromise(); } loadForms(query, options) { return this.formioService.loadForms(query, options).toPromise(); } saveSubmission(submission, options) { return this.formioService.saveSubmission(submission, options).toPromise(); } loadSubmissions(query, options) { return this.formioService.loadSubmissions(query, options).toPromise(); } } function extendRouter(Class, config, ClassRoutes) { each(Class.decorators, decorator => { each(decorator.args, arg => { if (arg.declarations) { each(config, component => arg.declarations.push(component)); } if (arg.imports) { each(arg.imports, (_import, index) => { if ((_import.ngModule && (_import.ngModule.name === 'RouterModule')) || (_import.name === 'RouterModule')) { arg.imports[index] = RouterModule.forChild(ClassRoutes(config)); } }); } }); }); return Class; } class FormioAlerts { alerts = []; setAlert(alert) { this.alerts = [alert]; } addAlert(alert) { this.alerts.push(alert); } setAlerts(alerts) { this.alerts = alerts; } } var AlertsPosition; (function (AlertsPosition) { AlertsPosition[AlertsPosition["none"] = 0] = "none"; AlertsPosition[AlertsPosition["top"] = 1] = "top"; AlertsPosition[AlertsPosition["bottom"] = 2] = "bottom"; AlertsPosition[AlertsPosition["both"] = 3] = "both"; })(AlertsPosition || (AlertsPosition = {})); class CustomTagsService { tags = []; addCustomTag(tag) { this.tags.push(tag); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CustomTagsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CustomTagsService }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CustomTagsService, decorators: [{ type: Injectable }] }); const { Evaluator, fastCloneDeep } = Utils; class FormioBaseComponent { ngZone; config; customTags; form; submission = {}; src; url; service; options; noeval = Evaluator.noeval; formioOptions; renderOptions; readOnly = false; viewOnly = false; hideLoading = false; hideComponents; refresh; error; success; submitDone; language; hooks = {}; renderer; watchSubmissionErrors = false; dataTableActions = []; render = new EventEmitter(); customEvent = new EventEmitter(); fileUploadingStatus = new EventEmitter(); submit = new EventEmitter(); prevPage = new EventEmitter(); nextPage = new EventEmitter(); beforeSubmit = new EventEmitter(); rowAdd = new EventEmitter(); rowAdded = new EventEmitter(); rowEdit = new EventEmitter(); rowEdited = new EventEmitter(); rowDelete = new EventEmitter(); rowClick = new EventEmitter(); rowSelectChange = new EventEmitter(); change = new EventEmitter(); invalid = new EventEmitter(); errorChange = new EventEmitter(); formLoad = new EventEmitter(); submissionLoad = new EventEmitter(); ready = new EventEmitter(); formioElement; AlertsPosition = AlertsPosition; formio; initialized = false; alerts = new FormioAlerts(); formioReady; formioReadyResolve; submitting = false; submissionSuccess = false; isLoading; noAlerts; label; constructor(ngZone, config, customTags) { this.ngZone = ngZone; this.config = config; this.customTags = customTags; this.isLoading = true; this.formioReady = new Promise((ready) => { this.formioReadyResolve = ready; }); } getRenderer() { return this.renderer; } getRendererOptions() { const extraTags = this.customTags ? this.customTags.tags : []; return assign({}, { icons: get(this.config, 'icons', 'fontawesome'), noAlerts: get(this.options, 'noAlerts', true), readOnly: this.readOnly, viewAsHtml: this.viewOnly, ...(this.viewOnly && { renderMode: "html" }), i18n: get(this.options, 'i18n', null), fileService: get(this.options, 'fileService', null), hooks: this.hooks, sanitizeConfig: { addTags: extraTags }, dataTableActions: this.dataTableActions }, this.renderOptions || {}); } createRenderer() { const Renderer = this.getRenderer(); const form = (new Renderer(this.formioElement ? this.formioElement.nativeElement : null, this.form, this.getRendererOptions())); return form.instance; } setForm(form) { this.form = form; if (this.formio) { this.formio.destroy(); } if (this.form.title) { this.label = this.form.title; } else if (this.form.components && this.form.components[0]) { this.label = this.form.components[0].label; } // Clear out the element to render the new form. if (this.formioElement && this.formioElement.nativeElement) { this.formioElement.nativeElement.innerHTML = ''; } this.formio = this.createRenderer(); this.formio.setSubmission(this.submission, { fromSubmission: false }); if (this.renderOptions && this.renderOptions.validateOnInit) { this.formio.setValue(this.submission, { validateOnInit: true }); } if (this.url) { this.formio.setUrl(this.url, this.formioOptions || {}); } if (this.src) { this.formio.setUrl(this.src, this.formioOptions || {}); } this.formio.nosubmit = true; this.formio.on('prevPage', (data) => this.ngZone.run(() => this.onPrevPage(data))); this.formio.on('nextPage', (data) => this.ngZone.run(() => this.onNextPage(data))); this.formio.on('change', (value, flags, isModified) => this.ngZone.run(() => this.onChange(value, flags, isModified))); this.formio.on('rowAdd', (component) => this.ngZone.run(() => this.rowAdd.emit(component))); this.formio.on('rowAdded', (data, component) => this.ngZone.run(() => this.rowAdded.emit({ component, row: data }))); this.formio.on('rowEdit', (data, rowIndex, index, component) => this.ngZone.run(() => this.rowEdit.emit({ component, row: data, rowIndex, index }))); this.formio.on('rowEdited', (data, rowIndex, component) => this.ngZone.run(() => this.rowEdited.emit({ component, row: data, rowIndex }))); this.formio.on('rowDelete', (data, rowIndex, index, component) => this.ngZone.run(() => this.rowDelete.emit({ component, row: data, rowIndex, index }))); this.formio.on('rowClick', (row, rowIndex, index, component) => this.ngZone.run(() => this.rowClick.emit({ component, row, rowIndex, index }))); this.formio.on('rowSelectChange', (selectedRows, component) => this.ngZone.run(() => this.rowSelectChange.emit({ selectedRows, component }))); this.formio.on('customEvent', (event) => this.ngZone.run(() => this.customEvent.emit(event))); ['fileUploadingStart', 'fileUploadingEnd'].forEach((eventName, index) => { const status = !!index ? 'end' : 'start'; this.formio.on(eventName, () => this.ngZone.run(() => this.fileUploadingStatus.emit(status))); }); this.formio.on('submit', (submission, saved) => this.ngZone.run(() => this.submitForm(submission, saved))); this.formio.on('error', (err) => this.ngZone.run(() => { this.submissionSuccess = false; return this.onError(err); })); this.formio.on('render', () => this.ngZone.run(() => this.render.emit())); this.formio.on('formLoad', (loadedForm) => this.ngZone.run(() => this.formLoad.emit(loadedForm))); return this.formio.ready.then(() => { this.ngZone.run(() => { this.isLoading = false; this.ready.emit(this); this.formioReadyResolve(this.formio); if (this.formio.submissionReady) { this.formio.submissionReady.then((submission) => { this.submissionLoad.emit(submission); }); } }); return this.formio; }); } initialize() { if (this.initialized) { return; } const extraTags = this.customTags ? this.customTags.tags : []; const defaultOptions = { errors: { message: 'Please fix the following errors before submitting.' }, alerts: { submitMessage: 'Submission Complete.' }, disableAlerts: false, hooks: { beforeSubmit: null }, sanitizeConfig: { addTags: extraTags }, alertsPosition: AlertsPosition.top, }; this.options = Object.assign(defaultOptions, this.options); if (this.options.disableAlerts) { this.options.alertsPosition = AlertsPosition.none; } this.initialized = true; } ngOnInit() { Evaluator.noeval = this.noeval; this.initialize(); if (this.language) { if (typeof this.language === 'string') { this.formio.language = this.language; } else { this.language.subscribe((lang) => { this.formio.language = lang; }); } } if (this.refresh) { this.refresh.subscribe((refresh) => this.onRefresh(refresh)); } if (this.error) { this.error.subscribe((err) => this.onError(err)); } if (this.success) { this.success.subscribe((message) => { this.alerts.setAlert({ type: 'success', message: message || get(this.options, 'alerts.submitMessage') }); }); } if (this.submitDone) { this.submitDone.subscribe((submission) => { this.formio.emit('submitDone', submission); }); } if (this.src) { if (!this.service) { this.service = new FormioService(this.src); } this.isLoading = true; this.service.loadForm({ params: { live: 1 } }).subscribe((form) => { if (form && form.components) { this.ngZone.runOutsideAngular(() => { this.setForm(form); }); } // if a submission is also provided. if (isEmpty(this.submission) && this.service && this.service.formio.submissionId) { this.service.loadSubmission().subscribe((submission) => { if (this.readOnly) { this.formio.options.readOnly = true; } this.submission = this.formio.submission = submission; }, err => this.onError(err)); } }, err => this.onError(err)); } if (this.url && !this.service) { this.service = new FormioService(this.url); } } ngOnDestroy() { if (this.formio) { this.formio.destroy(); } } onRefresh(refresh) { this.formioReady.then(() => { if (refresh.form) { this.formio.setForm(refresh.form).then(() => { if (refresh.submission) { this.formio.setSubmission(refresh.submission); } }); } else if (refresh.submission) { this.formio.setSubmission(refresh.submission); } else { switch (refresh.property) { case 'submission': this.formio.submission = refresh.value; break; case 'form': this.formio.form = refresh.value; break; } } }); } ngOnChanges(changes) { Evaluator.noeval = this.noeval; this.initialize(); if (changes.form && changes.form.currentValue) { this.ngZone.runOutsideAngular(() => { this.setForm(changes.form.currentValue); }); } this.formioReady.then(() => { if (changes.submission && changes.submission.currentValue) { this.formio.setSubmission(changes.submission.currentValue, { fromSubmission: !changes.submission.firstChange }); } if (changes.hideComponents && changes.hideComponents.currentValue) { const hiddenComponents = changes.hideComponents.currentValue; this.formio.options.hide = hiddenComponents; this.formio.everyComponent((component) => { component.options.hide = hiddenComponents; if (hiddenComponents.includes(component.component.key)) { component.visible = false; } }); } }); } onPrevPage(data) { this.alerts.setAlerts([]); this.prevPage.emit(data); } onNextPage(data) { this.alerts.setAlerts([]); this.nextPage.emit(data); } onSubmit(submission, saved, noemit) { this.submitting = false; this.submissionSuccess = true; this.formio.setValue(fastCloneDeep(submission), { noValidate: true, noCheck: true }); if (saved) { this.formio.emit('submitDone', submission); } if (!noemit) { this.submit.emit(submission); } if (!this.success) { this.alerts.setAlert({ type: 'success', message: get(this.options, 'alerts.submitMessage') }); } } onError(err) { this.alerts.setAlerts([]); this.submitting = false; this.isLoading = false; if (!err) { return; } // Make sure it is an array. const errors = Array.isArray(err) ? err : [err]; // Emit these errors again. this.errorChange.emit(errors); if (err.silent) { return; } if (this.formio && errors.length) { this.formio.emit('submitError', errors); } // Iterate through each one and set the alerts array. errors.forEach((error) => { const { message, paths, } = error ? error.details ? { message: error.details.map((detail) => detail.message), paths: error.details.map((detail) => detail.path), } : { message: error.message || error.toString(), paths: error.path ? [error.path] : [], } : { message: '', paths: [], }; let shouldErrorDisplay = true; if (this.formio) { paths.forEach((path, index) => { const component = this.formio.getComponent(path); if (component) { const components = Array.isArray(component) ? component : [component]; const messageText = Array.isArray(message) ? message[index] : message; components.forEach((comp) => comp.setCustomValidity(messageText, true)); this.alerts.addAlert({ type: 'danger', message: message[index], component, }); shouldErrorDisplay = false; } }); if (window.VPAT_ENABLED) { if (typeof error === 'string' && this.formio.components) { this.formio.components.forEach((comp) => { if (comp && comp.type !== 'button') { comp.setCustomValidity(message, true); } }); } } if (!this.noAlerts) { this.formio.showErrors(); } } if (shouldErrorDisplay) { this.alerts.addAlert({ type: 'danger', message, component: error.component, }); } }); } focusOnComponet(key) { if (this.formio) { this.formio.focusOnComponent(key); } } submitExecute(submission, saved = false) { if (this.service && !this.url && !saved) { this.service .saveSubmission(submission) .subscribe((sub) => this.onSubmit(sub, true), err => this.onError(err)); } else { this.onSubmit(submission, false); } } submitForm(submission, saved = false) { // Keep double submits from occurring... if (this.submitting) { return; } this.formio.setMetadata(submission); this.submissionSuccess = false; this.submitting = true; this.beforeSubmit.emit(submission); // if they provide a beforeSubmit hook, then allow them to alter the submission asynchronously // or even provide a custom Error method. const beforeSubmit = get(this.options, 'hooks.beforeSubmit'); if (beforeSubmit) { beforeSubmit(submission, (err, sub) => { if (err) { this.onError(err); return; } this.submitExecute(sub, saved); }); } else { this.submitExecute(submission, saved); } } onChange(value, flags, isModified) { if (this.watchSubmissionErrors && !this.submissionSuccess) { const errors = get(this, 'formio.errors', []); const alerts = get(this, 'alerts.alerts', []); const submitted = get(this, 'formio.submitted', false); if (submitted && (errors.length || alerts.length)) { this.onError(errors); } } return this.change.emit({ ...value, flags, isModified }); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: FormioBaseComponent, deps: [{ token: i0.NgZone }, { token: FormioAppConfig, optional: true }, { token: CustomTagsService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: FormioBaseComponent, selector: "ng-component", inputs: { form: "form", submission: "submission", src: "src", url: "url", service: "service", options: "options", noeval: "noeval", formioOptions: "formioOptions", renderOptions: "renderOptions", readOnly: "readOnly", viewOnly: "viewOnly", hideLoading: "hideLoading", hideComponents: "hideComponents", refresh: "refresh", error: "error", success: "success", submitDone: "submitDone", language: "language", hooks: "hooks", renderer: "renderer", watchSubmissionErrors: "watchSubmissionErrors", dataTableActions: "dataTableActions" }, outputs: { render: "render", customEvent: "customEvent", fileUploadingStatus: "fileUploadingStatus", submit: "submit", prevPage: "prevPage", nextPage: "nextPage", beforeSubmit: "beforeSubmit", rowAdd: "rowAdd", rowAdded: "rowAdded", rowEdit: "rowEdit", rowEdited: "rowEdited", rowDelete: "rowDelete", rowClick: "rowClick", rowSelectChange: "rowSelectChange", change: "change", invalid: "invalid", errorChange: "errorChange", formLoad: "formLoad", submissionLoad: "submissionLoad", ready: "ready" }, viewQueries: [{ propertyName: "formioElement", first: true, predicate: ["formio"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: '', isInline: true }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: FormioBaseComponent, decorators: [{ type: Component, args: [{ template: '' }] }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: FormioAppConfig, decorators: [{ type: Optional }] }, { type: CustomTagsService, decorators: [{ type: Optional }] }]; }, propDecorators: { form: [{ type: Input }], submission: [{ type: Input }], src: [{ type: Input }], url: [{ type: Input }], service: [{ type: Input }], options: [{ type: Input }], noeval: [{ type: Input }], formioOptions: [{ type: Input }], renderOptions: [{ type: Input }], readOnly: [{ type: Input }], viewOnly: [{ type: Input }], hideLoading: [{ type: Input }], hideComponents: [{ type: Input }], refresh: [{ type: Input }], error: [{ type: Input }], success: [{ type: Input }], submitDone: [{ type: Input }], language: [{ type: Input }], hooks: [{ type: Input }], renderer: [{ type: Input }], watchSubmissionErrors: [{ type: Input }], dataTableActions: [{ type: Input }], render: [{ type: Output }], customEvent: [{ type: Output }], fileUploadingStatus: [{ type: Output }], submit: [{ type: Output }], prevPage: [{ type: Output }], nextPage: [{ type: Output }], beforeSubmit: [{ type: Output }], rowAdd: [{ type: Output }], rowAdded: [{ type: Output }], rowEdit: [{ type: Output }], rowEdited: [{ type: Output }], rowDelete: [{ type: Output }], rowClick: [{ type: Output }], rowSelectChange: [{ type: Output }], change: [{ type: Output }], invalid: [{ type: Output }], errorChange: [{ type: Output }], formLoad: [{ type: Output }], submissionLoad: [{ type: Output }], ready: [{ type: Output }], formioElement: [{ type: ViewChild, args: ['formio', { static: true }] }] } }); class FormioLoaderComponent { isLoading; static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: FormioLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: FormioLoaderComponent, selector: "formio-loader", inputs: { isLoading: "isLoading" }, ngImport: i0, template: "<div class=\"formio-loader-wrapper\" *ngIf=\"isLoading\">\r\n <div class=\"formio-loader\"></div>\r\n</div>\r\n", styles: [".formio-loader-wrapper{position:absolute;inset:0;z-index:1000}.formio-loader{position:absolute;left:50%;top:50%;margin-left:-30px;margin-top:-30px;z-index:10000;display:inline-block;border:6px solid #f3f3f3;border-top:6px solid #3498db;border-radius:50%;width:60px;height:60px;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: FormioLoaderComponent, decorators: [{ type: Component, args: [{ selector: 'formio-loader', template: "<div class=\"formio-loader-wrapper\" *ngIf=\"isLoading\">\r\n <div class=\"formio-loader\"></div>\r\n</div>\r\n", styles: [".formio-loader-wrapper{position:absolute;inset:0;z-index:1000}.formio-loader{position:absolute;left:50%;top:50%;margin-left:-30px;margin-top:-30px;z-index:10000;display:inline-block;border:6px solid #f3f3f3;border-top:6px solid #3498db;border-radius:50%;width:60px;height:60px;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }] }], propDecorators: { isLoading: [{ type: Input }] } }); class ParseHtmlContentPipe { /* Some messages that are come from formiojs have hex codes. So the main aim of this pipe is transform this messages to html. And then render in template. */ transform(content) { const parsedContent = new DOMParser().parseFromString(content, 'text/html').body.childNodes[0]; return parsedContent?.textContent; } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ParseHtmlContentPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: ParseHtmlContentPipe, name: "parseHtmlContent", pure: false }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ParseHtmlContentPipe, decorators: [{ type: Pipe, args: [{ name: 'parseHtmlContent', pure: false }] }] }); class FormioAlertsComponent { alerts; focusComponent = new EventEmitter(); ngOnInit() { if (!this.alerts) { this.alerts = new FormioAlerts(); } } getComponent(event, alert) { this.focusComponent.emit(alert.component.key); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: FormioAlertsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: FormioAlertsComponent, selector: "formio-alerts", inputs: { alerts: "alerts" }, outputs: { focusComponent: "focusComponent" }, ngImport: i0, template: "<div *ngFor=\"let alert of alerts.alerts\" class=\"alert alert-{{ alert.type }}\" role=\"alert\" (click)=\"getComponent($event, alert)\">\r\n {{alert.message | parseHtmlContent}}\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: ParseHtmlContentPipe, name: "parseHtmlContent" }] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: FormioAlertsComponent, decorators: [{ type: Component, args: [{ selector: 'formio-alerts', template: "<div *ngFor=\"let alert of alerts.alerts\" class=\"alert alert-{{ alert.type }}\" role=\"alert\" (click)=\"getComponent($event, alert)\">\r\n {{alert.message | parseHtmlContent}}\r\n</div>\r\n" }] }], propDecorators: { alerts: [{ type: Input }], focusComponent: [{ type: Output }] } }); /* tslint:disable */ class FormioComponent extends FormioBaseComponent { ngZone; config; customTags; constructor(ngZone, config, customTags) { super(ngZone, config, customTags); this.ngZone = ngZone; this.config = config; this.customTags = customTags; if (this.config) { Formio.setBaseUrl(this.config.apiUrl); Formio.setProjectUrl(this.config.appUrl); } else { console.warn('You must provide an AppConfig within your application!'); } } getRenderer() { return this.renderer || Form; } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: FormioComponent, deps: [{ token: i0.NgZone }, { token: FormioAppConfig, optional: true }, { token: CustomTagsService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: FormioComponent, selector: "formio", usesInheritance: true, ngImport: i0, template: "<div role=\"form\" [attr.aria-label]=\"label\">\r\n <div *ngIf=\"isLoading && !hideLoading\" style=\"position:relative;height:200px\">\r\n <formio-loader [isLoading]=\"isLoading\"></formio-loader>\r\n </div>\r\n <formio-alerts *ngIf=\"this.options.alertsPosition === AlertsPosition.top || this.options.alertsPosition === AlertsPosition.both\" (focusComponent)=\"focusOnComponet($event)\" [alerts]=\"alerts\"></formio-alerts>\r\n <div #formio></div>\r\n <formio-alerts *ngIf=\"this.options.alertsPosition === AlertsPosition.bottom || this.options.alertsPosition === AlertsPosition.both\" (focusComponent)=\"focusOnComponet($event)\" [alerts]=\"alerts\"></formio-alerts>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.choices{position:relative;overflow:hidden;margin-bottom:24px;font-size:16px}.choices:focus{outline:0}.choices:last-child{margin-bottom:0}.choices.is-open{overflow:visible}.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input{background-color:#eaeaea;cursor:not-allowed;-webkit-user-select:none;user-select:none}.choices.is-disabled .choices__item{cursor:not-allowed}.choices [hidden]{display:none!important}.choices[data-type*=select-one]{cursor:pointer}.choices[data-type*=select-one] .choices__inner{padding-bottom:7.5px}.choices[data-type*=select-one] .choices__input{display:block;width:100%;padding:10px;border-bottom:1px solid #ddd;background-color:#fff;margin:0}.choices[data-type*=select-one] .choices__button{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);padding:0;background-size:8px;position:absolute;top:50%;right:0;margin-top:-10px;margin-right:25px;height:20px;width:20px;border-radius:10em;opacity:.25}.choices[data-type*=select-one] .choices__button:focus,.choices[data-type*=select-one] .choices__button:hover{opacity:1}.choices[data-type*=select-one] .choices__button:focus{box-shadow:0 0 0 2px #00bcd4}.choices[data-type*=select-one] .choices__item[data-value=\"\"] .choices__button{display:none}.choices[data-type*=select-one]:after{content:\"\";height:0;width:0;border-style:solid;border-color:#333 transparent transparent transparent;border-width:5px;position:absolute;right:11.5px;top:50%;margin-top:-2.5px;pointer-events:none}.choices[data-type*=select-one].is-open:after{border-color:transparent transparent #333 transparent;margin-top:-7.5px}.choices[data-type*=select-one][dir=rtl]:after{left:11.5px;right:auto}.choices[data-type*=select-one][dir=rtl] .choices__button{right:auto;left:0;margin-left:25px;margin-right:0}.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner{cursor:text}.choices[data-type*=select-multiple] .choices__button,.choices[data-type*=text] .choices__button{position:relative;display:inline-block;margin:0 -4px 0 8px;padding-left:16px;border-left:1px solid #008fa1;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);background-size:8px;width:8px;line-height:1;opacity:.75;border-radius:0}.choices[data-type*=select-multiple] .choices__button:focus,.choices[data-type*=select-multiple] .choices__button:hover,.choices[data-type*=text] .choices__button:focus,.choices[data-type*=text] .choices__button:hover{opacity:1}.choices__inner{display:inline-block;vertical-align:top;width:100%;background-color:#f9f9f9;padding:7.5px 7.5px 3.75px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;min-height:44px;overflow:hidden}.is-focused .choices__inner,.is-open .choices__inner{border-color:#b7b7b7}.is-open .choices__inner{border-radius:2.5px 2.5px 0 0}.is-flipped.is-open .choices__inner{border-radius:0 0 2.5px 2.5px}.choices__list{margin:0;padding-left:0;list-style:none}.choices__list--single{display:inline-block;padding:4px 16px 4px 4px;width:100%}[dir=rtl] .choices__list--single{padding-right:4px;padding-left:16px}.choices__list--single .choices__item{width:100%}.choices__list--multiple{display:inline}.choices__list--multiple .choices__item{display:inline-block;vertical-align:middle;border-radius:20px;padding:4px 10px;font-size:12px;font-weight:500;margin-right:3.75px;margin-bottom:3.75px;background-color:#00bcd4;border:1px solid #00a5bb;color:#fff;word-break:break-all;box-sizing:border-box}.choices__list--multiple .choices__item[data-deletable]{padding-right:5px}[dir=rtl] .choices__list--multiple .choices__item{margin-right:0;margin-left:3.75px}.choices__list--multiple .choices__item.is-highlighted{background-color:#00a5bb;border:1px solid #008fa1}.is-disabled .choices__list--multiple .choices__item{background-color:#aaa;border:1px solid #919191}.choices__list--dropdown,.choices__list[aria-expanded]{visibility:hidden;z-index:1;position:absolute;width:100%;background-color:#fff;border:1px solid #ddd;top:100%;margin-top:-1px;border-bottom-left-radius:2.5px;border-bottom-right-radius:2.5px;overflow:hidden;word-break:break-all;will-change:visibility}.is-active.choices__list--dropdown,.is-active.choices__list[aria-expanded]{visibility:visible}.is-open .choices__list--dropdown,.is-open .choices__list[aria-expanded]{border-color:#b7b7b7}.is-flipped .choices__list--dropdown,.is-flipped .choices__list[aria-expanded]{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:.25rem .25rem 0 0}.choices__list--dropdown .choices__list,.choices__list[aria-expanded] .choices__list{position:relative;max-height:300px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.choices__list--dropdown .choices__item,.choices__list[aria-expanded] .choices__item{position:relative;padding:10px;font-size:14px}[dir=rtl] .choices__list--dropdown .choices__item,[dir=rtl] .choices__list[aria-expanded] .choices__item{text-align:right}@media (min-width:640px){.choices__list--dropdown .choices__item--selectable,.choices__list[aria-expanded] .choices__item--selectable{padding-right:100px}.choices__list--dropdown .choices__item--selectable:after,.choices__list[aria-expanded] .choices__item--selectable:after{content:attr(data-select-text);font-size:12px;opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%)}[dir=rtl] .choices__list--dropdown .choices__item--selectable,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable{text-align:right;padding-left:100px;padding-right:10px}[dir=rtl] .choices__list--dropdown .choices__item--selectable:after,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable:after{right:auto;left:10px}}.choices__list--dropdown .choices__item--selectable.is-highlighted,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted{background-color:#f2f2f2}.choices__list--dropdown .choices__item--selectable.is-highlighted:after,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted:after{opacity:.5}.choices__item{cursor:default}.choices__item--selectable{cursor:pointer}.choices__item--disabled{cursor:not-allowed;-webkit-user-select:none;user-select:none;opacity:.5}.choices__heading{font-weight:600;font-size:12px;padding:10px;border-bottom:1px solid #f7f7f7;color:gray}.choices__button{text-indent:-9999px;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer}.choices__button:focus{outline:0}.choices__input{display:inline-block;vertical-align:baseline;background-color:#f9f9f9;font-size:14px;margin-bottom:5px;border:0;border-radius:0;max-width:100%;padding:4px 0 4px 2px}.choices__input:focus{outline:0}.choices__input::-webkit-search-cancel-button,.choices__input::-webkit-search-decoration,.choices__input::-webkit-search-results-button,.choices__input::-webkit-search-results-decoration{display:none}.choices__input::-ms-clear,.choices__input::-ms-reveal{display:none;width:0;height:0}[dir=rtl] .choices__input{padding-right:2px;padding-left:0}.choices__placeholder{opacity:.5}.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:#fff;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;inset:0;background:#0000001a}._dialog_overlay{position:fixed;inset:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}.formio-loader{position:relative;min-height:60px}.loader-wrapper{z-index:1000;position:absolute;inset:0;height:120px;background-color:#0000}.loader{position:absolute;left:50%;top:50%;margin-left:-30px;margin-top:-30px;z-index:10000;display:inline-block;border:6px solid #f3f3f3;border-top:6px solid #3498db;border-radius:50%;width:60px;height:60px;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.formio-form{position:relative;min-height:80px}.formio-error-wrapper,.formio-warning-wrapper{padding:1em}.formio-error-wrapper{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.formio-error-wrapper .formio-errors .error{color:#c20000}.formio-error-wrapper .field-required:after{color:#c20000}.formio-warning-wrapper{color:#856404;background-color:#fff3cd;border-color:#ffeeba}.formio-disabled-input .form-control.flatpickr-input{background-color:#eee}.builder-component.has-error .invalid-feedback,.formio-component-modal-wrapper.has-error .invalid-feedback,.formio-component-modal-wrapper.has-message .invalid-feedback,.formio-component.alert-danger .invalid-feedback,.formio-component.has-error .invalid-feedback,.formio-component.has-message .invalid-feedback{display:block;color:inherit;margin-top:4px}.formio-errors .error{color:#dc3545}.formio-errors .warning{color:#856404}.formio-errors .info{color:#004085}.formio-form-group{margin-bottom:1rem}.formio-wysiwyg-editor{min-height:200px;background-color:#fff}.has-feedback .form-control{padding-right:10px}.has-feedback .form-control[type=hidden]{padding-right:0}.has-error.bg-danger{padding:4px}.ql-source:after{content:\"[source]\";white-space:nowrap}.quill-source-code{width:100%;margin:0;background:#1d1d1d;box-sizing:border-box;color:#ccc;font-size:15px;outline:0;padding:20px;line-height:24px;font-family:Consolas,Menlo,Monaco,Courier New,monospace;position:absolute;top:0;bottom:0;border:none;display:none}.formio-component-tags tags{background-color:#fff}.field-required:after,.tab-error:after{content:\" *\";color:#eb0000}.field-required:after{position:relative;z-index:10}.glyphicon-spin{animation:formio-spin 1s infinite linear}@keyframes formio-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.button-icon-right{margin-left:5px}.formio-component-submit .submit-success:after{content:\"\\2713\";position:relative;right:-4px;top:1px;line-height:1}.formio-component-submit .submit-fail:after{content:\"\\2717\";position:relative;right:-4px;top:1px;line-height:1}.card-vertical{display:flex;flex-direction:row;margin-top:5px}.card-vertical .card-body,.tab,.tab-content{flex-grow:2}.nav-tabs-vertical{display:flex;flex-direction:column;border-right:1px solid #ddd;padding-left:5px;margin-right:10px;border-bottom:0}.card-vertical>.card-body,.card-vertical>.tab,.card-vertical>.tab-content{flex-basis:85%}.card-vertical ul>li>.nav-link-vertical{border-right-color:transparent;border-radius:4px 0 0 4px;margin-right:0}.card-vertical ul>li>.nav-link-vertical.active{border-bottom-color:#ddd;border-right-color:transparent}.card-vertical ul>li>.nav-link-vertical.active:hover{border-right-color:transparent}.nav-tabs-vertical>li{margin:0 -1px 0 0}.formio-component-submit .submit-fail[disabled]{opacity:1}.form-control.flatpickr-input{background-color:#fff}.input-group .flatpickr-wrapper{flex-grow:1}.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-calendar .flatpickr-current-month input.cur-year:focus,.flatpickr-calendar .flatpickr-days:focus{outline:auto}td>.form-group,td>.formio-form-group{margin-bottom:0}.signature-pad-body{overflow:hidden;position:relative}.signature-pad-body .form-control-feedback{position:absolute;font-size:.8rem;top:1px;right:3px}.signature-pad-canvas{border-radius:4px;box-shadow:0 0 5px #00000005 inset;border:1px solid #f4f4f4}.btn.signature-pad-refresh{position:absolute;left:0;top:0;z-index:1000;padding:3px;line-height:0}[dir=rtl] .btn.signature-pad-refresh{left:unset;right:0}.formio-component-multiple .choices__input{width:100%}.formio-component-multiple .is-invalid{border-color:#f04124}.formio-component-multiple :not(.is-invalid){border-color:#ccc}.choices__list--dropdown .choices__item--selectable{padding-right:0}.signature-pad-refresh img{height:1.2em}.signature-pad-footer{text-align:center;color:#c3c3c3}.is-active.choices__list--dropdown{z-index:100}.choices__list--multiple .choices__item{border-radius:0;padding:2px 8px;line-height:1em;margin-bottom:6px}.choices__list--single{padding:0}.choices__item.choices__item--selectable{white-space:nowrap;overflow:hidden;padding-right:25px;text-overflow:ellipsis}.choices__input{padding:2px}.choices[dir=rtl]>*{text-align:right}.choices[dir=rtl] .choices__list--multiple .choices__item[data-deletable]{padding-left:5px;float:right}.choices[dir=rtl] .choices__list--multiple .choices__item[data-deletable] .choices__button{float:left;margin:0 8px 0 -4px;padding-left:unset;padding-right:16px;border-left:unset;border-right:1px solid #008fa1;overflow:hidden}@-moz-document url-prefix(){.choices__button{float:right}}.formio-component-file .fileSelector{position:relative;padding:15px;border:2px dashed #ddd;text-align:center}.formio-component-file .fileSelector .loader-wrapper{display:none;width:100%;height:100%;background-color:#0000001a}.formio-component-file .fileSelector .loader-wrapper .loader{height:45px;width:45px;margin-top:-23px;margin-left:-23px}.formio-component-file .fileSelector a{text-decoration:underline}.formio-component-file .fileSelector.fileDragOver{border-color:#127abe}.formio-component-file .fileSelector .fa,.formio-component-file .fileSelector .glyphicon{font-size:20px;margin-right:5px}[dir=rtl] .formio-component-file .fileSelector .fa,[dir=rtl] .formio-component-file .fileSelector .glyphicon{margin-right:unset;margin-left:5px}.formio-component-file .fileSelector .browse{cursor:pointer}@keyframes formio-dialog-fadeout{0%{opacity:1}to{opacity:0}}@keyframes formio-dialog-fadein{0%{opacity:0}to{opacity:1}}.formio-dialog{box-sizing:border-b