tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: Improve multiple attributes input widget.

pull/9217/head
Igor Kulikov 3 years ago
parent
ac6717b99f
commit
244f8239ba
11 changed files with 370 additions and 279 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 13
      ui-ngx/src/app/core/translate/missing-translate-handler.ts
  2. 330
      ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
  3. 73
      ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss
  4. 66
      ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
  5. 31
      ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
  6. 18
      ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.ts
  7. 12
      ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html
  8. 12
      ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.ts
  9. 2
      ui-ngx/src/app/shared/components/color-input.component.html
  10. 83
      ui-ngx/src/app/shared/components/color-input.component.ts
  11. 9
      ui-ngx/src/assets/locale/locale.constant-en_US.json

13
ui-ngx/src/app/core/translate/missing-translate-handler.ts
View File

@ -21,7 +21,18 @@ export class TbMissingTranslationHandler implements MissingTranslationHandler {
handle(params: MissingTranslationHandlerParams) { handle(params: MissingTranslationHandlerParams) {
if (params.key && !params.key.startsWith(customTranslationsPrefix)) { if (params.key && !params.key.startsWith(customTranslationsPrefix)) {
console.warn('Translation for \'' + params.key + '\' doesn\'t exist'); console.warn('Translation for \'' + params.key + '\' doesn\'t exist');
params.translateService.set(params.key, params.key); let translations: any;
const parts = params.key.split('.');
for (let i=parts.length-1; i>=0; i--) {
const newTranslations = {};
if (i === parts.length-1) {
newTranslations[parts[i]] = params.key;
} else {
newTranslations[parts[i]] = translations;
}
translations = newTranslations;
}
params.translateService.setTranslation(params.translateService.currentLang, translations, true);
} }
} }
} }

330
ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
View File

@ -23,174 +23,164 @@
<fieldset *ngFor="let source of sources" [ngClass]="{'fields-group': settings.showGroupTitle}"> <fieldset *ngFor="let source of sources" [ngClass]="{'fields-group': settings.showGroupTitle}">
<legend class="group-title" *ngIf="settings.showGroupTitle">{{ getGroupTitle(source.datasource) }} <legend class="group-title" *ngIf="settings.showGroupTitle">{{ getGroupTitle(source.datasource) }}
</legend> </legend>
<div class="tb-multiple-input-layout layout-wrap" <div class="tb-multiple-input-layout"
[ngClass]="{'vertical-alignment': isVerticalAlignment || changeAlignment}"> [style]="{'grid-template-columns': 'repeat(' + columns + ', 1fr)', 'column-gap': settings.columnGap + 'px', 'row-gap': settings.rowGap + 'px'}">
<div *ngFor="let key of visibleKeys(source)" <ng-container *ngFor="let key of visibleKeys(source)">
[ngStyle]="{width: (isVerticalAlignment || changeAlignment) ? '100%' : inputWidthSettings}"> <mat-form-field *ngIf="key.settings.dataKeyValueType === 'string'"
<div class="input-field" *ngIf="key.settings.dataKeyValueType === 'string'"> [appearance]="key.settings.appearance" [subscriptSizing]="key.settings.subscriptSizing">
<mat-form-field class="mat-block" appearance="outline" subscriptSizing="dynamic"> <mat-label>{{key.label}}</mat-label>
<mat-label>{{key.label}}</mat-label> <input matInput
<input matInput formControlName="{{key.formId}}"
formControlName="{{key.formId}}" [required]="key.settings.required"
[required]="key.settings.required" [readonly]="key.settings.isEditable === 'readonly'"
[readonly]="key.settings.isEditable === 'readonly'" type="text"
type="text" (focus)="key.isFocused = true; focusInputElement($event)"
(focus)="key.isFocused = true; focusInputElement($event)" (blur)="key.isFocused = false; inputChanged(source, key)">
(blur)="key.isFocused = false; inputChanged(source, key)"> <ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon" matIconPrefix>
<ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon" matPrefix> <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
<tb-icon *ngIf="!key.settings.safeCustomIcon; else customToggleIcon">{{key.settings.icon}}</tb-icon> </ng-container>
<ng-template #customToggleIcon> <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
<img class="mat-icon" [src]="key.settings.safeCustomIcon" alt="icon"> {{ getErrorMessageText(key.settings, 'required') }}
</ng-template> </mat-error>
</ng-container> </mat-form-field>
<mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')"> <mat-form-field *ngIf="['double', 'integer'].includes(key.settings.dataKeyValueType)"
{{ getErrorMessageText(key.settings, 'required') }} [appearance]="key.settings.appearance" [subscriptSizing]="key.settings.subscriptSizing">
</mat-error> <mat-label>{{key.label}}</mat-label>
</mat-form-field> <input matInput
</div> formControlName="{{key.formId}}"
<div class="input-field" *ngIf="key.settings.dataKeyValueType === 'double' || [required]="key.settings.required"
key.settings.dataKeyValueType === 'integer'"> [readonly]="key.settings.isEditable === 'readonly'"
<mat-form-field class="mat-block" appearance="outline" subscriptSizing="dynamic"> type="number"
<mat-label>{{key.label}}</mat-label> step="{{key.settings.step}}"
<input matInput min="{{key.settings.minValue}}"
formControlName="{{key.formId}}" max="{{key.settings.maxValue}}"
[required]="key.settings.required" (focus)="key.isFocused = true; focusInputElement($event)"
[readonly]="key.settings.isEditable === 'readonly'" (blur)="key.isFocused = false; inputChanged(source, key)">
type="number" <ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon" matIconPrefix>
step="{{key.settings.step}}" <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
min="{{key.settings.minValue}}" </ng-container>
max="{{key.settings.maxValue}}" <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
(focus)="key.isFocused = true; focusInputElement($event)" {{ getErrorMessageText(key.settings,'required') }}
(blur)="key.isFocused = false; inputChanged(source, key)"> </mat-error>
<ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon" matPrefix> <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('min')">
<tb-icon *ngIf="!key.settings.safeCustomIcon; else customToggleIcon">{{key.settings.icon}}</tb-icon> {{ getErrorMessageText(key.settings,'min') }}
<ng-template #customToggleIcon> </mat-error>
<img class="mat-icon" [src]="key.settings.safeCustomIcon" alt="icon"> <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('max')">
</ng-template> {{ getErrorMessageText(key.settings,'max') }}
</ng-container> </mat-error>
<mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')"> </mat-form-field>
{{ getErrorMessageText(key.settings,'required') }} <mat-form-field *ngIf="key.settings.dataKeyValueType === 'JSON'"
</mat-error> [appearance]="key.settings.appearance" [subscriptSizing]="key.settings.subscriptSizing">
<mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('min')"> <mat-label>{{key.label}}</mat-label>
{{ getErrorMessageText(key.settings,'min') }} <input
</mat-error> matInput
<mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('max')"> type="text"
{{ getErrorMessageText(key.settings,'max') }} formControlName="{{key.formId}}"
</mat-error> tb-json-to-string
</mat-form-field> [readonly]="key.settings.isEditable === 'readonly'"
</div> [required]="key.settings.required"
<div class="input-field mat-block" *ngIf="key.settings.dataKeyValueType === 'booleanCheckbox'"> (focus)="key.isFocused = true; focusInputElement($event)"
<mat-checkbox formControlName="{{key.formId}}" (blur)="key.isFocused = false; inputChanged(source, key)"
(change)="inputChanged(source, key)"> />
<span class="label-wrapper">{{key.label}}</span> <ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon" matIconPrefix>
</mat-checkbox> <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
</div> </ng-container>
<div class="input-field" *ngIf="key.settings.dataKeyValueType === 'JSON'"> <button [disabled]="key.settings.isEditable === 'disabled' || key.settings.isEditable === 'readonly'"
<mat-form-field class="mat-block" appearance="outline" subscriptSizing="dynamic"> type="button"
<mat-label>{{key.label}}</mat-label> matSuffix mat-icon-button
<input (click)="openEditJSONDialog($event, key, source)">
matInput <mat-icon>open_in_new</mat-icon>
type="text" </button>
formControlName="{{key.formId}}" <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
tb-json-to-string {{ getErrorMessageText(key.settings,'required') }}
[readonly]="key.settings.isEditable === 'readonly'" </mat-error>
[required]="key.settings.required" <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('invalidJSON')">
(focus)="key.isFocused = true; focusInputElement($event)" {{ getErrorMessageText(key.settings,'invalidJSON') | translate }}
(blur)="key.isFocused = false; inputChanged(source, key)" </mat-error>
/> </mat-form-field>
<ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon" matPrefix> <mat-form-field *ngIf="['dateTime','date', 'time'].includes(key.settings.dataKeyValueType)"
<tb-icon *ngIf="!key.settings.safeCustomIcon; else customToggleIcon">{{key.settings.icon}}</tb-icon> [appearance]="key.settings.appearance" [subscriptSizing]="key.settings.subscriptSizing">
<ng-template #customToggleIcon> <mat-label>{{key.label}}</mat-label>
<img class="mat-icon" [src]="key.settings.safeCustomIcon" alt="icon"> <mat-datetimepicker-toggle [for]="datePicker" matPrefix></mat-datetimepicker-toggle>
</ng-template> <mat-datetimepicker #datePicker type="{{datePickerType(key.settings.dataKeyValueType)}}"
</ng-container> openOnFocus="true"></mat-datetimepicker>
<button [disabled]="key.settings.isEditable === 'disabled' || key.settings.isEditable === 'readonly'" <input matInput formControlName="{{key.formId}}"
type="button" [required]="key.settings.required"
matSuffix mat-icon-button [readonly]="key.settings.isEditable === 'readonly'"
(click)="openEditJSONDialog($event, key, source)"> [matDatetimepicker]="datePicker"
<mat-icon>open_in_new</mat-icon> (focus)="key.isFocused = true;"
</button> (blur)="key.isFocused = false;"
<mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')"> (dateChange)="inputChanged(source, key)">
{{ getErrorMessageText(key.settings,'required') }} <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
</mat-error> {{ getErrorMessageText(key.settings, 'required') }}
<mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('invalidJSON')"> </mat-error>
{{ getErrorMessageText(key.settings,'invalidJSON') | translate }} <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('matDatepickerParse')">
</mat-error> {{ getErrorMessageText(key.settings, 'invalidDate') }}
</mat-form-field> </mat-error>
</div> </mat-form-field>
<div class="input-field mat-block" *ngIf="key.settings.dataKeyValueType === 'booleanSwitch'"> <mat-form-field *ngIf="key.settings.dataKeyValueType === 'select'"
<mat-slide-toggle formControlName="{{key.formId}}" [appearance]="key.settings.appearance" [subscriptSizing]="key.settings.subscriptSizing">
[labelPosition]="key.settings.slideToggleLabelPosition" <mat-label>{{key.label}}</mat-label>
(change)="inputChanged(source, key)"> <mat-select formControlName="{{key.formId}}"
<ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon"> [required]="key.settings.required"
<tb-icon *ngIf="!key.settings.safeCustomIcon; else customToggleIcon">{{key.settings.icon}}</tb-icon> (focus)="key.isFocused = true;"
<ng-template #customToggleIcon> (selectionChange)="key.isFocused = false; inputChanged(source, key)">
<img class="mat-icon" [src]="key.settings.safeCustomIcon" alt="icon"> <mat-option *ngFor="let option of key.settings.selectOptions"
</ng-template> [value]="option.value"
</ng-container> [disabled]="key.settings.isEditable === 'readonly'">
<span class="label-wrapper">{{key.label}}</span> {{ getCustomTranslationText(option.label ? option.label : option.value) }}
</mat-slide-toggle> </mat-option>
</div> </mat-select>
<div class="input-field mat-block date-time-input" *ngIf="(key.settings.dataKeyValueType === 'dateTime') || <ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon" matIconPrefix>
(key.settings.dataKeyValueType === 'date') || <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
(key.settings.dataKeyValueType === 'time')" fxLayout="column"> </ng-container>
<mat-form-field appearance="outline" subscriptSizing="dynamic"> <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
<mat-label>{{key.label}}</mat-label> {{ getErrorMessageText(key.settings, 'required') }}
<mat-datetimepicker-toggle [for]="datePicker" matPrefix></mat-datetimepicker-toggle> </mat-error>
<mat-datetimepicker #datePicker type="{{datePickerType(key.settings.dataKeyValueType)}}" </mat-form-field>
openOnFocus="true"></mat-datetimepicker> <mat-form-field *ngIf="key.settings.dataKeyValueType === 'color'"
<input matInput formControlName="{{key.formId}}" class="color-input" [appearance]="key.settings.appearance" [subscriptSizing]="key.settings.subscriptSizing"
[required]="key.settings.required" (click)="colorInput.openColorPickerPopup($event)">
[readonly]="key.settings.isEditable === 'readonly'" <mat-label>{{key.label}}</mat-label>
[matDatetimepicker]="datePicker" <input matInput
(focus)="key.isFocused = true;" formControlName="{{key.formId}}"
(blur)="key.isFocused = false;" [required]="key.settings.required"
(dateChange)="inputChanged(source, key)"> [readonly]="key.settings.isEditable === 'readonly'"
<mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')"> type="text"
{{ getErrorMessageText(key.settings, 'required') }} (keydown)="$event.preventDefault();">
</mat-error> <ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon" matIconPrefix>
<mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('matDatepickerParse')"> <ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
{{ getErrorMessageText(key.settings, 'invalidDate') }} </ng-container>
</mat-error> <tb-color-input #colorInput asBoxInput matSuffix
</mat-form-field> colorClearButton
</div> [disabled]="multipleInputFormGroup.get(key.formId).disabled"
<div class="input-field" *ngIf="key.settings.dataKeyValueType === 'select'"> [readonly]="key.settings.isEditable === 'readonly'"
<mat-form-field class="mat-block" appearance="outline" subscriptSizing="dynamic"> [ngModel]="multipleInputFormGroup.get(key.formId).value"
<mat-label>{{key.label}}</mat-label> (ngModelChange)="colorChanged(source, key, $event)"
<mat-select formControlName="{{key.formId}}" [ngModelOptions]="{ standalone: true }">
[required]="key.settings.required"
(focus)="key.isFocused = true;"
(selectionChange)="key.isFocused = false; inputChanged(source, key)">
<mat-option *ngFor="let option of key.settings.selectOptions"
[value]="option.value"
[disabled]="key.settings.isEditable === 'readonly'">
{{ getCustomTranslationText(option.label ? option.label : option.value) }}
</mat-option>
</mat-select>
<mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
{{ getErrorMessageText(key.settings, 'required') }}
</mat-error>
</mat-form-field>
</div>
<div class="tb-form-row space-between color-picker-input" *ngIf="key.settings.dataKeyValueType === 'color'">
<div class="label-container">
<ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon">
<tb-icon *ngIf="!key.settings.safeCustomIcon; else customToggleIcon">{{key.settings.icon}}</tb-icon>
<ng-template #customToggleIcon>
<img class="mat-icon" [src]="key.settings.safeCustomIcon" alt="icon">
</ng-template>
</ng-container>
{{key.label}}
</div>
<tb-color-input asBoxInput
[required]="key.settings.required"
[requiredText]="getErrorMessageText(key.settings, 'required')"
openOnInput
formControlName="{{key.formId}}">
</tb-color-input> </tb-color-input>
</div> <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
</div> {{ getErrorMessageText(key.settings, 'required') }}
</mat-error>
</mat-form-field>
<mat-checkbox *ngIf="key.settings.dataKeyValueType === 'booleanCheckbox'"
formControlName="{{key.formId}}"
(change)="inputChanged(source, key)">
<ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon">
<ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
</ng-container>
<span class="label-wrapper">{{key.label}}</span>
</mat-checkbox>
<mat-slide-toggle *ngIf="key.settings.dataKeyValueType === 'booleanSwitch'"
formControlName="{{key.formId}}"
[labelPosition]="key.settings.slideToggleLabelPosition"
(change)="inputChanged(source, key)">
<ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon">
<ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
</ng-container>
<span class="label-wrapper">{{key.label}}</span>
</mat-slide-toggle>
</ng-container>
</div> </div>
</fieldset> </fieldset>
</div> </div>
@ -216,3 +206,9 @@
</div> </div>
</div> </div>
</form> </form>
<ng-template #iconPrefix let-key="key">
<tb-icon *ngIf="!key.settings.safeCustomIcon; else customToggleIcon">{{key.settings.icon}}</tb-icon>
<ng-template #customToggleIcon>
<img class="mat-icon" [src]="key.settings.safeCustomIcon" alt="icon">
</ng-template>
</ng-template>

73
ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss
View File

@ -38,34 +38,7 @@
} }
.tb-multiple-input-layout { .tb-multiple-input-layout {
display: flex; display: grid;
flex-direction: row;
align-items: start;
gap: 8px;
}
.color-picker-input {
padding: 7px 16px 7px 12px;
margin: 0 10px 22px 0;
border-color: rgba(0, 0, 0, 0.4);
.label-container {
display: flex;
flex-direction: row;
align-items: center;
}
.mat-icon, img {
margin-right: 5px;
}
}
.input-field {
padding-right: 10px;
mat-form-field {
margin-bottom: 5px;
}
} }
.mat-mdc-slide-toggle { .mat-mdc-slide-toggle {
@ -74,17 +47,6 @@
margin-bottom: 8px; margin-bottom: 8px;
} }
.date-time-input {
.mat-mdc-form-field {
width: 100%;
margin: 2px 0;
}
}
.vertical-alignment {
flex-direction: column;
}
&--buttons-container { &--buttons-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -113,18 +75,33 @@
:host ::ng-deep { :host ::ng-deep {
.tb-multiple-input { .tb-multiple-input {
.mat-mdc-slide-toggle .mdc-form-field { .mat-mdc-slide-toggle, .mat-mdc-checkbox {
width: 100%; .mdc-form-field {
& > label {
display: flex;
align-items: center;
width: 100%; width: 100%;
margin: 0; & > label {
.mat-icon { display: flex;
margin-left: 8px; align-items: center;
margin-right: 8px; width: 100%;
margin: 0;
.mat-icon {
margin-right: 8px;
}
} }
} }
} }
.mat-mdc-slide-toggle {
.mdc-form-field {
& > label {
.mat-icon {
margin-left: 8px;
}
}
}
}
.color-input {
.mat-mdc-form-field-icon-suffix {
padding: 0 8px 0 4px;
}
}
} }
} }

66
ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
View File

@ -48,6 +48,7 @@ import {
} from '@shared/components/dialog/json-object-edit-dialog.component'; } from '@shared/components/dialog/json-object-edit-dialog.component';
import { MatDialog } from '@angular/material/dialog'; import { MatDialog } from '@angular/material/dialog';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
type FieldAlignment = 'row' | 'column'; type FieldAlignment = 'row' | 'column';
@ -55,7 +56,7 @@ type MultipleInputWidgetDataKeyType = 'server' | 'shared' | 'timeseries';
export type MultipleInputWidgetDataKeyValueType = 'string' | 'double' | 'integer' | export type MultipleInputWidgetDataKeyValueType = 'string' | 'double' | 'integer' |
'JSON' | 'booleanCheckbox' | 'booleanSwitch' | 'JSON' | 'booleanCheckbox' | 'booleanSwitch' |
'dateTime' | 'date' | 'time' | 'select' | 'color'; 'dateTime' | 'date' | 'time' | 'select' | 'color';
type MultipleInputWidgetDataKeyEditableType = 'editable' | 'disabled' | 'readonly'; export type MultipleInputWidgetDataKeyEditableType = 'editable' | 'disabled' | 'readonly';
type ConvertGetValueFunction = (value: any, ctx: WidgetContext) => any; type ConvertGetValueFunction = (value: any, ctx: WidgetContext) => any;
type ConvertSetValueFunction = (value: any, originValue: any, ctx: WidgetContext) => any; type ConvertSetValueFunction = (value: any, originValue: any, ctx: WidgetContext) => any;
@ -71,6 +72,8 @@ interface MultipleInputWidgetSettings {
groupTitle: string; groupTitle: string;
fieldsAlignment: FieldAlignment; fieldsAlignment: FieldAlignment;
fieldsInRow: number; fieldsInRow: number;
columnGap: number;
rowGap: number;
attributesShared?: boolean; attributesShared?: boolean;
} }
@ -88,6 +91,8 @@ interface MultipleInputWidgetDataKeySettings {
isEditable: MultipleInputWidgetDataKeyEditableType; isEditable: MultipleInputWidgetDataKeyEditableType;
disabledOnDataKey: string; disabledOnDataKey: string;
dataKeyHidden: boolean; dataKeyHidden: boolean;
appearance: MatFormFieldAppearance;
subscriptSizing: SubscriptSizing;
step?: number; step?: number;
minValue?: number; minValue?: number;
maxValue?: number; maxValue?: number;
@ -148,8 +153,7 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
private isSavingInProgress = false; private isSavingInProgress = false;
isVerticalAlignment: boolean; isVerticalAlignment: boolean;
inputWidthSettings: string; columns: number;
changeAlignment: boolean;
saveButtonLabel: string; saveButtonLabel: string;
resetButtonLabel: string; resetButtonLabel: string;
@ -228,15 +232,15 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
if (isUndefined(this.settings.fieldsInRow)) { if (isUndefined(this.settings.fieldsInRow)) {
this.settings.fieldsInRow = 2; this.settings.fieldsInRow = 2;
} }
// For backward compatibility
this.isVerticalAlignment = !(this.settings.fieldsAlignment === 'row'); this.isVerticalAlignment = !(this.settings.fieldsAlignment === 'row');
if (isUndefined(this.settings.columnGap)) {
if (!this.isVerticalAlignment && this.settings.fieldsInRow) { this.settings.columnGap = 10;
this.inputWidthSettings = 100 / this.settings.fieldsInRow + '%'; }
if (isUndefined(this.settings.rowGap)) {
this.settings.rowGap = 5;
} }
this.updateWidgetDisplaying(); this.updateColumns();
} }
private updateDatasources() { private updateDatasources() {
@ -284,6 +288,15 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
dataKey.settings.isEditable = 'editable'; dataKey.settings.isEditable = 'editable';
} }
} }
if (isUndefined(dataKey.settings.appearance)) {
dataKey.settings.appearance = 'outline';
}
if (isUndefined(dataKey.settings.subscriptSizing)) {
dataKey.settings.subscriptSizing = 'fixed';
}
// For backward compatibility // For backward compatibility
if (dataKey.settings.dataKeyValueType === 'select') { if (dataKey.settings.dataKeyValueType === 'select') {
@ -387,12 +400,6 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
} }
}); });
} }
} else if (key.settings.dataKeyValueType === 'color') {
formControl.valueChanges.pipe(
takeUntil(this.destroy$)
).subscribe(() => {
this.inputChanged(source, key);
});
} }
this.multipleInputFormGroup.addControl(key.formId, formControl); this.multipleInputFormGroup.addControl(key.formId, formControl);
} }
@ -452,9 +459,8 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
} }
if (key.settings.isEditable === 'editable' && key.settings.disabledOnDataKey) { if (key.settings.isEditable === 'editable' && key.settings.disabledOnDataKey) {
const conditions = data.filter((item) => { const conditions = data.filter((item) =>
return source.datasource === item.datasource && item.dataKey.name === key.settings.disabledOnDataKey; source.datasource === item.datasource && item.dataKey.name === key.settings.disabledOnDataKey);
});
if (conditions && conditions.length) { if (conditions && conditions.length) {
if (conditions[0].data.length) { if (conditions[0].data.length) {
if (conditions[0].data[0][1] === 'false') { if (conditions[0].data[0][1] === 'false') {
@ -494,8 +500,17 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
return data; return data;
} }
private updateWidgetDisplaying() { private updateColumns() {
this.changeAlignment = (this.ctx.$container && this.ctx.$container[0].offsetWidth < 620); const changeAlignment = (this.ctx.$container && this.ctx.$container[0].offsetWidth < 620);
if (changeAlignment) {
this.columns = 1;
} else {
if (!this.isVerticalAlignment && this.settings.fieldsInRow) {
this.columns = this.settings.fieldsInRow;
} else {
this.columns = 1;
}
}
} }
public onDataUpdated() { public onDataUpdated() {
@ -504,7 +519,7 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
} }
private resize() { private resize() {
this.updateWidgetDisplaying(); this.updateColumns();
this.ctx.detectChanges(); this.ctx.detectChanges();
} }
@ -599,6 +614,13 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
} }
} }
public colorChanged(source: MultipleInputWidgetSource, key: MultipleInputWidgetDataKey, color: string) {
this.multipleInputFormGroup.get(key.formId).setValue(color);
this.multipleInputFormGroup.get(key.formId).markAsDirty();
this.multipleInputFormGroup.get(key.formId).markAsTouched();
this.inputChanged(source, key);
}
public saveForm() { public saveForm() {
if (this.settings.showActionButtons) { if (this.settings.showActionButtons) {
this.save(); this.save();
@ -737,7 +759,7 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
this.multipleInputFormGroup.reset(undefined, {emitEvent: false}); this.multipleInputFormGroup.reset(undefined, {emitEvent: false});
this.sources.forEach((source) => { this.sources.forEach((source) => {
for (const key of this.visibleKeys(source)) { for (const key of this.visibleKeys(source)) {
this.multipleInputFormGroup.get(key.formId).patchValue(key.value, {emitEvent: false}); this.multipleInputFormGroup.get(key.formId).patchValue(key.value);
} }
}); });
this.multipleInputFormGroup.markAsPristine(); this.multipleInputFormGroup.markAsPristine();

31
ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
View File

@ -93,11 +93,36 @@
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field [fxShow]="updateMultipleAttributesKeySettingsForm.get('isEditable').value !== 'disabled'" fxFlex="50" class="mat-block"> <mat-form-field [fxShow]="updateMultipleAttributesKeySettingsForm.get('isEditable').value === 'editable'" fxFlex="50" class="mat-block">
<mat-label translate>widgets.input-widgets.disable-on-datakey-name</mat-label> <mat-label translate>widgets.input-widgets.disable-on-datakey-name</mat-label>
<input matInput formControlName="disabledOnDataKey"> <input matInput formControlName="disabledOnDataKey">
</mat-form-field> </mat-form-field>
</section> </section>
<section *ngIf="!['booleanSwitch', 'booleanCheckbox'].includes(updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value)"
fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<mat-form-field fxFlex="50" class="mat-block">
<mat-label translate>widgets.input-widgets.field-appearance</mat-label>
<mat-select formControlName="appearance">
<mat-option [value]="'fill'">
{{ 'widgets.input-widgets.appearance-fill' | translate }}
</mat-option>
<mat-option [value]="'outline'">
{{ 'widgets.input-widgets.appearance-outline' | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="50" class="mat-block">
<mat-label translate>widgets.input-widgets.subscript-sizing</mat-label>
<mat-select formControlName="subscriptSizing">
<mat-option [value]="'fixed'">
{{ 'widgets.input-widgets.subscript-sizing-fixed' | translate }}
</mat-option>
<mat-option [value]="'dynamic'">
{{ 'widgets.input-widgets.subscript-sizing-dynamic' | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</section>
</fieldset> </fieldset>
<fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value && <fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value &&
updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'booleanSwitch'" class="fields-group"> updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'booleanSwitch'" class="fields-group">
@ -208,7 +233,9 @@
</mat-form-field> </mat-form-field>
</section> </section>
</fieldset> </fieldset>
<fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value" class="fields-group"> <fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value &&
!['date', 'dateTime', 'time'].includes(updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value)"
class="fields-group">
<legend class="group-title" translate>widgets.input-widgets.icon-settings</legend> <legend class="group-title" translate>widgets.input-widgets.icon-settings</legend>
<mat-slide-toggle formControlName="useCustomIcon" class="slide-block"> <mat-slide-toggle formControlName="useCustomIcon" class="slide-block">
{{ 'widgets.input-widgets.use-custom-icon' | translate }} {{ 'widgets.input-widgets.use-custom-icon' | translate }}

18
ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.ts
View File

@ -24,7 +24,10 @@ import {
dataKeySelectOptionValidator dataKeySelectOptionValidator
} from '@home/components/widget/lib/settings/input/datakey-select-option.component'; } from '@home/components/widget/lib/settings/input/datakey-select-option.component';
import { CdkDragDrop } from '@angular/cdk/drag-drop'; import { CdkDragDrop } from '@angular/cdk/drag-drop';
import { MultipleInputWidgetDataKeyValueType } from '@home/components/widget/lib/multiple-input-widget.component'; import {
MultipleInputWidgetDataKeyEditableType,
MultipleInputWidgetDataKeyValueType
} from '@home/components/widget/lib/multiple-input-widget.component';
@Component({ @Component({
selector: 'tb-update-multiple-attributes-key-settings', selector: 'tb-update-multiple-attributes-key-settings',
@ -52,6 +55,8 @@ export class UpdateMultipleAttributesKeySettingsComponent extends WidgetSettings
required: false, required: false,
isEditable: 'editable', isEditable: 'editable',
disabledOnDataKey: '', disabledOnDataKey: '',
appearance: 'outline',
subscriptSizing: 'fixed',
slideToggleLabelPosition: 'after', slideToggleLabelPosition: 'after',
selectOptions: [], selectOptions: [],
@ -92,6 +97,8 @@ export class UpdateMultipleAttributesKeySettingsComponent extends WidgetSettings
required: [settings.required, []], required: [settings.required, []],
isEditable: [settings.isEditable, []], isEditable: [settings.isEditable, []],
disabledOnDataKey: [settings.disabledOnDataKey, []], disabledOnDataKey: [settings.disabledOnDataKey, []],
appearance: [settings.appearance, []],
subscriptSizing: [settings.subscriptSizing, []],
// Slide toggle settings // Slide toggle settings
@ -146,7 +153,7 @@ export class UpdateMultipleAttributesKeySettingsComponent extends WidgetSettings
const dataKeyValueType: MultipleInputWidgetDataKeyValueType = const dataKeyValueType: MultipleInputWidgetDataKeyValueType =
this.updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value; this.updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value;
const required: boolean = this.updateMultipleAttributesKeySettingsForm.get('required').value; const required: boolean = this.updateMultipleAttributesKeySettingsForm.get('required').value;
const isEditable: string = this.updateMultipleAttributesKeySettingsForm.get('isEditable').value; const isEditable: MultipleInputWidgetDataKeyEditableType = this.updateMultipleAttributesKeySettingsForm.get('isEditable').value;
const useCustomIcon: boolean = this.updateMultipleAttributesKeySettingsForm.get('useCustomIcon').value; const useCustomIcon: boolean = this.updateMultipleAttributesKeySettingsForm.get('useCustomIcon').value;
const useGetValueFunction: boolean = this.updateMultipleAttributesKeySettingsForm.get('useGetValueFunction').value; const useGetValueFunction: boolean = this.updateMultipleAttributesKeySettingsForm.get('useGetValueFunction').value;
const useSetValueFunction: boolean = this.updateMultipleAttributesKeySettingsForm.get('useSetValueFunction').value; const useSetValueFunction: boolean = this.updateMultipleAttributesKeySettingsForm.get('useSetValueFunction').value;
@ -163,10 +170,15 @@ export class UpdateMultipleAttributesKeySettingsComponent extends WidgetSettings
this.updateMultipleAttributesKeySettingsForm.get('useGetValueFunction').enable({emitEvent: false}); this.updateMultipleAttributesKeySettingsForm.get('useGetValueFunction').enable({emitEvent: false});
this.updateMultipleAttributesKeySettingsForm.get('useSetValueFunction').enable({emitEvent: false}); this.updateMultipleAttributesKeySettingsForm.get('useSetValueFunction').enable({emitEvent: false});
if (isEditable !== 'disabled') { if (isEditable === 'editable') {
this.updateMultipleAttributesKeySettingsForm.get('disabledOnDataKey').enable({emitEvent: false}); this.updateMultipleAttributesKeySettingsForm.get('disabledOnDataKey').enable({emitEvent: false});
} }
if (!['booleanSwitch', 'booleanCheckbox'].includes(dataKeyValueType)) {
this.updateMultipleAttributesKeySettingsForm.get('appearance').enable({emitEvent: false});
this.updateMultipleAttributesKeySettingsForm.get('subscriptSizing').enable({emitEvent: false});
}
if (dataKeyValueType === 'booleanSwitch') { if (dataKeyValueType === 'booleanSwitch') {
this.updateMultipleAttributesKeySettingsForm.get('slideToggleLabelPosition').enable({emitEvent: false}); this.updateMultipleAttributesKeySettingsForm.get('slideToggleLabelPosition').enable({emitEvent: false});
} else if (dataKeyValueType === 'select') { } else if (dataKeyValueType === 'select') {

12
ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html
View File

@ -72,7 +72,7 @@
</section> </section>
</fieldset> </fieldset>
<fieldset class="fields-group"> <fieldset class="fields-group">
<legend class="group-title" translate>widgets.input-widgets.fields-alignment</legend> <legend class="group-title" translate>widgets.input-widgets.layout</legend>
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center"> <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<mat-form-field fxFlex="50" class="mat-block"> <mat-form-field fxFlex="50" class="mat-block">
<mat-label translate>widgets.input-widgets.fields-alignment</mat-label> <mat-label translate>widgets.input-widgets.fields-alignment</mat-label>
@ -90,5 +90,15 @@
<input matInput type="number" min="1" step="1" formControlName="fieldsInRow"> <input matInput type="number" min="1" step="1" formControlName="fieldsInRow">
</mat-form-field> </mat-form-field>
</section> </section>
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<mat-form-field fxFlex="50" class="mat-block">
<mat-label translate>widgets.input-widgets.row-gap</mat-label>
<input matInput type="number" min="0" step="1" formControlName="rowGap">
</mat-form-field>
<mat-form-field fxFlex="50" [fxShow]="updateMultipleAttributesWidgetSettingsForm.get('fieldsAlignment').value === 'row'" class="mat-block">
<mat-label translate>widgets.input-widgets.column-gap</mat-label>
<input matInput type="number" min="0" step="1" formControlName="columnGap">
</mat-form-field>
</section>
</fieldset> </fieldset>
</section> </section>

12
ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.ts
View File

@ -49,7 +49,9 @@ export class UpdateMultipleAttributesWidgetSettingsComponent extends WidgetSetti
showGroupTitle: false, showGroupTitle: false,
groupTitle: '', groupTitle: '',
fieldsAlignment: 'row', fieldsAlignment: 'row',
fieldsInRow: 2 fieldsInRow: 2,
rowGap: 5,
columnGap: 10
}; };
} }
@ -77,6 +79,11 @@ export class UpdateMultipleAttributesWidgetSettingsComponent extends WidgetSetti
fieldsAlignment: [settings.fieldsAlignment, []], fieldsAlignment: [settings.fieldsAlignment, []],
fieldsInRow: [settings.fieldsInRow, [Validators.min(1)]], fieldsInRow: [settings.fieldsInRow, [Validators.min(1)]],
// Layout gap
rowGap: [settings.rowGap, [Validators.min(0)]],
columnGap: [settings.columnGap, [Validators.min(0)]]
}); });
} }
@ -105,13 +112,16 @@ export class UpdateMultipleAttributesWidgetSettingsComponent extends WidgetSetti
} }
if (fieldsAlignment === 'row') { if (fieldsAlignment === 'row') {
this.updateMultipleAttributesWidgetSettingsForm.get('fieldsInRow').enable(); this.updateMultipleAttributesWidgetSettingsForm.get('fieldsInRow').enable();
this.updateMultipleAttributesWidgetSettingsForm.get('columnGap').enable();
} else { } else {
this.updateMultipleAttributesWidgetSettingsForm.get('fieldsInRow').disable(); this.updateMultipleAttributesWidgetSettingsForm.get('fieldsInRow').disable();
this.updateMultipleAttributesWidgetSettingsForm.get('columnGap').disable();
} }
this.updateMultipleAttributesWidgetSettingsForm.get('updateAllValues').updateValueAndValidity({emitEvent}); this.updateMultipleAttributesWidgetSettingsForm.get('updateAllValues').updateValueAndValidity({emitEvent});
this.updateMultipleAttributesWidgetSettingsForm.get('saveButtonLabel').updateValueAndValidity({emitEvent}); this.updateMultipleAttributesWidgetSettingsForm.get('saveButtonLabel').updateValueAndValidity({emitEvent});
this.updateMultipleAttributesWidgetSettingsForm.get('resetButtonLabel').updateValueAndValidity({emitEvent}); this.updateMultipleAttributesWidgetSettingsForm.get('resetButtonLabel').updateValueAndValidity({emitEvent});
this.updateMultipleAttributesWidgetSettingsForm.get('groupTitle').updateValueAndValidity({emitEvent}); this.updateMultipleAttributesWidgetSettingsForm.get('groupTitle').updateValueAndValidity({emitEvent});
this.updateMultipleAttributesWidgetSettingsForm.get('fieldsInRow').updateValueAndValidity({emitEvent}); this.updateMultipleAttributesWidgetSettingsForm.get('fieldsInRow').updateValueAndValidity({emitEvent});
this.updateMultipleAttributesWidgetSettingsForm.get('columnGap').updateValueAndValidity({emitEvent});
} }
} }

2
ui-ngx/src/app/shared/components/color-input.component.html
View File

@ -40,7 +40,7 @@
class="tb-box-button" class="tb-box-button"
[disabled]="disabled" [disabled]="disabled"
#matButton #matButton
(click)="openColorPickerPopup($event, matButton)"> (click)="openColorPickerPopup($event, matButton._elementRef)">
<div class="tb-color-preview no-margin box" [ngClass]="{'disabled': disabled}"> <div class="tb-color-preview no-margin box" [ngClass]="{'disabled': disabled}">
<div class="tb-color-result" [style]="!disabled ? {background: colorFormGroup.get('color').value} : {}"></div> <div class="tb-color-result" [style]="!disabled ? {background: colorFormGroup.get('color').value} : {}"></div>
</div> </div>

83
ui-ngx/src/app/shared/components/color-input.component.ts
View File

@ -14,7 +14,16 @@
/// limitations under the License. /// limitations under the License.
/// ///
import { ChangeDetectorRef, Component, forwardRef, Input, OnInit, Renderer2, ViewContainerRef } from '@angular/core'; import {
ChangeDetectorRef,
Component,
ElementRef,
forwardRef,
Input,
OnInit,
Renderer2,
ViewContainerRef
} from '@angular/core';
import { PageComponent } from '@shared/components/page.component'; import { PageComponent } from '@shared/components/page.component';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state'; import { AppState } from '@core/core.state';
@ -84,6 +93,10 @@ export class ColorInputComponent extends PageComponent implements OnInit, Contro
@Input() @Input()
disabled: boolean; disabled: boolean;
@Input()
@coerceBoolean()
readonly = false;
private modelValue: string; private modelValue: string;
private propagateChange = null; private propagateChange = null;
@ -151,43 +164,47 @@ export class ColorInputComponent extends PageComponent implements OnInit, Contro
showColorPicker($event: MouseEvent) { showColorPicker($event: MouseEvent) {
$event.stopPropagation(); $event.stopPropagation();
this.dialogs.colorPicker(this.colorFormGroup.get('color').value, if (!this.disabled && !this.readonly) {
this.colorClearButton).subscribe( this.dialogs.colorPicker(this.colorFormGroup.get('color').value,
(result) => { this.colorClearButton).subscribe(
if (!result?.canceled) { (result) => {
this.colorFormGroup.patchValue( if (!result?.canceled) {
{color: result?.color}, {emitEvent: true} this.colorFormGroup.patchValue(
); {color: result?.color}, {emitEvent: true}
this.cd.markForCheck(); );
} this.cd.markForCheck();
} }
); }
);
}
} }
openColorPickerPopup($event: Event, matButton: MatButton) { openColorPickerPopup($event: Event, element?: ElementRef) {
if ($event) { if ($event) {
$event.stopPropagation(); $event.stopPropagation();
} }
const trigger = matButton._elementRef.nativeElement; if (!this.disabled && !this.readonly) {
if (this.popoverService.hasPopover(trigger)) { const trigger = element ? element.nativeElement : $event.target;
this.popoverService.hidePopover(trigger); if (this.popoverService.hasPopover(trigger)) {
} else { this.popoverService.hidePopover(trigger);
const colorPickerPopover = this.popoverService.displayPopover(trigger, this.renderer, } else {
this.viewContainerRef, ColorPickerPanelComponent, 'left', true, null, const colorPickerPopover = this.popoverService.displayPopover(trigger, this.renderer,
{ this.viewContainerRef, ColorPickerPanelComponent, 'left', true, null,
color: this.colorFormGroup.get('color').value, {
colorClearButton: this.colorClearButton color: this.colorFormGroup.get('color').value,
}, colorClearButton: this.colorClearButton
{}, },
{}, {}, true); {},
colorPickerPopover.tbComponentRef.instance.popover = colorPickerPopover; {}, {}, true);
colorPickerPopover.tbComponentRef.instance.colorSelected.subscribe((color) => { colorPickerPopover.tbComponentRef.instance.popover = colorPickerPopover;
colorPickerPopover.hide(); colorPickerPopover.tbComponentRef.instance.colorSelected.subscribe((color) => {
this.colorFormGroup.patchValue( colorPickerPopover.hide();
{color}, {emitEvent: true} this.colorFormGroup.patchValue(
); {color}, {emitEvent: true}
this.cd.markForCheck(); );
}); this.cd.markForCheck();
});
}
} }
} }

9
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -5329,6 +5329,9 @@
"input-fields-alignment": "Input fields alignment", "input-fields-alignment": "Input fields alignment",
"input-fields-alignment-column": "Column (default)", "input-fields-alignment-column": "Column (default)",
"input-fields-alignment-row": "Row", "input-fields-alignment-row": "Row",
"layout": "Layout",
"row-gap": "Gap between rows in pixels",
"column-gap": "Gap between columns in pixels",
"latitude-field-required": "Latitude field required", "latitude-field-required": "Latitude field required",
"longitude-field-required": "Longitude field required", "longitude-field-required": "Longitude field required",
"attribute-settings": "Attribute settings", "attribute-settings": "Attribute settings",
@ -5384,6 +5387,12 @@
"ability-to-edit-attribute-disabled": "Disabled", "ability-to-edit-attribute-disabled": "Disabled",
"ability-to-edit-attribute-readonly": "Read-only", "ability-to-edit-attribute-readonly": "Read-only",
"disable-on-datakey-name": "Disable on false value of another datakey (specify datakey name)", "disable-on-datakey-name": "Disable on false value of another datakey (specify datakey name)",
"field-appearance": "Field appearance",
"appearance-fill": "Fill",
"appearance-outline": "Outline",
"subscript-sizing": "Subscript sizing",
"subscript-sizing-fixed": "Fixed",
"subscript-sizing-dynamic": "Dynamic",
"slide-toggle-settings": "Slide toggle settings", "slide-toggle-settings": "Slide toggle settings",
"slide-toggle-label-position": "Slide toggle label position", "slide-toggle-label-position": "Slide toggle label position",
"slide-toggle-label-position-after": "After", "slide-toggle-label-position-after": "After",

Write Preview
Loading…
Cancel
Save