thingsboard/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html

<!--

    Copyright © 2016-2022 The Thingsboard Authors

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<mat-tab-group class="tb-widget-config tb-absolute-fill" [(selectedIndex)]="selectedTab">
  <mat-tab label="{{ 'widget-config.data' | translate }}" *ngIf="widgetType !== widgetTypes.static">
    <div [formGroup]="dataSettings" class="mat-content mat-padding" fxLayout="column" fxLayoutGap="8px">
      <div *ngIf="displayTimewindowConfig()" fxFlex="100"
           fxLayout.xs="column" fxLayoutGap="8px" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center">
        <div fxLayout="column" fxLayoutGap="8px" fxFlex.gt-xs>
          <mat-checkbox formControlName="useDashboardTimewindow">
            {{ 'widget-config.use-dashboard-timewindow' | translate }}
          </mat-checkbox>
          <mat-checkbox formControlName="displayTimewindow">
            {{ 'widget-config.display-timewindow' | translate }}
          </mat-checkbox>
        </div>
        <section fxLayout="row" fxLayoutAlign="start center" fxLayout.lt-lg="column" fxLayoutAlign.lt-lg="center start"
                 fxFlex.gt-xs style="margin-bottom: 16px;">
          <span [ngClass]="{'tb-disabled-label': dataSettings.get('useDashboardTimewindow').value}" translate
                style="padding-right: 8px;">widget-config.timewindow</span>
          <tb-timewindow asButton="true"
                         isEdit="true"
                         quickIntervalOnly="{{ widgetType === widgetTypes.latest }}"
                         aggregation="{{ widgetType === widgetTypes.timeseries }}"
                         fxFlex formControlName="timewindow"></tb-timewindow>
        </section>
      </div>
      <div *ngIf="widgetType === widgetTypes.alarm" fxLayout="column" fxLayoutAlign="center">
        <div fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center"
             fxLayoutGap="8px">
          <mat-form-field fxFlex class="mat-block" floatLabel="always">
            <mat-label translate>alarm.alarm-status-list</mat-label>
            <mat-select formControlName="alarmStatusList" multiple
                        placeholder="{{ !dataSettings.get('alarmStatusList').value?.length ? ('alarm.any-status' | translate) : '' }}">
              <mat-option *ngFor="let searchStatus of alarmSearchStatuses" [value]="searchStatus">
                {{ alarmSearchStatusTranslationMap.get(searchStatus) | translate }}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <mat-form-field fxFlex class="mat-block" floatLabel="always">
            <mat-label translate>alarm.alarm-severity-list</mat-label>
            <mat-select formControlName="alarmSeverityList" multiple
                        placeholder="{{ !dataSettings.get('alarmSeverityList').value?.length ? ('alarm.any-severity' | translate) : '' }}">
              <mat-option *ngFor="let alarmSeverity of alarmSeverities" [value]="alarmSeverity">
                {{ alarmSeverityTranslationMap.get(alarmSeverityEnum[alarmSeverity]) | translate }}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <div fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center"
             fxLayoutGap="8px">
          <mat-form-field fxFlex class="mat-block" floatLabel="always">
            <mat-label translate>alarm.alarm-type-list</mat-label>
            <mat-chip-list #alarmTypeChipList formControlName="alarmTypeList">
              <mat-chip *ngFor="let type of alarmTypeList()" [selectable]="true"
              [removable]="true" (removed)="removeAlarmType(type)">
              {{type}}
              <mat-icon matChipRemove>cancel</mat-icon>
              </mat-chip>
              <input placeholder="{{ !dataSettings.get('alarmTypeList').value?.length ? ('alarm.any-type' | translate) : '' }}"
                     [matChipInputFor]="alarmTypeChipList"
                     [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                     matChipInputAddOnBlur
                     (matChipInputTokenEnd)="addAlarmType($event)">
            </mat-chip-list>
          </mat-form-field>
          <mat-checkbox fxFlex formControlName="searchPropagatedAlarms">
            {{ 'alarm.search-propagated-alarms' | translate }}
          </mat-checkbox>
        </div>
      </div>
      <mat-accordion multi>
        <mat-expansion-panel class="tb-datasources" *ngIf="widgetType !== widgetTypes.rpc &&
                                    widgetType !== widgetTypes.alarm &&
                                    modelValue?.isDataEnabled" [expanded]="true">
          <mat-expansion-panel-header>
            <mat-panel-title fxLayout="column">
              <div class="tb-panel-title" translate>widget-config.datasources</div>
              <div *ngIf="modelValue?.typeParameters && modelValue?.typeParameters.maxDatasources > -1"
                   class="tb-panel-hint">{{ 'widget-config.maximum-datasources' | translate:{count: modelValue?.typeParameters.maxDatasources} }}</div>
              <tb-error [error]="dataError"></tb-error>
            </mat-panel-title>
          </mat-expansion-panel-header>
          <div *ngIf="datasourcesFormArray().length === 0; else datasourcesTemplate">
                <span translate fxLayoutAlign="center center"
                      class="tb-prompt">datasource.add-datasource-prompt</span>
          </div>
          <ng-template #datasourcesTemplate>
            <div fxFlex fxLayout="row" fxLayoutAlign="start center">
              <span style="width: 60px;"></span>
              <div fxFlex fxLayout="row" fxLayoutAlign="start center"
                   style="padding: 0 0 0 10px; margin: 5px;">
                <span translate style="min-width: 120px;">widget-config.datasource-type</span>
                <span fxHide fxShow.gt-sm translate fxFlex
                      style="padding-left: 10px;">widget-config.datasource-parameters</span>
                <span style="min-width: 40px;"></span>
              </div>
            </div>
            <div style="overflow: auto; padding-bottom: 15px;">
              <mat-list class="tb-drop-list"
                        cdkDropList
                        cdkDropListOrientation="vertical"
                        (cdkDropListDropped)="onDatasourceDrop($event)"
                        [cdkDropListDisabled]="disabled"
                        formArrayName="datasources">
                <mat-list-item *ngFor="let datasourceControl of datasourcesFormArray().controls; let $index = index;"
                               class="tb-datasource-list-item tb-draggable" cdkDrag
                               [cdkDragDisabled]="disabled">
                  <div fxFlex fxLayout="row" fxLayoutAlign="start center">
                    <div style="width: 60px;">
                      <button *ngIf="!disabled" mat-icon-button color="primary"
                              class="handle"
                              style="min-width: 40px; margin: 0"
                              cdkDragHandle
                              matTooltip="{{ 'action.drag' | translate }}"
                              matTooltipPosition="above">
                        <mat-icon>drag_handle</mat-icon>
                      </button>
                      <span>{{$index + 1}}.</span>
                    </div>
                    <div class="mat-elevation-z4 tb-datasource-params" fxFlex>
                      <div fxFlex
                           fxLayout="row"
                           fxLayoutAlign="start center">
                        <section fxFlex
                                 fxLayout="column"
                                 fxLayoutAlign="center"
                                 fxLayout.gt-sm="row"
                                 fxLayoutAlign.gt-sm="start center">
                          <mat-form-field class="tb-datasource-type">
                            <mat-select [formControl]="datasourceControl.get('type')">
                              <mat-option *ngFor="let datasourceType of datasourceTypes" [value]="datasourceType">
                                {{ datasourceTypesTranslations.get(datasourceType) | translate }}
                              </mat-option>
                            </mat-select>
                          </mat-form-field>
                          <section fxLayout="column" class="tb-datasource" [ngSwitch]="datasourceControl.get('type').value">
                            <ng-template [ngSwitchCase]="datasourceType.function">
                              <mat-form-field class="tb-datasource-name" style="min-width: 200px;">
                                <mat-label translate>datasource.label</mat-label>
                                <input matInput
                                       [formControl]="datasourceControl.get('name')">
                              </mat-form-field>
                            </ng-template>
                            <ng-template [ngSwitchCase]="datasourceControl.get('type').value === datasourceType.entity ||
                                                   datasourceControl.get('type').value === datasourceType.entityCount ? datasourceControl.get('type').value : ''">
                              <tb-entity-alias-select
                                [showLabel]="true"
                                [tbRequired]="true"
                                [aliasController]="aliasController"
                                [formControl]="datasourceControl.get('entityAliasId')"
                                [callbacks]="widgetConfigCallbacks">
                              </tb-entity-alias-select>
                              <tb-filter-select
                                [showLabel]="true"
                                [aliasController]="aliasController"
                                [formControl]="datasourceControl.get('filterId')"
                                [callbacks]="widgetConfigCallbacks">
                              </tb-filter-select>
                              <mat-form-field *ngIf="datasourceControl.get('type').value === datasourceType.entityCount"
                                              floatLabel="always"
                                              class="tb-datasource-name no-border-top" style="min-width: 200px;">
                                <mat-label></mat-label>
                                <input matInput
                                       placeholder="{{ 'datasource.label' | translate }}"
                                       [formControl]="datasourceControl.get('name')">
                              </mat-form-field>
                            </ng-template>
                          </section>
                          <section fxLayout="column" fxLayoutAlign="stretch" fxFlex>
                            <tb-data-keys class="tb-data-keys" fxFlex
                                          [widgetType]="widgetType"
                                          [datasourceType]="datasourceControl.get('type').value"
                                          [maxDataKeys]="modelValue?.typeParameters?.maxDataKeys"
                                          [optDataKeys]="dataKeysOptional(datasourceControl.value)"
                                          [aliasController]="aliasController"
                                          [datakeySettingsSchema]="modelValue?.dataKeySettingsSchema"
                                          [dataKeySettingsDirective]="modelValue?.dataKeySettingsDirective"
                                          [dashboard]="dashboard"
                                          [widget]="widget"
                                          [callbacks]="widgetConfigCallbacks"
                                          [entityAliasId]="datasourceControl.get('entityAliasId').value"
                                          [formControl]="datasourceControl.get('dataKeys')">
                            </tb-data-keys>
                            <tb-data-keys *ngIf="widgetType === widgetTypes.timeseries &&
                                               modelValue?.typeParameters?.hasAdditionalLatestDataKeys" class="tb-data-keys" fxFlex
                                          [widgetType]="widgetTypes.latest"
                                          [datasourceType]="datasourceControl.get('type').value"
                                          [optDataKeys]="true"
                                          [aliasController]="aliasController"
                                          [datakeySettingsSchema]="modelValue?.latestDataKeySettingsSchema"
                                          [dataKeySettingsDirective]="modelValue?.latestDataKeySettingsDirective"
                                          [dashboard]="dashboard"
                                          [widget]="widget"
                                          [callbacks]="widgetConfigCallbacks"
                                          [entityAliasId]="datasourceControl.get('entityAliasId').value"
                                          [formControl]="datasourceControl.get('latestDataKeys')">
                            </tb-data-keys>
                          </section>
                        </section>
                        <button [disabled]="isLoading$ | async"
                                type="button"
                                mat-icon-button color="primary"
                                style="min-width: 40px;"
                                (click)="removeDatasource($index)"
                                matTooltip="{{ 'widget-config.remove-datasource' | translate }}"
                                matTooltipPosition="above">
                          <mat-icon>close</mat-icon>
                        </button>
                      </div>
                      <tb-error class="tb-datasource-error" [error]="datasourceError[$index] ? datasourceError[$index] : ''"></tb-error>
                    </div>
                  </div>
                </mat-list-item>
              </mat-list>

            </div>
          </ng-template>
          <div fxFlex fxLayout="row" fxLayoutAlign="start center">
            <button [disabled]="isLoading$ | async"
                    type="button"
                    mat-raised-button color="primary"
                    [fxShow]="modelValue?.typeParameters &&
                              (modelValue?.typeParameters.maxDatasources == -1 || datasourcesFormArray().controls.length < modelValue?.typeParameters.maxDatasources)"
                    (click)="addDatasource()"
                    matTooltip="{{ 'widget-config.add-datasource' | translate }}"
                    matTooltipPosition="above">
              <mat-icon>add</mat-icon>
              <span translate>action.add</span>
            </button>
          </div>
        </mat-expansion-panel>
        <mat-expansion-panel class="tb-datasources" *ngIf="widgetType === widgetTypes.rpc &&
                                    modelValue?.isDataEnabled" [expanded]="true">
          <mat-expansion-panel-header>
            <mat-panel-title>
              {{ 'widget-config.target-device' | translate }}
            </mat-panel-title>
          </mat-expansion-panel-header>
          <div [formGroup]="targetDeviceSettings" style="padding: 0 5px;">
            <tb-entity-alias-select fxFlex
              [tbRequired]="!widgetEditMode"
              [aliasController]="aliasController"
              [allowedEntityTypes]="[entityTypes.DEVICE]"
              [callbacks]="widgetConfigCallbacks"
              formControlName="targetDeviceAliasId">
            </tb-entity-alias-select>
          </div>
        </mat-expansion-panel>
        <mat-expansion-panel class="tb-datasources" *ngIf="widgetType === widgetTypes.alarm &&
                                    modelValue?.isDataEnabled" [expanded]="true">
          <mat-expansion-panel-header>
            <mat-panel-title>
              {{ 'widget-config.alarm-source' | translate }}
            </mat-panel-title>
          </mat-expansion-panel-header>
          <div [formGroup]="alarmSourceSettings" style="padding: 0 5px;">
            <section fxFlex
                     fxLayout="column"
                     fxLayoutAlign="center"
                     fxLayout.gt-sm="row"
                     fxLayoutAlign.gt-sm="start center">
              <mat-form-field class="tb-datasource-type">
                <mat-select formControlName="type">
                  <mat-option *ngFor="let datasourceType of datasourceTypes" [value]="datasourceType">
                    {{ datasourceTypesTranslations.get(datasourceType) | translate }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
              <section class="tb-datasource" [ngSwitch]="alarmSourceSettings.get('type').value">
                <ng-template [ngSwitchCase]="datasourceType.entity">
                  <tb-entity-alias-select
                    [showLabel]="true"
                    [tbRequired]="alarmSourceSettings.get('type').value === datasourceType.entity"
                    [aliasController]="aliasController"
                    formControlName="entityAliasId"
                    [callbacks]="widgetConfigCallbacks">
                  </tb-entity-alias-select>
                  <tb-filter-select
                    [showLabel]="true"
                    [aliasController]="aliasController"
                    formControlName="filterId"
                    [callbacks]="widgetConfigCallbacks">
                  </tb-filter-select>
                </ng-template>
              </section>
              <tb-data-keys class="tb-data-keys" fxFlex
                            [widgetType]="widgetType"
                            [datasourceType]="alarmSourceSettings.get('type').value"
                            [aliasController]="aliasController"
                            [datakeySettingsSchema]="modelValue?.dataKeySettingsSchema"
                            [dataKeySettingsDirective]="modelValue?.dataKeySettingsDirective"
                            [dashboard]="dashboard"
                            [widget]="widget"
                            [callbacks]="widgetConfigCallbacks"
                            [entityAliasId]="alarmSourceSettings.get('entityAliasId').value"
                            formControlName="dataKeys">
              </tb-data-keys>
            </section>
          </div>
        </mat-expansion-panel>
        <mat-expansion-panel [formGroup]="widgetSettings">
          <mat-expansion-panel-header>
            <mat-panel-title translate>widget-config.data-settings</mat-panel-title>
          </mat-expansion-panel-header>
          <ng-template matExpansionPanelContent>
            <div fxLayout="row" *ngIf="widgetType !== widgetTypes.rpc &&
                                    widgetType !== widgetTypes.alarm &&
                                    modelValue?.isDataEnabled && !modelValue?.typeParameters?.singleEntity">
              <mat-form-field fxFlex>
                <mat-label translate>widget-config.data-page-size</mat-label>
                <input matInput formControlName="pageSize" type="number" min="1" step="1">
              </mat-form-field>
            </div>
            <div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px">
              <mat-form-field fxFlex>
                <mat-label translate>widget-config.units</mat-label>
                <input matInput formControlName="units">
              </mat-form-field>
              <mat-form-field fxFlex>
                <mat-label translate>widget-config.decimals</mat-label>
                <input matInput formControlName="decimals" type="number" min="0" max="15" step="1">
              </mat-form-field>
            </div>
            <div fxLayout="row">
              <mat-form-field fxFlex>
                <mat-label translate>widget-config.no-data-display-message</mat-label>
                <input matInput formControlName="noDataDisplayMessage">
              </mat-form-field>
            </div>
          </ng-template>
        </mat-expansion-panel>
      </mat-accordion>
    </div>
  </mat-tab>
  <mat-tab label="{{ 'widget-config.settings' | translate }}">
    <div class="mat-content mat-padding" fxLayout="column">
      <div [formGroup]="widgetSettings" fxLayout="column">
        <fieldset class="fields-group">
          <legend class="group-title" translate>widget-config.title</legend>
          <mat-slide-toggle class="mat-slide" formControlName="showTitle">
            {{ 'widget-config.display-title' | translate }}
          </mat-slide-toggle>
          <div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px">
            <mat-form-field fxFlex>
              <mat-label translate>widget-config.title</mat-label>
              <input matInput formControlName="title">
            </mat-form-field>
            <mat-form-field fxFlex>
              <mat-label translate>widget-config.title-tooltip</mat-label>
              <input matInput formControlName="titleTooltip">
            </mat-form-field>
          </div>
          <fieldset class="fields-group" fxLayoutGap="8px" style="margin: 0">
            <legend class="group-title" translate>widget-config.title-icon</legend>
            <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
              {{ 'widget-config.display-icon' | translate }}
            </mat-slide-toggle>
            <div fxLayout.xs="column" fxLayout="row wrap" fxLayoutGap="8px">
              <tb-material-icon-select fxFlex
                                       formControlName="titleIcon">
              </tb-material-icon-select>
              <tb-color-input fxFlex
                              label="{{'widget-config.icon-color' | translate}}"
                              icon="format_color_fill"
                              openOnInput
                              formControlName="iconColor">
              </tb-color-input>
              <mat-form-field fxFlex>
                <mat-label translate>widget-config.icon-size</mat-label>
                <input matInput formControlName="iconSize">
              </mat-form-field>
            </div>
          </fieldset>
          <mat-expansion-panel class="tb-settings">
            <mat-expansion-panel-header>
              <mat-panel-description fxLayoutAlign="end" translate>
                widget-config.advanced-settings
              </mat-panel-description>
            </mat-expansion-panel-header>
              <ng-template matExpansionPanelContent>
                <tb-json-object-edit
                  [editorStyle]="{minHeight: '100px'}"
                  required
                  label="{{ 'widget-config.title-style' | translate }}"
                  formControlName="titleStyle"
                ></tb-json-object-edit>
              </ng-template>
          </mat-expansion-panel>
        </fieldset>
        <fieldset class="fields-group">
          <legend class="group-title" translate>widget-config.widget-style</legend>
          <div fxLayout="column" fxLayout.gt-md="row wrap" fxFlex fxLayoutGap="8px" class="tb-widget-style">
            <div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px" fxFlex>
              <tb-color-input fxFlex
                              label="{{'widget-config.background-color' | translate}}"
                              icon="format_color_fill"
                              openOnInput
                              formControlName="backgroundColor">
              </tb-color-input>
              <tb-color-input fxFlex
                              label="{{'widget-config.text-color' | translate}}"
                              icon="format_color_fill"
                              openOnInput
                              formControlName="color">
              </tb-color-input>
            </div>
            <div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px" fxFlex>
              <mat-form-field fxFlex>
                <mat-label translate>widget-config.padding</mat-label>
                <input matInput formControlName="padding">
              </mat-form-field>
              <mat-form-field fxFlex>
                <mat-label translate>widget-config.margin</mat-label>
                <input matInput formControlName="margin">
              </mat-form-field>
            </div>
          </div>
          <mat-slide-toggle class="slide-block" formControlName="dropShadow">
            {{ 'widget-config.drop-shadow' | translate }}
          </mat-slide-toggle>
          <mat-slide-toggle class="slide-block" formControlName="enableFullscreen">
            {{ 'widget-config.enable-fullscreen' | translate }}
          </mat-slide-toggle>
          <mat-expansion-panel class="tb-settings">
            <mat-expansion-panel-header>
              <mat-panel-description fxLayoutAlign="end" translate>
                widget-config.advanced-settings
              </mat-panel-description>
            </mat-expansion-panel-header>
            <ng-template matExpansionPanelContent>
              <tb-json-object-edit
                [editorStyle]="{minHeight: '100px'}"
                required
                label="{{ 'widget-config.widget-style' | translate }}"
                formControlName="widgetStyle"
              ></tb-json-object-edit>
              <tb-css
                label="{{ 'widget-config.widget-css' | translate }}"
                formControlName="widgetCss"
              ></tb-css>
            </ng-template>
          </mat-expansion-panel>
        </fieldset>
        <fieldset class="fields-group fields-group-slider" *ngIf="showLegendFieldset">
          <legend class="group-title" translate>widget-config.legend</legend>
          <mat-expansion-panel class="tb-settings">
            <mat-expansion-panel-header fxLayout="row wrap">
              <mat-panel-title>
                <mat-slide-toggle formControlName="showLegend" (click)="$event.stopPropagation()" fxLayoutAlign="center">
                  {{ 'widget-config.display-legend' | translate }}
                </mat-slide-toggle>
              </mat-panel-title>
              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
                widget-config.advanced-settings
              </mat-panel-description>
            </mat-expansion-panel-header>
            <ng-template matExpansionPanelContent>
              <tb-legend-config formControlName="legendConfig"></tb-legend-config>
            </ng-template>
          </mat-expansion-panel>
        </fieldset>
        <fieldset [formGroup]="layoutSettings" class="fields-group fields-group-slider">
          <legend class="group-title" translate>widget-config.mobile-mode-settings</legend>
          <mat-expansion-panel class="tb-settings">
            <mat-expansion-panel-header>
              <mat-panel-title>
                <mat-slide-toggle formControlName="mobileHide" (click)="$event.stopPropagation()" fxLayoutAlign="center">
                  {{ 'widget-config.mobile-hide' | translate }}
                </mat-slide-toggle>
              </mat-panel-title>
              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
                widget-config.advanced-settings
              </mat-panel-description>
            </mat-expansion-panel-header>
            <ng-template matExpansionPanelContent>
              <div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px" fxFlex>
                <mat-form-field fxFlex>
                  <mat-label translate>widget-config.order</mat-label>
                  <input matInput formControlName="mobileOrder" type="number" step="1">
                </mat-form-field>
                <mat-form-field fxFlex>
                  <mat-label translate>widget-config.height</mat-label>
                  <input matInput formControlName="mobileHeight" type="number" min="1" max="10" step="1">
                </mat-form-field>
              </div>
            </ng-template>
          </mat-expansion-panel>
        </fieldset>
      </div>
    </div>
  </mat-tab>
  <mat-tab *ngIf="displayAdvanced()" label="{{ 'widget-config.advanced' | translate }}">
    <div [formGroup]="advancedSettings" class="mat-content mat-padding tb-advanced-widget-config"
         fxLayout="column">
        <tb-widget-settings
          [aliasController]="aliasController"
          [dashboard]="dashboard"
          [widget]="widget"
          formControlName="settings">
        </tb-widget-settings>
    </div>
  </mat-tab>
  <mat-tab label="{{ 'widget-config.actions' | translate }}" [formGroup]="actionsSettings">
    <tb-manage-widget-actions
      [callbacks]="widgetConfigCallbacks"
      [widgetType] = "modelValue.widgetType"
      formControlName="actionsData">
    </tb-manage-widget-actions>
  </mat-tab>
</mat-tab-group>