@valtimo/components 13.45.0 → 13.46.0

package/fesm2022/valtimo-components.mjs

@@ -4,7 +4,7 @@ import { combineLatest, map, BehaviorSubject, switchMap, catchError, of, shareRe
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule, TranslateLoader, TranslateService, TranslatePipe } from '@ngx-translate/core';
 import * as i1$2 from '@valtimo/shared';
-import { BaseApiService, VERSIONS, HttpLoaderFactory, getContextObservable, getCaseManagementRouteParams, getBuildingBlockManagementRouteParams } from '@valtimo/shared';
+import { BaseApiService, VERSIONS, HttpLoaderFactory, getContextObservable, getCaseManagementRouteParams, getBuildingBlockManagementRouteParams, sanitizeKey, toKebabCase } from '@valtimo/shared';
 import * as i1$1 from '@angular/common/http';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { filter, map as map$1, take, tap as tap$1, debounceTime, distinctUntilChanged, takeUntil as takeUntil$1, startWith as startWith$1, switchMap as switchMap$1, delay } from 'rxjs/operators';
@@ -9661,7 +9661,7 @@ class FormioComponent {
             const formioTranslations = this.translateService.instant('formioTranslations');
             const defaultOptions = {
                 ...options,
-                ...(formioTranslations === 'object' && {
+                ...(typeof formioTranslations === 'object' && {
                     i18n: {
                         [language]: this.stateService.flattenTranslationsObject(formioTranslations),
                     },
@@ -9669,6 +9669,8 @@ class FormioComponent {
             };
             return deepmerge(defaultOptions, overrideOptions);
         }), distinctUntilChanged((prev, curr) => isEqual(prev, curr)), tap$1(options => this.logger.debug('Form.IO options used', options)));
+        // Only renderOptions reaches form.io itself; getRendererOptions() drops everything else.
+        this.renderOptions$ = this.currentLanguage$.pipe(map$1(language => ({ language })));
         this._storeTokenInLocalStorage = !this.configService.getFeatureToggle('disableFormioTokenInLocalStorage');
         this._inMemoryTokenSet$ = new BehaviorSubject(false);
         // The form is only rendered once a token is available. In the default (legacy) mode the token
@@ -9807,11 +9809,11 @@ class FormioComponent {
         this._overrideOptions$.next(config.formioOptions);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormioComponent, deps: [{ token: i6$1.UserProviderService }, { token: i4.NGXLogger }, { token: FormIoStateService }, { token: i1$3.ActivatedRoute }, { token: i1.TranslateService }, { token: FormIoLocalStorageService }, { token: ValtimoModalService }, { token: i1$2.ConfigService }, { token: FormIoTagsService }, { token: i0.Injector }, { token: FormioTranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: FormioComponent, isStandalone: false, selector: "valtimo-form-io", inputs: { options: "options", submission: "submission", form: "form", readOnly: "readOnly", errors: "errors", formRefresh$: "formRefresh$" }, outputs: { submit: "submit", change: "change", event: "event" }, host: { listeners: { "window:beforeunload": "handleBeforeUnload($event)" } }, providers: [FormIoLocalStorageService], usesOnChanges: 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<div\n  class=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"{\n    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async,\n    submission: submission$ | async,\n    readOnly: readOnly$ | async,\n    form: form$ | async,\n    errors: errors$ | async,\n    tokenReady: tokenReady$ | async,\n  } as obs\"\n>\n  <div *ngIf=\"obs.errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of obs.errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n\n  <formio\n    *ngIf=\"obs.formioOptions && obs.form && obs.tokenReady\"\n    [form]=\"obs.form\"\n    [language]=\"languageEventEmitter\"\n    [options]=\"obs.formioOptions\"\n    [readOnly]=\"obs.readOnly\"\n    [refresh]=\"refreshForm\"\n    [submission]=\"obs.submission\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n    (ready)=\"formReady($event)\"\n    (submit)=\"onSubmit($event)\"\n    (customEvent)=\"onCustomEvent($event)\"\n  ></formio>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i9.FormioComponent, selector: "formio" }, { kind: "directive", type: i2$3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: FormioComponent, isStandalone: false, selector: "valtimo-form-io", inputs: { options: "options", submission: "submission", form: "form", readOnly: "readOnly", errors: "errors", formRefresh$: "formRefresh$" }, outputs: { submit: "submit", change: "change", event: "event" }, host: { listeners: { "window:beforeunload": "handleBeforeUnload($event)" } }, providers: [FormIoLocalStorageService], usesOnChanges: 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<div\n  class=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"{\n    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async,\n    renderOptions: renderOptions$ | async,\n    submission: submission$ | async,\n    readOnly: readOnly$ | async,\n    form: form$ | async,\n    errors: errors$ | async,\n    tokenReady: tokenReady$ | async,\n  } as obs\"\n>\n  <div *ngIf=\"obs.errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of obs.errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n\n  <formio\n    *ngIf=\"obs.formioOptions && obs.form && obs.tokenReady\"\n    [form]=\"obs.form\"\n    [language]=\"languageEventEmitter\"\n    [options]=\"obs.formioOptions\"\n    [readOnly]=\"obs.readOnly\"\n    [refresh]=\"refreshForm\"\n    [renderOptions]=\"obs.renderOptions\"\n    [submission]=\"obs.submission\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n    (ready)=\"formReady($event)\"\n    (submit)=\"onSubmit($event)\"\n    (customEvent)=\"onCustomEvent($event)\"\n  ></formio>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i9.FormioComponent, selector: "formio" }, { kind: "directive", type: i2$3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-form-io', providers: [FormIoLocalStorageService], standalone: false, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"{\n    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async,\n    submission: submission$ | async,\n    readOnly: readOnly$ | async,\n    form: form$ | async,\n    errors: errors$ | async,\n    tokenReady: tokenReady$ | async,\n  } as obs\"\n>\n  <div *ngIf=\"obs.errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of obs.errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n\n  <formio\n    *ngIf=\"obs.formioOptions && obs.form && obs.tokenReady\"\n    [form]=\"obs.form\"\n    [language]=\"languageEventEmitter\"\n    [options]=\"obs.formioOptions\"\n    [readOnly]=\"obs.readOnly\"\n    [refresh]=\"refreshForm\"\n    [submission]=\"obs.submission\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n    (ready)=\"formReady($event)\"\n    (submit)=\"onSubmit($event)\"\n    (customEvent)=\"onCustomEvent($event)\"\n  ></formio>\n</div>\n" }]
+            args: [{ selector: 'valtimo-form-io', providers: [FormIoLocalStorageService], standalone: false, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"{\n    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async,\n    renderOptions: renderOptions$ | async,\n    submission: submission$ | async,\n    readOnly: readOnly$ | async,\n    form: form$ | async,\n    errors: errors$ | async,\n    tokenReady: tokenReady$ | async,\n  } as obs\"\n>\n  <div *ngIf=\"obs.errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of obs.errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n\n  <formio\n    *ngIf=\"obs.formioOptions && obs.form && obs.tokenReady\"\n    [form]=\"obs.form\"\n    [language]=\"languageEventEmitter\"\n    [options]=\"obs.formioOptions\"\n    [readOnly]=\"obs.readOnly\"\n    [refresh]=\"refreshForm\"\n    [renderOptions]=\"obs.renderOptions\"\n    [submission]=\"obs.submission\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n    (ready)=\"formReady($event)\"\n    (submit)=\"onSubmit($event)\"\n    (customEvent)=\"onCustomEvent($event)\"\n  ></formio>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i6$1.UserProviderService }, { type: i4.NGXLogger }, { type: FormIoStateService }, { type: i1$3.ActivatedRoute }, { type: i1.TranslateService }, { type: FormIoLocalStorageService }, { type: ValtimoModalService }, { type: i1$2.ConfigService }, { type: FormIoTagsService }, { type: i0.Injector }, { type: FormioTranslationService }], propDecorators: { options: [{
                 type: Input
             }], submission: [{
@@ -9952,7 +9954,8 @@ class FormioBuilderComponent {
             const formioTranslations = this.translateService.instant('formioTranslations');
             const defaultOptions = {
                 ...options,
-                ...(formioTranslations === 'object' && {
+                language,
+                ...(typeof formioTranslations === 'object' && {
                     i18n: {
                         [language]: this.stateService.flattenTranslationsObject(formioTranslations),
                     },
@@ -15806,6 +15809,226 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Output
             }] } });
 
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class AutoKeyInputComponent {
+    set disabled(value) {
+        this.$disabled.set(value);
+    }
+    // Seeds the value outside reactive forms, where writeValue is never called
+    set defaultValue(value) {
+        if (value)
+            this.setValue(value);
+    }
+    set mode(value) {
+        this._mode$.next(value);
+    }
+    get mode$() {
+        return this._mode$.pipe(filter(mode => !!mode));
+    }
+    set usedKeys(value) {
+        this._usedKeys$.next(value || []);
+    }
+    set sourceText(value) {
+        this._sourceText$.next(value || '');
+    }
+    constructor(iconService) {
+        this.iconService = iconService;
+        this.labelTranslationKey = 'Key';
+        this.placeholderTranslationKey = '';
+        this.dataTestId = AUTO_KEY_INPUT_TEST_IDS.input;
+        // Read by the legacy v-form, which keys its output by component name
+        this.name = '';
+        this.margin = false;
+        this.testIds = AUTO_KEY_INPUT_TEST_IDS;
+        // Value stream the legacy v-form collects; the reactive-forms path uses onChange
+        this.inputValue$ = new BehaviorSubject('');
+        this._mode$ = new BehaviorSubject(null);
+        this._usedKeys$ = new BehaviorSubject([]);
+        this._sourceText$ = new BehaviorSubject('');
+        this.$disabled = signal(false);
+        this.value = '';
+        this.editingKey$ = new BehaviorSubject(true);
+        this.duplicateInitialized = false;
+        this.idError$ = new BehaviorSubject(null);
+        this.onChange = (_) => { };
+        this.onTouched = () => { };
+        this.onValidatorChange = () => { };
+        this.validate = (control) => this.idError$.getValue() ? { idError: { value: this.idError$.getValue() } } : null;
+        this.subscription = new Subscription();
+        this.iconService.registerAll([Edit16, Close16]);
+        this.subscription.add(this.mode$.subscribe(mode => {
+            this.editingKey$.next(mode === 'edit');
+            if (mode === 'duplicate') {
+                this.duplicateInitialized = false;
+            }
+        }));
+        this.subscription.add(combineLatest([this.mode$, this.editingKey$, this._usedKeys$, this._sourceText$]).subscribe(([mode, editingKey, usedKeys, sourceText]) => {
+            if (mode === 'add' || mode === 'duplicate') {
+                this.updateKey(mode, editingKey, usedKeys, sourceText);
+            }
+        }));
+    }
+    ngOnChanges() {
+        this.onValidatorChange();
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+        this.duplicateInitialized = false;
+        this.idError$.next(null);
+    }
+    setDisabledState(disabled) {
+        this.$disabled.set(disabled);
+    }
+    writeValue(value) {
+        if (value === null || value === '') {
+            this.resetInternalState();
+            return;
+        }
+        this.setValue(value ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
+    }
+    onInputChange(event) {
+        const input = event.target;
+        const key = sanitizeKey(input.value);
+        if (input.value !== key)
+            this.reflectSanitizedKey(input, key);
+        const usedKeys = this._usedKeys$.getValue();
+        this.idError$.next(usedKeys.includes(key) ? 'caseManagement.statuses.keyDuplicated' : null);
+        this.setValue(key);
+        this.onChange(this.value);
+    }
+    enableKeyEditing() {
+        this.editingKey$.next(true);
+    }
+    disableKeyEditing() {
+        this.editingKey$.next(false);
+    }
+    getUniqueKey(sourceText, usedKeys) {
+        const baseKey = toKebabCase(sourceText);
+        if (!usedKeys.includes(baseKey) || this._mode$.getValue() === 'edit') {
+            return baseKey;
+        }
+        return this.getUniqueKeyWithNumber(baseKey, usedKeys);
+    }
+    // Stripping a character leaves the model unchanged, so Angular skips the [value] binding
+    reflectSanitizedKey(input, key) {
+        const removed = input.value.length - key.length;
+        const caret = Math.max((input.selectionStart ?? input.value.length) - removed, 0);
+        input.value = key;
+        input.setSelectionRange(caret, caret);
+    }
+    setValue(value) {
+        this.value = value;
+        if (this.inputValue$.getValue() !== value)
+            this.inputValue$.next(value);
+    }
+    resetInternalState() {
+        this.setValue('');
+        this.idError$.next(null);
+        this.disableKeyEditing();
+        this.duplicateInitialized = false;
+    }
+    updateKey(mode, editingKey, usedKeys, sourceText) {
+        if (editingKey) {
+            return;
+        }
+        let newKey = sourceText ? this.getUniqueKey(sourceText, usedKeys) : '';
+        if (mode === 'duplicate' && !this.duplicateInitialized && newKey) {
+            newKey = `${newKey}-duplicate`;
+            this.duplicateInitialized = true;
+        }
+        this.setValue(newKey);
+        this.onChange(newKey);
+    }
+    getUniqueKeyWithNumber(base, usedKeys, suffix = 1) {
+        const newKey = `${base}-${suffix}`;
+        if (usedKeys.includes(newKey)) {
+            return this.getUniqueKeyWithNumber(base, usedKeys, suffix + 1);
+        }
+        return newKey;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AutoKeyInputComponent, deps: [{ token: i2$3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: AutoKeyInputComponent, isStandalone: true, selector: "valtimo-auto-key-input", inputs: { labelTranslationKey: "labelTranslationKey", placeholderTranslationKey: "placeholderTranslationKey", dataTestId: "dataTestId", name: "name", disabled: "disabled", defaultValue: "defaultValue", margin: "margin", mode: "mode", usedKeys: "usedKeys", sourceText: "sourceText" }, host: { properties: { "class.auto-key-input--margin": "this.margin" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AutoKeyInputComponent),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => AutoKeyInputComponent),
+                multi: true,
+            },
+        ], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-label\n  *ngIf=\"{\n    mode: mode$ | async,\n    idError: idError$ | async,\n    editingKey: editingKey$ | async,\n  } as obs\"\n  [invalid]=\"!!obs.idError\"\n  [invalidText]=\"obs.idError | translate\"\n>\n  <span class=\"auto-key-label\">\n    {{ labelTranslationKey | translate }}\n\n    <ng-content></ng-content>\n  </span>\n\n  <div class=\"edit-key-input\">\n    <input\n      cdsText\n      type=\"text\"\n      [value]=\"value\"\n      [placeholder]=\"\n        obs.mode === 'add' && !obs.editingKey\n          ? ('caseManagement.statuses.keyAutoGenerated' | translate)\n          : (placeholderTranslationKey | translate)\n      \"\n      [readOnly]=\"!obs.editingKey || obs.mode === 'edit'\"\n      [invalid]=\"!!obs.idError\"\n      [attr.data-test-id]=\"dataTestId\"\n      (input)=\"onInputChange($event)\"\n      (blur)=\"onTouched()\"\n    />\n\n    <cds-icon-button\n      *ngIf=\"(obs.mode === 'add' || obs.mode === 'duplicate') && !obs.editingKey\"\n      [disabled]=\"$disabled()\"\n      [attr.data-test-id]=\"testIds.editButton\"\n      (click)=\"enableKeyEditing()\"\n      kind=\"secondary\"\n      size=\"md\"\n    >\n      <svg cdsIcon=\"edit\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </cds-icon-button>\n\n    <cds-icon-button\n      *ngIf=\"obs.mode === 'add' && obs.editingKey\"\n      [disabled]=\"$disabled()\"\n      (click)=\"disableKeyEditing()\"\n      kind=\"secondary\"\n      size=\"md\"\n    >\n      <svg cdsIcon=\"close\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </cds-icon-button>\n  </div>\n</cds-label>\n", styles: [".auto-key-label{display:flex;align-items:center}:host(.auto-key-input--margin){display:block;margin-block-end:var(--v-input-margin)}.edit-key-input{display:flex;align-items:center;gap:8px;width:100%}.edit-key-input input[cdsText]{flex:1 1 auto}.edit-key-input cds-icon-button{flex-shrink:0;margin-left:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule$1 }, { kind: "component", type: i2$3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$3.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: "ngmodule", type: IconModule }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AutoKeyInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-auto-key-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        TranslateModule,
+                        InputModule$1,
+                        ButtonModule,
+                        IconModule,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AutoKeyInputComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => AutoKeyInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-label\n  *ngIf=\"{\n    mode: mode$ | async,\n    idError: idError$ | async,\n    editingKey: editingKey$ | async,\n  } as obs\"\n  [invalid]=\"!!obs.idError\"\n  [invalidText]=\"obs.idError | translate\"\n>\n  <span class=\"auto-key-label\">\n    {{ labelTranslationKey | translate }}\n\n    <ng-content></ng-content>\n  </span>\n\n  <div class=\"edit-key-input\">\n    <input\n      cdsText\n      type=\"text\"\n      [value]=\"value\"\n      [placeholder]=\"\n        obs.mode === 'add' && !obs.editingKey\n          ? ('caseManagement.statuses.keyAutoGenerated' | translate)\n          : (placeholderTranslationKey | translate)\n      \"\n      [readOnly]=\"!obs.editingKey || obs.mode === 'edit'\"\n      [invalid]=\"!!obs.idError\"\n      [attr.data-test-id]=\"dataTestId\"\n      (input)=\"onInputChange($event)\"\n      (blur)=\"onTouched()\"\n    />\n\n    <cds-icon-button\n      *ngIf=\"(obs.mode === 'add' || obs.mode === 'duplicate') && !obs.editingKey\"\n      [disabled]=\"$disabled()\"\n      [attr.data-test-id]=\"testIds.editButton\"\n      (click)=\"enableKeyEditing()\"\n      kind=\"secondary\"\n      size=\"md\"\n    >\n      <svg cdsIcon=\"edit\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </cds-icon-button>\n\n    <cds-icon-button\n      *ngIf=\"obs.mode === 'add' && obs.editingKey\"\n      [disabled]=\"$disabled()\"\n      (click)=\"disableKeyEditing()\"\n      kind=\"secondary\"\n      size=\"md\"\n    >\n      <svg cdsIcon=\"close\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </cds-icon-button>\n  </div>\n</cds-label>\n", styles: [".auto-key-label{display:flex;align-items:center}:host(.auto-key-input--margin){display:block;margin-block-end:var(--v-input-margin)}.edit-key-input{display:flex;align-items:center;gap:8px;width:100%}.edit-key-input input[cdsText]{flex:1 1 auto}.edit-key-input cds-icon-button{flex-shrink:0;margin-left:4px}\n"] }]
+        }], ctorParameters: () => [{ type: i2$3.IconService }], propDecorators: { labelTranslationKey: [{
+                type: Input
+            }], placeholderTranslationKey: [{
+                type: Input
+            }], dataTestId: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], defaultValue: [{
+                type: Input
+            }], margin: [{
+                type: HostBinding,
+                args: ['class.auto-key-input--margin']
+            }, {
+                type: Input
+            }], mode: [{
+                type: Input
+            }], usedKeys: [{
+                type: Input
+            }], sourceText: [{
+                type: Input
+            }] } });
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -15846,6 +16069,7 @@ class FormComponent {
             ...this.multiInputFormComponents?.toArray(),
             ...this.radioComponents?.toArray(),
             ...this.valuePathSelectorComponents?.toArray(),
+            ...this.autoKeyInputComponents?.toArray(),
         ];
         this.componentValuesSubscription = combineLatest(valueComponents.map(component => {
             const inputComponent = component;
@@ -15902,13 +16126,14 @@ class FormComponent {
             this.multiInputFormComponents.changes.pipe(startWith(null)),
             this.radioComponents.changes.pipe(startWith(null)),
             this.valuePathSelectorComponents.changes.pipe(startWith(null)),
+            this.autoKeyInputComponents.changes.pipe(startWith(null)),
         ]).subscribe(() => {
             this.closeComponentValuesSubscription();
             this.openComponentValuesSubscription();
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: FormComponent, isStandalone: false, selector: "v-form", inputs: { className: "className" }, outputs: { valueChange: "valueChange" }, queries: [{ propertyName: "inputComponents", predicate: InputComponent }, { propertyName: "selectComponents", predicate: SelectComponent }, { propertyName: "multiInputComponents", predicate: CarbonMultiInputComponent }, { propertyName: "datePickerComponents", predicate: DatePickerComponent }, { propertyName: "multiInputFormComponents", predicate: MultiInputFormComponent }, { propertyName: "radioComponents", predicate: RadioComponent }, { propertyName: "valuePathSelectorComponents", predicate: ValuePathSelectorComponent }], 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<form [ngClass]=\"'v-form ' + className\" onsubmit=\"return false;\">\n  <ng-content></ng-content>\n</form>\n", styles: [".v-form{display:flex;flex-direction:column}\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: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: FormComponent, isStandalone: false, selector: "v-form", inputs: { className: "className" }, outputs: { valueChange: "valueChange" }, queries: [{ propertyName: "inputComponents", predicate: InputComponent }, { propertyName: "selectComponents", predicate: SelectComponent }, { propertyName: "multiInputComponents", predicate: CarbonMultiInputComponent }, { propertyName: "datePickerComponents", predicate: DatePickerComponent }, { propertyName: "multiInputFormComponents", predicate: MultiInputFormComponent }, { propertyName: "radioComponents", predicate: RadioComponent }, { propertyName: "valuePathSelectorComponents", predicate: ValuePathSelectorComponent }, { propertyName: "autoKeyInputComponents", predicate: AutoKeyInputComponent }], 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<form [ngClass]=\"'v-form ' + className\" onsubmit=\"return false;\">\n  <ng-content></ng-content>\n</form>\n", styles: [".v-form{display:flex;flex-direction:column}\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: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
@@ -15934,6 +16159,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             }], valuePathSelectorComponents: [{
                 type: ContentChildren,
                 args: [ValuePathSelectorComponent]
+            }], autoKeyInputComponents: [{
+                type: ContentChildren,
+                args: [AutoKeyInputComponent]
             }], className: [{
                 type: Input
             }], valueChange: [{
@@ -18698,186 +18926,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Output
             }] } });
 
-/*
- * Copyright 2015-2026 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class AutoKeyInputComponent {
-    set mode(value) {
-        this._mode$.next(value);
-    }
-    get mode$() {
-        return this._mode$.pipe(filter(mode => !!mode));
-    }
-    set usedKeys(value) {
-        this._usedKeys$.next(value || []);
-    }
-    set sourceText(value) {
-        this._sourceText$.next(value || '');
-    }
-    constructor(iconService) {
-        this.iconService = iconService;
-        this.labelTranslationKey = 'Key';
-        this.placeholderTranslationKey = '';
-        this.testIds = AUTO_KEY_INPUT_TEST_IDS;
-        this._mode$ = new BehaviorSubject(null);
-        this._usedKeys$ = new BehaviorSubject([]);
-        this._sourceText$ = new BehaviorSubject('');
-        this.$disabled = signal(false);
-        this.value = '';
-        this.editingKey$ = new BehaviorSubject(true);
-        this.duplicateInitialized = false;
-        this.idError$ = new BehaviorSubject(null);
-        this.onChange = (_) => { };
-        this.onTouched = () => { };
-        this.onValidatorChange = () => { };
-        this.validate = (control) => this.idError$.getValue() ? { idError: { value: this.idError$.getValue() } } : null;
-        this.subscription = new Subscription();
-        this.iconService.registerAll([Edit16, Close16]);
-        this.subscription.add(this.mode$.subscribe(mode => {
-            this.editingKey$.next(mode === 'edit');
-            if (mode === 'duplicate') {
-                this.duplicateInitialized = false;
-            }
-        }));
-        this.subscription.add(combineLatest([this.mode$, this.editingKey$, this._usedKeys$, this._sourceText$]).subscribe(([mode, editingKey, usedKeys, sourceText]) => {
-            if (mode === 'add' || mode === 'duplicate') {
-                this.updateKey(mode, editingKey, usedKeys, sourceText);
-            }
-        }));
-    }
-    ngOnChanges() {
-        this.onValidatorChange();
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-        this.duplicateInitialized = false;
-        this.idError$.next(null);
-    }
-    setDisabledState(disabled) {
-        this.$disabled.set(disabled);
-    }
-    writeValue(value) {
-        if (value === null || value === '') {
-            this.resetInternalState();
-            return;
-        }
-        this.value = value ?? '';
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    registerOnValidatorChange(fn) {
-        this.onValidatorChange = fn;
-    }
-    onInputChange(event) {
-        const usedKeys = this._usedKeys$.getValue();
-        this.idError$.next(usedKeys.includes(event.target.value) ? 'caseManagement.statuses.keyDuplicated' : null);
-        this.onChange((this.value = event.target.value));
-    }
-    enableKeyEditing() {
-        this.editingKey$.next(true);
-    }
-    disableKeyEditing() {
-        this.editingKey$.next(false);
-    }
-    getUniqueKey(sourceText, usedKeys) {
-        const baseKey = sourceText
-            .toLowerCase()
-            .replace(/[^a-z0-9-_]+|-[^a-z0-9]+/g, '-')
-            .replace(/_[-_]+/g, '_')
-            .replace(/^[^a-z]+/g, '');
-        if (!usedKeys.includes(baseKey) || this._mode$.getValue() === 'edit') {
-            return baseKey;
-        }
-        return this.getUniqueKeyWithNumber(baseKey, usedKeys);
-    }
-    resetInternalState() {
-        this.value = '';
-        this.idError$.next(null);
-        this.disableKeyEditing();
-        this.duplicateInitialized = false;
-    }
-    updateKey(mode, editingKey, usedKeys, sourceText) {
-        if (editingKey) {
-            return;
-        }
-        let newKey = sourceText ? this.getUniqueKey(sourceText, usedKeys) : '';
-        if (mode === 'duplicate' && !this.duplicateInitialized && newKey) {
-            newKey = `${newKey}-duplicate`;
-            this.duplicateInitialized = true;
-        }
-        this.value = newKey;
-        this.onChange(newKey);
-    }
-    getUniqueKeyWithNumber(base, usedKeys, suffix = 1) {
-        const newKey = `${base}-${suffix}`;
-        if (usedKeys.includes(newKey)) {
-            return this.getUniqueKeyWithNumber(base, usedKeys, suffix + 1);
-        }
-        return newKey;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AutoKeyInputComponent, deps: [{ token: i2$3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: AutoKeyInputComponent, isStandalone: true, selector: "valtimo-auto-key-input", inputs: { labelTranslationKey: "labelTranslationKey", placeholderTranslationKey: "placeholderTranslationKey", mode: "mode", usedKeys: "usedKeys", sourceText: "sourceText" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => AutoKeyInputComponent),
-                multi: true,
-            },
-            {
-                provide: NG_VALIDATORS,
-                useExisting: forwardRef(() => AutoKeyInputComponent),
-                multi: true,
-            },
-        ], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-label\n  *ngIf=\"{\n    mode: mode$ | async,\n    idError: idError$ | async,\n    editingKey: editingKey$ | async,\n  } as obs\"\n  [invalid]=\"!!obs.idError\"\n  [invalidText]=\"obs.idError | translate\"\n>\n  {{ labelTranslationKey | translate }}\n\n  <div class=\"edit-key-input\">\n    <input\n      cdsText\n      type=\"text\"\n      [value]=\"value\"\n      [placeholder]=\"\n        obs.mode === 'add' && !obs.editingKey\n          ? ('caseManagement.statuses.keyAutoGenerated' | translate)\n          : (placeholderTranslationKey | translate)\n      \"\n      [readOnly]=\"!obs.editingKey || obs.mode === 'edit'\"\n      [invalid]=\"!!obs.idError\"\n      [attr.data-test-id]=\"testIds.input\"\n      (input)=\"onInputChange($event)\"\n      (blur)=\"onTouched()\"\n    />\n\n    <cds-icon-button\n      *ngIf=\"(obs.mode === 'add' || obs.mode === 'duplicate') && !obs.editingKey\"\n      [disabled]=\"$disabled()\"\n      [attr.data-test-id]=\"testIds.editButton\"\n      (click)=\"enableKeyEditing()\"\n      kind=\"secondary\"\n    >\n      <svg cdsIcon=\"edit\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </cds-icon-button>\n\n    <cds-icon-button\n      *ngIf=\"obs.mode === 'add' && obs.editingKey\"\n      [disabled]=\"$disabled()\"\n      (click)=\"disableKeyEditing()\"\n      kind=\"secondary\"\n    >\n      <svg cdsIcon=\"close\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </cds-icon-button>\n  </div>\n</cds-label>\n", styles: [".edit-key-input{display:flex;align-items:center;gap:8px;width:100%}.edit-key-input input[cdsText]{flex:1 1 auto}.edit-key-input cds-icon-button{flex-shrink:0;margin-left:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule$1 }, { kind: "component", type: i2$3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$3.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: "ngmodule", type: IconModule }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AutoKeyInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'valtimo-auto-key-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        TranslateModule,
-                        InputModule$1,
-                        ButtonModule,
-                        IconModule,
-                    ], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => AutoKeyInputComponent),
-                            multi: true,
-                        },
-                        {
-                            provide: NG_VALIDATORS,
-                            useExisting: forwardRef(() => AutoKeyInputComponent),
-                            multi: true,
-                        },
-                    ], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-label\n  *ngIf=\"{\n    mode: mode$ | async,\n    idError: idError$ | async,\n    editingKey: editingKey$ | async,\n  } as obs\"\n  [invalid]=\"!!obs.idError\"\n  [invalidText]=\"obs.idError | translate\"\n>\n  {{ labelTranslationKey | translate }}\n\n  <div class=\"edit-key-input\">\n    <input\n      cdsText\n      type=\"text\"\n      [value]=\"value\"\n      [placeholder]=\"\n        obs.mode === 'add' && !obs.editingKey\n          ? ('caseManagement.statuses.keyAutoGenerated' | translate)\n          : (placeholderTranslationKey | translate)\n      \"\n      [readOnly]=\"!obs.editingKey || obs.mode === 'edit'\"\n      [invalid]=\"!!obs.idError\"\n      [attr.data-test-id]=\"testIds.input\"\n      (input)=\"onInputChange($event)\"\n      (blur)=\"onTouched()\"\n    />\n\n    <cds-icon-button\n      *ngIf=\"(obs.mode === 'add' || obs.mode === 'duplicate') && !obs.editingKey\"\n      [disabled]=\"$disabled()\"\n      [attr.data-test-id]=\"testIds.editButton\"\n      (click)=\"enableKeyEditing()\"\n      kind=\"secondary\"\n    >\n      <svg cdsIcon=\"edit\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </cds-icon-button>\n\n    <cds-icon-button\n      *ngIf=\"obs.mode === 'add' && obs.editingKey\"\n      [disabled]=\"$disabled()\"\n      (click)=\"disableKeyEditing()\"\n      kind=\"secondary\"\n    >\n      <svg cdsIcon=\"close\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </cds-icon-button>\n  </div>\n</cds-label>\n", styles: [".edit-key-input{display:flex;align-items:center;gap:8px;width:100%}.edit-key-input input[cdsText]{flex:1 1 auto}.edit-key-input cds-icon-button{flex-shrink:0;margin-left:4px}\n"] }]
-        }], ctorParameters: () => [{ type: i2$3.IconService }], propDecorators: { labelTranslationKey: [{
-                type: Input
-            }], placeholderTranslationKey: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }], usedKeys: [{
-                type: Input
-            }], sourceText: [{
-                type: Input
-            }] } });
-
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *