@valtimo/object 10.5.1 → 10.6.0

package/fesm2020/valtimo-object.mjs

@@ -8,14 +8,14 @@ import { RouterModule } from '@angular/router';
 import * as i6$1 from '@angular/common';
 import { CommonModule, AsyncPipe } from '@angular/common';
 import { AuthGuardService } from '@valtimo/security';
-import { map, BehaviorSubject, combineLatest, distinctUntilChanged, of, startWith, throwError, Subject } from 'rxjs';
-import { switchMap, tap, take, catchError, finalize } from 'rxjs/operators';
+import { map, BehaviorSubject, combineLatest, distinctUntilChanged, of, startWith, filter, throwError, Subject } from 'rxjs';
+import { switchMap, catchError, tap, take, finalize } from 'rxjs/operators';
 import * as i2$1 from '@valtimo/object-management';
 import * as i4 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i6 from 'ngx-toastr';
 import * as i8 from '@valtimo/components';
-import { WidgetModule, ListModule, SpinnerModule, FormIoModule, ConfirmationModalModule, SearchFieldsModule } from '@valtimo/components';
+import { WidgetModule, ListModule, SpinnerModule, FormIoModule, ConfirmationModalModule, SearchFieldsModule, ValtimoIbmModalDirectiveModule } from '@valtimo/components';
 import * as i9 from 'carbon-components-angular';
 import { ButtonModule, IconModule, LoadingModule, ModalModule, InputModule } from 'carbon-components-angular';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -205,26 +205,36 @@ class ObjectListComponent {
             this.translateService.stream('key'),
             this.refreshObjectList$,
         ]).pipe(switchMap(([objectManagementId, currentPage, columnType, searchFieldValues]) => {
+            const handleError = () => {
+                this.disableInput();
+                return of(null);
+            };
             if (columnType === ColumnType.CUSTOM) {
-                return this.objectService.postObjectsByObjectManagementId(objectManagementId, {
+                return this.objectService
+                    .postObjectsByObjectManagementId(objectManagementId, {
                     page: currentPage.page,
                     size: currentPage.size,
                 }, Object.keys(searchFieldValues).length > 0
                     ? { otherFilters: this.mapSearchValuesToFilters(searchFieldValues) }
-                    : {});
+                    : {})
+                    .pipe(catchError(() => handleError()));
             }
             else {
-                return this.objectService.getObjectsByObjectManagementId(objectManagementId, {
+                return this.objectService
+                    .getObjectsByObjectManagementId(objectManagementId, {
                     page: currentPage.page,
                     size: currentPage.size,
-                });
+                })
+                    .pipe(catchError(() => handleError()));
             }
         }), tap(instanceRes => {
-            this.pageSizes$.pipe(take(1)).subscribe(sizes => {
-                // @ts-ignore
-                this.pageSizes$.next({ ...sizes, collectionSize: instanceRes.totalElements });
-            });
-        }), map(res => res.content.map(record => record?.items?.reduce((obj, item) => Object.assign(obj, { objectId: record.id }, { [item.key]: item.value }), {}))), tap(() => this.loading$.next(false)));
+            if (instanceRes != null) {
+                this.pageSizes$.pipe(take(1)).subscribe(sizes => {
+                    // @ts-ignore
+                    this.pageSizes$.next({ ...sizes, collectionSize: instanceRes.totalElements });
+                });
+            }
+        }), map(res => res?.content?.map(record => record?.items?.reduce((obj, item) => Object.assign(obj, { objectId: record.id }, { [item.key]: item.value }), {}))), tap(() => this.loading$.next(false)));
         this.formDefinition$ = combineLatest([
             this.objectManagementId$,
             this.clearForm$,
@@ -258,6 +268,7 @@ class ObjectListComponent {
                             sortable: column.sortable,
                             ...(column.viewType && { viewType: column.viewType }),
                             ...(column.enum && { enum: column.enum }),
+                            ...(column.format && { format: column.format }),
                         };
                     }),
                 ];
@@ -296,22 +307,21 @@ class ObjectListComponent {
     addObject() {
         this.disableInput();
         combineLatest([this.objectManagementId$, this.submission$, this.formValid$])
-            .pipe(take(1))
-            .subscribe(([objectManagementId, submission, formValid]) => {
-            if (formValid) {
-                submission = this.objectService.removeEmptyStringValuesFromSubmission(submission);
-                this.objectService
-                    .createObject({ objectManagementId }, { ...submission })
-                    .pipe(take(1), catchError((error) => this.handleCreateObjectError(error)), finalize(() => {
-                    this.enableInput();
-                }))
-                    .subscribe(() => {
-                    this.closeModal();
-                    this.refreshObjectList();
-                    this.clearForm$.next(true);
-                    this.toastr.success(this.translate.instant('object.messages.objectCreated'));
-                });
-            }
+            .pipe(take(1), filter(([objectManagementId, submission, formValid]) => formValid), switchMap(([objectManagementId, submission]) => this.objectService
+            .createObject({ objectManagementId }, { ...this.objectService.removeEmptyStringValuesFromSubmission(submission) })
+            .pipe(take(1), catchError((error) => {
+            this.handleCreateObjectError(error);
+            return throwError(error);
+        }))), finalize(() => {
+            this.enableInput();
+        }))
+            .subscribe({
+            next: () => {
+                this.closeModal();
+                this.refreshObjectList();
+                this.clearForm$.next(true);
+                this.toastr.success(this.translate.instant('object.messages.objectCreated'));
+            },
         });
     }
     redirectToDetails(record) {
@@ -346,7 +356,6 @@ class ObjectListComponent {
         return throwError(error);
     }
     handleCreateObjectError(error) {
-        this.closeModal();
         this.toastr.error(this.translate.instant('object.messages.objectCreationError'));
         return throwError(error);
     }
@@ -362,17 +371,17 @@ class ObjectListComponent {
             }
             else {
                 // @ts-ignore
-                filters.push({ key: valueKey, values: [{ value: searchValue }] });
+                filters.push({ key: valueKey, values: [searchValue] });
             }
         });
         return filters;
     }
 }
 ObjectListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ObjectListComponent, deps: [{ token: ObjectService }, { token: ObjectColumnService }, { token: i2$1.ObjectManagementService }, { token: i4.TranslateService }, { token: i3.Router }, { token: i3.ActivatedRoute }, { token: i6.ToastrService }, { token: i4.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-ObjectListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ObjectListComponent, selector: "valtimo-object-list", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<ng-container\n  *ngIf=\"{\n    loading: loading$ | async,\n    pagination: pagination$ | async,\n    disableInput: disableInput$ | async,\n    fields: fields$ | async,\n    objectConfiguration: objectConfiguration$ | async\n  } as obs\"\n>\n  <div class=\"main-content pt-0\">\n    <div class=\"container-fluid pr-0 pl-0\">\n      <div class=\"text-right\">\n        <div class=\"btn-group mt-m3px mb-3 mr-0\">\n          <ng-container *ngTemplateOutlet=\"buttons; context: {obs: obs}\"></ng-container>\n        </div>\n      </div>\n      <ng-container *ngIf=\"obs.loading === false; else loading\">\n        <ng-container *ngTemplateOutlet=\"searchFields; context: {obs: obs}\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n      </ng-container>\n    </div>\n  </div>\n  <ng-container *ngTemplateOutlet=\"createNewModal\"></ng-container>\n</ng-container>\n\n<ng-template #buttons let-obs=\"obs\">\n  <button\n    (click)=\"openModal()\"\n    ibmButton=\"primary\"\n    size=\"md\"\n    class=\"ml-3\"\n    [disabled]=\"obs.disableInput || obs.loading\"\n  >\n    {{ 'object.createObject' | translate }}\n    <svg class=\"cds--btn__icon\" ibmIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #searchFields let-obs=\"obs\">\n  <div class=\"mb-3\">\n    <valtimo-search-fields\n      [loading]=\"obs.loading\"\n      [searchFields]=\"objectSearchFields$ | async\"\n      (doSearch)=\"search($event)\"\n      [documentDefinitionName]=\"objectManagementId$ | async\"\n      [setValuesSubject$]=\"null\"\n    ></valtimo-search-fields>\n  </div>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-widget>\n    <valtimo-list\n      [items]=\"obs.objectConfiguration\"\n      [fields]=\"obs.fields\"\n      [viewMode]=\"true\"\n      [header]=\"true\"\n      [pagination]=\"obs.pagination\"\n      paginationIdentifier=\"objectConfigurationList\"\n      (paginationClicked)=\"paginationClicked($event)\"\n      (paginationSet)=\"paginationSet($event)\"\n      (rowClicked)=\"redirectToDetails($event)\"\n    >\n      <div header>\n        <h3 class=\"list-header-title\">\n          {{ 'object.title' | translate }}\n          <sup class=\"ml-1 badge badge-pill badge-primary\">{{\n            obs.objectConfiguration?.length || 0\n          }}</sup>\n        </h3>\n      </div>\n    </valtimo-list>\n  </valtimo-widget>\n</ng-template>\n\n<ng-template #createNewModal>\n  <ibm-modal\n    *ngIf=\"{\n      show: showModal$ | async,\n      formValid: formValid$ | async,\n      formDefinition: formDefinition$ | async,\n      disableInput: disableInput$ | async\n    } as modalObs\"\n    [open]=\"modalObs.show\"\n  >\n    <ibm-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n      <h3 ibmModalHeaderHeading>\n        {{ 'object.createObject' | translate }}\n      </h3>\n    </ibm-modal-header>\n    <section ibmModalContent>\n      <ng-container *ngTemplateOutlet=\"modalContent; context: {modalObs: modalObs}\"></ng-container>\n    </section>\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {modalObs: modalObs}\"></ng-container>\n  </ibm-modal>\n</ng-template>\n\n<ng-template #modalContent let-modalObs=\"modalObs\">\n  <valtimo-form-io\n    [form]=\"modalObs.formDefinition\"\n    (change)=\"onFormioChange($event)\"\n  ></valtimo-form-io>\n</ng-template>\n\n<ng-template #modalFooter let-modalObs=\"modalObs\">\n  <ibm-modal-footer>\n    <ng-container>\n      <button\n        ibmButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"closeModal()\"\n        [disabled]=\"modalObs.disableInput\"\n      >\n        {{ 'object.close' | translate }}\n      </button>\n      <button\n        ibmButton=\"primary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"addObject()\"\n        [disabled]=\"modalObs.disableInput || modalObs.formValid === false\"\n      >\n        {{ 'object.save' | translate }}\n      </button>\n    </ng-container>\n  </ibm-modal-footer>\n</ng-template>\n\n<ng-template #loading>\n  <div class=\"loading-icon\"><ibm-loading></ibm-loading></div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.loading-icon{display:flex;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i8.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i8.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState", "lastColumnTemplate"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { kind: "directive", type: i9.Button, selector: "[ibmButton]", inputs: ["ibmButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i9.IconDirective, selector: "[ibmIcon]", inputs: ["ibmIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i9.Loading, selector: "ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i8.FormioComponent, selector: "valtimo-form-io", inputs: ["form", "options", "submission", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: i9.Modal, selector: "ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i9.ModalHeader, selector: "ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i9.ModalFooter, selector: "ibm-modal-footer" }, { kind: "directive", type: i9.ModalContent, selector: "[ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i9.ModalHeaderHeading, selector: "[ibmModalHeaderHeading]" }, { kind: "component", type: i8.SearchFieldsComponent, selector: "valtimo-search-fields", inputs: ["loading", "searchFields", "documentDefinitionName", "setValuesSubject$"], outputs: ["doSearch"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
+ObjectListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ObjectListComponent, selector: "valtimo-object-list", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<ng-container\n  *ngIf=\"{\n    loading: loading$ | async,\n    pagination: pagination$ | async,\n    disableInput: disableInput$ | async,\n    fields: fields$ | async,\n    objectConfiguration: objectConfiguration$ | async\n  } as obs\"\n>\n  <div class=\"main-content pt-0\">\n    <div class=\"container-fluid pr-0 pl-0\">\n      <div class=\"text-right\">\n        <div class=\"btn-group mt-m3px mb-3 mr-0\">\n          <ng-container *ngTemplateOutlet=\"buttons; context: {obs: obs}\"></ng-container>\n        </div>\n      </div>\n      <ng-container *ngIf=\"obs.loading === false; else loading\">\n        <ng-container *ngTemplateOutlet=\"searchFields; context: {obs: obs}\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n      </ng-container>\n    </div>\n  </div>\n  <ng-container *ngTemplateOutlet=\"createNewModal\"></ng-container>\n</ng-container>\n\n<ng-template #buttons let-obs=\"obs\">\n  <button\n    (click)=\"openModal()\"\n    ibmButton=\"primary\"\n    size=\"md\"\n    class=\"ml-3\"\n    [disabled]=\"obs.disableInput || obs.loading\"\n  >\n    {{ 'object.createObject' | translate }}\n    <svg class=\"cds--btn__icon\" ibmIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #searchFields let-obs=\"obs\">\n  <div class=\"mb-3\">\n    <valtimo-search-fields\n      [loading]=\"obs.loading\"\n      [searchFields]=\"objectSearchFields$ | async\"\n      (doSearch)=\"search($event)\"\n      [documentDefinitionName]=\"objectManagementId$ | async\"\n      [setValuesSubject$]=\"null\"\n    ></valtimo-search-fields>\n  </div>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-widget>\n    <valtimo-list\n      [items]=\"obs.objectConfiguration\"\n      [fields]=\"obs.fields\"\n      [viewMode]=\"true\"\n      [header]=\"true\"\n      [pagination]=\"obs.pagination\"\n      paginationIdentifier=\"objectConfigurationList\"\n      (paginationClicked)=\"paginationClicked($event)\"\n      (paginationSet)=\"paginationSet($event)\"\n      (rowClicked)=\"redirectToDetails($event)\"\n    >\n      <div header>\n        <h3 class=\"list-header-title\">\n          {{ 'object.title' | translate }}\n          <sup class=\"ml-1 badge badge-pill badge-primary\">{{\n            obs.objectConfiguration?.length || 0\n          }}</sup>\n        </h3>\n      </div>\n    </valtimo-list>\n  </valtimo-widget>\n</ng-template>\n\n<ng-template #createNewModal>\n  <ibm-modal\n    valtimoIbmModal\n    *ngIf=\"{\n      show: showModal$ | async,\n      formValid: formValid$ | async,\n      formDefinition: formDefinition$ | async,\n      disableInput: disableInput$ | async\n    } as modalObs\"\n    [open]=\"modalObs.show\"\n  >\n    <ibm-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n      <h3 ibmModalHeaderHeading>\n        {{ 'object.createObject' | translate }}\n      </h3>\n    </ibm-modal-header>\n    <section ibmModalContent>\n      <ng-container *ngTemplateOutlet=\"modalContent; context: {modalObs: modalObs}\"></ng-container>\n    </section>\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {modalObs: modalObs}\"></ng-container>\n  </ibm-modal>\n</ng-template>\n\n<ng-template #modalContent let-modalObs=\"modalObs\">\n  <valtimo-form-io\n    [form]=\"modalObs.formDefinition\"\n    (change)=\"onFormioChange($event)\"\n  ></valtimo-form-io>\n</ng-template>\n\n<ng-template #modalFooter let-modalObs=\"modalObs\">\n  <ibm-modal-footer>\n    <ng-container>\n      <button\n        ibmButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"closeModal()\"\n        [disabled]=\"modalObs.disableInput\"\n      >\n        {{ 'object.close' | translate }}\n      </button>\n      <button\n        ibmButton=\"primary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"addObject()\"\n        [disabled]=\"modalObs.disableInput || modalObs.formValid === false\"\n      >\n        {{ 'object.save' | translate }}\n      </button>\n    </ng-container>\n  </ibm-modal-footer>\n</ng-template>\n\n<ng-template #loading>\n  <div class=\"loading-icon\"><ibm-loading></ibm-loading></div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.loading-icon{display:flex;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i8.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i8.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState", "lastColumnTemplate"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { kind: "directive", type: i9.Button, selector: "[ibmButton]", inputs: ["ibmButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i9.IconDirective, selector: "[ibmIcon]", inputs: ["ibmIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i9.Loading, selector: "ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i8.FormioComponent, selector: "valtimo-form-io", inputs: ["form", "options", "submission", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: i9.Modal, selector: "ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i9.ModalHeader, selector: "ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i9.ModalFooter, selector: "ibm-modal-footer" }, { kind: "directive", type: i9.ModalContent, selector: "[ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i9.ModalHeaderHeading, selector: "[ibmModalHeaderHeading]" }, { kind: "component", type: i8.SearchFieldsComponent, selector: "valtimo-search-fields", inputs: ["loading", "searchFields", "documentDefinitionName", "setValuesSubject$", "defaultValues"], outputs: ["doSearch"] }, { kind: "directive", type: i8.ValtimoIbmModalDirective, selector: "[valtimoIbmModal]" }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ObjectListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-object-list', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<ng-container\n  *ngIf=\"{\n    loading: loading$ | async,\n    pagination: pagination$ | async,\n    disableInput: disableInput$ | async,\n    fields: fields$ | async,\n    objectConfiguration: objectConfiguration$ | async\n  } as obs\"\n>\n  <div class=\"main-content pt-0\">\n    <div class=\"container-fluid pr-0 pl-0\">\n      <div class=\"text-right\">\n        <div class=\"btn-group mt-m3px mb-3 mr-0\">\n          <ng-container *ngTemplateOutlet=\"buttons; context: {obs: obs}\"></ng-container>\n        </div>\n      </div>\n      <ng-container *ngIf=\"obs.loading === false; else loading\">\n        <ng-container *ngTemplateOutlet=\"searchFields; context: {obs: obs}\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n      </ng-container>\n    </div>\n  </div>\n  <ng-container *ngTemplateOutlet=\"createNewModal\"></ng-container>\n</ng-container>\n\n<ng-template #buttons let-obs=\"obs\">\n  <button\n    (click)=\"openModal()\"\n    ibmButton=\"primary\"\n    size=\"md\"\n    class=\"ml-3\"\n    [disabled]=\"obs.disableInput || obs.loading\"\n  >\n    {{ 'object.createObject' | translate }}\n    <svg class=\"cds--btn__icon\" ibmIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #searchFields let-obs=\"obs\">\n  <div class=\"mb-3\">\n    <valtimo-search-fields\n      [loading]=\"obs.loading\"\n      [searchFields]=\"objectSearchFields$ | async\"\n      (doSearch)=\"search($event)\"\n      [documentDefinitionName]=\"objectManagementId$ | async\"\n      [setValuesSubject$]=\"null\"\n    ></valtimo-search-fields>\n  </div>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-widget>\n    <valtimo-list\n      [items]=\"obs.objectConfiguration\"\n      [fields]=\"obs.fields\"\n      [viewMode]=\"true\"\n      [header]=\"true\"\n      [pagination]=\"obs.pagination\"\n      paginationIdentifier=\"objectConfigurationList\"\n      (paginationClicked)=\"paginationClicked($event)\"\n      (paginationSet)=\"paginationSet($event)\"\n      (rowClicked)=\"redirectToDetails($event)\"\n    >\n      <div header>\n        <h3 class=\"list-header-title\">\n          {{ 'object.title' | translate }}\n          <sup class=\"ml-1 badge badge-pill badge-primary\">{{\n            obs.objectConfiguration?.length || 0\n          }}</sup>\n        </h3>\n      </div>\n    </valtimo-list>\n  </valtimo-widget>\n</ng-template>\n\n<ng-template #createNewModal>\n  <ibm-modal\n    *ngIf=\"{\n      show: showModal$ | async,\n      formValid: formValid$ | async,\n      formDefinition: formDefinition$ | async,\n      disableInput: disableInput$ | async\n    } as modalObs\"\n    [open]=\"modalObs.show\"\n  >\n    <ibm-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n      <h3 ibmModalHeaderHeading>\n        {{ 'object.createObject' | translate }}\n      </h3>\n    </ibm-modal-header>\n    <section ibmModalContent>\n      <ng-container *ngTemplateOutlet=\"modalContent; context: {modalObs: modalObs}\"></ng-container>\n    </section>\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {modalObs: modalObs}\"></ng-container>\n  </ibm-modal>\n</ng-template>\n\n<ng-template #modalContent let-modalObs=\"modalObs\">\n  <valtimo-form-io\n    [form]=\"modalObs.formDefinition\"\n    (change)=\"onFormioChange($event)\"\n  ></valtimo-form-io>\n</ng-template>\n\n<ng-template #modalFooter let-modalObs=\"modalObs\">\n  <ibm-modal-footer>\n    <ng-container>\n      <button\n        ibmButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"closeModal()\"\n        [disabled]=\"modalObs.disableInput\"\n      >\n        {{ 'object.close' | translate }}\n      </button>\n      <button\n        ibmButton=\"primary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"addObject()\"\n        [disabled]=\"modalObs.disableInput || modalObs.formValid === false\"\n      >\n        {{ 'object.save' | translate }}\n      </button>\n    </ng-container>\n  </ibm-modal-footer>\n</ng-template>\n\n<ng-template #loading>\n  <div class=\"loading-icon\"><ibm-loading></ibm-loading></div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.loading-icon{display:flex;justify-content:center}\n"] }]
+            args: [{ selector: 'valtimo-object-list', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<ng-container\n  *ngIf=\"{\n    loading: loading$ | async,\n    pagination: pagination$ | async,\n    disableInput: disableInput$ | async,\n    fields: fields$ | async,\n    objectConfiguration: objectConfiguration$ | async\n  } as obs\"\n>\n  <div class=\"main-content pt-0\">\n    <div class=\"container-fluid pr-0 pl-0\">\n      <div class=\"text-right\">\n        <div class=\"btn-group mt-m3px mb-3 mr-0\">\n          <ng-container *ngTemplateOutlet=\"buttons; context: {obs: obs}\"></ng-container>\n        </div>\n      </div>\n      <ng-container *ngIf=\"obs.loading === false; else loading\">\n        <ng-container *ngTemplateOutlet=\"searchFields; context: {obs: obs}\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n      </ng-container>\n    </div>\n  </div>\n  <ng-container *ngTemplateOutlet=\"createNewModal\"></ng-container>\n</ng-container>\n\n<ng-template #buttons let-obs=\"obs\">\n  <button\n    (click)=\"openModal()\"\n    ibmButton=\"primary\"\n    size=\"md\"\n    class=\"ml-3\"\n    [disabled]=\"obs.disableInput || obs.loading\"\n  >\n    {{ 'object.createObject' | translate }}\n    <svg class=\"cds--btn__icon\" ibmIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #searchFields let-obs=\"obs\">\n  <div class=\"mb-3\">\n    <valtimo-search-fields\n      [loading]=\"obs.loading\"\n      [searchFields]=\"objectSearchFields$ | async\"\n      (doSearch)=\"search($event)\"\n      [documentDefinitionName]=\"objectManagementId$ | async\"\n      [setValuesSubject$]=\"null\"\n    ></valtimo-search-fields>\n  </div>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-widget>\n    <valtimo-list\n      [items]=\"obs.objectConfiguration\"\n      [fields]=\"obs.fields\"\n      [viewMode]=\"true\"\n      [header]=\"true\"\n      [pagination]=\"obs.pagination\"\n      paginationIdentifier=\"objectConfigurationList\"\n      (paginationClicked)=\"paginationClicked($event)\"\n      (paginationSet)=\"paginationSet($event)\"\n      (rowClicked)=\"redirectToDetails($event)\"\n    >\n      <div header>\n        <h3 class=\"list-header-title\">\n          {{ 'object.title' | translate }}\n          <sup class=\"ml-1 badge badge-pill badge-primary\">{{\n            obs.objectConfiguration?.length || 0\n          }}</sup>\n        </h3>\n      </div>\n    </valtimo-list>\n  </valtimo-widget>\n</ng-template>\n\n<ng-template #createNewModal>\n  <ibm-modal\n    valtimoIbmModal\n    *ngIf=\"{\n      show: showModal$ | async,\n      formValid: formValid$ | async,\n      formDefinition: formDefinition$ | async,\n      disableInput: disableInput$ | async\n    } as modalObs\"\n    [open]=\"modalObs.show\"\n  >\n    <ibm-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n      <h3 ibmModalHeaderHeading>\n        {{ 'object.createObject' | translate }}\n      </h3>\n    </ibm-modal-header>\n    <section ibmModalContent>\n      <ng-container *ngTemplateOutlet=\"modalContent; context: {modalObs: modalObs}\"></ng-container>\n    </section>\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {modalObs: modalObs}\"></ng-container>\n  </ibm-modal>\n</ng-template>\n\n<ng-template #modalContent let-modalObs=\"modalObs\">\n  <valtimo-form-io\n    [form]=\"modalObs.formDefinition\"\n    (change)=\"onFormioChange($event)\"\n  ></valtimo-form-io>\n</ng-template>\n\n<ng-template #modalFooter let-modalObs=\"modalObs\">\n  <ibm-modal-footer>\n    <ng-container>\n      <button\n        ibmButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"closeModal()\"\n        [disabled]=\"modalObs.disableInput\"\n      >\n        {{ 'object.close' | translate }}\n      </button>\n      <button\n        ibmButton=\"primary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"addObject()\"\n        [disabled]=\"modalObs.disableInput || modalObs.formValid === false\"\n      >\n        {{ 'object.save' | translate }}\n      </button>\n    </ng-container>\n  </ibm-modal-footer>\n</ng-template>\n\n<ng-template #loading>\n  <div class=\"loading-icon\"><ibm-loading></ibm-loading></div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.loading-icon{display:flex;justify-content:center}\n"] }]
         }], ctorParameters: function () { return [{ type: ObjectService }, { type: ObjectColumnService }, { type: i2$1.ObjectManagementService }, { type: i4.TranslateService }, { type: i3.Router }, { type: i3.ActivatedRoute }, { type: i6.ToastrService }, { type: i4.TranslateService }]; } });
 
 /*
@@ -536,7 +545,10 @@ class ObjectDetailComponent {
             objectId,
             formType: FormType.EDITFORM,
         })
-            .pipe(catchError(() => this.handleRetrievingFormError()))), map(res => res?.formDefinition), tap(() => this.loading$.next(false)));
+            .pipe(catchError(() => {
+            this.disableInput();
+            return this.handleRetrievingFormError();
+        }))), map(res => res?.formDefinition), tap(() => this.loading$.next(false)));
     }
     saveObject() {
         this.disableInput();
@@ -621,10 +633,10 @@ class ObjectDetailComponent {
     }
 }
 ObjectDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ObjectDetailComponent, deps: [{ token: ObjectService }, { token: ObjectStateService }, { token: i3.ActivatedRoute }, { token: i3.Router }, { token: i4.TranslateService }, { token: i6.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
-ObjectDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ObjectDetailComponent, selector: "valtimo-object-detail", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<ng-container\n  *ngIf=\"{\n    formioFormSummary: formioFormSummary$ | async\n  } as obs\"\n>\n  <div class=\"container-fluid pr-0 pl-0\">\n    <div class=\"row\">\n      <div class=\"col-12\">\n        <div class=\"text-right\">\n          <div class=\"btn-group mb-1\">\n            <ng-container *ngTemplateOutlet=\"buttons; context: {obs: obs}\"></ng-container>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-12\">\n        <ng-container *ngTemplateOutlet=\"widget; context: {obs: obs}\"></ng-container>\n      </div>\n    </div>\n  </div>\n  <ng-container *ngTemplateOutlet=\"createEditModal\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"deleteModal\"></ng-container>\n</ng-container>\n\n<ng-template #buttons let-obs=\"obs\">\n  <button (click)=\"openModal()\" ibmButton=\"primary\" size=\"md\">\n    {{ 'object.editObject' | translate }}\n    <svg class=\"cds--btn__icon\" ibmIcon=\"add\" size=\"16\"></svg>\n  </button>\n\n  <button (click)=\"deleteObject()\" ibmButton=\"danger\" size=\"md\" class=\"ml-3\">\n    {{ 'object.deleteObject' | translate }}\n    <svg class=\"cds--btn__icon\" ibmIcon=\"trash-can\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #widget let-obs=\"obs\">\n  <valtimo-form-io [form]=\"obs.formioFormSummary\" [readOnly]=\"true\"></valtimo-form-io>\n</ng-template>\n\n<ng-template #createEditModal>\n  <ibm-modal\n    *ngIf=\"{\n      show: showModal$ | async,\n      formValid: formValid$ | async,\n      disableInput: disableInput$ | async,\n      formioFormEdit: formioFormEdit$ | async\n    } as modalObs\"\n    [open]=\"modalObs.show\"\n  >\n    <ibm-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n      <h3 ibmModalHeaderHeading>\n        {{ 'object.editObject' | translate }}\n      </h3>\n    </ibm-modal-header>\n    <section ibmModalContent>\n      <ng-container *ngTemplateOutlet=\"modalContent; context: {modalObs: modalObs}\"></ng-container>\n    </section>\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {modalObs: modalObs}\"></ng-container>\n  </ibm-modal>\n</ng-template>\n\n<ng-template #modalContent let-modalObs=\"modalObs\">\n  <valtimo-form-io\n    [form]=\"modalObs.formioFormEdit\"\n    (change)=\"onFormioChange($event)\"\n  ></valtimo-form-io>\n</ng-template>\n\n<ng-template #modalFooter let-modalObs=\"modalObs\">\n  <ibm-modal-footer>\n    <ng-container>\n      <button\n        ibmButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"closeModal()\"\n        [disabled]=\"modalObs.disableInput\"\n      >\n        {{ 'object.close' | translate }}\n      </button>\n      <button\n        ibmButton=\"primary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"saveObject()\"\n        [disabled]=\"modalObs.disableInput || modalObs.formValid === false\"\n      >\n        {{ 'object.save' | translate }}\n      </button>\n    </ng-container>\n  </ibm-modal-footer>\n</ng-template>\n\n<ng-template #loading>\n  <div class=\"loading-icon\"><ibm-loading></ibm-loading></div>\n</ng-template>\n\n<ng-template #deleteModal>\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showDeleteModal$\"\n    [outputOnConfirm]=\"deleteObjectUrl$ | async\"\n    (confirmEvent)=\"deleteObjectConfirmation()\"\n    confirmButtonTextTranslationKey=\"object.deleteObject\"\n    titleTranslationKey=\"object.deleteObject\"\n    contentTranslationKey=\"object.deleteObjectConfirmation\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.row{margin:0}.object-schema{resize:none}valtimo-widget::ng-deep .card-border.card-full-default{border:none}\n"], dependencies: [{ kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i9.Button, selector: "[ibmButton]", inputs: ["ibmButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i9.IconDirective, selector: "[ibmIcon]", inputs: ["ibmIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i9.Loading, selector: "ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i8.FormioComponent, selector: "valtimo-form-io", inputs: ["form", "options", "submission", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: i9.Modal, selector: "ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i9.ModalHeader, selector: "ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i9.ModalFooter, selector: "ibm-modal-footer" }, { kind: "directive", type: i9.ModalContent, selector: "[ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i9.ModalHeaderHeading, selector: "[ibmModalHeaderHeading]" }, { kind: "component", type: i8.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "cancelButtonText", "cancelButtonTextTranslationKey", "showModalSubject$", "outputOnConfirm"], outputs: ["confirmEvent"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
+ObjectDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ObjectDetailComponent, selector: "valtimo-object-detail", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<ng-container\n  *ngIf=\"{\n    formioFormSummary: formioFormSummary$ | async,\n    disableInput: disableInput$ | async\n  } as obs\"\n>\n  <div class=\"container-fluid pr-0 pl-0\">\n    <div class=\"row\">\n      <div class=\"col-12\">\n        <div class=\"text-right\">\n          <div class=\"btn-group mb-1\">\n            <ng-container *ngTemplateOutlet=\"buttons; context: {obs: obs}\"></ng-container>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-12\">\n        <ng-container *ngTemplateOutlet=\"widget; context: {obs: obs}\"></ng-container>\n      </div>\n    </div>\n  </div>\n  <ng-container *ngTemplateOutlet=\"createEditModal\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"deleteModal\"></ng-container>\n</ng-container>\n\n<ng-template #buttons let-obs=\"obs\">\n  <button [disabled]=\"obs.disableInput\" (click)=\"openModal()\" ibmButton=\"primary\" size=\"md\">\n    {{ 'object.editObject' | translate }}\n    <svg class=\"cds--btn__icon\" ibmIcon=\"add\" size=\"16\"></svg>\n  </button>\n\n  <button (click)=\"deleteObject()\" ibmButton=\"danger\" size=\"md\" class=\"ml-3\">\n    {{ 'object.deleteObject' | translate }}\n    <svg class=\"cds--btn__icon\" ibmIcon=\"trash-can\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #widget let-obs=\"obs\">\n  <valtimo-form-io\n    *ngIf=\"obs.formioFormSummary\"\n    [form]=\"obs.formioFormSummary\"\n    [readOnly]=\"true\"\n  ></valtimo-form-io>\n</ng-template>\n\n<ng-template #createEditModal>\n  <ibm-modal\n    valtimoIbmModal\n    *ngIf=\"{\n      show: showModal$ | async,\n      formValid: formValid$ | async,\n      disableInput: disableInput$ | async,\n      formioFormEdit: formioFormEdit$ | async\n    } as modalObs\"\n    [open]=\"modalObs.show\"\n  >\n    <ibm-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n      <h3 ibmModalHeaderHeading>\n        {{ 'object.editObject' | translate }}\n      </h3>\n    </ibm-modal-header>\n    <section ibmModalContent>\n      <ng-container *ngTemplateOutlet=\"modalContent; context: {modalObs: modalObs}\"></ng-container>\n    </section>\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {modalObs: modalObs}\"></ng-container>\n  </ibm-modal>\n</ng-template>\n\n<ng-template #modalContent let-modalObs=\"modalObs\">\n  <valtimo-form-io\n    [form]=\"modalObs.formioFormEdit\"\n    (change)=\"onFormioChange($event)\"\n  ></valtimo-form-io>\n</ng-template>\n\n<ng-template #modalFooter let-modalObs=\"modalObs\">\n  <ibm-modal-footer>\n    <ng-container>\n      <button\n        ibmButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"closeModal()\"\n        [disabled]=\"modalObs.disableInput\"\n      >\n        {{ 'object.close' | translate }}\n      </button>\n      <button\n        ibmButton=\"primary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"saveObject()\"\n        [disabled]=\"modalObs.disableInput || modalObs.formValid === false\"\n      >\n        {{ 'object.save' | translate }}\n      </button>\n    </ng-container>\n  </ibm-modal-footer>\n</ng-template>\n\n<ng-template #loading>\n  <div class=\"loading-icon\"><ibm-loading></ibm-loading></div>\n</ng-template>\n\n<ng-template #deleteModal>\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showDeleteModal$\"\n    [outputOnConfirm]=\"deleteObjectUrl$ | async\"\n    (confirmEvent)=\"deleteObjectConfirmation()\"\n    confirmButtonTextTranslationKey=\"object.deleteObject\"\n    titleTranslationKey=\"object.deleteObject\"\n    contentTranslationKey=\"object.deleteObjectConfirmation\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.row{margin:0}.object-schema{resize:none}valtimo-widget::ng-deep .card-border.card-full-default{border:none}\n"], dependencies: [{ kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i9.Button, selector: "[ibmButton]", inputs: ["ibmButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i9.IconDirective, selector: "[ibmIcon]", inputs: ["ibmIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i9.Loading, selector: "ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i8.FormioComponent, selector: "valtimo-form-io", inputs: ["form", "options", "submission", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: i9.Modal, selector: "ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i9.ModalHeader, selector: "ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i9.ModalFooter, selector: "ibm-modal-footer" }, { kind: "directive", type: i9.ModalContent, selector: "[ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i9.ModalHeaderHeading, selector: "[ibmModalHeaderHeading]" }, { kind: "component", type: i8.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "cancelButtonText", "cancelButtonTextTranslationKey", "showModalSubject$", "outputOnConfirm"], outputs: ["confirmEvent"] }, { kind: "directive", type: i8.ValtimoIbmModalDirective, selector: "[valtimoIbmModal]" }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ObjectDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-object-detail', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<ng-container\n  *ngIf=\"{\n    formioFormSummary: formioFormSummary$ | async\n  } as obs\"\n>\n  <div class=\"container-fluid pr-0 pl-0\">\n    <div class=\"row\">\n      <div class=\"col-12\">\n        <div class=\"text-right\">\n          <div class=\"btn-group mb-1\">\n            <ng-container *ngTemplateOutlet=\"buttons; context: {obs: obs}\"></ng-container>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-12\">\n        <ng-container *ngTemplateOutlet=\"widget; context: {obs: obs}\"></ng-container>\n      </div>\n    </div>\n  </div>\n  <ng-container *ngTemplateOutlet=\"createEditModal\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"deleteModal\"></ng-container>\n</ng-container>\n\n<ng-template #buttons let-obs=\"obs\">\n  <button (click)=\"openModal()\" ibmButton=\"primary\" size=\"md\">\n    {{ 'object.editObject' | translate }}\n    <svg class=\"cds--btn__icon\" ibmIcon=\"add\" size=\"16\"></svg>\n  </button>\n\n  <button (click)=\"deleteObject()\" ibmButton=\"danger\" size=\"md\" class=\"ml-3\">\n    {{ 'object.deleteObject' | translate }}\n    <svg class=\"cds--btn__icon\" ibmIcon=\"trash-can\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #widget let-obs=\"obs\">\n  <valtimo-form-io [form]=\"obs.formioFormSummary\" [readOnly]=\"true\"></valtimo-form-io>\n</ng-template>\n\n<ng-template #createEditModal>\n  <ibm-modal\n    *ngIf=\"{\n      show: showModal$ | async,\n      formValid: formValid$ | async,\n      disableInput: disableInput$ | async,\n      formioFormEdit: formioFormEdit$ | async\n    } as modalObs\"\n    [open]=\"modalObs.show\"\n  >\n    <ibm-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n      <h3 ibmModalHeaderHeading>\n        {{ 'object.editObject' | translate }}\n      </h3>\n    </ibm-modal-header>\n    <section ibmModalContent>\n      <ng-container *ngTemplateOutlet=\"modalContent; context: {modalObs: modalObs}\"></ng-container>\n    </section>\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {modalObs: modalObs}\"></ng-container>\n  </ibm-modal>\n</ng-template>\n\n<ng-template #modalContent let-modalObs=\"modalObs\">\n  <valtimo-form-io\n    [form]=\"modalObs.formioFormEdit\"\n    (change)=\"onFormioChange($event)\"\n  ></valtimo-form-io>\n</ng-template>\n\n<ng-template #modalFooter let-modalObs=\"modalObs\">\n  <ibm-modal-footer>\n    <ng-container>\n      <button\n        ibmButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"closeModal()\"\n        [disabled]=\"modalObs.disableInput\"\n      >\n        {{ 'object.close' | translate }}\n      </button>\n      <button\n        ibmButton=\"primary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"saveObject()\"\n        [disabled]=\"modalObs.disableInput || modalObs.formValid === false\"\n      >\n        {{ 'object.save' | translate }}\n      </button>\n    </ng-container>\n  </ibm-modal-footer>\n</ng-template>\n\n<ng-template #loading>\n  <div class=\"loading-icon\"><ibm-loading></ibm-loading></div>\n</ng-template>\n\n<ng-template #deleteModal>\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showDeleteModal$\"\n    [outputOnConfirm]=\"deleteObjectUrl$ | async\"\n    (confirmEvent)=\"deleteObjectConfirmation()\"\n    confirmButtonTextTranslationKey=\"object.deleteObject\"\n    titleTranslationKey=\"object.deleteObject\"\n    contentTranslationKey=\"object.deleteObjectConfirmation\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.row{margin:0}.object-schema{resize:none}valtimo-widget::ng-deep .card-border.card-full-default{border:none}\n"] }]
+            args: [{ selector: 'valtimo-object-detail', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<ng-container\n  *ngIf=\"{\n    formioFormSummary: formioFormSummary$ | async,\n    disableInput: disableInput$ | async\n  } as obs\"\n>\n  <div class=\"container-fluid pr-0 pl-0\">\n    <div class=\"row\">\n      <div class=\"col-12\">\n        <div class=\"text-right\">\n          <div class=\"btn-group mb-1\">\n            <ng-container *ngTemplateOutlet=\"buttons; context: {obs: obs}\"></ng-container>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-12\">\n        <ng-container *ngTemplateOutlet=\"widget; context: {obs: obs}\"></ng-container>\n      </div>\n    </div>\n  </div>\n  <ng-container *ngTemplateOutlet=\"createEditModal\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"deleteModal\"></ng-container>\n</ng-container>\n\n<ng-template #buttons let-obs=\"obs\">\n  <button [disabled]=\"obs.disableInput\" (click)=\"openModal()\" ibmButton=\"primary\" size=\"md\">\n    {{ 'object.editObject' | translate }}\n    <svg class=\"cds--btn__icon\" ibmIcon=\"add\" size=\"16\"></svg>\n  </button>\n\n  <button (click)=\"deleteObject()\" ibmButton=\"danger\" size=\"md\" class=\"ml-3\">\n    {{ 'object.deleteObject' | translate }}\n    <svg class=\"cds--btn__icon\" ibmIcon=\"trash-can\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #widget let-obs=\"obs\">\n  <valtimo-form-io\n    *ngIf=\"obs.formioFormSummary\"\n    [form]=\"obs.formioFormSummary\"\n    [readOnly]=\"true\"\n  ></valtimo-form-io>\n</ng-template>\n\n<ng-template #createEditModal>\n  <ibm-modal\n    valtimoIbmModal\n    *ngIf=\"{\n      show: showModal$ | async,\n      formValid: formValid$ | async,\n      disableInput: disableInput$ | async,\n      formioFormEdit: formioFormEdit$ | async\n    } as modalObs\"\n    [open]=\"modalObs.show\"\n  >\n    <ibm-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n      <h3 ibmModalHeaderHeading>\n        {{ 'object.editObject' | translate }}\n      </h3>\n    </ibm-modal-header>\n    <section ibmModalContent>\n      <ng-container *ngTemplateOutlet=\"modalContent; context: {modalObs: modalObs}\"></ng-container>\n    </section>\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {modalObs: modalObs}\"></ng-container>\n  </ibm-modal>\n</ng-template>\n\n<ng-template #modalContent let-modalObs=\"modalObs\">\n  <valtimo-form-io\n    [form]=\"modalObs.formioFormEdit\"\n    (change)=\"onFormioChange($event)\"\n  ></valtimo-form-io>\n</ng-template>\n\n<ng-template #modalFooter let-modalObs=\"modalObs\">\n  <ibm-modal-footer>\n    <ng-container>\n      <button\n        ibmButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"closeModal()\"\n        [disabled]=\"modalObs.disableInput\"\n      >\n        {{ 'object.close' | translate }}\n      </button>\n      <button\n        ibmButton=\"primary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"saveObject()\"\n        [disabled]=\"modalObs.disableInput || modalObs.formValid === false\"\n      >\n        {{ 'object.save' | translate }}\n      </button>\n    </ng-container>\n  </ibm-modal-footer>\n</ng-template>\n\n<ng-template #loading>\n  <div class=\"loading-icon\"><ibm-loading></ibm-loading></div>\n</ng-template>\n\n<ng-template #deleteModal>\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showDeleteModal$\"\n    [outputOnConfirm]=\"deleteObjectUrl$ | async\"\n    (confirmEvent)=\"deleteObjectConfirmation()\"\n    confirmButtonTextTranslationKey=\"object.deleteObject\"\n    titleTranslationKey=\"object.deleteObject\"\n    contentTranslationKey=\"object.deleteObjectConfirmation\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.row{margin:0}.object-schema{resize:none}valtimo-widget::ng-deep .card-border.card-full-default{border:none}\n"] }]
         }], ctorParameters: function () { return [{ type: ObjectService }, { type: ObjectStateService }, { type: i3.ActivatedRoute }, { type: i3.Router }, { type: i4.TranslateService }, { type: i6.ToastrService }]; } });
 
 /*
@@ -751,7 +763,8 @@ ObjectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
         InputModule,
         TooltipIconModule,
         ConfirmationModalModule,
-        SearchFieldsModule] });
+        SearchFieldsModule,
+        ValtimoIbmModalDirectiveModule] });
 ObjectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ObjectModule, imports: [CommonModule,
         ObjectRoutingModule,
         TranslateModule,
@@ -767,7 +780,8 @@ ObjectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
         InputModule,
         TooltipIconModule,
         ConfirmationModalModule,
-        SearchFieldsModule] });
+        SearchFieldsModule,
+        ValtimoIbmModalDirectiveModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ObjectModule, decorators: [{
             type: NgModule,
             args: [{
@@ -790,6 +804,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         TooltipIconModule,
                         ConfirmationModalModule,
                         SearchFieldsModule,
+                        ValtimoIbmModalDirectiveModule,
                     ],
                     exports: [],
                 }]