thingsboard/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html

<!--

    Copyright © 2016-2024 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.

-->
<div class="tb-dashboard-page mat-content flex-1" [class.mobile-app]="isMobileApp && !isEdit" tb-toast
     tb-fullscreen [fullscreenElement]="elRef.nativeElement" [fullscreen]="widgetEditMode || iframeMode || forceFullscreen || isFullscreen">
  <tb-hotkeys-cheatsheet #cheatSheetComponent></tb-hotkeys-cheatsheet>
  <section class="tb-dashboard-toolbar"
           [class.tb-dashboard-toolbar-opened]="toolbarOpened"
           [class.tb-dashboard-toolbar-closed]="!toolbarOpened">
    <tb-dashboard-toolbar [class.!hidden]="widgetEditMode || hideToolbar" [forceFullscreen]="forceFullscreen"
                          [toolbarOpened]="toolbarOpened" (triggerClick)="openToolbar()">
      <div class="tb-dashboard-action-panels flex flex-col justify-center items-stretch gt-sm:flex-row gt-sm:justify-between gt-sm:items-center">
        <div class="tb-dashboard-action-panel tb-left-panel" [class.!hidden]="isMobileApp && !isEdit">
          <tb-user-menu *ngIf="!isPublicUser() && forceFullscreen" class="gt-sm:!hidden" displayUserInfo="true">
          </tb-user-menu>
          <ng-container *ngIf="isEdit">
            <div style="flex: 1 1 100%" class="gt-sm:!hidden"></div>
            <div class="flex flex-row justify-end items-center lt-md:flex-1 gt-sm:justify-start gt-sm:items-center lt-lg:gap-0.75 lg:gap-1.5 gt-lg:gap-3">
              <mat-divider class="tb-toolbar-divider" vertical></mat-divider>
              <button class="gt-md:!hidden" mat-icon-button
                      matTooltip="{{'layout.manage' | translate}}"
                      matTooltipPosition="below"
                      (click)="manageDashboardLayouts($event)">
                <mat-icon>view_compact</mat-icon>
              </button>
              <button class="lt-lg:!hidden" mat-button
                      matTooltip="{{'layout.manage' | translate}}"
                      matTooltipPosition="below"
                      (click)="manageDashboardLayouts($event)">
                <mat-icon>view_compact</mat-icon>
                {{'layout.layouts' | translate}}
              </button>
              <tb-select-dashboard-breakpoint
                [dashboardCtrl]="this">
              </tb-select-dashboard-breakpoint>
            </div>
          </ng-container>
          <tb-states-component class="lt-md:flex-1"
                               [statesControllerId]="isEdit ? 'default' : dashboardConfiguration.settings.stateControllerId"
                               [dashboardCtrl]="this"
                               [dashboardId]="setStateDashboardId ? dashboard.id.id : ''"
                               [isMobile]="isMobile"
                               [state]="dashboardCtx.state"
                               [currentState]="currentState"
                               [syncStateWithQueryParam]="syncStateWithQueryParam"
                               [states]="dashboardConfiguration.states">
          </tb-states-component>
          <ng-container *ngIf="isEdit">
            <button class="gt-md:!hidden" mat-icon-button
                    matTooltip="{{'dashboard.manage-states' | translate}}"
                    matTooltipPosition="below"
                    (click)="manageDashboardStates($event)">
              <mat-icon>layers</mat-icon>
            </button>
            <button class="lt-lg:!hidden" mat-button
                    matTooltip="{{'dashboard.manage-states' | translate}}"
                    matTooltipPosition="below"
                    (click)="manageDashboardStates($event)">
              <mat-icon>layers</mat-icon>
              {{'dashboard.states-short' | translate}}
            </button>
        </ng-container>
          <img *ngIf="showDashboardLogo()" [src]="dashboardLogo | image | async"
               aria-label="dashboard_logo" class="dashboard_logo"/>
        </div>
        <div class="tb-dashboard-action-panel">
          <button [class.!hidden]="!showCloseToolbar()" mat-icon-button class="close-action"
                  matTooltip="{{ 'dashboard.close-toolbar' | translate }}"
                  matTooltipPosition="below"
                  (click)="closeToolbar()">
            <mat-icon>arrow_forward</mat-icon>
          </button>
          <tb-user-menu *ngIf="!isPublicUser() && forceFullscreen" class="lt-md:!hidden" displayUserInfo="true">
          </tb-user-menu>
          <button [class.!hidden]="!showRightLayoutSwitch()" mat-icon-button
                  matTooltip="{{ (isRightLayoutOpened ? 'dashboard.hide-details' : 'dashboard.show-details') | translate }}"
                  matTooltipPosition="below"
                  (click)="toggleLayouts()">
            <mat-icon>{{isRightLayoutOpened ? 'arrow_back' : 'menu'}}</mat-icon>
          </button>
          <button [class.!hidden]="hideFullscreenButton()" class="xs:!hidden" mat-icon-button
                  matTooltip="{{(isFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
                  matTooltipPosition="below"
                  (click)="isFullscreen = !isFullscreen">
            <mat-icon>{{ isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
          </button>
          <button [class.!hidden]="!currentDashboardId || isMobileApp || !displayExport() || isEdit" mat-icon-button
                  matTooltip="{{'dashboard.export' | translate}}"
                  matTooltipPosition="below"
                  (click)="exportDashboard($event)">
            <mat-icon>file_download</mat-icon>
          </button>
          <ng-container *ngIf="!readonly && !isEdit">
            <button class="gt-md:!hidden" mat-icon-button (click)="toggleDashboardEditMode()"
                    matTooltip="{{'dashboard.edit-mode' | translate}}"
                    matTooltipPosition="below">
              <mat-icon>edit</mat-icon></button>
            <button class="lt-lg:!hidden" mat-stroked-button (click)="toggleDashboardEditMode()">
              <mat-icon>edit</mat-icon>{{'dashboard.edit-mode' | translate}}</button>
          </ng-container>
          <ng-container *ngIf="isEdit">
            <button class="gt-md:!hidden" mat-icon-button (click)="saveDashboard()" [disabled]="isLoading$ | async"
                    matTooltip="{{'action.save' | translate}}"
                    matTooltipPosition="below">
              <mat-icon>done</mat-icon></button>
            <button class="lt-lg:!hidden" mat-stroked-button [disabled]="isLoading$ | async" (click)="saveDashboard()">
              <mat-icon>done</mat-icon>{{ 'action.save' | translate }}</button>
            <button class="gt-md:!hidden" mat-icon-button (click)="toggleDashboardEditMode()"
                    matTooltip="{{'action.cancel' | translate}}"
                    [disabled]="isLoading$ | async"
                    matTooltipPosition="below">
              <mat-icon>close</mat-icon></button>
            <button class="lt-lg:!hidden" mat-button (click)="toggleDashboardEditMode()" [disabled]="isLoading$ | async">
              <mat-icon>close</mat-icon>{{ 'action.cancel' | translate }}</button>
            <mat-divider class="tb-toolbar-divider" vertical></mat-divider>
          </ng-container>
          <ng-container *ngIf="currentDashboardId && isEdit && isTenantAdmin()">
            <button class="lt-lg:!hidden gt-lg:!hidden" mat-icon-button
                    #versionControlIconButton
                    matTooltip="{{'version-control.version-control' | translate}}"
                    matTooltipPosition="below"
                    (click)="toggleVersionControl($event, versionControlIconButton)">
              <mat-icon>history</mat-icon>
            </button>
            <button class="lt-xl:!hidden" mat-button
                    #versionControlButton
                    matTooltip="{{'version-control.version-control' | translate}}"
                    matTooltipPosition="below"
                    (click)="toggleVersionControl($event, versionControlButton)">
              <mat-icon>history</mat-icon>
              {{'version-control.versions' | translate}}
            </button>
          </ng-container>
          <ng-container *ngIf="isEdit">
            <button class="gt-lg:!hidden" mat-icon-button
                    matTooltip="{{ 'filter.filters' | translate }}"
                    matTooltipPosition="below"
                    (click)="openFilters($event)">
              <mat-icon>filter_list</mat-icon>
            </button>
            <button class="lt-xl:!hidden" mat-button
                    matTooltip="{{ 'filter.filters' | translate }}"
                    matTooltipPosition="below"
                    (click)="openFilters($event)">
              <mat-icon>filter_list</mat-icon>
              {{ 'filter.filters' | translate }}
            </button>
          </ng-container>
          <ng-container *ngIf="isEdit">
            <button class="gt-lg:!hidden" mat-icon-button
                    matTooltip="{{ 'entity.aliases' | translate }}"
                    matTooltipPosition="below"
                    (click)="openEntityAliases($event)">
              <mat-icon>devices_other</mat-icon>
            </button>
            <button class="lt-xl:!hidden" mat-button
                    matTooltip="{{ 'entity.aliases' | translate }}"
                    matTooltipPosition="below"
                    (click)="openEntityAliases($event)">
              <mat-icon>devices_other</mat-icon>
              {{ 'entity.aliases-short' | translate }}
            </button>
          </ng-container>
          <ng-container *ngIf="isEdit">
            <button class="gt-lg:!hidden" mat-icon-button
                    matTooltip="{{ 'dashboard.settings' | translate }}"
                    matTooltipPosition="below"
                    (click)="openDashboardSettings($event)">
              <mat-icon>settings</mat-icon>
            </button>
            <button class="lt-xl:!hidden" mat-button
                    matTooltip="{{ 'dashboard.settings' | translate }}"
                    matTooltipPosition="below"
                    (click)="openDashboardSettings($event)">
              <mat-icon>settings</mat-icon>
              {{ 'dashboard.settings' | translate }}
            </button>
          </ng-container>
          <button [class.!hidden]="!currentDashboardId || isEdit || isMobileApp || !isTenantAdmin() || !displayUpdateDashboardImage()" mat-icon-button
                  matTooltip="{{'dashboard.update-image' | translate}}"
                  matTooltipPosition="below"
                  (click)="updateDashboardImage($event)">
            <mat-icon>wallpaper</mat-icon>
          </button>
          <ng-container *ngIf="isEdit; else timewindowTemplate">
            <tb-timewindow class="lt-xl:!hidden" asButton
                           flatButton
                           [displayTimewindowValue]="false"
                           [isEdit]="true"
                           tooltipPosition="below"
                           aggregation="true"
                           timezone="true"
                           [(ngModel)]="dashboardCtx.dashboardTimewindow">
            </tb-timewindow>
            <tb-timewindow class="gt-lg:!hidden"
                           hideLabel
                           [isEdit]="true"
                           tooltipPosition="below"
                           aggregation="true"
                           timezone="true"
                           [(ngModel)]="dashboardCtx.dashboardTimewindow">
            </tb-timewindow>
          </ng-container>
          <ng-template #timewindowTemplate>
            <ng-container *ngIf="displayDashboardTimewindow()">
              <tb-timewindow class="gt-md:!hidden"
                             [isEdit]="false"
                             hideLabel
                             tooltipPosition="below"
                             aggregation="true"
                             timezone="true"
                             [(ngModel)]="dashboardCtx.dashboardTimewindow">
              </tb-timewindow>
              <tb-timewindow class="lt-lg:!hidden"
                             [isEdit]="false"
                             tooltipPosition="below"
                             aggregation="true"
                             timezone="true"
                             [(ngModel)]="dashboardCtx.dashboardTimewindow">
              </tb-timewindow>
            </ng-container>
          </ng-template>
          <ng-container *ngIf="isEdit">
            <button class="gt-md:!hidden" mat-icon-button
                    matTooltip="{{ 'dashboard.add-widget-button-text' | translate }}"
                    matTooltipPosition="below"
                    (click)="addWidget($event)">
              <mat-icon>add</mat-icon>
            </button>
            <button class="lt-lg:!hidden" mat-stroked-button
                    matTooltip="{{ 'dashboard.add-widget-button-text' | translate }}"
                    matTooltipPosition="below"
                    (click)="addWidget($event)">
              <mat-icon>add</mat-icon>
              {{ 'dashboard.add-widget-button-text' | translate }}
            </button>
          </ng-container>
          <tb-filters-edit [class.!hidden]="isEdit || !displayFilters()"
                           tooltipPosition="below"
                           [aliasController]="dashboardCtx.aliasController">
          </tb-filters-edit>
          <tb-aliases-entity-select [class.!hidden]="isEdit || !displayEntitiesSelect()"
                                    tooltipPosition="below"
                                    [aliasController]="dashboardCtx.aliasController">
          </tb-aliases-entity-select>
          <tb-dashboard-select *ngIf="!isEdit && !widgetEditMode && !embedded && displayDashboardsSelect()"
                               [(ngModel)]="currentDashboardId"
                               (ngModelChange)="currentDashboardIdChanged(currentDashboardId)"
                               [customerId]="currentCustomerId"
                               [dashboardsScope]="currentDashboardScope">
          </tb-dashboard-select>
        </div>
      </div>
    </tb-dashboard-toolbar>
  </section>
  <section class="tb-dashboard-container tb-absolute-fill"
           tb-toast toastTarget="dashboardRoot"
           #dashboardContainer
           [class.is-fullscreen]="forceFullscreen"
           [class.tb-dashboard-toolbar-opened]="toolbarOpened"
           [class.tb-dashboard-toolbar-animated]="isToolbarOpenedAnimate"
           [class.tb-dashboard-toolbar-closed]="!toolbarOpened">
    <mat-drawer-container hasBackdrop="false" class="tb-absolute-fill tb-dashboard-drawer-container">
      <mat-drawer-content #dashboardContent class="flex flex-col justify-center items-start">
        <section *ngIf="!widgetEditMode" class="tb-dashboard-title"
                 [style.color]="dashboard.configuration.settings.titleColor">
          <h3 [class.!hidden]="isEdit || !displayTitle()">{{ translatedDashboardTitle }}</h3>
          <mat-form-field [class.!hidden]="!isEdit" class="mat-block tb-appearance-transparent" subscriptSizing="dynamic">
            <mat-label translate [style.color]="dashboard.configuration.settings.titleColor">dashboard.title</mat-label>
            <input matInput class="tb-dashboard-title"
                   [style.color]="dashboard.configuration.settings.titleColor"
                   required name="title" [(ngModel)]="dashboard.title">
          </mat-form-field>
        </section>
        <mat-drawer-container class="tb-dashboard-layouts flex-1"
                              [class.tb-shrinked]="isEditingWidget">
          <mat-drawer *ngIf="layouts.right.show"
                      id="tb-right-layout"
                      style="border-left: none"
                      [style.min-width]="rightLayoutSize.width"
                      [style.max-width]="rightLayoutSize.width"
                      [style.height]="rightLayoutSize.height"
              disableClose="true"
              [@.disabled]="!isMobile"
              position="end"
              [mode]="isMobile ? 'over' : 'side'"
              [(opened)]="rightLayoutOpened">
            <tb-dashboard-layout style="height: 100%;"
              [dashboardCheatSheet]="cheatSheetComponent"
              [layoutCtx]="mobileDisplayRightLayoutFirst ? layouts.main.layoutCtx : layouts.right.layoutCtx"
              [dashboardCtx]="dashboardCtx"
              [isEdit]="isEdit"
              [isEditingWidget]="isEditingWidget"
              [isMobile]="forceDashboardMobileMode"
              [widgetEditMode]="widgetEditMode"
              [parentDashboard]="parentDashboard"
              [popoverComponent]="popoverComponent">
            </tb-dashboard-layout>
          </mat-drawer>
          <mat-drawer-content [class.!hidden]="!layouts.main.show"
                              id="tb-main-layout"
                              [style.width]="mainLayoutSize.width"
                              [style.height]="mainLayoutSize.height">
            <tb-dashboard-layout
              [style.max-width]="mainLayoutSize.maxWidth"
              [style.min-width]="mainLayoutSize.minWidth"
              [dashboardCheatSheet]="cheatSheetComponent"
              [layoutCtx]="mobileDisplayRightLayoutFirst ? layouts.right.layoutCtx : layouts.main.layoutCtx"
              [dashboardCtx]="dashboardCtx"
              [isEdit]="isEdit"
              [isEditingWidget]="isEditingWidget"
              [isMobile]="forceDashboardMobileMode"
              [widgetEditMode]="widgetEditMode"
              [parentDashboard]="parentDashboard"
              [popoverComponent]="popoverComponent">
            </tb-dashboard-layout>
            <div class="layout-filler"
                 *ngIf="isEdit"
                 [class.!hidden]="!showMainLayoutFiller">
              {{ 'dashboard.breakpoint-value' | translate : {value: currentBreakpointValue } }}
            </div>
          </mat-drawer-content>
        </mat-drawer-container>
        <section data-html2canvas-ignore class="tb-header-buttons tb-enter-edit-mode flex flex-row flex-wrap justify-start items-end" *ngIf="!readonly && (hideToolbar || widgetEditMode)">
          <button [class.!hidden]="isEdit"
                  color="primary"
                  mat-mini-fab
                  class="tb-btn-header tb-btn-edit"
                  (click)="toggleDashboardEditMode()"
                  matTooltip="{{ 'action.enter-edit-mode' | translate }}"
                  matTooltipPosition="above">
            <mat-icon>edit</mat-icon>
          </button>
          <button [class.!hidden]="!isEdit"
                  color="primary"
                  mat-mini-fab
                  class="tb-btn-header tb-btn-edit"
                  (click)="saveDashboard()"
                  [disabled]="isLoading$ | async"
                  matTooltip="{{'action.save' | translate}}"
                  matTooltipPosition="below">
            <mat-icon>done</mat-icon></button>
          <button [class.!hidden]="!isEdit"
                  color="primary"
                  mat-mini-fab
                  class="tb-btn-header tb-btn-edit"
                  (click)="toggleDashboardEditMode()"
                  [disabled]="isLoading$ | async"
                  matTooltip="{{'action.cancel' | translate}}"
                  matTooltipPosition="below">
            <mat-icon>close</mat-icon></button>
        </section>
        <section *ngIf="!embedded" data-html2canvas-ignore class="tb-powered-by-footer" [style.color]="dashboard.configuration.settings.titleColor">
          <span>Powered by <a href="https://thingsboard.io" target="_blank">Thingsboard v.{{ thingsboardVersion }}</a></span>
        </section>
      </mat-drawer-content>
      <mat-drawer class="tb-details-drawer"
                  [opened]="isEditingWidget || isAddingWidget"
                  (openedStart)="detailsDrawerOpenedStart()"
                  (closed)="detailsDrawerClosed()"
                  disableClose
                  mode="over"
                  position="end">
        <tb-details-panel *ngIf="!isEditingWidgetClosed" class="flex-1"
                          headerTitle="{{editingWidget?.config.title}}"
                          headerSubtitle="{{ editingWidgetSubtitle }}"
                          [isReadOnly]="true"
                          (closeDetails)="onEditWidgetClosed()">
          <div class="details-buttons flex flex-row justify-start items-center gap-4">
            <tb-toggle-select *ngIf="tbEditWidget.widgetConfig?.hasBasicMode" appearance="fill-invert" selectMediaBreakpoint="xs" [(ngModel)]="tbEditWidget.widgetConfigMode">
              <tb-toggle-option value="basic">{{ 'widget.basic-mode' | translate }}</tb-toggle-option>
              <tb-toggle-option value="advanced">{{ 'widget.advanced-mode' | translate }}</tb-toggle-option>
            </tb-toggle-select>
            <div [tb-help]="helpLinkIdForWidgetType()"></div>
          </div>
          <tb-edit-widget #tbEditWidget
                          [dashboard]="dashboard"
                          [aliasController]="dashboardCtx.aliasController"
                          [stateController]="dashboardCtx.stateController"
                          [widgetEditMode]="widgetEditMode"
                          [widget]="editingWidget"
                          [widgetLayout]="editingWidgetLayout"
                          [showLayoutConfig]="showLayoutConfigInEdit(editingLayoutCtx)"
                          [isDefaultBreakpoint]="editingLayoutCtx?.breakpoint === 'default'"
                          (revertWidgetConfig)="onRevertWidgetEdit()"
                          (applyWidgetConfig)="saveWidget()">
          </tb-edit-widget>
        </tb-details-panel>
        <tb-details-panel *ngIf="!isAddingWidgetClosed && !widgetEditMode" class="flex-1"
                          headerTitle="{{ isAddingWidget ?
                            ((dashboardWidgetSelectComponent?.selectWidgetMode === 'allWidgets' ? ('dashboard.select-widget-value' | translate: { title: ('widget.all-widgets' | translate) }) :
                               (!dashboardWidgetSelectComponent?.widgetsBundle ?
                                   'widget.select-widgets-bundle' : 'dashboard.select-widget-value') | translate: dashboardWidgetSelectComponent?.widgetsBundle)) : ''
                          }}"
                          headerHeightPx="64"
                          [isShowSearch]="true"
                          [isReadOnly]="true"
                          [isEdit]="false"
                          backgroundColor="#cfd8dc"
                          (closeDetails)="onAddWidgetClosed()"
                          (closeSearch)="dashboardWidgetSelectComponent.search = ''">
          <div class="prefix-title-buttons" [class.!hidden]="!(isAddingWidget && (dashboardWidgetSelectComponent?.widgetsBundle || dashboardWidgetSelectComponent?.selectWidgetMode === 'allWidgets'))" style="height: 28px; margin-right: 12px">
            <button class="tb-mat-28" mat-icon-button type="button" (click)="clearSelectedWidgetBundle()">
              <mat-icon>arrow_back</mat-icon>
            </button>
          </div>
          <div class="search-pane flex flex-row" *ngIf="isAddingWidget && dashboardWidgetSelectComponent">
            <tb-widgets-bundle-search class="flex-1"
                                      [(ngModel)]="dashboardWidgetSelectComponent.search"
                                      placeholder="{{ ((!dashboardWidgetSelectComponent.widgetsBundle && dashboardWidgetSelectComponent.selectWidgetMode === 'bundles')
                                                        ? 'widgets-bundle.search' : 'widget.search') | translate }}">
            </tb-widgets-bundle-search>
          </div>
          <div class="details-buttons flex flex-row justify-start items-center" *ngIf="isAddingWidget">
            <button mat-button type="button" (click)="importWidget($event)"
                    *ngIf="dashboardWidgetSelectComponent?.selectWidgetMode === 'bundles' && !dashboardWidgetSelectComponent?.widgetsBundle">
              <mat-icon>file_upload</mat-icon>{{ 'dashboard.import-widget' | translate }}</button>
            <tb-toggle-select *ngIf="dashboardWidgetSelectComponent?.selectWidgetMode === 'bundles' && !dashboardWidgetSelectComponent?.widgetsBundle"
                              appearance="fill-invert"
                              disablePagination
                              selectMediaBreakpoint="xs"
                              [(ngModel)]="dashboardWidgetSelectComponent.selectWidgetMode">
              <tb-toggle-option value="bundles">{{ 'widgets-bundle.widgets-bundles' | translate }}</tb-toggle-option>
              <tb-toggle-option value="allWidgets">{{ 'widget.all-widgets' | translate }}</tb-toggle-option>
            </tb-toggle-select>
            <button mat-icon-button type="button"
                    *ngIf="dashboardWidgetSelectComponent?.widgetTypes.size > 1"
                    (click)="editWidgetsTypesToDisplay($event)"
                    matTooltip="{{ 'widget.filter' | translate }}"
                    matTooltipPosition="above">
              <mat-icon>filter_list</mat-icon>
            </button>
            <tb-toggle-select *ngIf="dashboardWidgetSelectComponent?.hasDeprecated"
                              appearance="fill-invert"
                              disablePagination
                              selectMediaBreakpoint="xs"
                              [(ngModel)]="dashboardWidgetSelectComponent.deprecatedFilter">
              <tb-toggle-option value="ALL">{{ 'widget.all' | translate }}</tb-toggle-option>
              <tb-toggle-option value="ACTUAL">{{ 'widget.actual' | translate }}</tb-toggle-option>
              <tb-toggle-option value="DEPRECATED">{{ 'widget.deprecated' | translate }}</tb-toggle-option>
            </tb-toggle-select>
          </div>
          <tb-dashboard-widget-select #dashboardWidgetSelect
                                      *ngIf="isAddingWidget"
                                      [aliasController]="dashboardCtx.aliasController"
                                      [filterWidgetTypes]="filterWidgetTypes"
                                      [scadaFirst]="layouts.main.layoutCtx.gridSettings.layoutType === LayoutType.scada"
                                      (widgetSelected)="addWidgetFromType($event)">
          </tb-dashboard-widget-select>
        </tb-details-panel>
      </mat-drawer>
    </mat-drawer-container>
  </section>
</div>