@valtimo/case-management 13.34.0 → 13.35.0

package/fesm2022/valtimo-case-management.mjs

@@ -2886,11 +2886,11 @@ class CaseManagementSearchFieldsComponent {
         this.searchFieldClicked(searchField, false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CaseManagementSearchFieldsComponent, deps: [{ token: i1$2.DocumentService }, { token: i2$2.ActivatedRoute }, { token: i3.TranslateService }, { token: i2.IconService }, { token: i2$1.EditPermissionsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: CaseManagementSearchFieldsComponent, isStandalone: false, selector: "valtimo-case-management-search-fields", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    caseDefinitionKey: caseDefinitionKey$ | async,\n    disableInput: disableInput$ | async,\n    downloadName: downloadName$ | async,\n    downloadUrl: downloadUrl$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n    jsonEditorModel: jsonEditorModel$ | async,\n    searchFields: translatedSearchFields$ | async,\n    showActionItems: showActionItems$ | async,\n    valid: valid$ | async,\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"content; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"modal; context: {obs: obs}\"></ng-container>\n</ng-container>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"searchFieldsOverview.deleteSearchFieldConfirmation\"\n  [outputOnConfirm]=\"selectedDeleteSearchField$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDeleteSelectedSearchFieldConfirm($event)\"\n></valtimo-confirmation-modal>\n\n<ng-template #buttons let-obs=\"obs\">\n  <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n\n  <button\n    cdsButton=\"primary\"\n    data-test-id=\"case-management-search-add\"\n    *ngIf=\"obs.hasEditPermissions\"\n    [disabled]=\"loadingSearchFields || obs.disableInput\"\n    (click)=\"searchFieldClicked($event, true)\"\n  >\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n    {{ 'searchFieldsOverview.addRow' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #content let-obs=\"obs\">\n  @if (!jsonEditorActive()) {\n    <valtimo-carbon-list\n      data-test-id=\"searchFieldsList\"\n      [actionItems]=\"actionItems\"\n      [showActionItems]=\"obs.hasEditPermissions\"\n      [fields]=\"fields\"\n      [header]=\"false\"\n      [items]=\"obs.searchFields\"\n      [loading]=\"!obs.searchFields\"\n      (rowClicked)=\"searchFieldClicked($event, false)\"\n      [dragAndDrop]=\"true\"\n      [dragAndDropDisabled]=\"obs.disableInput\"\n      (itemsReordered)=\"onItemsReordered(obs.caseDefinitionKey, $event)\"\n    >\n      <ng-container\n        carbonToolbarContent\n        *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n      ></ng-container>\n\n      <valtimo-no-results\n        [title]=\"'searchFieldsOverview.noSearchfieldsTitle' | translate\"\n        [description]=\"'searchFieldsOverview.noSearchfieldsDescription' | translate\"\n      ></valtimo-no-results>\n    </valtimo-carbon-list>\n  } @else {\n    <valtimo-json-editor\n      [model]=\"obs.jsonEditorModel\"\n      [fitPage]=\"true\"\n      [fitPageSpaceAdjustment]=\"248\"\n      [showEditButton]=\"obs.hasEditPermissions\"\n      (saveEvent)=\"updateSearchFields(obs.caseDefinitionKey, $event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n      <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n    </valtimo-json-editor>\n  }\n</ng-template>\n\n<ng-template #modal let-obs=\"obs\">\n  <cds-modal\n    valtimoCdsModal\n    [title]=\"\n      searchFieldActionTypeIsAdd\n        ? ('searchFieldsOverview.addRow' | translate)\n        : ('searchFieldsOverview.edit' | translate)\n    \"\n    [open]=\"modalShowing$ | async\"\n    [showFooter]=\"true\"\n    size=\"sm\"\n    (close)=\"onModalClose()\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onModalClose()\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          (searchFieldActionTypeIsAdd ? 'searchFieldsOverview.addRow' : 'searchFieldsOverview.edit')\n            | translate\n        }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent [cdsLayer]=\"1\">\n      <v-form\n        (valueChange)=\"formValueChange($event)\"\n        *ngIf=\"\n          (showFields$ | async) && {\n            searchField: selectedSearchField$ | async,\n          } as searchObs\n        \"\n      >\n        <v-input\n          name=\"title\"\n          dataTestId=\"case-management-search-title\"\n          [title]=\"'searchFieldsOverview.title' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.title\"\n          [disabled]=\"obs.disableInput\"\n          [required]=\"false\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.title' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <v-input\n          name=\"key\"\n          dataTestId=\"case-management-search-key\"\n          [title]=\"'searchFieldsOverview.key' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.key\"\n          [disabled]=\"obs.disableInput || !searchFieldActionTypeIsAdd\"\n          [required]=\"true\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.key' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <valtimo-value-path-selector\n          name=\"path\"\n          [label]=\"'searchFieldsOverview.path' | translate\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.path' | translate\"\n          [marginXl]=\"true\"\n          [caseDefinitionKey]=\"caseDefinitionKey$ | async\"\n          [caseDefinitionVersionTag]=\"caseDefinitionVersionTag$ | async\"\n          [prefixes]=\"[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]\"\n          [defaultValue]=\"searchObs.searchField?.path\"\n          [disabled]=\"obs.disableInput\"\n        ></valtimo-value-path-selector>\n\n        <v-select\n          *ngIf=\"dataTypeItems$ | async as dataTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dataTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dataType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"dataType\"\n          [defaultSelectionId]=\"searchObs.searchField?.dataType\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dataType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-dataTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"(showMatchTypes$ | async) && (matchTypeItems$ | async) as matchTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"matchTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.matchType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"matchType\"\n          [defaultSelectionId]=\"searchObs.searchField?.matchType\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.matchType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-matchTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"fieldTypeItems$ | async as fieldTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"fieldTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.fieldType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"fieldType\"\n          [defaultSelectionId]=\"searchObs.searchField?.fieldType\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.fieldType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-fieldTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"\n            (fieldTypeIsDropdown$ | async) &&\n            (dropdownDataProviderNames$ | async) as dropdownDataProviderNames\n          \"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dropdownDataProviderNames\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dropdownDataProvider' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          name=\"dropdownDataProvider\"\n          [defaultSelectionId]=\"searchObs.searchField?.dropdownDataProvider\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownDataProvider' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-dropdownDataProvider\"\n        ></v-select>\n\n        <valtimo-carbon-multi-input\n          *ngIf=\"\n            (showInputDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          name=\"dropdownValues\"\n          [title]=\"'searchFieldsOverview.dropdownListValues' | translate\"\n          type=\"keyValue\"\n          [disabled]=\"obs.disableInput\"\n          [defaultValues]=\"initialDropdownValues\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownListValues' | translate\"\n          (valueChange)=\"dropdownDatalistChange($event)\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </valtimo-carbon-multi-input>\n\n        <v-table\n          *ngIf=\"\n            (showReadonlyDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          [items]=\"initialDropdownValues\"\n          [columns]=\"dropdownColumns$ | async\"\n          [showEditButtons]=\"false\"\n          [itemsTranslationKey]=\"'searchFieldsOverview'\"\n          [showPagination]=\"false\"\n          [mobileBreakpointPx]=\"200\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-table>\n      </v-form>\n    </section>\n\n    <cds-modal-footer>\n      <ng-container *ngTemplateOutlet=\"buttonsFooterModal; context: {obs: obs}\"></ng-container>\n    </cds-modal-footer>\n  </cds-modal>\n</ng-template>\n\n<ng-template #buttonsFooterModal let-obs=\"obs\">\n  <button\n    data-test-id=\"case-management-search-close\"\n    cdsButton=\"secondary\"\n    (click)=\"onModalClose()\"\n    [disabled]=\"obs.disableInput\"\n  >\n    {{ 'interface.cancel' | translate }}\n  </button>\n\n  <button\n    data-test-id=\"case-management-search-save\"\n    cdsButton=\"primary\"\n    [disabled]=\"obs.disableInput || !obs.valid\"\n    (click)=\"saveSearchField(obs.caseDefinitionKey)\"\n  >\n    {{ 'searchFieldsOverview.submit' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #viewToggle>\n  <cds-tooltip [description]=\"'JSON editor'\">\n    <button\n      [cdsButton]=\"buttonTheme()\"\n      data-test-id=\"case-management-search-fields-switch-view\"\n      iconOnly=\"true\"\n      (click)=\"switchView()\"\n    >\n      <svg cdsIcon=\"code\" size=\"16\"></svg>\n    </button>\n  </cds-tooltip>\n</ng-template>\n\n<ng-template #downloadButton let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    data-test-id=\"case-management-search-download\"\n    [disabled]=\"\n      !obs.downloadUrl || !obs.downloadName || obs.searchFields?.length <= 0 || obs.disableInput\n    \"\n    (click)=\"onDownloadClick()\"\n  >\n    <svg cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", styles: ["valtimo-list::ng-deep table{border-top:1px solid rgba(0,0,0,.125)}.case-management-search-fields__buttons{display:flex;gap:16px}.case-management-search-fields__buttons .center-link{display:flex;align-items:center}.case-management-search-fields__move-buttons{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.case-management-search-fields__move-buttons button:not(:last-child){margin-right:8px}.list-actions{width:1px}.modal-header::ng-deep{background-color:#f3f4f7}::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--tab-content{padding-top:0!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i7.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "component", type: i7.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }, { kind: "component", type: i7.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i7.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["addRowText", "addButtonType", "addRowTranslationKey", "arbitraryAmountTitles", "arbitraryValueAmount", "defaultValues", "deleteRowText", "deleteRowTranslationKey", "disabled", "dropdownColumnTitle", "dropdownItems", "dropdownWidth", "fullWidth", "hideAddButton", "hideDeleteButton", "initialAmountOfRows", "keyColumnTitle", "margin", "maxRows", "minimumAmountOfRows", "name", "required", "title", "titleTranslationKey", "tooltip", "type", "valueColumnTitle", "valuePathSelectorCaseDefinitionKey", "valuePathSelectorPrefixes", "valuePathSelectorShowCaseDefinitionSelector", "valuePathSelectorNotation", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "component", type: i7.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: i7.TableComponent, selector: "v-table", inputs: ["items", "columns", "loading", "showEditButtons", "showPagination", "editButtonTranslationKey", "itemsTranslationKey", "noResultsTranslationKey", "mobileBreakpointPx", "amountOfLoadingRows", "collectionSize", "page", "size"], outputs: ["editButtonClicked", "paginationSizeSet", "paginationPageSet"] }, { kind: "directive", type: i7.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "component", type: i7.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i7.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "component", type: i2.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description", "templateContext"] }, { kind: "component", type: i7.ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "buildingBlockDefinitionKey", "buildingBlockDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "dropUp", "defaultValue", "type", "parentItem", "filterItems"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "directive", type: i2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: i7.JsonEditorComponent, selector: "valtimo-json-editor", inputs: ["disabled", "model", "editorOptions", "fitPage", "fitPageSpaceAdjustment", "formatOnLoad", "heightPx", "heightStyle", "jsonSchema", "showEditButton", "widthPx"], outputs: ["changeEvent", "discardEvent", "keepEditingEvent", "saveEvent"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: CaseManagementSearchFieldsComponent, isStandalone: false, selector: "valtimo-case-management-search-fields", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    caseDefinitionKey: caseDefinitionKey$ | async,\n    disableInput: disableInput$ | async,\n    downloadName: downloadName$ | async,\n    downloadUrl: downloadUrl$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n    jsonEditorModel: jsonEditorModel$ | async,\n    searchFields: translatedSearchFields$ | async,\n    showActionItems: showActionItems$ | async,\n    valid: valid$ | async,\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"content; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"modal; context: {obs: obs}\"></ng-container>\n</ng-container>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"searchFieldsOverview.deleteSearchFieldConfirmation\"\n  [outputOnConfirm]=\"selectedDeleteSearchField$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDeleteSelectedSearchFieldConfirm($event)\"\n></valtimo-confirmation-modal>\n\n<ng-template #buttons let-obs=\"obs\">\n  <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n\n  <button\n    cdsButton=\"primary\"\n    data-test-id=\"case-management-search-add\"\n    *ngIf=\"obs.hasEditPermissions\"\n    [disabled]=\"loadingSearchFields || obs.disableInput\"\n    (click)=\"searchFieldClicked($event, true)\"\n  >\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n    {{ 'searchFieldsOverview.addRow' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #content let-obs=\"obs\">\n  @if (!jsonEditorActive()) {\n    <valtimo-carbon-list\n      data-test-id=\"searchFieldsList\"\n      [actionItems]=\"actionItems\"\n      [showActionItems]=\"obs.hasEditPermissions\"\n      [fields]=\"fields\"\n      [header]=\"false\"\n      [items]=\"obs.searchFields\"\n      [loading]=\"!obs.searchFields\"\n      (rowClicked)=\"searchFieldClicked($event, false)\"\n      [dragAndDrop]=\"true\"\n      [dragAndDropDisabled]=\"obs.disableInput\"\n      (itemsReordered)=\"onItemsReordered(obs.caseDefinitionKey, $event)\"\n    >\n      <ng-container\n        carbonToolbarContent\n        *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n      ></ng-container>\n\n      <valtimo-no-results\n        [title]=\"'searchFieldsOverview.noSearchfieldsTitle' | translate\"\n        [description]=\"'searchFieldsOverview.noSearchfieldsDescription' | translate\"\n      ></valtimo-no-results>\n    </valtimo-carbon-list>\n  } @else {\n    <valtimo-json-editor\n      [model]=\"obs.jsonEditorModel\"\n      [fitPage]=\"true\"\n      [showEditButton]=\"obs.hasEditPermissions\"\n      (saveEvent)=\"updateSearchFields(obs.caseDefinitionKey, $event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n      <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n    </valtimo-json-editor>\n  }\n</ng-template>\n\n<ng-template #modal let-obs=\"obs\">\n  <cds-modal\n    valtimoCdsModal\n    [title]=\"\n      searchFieldActionTypeIsAdd\n        ? ('searchFieldsOverview.addRow' | translate)\n        : ('searchFieldsOverview.edit' | translate)\n    \"\n    [open]=\"modalShowing$ | async\"\n    [showFooter]=\"true\"\n    size=\"sm\"\n    (close)=\"onModalClose()\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onModalClose()\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          (searchFieldActionTypeIsAdd ? 'searchFieldsOverview.addRow' : 'searchFieldsOverview.edit')\n            | translate\n        }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent [cdsLayer]=\"1\">\n      <v-form\n        (valueChange)=\"formValueChange($event)\"\n        *ngIf=\"\n          (showFields$ | async) && {\n            searchField: selectedSearchField$ | async,\n          } as searchObs\n        \"\n      >\n        <v-input\n          name=\"title\"\n          dataTestId=\"case-management-search-title\"\n          [title]=\"'searchFieldsOverview.title' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.title\"\n          [disabled]=\"obs.disableInput\"\n          [required]=\"false\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.title' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <v-input\n          name=\"key\"\n          dataTestId=\"case-management-search-key\"\n          [title]=\"'searchFieldsOverview.key' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.key\"\n          [disabled]=\"obs.disableInput || !searchFieldActionTypeIsAdd\"\n          [required]=\"true\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.key' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <valtimo-value-path-selector\n          name=\"path\"\n          [label]=\"'searchFieldsOverview.path' | translate\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.path' | translate\"\n          [marginXl]=\"true\"\n          [caseDefinitionKey]=\"caseDefinitionKey$ | async\"\n          [caseDefinitionVersionTag]=\"caseDefinitionVersionTag$ | async\"\n          [prefixes]=\"[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]\"\n          [defaultValue]=\"searchObs.searchField?.path\"\n          [disabled]=\"obs.disableInput\"\n        ></valtimo-value-path-selector>\n\n        <v-select\n          *ngIf=\"dataTypeItems$ | async as dataTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dataTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dataType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"dataType\"\n          [defaultSelectionId]=\"searchObs.searchField?.dataType\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dataType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-dataTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"(showMatchTypes$ | async) && (matchTypeItems$ | async) as matchTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"matchTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.matchType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"matchType\"\n          [defaultSelectionId]=\"searchObs.searchField?.matchType\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.matchType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-matchTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"fieldTypeItems$ | async as fieldTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"fieldTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.fieldType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"fieldType\"\n          [defaultSelectionId]=\"searchObs.searchField?.fieldType\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.fieldType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-fieldTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"\n            (fieldTypeIsDropdown$ | async) &&\n            (dropdownDataProviderNames$ | async) as dropdownDataProviderNames\n          \"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dropdownDataProviderNames\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dropdownDataProvider' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          name=\"dropdownDataProvider\"\n          [defaultSelectionId]=\"searchObs.searchField?.dropdownDataProvider\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownDataProvider' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-dropdownDataProvider\"\n        ></v-select>\n\n        <valtimo-carbon-multi-input\n          *ngIf=\"\n            (showInputDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          name=\"dropdownValues\"\n          [title]=\"'searchFieldsOverview.dropdownListValues' | translate\"\n          type=\"keyValue\"\n          [disabled]=\"obs.disableInput\"\n          [defaultValues]=\"initialDropdownValues\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownListValues' | translate\"\n          (valueChange)=\"dropdownDatalistChange($event)\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </valtimo-carbon-multi-input>\n\n        <v-table\n          *ngIf=\"\n            (showReadonlyDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          [items]=\"initialDropdownValues\"\n          [columns]=\"dropdownColumns$ | async\"\n          [showEditButtons]=\"false\"\n          [itemsTranslationKey]=\"'searchFieldsOverview'\"\n          [showPagination]=\"false\"\n          [mobileBreakpointPx]=\"200\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-table>\n      </v-form>\n    </section>\n\n    <cds-modal-footer>\n      <ng-container *ngTemplateOutlet=\"buttonsFooterModal; context: {obs: obs}\"></ng-container>\n    </cds-modal-footer>\n  </cds-modal>\n</ng-template>\n\n<ng-template #buttonsFooterModal let-obs=\"obs\">\n  <button\n    data-test-id=\"case-management-search-close\"\n    cdsButton=\"secondary\"\n    (click)=\"onModalClose()\"\n    [disabled]=\"obs.disableInput\"\n  >\n    {{ 'interface.cancel' | translate }}\n  </button>\n\n  <button\n    data-test-id=\"case-management-search-save\"\n    cdsButton=\"primary\"\n    [disabled]=\"obs.disableInput || !obs.valid\"\n    (click)=\"saveSearchField(obs.caseDefinitionKey)\"\n  >\n    {{ 'searchFieldsOverview.submit' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #viewToggle>\n  <cds-tooltip [description]=\"'JSON editor'\">\n    <button\n      [cdsButton]=\"buttonTheme()\"\n      data-test-id=\"case-management-search-fields-switch-view\"\n      iconOnly=\"true\"\n      (click)=\"switchView()\"\n    >\n      <svg cdsIcon=\"code\" size=\"16\"></svg>\n    </button>\n  </cds-tooltip>\n</ng-template>\n\n<ng-template #downloadButton let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    data-test-id=\"case-management-search-download\"\n    [disabled]=\"\n      !obs.downloadUrl || !obs.downloadName || obs.searchFields?.length <= 0 || obs.disableInput\n    \"\n    (click)=\"onDownloadClick()\"\n  >\n    <svg cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", styles: ["valtimo-list::ng-deep table{border-top:1px solid rgba(0,0,0,.125)}.case-management-search-fields__buttons{display:flex;gap:16px}.case-management-search-fields__buttons .center-link{display:flex;align-items:center}.case-management-search-fields__move-buttons{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.case-management-search-fields__move-buttons button:not(:last-child){margin-right:8px}.list-actions{width:1px}.modal-header::ng-deep{background-color:#f3f4f7}::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--tab-content{padding-top:0!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i7.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "component", type: i7.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }, { kind: "component", type: i7.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i7.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["addRowText", "addButtonType", "addRowTranslationKey", "arbitraryAmountTitles", "arbitraryValueAmount", "defaultValues", "deleteRowText", "deleteRowTranslationKey", "disabled", "dropdownColumnTitle", "dropdownItems", "dropdownWidth", "fullWidth", "hideAddButton", "hideDeleteButton", "initialAmountOfRows", "keyColumnTitle", "margin", "maxRows", "minimumAmountOfRows", "name", "required", "title", "titleTranslationKey", "tooltip", "type", "valueColumnTitle", "valuePathSelectorCaseDefinitionKey", "valuePathSelectorPrefixes", "valuePathSelectorShowCaseDefinitionSelector", "valuePathSelectorNotation", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "component", type: i7.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: i7.TableComponent, selector: "v-table", inputs: ["items", "columns", "loading", "showEditButtons", "showPagination", "editButtonTranslationKey", "itemsTranslationKey", "noResultsTranslationKey", "mobileBreakpointPx", "amountOfLoadingRows", "collectionSize", "page", "size"], outputs: ["editButtonClicked", "paginationSizeSet", "paginationPageSet"] }, { kind: "directive", type: i7.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "component", type: i7.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i7.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "component", type: i2.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description", "templateContext"] }, { kind: "component", type: i7.ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "buildingBlockDefinitionKey", "buildingBlockDefinitionVersionTag", "prefixes", "excludePrefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "dropUp", "defaultValue", "type", "parentItem", "filterItems"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "directive", type: i2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: i7.JsonEditorComponent, selector: "valtimo-json-editor", inputs: ["disabled", "model", "editorOptions", "fitPage", "formatOnLoad", "heightPx", "heightStyle", "jsonSchema", "showEditButton", "widthPx"], outputs: ["changeEvent", "discardEvent", "keepEditingEvent", "saveEvent"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CaseManagementSearchFieldsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'valtimo-case-management-search-fields', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    caseDefinitionKey: caseDefinitionKey$ | async,\n    disableInput: disableInput$ | async,\n    downloadName: downloadName$ | async,\n    downloadUrl: downloadUrl$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n    jsonEditorModel: jsonEditorModel$ | async,\n    searchFields: translatedSearchFields$ | async,\n    showActionItems: showActionItems$ | async,\n    valid: valid$ | async,\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"content; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"modal; context: {obs: obs}\"></ng-container>\n</ng-container>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"searchFieldsOverview.deleteSearchFieldConfirmation\"\n  [outputOnConfirm]=\"selectedDeleteSearchField$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDeleteSelectedSearchFieldConfirm($event)\"\n></valtimo-confirmation-modal>\n\n<ng-template #buttons let-obs=\"obs\">\n  <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n\n  <button\n    cdsButton=\"primary\"\n    data-test-id=\"case-management-search-add\"\n    *ngIf=\"obs.hasEditPermissions\"\n    [disabled]=\"loadingSearchFields || obs.disableInput\"\n    (click)=\"searchFieldClicked($event, true)\"\n  >\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n    {{ 'searchFieldsOverview.addRow' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #content let-obs=\"obs\">\n  @if (!jsonEditorActive()) {\n    <valtimo-carbon-list\n      data-test-id=\"searchFieldsList\"\n      [actionItems]=\"actionItems\"\n      [showActionItems]=\"obs.hasEditPermissions\"\n      [fields]=\"fields\"\n      [header]=\"false\"\n      [items]=\"obs.searchFields\"\n      [loading]=\"!obs.searchFields\"\n      (rowClicked)=\"searchFieldClicked($event, false)\"\n      [dragAndDrop]=\"true\"\n      [dragAndDropDisabled]=\"obs.disableInput\"\n      (itemsReordered)=\"onItemsReordered(obs.caseDefinitionKey, $event)\"\n    >\n      <ng-container\n        carbonToolbarContent\n        *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n      ></ng-container>\n\n      <valtimo-no-results\n        [title]=\"'searchFieldsOverview.noSearchfieldsTitle' | translate\"\n        [description]=\"'searchFieldsOverview.noSearchfieldsDescription' | translate\"\n      ></valtimo-no-results>\n    </valtimo-carbon-list>\n  } @else {\n    <valtimo-json-editor\n      [model]=\"obs.jsonEditorModel\"\n      [fitPage]=\"true\"\n      [fitPageSpaceAdjustment]=\"248\"\n      [showEditButton]=\"obs.hasEditPermissions\"\n      (saveEvent)=\"updateSearchFields(obs.caseDefinitionKey, $event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n      <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n    </valtimo-json-editor>\n  }\n</ng-template>\n\n<ng-template #modal let-obs=\"obs\">\n  <cds-modal\n    valtimoCdsModal\n    [title]=\"\n      searchFieldActionTypeIsAdd\n        ? ('searchFieldsOverview.addRow' | translate)\n        : ('searchFieldsOverview.edit' | translate)\n    \"\n    [open]=\"modalShowing$ | async\"\n    [showFooter]=\"true\"\n    size=\"sm\"\n    (close)=\"onModalClose()\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onModalClose()\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          (searchFieldActionTypeIsAdd ? 'searchFieldsOverview.addRow' : 'searchFieldsOverview.edit')\n            | translate\n        }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent [cdsLayer]=\"1\">\n      <v-form\n        (valueChange)=\"formValueChange($event)\"\n        *ngIf=\"\n          (showFields$ | async) && {\n            searchField: selectedSearchField$ | async,\n          } as searchObs\n        \"\n      >\n        <v-input\n          name=\"title\"\n          dataTestId=\"case-management-search-title\"\n          [title]=\"'searchFieldsOverview.title' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.title\"\n          [disabled]=\"obs.disableInput\"\n          [required]=\"false\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.title' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <v-input\n          name=\"key\"\n          dataTestId=\"case-management-search-key\"\n          [title]=\"'searchFieldsOverview.key' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.key\"\n          [disabled]=\"obs.disableInput || !searchFieldActionTypeIsAdd\"\n          [required]=\"true\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.key' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <valtimo-value-path-selector\n          name=\"path\"\n          [label]=\"'searchFieldsOverview.path' | translate\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.path' | translate\"\n          [marginXl]=\"true\"\n          [caseDefinitionKey]=\"caseDefinitionKey$ | async\"\n          [caseDefinitionVersionTag]=\"caseDefinitionVersionTag$ | async\"\n          [prefixes]=\"[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]\"\n          [defaultValue]=\"searchObs.searchField?.path\"\n          [disabled]=\"obs.disableInput\"\n        ></valtimo-value-path-selector>\n\n        <v-select\n          *ngIf=\"dataTypeItems$ | async as dataTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dataTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dataType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"dataType\"\n          [defaultSelectionId]=\"searchObs.searchField?.dataType\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dataType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-dataTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"(showMatchTypes$ | async) && (matchTypeItems$ | async) as matchTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"matchTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.matchType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"matchType\"\n          [defaultSelectionId]=\"searchObs.searchField?.matchType\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.matchType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-matchTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"fieldTypeItems$ | async as fieldTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"fieldTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.fieldType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"fieldType\"\n          [defaultSelectionId]=\"searchObs.searchField?.fieldType\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.fieldType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-fieldTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"\n            (fieldTypeIsDropdown$ | async) &&\n            (dropdownDataProviderNames$ | async) as dropdownDataProviderNames\n          \"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dropdownDataProviderNames\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dropdownDataProvider' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          name=\"dropdownDataProvider\"\n          [defaultSelectionId]=\"searchObs.searchField?.dropdownDataProvider\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownDataProvider' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-dropdownDataProvider\"\n        ></v-select>\n\n        <valtimo-carbon-multi-input\n          *ngIf=\"\n            (showInputDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          name=\"dropdownValues\"\n          [title]=\"'searchFieldsOverview.dropdownListValues' | translate\"\n          type=\"keyValue\"\n          [disabled]=\"obs.disableInput\"\n          [defaultValues]=\"initialDropdownValues\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownListValues' | translate\"\n          (valueChange)=\"dropdownDatalistChange($event)\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </valtimo-carbon-multi-input>\n\n        <v-table\n          *ngIf=\"\n            (showReadonlyDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          [items]=\"initialDropdownValues\"\n          [columns]=\"dropdownColumns$ | async\"\n          [showEditButtons]=\"false\"\n          [itemsTranslationKey]=\"'searchFieldsOverview'\"\n          [showPagination]=\"false\"\n          [mobileBreakpointPx]=\"200\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-table>\n      </v-form>\n    </section>\n\n    <cds-modal-footer>\n      <ng-container *ngTemplateOutlet=\"buttonsFooterModal; context: {obs: obs}\"></ng-container>\n    </cds-modal-footer>\n  </cds-modal>\n</ng-template>\n\n<ng-template #buttonsFooterModal let-obs=\"obs\">\n  <button\n    data-test-id=\"case-management-search-close\"\n    cdsButton=\"secondary\"\n    (click)=\"onModalClose()\"\n    [disabled]=\"obs.disableInput\"\n  >\n    {{ 'interface.cancel' | translate }}\n  </button>\n\n  <button\n    data-test-id=\"case-management-search-save\"\n    cdsButton=\"primary\"\n    [disabled]=\"obs.disableInput || !obs.valid\"\n    (click)=\"saveSearchField(obs.caseDefinitionKey)\"\n  >\n    {{ 'searchFieldsOverview.submit' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #viewToggle>\n  <cds-tooltip [description]=\"'JSON editor'\">\n    <button\n      [cdsButton]=\"buttonTheme()\"\n      data-test-id=\"case-management-search-fields-switch-view\"\n      iconOnly=\"true\"\n      (click)=\"switchView()\"\n    >\n      <svg cdsIcon=\"code\" size=\"16\"></svg>\n    </button>\n  </cds-tooltip>\n</ng-template>\n\n<ng-template #downloadButton let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    data-test-id=\"case-management-search-download\"\n    [disabled]=\"\n      !obs.downloadUrl || !obs.downloadName || obs.searchFields?.length <= 0 || obs.disableInput\n    \"\n    (click)=\"onDownloadClick()\"\n  >\n    <svg cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", styles: ["valtimo-list::ng-deep table{border-top:1px solid rgba(0,0,0,.125)}.case-management-search-fields__buttons{display:flex;gap:16px}.case-management-search-fields__buttons .center-link{display:flex;align-items:center}.case-management-search-fields__move-buttons{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.case-management-search-fields__move-buttons button:not(:last-child){margin-right:8px}.list-actions{width:1px}.modal-header::ng-deep{background-color:#f3f4f7}::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--tab-content{padding-top:0!important}\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"] }]
+            args: [{ standalone: false, selector: 'valtimo-case-management-search-fields', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    caseDefinitionKey: caseDefinitionKey$ | async,\n    disableInput: disableInput$ | async,\n    downloadName: downloadName$ | async,\n    downloadUrl: downloadUrl$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n    jsonEditorModel: jsonEditorModel$ | async,\n    searchFields: translatedSearchFields$ | async,\n    showActionItems: showActionItems$ | async,\n    valid: valid$ | async,\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"content; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"modal; context: {obs: obs}\"></ng-container>\n</ng-container>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"searchFieldsOverview.deleteSearchFieldConfirmation\"\n  [outputOnConfirm]=\"selectedDeleteSearchField$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDeleteSelectedSearchFieldConfirm($event)\"\n></valtimo-confirmation-modal>\n\n<ng-template #buttons let-obs=\"obs\">\n  <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n\n  <button\n    cdsButton=\"primary\"\n    data-test-id=\"case-management-search-add\"\n    *ngIf=\"obs.hasEditPermissions\"\n    [disabled]=\"loadingSearchFields || obs.disableInput\"\n    (click)=\"searchFieldClicked($event, true)\"\n  >\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n    {{ 'searchFieldsOverview.addRow' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #content let-obs=\"obs\">\n  @if (!jsonEditorActive()) {\n    <valtimo-carbon-list\n      data-test-id=\"searchFieldsList\"\n      [actionItems]=\"actionItems\"\n      [showActionItems]=\"obs.hasEditPermissions\"\n      [fields]=\"fields\"\n      [header]=\"false\"\n      [items]=\"obs.searchFields\"\n      [loading]=\"!obs.searchFields\"\n      (rowClicked)=\"searchFieldClicked($event, false)\"\n      [dragAndDrop]=\"true\"\n      [dragAndDropDisabled]=\"obs.disableInput\"\n      (itemsReordered)=\"onItemsReordered(obs.caseDefinitionKey, $event)\"\n    >\n      <ng-container\n        carbonToolbarContent\n        *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n      ></ng-container>\n\n      <valtimo-no-results\n        [title]=\"'searchFieldsOverview.noSearchfieldsTitle' | translate\"\n        [description]=\"'searchFieldsOverview.noSearchfieldsDescription' | translate\"\n      ></valtimo-no-results>\n    </valtimo-carbon-list>\n  } @else {\n    <valtimo-json-editor\n      [model]=\"obs.jsonEditorModel\"\n      [fitPage]=\"true\"\n      [showEditButton]=\"obs.hasEditPermissions\"\n      (saveEvent)=\"updateSearchFields(obs.caseDefinitionKey, $event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n      <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n    </valtimo-json-editor>\n  }\n</ng-template>\n\n<ng-template #modal let-obs=\"obs\">\n  <cds-modal\n    valtimoCdsModal\n    [title]=\"\n      searchFieldActionTypeIsAdd\n        ? ('searchFieldsOverview.addRow' | translate)\n        : ('searchFieldsOverview.edit' | translate)\n    \"\n    [open]=\"modalShowing$ | async\"\n    [showFooter]=\"true\"\n    size=\"sm\"\n    (close)=\"onModalClose()\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onModalClose()\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          (searchFieldActionTypeIsAdd ? 'searchFieldsOverview.addRow' : 'searchFieldsOverview.edit')\n            | translate\n        }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent [cdsLayer]=\"1\">\n      <v-form\n        (valueChange)=\"formValueChange($event)\"\n        *ngIf=\"\n          (showFields$ | async) && {\n            searchField: selectedSearchField$ | async,\n          } as searchObs\n        \"\n      >\n        <v-input\n          name=\"title\"\n          dataTestId=\"case-management-search-title\"\n          [title]=\"'searchFieldsOverview.title' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.title\"\n          [disabled]=\"obs.disableInput\"\n          [required]=\"false\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.title' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <v-input\n          name=\"key\"\n          dataTestId=\"case-management-search-key\"\n          [title]=\"'searchFieldsOverview.key' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.key\"\n          [disabled]=\"obs.disableInput || !searchFieldActionTypeIsAdd\"\n          [required]=\"true\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.key' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <valtimo-value-path-selector\n          name=\"path\"\n          [label]=\"'searchFieldsOverview.path' | translate\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.path' | translate\"\n          [marginXl]=\"true\"\n          [caseDefinitionKey]=\"caseDefinitionKey$ | async\"\n          [caseDefinitionVersionTag]=\"caseDefinitionVersionTag$ | async\"\n          [prefixes]=\"[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]\"\n          [defaultValue]=\"searchObs.searchField?.path\"\n          [disabled]=\"obs.disableInput\"\n        ></valtimo-value-path-selector>\n\n        <v-select\n          *ngIf=\"dataTypeItems$ | async as dataTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dataTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dataType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"dataType\"\n          [defaultSelectionId]=\"searchObs.searchField?.dataType\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dataType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-dataTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"(showMatchTypes$ | async) && (matchTypeItems$ | async) as matchTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"matchTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.matchType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"matchType\"\n          [defaultSelectionId]=\"searchObs.searchField?.matchType\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.matchType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-matchTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"fieldTypeItems$ | async as fieldTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"fieldTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.fieldType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"fieldType\"\n          [defaultSelectionId]=\"searchObs.searchField?.fieldType\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.fieldType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-fieldTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"\n            (fieldTypeIsDropdown$ | async) &&\n            (dropdownDataProviderNames$ | async) as dropdownDataProviderNames\n          \"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dropdownDataProviderNames\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dropdownDataProvider' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          name=\"dropdownDataProvider\"\n          [defaultSelectionId]=\"searchObs.searchField?.dropdownDataProvider\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownDataProvider' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-dropdownDataProvider\"\n        ></v-select>\n\n        <valtimo-carbon-multi-input\n          *ngIf=\"\n            (showInputDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          name=\"dropdownValues\"\n          [title]=\"'searchFieldsOverview.dropdownListValues' | translate\"\n          type=\"keyValue\"\n          [disabled]=\"obs.disableInput\"\n          [defaultValues]=\"initialDropdownValues\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownListValues' | translate\"\n          (valueChange)=\"dropdownDatalistChange($event)\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </valtimo-carbon-multi-input>\n\n        <v-table\n          *ngIf=\"\n            (showReadonlyDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          [items]=\"initialDropdownValues\"\n          [columns]=\"dropdownColumns$ | async\"\n          [showEditButtons]=\"false\"\n          [itemsTranslationKey]=\"'searchFieldsOverview'\"\n          [showPagination]=\"false\"\n          [mobileBreakpointPx]=\"200\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-table>\n      </v-form>\n    </section>\n\n    <cds-modal-footer>\n      <ng-container *ngTemplateOutlet=\"buttonsFooterModal; context: {obs: obs}\"></ng-container>\n    </cds-modal-footer>\n  </cds-modal>\n</ng-template>\n\n<ng-template #buttonsFooterModal let-obs=\"obs\">\n  <button\n    data-test-id=\"case-management-search-close\"\n    cdsButton=\"secondary\"\n    (click)=\"onModalClose()\"\n    [disabled]=\"obs.disableInput\"\n  >\n    {{ 'interface.cancel' | translate }}\n  </button>\n\n  <button\n    data-test-id=\"case-management-search-save\"\n    cdsButton=\"primary\"\n    [disabled]=\"obs.disableInput || !obs.valid\"\n    (click)=\"saveSearchField(obs.caseDefinitionKey)\"\n  >\n    {{ 'searchFieldsOverview.submit' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #viewToggle>\n  <cds-tooltip [description]=\"'JSON editor'\">\n    <button\n      [cdsButton]=\"buttonTheme()\"\n      data-test-id=\"case-management-search-fields-switch-view\"\n      iconOnly=\"true\"\n      (click)=\"switchView()\"\n    >\n      <svg cdsIcon=\"code\" size=\"16\"></svg>\n    </button>\n  </cds-tooltip>\n</ng-template>\n\n<ng-template #downloadButton let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    data-test-id=\"case-management-search-download\"\n    [disabled]=\"\n      !obs.downloadUrl || !obs.downloadName || obs.searchFields?.length <= 0 || obs.disableInput\n    \"\n    (click)=\"onDownloadClick()\"\n  >\n    <svg cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", styles: ["valtimo-list::ng-deep table{border-top:1px solid rgba(0,0,0,.125)}.case-management-search-fields__buttons{display:flex;gap:16px}.case-management-search-fields__buttons .center-link{display:flex;align-items:center}.case-management-search-fields__move-buttons{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.case-management-search-fields__move-buttons button:not(:last-child){margin-right:8px}.list-actions{width:1px}.modal-header::ng-deep{background-color:#f3f4f7}::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--tab-content{padding-top:0!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: i1$2.DocumentService }, { type: i2$2.ActivatedRoute }, { type: i3.TranslateService }, { type: i2.IconService }, { type: i2$1.EditPermissionsService }] });
 
 /*
@@ -2909,6 +2909,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * limitations under the License.
  */
 class CaseManagementListColumnsComponent {
+    static { this.SORTABLE_PATH_REGEX = /^(case:|doc:)/; }
     constructor(documentService, route, translateService, iconService, editPermissionsService) {
         this.documentService = documentService;
         this.route = route;
@@ -2992,11 +2993,7 @@ class CaseManagementListColumnsComponent {
             tagAmount: new FormControl(1),
             exportable: new FormControl(false),
         });
-        this.disableDefaultSort$ = combineLatest([
-            this.currentModalType$,
-            this.formGroup.valueChanges,
-        ]).pipe(map(([currentModalType]) => currentModalType === 'create' &&
-            this.cachedCaseListColumns.find(column => !!column.defaultSort)), startWith(false));
+        this.disableDefaultSort$ = new BehaviorSubject(false);
         this.DISPLAY_TYPES = [
             ViewType.TEXT,
             ViewType.DATE,
@@ -3066,10 +3063,11 @@ class CaseManagementListColumnsComponent {
         this.jsonEditorActive = signal(false);
         this.buttonTheme = computed(() => (this.jsonEditorActive() ? 'primary' : 'ghost'));
         this.displayExportButton = true;
+        this.displaySortable = true;
     }
     ngAfterViewInit() {
         this.iconService.registerAll([ArrowDown16, ArrowUp16]);
-        this.disableExportToggle();
+        this.observePathChanges();
     }
     ngOnDestroy() {
         this._subscriptions.unsubscribe();
@@ -3080,9 +3078,16 @@ class CaseManagementListColumnsComponent {
         if (modalType === 'create') {
             this.formGroup.controls['key'].enable();
             this.resetFormGroup();
+            const hasExistingDefaultSort = this.cachedCaseListColumns.some(column => !!column.defaultSort);
+            this.disableDefaultSort$.next(hasExistingDefaultSort);
+            if (hasExistingDefaultSort) {
+                this.formGroup.controls.defaultSort.disable({ emitEvent: false });
+            }
         }
         else if (modalType === 'edit') {
             this.formGroup.controls['key'].disable();
+            this.formGroup.controls.defaultSort.enable({ emitEvent: false });
+            this.disableDefaultSort$.next(false);
         }
     }
     closeModal() {
@@ -3214,7 +3219,7 @@ class CaseManagementListColumnsComponent {
         });
     }
     addColumn() {
-        const formValue = this.formGroup.value;
+        const formValue = this.formGroup.getRawValue();
         this.params$.pipe(take(1)).subscribe(params => {
             this.documentService
                 .postCaseListForManagement(params.caseDefinitionKey, this.mapFormValuesToColumn(formValue))
@@ -3230,7 +3235,7 @@ class CaseManagementListColumnsComponent {
         });
     }
     updateColumn() {
-        const updatedColumnFormValue = this.formGroup.value;
+        const updatedColumnFormValue = this.formGroup.getRawValue();
         const mappedUpdatedColumn = this.mapFormValuesToColumn(updatedColumnFormValue);
         const currentColumns = this.cachedCaseListColumns;
         const mappedCurrentColumns = currentColumns.map(column => {
@@ -3297,8 +3302,9 @@ class CaseManagementListColumnsComponent {
     mapFormValuesToColumn(formValue) {
         return {
             key: formValue.key,
-            sortable: formValue.sortable,
-            ...(formValue.defaultSort?.key !== this.INVALID_KEY && {
+            sortable: this.displaySortable ? formValue.sortable : false,
+            ...(this.displaySortable &&
+                formValue.defaultSort?.key !== this.INVALID_KEY && {
                 defaultSort: formValue.defaultSort?.key,
             }),
             title: formValue.title || '',
@@ -3317,20 +3323,27 @@ class CaseManagementListColumnsComponent {
             exportable: this.displayExportButton ? formValue.exportable : false,
         };
     }
-    disableExportToggle() {
-        this.formGroup.controls.path.valueChanges
+    observePathChanges() {
+        this._subscriptions.add(this.formGroup.controls.path.valueChanges
             .pipe(startWith(this.formGroup.controls.path.value))
             .subscribe(value => {
-            const pathMustStartWithCaseOrDocRegex = /^(case:|doc:)/;
-            this.displayExportButton = pathMustStartWithCaseOrDocRegex.test(String(value));
-        });
+            const matches = CaseManagementListColumnsComponent.SORTABLE_PATH_REGEX.test(String(value));
+            this.displayExportButton = matches;
+            this.displaySortable = matches;
+            if (!matches) {
+                if (this.formGroup.value.sortable || this.formGroup.value.defaultSort?.key !== this.INVALID_KEY) {
+                    this.formGroup.patchValue({ sortable: false, defaultSort: { key: this.INVALID_KEY } }, { emitEvent: false });
+                    this.selectedSortItemIndex$.next(0);
+                }
+            }
+        }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CaseManagementListColumnsComponent, deps: [{ token: i1$2.DocumentService }, { token: i2$2.ActivatedRoute }, { token: i3.TranslateService }, { token: i2.IconService }, { token: i2$1.EditPermissionsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: CaseManagementListColumnsComponent, isStandalone: false, selector: "valtimo-case-management-list-columns", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    caseListColumn: translatedCaseListColumns$ | async,\n    disableInput: disableInput$ | async,\n    downloadName: downloadName$ | async,\n    downloadUrl: downloadUrl$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n    jsonEditorModel: jsonEditorModel$ | async,\n    loadingCaseListColumns: loadingCaseListColumns$ | async,\n    params: params$ | async,\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"content; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"createEditModal\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"deleteModal\"></ng-container>\n</ng-container>\n\n<ng-template #content let-obs=\"obs\">\n  @if (!jsonEditorActive()) {\n    <valtimo-carbon-list\n      [actionItems]=\"actionItems\"\n      [loading]=\"obs.loadingCaseListColumns\"\n      [items]=\"obs?.caseListColumn || []\"\n      [fields]=\"fields\"\n      [viewMode]=\"false\"\n      [header]=\"false\"\n      (rowClicked)=\"columnRowClicked($event)\"\n      [dragAndDrop]=\"true\"\n      [dragAndDropDisabled]=\"obs.disableInput\"\n      (itemsReordered)=\"onItemsReordered(obs.params.caseDefinitionKey, $event)\"\n      [attr.data-test-id]=\"testIds.columnsList\"\n    >\n      <ng-container\n        carbonToolbarContent\n        *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n      ></ng-container>\n\n      <valtimo-no-results\n        [title]=\"'listColumn.noConfigWarningTitle' | translate\"\n        [description]=\"'listColumn.noConfigWarning' | translate\"\n        illustration=\"valtimo-layout/img/emptystate-empty.svg\"\n      ></valtimo-no-results>\n    </valtimo-carbon-list>\n  } @else {\n    <valtimo-json-editor\n      [model]=\"obs.jsonEditorModel\"\n      [fitPage]=\"true\"\n      [fitPageSpaceAdjustment]=\"248\"\n      [showEditButton]=\"obs.hasEditPermissions\"\n      (saveEvent)=\"updateCaseListColumns(obs.params.caseDefinitionKey, $event)\"\n      [attr.data-test-id]=\"testIds.jsonEditor\"\n    >\n      <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n      <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n    </valtimo-json-editor>\n  }\n</ng-template>\n\n<ng-template #buttons let-obs=\"obs\">\n  <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n\n  <button\n    *ngIf=\"obs.hasEditPermissions\"\n    (click)=\"openModal('create')\"\n    cdsButton=\"primary\"\n    [disabled]=\"obs.loadingCaseListColumns || !(hasEditPermissions$ | async)\"\n    [attr.data-test-id]=\"testIds.addListColumn\"\n  >\n    {{ 'listColumn.addButtonText' | translate }}\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #noConfigWarning>\n  <div class=\"pl-2 pr-2 pb-2 pt-2\">\n    <cds-notification\n      [notificationObj]=\"{\n        type: 'info',\n        title: 'listColumn.noConfigWarningTitle' | translate,\n        message: 'listColumn.noConfigWarning' | translate,\n        showClose: false,\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #createEditModal>\n  <cds-modal\n    valtimoCdsModal\n    *ngIf=\"{\n      type: currentModalType$ | async,\n      show: showModal$ | async,\n      valid: valid$ | async,\n      disableInput: disableInput$ | async,\n      validKey: validKey$ | async,\n      disableDefaultSort: disableDefaultSort$ | async,\n      showEnum: showEnum$ | async,\n      isYesNo: isYesNo$ | async,\n      showTagAmount: showTagAmount$ | async,\n      params: params$ | async,\n    } as modalObs\"\n    [open]=\"modalObs.show\"\n    size=\"sm\"\n    (close)=\"closeModal()\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\" [cdsLayer]=\"1\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          modalObs.type === 'create'\n            ? ('listColumn.addButtonText' | translate)\n            : ('listColumn.editColumnTitle' | translate)\n        }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent [cdsLayer]=\"1\">\n      <ng-container *ngTemplateOutlet=\"modalContent; context: {modalObs: modalObs}\"></ng-container>\n    </section>\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {modalObs: modalObs}\"></ng-container>\n  </cds-modal>\n</ng-template>\n\n<ng-template #modalContent let-modalObs=\"modalObs\">\n  <form [formGroup]=\"formGroup\" class=\"list-column-form\">\n    <cds-label [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.titleTitle' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.titleTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <input cdsText formControlName=\"title\" [attr.data-test-id]=\"testIds.title\" />\n    </cds-label>\n\n    <cds-label\n      [disabled]=\"modalObs.disableInput || modalObs.type === 'edit'\"\n      [invalid]=\"modalObs.validKey === false\"\n      [invalidText]=\"'listColumn.uniqueKeyWarning' | translate\"\n    >\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.key' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.keyTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <input\n        cdsText\n        formControlName=\"key\"\n        [invalid]=\"modalObs.validKey === false\"\n        [attr.data-test-id]=\"testIds.key\"\n      />\n    </cds-label>\n\n    <cds-label [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.path' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.pathTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <valtimo-value-path-selector\n        formControlName=\"path\"\n        [caseDefinitionKey]=\"modalObs.params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"modalObs.params?.caseDefinitionVersionTag\"\n        [attr.data-test-id]=\"testIds.valuePathSelector\"\n      ></valtimo-value-path-selector>\n    </cds-label>\n\n    <cds-label [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.displayType' | translate }}\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.displayTypeTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-dropdown\n        formControlName=\"displayType\"\n        [disabled]=\"modalObs.disableInput\"\n        (selected)=\"selectedDisplayType($event)\"\n        [attr.data-test-id]=\"testIds.displayType\"\n      >\n        <cds-dropdown-list [items]=\"(viewTypeItems$ | async) || []\"></cds-dropdown-list>\n      </cds-dropdown>\n    </cds-label>\n\n    <cds-label *ngIf=\"modalObs.showTagAmount\" [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.tagAmount' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.tagAmountTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-number\n        formControlName=\"tagAmount\"\n        [min]=\"1\"\n        [step]=\"1\"\n        [attr.data-test-id]=\"testIds.tagAmount\"\n      ></cds-number>\n    </cds-label>\n\n    <cds-label *ngIf=\"showDateFormat$ | async\" [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.dateFormat' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.dateFormatTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <input cdsText formControlName=\"dateFormat\" [attr.data-test-id]=\"testIds.dateFormat\" />\n    </cds-label>\n\n    <cds-label *ngIf=\"modalObs.showEnum || modalObs.isYesNo\" [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip select-label\">\n        {{\n          modalObs.isYesNo\n            ? ('listColumn.enumTitleOptional' | translate)\n            : ('listColumn.enumTitle' | translate)\n        }}\n\n        <v-tooltip-icon\n          [tooltip]=\"\n            modalObs.isYesNo\n              ? ('listColumn.enumTooltipOptional' | translate)\n              : ('listColumn.enumTooltip' | translate)\n          \"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <valtimo-carbon-multi-input\n        *ngIf=\"(showModal$ | async) || (modalShowing$ | async)\"\n        type=\"keyValue\"\n        (valueChange)=\"enumValueChange($event)\"\n        [defaultValues]=\"defaultEnumValues$ | async\"\n        [hideAddButton]=\"modalObs.isYesNo\"\n        [hideDeleteButton]=\"modalObs.isYesNo\"\n        [maxRows]=\"modalObs.isYesNo ? 1 : null\"\n        [keyColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.Yes' | translate)\"\n        [valueColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.No' | translate)\"\n        [attr.data-test-id]=\"testIds.multiInput\"\n      ></valtimo-carbon-multi-input>\n    </cds-label>\n\n    <cds-checkbox\n      formControlName=\"sortable\"\n      [disabled]=\"modalObs.showTagAmount || modalObs.disableInput\"\n      [attr.data-test-id]=\"testIds.sortableCheckbox\"\n      >{{ 'listColumn.sortable' | translate }}\n    </cds-checkbox>\n\n    <cds-label\n      [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort || modalObs.showTagAmount\"\n    >\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.defaultSortTitle' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.defaultSortTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-dropdown\n        formControlName=\"defaultSort\"\n        [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort || modalObs.showTagAmount\"\n        [attr.data-test-id]=\"testIds.defaultSort\"\n      >\n        <cds-dropdown-list [items]=\"(sortItems$ | async) || []\"></cds-dropdown-list>\n      </cds-dropdown>\n    </cds-label>\n\n    <cds-label *ngIf=\"displayExportButton\">\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.exportField' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.exportTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-toggle\n        formControlName=\"exportable\"\n        data-testid=\"export-selector-toggle\"\n        [onText]=\"'listColumn.sortableYes' | translate\"\n        [offText]=\"'listColumn.sortableNo' | translate\"\n        [keyColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.Yes' | translate)\"\n        [valueColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.No' | translate)\"\n        [required]=\"false\"\n        [size]=\"'sm'\"\n        [attr.data-test-id]=\"testIds.exportable\"\n      ></cds-toggle>\n    </cds-label>\n  </form>\n</ng-template>\n\n<ng-template #modalFooter let-modalObs=\"modalObs\">\n  <cds-modal-footer [cdsLayer]=\"1\">\n    <ng-container>\n      <button\n        cdsButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"closeModal()\"\n        [disabled]=\"modalObs.disableInput\"\n        [attr.data-test-id]=\"testIds.cancelButton\"\n      >\n        {{ 'listColumn.close' | translate }}\n      </button>\n\n      <button\n        cdsButton=\"primary\"\n        [attr.modal-primary-focus]=\"true\"\n        [disabled]=\"modalObs.valid === false\"\n        (click)=\"saveCaseListColumns()\"\n        [disabled]=\"\n          modalObs.disableInput || modalObs.valid === false || modalObs.validKey === false\n        \"\n        [attr.data-test-id]=\"testIds.saveButton\"\n      >\n        {{ 'listColumn.save' | translate }}\n      </button>\n    </ng-container>\n  </cds-modal-footer>\n</ng-template>\n\n<ng-template #deleteModal>\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showDeleteModal$\"\n    [outputOnConfirm]=\"deleteRowKey$ | async\"\n    (confirmEvent)=\"deleteRowConfirmation($event)\"\n    confirmButtonTextTranslationKey=\"listColumn.deleteColumn\"\n    titleTranslationKey=\"listColumn.deleteColumn\"\n    contentTranslationKey=\"listColumn.deleteColumnConfirmation\"\n    [attr.data-test-id]=\"testIds.confirmationModal\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n\n<ng-template #viewToggle>\n  <cds-tooltip [description]=\"'JSON editor'\">\n    <button\n      [cdsButton]=\"buttonTheme()\"\n      [attr.data-test-id]=\"testIds.switchView\"\n      iconOnly=\"true\"\n      (click)=\"switchView()\"\n    >\n      <svg cdsIcon=\"code\" size=\"16\"></svg>\n    </button>\n  </cds-tooltip>\n</ng-template>\n\n<ng-template #downloadButton let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    (click)=\"onDownloadClick()\"\n    [disabled]=\"\n      !obs.downloadUrl ||\n      !obs.downloadName ||\n      obs.caseListColumn?.length < 1 ||\n      obs.disableInput ||\n      obs.loadingCaseListColumns\n    \"\n    [attr.data-test-id]=\"testIds.downloadButton\"\n  >\n    <svg cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", styles: ["::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--inline-notification{max-width:100%}::ng-deep .cds--label{width:100%}.label-with-tooltip{display:flex;align-items:center}.display-type-dropdown{width:300px}.list-column-form{display:flex;flex-direction:column;gap:16px;margin-bottom:3rem}.select-label{padding-bottom:.5rem;width:250px}.center-link{display:flex;align-items:center}.case-list-columns__actions{display:flex;gap:8px}.list-columns__buttons{display:flex;gap:16px;flex-direction:row;justify-content:flex-end}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i2.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i2.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i2.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i2.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "component", type: i7.TooltipIconComponent, selector: "v-tooltip-icon", inputs: ["tooltip", "disabled"] }, { kind: "component", type: i7.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["addRowText", "addButtonType", "addRowTranslationKey", "arbitraryAmountTitles", "arbitraryValueAmount", "defaultValues", "deleteRowText", "deleteRowTranslationKey", "disabled", "dropdownColumnTitle", "dropdownItems", "dropdownWidth", "fullWidth", "hideAddButton", "hideDeleteButton", "initialAmountOfRows", "keyColumnTitle", "margin", "maxRows", "minimumAmountOfRows", "name", "required", "title", "titleTranslationKey", "tooltip", "type", "valueColumnTitle", "valuePathSelectorCaseDefinitionKey", "valuePathSelectorPrefixes", "valuePathSelectorShowCaseDefinitionSelector", "valuePathSelectorNotation", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "component", type: i7.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: "directive", type: i7.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "component", type: i7.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i7.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "component", type: i2.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "component", type: i2.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description", "templateContext"] }, { kind: "component", type: i7.ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "buildingBlockDefinitionKey", "buildingBlockDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "dropUp", "defaultValue", "type", "parentItem", "filterItems"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "directive", type: i2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: i2.NumberComponent, selector: "cds-number, ibm-number", inputs: ["readonly", "theme", "disabled", "skeleton", "invalid", "id", "placeholder", "size", "required", "value", "min", "max", "label", "helperText", "invalidText", "step", "precision", "warn", "warnText", "ariaLabel", "decrementLabel", "incrementLabel", "fluid"], outputs: ["change"] }, { kind: "component", type: i7.JsonEditorComponent, selector: "valtimo-json-editor", inputs: ["disabled", "model", "editorOptions", "fitPage", "fitPageSpaceAdjustment", "formatOnLoad", "heightPx", "heightStyle", "jsonSchema", "showEditButton", "widthPx"], outputs: ["changeEvent", "discardEvent", "keepEditingEvent", "saveEvent"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: CaseManagementListColumnsComponent, isStandalone: false, selector: "valtimo-case-management-list-columns", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    caseListColumn: translatedCaseListColumns$ | async,\n    disableInput: disableInput$ | async,\n    downloadName: downloadName$ | async,\n    downloadUrl: downloadUrl$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n    jsonEditorModel: jsonEditorModel$ | async,\n    loadingCaseListColumns: loadingCaseListColumns$ | async,\n    params: params$ | async,\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"content; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"createEditModal\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"deleteModal\"></ng-container>\n</ng-container>\n\n<ng-template #content let-obs=\"obs\">\n  @if (!jsonEditorActive()) {\n    <valtimo-carbon-list\n      [actionItems]=\"actionItems\"\n      [loading]=\"obs.loadingCaseListColumns\"\n      [items]=\"obs?.caseListColumn || []\"\n      [fields]=\"fields\"\n      [viewMode]=\"false\"\n      [header]=\"false\"\n      (rowClicked)=\"columnRowClicked($event)\"\n      [dragAndDrop]=\"true\"\n      [dragAndDropDisabled]=\"obs.disableInput\"\n      (itemsReordered)=\"onItemsReordered(obs.params.caseDefinitionKey, $event)\"\n      [attr.data-test-id]=\"testIds.columnsList\"\n    >\n      <ng-container\n        carbonToolbarContent\n        *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n      ></ng-container>\n\n      <valtimo-no-results\n        [title]=\"'listColumn.noConfigWarningTitle' | translate\"\n        [description]=\"'listColumn.noConfigWarning' | translate\"\n        illustration=\"valtimo-layout/img/emptystate-empty.svg\"\n      ></valtimo-no-results>\n    </valtimo-carbon-list>\n  } @else {\n    <valtimo-json-editor\n      [model]=\"obs.jsonEditorModel\"\n      [fitPage]=\"true\"\n      [showEditButton]=\"obs.hasEditPermissions\"\n      (saveEvent)=\"updateCaseListColumns(obs.params.caseDefinitionKey, $event)\"\n      [attr.data-test-id]=\"testIds.jsonEditor\"\n    >\n      <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n      <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n    </valtimo-json-editor>\n  }\n</ng-template>\n\n<ng-template #buttons let-obs=\"obs\">\n  <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n\n  <button\n    *ngIf=\"obs.hasEditPermissions\"\n    (click)=\"openModal('create')\"\n    cdsButton=\"primary\"\n    [disabled]=\"obs.loadingCaseListColumns || !(hasEditPermissions$ | async)\"\n    [attr.data-test-id]=\"testIds.addListColumn\"\n  >\n    {{ 'listColumn.addButtonText' | translate }}\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #noConfigWarning>\n  <div class=\"pl-2 pr-2 pb-2 pt-2\">\n    <cds-notification\n      [notificationObj]=\"{\n        type: 'info',\n        title: 'listColumn.noConfigWarningTitle' | translate,\n        message: 'listColumn.noConfigWarning' | translate,\n        showClose: false,\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #createEditModal>\n  <cds-modal\n    valtimoCdsModal\n    *ngIf=\"{\n      type: currentModalType$ | async,\n      show: showModal$ | async,\n      valid: valid$ | async,\n      disableInput: disableInput$ | async,\n      validKey: validKey$ | async,\n      disableDefaultSort: disableDefaultSort$ | async,\n      showEnum: showEnum$ | async,\n      isYesNo: isYesNo$ | async,\n      showTagAmount: showTagAmount$ | async,\n      params: params$ | async,\n    } as modalObs\"\n    [open]=\"modalObs.show\"\n    size=\"sm\"\n    (close)=\"closeModal()\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\" [cdsLayer]=\"1\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          modalObs.type === 'create'\n            ? ('listColumn.addButtonText' | translate)\n            : ('listColumn.editColumnTitle' | translate)\n        }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent [cdsLayer]=\"1\">\n      <ng-container *ngTemplateOutlet=\"modalContent; context: {modalObs: modalObs}\"></ng-container>\n    </section>\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {modalObs: modalObs}\"></ng-container>\n  </cds-modal>\n</ng-template>\n\n<ng-template #modalContent let-modalObs=\"modalObs\">\n  <form [formGroup]=\"formGroup\" class=\"list-column-form\">\n    <cds-label [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.titleTitle' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.titleTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <input cdsText formControlName=\"title\" [attr.data-test-id]=\"testIds.title\" />\n    </cds-label>\n\n    <cds-label\n      [disabled]=\"modalObs.disableInput || modalObs.type === 'edit'\"\n      [invalid]=\"modalObs.validKey === false\"\n      [invalidText]=\"'listColumn.uniqueKeyWarning' | translate\"\n    >\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.key' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.keyTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <input\n        cdsText\n        formControlName=\"key\"\n        [invalid]=\"modalObs.validKey === false\"\n        [attr.data-test-id]=\"testIds.key\"\n      />\n    </cds-label>\n\n    <cds-label [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.path' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.pathTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <valtimo-value-path-selector\n        formControlName=\"path\"\n        [caseDefinitionKey]=\"modalObs.params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"modalObs.params?.caseDefinitionVersionTag\"\n        [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n        [attr.data-test-id]=\"testIds.valuePathSelector\"\n      ></valtimo-value-path-selector>\n    </cds-label>\n\n    <cds-label [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.displayType' | translate }}\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.displayTypeTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-dropdown\n        formControlName=\"displayType\"\n        [disabled]=\"modalObs.disableInput\"\n        (selected)=\"selectedDisplayType($event)\"\n        [attr.data-test-id]=\"testIds.displayType\"\n      >\n        <cds-dropdown-list [items]=\"(viewTypeItems$ | async) || []\"></cds-dropdown-list>\n      </cds-dropdown>\n    </cds-label>\n\n    <cds-label *ngIf=\"modalObs.showTagAmount\" [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.tagAmount' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.tagAmountTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-number\n        formControlName=\"tagAmount\"\n        [min]=\"1\"\n        [step]=\"1\"\n        [attr.data-test-id]=\"testIds.tagAmount\"\n      ></cds-number>\n    </cds-label>\n\n    <cds-label *ngIf=\"showDateFormat$ | async\" [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.dateFormat' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.dateFormatTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <input cdsText formControlName=\"dateFormat\" [attr.data-test-id]=\"testIds.dateFormat\" />\n    </cds-label>\n\n    <cds-label *ngIf=\"modalObs.showEnum || modalObs.isYesNo\" [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip select-label\">\n        {{\n          modalObs.isYesNo\n            ? ('listColumn.enumTitleOptional' | translate)\n            : ('listColumn.enumTitle' | translate)\n        }}\n\n        <v-tooltip-icon\n          [tooltip]=\"\n            modalObs.isYesNo\n              ? ('listColumn.enumTooltipOptional' | translate)\n              : ('listColumn.enumTooltip' | translate)\n          \"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <valtimo-carbon-multi-input\n        *ngIf=\"(showModal$ | async) || (modalShowing$ | async)\"\n        type=\"keyValue\"\n        (valueChange)=\"enumValueChange($event)\"\n        [defaultValues]=\"defaultEnumValues$ | async\"\n        [hideAddButton]=\"modalObs.isYesNo\"\n        [hideDeleteButton]=\"modalObs.isYesNo\"\n        [maxRows]=\"modalObs.isYesNo ? 1 : null\"\n        [keyColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.Yes' | translate)\"\n        [valueColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.No' | translate)\"\n        [attr.data-test-id]=\"testIds.multiInput\"\n      ></valtimo-carbon-multi-input>\n    </cds-label>\n\n    <cds-checkbox\n      *ngIf=\"displaySortable\"\n      formControlName=\"sortable\"\n      [disabled]=\"modalObs.showTagAmount || modalObs.disableInput\"\n      [attr.data-test-id]=\"testIds.sortableCheckbox\"\n      >{{ 'listColumn.sortable' | translate }}\n    </cds-checkbox>\n\n    <cds-label\n      *ngIf=\"displaySortable\"\n      [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort || modalObs.showTagAmount\"\n    >\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.defaultSortTitle' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.defaultSortTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-dropdown\n        formControlName=\"defaultSort\"\n        [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort || modalObs.showTagAmount\"\n        [attr.data-test-id]=\"testIds.defaultSort\"\n      >\n        <cds-dropdown-list [items]=\"(sortItems$ | async) || []\"></cds-dropdown-list>\n      </cds-dropdown>\n\n      <cds-inline-notification\n        *ngIf=\"modalObs.disableDefaultSort && !modalObs.disableInput && !modalObs.showTagAmount\"\n        class=\"default-sort-disabled-notice\"\n        [notificationObj]=\"{\n          type: 'info',\n          title: '',\n          message: ('listColumn.defaultSortDisabledNotice' | translate),\n          showClose: false,\n          lowContrast: true\n        }\"\n      ></cds-inline-notification>\n    </cds-label>\n\n    <cds-label *ngIf=\"displayExportButton\">\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.exportField' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.exportTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-toggle\n        formControlName=\"exportable\"\n        data-testid=\"export-selector-toggle\"\n        [onText]=\"'listColumn.sortableYes' | translate\"\n        [offText]=\"'listColumn.sortableNo' | translate\"\n        [keyColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.Yes' | translate)\"\n        [valueColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.No' | translate)\"\n        [required]=\"false\"\n        [size]=\"'sm'\"\n        [attr.data-test-id]=\"testIds.exportable\"\n      ></cds-toggle>\n    </cds-label>\n  </form>\n</ng-template>\n\n<ng-template #modalFooter let-modalObs=\"modalObs\">\n  <cds-modal-footer [cdsLayer]=\"1\">\n    <ng-container>\n      <button\n        cdsButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"closeModal()\"\n        [disabled]=\"modalObs.disableInput\"\n        [attr.data-test-id]=\"testIds.cancelButton\"\n      >\n        {{ 'listColumn.close' | translate }}\n      </button>\n\n      <button\n        cdsButton=\"primary\"\n        [attr.modal-primary-focus]=\"true\"\n        [disabled]=\"modalObs.valid === false\"\n        (click)=\"saveCaseListColumns()\"\n        [disabled]=\"\n          modalObs.disableInput || modalObs.valid === false || modalObs.validKey === false\n        \"\n        [attr.data-test-id]=\"testIds.saveButton\"\n      >\n        {{ 'listColumn.save' | translate }}\n      </button>\n    </ng-container>\n  </cds-modal-footer>\n</ng-template>\n\n<ng-template #deleteModal>\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showDeleteModal$\"\n    [outputOnConfirm]=\"deleteRowKey$ | async\"\n    (confirmEvent)=\"deleteRowConfirmation($event)\"\n    confirmButtonTextTranslationKey=\"listColumn.deleteColumn\"\n    titleTranslationKey=\"listColumn.deleteColumn\"\n    contentTranslationKey=\"listColumn.deleteColumnConfirmation\"\n    [attr.data-test-id]=\"testIds.confirmationModal\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n\n<ng-template #viewToggle>\n  <cds-tooltip [description]=\"'JSON editor'\">\n    <button\n      [cdsButton]=\"buttonTheme()\"\n      [attr.data-test-id]=\"testIds.switchView\"\n      iconOnly=\"true\"\n      (click)=\"switchView()\"\n    >\n      <svg cdsIcon=\"code\" size=\"16\"></svg>\n    </button>\n  </cds-tooltip>\n</ng-template>\n\n<ng-template #downloadButton let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    (click)=\"onDownloadClick()\"\n    [disabled]=\"\n      !obs.downloadUrl ||\n      !obs.downloadName ||\n      obs.caseListColumn?.length < 1 ||\n      obs.disableInput ||\n      obs.loadingCaseListColumns\n    \"\n    [attr.data-test-id]=\"testIds.downloadButton\"\n  >\n    <svg cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", styles: ["::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--inline-notification{max-width:100%}.default-sort-disabled-notice{display:block;margin-top:.5rem}::ng-deep .cds--label{width:100%}.label-with-tooltip{display:flex;align-items:center}.display-type-dropdown{width:300px}.list-column-form{display:flex;flex-direction:column;gap:16px;margin-bottom:3rem}.select-label{padding-bottom:.5rem;width:250px}.center-link{display:flex;align-items:center}.case-list-columns__actions{display:flex;gap:8px}.list-columns__buttons{display:flex;gap:16px;flex-direction:row;justify-content:flex-end}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i2.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i2.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i2.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i2.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "component", type: i7.TooltipIconComponent, selector: "v-tooltip-icon", inputs: ["tooltip", "disabled"] }, { kind: "component", type: i7.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["addRowText", "addButtonType", "addRowTranslationKey", "arbitraryAmountTitles", "arbitraryValueAmount", "defaultValues", "deleteRowText", "deleteRowTranslationKey", "disabled", "dropdownColumnTitle", "dropdownItems", "dropdownWidth", "fullWidth", "hideAddButton", "hideDeleteButton", "initialAmountOfRows", "keyColumnTitle", "margin", "maxRows", "minimumAmountOfRows", "name", "required", "title", "titleTranslationKey", "tooltip", "type", "valueColumnTitle", "valuePathSelectorCaseDefinitionKey", "valuePathSelectorPrefixes", "valuePathSelectorShowCaseDefinitionSelector", "valuePathSelectorNotation", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "component", type: i7.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: "directive", type: i7.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "component", type: i7.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i7.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "component", type: i2.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "component", type: i2.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description", "templateContext"] }, { kind: "component", type: i7.ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "buildingBlockDefinitionKey", "buildingBlockDefinitionVersionTag", "prefixes", "excludePrefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "dropUp", "defaultValue", "type", "parentItem", "filterItems"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "directive", type: i2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: i2.NumberComponent, selector: "cds-number, ibm-number", inputs: ["readonly", "theme", "disabled", "skeleton", "invalid", "id", "placeholder", "size", "required", "value", "min", "max", "label", "helperText", "invalidText", "step", "precision", "warn", "warnText", "ariaLabel", "decrementLabel", "incrementLabel", "fluid"], outputs: ["change"] }, { kind: "component", type: i7.JsonEditorComponent, selector: "valtimo-json-editor", inputs: ["disabled", "model", "editorOptions", "fitPage", "formatOnLoad", "heightPx", "heightStyle", "jsonSchema", "showEditButton", "widthPx"], outputs: ["changeEvent", "discardEvent", "keepEditingEvent", "saveEvent"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CaseManagementListColumnsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'valtimo-case-management-list-columns', template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    caseListColumn: translatedCaseListColumns$ | async,\n    disableInput: disableInput$ | async,\n    downloadName: downloadName$ | async,\n    downloadUrl: downloadUrl$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n    jsonEditorModel: jsonEditorModel$ | async,\n    loadingCaseListColumns: loadingCaseListColumns$ | async,\n    params: params$ | async,\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"content; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"createEditModal\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"deleteModal\"></ng-container>\n</ng-container>\n\n<ng-template #content let-obs=\"obs\">\n  @if (!jsonEditorActive()) {\n    <valtimo-carbon-list\n      [actionItems]=\"actionItems\"\n      [loading]=\"obs.loadingCaseListColumns\"\n      [items]=\"obs?.caseListColumn || []\"\n      [fields]=\"fields\"\n      [viewMode]=\"false\"\n      [header]=\"false\"\n      (rowClicked)=\"columnRowClicked($event)\"\n      [dragAndDrop]=\"true\"\n      [dragAndDropDisabled]=\"obs.disableInput\"\n      (itemsReordered)=\"onItemsReordered(obs.params.caseDefinitionKey, $event)\"\n      [attr.data-test-id]=\"testIds.columnsList\"\n    >\n      <ng-container\n        carbonToolbarContent\n        *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n      ></ng-container>\n\n      <valtimo-no-results\n        [title]=\"'listColumn.noConfigWarningTitle' | translate\"\n        [description]=\"'listColumn.noConfigWarning' | translate\"\n        illustration=\"valtimo-layout/img/emptystate-empty.svg\"\n      ></valtimo-no-results>\n    </valtimo-carbon-list>\n  } @else {\n    <valtimo-json-editor\n      [model]=\"obs.jsonEditorModel\"\n      [fitPage]=\"true\"\n      [fitPageSpaceAdjustment]=\"248\"\n      [showEditButton]=\"obs.hasEditPermissions\"\n      (saveEvent)=\"updateCaseListColumns(obs.params.caseDefinitionKey, $event)\"\n      [attr.data-test-id]=\"testIds.jsonEditor\"\n    >\n      <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n      <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n    </valtimo-json-editor>\n  }\n</ng-template>\n\n<ng-template #buttons let-obs=\"obs\">\n  <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n\n  <button\n    *ngIf=\"obs.hasEditPermissions\"\n    (click)=\"openModal('create')\"\n    cdsButton=\"primary\"\n    [disabled]=\"obs.loadingCaseListColumns || !(hasEditPermissions$ | async)\"\n    [attr.data-test-id]=\"testIds.addListColumn\"\n  >\n    {{ 'listColumn.addButtonText' | translate }}\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #noConfigWarning>\n  <div class=\"pl-2 pr-2 pb-2 pt-2\">\n    <cds-notification\n      [notificationObj]=\"{\n        type: 'info',\n        title: 'listColumn.noConfigWarningTitle' | translate,\n        message: 'listColumn.noConfigWarning' | translate,\n        showClose: false,\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #createEditModal>\n  <cds-modal\n    valtimoCdsModal\n    *ngIf=\"{\n      type: currentModalType$ | async,\n      show: showModal$ | async,\n      valid: valid$ | async,\n      disableInput: disableInput$ | async,\n      validKey: validKey$ | async,\n      disableDefaultSort: disableDefaultSort$ | async,\n      showEnum: showEnum$ | async,\n      isYesNo: isYesNo$ | async,\n      showTagAmount: showTagAmount$ | async,\n      params: params$ | async,\n    } as modalObs\"\n    [open]=\"modalObs.show\"\n    size=\"sm\"\n    (close)=\"closeModal()\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\" [cdsLayer]=\"1\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          modalObs.type === 'create'\n            ? ('listColumn.addButtonText' | translate)\n            : ('listColumn.editColumnTitle' | translate)\n        }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent [cdsLayer]=\"1\">\n      <ng-container *ngTemplateOutlet=\"modalContent; context: {modalObs: modalObs}\"></ng-container>\n    </section>\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {modalObs: modalObs}\"></ng-container>\n  </cds-modal>\n</ng-template>\n\n<ng-template #modalContent let-modalObs=\"modalObs\">\n  <form [formGroup]=\"formGroup\" class=\"list-column-form\">\n    <cds-label [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.titleTitle' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.titleTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <input cdsText formControlName=\"title\" [attr.data-test-id]=\"testIds.title\" />\n    </cds-label>\n\n    <cds-label\n      [disabled]=\"modalObs.disableInput || modalObs.type === 'edit'\"\n      [invalid]=\"modalObs.validKey === false\"\n      [invalidText]=\"'listColumn.uniqueKeyWarning' | translate\"\n    >\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.key' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.keyTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <input\n        cdsText\n        formControlName=\"key\"\n        [invalid]=\"modalObs.validKey === false\"\n        [attr.data-test-id]=\"testIds.key\"\n      />\n    </cds-label>\n\n    <cds-label [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.path' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.pathTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <valtimo-value-path-selector\n        formControlName=\"path\"\n        [caseDefinitionKey]=\"modalObs.params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"modalObs.params?.caseDefinitionVersionTag\"\n        [attr.data-test-id]=\"testIds.valuePathSelector\"\n      ></valtimo-value-path-selector>\n    </cds-label>\n\n    <cds-label [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.displayType' | translate }}\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.displayTypeTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-dropdown\n        formControlName=\"displayType\"\n        [disabled]=\"modalObs.disableInput\"\n        (selected)=\"selectedDisplayType($event)\"\n        [attr.data-test-id]=\"testIds.displayType\"\n      >\n        <cds-dropdown-list [items]=\"(viewTypeItems$ | async) || []\"></cds-dropdown-list>\n      </cds-dropdown>\n    </cds-label>\n\n    <cds-label *ngIf=\"modalObs.showTagAmount\" [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.tagAmount' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.tagAmountTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-number\n        formControlName=\"tagAmount\"\n        [min]=\"1\"\n        [step]=\"1\"\n        [attr.data-test-id]=\"testIds.tagAmount\"\n      ></cds-number>\n    </cds-label>\n\n    <cds-label *ngIf=\"showDateFormat$ | async\" [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.dateFormat' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.dateFormatTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <input cdsText formControlName=\"dateFormat\" [attr.data-test-id]=\"testIds.dateFormat\" />\n    </cds-label>\n\n    <cds-label *ngIf=\"modalObs.showEnum || modalObs.isYesNo\" [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip select-label\">\n        {{\n          modalObs.isYesNo\n            ? ('listColumn.enumTitleOptional' | translate)\n            : ('listColumn.enumTitle' | translate)\n        }}\n\n        <v-tooltip-icon\n          [tooltip]=\"\n            modalObs.isYesNo\n              ? ('listColumn.enumTooltipOptional' | translate)\n              : ('listColumn.enumTooltip' | translate)\n          \"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <valtimo-carbon-multi-input\n        *ngIf=\"(showModal$ | async) || (modalShowing$ | async)\"\n        type=\"keyValue\"\n        (valueChange)=\"enumValueChange($event)\"\n        [defaultValues]=\"defaultEnumValues$ | async\"\n        [hideAddButton]=\"modalObs.isYesNo\"\n        [hideDeleteButton]=\"modalObs.isYesNo\"\n        [maxRows]=\"modalObs.isYesNo ? 1 : null\"\n        [keyColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.Yes' | translate)\"\n        [valueColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.No' | translate)\"\n        [attr.data-test-id]=\"testIds.multiInput\"\n      ></valtimo-carbon-multi-input>\n    </cds-label>\n\n    <cds-checkbox\n      formControlName=\"sortable\"\n      [disabled]=\"modalObs.showTagAmount || modalObs.disableInput\"\n      [attr.data-test-id]=\"testIds.sortableCheckbox\"\n      >{{ 'listColumn.sortable' | translate }}\n    </cds-checkbox>\n\n    <cds-label\n      [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort || modalObs.showTagAmount\"\n    >\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.defaultSortTitle' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.defaultSortTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-dropdown\n        formControlName=\"defaultSort\"\n        [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort || modalObs.showTagAmount\"\n        [attr.data-test-id]=\"testIds.defaultSort\"\n      >\n        <cds-dropdown-list [items]=\"(sortItems$ | async) || []\"></cds-dropdown-list>\n      </cds-dropdown>\n    </cds-label>\n\n    <cds-label *ngIf=\"displayExportButton\">\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.exportField' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.exportTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-toggle\n        formControlName=\"exportable\"\n        data-testid=\"export-selector-toggle\"\n        [onText]=\"'listColumn.sortableYes' | translate\"\n        [offText]=\"'listColumn.sortableNo' | translate\"\n        [keyColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.Yes' | translate)\"\n        [valueColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.No' | translate)\"\n        [required]=\"false\"\n        [size]=\"'sm'\"\n        [attr.data-test-id]=\"testIds.exportable\"\n      ></cds-toggle>\n    </cds-label>\n  </form>\n</ng-template>\n\n<ng-template #modalFooter let-modalObs=\"modalObs\">\n  <cds-modal-footer [cdsLayer]=\"1\">\n    <ng-container>\n      <button\n        cdsButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"closeModal()\"\n        [disabled]=\"modalObs.disableInput\"\n        [attr.data-test-id]=\"testIds.cancelButton\"\n      >\n        {{ 'listColumn.close' | translate }}\n      </button>\n\n      <button\n        cdsButton=\"primary\"\n        [attr.modal-primary-focus]=\"true\"\n        [disabled]=\"modalObs.valid === false\"\n        (click)=\"saveCaseListColumns()\"\n        [disabled]=\"\n          modalObs.disableInput || modalObs.valid === false || modalObs.validKey === false\n        \"\n        [attr.data-test-id]=\"testIds.saveButton\"\n      >\n        {{ 'listColumn.save' | translate }}\n      </button>\n    </ng-container>\n  </cds-modal-footer>\n</ng-template>\n\n<ng-template #deleteModal>\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showDeleteModal$\"\n    [outputOnConfirm]=\"deleteRowKey$ | async\"\n    (confirmEvent)=\"deleteRowConfirmation($event)\"\n    confirmButtonTextTranslationKey=\"listColumn.deleteColumn\"\n    titleTranslationKey=\"listColumn.deleteColumn\"\n    contentTranslationKey=\"listColumn.deleteColumnConfirmation\"\n    [attr.data-test-id]=\"testIds.confirmationModal\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n\n<ng-template #viewToggle>\n  <cds-tooltip [description]=\"'JSON editor'\">\n    <button\n      [cdsButton]=\"buttonTheme()\"\n      [attr.data-test-id]=\"testIds.switchView\"\n      iconOnly=\"true\"\n      (click)=\"switchView()\"\n    >\n      <svg cdsIcon=\"code\" size=\"16\"></svg>\n    </button>\n  </cds-tooltip>\n</ng-template>\n\n<ng-template #downloadButton let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    (click)=\"onDownloadClick()\"\n    [disabled]=\"\n      !obs.downloadUrl ||\n      !obs.downloadName ||\n      obs.caseListColumn?.length < 1 ||\n      obs.disableInput ||\n      obs.loadingCaseListColumns\n    \"\n    [attr.data-test-id]=\"testIds.downloadButton\"\n  >\n    <svg cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", styles: ["::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--inline-notification{max-width:100%}::ng-deep .cds--label{width:100%}.label-with-tooltip{display:flex;align-items:center}.display-type-dropdown{width:300px}.list-column-form{display:flex;flex-direction:column;gap:16px;margin-bottom:3rem}.select-label{padding-bottom:.5rem;width:250px}.center-link{display:flex;align-items:center}.case-list-columns__actions{display:flex;gap:8px}.list-columns__buttons{display:flex;gap:16px;flex-direction:row;justify-content:flex-end}\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"] }]
+            args: [{ standalone: false, selector: 'valtimo-case-management-list-columns', template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    caseListColumn: translatedCaseListColumns$ | async,\n    disableInput: disableInput$ | async,\n    downloadName: downloadName$ | async,\n    downloadUrl: downloadUrl$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n    jsonEditorModel: jsonEditorModel$ | async,\n    loadingCaseListColumns: loadingCaseListColumns$ | async,\n    params: params$ | async,\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"content; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"createEditModal\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"deleteModal\"></ng-container>\n</ng-container>\n\n<ng-template #content let-obs=\"obs\">\n  @if (!jsonEditorActive()) {\n    <valtimo-carbon-list\n      [actionItems]=\"actionItems\"\n      [loading]=\"obs.loadingCaseListColumns\"\n      [items]=\"obs?.caseListColumn || []\"\n      [fields]=\"fields\"\n      [viewMode]=\"false\"\n      [header]=\"false\"\n      (rowClicked)=\"columnRowClicked($event)\"\n      [dragAndDrop]=\"true\"\n      [dragAndDropDisabled]=\"obs.disableInput\"\n      (itemsReordered)=\"onItemsReordered(obs.params.caseDefinitionKey, $event)\"\n      [attr.data-test-id]=\"testIds.columnsList\"\n    >\n      <ng-container\n        carbonToolbarContent\n        *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n      ></ng-container>\n\n      <valtimo-no-results\n        [title]=\"'listColumn.noConfigWarningTitle' | translate\"\n        [description]=\"'listColumn.noConfigWarning' | translate\"\n        illustration=\"valtimo-layout/img/emptystate-empty.svg\"\n      ></valtimo-no-results>\n    </valtimo-carbon-list>\n  } @else {\n    <valtimo-json-editor\n      [model]=\"obs.jsonEditorModel\"\n      [fitPage]=\"true\"\n      [showEditButton]=\"obs.hasEditPermissions\"\n      (saveEvent)=\"updateCaseListColumns(obs.params.caseDefinitionKey, $event)\"\n      [attr.data-test-id]=\"testIds.jsonEditor\"\n    >\n      <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n      <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n    </valtimo-json-editor>\n  }\n</ng-template>\n\n<ng-template #buttons let-obs=\"obs\">\n  <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n\n  <button\n    *ngIf=\"obs.hasEditPermissions\"\n    (click)=\"openModal('create')\"\n    cdsButton=\"primary\"\n    [disabled]=\"obs.loadingCaseListColumns || !(hasEditPermissions$ | async)\"\n    [attr.data-test-id]=\"testIds.addListColumn\"\n  >\n    {{ 'listColumn.addButtonText' | translate }}\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #noConfigWarning>\n  <div class=\"pl-2 pr-2 pb-2 pt-2\">\n    <cds-notification\n      [notificationObj]=\"{\n        type: 'info',\n        title: 'listColumn.noConfigWarningTitle' | translate,\n        message: 'listColumn.noConfigWarning' | translate,\n        showClose: false,\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #createEditModal>\n  <cds-modal\n    valtimoCdsModal\n    *ngIf=\"{\n      type: currentModalType$ | async,\n      show: showModal$ | async,\n      valid: valid$ | async,\n      disableInput: disableInput$ | async,\n      validKey: validKey$ | async,\n      disableDefaultSort: disableDefaultSort$ | async,\n      showEnum: showEnum$ | async,\n      isYesNo: isYesNo$ | async,\n      showTagAmount: showTagAmount$ | async,\n      params: params$ | async,\n    } as modalObs\"\n    [open]=\"modalObs.show\"\n    size=\"sm\"\n    (close)=\"closeModal()\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\" [cdsLayer]=\"1\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          modalObs.type === 'create'\n            ? ('listColumn.addButtonText' | translate)\n            : ('listColumn.editColumnTitle' | translate)\n        }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent [cdsLayer]=\"1\">\n      <ng-container *ngTemplateOutlet=\"modalContent; context: {modalObs: modalObs}\"></ng-container>\n    </section>\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {modalObs: modalObs}\"></ng-container>\n  </cds-modal>\n</ng-template>\n\n<ng-template #modalContent let-modalObs=\"modalObs\">\n  <form [formGroup]=\"formGroup\" class=\"list-column-form\">\n    <cds-label [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.titleTitle' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.titleTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <input cdsText formControlName=\"title\" [attr.data-test-id]=\"testIds.title\" />\n    </cds-label>\n\n    <cds-label\n      [disabled]=\"modalObs.disableInput || modalObs.type === 'edit'\"\n      [invalid]=\"modalObs.validKey === false\"\n      [invalidText]=\"'listColumn.uniqueKeyWarning' | translate\"\n    >\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.key' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.keyTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <input\n        cdsText\n        formControlName=\"key\"\n        [invalid]=\"modalObs.validKey === false\"\n        [attr.data-test-id]=\"testIds.key\"\n      />\n    </cds-label>\n\n    <cds-label [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.path' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.pathTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <valtimo-value-path-selector\n        formControlName=\"path\"\n        [caseDefinitionKey]=\"modalObs.params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"modalObs.params?.caseDefinitionVersionTag\"\n        [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n        [attr.data-test-id]=\"testIds.valuePathSelector\"\n      ></valtimo-value-path-selector>\n    </cds-label>\n\n    <cds-label [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.displayType' | translate }}\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.displayTypeTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-dropdown\n        formControlName=\"displayType\"\n        [disabled]=\"modalObs.disableInput\"\n        (selected)=\"selectedDisplayType($event)\"\n        [attr.data-test-id]=\"testIds.displayType\"\n      >\n        <cds-dropdown-list [items]=\"(viewTypeItems$ | async) || []\"></cds-dropdown-list>\n      </cds-dropdown>\n    </cds-label>\n\n    <cds-label *ngIf=\"modalObs.showTagAmount\" [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.tagAmount' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.tagAmountTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-number\n        formControlName=\"tagAmount\"\n        [min]=\"1\"\n        [step]=\"1\"\n        [attr.data-test-id]=\"testIds.tagAmount\"\n      ></cds-number>\n    </cds-label>\n\n    <cds-label *ngIf=\"showDateFormat$ | async\" [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.dateFormat' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.dateFormatTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <input cdsText formControlName=\"dateFormat\" [attr.data-test-id]=\"testIds.dateFormat\" />\n    </cds-label>\n\n    <cds-label *ngIf=\"modalObs.showEnum || modalObs.isYesNo\" [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip select-label\">\n        {{\n          modalObs.isYesNo\n            ? ('listColumn.enumTitleOptional' | translate)\n            : ('listColumn.enumTitle' | translate)\n        }}\n\n        <v-tooltip-icon\n          [tooltip]=\"\n            modalObs.isYesNo\n              ? ('listColumn.enumTooltipOptional' | translate)\n              : ('listColumn.enumTooltip' | translate)\n          \"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <valtimo-carbon-multi-input\n        *ngIf=\"(showModal$ | async) || (modalShowing$ | async)\"\n        type=\"keyValue\"\n        (valueChange)=\"enumValueChange($event)\"\n        [defaultValues]=\"defaultEnumValues$ | async\"\n        [hideAddButton]=\"modalObs.isYesNo\"\n        [hideDeleteButton]=\"modalObs.isYesNo\"\n        [maxRows]=\"modalObs.isYesNo ? 1 : null\"\n        [keyColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.Yes' | translate)\"\n        [valueColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.No' | translate)\"\n        [attr.data-test-id]=\"testIds.multiInput\"\n      ></valtimo-carbon-multi-input>\n    </cds-label>\n\n    <cds-checkbox\n      *ngIf=\"displaySortable\"\n      formControlName=\"sortable\"\n      [disabled]=\"modalObs.showTagAmount || modalObs.disableInput\"\n      [attr.data-test-id]=\"testIds.sortableCheckbox\"\n      >{{ 'listColumn.sortable' | translate }}\n    </cds-checkbox>\n\n    <cds-label\n      *ngIf=\"displaySortable\"\n      [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort || modalObs.showTagAmount\"\n    >\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.defaultSortTitle' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.defaultSortTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-dropdown\n        formControlName=\"defaultSort\"\n        [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort || modalObs.showTagAmount\"\n        [attr.data-test-id]=\"testIds.defaultSort\"\n      >\n        <cds-dropdown-list [items]=\"(sortItems$ | async) || []\"></cds-dropdown-list>\n      </cds-dropdown>\n\n      <cds-inline-notification\n        *ngIf=\"modalObs.disableDefaultSort && !modalObs.disableInput && !modalObs.showTagAmount\"\n        class=\"default-sort-disabled-notice\"\n        [notificationObj]=\"{\n          type: 'info',\n          title: '',\n          message: ('listColumn.defaultSortDisabledNotice' | translate),\n          showClose: false,\n          lowContrast: true\n        }\"\n      ></cds-inline-notification>\n    </cds-label>\n\n    <cds-label *ngIf=\"displayExportButton\">\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.exportField' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.exportTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-toggle\n        formControlName=\"exportable\"\n        data-testid=\"export-selector-toggle\"\n        [onText]=\"'listColumn.sortableYes' | translate\"\n        [offText]=\"'listColumn.sortableNo' | translate\"\n        [keyColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.Yes' | translate)\"\n        [valueColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.No' | translate)\"\n        [required]=\"false\"\n        [size]=\"'sm'\"\n        [attr.data-test-id]=\"testIds.exportable\"\n      ></cds-toggle>\n    </cds-label>\n  </form>\n</ng-template>\n\n<ng-template #modalFooter let-modalObs=\"modalObs\">\n  <cds-modal-footer [cdsLayer]=\"1\">\n    <ng-container>\n      <button\n        cdsButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"closeModal()\"\n        [disabled]=\"modalObs.disableInput\"\n        [attr.data-test-id]=\"testIds.cancelButton\"\n      >\n        {{ 'listColumn.close' | translate }}\n      </button>\n\n      <button\n        cdsButton=\"primary\"\n        [attr.modal-primary-focus]=\"true\"\n        [disabled]=\"modalObs.valid === false\"\n        (click)=\"saveCaseListColumns()\"\n        [disabled]=\"\n          modalObs.disableInput || modalObs.valid === false || modalObs.validKey === false\n        \"\n        [attr.data-test-id]=\"testIds.saveButton\"\n      >\n        {{ 'listColumn.save' | translate }}\n      </button>\n    </ng-container>\n  </cds-modal-footer>\n</ng-template>\n\n<ng-template #deleteModal>\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showDeleteModal$\"\n    [outputOnConfirm]=\"deleteRowKey$ | async\"\n    (confirmEvent)=\"deleteRowConfirmation($event)\"\n    confirmButtonTextTranslationKey=\"listColumn.deleteColumn\"\n    titleTranslationKey=\"listColumn.deleteColumn\"\n    contentTranslationKey=\"listColumn.deleteColumnConfirmation\"\n    [attr.data-test-id]=\"testIds.confirmationModal\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n\n<ng-template #viewToggle>\n  <cds-tooltip [description]=\"'JSON editor'\">\n    <button\n      [cdsButton]=\"buttonTheme()\"\n      [attr.data-test-id]=\"testIds.switchView\"\n      iconOnly=\"true\"\n      (click)=\"switchView()\"\n    >\n      <svg cdsIcon=\"code\" size=\"16\"></svg>\n    </button>\n  </cds-tooltip>\n</ng-template>\n\n<ng-template #downloadButton let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    (click)=\"onDownloadClick()\"\n    [disabled]=\"\n      !obs.downloadUrl ||\n      !obs.downloadName ||\n      obs.caseListColumn?.length < 1 ||\n      obs.disableInput ||\n      obs.loadingCaseListColumns\n    \"\n    [attr.data-test-id]=\"testIds.downloadButton\"\n  >\n    <svg cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", styles: ["::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--inline-notification{max-width:100%}.default-sort-disabled-notice{display:block;margin-top:.5rem}::ng-deep .cds--label{width:100%}.label-with-tooltip{display:flex;align-items:center}.display-type-dropdown{width:300px}.list-column-form{display:flex;flex-direction:column;gap:16px;margin-bottom:3rem}.select-label{padding-bottom:.5rem;width:250px}.center-link{display:flex;align-items:center}.case-list-columns__actions{display:flex;gap:8px}.list-columns__buttons{display:flex;gap:16px;flex-direction:row;justify-content:flex-end}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: i1$2.DocumentService }, { type: i2$2.ActivatedRoute }, { type: i3.TranslateService }, { type: i2.IconService }, { type: i2$1.EditPermissionsService }] });
 
 /*
@@ -4415,11 +4428,11 @@ class CaseManagementDocumentDefinitionComponent {
         this._pendingChanges$.next(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CaseManagementDocumentDefinitionComponent, deps: [{ token: i1$2.DocumentService }, { token: CaseDetailService }, { token: i2.IconService }, { token: i7.PageHeaderService }, { token: i2$2.ActivatedRoute }, { token: i2$1.EditPermissionsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: CaseManagementDocumentDefinitionComponent, isStandalone: false, selector: "ng-component", inputs: { caseDefinitionKey: "caseDefinitionKey" }, outputs: { cancelRedirect: "cancelRedirect", confirmRedirect: "confirmRedirect", pendingChangesUpdate: "pendingChangesUpdate" }, viewQueries: [{ propertyName: "cancelModal", first: true, predicate: ["cancelModal"], descendants: true }], 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<valtimo-json-editor\n  [model]=\"documentDefinitionModel$ | async\"\n  [fitPage]=\"true\"\n  [fitPageSpaceAdjustment]=\"128\"\n  [showEditButton]=\"hasEditPermissions$ | async\"\n  (changeEvent)=\"onChangeEvent()\"\n  (discardEvent)=\"onDiscardEvent()\"\n  (keepEditingEvent)=\"onKeepEditingEvent()\"\n  (saveEvent)=\"onSaveEvent($event)\"\n>\n  <button\n    cdsButton=\"ghost\"\n    [disabled]=\"\n      (loadingDocumentDefinition$ | async) || (selectedDocumentDefinition$ | async) === null\n    \"\n    (click)=\"downloadDefinition()\"\n    [attr.data-test-id]=\"testIds.downloadButton\"\n  >\n    {{ 'interface.download' | translate }}\n\n    <svg cdsIcon=\"download\" size=\"16\" class=\"cds--btn__icon\"></svg>\n  </button>\n</valtimo-json-editor>\n\n<a id=\"downloadAnchorElement\" style=\"display: none\"></a>\n\n<ng-template #loading>\n  <div class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-template>\n", styles: [".loading-container{display:flex;width:100%;justify-content:center;padding-top:16px;padding-bottom:16px}:host ::ng-deep .cds--toolbar-content{width:100%;background: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: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i7.JsonEditorComponent, selector: "valtimo-json-editor", inputs: ["disabled", "model", "editorOptions", "fitPage", "fitPageSpaceAdjustment", "formatOnLoad", "heightPx", "heightStyle", "jsonSchema", "showEditButton", "widthPx"], outputs: ["changeEvent", "discardEvent", "keepEditingEvent", "saveEvent"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: CaseManagementDocumentDefinitionComponent, isStandalone: false, selector: "ng-component", inputs: { caseDefinitionKey: "caseDefinitionKey" }, outputs: { cancelRedirect: "cancelRedirect", confirmRedirect: "confirmRedirect", pendingChangesUpdate: "pendingChangesUpdate" }, viewQueries: [{ propertyName: "cancelModal", first: true, predicate: ["cancelModal"], descendants: true }], 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<valtimo-json-editor\n  [model]=\"documentDefinitionModel$ | async\"\n  [fitPage]=\"true\"\n  [showEditButton]=\"hasEditPermissions$ | async\"\n  (changeEvent)=\"onChangeEvent()\"\n  (discardEvent)=\"onDiscardEvent()\"\n  (keepEditingEvent)=\"onKeepEditingEvent()\"\n  (saveEvent)=\"onSaveEvent($event)\"\n>\n  <button\n    cdsButton=\"ghost\"\n    [disabled]=\"\n      (loadingDocumentDefinition$ | async) || (selectedDocumentDefinition$ | async) === null\n    \"\n    (click)=\"downloadDefinition()\"\n    [attr.data-test-id]=\"testIds.downloadButton\"\n  >\n    {{ 'interface.download' | translate }}\n\n    <svg cdsIcon=\"download\" size=\"16\" class=\"cds--btn__icon\"></svg>\n  </button>\n</valtimo-json-editor>\n\n<a id=\"downloadAnchorElement\" style=\"display: none\"></a>\n\n<ng-template #loading>\n  <div class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-template>\n", styles: [".loading-container{display:flex;width:100%;justify-content:center;padding-top:16px;padding-bottom:16px}:host ::ng-deep .cds--toolbar-content{width:100%;background: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: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i7.JsonEditorComponent, selector: "valtimo-json-editor", inputs: ["disabled", "model", "editorOptions", "fitPage", "formatOnLoad", "heightPx", "heightStyle", "jsonSchema", "showEditButton", "widthPx"], outputs: ["changeEvent", "discardEvent", "keepEditingEvent", "saveEvent"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CaseManagementDocumentDefinitionComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-json-editor\n  [model]=\"documentDefinitionModel$ | async\"\n  [fitPage]=\"true\"\n  [fitPageSpaceAdjustment]=\"128\"\n  [showEditButton]=\"hasEditPermissions$ | async\"\n  (changeEvent)=\"onChangeEvent()\"\n  (discardEvent)=\"onDiscardEvent()\"\n  (keepEditingEvent)=\"onKeepEditingEvent()\"\n  (saveEvent)=\"onSaveEvent($event)\"\n>\n  <button\n    cdsButton=\"ghost\"\n    [disabled]=\"\n      (loadingDocumentDefinition$ | async) || (selectedDocumentDefinition$ | async) === null\n    \"\n    (click)=\"downloadDefinition()\"\n    [attr.data-test-id]=\"testIds.downloadButton\"\n  >\n    {{ 'interface.download' | translate }}\n\n    <svg cdsIcon=\"download\" size=\"16\" class=\"cds--btn__icon\"></svg>\n  </button>\n</valtimo-json-editor>\n\n<a id=\"downloadAnchorElement\" style=\"display: none\"></a>\n\n<ng-template #loading>\n  <div class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-template>\n", styles: [".loading-container{display:flex;width:100%;justify-content:center;padding-top:16px;padding-bottom:16px}:host ::ng-deep .cds--toolbar-content{width:100%;background: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"] }]
+            args: [{ standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-json-editor\n  [model]=\"documentDefinitionModel$ | async\"\n  [fitPage]=\"true\"\n  [showEditButton]=\"hasEditPermissions$ | async\"\n  (changeEvent)=\"onChangeEvent()\"\n  (discardEvent)=\"onDiscardEvent()\"\n  (keepEditingEvent)=\"onKeepEditingEvent()\"\n  (saveEvent)=\"onSaveEvent($event)\"\n>\n  <button\n    cdsButton=\"ghost\"\n    [disabled]=\"\n      (loadingDocumentDefinition$ | async) || (selectedDocumentDefinition$ | async) === null\n    \"\n    (click)=\"downloadDefinition()\"\n    [attr.data-test-id]=\"testIds.downloadButton\"\n  >\n    {{ 'interface.download' | translate }}\n\n    <svg cdsIcon=\"download\" size=\"16\" class=\"cds--btn__icon\"></svg>\n  </button>\n</valtimo-json-editor>\n\n<a id=\"downloadAnchorElement\" style=\"display: none\"></a>\n\n<ng-template #loading>\n  <div class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-template>\n", styles: [".loading-container{display:flex;width:100%;justify-content:center;padding-top:16px;padding-bottom:16px}:host ::ng-deep .cds--toolbar-content{width:100%;background: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"] }]
         }], ctorParameters: () => [{ type: i1$2.DocumentService }, { type: CaseDetailService }, { type: i2.IconService }, { type: i7.PageHeaderService }, { type: i2$2.ActivatedRoute }, { type: i2$1.EditPermissionsService }], propDecorators: { cancelModal: [{
                 type: ViewChild,
                 args: ['cancelModal']