Dashboard Widget Select.Component

@if (showTopLevelWidgetModeToggle()) { now_widgets {{ 'widget.installed' | translate }}

hub {{ 'iot-hub.iot-hub' | translate }}

} @else if (showBackButton()) { arrow_back{{ getHeaderTitle() }} } @if (selectWidgetMode === 'installed') { file_upload } close

search @if (search) { close } @if (isFilterVisible()) { filter_list } @if (selectWidgetMode === 'iotHub' && iotHubSubMode !== 'default') { {{ iotHubSortOptions[iotHubSelectedSortIndex].label | translate }} arrow_drop_down @for (option of iotHubSortOptions; track option.value; let i = $index) { {{ option.label | translate }} } }

@switch (selectWidgetMode) { @case ('installed') { @if (widgetsBundle) { } @else if (installedSubMode === 'allWidgets') { } @else { @switch (item.__logical) { @case (LOGICAL_ALL_WIDGETS) {

{{ 'widget.all-widgets' | translate }}

} @default {

{{item.title}}

@if (isSystem(item)) { sys } i

!{{ item.title }} } } {{ 'widgets-bundle.loading-widgets-bundles' | translate }} } } @case ('iotHub') { @switch (iotHubSubMode) { @case ('default') { @switch (item.__logical) { @case (LOGICAL_ALL_WIDGETS) {

{{ 'widget.all-widgets' | translate }}

} @case (LOGICAL_INSTALLED_FROM_IOT_HUB) {

{{ 'iot-hub.installed-from-iot-hub' | translate }}

} @default {

{{ item.name }}

@if (getCategoryImageUrl(item); as imgUrl) { !{{ item.name }} } @else { } } }

} @case ('installed') { } @default { } } } }

{{item.name}}

{{ 'widget.' + item.widgetType + '-short' | translate }}

i

@if (item.deprecated) { widget.deprecated }

!{{ item.title }}

{{ 'widget.loading-widgets' | translate }}

{{ 'widget.loading-widgets' | translate }}

{{ 'widget.loading-widgets' | translate }}

{{ 'iot-hub.no-widgets-found' | translate }}

{{ 'iot-hub.no-items-found-text' | translate }}

@if (hasActiveSearchOrFilters()) { {{ 'iot-hub.clear-all-filters' | translate }} } @if (selectWidgetMode === 'installed' && installedSubMode === 'allWidgets') { storefront

{{ 'iot-hub.browse-tip-prefix' | translate }} {{ 'iot-hub.browse-tip-link' | translate }} {{ 'iot-hub.browse-tip-suffix' | translate }}

arrow_forward }

{{item.name}}

@if (item.dataDescriptor?.widgetType) { {{ 'widget.' + item.dataDescriptor.widgetType + '-short' | translate }} } i

@if (getIotHubItemImage(item); as imgUrl) { !{{ item.name }} } @else { }

@if (item.creatorVerified) { verified } @else { person } {{ item.creatorDisplayName }} @if (showInstalledBadge && isIotHubWidgetInstalled(item)) { check {{ 'iot-hub.installed' | translate }} } file_download {{ item.totalInstallCount | shortNumber }}

{{ 'iot-hub.filters' | translate }} @if (hasActiveFilters()) { {{ 'iot-hub.clear-all' | translate }} } close

@if (selectWidgetMode === 'installed') { @if (widgetTypes.size > 1) { {{ 'iot-hub.type' | translate }} @if (filterWidgetTypes?.length) { {{ filterWidgetTypes.length }} } @for (type of widgetTypesList; track type) { {{ getWidgetTypeLabel(type) }} } } @if (hasDeprecated) { @if (widgetTypes.size > 1) { } {{ 'iot-hub.include-deprecated' | translate }} } } @else { {{ 'iot-hub.type' | translate }} @if (iotHubAppliedWidgetTypes.size) { {{ iotHubAppliedWidgetTypes.size }} } @if (iotHubWidgetTypeOptions.length >= 10) { search @if (iotHubFilterSearch['widgetType']) { close } } 8" (mouseenter)="getFilteredIotHubItems(iotHubWidgetTypeOptions, 'widgetType').length > 8 && (iotHubFilterItemsHovered = true)" (mouseleave)="iotHubFilterItemsHovered = false"> @for (opt of getFilteredIotHubItems(iotHubWidgetTypeOptions, 'widgetType'); track opt.key) { {{ getIotHubWidgetTypeLabel(opt.key) }} } @if (!hideCategoriesFilterSection) { {{ 'iot-hub.category' | translate }} @if (iotHubAppliedCategories.size) { {{ iotHubAppliedCategories.size }} } @if (iotHubCategoryOptions.length >= 10) { search @if (iotHubFilterSearch['category']) { close } } 8" (mouseenter)="getFilteredIotHubItems(iotHubCategoryOptions, 'category').length > 8 && (iotHubFilterItemsHovered = true)" (mouseleave)="iotHubFilterItemsHovered = false"> @for (opt of getFilteredIotHubItems(iotHubCategoryOptions, 'category'); track opt.key) { {{ opt.key }} } } {{ 'iot-hub.use-case' | translate }} @if (iotHubAppliedUseCases.size) { {{ iotHubAppliedUseCases.size }} } @if (iotHubUseCaseOptions.length >= 10) { search @if (iotHubFilterSearch['useCase']) { close } } 8" (mouseenter)="getFilteredIotHubItems(iotHubUseCaseOptions, 'useCase').length > 8 && (iotHubFilterItemsHovered = true)" (mouseleave)="iotHubFilterItemsHovered = false"> @for (group of getGroupedIotHubFilterItems(iotHubUseCaseOptions, 'useCase'); track group.label) { @if (group.label) { {{ group.label | translate }} } @for (opt of group.items; track opt.key) { {{ opt.key }} } } }