@valtimo/dossier 12.7.0 → 12.9.0

package/fesm2022/valtimo-dossier.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, ViewEncapsulation, EventEmitter, Output, ViewContainerRef, Optional, Inject, HostBinding, ViewChild, Input, InjectionToken, ChangeDetectionStrategy, signal, Pipe, NgModule } from '@angular/core';
+import { Injectable, ViewEncapsulation, Component, EventEmitter, Output, ViewContainerRef, ViewChild, HostBinding, Optional, Inject, Input, InjectionToken, ChangeDetectionStrategy, signal, Pipe, NgModule } from '@angular/core';
 import * as i2$5 from '@angular/forms';
 import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BehaviorSubject, take, map, distinctUntilChanged, combineLatest, Subject, switchMap, tap, filter, Subscription, startWith, of, catchError as catchError$1, delay, debounceTime, repeat, forkJoin, defaultIfEmpty } from 'rxjs';
@@ -15,7 +15,7 @@ import * as i1$1 from '@angular/router';
 import { NavigationStart, RouterModule } from '@angular/router';
 import * as i1$2 from 'ngx-logger';
 import * as i2$2 from '@valtimo/components';
-import { FormioOptionsImpl, TimelineItemImpl, CASES_WITHOUT_STATUS_KEY, CarbonListModule, ViewType, EllipsisPipe, FormIoModule, CurrentCarbonTheme, CARBON_THEME, WidgetModule, PendingChangesComponent, CARBON_CONSTANTS, CarbonListComponent, pendingChangesGuard, ListModule, BpmnJsDiagramModule, TimelineModule, CamundaFormModule, FilterSidebarModule, DataListModule, ModalModule, SpinnerModule, UploaderModule, DropzoneModule, SelectModule, InputLabelModule, ParagraphModule, TableModule, VModalModule, TitleModule, ButtonModule as ButtonModule$1, SearchableDropdownSelectModule, SearchFieldsModule, PageModule, InputModule as InputModule$1, FormModule as FormModule$1, ConfirmationModalModule, IsArrayPipe, StatusSelectorComponent, RenderInPageHeaderDirectiveModule, ValtimoCdsOverflowButtonDirectiveModule } from '@valtimo/components';
+import { FormioOptionsImpl, TimelineItemImpl, CASES_WITHOUT_STATUS_KEY, CarbonListModule, ViewType, EllipsisPipe, FormIoModule, CARBON_THEME, CurrentCarbonTheme, WidgetModule, PendingChangesComponent, CARBON_CONSTANTS, CarbonListComponent, pendingChangesGuard, ListModule, BpmnJsDiagramModule, TimelineModule, CamundaFormModule, FilterSidebarModule, DataListModule, ModalModule, SpinnerModule, UploaderModule, DropzoneModule, SelectModule, InputLabelModule, ParagraphModule, TableModule, VModalModule, TitleModule, ButtonModule as ButtonModule$1, SearchableDropdownSelectModule, SearchFieldsModule, PageModule, InputModule as InputModule$1, FormModule as FormModule$1, ConfirmationModalModule, IsArrayPipe, StatusSelectorComponent, RenderInPageHeaderDirectiveModule, ValtimoCdsOverflowButtonDirectiveModule } from '@valtimo/components';
 export { CASES_WITHOUT_STATUS_KEY } from '@valtimo/components';
 import moment from 'moment';
 import * as i3 from '@valtimo/form';
@@ -1960,6 +1960,11 @@ const DOSSIER_DETAIL_RIGHT_PANEL_MIN_WIDTHS = {
 };
 const DOSSIER_DETAIL_DEFAULT_DISPLAY_TYPE = 'modal';
 const DOSSIER_DETAIL_DEFAULT_DISPLAY_SIZE = 'medium';
+const DOSSIER_DETAIL_START_PROCESS_DROPDOWN_WIDTH = {
+    small: 250,
+    medium: 350,
+    large: 450,
+};
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -2229,6 +2234,7 @@ class WidgetFieldComponent extends WidgetProcess {
         this.class = 'widget-field';
         this.collapseVertically = false;
         this.isEmptyWidgetData$ = new BehaviorSubject(false);
+        this.noVisibleFields$ = new BehaviorSubject(true);
         this.renderVertically = signal(0);
         this.widgetConfiguration$ = new BehaviorSubject(null);
         this.widgetData$ = new BehaviorSubject(null);
@@ -2240,6 +2246,8 @@ class WidgetFieldComponent extends WidgetProcess {
                         title: property.title,
                         ellipsisCharacterLimit: property.displayProperties
                             ?.ellipsisCharacterLimit ?? null,
+                        hideWhenEmpty: property.displayProperties?.hideWhenEmpty ??
+                            false,
                         value: this.viewContentService.get(widgetData[property.key], {
                             ...property.displayProperties,
                             viewType: property.displayProperties?.type ?? ViewType.TEXT,
@@ -2247,7 +2255,7 @@ class WidgetFieldComponent extends WidgetProcess {
                     },
                 ]
                 : []),
-        ], []))));
+        ], []))), tap(columns => this.checkEmptyFields(columns)));
     }
     ngAfterViewInit() {
         if (this.collapseVertically && this._widgetFieldRef)
@@ -2285,8 +2293,16 @@ class WidgetFieldComponent extends WidgetProcess {
     checkEmptyWidgetData(widgetData) {
         return widgetData && Object.keys(widgetData).length === 0;
     }
+    checkEmptyFields(columns) {
+        columns.forEach(column => {
+            column.forEach(field => {
+                if (!field?.hideWhenEmpty || (field?.hideWhenEmpty && field?.value && field?.value !== '-'))
+                    this.noVisibleFields$.next(false);
+            });
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WidgetFieldComponent, deps: [{ token: i2$1.DocumentService }, { token: i2$4.PermissionService }, { token: i1$1.ActivatedRoute }, { token: i2$2.ViewContentService }, { token: WidgetsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: WidgetFieldComponent, isStandalone: true, selector: "valtimo-widget-field", inputs: { collapseVertically: "collapseVertically", widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_widgetFieldRef", first: true, predicate: ["widgetField"], 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\n<ng-container\n  *ngIf=\"{\n    widgetConfiguration: widgetConfiguration$ | async,\n    widgetPropertyValue: widgetPropertyValue$ | async,\n    widgetData: widgetData$ | async,\n    isEmptyWidgetData: isEmptyWidgetData$ | async,\n  } as obs\"\n>\n  <section class=\"widget-field__header\">\n    <h4 class=\"widget-field__title\">{{ obs?.widgetConfiguration?.title }}</h4>\n\n    @if (obs.widgetConfiguration.actions?.length === 1) {\n      <button\n        *ngIf=\"canCreateCamundaExecution$ | async\"\n        cdsButton=\"ghost\"\n        (click)=\"onProcessStartClick(obs.widgetConfiguration.actions[0])\"\n      >\n        {{ obs.widgetConfiguration.actions[0].name }}\n      </button>\n    }\n  </section>\n\n  @if (obs?.isEmptyWidgetData) {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'dossier.widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  } @else {\n    <div\n      #widgetField\n      [ngClass]=\"{\n        'widget-field__render-vertically': renderVertically() === 1,\n        'widget-field__render-two-columns': renderVertically() === 2,\n        'widget-field__render-three-columns': renderVertically() === 3,\n        'widget-field__container': renderVertically() === 4,\n      }\"\n    >\n      @for (column of obs?.widgetPropertyValue; track column.key) {\n        <div class=\"widget-field__column\">\n          @for (property of column; track property) {\n            <div class=\"widget-field__field\">\n              <label class=\"widget-field__field-label\" [attr.title]=\"property?.title\">\n                {{ property?.title }}</label\n              >\n\n              <div [attr.title]=\"property?.value\" class=\"widget-field__field-value\">\n                {{ property?.value | valtimoEllipsis: property?.ellipsisCharacterLimit }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-container>\n", styles: [".widget-field{padding:24px}.widget-field__header{display:flex;align-items:center;justify-content:space-between}.widget-field,.widget-field__column{display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden}.widget-field__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.widget-field__container{display:grid;grid-gap:24px;grid-template-columns:repeat(4,1fr)}.widget-field__field{display:flex;width:100%;flex-direction:column;gap:8px}.widget-field__field-label{font-size:12px;color:var(--cds-text-secondary)}.widget-field__field-value{color:var(--cds-text-primary);padding:8px 16px;border-bottom:1px solid var(--cds-border-subtle-01);font-size:14px}.widget-field .cds--label{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.widget-field__render-vertically,.widget-field__render-two-columns,.widget-field__render-three-columns{display:grid;align-items:stretch;gap:24px}.widget-field__render-vertically{grid-template-columns:repeat(1,1fr)}.widget-field__render-two-columns{grid-template-columns:repeat(2,1fr)}.widget-field__render-three-columns{grid-template-columns:repeat(3,1fr)}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i2$2.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "pipe", type: EllipsisPipe, name: "valtimoEllipsis" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i5.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: WidgetFieldComponent, isStandalone: true, selector: "valtimo-widget-field", inputs: { collapseVertically: "collapseVertically", widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_widgetFieldRef", first: true, predicate: ["widgetField"], 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\n<ng-container\n  *ngIf=\"{\n    widgetConfiguration: widgetConfiguration$ | async,\n    widgetPropertyValue: widgetPropertyValue$ | async,\n    widgetData: widgetData$ | async,\n    isEmptyWidgetData: isEmptyWidgetData$ | async,\n    noVisibleFields: noVisibleFields$ | async,\n  } as obs\"\n>\n  <section class=\"widget-field__header\">\n    <h4 class=\"widget-field__title\">{{ obs?.widgetConfiguration?.title }}</h4>\n\n    @if (obs.widgetConfiguration.actions?.length === 1) {\n      <button\n        *ngIf=\"canCreateCamundaExecution$ | async\"\n        cdsButton=\"ghost\"\n        (click)=\"onProcessStartClick(obs.widgetConfiguration.actions[0])\"\n      >\n        {{ obs.widgetConfiguration.actions[0].name }}\n      </button>\n    }\n  </section>\n\n  @if (obs?.isEmptyWidgetData) {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'dossier.widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  } @else {\n    <div\n      #widgetField\n      [ngClass]=\"{\n        'widget-field__render-vertically': renderVertically() === 1,\n        'widget-field__render-two-columns': renderVertically() === 2,\n        'widget-field__render-three-columns': renderVertically() === 3,\n        'widget-field__container': renderVertically() === 4,\n      }\"\n    >\n      @if (obs.noVisibleFields) {\n        <valtimo-no-results\n          [collapseVertically]=\"true\"\n          [description]=\"'dossier.widgets.emptyFields' | translate\"\n          [smallPadding]=\"true\"\n        ></valtimo-no-results>\n      } @else {\n        @for (column of obs?.widgetPropertyValue; track column.key) {\n          <div class=\"widget-field__column\">\n            @for (property of column; track property) {\n              <div\n                *ngIf=\"\n                  (property?.value !== null &&\n                    property?.value !== '-' &&\n                    property?.hideWhenEmpty) ||\n                  !property?.hideWhenEmpty\n                \"\n                class=\"widget-field__field\"\n              >\n                <label class=\"widget-field__field-label\" [attr.title]=\"property?.title\">\n                  {{ property?.title }}</label\n                >\n\n                <div [attr.title]=\"property?.value\" class=\"widget-field__field-value\">\n                  {{ property?.value | valtimoEllipsis: property?.ellipsisCharacterLimit }}\n                </div>\n              </div>\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</ng-container>\n", styles: [".widget-field{padding:24px}.widget-field__header{display:flex;align-items:center;justify-content:space-between}.widget-field,.widget-field__column{display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden}.widget-field__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.widget-field__container{display:grid;grid-gap:24px;grid-template-columns:repeat(4,1fr)}.widget-field__field{display:flex;width:100%;flex-direction:column;gap:8px}.widget-field__field-label{font-size:12px;color:var(--cds-text-secondary)}.widget-field__field-value{color:var(--cds-text-primary);padding:8px 16px;border-bottom:1px solid var(--cds-border-subtle-01);font-size:14px}.widget-field .cds--label{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.widget-field__render-vertically,.widget-field__render-two-columns,.widget-field__render-three-columns{display:grid;align-items:stretch;gap:24px}.widget-field__render-vertically{grid-template-columns:repeat(1,1fr)}.widget-field__render-two-columns{grid-template-columns:repeat(2,1fr)}.widget-field__render-three-columns{grid-template-columns:repeat(3,1fr)}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i2$2.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "pipe", type: EllipsisPipe, name: "valtimoEllipsis" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i5.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WidgetFieldComponent, decorators: [{
             type: Component,
@@ -2297,7 +2313,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         CarbonListModule,
                         EllipsisPipe,
                         ButtonModule,
-                    ], 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<ng-container\n  *ngIf=\"{\n    widgetConfiguration: widgetConfiguration$ | async,\n    widgetPropertyValue: widgetPropertyValue$ | async,\n    widgetData: widgetData$ | async,\n    isEmptyWidgetData: isEmptyWidgetData$ | async,\n  } as obs\"\n>\n  <section class=\"widget-field__header\">\n    <h4 class=\"widget-field__title\">{{ obs?.widgetConfiguration?.title }}</h4>\n\n    @if (obs.widgetConfiguration.actions?.length === 1) {\n      <button\n        *ngIf=\"canCreateCamundaExecution$ | async\"\n        cdsButton=\"ghost\"\n        (click)=\"onProcessStartClick(obs.widgetConfiguration.actions[0])\"\n      >\n        {{ obs.widgetConfiguration.actions[0].name }}\n      </button>\n    }\n  </section>\n\n  @if (obs?.isEmptyWidgetData) {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'dossier.widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  } @else {\n    <div\n      #widgetField\n      [ngClass]=\"{\n        'widget-field__render-vertically': renderVertically() === 1,\n        'widget-field__render-two-columns': renderVertically() === 2,\n        'widget-field__render-three-columns': renderVertically() === 3,\n        'widget-field__container': renderVertically() === 4,\n      }\"\n    >\n      @for (column of obs?.widgetPropertyValue; track column.key) {\n        <div class=\"widget-field__column\">\n          @for (property of column; track property) {\n            <div class=\"widget-field__field\">\n              <label class=\"widget-field__field-label\" [attr.title]=\"property?.title\">\n                {{ property?.title }}</label\n              >\n\n              <div [attr.title]=\"property?.value\" class=\"widget-field__field-value\">\n                {{ property?.value | valtimoEllipsis: property?.ellipsisCharacterLimit }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-container>\n", styles: [".widget-field{padding:24px}.widget-field__header{display:flex;align-items:center;justify-content:space-between}.widget-field,.widget-field__column{display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden}.widget-field__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.widget-field__container{display:grid;grid-gap:24px;grid-template-columns:repeat(4,1fr)}.widget-field__field{display:flex;width:100%;flex-direction:column;gap:8px}.widget-field__field-label{font-size:12px;color:var(--cds-text-secondary)}.widget-field__field-value{color:var(--cds-text-primary);padding:8px 16px;border-bottom:1px solid var(--cds-border-subtle-01);font-size:14px}.widget-field .cds--label{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.widget-field__render-vertically,.widget-field__render-two-columns,.widget-field__render-three-columns{display:grid;align-items:stretch;gap:24px}.widget-field__render-vertically{grid-template-columns:repeat(1,1fr)}.widget-field__render-two-columns{grid-template-columns:repeat(2,1fr)}.widget-field__render-three-columns{grid-template-columns:repeat(3,1fr)}\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"] }]
+                    ], 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<ng-container\n  *ngIf=\"{\n    widgetConfiguration: widgetConfiguration$ | async,\n    widgetPropertyValue: widgetPropertyValue$ | async,\n    widgetData: widgetData$ | async,\n    isEmptyWidgetData: isEmptyWidgetData$ | async,\n    noVisibleFields: noVisibleFields$ | async,\n  } as obs\"\n>\n  <section class=\"widget-field__header\">\n    <h4 class=\"widget-field__title\">{{ obs?.widgetConfiguration?.title }}</h4>\n\n    @if (obs.widgetConfiguration.actions?.length === 1) {\n      <button\n        *ngIf=\"canCreateCamundaExecution$ | async\"\n        cdsButton=\"ghost\"\n        (click)=\"onProcessStartClick(obs.widgetConfiguration.actions[0])\"\n      >\n        {{ obs.widgetConfiguration.actions[0].name }}\n      </button>\n    }\n  </section>\n\n  @if (obs?.isEmptyWidgetData) {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'dossier.widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  } @else {\n    <div\n      #widgetField\n      [ngClass]=\"{\n        'widget-field__render-vertically': renderVertically() === 1,\n        'widget-field__render-two-columns': renderVertically() === 2,\n        'widget-field__render-three-columns': renderVertically() === 3,\n        'widget-field__container': renderVertically() === 4,\n      }\"\n    >\n      @if (obs.noVisibleFields) {\n        <valtimo-no-results\n          [collapseVertically]=\"true\"\n          [description]=\"'dossier.widgets.emptyFields' | translate\"\n          [smallPadding]=\"true\"\n        ></valtimo-no-results>\n      } @else {\n        @for (column of obs?.widgetPropertyValue; track column.key) {\n          <div class=\"widget-field__column\">\n            @for (property of column; track property) {\n              <div\n                *ngIf=\"\n                  (property?.value !== null &&\n                    property?.value !== '-' &&\n                    property?.hideWhenEmpty) ||\n                  !property?.hideWhenEmpty\n                \"\n                class=\"widget-field__field\"\n              >\n                <label class=\"widget-field__field-label\" [attr.title]=\"property?.title\">\n                  {{ property?.title }}</label\n                >\n\n                <div [attr.title]=\"property?.value\" class=\"widget-field__field-value\">\n                  {{ property?.value | valtimoEllipsis: property?.ellipsisCharacterLimit }}\n                </div>\n              </div>\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</ng-container>\n", styles: [".widget-field{padding:24px}.widget-field__header{display:flex;align-items:center;justify-content:space-between}.widget-field,.widget-field__column{display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden}.widget-field__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.widget-field__container{display:grid;grid-gap:24px;grid-template-columns:repeat(4,1fr)}.widget-field__field{display:flex;width:100%;flex-direction:column;gap:8px}.widget-field__field-label{font-size:12px;color:var(--cds-text-secondary)}.widget-field__field-value{color:var(--cds-text-primary);padding:8px 16px;border-bottom:1px solid var(--cds-border-subtle-01);font-size:14px}.widget-field .cds--label{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.widget-field__render-vertically,.widget-field__render-two-columns,.widget-field__render-three-columns{display:grid;align-items:stretch;gap:24px}.widget-field__render-vertically{grid-template-columns:repeat(1,1fr)}.widget-field__render-two-columns{grid-template-columns:repeat(2,1fr)}.widget-field__render-three-columns{grid-template-columns:repeat(3,1fr)}\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: i2$1.DocumentService }, { type: i2$4.PermissionService }, { type: i1$1.ActivatedRoute }, { type: i2$2.ViewContentService }, { type: WidgetsService }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
@@ -2560,6 +2576,7 @@ class WidgetCollectionComponent extends WidgetProcess {
         this.class = 'valtimo-widget-collection';
         this.showPagination$ = new BehaviorSubject(false);
         this._initialNumberOfElementsSubject$ = new BehaviorSubject(null);
+        this.noVisibleFields$ = new BehaviorSubject(true);
         this.widgetTitle = signal('-');
         this.widgetConfiguration$ = new BehaviorSubject(null);
         this.paginationModel = signal(new PaginationModel());
@@ -2585,7 +2602,9 @@ class WidgetCollectionComponent extends WidgetProcess {
             const rows = new Array(initialNumberOfElements).fill(null);
             return rows.map((_, index) => items[index] || { ...items[0], hidden: true });
         }));
-        this.collectionWidgetCards$ = combineLatest([this.widgetConfiguration$, this._widgetData$]).pipe(filter(([widgetConfig, widgetData]) => !!widgetConfig && !!widgetData), tap(([widgetConfig]) => this.widgetTitle.set(widgetConfig.title)), map(([widgetConfig, widgetData]) => widgetData.map((cardData, index) => ({
+        this.collectionWidgetCards$ = combineLatest([this.widgetConfiguration$, this._widgetData$]).pipe(filter(([widgetConfig, widgetData]) => !!widgetConfig && !!widgetData), tap(([widgetConfig]) => {
+            this.widgetTitle.set(widgetConfig.title);
+        }), map(([widgetConfig, widgetData]) => widgetData.map((cardData, index) => ({
             hidden: cardData.hidden,
             key: index,
             title: this.getCardTitle({
@@ -2596,7 +2615,7 @@ class WidgetCollectionComponent extends WidgetProcess {
                 ...cardFieldsAccumulator,
                 this.getCardField(currentField, cardData),
             ], []),
-        }))));
+        }))), tap(card => this.checkEmptyFields(card)));
     }
     ngAfterViewInit() {
         this.openWidthObserver();
@@ -2624,6 +2643,7 @@ class WidgetCollectionComponent extends WidgetProcess {
             title: field.title,
             width: field.width,
             value: resolvedValue || data.fields[field.key],
+            hideWhenEmpty: field.displayProperties?.hideWhenEmpty,
         };
     }
     openWidthObserver() {
@@ -2659,14 +2679,23 @@ class WidgetCollectionComponent extends WidgetProcess {
             const convertedTitle = this.viewContentService.get(widgetTitleValue, {
                 ...widgetTitleDisplayProperties,
                 viewType: widgetTitleDisplayProperties.type,
+                hideWhenEmpty: widgetTitleDisplayProperties.hideWhenEmpty,
             });
             if (convertedTitle)
                 return convertedTitle;
         }
         return '-';
     }
+    checkEmptyFields(card) {
+        card.forEach(collection => {
+            collection.fields.forEach(field => {
+                if (!field.hideWhenEmpty || (field.hideWhenEmpty && field.value && field.value !== '-'))
+                    this.noVisibleFields$.next(false);
+            });
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WidgetCollectionComponent, deps: [{ token: i2$1.DocumentService }, { token: i2$4.PermissionService }, { token: i2$2.ViewContentService }, { token: i0.ChangeDetectorRef }, { token: DossierWidgetsApiService }, { token: WidgetsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: WidgetCollectionComponent, isStandalone: true, selector: "valtimo-widget-collection", inputs: { documentId: "documentId", tabKey: "tabKey", widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_widgetCollectionRef", first: true, predicate: ["widgetCollection"], 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\n<ng-container\n  *ngIf=\"{\n    widgetConfiguration: widgetConfiguration$ | async,\n    collectionWidgetCards: collectionWidgetCards$ | async,\n  } as obs\"\n>\n  <section class=\"valtimo-widget-collection__header\">\n    <span class=\"valtimo-widget-collection__title\">{{ widgetTitle() }}</span>\n\n    @if (obs.widgetConfiguration?.actions?.length === 1) {\n      <button\n        *ngIf=\"canCreateCamundaExecution$ | async\"\n        cdsButton=\"ghost\"\n        (click)=\"onProcessStartClick(obs.widgetConfiguration?.actions[0])\"\n      >\n        {{ obs.widgetConfiguration?.actions[0].name }}\n      </button>\n    }\n  </section>\n\n  <div\n    #widgetCollection\n    [ngClass]=\"{\n      'valtimo-widget-collection__render-vertically': amountOfColumns() === 1,\n      'valtimo-widget-collection__render-two-columns': amountOfColumns() === 2,\n      'valtimo-widget-collection__render-three-columns': amountOfColumns() === 3,\n      'valtimo-widget-collection__container': amountOfColumns() === 4,\n    }\"\n  >\n    @for (card of obs?.collectionWidgetCards; track card.key) {\n      <div\n        class=\"valtimo-widget-collection__card\"\n        [ngClass]=\"{'valtimo-widget-collection__card--hidden': card.hidden}\"\n      >\n        <span class=\"valtimo-widget-collection__card-title\">{{ card.title }}</span>\n\n        @for (field of card.fields; track field.key) {\n          <div\n            [ngClass]=\"{\n              'valtimo-widget-collection__full-width-input': field?.width === 'full',\n              'valtimo-widget-collection__half-width-input': field?.width === 'half',\n            }\"\n          >\n            <cds-label class=\"valtimo-widget-collection__label\" [attr.title]=\"field?.title\">\n              {{ field?.title }}\n\n              <input\n                [value]=\"field?.value\"\n                [readonly]=\"true\"\n                class=\"valtimo-widget-collection__card-input\"\n                cdsText\n              />\n            </cds-label>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  @if (!obs?.collectionWidgetCards?.length) {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'dossier.widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  }\n\n  <cds-pagination-nav\n    *ngIf=\"paginationModel() && (showPagination$ | async)\"\n    class=\"valtimo-widget-collection__pagination\"\n    [model]=\"paginationModel()\"\n    (selectPage)=\"onSelectPage($event)\"\n  >\n  </cds-pagination-nav>\n</ng-container>\n", styles: [".valtimo-widget-collection{padding:24px}.valtimo-widget-collection .cds--label{overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-collection__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-collection__container{display:flex;column-gap:16px}.valtimo-widget-collection,.valtimo-widget-collection__column{display:flex;flex-direction:column;width:100%;overflow:hidden}.valtimo-widget-collection__card{margin-top:16px;display:flex;flex-flow:row wrap;background-color:var(--cds-background);padding:16px;width:100%;gap:16px}.valtimo-widget-collection__card--hidden{visibility:hidden}.valtimo-widget-collection__card-title{color:var(--cds-text-primary);font-weight:500;font-size:14px;line-height:22px;font-style:italic;width:100%}.valtimo-widget-collection__card-input{background:transparent}.valtimo-widget-collection__full-width-input{width:100%}.valtimo-widget-collection__half-width-input{width:calc(50% - 16px);box-sizing:border-box}.valtimo-widget-collection__pagination{padding:8px 0;display:flex;justify-content:center}.valtimo-widget-collection__render-vertically,.valtimo-widget-collection__render-two-columns,.valtimo-widget-collection__render-three-columns{grid-gap:16px;align-items:stretch;overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__render-vertically{display:flex!important}.valtimo-widget-collection__render-two-columns{grid-template-columns:repeat(2,1fr)}.valtimo-widget-collection__render-three-columns{grid-template-columns:repeat(3,1fr)}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i5.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i5.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: PaginationModule }, { kind: "component", type: i5.PaginationNav, selector: "cds-pagination-nav, ibm-pagination-navm", inputs: ["model", "disabled", "numOfItemsToShow", "translations"], outputs: ["selectPage"] }, { kind: "ngmodule", type: TilesModule }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i2$2.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i5.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: WidgetCollectionComponent, isStandalone: true, selector: "valtimo-widget-collection", inputs: { documentId: "documentId", tabKey: "tabKey", widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_widgetCollectionRef", first: true, predicate: ["widgetCollection"], 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\n<ng-container\n  *ngIf=\"{\n    widgetConfiguration: widgetConfiguration$ | async,\n    collectionWidgetCards: collectionWidgetCards$ | async,\n    noVisibleFields: noVisibleFields$ | async,\n  } as obs\"\n>\n  <section class=\"valtimo-widget-collection__header\">\n    <span class=\"valtimo-widget-collection__title\">{{ widgetTitle() }}</span>\n\n    @if (obs.widgetConfiguration?.actions?.length === 1) {\n      <button\n        *ngIf=\"canCreateCamundaExecution$ | async\"\n        cdsButton=\"ghost\"\n        (click)=\"onProcessStartClick(obs.widgetConfiguration?.actions[0])\"\n      >\n        {{ obs.widgetConfiguration?.actions[0].name }}\n      </button>\n    }\n  </section>\n\n  <div\n    #widgetCollection\n    [ngClass]=\"{\n      'valtimo-widget-collection__render-vertically': amountOfColumns() === 1,\n      'valtimo-widget-collection__render-two-columns': amountOfColumns() === 2,\n      'valtimo-widget-collection__render-three-columns': amountOfColumns() === 3,\n      'valtimo-widget-collection__container': amountOfColumns() === 4,\n    }\"\n  >\n    @for (card of obs?.collectionWidgetCards; track card.key) {\n      <div\n        *ngIf=\"!obs.noVisibleFields\"\n        class=\"valtimo-widget-collection__card\"\n        [ngClass]=\"{'valtimo-widget-collection__card--hidden': card.hidden}\"\n      >\n        <span class=\"valtimo-widget-collection__card-title\">{{ card.title }}</span>\n\n        @for (field of card.fields; track field.key) {\n          <div\n            *ngIf=\"\n              (field?.value !== null && field?.value !== '-' && field?.hideWhenEmpty) ||\n              !field?.hideWhenEmpty\n            \"\n            [ngClass]=\"{\n              'valtimo-widget-collection__full-width-input': field?.width === 'full',\n              'valtimo-widget-collection__half-width-input': field?.width === 'half',\n            }\"\n          >\n            <cds-label class=\"valtimo-widget-collection__label\" [attr.title]=\"field?.title\">\n              {{ field?.title }}\n\n              <input\n                [value]=\"field?.value\"\n                [readonly]=\"true\"\n                class=\"valtimo-widget-collection__card-input\"\n                cdsText\n              />\n            </cds-label>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  @if (obs.noVisibleFields) {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'dossier.widgets.emptyFields' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  }\n\n  @if (!obs?.collectionWidgetCards?.length) {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'dossier.widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  }\n\n  <cds-pagination-nav\n    *ngIf=\"paginationModel() && (showPagination$ | async)\"\n    class=\"valtimo-widget-collection__pagination\"\n    [model]=\"paginationModel()\"\n    (selectPage)=\"onSelectPage($event)\"\n  >\n  </cds-pagination-nav>\n</ng-container>\n", styles: [".valtimo-widget-collection{padding:24px}.valtimo-widget-collection .cds--label{overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-collection__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-collection__container{display:flex;column-gap:16px}.valtimo-widget-collection,.valtimo-widget-collection__column{display:flex;flex-direction:column;width:100%;overflow:hidden}.valtimo-widget-collection__card{margin-top:16px;display:flex;flex-flow:row wrap;background-color:var(--cds-background);padding:16px;width:100%;gap:16px}.valtimo-widget-collection__card--hidden{visibility:hidden}.valtimo-widget-collection__card-title{color:var(--cds-text-primary);font-weight:500;font-size:14px;line-height:22px;font-style:italic;width:100%}.valtimo-widget-collection__card-input{background:transparent}.valtimo-widget-collection__full-width-input{width:100%}.valtimo-widget-collection__half-width-input{width:calc(50% - 16px);box-sizing:border-box}.valtimo-widget-collection__pagination{padding:8px 0;display:flex;justify-content:center}.valtimo-widget-collection__render-vertically,.valtimo-widget-collection__render-two-columns,.valtimo-widget-collection__render-three-columns{grid-gap:16px;align-items:stretch;overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__render-vertically{display:flex!important}.valtimo-widget-collection__render-two-columns{grid-template-columns:repeat(2,1fr)}.valtimo-widget-collection__render-three-columns{grid-template-columns:repeat(3,1fr)}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i5.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i5.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: PaginationModule }, { kind: "component", type: i5.PaginationNav, selector: "cds-pagination-nav, ibm-pagination-navm", inputs: ["model", "disabled", "numOfItemsToShow", "translations"], outputs: ["selectPage"] }, { kind: "ngmodule", type: TilesModule }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i2$2.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i5.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WidgetCollectionComponent, decorators: [{
             type: Component,
@@ -2678,7 +2707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         CarbonListModule,
                         TranslateModule,
                         ButtonModule,
-                    ], 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<ng-container\n  *ngIf=\"{\n    widgetConfiguration: widgetConfiguration$ | async,\n    collectionWidgetCards: collectionWidgetCards$ | async,\n  } as obs\"\n>\n  <section class=\"valtimo-widget-collection__header\">\n    <span class=\"valtimo-widget-collection__title\">{{ widgetTitle() }}</span>\n\n    @if (obs.widgetConfiguration?.actions?.length === 1) {\n      <button\n        *ngIf=\"canCreateCamundaExecution$ | async\"\n        cdsButton=\"ghost\"\n        (click)=\"onProcessStartClick(obs.widgetConfiguration?.actions[0])\"\n      >\n        {{ obs.widgetConfiguration?.actions[0].name }}\n      </button>\n    }\n  </section>\n\n  <div\n    #widgetCollection\n    [ngClass]=\"{\n      'valtimo-widget-collection__render-vertically': amountOfColumns() === 1,\n      'valtimo-widget-collection__render-two-columns': amountOfColumns() === 2,\n      'valtimo-widget-collection__render-three-columns': amountOfColumns() === 3,\n      'valtimo-widget-collection__container': amountOfColumns() === 4,\n    }\"\n  >\n    @for (card of obs?.collectionWidgetCards; track card.key) {\n      <div\n        class=\"valtimo-widget-collection__card\"\n        [ngClass]=\"{'valtimo-widget-collection__card--hidden': card.hidden}\"\n      >\n        <span class=\"valtimo-widget-collection__card-title\">{{ card.title }}</span>\n\n        @for (field of card.fields; track field.key) {\n          <div\n            [ngClass]=\"{\n              'valtimo-widget-collection__full-width-input': field?.width === 'full',\n              'valtimo-widget-collection__half-width-input': field?.width === 'half',\n            }\"\n          >\n            <cds-label class=\"valtimo-widget-collection__label\" [attr.title]=\"field?.title\">\n              {{ field?.title }}\n\n              <input\n                [value]=\"field?.value\"\n                [readonly]=\"true\"\n                class=\"valtimo-widget-collection__card-input\"\n                cdsText\n              />\n            </cds-label>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  @if (!obs?.collectionWidgetCards?.length) {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'dossier.widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  }\n\n  <cds-pagination-nav\n    *ngIf=\"paginationModel() && (showPagination$ | async)\"\n    class=\"valtimo-widget-collection__pagination\"\n    [model]=\"paginationModel()\"\n    (selectPage)=\"onSelectPage($event)\"\n  >\n  </cds-pagination-nav>\n</ng-container>\n", styles: [".valtimo-widget-collection{padding:24px}.valtimo-widget-collection .cds--label{overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-collection__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-collection__container{display:flex;column-gap:16px}.valtimo-widget-collection,.valtimo-widget-collection__column{display:flex;flex-direction:column;width:100%;overflow:hidden}.valtimo-widget-collection__card{margin-top:16px;display:flex;flex-flow:row wrap;background-color:var(--cds-background);padding:16px;width:100%;gap:16px}.valtimo-widget-collection__card--hidden{visibility:hidden}.valtimo-widget-collection__card-title{color:var(--cds-text-primary);font-weight:500;font-size:14px;line-height:22px;font-style:italic;width:100%}.valtimo-widget-collection__card-input{background:transparent}.valtimo-widget-collection__full-width-input{width:100%}.valtimo-widget-collection__half-width-input{width:calc(50% - 16px);box-sizing:border-box}.valtimo-widget-collection__pagination{padding:8px 0;display:flex;justify-content:center}.valtimo-widget-collection__render-vertically,.valtimo-widget-collection__render-two-columns,.valtimo-widget-collection__render-three-columns{grid-gap:16px;align-items:stretch;overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__render-vertically{display:flex!important}.valtimo-widget-collection__render-two-columns{grid-template-columns:repeat(2,1fr)}.valtimo-widget-collection__render-three-columns{grid-template-columns:repeat(3,1fr)}\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"] }]
+                    ], 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<ng-container\n  *ngIf=\"{\n    widgetConfiguration: widgetConfiguration$ | async,\n    collectionWidgetCards: collectionWidgetCards$ | async,\n    noVisibleFields: noVisibleFields$ | async,\n  } as obs\"\n>\n  <section class=\"valtimo-widget-collection__header\">\n    <span class=\"valtimo-widget-collection__title\">{{ widgetTitle() }}</span>\n\n    @if (obs.widgetConfiguration?.actions?.length === 1) {\n      <button\n        *ngIf=\"canCreateCamundaExecution$ | async\"\n        cdsButton=\"ghost\"\n        (click)=\"onProcessStartClick(obs.widgetConfiguration?.actions[0])\"\n      >\n        {{ obs.widgetConfiguration?.actions[0].name }}\n      </button>\n    }\n  </section>\n\n  <div\n    #widgetCollection\n    [ngClass]=\"{\n      'valtimo-widget-collection__render-vertically': amountOfColumns() === 1,\n      'valtimo-widget-collection__render-two-columns': amountOfColumns() === 2,\n      'valtimo-widget-collection__render-three-columns': amountOfColumns() === 3,\n      'valtimo-widget-collection__container': amountOfColumns() === 4,\n    }\"\n  >\n    @for (card of obs?.collectionWidgetCards; track card.key) {\n      <div\n        *ngIf=\"!obs.noVisibleFields\"\n        class=\"valtimo-widget-collection__card\"\n        [ngClass]=\"{'valtimo-widget-collection__card--hidden': card.hidden}\"\n      >\n        <span class=\"valtimo-widget-collection__card-title\">{{ card.title }}</span>\n\n        @for (field of card.fields; track field.key) {\n          <div\n            *ngIf=\"\n              (field?.value !== null && field?.value !== '-' && field?.hideWhenEmpty) ||\n              !field?.hideWhenEmpty\n            \"\n            [ngClass]=\"{\n              'valtimo-widget-collection__full-width-input': field?.width === 'full',\n              'valtimo-widget-collection__half-width-input': field?.width === 'half',\n            }\"\n          >\n            <cds-label class=\"valtimo-widget-collection__label\" [attr.title]=\"field?.title\">\n              {{ field?.title }}\n\n              <input\n                [value]=\"field?.value\"\n                [readonly]=\"true\"\n                class=\"valtimo-widget-collection__card-input\"\n                cdsText\n              />\n            </cds-label>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  @if (obs.noVisibleFields) {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'dossier.widgets.emptyFields' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  }\n\n  @if (!obs?.collectionWidgetCards?.length) {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'dossier.widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  }\n\n  <cds-pagination-nav\n    *ngIf=\"paginationModel() && (showPagination$ | async)\"\n    class=\"valtimo-widget-collection__pagination\"\n    [model]=\"paginationModel()\"\n    (selectPage)=\"onSelectPage($event)\"\n  >\n  </cds-pagination-nav>\n</ng-container>\n", styles: [".valtimo-widget-collection{padding:24px}.valtimo-widget-collection .cds--label{overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-collection__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-collection__container{display:flex;column-gap:16px}.valtimo-widget-collection,.valtimo-widget-collection__column{display:flex;flex-direction:column;width:100%;overflow:hidden}.valtimo-widget-collection__card{margin-top:16px;display:flex;flex-flow:row wrap;background-color:var(--cds-background);padding:16px;width:100%;gap:16px}.valtimo-widget-collection__card--hidden{visibility:hidden}.valtimo-widget-collection__card-title{color:var(--cds-text-primary);font-weight:500;font-size:14px;line-height:22px;font-style:italic;width:100%}.valtimo-widget-collection__card-input{background:transparent}.valtimo-widget-collection__full-width-input{width:100%}.valtimo-widget-collection__half-width-input{width:calc(50% - 16px);box-sizing:border-box}.valtimo-widget-collection__pagination{padding:8px 0;display:flex;justify-content:center}.valtimo-widget-collection__render-vertically,.valtimo-widget-collection__render-two-columns,.valtimo-widget-collection__render-three-columns{grid-gap:16px;align-items:stretch;overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__render-vertically{display:flex!important}.valtimo-widget-collection__render-two-columns{grid-template-columns:repeat(2,1fr)}.valtimo-widget-collection__render-three-columns{grid-template-columns:repeat(3,1fr)}\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: i2$1.DocumentService }, { type: i2$4.PermissionService }, { type: i2$2.ViewContentService }, { type: i0.ChangeDetectorRef }, { type: DossierWidgetsApiService }, { type: WidgetsService }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
@@ -3889,15 +3918,17 @@ class DossierSupportingProcessStartModalComponent {
             this.processDefinitionKey$,
             this.documentDefinitionName$,
             this.options$,
+            this.documentId$,
         ])
             .pipe(take$1(1))
-            .subscribe(([form, processDefinitionKey, documentDefinitionName, options]) => {
+            .subscribe(([form, processDefinitionKey, documentDefinitionName, options, documentId]) => {
             formViewModelComponent.instance.formName = formName;
             formViewModelComponent.instance.form = form;
             formViewModelComponent.instance.processDefinitionKey = processDefinitionKey;
             formViewModelComponent.instance.documentDefinitionName = documentDefinitionName;
             formViewModelComponent.instance.options = options;
             formViewModelComponent.instance.isStartForm = true;
+            formViewModelComponent.instance.documentId = documentId;
         });
         formViewModelComponent.instance.formSubmit.pipe(take$1(1)).subscribe(() => {
             this.formSubmitted();
@@ -3908,15 +3939,16 @@ class DossierSupportingProcessStartModalComponent {
         this.formCustomComponentDynamicContainer.clear();
         if (!this.formCustomComponentConfig)
             return;
-        this._formCustomComponentConfig$.pipe(take$1(1)).subscribe((formCustomComponentConfig) => {
+        this._formCustomComponentConfig$.pipe(take$1(1)).subscribe(formCustomComponentConfig => {
             const customComponent = formCustomComponentConfig[formCustomComponentKey];
             const renderedComponent = this.formCustomComponentDynamicContainer.createComponent(customComponent);
-            combineLatest([this.processDefinitionKey$, this.documentDefinitionName$]).pipe(take$1(1))
+            combineLatest([this.processDefinitionKey$, this.documentDefinitionName$])
+                .pipe(take$1(1))
                 .subscribe(([processDefinitionKey, documentDefinitionName]) => {
                 renderedComponent.instance.processDefinitionKey = processDefinitionKey;
                 renderedComponent.instance.documentDefinitionName = documentDefinitionName;
             });
-            renderedComponent.instance.submitEvent.subscribe(() => {
+            renderedComponent.instance.submittedEvent.subscribe(() => {
                 this.formSubmitted();
             });
         });
@@ -4139,6 +4171,7 @@ class DossierDetailComponent extends PendingChangesComponent {
         this.taskAndProcessLinkOpenedInPanel$ = this.dossierDetailLayoutService.taskAndProcessLinkOpenedInPanel$;
         this._caseStatusKey$ = new BehaviorSubject(null);
         this._taskPanelToggle = this.configService.featureToggles?.enableTaskPanel;
+        this.dropdownWidth$ = new BehaviorSubject(DOSSIER_DETAIL_START_PROCESS_DROPDOWN_WIDTH.small);
         this.caseStatusKey$ = this._caseStatusKey$.pipe(filter(key => !!key));
         this.showDeleteModal$ = new BehaviorSubject(false);
         this.canView$ = this.route.paramMap.pipe(switchMap((params) => this.permissionService.requestPermission(CAN_VIEW_CASE_PERMISSION, {
@@ -4225,17 +4258,21 @@ class DossierDetailComponent extends PendingChangesComponent {
         this._subscriptions.unsubscribe();
     }
     getAllAssociatedProcessDefinitions() {
-        this.documentService
-            .findProcessDocumentDefinitionsForDocument(this.documentId, { startableByUser: true })
-            .subscribe((processDocumentDefinitions) => {
-            this.processDocumentDefinitions = processDocumentDefinitions;
+        this._subscriptions.add(combineLatest([
+            this.documentService.findProcessDocumentDefinitionsForDocument(this.documentId, {
+                startableByUser: true,
+            }),
+            this.translateService.stream('key'),
+        ]).subscribe(([processDocumentDefinitions]) => {
+            this.processDocumentDefinitions = this.mapProcessDocumentDefinitions(processDocumentDefinitions);
+            this.setProcessDropdownWidth();
             this.processDefinitionListFields = [
                 {
                     key: 'processName',
                     label: 'Proces',
                 },
             ];
-        });
+        }));
     }
     startProcess(processDocumentDefinition) {
         this.supportingProcessStart.openModal(processDocumentDefinition, this.documentId);
@@ -4478,12 +4515,29 @@ class DossierDetailComponent extends PendingChangesComponent {
             duration: CARBON_CONSTANTS.notificationDuration,
         });
     }
+    mapProcessDocumentDefinitions(processDocumentDefinitions) {
+        return processDocumentDefinitions.map((processDocoumentDefinition) => ({
+            ...processDocoumentDefinition,
+            displayName: this.translateService.instant(processDocoumentDefinition?.id?.processDefinitionKey) !==
+                processDocoumentDefinition?.id?.processDefinitionKey
+                ? this.translateService.instant(processDocoumentDefinition.id.processDefinitionKey)
+                : processDocoumentDefinition.processName,
+        }));
+    }
+    setProcessDropdownWidth() {
+        const longestName = this.processDocumentDefinitions.reduce((acc, curr) => !!curr.displayName && curr.displayName.length > acc ? curr.displayName.length : acc, 0);
+        this.dropdownWidth$.next(longestName < 20
+            ? DOSSIER_DETAIL_START_PROCESS_DROPDOWN_WIDTH.small
+            : longestName < 40
+                ? DOSSIER_DETAIL_START_PROCESS_DROPDOWN_WIDTH.medium
+                : DOSSIER_DETAIL_START_PROCESS_DROPDOWN_WIDTH.large);
+    }
     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 *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\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\">{{ obs.caseStatus.title }}</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]=\"250\"\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            (click)=\"startProcess(processDocumentDefinition)\"\n          >\n            {{\n              (processDocumentDefinition?.id?.processDefinitionKey | translate) !==\n              processDocumentDefinition?.id?.processDefinitionKey\n                ? (processDocumentDefinition.id.processDefinitionKey | translate)\n                : processDocumentDefinition.processName\n            }}\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;height:var(--cds-layout-size-height-md)}.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=)}\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 *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\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=)}\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 *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\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\">{{ obs.caseStatus.title }}</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]=\"250\"\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            (click)=\"startProcess(processDocumentDefinition)\"\n          >\n            {{\n              (processDocumentDefinition?.id?.processDefinitionKey | translate) !==\n              processDocumentDefinition?.id?.processDefinitionKey\n                ? (processDocumentDefinition.id.processDefinitionKey | translate)\n                : processDocumentDefinition.processName\n            }}\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;height:var(--cds-layout-size-height-md)}.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=)}\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 *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\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=)}\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]
@@ -4691,12 +4745,12 @@ class DossierProcessStartModalComponent {
         this.formCustomComponentDynamicContainer.clear();
         if (!this.formCustomComponentConfig)
             return;
-        this._formCustomComponentConfig$.pipe(take$1(1)).subscribe((formCustomComponentConfig) => {
+        this._formCustomComponentConfig$.pipe(take$1(1)).subscribe(formCustomComponentConfig => {
             const customComponent = formCustomComponentConfig[formCustomComponentKey];
             const renderedComponent = this.formCustomComponentDynamicContainer.createComponent(customComponent);
             renderedComponent.instance.processDefinitionKey = this.processDefinitionKey;
             renderedComponent.instance.documentDefinitionName = this.documentDefinitionName;
-            renderedComponent.instance.submitEvent.subscribe(() => {
+            renderedComponent.instance.submittedEvent.subscribe(() => {
                 this.modal.hide();
             });
         });
@@ -4922,12 +4976,16 @@ class DossierListComponent {
             });
         }));
         this.showStatusSelector$ = this.statusService.showStatusSelector$;
+        this.INTERNAL_STATUS_COLUMN = 'internalStatus';
         this._statusField = {
             label: 'document.status',
-            key: 'internalStatus',
+            key: this.INTERNAL_STATUS_COLUMN,
             viewType: ViewType.TAGS,
             sortable: true,
         };
+        this._internalStatusKeys$ = new BehaviorSubject([
+            this.INTERNAL_STATUS_COLUMN,
+        ]);
         this.fields$ = combineLatest([
             this._canHaveAssignee$,
             this._columns$,
@@ -4938,6 +4996,10 @@ class DossierListComponent {
         ]).pipe(tap(([canHaveAssignee]) => {
             this.canHaveAssignee = canHaveAssignee;
         }), map(([canHaveAssignee, columns, hasEnvConfig, hasApiConfig, statuses]) => {
+            this._internalStatusKeys$.next([
+                ...this._internalStatusKeys$.getValue(),
+                ...columns.reduce((acc, curr) => curr.propertyName === this.INTERNAL_STATUS_COLUMN ? [...acc, curr.translationKey] : acc, []),
+            ]);
             const filteredAssigneeColumns = this.assigneeService.filterAssigneeColumns(columns, canHaveAssignee);
             const listFields = this.columnService.mapDefinitionColumnsToListFields(filteredAssigneeColumns, hasEnvConfig, hasApiConfig);
             const fieldsToReturn = this.assigneeService.addAssigneeListField(columns, listFields, canHaveAssignee);
@@ -5018,7 +5080,8 @@ class DossierListComponent {
                 identifier: document.id,
             })
                 .pipe(take(1)))).pipe(defaultIfEmpty([])),
-        ])), map(([res, documentsAuthorization]) => ({
+            this._internalStatusKeys$,
+        ])), map(([res, documentsAuthorization, statusColumnKeys]) => ({
             ...res,
             documents: {
                 ...res.documents,
@@ -5027,6 +5090,7 @@ class DossierListComponent {
                     locked: !documentsAuthorization[index],
                 })),
             },
+            statusColumnKeys,
         })), map((res) => {
             this.paginationService.setCollectionSize(res.documents);
             this.paginationService.checkPage(res.documents);
@@ -5034,22 +5098,27 @@ class DossierListComponent {
             return {
                 data: this.listService.mapDocuments(res.documents, res.hasEnvColumnConfig, res.hasApiColumnConfig),
                 statuses: res.allStatuses,
+                statusColumnKeys: res.statusColumnKeys,
             };
         }), map(res => {
             if (!Array.isArray(res.data))
                 return res.data;
             return res.data.map(item => {
-                const status = res.statuses.find((status) => status.key === item.internalStatus || status.key === item.status);
-                if (!status)
-                    return item;
+                const mappedInternalStatusColumns = res.statusColumnKeys.reduce((acc, curr) => {
+                    const status = res.statuses.find((status) => status.key === item[curr] || status.key === item.status);
+                    return !status
+                        ? acc
+                        : {
+                            ...acc,
+                            [curr]: {
+                                content: status.title,
+                                type: InternalCaseStatusUtils.getTagTypeFromInternalCaseStatusColor(status.color),
+                            },
+                        };
+                }, {});
                 return {
                     ...item,
-                    tags: [
-                        {
-                            content: status.title,
-                            type: InternalCaseStatusUtils.getTagTypeFromInternalCaseStatusColor(status.color),
-                        },
-                    ],
+                    ...mappedInternalStatusColumns,
                 };
             });
         }), tap(() => {
@@ -5758,5 +5827,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ApiTabType, CASE_TAB_TOKEN, CASE_WITHOUT_STATUS_STATUS, CUSTOM_CASE_WIDGET_TOKEN, CaseWidgetDisplayTypeKey, CaseWidgetType, DEFAULT_DOSSIER_LIST_TABS, DEFAULT_TABS, DEFAULT_TAB_COMPONENTS, DOSSIER_DETAIL_DEFAULT_DISPLAY_SIZE, DOSSIER_DETAIL_DEFAULT_DISPLAY_TYPE, DOSSIER_DETAIL_GUTTER_SIZE, DOSSIER_DETAIL_LEFT_PANEL_MIN_WIDTH, DOSSIER_DETAIL_RIGHT_PANEL_MIN_WIDTHS, DOSSIER_DETAIL_TASK_LIST_WIDTH, DOSSIER_LIST_NO_RESULTS_MESSAGE, DOSSIER_LIST_TABLE_TRANSLATIONS, DefaultTabs, DossierBulkAssignModalComponent, DossierBulkAssignService, DossierColumnService, DossierDetailComponent, DossierDetailLayoutService, DossierDetailTabAuditComponent, DossierDetailTabDocumentsComponent, DossierDetailTabNotesComponent, DossierDetailTabProgressComponent, DossierDetailTabSummaryComponent, DossierListAssigneeService, DossierListComponent, DossierListPaginationService, DossierListSearchService, DossierListService, DossierListStatusService, DossierModule, DossierParameterService, DossierProcessStartModalComponent, DossierService, DossierTabApiService, DossierTabService, DossierWidgetsApiService, DossierWidgetsLayoutService, StartModalService, TAB_MAP, TabImpl, TabLoaderImpl, WIDGET_HEIGHT_1X, WIDGET_WIDTH_1X };
+export { ApiTabType, CASE_TAB_TOKEN, CASE_WITHOUT_STATUS_STATUS, CUSTOM_CASE_WIDGET_TOKEN, CaseWidgetDisplayTypeKey, CaseWidgetType, DEFAULT_DOSSIER_LIST_TABS, DEFAULT_TABS, DEFAULT_TAB_COMPONENTS, DOSSIER_DETAIL_DEFAULT_DISPLAY_SIZE, DOSSIER_DETAIL_DEFAULT_DISPLAY_TYPE, DOSSIER_DETAIL_GUTTER_SIZE, DOSSIER_DETAIL_LEFT_PANEL_MIN_WIDTH, DOSSIER_DETAIL_RIGHT_PANEL_MIN_WIDTHS, DOSSIER_DETAIL_START_PROCESS_DROPDOWN_WIDTH, DOSSIER_DETAIL_TASK_LIST_WIDTH, DOSSIER_LIST_NO_RESULTS_MESSAGE, DOSSIER_LIST_TABLE_TRANSLATIONS, DefaultTabs, DossierBulkAssignModalComponent, DossierBulkAssignService, DossierColumnService, DossierDetailComponent, DossierDetailLayoutService, DossierDetailTabAuditComponent, DossierDetailTabDocumentsComponent, DossierDetailTabNotesComponent, DossierDetailTabProgressComponent, DossierDetailTabSummaryComponent, DossierListAssigneeService, DossierListComponent, DossierListPaginationService, DossierListSearchService, DossierListService, DossierListStatusService, DossierModule, DossierParameterService, DossierProcessStartModalComponent, DossierService, DossierTabApiService, DossierTabService, DossierWidgetsApiService, DossierWidgetsLayoutService, StartModalService, TAB_MAP, TabImpl, TabLoaderImpl, WIDGET_HEIGHT_1X, WIDGET_WIDTH_1X };
 //# sourceMappingURL=valtimo-dossier.mjs.map