diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
index 51d4ec22b1..3e1ca011fd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
@@ -138,6 +138,28 @@
{{ getErrorMessageText(key.settings, 'required') }}
+
+
+ {{key.label}}
+
+
+
+
+
+
+ {{ getCustomTranslationText(option.label ? option.label : option.value) }}
+
+
+
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss
index 4c8ffea030..b5e83a4925 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss
@@ -75,7 +75,7 @@
:host ::ng-deep {
.tb-multiple-input {
- .mat-mdc-slide-toggle, .mat-mdc-checkbox {
+ .mat-mdc-slide-toggle, .mat-mdc-checkbox, .mat-mdc-radio-button {
.mdc-form-field {
width: 100%;
& > label {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
index 7a80f4904a..94b33eb9d0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
@@ -54,7 +54,7 @@ type FieldAlignment = 'row' | 'column';
type MultipleInputWidgetDataKeyType = 'server' | 'shared' | 'timeseries';
export type MultipleInputWidgetDataKeyValueType = 'string' | 'double' | 'integer' |
'JSON' | 'booleanCheckbox' | 'booleanSwitch' |
- 'dateTime' | 'date' | 'time' | 'select' | 'color';
+ 'dateTime' | 'date' | 'time' | 'select' | 'radio' | 'color';
export type MultipleInputWidgetDataKeyEditableType = 'editable' | 'disabled' | 'readonly';
type ConvertGetValueFunction = (value: any, ctx: WidgetContext) => any;
@@ -86,6 +86,9 @@ interface MultipleInputWidgetDataKeySettings {
dataKeyValueType: MultipleInputWidgetDataKeyValueType;
slideToggleLabelPosition?: 'after' | 'before';
selectOptions: MultipleInputWidgetSelectOption[];
+ radioColor: string;
+ radioColumns: number;
+ radioLabelPosition?: 'after' | 'before';
required: boolean;
isEditable: MultipleInputWidgetDataKeyEditableType;
disabledOnDataKey: string;
@@ -300,7 +303,7 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
// For backward compatibility
- if (dataKey.settings.dataKeyValueType === 'select') {
+ if (dataKey.settings.dataKeyValueType === 'select' || dataKey.settings.dataKeyValueType === 'radio') {
dataKey.settings.selectOptions.forEach((option) => {
if (option.value.toLowerCase() === 'null') {
option.value = null;
@@ -444,6 +447,7 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
}
break;
case 'select':
+ case 'radio':
value = keyValue !== null ? keyValue.toString() : null;
break;
case 'JSON':
@@ -566,6 +570,12 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
return this.getTranslatedErrorText(errorMessage, defaultMessage, messageValues);
}
+ public radioButtonSelectedColor(radioColor: string) {
+ if (isDefinedAndNotNull(radioColor)) {
+ return `--mdc-radio-selected-icon-color: ${radioColor}; --mdc-radio-selected-focus-icon-color: ${radioColor}; --mdc-radio-selected-hover-icon-color: ${radioColor}; --mdc-radio-selected-pressed-icon-color: ${radioColor}; --mat-radio-checked-ripple-color: ${radioColor};`
+ }
+ }
+
public getTranslatedErrorText(errorMessage: string, defaultMessage: string, messageValues?: object): string {
let messageText;
if (errorMessage && errorMessage.length) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
index 93c53c27ec..37a4dee4d5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
@@ -21,108 +21,113 @@
+