@valtimo/case-management 13.27.0 → 13.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -353,6 +353,8 @@ class CaseManagementHeaderComponent extends ManagementWidgetDetailsComponent {
353
353
  }
354
354
  ngOnDestroy() {
355
355
  this._subscriptions.unsubscribe();
356
+ this.widgetWizardService.$disableActionButton.set(false);
357
+ this.setTitleDisabled(false);
356
358
  }
357
359
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CaseManagementHeaderComponent, deps: [{ token: i1$1.WidgetWizardService }, { token: WIDGET_MANAGEMENT_SERVICE }, { token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
358
360
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: CaseManagementHeaderComponent, isStandalone: true, selector: "valtimo-case-management-header", providers: [
@@ -1500,6 +1502,7 @@ const CASE_MANAGEMENT_EXTERNAL_START_FORM_TEST_IDS = {
1500
1502
  const CASE_MANAGEMENT_STATUS_MODAL_TEST_IDS = {
1501
1503
  titleInput: 'caseStatusTitleInput',
1502
1504
  keyInput: 'caseStatusKeyInput',
1505
+ labelInput: 'caseStatusLabelInput',
1503
1506
  editKeyButton: 'caseStatusEditKeyButton',
1504
1507
  colorDropdown: 'caseStatusColorDropdown',
1505
1508
  visibilityToggle: 'caseStatusVisibilityToggle',
@@ -1592,6 +1595,9 @@ class CaseManagementStatusModalComponent {
1592
1595
  get title() {
1593
1596
  return this.statusFormGroup?.get('title');
1594
1597
  }
1598
+ get label() {
1599
+ return this.statusFormGroup?.get('label');
1600
+ }
1595
1601
  get retentionPeriodInDays() {
1596
1602
  return this.statusFormGroup?.get('retentionPeriodInDays');
1597
1603
  }
@@ -1629,6 +1635,7 @@ class CaseManagementStatusModalComponent {
1629
1635
  Validators.minLength(3),
1630
1636
  this.uniqueKeyValidator,
1631
1637
  ]),
1638
+ label: this.fb.control(''),
1632
1639
  retentionPeriodInDays: this.fb.control(-1, [
1633
1640
  Validators.required,
1634
1641
  Validators.pattern(/^(?:-1|0|[1-9]\d*)$/),
@@ -1725,6 +1732,7 @@ class CaseManagementStatusModalComponent {
1725
1732
  this.statusFormGroup.patchValue({
1726
1733
  key: prefillStatus.key,
1727
1734
  title: prefillStatus.title,
1735
+ label: prefillStatus.label ?? '',
1728
1736
  retentionPeriodInDays: retentionPeriodInDays,
1729
1737
  visibleInCaseListByDefault: prefillStatus.visibleInCaseListByDefault,
1730
1738
  color: prefillStatus.color,
@@ -1738,6 +1746,7 @@ class CaseManagementStatusModalComponent {
1738
1746
  this.statusFormGroup.patchValue({
1739
1747
  key: '',
1740
1748
  title: '',
1749
+ label: '',
1741
1750
  visibleInCaseListByDefault: true,
1742
1751
  retentionPeriodInDays: -1,
1743
1752
  color: TagColor.Magenta,
@@ -1809,20 +1818,22 @@ class CaseManagementStatusModalComponent {
1809
1818
  this.closeModalEvent.emit('closeAndRefresh');
1810
1819
  }
1811
1820
  getFormValue() {
1821
+ const labelValue = this.label.value?.trim();
1812
1822
  return {
1813
1823
  key: this.key.value,
1814
1824
  title: this.title.value,
1815
1825
  retentionPeriodInDays: this.retentionPeriodInDays.value,
1816
1826
  visibleInCaseListByDefault: this.visibleInCaseListByDefault.value,
1817
1827
  color: this.color.value,
1828
+ ...(labelValue ? { label: labelValue } : {}),
1818
1829
  };
1819
1830
  }
1820
1831
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CaseManagementStatusModalComponent, deps: [{ token: i1$4.FormBuilder }, { token: i2.IconService }, { token: i1$2.CaseStatusService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
1821
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: CaseManagementStatusModalComponent, isStandalone: false, selector: "valtimo-case-management-status-modal", inputs: { type: "type", prefill: "prefill", usedKeys: "usedKeys", caseDefinitionKey: "caseDefinitionKey" }, outputs: { closeModalEvent: "closeModalEvent" }, 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<cds-modal\n valtimoCdsModal\n *ngIf=\"{\n isAdd: isAdd$ | async,\n isEdit: isEdit$ | async,\n isClosed: isClosed$ | async,\n editingKey: editingKey$ | async,\n disabled: disabled$ | async,\n } as obs\"\n [open]=\"!obs.isClosed\"\n size=\"sm\"\n (close)=\"onClose()\"\n>\n <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onClose()\" [cdsLayer]=\"1\">\n <h3 cdsModalHeaderHeading>\n {{ obs.isAdd ? ('caseManagement.statuses.add' | translate) : '' }}\n {{ obs.isEdit ? ('caseManagement.statuses.edit' | translate) : '' }}\n </h3>\n </cds-modal-header>\n\n <section cdsModalContent [cdsLayer]=\"1\">\n <ng-container *ngTemplateOutlet=\"statusForm; context: {obs: obs}\"></ng-container>\n </section>\n\n <cds-modal-footer [cdsLayer]=\"1\">\n <ng-container *ngTemplateOutlet=\"buttons; context: {obs: obs}\"></ng-container>\n </cds-modal-footer>\n</cds-modal>\n\n<ng-template #colorDropdownItemTemplate let-item=\"item\">\n <div class=\"dropdown-color-tag\">\n <cds-tag *ngIf=\"item && item.content\" class=\"cds-tag--no-margin\" [type]=\"item?.tagType\">\n {{ 'interface.tagType.' + item?.tagType | translate }}\n </cds-tag>\n </div>\n</ng-template>\n\n<ng-template #statusForm let-obs=\"obs\">\n <form [formGroup]=\"statusFormGroup\" class=\"status-form\">\n <cds-label>\n {{ 'caseManagement.statuses.columns.title' | translate }}\n\n <input cdsText formControlName=\"title\" [attr.data-test-id]=\"testIds.titleInput\" [attr.modal-primary-focus]=\"true\" />\n </cds-label>\n\n <cds-label>\n {{ 'caseManagement.statuses.columns.key' | translate }}\n\n <div class=\"edit-key-input\">\n <input\n cdsText\n formControlName=\"key\"\n [attr.data-test-id]=\"testIds.keyInput\"\n [readOnly]=\"!obs.editingKey\"\n [placeholder]=\"\n obs.isAdd && !obs.editingKey\n ? ('caseManagement.statuses.keyAutoGenerated' | translate)\n : ''\n \"\n />\n\n <cds-icon-button\n *ngIf=\"!obs.editingKey && obs.isAdd\"\n [attr.data-test-id]=\"testIds.editKeyButton\"\n [disabled]=\"obs.disabled\"\n (click)=\"editKeyButtonClick()\"\n kind=\"secondary\"\n >\n <svg class=\"cds--btn__icon\" cdsIcon=\"edit\" size=\"16\"></svg>\n </cds-icon-button>\n </div>\n </cds-label>\n\n <div class=\"horizontal-inputs\">\n <cds-label>\n {{ 'caseManagement.statuses.columns.color' | translate }}\n\n <cds-dropdown\n [id]=\"'status-color-dropdown'\"\n [attr.data-test-id]=\"testIds.colorDropdown\"\n [appendInline]=\"false\"\n [placeholder]=\"'caseManagement.statuses.colorPlaceholder' | translate\"\n (selected)=\"colorDropdownChange($event)\"\n >\n <cds-dropdown-list [items]=\"colorListItems$\" [listTpl]=\"colorDropdownItemTemplate\">\n </cds-dropdown-list>\n </cds-dropdown>\n </cds-label>\n\n <cds-toggle\n [attr.data-test-id]=\"testIds.visibilityToggle\"\n [label]=\"'caseManagement.statuses.visibleTitle' | translate\"\n [onText]=\"'caseManagement.statuses.visible' | translate\"\n [offText]=\"'caseManagement.statuses.invisible' | translate\"\n [disabled]=\"obs.disabled\"\n [checked]=\"visibleInCaseListByDefault?.value\"\n (checkedChange)=\"toggleCheckedChange($event)\"\n ></cds-toggle>\n </div>\n\n <cds-toggle\n [label]=\"'caseManagement.statuses.showRetentionPeriod' | translate\"\n [onText]=\"'interface.yes' | translate\"\n [offText]=\"'interface.no' | translate\"\n [disabled]=\"obs.disabled\"\n [checked]=\"showRetentionPeriod$ | async\"\n (checkedChange)=\"toggleRetentionPeriod($event)\"\n ></cds-toggle>\n\n <cds-label class=\"status-form-retention-period__label\" *ngIf=\"showRetentionPeriod$ | async\">\n <div>\n {{ 'caseManagement.statuses.columns.retentionPeriod' | translate }}\n\n <v-tooltip-icon\n [tooltip]=\"'caseManagement.statuses.columns.retentionPeriodTooltip' | translate\"\n ></v-tooltip-icon>\n </div>\n\n <input cdsText formControlName=\"retentionPeriodInDays\" />\n </cds-label>\n\n <cds-notification\n class=\"deployment-warning-notification\"\n *ngIf=\"!obs.editingKey && !obs.isAdd\"\n [notificationObj]=\"{\n type: 'warning',\n message:\n ('caseManagement.statuses.retentionPeriodExistingCasesWarning'\n | translate: notificationContent),\n showClose: false,\n lowContrast: true,\n }\"\n ></cds-notification>\n </form>\n</ng-template>\n\n<ng-template #buttons let-obs=\"obs\">\n <button cdsButton=\"ghost\" [attr.data-test-id]=\"testIds.cancelButton\" (click)=\"onClose()\" [disabled]=\"obs.disabled\">\n {{ 'interface.cancel' | translate }}\n </button>\n\n <button\n *ngIf=\"obs.isAdd\"\n cdsButton=\"primary\"\n [attr.data-test-id]=\"testIds.addConfirmButton\"\n [disabled]=\"invalid || pristine || obs.disabled\"\n (click)=\"addStatus()\"\n >\n {{ 'interface.add' | translate }}\n </button>\n\n <button\n *ngIf=\"obs.isEdit\"\n cdsButton=\"primary\"\n [attr.data-test-id]=\"testIds.saveButton\"\n [disabled]=\"invalid || pristine || obs.disabled\"\n (click)=\"editStatus()\"\n >\n {{ 'interface.save' | translate }}\n </button>\n</ng-template>\n", styles: [".status-form{display:flex;flex-direction:column;gap:16px}::ng-deep .status-form-retention-period__label .cds--text-input__field-wrapper{flex-direction:column;gap:8px}::ng-deep .status-form-retention-period__label .cds--text-input__field-wrapper div{display:flex;align-items:center}.edit-key-input{height:40px;display:flex;width:100%;flex-direction:row;gap:16px;align-items:flex-end}.edit-key-input input:read-only{color:var(--cds-text-disabled)}::ng-deep .horizontal-inputs{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}::ng-deep .horizontal-inputs .cds--label{width:100%;display:flex;flex-direction:column;gap:8px}::ng-deep .dropdown-color-tag .cds--tag{margin-top:-4px;margin-left:2px}\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: "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: "component", type: i2.IconButton, selector: "cds-icon-button, ibm-icon-button", inputs: ["buttonNgClass", "buttonAttributes", "buttonId", "kind", "size", "type", "isExpressive", "disabled", "description", "showTooltipWhenDisabled"], outputs: ["click", "focus", "blur", "tooltipClick"] }, { 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: i7.TooltipIconComponent, selector: "v-tooltip-icon", inputs: ["tooltip", "disabled"] }, { kind: "directive", type: i7.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "component", type: i2.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "component", type: i2.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "directive", type: i2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1832
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: CaseManagementStatusModalComponent, isStandalone: false, selector: "valtimo-case-management-status-modal", inputs: { type: "type", prefill: "prefill", usedKeys: "usedKeys", caseDefinitionKey: "caseDefinitionKey" }, outputs: { closeModalEvent: "closeModalEvent" }, 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<cds-modal\n valtimoCdsModal\n *ngIf=\"{\n isAdd: isAdd$ | async,\n isEdit: isEdit$ | async,\n isClosed: isClosed$ | async,\n editingKey: editingKey$ | async,\n disabled: disabled$ | async,\n } as obs\"\n [open]=\"!obs.isClosed\"\n size=\"sm\"\n (close)=\"onClose()\"\n>\n <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onClose()\" [cdsLayer]=\"1\">\n <h3 cdsModalHeaderHeading>\n {{ obs.isAdd ? ('caseManagement.statuses.add' | translate) : '' }}\n {{ obs.isEdit ? ('caseManagement.statuses.edit' | translate) : '' }}\n </h3>\n </cds-modal-header>\n\n <section cdsModalContent [cdsLayer]=\"1\">\n <ng-container *ngTemplateOutlet=\"statusForm; context: {obs: obs}\"></ng-container>\n </section>\n\n <cds-modal-footer [cdsLayer]=\"1\">\n <ng-container *ngTemplateOutlet=\"buttons; context: {obs: obs}\"></ng-container>\n </cds-modal-footer>\n</cds-modal>\n\n<ng-template #colorDropdownItemTemplate let-item=\"item\">\n <div class=\"dropdown-color-tag\">\n <cds-tag *ngIf=\"item && item.content\" class=\"cds-tag--no-margin\" [type]=\"item?.tagType\">\n {{ 'interface.tagType.' + item?.tagType | translate }}\n </cds-tag>\n </div>\n</ng-template>\n\n<ng-template #statusForm let-obs=\"obs\">\n <form [formGroup]=\"statusFormGroup\" class=\"status-form\">\n <cds-label>\n {{ 'caseManagement.statuses.columns.title' | translate }}\n\n <input cdsText formControlName=\"title\" [attr.data-test-id]=\"testIds.titleInput\" [attr.modal-primary-focus]=\"true\" />\n </cds-label>\n\n <cds-label>\n {{ 'caseManagement.statuses.columns.label' | translate }}\n\n <input cdsText formControlName=\"label\" [attr.data-test-id]=\"testIds.labelInput\" />\n </cds-label>\n\n <cds-label>\n {{ 'caseManagement.statuses.columns.key' | translate }}\n\n <div class=\"edit-key-input\">\n <input\n cdsText\n formControlName=\"key\"\n [attr.data-test-id]=\"testIds.keyInput\"\n [readOnly]=\"!obs.editingKey\"\n [placeholder]=\"\n obs.isAdd && !obs.editingKey\n ? ('caseManagement.statuses.keyAutoGenerated' | translate)\n : ''\n \"\n />\n\n <cds-icon-button\n *ngIf=\"!obs.editingKey && obs.isAdd\"\n [attr.data-test-id]=\"testIds.editKeyButton\"\n [disabled]=\"obs.disabled\"\n (click)=\"editKeyButtonClick()\"\n kind=\"secondary\"\n >\n <svg class=\"cds--btn__icon\" cdsIcon=\"edit\" size=\"16\"></svg>\n </cds-icon-button>\n </div>\n </cds-label>\n\n <div class=\"horizontal-inputs\">\n <cds-label>\n {{ 'caseManagement.statuses.columns.color' | translate }}\n\n <cds-dropdown\n [id]=\"'status-color-dropdown'\"\n [attr.data-test-id]=\"testIds.colorDropdown\"\n [appendInline]=\"false\"\n [placeholder]=\"'caseManagement.statuses.colorPlaceholder' | translate\"\n (selected)=\"colorDropdownChange($event)\"\n >\n <cds-dropdown-list [items]=\"colorListItems$\" [listTpl]=\"colorDropdownItemTemplate\">\n </cds-dropdown-list>\n </cds-dropdown>\n </cds-label>\n\n <cds-toggle\n [attr.data-test-id]=\"testIds.visibilityToggle\"\n [label]=\"'caseManagement.statuses.visibleTitle' | translate\"\n [onText]=\"'caseManagement.statuses.visible' | translate\"\n [offText]=\"'caseManagement.statuses.invisible' | translate\"\n [disabled]=\"obs.disabled\"\n [checked]=\"visibleInCaseListByDefault?.value\"\n (checkedChange)=\"toggleCheckedChange($event)\"\n ></cds-toggle>\n </div>\n\n <cds-toggle\n [label]=\"'caseManagement.statuses.showRetentionPeriod' | translate\"\n [onText]=\"'interface.yes' | translate\"\n [offText]=\"'interface.no' | translate\"\n [disabled]=\"obs.disabled\"\n [checked]=\"showRetentionPeriod$ | async\"\n (checkedChange)=\"toggleRetentionPeriod($event)\"\n ></cds-toggle>\n\n <cds-label class=\"status-form-retention-period__label\" *ngIf=\"showRetentionPeriod$ | async\">\n <div>\n {{ 'caseManagement.statuses.columns.retentionPeriod' | translate }}\n\n <v-tooltip-icon\n [tooltip]=\"'caseManagement.statuses.columns.retentionPeriodTooltip' | translate\"\n ></v-tooltip-icon>\n </div>\n\n <input cdsText formControlName=\"retentionPeriodInDays\" />\n </cds-label>\n\n <cds-notification\n class=\"deployment-warning-notification\"\n *ngIf=\"!obs.editingKey && !obs.isAdd\"\n [notificationObj]=\"{\n type: 'warning',\n message:\n ('caseManagement.statuses.retentionPeriodExistingCasesWarning'\n | translate: notificationContent),\n showClose: false,\n lowContrast: true,\n }\"\n ></cds-notification>\n </form>\n</ng-template>\n\n<ng-template #buttons let-obs=\"obs\">\n <button cdsButton=\"ghost\" [attr.data-test-id]=\"testIds.cancelButton\" (click)=\"onClose()\" [disabled]=\"obs.disabled\">\n {{ 'interface.cancel' | translate }}\n </button>\n\n <button\n *ngIf=\"obs.isAdd\"\n cdsButton=\"primary\"\n [attr.data-test-id]=\"testIds.addConfirmButton\"\n [disabled]=\"invalid || pristine || obs.disabled\"\n (click)=\"addStatus()\"\n >\n {{ 'interface.add' | translate }}\n </button>\n\n <button\n *ngIf=\"obs.isEdit\"\n cdsButton=\"primary\"\n [attr.data-test-id]=\"testIds.saveButton\"\n [disabled]=\"invalid || pristine || obs.disabled\"\n (click)=\"editStatus()\"\n >\n {{ 'interface.save' | translate }}\n </button>\n</ng-template>\n", styles: [".status-form{display:flex;flex-direction:column;gap:16px}::ng-deep .status-form-retention-period__label .cds--text-input__field-wrapper{flex-direction:column;gap:8px}::ng-deep .status-form-retention-period__label .cds--text-input__field-wrapper div{display:flex;align-items:center}.edit-key-input{height:40px;display:flex;width:100%;flex-direction:row;gap:16px;align-items:flex-end}.edit-key-input input:read-only{color:var(--cds-text-disabled)}::ng-deep .horizontal-inputs{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}::ng-deep .horizontal-inputs .cds--label{width:100%;display:flex;flex-direction:column;gap:8px}::ng-deep .dropdown-color-tag .cds--tag{margin-top:-4px;margin-left:2px}\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: "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: "component", type: i2.IconButton, selector: "cds-icon-button, ibm-icon-button", inputs: ["buttonNgClass", "buttonAttributes", "buttonId", "kind", "size", "type", "isExpressive", "disabled", "description", "showTooltipWhenDisabled"], outputs: ["click", "focus", "blur", "tooltipClick"] }, { 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: i7.TooltipIconComponent, selector: "v-tooltip-icon", inputs: ["tooltip", "disabled"] }, { kind: "directive", type: i7.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "component", type: i2.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "component", type: i2.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "directive", type: i2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1822
1833
  }
1823
1834
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CaseManagementStatusModalComponent, decorators: [{
1824
1835
  type: Component,
1825
- args: [{ standalone: false, selector: 'valtimo-case-management-status-modal', 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<cds-modal\n valtimoCdsModal\n *ngIf=\"{\n isAdd: isAdd$ | async,\n isEdit: isEdit$ | async,\n isClosed: isClosed$ | async,\n editingKey: editingKey$ | async,\n disabled: disabled$ | async,\n } as obs\"\n [open]=\"!obs.isClosed\"\n size=\"sm\"\n (close)=\"onClose()\"\n>\n <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onClose()\" [cdsLayer]=\"1\">\n <h3 cdsModalHeaderHeading>\n {{ obs.isAdd ? ('caseManagement.statuses.add' | translate) : '' }}\n {{ obs.isEdit ? ('caseManagement.statuses.edit' | translate) : '' }}\n </h3>\n </cds-modal-header>\n\n <section cdsModalContent [cdsLayer]=\"1\">\n <ng-container *ngTemplateOutlet=\"statusForm; context: {obs: obs}\"></ng-container>\n </section>\n\n <cds-modal-footer [cdsLayer]=\"1\">\n <ng-container *ngTemplateOutlet=\"buttons; context: {obs: obs}\"></ng-container>\n </cds-modal-footer>\n</cds-modal>\n\n<ng-template #colorDropdownItemTemplate let-item=\"item\">\n <div class=\"dropdown-color-tag\">\n <cds-tag *ngIf=\"item && item.content\" class=\"cds-tag--no-margin\" [type]=\"item?.tagType\">\n {{ 'interface.tagType.' + item?.tagType | translate }}\n </cds-tag>\n </div>\n</ng-template>\n\n<ng-template #statusForm let-obs=\"obs\">\n <form [formGroup]=\"statusFormGroup\" class=\"status-form\">\n <cds-label>\n {{ 'caseManagement.statuses.columns.title' | translate }}\n\n <input cdsText formControlName=\"title\" [attr.data-test-id]=\"testIds.titleInput\" [attr.modal-primary-focus]=\"true\" />\n </cds-label>\n\n <cds-label>\n {{ 'caseManagement.statuses.columns.key' | translate }}\n\n <div class=\"edit-key-input\">\n <input\n cdsText\n formControlName=\"key\"\n [attr.data-test-id]=\"testIds.keyInput\"\n [readOnly]=\"!obs.editingKey\"\n [placeholder]=\"\n obs.isAdd && !obs.editingKey\n ? ('caseManagement.statuses.keyAutoGenerated' | translate)\n : ''\n \"\n />\n\n <cds-icon-button\n *ngIf=\"!obs.editingKey && obs.isAdd\"\n [attr.data-test-id]=\"testIds.editKeyButton\"\n [disabled]=\"obs.disabled\"\n (click)=\"editKeyButtonClick()\"\n kind=\"secondary\"\n >\n <svg class=\"cds--btn__icon\" cdsIcon=\"edit\" size=\"16\"></svg>\n </cds-icon-button>\n </div>\n </cds-label>\n\n <div class=\"horizontal-inputs\">\n <cds-label>\n {{ 'caseManagement.statuses.columns.color' | translate }}\n\n <cds-dropdown\n [id]=\"'status-color-dropdown'\"\n [attr.data-test-id]=\"testIds.colorDropdown\"\n [appendInline]=\"false\"\n [placeholder]=\"'caseManagement.statuses.colorPlaceholder' | translate\"\n (selected)=\"colorDropdownChange($event)\"\n >\n <cds-dropdown-list [items]=\"colorListItems$\" [listTpl]=\"colorDropdownItemTemplate\">\n </cds-dropdown-list>\n </cds-dropdown>\n </cds-label>\n\n <cds-toggle\n [attr.data-test-id]=\"testIds.visibilityToggle\"\n [label]=\"'caseManagement.statuses.visibleTitle' | translate\"\n [onText]=\"'caseManagement.statuses.visible' | translate\"\n [offText]=\"'caseManagement.statuses.invisible' | translate\"\n [disabled]=\"obs.disabled\"\n [checked]=\"visibleInCaseListByDefault?.value\"\n (checkedChange)=\"toggleCheckedChange($event)\"\n ></cds-toggle>\n </div>\n\n <cds-toggle\n [label]=\"'caseManagement.statuses.showRetentionPeriod' | translate\"\n [onText]=\"'interface.yes' | translate\"\n [offText]=\"'interface.no' | translate\"\n [disabled]=\"obs.disabled\"\n [checked]=\"showRetentionPeriod$ | async\"\n (checkedChange)=\"toggleRetentionPeriod($event)\"\n ></cds-toggle>\n\n <cds-label class=\"status-form-retention-period__label\" *ngIf=\"showRetentionPeriod$ | async\">\n <div>\n {{ 'caseManagement.statuses.columns.retentionPeriod' | translate }}\n\n <v-tooltip-icon\n [tooltip]=\"'caseManagement.statuses.columns.retentionPeriodTooltip' | translate\"\n ></v-tooltip-icon>\n </div>\n\n <input cdsText formControlName=\"retentionPeriodInDays\" />\n </cds-label>\n\n <cds-notification\n class=\"deployment-warning-notification\"\n *ngIf=\"!obs.editingKey && !obs.isAdd\"\n [notificationObj]=\"{\n type: 'warning',\n message:\n ('caseManagement.statuses.retentionPeriodExistingCasesWarning'\n | translate: notificationContent),\n showClose: false,\n lowContrast: true,\n }\"\n ></cds-notification>\n </form>\n</ng-template>\n\n<ng-template #buttons let-obs=\"obs\">\n <button cdsButton=\"ghost\" [attr.data-test-id]=\"testIds.cancelButton\" (click)=\"onClose()\" [disabled]=\"obs.disabled\">\n {{ 'interface.cancel' | translate }}\n </button>\n\n <button\n *ngIf=\"obs.isAdd\"\n cdsButton=\"primary\"\n [attr.data-test-id]=\"testIds.addConfirmButton\"\n [disabled]=\"invalid || pristine || obs.disabled\"\n (click)=\"addStatus()\"\n >\n {{ 'interface.add' | translate }}\n </button>\n\n <button\n *ngIf=\"obs.isEdit\"\n cdsButton=\"primary\"\n [attr.data-test-id]=\"testIds.saveButton\"\n [disabled]=\"invalid || pristine || obs.disabled\"\n (click)=\"editStatus()\"\n >\n {{ 'interface.save' | translate }}\n </button>\n</ng-template>\n", styles: [".status-form{display:flex;flex-direction:column;gap:16px}::ng-deep .status-form-retention-period__label .cds--text-input__field-wrapper{flex-direction:column;gap:8px}::ng-deep .status-form-retention-period__label .cds--text-input__field-wrapper div{display:flex;align-items:center}.edit-key-input{height:40px;display:flex;width:100%;flex-direction:row;gap:16px;align-items:flex-end}.edit-key-input input:read-only{color:var(--cds-text-disabled)}::ng-deep .horizontal-inputs{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}::ng-deep .horizontal-inputs .cds--label{width:100%;display:flex;flex-direction:column;gap:8px}::ng-deep .dropdown-color-tag .cds--tag{margin-top:-4px;margin-left:2px}\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"] }]
1836
+ args: [{ standalone: false, selector: 'valtimo-case-management-status-modal', 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<cds-modal\n valtimoCdsModal\n *ngIf=\"{\n isAdd: isAdd$ | async,\n isEdit: isEdit$ | async,\n isClosed: isClosed$ | async,\n editingKey: editingKey$ | async,\n disabled: disabled$ | async,\n } as obs\"\n [open]=\"!obs.isClosed\"\n size=\"sm\"\n (close)=\"onClose()\"\n>\n <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onClose()\" [cdsLayer]=\"1\">\n <h3 cdsModalHeaderHeading>\n {{ obs.isAdd ? ('caseManagement.statuses.add' | translate) : '' }}\n {{ obs.isEdit ? ('caseManagement.statuses.edit' | translate) : '' }}\n </h3>\n </cds-modal-header>\n\n <section cdsModalContent [cdsLayer]=\"1\">\n <ng-container *ngTemplateOutlet=\"statusForm; context: {obs: obs}\"></ng-container>\n </section>\n\n <cds-modal-footer [cdsLayer]=\"1\">\n <ng-container *ngTemplateOutlet=\"buttons; context: {obs: obs}\"></ng-container>\n </cds-modal-footer>\n</cds-modal>\n\n<ng-template #colorDropdownItemTemplate let-item=\"item\">\n <div class=\"dropdown-color-tag\">\n <cds-tag *ngIf=\"item && item.content\" class=\"cds-tag--no-margin\" [type]=\"item?.tagType\">\n {{ 'interface.tagType.' + item?.tagType | translate }}\n </cds-tag>\n </div>\n</ng-template>\n\n<ng-template #statusForm let-obs=\"obs\">\n <form [formGroup]=\"statusFormGroup\" class=\"status-form\">\n <cds-label>\n {{ 'caseManagement.statuses.columns.title' | translate }}\n\n <input cdsText formControlName=\"title\" [attr.data-test-id]=\"testIds.titleInput\" [attr.modal-primary-focus]=\"true\" />\n </cds-label>\n\n <cds-label>\n {{ 'caseManagement.statuses.columns.label' | translate }}\n\n <input cdsText formControlName=\"label\" [attr.data-test-id]=\"testIds.labelInput\" />\n </cds-label>\n\n <cds-label>\n {{ 'caseManagement.statuses.columns.key' | translate }}\n\n <div class=\"edit-key-input\">\n <input\n cdsText\n formControlName=\"key\"\n [attr.data-test-id]=\"testIds.keyInput\"\n [readOnly]=\"!obs.editingKey\"\n [placeholder]=\"\n obs.isAdd && !obs.editingKey\n ? ('caseManagement.statuses.keyAutoGenerated' | translate)\n : ''\n \"\n />\n\n <cds-icon-button\n *ngIf=\"!obs.editingKey && obs.isAdd\"\n [attr.data-test-id]=\"testIds.editKeyButton\"\n [disabled]=\"obs.disabled\"\n (click)=\"editKeyButtonClick()\"\n kind=\"secondary\"\n >\n <svg class=\"cds--btn__icon\" cdsIcon=\"edit\" size=\"16\"></svg>\n </cds-icon-button>\n </div>\n </cds-label>\n\n <div class=\"horizontal-inputs\">\n <cds-label>\n {{ 'caseManagement.statuses.columns.color' | translate }}\n\n <cds-dropdown\n [id]=\"'status-color-dropdown'\"\n [attr.data-test-id]=\"testIds.colorDropdown\"\n [appendInline]=\"false\"\n [placeholder]=\"'caseManagement.statuses.colorPlaceholder' | translate\"\n (selected)=\"colorDropdownChange($event)\"\n >\n <cds-dropdown-list [items]=\"colorListItems$\" [listTpl]=\"colorDropdownItemTemplate\">\n </cds-dropdown-list>\n </cds-dropdown>\n </cds-label>\n\n <cds-toggle\n [attr.data-test-id]=\"testIds.visibilityToggle\"\n [label]=\"'caseManagement.statuses.visibleTitle' | translate\"\n [onText]=\"'caseManagement.statuses.visible' | translate\"\n [offText]=\"'caseManagement.statuses.invisible' | translate\"\n [disabled]=\"obs.disabled\"\n [checked]=\"visibleInCaseListByDefault?.value\"\n (checkedChange)=\"toggleCheckedChange($event)\"\n ></cds-toggle>\n </div>\n\n <cds-toggle\n [label]=\"'caseManagement.statuses.showRetentionPeriod' | translate\"\n [onText]=\"'interface.yes' | translate\"\n [offText]=\"'interface.no' | translate\"\n [disabled]=\"obs.disabled\"\n [checked]=\"showRetentionPeriod$ | async\"\n (checkedChange)=\"toggleRetentionPeriod($event)\"\n ></cds-toggle>\n\n <cds-label class=\"status-form-retention-period__label\" *ngIf=\"showRetentionPeriod$ | async\">\n <div>\n {{ 'caseManagement.statuses.columns.retentionPeriod' | translate }}\n\n <v-tooltip-icon\n [tooltip]=\"'caseManagement.statuses.columns.retentionPeriodTooltip' | translate\"\n ></v-tooltip-icon>\n </div>\n\n <input cdsText formControlName=\"retentionPeriodInDays\" />\n </cds-label>\n\n <cds-notification\n class=\"deployment-warning-notification\"\n *ngIf=\"!obs.editingKey && !obs.isAdd\"\n [notificationObj]=\"{\n type: 'warning',\n message:\n ('caseManagement.statuses.retentionPeriodExistingCasesWarning'\n | translate: notificationContent),\n showClose: false,\n lowContrast: true,\n }\"\n ></cds-notification>\n </form>\n</ng-template>\n\n<ng-template #buttons let-obs=\"obs\">\n <button cdsButton=\"ghost\" [attr.data-test-id]=\"testIds.cancelButton\" (click)=\"onClose()\" [disabled]=\"obs.disabled\">\n {{ 'interface.cancel' | translate }}\n </button>\n\n <button\n *ngIf=\"obs.isAdd\"\n cdsButton=\"primary\"\n [attr.data-test-id]=\"testIds.addConfirmButton\"\n [disabled]=\"invalid || pristine || obs.disabled\"\n (click)=\"addStatus()\"\n >\n {{ 'interface.add' | translate }}\n </button>\n\n <button\n *ngIf=\"obs.isEdit\"\n cdsButton=\"primary\"\n [attr.data-test-id]=\"testIds.saveButton\"\n [disabled]=\"invalid || pristine || obs.disabled\"\n (click)=\"editStatus()\"\n >\n {{ 'interface.save' | translate }}\n </button>\n</ng-template>\n", styles: [".status-form{display:flex;flex-direction:column;gap:16px}::ng-deep .status-form-retention-period__label .cds--text-input__field-wrapper{flex-direction:column;gap:8px}::ng-deep .status-form-retention-period__label .cds--text-input__field-wrapper div{display:flex;align-items:center}.edit-key-input{height:40px;display:flex;width:100%;flex-direction:row;gap:16px;align-items:flex-end}.edit-key-input input:read-only{color:var(--cds-text-disabled)}::ng-deep .horizontal-inputs{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}::ng-deep .horizontal-inputs .cds--label{width:100%;display:flex;flex-direction:column;gap:8px}::ng-deep .dropdown-color-tag .cds--tag{margin-top:-4px;margin-left:2px}\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"] }]
1826
1837
  }], ctorParameters: () => [{ type: i1$4.FormBuilder }, { type: i2.IconService }, { type: i1$2.CaseStatusService }, { type: i3.TranslateService }], propDecorators: { type: [{
1827
1838
  type: Input
1828
1839
  }], prefill: [{
@@ -4204,6 +4215,8 @@ class CaseManagementDetailComponent {
4204
4215
  this.testIds = CASE_MANAGEMENT_DETAIL_TEST_IDS;
4205
4216
  this.params$ = getCaseManagementRouteParams(this.route);
4206
4217
  this.caseDefinitionKey$ = this.params$.pipe(map(params => params?.caseDefinitionKey ?? ''));
4218
+ this.caseListColumn$ = this.configService.getFeatureToggleObservable('caseListColumn', true);
4219
+ this.tabManagementEnabled$ = this.configService.getFeatureToggleObservable('enableTabManagement', true);
4207
4220
  this.currentTab$ = this.router.events.pipe(filter(event => event instanceof NavigationEnd), map(event => {
4208
4221
  const urlWithoutQuery = event.urlAfterRedirects.split('?')[0];
4209
4222
  const splitUrl = urlWithoutQuery.split('/');
@@ -4222,9 +4235,6 @@ class CaseManagementDetailComponent {
4222
4235
  this._refreshConfigurationIssues$,
4223
4236
  ]).pipe(switchMap(([key, version]) => this.caseManagementService.getConfigurationIssues(key, version)), map(issues => issues.filter(issue => !issue.resolved)), shareReplay(1));
4224
4237
  this.iconService.registerAll([WarningFilled16]);
4225
- const featureToggles = this.configService.config.featureToggles;
4226
- this.caseListColumn = featureToggles?.caseListColumn ?? true;
4227
- this.tabManagementEnabled = featureToggles?.enableTabManagement ?? true;
4228
4238
  }
4229
4239
  ngOnInit() {
4230
4240
  this._subscriptions.add(this.caseDetailService.documentDefinition$.subscribe((documentDefinition) => {
@@ -5036,6 +5046,9 @@ class CaseManagementWidgetTabComponent extends ManagementWidgetDetailsComponent
5036
5046
  WidgetType.FORMIO,
5037
5047
  WidgetType.TABLE,
5038
5048
  WidgetType.MAP,
5049
+ WidgetType.PERSON_CARD,
5050
+ WidgetType.METROLINE,
5051
+ WidgetType.HIGHLIGHT,
5039
5052
  ];
5040
5053
  }
5041
5054
  ngOnInit() {