@valtimo/layout 13.7.0 → 13.8.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.
- package/fesm2022/valtimo-layout.mjs +37 -13
- package/fesm2022/valtimo-layout.mjs.map +1 -1
- package/lib/components/widget-custom/widget-custom.component.d.ts.map +1 -1
- package/lib/components/widget-management/management-content/custom/widget-management-custom.component.d.ts +5 -2
- package/lib/components/widget-management/management-content/custom/widget-management-custom.component.d.ts.map +1 -1
- package/lib/models/widget-content.model.d.ts +3 -0
- package/lib/models/widget-content.model.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1543,6 +1543,9 @@ class WidgetCustomComponent {
|
|
|
1543
1543
|
return;
|
|
1544
1544
|
}
|
|
1545
1545
|
const componentRef = this._customWidgetContainerRef.createComponent(customComponent);
|
|
1546
|
+
Object.entries(widgetConfig.properties.componentValue).forEach(([key, value]) => {
|
|
1547
|
+
componentRef.setInput(key, value);
|
|
1548
|
+
});
|
|
1546
1549
|
componentRef.changeDetectorRef.detectChanges();
|
|
1547
1550
|
this.cdr.detectChanges();
|
|
1548
1551
|
}));
|
|
@@ -2059,7 +2062,7 @@ class WidgetManagementProcessSelectorComponent {
|
|
|
2059
2062
|
nameFormControl.enable();
|
|
2060
2063
|
}
|
|
2061
2064
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementProcessSelectorComponent, deps: [{ token: i1.CdsThemeService }, { token: i2$2.DocumentService }, { token: i1$3.FormBuilder }, { token: WidgetWizardService }, { token: WIDGET_MANAGEMENT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2062
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetManagementProcessSelectorComponent, isStandalone: true, selector: "valtimo-widget-management-process-selector", 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\n [attr.data-carbon-theme]=\"theme$ | async\"\n [formGroup]=\"formGroup\"\n class=\"valtimo-widget-management-process-selector\"\n>\n <cds-combo-box\n class=\"test\"\n [label]=\"'widgetTabManagement.processes.
|
|
2065
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetManagementProcessSelectorComponent, isStandalone: true, selector: "valtimo-widget-management-process-selector", 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\n [attr.data-carbon-theme]=\"theme$ | async\"\n [formGroup]=\"formGroup\"\n class=\"valtimo-widget-management-process-selector\"\n>\n <cds-combo-box\n class=\"test\"\n [label]=\"'widgetTabManagement.processes.selectorLabel' | translate\"\n [items]=\"(processDefinitionItems$ | async) || []\"\n [dropUp]=\"false\"\n [placeholder]=\"'widgetTabManagement.processes.selectorPlaceholder' | translate\"\n formControlName=\"processDefinition\"\n (selected)=\"onProcessSelected($event)\"\n >\n <cds-dropdown-list></cds-dropdown-list>\n </cds-combo-box>\n\n <cds-text-label>\n {{ 'widgetTabManagement.processes.buttonTextLabel' | translate }}\n\n <input\n cdsText\n type=\"text\"\n formControlName=\"name\"\n [placeholder]=\"'widgetTabManagement.processes.buttonTextPlaceholder' | translate\"\n />\n </cds-text-label>\n</form>\n", styles: [".valtimo-widget-management-process-selector{display:grid;grid-template-columns:1fr 1fr;align-items:flex-end;gap:16px}.valtimo-widget-management-process-selector ::ng-deep .cds--text-input,.valtimo-widget-management-process-selector ::ng-deep .cds--list-box{background:var(--cds-layer-01)!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ComboBoxModule }, { kind: "component", type: i3.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: LayerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2063
2066
|
}
|
|
2064
2067
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementProcessSelectorComponent, decorators: [{
|
|
2065
2068
|
type: Component,
|
|
@@ -2070,7 +2073,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2070
2073
|
ReactiveFormsModule,
|
|
2071
2074
|
ComboBoxModule,
|
|
2072
2075
|
LayerModule,
|
|
2073
|
-
], 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\n [attr.data-carbon-theme]=\"theme$ | async\"\n [formGroup]=\"formGroup\"\n class=\"valtimo-widget-management-process-selector\"\n>\n <cds-combo-box\n class=\"test\"\n [label]=\"'widgetTabManagement.processes.
|
|
2076
|
+
], 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\n [attr.data-carbon-theme]=\"theme$ | async\"\n [formGroup]=\"formGroup\"\n class=\"valtimo-widget-management-process-selector\"\n>\n <cds-combo-box\n class=\"test\"\n [label]=\"'widgetTabManagement.processes.selectorLabel' | translate\"\n [items]=\"(processDefinitionItems$ | async) || []\"\n [dropUp]=\"false\"\n [placeholder]=\"'widgetTabManagement.processes.selectorPlaceholder' | translate\"\n formControlName=\"processDefinition\"\n (selected)=\"onProcessSelected($event)\"\n >\n <cds-dropdown-list></cds-dropdown-list>\n </cds-combo-box>\n\n <cds-text-label>\n {{ 'widgetTabManagement.processes.buttonTextLabel' | translate }}\n\n <input\n cdsText\n type=\"text\"\n formControlName=\"name\"\n [placeholder]=\"'widgetTabManagement.processes.buttonTextPlaceholder' | translate\"\n />\n </cds-text-label>\n</form>\n", styles: [".valtimo-widget-management-process-selector{display:grid;grid-template-columns:1fr 1fr;align-items:flex-end;gap:16px}.valtimo-widget-management-process-selector ::ng-deep .cds--text-input,.valtimo-widget-management-process-selector ::ng-deep .cds--list-box{background:var(--cds-layer-01)!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
|
|
2074
2077
|
}], ctorParameters: () => [{ type: i1.CdsThemeService }, { type: i2$2.DocumentService }, { type: i1$3.FormBuilder }, { type: WidgetWizardService }, { type: undefined, decorators: [{
|
|
2075
2078
|
type: Inject,
|
|
2076
2079
|
args: [WIDGET_MANAGEMENT_SERVICE]
|
|
@@ -4122,23 +4125,30 @@ class WidgetManagementCustomComponent {
|
|
|
4122
4125
|
widgetIcon: this.fb.control(this.widgetWizardService.$widgetIcon()),
|
|
4123
4126
|
});
|
|
4124
4127
|
this.theme$ = this.cdsThemeService.currentTheme$.pipe(map((theme) => theme === CurrentCarbonTheme.G10 ? CARBON_THEME.WHITE : CARBON_THEME.G90));
|
|
4125
|
-
this
|
|
4128
|
+
this.$defaultComponentValues = signal([]);
|
|
4129
|
+
this._$selectedCustomComponentKey = signal(null);
|
|
4126
4130
|
this._customWidgetConfig$ = new BehaviorSubject({});
|
|
4127
4131
|
this.componentListItems$ = combineLatest([
|
|
4128
4132
|
this._customWidgetConfig$,
|
|
4129
|
-
this.
|
|
4133
|
+
toObservable(this._$selectedCustomComponentKey),
|
|
4130
4134
|
]).pipe(filter$1(([config]) => !!config), map(([config, selectedKey]) => Object.keys(config).reduce((acc, curr) => [...acc, { content: curr, selected: curr === selectedKey }], [])));
|
|
4131
4135
|
this._subscriptions = new Subscription();
|
|
4136
|
+
this._$componentValueValid = signal(false);
|
|
4132
4137
|
if (customWidgetConfig)
|
|
4133
4138
|
this._customWidgetConfig$.next(customWidgetConfig);
|
|
4139
|
+
effect(() => this.widgetWizardService.$widgetContentValid.set(!!this._$selectedCustomComponentKey() && this._$componentValueValid()));
|
|
4134
4140
|
}
|
|
4135
4141
|
componentDropDownChange(event) {
|
|
4136
4142
|
const componentKey = event?.item?.content;
|
|
4137
4143
|
if (!componentKey)
|
|
4138
4144
|
return;
|
|
4139
|
-
this.
|
|
4140
|
-
this.widgetWizardService.$widgetContent.
|
|
4141
|
-
|
|
4145
|
+
this._$selectedCustomComponentKey.set(componentKey);
|
|
4146
|
+
this.widgetWizardService.$widgetContent.update((content) => !content
|
|
4147
|
+
? { componentKey, componentValue: {} }
|
|
4148
|
+
: {
|
|
4149
|
+
...content,
|
|
4150
|
+
componentKey,
|
|
4151
|
+
});
|
|
4142
4152
|
}
|
|
4143
4153
|
ngOnInit() {
|
|
4144
4154
|
this.openTitleSubscription();
|
|
@@ -4148,6 +4158,18 @@ class WidgetManagementCustomComponent {
|
|
|
4148
4158
|
ngOnDestroy() {
|
|
4149
4159
|
this._subscriptions.unsubscribe();
|
|
4150
4160
|
}
|
|
4161
|
+
onKeyValueChange(changeEvent) {
|
|
4162
|
+
this.widgetWizardService.$widgetContent.update((content) => {
|
|
4163
|
+
this._$componentValueValid.set(!changeEvent.some(value => !value.key || !value.value) || changeEvent.length === 0);
|
|
4164
|
+
const componentValue = changeEvent.reduce((acc, curr) => ({
|
|
4165
|
+
...acc,
|
|
4166
|
+
...(!curr.key || !curr.value ? {} : { [curr.key]: curr.value }),
|
|
4167
|
+
}), {});
|
|
4168
|
+
if (!content)
|
|
4169
|
+
return { componentKey: '', componentValue };
|
|
4170
|
+
return { ...content, componentValue };
|
|
4171
|
+
});
|
|
4172
|
+
}
|
|
4151
4173
|
openTitleSubscription() {
|
|
4152
4174
|
this._subscriptions.add(this.widgetTitle?.valueChanges.subscribe(title => {
|
|
4153
4175
|
this.widgetWizardService.$widgetTitle.set(title);
|
|
@@ -4159,15 +4181,16 @@ class WidgetManagementCustomComponent {
|
|
|
4159
4181
|
}));
|
|
4160
4182
|
}
|
|
4161
4183
|
prefill() {
|
|
4162
|
-
const componentKey = this.widgetWizardService.$widgetContent()
|
|
4163
|
-
|
|
4164
|
-
|
|
4184
|
+
const { componentKey, componentValue } = this.widgetWizardService.$widgetContent();
|
|
4185
|
+
if ((!componentKey && !componentValue) ||
|
|
4186
|
+
Object.keys(this.customWidgetConfig || {}).length === 0)
|
|
4165
4187
|
return;
|
|
4166
|
-
this.
|
|
4188
|
+
this._$selectedCustomComponentKey.set(componentKey);
|
|
4189
|
+
this.$defaultComponentValues.set(Object.entries(componentValue).map(([key, value]) => ({ key, value })));
|
|
4167
4190
|
this.widgetWizardService.$widgetContentValid.set(true);
|
|
4168
4191
|
}
|
|
4169
4192
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementCustomComponent, deps: [{ token: CUSTOM_WIDGET_TOKEN, optional: true }, { token: i1.CdsThemeService }, { token: i1$3.FormBuilder }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4170
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetManagementCustomComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<form\n class=\"valtimo-widget-management-custom\"\n [formGroup]=\"form\"\n [attr.data-carbon-theme]=\"theme$ | async\"\n>\n <div class=\"valtimo-widget-management-custom__title-container\">\n <cds-text-label\n class=\"valtimo-widget-management-fields__input valtimo-widget-management-custom__title-input\"\n >\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"widgetTitle\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-mdi-icon-selector\n [cdsLayer]=\"0\"\n formControlName=\"widgetIcon\"\n ></valtimo-mdi-icon-selector>\n </div>\n\n <ng-content></ng-content>\n\n <cds-label class=\"dropdown-label\">\n {{ 'widgetTabManagement.content.custom.selectComponent' | translate }}\n\n <cds-dropdown\n *ngIf=\"componentListItems$ | async as componentListItems\"\n [appendInline]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.custom.placeholder' | translate\"\n [disabled]=\"componentListItems.length === 0\"\n (selected)=\"componentDropDownChange($event)\"\n >\n <cds-dropdown-list [items]=\"componentListItems\"> </cds-dropdown-list>\n </cds-dropdown>\n </cds-label>\n</form>\n", styles: [".valtimo-widget-management-custom{display:flex;flex-direction:column;gap:16px;padding:16px}.valtimo-widget-management-custom ::ng-deep
|
|
4193
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetManagementCustomComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<form\n class=\"valtimo-widget-management-custom\"\n [formGroup]=\"form\"\n [attr.data-carbon-theme]=\"theme$ | async\"\n>\n <div class=\"valtimo-widget-management-custom__title-container\">\n <cds-text-label\n class=\"valtimo-widget-management-fields__input valtimo-widget-management-custom__title-input\"\n >\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"widgetTitle\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-mdi-icon-selector\n [cdsLayer]=\"0\"\n formControlName=\"widgetIcon\"\n ></valtimo-mdi-icon-selector>\n </div>\n\n <ng-content></ng-content>\n\n <cds-label class=\"dropdown-label\">\n {{ 'widgetTabManagement.content.custom.selectComponent' | translate }}\n\n <cds-dropdown\n *ngIf=\"componentListItems$ | async as componentListItems\"\n [appendInline]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.custom.placeholder' | translate\"\n [disabled]=\"componentListItems.length === 0\"\n (selected)=\"componentDropDownChange($event)\"\n >\n <cds-dropdown-list [items]=\"componentListItems\"> </cds-dropdown-list>\n </cds-dropdown>\n </cds-label>\n\n <valtimo-carbon-multi-input\n type=\"keyValue\"\n [addRowText]=\"'widgetTabManagement.content.custom.addCustomKeyValue' | translate\"\n addButtonType=\"tertiary\"\n [defaultValues]=\"$defaultComponentValues()\"\n [keyColumnTitle]=\"'interface.key' | translate\"\n [valueColumnTitle]=\"'interface.value' | translate\"\n [fullWidth]=\"true\"\n [initialAmountOfRows]=\"0\"\n [minimumAmountOfRows]=\"0\"\n (valueChange)=\"onKeyValueChange($event)\"\n [keyColumnFlex]=\"1\"\n [valueColumnFlex]=\"1\"\n ></valtimo-carbon-multi-input>\n</form>\n", styles: [".valtimo-widget-management-custom{display:flex;flex-direction:column;gap:16px;padding:16px}.valtimo-widget-management-custom ::ng-deep>*:not(:last-child){padding:16px;background:var(--cds-layer-02)}.valtimo-widget-management-custom ::ng-deep .v-multi-input__row{padding:16px;background:var(--cds-layer-02)}.valtimo-widget-management-custom ::ng-deep .v-multi-input__row .cds--text-input{background:var(--cds-layer-01)}.valtimo-widget-management-custom ::ng-deep .dropdown-label label{display:flex;flex-direction:column;width:100%}.valtimo-widget-management-custom ::ng-deep .dropdown-label cds-dropdown{margin-top:8px}.valtimo-widget-management-custom__title-container{display:flex;gap:16px}.valtimo-widget-management-custom__title-input{max-width:300px}\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: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.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: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: CarbonMultiInputModule }, { kind: "component", type: i1.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["addRowText", "addButtonType", "addRowTranslationKey", "arbitraryAmountTitles", "arbitraryValueAmount", "defaultValues", "deleteRowText", "deleteRowTranslationKey", "disabled", "dropdownColumnTitle", "dropdownItems", "dropdownWidth", "fullWidth", "hideAddButton", "hideDeleteButton", "initialAmountOfRows", "keyColumnTitle", "margin", "maxRows", "minimumAmountOfRows", "name", "required", "title", "titleTranslationKey", "tooltip", "type", "valueColumnTitle", "valuePathSelectorCaseDefinitionKey", "valuePathSelectorPrefixes", "valuePathSelectorShowCaseDefinitionSelector", "valuePathSelectorNotation", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange", "allValuesValidEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4171
4194
|
}
|
|
4172
4195
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementCustomComponent, decorators: [{
|
|
4173
4196
|
type: Component,
|
|
@@ -4181,7 +4204,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
4181
4204
|
LayerModule,
|
|
4182
4205
|
MdiIconSelectorComponent,
|
|
4183
4206
|
InputLabelModule,
|
|
4184
|
-
|
|
4207
|
+
CarbonMultiInputModule,
|
|
4208
|
+
], 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\n class=\"valtimo-widget-management-custom\"\n [formGroup]=\"form\"\n [attr.data-carbon-theme]=\"theme$ | async\"\n>\n <div class=\"valtimo-widget-management-custom__title-container\">\n <cds-text-label\n class=\"valtimo-widget-management-fields__input valtimo-widget-management-custom__title-input\"\n >\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"widgetTitle\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-mdi-icon-selector\n [cdsLayer]=\"0\"\n formControlName=\"widgetIcon\"\n ></valtimo-mdi-icon-selector>\n </div>\n\n <ng-content></ng-content>\n\n <cds-label class=\"dropdown-label\">\n {{ 'widgetTabManagement.content.custom.selectComponent' | translate }}\n\n <cds-dropdown\n *ngIf=\"componentListItems$ | async as componentListItems\"\n [appendInline]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.custom.placeholder' | translate\"\n [disabled]=\"componentListItems.length === 0\"\n (selected)=\"componentDropDownChange($event)\"\n >\n <cds-dropdown-list [items]=\"componentListItems\"> </cds-dropdown-list>\n </cds-dropdown>\n </cds-label>\n\n <valtimo-carbon-multi-input\n type=\"keyValue\"\n [addRowText]=\"'widgetTabManagement.content.custom.addCustomKeyValue' | translate\"\n addButtonType=\"tertiary\"\n [defaultValues]=\"$defaultComponentValues()\"\n [keyColumnTitle]=\"'interface.key' | translate\"\n [valueColumnTitle]=\"'interface.value' | translate\"\n [fullWidth]=\"true\"\n [initialAmountOfRows]=\"0\"\n [minimumAmountOfRows]=\"0\"\n (valueChange)=\"onKeyValueChange($event)\"\n [keyColumnFlex]=\"1\"\n [valueColumnFlex]=\"1\"\n ></valtimo-carbon-multi-input>\n</form>\n", styles: [".valtimo-widget-management-custom{display:flex;flex-direction:column;gap:16px;padding:16px}.valtimo-widget-management-custom ::ng-deep>*:not(:last-child){padding:16px;background:var(--cds-layer-02)}.valtimo-widget-management-custom ::ng-deep .v-multi-input__row{padding:16px;background:var(--cds-layer-02)}.valtimo-widget-management-custom ::ng-deep .v-multi-input__row .cds--text-input{background:var(--cds-layer-01)}.valtimo-widget-management-custom ::ng-deep .dropdown-label label{display:flex;flex-direction:column;width:100%}.valtimo-widget-management-custom ::ng-deep .dropdown-label cds-dropdown{margin-top:8px}.valtimo-widget-management-custom__title-container{display:flex;gap:16px}.valtimo-widget-management-custom__title-input{max-width:300px}\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"] }]
|
|
4185
4209
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4186
4210
|
type: Optional
|
|
4187
4211
|
}, {
|