@valtimo/zgw 13.32.0 → 13.33.0

package/fesm2022/valtimo-zgw.mjs

@@ -1,25 +1,25 @@
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Output, Input, ChangeDetectionStrategy, Component, ViewChild, signal, HostListener, NgModule, ViewContainerRef } from '@angular/core';
+import { Injectable, EventEmitter, Output, Input, ChangeDetectionStrategy, Component, ViewChild, signal, HostListener, NgModule, ViewContainerRef, computed } from '@angular/core';
 import * as i5 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { CaseManagementDraftWarningComponent } from '@valtimo/case-management';
 import * as i2 from '@valtimo/shared';
 import { BaseApiService, InterceptorSkipHeader, getCaseManagementRouteParams, UploadProvider, ROLE_ADMIN, CASE_MANAGEMENT_TAB_TOKEN, ZGW_OBJECT_TYPE_COMPONENT_TOKEN, ZGW_DOCUMENTEN_API_DOCUMENTS_COMPONENT_TOKEN, CASE_CONFIGURATION_EXTENSIONS_TOKEN } from '@valtimo/shared';
 import * as i6 from 'carbon-components-angular';
-import { ModalModule, InputModule, ButtonModule, DropdownModule, RadioModule, NotificationModule, LayerModule, TagModule, IconModule, DatePickerInputModule, DatePickerModule, ComboBoxModule, TooltipModule, ToggleModule, LoadingModule, ToggletipModule, CheckboxModule, TilesModule, SelectModule as SelectModule$1, TabsModule } from 'carbon-components-angular';
-import { catchError, of, BehaviorSubject, combineLatest, map, Subscription, switchMap, filter, tap, startWith, debounceTime, Subject, take as take$1, from, ReplaySubject, EMPTY, finalize, distinctUntilChanged } from 'rxjs';
+import { ModalModule, InputModule, ButtonModule, DropdownModule, RadioModule, NotificationModule, LayerModule, TagModule, IconModule, DatePickerInputModule, DatePickerModule, ComboBoxModule, TooltipModule, ToggleModule, LoadingModule, ToggletipModule, CheckboxModule, TilesModule, SelectModule as SelectModule$1, TabsModule, AccordionModule, StructuredListModule } from 'carbon-components-angular';
+import { catchError, of, BehaviorSubject, combineLatest, map, Subscription, switchMap, filter, tap, startWith, debounceTime, Subject, take as take$1, from, ReplaySubject, EMPTY, finalize, distinctUntilChanged, forkJoin } from 'rxjs';
 import * as i1$1 from '@angular/forms';
 import { Validators, ReactiveFormsModule, FormGroup, FormControl, FormsModule } from '@angular/forms';
 import * as i3 from '@valtimo/components';
-import { CARBON_CONSTANTS, ViewType, CarbonListModule, ConfirmationModalModule, InputLabelModule, InputModule as InputModule$1, SelectModule, VModalModule, DEFAULT_PAGINATION, DEFAULT_PAGINATOR_CONFIG, OverflowMenuComponent, CarbonListComponent, registerCustomFormioComponent, ParagraphModule, TableModule, FormIoModule, FormModule, SpinnerModule, ValtimoCdsModalDirective, RenderInBodyComponent, MuuriDirectiveModule, DropzoneModule, FileSizeModule } from '@valtimo/components';
+import { CARBON_CONSTANTS, ViewType, CarbonListModule, ConfirmationModalModule, InputLabelModule, InputModule as InputModule$1, SelectModule, VModalModule, DEFAULT_PAGINATION, DEFAULT_PAGINATOR_CONFIG, OverflowMenuComponent, CarbonListComponent, registerCustomFormioComponent, ParagraphModule, TableModule, FormIoModule, FormModule, SpinnerModule, ValtimoCdsModalDirective, RenderInBodyComponent, MuuriDirectiveModule, JsonEditorComponent, DropzoneModule, FileSizeModule } from '@valtimo/components';
 import * as i1 from '@angular/common/http';
 import { HttpParams } from '@angular/common/http';
 import { take, tap as tap$1, map as map$1, filter as filter$1, switchMap as switchMap$1, catchError as catchError$1, shareReplay } from 'rxjs/operators';
 import * as i1$2 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import { TrashCan16, Filter16, TagGroup16, Upload16, Edit16, WarningFilled16, Save16 } from '@carbon/icons';
+import { TrashCan16, Filter16, TagGroup16, Upload16, Edit16, WarningFilled16, Save16, Copy16, Launch16, WarningAltFilled16 } from '@carbon/icons';
 import * as i4$2 from '@valtimo/resource';
 import { CAN_CREATE_RESOURCE_PERMISSION, RESOURCE_PERMISSION_RESOURCE, ResourceModule } from '@valtimo/resource';
 import flatpickr from 'flatpickr';
@@ -32,6 +32,7 @@ import * as i6$1 from '@valtimo/access-control';
 import * as i9 from '@valtimo/security';
 import { AuthGuardService } from '@valtimo/security';
 import { FormioModule } from '@formio/angular';
+import { ZGW_CASE_INSPECTION_TAB_TOKEN } from '@valtimo/case';
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -5214,7 +5215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  */
 class CaseManagementZgwGeneralComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CaseManagementZgwGeneralComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: CaseManagementZgwGeneralComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"muuri-container\">\n  <div muuri [columnMinWidth]=\"450\">\n    <valtimo-muuri-item>\n      <valtimo-document-objecten-api-sync></valtimo-document-objecten-api-sync>\n    </valtimo-muuri-item>\n\n    <valtimo-muuri-item>\n      <valtimo-case-zaken-api-sync></valtimo-case-zaken-api-sync>\n    </valtimo-muuri-item>\n\n    <valtimo-muuri-item>\n      <valtimo-documenten-api-version></valtimo-documenten-api-version\n    ></valtimo-muuri-item>\n\n    <valtimo-muuri-item>\n      <valtimo-zaken-api-zaaktype-link></valtimo-zaken-api-zaaktype-link>\n    </valtimo-muuri-item>\n  </div>\n</div>\n", styles: [".muuri-container{margin-bottom:-16px;padding:16px;background-color:var(--cds-layer-01)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CaseZakenApiSyncComponent, selector: "valtimo-case-zaken-api-sync" }, { kind: "component", type: ZakenApiZaaktypeLinkComponent, selector: "valtimo-zaken-api-zaaktype-link" }, { kind: "component", type: DocumentObjectenApiSyncComponent, selector: "valtimo-document-objecten-api-sync" }, { kind: "ngmodule", type: MuuriDirectiveModule }, { kind: "directive", type: i3.MuuriDirective, selector: "[muuri]", inputs: ["columnMinWidth"] }, { kind: "component", type: i3.MuuriItemComponent, selector: "valtimo-muuri-item" }, { kind: "component", type: DocumentenApiVersionComponent, selector: "valtimo-documenten-api-version" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: CaseManagementZgwGeneralComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"muuri-container\">\n  <div muuri [columnMinWidth]=\"450\">\n    <valtimo-muuri-item>\n      <valtimo-document-objecten-api-sync></valtimo-document-objecten-api-sync>\n    </valtimo-muuri-item>\n\n    <valtimo-muuri-item>\n      <valtimo-case-zaken-api-sync></valtimo-case-zaken-api-sync>\n    </valtimo-muuri-item>\n\n    <valtimo-muuri-item>\n      <valtimo-documenten-api-version></valtimo-documenten-api-version\n    ></valtimo-muuri-item>\n\n    <valtimo-muuri-item>\n      <valtimo-zaken-api-zaaktype-link></valtimo-zaken-api-zaaktype-link>\n    </valtimo-muuri-item>\n  </div>\n</div>\n", styles: [".muuri-container{margin-bottom:-16px;padding:16px;background-color:var(--cds-layer-01)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CaseZakenApiSyncComponent, selector: "valtimo-case-zaken-api-sync" }, { kind: "component", type: ZakenApiZaaktypeLinkComponent, selector: "valtimo-zaken-api-zaaktype-link" }, { kind: "component", type: DocumentObjectenApiSyncComponent, selector: "valtimo-document-objecten-api-sync" }, { kind: "ngmodule", type: MuuriDirectiveModule }, { kind: "directive", type: i3.MuuriDirective, selector: "[muuri]", inputs: ["columnMinWidth", "widgetLayout"] }, { kind: "component", type: i3.MuuriItemComponent, selector: "valtimo-muuri-item" }, { kind: "component", type: DocumentenApiVersionComponent, selector: "valtimo-documenten-api-version" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CaseManagementZgwGeneralComponent, decorators: [{
             type: Component,
@@ -5406,6 +5407,189 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * limitations under the License.
  */
 
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class ZgwCaseInspectionService {
+    constructor(http, configService) {
+        this.http = http;
+        this.configService = configService;
+        this._baseUrl = this.configService.config.valtimoApi.endpointUri;
+    }
+    getZgwInspection(caseId) {
+        return this.http.get(`${this._baseUrl}management/v1/case/${caseId}/zgw`);
+    }
+    resolveZaakobjectContent(caseId, objectUrl) {
+        return this.http.get(`${this._baseUrl}management/v1/case/${caseId}/zgw/zaakobject/resolve`, { params: new HttpParams().set('objectUrl', objectUrl) });
+    }
+    getZaakdetailsInspection(caseId) {
+        return this.http.get(`${this._baseUrl}management/v1/case/${caseId}/zgw/zaakdetails`);
+    }
+    getZaakdetailsObjectContent(caseId) {
+        return this.http.get(`${this._baseUrl}management/v1/case/${caseId}/zgw/zaakdetails/object`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ZgwCaseInspectionService, deps: [{ token: i1.HttpClient }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ZgwCaseInspectionService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ZgwCaseInspectionService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.ConfigService }] });
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class CaseInspectionZgwTabComponent {
+    constructor(zgwCaseInspectionService, iconService) {
+        this.zgwCaseInspectionService = zgwCaseInspectionService;
+        this.iconService = iconService;
+        this.$loading = signal(true);
+        this.$errorMessage = signal(null);
+        this.$zgw = signal(null);
+        this.$zaakdetails = signal(null);
+        this.$showZaakdetails = signal(false);
+        this.$resolvedObjects = signal({});
+        this.$zaakdetailsContent = signal(null);
+        this.$rawZaakModel = computed(() => {
+            const zaak = this.$zgw()?.zaak;
+            return zaak ? { value: JSON.stringify(zaak, null, 2), language: 'json' } : null;
+        });
+        this.$resolvedRecordModels = computed(() => {
+            const out = {};
+            const resolved = this.$resolvedObjects();
+            Object.keys(resolved).forEach(objectUrl => {
+                const value = resolved[objectUrl];
+                if (value !== 'loading' && value.resolved && value.record) {
+                    out[objectUrl] = { value: JSON.stringify(value.record, null, 2), language: 'json' };
+                }
+            });
+            return out;
+        });
+        this.$zaakdetailsContentModel = computed(() => {
+            const content = this.$zaakdetailsContent();
+            if (!content || content === 'loading')
+                return null;
+            if (!content.resolved || !content.record)
+                return null;
+            return { value: JSON.stringify(content.record, null, 2), language: 'json' };
+        });
+        this.iconService.registerAll([Copy16, Launch16, WarningAltFilled16]);
+    }
+    ngOnChanges(changes) {
+        if (changes.documentId && this.documentId)
+            this.load();
+    }
+    onCopy(value) {
+        if (typeof navigator !== 'undefined' && navigator.clipboard) {
+            navigator.clipboard.writeText(value);
+        }
+    }
+    onResolveZaakobject(objectUrl) {
+        this.$resolvedObjects.update(current => ({ ...current, [objectUrl]: 'loading' }));
+        this.zgwCaseInspectionService.resolveZaakobjectContent(this.documentId, objectUrl).subscribe({
+            next: result => {
+                this.$resolvedObjects.update(current => ({ ...current, [objectUrl]: result }));
+            },
+            error: err => {
+                this.$resolvedObjects.update(current => {
+                    const copy = { ...current };
+                    delete copy[objectUrl];
+                    return copy;
+                });
+                this.$errorMessage.set(err?.error?.message ?? err?.message ?? 'Failed to resolve zaakobject');
+            },
+        });
+    }
+    onResolveZaakdetailsContent() {
+        this.$zaakdetailsContent.set('loading');
+        this.zgwCaseInspectionService.getZaakdetailsObjectContent(this.documentId).subscribe({
+            next: result => this.$zaakdetailsContent.set(result),
+            error: err => {
+                this.$zaakdetailsContent.set(null);
+                this.$errorMessage.set(err?.error?.message ?? err?.message ?? 'Failed to load zaakdetails content');
+            },
+        });
+    }
+    objectResolveState(objectUrl) {
+        return this.$resolvedObjects()[objectUrl];
+    }
+    load() {
+        const requestedDocumentId = this.documentId;
+        this.$loading.set(true);
+        this.$errorMessage.set(null);
+        this.$zgw.set(null);
+        this.$zaakdetails.set(null);
+        this.$resolvedObjects.set({});
+        this.$zaakdetailsContent.set(null);
+        forkJoin({
+            zgw: this.zgwCaseInspectionService.getZgwInspection(requestedDocumentId),
+            zaakdetails: this.zgwCaseInspectionService
+                .getZaakdetailsInspection(requestedDocumentId)
+                .pipe(catchError(() => of(null))),
+        }).subscribe({
+            next: ({ zgw, zaakdetails }) => {
+                if (requestedDocumentId !== this.documentId) {
+                    return;
+                }
+                this.$zgw.set(zgw);
+                this.$zaakdetails.set(zaakdetails);
+                this.$showZaakdetails.set(!!zaakdetails && (!!zaakdetails.syncConfig || !!zaakdetails.zaakdetailsObject));
+                this.$loading.set(false);
+            },
+            error: err => {
+                if (requestedDocumentId !== this.documentId) {
+                    return;
+                }
+                this.$errorMessage.set(err?.error?.message ?? err?.message ?? 'Failed to load ZGW data');
+                this.$loading.set(false);
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CaseInspectionZgwTabComponent, deps: [{ token: ZgwCaseInspectionService }, { token: i6.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: CaseInspectionZgwTabComponent, isStandalone: true, selector: "valtimo-case-inspection-zgw", inputs: { documentId: "documentId" }, usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 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<section class=\"case-inspection-zgw-tab\">\n  <div *ngIf=\"$loading()\" class=\"loading-container\">\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n\n  <ng-container *ngIf=\"$errorMessage() as message\">\n    <p class=\"case-inspection-zgw-tab__error\">{{ message }}</p>\n  </ng-container>\n\n  <ng-container *ngIf=\"!$loading() && $zgw() as zgw\">\n    <!-- State 1: case is not linked to a zaak (neutral info) -->\n    <ng-container *ngIf=\"!zgw.zaakInstanceLink\">\n      <p class=\"case-inspection-zgw-tab__empty\">\n        {{ 'case.inspection.zgw.empty' | translate }}\n      </p>\n    </ng-container>\n\n    <!-- State 2: link present but zaak could not be loaded (error notification) -->\n    <ng-container *ngIf=\"zgw.zaakInstanceLink && !zgw.zaak\">\n      <cds-inline-notification\n        class=\"case-inspection-zgw-tab__warnings\"\n        [notificationObj]=\"{\n          type: 'error',\n          title: 'case.inspection.zgw.zaakUnreachable.title' | translate,\n          message: 'case.inspection.zgw.zaakUnreachable.message' | translate,\n          showClose: false,\n          lowContrast: true,\n        }\"\n      ></cds-inline-notification>\n\n      <dl class=\"case-inspection-zgw-tab__list\">\n        <dt>{{ 'case.inspection.zgw.zaak.url' | translate }}</dt>\n        <dd>\n          <code>{{ zgw.zaakInstanceLink.zaakInstanceUrl }}</code>\n          <button\n            cdsButton=\"ghost\"\n            size=\"sm\"\n            [iconOnly]=\"true\"\n            [attr.aria-label]=\"'case.inspection.zgw.actions.copy' | translate\"\n            (click)=\"onCopy(zgw.zaakInstanceLink.zaakInstanceUrl)\"\n          >\n            <svg cdsIcon=\"copy\" size=\"16\"></svg>\n          </button>\n          <a\n            cdsButton=\"ghost\"\n            size=\"sm\"\n            target=\"_blank\"\n            rel=\"noopener\"\n            [attr.aria-label]=\"'case.inspection.zgw.actions.openExternal' | translate\"\n            [href]=\"zgw.zaakInstanceLink.zaakInstanceUrl\"\n          >\n            <svg cdsIcon=\"launch\" size=\"16\"></svg>\n          </a>\n        </dd>\n\n        <ng-container *ngIf=\"zgw.warnings.length\">\n          <dt>{{ 'case.inspection.zgw.zaakUnreachable.details' | translate }}</dt>\n          <dd>\n            <ul class=\"case-inspection-zgw-tab__warning-list\">\n              <li *ngFor=\"let w of zgw.warnings\">{{ w }}</li>\n            </ul>\n          </dd>\n        </ng-container>\n      </dl>\n    </ng-container>\n\n    <!-- State 3: link + zaak loaded (full accordion) -->\n    <ng-container *ngIf=\"zgw.zaakInstanceLink && zgw.zaak\">\n      <cds-inline-notification\n        *ngIf=\"zgw.warnings.length\"\n        class=\"case-inspection-zgw-tab__warnings\"\n        [notificationObj]=\"{\n          type: 'warning',\n          title: 'case.inspection.zgw.warnings.title' | translate,\n          message: zgw.warnings.join(' \u2022 '),\n          showClose: false,\n          lowContrast: true,\n        }\"\n      ></cds-inline-notification>\n\n      <cds-accordion align=\"start\" size=\"sm\">\n        <!-- Zaak header -->\n        <cds-accordion-item\n          [title]=\"'case.inspection.zgw.zaak.title' | translate\"\n          [expanded]=\"true\"\n        >\n          <dl class=\"case-inspection-zgw-tab__list\">\n            <dt>{{ 'case.inspection.zgw.zaak.url' | translate }}</dt>\n            <dd>\n              <code>{{ zgw.zaakInstanceLink!.zaakInstanceUrl }}</code>\n              <button\n                cdsButton=\"ghost\"\n                size=\"sm\"\n                [iconOnly]=\"true\"\n                [attr.aria-label]=\"'case.inspection.zgw.actions.copy' | translate\"\n                (click)=\"onCopy(zgw.zaakInstanceLink!.zaakInstanceUrl)\"\n              >\n                <svg cdsIcon=\"copy\" size=\"16\"></svg>\n              </button>\n              <a\n                cdsButton=\"ghost\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noopener\"\n                [attr.aria-label]=\"'case.inspection.zgw.actions.openExternal' | translate\"\n                [href]=\"zgw.zaakInstanceLink!.zaakInstanceUrl\"\n              >\n                <svg cdsIcon=\"launch\" size=\"16\"></svg>\n              </a>\n            </dd>\n\n            <dt>{{ 'case.inspection.zgw.zaak.uuid' | translate }}</dt>\n            <dd>\n              <code>{{ zgw.zaakInstanceLink!.zaakInstanceId }}</code>\n            </dd>\n\n            <ng-container *ngIf=\"zgw.zaak as zaakBody\">\n              <dt>{{ 'case.inspection.zgw.zaak.identificatie' | translate }}</dt>\n              <dd>{{ zaakBody.identificatie || '-' }}</dd>\n\n              <dt>{{ 'case.inspection.zgw.zaak.bronorganisatie' | translate }}</dt>\n              <dd>{{ zaakBody.bronorganisatie || '-' }}</dd>\n\n              <dt>{{ 'case.inspection.zgw.zaak.zaaktype' | translate }}</dt>\n              <dd>\n                <code>{{ zgw.zaakInstanceLink!.zaakTypeUrl }}</code>\n                <button\n                  cdsButton=\"ghost\"\n                  size=\"sm\"\n                  [iconOnly]=\"true\"\n                  [attr.aria-label]=\"'case.inspection.zgw.actions.copy' | translate\"\n                  (click)=\"onCopy(zgw.zaakInstanceLink!.zaakTypeUrl)\"\n                >\n                  <svg cdsIcon=\"copy\" size=\"16\"></svg>\n                </button>\n              </dd>\n\n              <dt>{{ 'case.inspection.zgw.zaak.registratiedatum' | translate }}</dt>\n              <dd>{{ zaakBody.registratiedatum || '-' }}</dd>\n\n              <dt>{{ 'case.inspection.zgw.zaak.startdatum' | translate }}</dt>\n              <dd>{{ zaakBody.startdatum || '-' }}</dd>\n\n              <dt>{{ 'case.inspection.zgw.zaak.einddatum' | translate }}</dt>\n              <dd>{{ zaakBody.einddatum || '-' }}</dd>\n\n              <dt>{{ 'case.inspection.zgw.zaak.einddatumGepland' | translate }}</dt>\n              <dd>{{ zaakBody.einddatumGepland || '-' }}</dd>\n\n              <dt>{{ 'case.inspection.zgw.zaak.uiterlijkeEinddatumAfdoening' | translate }}</dt>\n              <dd>{{ zaakBody.uiterlijkeEinddatumAfdoening || '-' }}</dd>\n\n              <dt>{{ 'case.inspection.zgw.zaak.vertrouwelijkheidaanduiding' | translate }}</dt>\n              <dd>\n                <cds-tag *ngIf=\"zaakBody.vertrouwelijkheidaanduiding\" size=\"sm\" type=\"cool-gray\">\n                  {{ zaakBody.vertrouwelijkheidaanduiding }}\n                </cds-tag>\n                <span *ngIf=\"!zaakBody.vertrouwelijkheidaanduiding\">-</span>\n              </dd>\n\n              <dt>{{ 'case.inspection.zgw.zaak.archiefstatus' | translate }}</dt>\n              <dd>\n                <cds-tag *ngIf=\"zaakBody.archiefstatus\" size=\"sm\" type=\"cool-gray\">\n                  {{ zaakBody.archiefstatus }}\n                </cds-tag>\n                <span *ngIf=\"!zaakBody.archiefstatus\">-</span>\n              </dd>\n\n              <dt>{{ 'case.inspection.zgw.zaak.betalingsindicatie' | translate }}</dt>\n              <dd>\n                <cds-tag *ngIf=\"zaakBody.betalingsindicatie\" size=\"sm\" type=\"cool-gray\">\n                  {{ zaakBody.betalingsindicatie }}\n                </cds-tag>\n                <span *ngIf=\"!zaakBody.betalingsindicatie\">-</span>\n              </dd>\n            </ng-container>\n\n            <dt>{{ 'case.inspection.zgw.zaak.currentResultaat' | translate }}</dt>\n            <dd>\n              <ng-container *ngIf=\"zgw.resultaat as resultaat; else noResultaat\">\n                <code>{{ resultaat.resultaattype }}</code>\n                <button\n                  cdsButton=\"ghost\"\n                  size=\"sm\"\n                  [iconOnly]=\"true\"\n                  [attr.aria-label]=\"'case.inspection.zgw.actions.copy' | translate\"\n                  (click)=\"onCopy(resultaat.resultaattype)\"\n                >\n                  <svg cdsIcon=\"copy\" size=\"16\"></svg>\n                </button>\n                <span *ngIf=\"resultaat.toelichting\">\u2014 {{ resultaat.toelichting }}</span>\n              </ng-container>\n              <ng-template #noResultaat>\n                <span class=\"case-inspection-zgw-tab__empty\">\n                  {{ 'case.inspection.zgw.zaak.noResultaat' | translate }}\n                </span>\n              </ng-template>\n            </dd>\n          </dl>\n        </cds-accordion-item>\n\n        <!-- Eigenschappen -->\n        <cds-accordion-item [title]=\"'case.inspection.zgw.eigenschappen.title' | translate\">\n          <ng-container *ngIf=\"zgw.eigenschappen.length; else noEigenschappen\">\n            <cds-structured-list [condensed]=\"true\">\n              <cds-list-header>\n                <cds-list-column>{{\n                  'case.inspection.zgw.eigenschappen.naam' | translate\n                }}</cds-list-column>\n                <cds-list-column>{{\n                  'case.inspection.zgw.eigenschappen.waarde' | translate\n                }}</cds-list-column>\n                <cds-list-column>{{\n                  'case.inspection.zgw.eigenschappen.eigenschapUrl' | translate\n                }}</cds-list-column>\n                <cds-list-column>{{\n                  'case.inspection.zgw.eigenschappen.zaakeigenschapUrl' | translate\n                }}</cds-list-column>\n              </cds-list-header>\n\n              <cds-list-row *ngFor=\"let e of zgw.eigenschappen\">\n                <cds-list-column>{{ e.naam || '-' }}</cds-list-column>\n                <cds-list-column>{{ e.waarde }}</cds-list-column>\n                <cds-list-column>\n                  <code>{{ e.eigenschap }}</code>\n                  <button\n                    cdsButton=\"ghost\"\n                    size=\"sm\"\n                    [iconOnly]=\"true\"\n                    [attr.aria-label]=\"'case.inspection.zgw.actions.copy' | translate\"\n                    (click)=\"onCopy(e.eigenschap)\"\n                  >\n                    <svg cdsIcon=\"copy\" size=\"16\"></svg>\n                  </button>\n                </cds-list-column>\n                <cds-list-column>\n                  <code>{{ e.url }}</code>\n                  <button\n                    cdsButton=\"ghost\"\n                    size=\"sm\"\n                    [iconOnly]=\"true\"\n                    [attr.aria-label]=\"'case.inspection.zgw.actions.copy' | translate\"\n                    (click)=\"onCopy(e.url)\"\n                  >\n                    <svg cdsIcon=\"copy\" size=\"16\"></svg>\n                  </button>\n                </cds-list-column>\n              </cds-list-row>\n            </cds-structured-list>\n          </ng-container>\n          <ng-template #noEigenschappen>\n            <p class=\"case-inspection-zgw-tab__empty\">\n              {{ 'case.inspection.zgw.eigenschappen.empty' | translate }}\n            </p>\n          </ng-template>\n        </cds-accordion-item>\n\n        <!-- Rollen -->\n        <cds-accordion-item [title]=\"'case.inspection.zgw.rollen.title' | translate\">\n          <ng-container *ngIf=\"zgw.rollen.length; else noRollen\">\n            <cds-structured-list [condensed]=\"true\">\n              <cds-list-header>\n                <cds-list-column>{{\n                  'case.inspection.zgw.rollen.betrokkeneType' | translate\n                }}</cds-list-column>\n                <cds-list-column>{{\n                  'case.inspection.zgw.rollen.roltype' | translate\n                }}</cds-list-column>\n                <cds-list-column>{{\n                  'case.inspection.zgw.rollen.identificatie' | translate\n                }}</cds-list-column>\n                <cds-list-column>{{\n                  'case.inspection.zgw.rollen.indicatieMachtiging' | translate\n                }}</cds-list-column>\n                <cds-list-column>{{\n                  'case.inspection.zgw.rollen.url' | translate\n                }}</cds-list-column>\n              </cds-list-header>\n\n              <cds-list-row *ngFor=\"let r of zgw.rollen\">\n                <cds-list-column>{{ r.betrokkeneType }}</cds-list-column>\n                <cds-list-column>{{\n                  r.omschrijving || r.omschrijvingGeneriek || '-'\n                }}</cds-list-column>\n                <cds-list-column>\n                  <code *ngIf=\"r.betrokkeneIdentificatie\">\n                    {{ r.betrokkeneIdentificatie | json }}\n                  </code>\n                  <span *ngIf=\"!r.betrokkeneIdentificatie\">-</span>\n                </cds-list-column>\n                <cds-list-column>{{ r.indicatieMachtiging || '-' }}</cds-list-column>\n                <cds-list-column>\n                  <ng-container *ngIf=\"r.url\">\n                    <code>{{ r.url }}</code>\n                    <button\n                      cdsButton=\"ghost\"\n                      size=\"sm\"\n                      [iconOnly]=\"true\"\n                      [attr.aria-label]=\"'case.inspection.zgw.actions.copy' | translate\"\n                      (click)=\"onCopy(r.url)\"\n                    >\n                      <svg cdsIcon=\"copy\" size=\"16\"></svg>\n                    </button>\n                  </ng-container>\n                </cds-list-column>\n              </cds-list-row>\n            </cds-structured-list>\n          </ng-container>\n          <ng-template #noRollen>\n            <p class=\"case-inspection-zgw-tab__empty\">\n              {{ 'case.inspection.zgw.rollen.empty' | translate }}\n            </p>\n          </ng-template>\n        </cds-accordion-item>\n\n        <!-- Status history -->\n        <cds-accordion-item [title]=\"'case.inspection.zgw.statusHistory.title' | translate\">\n          <ng-container *ngIf=\"zgw.statusHistory.length; else noStatuses\">\n            <cds-structured-list [condensed]=\"true\">\n              <cds-list-header>\n                <cds-list-column>{{\n                  'case.inspection.zgw.statusHistory.datumStatusGezet' | translate\n                }}</cds-list-column>\n                <cds-list-column>{{\n                  'case.inspection.zgw.statusHistory.statustype' | translate\n                }}</cds-list-column>\n                <cds-list-column>{{\n                  'case.inspection.zgw.statusHistory.statustoelichting' | translate\n                }}</cds-list-column>\n              </cds-list-header>\n\n              <cds-list-row *ngFor=\"let s of zgw.statusHistory\">\n                <cds-list-column>{{ s.datumStatusGezet | date: 'medium' }}</cds-list-column>\n                <cds-list-column>\n                  <code>{{ s.statustype }}</code>\n                  <button\n                    cdsButton=\"ghost\"\n                    size=\"sm\"\n                    [iconOnly]=\"true\"\n                    [attr.aria-label]=\"'case.inspection.zgw.actions.copy' | translate\"\n                    (click)=\"onCopy(s.statustype)\"\n                  >\n                    <svg cdsIcon=\"copy\" size=\"16\"></svg>\n                  </button>\n                </cds-list-column>\n                <cds-list-column>{{ s.statustoelichting || '-' }}</cds-list-column>\n              </cds-list-row>\n            </cds-structured-list>\n          </ng-container>\n          <ng-template #noStatuses>\n            <p class=\"case-inspection-zgw-tab__empty\">\n              {{ 'case.inspection.zgw.statusHistory.empty' | translate }}\n            </p>\n          </ng-template>\n        </cds-accordion-item>\n\n        <!-- Zaakobjecten -->\n        <cds-accordion-item [title]=\"'case.inspection.zgw.zaakobjecten.title' | translate\">\n          <ng-container *ngIf=\"zgw.zaakObjecten.length; else noZaakObjecten\">\n            <ul class=\"case-inspection-zgw-tab__cards\">\n              <li *ngFor=\"let o of zgw.zaakObjecten\" class=\"case-inspection-zgw-tab__card\">\n                <dl>\n                  <dt>{{ 'case.inspection.zgw.zaakobjecten.objectUrl' | translate }}</dt>\n                  <dd>\n                    <code>{{ o.objectUrl }}</code>\n                    <button\n                      cdsButton=\"ghost\"\n                      size=\"sm\"\n                      [iconOnly]=\"true\"\n                      [attr.aria-label]=\"'case.inspection.zgw.actions.copy' | translate\"\n                      (click)=\"onCopy(o.objectUrl)\"\n                    >\n                      <svg cdsIcon=\"copy\" size=\"16\"></svg>\n                    </button>\n                  </dd>\n\n                  <dt>{{ 'case.inspection.zgw.zaakobjecten.objectType' | translate }}</dt>\n                  <dd>{{ o.objectTypeOverige || o.objectType }}</dd>\n\n                  <dt *ngIf=\"o.relatieomschrijving\">\n                    {{ 'case.inspection.zgw.zaakobjecten.relatieomschrijving' | translate }}\n                  </dt>\n                  <dd *ngIf=\"o.relatieomschrijving\">{{ o.relatieomschrijving }}</dd>\n                </dl>\n\n                <ng-container [ngSwitch]=\"objectResolveState(o.objectUrl)\">\n                  <button\n                    *ngSwitchCase=\"undefined\"\n                    cdsButton=\"tertiary\"\n                    size=\"sm\"\n                    (click)=\"onResolveZaakobject(o.objectUrl)\"\n                  >\n                    {{ 'case.inspection.zgw.actions.resolveContent' | translate }}\n                  </button>\n                  <p *ngSwitchCase=\"'loading'\">\n                    {{ 'case.inspection.zgw.zaakobjecten.resolveLoading' | translate }}\n                  </p>\n                </ng-container>\n\n                <ng-container\n                  *ngIf=\"\n                    objectResolveState(o.objectUrl) !== undefined &&\n                    objectResolveState(o.objectUrl) !== 'loading'\n                  \"\n                >\n                  <ng-container *ngIf=\"$resolvedObjects()[o.objectUrl] as resolved\">\n                    <ng-container *ngIf=\"resolved !== 'loading'\">\n                      <cds-inline-notification\n                        *ngIf=\"!resolved.resolved\"\n                        [notificationObj]=\"{\n                          type: 'info',\n                          title: 'case.inspection.zgw.zaakobjecten.notResolved' | translate,\n                          message: resolved.message,\n                          showClose: false,\n                          lowContrast: true,\n                        }\"\n                      ></cds-inline-notification>\n\n                      <valtimo-json-editor\n                        *ngIf=\"resolved.resolved && $resolvedRecordModels()[o.objectUrl] as model\"\n                        [model]=\"model\"\n                        [showEditButton]=\"false\"\n                        [heightPx]=\"320\"\n                      ></valtimo-json-editor>\n                    </ng-container>\n                  </ng-container>\n                </ng-container>\n              </li>\n            </ul>\n          </ng-container>\n          <ng-template #noZaakObjecten>\n            <p class=\"case-inspection-zgw-tab__empty\">\n              {{ 'case.inspection.zgw.zaakobjecten.empty' | translate }}\n            </p>\n          </ng-template>\n        </cds-accordion-item>\n\n        <!-- Zaakinformatieobjecten -->\n        <cds-accordion-item\n          [title]=\"'case.inspection.zgw.zaakinformatieobjecten.title' | translate\"\n        >\n          <ng-container *ngIf=\"zgw.zaakInformatieObjecten.length; else noZios\">\n            <cds-structured-list [condensed]=\"true\">\n              <cds-list-header>\n                <cds-list-column>{{\n                  'case.inspection.zgw.zaakinformatieobjecten.titel' | translate\n                }}</cds-list-column>\n                <cds-list-column>{{\n                  'case.inspection.zgw.zaakinformatieobjecten.registratiedatum' | translate\n                }}</cds-list-column>\n                <cds-list-column>{{\n                  'case.inspection.zgw.zaakinformatieobjecten.url' | translate\n                }}</cds-list-column>\n              </cds-list-header>\n\n              <cds-list-row *ngFor=\"let z of zgw.zaakInformatieObjecten\">\n                <cds-list-column>{{ z.titel || '-' }}</cds-list-column>\n                <cds-list-column>{{ z.registratiedatum | date: 'medium' }}</cds-list-column>\n                <cds-list-column>\n                  <code>{{ z.informatieobject }}</code>\n                  <button\n                    cdsButton=\"ghost\"\n                    size=\"sm\"\n                    [iconOnly]=\"true\"\n                    [attr.aria-label]=\"'case.inspection.zgw.actions.copy' | translate\"\n                    (click)=\"onCopy(z.informatieobject)\"\n                  >\n                    <svg cdsIcon=\"copy\" size=\"16\"></svg>\n                  </button>\n                </cds-list-column>\n              </cds-list-row>\n            </cds-structured-list>\n          </ng-container>\n          <ng-template #noZios>\n            <p class=\"case-inspection-zgw-tab__empty\">\n              {{ 'case.inspection.zgw.zaakinformatieobjecten.empty' | translate }}\n            </p>\n          </ng-template>\n        </cds-accordion-item>\n\n        <!-- Besluiten -->\n        <cds-accordion-item [title]=\"'case.inspection.zgw.besluiten.title' | translate\">\n          <ng-container *ngIf=\"zgw.besluiten.length; else noBesluiten\">\n            <cds-structured-list [condensed]=\"true\">\n              <cds-list-header>\n                <cds-list-column>{{\n                  'case.inspection.zgw.besluiten.url' | translate\n                }}</cds-list-column>\n              </cds-list-header>\n\n              <cds-list-row *ngFor=\"let b of zgw.besluiten\">\n                <cds-list-column>\n                  <code>{{ b.besluit }}</code>\n                  <button\n                    cdsButton=\"ghost\"\n                    size=\"sm\"\n                    [iconOnly]=\"true\"\n                    [attr.aria-label]=\"'case.inspection.zgw.actions.copy' | translate\"\n                    (click)=\"onCopy(b.besluit)\"\n                  >\n                    <svg cdsIcon=\"copy\" size=\"16\"></svg>\n                  </button>\n                </cds-list-column>\n              </cds-list-row>\n            </cds-structured-list>\n          </ng-container>\n          <ng-template #noBesluiten>\n            <p class=\"case-inspection-zgw-tab__empty\">\n              {{ 'case.inspection.zgw.besluiten.empty' | translate }}\n            </p>\n          </ng-template>\n        </cds-accordion-item>\n\n        <!-- Zaakdetails sync object -->\n        <cds-accordion-item\n          *ngIf=\"$showZaakdetails()\"\n          [title]=\"'case.inspection.zgw.zaakdetails.title' | translate\"\n        >\n          <ng-container *ngIf=\"$zaakdetails() as zd\">\n            <dl class=\"case-inspection-zgw-tab__list\" *ngIf=\"zd.syncConfig as cfg\">\n              <dt>{{ 'case.inspection.zgw.zaakdetails.caseDefinitionKey' | translate }}</dt>\n              <dd>{{ cfg.caseDefinitionKey }}:{{ cfg.caseDefinitionVersionTag }}</dd>\n\n              <dt>{{ 'case.inspection.zgw.zaakdetails.objectManagementTitle' | translate }}</dt>\n              <dd>{{ cfg.objectManagementTitle || '-' }}</dd>\n\n              <dt>{{ 'case.inspection.zgw.zaakdetails.enabled' | translate }}</dt>\n              <dd>\n                <cds-tag size=\"sm\" [type]=\"cfg.enabled ? 'green' : 'cool-gray'\">\n                  {{\n                    (cfg.enabled ? 'case.inspection.zgw.yes' : 'case.inspection.zgw.no') | translate\n                  }}\n                </cds-tag>\n              </dd>\n            </dl>\n\n            <p *ngIf=\"!zd.syncConfig\" class=\"case-inspection-zgw-tab__empty\">\n              {{ 'case.inspection.zgw.zaakdetails.notConfigured' | translate }}\n            </p>\n\n            <dl class=\"case-inspection-zgw-tab__list\" *ngIf=\"zd.zaakdetailsObject as zo\">\n              <dt>{{ 'case.inspection.zgw.zaakdetails.objectUrl' | translate }}</dt>\n              <dd>\n                <code>{{ zo.objectUrl }}</code>\n                <button\n                  cdsButton=\"ghost\"\n                  size=\"sm\"\n                  [iconOnly]=\"true\"\n                  [attr.aria-label]=\"'case.inspection.zgw.actions.copy' | translate\"\n                  (click)=\"onCopy(zo.objectUrl)\"\n                >\n                  <svg cdsIcon=\"copy\" size=\"16\"></svg>\n                </button>\n              </dd>\n\n              <dt>{{ 'case.inspection.zgw.zaakdetails.linkedToZaak' | translate }}</dt>\n              <dd>\n                <cds-tag size=\"sm\" [type]=\"zo.linkedToZaak ? 'green' : 'cool-gray'\">\n                  {{\n                    (zo.linkedToZaak ? 'case.inspection.zgw.yes' : 'case.inspection.zgw.no')\n                      | translate\n                  }}\n                </cds-tag>\n              </dd>\n            </dl>\n\n            <ng-container *ngIf=\"zd.zaakdetailsObject\">\n              <button\n                *ngIf=\"!$zaakdetailsContent()\"\n                cdsButton=\"tertiary\"\n                size=\"sm\"\n                (click)=\"onResolveZaakdetailsContent()\"\n              >\n                {{ 'case.inspection.zgw.actions.viewLatestContent' | translate }}\n              </button>\n\n              <p *ngIf=\"$zaakdetailsContent() === 'loading'\">\n                {{ 'case.inspection.zgw.zaakdetails.contentLoading' | translate }}\n              </p>\n\n              <ng-container *ngIf=\"$zaakdetailsContent() as content\">\n                <ng-container *ngIf=\"content !== 'loading'\">\n                  <cds-inline-notification\n                    *ngIf=\"!content.resolved\"\n                    [notificationObj]=\"{\n                      type: 'info',\n                      title: 'case.inspection.zgw.zaakdetails.contentNotResolved' | translate,\n                      message: content.message,\n                      showClose: false,\n                      lowContrast: true,\n                    }\"\n                  ></cds-inline-notification>\n\n                  <valtimo-json-editor\n                    *ngIf=\"content.resolved && $zaakdetailsContentModel() as model\"\n                    [model]=\"model\"\n                    [showEditButton]=\"false\"\n                    [heightPx]=\"320\"\n                  ></valtimo-json-editor>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </cds-accordion-item>\n\n        <!-- Raw zaak JSON -->\n        <cds-accordion-item [title]=\"'case.inspection.zgw.rawJson.title' | translate\">\n          <valtimo-json-editor\n            *ngIf=\"$rawZaakModel() as model\"\n            [model]=\"model\"\n            [showEditButton]=\"false\"\n            [heightPx]=\"500\"\n          ></valtimo-json-editor>\n        </cds-accordion-item>\n      </cds-accordion>\n    </ng-container>\n  </ng-container>\n</section>\n", styles: [".case-inspection-zgw-tab{display:flex;flex-direction:column;gap:1rem}.case-inspection-zgw-tab__error{color:var(--cds-text-error, #da1e28)}.case-inspection-zgw-tab__empty{color:var(--cds-text-secondary, #525252);font-style:italic}.case-inspection-zgw-tab__warnings{margin-bottom:.5rem}.case-inspection-zgw-tab__warning-list{margin:0;padding-left:1.25rem;list-style:disc;font-size:.875rem;color:var(--cds-text-secondary, #525252)}.case-inspection-zgw-tab__list{display:grid;grid-template-columns:minmax(180px,max-content) 1fr;column-gap:1rem;margin:0;font-size:.875rem}.case-inspection-zgw-tab__list dt,.case-inspection-zgw-tab__list dd{min-height:2rem;display:flex;align-items:center;margin:0}.case-inspection-zgw-tab__list dt{font-weight:600}.case-inspection-zgw-tab__list dd{gap:.25rem;word-break:break-all}.case-inspection-zgw-tab__list code{font-size:.85rem}.case-inspection-zgw-tab__cards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}.case-inspection-zgw-tab__card{border:1px solid var(--cds-border-subtle, #e0e0e0);padding:1rem;display:flex;flex-direction:column;gap:.75rem}:host ::ng-deep cds-accordion{border-left:1px solid var(--cds-border-subtle);border-right:1px solid var(--cds-border-subtle)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i4.JsonPipe, name: "json" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i6.Accordion, selector: "cds-accordion, ibm-accordion", inputs: ["align", "size", "skeleton"] }, { kind: "component", type: i6.AccordionItem, selector: "cds-accordion-item, ibm-accordion-item", inputs: ["title", "context", "id", "skeleton", "expanded", "disabled"], outputs: ["selected"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i6.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: NotificationModule }, { kind: "component", type: i6.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "ngmodule", type: StructuredListModule }, { kind: "component", type: i6.StructuredList, selector: "cds-structured-list, ibm-structured-list", inputs: ["selection", "flushed", "condensed", "name", "skeleton"], outputs: ["selected"] }, { kind: "component", type: i6.ListRow, selector: "cds-list-row, ibm-list-row", inputs: ["selected", "label", "value"], outputs: ["change"] }, { kind: "component", type: i6.ListHeader, selector: "cds-list-header, ibm-list-header", inputs: ["skeleton"] }, { kind: "component", type: i6.ListColumn, selector: "cds-list-column, ibm-list-column", inputs: ["skeleton", "nowrap"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i6.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "component", type: JsonEditorComponent, selector: "valtimo-json-editor", inputs: ["disabled", "model", "editorOptions", "fitPage", "fitPageSpaceAdjustment", "formatOnLoad", "heightPx", "heightStyle", "jsonSchema", "showEditButton", "widthPx"], outputs: ["changeEvent", "discardEvent", "keepEditingEvent", "saveEvent"] }, { kind: "ngmodule", type: LoadingModule }, { kind: "component", type: i6.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CaseInspectionZgwTabComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'valtimo-case-inspection-zgw', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        TranslateModule,
+                        AccordionModule,
+                        ButtonModule,
+                        IconModule,
+                        NotificationModule,
+                        StructuredListModule,
+                        TagModule,
+                        JsonEditorComponent,
+                        LoadingModule,
+                    ], template: "<!--\n  ~ Copyright 2015-2026 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<section class=\"case-inspection-zgw-tab\">\n  <div *ngIf=\"$loading()\" class=\"loading-container\">\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n\n  <ng-container *ngIf=\"$errorMessage() as message\">\n    <p class=\"case-inspection-zgw-tab__error\">{{ message }}</p>\n  </ng-container>\n\n  <ng-container *ngIf=\"!$loading() && $zgw() as zgw\">\n    <!-- State 1: case is not linked to a zaak (neutral info) -->\n    <ng-container *ngIf=\"!zgw.zaakInstanceLink\">\n      <p class=\"case-inspection-zgw-tab__empty\">\n        {{ 'case.inspection.zgw.empty' | translate }}\n      </p>\n    </ng-container>\n\n    <!-- State 2: link present but zaak could not be loaded (error notification) -->\n    <ng-container *ngIf=\"zgw.zaakInstanceLink && !zgw.zaak\">\n      <cds-inline-notification\n        class=\"case-inspection-zgw-tab__warnings\"\n        [notificationObj]=\"{\n          type: 'error',\n          title: 'case.inspection.zgw.zaakUnreachable.title' | translate,\n          message: 'case.inspection.zgw.zaakUnreachable.message' | translate,\n          showClose: false,\n          lowContrast: true,\n        }\"\n      ></cds-inline-notification>\n\n      <dl class=\"case-inspection-zgw-tab__list\">\n        <dt>{{ 'case.inspection.zgw.zaak.url' | translate }}</dt>\n        <dd>\n          <code>{{ zgw.zaakInstanceLink.zaakInstanceUrl }}</code>\n          <button\n            cdsButton=\"ghost\"\n            size=\"sm\"\n            [iconOnly]=\"true\"\n            [attr.aria-label]=\"'case.inspection.zgw.actions.copy' | translate\"\n            (click)=\"onCopy(zgw.zaakInstanceLink.zaakInstanceUrl)\"\n          >\n            <svg cdsIcon=\"copy\" size=\"16\"></svg>\n          </button>\n          <a\n            cdsButton=\"ghost\"\n            size=\"sm\"\n            target=\"_blank\"\n            rel=\"noopener\"\n            [attr.aria-label]=\"'case.inspection.zgw.actions.openExternal' | translate\"\n            [href]=\"zgw.zaakInstanceLink.zaakInstanceUrl\"\n          >\n            <svg cdsIcon=\"launch\" size=\"16\"></svg>\n          </a>\n        </dd>\n\n        <ng-container *ngIf=\"zgw.warnings.length\">\n          <dt>{{ 'case.inspection.zgw.zaakUnreachable.details' | translate }}</dt>\n          <dd>\n            <ul class=\"case-inspection-zgw-tab__warning-list\">\n              <li *ngFor=\"let w of zgw.warnings\">{{ w }}</li>\n            </ul>\n          </dd>\n        </ng-container>\n      </dl>\n    </ng-container>\n\n    <!-- State 3: link + zaak loaded (full accordion) -->\n    <ng-container *ngIf=\"zgw.zaakInstanceLink && zgw.zaak\">\n      <cds-inline-notification\n        *ngIf=\"zgw.warnings.length\"\n        class=\"case-inspection-zgw-tab__warnings\"\n        [notificationObj]=\"{\n          type: 'warning',\n          title: 'case.inspection.zgw.warnings.title' | translate,\n          message: zgw.warnings.join(' \u2022 '),\n          showClose: false,\n          lowContrast: true,\n        }\"\n      ></cds-inline-notification>\n\n      <cds-accordion align=\"start\" size=\"sm\">\n        <!-- Zaak header -->\n        <cds-accordion-item\n          [title]=\"'case.inspection.zgw.zaak.title' | translate\"\n          [expanded]=\"true\"\n        >\n          <dl class=\"case-inspection-zgw-tab__list\">\n            <dt>{{ 'case.inspection.zgw.zaak.url' | translate }}</dt>\n            <dd>\n              <code>{{ zgw.zaakInstanceLink!.zaakInstanceUrl }}</code>\n              <button\n                cdsButton=\"ghost\"\n                size=\"sm\"\n                [iconOnly]=\"true\"\n                [attr.aria-label]=\"'case.inspection.zgw.actions.copy' | translate\"\n                (click)=\"onCopy(zgw.zaakInstanceLink!.zaakInstanceUrl)\"\n              >\n                <svg cdsIcon=\"copy\" size=\"16\"></svg>\n              </button>\n              <a\n                cdsButton=\"ghost\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noopener\"\n                [attr.aria-label]=\"'case.inspection.zgw.actions.openExternal' | translate\"\n                [href]=\"zgw.zaakInstanceLink!.zaakInstanceUrl\"\n              >\n                <svg cdsIcon=\"launch\" size=\"16\"></svg>\n              </a>\n            </dd>\n\n            <dt>{{ 'case.inspection.zgw.zaak.uuid' | translate }}</dt>\n            <dd>\n              <code>{{ zgw.zaakInstanceLink!.zaakInstanceId }}</code>\n            </dd>\n\n            <ng-container *ngIf=\"zgw.zaak as zaakBody\">\n              <dt>{{ 'case.inspection.zgw.zaak.identificatie' | translate }}</dt>\n              <dd>{{ zaakBody.identificatie || '-' }}</dd>\n\n              <dt>{{ 'case.inspection.zgw.zaak.bronorganisatie' | translate }}</dt>\n              <dd>{{ zaakBody.bronorganisatie || '-' }}</dd>\n\n              <dt>{{ 'case.inspection.zgw.zaak.zaaktype' | translate }}</dt>\n              <dd>\n                <code>{{ zgw.zaakInstanceLink!.zaakTypeUrl }}</code>\n                <button\n                  cdsButton=\"ghost\"\n                  size=\"sm\"\n                  [iconOnly]=\"true\"\n                  [attr.aria-label]=\"'case.inspection.zgw.actions.copy' | translate\"\n                  (click)=\"onCopy(zgw.zaakInstanceLink!.zaakTypeUrl)\"\n                >\n                  <svg cdsIcon=\"copy\" size=\"16\"></svg>\n                </button>\n              </dd>\n\n              <dt>{{ 'case.inspection.zgw.zaak.registratiedatum' | translate }}</dt>\n              <dd>{{ zaakBody.registratiedatum || '-' }}</dd>\n\n              <dt>{{ 'case.inspection.zgw.zaak.startdatum' | translate }}</dt>\n              <dd>{{ zaakBody.startdatum || '-' }}</dd>\n\n              <dt>{{ 'case.inspection.zgw.zaak.einddatum' | translate }}</dt>\n              <dd>{{ zaakBody.einddatum || '-' }}</dd>\n\n              <dt>{{ 'case.inspection.zgw.zaak.einddatumGepland' | translate }}</dt>\n              <dd>{{ zaakBody.einddatumGepland || '-' }}</dd>\n\n              <dt>{{ 'case.inspection.zgw.zaak.uiterlijkeEinddatumAfdoening' | translate }}</dt>\n              <dd>{{ zaakBody.uiterlijkeEinddatumAfdoening || '-' }}</dd>\n\n              <dt>{{ 'case.inspection.zgw.zaak.vertrouwelijkheidaanduiding' | translate }}</dt>\n              <dd>\n                <cds-tag *ngIf=\"zaakBody.vertrouwelijkheidaanduiding\" size=\"sm\" type=\"cool-gray\">\n                  {{ zaakBody.vertrouwelijkheidaanduiding }}\n                </cds-tag>\n                <span *ngIf=\"!zaakBody.vertrouwelijkheidaanduiding\">-</span>\n              </dd>\n\n              <dt>{{ 'case.inspection.zgw.zaak.archiefstatus' | translate }}</dt>\n              <dd>\n                <cds-tag *ngIf=\"zaakBody.archiefstatus\" size=\"sm\" type=\"cool-gray\">\n                  {{ zaakBody.archiefstatus }}\n                </cds-tag>\n                <span *ngIf=\"!zaakBody.archiefstatus\">-</span>\n              </dd>\n\n              <dt>{{ 'case.inspection.zgw.zaak.betalingsindicatie' | translate }}</dt>\n              <dd>\n                <cds-tag *ngIf=\"zaakBody.betalingsindicatie\" size=\"sm\" type=\"cool-gray\">\n                  {{ zaakBody.betalingsindicatie }}\n                </cds-tag>\n                <span *ngIf=\"!zaakBody.betalingsindicatie\">-</span>\n              </dd>\n            </ng-container>\n\n            <dt>{{ 'case.inspection.zgw.zaak.currentResultaat' | translate }}</dt>\n            <dd>\n              <ng-container *ngIf=\"zgw.resultaat as resultaat; else noResultaat\">\n                <code>{{ resultaat.resultaattype }}</code>\n                <button\n                  cdsButton=\"ghost\"\n                  size=\"sm\"\n                  [iconOnly]=\"true\"\n                  [attr.aria-label]=\"'case.inspection.zgw.actions.copy' | translate\"\n                  (click)=\"onCopy(resultaat.resultaattype)\"\n                >\n                  <svg cdsIcon=\"copy\" size=\"16\"></svg>\n                </button>\n                <span *ngIf=\"resultaat.toelichting\">\u2014 {{ resultaat.toelichting }}</span>\n              </ng-container>\n              <ng-template #noResultaat>\n                <span class=\"case-inspection-zgw-tab__empty\">\n                  {{ 'case.inspection.zgw.zaak.noResultaat' | translate }}\n                </span>\n              </ng-template>\n            </dd>\n          </dl>\n        </cds-accordion-item>\n\n        <!-- Eigenschappen -->\n        <cds-accordion-item [title]=\"'case.inspection.zgw.eigenschappen.title' | translate\">\n          <ng-container *ngIf=\"zgw.eigenschappen.length; else noEigenschappen\">\n            <cds-structured-list [condensed]=\"true\">\n              <cds-list-header>\n                <cds-list-column>{{\n                  'case.inspection.zgw.eigenschappen.naam' | translate\n                }}</cds-list-column>\n                <cds-list-column>{{\n                  'case.inspection.zgw.eigenschappen.waarde' | translate\n                }}</cds-list-column>\n                <cds-list-column>{{\n                  'case.inspection.zgw.eigenschappen.eigenschapUrl' | translate\n                }}</cds-list-column>\n                <cds-list-column>{{\n                  'case.inspection.zgw.eigenschappen.zaakeigenschapUrl' | translate\n                }}</cds-list-column>\n              </cds-list-header>\n\n              <cds-list-row *ngFor=\"let e of zgw.eigenschappen\">\n                <cds-list-column>{{ e.naam || '-' }}</cds-list-column>\n                <cds-list-column>{{ e.waarde }}</cds-list-column>\n                <cds-list-column>\n                  <code>{{ e.eigenschap }}</code>\n                  <button\n                    cdsButton=\"ghost\"\n                    size=\"sm\"\n                    [iconOnly]=\"true\"\n                    [attr.aria-label]=\"'case.inspection.zgw.actions.copy' | translate\"\n                    (click)=\"onCopy(e.eigenschap)\"\n                  >\n                    <svg cdsIcon=\"copy\" size=\"16\"></svg>\n                  </button>\n                </cds-list-column>\n                <cds-list-column>\n                  <code>{{ e.url }}</code>\n                  <button\n                    cdsButton=\"ghost\"\n                    size=\"sm\"\n                    [iconOnly]=\"true\"\n                    [attr.aria-label]=\"'case.inspection.zgw.actions.copy' | translate\"\n                    (click)=\"onCopy(e.url)\"\n                  >\n                    <svg cdsIcon=\"copy\" size=\"16\"></svg>\n                  </button>\n                </cds-list-column>\n              </cds-list-row>\n            </cds-structured-list>\n          </ng-container>\n          <ng-template #noEigenschappen>\n            <p class=\"case-inspection-zgw-tab__empty\">\n              {{ 'case.inspection.zgw.eigenschappen.empty' | translate }}\n            </p>\n          </ng-template>\n        </cds-accordion-item>\n\n        <!-- Rollen -->\n        <cds-accordion-item [title]=\"'case.inspection.zgw.rollen.title' | translate\">\n          <ng-container *ngIf=\"zgw.rollen.length; else noRollen\">\n            <cds-structured-list [condensed]=\"true\">\n              <cds-list-header>\n                <cds-list-column>{{\n                  'case.inspection.zgw.rollen.betrokkeneType' | translate\n                }}</cds-list-column>\n                <cds-list-column>{{\n                  'case.inspection.zgw.rollen.roltype' | translate\n                }}</cds-list-column>\n                <cds-list-column>{{\n                  'case.inspection.zgw.rollen.identificatie' | translate\n                }}</cds-list-column>\n                <cds-list-column>{{\n                  'case.inspection.zgw.rollen.indicatieMachtiging' | translate\n                }}</cds-list-column>\n                <cds-list-column>{{\n                  'case.inspection.zgw.rollen.url' | translate\n                }}</cds-list-column>\n              </cds-list-header>\n\n              <cds-list-row *ngFor=\"let r of zgw.rollen\">\n                <cds-list-column>{{ r.betrokkeneType }}</cds-list-column>\n                <cds-list-column>{{\n                  r.omschrijving || r.omschrijvingGeneriek || '-'\n                }}</cds-list-column>\n                <cds-list-column>\n                  <code *ngIf=\"r.betrokkeneIdentificatie\">\n                    {{ r.betrokkeneIdentificatie | json }}\n                  </code>\n                  <span *ngIf=\"!r.betrokkeneIdentificatie\">-</span>\n                </cds-list-column>\n                <cds-list-column>{{ r.indicatieMachtiging || '-' }}</cds-list-column>\n                <cds-list-column>\n                  <ng-container *ngIf=\"r.url\">\n                    <code>{{ r.url }}</code>\n                    <button\n                      cdsButton=\"ghost\"\n                      size=\"sm\"\n                      [iconOnly]=\"true\"\n                      [attr.aria-label]=\"'case.inspection.zgw.actions.copy' | translate\"\n                      (click)=\"onCopy(r.url)\"\n                    >\n                      <svg cdsIcon=\"copy\" size=\"16\"></svg>\n                    </button>\n                  </ng-container>\n                </cds-list-column>\n              </cds-list-row>\n            </cds-structured-list>\n          </ng-container>\n          <ng-template #noRollen>\n            <p class=\"case-inspection-zgw-tab__empty\">\n              {{ 'case.inspection.zgw.rollen.empty' | translate }}\n            </p>\n          </ng-template>\n        </cds-accordion-item>\n\n        <!-- Status history -->\n        <cds-accordion-item [title]=\"'case.inspection.zgw.statusHistory.title' | translate\">\n          <ng-container *ngIf=\"zgw.statusHistory.length; else noStatuses\">\n            <cds-structured-list [condensed]=\"true\">\n              <cds-list-header>\n                <cds-list-column>{{\n                  'case.inspection.zgw.statusHistory.datumStatusGezet' | translate\n                }}</cds-list-column>\n                <cds-list-column>{{\n                  'case.inspection.zgw.statusHistory.statustype' | translate\n                }}</cds-list-column>\n                <cds-list-column>{{\n                  'case.inspection.zgw.statusHistory.statustoelichting' | translate\n                }}</cds-list-column>\n              </cds-list-header>\n\n              <cds-list-row *ngFor=\"let s of zgw.statusHistory\">\n                <cds-list-column>{{ s.datumStatusGezet | date: 'medium' }}</cds-list-column>\n                <cds-list-column>\n                  <code>{{ s.statustype }}</code>\n                  <button\n                    cdsButton=\"ghost\"\n                    size=\"sm\"\n                    [iconOnly]=\"true\"\n                    [attr.aria-label]=\"'case.inspection.zgw.actions.copy' | translate\"\n                    (click)=\"onCopy(s.statustype)\"\n                  >\n                    <svg cdsIcon=\"copy\" size=\"16\"></svg>\n                  </button>\n                </cds-list-column>\n                <cds-list-column>{{ s.statustoelichting || '-' }}</cds-list-column>\n              </cds-list-row>\n            </cds-structured-list>\n          </ng-container>\n          <ng-template #noStatuses>\n            <p class=\"case-inspection-zgw-tab__empty\">\n              {{ 'case.inspection.zgw.statusHistory.empty' | translate }}\n            </p>\n          </ng-template>\n        </cds-accordion-item>\n\n        <!-- Zaakobjecten -->\n        <cds-accordion-item [title]=\"'case.inspection.zgw.zaakobjecten.title' | translate\">\n          <ng-container *ngIf=\"zgw.zaakObjecten.length; else noZaakObjecten\">\n            <ul class=\"case-inspection-zgw-tab__cards\">\n              <li *ngFor=\"let o of zgw.zaakObjecten\" class=\"case-inspection-zgw-tab__card\">\n                <dl>\n                  <dt>{{ 'case.inspection.zgw.zaakobjecten.objectUrl' | translate }}</dt>\n                  <dd>\n                    <code>{{ o.objectUrl }}</code>\n                    <button\n                      cdsButton=\"ghost\"\n                      size=\"sm\"\n                      [iconOnly]=\"true\"\n                      [attr.aria-label]=\"'case.inspection.zgw.actions.copy' | translate\"\n                      (click)=\"onCopy(o.objectUrl)\"\n                    >\n                      <svg cdsIcon=\"copy\" size=\"16\"></svg>\n                    </button>\n                  </dd>\n\n                  <dt>{{ 'case.inspection.zgw.zaakobjecten.objectType' | translate }}</dt>\n                  <dd>{{ o.objectTypeOverige || o.objectType }}</dd>\n\n                  <dt *ngIf=\"o.relatieomschrijving\">\n                    {{ 'case.inspection.zgw.zaakobjecten.relatieomschrijving' | translate }}\n                  </dt>\n                  <dd *ngIf=\"o.relatieomschrijving\">{{ o.relatieomschrijving }}</dd>\n                </dl>\n\n                <ng-container [ngSwitch]=\"objectResolveState(o.objectUrl)\">\n                  <button\n                    *ngSwitchCase=\"undefined\"\n                    cdsButton=\"tertiary\"\n                    size=\"sm\"\n                    (click)=\"onResolveZaakobject(o.objectUrl)\"\n                  >\n                    {{ 'case.inspection.zgw.actions.resolveContent' | translate }}\n                  </button>\n                  <p *ngSwitchCase=\"'loading'\">\n                    {{ 'case.inspection.zgw.zaakobjecten.resolveLoading' | translate }}\n                  </p>\n                </ng-container>\n\n                <ng-container\n                  *ngIf=\"\n                    objectResolveState(o.objectUrl) !== undefined &&\n                    objectResolveState(o.objectUrl) !== 'loading'\n                  \"\n                >\n                  <ng-container *ngIf=\"$resolvedObjects()[o.objectUrl] as resolved\">\n                    <ng-container *ngIf=\"resolved !== 'loading'\">\n                      <cds-inline-notification\n                        *ngIf=\"!resolved.resolved\"\n                        [notificationObj]=\"{\n                          type: 'info',\n                          title: 'case.inspection.zgw.zaakobjecten.notResolved' | translate,\n                          message: resolved.message,\n                          showClose: false,\n                          lowContrast: true,\n                        }\"\n                      ></cds-inline-notification>\n\n                      <valtimo-json-editor\n                        *ngIf=\"resolved.resolved && $resolvedRecordModels()[o.objectUrl] as model\"\n                        [model]=\"model\"\n                        [showEditButton]=\"false\"\n                        [heightPx]=\"320\"\n                      ></valtimo-json-editor>\n                    </ng-container>\n                  </ng-container>\n                </ng-container>\n              </li>\n            </ul>\n          </ng-container>\n          <ng-template #noZaakObjecten>\n            <p class=\"case-inspection-zgw-tab__empty\">\n              {{ 'case.inspection.zgw.zaakobjecten.empty' | translate }}\n            </p>\n          </ng-template>\n        </cds-accordion-item>\n\n        <!-- Zaakinformatieobjecten -->\n        <cds-accordion-item\n          [title]=\"'case.inspection.zgw.zaakinformatieobjecten.title' | translate\"\n        >\n          <ng-container *ngIf=\"zgw.zaakInformatieObjecten.length; else noZios\">\n            <cds-structured-list [condensed]=\"true\">\n              <cds-list-header>\n                <cds-list-column>{{\n                  'case.inspection.zgw.zaakinformatieobjecten.titel' | translate\n                }}</cds-list-column>\n                <cds-list-column>{{\n                  'case.inspection.zgw.zaakinformatieobjecten.registratiedatum' | translate\n                }}</cds-list-column>\n                <cds-list-column>{{\n                  'case.inspection.zgw.zaakinformatieobjecten.url' | translate\n                }}</cds-list-column>\n              </cds-list-header>\n\n              <cds-list-row *ngFor=\"let z of zgw.zaakInformatieObjecten\">\n                <cds-list-column>{{ z.titel || '-' }}</cds-list-column>\n                <cds-list-column>{{ z.registratiedatum | date: 'medium' }}</cds-list-column>\n                <cds-list-column>\n                  <code>{{ z.informatieobject }}</code>\n                  <button\n                    cdsButton=\"ghost\"\n                    size=\"sm\"\n                    [iconOnly]=\"true\"\n                    [attr.aria-label]=\"'case.inspection.zgw.actions.copy' | translate\"\n                    (click)=\"onCopy(z.informatieobject)\"\n                  >\n                    <svg cdsIcon=\"copy\" size=\"16\"></svg>\n                  </button>\n                </cds-list-column>\n              </cds-list-row>\n            </cds-structured-list>\n          </ng-container>\n          <ng-template #noZios>\n            <p class=\"case-inspection-zgw-tab__empty\">\n              {{ 'case.inspection.zgw.zaakinformatieobjecten.empty' | translate }}\n            </p>\n          </ng-template>\n        </cds-accordion-item>\n\n        <!-- Besluiten -->\n        <cds-accordion-item [title]=\"'case.inspection.zgw.besluiten.title' | translate\">\n          <ng-container *ngIf=\"zgw.besluiten.length; else noBesluiten\">\n            <cds-structured-list [condensed]=\"true\">\n              <cds-list-header>\n                <cds-list-column>{{\n                  'case.inspection.zgw.besluiten.url' | translate\n                }}</cds-list-column>\n              </cds-list-header>\n\n              <cds-list-row *ngFor=\"let b of zgw.besluiten\">\n                <cds-list-column>\n                  <code>{{ b.besluit }}</code>\n                  <button\n                    cdsButton=\"ghost\"\n                    size=\"sm\"\n                    [iconOnly]=\"true\"\n                    [attr.aria-label]=\"'case.inspection.zgw.actions.copy' | translate\"\n                    (click)=\"onCopy(b.besluit)\"\n                  >\n                    <svg cdsIcon=\"copy\" size=\"16\"></svg>\n                  </button>\n                </cds-list-column>\n              </cds-list-row>\n            </cds-structured-list>\n          </ng-container>\n          <ng-template #noBesluiten>\n            <p class=\"case-inspection-zgw-tab__empty\">\n              {{ 'case.inspection.zgw.besluiten.empty' | translate }}\n            </p>\n          </ng-template>\n        </cds-accordion-item>\n\n        <!-- Zaakdetails sync object -->\n        <cds-accordion-item\n          *ngIf=\"$showZaakdetails()\"\n          [title]=\"'case.inspection.zgw.zaakdetails.title' | translate\"\n        >\n          <ng-container *ngIf=\"$zaakdetails() as zd\">\n            <dl class=\"case-inspection-zgw-tab__list\" *ngIf=\"zd.syncConfig as cfg\">\n              <dt>{{ 'case.inspection.zgw.zaakdetails.caseDefinitionKey' | translate }}</dt>\n              <dd>{{ cfg.caseDefinitionKey }}:{{ cfg.caseDefinitionVersionTag }}</dd>\n\n              <dt>{{ 'case.inspection.zgw.zaakdetails.objectManagementTitle' | translate }}</dt>\n              <dd>{{ cfg.objectManagementTitle || '-' }}</dd>\n\n              <dt>{{ 'case.inspection.zgw.zaakdetails.enabled' | translate }}</dt>\n              <dd>\n                <cds-tag size=\"sm\" [type]=\"cfg.enabled ? 'green' : 'cool-gray'\">\n                  {{\n                    (cfg.enabled ? 'case.inspection.zgw.yes' : 'case.inspection.zgw.no') | translate\n                  }}\n                </cds-tag>\n              </dd>\n            </dl>\n\n            <p *ngIf=\"!zd.syncConfig\" class=\"case-inspection-zgw-tab__empty\">\n              {{ 'case.inspection.zgw.zaakdetails.notConfigured' | translate }}\n            </p>\n\n            <dl class=\"case-inspection-zgw-tab__list\" *ngIf=\"zd.zaakdetailsObject as zo\">\n              <dt>{{ 'case.inspection.zgw.zaakdetails.objectUrl' | translate }}</dt>\n              <dd>\n                <code>{{ zo.objectUrl }}</code>\n                <button\n                  cdsButton=\"ghost\"\n                  size=\"sm\"\n                  [iconOnly]=\"true\"\n                  [attr.aria-label]=\"'case.inspection.zgw.actions.copy' | translate\"\n                  (click)=\"onCopy(zo.objectUrl)\"\n                >\n                  <svg cdsIcon=\"copy\" size=\"16\"></svg>\n                </button>\n              </dd>\n\n              <dt>{{ 'case.inspection.zgw.zaakdetails.linkedToZaak' | translate }}</dt>\n              <dd>\n                <cds-tag size=\"sm\" [type]=\"zo.linkedToZaak ? 'green' : 'cool-gray'\">\n                  {{\n                    (zo.linkedToZaak ? 'case.inspection.zgw.yes' : 'case.inspection.zgw.no')\n                      | translate\n                  }}\n                </cds-tag>\n              </dd>\n            </dl>\n\n            <ng-container *ngIf=\"zd.zaakdetailsObject\">\n              <button\n                *ngIf=\"!$zaakdetailsContent()\"\n                cdsButton=\"tertiary\"\n                size=\"sm\"\n                (click)=\"onResolveZaakdetailsContent()\"\n              >\n                {{ 'case.inspection.zgw.actions.viewLatestContent' | translate }}\n              </button>\n\n              <p *ngIf=\"$zaakdetailsContent() === 'loading'\">\n                {{ 'case.inspection.zgw.zaakdetails.contentLoading' | translate }}\n              </p>\n\n              <ng-container *ngIf=\"$zaakdetailsContent() as content\">\n                <ng-container *ngIf=\"content !== 'loading'\">\n                  <cds-inline-notification\n                    *ngIf=\"!content.resolved\"\n                    [notificationObj]=\"{\n                      type: 'info',\n                      title: 'case.inspection.zgw.zaakdetails.contentNotResolved' | translate,\n                      message: content.message,\n                      showClose: false,\n                      lowContrast: true,\n                    }\"\n                  ></cds-inline-notification>\n\n                  <valtimo-json-editor\n                    *ngIf=\"content.resolved && $zaakdetailsContentModel() as model\"\n                    [model]=\"model\"\n                    [showEditButton]=\"false\"\n                    [heightPx]=\"320\"\n                  ></valtimo-json-editor>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </cds-accordion-item>\n\n        <!-- Raw zaak JSON -->\n        <cds-accordion-item [title]=\"'case.inspection.zgw.rawJson.title' | translate\">\n          <valtimo-json-editor\n            *ngIf=\"$rawZaakModel() as model\"\n            [model]=\"model\"\n            [showEditButton]=\"false\"\n            [heightPx]=\"500\"\n          ></valtimo-json-editor>\n        </cds-accordion-item>\n      </cds-accordion>\n    </ng-container>\n  </ng-container>\n</section>\n", styles: [".case-inspection-zgw-tab{display:flex;flex-direction:column;gap:1rem}.case-inspection-zgw-tab__error{color:var(--cds-text-error, #da1e28)}.case-inspection-zgw-tab__empty{color:var(--cds-text-secondary, #525252);font-style:italic}.case-inspection-zgw-tab__warnings{margin-bottom:.5rem}.case-inspection-zgw-tab__warning-list{margin:0;padding-left:1.25rem;list-style:disc;font-size:.875rem;color:var(--cds-text-secondary, #525252)}.case-inspection-zgw-tab__list{display:grid;grid-template-columns:minmax(180px,max-content) 1fr;column-gap:1rem;margin:0;font-size:.875rem}.case-inspection-zgw-tab__list dt,.case-inspection-zgw-tab__list dd{min-height:2rem;display:flex;align-items:center;margin:0}.case-inspection-zgw-tab__list dt{font-weight:600}.case-inspection-zgw-tab__list dd{gap:.25rem;word-break:break-all}.case-inspection-zgw-tab__list code{font-size:.85rem}.case-inspection-zgw-tab__cards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}.case-inspection-zgw-tab__card{border:1px solid var(--cds-border-subtle, #e0e0e0);padding:1rem;display:flex;flex-direction:column;gap:.75rem}:host ::ng-deep cds-accordion{border-left:1px solid var(--cds-border-subtle);border-right:1px solid var(--cds-border-subtle)}\n/*!\n * Copyright 2015-2026 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: ZgwCaseInspectionService }, { type: i6.IconService }], propDecorators: { documentId: [{
+                type: Input
+            }] } });
+
 /*
  * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
@@ -5448,6 +5632,10 @@ class ZgwModule {
                 provide: ZGW_OBJECT_TYPE_COMPONENT_TOKEN,
                 useValue: CaseDetailTabObjectTypeComponent,
             },
+            {
+                provide: ZGW_CASE_INSPECTION_TAB_TOKEN,
+                useValue: CaseInspectionZgwTabComponent,
+            },
             {
                 provide: ZGW_DOCUMENTEN_API_DOCUMENTS_COMPONENT_TOKEN,
                 useValue: CaseDetailTabDocumentenApiDocumentsComponent,
@@ -5499,6 +5687,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                             provide: ZGW_OBJECT_TYPE_COMPONENT_TOKEN,
                             useValue: CaseDetailTabObjectTypeComponent,
                         },
+                        {
+                            provide: ZGW_CASE_INSPECTION_TAB_TOKEN,
+                            useValue: CaseInspectionZgwTabComponent,
+                        },
                         {
                             provide: ZGW_DOCUMENTEN_API_DOCUMENTS_COMPONENT_TOKEN,
                             useValue: CaseDetailTabDocumentenApiDocumentsComponent,