@valtimo/dossier 12.11.0 → 12.14.0

package/fesm2022/valtimo-dossier.mjs

@@ -40,7 +40,7 @@ import Muuri from 'muuri';
 import { ChevronDown16 } from '@carbon/icons';
 import * as i6$3 from 'keycloak-angular';
 import * as i1$3 from '@valtimo/task';
-import { CAN_VIEW_TASK_PERMISSION, TASK_DETAIL_PERMISSION_RESOURCE, TaskModule, CAN_ASSIGN_TASK_PERMISSION, TaskDetailContentComponent, TaskDetailIntermediateSaveComponent, AssignUserToTaskComponent } from '@valtimo/task';
+import { CAN_VIEW_TASK_PERMISSION, TASK_DETAIL_PERMISSION_RESOURCE, TaskModule, CAN_ASSIGN_TASK_PERMISSION, CAN_MODIFY_TASK_PERMISSION, TaskDetailContentComponent, TaskDetailIntermediateSaveComponent, AssignUserToTaskComponent, SetTaskDueDateComponent } from '@valtimo/task';
 import * as i4$1 from '@valtimo/process-link';
 import { FORM_CUSTOM_COMPONENT_TOKEN, ProcessLinkModule } from '@valtimo/process-link';
 import * as i17 from 'angular-split';
@@ -3557,7 +3557,7 @@ class DossierListCaseTagService {
                 selectedCaseTags = caseTags.filter(caseTag => queryCaseTags.includes(caseTag.key));
                 this.setSelectedCaseTags(selectedCaseTags);
             }
-        }), map(([caseTags]) => caseTags), tap(caseTags => this._showCaseTagsSelector$.next((caseTags || []).length > 1)));
+        }), map(([caseTags]) => caseTags), tap(caseTags => this._showCaseTagsSelector$.next((caseTags || []).length > 0)));
     }
     setSelectedCaseTags(caseTags) {
         this._selectedCaseTags$.next(caseTags);
@@ -3636,7 +3636,7 @@ class DossierBulkAssignModalComponent {
         return index;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierBulkAssignModalComponent, deps: [{ token: DossierBulkAssignService }, { token: i2$5.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierBulkAssignModalComponent, selector: "valtimo-dossier-bulk-assign-modal", inputs: { documentIds: "documentIds", open: "open" }, outputs: { closeEvent: "closeEvent" }, host: { properties: { "class": "this.modalClass" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<cds-modal valtimoCdsModal [open]=\"open\" (close)=\"closeModal()\" showFooter=\"true\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>{{ 'dossier.bulkAssign.modal.title' | translate }}</h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    <form *ngIf=\"candidateUsers$ | async as candidateUsers\" [formGroup]=\"formGroup\">\n      <cds-combo-box\n        formControlName=\"assignee\"\n        [dropUp]=\"false\"\n        [items]=\"candidateUsers\"\n        [label]=\"'dossier.bulkAssign.modal.selectLabel' | translate\"\n        [placeholder]=\"'dossier.bulkAssign.modal.selectPlaceholder' | translate\"\n      >\n        <cds-dropdown-list></cds-dropdown-list>\n      </cds-combo-box>\n    </form>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"ghost\" (click)=\"closeModal()\">{{ 'interface.cancel' | translate }}</button>\n\n    <button cdsButton=\"primary\" [disabled]=\"formGroup.invalid\" (click)=\"closeModal(true)\">\n      {{ 'dossier.bulkAssign.modal.confirm' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: ["::ng-deep .valtimo-dossier-bulk-assign-modal .cds--list-box__field{background-color:#fff}::ng-deep .valtimo-dossier-bulk-assign-modal .cds--modal-container,::ng-deep .valtimo-dossier-bulk-assign-modal .cds--modal-content{overflow:unset}\n/*!\n * Copyright 2015-2024 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: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i5.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i5.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i5.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i5.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i5.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i5.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i5.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "directive", type: i2$2.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierBulkAssignModalComponent, selector: "valtimo-dossier-bulk-assign-modal", inputs: { documentIds: "documentIds", open: "open" }, outputs: { closeEvent: "closeEvent" }, host: { properties: { "class": "this.modalClass" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<cds-modal valtimoCdsModal [open]=\"open\" (close)=\"closeModal()\" showFooter=\"true\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>{{ 'dossier.bulkAssign.modal.title' | translate }}</h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    <form *ngIf=\"candidateUsers$ | async as candidateUsers\" [formGroup]=\"formGroup\">\n      <cds-combo-box\n        formControlName=\"assignee\"\n        [dropUp]=\"false\"\n        [items]=\"candidateUsers\"\n        [label]=\"'dossier.bulkAssign.modal.selectLabel' | translate\"\n        [placeholder]=\"'dossier.bulkAssign.modal.selectPlaceholder' | translate\"\n      >\n        <cds-dropdown-list></cds-dropdown-list>\n      </cds-combo-box>\n    </form>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"ghost\" (click)=\"closeModal()\">{{ 'interface.cancel' | translate }}</button>\n\n    <button cdsButton=\"primary\" [disabled]=\"formGroup.invalid\" (click)=\"closeModal(true)\">\n      {{ 'dossier.bulkAssign.modal.confirm' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: ["::ng-deep .valtimo-dossier-bulk-assign-modal .cds--list-box__field{background-color:#fff}::ng-deep .valtimo-dossier-bulk-assign-modal .cds--modal-container,::ng-deep .valtimo-dossier-bulk-assign-modal .cds--modal-content{overflow:unset}\n/*!\n * Copyright 2015-2024 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: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i5.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i5.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i5.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i5.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i5.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i5.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i5.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "directive", type: i2$2.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["enableOverflow"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierBulkAssignModalComponent, decorators: [{
             type: Component,
@@ -3833,6 +3833,10 @@ class DossierDetailsTaskDetailComponent {
             resource: TASK_DETAIL_PERMISSION_RESOURCE.task,
             identifier: task?.id ?? '',
         })));
+        this.canModifyTask$ = this.task$.pipe(switchMap((task) => this.permissionService.requestPermission(CAN_MODIFY_TASK_PERMISSION, {
+            resource: TASK_DETAIL_PERMISSION_RESOURCE.task,
+            identifier: task?.id ?? '',
+        })));
         this.intermediateSaveValue$ = new BehaviorSubject(null);
         this.pageValue = signal({
             title: '',
@@ -3859,7 +3863,7 @@ class DossierDetailsTaskDetailComponent {
         this.formSubmit.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierDetailsTaskDetailComponent, deps: [{ token: i1.ConfigService }, { token: i2$2.PageHeaderService }, { token: i2$4.PermissionService }, { token: i6.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierDetailsTaskDetailComponent, isStandalone: true, selector: "valtimo-dossier-detail-task-detail", inputs: { taskAndProcessLink: "taskAndProcessLink" }, outputs: { closeEvent: "closeEvent", assignmentOfTaskChanged: "assignmentOfTaskChanged", activeChange: "activeChange", formSubmit: "formSubmit" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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  *ngIf=\"{\n    canAssignUserToTask: canAssignUserToTask$ | async,\n    intermediateSaveValue: intermediateSaveValue$ | async,\n    task: task$ | async,\n    taskAndProcessLink: taskAndProcessLink$ | async,\n  } as obs\"\n  class=\"valtimo-dossier-detail-task-detail\"\n>\n  <section class=\"valtimo-dossier-detail-task-detail__header\">\n    <valtimo-task-detail-intermediate-save\n      *ngIf=\"enableIntermediateSave\"\n      [taskAndProcessLink]=\"obs.taskAndProcessLink\"\n      (currentIntermediateSaveEvent)=\"onCurrentIntermediateSaveEvent($event)\"\n    ></valtimo-task-detail-intermediate-save>\n\n    <button cdsButton=\"ghost\" [iconOnly]=\"true\" (click)=\"onClose()\">\n      <svg class=\"cds--btn__icon\" cdsIcon=\"close\" size=\"16\"></svg>\n    </button>\n  </section>\n\n  <section\n    class=\"valtimo-dossier-detail-task-detail__body\"\n    [class.valtimo-dossier-detail-task-detail__body--compact]=\"compactMode$ | async\"\n  >\n    <div class=\"title-container\">\n      <p class=\"valtimo-dossier-detail-task-detail__title\">{{ pageValue()?.title }}</p>\n\n      <p class=\"cds--modal-header__label cds--type-delta\">{{ pageValue()?.subtitle }}</p>\n\n      <p *ngIf=\"obs.intermediateSaveValue\" class=\"cds--modal-header__label\">\n        {{ 'formManagement.intermediateSave.lastSavedBy' | translate }}:\n\n        {{\n          obs.intermediateSaveValue.editedBy\n            ? obs.intermediateSaveValue.editedBy\n            : obs.intermediateSaveValue.createdBy\n        }}\n\n        {{ 'formManagement.intermediateSave.on' | translate }}:\n\n        {{\n          obs.intermediateSaveValue.editedOn\n            ? obs.intermediateSaveValue.editedOn\n            : obs.intermediateSaveValue.createdOn\n        }}\n      </p>\n\n      <valtimo-assign-user-to-task\n        *ngIf=\"obs.task && obs.canAssignUserToTask\"\n        [taskId]=\"obs.task.id\"\n        [assigneeId]=\"obs.task.assignee\"\n      ></valtimo-assign-user-to-task>\n    </div>\n\n    <valtimo-task-detail-content\n      [taskAndProcessLink]=\"obs.taskAndProcessLink\"\n      (activeChange)=\"onActiveChangeEvent($event)\"\n      (formSubmit)=\"onFormSubmitEvent()\"\n    ></valtimo-task-detail-content>\n  </section>\n</div>\n", styles: [".valtimo-dossier-detail-task-detail{width:100%;display:flex;flex-direction:column;background-color:var(--cds-layer);padding:8px 16px 16px}.valtimo-dossier-detail-task-detail__header{display:flex;justify-content:flex-end}.valtimo-dossier-detail-task-detail__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.valtimo-dossier-detail-task-detail__body{overflow-y:auto;max-height:calc(100vh - 320px)}.valtimo-dossier-detail-task-detail__body--compact{max-height:calc(100vh - 280px)}.valtimo-dossier-detail-task-detail__body .title-container{position:sticky;background-color:var(--cds-layer);top:0;z-index:12;padding-bottom:16px}\n/*!\n * Copyright 2015-2024 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: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "component", type: TaskDetailContentComponent, selector: "valtimo-task-detail-content", inputs: ["task", "taskAndProcessLink", "modalClosed"], outputs: ["closeModalEvent", "formSubmit", "activeChange"] }, { kind: "component", type: TaskDetailIntermediateSaveComponent, selector: "valtimo-task-detail-intermediate-save", inputs: ["task", "taskAndProcessLink"], outputs: ["currentIntermediateSaveEvent", "showModalEvent"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i5.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i5.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: AssignUserToTaskComponent, selector: "valtimo-assign-user-to-task", inputs: ["taskId", "assigneeId"], outputs: ["assignmentOfTaskChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DossierDetailsTaskDetailComponent, isStandalone: true, selector: "valtimo-dossier-detail-task-detail", inputs: { taskAndProcessLink: "taskAndProcessLink" }, outputs: { closeEvent: "closeEvent", assignmentOfTaskChanged: "assignmentOfTaskChanged", activeChange: "activeChange", formSubmit: "formSubmit" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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  *ngIf=\"{\n    canAssignUserToTask: canAssignUserToTask$ | async,\n    intermediateSaveValue: intermediateSaveValue$ | async,\n    task: task$ | async,\n    taskAndProcessLink: taskAndProcessLink$ | async,\n    canModifyTask: canModifyTask$ | async,\n  } as obs\"\n  class=\"valtimo-dossier-detail-task-detail\"\n>\n  <section class=\"valtimo-dossier-detail-task-detail__header\">\n    <valtimo-task-detail-intermediate-save\n      *ngIf=\"enableIntermediateSave\"\n      [taskAndProcessLink]=\"obs.taskAndProcessLink\"\n      (currentIntermediateSaveEvent)=\"onCurrentIntermediateSaveEvent($event)\"\n    ></valtimo-task-detail-intermediate-save>\n\n    <button cdsButton=\"ghost\" [iconOnly]=\"true\" (click)=\"onClose()\">\n      <svg class=\"cds--btn__icon\" cdsIcon=\"close\" size=\"16\"></svg>\n    </button>\n  </section>\n\n  <section\n    class=\"valtimo-dossier-detail-task-detail__body\"\n    [class.valtimo-dossier-detail-task-detail__body--compact]=\"compactMode$ | async\"\n  >\n    <div class=\"title-container\">\n      <p class=\"valtimo-dossier-detail-task-detail__title\">{{ pageValue()?.title }}</p>\n\n      <p class=\"cds--modal-header__label cds--type-delta\">{{ pageValue()?.subtitle }}</p>\n\n      <p *ngIf=\"obs.intermediateSaveValue\" class=\"cds--modal-header__label\">\n        {{ 'formManagement.intermediateSave.lastSavedBy' | translate }}:\n\n        {{\n          obs.intermediateSaveValue.editedBy\n            ? obs.intermediateSaveValue.editedBy\n            : obs.intermediateSaveValue.createdBy\n        }}\n\n        {{ 'formManagement.intermediateSave.on' | translate }}:\n\n        {{\n          obs.intermediateSaveValue.editedOn\n            ? obs.intermediateSaveValue.editedOn\n            : obs.intermediateSaveValue.createdOn\n        }}\n      </p>\n\n      <div class=\"task-actions\">\n        @if (obs.task) {\n          <valtimo-assign-user-to-task\n            [canAssignUserToTask]=\"obs.canAssignUserToTask\"\n            [taskId]=\"obs.task.id\"\n            [assigneeId]=\"obs.task.assignee\"\n          ></valtimo-assign-user-to-task>\n\n          <valtimo-set-task-due-date\n            [canModifyTask]=\"obs.canModifyTask\"\n          ></valtimo-set-task-due-date>\n        }\n      </div>\n    </div>\n\n    <valtimo-task-detail-content\n      [taskAndProcessLink]=\"obs.taskAndProcessLink\"\n      (activeChange)=\"onActiveChangeEvent($event)\"\n      (formSubmit)=\"onFormSubmitEvent()\"\n    ></valtimo-task-detail-content>\n  </section>\n</div>\n", styles: [".valtimo-dossier-detail-task-detail{width:100%;display:flex;flex-direction:column;background-color:var(--cds-layer);padding:8px 16px 16px}.valtimo-dossier-detail-task-detail__header{display:flex;justify-content:flex-end}.valtimo-dossier-detail-task-detail__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.valtimo-dossier-detail-task-detail__body{overflow-y:auto;max-height:calc(100vh - 320px)}.valtimo-dossier-detail-task-detail__body--compact{max-height:calc(100vh - 280px)}.valtimo-dossier-detail-task-detail__body .title-container{position:sticky;background-color:var(--cds-layer);top:0;z-index:12;padding-bottom:16px}.valtimo-dossier-detail-task-detail .task-actions{display:flex;flex-wrap:wrap;width:100%;padding-top:8px;gap:8px}\n/*!\n * Copyright 2015-2024 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: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "component", type: TaskDetailContentComponent, selector: "valtimo-task-detail-content", inputs: ["task", "taskAndProcessLink", "modalClosed"], outputs: ["closeModalEvent", "formSubmit", "activeChange"] }, { kind: "component", type: TaskDetailIntermediateSaveComponent, selector: "valtimo-task-detail-intermediate-save", inputs: ["task", "taskAndProcessLink"], outputs: ["currentIntermediateSaveEvent", "showModalEvent"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i5.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i5.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: AssignUserToTaskComponent, selector: "valtimo-assign-user-to-task", inputs: ["taskId", "assigneeId", "canAssignUserToTask"], outputs: ["assignmentOfTaskChanged"] }, { kind: "component", type: SetTaskDueDateComponent, selector: "valtimo-set-task-due-date", inputs: ["canModifyTask", "task"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierDetailsTaskDetailComponent, decorators: [{
             type: Component,
@@ -3871,7 +3875,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         ButtonModule,
                         IconModule,
                         AssignUserToTaskComponent,
-                    ], template: "<!--\n  ~ Copyright 2015-2024 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  *ngIf=\"{\n    canAssignUserToTask: canAssignUserToTask$ | async,\n    intermediateSaveValue: intermediateSaveValue$ | async,\n    task: task$ | async,\n    taskAndProcessLink: taskAndProcessLink$ | async,\n  } as obs\"\n  class=\"valtimo-dossier-detail-task-detail\"\n>\n  <section class=\"valtimo-dossier-detail-task-detail__header\">\n    <valtimo-task-detail-intermediate-save\n      *ngIf=\"enableIntermediateSave\"\n      [taskAndProcessLink]=\"obs.taskAndProcessLink\"\n      (currentIntermediateSaveEvent)=\"onCurrentIntermediateSaveEvent($event)\"\n    ></valtimo-task-detail-intermediate-save>\n\n    <button cdsButton=\"ghost\" [iconOnly]=\"true\" (click)=\"onClose()\">\n      <svg class=\"cds--btn__icon\" cdsIcon=\"close\" size=\"16\"></svg>\n    </button>\n  </section>\n\n  <section\n    class=\"valtimo-dossier-detail-task-detail__body\"\n    [class.valtimo-dossier-detail-task-detail__body--compact]=\"compactMode$ | async\"\n  >\n    <div class=\"title-container\">\n      <p class=\"valtimo-dossier-detail-task-detail__title\">{{ pageValue()?.title }}</p>\n\n      <p class=\"cds--modal-header__label cds--type-delta\">{{ pageValue()?.subtitle }}</p>\n\n      <p *ngIf=\"obs.intermediateSaveValue\" class=\"cds--modal-header__label\">\n        {{ 'formManagement.intermediateSave.lastSavedBy' | translate }}:\n\n        {{\n          obs.intermediateSaveValue.editedBy\n            ? obs.intermediateSaveValue.editedBy\n            : obs.intermediateSaveValue.createdBy\n        }}\n\n        {{ 'formManagement.intermediateSave.on' | translate }}:\n\n        {{\n          obs.intermediateSaveValue.editedOn\n            ? obs.intermediateSaveValue.editedOn\n            : obs.intermediateSaveValue.createdOn\n        }}\n      </p>\n\n      <valtimo-assign-user-to-task\n        *ngIf=\"obs.task && obs.canAssignUserToTask\"\n        [taskId]=\"obs.task.id\"\n        [assigneeId]=\"obs.task.assignee\"\n      ></valtimo-assign-user-to-task>\n    </div>\n\n    <valtimo-task-detail-content\n      [taskAndProcessLink]=\"obs.taskAndProcessLink\"\n      (activeChange)=\"onActiveChangeEvent($event)\"\n      (formSubmit)=\"onFormSubmitEvent()\"\n    ></valtimo-task-detail-content>\n  </section>\n</div>\n", styles: [".valtimo-dossier-detail-task-detail{width:100%;display:flex;flex-direction:column;background-color:var(--cds-layer);padding:8px 16px 16px}.valtimo-dossier-detail-task-detail__header{display:flex;justify-content:flex-end}.valtimo-dossier-detail-task-detail__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.valtimo-dossier-detail-task-detail__body{overflow-y:auto;max-height:calc(100vh - 320px)}.valtimo-dossier-detail-task-detail__body--compact{max-height:calc(100vh - 280px)}.valtimo-dossier-detail-task-detail__body .title-container{position:sticky;background-color:var(--cds-layer);top:0;z-index:12;padding-bottom:16px}\n/*!\n * Copyright 2015-2024 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"] }]
+                        SetTaskDueDateComponent,
+                    ], template: "<!--\n  ~ Copyright 2015-2024 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  *ngIf=\"{\n    canAssignUserToTask: canAssignUserToTask$ | async,\n    intermediateSaveValue: intermediateSaveValue$ | async,\n    task: task$ | async,\n    taskAndProcessLink: taskAndProcessLink$ | async,\n    canModifyTask: canModifyTask$ | async,\n  } as obs\"\n  class=\"valtimo-dossier-detail-task-detail\"\n>\n  <section class=\"valtimo-dossier-detail-task-detail__header\">\n    <valtimo-task-detail-intermediate-save\n      *ngIf=\"enableIntermediateSave\"\n      [taskAndProcessLink]=\"obs.taskAndProcessLink\"\n      (currentIntermediateSaveEvent)=\"onCurrentIntermediateSaveEvent($event)\"\n    ></valtimo-task-detail-intermediate-save>\n\n    <button cdsButton=\"ghost\" [iconOnly]=\"true\" (click)=\"onClose()\">\n      <svg class=\"cds--btn__icon\" cdsIcon=\"close\" size=\"16\"></svg>\n    </button>\n  </section>\n\n  <section\n    class=\"valtimo-dossier-detail-task-detail__body\"\n    [class.valtimo-dossier-detail-task-detail__body--compact]=\"compactMode$ | async\"\n  >\n    <div class=\"title-container\">\n      <p class=\"valtimo-dossier-detail-task-detail__title\">{{ pageValue()?.title }}</p>\n\n      <p class=\"cds--modal-header__label cds--type-delta\">{{ pageValue()?.subtitle }}</p>\n\n      <p *ngIf=\"obs.intermediateSaveValue\" class=\"cds--modal-header__label\">\n        {{ 'formManagement.intermediateSave.lastSavedBy' | translate }}:\n\n        {{\n          obs.intermediateSaveValue.editedBy\n            ? obs.intermediateSaveValue.editedBy\n            : obs.intermediateSaveValue.createdBy\n        }}\n\n        {{ 'formManagement.intermediateSave.on' | translate }}:\n\n        {{\n          obs.intermediateSaveValue.editedOn\n            ? obs.intermediateSaveValue.editedOn\n            : obs.intermediateSaveValue.createdOn\n        }}\n      </p>\n\n      <div class=\"task-actions\">\n        @if (obs.task) {\n          <valtimo-assign-user-to-task\n            [canAssignUserToTask]=\"obs.canAssignUserToTask\"\n            [taskId]=\"obs.task.id\"\n            [assigneeId]=\"obs.task.assignee\"\n          ></valtimo-assign-user-to-task>\n\n          <valtimo-set-task-due-date\n            [canModifyTask]=\"obs.canModifyTask\"\n          ></valtimo-set-task-due-date>\n        }\n      </div>\n    </div>\n\n    <valtimo-task-detail-content\n      [taskAndProcessLink]=\"obs.taskAndProcessLink\"\n      (activeChange)=\"onActiveChangeEvent($event)\"\n      (formSubmit)=\"onFormSubmitEvent()\"\n    ></valtimo-task-detail-content>\n  </section>\n</div>\n", styles: [".valtimo-dossier-detail-task-detail{width:100%;display:flex;flex-direction:column;background-color:var(--cds-layer);padding:8px 16px 16px}.valtimo-dossier-detail-task-detail__header{display:flex;justify-content:flex-end}.valtimo-dossier-detail-task-detail__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.valtimo-dossier-detail-task-detail__body{overflow-y:auto;max-height:calc(100vh - 320px)}.valtimo-dossier-detail-task-detail__body--compact{max-height:calc(100vh - 280px)}.valtimo-dossier-detail-task-detail__body .title-container{position:sticky;background-color:var(--cds-layer);top:0;z-index:12;padding-bottom:16px}.valtimo-dossier-detail-task-detail .task-actions{display:flex;flex-wrap:wrap;width:100%;padding-top:8px;gap:8px}\n/*!\n * Copyright 2015-2024 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.ConfigService }, { type: i2$2.PageHeaderService }, { type: i2$4.PermissionService }, { type: i6.TranslateService }], propDecorators: { taskAndProcessLink: [{
                 type: Input
             }], closeEvent: [{
@@ -3922,6 +3927,8 @@ class DossierSupportingProcessStartModalComponent {
         this.documentId$ = new BehaviorSubject(undefined);
         this.modalOpen$ = new BehaviorSubject(false);
         this._formCustomComponentConfig$ = new BehaviorSubject({});
+        this.closeModalEvent = new EventEmitter();
+        this._subscriptions = new Subscription();
         this._formCustomComponentConfig$.next(formCustomComponentConfig);
     }
     loadProcessLink() {
@@ -3929,6 +3936,8 @@ class DossierSupportingProcessStartModalComponent {
             .pipe(take$1(1), switchMap(([processDefinitionId, documentId]) => this.processService.getProcessDefinitionStartProcessLink(processDefinitionId, documentId, null)))
             .subscribe(startProcessResult => {
             if (startProcessResult) {
+                this.isUIComponent = false;
+                this.isFormViewModel = false;
                 switch (startProcessResult.type) {
                     case 'form':
                         this.formDefinition$.next(startProcessResult.properties.prefilledForm);
@@ -3940,15 +3949,12 @@ class DossierSupportingProcessStartModalComponent {
                     case 'form-view-model':
                         this.formDefinition$.next(startProcessResult.properties.formDefinition);
                         this.setFormViewModelComponent(startProcessResult.properties.formName);
-                        this.openCdsModal();
                         break;
                     case 'ui-component':
                         this.setFormCustomComponent(startProcessResult.properties.componentKey);
                         this.isUIComponent = true;
-                        this.openCdsModal();
                         break;
                 }
-                this.openCdsModal();
             }
         });
     }
@@ -3966,6 +3972,7 @@ class DossierSupportingProcessStartModalComponent {
         options.setHooks(formioBeforeSubmit);
         this.options$.next(options);
         this.loadProcessLink();
+        this.openCdsModal();
     }
     onSubmit(submission) {
         this.formioSubmission$.next(submission);
@@ -4021,6 +4028,9 @@ class DossierSupportingProcessStartModalComponent {
         formViewModelComponent.instance.formSubmit.pipe(take$1(1)).subscribe(() => {
             this.formSubmitted();
         });
+        this._subscriptions.add(this.closeModalEvent.subscribe(() => {
+            formViewModelComponent.destroy();
+        }));
         this.isFormViewModel = true;
     }
     setFormCustomComponent(formCustomComponentKey) {
@@ -4039,20 +4049,25 @@ class DossierSupportingProcessStartModalComponent {
             renderedComponent.instance.submittedEvent.subscribe(() => {
                 this.formSubmitted();
             });
+            this._subscriptions.add(this.closeModalEvent.subscribe(() => {
+                renderedComponent.destroy();
+            }));
         });
     }
     closeCdsModal() {
         this.modalOpen$.next(false);
+        this.closeModalEvent.emit();
     }
     openCdsModal() {
+        this.loadProcessLink();
         this.modalOpen$.next(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierSupportingProcessStartModalComponent, deps: [{ token: i1$1.Router }, { token: i2$3.ProcessService }, { token: i4$1.ProcessLinkService }, { token: FORM_VIEW_MODEL_TOKEN, optional: true }, { token: FORM_CUSTOM_COMPONENT_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DossierSupportingProcessStartModalComponent, selector: "valtimo-dossier-supporting-process-start-modal", inputs: { isAdmin: "isAdmin" }, outputs: { formSubmit: "formSubmit" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "formViewModelDynamicContainer", first: true, predicate: ["formViewModelComponent"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "formCustomComponentDynamicContainer", first: true, predicate: ["formCustomComponent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<cds-modal [open]=\"modalOpen$ | async\" valtimoCdsModal size=\"sm\">\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCloseSelect()\" [cdsLayer]=\"1\"\n    ><h3 cdsModalHeaderHeading>\n      {{\n        (processDefinitionKey$ | async | translate) !== (processDefinitionKey$ | async)\n          ? (processDefinitionKey$ | async | translate)\n          : (processName$ | async)\n      }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent [cdsLayer]=\"1\">\n    <ng-template #formViewModelComponent></ng-template>\n    <ng-template #formCustomComponent></ng-template>\n\n    @if (!isFormViewModel && (formDefinition$ | async)) {\n      <valtimo-form-io\n        #form\n        [submission]=\"submission$ | async\"\n        [form]=\"formDefinition$ | async\"\n        [options]=\"options$ | async\"\n        (submit)=\"onSubmit($event)\"\n      ></valtimo-form-io>\n    }\n\n    @if (formFlowInstanceId$ | async) {\n      <valtimo-form-flow\n        #formFlow\n        [formFlowInstanceId]=\"formFlowInstanceId$ | async\"\n        (formFlowComplete)=\"formSubmitted()\"\n      ></valtimo-form-flow>\n    }\n\n    @if (!(formDefinition$ | async) && !(formFlowInstanceId$ | async) && !isUIComponent) {\n      <div class=\"bg-warning text-black mb-0 p-3 text-center\">\n        {{\n          isAdmin\n            ? ('formManagement.noFormDefinitionFoundAdmin' | translate)\n            : ('formManagement.noFormDefinitionFoundUser' | translate)\n        }}\n      </div>\n      <div class=\"mb-0 mt-4 p-3 text-center\">\n        <button\n          class=\"btn btn-secondary btn-space\"\n          type=\"button\"\n          (click)=\"gotoFormLinkScreen()\"\n          id=\"form-link-button\"\n        >\n          {{ 'formManagement.gotoProcessLinksButton' | translate }}\n        </button>\n      </div>\n    }\n  </section>\n</cds-modal>\n", styles: ["#supportingProcessStartModal .formio-component-submit{text-align:right}\n/*!\n * Copyright 2015-2024 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: "component", type: i2$2.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change", "event"] }, { kind: "component", type: i4$1.FormFlowComponent, selector: "valtimo-form-flow", inputs: ["formIoFormData", "formFlowInstanceId"], outputs: ["formFlowComplete", "formFlowChange"] }, { kind: "component", type: i5.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i5.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "directive", type: i5.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i5.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i2$2.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "directive", type: i5.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DossierSupportingProcessStartModalComponent, selector: "valtimo-dossier-supporting-process-start-modal", inputs: { isAdmin: "isAdmin" }, outputs: { formSubmit: "formSubmit" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "formViewModelDynamicContainer", first: true, predicate: ["formViewModelComponent"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "formCustomComponentDynamicContainer", first: true, predicate: ["formCustomComponent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<cds-modal [open]=\"modalOpen$ | async\" valtimoCdsModal size=\"sm\">\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCloseSelect()\" [cdsLayer]=\"1\"\n    ><h3 cdsModalHeaderHeading>\n      {{\n        (processDefinitionKey$ | async | translate) !== (processDefinitionKey$ | async)\n          ? (processDefinitionKey$ | async | translate)\n          : (processName$ | async)\n      }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent [cdsLayer]=\"1\">\n    <ng-template #formViewModelComponent></ng-template>\n    <ng-template #formCustomComponent></ng-template>\n\n    @if (!isFormViewModel && !isUIComponent && (formDefinition$ | async)) {\n      <valtimo-form-io\n        #form\n        [submission]=\"submission$ | async\"\n        [form]=\"formDefinition$ | async\"\n        [options]=\"options$ | async\"\n        (submit)=\"onSubmit($event)\"\n      ></valtimo-form-io>\n    }\n\n    @if (formFlowInstanceId$ | async) {\n      <valtimo-form-flow\n        #formFlow\n        [formFlowInstanceId]=\"formFlowInstanceId$ | async\"\n        (formFlowComplete)=\"formSubmitted()\"\n      ></valtimo-form-flow>\n    }\n\n    @if (!(formDefinition$ | async) && !(formFlowInstanceId$ | async) && !isUIComponent) {\n      <div class=\"bg-warning text-black mb-0 p-3 text-center\">\n        {{\n          isAdmin\n            ? ('formManagement.noFormDefinitionFoundAdmin' | translate)\n            : ('formManagement.noFormDefinitionFoundUser' | translate)\n        }}\n      </div>\n      <div class=\"mb-0 mt-4 p-3 text-center\">\n        <button\n          class=\"btn btn-secondary btn-space\"\n          type=\"button\"\n          (click)=\"gotoFormLinkScreen()\"\n          id=\"form-link-button\"\n        >\n          {{ 'formManagement.gotoProcessLinksButton' | translate }}\n        </button>\n      </div>\n    }\n  </section>\n</cds-modal>\n", styles: ["#supportingProcessStartModal .formio-component-submit{text-align:right}\n/*!\n * Copyright 2015-2024 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: "component", type: i2$2.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change", "event"] }, { kind: "component", type: i4$1.FormFlowComponent, selector: "valtimo-form-flow", inputs: ["formIoFormData", "formFlowInstanceId"], outputs: ["formFlowComplete", "formFlowChange"] }, { kind: "component", type: i5.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i5.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "directive", type: i5.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i5.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i2$2.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["enableOverflow"] }, { kind: "directive", type: i5.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierSupportingProcessStartModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-supporting-process-start-modal', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2024 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<cds-modal [open]=\"modalOpen$ | async\" valtimoCdsModal size=\"sm\">\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCloseSelect()\" [cdsLayer]=\"1\"\n    ><h3 cdsModalHeaderHeading>\n      {{\n        (processDefinitionKey$ | async | translate) !== (processDefinitionKey$ | async)\n          ? (processDefinitionKey$ | async | translate)\n          : (processName$ | async)\n      }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent [cdsLayer]=\"1\">\n    <ng-template #formViewModelComponent></ng-template>\n    <ng-template #formCustomComponent></ng-template>\n\n    @if (!isFormViewModel && (formDefinition$ | async)) {\n      <valtimo-form-io\n        #form\n        [submission]=\"submission$ | async\"\n        [form]=\"formDefinition$ | async\"\n        [options]=\"options$ | async\"\n        (submit)=\"onSubmit($event)\"\n      ></valtimo-form-io>\n    }\n\n    @if (formFlowInstanceId$ | async) {\n      <valtimo-form-flow\n        #formFlow\n        [formFlowInstanceId]=\"formFlowInstanceId$ | async\"\n        (formFlowComplete)=\"formSubmitted()\"\n      ></valtimo-form-flow>\n    }\n\n    @if (!(formDefinition$ | async) && !(formFlowInstanceId$ | async) && !isUIComponent) {\n      <div class=\"bg-warning text-black mb-0 p-3 text-center\">\n        {{\n          isAdmin\n            ? ('formManagement.noFormDefinitionFoundAdmin' | translate)\n            : ('formManagement.noFormDefinitionFoundUser' | translate)\n        }}\n      </div>\n      <div class=\"mb-0 mt-4 p-3 text-center\">\n        <button\n          class=\"btn btn-secondary btn-space\"\n          type=\"button\"\n          (click)=\"gotoFormLinkScreen()\"\n          id=\"form-link-button\"\n        >\n          {{ 'formManagement.gotoProcessLinksButton' | translate }}\n        </button>\n      </div>\n    }\n  </section>\n</cds-modal>\n", styles: ["#supportingProcessStartModal .formio-component-submit{text-align:right}\n/*!\n * Copyright 2015-2024 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"] }]
+            args: [{ selector: 'valtimo-dossier-supporting-process-start-modal', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2024 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<cds-modal [open]=\"modalOpen$ | async\" valtimoCdsModal size=\"sm\">\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCloseSelect()\" [cdsLayer]=\"1\"\n    ><h3 cdsModalHeaderHeading>\n      {{\n        (processDefinitionKey$ | async | translate) !== (processDefinitionKey$ | async)\n          ? (processDefinitionKey$ | async | translate)\n          : (processName$ | async)\n      }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent [cdsLayer]=\"1\">\n    <ng-template #formViewModelComponent></ng-template>\n    <ng-template #formCustomComponent></ng-template>\n\n    @if (!isFormViewModel && !isUIComponent && (formDefinition$ | async)) {\n      <valtimo-form-io\n        #form\n        [submission]=\"submission$ | async\"\n        [form]=\"formDefinition$ | async\"\n        [options]=\"options$ | async\"\n        (submit)=\"onSubmit($event)\"\n      ></valtimo-form-io>\n    }\n\n    @if (formFlowInstanceId$ | async) {\n      <valtimo-form-flow\n        #formFlow\n        [formFlowInstanceId]=\"formFlowInstanceId$ | async\"\n        (formFlowComplete)=\"formSubmitted()\"\n      ></valtimo-form-flow>\n    }\n\n    @if (!(formDefinition$ | async) && !(formFlowInstanceId$ | async) && !isUIComponent) {\n      <div class=\"bg-warning text-black mb-0 p-3 text-center\">\n        {{\n          isAdmin\n            ? ('formManagement.noFormDefinitionFoundAdmin' | translate)\n            : ('formManagement.noFormDefinitionFoundUser' | translate)\n        }}\n      </div>\n      <div class=\"mb-0 mt-4 p-3 text-center\">\n        <button\n          class=\"btn btn-secondary btn-space\"\n          type=\"button\"\n          (click)=\"gotoFormLinkScreen()\"\n          id=\"form-link-button\"\n        >\n          {{ 'formManagement.gotoProcessLinksButton' | translate }}\n        </button>\n      </div>\n    }\n  </section>\n</cds-modal>\n", styles: ["#supportingProcessStartModal .formio-component-submit{text-align:right}\n/*!\n * Copyright 2015-2024 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.Router }, { type: i2$3.ProcessService }, { type: i4$1.ProcessLinkService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -4275,7 +4290,6 @@ class DossierDetailComponent extends PendingChangesComponent {
             this.canView$,
         ]).pipe(filter(([_, canView]) => canView), switchMap(() => this.route.params), map((params) => params?.documentId), switchMap((documentId) => documentId ? this.documentService.getDocument(this.documentId) : of(null)), tap((document) => {
             if (document) {
-                console.log('document', document);
                 this.assigneeId$.next(document.assigneeId);
                 this.document = document;
                 this._caseStatusKey$.next(document?.internalStatus || 'NOT_AVAILABLE');
@@ -4294,11 +4308,12 @@ class DossierDetailComponent extends PendingChangesComponent {
             ...status,
             tagType: InternalCaseStatusUtils.getTagTypeFromInternalCaseStatusColor(status.color),
         }));
-        this.caseTags$ = this.documentDefinitionName$.pipe(filter(documentDefinitionName => !!documentDefinitionName), switchMap(documentDefinitionName => this._caseTags$), map(tag => tag &&
+        this.caseTags$ = this.documentDefinitionName$.pipe(filter(documentDefinitionName => !!documentDefinitionName), switchMap(() => this._caseTags$), map(tag => tag &&
             tag.map(caseTag => ({
                 ...caseTag,
                 tagType: CaseTagsUtils.getTagTypeFromCaseTagColor(caseTag.color),
             }))));
+        this.hasCaseTags$ = this._caseTags$.pipe(map(caseTags => Array.isArray(caseTags) && caseTags.length > 0));
         this.userId$ = of(this.keyCloakService.isLoggedIn()).pipe(switchMap(() => this.keyCloakService.loadUserProfile()), map(profile => profile?.id));
         this.isAssigning$ = new BehaviorSubject(false);
         this.isAssignedToCurrentUser$ = combineLatest([
@@ -4326,6 +4341,7 @@ class DossierDetailComponent extends PendingChangesComponent {
         this.noTabsConfigured$ = new BehaviorSubject(false);
         this.showNoAccess$ = new BehaviorSubject(false);
         this.compactMode$ = this.pageHeaderService.compactMode$;
+        this.smallTitle$ = this.pageHeaderService.smallTitle$;
         this.tabHorizontalOverflowDisabled = this.dossierTabService.tabHorizontalOverflowDisabled;
         this.showTaskList$ = this.dossierTabService.showTaskList$;
         this._activeTabName$ = new BehaviorSubject(null);
@@ -4349,12 +4365,14 @@ class DossierDetailComponent extends PendingChangesComponent {
         this.setDocumentStyle();
         this.enableResetOnBackNavigation();
         this.openWidgetProcessSubscription();
+        this.openSmallTitleSubscription();
     }
     ngOnDestroy() {
         this.breadcrumbService.clearSecondBreadcrumb();
         this.pageTitleService.enableReset();
         this.removeDocumentStyle();
         this._subscriptions.unsubscribe();
+        this.pageHeaderService.disableSmallTitle();
     }
     getAllAssociatedProcessDefinitions() {
         this._subscriptions.add(combineLatest([
@@ -4631,12 +4649,22 @@ class DossierDetailComponent extends PendingChangesComponent {
                 ? DOSSIER_DETAIL_START_PROCESS_DROPDOWN_WIDTH.medium
                 : DOSSIER_DETAIL_START_PROCESS_DROPDOWN_WIDTH.large);
     }
+    openSmallTitleSubscription() {
+        this._subscriptions.add(combineLatest([this.hasCaseTags$, this.compactMode$]).subscribe(([hasCaseTags, compactMode]) => {
+            if (!compactMode && hasCaseTags) {
+                this.pageHeaderService.enableSmallTitle();
+            }
+            else {
+                this.pageHeaderService.disableSmallTitle();
+            }
+        }));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierDetailComponent, deps: [{ token: i2$2.BreadcrumbService }, { token: i2$1.CaseStatusService }, { token: i2$2.CdsThemeService }, { token: i0.ComponentFactoryResolver }, { token: i1.ConfigService }, { token: i2$1.DocumentService }, { token: DossierDetailLayoutService }, { token: DossierService }, { token: DossierTabService }, { token: i5.IconService }, { token: i6$3.KeycloakService }, { token: i1$2.NGXLogger }, { token: i5.NotificationService }, { token: i2$2.PageHeaderService }, { token: i2$2.PageTitleService }, { token: i2$4.PermissionService }, { token: i6.TranslateService }, { token: i0.Renderer2 }, { token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: WidgetsService }, { token: i5$1.UserProviderService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DossierDetailComponent, selector: "valtimo-dossier-detail", providers: [DossierTabService, DossierDetailLayoutService, NotificationService], viewQueries: [{ propertyName: "supportingProcessStart", first: true, predicate: ["supportingProcessStartModal"], descendants: true }, { propertyName: "viewContainerRef", first: true, predicate: ["tabContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_tabContentContainer", first: true, predicate: ["tabContentContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<div\n  class=\"main-content\"\n  [ngClass]=\"{'main-content--no-horizontal-overflow': tabHorizontalOverflowDisabled()}\"\n>\n  <div class=\"container-fluid\">\n    <ng-container *ngIf=\"caseTags$ | async as caseTags\">\n      @if (caseTags && caseTags.length > 0) {\n        <div class=\"spacing-case-tags\">\n          @for (tag of caseTags; track tag) {\n            <cds-tag size=\"sm\" [type]=\"tag.tagType\">\n              {{ tag.title }}\n            </cds-tag>\n          }\n        </div>\n      }\n    </ng-container>\n\n    <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n\n    <ng-template #tabs>\n      <ng-container *ngIf=\"{activeTab: activeTab$ | async} as obs\">\n        <cds-tabs *ngIf=\"tabLoader\" type=\"inline\" class=\"case-detail-tabs\">\n          <cds-tab\n            *ngFor=\"let tab of tabLoader.tabs\"\n            [active]=\"tab.name === (activeTabName$ | async)\"\n            heading=\"{{ tab | tabTranslate | async }}\"\n            (selected)=\"onTabSelected(tab, obs.activeTab)\"\n          ></cds-tab>\n        </cds-tabs>\n      </ng-container>\n    </ng-template>\n    <div\n      #tabContentContainer\n      class=\"tab-content-container\"\n      [ngClass]=\"{\n        'tab-content-container--dark': isDarkMode$ | async,\n        'tab-content-container--compact': compactMode$ | async,\n      }\"\n      *ngIf=\"{\n        noTabsConfigured: noTabsConfigured$ | async,\n        showTaskList: showTaskList$ | async,\n        showNoAccess: showNoAccess$ | async,\n        dossierDetailLayout: dossierDetailLayout$ | async,\n        openTaskAndProcessLinkInModal: openTaskAndProcessLinkInModal$ | async,\n        taskAndProcessLinkOpenedInPanel: taskAndProcessLinkOpenedInPanel$ | async,\n      } as tabContentObs\"\n    >\n      <as-split\n        direction=\"horizontal\"\n        [disabled]=\"!tabContentObs.dossierDetailLayout.widthAdjustable\"\n        [gutterSize]=\"DOSSIER_DETAIL_GUTTER_SIZE\"\n        [unit]=\"tabContentObs.dossierDetailLayout.unit\"\n      >\n        <as-split-area\n          [size]=\"tabContentObs.dossierDetailLayout.leftPanelWidth\"\n          [minSize]=\"tabContentObs.dossierDetailLayout.leftPanelMinWidth\"\n          [maxSize]=\"tabContentObs.dossierDetailLayout.leftPanelMaxWidth\"\n        >\n          <div\n            class=\"card-body bg-white p-5 position-relative tab-container\"\n            [class.tab-container--compact]=\"compactMode$ | async\"\n          >\n            <div *ngIf=\"loadingTabs$ | async\" class=\"loading-container\">\n              <cds-loading></cds-loading>\n            </div>\n\n            <valtimo-no-results\n              *ngIf=\"tabContentObs.showNoAccess\"\n              description=\"{{ 'dossier.noAccess.description' | translate }}\"\n              title=\"{{ 'dossier.noAccess.title' | translate }}\"\n              illustration=\"valtimo-layout/img/emptystate-not-authorised.svg\"\n            >\n            </valtimo-no-results>\n\n            <valtimo-no-results\n              *ngIf=\"tabContentObs.noTabsConfigured\"\n              [description]=\"'dossier.tabs.noResultsDescription' | translate\"\n              [title]=\"'dossier.tabs.noResults' | translate\"\n            ></valtimo-no-results>\n\n            <ng-template #tabContainer></ng-template>\n\n            <div class=\"clearfix\"></div>\n          </div>\n        </as-split-area>\n\n        <as-split-area\n          *ngIf=\"tabContentObs.dossierDetailLayout.showRightPanel\"\n          [size]=\"tabContentObs.dossierDetailLayout.rightPanelWidth\"\n          [minSize]=\"tabContentObs.dossierDetailLayout.rightPanelMinWidth\"\n          [maxSize]=\"tabContentObs.dossierDetailLayout.rightPanelMaxWidth\"\n        >\n          @if (tabContentObs.showTaskList) {\n            <div class=\"task-panel\">\n              @if (!tabContentObs.taskAndProcessLinkOpenedInPanel) {\n                <valtimo-dossier-detail-task-list\n                  [openTaskAndProcessLinkInModal]=\"tabContentObs.openTaskAndProcessLinkInModal\"\n                  (taskClickEvent)=\"onTaskClickEvent($event)\"\n                  (formSubmitEvent)=\"onFormSubmitEvent()\"\n                ></valtimo-dossier-detail-task-list>\n              }\n\n              @if (tabContentObs.taskAndProcessLinkOpenedInPanel) {\n                <valtimo-dossier-detail-task-detail\n                  [taskAndProcessLink]=\"tabContentObs.taskAndProcessLinkOpenedInPanel\"\n                  (activeChange)=\"onActiveChangeEvent($event)\"\n                  (closeEvent)=\"onTaskDetailsClose()\"\n                  (formSubmit)=\"onFormSubmitEvent()\"\n                >\n                </valtimo-dossier-detail-task-detail>\n              }\n            </div>\n          }\n        </as-split-area>\n      </as-split>\n    </div>\n  </div>\n\n  <valtimo-dossier-supporting-process-start-modal\n    [isAdmin]=\"isAdmin$ | async\"\n    (formSubmit)=\"tabLoader.refreshView()\"\n    #supportingProcessStartModal\n  ></valtimo-dossier-supporting-process-start-modal>\n</div>\n\n<ng-template\n  #caseDetailHeader\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <div class=\"row\" *ngIf=\"(customDossierHeaderItems || []).length > 0\">\n    <span\n      *ngFor=\"let item of customDossierHeaderItems\"\n      [ngClass]=\"{\n        h1: item.textSize === 'xl',\n        h2: item.textSize === 'lg',\n        h3: item.textSize === 'md',\n        h4: item.textSize === 'sm',\n        h5: item.textSize === 'xs',\n      }\"\n      class=\"mb-0 mt-0 align-self-end col-xl-{{ item.columnSize }} col-lg-{{\n        item.columnSize * 2\n      }} {{ item.customClass }}\"\n    >\n      <span *ngIf=\"item.label\">{{ item.label | translate }}</span>\n\n      <span *ngIf=\"item.label && item.value\">: </span>\n\n      <strong>{{ item.value }}</strong>\n    </span>\n  </div>\n\n  <ng-container\n    *ngTemplateOutlet=\"\n      caseDetailAssignee;\n      context: {canHaveAssignee: canHaveAssignee, document: document, canAssign: canAssign}\n    \"\n  ></ng-container>\n</ng-template>\n\n<ng-template\n  #caseDetailAssignee\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <div *ngIf=\"canHaveAssignee && document\">\n    <valtimo-dossier-assign-user\n      *ngIf=\"canAssignLoaded$ | async\"\n      [assigneeFullName]=\"document?.assigneeFullName\"\n      [assigneeId]=\"document.assigneeId\"\n      [documentId]=\"document.id\"\n      [hasPermission]=\"canAssign\"\n      (assignmentOfDocumentChanged)=\"assignmentOfDocumentChanged()\"\n    ></valtimo-dossier-assign-user>\n  </div>\n</ng-template>\n\n<ng-template #claimButton let-canClaim=\"canClaim\" let-canHaveAssignee=\"canHaveAssignee\">\n  <cds-overflow-menu-option\n    *ngIf=\"canClaim && canHaveAssignee\"\n    [disabled]=\"(isAssigning$ | async) || (isAssignedToCurrentUser$ | async)\"\n    (click)=\"claimAssignee()\"\n  >\n    {{ 'dossier.claimAssigneeCase' | translate }}\n  </cds-overflow-menu-option>\n</ng-template>\n\n<ng-template #unassignButton let-canHaveAssignee=\"canHaveAssignee\" let-assigneeId=\"assigneeId\">\n  <cds-overflow-menu-option\n    *ngIf=\"canHaveAssignee\"\n    [disabled]=\"!assigneeId\"\n    (selected)=\"unassignAssignee()\"\n  >\n    {{ 'assignDocument.remove' | translate }}\n  </cds-overflow-menu-option>\n</ng-template>\n\n<ng-template #deleteButton let-canDelete=\"canDelete\">\n  <cds-overflow-menu-option\n    *ngIf=\"canDelete\"\n    [disabled]=\"isDeleting$ | async\"\n    (click)=\"deleteDocument()\"\n    type=\"danger\"\n  >\n    {{ 'dossier.delete.delete' | translate }}\n  </cds-overflow-menu-option>\n</ng-template>\n\n<ng-template #customStartTrigger>\n  <button\n    [size]=\"(compactMode$ | async) ? 'sm' : 'lg'\"\n    cdsButton=\"primary\"\n    [disabled]=\"processDocumentDefinitions.length === 0\"\n    [ngbTooltip]=\"processDocumentDefinitions.length === 0 ? 'No action' : null\"\n  >\n    {{ 'dossier.startSubProcess' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"chevron--down\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"dossier.delete.confirm\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"dossier.delete.description\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"dossier.delete.delete\"\n  (confirmEvent)=\"onConfirmDelete()\"\n></valtimo-confirmation-modal>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <div\n      class=\"dossier-actions\"\n      [ngClass]=\"{'--compact': compactMode$ | async}\"\n      *ngIf=\"{\n        assigneeId: assigneeId$ | async,\n        canAssign: canAssign$ | async,\n        canClaim: canClaim$ | async,\n        canHaveAssignee: canHaveAssignee$ | async,\n        canDelete: canDelete$ | async,\n        document: document$ | async,\n        caseStatus: caseStatus$ | async,\n      } as obs\"\n    >\n      <div\n        class=\"dossier-status-assign-custom-title\"\n        [ngClass]=\"{'--compact': compactMode$ | async}\"\n      >\n        @if (obs.caseStatus) {\n          <cds-tag size=\"sm\" [type]=\"obs.caseStatus.tagType\" [title]=\"obs.caseStatus.title\">{{\n            obs.caseStatus.title\n          }}</cds-tag>\n        }\n\n        <div class=\"dossier-assign-user\" [ngClass]=\"{'--compact': compactMode$ | async}\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              caseDetailAssignee;\n              context: {\n                canHaveAssignee: obs.canHaveAssignee,\n                document: obs.document,\n                canAssign: obs.canAssign,\n              }\n            \"\n          ></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"caseDetailHeader\"></ng-container>\n      </div>\n\n      <div class=\"buttons-container\">\n        <cds-overflow-menu\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n          *ngIf=\"obs.canHaveAssignee || obs.canDelete\"\n          flip=\"true\"\n          [offset]=\"(compactMode$ | async) ? {y: 48, x: -4} : {y: 48, x: 4}\"\n          class=\"overflow-button assign-overflow\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              claimButton;\n              context: {canClaim: obs.canClaim, canHaveAssignee: obs.canHaveAssignee}\n            \"\n          >\n          </ng-container>\n          <ng-container\n            *ngTemplateOutlet=\"\n              unassignButton;\n              context: {canHaveAssignee: obs.canHaveAssignee, assigneeId: obs.assigneeId}\n            \"\n          >\n          </ng-container>\n          <ng-container *ngTemplateOutlet=\"deleteButton; context: {canDelete: obs.canDelete}\">\n          </ng-container>\n        </cds-overflow-menu>\n\n        <cds-overflow-menu\n          valtimoCdsOverflowButton\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n          [width]=\"dropdownWidth$ | async\"\n          [customTrigger]=\"customStartTrigger\"\n          [offset]=\"{y: 48, x: 35}\"\n          class=\"overflow-button case-detail-overflow\"\n        >\n          <cds-overflow-menu-option\n            *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n            [attr.title]=\"processDocumentDefinition.displayName\"\n            (click)=\"startProcess(processDocumentDefinition)\"\n          >\n            {{ processDocumentDefinition.displayName }}\n          </cds-overflow-menu-option>\n        </cds-overflow-menu>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".main-content{overflow:hidden;padding-bottom:0}.main-content--no-horizontal-overflow{overflow-x:hidden}.tab-container{height:min-content;min-height:300px;overflow-y:auto;max-height:calc(100vh - 226px);overflow-x:hidden}.tab-container--compact{max-height:calc(100vh - 176px)}.tab-container:has(>.tab--no-margin){padding:0!important}.tab-container:has(>.tab--no-min-height){min-height:unset}.tab-container:has(>.tab--no-background){background:transparent!important}.tab-content-container{overflow:hidden;display:flex;gap:32px;overflow:auto;margin-bottom:16px;max-height:calc(100vh - 226px)}.tab-content-container--compact{max-height:calc(100vh - 176px)}.loading-container{display:flex;justify-content:center;flex-direction:row}.dossier-detail-page-header{display:flex;width:100%;justify-content:flex-start;padding-bottom:5px}.dossier-detail-page-header ::ng-deep .cds--tag{margin:0}.case-detail-tabs{display:flex;margin-bottom:24px}.case-detail-tabs cds-tab{display:none!important}.cds--overflow-menu-options{margin-top:32px}.assign-overflow{margin-right:8px}.buttons-container{display:flex;flex-direction:row}.dossier-actions{display:flex;width:100%;justify-content:space-between;align-items:flex-end;padding-bottom:4px}.dossier-actions.--compact{padding-bottom:0;align-items:flex-start}.dossier-actions ::ng-deep .version-selection{width:160px}.dossier-actions ::ng-deep .version-selection .cds--list-box__selection{display:none}.dossier-status-assign-custom-title{display:flex;gap:16px;align-items:flex-end}.dossier-status-assign-custom-title .cds--tag{margin:0;overflow:hidden;text-overflow:ellipsis;line-height:24px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:100%}.dossier-status-assign-custom-title.--compact{align-items:center}.task-panel{width:100%;transition:height .15s ease-in-out}:host ::ng-deep .container-fluid{height:100%!important;width:100%!important;margin:0!important;padding:0!important}::ng-deep .tab-content-container .as-split-gutter{background-color:transparent!important;--_as-gutter-icon-disabled: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAgEBAYcDngAAAAAASUVORK5CYII=);--_as-gutter-icon-horizontal: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABQJJREFUeF7dWll22zAMpNwzlM5xmpMlOVl6mzrKHexWm8UFy4xIp+/FP3mxQWAwWAiRGsJ3/gwhhJvt4CRCfgCtosYhDOHm4SlW7rZyq9t/R7GsZoYQDhCA89UIrzakKuQtpRTiHv03ycJB3t8KuU9AByNfw5dWJpj1h5YABmGRsvgufzsSG21NEwGWUrv5yiuZb31yMZoAAjBFPqBdor9G0vpwu2+PBgE6TK/q0pUxxiwZxnE0SefkE0sHWQUygGG3ll0c2tGNn+M0DiSfHDlHQBu2rffoWgBWPRHWIUreM654li5bMwDQBIhI9naHFgVQCSS2PHliWlLm0/YsMrcwK6ISp1QGANhzG7XFDj2gUFr8yzrkydOJ6CyACBB1lIWkbPyeQ2UQ2ZKxksCLft4EaWqB/AshHCdg0b/1gB7wJB1QBrQ0ml4E2MMyFgxJ6iABuEGdgCUeZVQm+fQ7fhfAsflzAKFLS1G2ptmMwUpDl1oyAGxo2fw2hHBzjpsm+XiO2TGQF1GWACJGfecAjHmgCTZum/lQfezQTZ3L7z+g3goc2xGtFT86A0qLh5pgjPF13aLmv9aHdYiVn8uMwFNixQlYqVuNvayK3sZxNElgHarlP6duo2bpOcbXWxheVhkTj7Tv4ATsTG/OL6CG8DZ+KCQMIcSf6HnAAo8hrAjGRpIblLxveDm8/q4YC6fT6flyufzWBhXGoTWd4QOUp6enX9fr9X2od6SFhJlTu4FBGZA5n+jbnddZjPG8nz8lo222ItHJEraRICAAMmG6rPGb2FTjedqHsET+4/Lbu+phHWLlJ/g+Cd4gpJDgp71HHzAHFCqOEFCSULjrNkaxw2rO/zidnv/MNY99WIcY+TKufibUmOcSEB5IxLTHXLal2FG4h83VPzET1h6wUxDP8fXfJW5V8xuQhqFwVtGNgDuQ6Yo367Pb9ixdjVckVE1QS/0ekZhybRw/zMZblkBpd1sMPIdJkAsClF2ghQQPYJYBQjp5BKCBEHD4JZDi6bED3AebRDFbAp58Ski3JrgphQcgozEwXZ2dBH3nZ2Bq5KcyahuEgO1wIWBnyIuoS5hA9pHIp01dnANSdlvKwXWocRC6Pw/U70MBozCQAWI5JKDF5wFrtk8uR6XKYQibnL9dr+/CjgA5v81AamMFByTTmOhQp56hPw5/vrrvx61euz2gZKfHgcj98bUkgjo/WJCxeMrJFyQgR8ocQcGnwqsJpgSK8pymTPeIThus4DKwBKWJFNsFklEcOT9ApyFADswAQJMiwkaUldeQ7ZTKDWf79tsSgIasDwGduro1CbY+hVqZgpJ1SA5L6bQHMJNjOy19MsCgBiNgV8DK+1GxSXoYAcMwhNttOedPIZTPAhm8bQ6Anx57ZMBGgfHuXs6yuEANBBtR/2bIjzkj8bAMSIYU+KLDaoKSU8KFCOP7LAsTcDTZ2jPAfrUWf3VGnwdo1pgF5xiz9yhazwOExwfv9suEm2XArJwNtSP/+AxgwlHL1iVwiAUdhEaAxhtLWGbZDEbPEiCyhHWIla93KO7AvMoAwre7bW5jxCAfwaHnoa4N3gVU5X2RthX0gdVNBPhDZnYgzMH7ImKbCOA8wnfsVO+jeUgIEHfYFUs7jHYNLN2YvJkBXwYaNuQIwnp2cgoCag3LN1Z2+EwfwCVPLPAOJ1n05oDt9x5oRR37Pb72s/e+kU81L/EXSRwjcUdkvjUAAAAASUVORK5CYII=)}::ng-deep .tab-content-container .as-split-gutter-icon{background-repeat:no-repeat;background-size:16px 16px}::ng-deep .tab-content-container--dark .as-split-gutter{--_as-gutter-icon-horizontal: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABPlJREFUeF7tm1tW3DAMhu2+krCmdmWlKytrIuGV9HjixDddfjkOtOd0XmAGWZfPsiw7g3fVyzvntvpD9H01+JIuwCamX5YKf9VfmCVaDze2S2fXIDG+CGC8YsrqMCvDFDmHZYCeI5gE6LietD2LlNb6uQAQTLWfCDTLmLpOIfoRvxEZydZn+pH7+vdlAEJyoIwIwDIrFtk7C2TyA/Po9gxY1zVWrN2haZq85FqS3zEF+YET3qi6rFzjfAR0yGkBwQA0wyFU75zf5MaOBYDoR2YGDigqY+U7HOKHlAsFiQOXqax+JYCYBGJr32ZAB+lEpxwc3i1nDcDWtBUYPjN8p35VBxf/4/MQUI7lqAGPzwjYBQDv3PQ0+Ue/CjV/sODp8+UiyNE7XLHO6EM+Dg4/ntBdAI69zdIqBlgTlDldADLN9a7R551cDot0kDPNbn40AIh6LSS4DS0Be9jJg7sAXPHJfBZojbXriMscGgDvvhUYmRGEes6iocJiyVejWdelYDPNk5cquhnAxVSAlgDZQG/7bUqKjvZEDqgdYwaAzQsrVQHowFkPqd5bA4LlO1ytp+zoFM0Ml2V5CYPmeX78lF7v67rla8B6GpynKZxnxBfmD03MvASCMe/9z+DRtm2/SAiZLXRGqcapbYTaICB/BHwggN1wbuzQSUHI3UQBHPqo+wPO/7dlefkWJ0PyR0ofEIAjg49Z8GOe51fOCAYgIcPkd2vLsnz33v+ubadJ0TZw8Fqcmnkk+CBjCahHXodQ49mhHGjUDJCDf37Vjmn54Sa4MuxGaL/weWzDdggJigjgDL7KpG3bxLTPmY/PALqa90JgAahpf/ohb8jjAfAlrQdCCSDG0gRPxCiHzf81XwKUVA1M7gDwbojbspsM4GZea3jov5cFp6cGoHYRFCWE5FthQwKAGCnLS9vD6UXwXbnIRpGUcsH3D6JxI2sADwFHwEnqAI4HKW0AB07ci6QDXgLHELUIghPxbxRBBukICDuAZMCaAbu8XnLf1K4wzBjdGYpzSUGI66ntBQg/8QzYB+PyyW18++sAEHvu8wSY02IbosyONaBTPj7XO6/F+SxVzgPKRooWlN7l0A0g+i0tGXrmvdu2D/qYTrBgO0GKG3ocRlrhB/jm6a13zR2i8GAk+BOOw/lmy95RMIlgAlAvh4ex5/ll5CUndYMkJfGNFyL84sCuoHa3tSVQW9HkGxjeueUNv6Krx7dbTO5R/J1FARSQ9X3d8gyh13RSZAYA9iOcmHkJWO1ZA+LkRdbaRAlO3wogKL/+/YDZl5cuFQogC/P4k/j+mx0AYVDyYVQGWDMPlbcDQDVHOREA1DmGDAgv7emA0bEofgmAmn3euXUpT3d9Z4G+4PRR+6PR9oigRqarPiT6ng4nBzRguCe0ZJEBatyqQGvkfw249VtiHTNSzdGZAddVESmW1YBDv5bSpoxBnOZkst7h6jISx5sCEltnJFp7KKkG3KNfPQvULluB2UMuR1zaBiXjB08+IJr4FQA9c3gDgNINKSDK4SCff67VjEsZEI+Cl3Scg3vwA4cU6uu0bRL3d4k3ZEDm3mAoY2YqdX7BvVsA2OJW9qlhUe+KQvObX1DYANS+2iIdHArR0bArgXfUBoAMoewopH9ROd3oBmcZiMkOANA3sXUq9mm5Pqrvq7IYXLo3Vs713ao7WRAZ8NULfTACRd0fdjtUcYyr1cIAAAAASUVORK5CYII=)}.spacing-case-tags{margin-bottom:10px}\n"], dependencies: [{ kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: i6$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i5.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "directive", type: i5.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i5.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$2.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: "component", type: i5.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i5.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "component", type: i2$2.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "directive", type: i2$2.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "component", type: i5.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class"] }, { kind: "component", type: i5.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i5.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "directive", type: i2$2.ValtimoCdsOverflowButtonDirective, selector: "[valtimoCdsOverflowButton]", inputs: ["width"] }, { kind: "component", type: DossierDetailTaskListComponent, selector: "valtimo-dossier-detail-task-list", inputs: ["openTaskAndProcessLinkInModal"], outputs: ["taskClickEvent", "formSubmitEvent"] }, { kind: "component", type: DossierDetailsTaskDetailComponent, selector: "valtimo-dossier-detail-task-detail", inputs: ["taskAndProcessLink"], outputs: ["closeEvent", "assignmentOfTaskChanged", "activeChange", "formSubmit"] }, { kind: "component", type: i17.SplitComponent, selector: "as-split", inputs: ["gutterSize", "gutterStep", "disabled", "gutterClickDeltaPx", "direction", "dir", "unit", "gutterAriaLabel", "restrictMove", "useTransition", "gutterDblClickDuration"], outputs: ["gutterClick", "gutterDblClick", "dragStart", "dragEnd", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "component", type: i17.SplitAreaComponent, selector: "as-split-area", inputs: ["size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "component", type: DossierSupportingProcessStartModalComponent, selector: "valtimo-dossier-supporting-process-start-modal", inputs: ["isAdmin"], outputs: ["formSubmit"] }, { kind: "component", type: DossierAssignUserComponent, selector: "valtimo-dossier-assign-user", inputs: ["documentId", "assigneeId", "assigneeFullName", "hasPermission"], outputs: ["assignmentOfDocumentChanged"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: TabTranslatePipe, name: "tabTranslate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DossierDetailComponent, selector: "valtimo-dossier-detail", providers: [DossierTabService, DossierDetailLayoutService, NotificationService], viewQueries: [{ propertyName: "supportingProcessStart", first: true, predicate: ["supportingProcessStartModal"], descendants: true }, { propertyName: "viewContainerRef", first: true, predicate: ["tabContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_tabContentContainer", first: true, predicate: ["tabContentContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<div\n  class=\"main-content\"\n  [ngClass]=\"{'main-content--no-horizontal-overflow': tabHorizontalOverflowDisabled()}\"\n>\n  <div class=\"container-fluid\">\n    <ng-container *ngIf=\"caseTags$ | async as caseTags\">\n      @if (caseTags && caseTags.length > 0) {\n        <div class=\"case-tags\">\n          @for (tag of caseTags; track tag) {\n            <cds-tag size=\"sm\" [type]=\"tag.tagType\">\n              {{ tag.title }}\n            </cds-tag>\n          }\n        </div>\n      }\n    </ng-container>\n\n    <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n\n    <ng-template #tabs>\n      <ng-container *ngIf=\"{activeTab: activeTab$ | async} as obs\">\n        <cds-tabs *ngIf=\"tabLoader\" type=\"inline\" class=\"case-detail-tabs\">\n          <cds-tab\n            *ngFor=\"let tab of tabLoader.tabs\"\n            [active]=\"tab.name === (activeTabName$ | async)\"\n            heading=\"{{ tab | tabTranslate | async }}\"\n            (selected)=\"onTabSelected(tab, obs.activeTab)\"\n          ></cds-tab>\n        </cds-tabs>\n      </ng-container>\n    </ng-template>\n    <div\n      #tabContentContainer\n      class=\"tab-content-container\"\n      [ngClass]=\"{\n        'tab-content-container--dark': isDarkMode$ | async,\n        'tab-content-container--compact': compactMode$ | async,\n      }\"\n      *ngIf=\"{\n        noTabsConfigured: noTabsConfigured$ | async,\n        showTaskList: showTaskList$ | async,\n        showNoAccess: showNoAccess$ | async,\n        dossierDetailLayout: dossierDetailLayout$ | async,\n        openTaskAndProcessLinkInModal: openTaskAndProcessLinkInModal$ | async,\n        taskAndProcessLinkOpenedInPanel: taskAndProcessLinkOpenedInPanel$ | async,\n      } as tabContentObs\"\n    >\n      <as-split\n        direction=\"horizontal\"\n        [disabled]=\"!tabContentObs.dossierDetailLayout.widthAdjustable\"\n        [gutterSize]=\"DOSSIER_DETAIL_GUTTER_SIZE\"\n        [unit]=\"tabContentObs.dossierDetailLayout.unit\"\n      >\n        <as-split-area\n          [size]=\"tabContentObs.dossierDetailLayout.leftPanelWidth\"\n          [minSize]=\"tabContentObs.dossierDetailLayout.leftPanelMinWidth\"\n          [maxSize]=\"tabContentObs.dossierDetailLayout.leftPanelMaxWidth\"\n        >\n          <div\n            class=\"card-body bg-white p-5 position-relative tab-container\"\n            [class.tab-container--compact]=\"compactMode$ | async\"\n          >\n            <div *ngIf=\"loadingTabs$ | async\" class=\"loading-container\">\n              <cds-loading></cds-loading>\n            </div>\n\n            <valtimo-no-results\n              *ngIf=\"tabContentObs.showNoAccess\"\n              description=\"{{ 'dossier.noAccess.description' | translate }}\"\n              title=\"{{ 'dossier.noAccess.title' | translate }}\"\n              illustration=\"valtimo-layout/img/emptystate-not-authorised.svg\"\n            >\n            </valtimo-no-results>\n\n            <valtimo-no-results\n              *ngIf=\"tabContentObs.noTabsConfigured\"\n              [description]=\"'dossier.tabs.noResultsDescription' | translate\"\n              [title]=\"'dossier.tabs.noResults' | translate\"\n            ></valtimo-no-results>\n\n            <ng-template #tabContainer></ng-template>\n\n            <div class=\"clearfix\"></div>\n          </div>\n        </as-split-area>\n\n        <as-split-area\n          *ngIf=\"tabContentObs.dossierDetailLayout.showRightPanel\"\n          [size]=\"tabContentObs.dossierDetailLayout.rightPanelWidth\"\n          [minSize]=\"tabContentObs.dossierDetailLayout.rightPanelMinWidth\"\n          [maxSize]=\"tabContentObs.dossierDetailLayout.rightPanelMaxWidth\"\n        >\n          @if (tabContentObs.showTaskList) {\n            <div class=\"task-panel\">\n              @if (!tabContentObs.taskAndProcessLinkOpenedInPanel) {\n                <valtimo-dossier-detail-task-list\n                  [openTaskAndProcessLinkInModal]=\"tabContentObs.openTaskAndProcessLinkInModal\"\n                  (taskClickEvent)=\"onTaskClickEvent($event)\"\n                  (formSubmitEvent)=\"onFormSubmitEvent()\"\n                ></valtimo-dossier-detail-task-list>\n              }\n\n              @if (tabContentObs.taskAndProcessLinkOpenedInPanel) {\n                <valtimo-dossier-detail-task-detail\n                  [taskAndProcessLink]=\"tabContentObs.taskAndProcessLinkOpenedInPanel\"\n                  (activeChange)=\"onActiveChangeEvent($event)\"\n                  (closeEvent)=\"onTaskDetailsClose()\"\n                  (formSubmit)=\"onFormSubmitEvent()\"\n                >\n                </valtimo-dossier-detail-task-detail>\n              }\n            </div>\n          }\n        </as-split-area>\n      </as-split>\n    </div>\n  </div>\n\n  <valtimo-dossier-supporting-process-start-modal\n    [isAdmin]=\"isAdmin$ | async\"\n    (formSubmit)=\"tabLoader.refreshView()\"\n    #supportingProcessStartModal\n  ></valtimo-dossier-supporting-process-start-modal>\n</div>\n\n<ng-template\n  #caseDetailHeader\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <div class=\"row\" *ngIf=\"(customDossierHeaderItems || []).length > 0\">\n    <span\n      *ngFor=\"let item of customDossierHeaderItems\"\n      [ngClass]=\"{\n        h1: item.textSize === 'xl',\n        h2: item.textSize === 'lg',\n        h3: item.textSize === 'md',\n        h4: item.textSize === 'sm',\n        h5: item.textSize === 'xs',\n      }\"\n      class=\"mb-0 mt-0 align-self-end col-xl-{{ item.columnSize }} col-lg-{{\n        item.columnSize * 2\n      }} {{ item.customClass }}\"\n    >\n      <span *ngIf=\"item.label\">{{ item.label | translate }}</span>\n\n      <span *ngIf=\"item.label && item.value\">: </span>\n\n      <strong>{{ item.value }}</strong>\n    </span>\n  </div>\n\n  <ng-container\n    *ngTemplateOutlet=\"\n      caseDetailAssignee;\n      context: {canHaveAssignee: canHaveAssignee, document: document, canAssign: canAssign}\n    \"\n  ></ng-container>\n</ng-template>\n\n<ng-template\n  #caseDetailAssignee\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <div *ngIf=\"canHaveAssignee && document\">\n    <valtimo-dossier-assign-user\n      *ngIf=\"canAssignLoaded$ | async\"\n      [assigneeFullName]=\"document?.assigneeFullName\"\n      [assigneeId]=\"document.assigneeId\"\n      [documentId]=\"document.id\"\n      [hasPermission]=\"canAssign\"\n      (assignmentOfDocumentChanged)=\"assignmentOfDocumentChanged()\"\n    ></valtimo-dossier-assign-user>\n  </div>\n</ng-template>\n\n<ng-template #claimButton let-canClaim=\"canClaim\" let-canHaveAssignee=\"canHaveAssignee\">\n  <cds-overflow-menu-option\n    *ngIf=\"canClaim && canHaveAssignee\"\n    [disabled]=\"(isAssigning$ | async) || (isAssignedToCurrentUser$ | async)\"\n    (click)=\"claimAssignee()\"\n  >\n    {{ 'dossier.claimAssigneeCase' | translate }}\n  </cds-overflow-menu-option>\n</ng-template>\n\n<ng-template #unassignButton let-canHaveAssignee=\"canHaveAssignee\" let-assigneeId=\"assigneeId\">\n  <cds-overflow-menu-option\n    *ngIf=\"canHaveAssignee\"\n    [disabled]=\"!assigneeId\"\n    (selected)=\"unassignAssignee()\"\n  >\n    {{ 'assignDocument.remove' | translate }}\n  </cds-overflow-menu-option>\n</ng-template>\n\n<ng-template #deleteButton let-canDelete=\"canDelete\">\n  <cds-overflow-menu-option\n    *ngIf=\"canDelete\"\n    [disabled]=\"isDeleting$ | async\"\n    (click)=\"deleteDocument()\"\n    type=\"danger\"\n  >\n    {{ 'dossier.delete.delete' | translate }}\n  </cds-overflow-menu-option>\n</ng-template>\n\n<ng-template #customStartTrigger>\n  <button\n    [size]=\"(compactMode$ | async) ? 'sm' : 'lg'\"\n    cdsButton=\"primary\"\n    [disabled]=\"processDocumentDefinitions.length === 0\"\n    [ngbTooltip]=\"processDocumentDefinitions.length === 0 ? 'No action' : null\"\n  >\n    {{ 'dossier.startSubProcess' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"chevron--down\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"dossier.delete.confirm\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"dossier.delete.description\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"dossier.delete.delete\"\n  (confirmEvent)=\"onConfirmDelete()\"\n></valtimo-confirmation-modal>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <div\n      class=\"dossier-actions\"\n      [ngClass]=\"{\n        'dossier-actions--compact': compactMode$ | async,\n        'dossier-actions--small-title': smallTitle$ | async,\n      }\"\n      *ngIf=\"{\n        assigneeId: assigneeId$ | async,\n        canAssign: canAssign$ | async,\n        canClaim: canClaim$ | async,\n        canHaveAssignee: canHaveAssignee$ | async,\n        canDelete: canDelete$ | async,\n        document: document$ | async,\n        caseStatus: caseStatus$ | async,\n      } as obs\"\n    >\n      <div\n        class=\"dossier-status-assign-custom-title\"\n        [ngClass]=\"{'--compact': compactMode$ | async}\"\n      >\n        @if (obs.caseStatus) {\n          <cds-tag size=\"sm\" [type]=\"obs.caseStatus.tagType\" [title]=\"obs.caseStatus.title\">{{\n            obs.caseStatus.title\n          }}</cds-tag>\n        }\n\n        <div class=\"dossier-assign-user\" [ngClass]=\"{'--compact': compactMode$ | async}\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              caseDetailAssignee;\n              context: {\n                canHaveAssignee: obs.canHaveAssignee,\n                document: obs.document,\n                canAssign: obs.canAssign,\n              }\n            \"\n          ></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"caseDetailHeader\"></ng-container>\n      </div>\n\n      <div class=\"buttons-container\">\n        <cds-overflow-menu\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n          *ngIf=\"obs.canHaveAssignee || obs.canDelete\"\n          flip=\"true\"\n          [offset]=\"(compactMode$ | async) ? {y: 48, x: -4} : {y: 48, x: 4}\"\n          class=\"overflow-button assign-overflow\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              claimButton;\n              context: {canClaim: obs.canClaim, canHaveAssignee: obs.canHaveAssignee}\n            \"\n          >\n          </ng-container>\n          <ng-container\n            *ngTemplateOutlet=\"\n              unassignButton;\n              context: {canHaveAssignee: obs.canHaveAssignee, assigneeId: obs.assigneeId}\n            \"\n          >\n          </ng-container>\n          <ng-container *ngTemplateOutlet=\"deleteButton; context: {canDelete: obs.canDelete}\">\n          </ng-container>\n        </cds-overflow-menu>\n\n        <cds-overflow-menu\n          valtimoCdsOverflowButton\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n          [width]=\"dropdownWidth$ | async\"\n          [customTrigger]=\"customStartTrigger\"\n          [offset]=\"{y: 48, x: 35}\"\n          class=\"overflow-button case-detail-overflow\"\n        >\n          <cds-overflow-menu-option\n            *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n            [attr.title]=\"processDocumentDefinition.displayName\"\n            (click)=\"startProcess(processDocumentDefinition)\"\n          >\n            {{ processDocumentDefinition.displayName }}\n          </cds-overflow-menu-option>\n        </cds-overflow-menu>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".main-content{overflow:hidden;padding-bottom:0}.main-content--no-horizontal-overflow{overflow-x:hidden}.tab-container{height:min-content;min-height:300px;overflow-y:auto;max-height:calc(100vh - 226px);overflow-x:hidden}.tab-container--compact{max-height:calc(100vh - 176px)}.tab-container:has(>.tab--no-margin){padding:0!important}.tab-container:has(>.tab--no-min-height){min-height:unset}.tab-container:has(>.tab--no-background){background:transparent!important}.tab-content-container{overflow:hidden;display:flex;gap:32px;overflow:auto;margin-bottom:16px;max-height:calc(100vh - 226px)}.tab-content-container--compact{max-height:calc(100vh - 176px)}.loading-container{display:flex;justify-content:center;flex-direction:row}.dossier-detail-page-header{display:flex;width:100%;justify-content:flex-start;padding-bottom:5px}.dossier-detail-page-header ::ng-deep .cds--tag{margin:0}.case-detail-tabs{display:flex;margin-bottom:24px}.case-detail-tabs cds-tab{display:none!important}.cds--overflow-menu-options{margin-top:32px}.assign-overflow{margin-right:8px}.buttons-container{display:flex;flex-direction:row}.dossier-actions{display:flex;width:100%;justify-content:space-between;align-items:flex-end;padding-bottom:4px}.dossier-actions--compact,.dossier-actions--small-title{padding-bottom:0;align-items:flex-start}.dossier-actions ::ng-deep .version-selection{width:160px}.dossier-actions ::ng-deep .version-selection .cds--list-box__selection{display:none}.dossier-status-assign-custom-title{display:flex;gap:16px;align-items:flex-end}.dossier-status-assign-custom-title .cds--tag{margin:0;overflow:hidden;text-overflow:ellipsis;line-height:24px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:100%}.dossier-status-assign-custom-title.--compact{align-items:center}.task-panel{width:100%;transition:height .15s ease-in-out}:host ::ng-deep .container-fluid{height:100%!important;width:100%!important;margin:0!important;padding:0!important}::ng-deep .tab-content-container .as-split-gutter{background-color:transparent!important;--_as-gutter-icon-disabled: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAgEBAYcDngAAAAAASUVORK5CYII=);--_as-gutter-icon-horizontal: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABQJJREFUeF7dWll22zAMpNwzlM5xmpMlOVl6mzrKHexWm8UFy4xIp+/FP3mxQWAwWAiRGsJ3/gwhhJvt4CRCfgCtosYhDOHm4SlW7rZyq9t/R7GsZoYQDhCA89UIrzakKuQtpRTiHv03ycJB3t8KuU9AByNfw5dWJpj1h5YABmGRsvgufzsSG21NEwGWUrv5yiuZb31yMZoAAjBFPqBdor9G0vpwu2+PBgE6TK/q0pUxxiwZxnE0SefkE0sHWQUygGG3ll0c2tGNn+M0DiSfHDlHQBu2rffoWgBWPRHWIUreM654li5bMwDQBIhI9naHFgVQCSS2PHliWlLm0/YsMrcwK6ISp1QGANhzG7XFDj2gUFr8yzrkydOJ6CyACBB1lIWkbPyeQ2UQ2ZKxksCLft4EaWqB/AshHCdg0b/1gB7wJB1QBrQ0ml4E2MMyFgxJ6iABuEGdgCUeZVQm+fQ7fhfAsflzAKFLS1G2ptmMwUpDl1oyAGxo2fw2hHBzjpsm+XiO2TGQF1GWACJGfecAjHmgCTZum/lQfezQTZ3L7z+g3goc2xGtFT86A0qLh5pgjPF13aLmv9aHdYiVn8uMwFNixQlYqVuNvayK3sZxNElgHarlP6duo2bpOcbXWxheVhkTj7Tv4ATsTG/OL6CG8DZ+KCQMIcSf6HnAAo8hrAjGRpIblLxveDm8/q4YC6fT6flyufzWBhXGoTWd4QOUp6enX9fr9X2od6SFhJlTu4FBGZA5n+jbnddZjPG8nz8lo222ItHJEraRICAAMmG6rPGb2FTjedqHsET+4/Lbu+phHWLlJ/g+Cd4gpJDgp71HHzAHFCqOEFCSULjrNkaxw2rO/zidnv/MNY99WIcY+TKufibUmOcSEB5IxLTHXLal2FG4h83VPzET1h6wUxDP8fXfJW5V8xuQhqFwVtGNgDuQ6Yo367Pb9ixdjVckVE1QS/0ekZhybRw/zMZblkBpd1sMPIdJkAsClF2ghQQPYJYBQjp5BKCBEHD4JZDi6bED3AebRDFbAp58Ski3JrgphQcgozEwXZ2dBH3nZ2Bq5KcyahuEgO1wIWBnyIuoS5hA9pHIp01dnANSdlvKwXWocRC6Pw/U70MBozCQAWI5JKDF5wFrtk8uR6XKYQibnL9dr+/CjgA5v81AamMFByTTmOhQp56hPw5/vrrvx61euz2gZKfHgcj98bUkgjo/WJCxeMrJFyQgR8ocQcGnwqsJpgSK8pymTPeIThus4DKwBKWJFNsFklEcOT9ApyFADswAQJMiwkaUldeQ7ZTKDWf79tsSgIasDwGduro1CbY+hVqZgpJ1SA5L6bQHMJNjOy19MsCgBiNgV8DK+1GxSXoYAcMwhNttOedPIZTPAhm8bQ6Anx57ZMBGgfHuXs6yuEANBBtR/2bIjzkj8bAMSIYU+KLDaoKSU8KFCOP7LAsTcDTZ2jPAfrUWf3VGnwdo1pgF5xiz9yhazwOExwfv9suEm2XArJwNtSP/+AxgwlHL1iVwiAUdhEaAxhtLWGbZDEbPEiCyhHWIla93KO7AvMoAwre7bW5jxCAfwaHnoa4N3gVU5X2RthX0gdVNBPhDZnYgzMH7ImKbCOA8wnfsVO+jeUgIEHfYFUs7jHYNLN2YvJkBXwYaNuQIwnp2cgoCag3LN1Z2+EwfwCVPLPAOJ1n05oDt9x5oRR37Pb72s/e+kU81L/EXSRwjcUdkvjUAAAAASUVORK5CYII=)}::ng-deep .tab-content-container .as-split-gutter-icon{background-repeat:no-repeat;background-size:16px 16px}::ng-deep .tab-content-container--dark .as-split-gutter{--_as-gutter-icon-horizontal: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABPlJREFUeF7tm1tW3DAMhu2+krCmdmWlKytrIuGV9HjixDddfjkOtOd0XmAGWZfPsiw7g3fVyzvntvpD9H01+JIuwCamX5YKf9VfmCVaDze2S2fXIDG+CGC8YsrqMCvDFDmHZYCeI5gE6LietD2LlNb6uQAQTLWfCDTLmLpOIfoRvxEZydZn+pH7+vdlAEJyoIwIwDIrFtk7C2TyA/Po9gxY1zVWrN2haZq85FqS3zEF+YET3qi6rFzjfAR0yGkBwQA0wyFU75zf5MaOBYDoR2YGDigqY+U7HOKHlAsFiQOXqax+JYCYBGJr32ZAB+lEpxwc3i1nDcDWtBUYPjN8p35VBxf/4/MQUI7lqAGPzwjYBQDv3PQ0+Ue/CjV/sODp8+UiyNE7XLHO6EM+Dg4/ntBdAI69zdIqBlgTlDldADLN9a7R551cDot0kDPNbn40AIh6LSS4DS0Be9jJg7sAXPHJfBZojbXriMscGgDvvhUYmRGEes6iocJiyVejWdelYDPNk5cquhnAxVSAlgDZQG/7bUqKjvZEDqgdYwaAzQsrVQHowFkPqd5bA4LlO1ytp+zoFM0Ml2V5CYPmeX78lF7v67rla8B6GpynKZxnxBfmD03MvASCMe/9z+DRtm2/SAiZLXRGqcapbYTaICB/BHwggN1wbuzQSUHI3UQBHPqo+wPO/7dlefkWJ0PyR0ofEIAjg49Z8GOe51fOCAYgIcPkd2vLsnz33v+ubadJ0TZw8Fqcmnkk+CBjCahHXodQ49mhHGjUDJCDf37Vjmn54Sa4MuxGaL/weWzDdggJigjgDL7KpG3bxLTPmY/PALqa90JgAahpf/ohb8jjAfAlrQdCCSDG0gRPxCiHzf81XwKUVA1M7gDwbojbspsM4GZea3jov5cFp6cGoHYRFCWE5FthQwKAGCnLS9vD6UXwXbnIRpGUcsH3D6JxI2sADwFHwEnqAI4HKW0AB07ci6QDXgLHELUIghPxbxRBBukICDuAZMCaAbu8XnLf1K4wzBjdGYpzSUGI66ntBQg/8QzYB+PyyW18++sAEHvu8wSY02IbosyONaBTPj7XO6/F+SxVzgPKRooWlN7l0A0g+i0tGXrmvdu2D/qYTrBgO0GKG3ocRlrhB/jm6a13zR2i8GAk+BOOw/lmy95RMIlgAlAvh4ex5/ll5CUndYMkJfGNFyL84sCuoHa3tSVQW9HkGxjeueUNv6Krx7dbTO5R/J1FARSQ9X3d8gyh13RSZAYA9iOcmHkJWO1ZA+LkRdbaRAlO3wogKL/+/YDZl5cuFQogC/P4k/j+mx0AYVDyYVQGWDMPlbcDQDVHOREA1DmGDAgv7emA0bEofgmAmn3euXUpT3d9Z4G+4PRR+6PR9oigRqarPiT6ng4nBzRguCe0ZJEBatyqQGvkfw249VtiHTNSzdGZAddVESmW1YBDv5bSpoxBnOZkst7h6jISx5sCEltnJFp7KKkG3KNfPQvULluB2UMuR1zaBiXjB08+IJr4FQA9c3gDgNINKSDK4SCff67VjEsZEI+Cl3Scg3vwA4cU6uu0bRL3d4k3ZEDm3mAoY2YqdX7BvVsA2OJW9qlhUe+KQvObX1DYANS+2iIdHArR0bArgXfUBoAMoewopH9ROd3oBmcZiMkOANA3sXUq9mm5Pqrvq7IYXLo3Vs713ao7WRAZ8NULfTACRd0fdjtUcYyr1cIAAAAASUVORK5CYII=)}.case-tags{margin-bottom:16px}\n"], dependencies: [{ kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: i6$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i5.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "directive", type: i5.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i5.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$2.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: "component", type: i5.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i5.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "component", type: i2$2.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "directive", type: i2$2.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "component", type: i5.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class"] }, { kind: "component", type: i5.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i5.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "directive", type: i2$2.ValtimoCdsOverflowButtonDirective, selector: "[valtimoCdsOverflowButton]", inputs: ["width"] }, { kind: "component", type: DossierDetailTaskListComponent, selector: "valtimo-dossier-detail-task-list", inputs: ["openTaskAndProcessLinkInModal"], outputs: ["taskClickEvent", "formSubmitEvent"] }, { kind: "component", type: DossierDetailsTaskDetailComponent, selector: "valtimo-dossier-detail-task-detail", inputs: ["taskAndProcessLink"], outputs: ["closeEvent", "assignmentOfTaskChanged", "activeChange", "formSubmit"] }, { kind: "component", type: i17.SplitComponent, selector: "as-split", inputs: ["gutterSize", "gutterStep", "disabled", "gutterClickDeltaPx", "direction", "dir", "unit", "gutterAriaLabel", "restrictMove", "useTransition", "gutterDblClickDuration"], outputs: ["gutterClick", "gutterDblClick", "dragStart", "dragEnd", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "component", type: i17.SplitAreaComponent, selector: "as-split-area", inputs: ["size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "component", type: DossierSupportingProcessStartModalComponent, selector: "valtimo-dossier-supporting-process-start-modal", inputs: ["isAdmin"], outputs: ["formSubmit"] }, { kind: "component", type: DossierAssignUserComponent, selector: "valtimo-dossier-assign-user", inputs: ["documentId", "assigneeId", "assigneeFullName", "hasPermission"], outputs: ["assignmentOfDocumentChanged"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: TabTranslatePipe, name: "tabTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-detail', providers: [DossierTabService, DossierDetailLayoutService, NotificationService], template: "<!--\n  ~ Copyright 2015-2024 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<div\n  class=\"main-content\"\n  [ngClass]=\"{'main-content--no-horizontal-overflow': tabHorizontalOverflowDisabled()}\"\n>\n  <div class=\"container-fluid\">\n    <ng-container *ngIf=\"caseTags$ | async as caseTags\">\n      @if (caseTags && caseTags.length > 0) {\n        <div class=\"spacing-case-tags\">\n          @for (tag of caseTags; track tag) {\n            <cds-tag size=\"sm\" [type]=\"tag.tagType\">\n              {{ tag.title }}\n            </cds-tag>\n          }\n        </div>\n      }\n    </ng-container>\n\n    <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n\n    <ng-template #tabs>\n      <ng-container *ngIf=\"{activeTab: activeTab$ | async} as obs\">\n        <cds-tabs *ngIf=\"tabLoader\" type=\"inline\" class=\"case-detail-tabs\">\n          <cds-tab\n            *ngFor=\"let tab of tabLoader.tabs\"\n            [active]=\"tab.name === (activeTabName$ | async)\"\n            heading=\"{{ tab | tabTranslate | async }}\"\n            (selected)=\"onTabSelected(tab, obs.activeTab)\"\n          ></cds-tab>\n        </cds-tabs>\n      </ng-container>\n    </ng-template>\n    <div\n      #tabContentContainer\n      class=\"tab-content-container\"\n      [ngClass]=\"{\n        'tab-content-container--dark': isDarkMode$ | async,\n        'tab-content-container--compact': compactMode$ | async,\n      }\"\n      *ngIf=\"{\n        noTabsConfigured: noTabsConfigured$ | async,\n        showTaskList: showTaskList$ | async,\n        showNoAccess: showNoAccess$ | async,\n        dossierDetailLayout: dossierDetailLayout$ | async,\n        openTaskAndProcessLinkInModal: openTaskAndProcessLinkInModal$ | async,\n        taskAndProcessLinkOpenedInPanel: taskAndProcessLinkOpenedInPanel$ | async,\n      } as tabContentObs\"\n    >\n      <as-split\n        direction=\"horizontal\"\n        [disabled]=\"!tabContentObs.dossierDetailLayout.widthAdjustable\"\n        [gutterSize]=\"DOSSIER_DETAIL_GUTTER_SIZE\"\n        [unit]=\"tabContentObs.dossierDetailLayout.unit\"\n      >\n        <as-split-area\n          [size]=\"tabContentObs.dossierDetailLayout.leftPanelWidth\"\n          [minSize]=\"tabContentObs.dossierDetailLayout.leftPanelMinWidth\"\n          [maxSize]=\"tabContentObs.dossierDetailLayout.leftPanelMaxWidth\"\n        >\n          <div\n            class=\"card-body bg-white p-5 position-relative tab-container\"\n            [class.tab-container--compact]=\"compactMode$ | async\"\n          >\n            <div *ngIf=\"loadingTabs$ | async\" class=\"loading-container\">\n              <cds-loading></cds-loading>\n            </div>\n\n            <valtimo-no-results\n              *ngIf=\"tabContentObs.showNoAccess\"\n              description=\"{{ 'dossier.noAccess.description' | translate }}\"\n              title=\"{{ 'dossier.noAccess.title' | translate }}\"\n              illustration=\"valtimo-layout/img/emptystate-not-authorised.svg\"\n            >\n            </valtimo-no-results>\n\n            <valtimo-no-results\n              *ngIf=\"tabContentObs.noTabsConfigured\"\n              [description]=\"'dossier.tabs.noResultsDescription' | translate\"\n              [title]=\"'dossier.tabs.noResults' | translate\"\n            ></valtimo-no-results>\n\n            <ng-template #tabContainer></ng-template>\n\n            <div class=\"clearfix\"></div>\n          </div>\n        </as-split-area>\n\n        <as-split-area\n          *ngIf=\"tabContentObs.dossierDetailLayout.showRightPanel\"\n          [size]=\"tabContentObs.dossierDetailLayout.rightPanelWidth\"\n          [minSize]=\"tabContentObs.dossierDetailLayout.rightPanelMinWidth\"\n          [maxSize]=\"tabContentObs.dossierDetailLayout.rightPanelMaxWidth\"\n        >\n          @if (tabContentObs.showTaskList) {\n            <div class=\"task-panel\">\n              @if (!tabContentObs.taskAndProcessLinkOpenedInPanel) {\n                <valtimo-dossier-detail-task-list\n                  [openTaskAndProcessLinkInModal]=\"tabContentObs.openTaskAndProcessLinkInModal\"\n                  (taskClickEvent)=\"onTaskClickEvent($event)\"\n                  (formSubmitEvent)=\"onFormSubmitEvent()\"\n                ></valtimo-dossier-detail-task-list>\n              }\n\n              @if (tabContentObs.taskAndProcessLinkOpenedInPanel) {\n                <valtimo-dossier-detail-task-detail\n                  [taskAndProcessLink]=\"tabContentObs.taskAndProcessLinkOpenedInPanel\"\n                  (activeChange)=\"onActiveChangeEvent($event)\"\n                  (closeEvent)=\"onTaskDetailsClose()\"\n                  (formSubmit)=\"onFormSubmitEvent()\"\n                >\n                </valtimo-dossier-detail-task-detail>\n              }\n            </div>\n          }\n        </as-split-area>\n      </as-split>\n    </div>\n  </div>\n\n  <valtimo-dossier-supporting-process-start-modal\n    [isAdmin]=\"isAdmin$ | async\"\n    (formSubmit)=\"tabLoader.refreshView()\"\n    #supportingProcessStartModal\n  ></valtimo-dossier-supporting-process-start-modal>\n</div>\n\n<ng-template\n  #caseDetailHeader\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <div class=\"row\" *ngIf=\"(customDossierHeaderItems || []).length > 0\">\n    <span\n      *ngFor=\"let item of customDossierHeaderItems\"\n      [ngClass]=\"{\n        h1: item.textSize === 'xl',\n        h2: item.textSize === 'lg',\n        h3: item.textSize === 'md',\n        h4: item.textSize === 'sm',\n        h5: item.textSize === 'xs',\n      }\"\n      class=\"mb-0 mt-0 align-self-end col-xl-{{ item.columnSize }} col-lg-{{\n        item.columnSize * 2\n      }} {{ item.customClass }}\"\n    >\n      <span *ngIf=\"item.label\">{{ item.label | translate }}</span>\n\n      <span *ngIf=\"item.label && item.value\">: </span>\n\n      <strong>{{ item.value }}</strong>\n    </span>\n  </div>\n\n  <ng-container\n    *ngTemplateOutlet=\"\n      caseDetailAssignee;\n      context: {canHaveAssignee: canHaveAssignee, document: document, canAssign: canAssign}\n    \"\n  ></ng-container>\n</ng-template>\n\n<ng-template\n  #caseDetailAssignee\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <div *ngIf=\"canHaveAssignee && document\">\n    <valtimo-dossier-assign-user\n      *ngIf=\"canAssignLoaded$ | async\"\n      [assigneeFullName]=\"document?.assigneeFullName\"\n      [assigneeId]=\"document.assigneeId\"\n      [documentId]=\"document.id\"\n      [hasPermission]=\"canAssign\"\n      (assignmentOfDocumentChanged)=\"assignmentOfDocumentChanged()\"\n    ></valtimo-dossier-assign-user>\n  </div>\n</ng-template>\n\n<ng-template #claimButton let-canClaim=\"canClaim\" let-canHaveAssignee=\"canHaveAssignee\">\n  <cds-overflow-menu-option\n    *ngIf=\"canClaim && canHaveAssignee\"\n    [disabled]=\"(isAssigning$ | async) || (isAssignedToCurrentUser$ | async)\"\n    (click)=\"claimAssignee()\"\n  >\n    {{ 'dossier.claimAssigneeCase' | translate }}\n  </cds-overflow-menu-option>\n</ng-template>\n\n<ng-template #unassignButton let-canHaveAssignee=\"canHaveAssignee\" let-assigneeId=\"assigneeId\">\n  <cds-overflow-menu-option\n    *ngIf=\"canHaveAssignee\"\n    [disabled]=\"!assigneeId\"\n    (selected)=\"unassignAssignee()\"\n  >\n    {{ 'assignDocument.remove' | translate }}\n  </cds-overflow-menu-option>\n</ng-template>\n\n<ng-template #deleteButton let-canDelete=\"canDelete\">\n  <cds-overflow-menu-option\n    *ngIf=\"canDelete\"\n    [disabled]=\"isDeleting$ | async\"\n    (click)=\"deleteDocument()\"\n    type=\"danger\"\n  >\n    {{ 'dossier.delete.delete' | translate }}\n  </cds-overflow-menu-option>\n</ng-template>\n\n<ng-template #customStartTrigger>\n  <button\n    [size]=\"(compactMode$ | async) ? 'sm' : 'lg'\"\n    cdsButton=\"primary\"\n    [disabled]=\"processDocumentDefinitions.length === 0\"\n    [ngbTooltip]=\"processDocumentDefinitions.length === 0 ? 'No action' : null\"\n  >\n    {{ 'dossier.startSubProcess' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"chevron--down\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"dossier.delete.confirm\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"dossier.delete.description\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"dossier.delete.delete\"\n  (confirmEvent)=\"onConfirmDelete()\"\n></valtimo-confirmation-modal>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <div\n      class=\"dossier-actions\"\n      [ngClass]=\"{'--compact': compactMode$ | async}\"\n      *ngIf=\"{\n        assigneeId: assigneeId$ | async,\n        canAssign: canAssign$ | async,\n        canClaim: canClaim$ | async,\n        canHaveAssignee: canHaveAssignee$ | async,\n        canDelete: canDelete$ | async,\n        document: document$ | async,\n        caseStatus: caseStatus$ | async,\n      } as obs\"\n    >\n      <div\n        class=\"dossier-status-assign-custom-title\"\n        [ngClass]=\"{'--compact': compactMode$ | async}\"\n      >\n        @if (obs.caseStatus) {\n          <cds-tag size=\"sm\" [type]=\"obs.caseStatus.tagType\" [title]=\"obs.caseStatus.title\">{{\n            obs.caseStatus.title\n          }}</cds-tag>\n        }\n\n        <div class=\"dossier-assign-user\" [ngClass]=\"{'--compact': compactMode$ | async}\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              caseDetailAssignee;\n              context: {\n                canHaveAssignee: obs.canHaveAssignee,\n                document: obs.document,\n                canAssign: obs.canAssign,\n              }\n            \"\n          ></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"caseDetailHeader\"></ng-container>\n      </div>\n\n      <div class=\"buttons-container\">\n        <cds-overflow-menu\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n          *ngIf=\"obs.canHaveAssignee || obs.canDelete\"\n          flip=\"true\"\n          [offset]=\"(compactMode$ | async) ? {y: 48, x: -4} : {y: 48, x: 4}\"\n          class=\"overflow-button assign-overflow\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              claimButton;\n              context: {canClaim: obs.canClaim, canHaveAssignee: obs.canHaveAssignee}\n            \"\n          >\n          </ng-container>\n          <ng-container\n            *ngTemplateOutlet=\"\n              unassignButton;\n              context: {canHaveAssignee: obs.canHaveAssignee, assigneeId: obs.assigneeId}\n            \"\n          >\n          </ng-container>\n          <ng-container *ngTemplateOutlet=\"deleteButton; context: {canDelete: obs.canDelete}\">\n          </ng-container>\n        </cds-overflow-menu>\n\n        <cds-overflow-menu\n          valtimoCdsOverflowButton\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n          [width]=\"dropdownWidth$ | async\"\n          [customTrigger]=\"customStartTrigger\"\n          [offset]=\"{y: 48, x: 35}\"\n          class=\"overflow-button case-detail-overflow\"\n        >\n          <cds-overflow-menu-option\n            *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n            [attr.title]=\"processDocumentDefinition.displayName\"\n            (click)=\"startProcess(processDocumentDefinition)\"\n          >\n            {{ processDocumentDefinition.displayName }}\n          </cds-overflow-menu-option>\n        </cds-overflow-menu>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".main-content{overflow:hidden;padding-bottom:0}.main-content--no-horizontal-overflow{overflow-x:hidden}.tab-container{height:min-content;min-height:300px;overflow-y:auto;max-height:calc(100vh - 226px);overflow-x:hidden}.tab-container--compact{max-height:calc(100vh - 176px)}.tab-container:has(>.tab--no-margin){padding:0!important}.tab-container:has(>.tab--no-min-height){min-height:unset}.tab-container:has(>.tab--no-background){background:transparent!important}.tab-content-container{overflow:hidden;display:flex;gap:32px;overflow:auto;margin-bottom:16px;max-height:calc(100vh - 226px)}.tab-content-container--compact{max-height:calc(100vh - 176px)}.loading-container{display:flex;justify-content:center;flex-direction:row}.dossier-detail-page-header{display:flex;width:100%;justify-content:flex-start;padding-bottom:5px}.dossier-detail-page-header ::ng-deep .cds--tag{margin:0}.case-detail-tabs{display:flex;margin-bottom:24px}.case-detail-tabs cds-tab{display:none!important}.cds--overflow-menu-options{margin-top:32px}.assign-overflow{margin-right:8px}.buttons-container{display:flex;flex-direction:row}.dossier-actions{display:flex;width:100%;justify-content:space-between;align-items:flex-end;padding-bottom:4px}.dossier-actions.--compact{padding-bottom:0;align-items:flex-start}.dossier-actions ::ng-deep .version-selection{width:160px}.dossier-actions ::ng-deep .version-selection .cds--list-box__selection{display:none}.dossier-status-assign-custom-title{display:flex;gap:16px;align-items:flex-end}.dossier-status-assign-custom-title .cds--tag{margin:0;overflow:hidden;text-overflow:ellipsis;line-height:24px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:100%}.dossier-status-assign-custom-title.--compact{align-items:center}.task-panel{width:100%;transition:height .15s ease-in-out}:host ::ng-deep .container-fluid{height:100%!important;width:100%!important;margin:0!important;padding:0!important}::ng-deep .tab-content-container .as-split-gutter{background-color:transparent!important;--_as-gutter-icon-disabled: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAgEBAYcDngAAAAAASUVORK5CYII=);--_as-gutter-icon-horizontal: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABQJJREFUeF7dWll22zAMpNwzlM5xmpMlOVl6mzrKHexWm8UFy4xIp+/FP3mxQWAwWAiRGsJ3/gwhhJvt4CRCfgCtosYhDOHm4SlW7rZyq9t/R7GsZoYQDhCA89UIrzakKuQtpRTiHv03ycJB3t8KuU9AByNfw5dWJpj1h5YABmGRsvgufzsSG21NEwGWUrv5yiuZb31yMZoAAjBFPqBdor9G0vpwu2+PBgE6TK/q0pUxxiwZxnE0SefkE0sHWQUygGG3ll0c2tGNn+M0DiSfHDlHQBu2rffoWgBWPRHWIUreM654li5bMwDQBIhI9naHFgVQCSS2PHliWlLm0/YsMrcwK6ISp1QGANhzG7XFDj2gUFr8yzrkydOJ6CyACBB1lIWkbPyeQ2UQ2ZKxksCLft4EaWqB/AshHCdg0b/1gB7wJB1QBrQ0ml4E2MMyFgxJ6iABuEGdgCUeZVQm+fQ7fhfAsflzAKFLS1G2ptmMwUpDl1oyAGxo2fw2hHBzjpsm+XiO2TGQF1GWACJGfecAjHmgCTZum/lQfezQTZ3L7z+g3goc2xGtFT86A0qLh5pgjPF13aLmv9aHdYiVn8uMwFNixQlYqVuNvayK3sZxNElgHarlP6duo2bpOcbXWxheVhkTj7Tv4ATsTG/OL6CG8DZ+KCQMIcSf6HnAAo8hrAjGRpIblLxveDm8/q4YC6fT6flyufzWBhXGoTWd4QOUp6enX9fr9X2od6SFhJlTu4FBGZA5n+jbnddZjPG8nz8lo222ItHJEraRICAAMmG6rPGb2FTjedqHsET+4/Lbu+phHWLlJ/g+Cd4gpJDgp71HHzAHFCqOEFCSULjrNkaxw2rO/zidnv/MNY99WIcY+TKufibUmOcSEB5IxLTHXLal2FG4h83VPzET1h6wUxDP8fXfJW5V8xuQhqFwVtGNgDuQ6Yo367Pb9ixdjVckVE1QS/0ekZhybRw/zMZblkBpd1sMPIdJkAsClF2ghQQPYJYBQjp5BKCBEHD4JZDi6bED3AebRDFbAp58Ski3JrgphQcgozEwXZ2dBH3nZ2Bq5KcyahuEgO1wIWBnyIuoS5hA9pHIp01dnANSdlvKwXWocRC6Pw/U70MBozCQAWI5JKDF5wFrtk8uR6XKYQibnL9dr+/CjgA5v81AamMFByTTmOhQp56hPw5/vrrvx61euz2gZKfHgcj98bUkgjo/WJCxeMrJFyQgR8ocQcGnwqsJpgSK8pymTPeIThus4DKwBKWJFNsFklEcOT9ApyFADswAQJMiwkaUldeQ7ZTKDWf79tsSgIasDwGduro1CbY+hVqZgpJ1SA5L6bQHMJNjOy19MsCgBiNgV8DK+1GxSXoYAcMwhNttOedPIZTPAhm8bQ6Anx57ZMBGgfHuXs6yuEANBBtR/2bIjzkj8bAMSIYU+KLDaoKSU8KFCOP7LAsTcDTZ2jPAfrUWf3VGnwdo1pgF5xiz9yhazwOExwfv9suEm2XArJwNtSP/+AxgwlHL1iVwiAUdhEaAxhtLWGbZDEbPEiCyhHWIla93KO7AvMoAwre7bW5jxCAfwaHnoa4N3gVU5X2RthX0gdVNBPhDZnYgzMH7ImKbCOA8wnfsVO+jeUgIEHfYFUs7jHYNLN2YvJkBXwYaNuQIwnp2cgoCag3LN1Z2+EwfwCVPLPAOJ1n05oDt9x5oRR37Pb72s/e+kU81L/EXSRwjcUdkvjUAAAAASUVORK5CYII=)}::ng-deep .tab-content-container .as-split-gutter-icon{background-repeat:no-repeat;background-size:16px 16px}::ng-deep .tab-content-container--dark .as-split-gutter{--_as-gutter-icon-horizontal: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABPlJREFUeF7tm1tW3DAMhu2+krCmdmWlKytrIuGV9HjixDddfjkOtOd0XmAGWZfPsiw7g3fVyzvntvpD9H01+JIuwCamX5YKf9VfmCVaDze2S2fXIDG+CGC8YsrqMCvDFDmHZYCeI5gE6LietD2LlNb6uQAQTLWfCDTLmLpOIfoRvxEZydZn+pH7+vdlAEJyoIwIwDIrFtk7C2TyA/Po9gxY1zVWrN2haZq85FqS3zEF+YET3qi6rFzjfAR0yGkBwQA0wyFU75zf5MaOBYDoR2YGDigqY+U7HOKHlAsFiQOXqax+JYCYBGJr32ZAB+lEpxwc3i1nDcDWtBUYPjN8p35VBxf/4/MQUI7lqAGPzwjYBQDv3PQ0+Ue/CjV/sODp8+UiyNE7XLHO6EM+Dg4/ntBdAI69zdIqBlgTlDldADLN9a7R551cDot0kDPNbn40AIh6LSS4DS0Be9jJg7sAXPHJfBZojbXriMscGgDvvhUYmRGEes6iocJiyVejWdelYDPNk5cquhnAxVSAlgDZQG/7bUqKjvZEDqgdYwaAzQsrVQHowFkPqd5bA4LlO1ytp+zoFM0Ml2V5CYPmeX78lF7v67rla8B6GpynKZxnxBfmD03MvASCMe/9z+DRtm2/SAiZLXRGqcapbYTaICB/BHwggN1wbuzQSUHI3UQBHPqo+wPO/7dlefkWJ0PyR0ofEIAjg49Z8GOe51fOCAYgIcPkd2vLsnz33v+ubadJ0TZw8Fqcmnkk+CBjCahHXodQ49mhHGjUDJCDf37Vjmn54Sa4MuxGaL/weWzDdggJigjgDL7KpG3bxLTPmY/PALqa90JgAahpf/ohb8jjAfAlrQdCCSDG0gRPxCiHzf81XwKUVA1M7gDwbojbspsM4GZea3jov5cFp6cGoHYRFCWE5FthQwKAGCnLS9vD6UXwXbnIRpGUcsH3D6JxI2sADwFHwEnqAI4HKW0AB07ci6QDXgLHELUIghPxbxRBBukICDuAZMCaAbu8XnLf1K4wzBjdGYpzSUGI66ntBQg/8QzYB+PyyW18++sAEHvu8wSY02IbosyONaBTPj7XO6/F+SxVzgPKRooWlN7l0A0g+i0tGXrmvdu2D/qYTrBgO0GKG3ocRlrhB/jm6a13zR2i8GAk+BOOw/lmy95RMIlgAlAvh4ex5/ll5CUndYMkJfGNFyL84sCuoHa3tSVQW9HkGxjeueUNv6Krx7dbTO5R/J1FARSQ9X3d8gyh13RSZAYA9iOcmHkJWO1ZA+LkRdbaRAlO3wogKL/+/YDZl5cuFQogC/P4k/j+mx0AYVDyYVQGWDMPlbcDQDVHOREA1DmGDAgv7emA0bEofgmAmn3euXUpT3d9Z4G+4PRR+6PR9oigRqarPiT6ng4nBzRguCe0ZJEBatyqQGvkfw249VtiHTNSzdGZAddVESmW1YBDv5bSpoxBnOZkst7h6jISx5sCEltnJFp7KKkG3KNfPQvULluB2UMuR1zaBiXjB08+IJr4FQA9c3gDgNINKSDK4SCff67VjEsZEI+Cl3Scg3vwA4cU6uu0bRL3d4k3ZEDm3mAoY2YqdX7BvVsA2OJW9qlhUe+KQvObX1DYANS+2iIdHArR0bArgXfUBoAMoewopH9ROd3oBmcZiMkOANA3sXUq9mm5Pqrvq7IYXLo3Vs713ao7WRAZ8NULfTACRd0fdjtUcYyr1cIAAAAASUVORK5CYII=)}.spacing-case-tags{margin-bottom:10px}\n"] }]
+            args: [{ selector: 'valtimo-dossier-detail', providers: [DossierTabService, DossierDetailLayoutService, NotificationService], template: "<!--\n  ~ Copyright 2015-2024 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<div\n  class=\"main-content\"\n  [ngClass]=\"{'main-content--no-horizontal-overflow': tabHorizontalOverflowDisabled()}\"\n>\n  <div class=\"container-fluid\">\n    <ng-container *ngIf=\"caseTags$ | async as caseTags\">\n      @if (caseTags && caseTags.length > 0) {\n        <div class=\"case-tags\">\n          @for (tag of caseTags; track tag) {\n            <cds-tag size=\"sm\" [type]=\"tag.tagType\">\n              {{ tag.title }}\n            </cds-tag>\n          }\n        </div>\n      }\n    </ng-container>\n\n    <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n\n    <ng-template #tabs>\n      <ng-container *ngIf=\"{activeTab: activeTab$ | async} as obs\">\n        <cds-tabs *ngIf=\"tabLoader\" type=\"inline\" class=\"case-detail-tabs\">\n          <cds-tab\n            *ngFor=\"let tab of tabLoader.tabs\"\n            [active]=\"tab.name === (activeTabName$ | async)\"\n            heading=\"{{ tab | tabTranslate | async }}\"\n            (selected)=\"onTabSelected(tab, obs.activeTab)\"\n          ></cds-tab>\n        </cds-tabs>\n      </ng-container>\n    </ng-template>\n    <div\n      #tabContentContainer\n      class=\"tab-content-container\"\n      [ngClass]=\"{\n        'tab-content-container--dark': isDarkMode$ | async,\n        'tab-content-container--compact': compactMode$ | async,\n      }\"\n      *ngIf=\"{\n        noTabsConfigured: noTabsConfigured$ | async,\n        showTaskList: showTaskList$ | async,\n        showNoAccess: showNoAccess$ | async,\n        dossierDetailLayout: dossierDetailLayout$ | async,\n        openTaskAndProcessLinkInModal: openTaskAndProcessLinkInModal$ | async,\n        taskAndProcessLinkOpenedInPanel: taskAndProcessLinkOpenedInPanel$ | async,\n      } as tabContentObs\"\n    >\n      <as-split\n        direction=\"horizontal\"\n        [disabled]=\"!tabContentObs.dossierDetailLayout.widthAdjustable\"\n        [gutterSize]=\"DOSSIER_DETAIL_GUTTER_SIZE\"\n        [unit]=\"tabContentObs.dossierDetailLayout.unit\"\n      >\n        <as-split-area\n          [size]=\"tabContentObs.dossierDetailLayout.leftPanelWidth\"\n          [minSize]=\"tabContentObs.dossierDetailLayout.leftPanelMinWidth\"\n          [maxSize]=\"tabContentObs.dossierDetailLayout.leftPanelMaxWidth\"\n        >\n          <div\n            class=\"card-body bg-white p-5 position-relative tab-container\"\n            [class.tab-container--compact]=\"compactMode$ | async\"\n          >\n            <div *ngIf=\"loadingTabs$ | async\" class=\"loading-container\">\n              <cds-loading></cds-loading>\n            </div>\n\n            <valtimo-no-results\n              *ngIf=\"tabContentObs.showNoAccess\"\n              description=\"{{ 'dossier.noAccess.description' | translate }}\"\n              title=\"{{ 'dossier.noAccess.title' | translate }}\"\n              illustration=\"valtimo-layout/img/emptystate-not-authorised.svg\"\n            >\n            </valtimo-no-results>\n\n            <valtimo-no-results\n              *ngIf=\"tabContentObs.noTabsConfigured\"\n              [description]=\"'dossier.tabs.noResultsDescription' | translate\"\n              [title]=\"'dossier.tabs.noResults' | translate\"\n            ></valtimo-no-results>\n\n            <ng-template #tabContainer></ng-template>\n\n            <div class=\"clearfix\"></div>\n          </div>\n        </as-split-area>\n\n        <as-split-area\n          *ngIf=\"tabContentObs.dossierDetailLayout.showRightPanel\"\n          [size]=\"tabContentObs.dossierDetailLayout.rightPanelWidth\"\n          [minSize]=\"tabContentObs.dossierDetailLayout.rightPanelMinWidth\"\n          [maxSize]=\"tabContentObs.dossierDetailLayout.rightPanelMaxWidth\"\n        >\n          @if (tabContentObs.showTaskList) {\n            <div class=\"task-panel\">\n              @if (!tabContentObs.taskAndProcessLinkOpenedInPanel) {\n                <valtimo-dossier-detail-task-list\n                  [openTaskAndProcessLinkInModal]=\"tabContentObs.openTaskAndProcessLinkInModal\"\n                  (taskClickEvent)=\"onTaskClickEvent($event)\"\n                  (formSubmitEvent)=\"onFormSubmitEvent()\"\n                ></valtimo-dossier-detail-task-list>\n              }\n\n              @if (tabContentObs.taskAndProcessLinkOpenedInPanel) {\n                <valtimo-dossier-detail-task-detail\n                  [taskAndProcessLink]=\"tabContentObs.taskAndProcessLinkOpenedInPanel\"\n                  (activeChange)=\"onActiveChangeEvent($event)\"\n                  (closeEvent)=\"onTaskDetailsClose()\"\n                  (formSubmit)=\"onFormSubmitEvent()\"\n                >\n                </valtimo-dossier-detail-task-detail>\n              }\n            </div>\n          }\n        </as-split-area>\n      </as-split>\n    </div>\n  </div>\n\n  <valtimo-dossier-supporting-process-start-modal\n    [isAdmin]=\"isAdmin$ | async\"\n    (formSubmit)=\"tabLoader.refreshView()\"\n    #supportingProcessStartModal\n  ></valtimo-dossier-supporting-process-start-modal>\n</div>\n\n<ng-template\n  #caseDetailHeader\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <div class=\"row\" *ngIf=\"(customDossierHeaderItems || []).length > 0\">\n    <span\n      *ngFor=\"let item of customDossierHeaderItems\"\n      [ngClass]=\"{\n        h1: item.textSize === 'xl',\n        h2: item.textSize === 'lg',\n        h3: item.textSize === 'md',\n        h4: item.textSize === 'sm',\n        h5: item.textSize === 'xs',\n      }\"\n      class=\"mb-0 mt-0 align-self-end col-xl-{{ item.columnSize }} col-lg-{{\n        item.columnSize * 2\n      }} {{ item.customClass }}\"\n    >\n      <span *ngIf=\"item.label\">{{ item.label | translate }}</span>\n\n      <span *ngIf=\"item.label && item.value\">: </span>\n\n      <strong>{{ item.value }}</strong>\n    </span>\n  </div>\n\n  <ng-container\n    *ngTemplateOutlet=\"\n      caseDetailAssignee;\n      context: {canHaveAssignee: canHaveAssignee, document: document, canAssign: canAssign}\n    \"\n  ></ng-container>\n</ng-template>\n\n<ng-template\n  #caseDetailAssignee\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <div *ngIf=\"canHaveAssignee && document\">\n    <valtimo-dossier-assign-user\n      *ngIf=\"canAssignLoaded$ | async\"\n      [assigneeFullName]=\"document?.assigneeFullName\"\n      [assigneeId]=\"document.assigneeId\"\n      [documentId]=\"document.id\"\n      [hasPermission]=\"canAssign\"\n      (assignmentOfDocumentChanged)=\"assignmentOfDocumentChanged()\"\n    ></valtimo-dossier-assign-user>\n  </div>\n</ng-template>\n\n<ng-template #claimButton let-canClaim=\"canClaim\" let-canHaveAssignee=\"canHaveAssignee\">\n  <cds-overflow-menu-option\n    *ngIf=\"canClaim && canHaveAssignee\"\n    [disabled]=\"(isAssigning$ | async) || (isAssignedToCurrentUser$ | async)\"\n    (click)=\"claimAssignee()\"\n  >\n    {{ 'dossier.claimAssigneeCase' | translate }}\n  </cds-overflow-menu-option>\n</ng-template>\n\n<ng-template #unassignButton let-canHaveAssignee=\"canHaveAssignee\" let-assigneeId=\"assigneeId\">\n  <cds-overflow-menu-option\n    *ngIf=\"canHaveAssignee\"\n    [disabled]=\"!assigneeId\"\n    (selected)=\"unassignAssignee()\"\n  >\n    {{ 'assignDocument.remove' | translate }}\n  </cds-overflow-menu-option>\n</ng-template>\n\n<ng-template #deleteButton let-canDelete=\"canDelete\">\n  <cds-overflow-menu-option\n    *ngIf=\"canDelete\"\n    [disabled]=\"isDeleting$ | async\"\n    (click)=\"deleteDocument()\"\n    type=\"danger\"\n  >\n    {{ 'dossier.delete.delete' | translate }}\n  </cds-overflow-menu-option>\n</ng-template>\n\n<ng-template #customStartTrigger>\n  <button\n    [size]=\"(compactMode$ | async) ? 'sm' : 'lg'\"\n    cdsButton=\"primary\"\n    [disabled]=\"processDocumentDefinitions.length === 0\"\n    [ngbTooltip]=\"processDocumentDefinitions.length === 0 ? 'No action' : null\"\n  >\n    {{ 'dossier.startSubProcess' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"chevron--down\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"dossier.delete.confirm\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"dossier.delete.description\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"dossier.delete.delete\"\n  (confirmEvent)=\"onConfirmDelete()\"\n></valtimo-confirmation-modal>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <div\n      class=\"dossier-actions\"\n      [ngClass]=\"{\n        'dossier-actions--compact': compactMode$ | async,\n        'dossier-actions--small-title': smallTitle$ | async,\n      }\"\n      *ngIf=\"{\n        assigneeId: assigneeId$ | async,\n        canAssign: canAssign$ | async,\n        canClaim: canClaim$ | async,\n        canHaveAssignee: canHaveAssignee$ | async,\n        canDelete: canDelete$ | async,\n        document: document$ | async,\n        caseStatus: caseStatus$ | async,\n      } as obs\"\n    >\n      <div\n        class=\"dossier-status-assign-custom-title\"\n        [ngClass]=\"{'--compact': compactMode$ | async}\"\n      >\n        @if (obs.caseStatus) {\n          <cds-tag size=\"sm\" [type]=\"obs.caseStatus.tagType\" [title]=\"obs.caseStatus.title\">{{\n            obs.caseStatus.title\n          }}</cds-tag>\n        }\n\n        <div class=\"dossier-assign-user\" [ngClass]=\"{'--compact': compactMode$ | async}\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              caseDetailAssignee;\n              context: {\n                canHaveAssignee: obs.canHaveAssignee,\n                document: obs.document,\n                canAssign: obs.canAssign,\n              }\n            \"\n          ></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"caseDetailHeader\"></ng-container>\n      </div>\n\n      <div class=\"buttons-container\">\n        <cds-overflow-menu\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n          *ngIf=\"obs.canHaveAssignee || obs.canDelete\"\n          flip=\"true\"\n          [offset]=\"(compactMode$ | async) ? {y: 48, x: -4} : {y: 48, x: 4}\"\n          class=\"overflow-button assign-overflow\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              claimButton;\n              context: {canClaim: obs.canClaim, canHaveAssignee: obs.canHaveAssignee}\n            \"\n          >\n          </ng-container>\n          <ng-container\n            *ngTemplateOutlet=\"\n              unassignButton;\n              context: {canHaveAssignee: obs.canHaveAssignee, assigneeId: obs.assigneeId}\n            \"\n          >\n          </ng-container>\n          <ng-container *ngTemplateOutlet=\"deleteButton; context: {canDelete: obs.canDelete}\">\n          </ng-container>\n        </cds-overflow-menu>\n\n        <cds-overflow-menu\n          valtimoCdsOverflowButton\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n          [width]=\"dropdownWidth$ | async\"\n          [customTrigger]=\"customStartTrigger\"\n          [offset]=\"{y: 48, x: 35}\"\n          class=\"overflow-button case-detail-overflow\"\n        >\n          <cds-overflow-menu-option\n            *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n            [attr.title]=\"processDocumentDefinition.displayName\"\n            (click)=\"startProcess(processDocumentDefinition)\"\n          >\n            {{ processDocumentDefinition.displayName }}\n          </cds-overflow-menu-option>\n        </cds-overflow-menu>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".main-content{overflow:hidden;padding-bottom:0}.main-content--no-horizontal-overflow{overflow-x:hidden}.tab-container{height:min-content;min-height:300px;overflow-y:auto;max-height:calc(100vh - 226px);overflow-x:hidden}.tab-container--compact{max-height:calc(100vh - 176px)}.tab-container:has(>.tab--no-margin){padding:0!important}.tab-container:has(>.tab--no-min-height){min-height:unset}.tab-container:has(>.tab--no-background){background:transparent!important}.tab-content-container{overflow:hidden;display:flex;gap:32px;overflow:auto;margin-bottom:16px;max-height:calc(100vh - 226px)}.tab-content-container--compact{max-height:calc(100vh - 176px)}.loading-container{display:flex;justify-content:center;flex-direction:row}.dossier-detail-page-header{display:flex;width:100%;justify-content:flex-start;padding-bottom:5px}.dossier-detail-page-header ::ng-deep .cds--tag{margin:0}.case-detail-tabs{display:flex;margin-bottom:24px}.case-detail-tabs cds-tab{display:none!important}.cds--overflow-menu-options{margin-top:32px}.assign-overflow{margin-right:8px}.buttons-container{display:flex;flex-direction:row}.dossier-actions{display:flex;width:100%;justify-content:space-between;align-items:flex-end;padding-bottom:4px}.dossier-actions--compact,.dossier-actions--small-title{padding-bottom:0;align-items:flex-start}.dossier-actions ::ng-deep .version-selection{width:160px}.dossier-actions ::ng-deep .version-selection .cds--list-box__selection{display:none}.dossier-status-assign-custom-title{display:flex;gap:16px;align-items:flex-end}.dossier-status-assign-custom-title .cds--tag{margin:0;overflow:hidden;text-overflow:ellipsis;line-height:24px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:100%}.dossier-status-assign-custom-title.--compact{align-items:center}.task-panel{width:100%;transition:height .15s ease-in-out}:host ::ng-deep .container-fluid{height:100%!important;width:100%!important;margin:0!important;padding:0!important}::ng-deep .tab-content-container .as-split-gutter{background-color:transparent!important;--_as-gutter-icon-disabled: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAgEBAYcDngAAAAAASUVORK5CYII=);--_as-gutter-icon-horizontal: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABQJJREFUeF7dWll22zAMpNwzlM5xmpMlOVl6mzrKHexWm8UFy4xIp+/FP3mxQWAwWAiRGsJ3/gwhhJvt4CRCfgCtosYhDOHm4SlW7rZyq9t/R7GsZoYQDhCA89UIrzakKuQtpRTiHv03ycJB3t8KuU9AByNfw5dWJpj1h5YABmGRsvgufzsSG21NEwGWUrv5yiuZb31yMZoAAjBFPqBdor9G0vpwu2+PBgE6TK/q0pUxxiwZxnE0SefkE0sHWQUygGG3ll0c2tGNn+M0DiSfHDlHQBu2rffoWgBWPRHWIUreM654li5bMwDQBIhI9naHFgVQCSS2PHliWlLm0/YsMrcwK6ISp1QGANhzG7XFDj2gUFr8yzrkydOJ6CyACBB1lIWkbPyeQ2UQ2ZKxksCLft4EaWqB/AshHCdg0b/1gB7wJB1QBrQ0ml4E2MMyFgxJ6iABuEGdgCUeZVQm+fQ7fhfAsflzAKFLS1G2ptmMwUpDl1oyAGxo2fw2hHBzjpsm+XiO2TGQF1GWACJGfecAjHmgCTZum/lQfezQTZ3L7z+g3goc2xGtFT86A0qLh5pgjPF13aLmv9aHdYiVn8uMwFNixQlYqVuNvayK3sZxNElgHarlP6duo2bpOcbXWxheVhkTj7Tv4ATsTG/OL6CG8DZ+KCQMIcSf6HnAAo8hrAjGRpIblLxveDm8/q4YC6fT6flyufzWBhXGoTWd4QOUp6enX9fr9X2od6SFhJlTu4FBGZA5n+jbnddZjPG8nz8lo222ItHJEraRICAAMmG6rPGb2FTjedqHsET+4/Lbu+phHWLlJ/g+Cd4gpJDgp71HHzAHFCqOEFCSULjrNkaxw2rO/zidnv/MNY99WIcY+TKufibUmOcSEB5IxLTHXLal2FG4h83VPzET1h6wUxDP8fXfJW5V8xuQhqFwVtGNgDuQ6Yo367Pb9ixdjVckVE1QS/0ekZhybRw/zMZblkBpd1sMPIdJkAsClF2ghQQPYJYBQjp5BKCBEHD4JZDi6bED3AebRDFbAp58Ski3JrgphQcgozEwXZ2dBH3nZ2Bq5KcyahuEgO1wIWBnyIuoS5hA9pHIp01dnANSdlvKwXWocRC6Pw/U70MBozCQAWI5JKDF5wFrtk8uR6XKYQibnL9dr+/CjgA5v81AamMFByTTmOhQp56hPw5/vrrvx61euz2gZKfHgcj98bUkgjo/WJCxeMrJFyQgR8ocQcGnwqsJpgSK8pymTPeIThus4DKwBKWJFNsFklEcOT9ApyFADswAQJMiwkaUldeQ7ZTKDWf79tsSgIasDwGduro1CbY+hVqZgpJ1SA5L6bQHMJNjOy19MsCgBiNgV8DK+1GxSXoYAcMwhNttOedPIZTPAhm8bQ6Anx57ZMBGgfHuXs6yuEANBBtR/2bIjzkj8bAMSIYU+KLDaoKSU8KFCOP7LAsTcDTZ2jPAfrUWf3VGnwdo1pgF5xiz9yhazwOExwfv9suEm2XArJwNtSP/+AxgwlHL1iVwiAUdhEaAxhtLWGbZDEbPEiCyhHWIla93KO7AvMoAwre7bW5jxCAfwaHnoa4N3gVU5X2RthX0gdVNBPhDZnYgzMH7ImKbCOA8wnfsVO+jeUgIEHfYFUs7jHYNLN2YvJkBXwYaNuQIwnp2cgoCag3LN1Z2+EwfwCVPLPAOJ1n05oDt9x5oRR37Pb72s/e+kU81L/EXSRwjcUdkvjUAAAAASUVORK5CYII=)}::ng-deep .tab-content-container .as-split-gutter-icon{background-repeat:no-repeat;background-size:16px 16px}::ng-deep .tab-content-container--dark .as-split-gutter{--_as-gutter-icon-horizontal: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABPlJREFUeF7tm1tW3DAMhu2+krCmdmWlKytrIuGV9HjixDddfjkOtOd0XmAGWZfPsiw7g3fVyzvntvpD9H01+JIuwCamX5YKf9VfmCVaDze2S2fXIDG+CGC8YsrqMCvDFDmHZYCeI5gE6LietD2LlNb6uQAQTLWfCDTLmLpOIfoRvxEZydZn+pH7+vdlAEJyoIwIwDIrFtk7C2TyA/Po9gxY1zVWrN2haZq85FqS3zEF+YET3qi6rFzjfAR0yGkBwQA0wyFU75zf5MaOBYDoR2YGDigqY+U7HOKHlAsFiQOXqax+JYCYBGJr32ZAB+lEpxwc3i1nDcDWtBUYPjN8p35VBxf/4/MQUI7lqAGPzwjYBQDv3PQ0+Ue/CjV/sODp8+UiyNE7XLHO6EM+Dg4/ntBdAI69zdIqBlgTlDldADLN9a7R551cDot0kDPNbn40AIh6LSS4DS0Be9jJg7sAXPHJfBZojbXriMscGgDvvhUYmRGEes6iocJiyVejWdelYDPNk5cquhnAxVSAlgDZQG/7bUqKjvZEDqgdYwaAzQsrVQHowFkPqd5bA4LlO1ytp+zoFM0Ml2V5CYPmeX78lF7v67rla8B6GpynKZxnxBfmD03MvASCMe/9z+DRtm2/SAiZLXRGqcapbYTaICB/BHwggN1wbuzQSUHI3UQBHPqo+wPO/7dlefkWJ0PyR0ofEIAjg49Z8GOe51fOCAYgIcPkd2vLsnz33v+ubadJ0TZw8Fqcmnkk+CBjCahHXodQ49mhHGjUDJCDf37Vjmn54Sa4MuxGaL/weWzDdggJigjgDL7KpG3bxLTPmY/PALqa90JgAahpf/ohb8jjAfAlrQdCCSDG0gRPxCiHzf81XwKUVA1M7gDwbojbspsM4GZea3jov5cFp6cGoHYRFCWE5FthQwKAGCnLS9vD6UXwXbnIRpGUcsH3D6JxI2sADwFHwEnqAI4HKW0AB07ci6QDXgLHELUIghPxbxRBBukICDuAZMCaAbu8XnLf1K4wzBjdGYpzSUGI66ntBQg/8QzYB+PyyW18++sAEHvu8wSY02IbosyONaBTPj7XO6/F+SxVzgPKRooWlN7l0A0g+i0tGXrmvdu2D/qYTrBgO0GKG3ocRlrhB/jm6a13zR2i8GAk+BOOw/lmy95RMIlgAlAvh4ex5/ll5CUndYMkJfGNFyL84sCuoHa3tSVQW9HkGxjeueUNv6Krx7dbTO5R/J1FARSQ9X3d8gyh13RSZAYA9iOcmHkJWO1ZA+LkRdbaRAlO3wogKL/+/YDZl5cuFQogC/P4k/j+mx0AYVDyYVQGWDMPlbcDQDVHOREA1DmGDAgv7emA0bEofgmAmn3euXUpT3d9Z4G+4PRR+6PR9oigRqarPiT6ng4nBzRguCe0ZJEBatyqQGvkfw249VtiHTNSzdGZAddVESmW1YBDv5bSpoxBnOZkst7h6jISx5sCEltnJFp7KKkG3KNfPQvULluB2UMuR1zaBiXjB08+IJr4FQA9c3gDgNINKSDK4SCff67VjEsZEI+Cl3Scg3vwA4cU6uu0bRL3d4k3ZEDm3mAoY2YqdX7BvVsA2OJW9qlhUe+KQvObX1DYANS+2iIdHArR0bArgXfUBoAMoewopH9ROd3oBmcZiMkOANA3sXUq9mm5Pqrvq7IYXLo3Vs713ao7WRAZ8NULfTACRd0fdjtUcYyr1cIAAAAASUVORK5CYII=)}.case-tags{margin-bottom:16px}\n"] }]
         }], ctorParameters: () => [{ type: i2$2.BreadcrumbService }, { type: i2$1.CaseStatusService }, { type: i2$2.CdsThemeService }, { type: i0.ComponentFactoryResolver }, { type: i1.ConfigService }, { type: i2$1.DocumentService }, { type: DossierDetailLayoutService }, { type: DossierService }, { type: DossierTabService }, { type: i5.IconService }, { type: i6$3.KeycloakService }, { type: i1$2.NGXLogger }, { type: i5.NotificationService }, { type: i2$2.PageHeaderService }, { type: i2$2.PageTitleService }, { type: i2$4.PermissionService }, { type: i6.TranslateService }, { type: i0.Renderer2 }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: WidgetsService }, { type: i5$1.UserProviderService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -4865,11 +4893,11 @@ class DossierProcessStartModalComponent {
         this.modalOpen$.next(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierProcessStartModalComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i2$3.ProcessService }, { token: i2$1.DocumentService }, { token: i4$1.ProcessLinkService }, { token: i4$1.FormFlowService }, { token: i5$1.UserProviderService }, { token: i2$4.PermissionService }, { token: DossierListService }, { token: StartModalService }, { token: i1.ConfigService }, { token: FORM_VIEW_MODEL_TOKEN, optional: true }, { token: FORM_CUSTOM_COMPONENT_TOKEN, optional: true }, { token: i4$1.UrlResolverService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DossierProcessStartModalComponent, selector: "valtimo-dossier-process-start-modal", outputs: { formFlowComplete: "formFlowComplete", noProcessLinked: "noProcessLinked" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "formViewModelDynamicContainer", first: true, predicate: ["formViewModelComponent"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "formCustomComponentDynamicContainer", first: true, predicate: ["formCustomComponent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<cds-modal [open]=\"modalOpen$ | async\" valtimoCdsModal size=\"sm\">\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCloseSelect()\"\n    ><h3 cdsModalHeaderHeading>\n      {{ modalTitle }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent [cdsLayer]=\"1\" class=\"process-start-modal-content\">\n    <ng-template #formViewModelComponent></ng-template>\n\n    <ng-template #formCustomComponent></ng-template>\n\n    @if (formDefinition && !isFormViewModel) {\n      <valtimo-form-io\n        #form\n        [form]=\"formDefinition\"\n        [options]=\"options\"\n        (submit)=\"onSubmit($event)\"\n      >\n      </valtimo-form-io>\n    }\n\n    @if (formFlowInstanceId) {\n      <valtimo-form-flow\n        [formFlowInstanceId]=\"formFlowInstanceId\"\n        (formFlowComplete)=\"formFlowSubmitted()\"\n      ></valtimo-form-flow>\n    }\n\n    @if (!formFlowInstanceId && !formDefinition && isAdmin && !isUIComponent) {\n      <div\n        class=\"bg-warning text-black mb-0 p-3 text-center\"\n        [translate]=\"'formManagement.noFormDefinitionFoundAdmin'\"\n      ></div>\n      <div class=\"mb-0 mt-4 p-3 text-center\">\n        <button\n          (click)=\"gotoProcessLinkScreen()\"\n          class=\"btn btn-secondary btn-space\"\n          id=\"process-link-button\"\n          type=\"button\"\n        >\n          {{ 'formManagement.gotoProcessLinksButton' | translate }}\n        </button>\n      </div>\n    }\n\n    @if (!formFlowInstanceId && !formDefinition && !isAdmin && !isUIComponent) {\n      <div\n        class=\"bg-warning text-black mb-0 p-3 text-center\"\n        [translate]=\"'formManagement.noFormDefinitionFoundUser'\"\n      ></div>\n    }\n  </section>\n</cds-modal>\n", styles: [".process-start-modal-content{padding:16px}\n/*!\n * Copyright 2015-2024 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: "component", type: i2$2.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change", "event"] }, { kind: "directive", type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i4$1.FormFlowComponent, selector: "valtimo-form-flow", inputs: ["formIoFormData", "formFlowInstanceId"], outputs: ["formFlowComplete", "formFlowChange"] }, { kind: "component", type: i5.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i5.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "directive", type: i5.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i5.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i2$2.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "directive", type: i5.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DossierProcessStartModalComponent, selector: "valtimo-dossier-process-start-modal", outputs: { formFlowComplete: "formFlowComplete", noProcessLinked: "noProcessLinked" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "formViewModelDynamicContainer", first: true, predicate: ["formViewModelComponent"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "formCustomComponentDynamicContainer", first: true, predicate: ["formCustomComponent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<cds-modal [open]=\"modalOpen$ | async\" size=\"sm\" valtimoCdsModal [enableOverflow]=\"true\">\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCloseSelect()\"\n    ><h3 cdsModalHeaderHeading>\n      {{ modalTitle }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent [cdsLayer]=\"1\" class=\"process-start-modal-content\">\n    <ng-template #formViewModelComponent></ng-template>\n\n    <ng-template #formCustomComponent></ng-template>\n\n    @if (formDefinition && !isFormViewModel && !isUIComponent) {\n      <valtimo-form-io\n        #form\n        [form]=\"formDefinition\"\n        [options]=\"options\"\n        (submit)=\"onSubmit($event)\"\n      >\n      </valtimo-form-io>\n    }\n\n    @if (formFlowInstanceId) {\n      <valtimo-form-flow\n        [formFlowInstanceId]=\"formFlowInstanceId\"\n        (formFlowComplete)=\"formFlowSubmitted()\"\n      ></valtimo-form-flow>\n    }\n\n    @if (!formFlowInstanceId && !formDefinition && isAdmin && !isUIComponent) {\n      <div\n        class=\"bg-warning text-black mb-0 p-3 text-center\"\n        [translate]=\"'formManagement.noFormDefinitionFoundAdmin'\"\n      ></div>\n      <div class=\"mb-0 mt-4 p-3 text-center\">\n        <button\n          (click)=\"gotoProcessLinkScreen()\"\n          class=\"btn btn-secondary btn-space\"\n          id=\"process-link-button\"\n          type=\"button\"\n        >\n          {{ 'formManagement.gotoProcessLinksButton' | translate }}\n        </button>\n      </div>\n    }\n\n    @if (!formFlowInstanceId && !formDefinition && !isAdmin && !isUIComponent) {\n      <div\n        class=\"bg-warning text-black mb-0 p-3 text-center\"\n        [translate]=\"'formManagement.noFormDefinitionFoundUser'\"\n      ></div>\n    }\n  </section>\n</cds-modal>\n", styles: [".process-start-modal-content{padding:16px}\n/*!\n * Copyright 2015-2024 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: "component", type: i2$2.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change", "event"] }, { kind: "directive", type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i4$1.FormFlowComponent, selector: "valtimo-form-flow", inputs: ["formIoFormData", "formFlowInstanceId"], outputs: ["formFlowComplete", "formFlowChange"] }, { kind: "component", type: i5.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i5.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "directive", type: i5.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i5.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i2$2.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["enableOverflow"] }, { kind: "directive", type: i5.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierProcessStartModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-process-start-modal', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2024 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<cds-modal [open]=\"modalOpen$ | async\" valtimoCdsModal size=\"sm\">\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCloseSelect()\"\n    ><h3 cdsModalHeaderHeading>\n      {{ modalTitle }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent [cdsLayer]=\"1\" class=\"process-start-modal-content\">\n    <ng-template #formViewModelComponent></ng-template>\n\n    <ng-template #formCustomComponent></ng-template>\n\n    @if (formDefinition && !isFormViewModel) {\n      <valtimo-form-io\n        #form\n        [form]=\"formDefinition\"\n        [options]=\"options\"\n        (submit)=\"onSubmit($event)\"\n      >\n      </valtimo-form-io>\n    }\n\n    @if (formFlowInstanceId) {\n      <valtimo-form-flow\n        [formFlowInstanceId]=\"formFlowInstanceId\"\n        (formFlowComplete)=\"formFlowSubmitted()\"\n      ></valtimo-form-flow>\n    }\n\n    @if (!formFlowInstanceId && !formDefinition && isAdmin && !isUIComponent) {\n      <div\n        class=\"bg-warning text-black mb-0 p-3 text-center\"\n        [translate]=\"'formManagement.noFormDefinitionFoundAdmin'\"\n      ></div>\n      <div class=\"mb-0 mt-4 p-3 text-center\">\n        <button\n          (click)=\"gotoProcessLinkScreen()\"\n          class=\"btn btn-secondary btn-space\"\n          id=\"process-link-button\"\n          type=\"button\"\n        >\n          {{ 'formManagement.gotoProcessLinksButton' | translate }}\n        </button>\n      </div>\n    }\n\n    @if (!formFlowInstanceId && !formDefinition && !isAdmin && !isUIComponent) {\n      <div\n        class=\"bg-warning text-black mb-0 p-3 text-center\"\n        [translate]=\"'formManagement.noFormDefinitionFoundUser'\"\n      ></div>\n    }\n  </section>\n</cds-modal>\n", styles: [".process-start-modal-content{padding:16px}\n/*!\n * Copyright 2015-2024 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"] }]
+            args: [{ selector: 'valtimo-dossier-process-start-modal', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2024 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<cds-modal [open]=\"modalOpen$ | async\" size=\"sm\" valtimoCdsModal [enableOverflow]=\"true\">\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCloseSelect()\"\n    ><h3 cdsModalHeaderHeading>\n      {{ modalTitle }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent [cdsLayer]=\"1\" class=\"process-start-modal-content\">\n    <ng-template #formViewModelComponent></ng-template>\n\n    <ng-template #formCustomComponent></ng-template>\n\n    @if (formDefinition && !isFormViewModel && !isUIComponent) {\n      <valtimo-form-io\n        #form\n        [form]=\"formDefinition\"\n        [options]=\"options\"\n        (submit)=\"onSubmit($event)\"\n      >\n      </valtimo-form-io>\n    }\n\n    @if (formFlowInstanceId) {\n      <valtimo-form-flow\n        [formFlowInstanceId]=\"formFlowInstanceId\"\n        (formFlowComplete)=\"formFlowSubmitted()\"\n      ></valtimo-form-flow>\n    }\n\n    @if (!formFlowInstanceId && !formDefinition && isAdmin && !isUIComponent) {\n      <div\n        class=\"bg-warning text-black mb-0 p-3 text-center\"\n        [translate]=\"'formManagement.noFormDefinitionFoundAdmin'\"\n      ></div>\n      <div class=\"mb-0 mt-4 p-3 text-center\">\n        <button\n          (click)=\"gotoProcessLinkScreen()\"\n          class=\"btn btn-secondary btn-space\"\n          id=\"process-link-button\"\n          type=\"button\"\n        >\n          {{ 'formManagement.gotoProcessLinksButton' | translate }}\n        </button>\n      </div>\n    }\n\n    @if (!formFlowInstanceId && !formDefinition && !isAdmin && !isUIComponent) {\n      <div\n        class=\"bg-warning text-black mb-0 p-3 text-center\"\n        [translate]=\"'formManagement.noFormDefinitionFoundUser'\"\n      ></div>\n    }\n  </section>\n</cds-modal>\n", styles: [".process-start-modal-content{padding:16px}\n/*!\n * Copyright 2015-2024 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.ActivatedRoute }, { type: i1$1.Router }, { type: i2$3.ProcessService }, { type: i2$1.DocumentService }, { type: i4$1.ProcessLinkService }, { type: i4$1.FormFlowService }, { type: i5$1.UserProviderService }, { type: i2$4.PermissionService }, { type: DossierListService }, { type: StartModalService }, { type: i1.ConfigService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -5011,7 +5039,7 @@ class DossierListActionsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierListActionsComponent, deps: [{ token: i2$1.DocumentService }, { token: DossierListService }, { token: i5.NotificationService }, { token: i1$1.Router }, { token: i6.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierListActionsComponent, selector: "valtimo-dossier-list-actions", inputs: { loading: "loading" }, outputs: { formFlowComplete: "formFlowComplete", startButtonDisableEvent: "startButtonDisableEvent" }, providers: [NotificationService], viewQueries: [{ propertyName: "processStart", first: true, predicate: ["processStartModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<cds-modal\n  valtimoCdsModal\n  [open]=\"startSelectionModalOpen$ | async\"\n  size=\"xs\"\n  *ngIf=\"{\n    associatedProcessDocumentDefinitions: associatedProcessDocumentDefinitions$ | async,\n    caseSettings: caseSettings$ | async,\n  } as obs\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCloseSelect()\"\n    ><h3 cdsModalHeaderHeading>\n      {{ 'dashboard.startProcess.title' | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent class=\"start-modal-content\" [cdsLayer]=\"1\">\n    <cds-clickable-tile\n      *ngIf=\"obs.caseSettings?.hasExternalStartForm\"\n      (click)=\"openExternalCaseStartForm(true)\"\n    >\n      {{ obs?.caseSettings.externalStartFormDescription || '-' }}\n    </cds-clickable-tile>\n\n    <cds-clickable-tile\n      *ngFor=\"let processDocumentDefinition of obs?.associatedProcessDocumentDefinitions\"\n      (click)=\"selectProcess(processDocumentDefinition)\"\n    >\n      {{ processDocumentDefinition.processName }}\n    </cds-clickable-tile>\n  </section>\n</cds-modal>\n\n<valtimo-dossier-process-start-modal\n  #processStartModal\n  (formFlowComplete)=\"onFormFlowComplete()\"\n  (noProcessLinked)=\"onNoProcessLinked()\"\n></valtimo-dossier-process-start-modal>\n", styles: [".start-modal-content{display:flex;flex-direction:column;gap:8px}\n/*!\n * Copyright 2015-2024 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: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i5.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "directive", type: i5.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i5.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i2$2.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "component", type: i5.ClickableTile, selector: "cds-clickable-tile, ibm-clickable-tile", inputs: ["theme", "href", "target", "disabled", "route", "routeExtras"], outputs: ["navigation"] }, { kind: "directive", type: i5.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: DossierProcessStartModalComponent, selector: "valtimo-dossier-process-start-modal", outputs: ["formFlowComplete", "noProcessLinked"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierListActionsComponent, selector: "valtimo-dossier-list-actions", inputs: { loading: "loading" }, outputs: { formFlowComplete: "formFlowComplete", startButtonDisableEvent: "startButtonDisableEvent" }, providers: [NotificationService], viewQueries: [{ propertyName: "processStart", first: true, predicate: ["processStartModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<cds-modal\n  valtimoCdsModal\n  [open]=\"startSelectionModalOpen$ | async\"\n  size=\"xs\"\n  *ngIf=\"{\n    associatedProcessDocumentDefinitions: associatedProcessDocumentDefinitions$ | async,\n    caseSettings: caseSettings$ | async,\n  } as obs\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCloseSelect()\"\n    ><h3 cdsModalHeaderHeading>\n      {{ 'dashboard.startProcess.title' | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent class=\"start-modal-content\" [cdsLayer]=\"1\">\n    <cds-clickable-tile\n      *ngIf=\"obs.caseSettings?.hasExternalStartForm\"\n      (click)=\"openExternalCaseStartForm(true)\"\n    >\n      {{ obs?.caseSettings.externalStartFormDescription || '-' }}\n    </cds-clickable-tile>\n\n    <cds-clickable-tile\n      *ngFor=\"let processDocumentDefinition of obs?.associatedProcessDocumentDefinitions\"\n      (click)=\"selectProcess(processDocumentDefinition)\"\n    >\n      {{ processDocumentDefinition.processName }}\n    </cds-clickable-tile>\n  </section>\n</cds-modal>\n\n<valtimo-dossier-process-start-modal\n  #processStartModal\n  (formFlowComplete)=\"onFormFlowComplete()\"\n  (noProcessLinked)=\"onNoProcessLinked()\"\n></valtimo-dossier-process-start-modal>\n", styles: [".start-modal-content{display:flex;flex-direction:column;gap:8px}\n/*!\n * Copyright 2015-2024 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: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i5.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "directive", type: i5.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i5.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i2$2.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["enableOverflow"] }, { kind: "component", type: i5.ClickableTile, selector: "cds-clickable-tile, ibm-clickable-tile", inputs: ["theme", "href", "target", "disabled", "route", "routeExtras"], outputs: ["navigation"] }, { kind: "directive", type: i5.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: DossierProcessStartModalComponent, selector: "valtimo-dossier-process-start-modal", outputs: ["formFlowComplete", "noProcessLinked"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierListActionsComponent, decorators: [{
             type: Component,