@valtimo/iko 13.32.0 → 13.33.0

package/fesm2022/valtimo-iko.mjs

@@ -8,7 +8,7 @@ import * as i3 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { AuthGuardService } from '@valtimo/security';
 import * as i2$2 from '@valtimo/components';
-import { CarbonListModule, FormIoModule, FitPageDirective, RenderInPageHeaderDirective, SelectModule, CARBON_CONSTANTS, ValtimoCdsModalDirective, AutoKeyInputComponent, ConfirmationModalModule, ViewType, ValuePathSelectorPrefix, InputLabelModule, runAfterCarbonModalClosed, CarbonMultiInputModule, InputModule as InputModule$1, DatePickerModule, ParagraphModule, DateTimePickerComponent, FormModule, registerCustomFormioComponent } from '@valtimo/components';
+import { CarbonListModule, FormIoModule, FitPageDirective, RenderInPageHeaderDirective, SelectModule, CARBON_CONSTANTS, ValtimoCdsModalDirective, AutoKeyInputComponent, ConfirmationModalModule, ViewType, ValuePathSelectorPrefix, InputLabelModule, runAfterCarbonModalClosed, CarbonMultiInputModule, WidgetLayout, WIDGET_LAYOUT_VALUES, WIDGET_LAYOUT_TRANSLATION_KEYS, WidgetLayoutInfoComponent, InputModule as InputModule$1, DatePickerModule, ParagraphModule, DateTimePickerComponent, FormModule, registerCustomFormioComponent } from '@valtimo/components';
 import * as i6 from 'carbon-components-angular';
 import { InputModule, PaginationModule, TilesModule, ButtonModule, ModalModule, TabsModule, IconModule, LayerModule, TooltipModule, DropdownModule, ToggleModule, LoadingModule, NumberModule, ProgressBarModule, CheckboxModule, FileUploaderModule, NotificationModule, TimePickerModule } from 'carbon-components-angular';
 import { BehaviorSubject, filter, of, switchMap, combineLatest, distinctUntilChanged, tap, map as map$1, ReplaySubject, startWith, take, Subscription, delay, catchError } from 'rxjs';
@@ -1185,6 +1185,12 @@ class IkoWidgetComponent {
         this._key$ = new BehaviorSubject('');
         this.loading$ = new BehaviorSubject(true);
         this.widgets$ = combineLatest([this.ikoViewKey$, this.key$]).pipe(switchMap(([ikoViewKey, key]) => this.ikoApiService.getIkoWidget(ikoViewKey, key)));
+        this.widgetLayout$ = combineLatest([
+            this.ikoViewKey$,
+            this.key$,
+        ]).pipe(switchMap(([ikoViewKey, key]) => this.ikoApiService
+            .getIkoDetailTabs(ikoViewKey)
+            .pipe(map$1(tabs => tabs.find(tab => tab.key === key)?.widgetLayout))));
         this.widgetParams$ = combineLatest([
             this.ikoViewKey$,
             this.key$,
@@ -1209,11 +1215,11 @@ class IkoWidgetComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IkoWidgetComponent, deps: [{ token: IkoTabService }, { token: IkoApiService }, { token: i1$1.NGXLogger }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: IkoWidgetComponent, isStandalone: true, selector: "ng-component", inputs: { key: "key" }, 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<valtimo-widget-container\n  fitPage\n  [spaceAdjustment]=\"-32\"\n  [disableOverflow]=\"true\"\n  class=\"iko-widget-container\"\n  [widgets]=\"widgets$ | async\"\n  [widgetComponentMap]=\"widgetComponentMap\"\n  [widgetParams]=\"widgetParams$ | async\"\n>\n</valtimo-widget-container>\n", styles: [":host ::ng-deep .widgets-container{overflow:hidden}.iko-widget-container{display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "component", type: WidgetContainerComponent, selector: "valtimo-widget-container", inputs: ["widgets", "widgetComponentMap", "widgetParams"] }, { kind: "directive", type: FitPageDirective, selector: "[fitPage]", inputs: ["spaceAdjustment", "fitPageDisabled", "disableOverflow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: IkoWidgetComponent, isStandalone: true, selector: "ng-component", inputs: { key: "key" }, 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<valtimo-widget-container\n  fitPage\n  [spaceAdjustment]=\"-32\"\n  [disableOverflow]=\"true\"\n  class=\"iko-widget-container\"\n  [widgets]=\"widgets$ | async\"\n  [widgetComponentMap]=\"widgetComponentMap\"\n  [widgetParams]=\"widgetParams$ | async\"\n  [widgetLayout]=\"widgetLayout$ | async\"\n>\n</valtimo-widget-container>\n", styles: [":host ::ng-deep .widgets-container{overflow:hidden}.iko-widget-container{display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "component", type: WidgetContainerComponent, selector: "valtimo-widget-container", inputs: ["widgets", "widgetLayout", "widgetComponentMap", "widgetParams"] }, { kind: "directive", type: FitPageDirective, selector: "[fitPage]", inputs: ["spaceAdjustment", "fitPageDisabled", "disableOverflow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IkoWidgetComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, WidgetContainerComponent, FitPageDirective], 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<valtimo-widget-container\n  fitPage\n  [spaceAdjustment]=\"-32\"\n  [disableOverflow]=\"true\"\n  class=\"iko-widget-container\"\n  [widgets]=\"widgets$ | async\"\n  [widgetComponentMap]=\"widgetComponentMap\"\n  [widgetParams]=\"widgetParams$ | async\"\n>\n</valtimo-widget-container>\n", styles: [":host ::ng-deep .widgets-container{overflow:hidden}.iko-widget-container{display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+            args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, WidgetContainerComponent, FitPageDirective], 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<valtimo-widget-container\n  fitPage\n  [spaceAdjustment]=\"-32\"\n  [disableOverflow]=\"true\"\n  class=\"iko-widget-container\"\n  [widgets]=\"widgets$ | async\"\n  [widgetComponentMap]=\"widgetComponentMap\"\n  [widgetParams]=\"widgetParams$ | async\"\n  [widgetLayout]=\"widgetLayout$ | async\"\n>\n</valtimo-widget-container>\n", styles: [":host ::ng-deep .widgets-container{overflow:hidden}.iko-widget-container{display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: IkoTabService }, { type: IkoApiService }, { type: i1$1.NGXLogger }], propDecorators: { key: [{
                 type: Input
             }] } });
@@ -3449,7 +3455,13 @@ class IkoManagementTabDetailsModalComponent {
         if (!value)
             return;
         this.$selectedKey.set(value.key);
-        this.form.setValue({ ...value, title: value.title || '', properties: value.properties || {} });
+        this.form.setValue({
+            key: value.key,
+            title: value.title || '',
+            type: value.type,
+            properties: value.properties || {},
+            widgetLayout: value.widgetLayout ?? WidgetLayout.MUURI_GAP_FREE,
+        });
         this.form.markAsPristine();
     }
     set modalMode(value) {
@@ -3484,6 +3496,7 @@ class IkoManagementTabDetailsModalComponent {
             key: this.formBuilder.control('', [Validators.required]),
             type: this.formBuilder.control('', [Validators.required]),
             properties: this.formBuilder.group({}),
+            widgetLayout: this.formBuilder.control(WidgetLayout.MUURI_GAP_FREE),
         });
         this._ikoViewKey$ = this.route.params.pipe(map$1(params => params?.key), filter(key => !!key));
         this._TAB_TYPES = [IkoTabType.WIDGETS];
@@ -3491,6 +3504,10 @@ class IkoManagementTabDetailsModalComponent {
             id: tabType,
             translationKey: `ikoManagement.tabTypes.${tabType}`,
         }));
+        this.widgetLayoutSelectItems = WIDGET_LAYOUT_VALUES.map(value => ({
+            id: value,
+            translationKey: WIDGET_LAYOUT_TRANSLATION_KEYS[value],
+        }));
         this.propertyFields$ = this.ikoManagementApiService.getIkoTabPropertyFields('iko');
         this.resetForm = () => {
             this.form.reset();
@@ -3528,7 +3545,7 @@ class IkoManagementTabDetailsModalComponent {
         this.form.enable();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IkoManagementTabDetailsModalComponent, deps: [{ token: IkoManagementApiService }, { token: i1$2.FormBuilder }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: IkoManagementTabDetailsModalComponent, isStandalone: true, selector: "valtimo-iko-management-tab-details-modal", inputs: { openModal: "openModal", usedKeys: "usedKeys", selectedTab: "selectedTab", modalMode: "modalMode" }, 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  (close)=\"closeModal()\"\n  *ngIf=\"{\n    title: (modalMode === 'add' ? 'ikoManagement.addTab' : 'ikoManagement.editTab') | translate,\n  } as state\"\n  [open]=\"$openModal()\"\n  [title]=\"state.title\"\n  valtimoCdsModal\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{ state.title }}\n    </h3>\n  </cds-modal-header>\n\n  <form cdsModalContent [cdsLayer]=\"1\" [formGroup]=\"form\" class=\"iko-tab-form\">\n    <cds-label>\n      {{ 'ikoManagement.tabTitle' | translate }}\n\n      <input\n        [invalid]=\"title.dirty && title.invalid\"\n        formControlName=\"title\"\n        cdsText\n        placeholder=\"{{ 'ikoManagement.tabTitlePlaceholder' | translate }}\"\n      />\n    </cds-label>\n\n    <valtimo-auto-key-input\n      formControlName=\"key\"\n      labelTranslationKey=\"ikoManagement.keyTitle\"\n      placeholderTranslationKey=\"ikoManagement.tabKeyPlaceholder\"\n      [usedKeys]=\"usedKeys\"\n      [sourceText]=\"modalMode === 'edit' ? $selectedKey() : title.value\"\n      [mode]=\"modalMode\"\n    >\n    </valtimo-auto-key-input>\n\n    <v-select\n      [invalid]=\"type.dirty && type.invalid\"\n      [dropUp]=\"false\"\n      formControlName=\"type\"\n      [items]=\"tabTypeSelectItems\"\n      titleTranslationKey=\"ikoManagement.tabTypeTitle\"\n      [appendInline]=\"false\"\n    ></v-select>\n\n    <valtimo-iko-management-properties\n      [propertiesFormGroup]=\"properties\"\n      [fields]=\"propertyFields$ | async\"\n      [prefillData]=\"properties?.value\"\n    />\n  </form>\n\n  <cds-modal-footer>\n    <button cdsButton=\"secondary\" (click)=\"closeModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button\n      [disabled]=\"form.invalid || form.disabled || !form.dirty\"\n      cdsButton=\"primary\"\n      (click)=\"addTab()\"\n    >\n      {{ 'interface.save' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".iko-tab-form{display:flex;flex-direction:column;gap:16px;width:100%}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i6.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i6.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i6.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i6.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i6.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i6.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i6.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i6.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2$2.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: ToggleModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: CarbonMultiInputModule }, { kind: "ngmodule", type: InputLabelModule }, { kind: "ngmodule", type: NumberModule }, { kind: "component", type: AutoKeyInputComponent, selector: "valtimo-auto-key-input", inputs: ["labelTranslationKey", "placeholderTranslationKey", "mode", "usedKeys", "sourceText"] }, { kind: "component", type: PropertiesFormComponent, selector: "valtimo-iko-management-properties", inputs: ["propertiesFormGroup", "fields", "prefillData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: IkoManagementTabDetailsModalComponent, isStandalone: true, selector: "valtimo-iko-management-tab-details-modal", inputs: { openModal: "openModal", usedKeys: "usedKeys", selectedTab: "selectedTab", modalMode: "modalMode" }, 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  (close)=\"closeModal()\"\n  *ngIf=\"{\n    title: (modalMode === 'add' ? 'ikoManagement.addTab' : 'ikoManagement.editTab') | translate,\n  } as state\"\n  [open]=\"$openModal()\"\n  [title]=\"state.title\"\n  valtimoCdsModal\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{ state.title }}\n    </h3>\n  </cds-modal-header>\n\n  <form cdsModalContent [cdsLayer]=\"1\" [formGroup]=\"form\" class=\"iko-tab-form\">\n    <cds-label>\n      {{ 'ikoManagement.tabTitle' | translate }}\n\n      <input\n        [invalid]=\"title.dirty && title.invalid\"\n        formControlName=\"title\"\n        cdsText\n        placeholder=\"{{ 'ikoManagement.tabTitlePlaceholder' | translate }}\"\n      />\n    </cds-label>\n\n    <valtimo-auto-key-input\n      formControlName=\"key\"\n      labelTranslationKey=\"ikoManagement.keyTitle\"\n      placeholderTranslationKey=\"ikoManagement.tabKeyPlaceholder\"\n      [usedKeys]=\"usedKeys\"\n      [sourceText]=\"modalMode === 'edit' ? $selectedKey() : title.value\"\n      [mode]=\"modalMode\"\n    >\n    </valtimo-auto-key-input>\n\n    <v-select\n      [invalid]=\"type.dirty && type.invalid\"\n      [dropUp]=\"false\"\n      formControlName=\"type\"\n      [items]=\"tabTypeSelectItems\"\n      titleTranslationKey=\"ikoManagement.tabTypeTitle\"\n      [appendInline]=\"false\"\n    ></v-select>\n\n    <v-select\n      [dropUp]=\"false\"\n      formControlName=\"widgetLayout\"\n      [items]=\"widgetLayoutSelectItems\"\n      titleTranslationKey=\"widgetLayout.label\"\n      [appendInline]=\"false\"\n    ></v-select>\n\n    <valtimo-widget-layout-info></valtimo-widget-layout-info>\n\n    <valtimo-iko-management-properties\n      [propertiesFormGroup]=\"properties\"\n      [fields]=\"propertyFields$ | async\"\n      [prefillData]=\"properties?.value\"\n    />\n  </form>\n\n  <cds-modal-footer>\n    <button cdsButton=\"secondary\" (click)=\"closeModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button\n      [disabled]=\"form.invalid || form.disabled || !form.dirty\"\n      cdsButton=\"primary\"\n      (click)=\"addTab()\"\n    >\n      {{ 'interface.save' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".iko-tab-form{display:flex;flex-direction:column;gap:16px;width:100%}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i6.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i6.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i6.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i6.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i6.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i6.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i6.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i6.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2$2.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: ToggleModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: CarbonMultiInputModule }, { kind: "ngmodule", type: InputLabelModule }, { kind: "ngmodule", type: NumberModule }, { kind: "component", type: AutoKeyInputComponent, selector: "valtimo-auto-key-input", inputs: ["labelTranslationKey", "placeholderTranslationKey", "mode", "usedKeys", "sourceText"] }, { kind: "component", type: PropertiesFormComponent, selector: "valtimo-iko-management-properties", inputs: ["propertiesFormGroup", "fields", "prefillData"] }, { kind: "component", type: WidgetLayoutInfoComponent, selector: "valtimo-widget-layout-info" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IkoManagementTabDetailsModalComponent, decorators: [{
             type: Component,
@@ -3549,7 +3566,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         NumberModule,
                         AutoKeyInputComponent,
                         PropertiesFormComponent,
-                    ], 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  (close)=\"closeModal()\"\n  *ngIf=\"{\n    title: (modalMode === 'add' ? 'ikoManagement.addTab' : 'ikoManagement.editTab') | translate,\n  } as state\"\n  [open]=\"$openModal()\"\n  [title]=\"state.title\"\n  valtimoCdsModal\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{ state.title }}\n    </h3>\n  </cds-modal-header>\n\n  <form cdsModalContent [cdsLayer]=\"1\" [formGroup]=\"form\" class=\"iko-tab-form\">\n    <cds-label>\n      {{ 'ikoManagement.tabTitle' | translate }}\n\n      <input\n        [invalid]=\"title.dirty && title.invalid\"\n        formControlName=\"title\"\n        cdsText\n        placeholder=\"{{ 'ikoManagement.tabTitlePlaceholder' | translate }}\"\n      />\n    </cds-label>\n\n    <valtimo-auto-key-input\n      formControlName=\"key\"\n      labelTranslationKey=\"ikoManagement.keyTitle\"\n      placeholderTranslationKey=\"ikoManagement.tabKeyPlaceholder\"\n      [usedKeys]=\"usedKeys\"\n      [sourceText]=\"modalMode === 'edit' ? $selectedKey() : title.value\"\n      [mode]=\"modalMode\"\n    >\n    </valtimo-auto-key-input>\n\n    <v-select\n      [invalid]=\"type.dirty && type.invalid\"\n      [dropUp]=\"false\"\n      formControlName=\"type\"\n      [items]=\"tabTypeSelectItems\"\n      titleTranslationKey=\"ikoManagement.tabTypeTitle\"\n      [appendInline]=\"false\"\n    ></v-select>\n\n    <valtimo-iko-management-properties\n      [propertiesFormGroup]=\"properties\"\n      [fields]=\"propertyFields$ | async\"\n      [prefillData]=\"properties?.value\"\n    />\n  </form>\n\n  <cds-modal-footer>\n    <button cdsButton=\"secondary\" (click)=\"closeModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button\n      [disabled]=\"form.invalid || form.disabled || !form.dirty\"\n      cdsButton=\"primary\"\n      (click)=\"addTab()\"\n    >\n      {{ 'interface.save' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".iko-tab-form{display:flex;flex-direction:column;gap:16px;width:100%}\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"] }]
+                        WidgetLayoutInfoComponent,
+                    ], 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  (close)=\"closeModal()\"\n  *ngIf=\"{\n    title: (modalMode === 'add' ? 'ikoManagement.addTab' : 'ikoManagement.editTab') | translate,\n  } as state\"\n  [open]=\"$openModal()\"\n  [title]=\"state.title\"\n  valtimoCdsModal\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{ state.title }}\n    </h3>\n  </cds-modal-header>\n\n  <form cdsModalContent [cdsLayer]=\"1\" [formGroup]=\"form\" class=\"iko-tab-form\">\n    <cds-label>\n      {{ 'ikoManagement.tabTitle' | translate }}\n\n      <input\n        [invalid]=\"title.dirty && title.invalid\"\n        formControlName=\"title\"\n        cdsText\n        placeholder=\"{{ 'ikoManagement.tabTitlePlaceholder' | translate }}\"\n      />\n    </cds-label>\n\n    <valtimo-auto-key-input\n      formControlName=\"key\"\n      labelTranslationKey=\"ikoManagement.keyTitle\"\n      placeholderTranslationKey=\"ikoManagement.tabKeyPlaceholder\"\n      [usedKeys]=\"usedKeys\"\n      [sourceText]=\"modalMode === 'edit' ? $selectedKey() : title.value\"\n      [mode]=\"modalMode\"\n    >\n    </valtimo-auto-key-input>\n\n    <v-select\n      [invalid]=\"type.dirty && type.invalid\"\n      [dropUp]=\"false\"\n      formControlName=\"type\"\n      [items]=\"tabTypeSelectItems\"\n      titleTranslationKey=\"ikoManagement.tabTypeTitle\"\n      [appendInline]=\"false\"\n    ></v-select>\n\n    <v-select\n      [dropUp]=\"false\"\n      formControlName=\"widgetLayout\"\n      [items]=\"widgetLayoutSelectItems\"\n      titleTranslationKey=\"widgetLayout.label\"\n      [appendInline]=\"false\"\n    ></v-select>\n\n    <valtimo-widget-layout-info></valtimo-widget-layout-info>\n\n    <valtimo-iko-management-properties\n      [propertiesFormGroup]=\"properties\"\n      [fields]=\"propertyFields$ | async\"\n      [prefillData]=\"properties?.value\"\n    />\n  </form>\n\n  <cds-modal-footer>\n    <button cdsButton=\"secondary\" (click)=\"closeModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button\n      [disabled]=\"form.invalid || form.disabled || !form.dirty\"\n      cdsButton=\"primary\"\n      (click)=\"addTab()\"\n    >\n      {{ 'interface.save' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".iko-tab-form{display:flex;flex-direction:column;gap:16px;width:100%}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: IkoManagementApiService }, { type: i1$2.FormBuilder }, { type: i3.ActivatedRoute }], propDecorators: { openModal: [{
                 type: Input
             }], usedKeys: [{