@valtimo/layout 13.2.1 → 13.3.0

package/fesm2022/valtimo-layout.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Injectable, InjectionToken, EventEmitter, computed, Output, Input, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, ViewChild, Optional, Inject, ViewContainerRef, NgModule } from '@angular/core';
-import { Subscription, debounceTime, map, BehaviorSubject, combineLatest, filter, tap, switchMap, take, of, startWith, delay, Subject } from 'rxjs';
+import { Subscription, debounceTime, map, BehaviorSubject, combineLatest, filter, tap, switchMap, take, of, startWith, merge, delay, Subject } from 'rxjs';
 import * as i4 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -18,12 +18,12 @@ import { filter as filter$1 } from 'rxjs/operators';
 import * as i2$3 from '@valtimo/shared';
 import { GlobalNotificationComponent, ROLE_ADMIN } from '@valtimo/shared';
 import { isEqual, cloneDeep } from 'lodash';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@valtimo/form';
 import * as i2$4 from '@valtimo/document';
 import * as i3$1 from '@valtimo/access-control';
 import { v4 } from 'uuid';
 import Muuri from 'muuri';
-import { toObservable } from '@angular/core/rxjs-interop';
 import { AuthGuardService } from '@valtimo/security';
 
 /*
@@ -1201,7 +1201,7 @@ class WidgetFieldComponent {
                         isRawValue: this.viewContentService.isRawValue({
                             ...property.displayProperties,
                             viewType: property.displayProperties?.type ?? ViewType.TEXT,
-                        })
+                        }),
                     },
                 ]
                 : []),
@@ -1454,7 +1454,7 @@ class TranslationManagementComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TranslationManagementComponent, deps: [{ token: i2$1.TranslateService }, { token: i2$3.LocalizationService }, { token: i1.PageHeaderService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TranslationManagementComponent, isStandalone: false, selector: "valtimo-translation-management", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 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\n<ng-container\n  *ngIf=\"{\n    localizationTranslationValues: localizationTranslationValues$ | async,\n    loading: loading$ | async,\n    disabled: disabled$ | async,\n    multiInputTitles: multiInputTiles$ | async,\n    amountOfArbitraryValues: amountOfArbitraryValues$ | async,\n    showConfirmationModal: showConfirmationModal$,\n    allChangedValuesValid: allChangedValuesValid$ | async,\n    valuesChanged: valuesChanged$ | async,\n    compactMode: compactMode$ | async,\n  } as obs\"\n>\n  <ng-container *ngIf=\"!obs.loading && obs.localizationTranslationValues; else loading\">\n    <valtimo-carbon-multi-input\n      [disabled]=\"obs.disabled\"\n      [arbitraryAmountTitles]=\"obs.multiInputTitles\"\n      [fullWidth]=\"true\"\n      [minimumAmountOfRows]=\"0\"\n      type=\"arbitraryAmount\"\n      [arbitraryValueAmount]=\"obs.amountOfArbitraryValues\"\n      [defaultValues]=\"obs.localizationTranslationValues\"\n      (allValuesValidEvent)=\"validChange($event)\"\n      (valueChange)=\"valueChange($event)\"\n      addRowTranslationKey=\"translationManagement.add\"\n    ></valtimo-carbon-multi-input>\n  </ng-container>\n\n  <ng-template #loading>\n    <div class=\"loading-container\"><cds-loading></cds-loading></div>\n  </ng-template>\n\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"obs.showConfirmationModal\"\n    (confirmEvent)=\"saveAndRefresh()\"\n    (optionalEvent)=\"saveAndStay()\"\n    (cancelEvent)=\"cancel()\"\n    [showOptionalButton]=\"true\"\n    cancelButtonType=\"ghost\"\n    optionalButtonType=\"secondary\"\n    confirmButtonTextTranslationKey=\"translationManagement.saveWithReload\"\n    optionalButtonTextTranslationKey=\"translationManagement.saveWithoutReload\"\n    titleTranslationKey=\"translationManagement.modalTitle\"\n    contentTranslationKey=\"translationManagement.modalContent\"\n    [spacerAfterCancelButton]=\"true\"\n  ></valtimo-confirmation-modal>\n\n  <ng-container renderInPageHeader>\n    <ng-template>\n      <button\n        cdsButton=\"primary\"\n        [size]=\"obs.compactMode ? 'sm' : 'md'\"\n        (click)=\"showModal()\"\n        [disabled]=\"!obs.allChangedValuesValid || obs.disabled || !obs.valuesChanged\"\n      >\n        {{ 'interface.save' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"save\" size=\"16\"></svg>\n      </button>\n    </ng-template>\n  </ng-container>\n</ng-container>\n", styles: [".loading-container{display:flex;width:100%;justify-content:center}\n/*!\n * Copyright 2015-2025 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"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["addRowText", "addRowTranslationKey", "arbitraryAmountTitles", "arbitraryValueAmount", "defaultValues", "deleteRowText", "deleteRowTranslationKey", "disabled", "dropdownColumnTitle", "dropdownItems", "dropdownWidth", "fullWidth", "hideAddButton", "hideDeleteButton", "initialAmountOfRows", "keyColumnTitle", "margin", "maxRows", "minimumAmountOfRows", "name", "required", "title", "titleTranslationKey", "tooltip", "type", "valueColumnTitle", "valuePathSelectorCaseDefinitionKey", "valuePathSelectorPrefixes", "valuePathSelectorShowCaseDefinitionSelector", "valuePathSelectorNotation", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "component", type: i3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "directive", type: i1.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TranslationManagementComponent, isStandalone: false, selector: "valtimo-translation-management", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 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\n<ng-container\n  *ngIf=\"{\n    localizationTranslationValues: localizationTranslationValues$ | async,\n    loading: loading$ | async,\n    disabled: disabled$ | async,\n    multiInputTitles: multiInputTiles$ | async,\n    amountOfArbitraryValues: amountOfArbitraryValues$ | async,\n    showConfirmationModal: showConfirmationModal$,\n    allChangedValuesValid: allChangedValuesValid$ | async,\n    valuesChanged: valuesChanged$ | async,\n    compactMode: compactMode$ | async,\n  } as obs\"\n>\n  <ng-container *ngIf=\"!obs.loading && obs.localizationTranslationValues; else loading\">\n    <valtimo-carbon-multi-input\n      [disabled]=\"obs.disabled\"\n      [arbitraryAmountTitles]=\"obs.multiInputTitles\"\n      [fullWidth]=\"true\"\n      [minimumAmountOfRows]=\"0\"\n      type=\"arbitraryAmount\"\n      [arbitraryValueAmount]=\"obs.amountOfArbitraryValues\"\n      [defaultValues]=\"obs.localizationTranslationValues\"\n      (allValuesValidEvent)=\"validChange($event)\"\n      (valueChange)=\"valueChange($event)\"\n      addRowTranslationKey=\"translationManagement.add\"\n    ></valtimo-carbon-multi-input>\n  </ng-container>\n\n  <ng-template #loading>\n    <div class=\"loading-container\"><cds-loading></cds-loading></div>\n  </ng-template>\n\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"obs.showConfirmationModal\"\n    (confirmEvent)=\"saveAndRefresh()\"\n    (optionalEvent)=\"saveAndStay()\"\n    (cancelEvent)=\"cancel()\"\n    [showOptionalButton]=\"true\"\n    cancelButtonType=\"ghost\"\n    optionalButtonType=\"secondary\"\n    confirmButtonTextTranslationKey=\"translationManagement.saveWithReload\"\n    optionalButtonTextTranslationKey=\"translationManagement.saveWithoutReload\"\n    titleTranslationKey=\"translationManagement.modalTitle\"\n    contentTranslationKey=\"translationManagement.modalContent\"\n    [spacerAfterCancelButton]=\"true\"\n  ></valtimo-confirmation-modal>\n\n  <ng-container renderInPageHeader>\n    <ng-template>\n      <button\n        cdsButton=\"primary\"\n        [size]=\"obs.compactMode ? 'sm' : 'md'\"\n        (click)=\"showModal()\"\n        [disabled]=\"!obs.allChangedValuesValid || obs.disabled || !obs.valuesChanged\"\n      >\n        {{ 'interface.save' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"save\" size=\"16\"></svg>\n      </button>\n    </ng-template>\n  </ng-container>\n</ng-container>\n", styles: [".loading-container{display:flex;width:100%;justify-content:center}\n/*!\n * Copyright 2015-2025 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"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["addRowText", "addButtonType", "addRowTranslationKey", "arbitraryAmountTitles", "arbitraryValueAmount", "defaultValues", "deleteRowText", "deleteRowTranslationKey", "disabled", "dropdownColumnTitle", "dropdownItems", "dropdownWidth", "fullWidth", "hideAddButton", "hideDeleteButton", "initialAmountOfRows", "keyColumnTitle", "margin", "maxRows", "minimumAmountOfRows", "name", "required", "title", "titleTranslationKey", "tooltip", "type", "valueColumnTitle", "valuePathSelectorCaseDefinitionKey", "valuePathSelectorPrefixes", "valuePathSelectorShowCaseDefinitionSelector", "valuePathSelectorNotation", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "component", type: i3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "directive", type: i1.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TranslationManagementComponent, decorators: [{
             type: Component,
@@ -1506,7 +1506,22 @@ class WidgetFormioComponent {
         this._widgetConfigurationSubject$.next(value);
     }
     set widgetUuid(value) {
+        this._widgetUuid = value;
+        this._hasSignalledExternalDataReady = false;
         this.widgetLayoutService.setWidgetDataLoaded(value);
+        this.widgetLayoutService.setWidgetWithExternalData(value);
+    }
+    set refreshForm(value) {
+        if (value === this._refreshEmitter)
+            return;
+        this._refreshSubscription?.unsubscribe();
+        this._refreshSubscription = null;
+        this._refreshEmitter = value;
+        if (!value)
+            return;
+        this._refreshSubscription = value
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this._refreshTrigger$.next());
     }
     get widgetConfiguration$() {
         return this._widgetConfigurationSubject$.pipe(filter(config => !!config));
@@ -1514,33 +1529,47 @@ class WidgetFormioComponent {
     get _documentId$() {
         return this._documentIdSubject$.pipe(filter(id => !!id));
     }
-    constructor(formService, widgetLayoutService) {
+    constructor(formService, widgetLayoutService, destroyRef) {
         this.formService = formService;
         this.widgetLayoutService = widgetLayoutService;
+        this.destroyRef = destroyRef;
+        this._refreshTrigger$ = new BehaviorSubject(undefined);
+        this._refreshEmitter = null;
+        this._refreshSubscription = null;
+        this._widgetUuid = null;
+        this._hasSignalledExternalDataReady = false;
         this._widgetConfigurationSubject$ = new BehaviorSubject(null);
         this._documentIdSubject$ = new BehaviorSubject('');
         this.prefilledFormDefinition$ = combineLatest([
             this.widgetConfiguration$,
             this._documentId$,
+            this._refreshTrigger$,
         ]).pipe(switchMap(([config, documentId]) => combineLatest([
             this.formService.getFormDefinitionByNamePreFilled(config.properties.formDefinitionName, documentId),
             of(config),
         ])), tap(() => {
-            this.widgetLayoutService.setWidgetDataLoaded(this.widgetUuid);
+            if (!this._widgetUuid)
+                return;
+            if (!this._hasSignalledExternalDataReady) {
+                this.widgetLayoutService.setWidgetWithExternalDataReady(this._widgetUuid);
+                this._hasSignalledExternalDataReady = true;
+            }
         }), map(([formDef]) => formDef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetFormioComponent, deps: [{ token: i1$1.FormService }, { token: WidgetLayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetFormioComponent, isStandalone: true, selector: "valtimo-widget-formio", inputs: { documentId: "documentId", widgetConfiguration: "widgetConfiguration", widgetUuid: "widgetUuid" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 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\n<div\n  class=\"formio-widget\"\n  *ngIf=\"{\n    prefilledFormDefinition: prefilledFormDefinition$ | async,\n    widgetConfiguration: widgetConfiguration$ | async,\n  } as obs\"\n>\n  <section class=\"formio-widget__header\">\n    <h4 class=\"formio-widget__title\">{{ obs.widgetConfiguration$?.title || '-' }}</h4>\n\n    <ng-content></ng-content>\n  </section>\n\n  <valtimo-form-io [form]=\"obs.prefilledFormDefinition\"></valtimo-form-io>\n</div>\n", styles: [".loading-container{display:flex;width:100%;flex-direction:row;justify-content:center}.error-message{text-align:center}\n/*!\n * Copyright 2015-2025 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormIoModule }, { kind: "component", type: i1.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change", "event"] }, { kind: "ngmodule", type: ButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetFormioComponent, deps: [{ token: i1$1.FormService }, { token: WidgetLayoutService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetFormioComponent, isStandalone: true, selector: "valtimo-widget-formio", inputs: { documentId: "documentId", widgetConfiguration: "widgetConfiguration", widgetUuid: "widgetUuid", refreshForm: "refreshForm" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 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\n<div\n  class=\"formio-widget\"\n  *ngIf=\"{\n    prefilledFormDefinition: prefilledFormDefinition$ | async,\n    widgetConfiguration: widgetConfiguration$ | async,\n  } as obs\"\n>\n  <section class=\"formio-widget__header\">\n    <h4 class=\"formio-widget__title\">{{ obs.widgetConfiguration$?.title || '-' }}</h4>\n\n    <ng-content></ng-content>\n  </section>\n\n  <valtimo-form-io [form]=\"obs.prefilledFormDefinition\"></valtimo-form-io>\n</div>\n", styles: [".loading-container{display:flex;width:100%;flex-direction:row;justify-content:center}.error-message{text-align:center}\n/*!\n * Copyright 2015-2025 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormIoModule }, { kind: "component", type: i1.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change", "event"] }, { kind: "ngmodule", type: ButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetFormioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-widget-formio', standalone: true, imports: [CommonModule, TranslateModule, FormIoModule, ButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2025 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\n<div\n  class=\"formio-widget\"\n  *ngIf=\"{\n    prefilledFormDefinition: prefilledFormDefinition$ | async,\n    widgetConfiguration: widgetConfiguration$ | async,\n  } as obs\"\n>\n  <section class=\"formio-widget__header\">\n    <h4 class=\"formio-widget__title\">{{ obs.widgetConfiguration$?.title || '-' }}</h4>\n\n    <ng-content></ng-content>\n  </section>\n\n  <valtimo-form-io [form]=\"obs.prefilledFormDefinition\"></valtimo-form-io>\n</div>\n", styles: [".loading-container{display:flex;width:100%;flex-direction:row;justify-content:center}.error-message{text-align:center}\n/*!\n * Copyright 2015-2025 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"] }]
-        }], ctorParameters: () => [{ type: i1$1.FormService }, { type: WidgetLayoutService }], propDecorators: { documentId: [{
+        }], ctorParameters: () => [{ type: i1$1.FormService }, { type: WidgetLayoutService }, { type: i0.DestroyRef }], propDecorators: { documentId: [{
                 type: Input
             }], widgetConfiguration: [{
                 type: Input
             }], widgetUuid: [{
                 type: Input
+            }], refreshForm: [{
+                type: Input
             }] } });
 
 /*
@@ -2144,9 +2173,11 @@ class WidgetContainerComponent {
         if (!value)
             return;
         const widgetsWithUuids = value.map(widget => ({ ...widget, uuid: v4() }));
+        this.resetLayout();
         this.widgetLayoutService.setWidgets(widgetsWithUuids);
         this.widgetsWithUuids$.next(widgetsWithUuids);
         this.loadingWidgetConfiguration$.next(false);
+        this.initLayout();
     }
     get widgetComponentMap$() {
         return this._widgetComponentMap$.pipe(filter$1(componentMap => componentMap !== null));
@@ -2160,9 +2191,20 @@ class WidgetContainerComponent {
         this._widgetComponentMap$ = new BehaviorSubject(DEFAULT_WIDGET_COMPONENT_MAP);
         this.widgetParams = {};
         this.loadingWidgetConfiguration$ = new BehaviorSubject(true);
-        this.loaded$ = this.widgetLayoutService.loaded$.pipe(delay(400));
+        this.reload$ = new BehaviorSubject(false);
+        this.loaded$ = merge(this.reload$, this.widgetLayoutService.loaded$.pipe(delay(400)));
     }
-    ngAfterViewInit() {
+    resetLayout() {
+        if (!this._observer)
+            return;
+        this.reload$.next(false);
+        this.destroyLayout();
+    }
+    destroyLayout() {
+        this.widgetLayoutService.reset();
+        this._observer?.disconnect();
+    }
+    initLayout() {
         this._observer = new ResizeObserver(event => {
             this.observerMutation(event);
         });
@@ -2170,8 +2212,7 @@ class WidgetContainerComponent {
         this.initMuuri();
     }
     ngOnDestroy() {
-        this._observer?.disconnect();
-        this.widgetLayoutService.reset();
+        this.destroyLayout();
     }
     observerMutation(event) {
         const containerWidth = event[0]?.borderBoxSize[0]?.inlineSize;