-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ [noData]="noData">
-
+
- {{(selectWidgetMode === 'bundles' ? 'widgets-bundle.empty' : 'widget.no-widgets-text') | translate}}
-
-
+
+
+
+
+
+
+ [dataLoading]="loadingIotHubWidgets"
+ [noData]="noData">
-
-
-
+
+
-
+
-
- widgets-bundle.no-widgets-bundles-text
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss
index 04803e6a00..d77a929fd8 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss
@@ -13,10 +13,256 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+@import "../../../../../scss/constants";
+@import "../iot-hub/iot-hub-common";
+
+tb-dashboard-widget-select {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ min-height: 0;
+}
+
.tb-dashboard-widget-select {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ min-height: 0;
background-color: #cfd8dc;
- position: absolute;
- inset: 0;
+
+ mat-toolbar.tb-widget-select-header {
+ flex-shrink: 0;
+ width: 100%;
+ height: auto;
+ gap: 16px;
+ color: #fff;
+ padding: 12px 12px 12px 24px;
+
+ button.mat-mdc-icon-button.mat-mdc-button-base {
+ --mdc-icon-button-state-layer-size: 40px;
+ --mat-icon-button-state-layer-size: 40px;
+ --mdc-icon-button-icon-color: #fff;
+ padding: 8px;
+ color: #fff;
+ }
+ }
+
+ .tb-widget-select-title-row {
+ gap: 8px;
+ width: 100%;
+ min-height: 40px;
+
+ .tb-widget-select-title {
+ font-size: 24px;
+ line-height: 32px;
+ font-weight: 400;
+ color: #fff;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ min-width: 0;
+ }
+ }
+
+ .tb-top-level-widget-mode-toggle {
+ .tb-toggle-container {
+ .mat-button-toggle-group.mat-button-toggle-group-appearance-standard.tb-toggle-header {
+ height: 42px;
+ border-radius: 8px;
+ overflow: hidden;
+ padding: 0;
+ border: 1px solid rgba(255, 255, 255, 0.15);
+ .mat-button-toggle.mat-button-toggle-appearance-standard {
+ .mat-button-toggle-focus-overlay, .mat-button-toggle-ripple {
+ border-radius: 0;
+ }
+ .mat-button-toggle-button {
+ height: 40px;
+ .mat-button-toggle-label-content {
+ line-height: 36px;
+ font-weight: 500;
+ }
+ }
+ &.mat-button-toggle-checked {
+ .mat-button-toggle-button {
+ border: none;
+ border-radius: 0;
+ }
+ }
+ }
+ &.tb-fill.tb-invert {
+ .mat-button-toggle.mat-button-toggle-appearance-standard {
+ color: #FFF;
+ }
+ }
+ }
+ }
+ }
+
+ .tb-widget-select-search-row {
+ width: 100%;
+ gap: 8px;
+
+ .tb-widget-select-search {
+ height: 40px;
+ padding: 8px 12px;
+ background: rgba(255, 255, 255, 0.16);
+ border: 1px solid rgba(255, 255, 255, 0.15);
+ border-radius: 8px;
+ caret-color: $tb-primary-color;
+ color: rgba(255, 255, 255, 0.84);
+
+ mat-icon {
+ color: rgba(255, 255, 255, 0.8);
+ }
+
+ input {
+ width: 100%;
+ height: 100%;
+ min-width: 0;
+ padding: 0;
+ font-size: 16px;
+ line-height: 24px;
+ background: transparent;
+ color: #fff;
+ border: none;
+ outline: none;
+
+ &::placeholder {
+ color: rgba(255, 255, 255, 0.8);
+ opacity: 1;
+ }
+ }
+
+ button.mat-mdc-icon-button mat-icon {
+ color: rgba(255, 255, 255, 0.8);
+ }
+
+ &.focus {
+ background: #fff;
+ border-color: rgba(255, 255, 255, 0.15);
+ caret-color: $tb-primary-color;
+
+ mat-icon {
+ color: rgba(0, 0, 0, 0.54);
+ }
+
+ input {
+ color: rgba(0, 0, 0, 0.76);
+ opacity: 1;
+
+ &::placeholder {
+ color: rgba(0, 0, 0, 0.38);
+ }
+ }
+
+ button.mat-mdc-icon-button mat-icon,
+ mat-icon.close {
+ color: rgba(0, 0, 0, 0.54) !important;
+ opacity: 1;
+ }
+ }
+ }
+
+ .tb-widget-select-sort {
+ color: #fff;
+ font-weight: 500;
+ font-size: 14px;
+ letter-spacing: 0.25px;
+
+ mat-icon {
+ color: #fff;
+ }
+ }
+ }
+
+ .tb-widget-select-body {
+ position: relative;
+ flex: 1;
+ min-height: 0;
+ overflow: hidden;
+ }
+
+ .tb-widget-logical-card,
+ .tb-widget-category-card {
+ .widget-title {
+ color: rgba(0, 0, 0, 0.87);
+ font-weight: 600;
+ }
+ }
+
+ .tb-widget-select-empty-state {
+ padding: 40px 12px;
+ text-align: center;
+ gap: 40px;
+
+ .tb-widget-select-empty-inner {
+ gap: 20px;
+
+ .tb-no-data-bg {
+ flex: auto;
+ height: 100px;
+ }
+
+ h3 {
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 24px;
+ letter-spacing: 0.1px;
+ color: rgba(0, 0, 0, 0.87);
+ margin: 0;
+ }
+
+ p {
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.2px;
+ color: rgba(0, 0, 0, 0.76);
+ margin: 0;
+ }
+ }
+
+ .tb-widget-select-browse-tip {
+ display: flex;
+ width: 100%;
+ gap: 16px;
+ align-items: center;
+ padding: 16px 20px;
+ border: 1px solid $tb-primary-color;
+ border-radius: 4px;
+ background: #fff;
+ cursor: pointer;
+ transition: background-color 0.2s;
+
+ &:hover {
+ background: rgba($tb-primary-color, 0.06);
+ }
+
+ .tb-widget-select-browse-tip-icon,
+ .tb-widget-select-browse-tip-arrow {
+ flex-shrink: 0;
+ color: $tb-primary-color;
+ }
+
+ .tb-widget-select-browse-tip-text {
+ flex: 1;
+ text-align: left;
+ margin: 0;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0.15px;
+ color: rgba(0, 0, 0, 0.76);
+
+ .tb-widget-select-browse-tip-link {
+ font-weight: 500;
+ letter-spacing: 0.25px;
+ color: $tb-primary-color;
+ }
+ }
+ }
+ }
.mat-mdc-card.tb-widget-preview-card {
cursor: pointer;
@@ -137,6 +383,250 @@
height: 100%;
}
}
+
+ // IoT Hub widget card footer
+ .tb-iot-hub-widget-card {
+ .tb-iot-hub-widget-footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding-top: 4px;
+ }
+
+ .tb-iot-hub-widget-author,
+ .tb-iot-hub-widget-installs {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 16px;
+ letter-spacing: 0.25px;
+ color: rgba(0, 0, 0, 0.54);
+
+ mat-icon {
+ font-size: 16px;
+ width: 16px;
+ height: 16px;
+ color: rgba(0, 0, 0, 0.54);
+
+ &.tb-iot-hub-verified-icon {
+ color: #00695c;
+ }
+ }
+ }
+
+ .tb-iot-hub-widget-installed-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 2px;
+ padding: 1px 6px;
+ border-radius: 10px;
+ background: rgba(25, 128, 56, 0.06);
+ color: #198038;
+ font-size: 10px;
+ font-weight: 500;
+ line-height: 14px;
+ letter-spacing: 0.2px;
+ white-space: nowrap;
+
+ mat-icon {
+ font-size: 12px;
+ width: 12px;
+ height: 12px;
+ color: #198038;
+ }
+ }
+
+ .tb-iot-hub-widget-installs {
+ font-weight: 500;
+
+ mat-icon {
+ font-size: 12px;
+ width: 12px;
+ height: 12px;
+ }
+ }
+ }
+}
+
+// IoT Hub filter panel
+.tb-iot-hub-filter-panel {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ max-height: 500px;
+
+ .tb-iot-hub-filter-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
+
+ .tb-wsp-clear-all.mat-mdc-outlined-button {
+ --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
+ height: 40px;
+ line-height: 20px;
+ font-size: 14px;
+ font-weight: 500;
+ letter-spacing: 0.25px;
+ padding: 0 16px;
+ }
+
+ .tb-wsp-close.mat-mdc-icon-button {
+ color: rgba(0, 0, 0, 0.54);
+ }
+
+ .tb-iot-hub-filter-title {
+ font-size: 16px;
+ font-weight: 500;
+ line-height: 24px;
+ letter-spacing: 0.25px;
+ color: rgba(0, 0, 0, 0.87);
+ }
+
+ .tb-iot-hub-filter-sections {
+ overflow-y: auto;
+ padding-right: 8px;
+
+ &::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background-color: rgba(0, 0, 0, 0.04);
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: rgba(0, 0, 0, 0.2);
+ border-radius: 3px;
+
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.35);
+ }
+ }
+
+ &.filter-items-hovered {
+ &::-webkit-scrollbar-track {
+ background-color: transparent;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: transparent;
+ }
+ }
+
+ mat-expansion-panel {
+ box-shadow: none;
+ background: transparent;
+
+ .mat-expansion-panel-body {
+ padding: 0;
+ }
+
+ .mat-expansion-panel-header {
+ padding: 8px 16px 8px 8px;
+ height: 40px;
+ min-height: 40px;
+ }
+ }
+
+ mat-divider {
+ margin: 8px 0;
+ }
+ }
+
+ .tb-iot-hub-filter-search {
+ @include tb-iot-hub-search-container;
+ margin: 4px 8px;
+
+ mat-icon {
+ @include tb-iot-hub-search-icon(rgba(0, 0, 0, 0.54));
+ }
+
+ input {
+ @include tb-iot-hub-search-input-text(0.2px);
+ }
+
+ .tb-iot-hub-filter-search-clear.mat-mdc-icon-button {
+ @include tb-iot-hub-search-clear;
+ }
+ }
+
+ .tb-iot-hub-filter-items {
+ max-height: 340px;
+ overflow-y: auto;
+
+ &::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background-color: transparent;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: transparent;
+ border-radius: 3px;
+ }
+
+ &:hover {
+ &::-webkit-scrollbar-track {
+ background-color: rgba(0, 0, 0, 0.04);
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: rgba(0, 0, 0, 0.2);
+
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.35);
+ }
+ }
+ }
+ }
+
+ .tb-iot-hub-filter-group-label {
+ font-size: 14px;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.54);
+ letter-spacing: 0.5px;
+ padding: 12px 0 4px 12px;
+ }
+
+ .tb-iot-hub-filter-option {
+ height: 40px;
+ display: flex;
+ align-items: center;
+ padding: 8px 0;
+ overflow: hidden;
+ }
+
+ .tb-iot-hub-filter-badge {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 18px;
+ height: 18px;
+ border-radius: 9px;
+ background: #FF5722;
+ color: white;
+ font-size: 11px;
+ font-weight: 600;
+ margin-left: 8px;
+ padding: 0 4px;
+ }
+
+ .tb-iot-hub-filter-actions {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding-top: 8px;
+ }
+
+ .tb-widget-select-include-deprecated {
+ padding: 8px 8px 4px;
+ }
+
}
@keyframes shine {
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.ts
index bf4a7b78eb..3034cee011 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.ts
@@ -14,7 +14,7 @@
/// limitations under the License.
///
-import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, Output, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
import { IAliasController } from '@core/api/widget-api.models';
import { NULL_UUID } from '@shared/models/id/has-uuid';
@@ -27,15 +27,36 @@ import {
WidgetTypeInfo
} from '@shared/models/widget.models';
import { debounceTime, distinctUntilChanged, map, skip } from 'rxjs/operators';
-import { BehaviorSubject, combineLatest } from 'rxjs';
-import { isObject } from '@core/utils';
+import { BehaviorSubject, combineLatest, forkJoin, of } from 'rxjs';
import { PageLink } from '@shared/models/page/page-link';
-import { Direction } from '@shared/models/page/sort-order';
+import { Direction, SortOrder } from '@shared/models/page/sort-order';
import { GridEntitiesFetchFunction, ScrollGridColumns } from '@shared/components/grid/scroll-grid-datasource';
import { ItemSizeStrategy } from '@shared/components/grid/scroll-grid.component';
import { coerceBoolean } from '@shared/decorators/coercion';
+import { TranslateService } from '@ngx-translate/core';
+import { MpItemVersionQuery, MpItemVersionView, widgetTypeTranslations } from '@shared/models/iot-hub/iot-hub-version.models';
+import { ItemType, FilterParamInfo, WidgetCategory } from '@shared/models/iot-hub/iot-hub-item.models';
+import { IotHubInstalledItem } from '@shared/models/iot-hub/iot-hub-installed-item.models';
+import { IotHubApiService } from '@core/http/iot-hub-api.service';
+import { IotHubActionsService } from '@home/components/iot-hub/iot-hub-actions.service';
+import { filterIotHubItemsBySearch, groupIotHubFilterItems, IotHubFilterGroup, resolveIotHubItemImageUrl } from '@home/components/iot-hub/iot-hub-utils';
+
+type selectWidgetMode = 'installed' | 'iotHub';
+type installedSubMode = 'default' | 'allWidgets';
+type iotHubSubMode = 'default' | 'allWidgets' | 'installed' | 'category';
+
+interface WidgetSelectSortOption {
+ value: string;
+ label: string;
+ direction: Direction;
+}
+
+const LOGICAL_ALL_WIDGETS = '__logical_all_widgets__';
+const LOGICAL_INSTALLED_FROM_IOT_HUB = '__logical_installed_from_iot_hub__';
-type selectWidgetMode = 'bundles' | 'allWidgets';
+interface LogicalCard {
+ __logical: typeof LOGICAL_ALL_WIDGETS | typeof LOGICAL_INSTALLED_FROM_IOT_HUB;
+}
interface WidgetsFilter {
search: string;
@@ -54,7 +75,7 @@ interface BundleWidgetsFilter extends WidgetsFilter {
encapsulation: ViewEncapsulation.None,
standalone: false
})
-export class DashboardWidgetSelectComponent implements OnInit {
+export class DashboardWidgetSelectComponent {
private searchSubject = new BehaviorSubject('');
private search$ = this.searchSubject.asObservable().pipe(
@@ -62,12 +83,25 @@ export class DashboardWidgetSelectComponent implements OnInit {
private filterWidgetTypes$ = new BehaviorSubject>(null);
private deprecatedFilter$ = new BehaviorSubject(DeprecatedFilter.ACTUAL);
- private selectWidgetMode$ = new BehaviorSubject('bundles');
+ private selectWidgetMode$ = new BehaviorSubject('installed');
+ private installedSubMode$ = new BehaviorSubject('default');
+ private iotHubSubMode$ = new BehaviorSubject('default');
private widgetsBundle$ = new BehaviorSubject(null);
widgetTypes = new Set();
hasDeprecated = false;
+ iotHubSelectedCategory: string = null;
+ includeDeprecated = false;
+ searchFocused = false;
+
+ iotHubSortOptions: WidgetSelectSortOption[] = [
+ { value: 'totalInstallCount', label: 'iot-hub.sort-most-installed', direction: Direction.DESC },
+ { value: 'publishedTime', label: 'iot-hub.sort-newest', direction: Direction.DESC },
+ { value: 'name', label: 'iot-hub.sort-name', direction: Direction.ASC }
+ ];
+ iotHubSelectedSortIndex = 0;
+
@Input()
aliasController: IAliasController;
@@ -84,7 +118,6 @@ export class DashboardWidgetSelectComponent implements OnInit {
return this.searchSubject.value;
}
- @Input()
set filterWidgetTypes(widgetTypes: Array) {
this.filterWidgetTypes$.next(widgetTypes);
}
@@ -96,16 +129,23 @@ export class DashboardWidgetSelectComponent implements OnInit {
@Input()
set selectWidgetMode(mode: selectWidgetMode) {
if (this.selectWidgetMode$.value !== mode) {
- if (mode === 'bundles' && this.widgetsBundle$.value === null) {
- this.widgetTypes.clear();
- this.hasDeprecated = false;
- } else {
- this.widgetTypes = new Set(Object.keys(widgetType).map(t => t as widgetType));
- this.hasDeprecated = true;
- }
+ this.resetSubModes();
this.filterWidgetTypes$.next(null);
this.deprecatedFilter$.next(DeprecatedFilter.ACTUAL);
+ this.includeDeprecated = false;
this.selectWidgetMode$.next(mode);
+ this.updateWidgetTypesForCurrentState();
+ if (mode === 'iotHub') {
+ this.loadInstalledWidgets();
+ this.loadIotHubFilterInfo();
+ this.loadWidgetCategories();
+ } else {
+ this.installedWidgetVersions = null;
+ this.iotHubAppliedWidgetTypes.clear();
+ this.iotHubAppliedCategories.clear();
+ this.iotHubAppliedUseCases.clear();
+ this.iotHubFilterCount = 0;
+ }
}
}
@@ -113,6 +153,40 @@ export class DashboardWidgetSelectComponent implements OnInit {
return this.selectWidgetMode$.value;
}
+ set installedSubMode(sub: installedSubMode) {
+ if (this.installedSubMode$.value !== sub) {
+ this.installedSubMode$.next(sub);
+ this.filterWidgetTypes$.next(null);
+ this.deprecatedFilter$.next(DeprecatedFilter.ACTUAL);
+ this.includeDeprecated = false;
+ this.updateWidgetTypesForCurrentState();
+ }
+ }
+
+ get installedSubMode(): installedSubMode {
+ return this.installedSubMode$.value;
+ }
+
+ set iotHubSubMode(sub: iotHubSubMode) {
+ if (this.iotHubSubMode$.value !== sub) {
+ this.iotHubSubMode$.next(sub);
+ if (sub !== 'category') {
+ this.iotHubSelectedCategory = null;
+ }
+ this.installedWidgetVersions = null;
+ if (sub === 'default') {
+ this.widgetCategoriesFilter = (this.searchSubject.value || '') + '|' + Date.now();
+ this.cd.markForCheck();
+ } else {
+ this.reloadIotHubWidgets();
+ }
+ }
+ }
+
+ get iotHubSubMode(): iotHubSubMode {
+ return this.iotHubSubMode$.value;
+ }
+
@Input()
set deprecatedFilter(filter: DeprecatedFilter) {
this.deprecatedFilter$.next(filter);
@@ -124,7 +198,7 @@ export class DashboardWidgetSelectComponent implements OnInit {
set widgetsBundle(widgetBundle: WidgetsBundle) {
if (this.widgetsBundle$.value !== widgetBundle) {
- if (widgetBundle === null && this.selectWidgetMode$.value !== 'allWidgets') {
+ if (widgetBundle === null) {
this.widgetTypes.clear();
this.hasDeprecated = false;
} else {
@@ -141,9 +215,17 @@ export class DashboardWidgetSelectComponent implements OnInit {
return this.widgetsBundle$.value;
}
+ @ViewChild('iotHubFilterPanel', {static: true}) iotHubFilterPanel: TemplateRef;
+
@Output()
widgetSelected: EventEmitter = new EventEmitter();
+ @Output()
+ closeClick: EventEmitter = new EventEmitter();
+
+ @Output()
+ importClick: EventEmitter = new EventEmitter();
+
columns: ScrollGridColumns = {
columns: 2,
breakpoints: {
@@ -161,14 +243,42 @@ export class DashboardWidgetSelectComponent implements OnInit {
};
widgetBundlesFetchFunction: GridEntitiesFetchFunction;
+ installedDefaultFetchFunction: GridEntitiesFetchFunction;
allWidgetsFetchFunction: GridEntitiesFetchFunction;
widgetsFetchFunction: GridEntitiesFetchFunction;
+ iotHubWidgetsFetchFunction: GridEntitiesFetchFunction;
+ iotHubInstalledWidgetsFetchFunction: GridEntitiesFetchFunction;
+ iotHubDefaultFetchFunction: GridEntitiesFetchFunction;
+
+ readonly LOGICAL_ALL_WIDGETS = LOGICAL_ALL_WIDGETS;
+ readonly LOGICAL_INSTALLED_FROM_IOT_HUB = LOGICAL_INSTALLED_FROM_IOT_HUB;
widgetsBundleFilter = '';
allWidgetsFilter: WidgetsFilter = {search: '', filter: null, deprecatedFilter: DeprecatedFilter.ACTUAL};
widgetsFilter: BundleWidgetsFilter = {search: '', filter: null, deprecatedFilter: DeprecatedFilter.ACTUAL, widgetsBundleId: null};
+ iotHubWidgetsFilter = '';
+ iotHubInstalledWidgetsFilter = '';
+ widgetCategoriesFilter = '';
+
+ private installedWidgets: IotHubInstalledItem[] = null;
+ private installedWidgetVersions: MpItemVersionView[] = null;
+
+ // IoT Hub filter model — applied state (used by fetch functions + panel UI)
+ iotHubAppliedWidgetTypes = new Set();
+ iotHubAppliedCategories = new Set();
+ iotHubAppliedUseCases = new Set();
+
+ iotHubWidgetTypeOptions: FilterParamInfo[] = [];
+ iotHubCategoryOptions: FilterParamInfo[] = [];
+ iotHubUseCaseOptions: FilterParamInfo[] = [];
+ iotHubFilterCount = 0;
+ iotHubFilterSearch: Record = {};
+ iotHubFilterItemsHovered = false;
constructor(private widgetsService: WidgetService,
+ private iotHubApiService: IotHubApiService,
+ private iotHubActions: IotHubActionsService,
+ private translate: TranslateService,
private cd: ChangeDetectorRef) {
this.widgetBundlesFetchFunction = (pageSize, page, filter) => {
@@ -197,12 +307,71 @@ export class DashboardWidgetSelectComponent implements OnInit {
true, filter.deprecatedFilter, filter.filter);
};
+ this.iotHubWidgetsFetchFunction = (pageSize, page, filter) => {
+ const search = typeof filter === 'string' ? filter.split('|')[0] : filter;
+ const sort = this.iotHubSortOptions[this.iotHubSelectedSortIndex];
+ const sortOrder: SortOrder = { property: sort.value, direction: sort.direction };
+ const pageLink = new PageLink(pageSize, page, search || null, sortOrder);
+ const effectiveCategories = this.iotHubSelectedCategory
+ ? [this.iotHubSelectedCategory]
+ : (this.iotHubAppliedCategories.size > 0 ? Array.from(this.iotHubAppliedCategories) : undefined);
+ const query = new MpItemVersionQuery(pageLink, {
+ type: ItemType.WIDGET,
+ categories: effectiveCategories,
+ useCases: this.iotHubAppliedUseCases.size > 0 ? Array.from(this.iotHubAppliedUseCases) : undefined,
+ widgetTypes: this.iotHubAppliedWidgetTypes.size > 0 ? Array.from(this.iotHubAppliedWidgetTypes) : undefined,
+ scadaFirst: this.scadaFirst ? true : undefined
+ });
+ return this.iotHubApiService.getPublishedVersions(query, { ignoreLoading: true });
+ };
+
+ this.iotHubInstalledWidgetsFetchFunction = (pageSize, page, filter) => {
+ if (this.installedWidgetVersions === null) {
+ return this.fetchInstalledWidgetVersions().pipe(
+ map(versions => this.filterAndPaginateInstalledVersions(versions, pageSize, page, filter))
+ );
+ }
+ return of(this.filterAndPaginateInstalledVersions(this.installedWidgetVersions, pageSize, page, filter));
+ };
+
+ this.installedDefaultFetchFunction = (pageSize, page, filter) => {
+ return this.widgetBundlesFetchFunction(pageSize, page, filter).pipe(
+ map(pd => this.prependLogicalCards(pd, page, [{ __logical: LOGICAL_ALL_WIDGETS }]))
+ );
+ };
+
+ this.iotHubDefaultFetchFunction = (pageSize, page, filter) => {
+ const search = typeof filter === 'string' ? filter.split('|')[0] : filter;
+ return this.iotHubApiService.getWidgetCategories(search || undefined,
+ this.scadaFirst ? true : undefined, { ignoreLoading: true }).pipe(
+ map(categories => ({
+ data: categories.slice(page * pageSize, page * pageSize + pageSize),
+ totalPages: Math.ceil(categories.length / pageSize),
+ totalElements: categories.length,
+ hasNext: (page + 1) * pageSize < categories.length
+ })),
+ map(pd => this.prependLogicalCards(pd, page, [
+ { __logical: LOGICAL_ALL_WIDGETS },
+ { __logical: LOGICAL_INSTALLED_FROM_IOT_HUB }
+ ]))
+ );
+ };
+
this.search$.pipe(
distinctUntilChanged(),
skip(1)
).subscribe(
(search) => {
this.widgetsBundleFilter = search;
+ if (this.selectWidgetMode$.value === 'iotHub') {
+ if (this.iotHubSubMode$.value === 'installed') {
+ this.iotHubInstalledWidgetsFilter = search;
+ } else if (this.iotHubSubMode$.value === 'default') {
+ this.widgetCategoriesFilter = search;
+ } else {
+ this.iotHubWidgetsFilter = search;
+ }
+ }
this.cd.markForCheck();
}
);
@@ -232,10 +401,39 @@ export class DashboardWidgetSelectComponent implements OnInit {
);
}
- ngOnInit(): void {
+ private prependLogicalCards(pageData: any, page: number, cards: LogicalCard[]): any {
+ if (page === 0 && cards.length) {
+ return {
+ ...pageData,
+ data: [...cards, ...(pageData.data || [])],
+ totalElements: (pageData.totalElements || 0) + cards.length
+ };
+ }
+ return pageData;
+ }
+
+ private resetSubModes(): void {
+ this.widgetsBundle$.next(null);
+ this.installedSubMode$.next('default');
+ this.iotHubSubMode$.next('default');
+ this.iotHubSelectedCategory = null;
+ }
+
+ private updateWidgetTypesForCurrentState(): void {
+ const mode = this.selectWidgetMode$.value;
+ const showTypeFilter =
+ (mode === 'installed' && (this.installedSubMode$.value === 'allWidgets' || this.widgetsBundle$.value !== null)) ||
+ (mode === 'iotHub' && this.iotHubSubMode$.value !== 'default');
+ if (showTypeFilter) {
+ this.widgetTypes = new Set(Object.keys(widgetType).map(t => t as widgetType));
+ this.hasDeprecated = mode === 'installed';
+ } else {
+ this.widgetTypes.clear();
+ this.hasDeprecated = false;
+ }
}
- onWidgetClicked($event: Event, widget: WidgetTypeInfo): void {
+ onWidgetClicked(widget: WidgetTypeInfo): void {
this.widgetSelected.emit(this.toWidgetInfo(widget));
}
@@ -246,14 +444,404 @@ export class DashboardWidgetSelectComponent implements OnInit {
selectBundle($event: Event, bundle: WidgetsBundle) {
$event.preventDefault();
this.widgetsBundle = bundle;
- if (bundle.title?.toLowerCase().includes(this.search.toLowerCase()) ||
- bundle.description?.toLowerCase().includes(this.search.toLowerCase())) {
- this.searchSubject.next('');
+ }
+
+ onAllWidgetsCardClicked($event: Event): void {
+ $event.preventDefault();
+ if (this.selectWidgetMode$.value === 'installed') {
+ this.installedSubMode = 'allWidgets';
+ } else {
+ this.iotHubSubMode = 'allWidgets';
+ }
+ }
+
+ onInstalledFromIotHubCardClicked($event: Event): void {
+ $event.preventDefault();
+ this.iotHubSubMode = 'installed';
+ }
+
+ onCategoryCardClicked($event: Event, category: WidgetCategory): void {
+ $event.preventDefault();
+ this.iotHubSelectedCategory = category.name;
+ this.iotHubSubMode = 'category';
+ }
+
+ getCategoryImageUrl(category: WidgetCategory): string | null {
+ if (!category?.image) {
+ return null;
+ }
+ return this.iotHubApiService.resolveResourceUrl(category.image);
+ }
+
+ onIotHubWidgetClicked($event: Event, item: MpItemVersionView): void {
+ $event.preventDefault();
+ const installedItem = this.installedWidgets?.find(i => i.itemId === item.itemId);
+ if (installedItem) {
+ const widgetTypeId = installedItem.descriptor?.type === 'WIDGET' ? installedItem.descriptor.widgetTypeId?.id : null;
+ if (widgetTypeId) {
+ this.widgetsService.getWidgetTypeInfoById(widgetTypeId).subscribe(wt => {
+ if (wt) {
+ this.widgetSelected.emit({
+ typeFullFqn: fullWidgetTypeFqn(wt),
+ type: wt.widgetType,
+ title: wt.name,
+ image: wt.image,
+ description: wt.description,
+ deprecated: wt.deprecated
+ });
+ }
+ });
+ }
+ return;
+ }
+ this.iotHubActions.openItemDetail(item, undefined, undefined, 'add').subscribe(result => {
+ if (result?.action === 'add') {
+ this.installAndAddWidget(result.item);
+ }
+ });
+ }
+
+ isIotHubWidgetInstalled(item: MpItemVersionView): boolean {
+ return this.installedWidgets?.some(i => i.itemId === item.itemId) ?? false;
+ }
+
+ getIotHubItemImage(item: MpItemVersionView): string | null {
+ return resolveIotHubItemImageUrl(item, this.iotHubApiService);
+ }
+
+ getIotHubWidgetTypeLabel(key: string): string {
+ const translationKey = widgetTypeTranslations.get(key);
+ return translationKey ? this.translate.instant(translationKey) : key;
+ }
+
+ getFilteredIotHubItems(items: FilterParamInfo[], searchKey: string): FilterParamInfo[] {
+ return filterIotHubItemsBySearch(items, this.iotHubFilterSearch[searchKey]);
+ }
+
+ getGroupedIotHubFilterItems(items: FilterParamInfo[], searchKey: string): IotHubFilterGroup[] {
+ return groupIotHubFilterItems(items, this.iotHubFilterSearch[searchKey]);
+ }
+
+ toggleIotHubWidgetType(key: string): void {
+ if (this.iotHubAppliedWidgetTypes.has(key)) {
+ this.iotHubAppliedWidgetTypes.delete(key);
+ } else {
+ this.iotHubAppliedWidgetTypes.add(key);
+ }
+ this.onIotHubFiltersChanged();
+ }
+
+ toggleIotHubCategory(key: string): void {
+ if (this.iotHubAppliedCategories.has(key)) {
+ this.iotHubAppliedCategories.delete(key);
+ } else {
+ this.iotHubAppliedCategories.add(key);
+ }
+ this.onIotHubFiltersChanged();
+ }
+
+ toggleIotHubUseCase(key: string): void {
+ if (this.iotHubAppliedUseCases.has(key)) {
+ this.iotHubAppliedUseCases.delete(key);
+ } else {
+ this.iotHubAppliedUseCases.add(key);
+ }
+ this.onIotHubFiltersChanged();
+ }
+
+ clearIotHubFilters(): void {
+ this.iotHubAppliedWidgetTypes.clear();
+ this.iotHubAppliedCategories.clear();
+ this.iotHubAppliedUseCases.clear();
+ this.iotHubFilterSearch = {};
+ this.onIotHubFiltersChanged();
+ }
+
+ private onIotHubFiltersChanged(): void {
+ this.iotHubFilterCount =
+ this.iotHubAppliedWidgetTypes.size +
+ (this.iotHubSelectedCategory ? 0 : this.iotHubAppliedCategories.size) +
+ this.iotHubAppliedUseCases.size;
+ this.reloadIotHubWidgets();
+ }
+
+ onIotHubSortChange(index: number): void {
+ if (this.iotHubSelectedSortIndex !== index) {
+ this.iotHubSelectedSortIndex = index;
+ this.installedWidgetVersions = null;
+ this.reloadIotHubWidgets();
+ }
+ }
+
+ get totalFilterCount(): number {
+ if (this.selectWidgetMode === 'installed') {
+ return (this.filterWidgetTypes?.length ?? 0) + (this.includeDeprecated ? 1 : 0);
+ }
+ return this.iotHubFilterCount;
+ }
+
+ hasActiveFilters(): boolean {
+ if (this.selectWidgetMode === 'installed') {
+ return (this.filterWidgetTypes?.length ?? 0) > 0 || this.includeDeprecated;
+ }
+ return this.iotHubAppliedWidgetTypes.size > 0
+ || this.iotHubAppliedCategories.size > 0
+ || this.iotHubAppliedUseCases.size > 0;
+ }
+
+ clearAllFilters(): void {
+ if (this.selectWidgetMode === 'installed') {
+ this.filterWidgetTypes = null;
+ this.onIncludeDeprecatedChange(false);
+ } else {
+ this.clearIotHubFilters();
+ }
+ }
+
+ hasActiveSearchOrFilters(): boolean {
+ return !!this.searchSubject.value?.trim() || this.hasActiveFilters();
+ }
+
+ clearSearchAndFilters(): void {
+ this.searchSubject.next('');
+ if (this.hasActiveFilters()) {
+ this.clearAllFilters();
+ }
+ }
+
+ navigateToIotHubAllWidgets(): void {
+ this.selectWidgetMode = 'iotHub';
+ this.iotHubSubMode = 'allWidgets';
+ }
+
+ get hideCategoriesFilterSection(): boolean {
+ return this.selectWidgetMode === 'iotHub' && this.iotHubSubMode === 'category';
+ }
+
+ onIncludeDeprecatedChange(value: boolean): void {
+ this.includeDeprecated = value;
+ this.deprecatedFilter = value ? DeprecatedFilter.ALL : DeprecatedFilter.ACTUAL;
+ }
+
+ isFilterVisible(): boolean {
+ if (this.selectWidgetMode === 'iotHub') {
+ return this.iotHubSubMode !== 'default';
+ }
+ return this.installedSubMode === 'allWidgets' || this.widgetsBundle !== null;
+ }
+
+ showTopLevelWidgetModeToggle(): boolean {
+ if (this.selectWidgetMode === 'installed') {
+ return !this.widgetsBundle && this.installedSubMode === 'default';
+ }
+ return this.iotHubSubMode === 'default';
+ }
+
+ showBackButton(): boolean {
+ if (this.selectWidgetMode === 'installed') {
+ return !!this.widgetsBundle || this.installedSubMode === 'allWidgets';
+ }
+ return this.iotHubSubMode !== 'default';
+ }
+
+ getHeaderTitle(): string {
+ if (this.selectWidgetMode === 'iotHub') {
+ if (this.iotHubSubMode === 'category' && this.iotHubSelectedCategory) {
+ return this.iotHubSelectedCategory;
+ }
+ if (this.iotHubSubMode === 'installed') {
+ return this.translate.instant('iot-hub.installed-from-iot-hub');
+ }
+ if (this.iotHubSubMode === 'allWidgets') {
+ return this.translate.instant('iot-hub.all-iot-hub-widgets');
+ }
+ return '';
+ }
+ if (this.widgetsBundle) {
+ return this.widgetsBundle.title;
+ }
+ if (this.installedSubMode === 'allWidgets') {
+ return this.translate.instant('widget.all-widgets');
}
+ return '';
}
- isObject(value: any): boolean {
- return isObject(value);
+ getSearchPlaceholder(): string {
+ if (this.selectWidgetMode === 'iotHub') {
+ if (this.iotHubSubMode === 'default') {
+ return this.translate.instant('iot-hub.search-categories');
+ }
+ return this.translate.instant('iot-hub.search-widgets');
+ }
+ if (this.installedSubMode === 'default' && !this.widgetsBundle) {
+ return this.translate.instant('iot-hub.search-bundles');
+ }
+ return this.translate.instant('iot-hub.search-widgets');
+ }
+
+ onBackClick(): void {
+ if (this.selectWidgetMode === 'installed') {
+ if (this.widgetsBundle) {
+ this.widgetsBundle = null;
+ } else if (this.installedSubMode === 'allWidgets') {
+ this.installedSubMode = 'default';
+ }
+ } else if (this.selectWidgetMode === 'iotHub') {
+ if (this.iotHubSubMode !== 'default') {
+ this.iotHubSubMode = 'default';
+ }
+ }
+ }
+
+ onClose(): void {
+ this.closeClick.emit();
+ }
+
+ clearSearch($event: Event): void {
+ $event.preventDefault();
+ $event.stopPropagation();
+ this.search = '';
+ }
+
+ onImport($event: Event): void {
+ this.importClick.emit($event);
+ }
+
+ get widgetTypesList(): widgetType[] {
+ return Array.from(this.widgetTypes.values());
+ }
+
+ getWidgetTypeLabel(type: widgetType): string {
+ return this.translate.instant('widget.type-' + type);
+ }
+
+ isWidgetTypeChecked(type: widgetType): boolean {
+ return !!this.filterWidgetTypes && this.filterWidgetTypes.includes(type);
+ }
+
+ toggleWidgetTypeFilter(type: widgetType): void {
+ const current = this.filterWidgetTypes ?? [];
+ const next = current.includes(type)
+ ? current.filter(t => t !== type)
+ : [...current, type];
+ this.filterWidgetTypes = next.length ? next : null;
+ }
+
+ private reloadIotHubWidgets(): void {
+ if (this.iotHubSubMode === 'installed') {
+ this.installedWidgetVersions = null;
+ this.iotHubInstalledWidgetsFilter = this.searchSubject.value + '|' + Date.now();
+ } else {
+ this.iotHubWidgetsFilter = this.searchSubject.value + '|' + Date.now();
+ }
+ this.cd.markForCheck();
+ }
+
+ private installAndAddWidget(item: MpItemVersionView): void {
+ const versionId = item.id as string;
+ this.iotHubApiService.installItemVersion(versionId, { ignoreLoading: true }).subscribe({
+ next: (result) => {
+ if (result.success && result.descriptor?.type === 'WIDGET') {
+ this.loadInstalledWidgets();
+ const widgetTypeId = result.descriptor.widgetTypeId?.id;
+ if (widgetTypeId) {
+ this.widgetsService.getWidgetTypeInfoById(widgetTypeId).subscribe(wt => {
+ if (wt) {
+ this.widgetSelected.emit(this.toWidgetInfo(wt));
+ }
+ });
+ }
+ }
+ }
+ });
+ }
+
+ private loadIotHubFilterInfo(): void {
+ const hasItems = (i: FilterParamInfo) => i.totalItems > 0;
+ this.iotHubApiService.getFilterInfo(ItemType.WIDGET, { ignoreLoading: true }).subscribe(info => {
+ this.iotHubWidgetTypeOptions = (info.types || []).filter(hasItems);
+ this.iotHubCategoryOptions = (info.categories || []).filter(hasItems);
+ this.iotHubUseCaseOptions = (info.useCases || []).filter(hasItems);
+ });
+ }
+
+ private loadWidgetCategories(): void {
+ this.widgetCategoriesFilter = this.searchSubject.value + '|' + Date.now();
+ }
+
+ private loadInstalledWidgets(): void {
+ if (this.installedWidgets === null) {
+ this.installedWidgets = [];
+ }
+ const pageLink = new PageLink(10000, 0);
+ this.iotHubApiService.getInstalledItems(pageLink, ItemType.WIDGET, undefined, { ignoreLoading: true }).subscribe(data => {
+ this.installedWidgets = data.data;
+ });
+ }
+
+ private fetchInstalledWidgetVersions() {
+ const versionIds = (this.installedWidgets || [])
+ .map(i => i.itemVersionId)
+ .filter(id => !!id);
+ if (versionIds.length === 0) {
+ this.installedWidgetVersions = [];
+ return of([]);
+ }
+ const versionRequests = versionIds.map(id =>
+ this.iotHubApiService.getVersionInfo(id, { ignoreLoading: true })
+ );
+ return forkJoin(versionRequests).pipe(
+ map(versions => {
+ this.installedWidgetVersions = versions.sort((a, b) => b.totalInstallCount - a.totalInstallCount);
+ return this.installedWidgetVersions;
+ })
+ );
+ }
+
+ private filterAndPaginateInstalledVersions(versions: MpItemVersionView[], pageSize: number, page: number, filter: string) {
+ let filtered = versions;
+ const search = typeof filter === 'string' ? filter.split('|')[0] : '';
+ if (search) {
+ filtered = filtered.filter(v => v.name.toLowerCase().includes(search.toLowerCase()));
+ }
+ if (this.iotHubAppliedWidgetTypes.size > 0) {
+ filtered = filtered.filter(v => this.iotHubAppliedWidgetTypes.has(v.dataDescriptor?.widgetType));
+ }
+ if (this.iotHubAppliedCategories.size > 0) {
+ filtered = filtered.filter(v => v.categories?.some(c => this.iotHubAppliedCategories.has(c)));
+ }
+ if (this.iotHubAppliedUseCases.size > 0) {
+ filtered = filtered.filter(v => v.useCases?.some(u => this.iotHubAppliedUseCases.has(u)));
+ }
+ filtered = this.sortInstalledVersions(filtered);
+ const start = page * pageSize;
+ const data = filtered.slice(start, start + pageSize);
+ return { data, totalPages: Math.ceil(filtered.length / pageSize), totalElements: filtered.length, hasNext: start + pageSize < filtered.length };
+ }
+
+ private sortInstalledVersions(versions: MpItemVersionView[]): MpItemVersionView[] {
+ const sort = this.iotHubSortOptions[this.iotHubSelectedSortIndex];
+ const sign = sort.direction === Direction.ASC ? 1 : -1;
+ const copy = [...versions];
+ copy.sort((a, b) => {
+ if (this.scadaFirst) {
+ const aScada = !!a.dataDescriptor?.scada;
+ const bScada = !!b.dataDescriptor?.scada;
+ if (aScada !== bScada) {
+ return aScada ? -1 : 1;
+ }
+ }
+ const av = (a as any)[sort.value];
+ const bv = (b as any)[sort.value];
+ if (av == null && bv == null) { return 0; }
+ if (av == null) { return 1; }
+ if (bv == null) { return -1; }
+ if (typeof av === 'string' && typeof bv === 'string') {
+ return sign * av.localeCompare(bv);
+ }
+ return sign * (av < bv ? -1 : av > bv ? 1 : 0);
+ });
+ return copy;
}
private toWidgetInfo(widgetTypeInfo: WidgetTypeInfo): WidgetInfo {
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/widget-types-panel.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/widget-types-panel.component.ts
deleted file mode 100644
index cb43dce650..0000000000
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/widget-types-panel.component.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-///
-/// Copyright © 2016-2026 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.
-///
-
-import { Component, Inject, InjectionToken } from '@angular/core';
-import { widgetType } from '@shared/models/widget.models';
-
-export const DISPLAY_WIDGET_TYPES_PANEL_DATA = new InjectionToken('DisplayWidgetTypesPanelData');
-
-export interface WidgetTypes {
- type: widgetType;
- display: boolean;
-}
-
-export interface DisplayWidgetTypesPanelData {
- types: WidgetTypes[];
- typesUpdated: (columns: WidgetTypes[]) => void;
-}
-
-@Component({
- selector: 'tb-widget-types-panel',
- templateUrl: './widget-types-panel.component.html',
- styleUrls: ['./widget-types-panel.component.scss'],
- standalone: false
-})
-export class DisplayWidgetTypesPanelComponent {
-
- types: WidgetTypes[];
-
- constructor(@Inject(DISPLAY_WIDGET_TYPES_PANEL_DATA) public data: DisplayWidgetTypesPanelData) {
- this.types = this.data.types;
- }
-
- public update() {
- this.data.typesUpdated(this.types);
- }
-}
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.ts b/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.ts
index 8988a02380..7d9b9e07f7 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.ts
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.ts
@@ -98,7 +98,24 @@ export class EntityDetailsPageComponent extends EntityDetailsPanelComponent impl
const id = paramMap.get('entityId');
this.currentEntityId = { id, entityType };
this.reload();
- this.selectedTab = 0;
+ const queryParams = this.route.snapshot.queryParams;
+ let selectedTabIndex = 0;
+ if (queryParams['selectedTab']) {
+ this.router.navigate([], {
+ queryParams: {
+ selectedTab: null
+ },
+ queryParamsHandling: 'merge',
+ replaceUrl: true
+ });
+ if (this.entityTabsComponent) {
+ const selectedTab: string = queryParams['selectedTab'];
+ if (selectedTab) {
+ selectedTabIndex = this.entityTabsComponent.resolveTabIndex(selectedTab);
+ }
+ }
+ }
+ this.selectedTab = selectedTabIndex;
}
}));
}
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.ts b/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.ts
index 8c6fc004d8..b9ed698a47 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.ts
@@ -215,6 +215,7 @@ export class EntityDetailsPanelComponent extends PageComponent implements AfterV
if (entityTabs) {
if (this.viewInited) {
this.matTabGroup._tabs.reset([...this.inclusiveTabs.toArray(), ...entityTabs]);
+ this.matTabGroup.selectedIndex = this.selectedTab;
this.matTabGroup._tabs.notifyOnChanges();
} else {
this.pendingTabs = entityTabs;
@@ -321,6 +322,7 @@ export class EntityDetailsPanelComponent extends PageComponent implements AfterV
this.viewInited = true;
if (this.pendingTabs) {
this.matTabGroup._tabs.reset([...this.inclusiveTabs.toArray(), ...this.pendingTabs]);
+ this.matTabGroup.selectedIndex = this.selectedTab;
this.matTabGroup._tabs.notifyOnChanges();
this.pendingTabs = null;
}
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-tabs.component.ts b/ui-ngx/src/app/modules/home/components/entity/entity-tabs.component.ts
index ec6e46fb72..c5b2eebeb4 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-tabs.component.ts
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-tabs.component.ts
@@ -117,6 +117,10 @@ export abstract class EntityTabsComponent,
);
}
+ resolveTabIndex(tab: string): number {
+ return 0;
+ }
+
protected setEntity(entity: T) {
this.entityValue = entity;
}
diff --git a/ui-ngx/src/app/modules/home/components/home-components.module.ts b/ui-ngx/src/app/modules/home/components/home-components.module.ts
index 00c0d3e5e1..7b4f3c6c54 100644
--- a/ui-ngx/src/app/modules/home/components/home-components.module.ts
+++ b/ui-ngx/src/app/modules/home/components/home-components.module.ts
@@ -112,6 +112,7 @@ import { StatesControllerModule } from '@home/components/dashboard-page/states/s
import { DashboardLayoutComponent } from '@home/components/dashboard-page/layout/dashboard-layout.component';
import { EditWidgetComponent } from '@home/components/dashboard-page/edit-widget.component';
import { DashboardWidgetSelectComponent } from '@home/components/dashboard-page/dashboard-widget-select.component';
+import { IotHubComponentsModule } from '@home/components/iot-hub/iot-hub-components.module';
import { AddWidgetDialogComponent } from '@home/components/dashboard-page/add-widget-dialog.component';
import { ManageDashboardLayoutsDialogComponent } from '@home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component';
import {
@@ -124,7 +125,6 @@ import { EmbedDashboardDialogComponent } from '@home/components/widget/dialog/em
import { EMBED_DASHBOARD_DIALOG_TOKEN } from '@home/components/widget/dialog/embed-dashboard-dialog-token';
import { EdgeDownlinkTableComponent } from '@home/components/edge/edge-downlink-table.component';
import { EdgeDownlinkTableHeaderComponent } from '@home/components/edge/edge-downlink-table-header.component';
-import { DisplayWidgetTypesPanelComponent } from '@home/components/dashboard-page/widget-types-panel.component';
import { AlarmDurationPredicateValueComponent } from '@home/components/profile/alarm/alarm-duration-predicate-value.component';
import { DashboardImageDialogComponent } from '@home/components/dashboard-page/dashboard-image-dialog.component';
import {
@@ -329,7 +329,6 @@ import { ResourcesLibraryComponent } from "@home/components/resources/resources-
DashboardStateDialogComponent,
DashboardImageDialogComponent,
EmbedDashboardDialogComponent,
- DisplayWidgetTypesPanelComponent,
TenantProfileQueuesComponent,
QueueFormComponent,
RepositorySettingsComponent,
@@ -367,6 +366,7 @@ import { ResourcesLibraryComponent } from "@home/components/resources/resources-
CommonModule,
SharedModule,
SharedHomeComponentsModule,
+ IotHubComponentsModule,
WidgetConfigComponentsModule,
BasicWidgetConfigModule,
Lwm2mProfileComponentsModule,
@@ -469,6 +469,7 @@ import { ResourcesLibraryComponent } from "@home/components/resources/resources-
SelectDashboardBreakpointComponent,
EditWidgetComponent,
DashboardWidgetSelectComponent,
+ IotHubComponentsModule,
AddWidgetDialogComponent,
MoveWidgetsDialogComponent,
ManageDashboardLayoutsDialogComponent,
@@ -478,7 +479,6 @@ import { ResourcesLibraryComponent } from "@home/components/resources/resources-
DashboardStateDialogComponent,
DashboardImageDialogComponent,
EmbedDashboardDialogComponent,
- DisplayWidgetTypesPanelComponent,
TenantProfileQueuesComponent,
QueueFormComponent,
RepositorySettingsComponent,
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/_iot-hub-common.scss b/ui-ngx/src/app/modules/home/components/iot-hub/_iot-hub-common.scss
new file mode 100644
index 0000000000..12fccf7ff1
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/_iot-hub-common.scss
@@ -0,0 +1,134 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+
+// Shared IoT Hub visual building blocks — used across
+// iot-hub-browse, iot-hub-search, and dashboard-widget-select
+// to keep filter / search controls in sync.
+
+@mixin tb-iot-hub-search-container {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ height: 40px;
+ padding: 8px 12px;
+ border: 1px solid rgba(0, 0, 0, 0.12);
+ border-radius: 8px;
+ background: white;
+}
+
+@mixin tb-iot-hub-search-icon($color: rgba(0, 0, 0, 0.38)) {
+ font-size: 24px;
+ width: 24px;
+ height: 24px;
+ color: $color;
+ flex-shrink: 0;
+}
+
+@mixin tb-iot-hub-search-input-text($letter-spacing: normal) {
+ flex: 1;
+ min-width: 0;
+ border: none;
+ outline: none;
+ padding: 0;
+ font-family: inherit;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: $letter-spacing;
+ color: rgba(0, 0, 0, 0.87);
+ background: transparent;
+
+ &::placeholder {
+ color: rgba(0, 0, 0, 0.38);
+ }
+}
+
+@mixin tb-iot-hub-search-clear {
+ width: 24px;
+ height: 24px;
+ padding: 0;
+ flex-shrink: 0;
+ color: rgba(0, 0, 0, 0.38);
+ --mdc-icon-button-state-layer-size: 24px;
+
+ mat-icon {
+ font-size: 18px;
+ width: 18px;
+ height: 18px;
+ }
+}
+
+// Page-level search field — used by iot-hub-browse and iot-hub-search.
+// Larger than the filter inputs above: 56px tall, 16px text, with a 40px
+// trailing action area (search icon when empty, close icon-button when
+// typing).
+
+@mixin tb-iot-hub-page-search-container {
+ display: flex;
+ align-items: center;
+ width: 0;
+ height: 56px;
+ padding: 8px 4px 8px 16px;
+ gap: 8px;
+ border: 1px solid rgba(0, 0, 0, 0.12);
+ border-radius: 8px;
+ background: white;
+}
+
+@mixin tb-iot-hub-page-search-input {
+ flex: 1;
+ min-width: 0;
+ border: none;
+ outline: none;
+ padding: 0;
+ font-family: inherit;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0.15px;
+ color: rgba(0, 0, 0, 0.87);
+ background: transparent;
+
+ &::placeholder {
+ color: rgba(0, 0, 0, 0.54);
+ }
+}
+
+@mixin tb-iot-hub-page-search-action {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ height: 40px;
+ flex-shrink: 0;
+ border-radius: 50%;
+ color: rgba(0, 0, 0, 0.54);
+
+ mat-icon {
+ font-size: 24px;
+ width: 24px;
+ height: 24px;
+ }
+
+ &.mat-mdc-icon-button {
+ padding: 8px;
+ --mdc-icon-button-state-layer-size: 40px;
+ }
+
+ &-static {
+ pointer-events: none;
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html
new file mode 100644
index 0000000000..402381ad67
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html
@@ -0,0 +1,290 @@
+
+
+
+
+
+
+
+@if (loading) {
+
+
+ @if (primaryEntityAction; as action) {
+
+ }
+
+
+ } @else {
+
+
+ @if (allProgressDone) {
+
+ } @else {
+
+ }
+
+
+
+ @if (!isFirstWizardStep) {
+
+ }
+
+ @if (currentWizardStep; as step) {
+ @switch (step.type) {
+ @case ('connectivity') {
+
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss
new file mode 100644
index 0000000000..aff20e4d58
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss
@@ -0,0 +1,389 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+
+@import "../../../../../../scss/constants";
+
+:host-context(.tb-default .tb-dialog .mat-mdc-dialog-component-host),
+:host-context(.tb-default .tb-fullscreen-dialog-lt-md .mat-mdc-dialog-component-host) {
+ .mat-mdc-dialog-content {
+ padding: 0;
+ max-height: 100%;
+ overflow: hidden;
+ }
+ @media #{$mat-gt-sm} {
+ width: 800px;
+ height: 1000px;
+ max-width: 100%;
+ }
+ @media #{$mat-gt-md} {
+ width: 1000px;
+ }
+}
+
+:host {
+ display: flex;
+ flex-direction: column;
+ max-height: 90vh;
+
+ @media #{$mat-lt-md} {
+ max-height: 100%;
+ height: 100%;
+ }
+
+ .mat-mdc-tab-group {
+ height: 100%;
+ }
+
+ ::ng-deep {
+ .mat-stepper-horizontal {
+ height: 100%;
+ }
+ .mat-horizontal-stepper-wrapper {
+ height: 100%;
+ }
+ .mat-horizontal-stepper-header-container {
+ padding: 24px 16px 16px;
+ }
+ .mat-horizontal-content-container {
+ overflow: auto;
+ flex: 1;
+ padding: 0;
+ }
+ .mat-horizontal-stepper-content.mat-horizontal-stepper-content-current {
+ height: 100%;
+ }
+ .mat-horizontal-stepper-header.mat-step-header {
+ padding: 0 12px;
+ }
+ }
+}
+
+.tb-device-install-header {
+ .tb-device-install-title {
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 24px;
+ letter-spacing: 0.1px;
+ color: rgba(0, 0, 0, 0.87);
+ margin: 0;
+ flex: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+}
+
+.tb-device-install-connectivity {
+ p {
+ color: rgba(0, 0, 0, 0.54);
+ font-size: 16px;
+ line-height: 24px;
+ margin: 0;
+ }
+
+ // Card grid — design uses 276px cards with 12px gap, wrapping into rows.
+ // The 2-card variant uses a wider min-track so they don't squeeze.
+ .tb-connectivity-cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+ gap: 12px;
+
+ &.tb-connectivity-cards-pair {
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ }
+ }
+
+ // Connection-card-vertical from the design: primary-tinted surface
+ // (4 % alpha), 6px radius, 1px subtle border that becomes primary on
+ // hover/select.
+ .tb-connectivity-card {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 12px;
+ padding: 16px;
+ height: 116px;
+ background: rgba($tb-primary-color, 0.04);
+ border: 1px solid transparent;
+ border-radius: 6px;
+ cursor: pointer;
+ text-align: left;
+ transition: border-color 0.12s ease-out, box-shadow 0.12s ease-out;
+
+ &:hover,
+ &.selected {
+ border-color: $tb-primary-color;
+ }
+
+ &.selected {
+ box-shadow: 0 0 0 1px $tb-primary-color inset;
+
+ // Selected state inverts the icon: primary-coloured container
+ // with the masked glyph painted in white.
+ .tb-connectivity-card-icon {
+ background: $tb-primary-color;
+ }
+
+ .tb-connectivity-card-icon-mask {
+ background-color: white;
+ }
+ }
+ }
+
+ // 48×48 white icon container with subtle drop shadow + 4px radius,
+ // hosting a 40×40 mask-image rendered in the primary color.
+ .tb-connectivity-card-icon {
+ width: 48px;
+ height: 48px;
+ border-radius: 4px;
+ background: white;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow:
+ 0 1px 2px 0 rgba(0, 0, 0, 0.06),
+ 0 1px 3px 0 rgba(0, 0, 0, 0.10);
+ }
+
+ .tb-connectivity-card-icon-mask {
+ display: block;
+ width: 40px;
+ height: 40px;
+ background-color: $tb-primary-color;
+ -webkit-mask-image: var(--tb-icon-url);
+ mask-image: var(--tb-icon-url);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ }
+
+ .tb-connectivity-card-name {
+ font-size: 16px;
+ font-weight: 500;
+ line-height: 24px;
+ letter-spacing: 0.15px;
+ color: rgba(0, 0, 0, 0.87);
+ }
+
+ // PE-Only pill — primary 1px border + primary text on white background.
+ .tb-connectivity-card-badge {
+ position: absolute;
+ top: 16px;
+ right: 16px;
+ height: 24px;
+ padding: 0 8px;
+ border: 1px solid $tb-primary-color;
+ border-radius: 4px;
+ background: white;
+ color: $tb-primary-color;
+ font-size: 12px;
+ font-weight: 500;
+ line-height: 22px;
+ letter-spacing: 0.4px;
+ }
+}
+
+// Form view
+.tb-device-install-form {
+ mat-form-field {
+ width: 100%;
+ }
+
+ .tb-form-field-help {
+ color: rgba(0, 0, 0, 0.54);
+ font-size: 12px;
+ line-height: 16px;
+ margin-top: -4px;
+ margin-bottom: 8px;
+ }
+
+ .tb-form-field-help-image {
+ max-width: 100%;
+ margin-top: 4px;
+ margin-bottom: 8px;
+ border-radius: 4px;
+ border: 1px solid rgba(0, 0, 0, 0.12);
+ }
+}
+
+.tb-progress-divider {
+ width: 1px;
+ height: 16px;
+ background-color: rgba(0, 0, 0, 0.12);
+ margin-left: 24px;
+}
+
+.tb-progress-row {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ padding: 8px 12px;
+ border-radius: 4px;
+
+ &.tb-progress-row-active {
+ background: rgba(0, 0, 0, 0.03);
+ }
+
+ &.tb-progress-row-alert {
+ background: rgba(246, 103, 22, 0.06);
+ align-items: flex-start;
+ flex-wrap: wrap;
+ gap: 12px;
+ }
+}
+
+.tb-progress-icon {
+ flex-shrink: 0;
+ width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ mat-icon {
+ font-size: 24px;
+ width: 24px;
+ height: 24px;
+ }
+
+ .tb-progress-success {
+ color: #198038;
+ }
+
+ .tb-progress-warning {
+ color: #f66716;
+ }
+}
+
+.tb-progress-pending-circle {
+ width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 16px;
+ letter-spacing: 0.4px;
+ color: rgba(0, 0, 0, 0.54);
+ position: relative;
+
+ &::after {
+ content: '';
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ border: 1px dashed rgba(0, 0, 0, 0.12);
+ border-radius: 999px;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+}
+
+.tb-progress-label {
+ flex: 1;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0.15px;
+ color: rgba(0, 0, 0, 0.76);
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ &.tb-progress-label-active {
+ font-weight: 500;
+ letter-spacing: 0.25px;
+ }
+
+ &.tb-progress-label-pending {
+ color: rgba(0, 0, 0, 0.54);
+ }
+}
+
+.tb-progress-status {
+ flex-shrink: 0;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ letter-spacing: 0.25px;
+ padding: 6px 12px;
+}
+
+.tb-progress-status-done {
+ color: #198038;
+}
+
+.tb-progress-status-progress {
+ color: rgba(0, 0, 0, 0.54);
+}
+
+
+.tb-progress-alert-msg {
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 16px;
+ letter-spacing: 0.4px;
+
+ &.tb-progress-alert-msg-warning {
+ color: #f66716;
+ }
+
+ &.tb-progress-alert-msg-error {
+ color: #dd2c00;
+ }
+}
+
+.tb-progress-action-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 6px 12px;
+ border-radius: 4px;
+ border: 1px solid rgba(0, 0, 0, 0.12);
+ background: white;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ letter-spacing: 0.25px;
+ white-space: nowrap;
+ cursor: pointer;
+
+ &.tb-progress-action-primary {
+ color: #00695c;
+ }
+
+ &.tb-progress-action-warning {
+ color: #f66716;
+ }
+
+ &:hover {
+ background: rgba(0, 0, 0, 0.04);
+ }
+}
+
+mat-dialog-actions {
+ padding: 8px 24px 16px;
+ border-top-style: solid;
+ border-top-color: var(--mat-divider-color, var(--mat-app-outline));
+ border-top-width: var(--mat-divider-width);
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts
new file mode 100644
index 0000000000..96c5f9ed72
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts
@@ -0,0 +1,1132 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { ChangeDetectorRef, Component, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
+import {
+ PeConnectivityMethodPromptData,
+ TbPeConnectivityMethodPromptComponent
+} from '@home/components/iot-hub/pe-connectivity-method-prompt.component';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { DialogComponent } from '@shared/components/dialog.component';
+import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
+import { MatStepper } from '@angular/material/stepper';
+import { firstValueFrom } from 'rxjs';
+import { TranslateService } from '@ngx-translate/core';
+import { PageLink } from '@shared/models/page/page-link';
+import { MpItemVersionView } from '@shared/models/iot-hub/iot-hub-version.models';
+import { IotHubApiService } from '@core/http/iot-hub-api.service';
+import { DeviceProfileService } from '@core/http/device-profile.service';
+import { DeviceService } from '@core/http/device.service';
+import { DashboardService } from '@core/http/dashboard.service';
+import { RuleChainService } from '@core/http/rule-chain.service';
+import { AttributeService } from '@core/http/attribute.service';
+import { AttributeScope } from '@shared/models/telemetry/telemetry.models';
+import { EntityId } from '@shared/models/id/entity-id';
+import { generateSecret } from '@core/utils';
+import {
+ DeviceInstallStep,
+ DevicePackageInfo,
+ ENTITY_STEP_TYPES,
+ EntityStepOutput,
+ EntityStepProgress,
+ FormFieldDefinition,
+ FormFieldType,
+ installMethodIcons as INSTALL_METHOD_ICONS,
+ installMethodLabels as INSTALL_METHOD_LABELS,
+ InstallStepType,
+ peOnlyInstallMethods,
+ stepTypeAliasMap
+} from '@shared/models/iot-hub/device-package.models';
+import { mergeMap } from 'rxjs/operators';
+
+export interface DeviceInstallDialogData {
+ item: MpItemVersionView;
+ reviewMode?: boolean;
+ selectedInstallMethod?: string;
+ installState?: Record;
+}
+
+export type WizardStepType = 'connectivity' | 'placeholder' | 'instruction' | 'form' | 'progress';
+
+export interface WizardStep {
+ type: WizardStepType;
+ label: string;
+ rawSteps: DeviceInstallStep[];
+ completed: boolean;
+ // Instruction
+ markdown?: string;
+ // Form
+ formFields?: FormFieldDefinition[];
+ formGroup?: UntypedFormGroup;
+ // Progress
+ entitySteps?: EntityStepProgress[];
+ progressError?: string;
+ progressDone?: boolean;
+}
+
+const ENTITY_STEP_MIN_DELAY = 2000;
+const DEFAULT_RANDOM_SIZE = 20;
+
+@Component({
+ selector: 'tb-device-install-dialog',
+ standalone: false,
+ templateUrl: './device-install-dialog.component.html',
+ styleUrls: ['./device-install-dialog.component.scss']
+})
+export class TbDeviceInstallDialogComponent extends DialogComponent implements OnInit, OnDestroy {
+
+ @ViewChild('installStepper', {static: false}) stepper: MatStepper;
+
+ loading = true;
+ packageInfo: DevicePackageInfo;
+ zipFiles = new Map();
+ zipImages = new Map();
+
+ // Connectivity
+ availableInstallMethods: string[] = [];
+ selectedInstallMethod: string | null = null;
+ installMethodLabels = INSTALL_METHOD_LABELS;
+ installMethodIcons = INSTALL_METHOD_ICONS;
+ peOnlyInstallMethods = peOnlyInstallMethods;
+
+ // Wizard
+ wizardSteps: WizardStep[] = [];
+ wizardStarted = false;
+ reviewMode = false;
+
+ // Variable resolution state
+ formValues: Record = {};
+ entityOutputs = new Map();
+ transportVars: Record = {};
+ gatewayDockerComposeContent: string | null = null;
+
+ resolveMarkdownVariable: (key: string) => string | undefined = this._resolveMarkdownVariable.bind(this);
+
+ constructor(
+ protected store: Store,
+ protected router: Router,
+ protected dialogRef: MatDialogRef,
+ @Inject(MAT_DIALOG_DATA) public data: DeviceInstallDialogData,
+ private cdr: ChangeDetectorRef,
+ private deviceProfileService: DeviceProfileService,
+ private deviceService: DeviceService,
+ private dashboardService: DashboardService,
+ private ruleChainService: RuleChainService,
+ private attributeService: AttributeService,
+ private iotHubApiService: IotHubApiService,
+ private translate: TranslateService,
+ private dialog: MatDialog
+ ) {
+ super(store, router, dialogRef);
+ }
+
+ async ngOnInit(): Promise {
+ try {
+ const zipData = await firstValueFrom(this.iotHubApiService.getVersionFileData(this.data.item.id, { ignoreLoading: true }).pipe(
+ mergeMap((blob: Blob) => blob.arrayBuffer())
+ ));
+ const JSZip = (await import('jszip')).default;
+ const zip = await JSZip.loadAsync(zipData);
+ const imageExtensions = new Set(['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp']);
+ for (const [path, entry] of Object.entries(zip.files) as [string, any][]) {
+ if (!entry.dir) {
+ const ext = path.split('.').pop()?.toLowerCase();
+ if (imageExtensions.has(ext)) {
+ const blob = await entry.async('blob');
+ const blobUrl = URL.createObjectURL(blob);
+ this.zipImages.set(path, blobUrl);
+ } else {
+ const content = await entry.async('string');
+ this.zipFiles.set(path, content);
+ }
+ }
+ }
+ this.packageInfo = JSON.parse(this.zipFiles.get('device-info.json'));
+ this.availableInstallMethods = this.packageInfo.installMethods.filter(
+ ct => this.packageInfo.installSteps[ct]?.length > 0
+ );
+ } catch (e) {
+ console.error('Failed to parse device package ZIP', e);
+ }
+ // Fetch transport connectivity settings for variable resolution
+ try {
+ const connectivity = await firstValueFrom(this.iotHubApiService.getConnectivitySettings({ ignoreErrors: true }));
+ if (connectivity) {
+ for (const [protocol, info] of Object.entries(connectivity)) {
+ if (info) {
+ this.transportVars[`${protocol}.host`] = info.host || '';
+ this.transportVars[`${protocol}.port`] = String(info.port || '');
+ }
+ }
+ }
+ } catch (_e) {
+ console.error('Failed to fetch connectivity settings', _e);
+ }
+ // Review mode: restore state and start wizard with stored values
+ if (this.data.reviewMode && this.data.installState && this.data.selectedInstallMethod) {
+ this.reviewMode = true;
+ this.selectedInstallMethod = this.data.selectedInstallMethod;
+ this.restoreInstallState(this.data.installState);
+ this.startWizard();
+ } else if (this.availableInstallMethods.length === 1
+ && !peOnlyInstallMethods.has(this.availableInstallMethods[0])) {
+ // Single non-PE method: skip the selector and start the wizard.
+ this.selectedInstallMethod = this.availableInstallMethods[0];
+ this.startWizard();
+ } else {
+ // Multiple methods (or only PE-only ones): render the connection
+ // method step as the wizard's first step. PE-only cards open the
+ // pe-connectivity-method-prompt dialog and never set
+ // selectedInstallMethod.
+ this.startWizard();
+ }
+ this.loading = false;
+ this.cdr.detectChanges();
+ }
+
+ ngOnDestroy() {
+ for (const url of this.zipImages.values()) {
+ URL.revokeObjectURL(url);
+ }
+ super.ngOnDestroy();
+ }
+
+ // --- Connectivity ---
+
+ selectConnectivity(ct: string): void {
+ // PE-only methods open the upgrade prompt dialog instead of being
+ // selectable — they never become the active install method.
+ if (peOnlyInstallMethods.has(ct)) {
+ this.openPeConnectivityPrompt(ct);
+ return;
+ }
+ if (this.selectedInstallMethod === ct) {
+ // Re-clicking the already-selected card is a no-op; users who
+ // want to proceed without changing selection use the Next button.
+ return;
+ }
+ this.selectedInstallMethod = ct;
+ // Auto-advance: configure the wizard for the chosen method and
+ // jump to the next step.
+ if (this.currentWizardStep?.type === 'connectivity') {
+ this.confirmConnectivity();
+ }
+ }
+
+ private openPeConnectivityPrompt(ct: string): void {
+ this.dialog.open(
+ TbPeConnectivityMethodPromptComponent,
+ {
+ data: { connectorName: this.installMethodLabels.get(ct) || ct },
+ autoFocus: false,
+ panelClass: ['tb-dialog']
+ }
+ );
+ }
+
+ onTabChanged(index: number): void {
+ const ws = this.wizardSteps[index];
+ if (!ws) return;
+ if (ws.type === 'instruction' && !ws.markdown) {
+ ws.markdown = this.zipFiles.get(ws.rawSteps[0].file) || '';
+ } else if (ws.type === 'progress' && !ws.progressDone) {
+ this.showCompletedEntitySteps(ws);
+ }
+ }
+
+ confirmConnectivity(): void {
+ if (!this.selectedInstallMethod) {
+ return;
+ }
+ // If we are already inside the wizard (connectivity step is the
+ // first one), append the remaining steps and advance the stepper.
+ const onConnectivityStep = this.currentWizardStep?.type === 'connectivity';
+ if (onConnectivityStep) {
+ const connectivityStep = this.currentWizardStep;
+ // Drop anything that may have been appended on a previous pass
+ // (user came back to pick a different method).
+ this.wizardSteps.length = 1;
+ this.appendInstallSteps();
+ connectivityStep.completed = true;
+ this.cdr.detectChanges();
+ // Wait for new mat-step children to register before advancing.
+ setTimeout(() => {
+ this.stepper?.next();
+ this.onStepActivated();
+ }, 0);
+ return;
+ }
+ this.startWizard();
+ }
+
+ // --- Wizard ---
+
+ get isFirstWizardStep(): boolean {
+ return !this.stepper || this.stepper.selectedIndex === 0;
+ }
+
+ get allProgressDone(): boolean {
+ return this.wizardSteps.filter(s => s.type === 'progress').every(s => s.progressDone);
+ }
+
+ get isLastWizardStep(): boolean {
+ return this.stepper && this.stepper.selectedIndex === this.wizardSteps.length - 1;
+ }
+
+ get currentWizardStep(): WizardStep | null {
+ if (!this.stepper || !this.wizardSteps.length) {
+ return null;
+ }
+ return this.wizardSteps[this.stepper.selectedIndex] ?? null;
+ }
+
+ get nextWizardStepLabel(): string {
+ if (!this.stepper || this.stepper.selectedIndex >= this.wizardSteps.length - 1) {
+ return '';
+ }
+ return this.wizardSteps[this.stepper.selectedIndex + 1]?.label || '';
+ }
+
+ previousStep(): void {
+ if (!this.stepper || this.stepper.selectedIndex <= 0) {
+ return;
+ }
+ const step = this.currentWizardStep;
+ if (step?.type === 'progress' && step.progressError) {
+ this.goBackToForm();
+ } else {
+ this.stepper.previous();
+ }
+ }
+
+ nextStep(): void {
+ const step = this.currentWizardStep;
+ if (!step) {
+ return;
+ }
+ if (step.type === 'form') {
+ if (step.formGroup?.invalid) {
+ step.formGroup.markAllAsTouched();
+ return;
+ }
+ Object.assign(this.formValues, step.formGroup.getRawValue());
+ }
+ if (this.isLastWizardStep) {
+ this.done();
+ return;
+ }
+ step.completed = true;
+ this.cdr.detectChanges();
+ this.stepper.next();
+ this.onStepActivated();
+ }
+
+ get primaryEntityAction(): { url: string; label: string } | null {
+ // Priority: dashboard > device > gateway > integration
+ const dashboard = this.entityOutputs.get('dashboard');
+ if (dashboard?.url) {
+ return { url: dashboard.url, label: 'Open Dashboard' };
+ }
+ const device = this.entityOutputs.get('device');
+ if (device?.url) {
+ return { url: device.url, label: 'Open Device' };
+ }
+ const gateway = this.entityOutputs.get('gateway');
+ if (gateway?.url) {
+ return { url: gateway.url, label: 'Open Gateway' };
+ }
+ const integration = this.entityOutputs.get('integration');
+ if (integration?.url) {
+ return { url: integration.url, label: 'Open Integration' };
+ }
+ return null;
+ }
+
+ openEntity(url: string): void {
+ this.dialogRef.close('installed');
+ void this.router.navigateByUrl(url);
+ }
+
+ done(): void {
+ this.dialogRef.close('installed');
+ }
+
+ cancel(): void {
+ this.dialogRef.close(false);
+ }
+
+ retryEntitySteps(step: WizardStep): void {
+ step.progressError = null;
+ void this.runEntitySteps(step);
+ }
+
+ async resolveConflict(ws: WizardStep, ep: EntityStepProgress, resolution: string): Promise {
+ ep.status = 'running';
+ ep.errorMessage = null;
+ this.cdr.detectChanges();
+ try {
+ let output: EntityStepOutput;
+ if (resolution === 'use-existing') {
+ output = ep.existingEntity;
+ // For devices/gateways, fetch credentials
+ if (ep.step.type === InstallStepType.DEVICE || ep.step.type === InstallStepType.GATEWAY) {
+ const creds = await firstValueFrom(this.deviceService.getDeviceCredentials(output.id, false, {ignoreErrors: true}));
+ output = { ...output, token: creds.credentialsId };
+ if (ep.step.type === InstallStepType.GATEWAY) {
+ output.dockerComposeUrl = `/api/device-connectivity/gateway-launch/${output.id}/docker-compose/download`;
+ }
+ }
+ } else if (resolution === 'overwrite') {
+ output = await this.overwriteEntity(ep.step, ep.existingEntity);
+ } else {
+ // create-copy — just create normally
+ output = await this.createEntity(ep.step);
+ }
+ await this.saveStepAttributes(ep.step, output);
+ ep.existingEntity = null;
+ ep.conflictType = null;
+ this.markEntityStepSuccess(ws, ep, output, resolution);
+ // Resume running remaining steps
+ await this.runEntitySteps(ws);
+ } catch (err: any) {
+ ep.status = 'error';
+ ep.errorMessage = err?.error?.message || err?.message || 'Unknown error';
+ ws.progressError = ep.errorMessage;
+ this.cdr.detectChanges();
+ }
+ }
+
+ goBackToForm(): void {
+ // Find the last form step before the current progress step
+ const currentIdx = this.stepper.selectedIndex;
+ for (let i = currentIdx - 1; i >= 0; i--) {
+ if (this.wizardSteps[i].type === 'form') {
+ // Reset the progress step so it re-runs when we come back
+ const progressStep = this.wizardSteps[currentIdx];
+ progressStep.entitySteps = null;
+ progressStep.progressError = null;
+ progressStep.progressDone = false;
+ progressStep.completed = false;
+ // Allow navigation back by making intermediate steps editable
+ for (let j = i; j < currentIdx; j++) {
+ this.wizardSteps[j].completed = false;
+ }
+ this.stepper.selectedIndex = i;
+ return;
+ }
+ }
+ }
+
+ onMarkdownReady(container: HTMLElement): void {
+ // Download button handlers
+ const buttons = container.querySelectorAll('[data-action="download-gateway-docker-compose"]');
+ buttons.forEach(btn => {
+ btn.addEventListener('click', (e) => {
+ e.preventDefault();
+ if (this.gatewayDockerComposeContent) {
+ const blob = new Blob([this.gatewayDockerComposeContent], { type: 'application/x-yaml' });
+ const url = URL.createObjectURL(blob);
+ const link = document.createElement('a');
+ link.href = url;
+ link.download = 'docker-compose.yml';
+ link.click();
+ URL.revokeObjectURL(url);
+ } else {
+ const gateway = this.entityOutputs.get('gateway');
+ if (gateway?.id) {
+ this.deviceService.downloadGatewayDockerComposeFile(gateway.id).subscribe();
+ }
+ }
+ });
+ });
+ }
+
+ resolveImagePath(path: string): string {
+ if (path.startsWith('data:') || path.startsWith('http')) {
+ return path;
+ }
+ return this.zipImages.get(path) || path;
+ }
+
+ // Bound function reference passed to 's [resolveImagePath] input.
+ // Defined as a property so the template binding stays stable across change detection.
+ readonly resolveImagePathFn: (path: string) => string = (path: string) => this.resolveImagePath(path);
+
+ // --- Variable Resolution ---
+
+ resolveVariables(content: string): string {
+ return content.replace(/\$\{([^}]+)}/g, (_match, key) => {
+ const res = this.resolveVariable(key);
+ if (res) {
+ return res;
+ }
+ return '${' + key + '}';
+ });
+ }
+
+ resolveVariable(key: string): string | undefined {
+ if (key in this.formValues) {
+ return String(this.formValues[key]);
+ }
+ if (key in this.transportVars) {
+ return this.transportVars[key];
+ }
+ const dotIdx = key.indexOf('.');
+ if (dotIdx > 0) {
+ const alias = key.substring(0, dotIdx);
+ const prop = key.substring(dotIdx + 1);
+ const output = this.entityOutputs.get(alias);
+ if (output && prop in output) {
+ return String((output as any)[prop]);
+ }
+ }
+ return undefined;
+ }
+
+ private _resolveMarkdownVariable(key: string): string | undefined {
+ const res = this.resolveVariable(key);
+ if (res) {
+ return res;
+ }
+ // Special action placeholders
+ if (key === 'gateway.downloadButton') {
+ return '⬇ Download docker-compose.yml';
+ }
+ return undefined;
+ }
+
+ // --- Private ---
+
+ private restoreInstallState(installState: Record): void {
+ for (const [stepName, data] of Object.entries(installState)) {
+ if (data.formValues) {
+ Object.assign(this.formValues, data.formValues);
+ }
+ if (data.entityOutput) {
+ // Find the step type alias from the raw steps to set the correct entity output key
+ const rawSteps = this.packageInfo.installSteps[this.selectedInstallMethod] || [];
+ const matchingStep = rawSteps.find(s => s.name === stepName || this.resolveVariables(s.name) === stepName);
+ if (matchingStep) {
+ const alias = stepTypeAliasMap[matchingStep.type];
+ if (alias) {
+ this.entityOutputs.set(alias, data.entityOutput);
+ }
+ }
+ }
+ }
+ // Resolve gateway docker-compose if available
+ const gatewayStep = (this.packageInfo.installSteps[this.selectedInstallMethod] || []).find(s => s.type === 'GATEWAY');
+ if (gatewayStep?.dockerCompose) {
+ const raw = this.zipFiles.get(gatewayStep.dockerCompose);
+ if (raw) {
+ this.gatewayDockerComposeContent = this.resolveVariables(raw);
+ }
+ }
+ }
+
+ private startWizard(): void {
+ if (!this.reviewMode) {
+ this.formValues = {};
+ this.entityOutputs.clear();
+ }
+ this.buildWizardSteps();
+ this.wizardStarted = true;
+
+ if (this.reviewMode) {
+ // Pre-activate all steps for tab mode (tabs render lazily on first select)
+ for (const ws of this.wizardSteps) {
+ if (ws.type === 'instruction') {
+ ws.markdown = this.zipFiles.get(ws.rawSteps[0].file) || '';
+ } else if (ws.type === 'progress') {
+ this.showCompletedEntitySteps(ws);
+ }
+ }
+ } else {
+ // Activate the first step after the stepper renders
+ setTimeout(() => this.onStepActivated(), 0);
+ }
+ }
+
+ private buildWizardSteps(): void {
+ this.wizardSteps = [];
+ if (!this.reviewMode && this.availableInstallMethods.length > 0 && !this.selectedInstallMethod) {
+ // First step: connection method selector. Remaining steps are
+ // appended via appendInstallSteps() once a method is confirmed.
+ this.wizardSteps.push({
+ type: 'connectivity',
+ label: this.translate.instant('iot-hub.connection-method'),
+ rawSteps: [],
+ completed: false
+ });
+ // Dummy placeholder steps shown in the indicator until the user
+ // picks a method. They are replaced with real steps for the
+ // chosen connectivity in confirmConnectivity().
+ for (const key of [
+ 'iot-hub.step-prerequisites',
+ 'iot-hub.step-configuration',
+ 'iot-hub.step-provisioning'
+ ]) {
+ this.wizardSteps.push({
+ type: 'placeholder',
+ label: this.translate.instant(key),
+ rawSteps: [],
+ completed: false
+ });
+ }
+ return;
+ }
+ this.appendInstallSteps();
+ }
+
+ private appendInstallSteps(): void {
+ const rawSteps = this.packageInfo.installSteps[this.selectedInstallMethod] || [];
+ let i = 0;
+ while (i < rawSteps.length) {
+ const step = rawSteps[i];
+ if (step.type === InstallStepType.SHOW_INSTRUCTION) {
+ this.wizardSteps.push({
+ type: 'instruction',
+ label: step.name,
+ rawSteps: [step],
+ completed: this.reviewMode
+ });
+ i++;
+ } else if (step.type === InstallStepType.SHOW_FORM) {
+ this.wizardSteps.push({
+ type: 'form',
+ label: step.name,
+ rawSteps: [step],
+ completed: this.reviewMode
+ });
+ i++;
+ } else if (ENTITY_STEP_TYPES.has(step.type)) {
+ // Group consecutive entity steps
+ const group: DeviceInstallStep[] = [];
+ while (i < rawSteps.length && ENTITY_STEP_TYPES.has(rawSteps[i].type)) {
+ group.push(rawSteps[i]);
+ i++;
+ }
+ this.wizardSteps.push({
+ type: 'progress',
+ label: 'Provisioning',
+ rawSteps: group,
+ completed: this.reviewMode
+ });
+ } else {
+ // Skip unsupported steps (CONVERTER, INTEGRATION)
+ i++;
+ }
+ }
+ // Initialize form groups
+ for (const ws of this.wizardSteps) {
+ if (ws.type === 'form' && !ws.formGroup) {
+ this.initFormStep(ws);
+ }
+ }
+ }
+
+ private initFormStep(ws: WizardStep): void {
+ const formJson = this.zipFiles.get(ws.rawSteps[0].file) || '[]';
+ ws.formFields = JSON.parse(formJson) as FormFieldDefinition[];
+ const controls: Record = {};
+ // In review mode, use stored values; otherwise use defaults
+ const storedValues = this.reviewMode && this.data.installState?.[ws.label]?.formValues;
+ for (const field of ws.formFields) {
+ const validators = [];
+ if (field.required) {
+ validators.push(Validators.required);
+ }
+ if (field.validators?.length > 0) {
+ validators.push(Validators.pattern(field.validators[0].pattern));
+ }
+ const initialValue = this.resolveInitialFieldValue(field, storedValues?.[field.key]);
+ controls[field.key] = new UntypedFormControl(initialValue, validators);
+ }
+ ws.formGroup = new UntypedFormGroup(controls);
+ if (this.reviewMode) {
+ ws.formGroup.disable();
+ ws.completed = true;
+ }
+ }
+
+ private resolveInitialFieldValue(field: FormFieldDefinition, storedValue: any): any {
+ if (storedValue !== undefined) {
+ return storedValue;
+ }
+ const isStringLike = field.type === FormFieldType.STRING || field.type === FormFieldType.PASSWORD;
+ if (isStringLike && field.randomByDefault) {
+ return generateSecret(field.randomSize ?? DEFAULT_RANDOM_SIZE);
+ }
+ return field.defaultValue ?? (field.type === FormFieldType.BOOLEAN ? false : '');
+ }
+
+ private onStepActivated(): void {
+ const step = this.currentWizardStep;
+ if (!step) {
+ return;
+ }
+ if (step.type === 'instruction') {
+ step.markdown = this.zipFiles.get(step.rawSteps[0].file) || '';
+ } else if (step.type === 'progress' && !step.progressDone) {
+ if (this.reviewMode) {
+ this.showCompletedEntitySteps(step);
+ } else {
+ this.initAndRunEntitySteps(step);
+ }
+ }
+ }
+
+ private showCompletedEntitySteps(ws: WizardStep): void {
+ ws.entitySteps = ws.rawSteps.map(s => {
+ const alias = stepTypeAliasMap[s.type];
+ const output = alias ? this.entityOutputs.get(alias) : null;
+ const storedState = this.data.installState?.[s.name] || this.data.installState?.[this.resolveVariables(s.name)];
+ return {
+ step: s,
+ status: 'success' as const,
+ resolvedName: this.resolveVariables(s.name),
+ entityOutput: output || undefined,
+ resolution: storedState?.resolution || 'created'
+ };
+ });
+ ws.progressDone = true;
+ ws.completed = true;
+ }
+
+ private initAndRunEntitySteps(ws: WizardStep): void {
+ ws.entitySteps = ws.rawSteps.map(s => ({
+ step: s,
+ status: 'pending' as const,
+ resolvedName: this.resolveVariables(s.name)
+ }));
+ ws.progressError = null;
+ ws.progressDone = false;
+ void this.runEntitySteps(ws);
+ }
+
+ private markEntityStepSuccess(ws: WizardStep, ep: EntityStepProgress,
+ output: EntityStepOutput, resolution: string): void {
+ ep.entityOutput = output;
+ ep.resolution = resolution;
+ ep.status = 'success';
+ const alias = stepTypeAliasMap[ep.step.type];
+ if (alias) {
+ this.entityOutputs.set(alias, output);
+ }
+ for (const remaining of ws.entitySteps) {
+ if (remaining.status === 'pending') {
+ remaining.resolvedName = this.resolveVariables(remaining.step.name);
+ }
+ }
+ this.cdr.detectChanges();
+ }
+
+ private async runEntitySteps(ws: WizardStep): Promise {
+ for (const ep of ws.entitySteps) {
+ if (ep.status === 'success') {
+ continue;
+ }
+ ep.status = 'running';
+ ep.errorMessage = null;
+ this.cdr.detectChanges();
+ try {
+ // Pre-check for existing entity
+ const existing = await this.preCheckEntity(ep.step);
+ if (existing) {
+ ep.status = 'conflict';
+ ep.existingEntity = existing;
+ ep.conflictType = this.getConflictType(ep.step.type);
+ this.cdr.detectChanges();
+ return; // Pause — user must choose a resolution
+ }
+ const startTime = Date.now();
+ const output = await this.createEntity(ep.step);
+ // Save optional attributes after entity creation
+ await this.saveStepAttributes(ep.step, output);
+ // Ensure minimum visible time per step
+ const elapsed = Date.now() - startTime;
+ if (elapsed < ENTITY_STEP_MIN_DELAY) {
+ await this.delay(ENTITY_STEP_MIN_DELAY - elapsed);
+ }
+ this.markEntityStepSuccess(ws, ep, output, 'created');
+ } catch (err: any) {
+ ep.status = 'error';
+ ep.errorMessage = err?.error?.message || err?.message || 'Unknown error';
+ ws.progressError = ep.errorMessage;
+ this.cdr.detectChanges();
+ return;
+ }
+ }
+
+ // All done — register install with created entity IDs
+ ws.progressDone = true;
+ ws.completed = true;
+ try {
+ const createdEntityIds = this.collectCreatedEntityIds();
+ const dashboardId = this.findCreatedDashboardId();
+ await firstValueFrom(
+ this.iotHubApiService.registerDeviceInstall(
+ this.data.item.id as string,
+ { createdEntityIds, dashboardId, selectedInstallMethod: this.selectedInstallMethod, installState: this.buildInstallState() },
+ { ignoreLoading: true }
+ )
+ );
+ } catch (_e) {
+ // Non-critical — entities are created, tracking registration failed
+ console.error('Failed to register device install', _e);
+ }
+
+ // Auto-advance to next step after a short pause
+ if (!this.isLastWizardStep) {
+ await this.delay(500);
+ this.stepper.next();
+ this.cdr.detectChanges();
+ this.onStepActivated();
+ }
+ }
+
+ private async createEntity(step: DeviceInstallStep): Promise {
+ const raw = this.zipFiles.get(step.template);
+ if (!raw) {
+ throw new Error(`Template file not found: ${step.template}`);
+ }
+ const resolved = this.resolveVariables(raw);
+ const template = JSON.parse(resolved);
+
+ switch (step.type) {
+ case InstallStepType.DEVICE_PROFILE: {
+ const existing = await this.findDeviceProfileByName(template.name);
+ if (existing) {
+ return existing;
+ }
+ const result = await firstValueFrom(this.deviceProfileService.saveDeviceProfile(template, {ignoreErrors: true}));
+ return { id: result.id.id, name: result.name, url: `/profiles/deviceProfiles/${result.id.id}` };
+ }
+ case InstallStepType.DEVICE: {
+ const result = await firstValueFrom(this.deviceService.saveDevice(template, {ignoreErrors: true}));
+ const creds = await this.resolveCredentials(step, result.id.id);
+ return { id: result.id.id, name: result.name, url: `/entities/devices/${result.id.id}`, token: creds.credentialsId };
+ }
+ case InstallStepType.GATEWAY: {
+ const result = await firstValueFrom(this.deviceService.saveDevice(template, {ignoreErrors: true}));
+ const creds = await this.resolveCredentials(step, result.id.id);
+ const output = {
+ id: result.id.id,
+ name: result.name,
+ url: '/entities/gateways',
+ token: creds.credentialsId,
+ dockerComposeUrl: `/api/device-connectivity/gateway-launch/${result.id.id}/docker-compose/download`
+ };
+ // Store entity output early so docker-compose template can resolve ${gateway.token} etc.
+ this.entityOutputs.set('gateway', output);
+ // Resolve custom docker-compose template if provided
+ if (step.dockerCompose) {
+ const raw = this.zipFiles.get(step.dockerCompose);
+ if (raw) {
+ this.gatewayDockerComposeContent = this.resolveVariables(raw);
+ }
+ }
+ return output;
+ }
+ case InstallStepType.GATEWAY_CONNECTOR: {
+ const gatewayOutput = this.entityOutputs.get('gateway');
+ if (!gatewayOutput) {
+ throw new Error('GATEWAY step must precede GATEWAY_CONNECTOR');
+ }
+ const gatewayEntityId = { entityType: 'DEVICE', id: gatewayOutput.id } as EntityId;
+ const connectorName = template.name;
+
+ // Fetch current active_connectors
+ let activeConnectors: string[] = [];
+ try {
+ const attrs = await firstValueFrom(
+ this.attributeService.getEntityAttributes(gatewayEntityId, AttributeScope.SHARED_SCOPE, ['active_connectors'], {ignoreErrors: true})
+ );
+ const existing = attrs?.find(a => a.key === 'active_connectors');
+ if (existing?.value && Array.isArray(existing.value)) {
+ activeConnectors = existing.value;
+ }
+ } catch (_e) {
+ // First connector — no existing attributes
+ }
+
+ // Append connector name
+ if (!activeConnectors.includes(connectorName)) {
+ activeConnectors.push(connectorName);
+ }
+
+ // Save attributes
+ await firstValueFrom(this.attributeService.saveEntityAttributes(
+ gatewayEntityId, AttributeScope.SHARED_SCOPE,
+ [
+ { key: 'active_connectors', value: activeConnectors },
+ { key: connectorName, value: template }
+ ],
+ {ignoreErrors: true}
+ ));
+
+ return { id: gatewayOutput.id, name: connectorName };
+ }
+ case InstallStepType.DASHBOARD: {
+ const result = await firstValueFrom(this.dashboardService.saveDashboard(template, {ignoreErrors: true}));
+ return { id: result.id.id, name: result.title, url: `/dashboards/${result.id.id}` };
+ }
+ case InstallStepType.RULE_CHAIN: {
+ const ruleChain = template.ruleChain || template;
+ const metadata = template.metadata;
+ const existing = await this.findRuleChainByName(ruleChain.name);
+ if (existing) {
+ return existing;
+ }
+ return this.saveRuleChainWithMetadata(ruleChain, metadata);
+ }
+ default:
+ throw new Error(`Unsupported entity step type: ${step.type}`);
+ }
+ }
+
+ private async saveRuleChainWithMetadata(ruleChain: any, metadata: any): Promise {
+ const saved = await firstValueFrom(this.ruleChainService.saveRuleChain(ruleChain, {ignoreErrors: true}));
+ if (metadata) {
+ metadata.ruleChainId = saved.id;
+ await firstValueFrom(this.ruleChainService.saveRuleChainMetadata(metadata, {ignoreErrors: true}));
+ }
+ return { id: saved.id.id, name: saved.name, url: `/ruleChains/${saved.id.id}` };
+ }
+
+ private async resolveCredentials(step: DeviceInstallStep, deviceId: string): Promise {
+ const creds = await firstValueFrom(this.deviceService.getDeviceCredentials(deviceId, false, {ignoreErrors: true}));
+ if (step.credentials) {
+ const raw = this.zipFiles.get(step.credentials);
+ if (raw) {
+ const credTemplate = JSON.parse(this.resolveVariables(raw));
+ creds.credentialsType = credTemplate.credentialsType || creds.credentialsType;
+ if (credTemplate.credentialsValue) {
+ creds.credentialsValue = typeof credTemplate.credentialsValue === 'string'
+ ? credTemplate.credentialsValue
+ : JSON.stringify(credTemplate.credentialsValue);
+ }
+ if (credTemplate.credentialsId) {
+ creds.credentialsId = credTemplate.credentialsId;
+ }
+ await firstValueFrom(this.deviceService.saveDeviceCredentials(creds, {ignoreErrors: true}));
+ }
+ }
+ return creds;
+ }
+
+ private async findDeviceProfileByName(name: string): Promise {
+ const profiles = await firstValueFrom(this.deviceProfileService.getDeviceProfileNames());
+ const match = profiles.find(p => p.name === name);
+ return match ? { id: match.id.id, name: match.name, url: `/profiles/deviceProfiles/${match.id.id}` } : null;
+ }
+
+ private async findRuleChainByName(name: string): Promise {
+ const page = await firstValueFrom(this.ruleChainService.getRuleChains(new PageLink(100, 0, name)));
+ const match = page.data.find(rc => rc.name === name);
+ return match ? { id: match.id.id, name: match.name, url: `/ruleChains/${match.id.id}` } : null;
+ }
+
+ private async findDeviceByName(name: string): Promise {
+ try {
+ const device = await firstValueFrom(this.deviceService.findByName(name, {ignoreErrors: true}));
+ if (device) {
+ return { id: device.id.id, name: device.name, url: `/entities/devices/${device.id.id}` };
+ }
+ } catch (_e) {
+ // 404 = not found
+ }
+ return null;
+ }
+
+ private async findDashboardByTitle(title: string): Promise {
+ const page = await firstValueFrom(this.dashboardService.getTenantDashboards(new PageLink(10, 0, title), {ignoreErrors: true}));
+ const match = page.data.find(d => d.title === title);
+ return match ? { id: match.id.id, name: match.title, url: `/dashboards/${match.id.id}` } : null;
+ }
+
+ private async overwriteEntity(step: DeviceInstallStep, existing: EntityStepOutput): Promise {
+ const raw = this.zipFiles.get(step.template);
+ if (!raw) throw new Error(`Template file not found: ${step.template}`);
+ const resolved = this.resolveVariables(raw);
+ const template = JSON.parse(resolved);
+
+ switch (step.type) {
+ case InstallStepType.DEVICE_PROFILE: {
+ template.id = { id: existing.id, entityType: 'DEVICE_PROFILE' };
+ const result = await firstValueFrom(this.deviceProfileService.saveDeviceProfile(template, {ignoreErrors: true}));
+ return { id: result.id.id, name: result.name, url: `/profiles/deviceProfiles/${result.id.id}` };
+ }
+ case InstallStepType.DEVICE: {
+ template.id = { id: existing.id, entityType: 'DEVICE' };
+ const result = await firstValueFrom(this.deviceService.saveDevice(template, {ignoreErrors: true}));
+ const creds = await this.resolveCredentials(step, result.id.id);
+ return { id: result.id.id, name: result.name, url: `/entities/devices/${result.id.id}`, token: creds.credentialsId };
+ }
+ case InstallStepType.GATEWAY: {
+ template.id = { id: existing.id, entityType: 'DEVICE' };
+ const result = await firstValueFrom(this.deviceService.saveDevice(template, {ignoreErrors: true}));
+ const creds = await this.resolveCredentials(step, result.id.id);
+ const output: EntityStepOutput = {
+ id: result.id.id,
+ name: result.name,
+ url: '/entities/gateways',
+ token: creds.credentialsId,
+ dockerComposeUrl: `/api/device-connectivity/gateway-launch/${result.id.id}/docker-compose/download`
+ };
+ this.entityOutputs.set('gateway', output);
+ if (step.dockerCompose) {
+ const dcRaw = this.zipFiles.get(step.dockerCompose);
+ if (dcRaw) this.gatewayDockerComposeContent = this.resolveVariables(dcRaw);
+ }
+ return output;
+ }
+ case InstallStepType.DASHBOARD: {
+ template.id = { id: existing.id, entityType: 'DASHBOARD' };
+ const result = await firstValueFrom(this.dashboardService.saveDashboard(template, {ignoreErrors: true}));
+ return { id: result.id.id, name: result.title, url: `/dashboards/${result.id.id}` };
+ }
+ case InstallStepType.RULE_CHAIN: {
+ const ruleChain = template.ruleChain || template;
+ const metadata = template.metadata;
+ ruleChain.id = { id: existing.id, entityType: 'RULE_CHAIN' };
+ return this.saveRuleChainWithMetadata(ruleChain, metadata);
+ }
+ default:
+ throw new Error(`Unsupported overwrite for step type: ${step.type}`);
+ }
+ }
+
+ private async preCheckEntity(step: DeviceInstallStep): Promise {
+ const raw = this.zipFiles.get(step.template);
+ if (!raw) return null;
+ const resolved = this.resolveVariables(raw);
+ const template = JSON.parse(resolved);
+
+ switch (step.type) {
+ case InstallStepType.DEVICE_PROFILE:
+ return this.findDeviceProfileByName(template.name);
+ case InstallStepType.RULE_CHAIN: {
+ const name = template.ruleChain?.name || template.name;
+ return this.findRuleChainByName(name);
+ }
+ case InstallStepType.DEVICE:
+ case InstallStepType.GATEWAY:
+ return this.findDeviceByName(template.name);
+ case InstallStepType.DASHBOARD:
+ return this.findDashboardByTitle(template.title);
+ default:
+ return null;
+ }
+ }
+
+ private getConflictType(stepType: InstallStepType): 'use-or-overwrite' | 'overwrite-or-copy' {
+ return stepType === InstallStepType.DASHBOARD ? 'overwrite-or-copy' : 'use-or-overwrite';
+ }
+
+ private buildInstallState(): Record {
+ const state: Record = {};
+ for (const ws of this.wizardSteps) {
+ if (ws.type === 'form' && ws.formGroup) {
+ state[ws.label] = { formValues: ws.formGroup.getRawValue() };
+ } else if (ws.type === 'progress' && ws.entitySteps) {
+ for (const ep of ws.entitySteps) {
+ if (ep.status === 'success' && ep.entityOutput) {
+ state[ep.step.name] = { entityOutput: ep.entityOutput, resolution: ep.resolution || 'created' };
+ }
+ }
+ }
+ }
+ return state;
+ }
+
+ private collectCreatedEntityIds(): { entityType: string; id: string }[] {
+ const ids: { entityType: string; id: string }[] = [];
+ for (const ws of this.wizardSteps) {
+ if (ws.type === 'progress' && ws.entitySteps) {
+ for (const ep of ws.entitySteps) {
+ if (ep.status === 'success' && ep.entityOutput) {
+ const entityType = this.stepTypeToEntityType(ep.step.type);
+ if (entityType) {
+ ids.push({ entityType, id: ep.entityOutput.id });
+ }
+ }
+ }
+ }
+ }
+ return ids;
+ }
+
+ private findCreatedDashboardId(): { entityType: string; id: string } | undefined {
+ for (const ws of this.wizardSteps) {
+ if (ws.type === 'progress' && ws.entitySteps) {
+ for (const ep of ws.entitySteps) {
+ if (ep.step.type === InstallStepType.DASHBOARD && ep.status === 'success' && ep.entityOutput) {
+ return { entityType: 'DASHBOARD', id: ep.entityOutput.id };
+ }
+ }
+ }
+ }
+ return undefined;
+ }
+
+ private async saveStepAttributes(step: DeviceInstallStep, output: EntityStepOutput): Promise {
+ const entityType = this.stepTypeToEntityType(step.type);
+ if (!entityType) {
+ return;
+ }
+ const entityId = { entityType, id: output.id } as EntityId;
+ if (step.serverAttributes) {
+ const raw = this.zipFiles.get(step.serverAttributes);
+ if (raw) {
+ const resolved = JSON.parse(this.resolveVariables(raw));
+ const attrs = Object.entries(resolved).map(([key, value]) => ({ key, value }));
+ await firstValueFrom(this.attributeService.saveEntityAttributes(
+ entityId, AttributeScope.SERVER_SCOPE, attrs, {ignoreErrors: true}
+ ));
+ }
+ }
+ if (step.sharedAttributes) {
+ const raw = this.zipFiles.get(step.sharedAttributes);
+ if (raw) {
+ const resolved = JSON.parse(this.resolveVariables(raw));
+ const attrs = Object.entries(resolved).map(([key, value]) => ({ key, value }));
+ await firstValueFrom(this.attributeService.saveEntityAttributes(
+ entityId, AttributeScope.SHARED_SCOPE, attrs, {ignoreErrors: true}
+ ));
+ }
+ }
+ }
+
+ private stepTypeToEntityType(stepType: InstallStepType): string | null {
+ switch (stepType) {
+ case InstallStepType.DEVICE_PROFILE: return 'DEVICE_PROFILE';
+ case InstallStepType.DEVICE: return 'DEVICE';
+ case InstallStepType.GATEWAY: return 'DEVICE';
+ case InstallStepType.GATEWAY_CONNECTOR: return 'DEVICE';
+ case InstallStepType.DASHBOARD: return 'DASHBOARD';
+ case InstallStepType.RULE_CHAIN: return 'RULE_CHAIN';
+ default: return null;
+ }
+ }
+
+ private delay(ms: number): Promise {
+ return new Promise(resolve => setTimeout(resolve, ms));
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/install-form-renderer/install-form-renderer.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/install-form-renderer/install-form-renderer.component.html
new file mode 100644
index 0000000000..b1a28b545c
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/install-form-renderer/install-form-renderer.component.html
@@ -0,0 +1,119 @@
+
+@if (formGroup) {
+
+}
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/widget-types-panel.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/install-form-renderer/install-form-renderer.component.scss
similarity index 63%
rename from ui-ngx/src/app/modules/home/components/dashboard-page/widget-types-panel.component.scss
rename to ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/install-form-renderer/install-form-renderer.component.scss
index 99285e46db..daaa824570 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/widget-types-panel.component.scss
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/install-form-renderer/install-form-renderer.component.scss
@@ -14,23 +14,16 @@
* limitations under the License.
*/
:host {
- width: 100%;
- height: 100%;
- min-width: 200px;
- overflow: hidden;
- background: #fff;
- border-radius: 4px;
- box-shadow:
- 0 7px 8px -4px rgba(0, 0, 0, .2),
- 0 13px 19px 2px rgba(0, 0, 0, .14),
- 0 5px 24px 4px rgba(0, 0, 0, .12);
+ display: block;
+}
- .mat-content {
- overflow: hidden;
- background-color: #fff;
- }
+.tb-install-form-field-help {
+ font-size: 12px;
+ color: rgba(0, 0, 0, 0.6);
+ margin-top: 4px;
+}
- .mat-padding {
- padding: 16px;
- }
+.tb-install-form-field-help-image {
+ max-width: 100%;
+ margin-top: 8px;
}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/install-form-renderer/install-form-renderer.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/install-form-renderer/install-form-renderer.component.ts
new file mode 100644
index 0000000000..ea129ce0ea
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/install-form-renderer/install-form-renderer.component.ts
@@ -0,0 +1,82 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { UntypedFormGroup } from '@angular/forms';
+import { FormFieldDefinition, FormFieldType } from '@shared/models/iot-hub/device-package.models';
+import { generateSecret } from '@core/utils';
+
+const DEFAULT_RANDOM_SIZE = 20;
+
+/**
+ * Reusable form renderer for the device install dialog's SHOW_FORM step. Consumes
+ * the FormFieldDefinition[] parsed from the package's form.json directly.
+ *
+ * The renderer is presentation-only. The caller owns the FormGroup and supplies
+ * the FormFieldDefinition[] array. Optional resolveImagePath callback maps
+ * relative help-image paths to data URIs (the dialog supplies it from the parsed
+ * package ZIP).
+ */
+@Component({
+ selector: 'tb-install-form-renderer',
+ templateUrl: './install-form-renderer.component.html',
+ styleUrls: ['./install-form-renderer.component.scss'],
+ standalone: false
+})
+export class InstallFormRendererComponent implements OnChanges {
+
+ @Input() fields: FormFieldDefinition[] = [];
+ @Input() formGroup!: UntypedFormGroup;
+ @Input() resolveImagePath?: (path: string) => string;
+ /** When true, PASSWORD inputs render unmasked by default (used by review mode). */
+ @Input() reviewMode = false;
+
+ passwordVisible: Record = {};
+
+ readonly FormFieldType = FormFieldType;
+
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes.fields || changes.reviewMode) {
+ this.passwordVisible = {};
+ if (this.reviewMode) {
+ for (const f of this.fields) {
+ if (f.type === FormFieldType.PASSWORD) {
+ this.passwordVisible[f.key] = true;
+ }
+ }
+ }
+ }
+ }
+
+ togglePasswordVisible(key: string): void {
+ this.passwordVisible[key] = !this.passwordVisible[key];
+ }
+
+ regenerate(field: FormFieldDefinition): void {
+ const control = this.formGroup.controls[field.key];
+ if (!control) return;
+ control.patchValue(generateSecret(field.randomSize ?? DEFAULT_RANDOM_SIZE));
+ control.markAsDirty();
+ }
+
+ getPatternErrorMessage(field: FormFieldDefinition): string {
+ return field.validators?.[0]?.message || 'Invalid format';
+ }
+
+ imagePath(path: string): string {
+ return this.resolveImagePath ? this.resolveImagePath(path) : path;
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-actions.service.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-actions.service.ts
new file mode 100644
index 0000000000..bae080a464
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-actions.service.ts
@@ -0,0 +1,152 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { Injectable } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Observable, of, EMPTY } from 'rxjs';
+import { filter, mergeMap } from 'rxjs/operators';
+import { TranslateService } from '@ngx-translate/core';
+import { DialogService } from '@core/services/dialog.service';
+import { MpItemVersionView } from '@shared/models/iot-hub/iot-hub-version.models';
+import { ItemType } from '@shared/models/iot-hub/iot-hub-item.models';
+import { DeviceInstalledItemDescriptor, IotHubInstalledItem } from '@shared/models/iot-hub/iot-hub-installed-item.models';
+import { IotHubApiService } from '@core/http/iot-hub-api.service';
+import { EntityId } from '@shared/models/id/entity-id';
+import { TbIotHubAddItemDialogComponent, IotHubAddItemDialogData, IotHubAddItemDialogResult } from './iot-hub-add-item-dialog.component';
+import { TbIotHubItemDetailDialogComponent, IotHubItemDetailDialogData, IotHubItemDetailDialogMode } from './iot-hub-item-detail-dialog.component';
+import { TbIotHubInstallDialogComponent, IotHubInstallDialogData } from './iot-hub-install-dialog.component';
+import { TbIotHubUpdateDialogComponent, IotHubUpdateDialogData } from './iot-hub-update-dialog.component';
+import { TbIotHubDeleteDialogComponent, IotHubDeleteDialogData } from './iot-hub-delete-dialog.component';
+import { TbDeviceInstallDialogComponent, DeviceInstallDialogData } from './device-install-dialog/device-install-dialog.component';
+import { TbIotHubInstalledItemsDialogComponent, IotHubInstalledItemsDialogData } from './iot-hub-installed-items-dialog.component';
+
+@Injectable()
+export class IotHubActionsService {
+
+ constructor(
+ private dialog: MatDialog,
+ private iotHubApiService: IotHubApiService,
+ private dialogService: DialogService,
+ private translate: TranslateService
+ ) {}
+
+ openItemDetail(item: MpItemVersionView, installedItem?: IotHubInstalledItem, installedItemsCount?: number,
+ mode?: IotHubItemDetailDialogMode, showCreator?: boolean, preview?: boolean): Observable {
+ return this.dialog.open(TbIotHubItemDetailDialogComponent, {
+ panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
+ disableClose: true,
+ autoFocus: false,
+ data: { item, installedItem, installedItemsCount, mode, showCreator, preview } as IotHubItemDetailDialogData
+ }).afterClosed();
+ }
+
+ openInstalledItems(item: MpItemVersionView): Observable {
+ return this.dialog.open(TbIotHubInstalledItemsDialogComponent, {
+ panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
+ disableClose: true,
+ autoFocus: false,
+ data: { item } as IotHubInstalledItemsDialogData
+ }).afterClosed();
+ }
+
+ addItem(itemType: ItemType, options?: { itemSubType?: string; entityId?: EntityId }): Observable {
+ return this.dialog.open(TbIotHubAddItemDialogComponent, {
+ panelClass: ['tb-dialog', 'tb-fullscreen-dialog-lt-md'],
+ disableClose: true,
+ autoFocus: false,
+ data: {
+ itemType,
+ itemSubType: options?.itemSubType,
+ entityId: options?.entityId
+ } as IotHubAddItemDialogData
+ }).afterClosed();
+ }
+
+ installItem(item: MpItemVersionView): Observable {
+ if (item.type === ItemType.ALARM_RULE) {
+ this.dialogService.alert(
+ this.translate.instant('iot-hub.alarm-rule-install-update-required'),
+ this.translate.instant('iot-hub.alarm-rule-install-update-required-text')
+ );
+ return EMPTY;
+ }
+ if (item.type === ItemType.DEVICE) {
+ return this.installDevice(item);
+ }
+ return this.dialog.open(TbIotHubInstallDialogComponent, {
+ panelClass: ['tb-dialog'],
+ disableClose: true,
+ autoFocus: false,
+ data: { item } as IotHubInstallDialogData
+ }).afterClosed();
+ }
+
+ updateItem(installedItem: IotHubInstalledItem, version: string, versionId: string): Observable {
+ if (!installedItem) {
+ return EMPTY;
+ }
+ return this.dialog.open(TbIotHubUpdateDialogComponent, {
+ panelClass: ['tb-dialog'],
+ disableClose: true,
+ autoFocus: false,
+ data: {
+ installedItemId: installedItem.id.id,
+ itemName: installedItem.itemName,
+ itemType: installedItem.itemType as ItemType,
+ version,
+ versionId
+ } as IotHubUpdateDialogData
+ }).afterClosed();
+ }
+
+ deleteItem(installedItem: IotHubInstalledItem): Observable {
+ if (!installedItem) {
+ return of(false);
+ }
+ return this.dialog.open(TbIotHubDeleteDialogComponent, {
+ panelClass: ['tb-dialog'],
+ disableClose: true,
+ autoFocus: false,
+ data: { itemName: installedItem.itemName, itemType: installedItem.itemType } as IotHubDeleteDialogData
+ }).afterClosed().pipe(
+ filter(confirmed => !!confirmed),
+ mergeMap(() => this.iotHubApiService.deleteInstalledItem(installedItem.id.id)),
+ mergeMap(() => of(true))
+ );
+ }
+
+ installDevice(item: MpItemVersionView): Observable {
+ return this.openDeviceInstallDialog(item);
+ }
+
+ reviewDevice(item: MpItemVersionView, deviceDescriptor: DeviceInstalledItemDescriptor): Observable {
+ return this.openDeviceInstallDialog(item, {
+ reviewMode: true,
+ selectedInstallMethod: deviceDescriptor.selectedInstallMethod,
+ installState: deviceDescriptor.installState
+ });
+ }
+
+ private openDeviceInstallDialog(item: MpItemVersionView,
+ options?: { reviewMode?: boolean; selectedInstallMethod?: string; installState?: any }): Observable {
+ return this.dialog.open(TbDeviceInstallDialogComponent, {
+ panelClass: ['tb-dialog', 'tb-fullscreen-dialog-lt-md'],
+ disableClose: true,
+ autoFocus: false,
+ data: { item, ...options }
+ }).afterClosed();
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.html
new file mode 100644
index 0000000000..ebe3f7baef
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.html
@@ -0,0 +1,50 @@
+
+
diff --git a/ui-ngx/src/app/shared/components/widgets-bundle-search.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.scss
similarity index 53%
rename from ui-ngx/src/app/shared/components/widgets-bundle-search.component.scss
rename to ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.scss
index 649f082696..58852ae71b 100644
--- a/ui-ngx/src/app/shared/components/widgets-bundle-search.component.scss
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.scss
@@ -13,43 +13,35 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-.input-wrapper {
- background: hsla(0, 0%, 100%, .2);
- border-radius: 8px;
- color: rgb(255, 255, 255, .84);
- padding: 5px 8px 5px 16px;
- height: 46px;
- input {
- width: 100%;
- height: 100%;
+@import "../../../../../scss/constants";
+
+:host-context(.mat-mdc-dialog-container) {
+ .mat-mdc-dialog-content {
+ position: relative;
padding: 0;
- font-size: 20px;
- outline: none;
- border: none;
- background-color: transparent;
- color: #fff;
+ overflow-x: hidden;
+ height: 70vh;
- &::placeholder {
- color: #fff;
- opacity: .6;
- line-height: 26px;
+ tb-iot-hub-browse {
+ height: 100%;
}
- }
- &.focus {
- background: #fff;
- color: rgba(0,0,0,.54);
+ @media #{$mat-gt-sm} {
+ width: 80vw;
+ max-height: 70vh;
+ }
- input {
- color: #000;
- opacity: .60;
+ @media #{$mat-gt-md} {
+ width: 1000px;
}
- .close {
- color: #000 !important;
- opacity: .54;
+ @media #{$mat-gt-xmd} {
+ width: 1200px;
}
}
-}
+ .mat-mdc-dialog-actions {
+ border-top: 1px solid rgba(0, 0, 0, 0.12);
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.ts
new file mode 100644
index 0000000000..e83580e271
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.ts
@@ -0,0 +1,118 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { DialogComponent } from '@shared/components/dialog.component';
+import { MpItemVersionView } from '@shared/models/iot-hub/iot-hub-version.models';
+import { ItemType, itemTypeTranslations } from '@shared/models/iot-hub/iot-hub-item.models';
+import { IotHubApiService } from '@core/http/iot-hub-api.service';
+import { DialogService } from '@core/services/dialog.service';
+import { TranslateService } from '@ngx-translate/core';
+import { EntityId } from '@shared/models/id/entity-id';
+import { IotHubActionsService } from './iot-hub-actions.service';
+
+export interface IotHubAddItemDialogData {
+ itemType: ItemType;
+ itemSubType?: string;
+ entityId?: EntityId;
+}
+
+export interface IotHubAddItemDialogResult {
+ item: MpItemVersionView;
+ descriptor: any;
+}
+
+@Component({
+ selector: 'tb-iot-hub-add-item-dialog',
+ standalone: false,
+ templateUrl: './iot-hub-add-item-dialog.component.html',
+ styleUrls: ['./iot-hub-add-item-dialog.component.scss']
+})
+export class TbIotHubAddItemDialogComponent extends DialogComponent {
+
+ itemType: ItemType;
+ itemSubType: string;
+ isInstalling = false;
+
+ constructor(
+ protected store: Store,
+ protected router: Router,
+ protected dialogRef: MatDialogRef,
+ @Inject(MAT_DIALOG_DATA) public data: IotHubAddItemDialogData,
+ private translate: TranslateService,
+ private iotHubApiService: IotHubApiService,
+ private dialogService: DialogService,
+ private iotHubActions: IotHubActionsService
+ ) {
+ super(store, router, dialogRef);
+ this.itemType = data.itemType;
+ this.itemSubType = data.itemSubType;
+ }
+
+ getTitle(): string {
+ const typeKey = itemTypeTranslations.get(this.itemType);
+ const typeLabel = typeKey ? this.translate.instant(typeKey) : '';
+ return this.translate.instant('iot-hub.add-item-from-iot-hub', { type: typeLabel });
+ }
+
+ onAddItem(item: MpItemVersionView): void {
+ if (this.itemType === ItemType.DEVICE) {
+ this.installDeviceItem(item);
+ return;
+ }
+ this.isInstalling = true;
+ const versionId = item.id as string;
+ const installData = this.data.entityId ? { entityId: this.data.entityId } : undefined;
+ this.iotHubApiService.installItemVersion(versionId, { ignoreLoading: true }, installData).subscribe({
+ next: (result) => {
+ this.isInstalling = false;
+ if (result.success) {
+ this.dialogRef.close({ item, descriptor: result.descriptor } as IotHubAddItemDialogResult);
+ } else {
+ const message = result.errorMessage || this.translate.instant('iot-hub.install-error', { name: item.name });
+ this.dialogService.alert(
+ this.translate.instant('iot-hub.install-error-title'),
+ message
+ );
+ }
+ },
+ error: (err) => {
+ this.isInstalling = false;
+ const message = err?.error?.message || err?.message || this.translate.instant('iot-hub.install-error', { name: item.name });
+ this.dialogService.alert(
+ this.translate.instant('iot-hub.install-error-title'),
+ message
+ );
+ }
+ });
+ }
+
+ private installDeviceItem(item: MpItemVersionView): void {
+ this.iotHubActions.installDevice(item).subscribe(result => {
+ if (result === 'installed') {
+ this.dialogRef.close({ item, descriptor: { type: 'DEVICE' } } as IotHubAddItemDialogResult);
+ }
+ });
+ }
+
+ close(): void {
+ this.dialogRef.close();
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.html
new file mode 100644
index 0000000000..0448de834c
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.html
@@ -0,0 +1,497 @@
+
+();
+ @Input() set activeType(value: ItemType) {
+ if (value && value !== this._activeType) {
+ const wasInit = !!this._activeType;
+ this._activeType = value;
+ // When set after init (e.g., parent resolves config in its ngOnInit),
+ // trigger type-specific loading since our ngOnInit already ran
+ if (wasInit) {
+ this.loadFilterInfo();
+ if (value === ItemType.WIDGET) {
+ this.loadInstalledWidgets();
+ } else if (value === ItemType.SOLUTION_TEMPLATE) {
+ this.loadInstalledSolutionTemplates();
+ } else {
+ this.loadInstalledItemCounts();
+ }
+ }
+ }
+ }
+ get activeType(): ItemType {
+ return this._activeType;
+ }
+
+ get isCompactType(): boolean {
+ return this._activeType === ItemType.CALCULATED_FIELD
+ || this._activeType === ItemType.ALARM_RULE
+ || this._activeType === ItemType.RULE_CHAIN;
+ }
+
+ get searchPlaceholderKey(): string {
+ switch (this._activeType) {
+ case ItemType.WIDGET: return 'iot-hub.search-widgets';
+ case ItemType.DASHBOARD: return 'iot-hub.search-dashboards';
+ case ItemType.SOLUTION_TEMPLATE: return 'iot-hub.search-solution-templates';
+ case ItemType.CALCULATED_FIELD: return 'iot-hub.search-calculated-fields';
+ case ItemType.ALARM_RULE: return 'iot-hub.search-alarm-rules';
+ case ItemType.RULE_CHAIN: return 'iot-hub.search-rule-chains';
+ case ItemType.DEVICE: return 'iot-hub.search-devices';
+ default: return 'iot-hub.search';
+ }
+ }
+
+ items: MpItemVersionView[] = [];
+ totalElements = 0;
+ pageSize = 12;
+ pageIndex = 0;
+ isLoading = false;
+ hasError = false;
+ filterDrawerOpened = false;
+ private retryTimer: any = null;
+
+ textSearch = '';
+ _activeType: ItemType = ItemType.WIDGET;
+
+ @ViewChild('cardGridProbe', { static: true }) cardGridProbe!: ElementRef;
+ probeCols = 4;
+
+ get cols(): number {
+ return this.isCompactType ? Math.max(1, this.probeCols - 1) : this.probeCols;
+ }
+
+ get pageSizeOptions(): number[] {
+ return this.cols >= 5 ? [15, 30, 60] : [12, 24, 48];
+ }
+
+ private resizeObserver?: ResizeObserver;
+ private resize$ = new Subject();
+ activeCategories = new Set();
+ activeUseCases = new Set();
+ activeCfTypes = new Set();
+ activeWidgetTypes = new Set();
+ activeRuleChainTypes = new Set();
+ activeConnectivity = new Set();
+ activeHardwareTypes = new Set();
+ activeVendors = new Set();
+
+ sortOptions: SortOption[] = [
+ { value: 'totalInstallCount', label: 'iot-hub.sort-most-installed', direction: Direction.DESC },
+ { value: 'publishedTime', label: 'iot-hub.sort-newest', direction: Direction.DESC },
+ { value: 'name', label: 'iot-hub.sort-name', direction: Direction.ASC }
+ ];
+
+ typeTabs: { type: ItemType; label: string }[] = CREATOR_VISIBLE_ITEM_TYPES.map(t => ({
+ type: t,
+ label: TbIotHubBrowseComponent.typeTabLabel(t)
+ }));
+ selectedSortIndex = 0;
+
+ subtypeOptions: FilterParamInfo[] = [];
+ categoryOptions: FilterParamInfo[] = [];
+ useCaseOptions: FilterParamInfo[] = [];
+ vendorOptions: FilterParamInfo[] = [];
+ hardwareTypeOptions: FilterParamInfo[] = [];
+ connectivityGroups: { group: string; values: FilterParamInfo[] }[] = [];
+
+ filterSearch: Record = {};
+ filterItemsHovered = false;
+
+ installedWidgets: IotHubInstalledItem[] = null;
+ installedSolutionTemplates: IotHubInstalledItem[] = null;
+ installedItemCounts: Record = {};
+
+ private searchSubject = new Subject();
+ private destroy$ = new Subject();
+
+ constructor(
+ private iotHubApiService: IotHubApiService,
+ private iotHubActions: IotHubActionsService,
+ private translate: TranslateService,
+ private router: Router,
+ private route: ActivatedRoute,
+ private zone: NgZone
+ ) {}
+
+ ngOnInit(): void {
+ this.searchSubject.pipe(
+ debounceTime(300),
+ takeUntil(this.destroy$)
+ ).subscribe(() => {
+ this.pageIndex = 0;
+ this.loadItems();
+ });
+ const params = this.route.snapshot.queryParams;
+ if (params['search']) {
+ this.textSearch = params['search'];
+ }
+ if (this.fixedSubType) {
+ const subtypes = this.getActiveSubtypes();
+ if (subtypes) {
+ subtypes.add(this.fixedSubType);
+ }
+ }
+ this.loadFilterInfo();
+ if (this.activeType === ItemType.WIDGET) {
+ this.loadInstalledWidgets();
+ } else if (this.activeType === ItemType.SOLUTION_TEMPLATE) {
+ this.loadInstalledSolutionTemplates();
+ } else {
+ this.loadInstalledItemCounts();
+ }
+ }
+
+ ngAfterViewInit(): void {
+ this.probeCols = this.measureProbeCols();
+ this.adjustPageSize();
+ this.resize$.pipe(
+ debounceTime(150),
+ takeUntil(this.destroy$)
+ ).subscribe(() => this.handleResize());
+ this.resizeObserver = new ResizeObserver(() => {
+ this.zone.run(() => this.resize$.next());
+ });
+ this.resizeObserver.observe(this.cardGridProbe.nativeElement);
+ this.loadItems();
+ }
+
+ ngOnDestroy(): void {
+ this.resizeObserver?.disconnect();
+ this.destroy$.next();
+ this.destroy$.complete();
+ }
+
+ private measureProbeCols(): number {
+ const el = this.cardGridProbe?.nativeElement;
+ if (!el) {
+ return this.probeCols;
+ }
+ // Force layout so `grid-template-columns` resolves to pixel tracks, not `repeat(...)`.
+ void el.offsetWidth;
+ const tracks = getComputedStyle(el).gridTemplateColumns;
+ if (!tracks || tracks === 'none') {
+ return 1;
+ }
+ if (tracks.startsWith('repeat(')) {
+ const match = tracks.match(/^repeat\(\s*(\d+)\s*,/);
+ return match ? parseInt(match[1], 10) : 1;
+ }
+ return Math.max(1, tracks.trim().split(/\s+/).filter(t => t.length > 0).length);
+ }
+
+ private adjustPageSize(): void {
+ const options = this.pageSizeOptions;
+ if (options.includes(this.pageSize)) {
+ return;
+ }
+ const oldPageSize = this.pageSize;
+ const oldPageIndex = this.pageIndex;
+ this.pageSize = options.reduce((best, cur) =>
+ Math.abs(cur - oldPageSize) < Math.abs(best - oldPageSize) ? cur : best);
+ this.pageIndex = Math.floor((oldPageIndex * oldPageSize) / this.pageSize);
+ }
+
+ private handleResize(): void {
+ const newProbeCols = this.measureProbeCols();
+ if (newProbeCols === this.probeCols) {
+ return;
+ }
+ const oldOptions = this.pageSizeOptions;
+ this.probeCols = newProbeCols;
+ const newOptions = this.pageSizeOptions;
+ if (oldOptions[0] === newOptions[0]) {
+ return;
+ }
+ this.adjustPageSize();
+ this.loadItems();
+ }
+
+ onSearchChange(value: string): void {
+ this.textSearch = value;
+ this.searchSubject.next(value);
+ }
+
+ onTypeTabChange(type: ItemType): void {
+ this.activeType = type;
+ this.clearActiveFilterSets();
+ this.filterSearch = {};
+ this.loadFilterInfo();
+ this.pageIndex = 0;
+ this.adjustPageSize();
+ if (type === ItemType.WIDGET) {
+ this.loadInstalledWidgets();
+ } else if (type === ItemType.SOLUTION_TEMPLATE) {
+ this.loadInstalledSolutionTemplates();
+ } else {
+ this.loadInstalledItemCounts();
+ }
+ this.loadItems();
+ }
+
+ isSubtypeActive(key: string): boolean {
+ return this.getActiveSubtypes().has(key);
+ }
+
+ isCategoryActive(key: string): boolean {
+ return this.activeCategories.has(key);
+ }
+
+ isUseCaseActive(key: string): boolean {
+ return this.activeUseCases.has(key);
+ }
+
+ onCategoryToggle(category: string): void {
+ if (this.activeCategories.has(category)) {
+ this.activeCategories.delete(category);
+ } else {
+ this.activeCategories.add(category);
+ }
+ this.pageIndex = 0;
+ this.loadItems();
+ }
+
+ onSortChange(index: number): void {
+ this.selectedSortIndex = index;
+ this.pageIndex = 0;
+ this.loadItems();
+ }
+
+ onPageChange(event: { pageIndex: number; pageSize: number }): void {
+ this.pageIndex = event.pageIndex;
+ this.pageSize = event.pageSize;
+ this.loadItems();
+ }
+
+ getTotalPages(): number {
+ return Math.ceil(this.totalElements / this.pageSize);
+ }
+
+ getPageNumbers(): number[] {
+ const total = this.getTotalPages();
+ const pages: number[] = [];
+ const maxVisible = 5;
+ let start = Math.max(0, this.pageIndex - Math.floor(maxVisible / 2));
+ const end = Math.min(total, start + maxVisible);
+ if (end - start < maxVisible) {
+ start = Math.max(0, end - maxVisible);
+ }
+ for (let i = start; i < end; i++) {
+ pages.push(i);
+ }
+ return pages;
+ }
+
+ goToPage(page: number): void {
+ if (page >= 0 && page < this.getTotalPages()) {
+ this.pageIndex = page;
+ this.loadItems();
+ }
+ }
+
+ onPageSizeChange(size: number): void {
+ this.pageSize = size;
+ this.pageIndex = 0;
+ this.loadItems();
+ }
+
+ onUseCaseToggle(useCase: string): void {
+ if (this.activeUseCases.has(useCase)) {
+ this.activeUseCases.delete(useCase);
+ } else {
+ this.activeUseCases.add(useCase);
+ }
+ this.pageIndex = 0;
+ this.loadItems();
+ }
+
+ onConnectivityToggle(value: string): void {
+ if (this.activeConnectivity.has(value)) {
+ this.activeConnectivity.delete(value);
+ } else {
+ this.activeConnectivity.add(value);
+ }
+ this.pageIndex = 0;
+ this.loadItems();
+ }
+
+ isConnectivityActive(value: string): boolean {
+ return this.activeConnectivity.has(value);
+ }
+
+ onHardwareTypeToggle(value: string): void {
+ if (this.activeHardwareTypes.has(value)) {
+ this.activeHardwareTypes.delete(value);
+ } else {
+ this.activeHardwareTypes.add(value);
+ }
+ this.pageIndex = 0;
+ this.loadItems();
+ }
+
+ isHardwareTypeActive(value: string): boolean {
+ return this.activeHardwareTypes.has(value);
+ }
+
+ onVendorToggle(vendor: string): void {
+ if (this.activeVendors.has(vendor)) {
+ this.activeVendors.delete(vendor);
+ } else {
+ this.activeVendors.add(vendor);
+ }
+ this.pageIndex = 0;
+ this.loadItems();
+ }
+
+ isVendorActive(vendor: string): boolean {
+ return this.activeVendors.has(vendor);
+ }
+
+ getActiveVendorsArray(): string[] {
+ return Array.from(this.activeVendors);
+ }
+
+ getActiveConnectivityArray(): string[] {
+ return Array.from(this.activeConnectivity);
+ }
+
+ getActiveHardwareTypesArray(): string[] {
+ return Array.from(this.activeHardwareTypes);
+ }
+
+ getActiveSubtypes(): Set {
+ switch (this.activeType) {
+ case ItemType.WIDGET: return this.activeWidgetTypes;
+ case ItemType.CALCULATED_FIELD: return this.activeCfTypes;
+ case ItemType.RULE_CHAIN: return this.activeRuleChainTypes;
+ default: return new Set();
+ }
+ }
+
+ onSubtypeToggle(subtype: string): void {
+ const active = this.getActiveSubtypes();
+ if (active.has(subtype)) {
+ active.delete(subtype);
+ } else {
+ active.add(subtype);
+ }
+ this.pageIndex = 0;
+ this.loadItems();
+ }
+
+ getActiveSubtypesArray(): string[] {
+ if (this.fixedSubType) {
+ return Array.from(this.getActiveSubtypes()).filter(s => s !== this.fixedSubType);
+ }
+ return Array.from(this.getActiveSubtypes());
+ }
+
+ getActiveCategoriesArray(): string[] {
+ return Array.from(this.activeCategories);
+ }
+
+ getActiveUseCasesArray(): string[] {
+ return Array.from(this.activeUseCases);
+ }
+
+ getFilteredItems(items: FilterParamInfo[], searchKey: string): FilterParamInfo[] {
+ return filterIotHubItemsBySearch(items, this.filterSearch[searchKey]);
+ }
+
+ getGroupedFilterItems(items: FilterParamInfo[], searchKey: string): IotHubFilterGroup[] {
+ return groupIotHubFilterItems(items, this.filterSearch[searchKey]);
+ }
+
+ getFilteredConnectivityGroups(searchKey: string): { group: string; values: FilterParamInfo[] }[] {
+ const search = (this.filterSearch[searchKey] || '').toLowerCase();
+ if (!search) { return this.connectivityGroups; }
+ return this.connectivityGroups
+ .map(g => ({ group: g.group, values: g.values.filter(v => v.key.toLowerCase().includes(search)) }))
+ .filter(g => g.values.length > 0);
+ }
+
+ get allConnectivityCount(): number {
+ return this.connectivityGroups.reduce((sum, g) => sum + g.values.length, 0);
+ }
+
+ getSubtypeLabel(key: string): string {
+ let translationKey: string;
+ switch (this.activeType) {
+ case ItemType.WIDGET: translationKey = widgetTypeTranslations.get(key); break;
+ case ItemType.CALCULATED_FIELD: translationKey = cfTypeTranslations.get(key); break;
+ case ItemType.RULE_CHAIN: translationKey = ruleChainTypeTranslations.get(key); break;
+ default: return key;
+ }
+ return translationKey ? this.translate.instant(translationKey) : key;
+ }
+
+ clearAllFilters(): void {
+ this.clearActiveFilterSets();
+ if (this.fixedSubType) {
+ this.getActiveSubtypes()?.add(this.fixedSubType);
+ }
+ this.textSearch = '';
+ this.filterSearch = {};
+ this.loadFilterInfo();
+ this.pageIndex = 0;
+ this.loadItems();
+ }
+
+ private clearActiveFilterSets(): void {
+ this.activeCategories.clear();
+ this.activeUseCases.clear();
+ this.activeCfTypes.clear();
+ this.activeWidgetTypes.clear();
+ this.activeRuleChainTypes.clear();
+ this.activeConnectivity.clear();
+ this.activeHardwareTypes.clear();
+ this.activeVendors.clear();
+ }
+
+ get activeFilterCount(): number {
+ const subtypeCount = this.fixedSubType ? this.getActiveSubtypesArray().length : (this.getActiveSubtypes()?.size || 0);
+ return subtypeCount + this.activeCategories.size + this.activeUseCases.size +
+ this.activeConnectivity.size + this.activeHardwareTypes.size + this.activeVendors.size;
+ }
+
+ hasActiveDropdownFilters(): boolean {
+ const subtypeCount = this.fixedSubType ? this.getActiveSubtypesArray().length : (this.getActiveSubtypes()?.size || 0);
+ return this.activeCategories.size > 0 ||
+ this.activeUseCases.size > 0 || subtypeCount > 0 ||
+ this.activeConnectivity.size > 0 || this.activeHardwareTypes.size > 0 ||
+ this.activeVendors.size > 0;
+ }
+
+ hasActiveFilters(): boolean {
+ return this.hasActiveDropdownFilters() || this.textSearch.length > 0;
+ }
+
+ getTitle(): string {
+ switch (this.activeType) {
+ case ItemType.WIDGET: return 'iot-hub.title-widgets';
+ case ItemType.DASHBOARD: return 'iot-hub.title-dashboards';
+ case ItemType.SOLUTION_TEMPLATE: return 'iot-hub.title-solution-templates';
+ case ItemType.CALCULATED_FIELD: return 'iot-hub.title-calculated-fields';
+ case ItemType.ALARM_RULE: return 'iot-hub.title-alarm-rules';
+ case ItemType.RULE_CHAIN: return 'iot-hub.title-rule-chains';
+ case ItemType.DEVICE: return 'iot-hub.title-devices';
+ }
+ }
+
+ getInstalledItem(item: MpItemVersionView): IotHubInstalledItem | undefined {
+ if (this.activeType === ItemType.WIDGET && this.installedWidgets) {
+ return this.installedWidgets.find(i => i.itemId === item.itemId);
+ }
+ if (this.activeType === ItemType.SOLUTION_TEMPLATE && this.installedSolutionTemplates) {
+ return this.installedSolutionTemplates.find(i => i.itemId === item.itemId);
+ }
+ return undefined;
+ }
+
+ getInstalledItemsCount(item: MpItemVersionView): number {
+ return this.installedItemCounts[item.itemId] || 0;
+ }
+
+ openItemDetail(item: MpItemVersionView): void {
+ this.iotHubActions.openItemDetail(item, this.getInstalledItem(item), this.getInstalledItemsCount(item), this.mode).subscribe(result => {
+ if (result?.action === 'add') {
+ this.addItem.emit(result.item);
+ } else if (result === 'installed' || result === 'updated' || result === 'deleted') {
+ this.reloadInstalledItems();
+ }
+ });
+ }
+
+ onItemAdd(item: MpItemVersionView): void {
+ this.addItem.emit(item);
+ }
+
+ installItem(item: MpItemVersionView): void {
+ this.iotHubActions.installItem(item).subscribe(result => {
+ if (result === 'installed') {
+ this.reloadInstalledItems();
+ }
+ });
+ }
+
+ updateItem(item: MpItemVersionView): void {
+ const installedItem = this.getInstalledItem(item);
+ if (!installedItem) { return; }
+ this.iotHubActions.updateItem(installedItem, item.version, item.id as string).subscribe(result => {
+ if (result === 'updated') {
+ this.reloadInstalledItems();
+ }
+ });
+ }
+
+ deleteInstalledItem(item: MpItemVersionView): void {
+ const installedItem = this.getInstalledItem(item);
+ if (!installedItem) { return; }
+ this.iotHubActions.deleteItem(installedItem).subscribe(() => {
+ this.reloadInstalledItems();
+ });
+ }
+
+ openInstallGuide(item: MpItemVersionView): void {
+ const installedItem = this.getInstalledItem(item);
+ if (!installedItem) { return; }
+ const descriptor = installedItem.descriptor as DeviceInstalledItemDescriptor;
+ this.iotHubApiService.getVersionInfo(installedItem.itemVersionId, {ignoreLoading: true, ignoreErrors: true}).subscribe(versionView => {
+ this.iotHubActions.reviewDevice(versionView, descriptor).subscribe();
+ });
+ }
+
+ navigateToCreator(creatorId: string): void {
+ void this.router.navigate(['/iot-hub/creator', creatorId]);
+ }
+
+ private loadInstalledWidgets(): void {
+ if (this.installedWidgets !== null) {
+ return;
+ }
+ const pageLink = new PageLink(10000, 0);
+ this.iotHubApiService.getInstalledItems(pageLink, ItemType.WIDGET, undefined, {ignoreLoading: true}).subscribe({
+ next: (data) => {
+ this.installedWidgets = data.data;
+ }
+ });
+ }
+
+ private loadInstalledItemCounts(): void {
+ this.iotHubApiService.getInstalledItemCounts(this.activeType, {ignoreLoading: true}).subscribe({
+ next: (counts) => {
+ this.installedItemCounts = counts;
+ }
+ });
+ }
+
+ private loadInstalledSolutionTemplates(): void {
+ if (this.installedSolutionTemplates !== null) {
+ return;
+ }
+ const pageLink = new PageLink(10000, 0);
+ this.iotHubApiService.getInstalledItems(pageLink, ItemType.SOLUTION_TEMPLATE, undefined, {ignoreLoading: true}).subscribe({
+ next: (data) => {
+ this.installedSolutionTemplates = data.data;
+ }
+ });
+ }
+
+ private reloadInstalledItems(): void {
+ const config = {ignoreLoading: true};
+ const pageLink = new PageLink(10000, 0);
+ if (this.activeType === ItemType.WIDGET) {
+ this.iotHubApiService.getInstalledItems(pageLink, ItemType.WIDGET, undefined, config).subscribe(data => {
+ this.installedWidgets = data.data;
+ });
+ } else if (this.activeType === ItemType.SOLUTION_TEMPLATE) {
+ this.iotHubApiService.getInstalledItems(pageLink, ItemType.SOLUTION_TEMPLATE, undefined, config).subscribe(data => {
+ this.installedSolutionTemplates = data.data;
+ });
+ } else {
+ this.iotHubApiService.getInstalledItemCounts(this.activeType, config).subscribe(counts => {
+ this.installedItemCounts = counts;
+ });
+ }
+ }
+
+ private loadFilterInfo(): void {
+ const hasItems = (i: FilterParamInfo) => i.totalItems > 0;
+ this.iotHubApiService.getFilterInfo(this.activeType, { ignoreLoading: true }).subscribe(info => {
+ this.subtypeOptions = (info.types || []).filter(hasItems);
+ this.categoryOptions = (info.categories || []).filter(hasItems);
+ this.useCaseOptions = (info.useCases || []).filter(hasItems);
+ this.vendorOptions = (info.vendors || []).filter(hasItems);
+ this.hardwareTypeOptions = (info.hardwareTypes || []).filter(hasItems);
+ if (info.connectivities) {
+ this.connectivityGroups = Object.entries(info.connectivities)
+ .map(([group, values]) => ({ group, values: values.filter(hasItems) }))
+ .filter(g => g.values.length > 0);
+ } else {
+ this.connectivityGroups = [];
+ }
+ });
+ }
+
+ retryLoadItems(): void {
+ if (this.retryTimer != null) {
+ clearTimeout(this.retryTimer);
+ }
+ this.isLoading = true;
+ this.retryTimer = setTimeout(() => {
+ this.retryTimer = null;
+ this.loadItems();
+ }, 350);
+ }
+
+ loadItems(): void {
+ if (this.retryTimer != null) {
+ clearTimeout(this.retryTimer);
+ this.retryTimer = null;
+ }
+ this.isLoading = true;
+ const sort = this.sortOptions[this.selectedSortIndex];
+ const sortOrder: SortOrder = { property: sort.value, direction: sort.direction };
+ const pageLink = new PageLink(this.pageSize, this.pageIndex, this.textSearch || null, sortOrder);
+ const query = new MpItemVersionQuery(pageLink, {
+ type: this.activeType,
+ creatorId: this.creatorId || undefined,
+ categories: this.activeCategories.size > 0 ? Array.from(this.activeCategories) : undefined,
+ useCases: this.activeUseCases.size > 0 ? Array.from(this.activeUseCases) : undefined,
+ cfTypes: this.activeCfTypes.size > 0 ? Array.from(this.activeCfTypes) : undefined,
+ widgetTypes: this.activeWidgetTypes.size > 0 ? Array.from(this.activeWidgetTypes) : undefined,
+ ruleChainTypes: this.activeRuleChainTypes.size > 0 ? Array.from(this.activeRuleChainTypes) : undefined,
+ hardwareTypes: this.activeHardwareTypes.size > 0 ? Array.from(this.activeHardwareTypes) : undefined,
+ connectivity: this.activeConnectivity.size > 0 ? Array.from(this.activeConnectivity) : undefined,
+ vendors: this.activeVendors.size > 0 ? Array.from(this.activeVendors) : undefined
+ });
+ this.iotHubApiService.getPublishedVersions(
+ query,
+ { ignoreLoading: true, ignoreErrors: true }
+ ).subscribe({
+ next: (data: PageData) => {
+ this.items = data.data;
+ this.totalElements = data.totalElements;
+ this.isLoading = false;
+ this.hasError = false;
+ },
+ error: () => {
+ this.isLoading = false;
+ this.hasError = true;
+ this.items = [];
+ this.totalElements = 0;
+ }
+ });
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-components.module.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-components.module.ts
new file mode 100644
index 0000000000..2df12eedce
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-components.module.ts
@@ -0,0 +1,90 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '@shared/shared.module';
+import { TbIotHubItemDetailDialogComponent } from './iot-hub-item-detail-dialog.component';
+import { TbIotHubBrowseComponent } from './iot-hub-browse.component';
+import { TbIotHubItemCardComponent } from './iot-hub-item-card.component';
+import { TbIotHubAddItemDialogComponent } from './iot-hub-add-item-dialog.component';
+import { TbIotHubInstallDialogComponent } from './iot-hub-install-dialog.component';
+import { TbIotHubUpdateDialogComponent } from './iot-hub-update-dialog.component';
+import { TbIotHubDeleteDialogComponent } from './iot-hub-delete-dialog.component';
+import { TbIotHubUnpublishedWarningDialogComponent } from './iot-hub-unpublished-warning-dialog.component';
+import { TbDeviceInstallDialogComponent } from './device-install-dialog/device-install-dialog.component';
+import { InstallFormRendererComponent } from './device-install-dialog/install-form-renderer/install-form-renderer.component';
+import { TbIotHubSearchComponent } from './iot-hub-search.component';
+import { TbIotHubInstalledItemsTableComponent } from './iot-hub-installed-items-table.component';
+import { TbIotHubInstalledItemsDialogComponent } from './iot-hub-installed-items-dialog.component';
+import { TbPeConnectivityMethodPromptComponent } from './pe-connectivity-method-prompt.component';
+import { TbIotHubPeRequiredDialogComponent } from './iot-hub-pe-required-dialog.component';
+import { TbIotHubUpgradeRequiredDialogComponent } from './iot-hub-upgrade-required-dialog.component';
+import { TbIotHubMarkdownComponent } from './iot-hub-markdown.component';
+import { SolutionInstallDialogComponent } from './solution-install-dialog.component';
+import { IotHubActionsService } from './iot-hub-actions.service';
+import { IotHubItemLinkModule } from './iot-hub-item-link-card/iot-hub-item-link.module';
+
+@NgModule({
+ declarations: [
+ TbIotHubItemDetailDialogComponent,
+ TbIotHubBrowseComponent,
+ TbIotHubItemCardComponent,
+ TbIotHubAddItemDialogComponent,
+ TbIotHubInstallDialogComponent,
+ TbIotHubUpdateDialogComponent,
+ TbIotHubDeleteDialogComponent,
+ TbIotHubUnpublishedWarningDialogComponent,
+ TbDeviceInstallDialogComponent,
+ TbIotHubSearchComponent,
+ TbIotHubInstalledItemsTableComponent,
+ TbIotHubInstalledItemsDialogComponent,
+ TbPeConnectivityMethodPromptComponent,
+ TbIotHubMarkdownComponent,
+ SolutionInstallDialogComponent,
+ InstallFormRendererComponent,
+ TbIotHubPeRequiredDialogComponent,
+ TbIotHubUpgradeRequiredDialogComponent
+ ],
+ imports: [
+ CommonModule,
+ SharedModule,
+ IotHubItemLinkModule
+ ],
+ providers: [
+ IotHubActionsService
+ ],
+ exports: [
+ TbIotHubItemDetailDialogComponent,
+ TbIotHubBrowseComponent,
+ TbIotHubItemCardComponent,
+ TbIotHubAddItemDialogComponent,
+ TbIotHubInstallDialogComponent,
+ TbIotHubUpdateDialogComponent,
+ TbIotHubDeleteDialogComponent,
+ TbIotHubUnpublishedWarningDialogComponent,
+ TbDeviceInstallDialogComponent,
+ TbIotHubSearchComponent,
+ TbIotHubInstalledItemsTableComponent,
+ TbIotHubInstalledItemsDialogComponent,
+ TbPeConnectivityMethodPromptComponent,
+ TbIotHubMarkdownComponent,
+ SolutionInstallDialogComponent,
+ TbIotHubPeRequiredDialogComponent,
+ TbIotHubUpgradeRequiredDialogComponent
+ ]
+})
+export class IotHubComponentsModule { }
diff --git a/ui-ngx/src/app/shared/components/widgets-bundle-search.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-delete-dialog.component.html
similarity index 52%
rename from ui-ngx/src/app/shared/components/widgets-bundle-search.component.html
rename to ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-delete-dialog.component.html
index 8332d0a268..dfbbbf5d79 100644
--- a/ui-ngx/src/app/shared/components/widgets-bundle-search.component.html
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-delete-dialog.component.html
@@ -15,15 +15,11 @@
limitations under the License.
-->
-
- {{ 'rule-node-config.ai.response-text' | translate }}
- {{ 'rule-node-config.ai.response-json' | translate }}
- {{ 'rule-node-config.ai.response-json-schema' | translate }}
+ @if (allowedResponseFormats.includes(responseFormat.TEXT)) {
+ {{ 'rule-node-config.ai.response-text' | translate }}
+ }
+ @if (allowedResponseFormats.includes(responseFormat.JSON)) {
+ {{ 'rule-node-config.ai.response-json' | translate }}
+ }
+ @if (allowedResponseFormats.includes(responseFormat.JSON_SCHEMA)) {
+ {{ 'rule-node-config.ai.response-json-schema' | translate }}
+ }
+ @switch (selectWidgetMode) {
+ @case ('installed') {
+ @if (widgetsBundle) {
+
+
+
+ @switch (item.__logical) {
+ @case (LOGICAL_ALL_WIDGETS) {
+
+
+ }
+ @default {
+
+
+ }
+ }
+
+
+
+ }
+ }
+ @case ('iotHub') {
+ @switch (iotHubSubMode) {
+ @case ('default') {
+
+
+
+ @switch (item.__logical) {
+ @case (LOGICAL_ALL_WIDGETS) {
+
+
+ }
+ @case (LOGICAL_INSTALLED_FROM_IOT_HUB) {
+
+
+ }
+ @default {
+
+
+ }
+ }
+
+
+
+ }
+ @case ('installed') {
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ @if (isSystem(item)) {
+
+ }
+
+
+
+
+ ![{{ item.title }}]()
+
+
+
+ {{ 'widgets-bundle.loading-widgets-bundles' | translate }}
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+ @if (getCategoryImageUrl(item); as imgUrl) {
+ ![{{ item.name }}]()
+ } @else {
+ 
+ }
+
+
+ }
+
+
+
@@ -63,59 +283,304 @@
-
+
+
+
+
+
-
-
-
-
-
-
-
-
- ![{{ item.title }}]()
-
-
- {{ 'widgets-bundle.loading-widgets-bundles' | translate }}
+ {{ 'widget.loading-widgets' | translate }}
-
+
+ {{ 'widget.loading-widgets' | translate }}
+
+
+
+
+ @if (item.dataDescriptor?.widgetType) {
+
+ }
+
+
+ @if (getIotHubItemImage(item); as imgUrl) {
+ ![{{ item.name }}]()
+ } @else {
+
+ }
+
+
+ }
+
+
+
+ {{ 'iot-hub.filters' | translate }}
+
+ @if (hasActiveFilters()) {
+
+ }
+
+
+
+ @if (selectWidgetMode === 'installed') {
+ @if (widgetTypes.size > 1) {
+
+
+
+ {{ 'iot-hub.type' | translate }}
+ @if (filterWidgetTypes?.length) {
+ {{ filterWidgetTypes.length }}
+ }
+
+
+
+ }
+ @if (hasDeprecated) {
+ @if (widgetTypes.size > 1) {
+
+
+
+ {{ 'iot-hub.type' | translate }}
+ @if (iotHubAppliedWidgetTypes.size) {
+ {{ iotHubAppliedWidgetTypes.size }}
+ }
+
+
+ @if (iotHubWidgetTypeOptions.length >= 10) {
+
+ @if (!hideCategoriesFilterSection) {
+
+
+
+ {{ 'iot-hub.category' | translate }}
+ @if (iotHubAppliedCategories.size) {
+ {{ iotHubAppliedCategories.size }}
+ }
+
+
+ @if (iotHubCategoryOptions.length >= 10) {
+
+ }
+
+
+
+ {{ 'iot-hub.use-case' | translate }}
+ @if (iotHubAppliedUseCases.size) {
+ {{ iotHubAppliedUseCases.size }}
+ }
+
+
+ @if (iotHubUseCaseOptions.length >= 10) {
+
+ }
+
+
+ @for (type of widgetTypesList; track type) {
+
+
+
+ {{ getWidgetTypeLabel(type) }}
+
+
+ }
+
+
+ {{ 'iot-hub.include-deprecated' | translate }}
+
+
+ }
+ } @else {
+
+ search
+
+ @if (iotHubFilterSearch['widgetType']) {
+
+ }
+
+ }
+
+ @for (opt of getFilteredIotHubItems(iotHubWidgetTypeOptions, 'widgetType'); track opt.key) {
+
+
+
+ {{ getIotHubWidgetTypeLabel(opt.key) }}
+
+
+ }
+
+ search
+
+ @if (iotHubFilterSearch['category']) {
+
+ }
+
+ }
+
+ @for (opt of getFilteredIotHubItems(iotHubCategoryOptions, 'category'); track opt.key) {
+
+
+
+ {{ opt.key }}
+
+
+ }
+
+ search
+
+ @if (iotHubFilterSearch['useCase']) {
+
+ }
+
+ }
+
+ @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 }}
+
+
+ }
+ }
+
+ @switch (ws.type) {
+
+ @case ('placeholder') {
+
+ }
+
+ @case ('connectivity') {
+
+
+ }
+
+ @case ('form') {
+
+
+
+ }
+
+ @case ('instruction') {
+ {{ 'iot-hub.device-install-select-connectivity' | translate }}
+
+ @for (ct of availableInstallMethods; track ct) {
+
+ }
+
+
+
+
+
+ }
+
+ @case ('progress') {
+
+ @for (ep of ws.entitySteps; track ep.step.name; let i = $index) {
+ @if (i > 0) {
+
+ }
+ @if (ep.status === 'conflict' || ep.status === 'error') {
+
+ }
+ }
+
+
+ } @else {
+
+
+
+
+
+ {{ ('iot-hub.device-install-step-type-' + ep.step.type | translate) + ' — ' + (ep.resolvedName || ep.step.name) }}
+
+ @if (ep.status === 'conflict') {
+
+ {{ 'iot-hub.device-install-conflict-exists' | translate:{ type: ('iot-hub.device-install-step-type-' + ep.step.type | translate) } }}
+
+ }
+ @if (ep.status === 'error' && ep.errorMessage) {
+ {{ ep.errorMessage }}
+ }
+
+
+ @if (ep.status === 'conflict') {
+ @if (ep.conflictType === 'use-or-overwrite') {
+
+
+ } @else {
+
+
+ }
+ }
+ @if (ep.status === 'error') {
+
+ }
+
+
+
+
+ {{ ('iot-hub.device-install-step-type-' + ep.step.type | translate) + ' — ' + (ep.resolvedName || ep.step.name) }}
+
+
+ @if (ep.status === 'success') {
+ {{ 'iot-hub.done' | translate }}
+ }
+ @if (ep.status === 'running') {
+ {{ 'iot-hub.in-progress' | translate }}
+ }
+
+
+ }
+ }
+
+
+} @else {
+
+
+ {{ 'iot-hub.device-install-title' | translate:{ name: packageInfo?.name || data.item.name } }}
+ +
+
+ @for (ws of wizardSteps; track ws.label) {
+
+
+
+
+ }
+
+
+
+
+
+ done
+
+
+ @for (ws of wizardSteps; track ws.label) {
+
+ {{ ws.label }}
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.scss
new file mode 100644
index 0000000000..fc685f5b90
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.scss
@@ -0,0 +1,630 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+
+@import "../../../../../scss/constants";
+@import "./iot-hub-common";
+
+:host {
+ display: block;
+}
+
+.tb-iot-hub-browse {
+ &.tabs-hidden:not(.embedded) {
+ border-top: 1px solid rgba(0, 0, 0, 0.12);
+ }
+}
+
+.hidden {
+ display: none !important;
+}
+
+// Tabs — Design: px-40, bottom border, labels auto-width (not stretched)
+.tb-iot-hub-tabs {
+ padding: 0 40px;
+ flex-shrink: 0;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+
+ .mat-mdc-tab-link {
+ min-width: auto;
+ flex: 0 0 auto;
+ }
+}
+
+// Two-column layout below tabs
+.tb-iot-hub-content {
+ display: flex;
+ flex: 1;
+ height: 100%;
+ background: transparent;
+ overflow: visible;
+
+ ::ng-deep .mat-drawer-backdrop {
+ bottom: -48px;
+
+ .embedded & {
+ bottom: 0;
+ }
+
+ &.mat-drawer-shown {
+ background: transparent;
+ }
+ }
+}
+
+// tb-iot-hub-drawer-content layout handled via Tailwind (flex flex-1); overflow stays default visible
+
+// Left sidebar filters — Design: 280px wide, right border, own scroll
+.tb-iot-hub-filters {
+ width: 300px;
+ flex-shrink: 0;
+ border-right: 1px solid rgba(0, 0, 0, 0.12);
+ position: relative;
+ padding-bottom: 48px;
+ margin-bottom: -48px;
+
+ .embedded & {
+ padding-bottom: 0;
+ margin-bottom: 0;
+ }
+}
+
+.tb-iot-hub-filters-wrapper,
+.tb-iot-hub-filter-drawer-body {
+ &::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background-color: rgba(0, 0, 0, 0.04);
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: rgba(0, 0, 0, 0.2);
+ border-radius: 3px;
+
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.35);
+ }
+ }
+
+ &.filter-items-hovered {
+ &::-webkit-scrollbar-track {
+ background-color: transparent;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: transparent;
+ }
+ }
+}
+
+.tb-iot-hub-filters-wrapper {
+ position: sticky;
+ max-height: calc(100vh - var(--mat-toolbar-standard-height, 64px));
+ inset: 0;
+ overflow-y: auto;
+}
+
+// Filter toggle button — hidden on large screens, shown on lt-lg
+.tb-iot-hub-filter-toggle-btn {
+ display: none;
+ flex-shrink: 0;
+}
+
+// Embedded mode — always use mobile filter layout (no left sidebar, filter button + drawer)
+.tb-iot-hub-browse.embedded {
+ .tb-iot-hub-filters-desktop {
+ display: none;
+ }
+
+ .tb-iot-hub-filter-toggle-btn {
+ display: inline-flex;
+ }
+
+ .tb-iot-hub-sort-row {
+ .tb-iot-hub-active-filters,
+ .tb-iot-hub-clear-btn {
+ display: none;
+ }
+ }
+}
+
+// Filter drawer — right-side overlay
+.tb-iot-hub-filter-drawer {
+ width: 60%;
+ max-width: 550px;
+ min-width: 300px;
+ &:not(.embedded &) {
+ position: fixed;
+ top: var(--mat-toolbar-standard-height, 64px);
+ @media #{$mat-xs} {
+ top: var(--mat-toolbar-mobile-height, 56px);
+ }
+ }
+}
+
+.tb-iot-hub-filter-drawer-header {
+ padding: 12px 12px 12px 24px;
+ font-size: 18px;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.87);
+
+ .mat-mdc-icon-button {
+ --mat-icon-button-state-layer-size: 40px;
+ padding: 8px;
+ }
+}
+
+.tb-iot-hub-filter-drawer-chips {
+ padding: 4px 24px 12px;
+}
+
+.tb-iot-hub-filter-drawer-body {
+ overflow-y: auto;
+ flex: 1;
+ padding: 8px 0 0;
+
+ .tb-iot-hub-filters-inner {
+ padding: 0;
+ }
+
+ .tb-iot-hub-filter-panel.mat-expansion-panel {
+ .mat-expansion-panel-header {
+ padding-left: 24px;
+ }
+
+ mat-checkbox {
+ padding-left: 0;
+ }
+
+ .tb-iot-hub-filter-items {
+ padding-left: 16px;
+ }
+
+ .tb-iot-hub-filter-search {
+ margin-left: 24px;
+ }
+ }
+}
+
+.tb-iot-hub-filters-inner {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ padding: 24px 0;
+}
+
+// Filter divider between sections
+.tb-iot-hub-filter-divider {
+ height: 1px;
+ background: rgba(0, 0, 0, 0.12);
+}
+
+// Filter expansion panels — Design: no shadow, pl-40 for content
+.tb-iot-hub-filter-panel.mat-expansion-panel {
+ box-shadow: none;
+ border-radius: 0;
+ background: transparent;
+
+ .mat-expansion-panel-header {
+ padding: 8px 16px 8px 56px;
+ height: 40px;
+ min-height: 40px;
+ }
+
+ ::ng-deep .mat-expansion-panel-header-title {
+ font-size: 14px;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.87);
+ }
+
+ ::ng-deep .mat-expansion-panel-body {
+ padding: 0 8px 0 0;
+ }
+
+ mat-checkbox {
+ display: block;
+ overflow: hidden;
+
+ &:hover {
+ background: rgba(0, 0, 0, 0.04);
+ }
+ }
+
+ .tb-iot-hub-filter-items {
+ padding-left: 44px;
+ max-height: 340px;
+ overflow-y: auto;
+
+ &::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background-color: transparent;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: transparent;
+ border-radius: 3px;
+ }
+
+ &:hover {
+ &::-webkit-scrollbar-track {
+ background-color: rgba(0, 0, 0, 0.04);
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: rgba(0, 0, 0, 0.2);
+
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.35);
+ }
+ }
+ }
+ }
+
+ .tb-iot-hub-filter-search {
+ @include tb-iot-hub-search-container;
+ margin: 4px 8px 4px 56px;
+
+ mat-icon {
+ @include tb-iot-hub-search-icon(rgba(0, 0, 0, 0.54));
+ }
+
+ input {
+ @include tb-iot-hub-search-input-text(0.2px);
+ }
+
+ .tb-iot-hub-filter-search-clear.mat-mdc-icon-button {
+ @include tb-iot-hub-search-clear;
+ }
+ }
+
+ .tb-iot-hub-filter-group-label {
+ font-size: 14px;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.54);
+ letter-spacing: 0.5px;
+ padding: 12px 0 4px 12px;
+ }
+}
+
+// Right content area — Design: flex-1, pr-40, scrollable
+.tb-iot-hub-results {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ overflow-y: auto;
+ padding: 0 40px 0 20px;
+
+ .embedded & {
+ padding-bottom: 20px;
+ }
+}
+
+
+// Results count — Design: 14px Medium, rgba(0,0,0,0.76), tracking 0.25
+.tb-iot-hub-results-count {
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ letter-spacing: 0.25px;
+ color: rgba(0, 0, 0, 0.76);
+}
+
+.tb-iot-hub-search-field {
+ @include tb-iot-hub-page-search-container;
+}
+
+.tb-iot-hub-search-input {
+ @include tb-iot-hub-page-search-input;
+}
+
+.tb-iot-hub-search-action {
+ @include tb-iot-hub-page-search-action;
+}
+
+// Sort button — Design: same row as search, 40px h, 88px min-w, 4px radius,
+// 14px Medium primary color, trailing arrow_drop_down 24px icon
+.tb-iot-hub-sort-btn {
+ flex-shrink: 0;
+ height: 40px;
+ min-width: 88px;
+ padding: 8px;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ letter-spacing: 0.25px;
+ border-radius: 4px;
+
+ .mat-icon {
+ font-size: 24px;
+ width: 24px;
+ height: 24px;
+ }
+}
+
+// Filter chips row — Design: 32px tall, no padding, centered
+.tb-iot-hub-sort-row {
+ height: 32px;
+ align-items: center;
+ padding: 0;
+ margin-top: 16px;
+ margin-bottom: 12px;
+
+ .mat-mdc-chip {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+}
+
+// Active filter chips — Design: mat-chip-set, gap-8, chip bg rgba(0,0,0,0.04)
+.tb-iot-hub-active-filters {
+ display: inline;
+
+ .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) {
+ --mat-chip-elevated-container-color: rgba(0, 0, 0, 0.04);
+ }
+}
+
+// Clear all button — Design: 14px Regular, rgba(0,0,0,0.54)
+.tb-iot-hub-clear-btn {
+ font-size: 14px;
+ font-weight: 400;
+ color: rgba(0, 0, 0, 0.54);
+ cursor: pointer;
+ background: none;
+ border: none;
+ padding: 6px 8px;
+ font-family: inherit;
+
+ &:hover {
+ color: rgba(0, 0, 0, 0.87);
+ }
+}
+
+// Card grid — Design: 5 columns, gap 20px; compact: 4 columns
+.tb-iot-hub-card-grid {
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ gap: 20px;
+ padding: 8px 0 24px;
+
+ &.tb-iot-hub-card-grid-compact {
+ grid-template-columns: repeat(4, 1fr);
+ }
+
+ // Probe: zero-height element used only to read the computed column count.
+ // Keeps display: grid and non-zero width so grid-template-columns resolves.
+ &.tb-iot-hub-card-grid-probe {
+ width: 100%;
+ height: 0;
+ padding: 0;
+ gap: 0;
+ overflow: hidden;
+ visibility: hidden;
+ pointer-events: none;
+ }
+}
+
+// Empty state text + no-data image
+.tb-iot-hub-empty-state {
+ .tb-no-data-bg, .tb-no-service-bg {
+ flex: auto;
+ height: 100px;
+ }
+
+ h3 {
+ font-size: 18px;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.87);
+ margin: 16px 0 8px;
+ }
+
+ p {
+ font-size: 14px;
+ color: rgba(0, 0, 0, 0.54);
+ margin: 0 0 24px;
+ }
+}
+
+// Pagination — centered page numbers via absolute positioning
+.tb-iot-hub-pagination {
+ position: relative;
+}
+
+// Page buttons — centered via absolute positioning
+.tb-iot-hub-pagination-pages {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ overflow: hidden;
+
+ .mat-mdc-icon-button {
+ width: 40px;
+ height: 40px;
+ padding: 8px;
+ --mdc-icon-button-state-layer-size: 40px;
+ }
+}
+
+.tb-iot-hub-page-btn {
+ height: 40px;
+ min-width: 40px;
+ padding: 8px 16px;
+ border-radius: 4px;
+ border: none;
+ background: transparent;
+ color: rgba(0, 0, 0, 0.76);
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ letter-spacing: 0.25px;
+ font-family: inherit;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: background 0.15s;
+
+ &:hover:not(.active) {
+ background: rgba(0, 0, 0, 0.04);
+ }
+
+ &.active {
+ background: $tb-primary-color;
+ color: white;
+ }
+}
+
+// Items per page — Design: gap-8, 14px Regular, right-aligned
+.tb-iot-hub-pagination-size {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.2px;
+ color: rgba(0, 0, 0, 0.76);
+ margin-left: auto;
+}
+
+// Page size dropdown — Design: 77×40, border rgba(0,0,0,0.12), rounded-4, px-12 py-6
+.tb-iot-hub-page-size-select {
+ width: 77px;
+ height: 40px;
+ border: 1px solid rgba(0, 0, 0, 0.12);
+ border-radius: 4px;
+ padding: 6px 12px;
+
+ ::ng-deep .mat-mdc-select-trigger {
+ font-size: 14px;
+ }
+}
+
+// Responsive
+
+@media #{$mat-lt-xxl} {
+ .tb-iot-hub-card-grid {
+ grid-template-columns: repeat(4, 1fr);
+
+ &.tb-iot-hub-card-grid-compact {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ }
+}
+
+@media #{$mat-lt-xl} {
+ .tb-iot-hub-card-grid {
+ grid-template-columns: repeat(3, 1fr);
+
+ &.tb-iot-hub-card-grid-compact {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ }
+}
+
+@media #{$mat-lt-xmd} {
+ .tb-iot-hub-card-grid {
+ grid-template-columns: repeat(2, 1fr);
+
+ &.tb-iot-hub-card-grid-compact {
+ grid-template-columns: repeat(1, 1fr);
+ }
+ }
+}
+
+@media #{$mat-lt-lg} {
+ .tb-iot-hub-filters-desktop {
+ display: none;
+ }
+
+ .tb-iot-hub-filter-toggle-btn {
+ display: inline-flex;
+ }
+
+ .tb-iot-hub-sort-row {
+ .tb-iot-hub-active-filters,
+ .tb-iot-hub-clear-btn {
+ display: none;
+ }
+ }
+
+ .tb-iot-hub-results {
+ padding-left: 24px;
+ padding-right: 24px;
+ }
+
+ .tb-iot-hub-pagination-pages {
+ position: static;
+ transform: none;
+ }
+}
+
+@media #{$mat-lt-md} {
+ .tb-iot-hub-filter-drawer {
+ width: 100%;
+ max-width: 100%;
+ }
+}
+
+@media #{$mat-xs} {
+ .tb-iot-hub-card-grid {
+ grid-template-columns: repeat(1, 1fr);
+ }
+
+ .tb-iot-hub-pagination {
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+ }
+
+ .tb-iot-hub-pagination-pages {
+ position: static;
+ transform: none;
+ }
+
+ .tb-iot-hub-pagination-size {
+ margin-left: 0;
+ }
+
+ .tb-iot-hub-results {
+ padding-left: 16px;
+ padding-right: 16px;
+ }
+}
+
+// Embedded mode responsive overrides
+.embedded {
+ .tb-iot-hub-card-grid.tb-iot-hub-card-grid-compact {
+ grid-template-columns: repeat(1, 1fr);
+ }
+
+ @media #{$mat-gt-sm} {
+ .tb-iot-hub-card-grid {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ }
+
+ @media #{$mat-gt-md} {
+ .tb-iot-hub-card-grid.tb-iot-hub-card-grid-compact {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.ts
new file mode 100644
index 0000000000..2efea716bf
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.ts
@@ -0,0 +1,730 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+import { Subject } from 'rxjs';
+import { debounceTime, takeUntil } from 'rxjs/operators';
+import { PageLink } from '@shared/models/page/page-link';
+import { Direction, SortOrder } from '@shared/models/page/sort-order';
+import { PageData } from '@shared/models/page/page-data';
+import { MpItemVersionQuery, MpItemVersionView } from '@shared/models/iot-hub/iot-hub-version.models';
+import { ItemType, FilterParamInfo, CREATOR_VISIBLE_ITEM_TYPES } from '@shared/models/iot-hub/iot-hub-item.models';
+import { widgetTypeTranslations, cfTypeTranslations, ruleChainTypeTranslations } from '@shared/models/iot-hub/iot-hub-version.models';
+import { IotHubInstalledItem, DeviceInstalledItemDescriptor } from '@shared/models/iot-hub/iot-hub-installed-item.models';
+import { IotHubApiService } from '@core/http/iot-hub-api.service';
+import { TranslateService } from '@ngx-translate/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { IotHubActionsService } from '@home/components/iot-hub/iot-hub-actions.service';
+import { filterIotHubItemsBySearch, groupIotHubFilterItems, IotHubFilterGroup } from '@home/components/iot-hub/iot-hub-utils';
+
+interface SortOption {
+ value: string;
+ label: string;
+ direction: Direction;
+}
+
+@Component({
+ selector: 'tb-iot-hub-browse',
+ standalone: false,
+ templateUrl: './iot-hub-browse.component.html',
+ styleUrls: ['./iot-hub-browse.component.scss'],
+ host: { '[class.embedded]': 'embedded' }
+})
+export class TbIotHubBrowseComponent implements OnInit, AfterViewInit, OnDestroy {
+
+ private static typeTabLabel(t: ItemType): string {
+ switch (t) {
+ case ItemType.WIDGET: return 'item.type-widget-plural';
+ case ItemType.DASHBOARD: return 'item.type-dashboard-plural';
+ case ItemType.SOLUTION_TEMPLATE: return 'item.type-solution-template-plural';
+ case ItemType.CALCULATED_FIELD: return 'item.type-calculated-field-plural';
+ case ItemType.ALARM_RULE: return 'item.type-alarm-rule-plural';
+ case ItemType.RULE_CHAIN: return 'item.type-rule-chain-plural';
+ case ItemType.DEVICE: return 'item.type-device-plural';
+ }
+ }
+
+ readonly ItemType = ItemType;
+
+ @Input() creatorId: string;
+ @Input() embedded = false;
+ @Input() hideTabs = false;
+ @Input() mode: 'default' | 'add' = 'default';
+ @Input() fixedSubType: string;
+ @Output() addItem = new EventEmitter
+ @if (!fixedSubType && subtypeOptions.length > 0 && activeType !== ItemType.ALARM_RULE) {
+
+
+ {{ 'iot-hub.type-filter-label' | translate }}
+
+ @if (subtypeOptions.length >= 10) {
+
+ }
+
+ @if (activeType === ItemType.DEVICE) {
+ @if (!fixedSubType && subtypeOptions.length > 0) {
+
+ }
+ @if (vendorOptions.length > 0) {
+
+
+ {{ 'iot-hub.vendor' | translate }}
+
+ @if (vendorOptions.length >= 10) {
+
+
+ }
+ @if (hardwareTypeOptions.length > 0) {
+
+
+ {{ 'iot-hub.hardware-type' | translate }}
+
+ @if (hardwareTypeOptions.length >= 10) {
+
+
+ }
+ @if (connectivityGroups.length > 0) {
+
+
+ {{ 'iot-hub.connectivity' | translate }}
+
+ @if (allConnectivityCount >= 10) {
+
+ }
+ } @else {
+ @if (categoryOptions.length > 0) {
+ @if (!fixedSubType && subtypeOptions.length > 0) {
+
+ }
+
+
+ {{ 'iot-hub.category' | translate }}
+
+ @if (categoryOptions.length >= 10) {
+
+ }
+ }
+
+ @if (useCaseOptions.length > 0) {
+ @if (activeType === ItemType.DEVICE || (!fixedSubType && subtypeOptions.length > 0) || categoryOptions.length > 0) {
+
+ }
+
+
+ {{ 'iot-hub.use-case' | translate }}
+
+ @if (useCaseOptions.length >= 10) {
+
+
+ }
+
+
+ search
+
+ @if (filterSearch['subtype']) {
+
+ }
+
+ }
+
+ @for (opt of getFilteredItems(subtypeOptions, 'subtype'); track opt.key) {
+
+ {{ getSubtypeLabel(opt.key) }}
+
+ }
+
+
+ search
+
+ @if (filterSearch['vendor']) {
+
+ }
+
+ }
+
+ @for (group of getGroupedFilterItems(vendorOptions, 'vendor'); track group.label) {
+ @if (group.label) {
+
+ {{ v.key }}
+
+ }
+ }
+
+ {{ group.label | translate }}
+ }
+ @for (v of group.items; track v.key) {
+
+ search
+
+ @if (filterSearch['hardwareType']) {
+
+ }
+
+ }
+
+ @for (ht of getFilteredItems(hardwareTypeOptions, 'hardwareType'); track ht.key) {
+
+ {{ ht.key }}
+
+ }
+
+
+ search
+
+ @if (filterSearch['connectivity']) {
+
+ }
+
+ }
+
+ @for (group of getFilteredConnectivityGroups('connectivity'); track group.group) {
+
+ {{ val.key }}
+
+ }
+ }
+
+ {{ group.group }}
+ @for (val of group.values; track val.key) {
+
+ search
+
+ @if (filterSearch['category']) {
+
+ }
+
+ }
+
+ @for (cat of getFilteredItems(categoryOptions, 'category'); track cat.key) {
+
+ {{ cat.key }}
+
+ }
+
+
+ search
+
+ @if (filterSearch['useCase']) {
+
+ }
+
+ }
+
+ @for (group of getGroupedFilterItems(useCaseOptions, 'useCase'); track group.label) {
+ @if (group.label) {
+
+ {{ uc.key }}
+
+ }
+ }
+
+ {{ group.label | translate }}
+ }
+ @for (uc of group.items; track uc.key) {
+
+ {{ 'iot-hub.filter' | translate }}
+
+
+ @if (hasActiveDropdownFilters()) {
+
+
+
+ @for (key of getActiveSubtypesArray(); track key) {
+
+ {{ getSubtypeLabel(key) }}
+ close
+
+ }
+ @for (key of getActiveCategoriesArray(); track key) {
+
+ {{ key }}
+ close
+
+ }
+ @for (key of getActiveHardwareTypesArray(); track key) {
+
+ {{ key }}
+ close
+
+ }
+ @for (key of getActiveConnectivityArray(); track key) {
+
+ {{ key }}
+ close
+
+ }
+ @for (v of getActiveVendorsArray(); track v) {
+
+ {{ v }}
+ close
+
+ }
+ @for (key of getActiveUseCasesArray(); track key) {
+
+ {{ key }}
+ close
+
+ }
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @for (option of sortOptions; track option.value; let i = $index) {
+
+ }
+
+
+
+
+
+
+ @if (textSearch) {
+
+ } @else {
+
+ }
+
+
+
+
+ {{ 'iot-hub.results-count' | translate:{ count: totalElements } }}
+
+
+ @if (hasActiveDropdownFilters()) {
+
+ @for (key of getActiveSubtypesArray(); track key) {
+
+ {{ getSubtypeLabel(key) }}
+ close
+
+ }
+ @for (key of getActiveCategoriesArray(); track key) {
+
+ {{ key }}
+ close
+
+ }
+ @for (key of getActiveHardwareTypesArray(); track key) {
+
+ {{ key }}
+ close
+
+ }
+ @for (key of getActiveConnectivityArray(); track key) {
+
+ {{ key }}
+ close
+
+ }
+ @for (v of getActiveVendorsArray(); track v) {
+
+ {{ v }}
+ close
+
+ }
+ @for (key of getActiveUseCasesArray(); track key) {
+
+ {{ key }}
+ close
+
+ }
+
+
+ }
+
+
+
+
+
+
+ @if (hasError) {
+
+
+
+
+ }
+
+
+ @if (!hasError && items.length === 0) {
+ {{ 'iot-hub.network-server-unavailable' | translate }}
+{{ 'iot-hub.network-server-unavailable-text' | translate }}
+ +
+
+
+ }
+
+
+ @if (!hasError && items.length > 0) {
+ {{ 'iot-hub.no-items-found' | translate }}
+{{ 'iot-hub.no-items-found-text' | translate }}
+ @if (hasActiveFilters()) { + + } +
+ @for (item of items; track item.id) {
+
+
+ }
+
+
+
+
+
+ }
+
+
+ @if (isLoading) {
+
+
+ @for (p of getPageNumbers(); track p) {
+
+ }
+
+
+
+ {{ 'iot-hub.items-per-page' | translate }}:
+
+ @for (size of pageSizeOptions; track size) {
+ {{ size }}
+ }
+
+
+
+
+ }
+
+
+
- search
-
-
+ {
+
+ constructor(
+ protected store: Store,
+ protected router: Router,
+ protected dialogRef: MatDialogRef,
+ @Inject(MAT_DIALOG_DATA) public data: IotHubDeleteDialogData
+ ) {
+ super(store, router, dialogRef);
+ }
+
+ confirm(): void {
+ this.dialogRef.close(true);
+ }
+
+ cancel(): void {
+ this.dialogRef.close(false);
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-install-dialog.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-install-dialog.component.html
new file mode 100644
index 0000000000..bb551a4106
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-install-dialog.component.html
@@ -0,0 +1,231 @@
+
+
+ @switch (state) {
+ @case ('confirm') {
+
+
+ }
+ @case ('select-entity') {
+
+ @if (item.type === ItemType.RULE_CHAIN) {
+
+ } @else {
+
+ }
+ }
+ @case ('confirm-overwrite') {
+
+
+ }
+ @case ('plan') {
+
+ @if (planSummary.willInstall > 0) {
+
+ }
+ }
+ @case ('installing') {
+
+
+ }
+ @case ('success') {
+
+ @if (entityDetailsUrl) {
+
+ }
+ }
+ @case ('partial') {
+
+ @if (entityDetailsUrl) {
+
+ }
+ }
+ @case ('error') {
+
+ }
+ }
+
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-install-dialog.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-install-dialog.component.scss
new file mode 100644
index 0000000000..bf6356a331
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-install-dialog.component.scss
@@ -0,0 +1,148 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+
+@import "../../../../../scss/constants";
+
+tb-entity-select {
+ @media #{$mat-gt-sm} {
+ min-width: 512px;
+ }
+}
+
+.tb-iot-hub-install-title {
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 24px;
+ letter-spacing: 0.1px;
+ color: rgba(0, 0, 0, 0.87);
+ margin: 0;
+}
+
+.tb-iot-hub-install-desc {
+ color: rgba(0, 0, 0, 0.54);
+ font-size: 14px;
+ line-height: 20px;
+ letter-spacing: 0.2px;
+ margin: 0;
+}
+
+.tb-iot-hub-error-details {
+ max-height: 200px;
+ overflow-y: auto;
+ padding: 12px;
+ background: #f5f5f5;
+ border-radius: 4px;
+ font-family: monospace;
+ font-size: 12px;
+ color: rgba(0, 0, 0, 0.7);
+ white-space: pre-wrap;
+ word-break: break-word;
+}
+
+.tb-iot-hub-error-details-markdown {
+ border: 1px solid rgba(0, 0, 0, 0.12);
+ border-radius: 8px;
+ padding-bottom: 24px;
+}
+
+.tb-iot-hub-install-warning {
+ color: #b26a00;
+ background: #fff8e1;
+ border-left: 3px solid #f5b324;
+ padding: 8px 12px;
+ font-size: 13px;
+ line-height: 18px;
+ border-radius: 4px;
+ margin: 0;
+}
+
+.tb-iot-hub-plan-list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ border: 1px solid rgba(0, 0, 0, 0.12);
+ border-radius: 8px;
+ max-height: 320px;
+ overflow-y: auto;
+}
+
+.tb-iot-hub-plan-entry {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ padding: 10px 14px;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+
+ &:last-child {
+ border-bottom: none;
+ }
+}
+
+.tb-iot-hub-plan-entry-main {
+ display: flex;
+ align-items: baseline;
+ gap: 8px;
+ flex-wrap: wrap;
+ min-width: 0;
+}
+
+.tb-iot-hub-plan-entry-name {
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.87);
+}
+
+.tb-iot-hub-plan-entry-type {
+ font-size: 12px;
+ color: rgba(0, 0, 0, 0.6);
+ background: rgba(0, 0, 0, 0.05);
+ padding: 2px 6px;
+ border-radius: 10px;
+}
+
+.tb-iot-hub-plan-entry-version {
+ font-size: 12px;
+ color: rgba(0, 0, 0, 0.54);
+}
+
+.tb-iot-hub-plan-entry-error {
+ font-size: 12px;
+ color: #b26a00;
+ margin-left: 8px;
+}
+
+.tb-iot-hub-plan-entry-status {
+ font-size: 12px;
+ font-weight: 500;
+ padding: 2px 8px;
+ border-radius: 10px;
+ white-space: nowrap;
+
+ &.tb-status-will-install {
+ color: #1565c0;
+ background: rgba(21, 101, 192, 0.08);
+ }
+
+ &.tb-status-installed {
+ color: #2e7d32;
+ background: rgba(46, 125, 50, 0.08);
+ }
+
+ &.tb-status-missing {
+ color: #b26a00;
+ background: rgba(245, 179, 36, 0.12);
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-install-dialog.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-install-dialog.component.ts
new file mode 100644
index 0000000000..43ed8d21b4
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-install-dialog.component.ts
@@ -0,0 +1,401 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { Component, DestroyRef, Inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { DialogComponent } from '@shared/components/dialog.component';
+import { MpItemVersionView } from '@shared/models/iot-hub/iot-hub-version.models';
+import { ItemType, itemTypeTranslations } from '@shared/models/iot-hub/iot-hub-item.models';
+import {
+ getInstalledItemUrl,
+ InstallPlan,
+ InstallPlanEntry,
+ InstallPlanEntryStatus,
+ InstallPlanResult,
+ IotHubInstalledItemDescriptor,
+ SolutionTemplateInstalledItemDescriptor
+} from '@shared/models/iot-hub/iot-hub-installed-item.models';
+import { IotHubApiService } from '@core/http/iot-hub-api.service';
+import { TranslateService } from '@ngx-translate/core';
+import { EntityType } from '@shared/models/entity-type.models';
+import { EntityId } from '@shared/models/id/entity-id';
+import { SolutionInstallDialogComponent } from '@home/components/iot-hub/solution-install-dialog.component';
+import { Observable, of } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+import { DeviceProfileService } from '@core/http/device-profile.service';
+import { AssetProfileService } from '@core/http/asset-profile.service';
+import { RuleChainService } from '@core/http/rule-chain.service';
+import { RuleChainId } from '@shared/models/id/rule-chain-id';
+
+interface SelectEntityConfig {
+ allowed: EntityType[];
+ defaultType: EntityType;
+ required: boolean;
+ promptKey?: string;
+}
+
+interface PendingOverwrite {
+ entityId: EntityId;
+ profileName: string;
+ existingRuleChainName: string;
+}
+
+export interface IotHubInstallDialogData {
+ item: MpItemVersionView;
+}
+
+export type InstallState =
+ | 'select-entity'
+ | 'confirm-overwrite'
+ | 'confirm'
+ | 'plan'
+ | 'installing'
+ | 'success'
+ | 'partial'
+ | 'error';
+
+@Component({
+ selector: 'tb-iot-hub-install-dialog',
+ standalone: false,
+ templateUrl: './iot-hub-install-dialog.component.html',
+ styleUrls: ['./iot-hub-install-dialog.component.scss']
+})
+export class TbIotHubInstallDialogComponent extends DialogComponent {
+
+ ItemType = ItemType;
+ PlanStatus = InstallPlanEntryStatus;
+ EntityType = EntityType;
+
+ item: MpItemVersionView;
+ typeTranslations = itemTypeTranslations;
+ state!: InstallState;
+ errorMessage = '';
+ entityDetailsUrl: string | null = null;
+
+ selectedEntityId: EntityId | null = null;
+ pendingOverwrite: PendingOverwrite | null = null;
+ ruleChainInstallForm!: FormGroup<{
+ setAsDefault: FormControl;
+ entityType: FormControl;
+ entityId: FormControl;
+ }>;
+
+ installPlan: InstallPlan | null = null;
+ planSummary: { willInstall: number; alreadyInstalled: number; missing: number } = {
+ willInstall: 0,
+ alreadyInstalled: 0,
+ missing: 0
+ };
+ missingEntries: InstallPlanEntry[] = [];
+ resolvingPlan = false;
+
+ private readonly selectEntityConfig: Partial> = {
+ [ItemType.CALCULATED_FIELD]: {
+ allowed: [EntityType.DEVICE, EntityType.ASSET, EntityType.DEVICE_PROFILE, EntityType.ASSET_PROFILE],
+ defaultType: EntityType.DEVICE_PROFILE,
+ required: true,
+ promptKey: 'iot-hub.select-entity-for-cf',
+ },
+ };
+
+ get activeSelectEntityConfig(): SelectEntityConfig | null {
+ return this.selectEntityConfig[this.item.type] ?? null;
+ }
+
+ constructor(
+ protected store: Store,
+ protected router: Router,
+ protected dialogRef: MatDialogRef,
+ @Inject(MAT_DIALOG_DATA) public data: IotHubInstallDialogData,
+ private dialog: MatDialog,
+ private translate: TranslateService,
+ private iotHubApiService: IotHubApiService,
+ private deviceProfileService: DeviceProfileService,
+ private assetProfileService: AssetProfileService,
+ private ruleChainService: RuleChainService,
+ private fb: FormBuilder,
+ private destroyRef: DestroyRef
+ ) {
+ super(store, router, dialogRef);
+ this.item = data.item;
+ this.state = this.computeInitialState();
+ if (this.item.type === ItemType.RULE_CHAIN) {
+ this.initRuleChainForm();
+ }
+ }
+
+ private computeInitialState(): InstallState {
+ return this.activeSelectEntityConfig || this.item.type === ItemType.RULE_CHAIN
+ ? 'select-entity'
+ : 'confirm';
+ }
+
+ private initRuleChainForm(): void {
+ this.ruleChainInstallForm = this.fb.group({
+ setAsDefault: this.fb.nonNullable.control(false),
+ entityType: this.fb.nonNullable.control(EntityType.DEVICE_PROFILE),
+ entityId: this.fb.control(null)
+ });
+ this.ruleChainInstallForm.controls.setAsDefault.valueChanges
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe(setAsDefault => {
+ const entityIdCtrl = this.ruleChainInstallForm.controls.entityId;
+ if (setAsDefault) {
+ entityIdCtrl.setValidators(Validators.required);
+ } else {
+ entityIdCtrl.clearValidators();
+ entityIdCtrl.setValue(null);
+ }
+ entityIdCtrl.updateValueAndValidity();
+ });
+ this.ruleChainInstallForm.controls.entityType.valueChanges
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe(() => {
+ this.ruleChainInstallForm.controls.entityId.setValue(null);
+ });
+ }
+
+ getTypeLabel(): string {
+ const key = this.typeTranslations.get(this.item.type);
+ return key ? this.translate.instant(key) : '';
+ }
+
+ onEntitySelectInstall(): void {
+ if (!this.selectedEntityId) {
+ return;
+ }
+ this.install();
+ }
+
+ onRuleChainInstall(): void {
+ const { setAsDefault, entityType, entityId } = this.ruleChainInstallForm.getRawValue();
+ if (!setAsDefault) {
+ this.selectedEntityId = null;
+ this.install();
+ return;
+ }
+ if (!entityId) {
+ return;
+ }
+ const profileEntityId: EntityId = { entityType, id: entityId };
+ this.selectedEntityId = profileEntityId;
+ this.resolveOverwrite(profileEntityId).subscribe({
+ next: (pending) => {
+ if (pending) {
+ this.pendingOverwrite = pending;
+ this.state = 'confirm-overwrite';
+ } else {
+ this.pendingOverwrite = null;
+ this.install();
+ }
+ },
+ error: (err) => this.handleApiError(err)
+ });
+ }
+
+ confirmOverwriteReplace(): void {
+ this.install();
+ }
+
+ confirmOverwriteCancel(): void {
+ this.pendingOverwrite = null;
+ this.state = 'select-entity';
+ }
+
+ private resolveOverwrite(profileEntityId: EntityId): Observable {
+ const lookupProfile$: Observable<{ name: string; defaultRuleChainId: RuleChainId | null }> =
+ profileEntityId.entityType === EntityType.DEVICE_PROFILE
+ ? this.deviceProfileService.getDeviceProfile(profileEntityId.id, { ignoreLoading: true }).pipe(
+ map(p => ({ name: p.name, defaultRuleChainId: p.defaultRuleChainId ?? null }))
+ )
+ : this.assetProfileService.getAssetProfile(profileEntityId.id, { ignoreLoading: true }).pipe(
+ map(p => ({ name: p.name, defaultRuleChainId: p.defaultRuleChainId ?? null }))
+ );
+
+ return lookupProfile$.pipe(
+ switchMap(profile => {
+ if (!profile.defaultRuleChainId) {
+ return of(null);
+ }
+ return this.ruleChainService.getRuleChain(profile.defaultRuleChainId.id, { ignoreLoading: true }).pipe(
+ map(existing => ({
+ entityId: profileEntityId,
+ profileName: profile.name,
+ existingRuleChainName: existing.name,
+ }))
+ );
+ })
+ );
+ }
+
+ install(): void {
+ // Keep the current state visible (confirm / select-entity / confirm-overwrite) while resolving —
+ // a transient 'resolving-plan' state caused a visible "blink" for items without dependencies.
+ this.resolvingPlan = true;
+ const versionId = this.item.id as string;
+ this.iotHubApiService.resolveInstallPlan(versionId, { ignoreLoading: true }).subscribe({
+ next: (plan) => {
+ this.resolvingPlan = false;
+ const summary = this.summarizePlan(plan);
+ // Show the plan only when there's something worth telling the user about: extra items to
+ // install, items already installed, or missing dependencies. A lone root with nothing to
+ // skip installs directly so the dialog doesn't flash a one-line "plan".
+ const shouldShowPlan = plan.entries.length > 1
+ || summary.alreadyInstalled > 0
+ || summary.missing > 0;
+
+ if (!shouldShowPlan) {
+ this.installItem();
+ return;
+ }
+
+ this.installPlan = plan;
+ this.planSummary = summary;
+ this.missingEntries = plan.entries.filter(e => e.status === InstallPlanEntryStatus.MISSING);
+ this.state = 'plan';
+ },
+ error: (err) => {
+ this.resolvingPlan = false;
+ this.handleApiError(err);
+ }
+ });
+ }
+
+ installItemWithDependencies(): void {
+ if (!this.installPlan) {
+ return;
+ }
+ this.state = 'installing';
+ this.iotHubApiService.installPlan(this.installPlan, this.installData(), { ignoreLoading: true }).subscribe({
+ next: (result) => this.handlePlanResult(result),
+ error: (err) => this.handleApiError(err)
+ });
+ }
+
+ private installItem(): void {
+ this.state = 'installing';
+ const versionId = this.item.id as string;
+ this.iotHubApiService.installItemVersion(versionId, { ignoreLoading: true }, this.installData()).subscribe({
+ next: (result) => {
+ if (!result.success) {
+ this.state = 'error';
+ this.errorMessage = result.errorMessage || this.translate.instant('iot-hub.install-error', { name: this.item.name });
+ return;
+ }
+ this.handleInstalledDescriptor(result.descriptor);
+ },
+ error: (err) => this.handleApiError(err)
+ });
+ }
+
+ private summarizePlan(plan: InstallPlan): { willInstall: number; alreadyInstalled: number; missing: number } {
+ const summary = { willInstall: 0, alreadyInstalled: 0, missing: 0 };
+ for (const entry of plan.entries) {
+ switch (entry.status) {
+ case InstallPlanEntryStatus.WILL_INSTALL: summary.willInstall++; break;
+ case InstallPlanEntryStatus.ALREADY_INSTALLED: summary.alreadyInstalled++; break;
+ case InstallPlanEntryStatus.MISSING: summary.missing++; break;
+ }
+ }
+ return summary;
+ }
+
+ private handleApiError(err: any): void {
+ this.state = 'error';
+ this.errorMessage = err?.error?.message || err?.message ||
+ this.translate.instant('iot-hub.install-error', { name: this.item.name });
+ }
+
+ private handlePlanResult(result: InstallPlanResult): void {
+ if (!result.success) {
+ this.state = 'error';
+ let message = result.errorMessage || this.translate.instant('iot-hub.install-error', { name: this.item.name });
+ // A failed cascade rolls back the items installed so far. When something was actually being
+ // installed and the rollback came back partial (rolledBack === false), some entities are left
+ // behind — tell the admin so they know manual cleanup may be needed. The willInstall guard
+ // avoids the misleading warning on the "empty plan" failure, where nothing was installed.
+ if (!result.rolledBack && this.planSummary.willInstall > 0) {
+ message += ' ' + this.translate.instant('iot-hub.install-rollback-partial');
+ }
+ this.errorMessage = message;
+ return;
+ }
+ if (this.installPlan) {
+ this.installPlan = { ...this.installPlan, entries: result.entries ?? this.installPlan.entries };
+ this.missingEntries = (result.entries ?? []).filter(e => e.status === InstallPlanEntryStatus.MISSING);
+ }
+ const hasMissing = (result.missingItemIds?.length ?? 0) > 0;
+ if (result.rootDescriptor) {
+ this.handleInstalledDescriptor(result.rootDescriptor, hasMissing);
+ } else {
+ this.state = hasMissing ? 'partial' : 'success';
+ }
+ }
+
+ private handleInstalledDescriptor(descriptor: IotHubInstalledItemDescriptor, partial = false): void {
+ if (descriptor?.type === 'SOLUTION_TEMPLATE') {
+ const timeout = this.item.dataDescriptor?.installTimeoutMs;
+ const openSolutionDialog = () => {
+ this.dialogRef.close('installed');
+ this.dialog.open(SolutionInstallDialogComponent, {
+ disableClose: true,
+ autoFocus: false,
+ panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
+ data: { descriptor: descriptor as SolutionTemplateInstalledItemDescriptor }
+ });
+ };
+ if (timeout > 0) {
+ setTimeout(openSolutionDialog, timeout);
+ } else {
+ openSolutionDialog();
+ }
+ return;
+ }
+ this.entityDetailsUrl = getInstalledItemUrl(descriptor);
+ this.state = partial ? 'partial' : 'success';
+ }
+
+ private installData(): any | undefined {
+ return this.selectedEntityId ? { entityId: this.selectedEntityId } : undefined;
+ }
+
+ cancelPlan(): void {
+ this.installPlan = null;
+ this.state = this.computeInitialState();
+ }
+
+ openEntityDetails(): void {
+ if (this.entityDetailsUrl) {
+ this.dialogRef.close('installed');
+ void this.router.navigateByUrl(this.entityDetailsUrl);
+ }
+ }
+
+ close(): void {
+ const installedStates: InstallState[] = ['success', 'partial'];
+ this.dialogRef.close(installedStates.includes(this.state) ? 'installed' : false);
+ }
+
+ cancel(): void {
+ this.dialogRef.close(false);
+ }
+
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-dialog.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-dialog.component.html
new file mode 100644
index 0000000000..586156ae53
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-dialog.component.html
@@ -0,0 +1,41 @@
+
+ {
+
+ item: MpItemVersionView;
+
+ constructor(
+ protected store: Store,
+ protected router: Router,
+ protected dialogRef: MatDialogRef,
+ @Inject(MAT_DIALOG_DATA) public data: IotHubInstalledItemsDialogData
+ ) {
+ super(store, router, dialogRef);
+ this.item = data.item;
+ }
+
+ close(): void {
+ this.dialogRef.close();
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-table.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-table.component.html
new file mode 100644
index 0000000000..a64f9ab73e
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-table.component.html
@@ -0,0 +1,169 @@
+
+();
+
+ hasActiveFilters(): boolean {
+ return !!this.textSearch || (this.typeFilters?.length ?? 0) > 0;
+ }
+
+ @HostBinding('class.tb-installed-with-version') get withVersionClass() {
+ return !!this.itemVersion;
+ }
+
+ displayedColumns: string[] = ['itemName', 'itemType', 'version', 'createdTime', 'updates', 'actions'];
+ dataSource: IotHubInstalledItem[] = [];
+ totalElements = 0;
+ pageSize = 10;
+ pageIndex = 0;
+ hidePageSize = false;
+ isLoading = false;
+
+ publishedVersionMap = new Map();
+ updatesChecked = false;
+ isCheckingUpdates = false;
+
+ private widgetResize$: ResizeObserver;
+
+ @ViewChild(MatSort, {static: true}) sort: MatSort;
+ @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
+
+ constructor(
+ private iotHubApiService: IotHubApiService,
+ private translate: TranslateService,
+ private router: Router,
+ private iotHubActions: IotHubActionsService,
+ private elementRef: ElementRef,
+ private zone: NgZone,
+ private cd: ChangeDetectorRef
+ ) {
+ this.widgetResize$ = new ResizeObserver(() => {
+ this.zone.run(() => {
+ const shouldHide = this.elementRef.nativeElement.offsetWidth < 640;
+ if (shouldHide !== this.hidePageSize) {
+ this.hidePageSize = shouldHide;
+ this.cd.markForCheck();
+ }
+ });
+ });
+ this.widgetResize$.observe(this.elementRef.nativeElement);
+ }
+
+ ngOnInit(): void {
+ if (this.itemVersion) {
+ this.displayedColumns = ['version', 'createdTime', 'updates', 'actions'];
+ this.updatesChecked = true;
+ this.publishedVersionMap.set(this.itemVersion.itemId, {
+ itemId: this.itemVersion.itemId,
+ publishedVersionId: this.itemVersion.id,
+ publishedVersion: this.itemVersion.version
+ });
+ }
+ this.loadData();
+ }
+
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes.textSearch || changes.typeFilters) {
+ if (!changes.textSearch?.firstChange || !changes.typeFilters?.firstChange) {
+ this.pageIndex = 0;
+ if (this.paginator) {
+ this.paginator.pageIndex = 0;
+ }
+ this.loadData();
+ }
+ }
+ }
+
+ ngAfterViewInit(): void {
+ this.sort.sortChange.subscribe(() => {
+ this.pageIndex = 0;
+ this.paginator.pageIndex = 0;
+ this.loadData();
+ });
+ }
+
+ ngOnDestroy(): void {
+ this.widgetResize$?.disconnect();
+ }
+
+ onPageChange(event: any): void {
+ this.pageIndex = event.pageIndex;
+ this.pageSize = event.pageSize;
+ this.loadData();
+ }
+
+ getItemTypeIcon(itemType: string): string {
+ return getItemTypeIcon(itemType);
+ }
+
+ deleteItem(item: IotHubInstalledItem): void {
+ this.iotHubActions.deleteItem(item).subscribe(confirmed => {
+ if (confirmed) {
+ this.loadData();
+ }
+ });
+ }
+
+ getItemTypeLabel(itemType: string): string {
+ const key = itemTypeTranslations.get(itemType as ItemType);
+ return key ? this.translate.instant(key) : itemType;
+ }
+
+ getItemTypeChipClass(itemType: string): string {
+ switch (itemType) {
+ case 'WIDGET': return 'tb-type-widget';
+ case 'DASHBOARD': return 'tb-type-dashboard';
+ case 'CALCULATED_FIELD': return 'tb-type-calc-field';
+ case 'ALARM_RULE': return 'tb-type-alarm-rule';
+ case 'RULE_CHAIN': return 'tb-type-rule-chain';
+ case 'DEVICE': return 'tb-type-device';
+ case 'SOLUTION_TEMPLATE': return 'tb-type-solution-template';
+ default: return '';
+ }
+ }
+
+ viewItemDetails(item: IotHubInstalledItem): void {
+ if (item.itemType === 'DEVICE') {
+ this.openDeviceReviewDialog(item);
+ return;
+ }
+ this.iotHubApiService.getVersionInfo(item.itemVersionId, {ignoreLoading: true}).subscribe(versionView => {
+ this.iotHubActions.openItemDetail(versionView, item).subscribe(result => {
+ if (result === 'updated' || result === 'deleted') {
+ this.loadData();
+ }
+ });
+ });
+ }
+
+ private openDeviceReviewDialog(item: IotHubInstalledItem): void {
+ const descriptor = item.descriptor as DeviceInstalledItemDescriptor;
+ if (!descriptor.installState || !descriptor.selectedInstallMethod) {
+ this.iotHubApiService.getVersionInfo(item.itemVersionId, {ignoreLoading: true}).subscribe(versionView => {
+ this.iotHubActions.openItemDetail(versionView, item).subscribe();
+ });
+ return;
+ }
+ this.iotHubApiService.getVersionInfo(item.itemVersionId, {ignoreLoading: true, ignoreErrors: true}).subscribe(versionView => {
+ this.iotHubActions.reviewDevice(versionView, descriptor).subscribe();
+ });
+ }
+
+ openEntity(item: IotHubInstalledItem): void {
+ const url = getInstalledItemUrl(item?.descriptor);
+ if (url) {
+ const urlTree = this.router.parseUrl(url);
+ window.open(this.router.serializeUrl(urlTree), '_blank');
+ }
+ }
+
+ checkForUpdates(): void {
+ this.isCheckingUpdates = true;
+ this.iotHubApiService.getInstalledItemIds({ ignoreLoading: true }).pipe(
+ switchMap(itemIds => this.iotHubApiService.getItemsPublishedVersions(itemIds, { ignoreLoading: true }))
+ ).subscribe({
+ next: (infos) => {
+ this.publishedVersionMap.clear();
+ infos.forEach(info => this.publishedVersionMap.set(info.itemId, info));
+ this.updatesChecked = true;
+ this.isCheckingUpdates = false;
+ },
+ error: () => {
+ this.isCheckingUpdates = false;
+ }
+ });
+ }
+
+ viewUpdateDetails(publishedInfo: ItemPublishedVersionInfo, installedItem: IotHubInstalledItem): void {
+ this.iotHubApiService.getVersionInfo(publishedInfo.publishedVersionId, {ignoreLoading: true}).subscribe(versionView => {
+ this.iotHubActions.openItemDetail(versionView, installedItem).subscribe(result => {
+ if (result === 'updated' || result === 'deleted') {
+ this.loadData();
+ }
+ });
+ });
+ }
+
+ updateItem(item: IotHubInstalledItem, publishedInfo: ItemPublishedVersionInfo): void {
+ this.iotHubActions.updateItem(item, publishedInfo.publishedVersion, publishedInfo.publishedVersionId).subscribe(result => {
+ if (result === 'updated') {
+ this.loadData();
+ }
+ });
+ }
+
+ getPublishedVersionInfo(item: IotHubInstalledItem): ItemPublishedVersionInfo | undefined {
+ return this.publishedVersionMap.get(item.itemId);
+ }
+
+ private loadData(): void {
+ this.isLoading = true;
+ const sortOrder: SortOrder = {
+ property: this.sort?.active || 'createdTime',
+ direction: this.sort?.direction === 'asc' ? Direction.ASC : Direction.DESC
+ };
+ const pageLink = new PageLink(this.pageSize, this.pageIndex, this.textSearch || null, sortOrder);
+ const typeFilters = this.typeFilters?.length ? this.typeFilters : null;
+ this.iotHubApiService.getInstalledItems(pageLink, typeFilters, this.itemVersion?.itemId, {ignoreLoading: true}).subscribe({
+ next: (data) => {
+ this.dataSource = data.data;
+ this.totalElements = data.totalElements;
+ this.isLoading = false;
+ },
+ error: () => {
+ this.dataSource = [];
+ this.totalElements = 0;
+ this.isLoading = false;
+ }
+ });
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.html
new file mode 100644
index 0000000000..dc2030b00a
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.html
@@ -0,0 +1,152 @@
+
+@if (isCompactLayout()) {
+
+ ();
+ @Output() creatorClick = new EventEmitter();
+ @Output() installClick = new EventEmitter();
+ @Output() updateClick = new EventEmitter();
+ @Output() deleteClick = new EventEmitter();
+ @Output() addClick = new EventEmitter();
+ @Output() guideClick = new EventEmitter();
+
+ constructor(
+ private translate: TranslateService,
+ private iotHubApiService: IotHubApiService
+ ) {}
+
+ isCompactLayout(): boolean {
+ return this.item.type === ItemType.CALCULATED_FIELD
+ || this.item.type === ItemType.ALARM_RULE
+ || this.item.type === ItemType.RULE_CHAIN;
+ }
+
+ getPreviewUrl(): string | null {
+ if (!this.item.image) {
+ return null;
+ }
+ const [path, query] = this.item.image.split('?');
+ const withPreview = path.endsWith('/preview') ? path : `${path}/preview`;
+ const resolved = query ? `${withPreview}?${query}` : withPreview;
+ return this.iotHubApiService.resolveResourceUrl(resolved);
+ }
+
+ getPlaceholderIcon(): string {
+ switch (this.item.type) {
+ case ItemType.CALCULATED_FIELD:
+ return this.item.icon
+ || cfTypeIcons.get(this.item.dataDescriptor?.cfType)
+ || getItemTypeIcon(ItemType.CALCULATED_FIELD);
+ case ItemType.ALARM_RULE:
+ return this.item.icon || getItemTypeIcon(ItemType.ALARM_RULE);
+ case ItemType.RULE_CHAIN:
+ return this.item.icon
+ || (this.item.dataDescriptor?.ruleChainType === 'EDGE'
+ ? 'router'
+ : (this.item.dataDescriptor?.ruleChainType === 'CORE'
+ ? 'device_hub'
+ : getItemTypeIcon(ItemType.RULE_CHAIN)));
+ default:
+ return getItemTypeIcon(this.item.type);
+ }
+ }
+
+ getSubtypeLabel(): string {
+ switch (this.item.type) {
+ case ItemType.WIDGET: {
+ const wt = this.item.dataDescriptor?.widgetType;
+ const key = wt ? widgetTypeTranslations.get(wt) : null;
+ return key ? this.translate.instant(key) : wt || '';
+ }
+ case ItemType.CALCULATED_FIELD:
+ case ItemType.ALARM_RULE: {
+ const cfType = this.item.dataDescriptor?.cfType;
+ const key = cfType ? cfTypeTranslations.get(cfType) : null;
+ return key ? this.translate.instant(key) : cfType || '';
+ }
+ case ItemType.RULE_CHAIN: {
+ const rcType = this.item.dataDescriptor?.ruleChainType;
+ const key = rcType ? ruleChainTypeTranslations.get(rcType) : null;
+ return key ? this.translate.instant(key) : rcType || '';
+ }
+ default:
+ return '';
+ }
+ }
+
+ isInstalled(): boolean {
+ return !!this.installedItem;
+ }
+
+ isSameVersion(): boolean {
+ return this.installedItem?.itemVersionId === this.item.id;
+ }
+
+ onCardClick(): void {
+ this.cardClick.emit(this.item);
+ }
+
+ onInstallClick(event: MouseEvent): void {
+ event.stopPropagation();
+ this.installClick.emit(this.item);
+ }
+
+ onAddClick(event: MouseEvent): void {
+ event.stopPropagation();
+ this.addClick.emit(this.item);
+ }
+
+ onUpdateClick(event: MouseEvent): void {
+ event.stopPropagation();
+ this.updateClick.emit(this.item);
+ }
+
+ onDeleteClick(event: MouseEvent): void {
+ event.stopPropagation();
+ this.deleteClick.emit(this.item);
+ }
+
+ hasInstallGuide(): boolean {
+ return !!this.installedItem && this.installedItem.itemType === 'DEVICE';
+ }
+
+ onGuideClick(event: MouseEvent): void {
+ event.stopPropagation();
+ this.guideClick.emit(this.item);
+ }
+
+ onCreatorClick(event: Event): void {
+ event.stopPropagation();
+ this.creatorClick.emit(this.item.creatorId);
+ }
+
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html
new file mode 100644
index 0000000000..e42f1521aa
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html
@@ -0,0 +1,402 @@
+
+
+
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.scss
new file mode 100644
index 0000000000..5b7a182a01
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.scss
@@ -0,0 +1,690 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+
+@import "../../../../../scss/constants";
+
+// Dialog container
+.tb-iot-hub-detail-dialog {
+ display: flex;
+ flex-direction: column;
+ background: white;
+ border-radius: 8px;
+ overflow: hidden;
+ max-height: 80vh;
+ width: 1200px;
+
+ @media #{$mat-lt-xxl} {
+ width: 900px;
+ }
+
+ @media #{$mat-lt-lg} {
+ width: 768px;
+ }
+
+ @media #{$mat-lt-md} {
+ width: 100%;
+ }
+
+ @media #{$mat-xs} {
+ max-height: 100%;
+ height: 100%;
+ }
+}
+
+// Header — Design: pl-24, pr-12, py-16, gap between icon+content=16, content+close=8
+.dlg-header {
+ display: flex;
+ align-items: flex-start;
+ gap: 16px;
+ padding: 16px 12px 16px 24px;
+ flex-shrink: 0;
+
+}
+
+.dlg-close-btn-desktop {
+ @media #{$mat-lt-sm} {
+ display: none;
+ }
+}
+
+.dlg-close-btn-mobile {
+ position: absolute;
+ top: 16px;
+ right: 12px;
+ @media #{$mat-gt-xs} {
+ display: none;
+ }
+}
+
+// Header icon for CF/RC — Design: 64px, rounded-8, colored bg, white icon 36px
+.dlg-header-icon {
+ width: 64px;
+ height: 64px;
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+
+ tb-icon {
+ font-size: 36px;
+ width: 36px;
+ height: 36px;
+ color: #fff;
+ }
+}
+
+// Title — Design: 24px Medium, rgba(0,0,0,0.87)
+.dlg-title {
+ font-size: 24px;
+ font-weight: 500;
+ line-height: 32px;
+ color: rgba(0, 0, 0, 0.87);
+}
+
+// Subtitle row — Design: 13px Regular, rgba(0,0,0,0.54), gap-12 between groups
+.dlg-subtitle {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ font-size: 13px;
+ line-height: 16px;
+ letter-spacing: 0.4px;
+ color: rgba(0, 0, 0, 0.54);
+ flex-wrap: wrap;
+}
+
+.dlg-subtitle-group {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.dlg-subtitle-icon {
+ font-size: 16px;
+ width: 16px;
+ height: 16px;
+ color: rgba(0, 0, 0, 0.54);
+}
+
+// Dot separator — Design: 3px circle, rgba(0,0,0,0.38)
+.dlg-dot {
+ width: 3px;
+ height: 3px;
+ border-radius: 50%;
+ background: rgba(0, 0, 0, 0.38);
+ flex-shrink: 0;
+}
+
+// Scrollable body
+.dlg-body {
+ overflow-y: auto;
+ overflow-x: hidden;
+ flex: 1;
+ min-height: 0;
+}
+
+// Main content — Design: px-24, pb-16
+.dlg-main {
+ padding: 0 24px 16px;
+}
+
+// Preview image — Design: flex-1, aspect 305:172, bg rgba(0,0,0,0.06), rounded-8, p-16, dot pattern
+.dlg-preview {
+ flex: 1;
+ min-width: 0;
+ aspect-ratio: 305 / 172;
+ background: radial-gradient(circle, rgba(0, 0, 0, 0.06) 1px, transparent 1px) 0 0 / 20px 20px rgba(0, 0, 0, 0.06);
+ border-radius: 8px;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 16px;
+
+ &.dlg-preview-carousel {
+ aspect-ratio: 1.5;
+ }
+}
+
+.dlg-preview-img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+}
+
+.dlg-preview-placeholder {
+ tb-icon {
+ font-size: 48px;
+ width: 48px;
+ height: 48px;
+ color: rgba(0, 0, 0, 0.2);
+ }
+}
+
+
+// Description — strip padding from tb-iot-hub-markdown so the body
+// sits flush with the surrounding info layout.
+.dlg-description {
+ ::ng-deep tb-iot-hub-markdown .tb-markdown-view {
+ padding: 0;
+ }
+}
+
+// Author — Design: person icon 16px + name 12px Medium $tb-primary-color
+.dlg-author {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+
+ tb-icon {
+ font-size: 16px;
+ width: 16px;
+ height: 16px;
+ color: rgba(0, 0, 0, 0.54);
+ }
+
+ span {
+ font-size: 12px;
+ font-weight: 500;
+ line-height: 16px;
+ letter-spacing: 0.25px;
+ color: $tb-primary-color;
+ }
+
+ &.clickable {
+ cursor: pointer;
+
+ &:hover span {
+ text-decoration: underline;
+ }
+ }
+}
+
+// Rule Chain node chips — Design: colored pill chips in a row, px-24 py-16
+.dlg-nodes {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ padding: 16px 24px;
+}
+
+// Node chips — Design: pill shape, 1px border at full color, bg at 16% opacity, black text
+.dlg-node-chip {
+ display: inline-flex;
+ align-items: center;
+ height: 32px;
+ padding: 6px 12px;
+ border-radius: 16px;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.2px;
+ white-space: nowrap;
+ border: 1px solid;
+ color: rgba(0, 0, 0, 0.76);
+
+ &.dlg-node-filter { background: rgba(241, 232, 97, 0.16); border-color: rgb(241, 232, 97); }
+ &.dlg-node-enrichment { background: rgba(205, 241, 78, 0.16); border-color: rgb(205, 241, 78); }
+ &.dlg-node-transformation { background: rgba(121, 206, 241, 0.16); border-color: rgb(121, 206, 241); }
+ &.dlg-node-action { background: rgba(241, 146, 143, 0.16); border-color: rgb(241, 146, 143); }
+ &.dlg-node-analytics { background: rgba(49, 210, 204, 0.16); border-color: rgb(49, 210, 204); }
+ &.dlg-node-external { background: rgba(251, 199, 102, 0.16); border-color: rgb(251, 199, 102); }
+ &.dlg-node-flow { background: rgba(214, 196, 241, 0.16); border-color: rgb(214, 196, 241); }
+ &.dlg-node-unknown { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.12); }
+}
+
+// Divider
+.dlg-divider {
+ height: 1px;
+ background: rgba(0, 0, 0, 0.12);
+}
+
+.dlg-meta-bar {
+ position: sticky;
+ top: 0;
+ z-index: 1;
+ background: white;
+}
+
+// Meta section (categories + use cases) — Design: px-24, py-16, gap-24, grid row
+.dlg-meta {
+ display: grid;
+ gap: 24px;
+ padding: 16px 24px 12px;
+ grid-template-columns: minmax(0, max-content) minmax(0, max-content) minmax(auto, max-content) minmax(auto, 1fr) max-content;
+
+ &.dlg-meta-4-col {
+ grid-template-columns: minmax(0, max-content) minmax(auto, max-content) minmax(auto, 1fr) max-content;
+ }
+
+ .dlg-meta-details {
+ display: none;
+ }
+
+ .dlg-meta-creator-section {
+ min-width: 0;
+ }
+
+ @media #{$mat-lt-md} {
+ grid-template-columns: minmax(0, 1fr) max-content max-content;
+
+ &.dlg-meta-4-col {
+ grid-template-columns: minmax(0, 1fr) max-content max-content;
+ }
+
+ .dlg-meta-details-section {
+ display: none;
+ }
+
+ .dlg-meta-details {
+ display: flex;
+ }
+ }
+}
+
+.dlg-details-popover {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ padding: 16px;
+
+ .dlg-details-popover-title {
+ font-size: 16px;
+ font-weight: 500;
+ line-height: 24px;
+ letter-spacing: 0.25px;
+ color: rgba(0, 0, 0, 0.87);
+ }
+
+ .dlg-details-popover-body {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ }
+}
+
+.dlg-meta-group {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.dlg-meta-creator {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 4px 0;
+
+ &.clickable {
+ cursor: pointer;
+ }
+}
+
+.dlg-meta-creator-avatar {
+ position: relative;
+ width: 32px;
+ height: 32px;
+ flex-shrink: 0;
+
+ img {
+ width: 32px;
+ height: 32px;
+ border-radius: 9999px;
+ object-fit: cover;
+ }
+
+ mat-icon:not(.dlg-meta-creator-verified) {
+ font-size: 32px;
+ width: 32px;
+ height: 32px;
+ color: rgba(0, 0, 0, 0.38);
+ }
+
+ .dlg-meta-creator-verified {
+ position: absolute;
+ top: -6px;
+ left: 18px;
+ font-size: 20px;
+ width: 20px;
+ height: 20px;
+ color: #00695c;
+ }
+}
+
+.dlg-meta-creator-name {
+ font-size: 12px;
+ font-weight: 500;
+ line-height: 16px;
+ letter-spacing: 0.25px;
+ color: rgba(0, 0, 0, 0.76);
+ white-space: nowrap;
+}
+
+// Meta label — Design: 12px Medium, rgba(0,0,0,0.54), tracking 0.25
+.dlg-meta-label {
+ font-size: 12px;
+ font-weight: 500;
+ line-height: 16px;
+ letter-spacing: 0.25px;
+ color: rgba(0, 0, 0, 0.54);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.dlg-meta-chips {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 4px;
+ padding: 8px 0;
+}
+
+.dlg-meta-manage {
+ margin-left: auto;
+ flex-shrink: 0;
+}
+
+.dlg-meta-manage-actions {
+ display: flex;
+ align-items: center;
+}
+
+.dlg-manage-icon-btn.mat-mdc-icon-button {
+ width: 40px;
+ height: 40px;
+ padding: 8px;
+ --mdc-icon-button-state-layer-size: 40px;
+ color: rgba(0, 0, 0, 0.54);
+}
+
+.dlg-manage-remove-btn {
+ color: rgba(0, 0, 0, 0.54);
+}
+
+// Chip — Design: 12px Medium, h-24, p-4 px-8, rounded-4
+.dlg-chip {
+ display: inline-flex;
+ align-items: center;
+ height: 24px;
+ padding: 4px 8px;
+ border-radius: 4px;
+ font-size: 12px;
+ font-weight: 500;
+ line-height: 16px;
+ letter-spacing: 0.25px;
+ white-space: nowrap;
+}
+
+.dlg-chip.dlg-chip-inline {
+ display: inline-block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+// Category chip — Design: bg rgba(16,108,200,0.06), color #106cc8
+.dlg-chip-category {
+ background: rgba(16, 108, 200, 0.06);
+ color: #106cc8;
+}
+
+// Type chip — Design: bg rgba(0,105,92,0.06), color #00695c
+.dlg-chip-type {
+ background: rgba(0, 105, 92, 0.06);
+ color: #00695c;
+}
+
+// Use case chip — Design: bg rgba(25,128,56,0.06), color #198038
+.dlg-chip-usecase {
+ background: rgba(25, 128, 56, 0.06);
+ color: #198038;
+}
+
+// Readme content — wraps tb-iot-hub-markdown, which carries the
+// markdown-view styles. Only the changelog heading layout lives here.
+.dlg-readme {
+ > h3 {
+ padding-left: 24px;
+ }
+}
+
+// Carousel (solution templates)
+.dlg-hero-carousel {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ animation: dlg-carousel-fade-in 0s 0.3s forwards;
+ visibility: hidden;
+}
+
+@keyframes dlg-carousel-fade-in {
+ to { visibility: visible; }
+}
+
+.dlg-carousel {
+ height: 100%;
+
+ ::ng-deep .carousel {
+ display: flex !important;
+ flex-direction: column !important;
+ flex: 1;
+
+ > section { flex: 1; min-height: 0; }
+
+ ul.indicators { display: none !important; }
+ .direction { display: none !important; }
+ }
+
+ .dlg-carousel-container {
+ display: flex;
+ height: 100%;
+
+ .dlg-carousel-item {
+ position: relative;
+ overflow: hidden;
+
+ img {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
+ }
+ }
+}
+
+.dlg-carousel-hidden-nav {
+ display: none;
+}
+
+.dlg-carousel-controls {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-shrink: 0;
+ padding-top: 16px;
+}
+
+.dlg-carousel-dots {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex: 1;
+}
+
+.dlg-carousel-nav {
+ width: 40px;
+ height: 40px;
+ background: white;
+ color: rgba(0, 0, 0, 0.76);
+ flex-shrink: 0;
+
+ &:hover { background: rgba(245, 245, 245, 1); }
+}
+
+.dlg-carousel-dot {
+ width: 6px;
+ height: 6px;
+ border-radius: 999px;
+ background: rgba(0, 0, 0, 0.38);
+ margin: 9px 12px;
+ cursor: pointer;
+ transition: background 0.2s;
+
+ &.active { background: rgba(0, 0, 0, 0.76); }
+}
+
+// Info panel — Design: flex-col, space-between, py-16, gap-32
+.dlg-info {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: 32px;
+ padding: 16px 0;
+
+ &.dlg-info-compact {
+ justify-content: flex-start;
+ padding: 0;
+ }
+}
+
+// Text container — Design: flex-col, gap-16
+.dlg-info-text {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+// Installed status row — Design: flex, justify-between, full width
+.dlg-info-status-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+}
+
+// Installed badge — Design: pill, bg rgba(25,128,56,0.06), rounded-16, px-8 py-4
+.dlg-installed-badge {
+ display: inline-flex;
+ align-items: center;
+ flex-shrink: 0;
+ gap: 4px;
+ padding: 4px 8px;
+ border-radius: 16px;
+ background: rgba(25, 128, 56, 0.06);
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 16px;
+ letter-spacing: 0.4px;
+ color: #198038;
+
+ mat-icon {
+ font-size: 14px;
+ width: 14px;
+ height: 14px;
+ }
+}
+
+// Update button — Design: border #ff5722, text #ff5722, rounded-4, px-16 py-6
+.dlg-update-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ padding: 6px 16px;
+ border: 1px solid #ff5722;
+ border-radius: 4px;
+ background: transparent;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ letter-spacing: 0.25px;
+ color: #ff5722;
+ white-space: nowrap;
+ cursor: pointer;
+
+ &:hover {
+ background: rgba(255, 87, 34, 0.04);
+ }
+}
+
+// Open details / Solution instructions link — Design: 12px Medium, $tb-primary-color
+.dlg-info-link {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ font-size: 12px;
+ font-weight: 500;
+ line-height: 16px;
+ letter-spacing: 0.25px;
+ color: $tb-primary-color;
+ cursor: pointer;
+ text-decoration: none;
+ border: none;
+
+ mat-icon {
+ font-size: 16px;
+ width: 16px;
+ height: 16px;
+ }
+
+ &:hover {
+ text-decoration: underline;
+ }
+}
+
+// Solution template links row
+.dlg-info-links-row {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+}
+
+// Footer
+.dlg-footer {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px;
+ border-top: 1px solid rgba(0, 0, 0, 0.12);
+ flex-shrink: 0;
+}
+
+.dlg-footer-spacer {
+ flex: 1;
+}
+
+// Responsive
+@media #{$mat-xs} {
+ .dlg-header {
+ flex-direction: column;
+ position: relative;
+ padding-right: 48px;
+ }
+}
+
+.dlg-subtitle-group.tb-unpublished-preview-badge {
+ color: #d32f2f;
+ font-weight: 600;
+
+ .dlg-subtitle-icon {
+ color: #d32f2f;
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.ts
new file mode 100644
index 0000000000..04d49b7f86
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.ts
@@ -0,0 +1,283 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { Component, Inject, Type } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { DialogComponent } from '@shared/components/dialog.component';
+import { MpItemVersionView, cfTypeTranslations, cfTypeIcons, ruleChainTypeTranslations, widgetTypeTranslations, NodeInfo } from '@shared/models/iot-hub/iot-hub-version.models';
+import { getItemTypeIcon, ItemType, itemTypeTranslations } from '@shared/models/iot-hub/iot-hub-item.models';
+import { getInstalledItemUrl, IotHubInstalledItem } from '@shared/models/iot-hub/iot-hub-installed-item.models';
+import { IotHubApiService } from '@core/http/iot-hub-api.service';
+import { TranslateService } from '@ngx-translate/core';
+import { SolutionInstallDialogComponent } from '@home/components/iot-hub/solution-install-dialog.component';
+import { SolutionTemplateInstalledItemDescriptor } from '@shared/models/iot-hub/iot-hub-installed-item.models';
+import { IotHubActionsService } from '@home/components/iot-hub/iot-hub-actions.service';
+
+export type IotHubItemDetailDialogMode = 'default' | 'add';
+
+export interface IotHubItemDetailDialogData {
+ item: MpItemVersionView;
+ installedItem?: IotHubInstalledItem;
+ installedItemsCount?: number;
+ mode?: IotHubItemDetailDialogMode;
+ showCreator?: boolean;
+ preview?: boolean;
+}
+
+@Component({
+ selector: 'tb-iot-hub-item-detail-dialog',
+ standalone: false,
+ templateUrl: './iot-hub-item-detail-dialog.component.html',
+ styleUrls: ['./iot-hub-item-detail-dialog.component.scss']
+})
+export class TbIotHubItemDetailDialogComponent extends DialogComponent {
+
+ readonly ItemType = ItemType;
+ item: MpItemVersionView;
+ mode: IotHubItemDetailDialogMode;
+ showCreator: boolean;
+ preview: boolean;
+ typeTranslations = itemTypeTranslations;
+ readmeContent: string = '';
+ installedItem?: IotHubInstalledItem;
+ installedItemsCount = 0;
+ carouselImages: string[] = [];
+ carouselIndex = 0;
+
+ constructor(
+ protected store: Store,
+ protected router: Router,
+ protected dialogRef: MatDialogRef,
+ @Inject(MAT_DIALOG_DATA) public data: IotHubItemDetailDialogData,
+ private dialog: MatDialog,
+ private translate: TranslateService,
+ private iotHubApiService: IotHubApiService,
+ private iotHubActions: IotHubActionsService
+ ) {
+ super(store, router, dialogRef);
+ this.item = data.item;
+ this.mode = data.mode || 'default';
+ this.showCreator = data.showCreator !== false;
+ this.preview = data.preview === true;
+ this.installedItem = data.installedItem;
+ this.installedItemsCount = data.installedItemsCount || 0;
+ this.buildCarouselImages();
+ this.loadReadme();
+ }
+
+ isCompactLayout(): boolean {
+ return this.item.type === ItemType.CALCULATED_FIELD
+ || this.item.type === ItemType.ALARM_RULE
+ || this.item.type === ItemType.RULE_CHAIN;
+ }
+
+ getPreviewUrl(): string | null {
+ return this.item.image ? this.iotHubApiService.resolveResourceUrl(this.item.image) : null;
+ }
+
+ getCreatorAvatarUrl(): string | null {
+ return this.item.creatorAvatarUrl ? this.iotHubApiService.resolveResourceUrl(this.item.creatorAvatarUrl) : null;
+ }
+
+ getTypeLabel(): string {
+ const key = this.typeTranslations.get(this.item.type);
+ return key ? this.translate.instant(key) : '';
+ }
+
+ getTypeIcon(): string {
+ return getItemTypeIcon(this.item.type);
+ }
+
+ getCompactIcon(): string {
+ if (this.item.icon) {
+ return this.item.icon;
+ }
+ if (this.item.type === ItemType.CALCULATED_FIELD) {
+ const cfType = this.item.dataDescriptor?.cfType;
+ return cfTypeIcons.get(cfType) || getItemTypeIcon(ItemType.CALCULATED_FIELD);
+ }
+ if (this.item.type === ItemType.ALARM_RULE) {
+ return getItemTypeIcon(ItemType.ALARM_RULE);
+ }
+ switch (this.item.dataDescriptor?.ruleChainType) {
+ case 'CORE': return 'device_hub';
+ case 'EDGE': return 'router';
+ default: return getItemTypeIcon(ItemType.RULE_CHAIN);
+ }
+ }
+
+ getCompactSubtypeLabel(): string {
+ if (this.item.type === ItemType.CALCULATED_FIELD || this.item.type === ItemType.ALARM_RULE) {
+ const cfType = this.item.dataDescriptor?.cfType;
+ const key = cfType ? cfTypeTranslations.get(cfType) : null;
+ return key ? this.translate.instant(key) : cfType || '';
+ }
+ const rcType = this.item.dataDescriptor?.ruleChainType;
+ const key = rcType ? ruleChainTypeTranslations.get(rcType) : null;
+ return key ? this.translate.instant(key) : rcType || '';
+ }
+
+ getSubtypeLabel(): string {
+ switch (this.item.type) {
+ case ItemType.CALCULATED_FIELD:
+ case ItemType.ALARM_RULE:
+ case ItemType.RULE_CHAIN:
+ return this.getCompactSubtypeLabel();
+ case ItemType.WIDGET: {
+ const wt = this.item.dataDescriptor?.widgetType;
+ const key = wt ? widgetTypeTranslations.get(wt) : null;
+ return key ? this.translate.instant(key) : '';
+ }
+ default:
+ return '';
+ }
+ }
+
+ getNodes(): NodeInfo[] {
+ return this.item.dataDescriptor?.nodes || [];
+ }
+
+ isInstalled(): boolean {
+ return this.installedItem != null;
+ }
+
+ shouldShowChangelog(): boolean {
+ const changelog = this.item.changelog?.trim();
+ return !!changelog && changelog !== 'Initial release';
+ }
+
+ hasUpdate(): boolean {
+ return this.installedItem != null
+ && this.installedItem.itemVersionId !== this.item.id;
+ }
+
+ install(): void {
+ this.iotHubActions.installItem(this.item).subscribe(result => {
+ if (result === 'installed') {
+ this.dialogRef.close('installed');
+ }
+ });
+ }
+
+ installDevice(): void {
+ this.iotHubActions.installDevice(this.item).subscribe(result => {
+ if (result === 'installed') {
+ this.dialogRef.close('installed');
+ }
+ });
+ }
+
+ updateItem(): void {
+ this.iotHubActions.updateItem(this.installedItem, this.item.version, this.item.id as string).subscribe(result => {
+ if (result === 'updated') {
+ this.dialogRef.close('updated');
+ }
+ });
+ }
+
+ navigateToCreator(): void {
+ this.dialogRef.close();
+ void this.router.navigate(['/iot-hub/creator', this.item.creatorId]);
+ }
+
+ openEntityDetails(): void {
+ const url = getInstalledItemUrl(this.installedItem?.descriptor);
+ if (url) {
+ this.dialogRef.close();
+ void this.router.navigateByUrl(url);
+ }
+ }
+
+ openSolutionInstructions(): void {
+ const descriptor = this.installedItem?.descriptor;
+ if (descriptor?.type === 'SOLUTION_TEMPLATE') {
+ this.dialog.open(SolutionInstallDialogComponent, {
+ disableClose: true,
+ autoFocus: false,
+ panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
+ data: {
+ descriptor: descriptor as SolutionTemplateInstalledItemDescriptor,
+ instructions: true
+ }
+ });
+ }
+ }
+
+ deleteItem(): void {
+ this.iotHubActions.deleteItem(this.installedItem).subscribe(confirmed => {
+ if (confirmed) {
+ this.dialogRef.close('deleted');
+ }
+ });
+ }
+
+ addItem(): void {
+ this.dialogRef.close({ action: 'add', item: this.item });
+ }
+
+ openInstalledItemsDialog(): void {
+ this.iotHubActions.openInstalledItems(this.item).subscribe();
+ }
+
+ hasDetails(): boolean {
+ if (this.getSubtypeLabel()) {
+ return true;
+ }
+ if (this.item.useCases?.length) {
+ return true;
+ }
+ if (this.item.type === ItemType.DEVICE) {
+ return !!this.item.dataDescriptor?.hardwareType || !!this.item.dataDescriptor?.connectivity?.length;
+ }
+ return !!this.item.categories?.length;
+ }
+
+ goToPrevSlide(): void {
+ this.carouselIndex = (this.carouselIndex - 1 + this.carouselImages.length) % this.carouselImages.length;
+ }
+
+ goToNextSlide(): void {
+ this.carouselIndex = (this.carouselIndex + 1) % this.carouselImages.length;
+ }
+
+ close(): void {
+ this.dialogRef.close();
+ }
+
+ private buildCarouselImages(): void {
+ if (this.item.type !== ItemType.SOLUTION_TEMPLATE || !this.item.resources?.length) {
+ return;
+ }
+ const screenshotResources = this.item.resources.filter(r => r.type === 'SCREENSHOT');
+ const allResources = screenshotResources.length > 0
+ ? screenshotResources
+ : this.item.resources.filter(r => r.type === 'ICON');
+ this.carouselImages = allResources.map(r =>
+ this.iotHubApiService.resolveResourceUrl(`/api/resources/${r.id}`)
+ );
+ }
+
+ private loadReadme(): void {
+ const versionId = this.item.id as string;
+ this.iotHubApiService.getVersionReadme(versionId, { ignoreLoading: true }).subscribe(
+ content => this.readmeContent = content
+ );
+ }
+
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-link-card/iot-hub-item-link-card.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-link-card/iot-hub-item-link-card.component.html
new file mode 100644
index 0000000000..fbf00c7dd7
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-link-card/iot-hub-item-link-card.component.html
@@ -0,0 +1,70 @@
+
+@switch (state) {
+ @case ('loading') {
+ = new Set([
+ ItemType.CALCULATED_FIELD,
+ ItemType.ALARM_RULE,
+ ItemType.RULE_CHAIN
+]);
+
+@Component({
+ selector: 'tb-iot-hub-item-link-card',
+ standalone: false,
+ templateUrl: './iot-hub-item-link-card.component.html',
+ styleUrls: ['./iot-hub-item-link-card.component.scss']
+})
+export class TbIotHubItemLinkCardComponent implements OnInit {
+
+ @Input() itemId!: string;
+
+ state: CardState = 'loading';
+ item: MpItemVersionView | null = null;
+
+ constructor(private iotHubApiService: IotHubApiService) {}
+
+ ngOnInit(): void {
+ if (!this.itemId) {
+ this.state = 'unavailable';
+ return;
+ }
+ this.iotHubApiService
+ .getPublishedVersion(this.itemId, { ignoreErrors: true, ignoreLoading: true })
+ .subscribe({
+ next: item => {
+ this.item = item;
+ this.state = item ? 'loaded' : 'unavailable';
+ },
+ error: () => {
+ this.state = 'unavailable';
+ }
+ });
+ }
+
+ isCompact(): boolean {
+ return !!this.item && COMPACT_TYPES.has(this.item.type);
+ }
+
+ getImageUrl(): string | null {
+ const item = this.item!;
+ return item.image ? this.iotHubApiService.resolveResourceUrl(item.image) : null;
+ }
+
+ getCompactIcon(): string {
+ const item = this.item!;
+ return item.icon || getItemTypeIcon(item.type);
+ }
+
+ getTypeIcon(): string {
+ return getItemTypeIcon(this.item!.type);
+ }
+
+ getCompactColor(): string {
+ return this.item!.color || '#048ad3';
+ }
+
+ getHref(): string {
+ return `/iot-hub/${this.itemId}`;
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-link-card/iot-hub-item-link.module.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-link-card/iot-hub-item-link.module.ts
new file mode 100644
index 0000000000..24571271ff
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-link-card/iot-hub-item-link.module.ts
@@ -0,0 +1,27 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '@shared/shared.module';
+import { TbIotHubItemLinkCardComponent } from './iot-hub-item-link-card.component';
+
+@NgModule({
+ declarations: [TbIotHubItemLinkCardComponent],
+ imports: [CommonModule, SharedModule],
+ exports: [TbIotHubItemLinkCardComponent]
+})
+export class IotHubItemLinkModule {}
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/widget-types-panel.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-markdown.component.html
similarity index 63%
rename from ui-ngx/src/app/modules/home/components/dashboard-page/widget-types-panel.component.html
rename to ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-markdown.component.html
index 51eebbf7ed..a7c2d3bd04 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/widget-types-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-markdown.component.html
@@ -15,9 +15,11 @@
limitations under the License.
-->
-
+
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-markdown.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-markdown.component.scss
new file mode 100644
index 0000000000..be2ab69a76
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-markdown.component.scss
@@ -0,0 +1,461 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+
+$text-color: rgba(0,0,0,0.76);
+$link-color: #2a7dec;
+$copy-button-color: #2a7dec;
+
+$code-block-border-color: rgba(42, 125, 236, .2);
+$code-default-color: #212529;
+$code-text-color: #eb5757;
+$code-keyword-color: #2a7dec;
+
+$table-border-color: rgba(42, 125, 236, .2);
+$table-header-background-color: #f9fbff;
+$table-header-text-color: rgba(33, 37, 41, .6);
+$table-text-color: rgba(15, 22, 29, 0.8);
+
+$gallery-border-hover-color: #2a7dec;
+
+:host {
+ display: block;
+ font-size: 14px;
+ line-height: 24px;
+ letter-spacing: 0.2px;
+ color: $text-color;
+
+ --mat-button-outlined-label-text-color: #{$text-color};
+
+ ::ng-deep tb-markdown .tb-markdown-view {
+ padding: 16px 24px 24px;
+ &.table-wrapper {
+ padding: 0;
+ }
+ &:not(.table-wrapper) {
+ > :first-child {
+ margin-top: 0;
+ }
+ }
+
+ // Headings: design 20px SemiBold, line-height 24, tracking 0.1.
+ h1, h2, h3, h4, h5, h6 {
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 24px;
+ letter-spacing: 0.1px;
+ color: $text-color;
+ margin: 0;
+ padding: 0;
+ }
+
+ > h1, > h2, > h3, > h4, > h5, > h6 {
+ padding: 0 0 6px;
+ margin-top: 20px;
+ }
+
+ h1 {
+ font-size: 24px;
+ line-height: 32px;
+ padding-right: 0;
+ }
+
+ // Paragraphs: design 14px Regular, tracking 0.2, line-height 24.
+ p {
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0.2px;
+ color: $text-color;
+ margin: 0;
+ }
+
+ > p, > div {
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ p + p {
+ margin-top: 8px;
+ }
+
+ h1 + p, h2 + p, h3 + p,
+ h1 + ul, h2 + ul, h3 + ul,
+ h1 + ol, h2 + ol, h3 + ol {
+ margin-top: 8px;
+ }
+
+ // Lists: design ms-21 per li, 14px, line-height 24.
+ ul, ol {
+ padding-left: 21px;
+ padding-right: 0;
+ margin: 0;
+ font-size: 14px;
+ line-height: 24px;
+ letter-spacing: 0.2px;
+ color: $text-color;
+
+ + h1, + h2, + h3, + h4, + h5, + h6 {
+ padding-top: 0;
+ margin-top: 20px;
+ }
+ }
+
+ ul {
+ margin-top: 8px;
+ margin-bottom: 8px;
+ }
+
+ li {
+ padding-bottom: 4px;
+ margin-bottom: 0;
+ line-height: 24px;
+ }
+
+ img {
+ max-width: 100%;
+ }
+
+ a:not(.mdc-button):not(.tb-iot-hub-item-link-card) {
+ font-weight: 500;
+ color: $link-color;
+ text-decoration: none;
+ border: none;
+
+ &:hover {
+ color: $link-color;
+ text-decoration: underline;
+ border: none;
+ }
+ }
+
+ code:not([class*=language-]) {
+ color: $code-text-color;
+ font-family: monospace;
+ font-size: 14px;
+ }
+
+ // Code-wrapper + clipboard button
+ div.code-wrapper {
+ position: relative;
+
+ button.clipboard-btn {
+ pointer-events: none;
+ outline: none;
+ position: absolute;
+ width: 206px;
+ height: 32px;
+ top: 0;
+ right: 0;
+ background: 0 0;
+ border: none;
+ user-select: none;
+
+ &.multiline {
+ right: 6px;
+ }
+
+ p {
+ padding: 6px 8px 0;
+ top: 1px;
+ transition: .2s;
+ color: $copy-button-color;
+ background: rgba(255, 255, 255, .85);
+ backdrop-filter: blur(4px);
+ opacity: 0;
+ font-weight: 500;
+ right: 32px;
+ position: absolute;
+ }
+
+ div {
+ background-color: #fff;
+ position: absolute;
+ width: 38px;
+ height: 28px;
+ top: 3px;
+ right: 3px;
+ padding: 8px 10px 0;
+
+ img {
+ position: initial;
+ width: 18px;
+ height: 18px;
+ filter: invert(51%) sepia(6%) saturate(172%) hue-rotate(177deg) brightness(94%) contrast(92%);
+ }
+ }
+ }
+
+ &:hover {
+ cursor: pointer;
+
+ pre[class*="language-"] {
+ border: solid 1px $copy-button-color;
+ }
+
+ button.clipboard-btn {
+ p {
+ opacity: 1;
+ }
+
+ div img {
+ filter: invert(49%) sepia(97%) saturate(3730%) hue-rotate(200deg) brightness(95%) contrast(95%);
+ }
+ }
+ }
+ }
+
+ th, td {
+ div.code-wrapper {
+ display: inline-block;
+ width: 100%;
+
+ button.clipboard-btn {
+ top: -6px;
+ padding: 0 3px;
+ }
+ }
+ }
+
+ // Code blocks (Prism)
+ pre[class*="language-"] {
+ font-size: 14px;
+ border: 1px solid $code-block-border-color;
+ border-radius: 4px;
+ background: 0 0;
+ padding: 8px 16px;
+ color: $code-default-color;
+
+ .token.atrule, .token.attr-value, .token.keyword {
+ color: $code-keyword-color;
+ }
+
+ .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {
+ color: $code-text-color;
+ }
+
+ .token.punctuation {
+ color: $code-default-color;
+ }
+
+ &.line-numbers {
+ padding-left: 66px;
+
+ > code span.line-numbers-rows {
+ top: -11px;
+ bottom: -11px;
+ left: -66px;
+ width: 50px;
+ border: none;
+ padding: 8px 12px 8px 18px;
+ text-align: right;
+ background: #f9fbff;
+
+ > span:before {
+ color: rgba(33, 37, 41, .6);
+ padding-right: 0;
+ }
+ }
+
+ &.no-line-numbers {
+ padding-left: 16px;
+
+ > code span.line-numbers-rows {
+ display: none;
+ }
+ }
+ }
+ }
+
+ // Tables
+ > table {
+ width: 100%;
+ border: 1px solid $table-border-color;
+ border-radius: 4px;
+ border-collapse: unset;
+ border-spacing: 0;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ overflow: hidden;
+ table-layout: fixed;
+
+ &.auto {
+ table-layout: auto;
+ }
+
+ > thead {
+ background-color: $table-header-background-color;
+ color: $table-header-text-color;
+
+ > tr > th {
+ border-bottom: 1px solid $table-border-color;
+ font-size: 14px;
+ padding: 8px 12px;
+ text-align: left;
+ margin: 0;
+ @media screen and (max-width: 400px) {
+ font-size: 12px;
+ padding: 8px 4px;
+ code:not([class*=language-]) {
+ font-size: 12px;
+ }
+ }
+ }
+ }
+
+ > tbody {
+ > tr:not(:last-child) > td {
+ border-bottom: 1px solid $table-border-color;
+ }
+
+ > tr > td {
+ font-size: 14px;
+ padding: 8px 12px;
+ text-align: left;
+ margin: 0;
+ color: $table-text-color;
+ @media screen and (max-width: 400px) {
+ font-size: 12px;
+ padding: 8px 4px;
+ code:not([class*=language-]) {
+ font-size: 12px;
+ }
+ }
+ }
+ }
+
+ th, td {
+ font-size: 14px;
+ padding: 8px;
+ margin: 0;
+ text-align: left;
+ }
+
+ td[align=center], th[align=center] {
+ text-align: center;
+ }
+
+ td[align=right], th[align=right] {
+ text-align: right;
+ }
+
+ tr td div {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ }
+
+ .tb-callout {
+ display: flex;
+ align-items: flex-start;
+ gap: 10px;
+ padding: 12px 16px;
+ border-radius: 4px;
+ border: 1px solid;
+ margin: 12px 0;
+ font-size: 14px;
+ line-height: 20px;
+
+ .tb-callout-icon {
+ font-size: 20px;
+ flex-shrink: 0;
+ }
+
+ &.tb-callout-note {
+ background: #e3f2fd;
+ border-color: #90caf9;
+ color: #1565c0;
+ }
+
+ &.tb-callout-warn {
+ background: #fff8e1;
+ border-color: #ffe082;
+ color: #f57f17;
+ }
+
+ &.tb-callout-error {
+ background: #fce4ec;
+ border-color: #ef9a9a;
+ color: #c62828;
+ }
+ }
+
+ .tb-gallery-images {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ gap: 12px;
+ margin-top: 8px;
+ margin-bottom: 8px;
+
+ .tb-gallery-image {
+ position: relative;
+ cursor: pointer;
+ border: 2px solid #c1c3c8;
+ border-radius: 8px;
+ overflow: hidden;
+ margin: 0;
+ padding: 0;
+ background: #fff;
+ transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
+ display: block;
+ &:hover {
+ border-color: $gallery-border-hover-color;
+ transform: translateY(-2px);
+ box-shadow: 0 6px 18px #0000002e;
+ outline: none;
+ .tb-image-tooltip {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+ .tb-image-container {
+ display: block;
+ height: 115px;
+ overflow: hidden;
+ background: #fff;
+ img {
+ width: 100%;
+ max-width: 100%;
+ height: 100%;
+ object-fit: contain;
+ object-position: top center;
+ display: block;
+ margin: 0;
+ padding: 0;
+ }
+ }
+ .tb-image-tooltip {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: .4rem .6rem;
+ background: #000000b8;
+ color: #fff;
+ font-size: .75rem;
+ line-height: 1.3;
+ text-align: center;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ opacity: 0;
+ transform: translateY(4px);
+ transition: opacity .2s ease, transform .2s ease;
+ pointer-events: none;
+ }
+ }
+ }
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-markdown.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-markdown.component.ts
new file mode 100644
index 0000000000..a63d17c914
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-markdown.component.ts
@@ -0,0 +1,239 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import {
+ Component,
+ ElementRef,
+ EventEmitter,
+ Input,
+ OnChanges,
+ OnInit,
+ Output,
+ SimpleChanges,
+ Type
+} from '@angular/core';
+import { coerceBoolean } from '@shared/decorators/coercion';
+import { IotHubItemLinkModule } from './iot-hub-item-link-card/iot-hub-item-link.module';
+import { IotHubApiService } from '@core/http/iot-hub-api.service';
+import { MpItemVersionView } from '@shared/models/iot-hub/iot-hub-version.models';
+import {
+ escapeHtmlAttr,
+ replaceItemLinkPlaceholders,
+ resolveDocLinkPlaceholders,
+ sanitizeInlineHtml
+} from '@home/components/iot-hub/iot-hub-markdown.utils';
+import { DevicePackageInfo } from '@shared/models/iot-hub/device-package.models';
+import { isNotEmptyStr } from '@core/utils';
+
+@Component({
+ selector: 'tb-iot-hub-markdown',
+ standalone: false,
+ templateUrl: './iot-hub-markdown.component.html',
+ styleUrls: ['./iot-hub-markdown.component.scss']
+})
+export class TbIotHubMarkdownComponent implements OnInit, OnChanges {
+
+ @Input() data: string | undefined;
+
+ @Input() item: MpItemVersionView | undefined;
+
+ @Input() packageInfo: DevicePackageInfo | undefined;
+
+ @Input() imageMap: Map | undefined;
+
+ @Input() onResolveVariable: (key: string) => string | undefined = () => undefined;
+
+ @Input()
+ @coerceBoolean()
+ lineNumbers = false;
+
+ @Input()
+ @coerceBoolean()
+ fallbackToPlainMarkdown = false;
+
+ @Input()
+ codeBlockMaxHeightPx: number;
+
+ @Output() ready = new EventEmitter();
+
+ additionalStyles: string[] = [];
+
+ parsedData: string;
+
+ readonly itemLinkCompileModules: Type[] = [IotHubItemLinkModule];
+
+ constructor(
+ private iotHubApiService: IotHubApiService,
+ private elementRef: ElementRef
+ ) {}
+
+ ngOnInit(): void {
+ if (this.codeBlockMaxHeightPx) {
+ const codeBlockMaxHeightStyle = `pre[class*="language-"] \n{
+ max-height: ${this.codeBlockMaxHeightPx}px;\n
+ }`;
+ this.additionalStyles.push(codeBlockMaxHeightStyle);
+ }
+ }
+
+ ngOnChanges(changes: SimpleChanges): void {
+ for (const propName of Object.keys(changes)) {
+ const change = changes[propName];
+ if (propName === 'data' && change.currentValue !== change.previousValue) {
+ this.parsedData = this.parseData(this.data);
+ }
+ }
+ }
+
+ onReady() {
+ const container = this.elementRef.nativeElement;
+ this.ready.emit(container);
+ }
+
+ private parseData(content: string | undefined): string {
+ let parsed = this.prefixResourceUrls(content || '');
+ parsed = this.resolveDocLinks(parsed);
+ parsed = replaceItemLinkPlaceholders(parsed);
+ parsed = this.resolveImages(parsed);
+ parsed = this.resolveVariables(parsed);
+ parsed = this.forceLinksOpenInNewTab(parsed);
+ return parsed;
+ }
+
+ // Ensure every link rendered through tb-markdown opens in a new tab.
+ // 1) For markdown links `[text](url)` — append the
+ // `{:target="_blank"}` suffix to the link TEXT (not the URL)
+ // so MarkedOptionsService.renderer.link, which checks
+ // `token.text.endsWith(targetBlankBlock)`, emits
+ // `target="_blank"` on the rendered . Skip links whose
+ // text already ends with the suffix and skip image syntax
+ // (``).
+ // 2) For raw HTML anchors authored in the markdown — add
+ // `target="_blank"` when no `target=` attribute is already
+ // present.
+ private forceLinksOpenInNewTab(content: string): string {
+ const TARGET_BLANK_BLOCK = '{:target="_blank"}';
+ content = content.replace(
+ /(?
+ text.endsWith(TARGET_BLANK_BLOCK) ? match : `[${text}${TARGET_BLANK_BLOCK}](${url})`
+ );
+ content = content.replace(
+ /]*)>/gi,
+ (match, attrs: string) =>
+ /\btarget\s*=/i.test(attrs) ? match : ``
+ );
+ return content;
+ }
+
+ private prefixResourceUrls(markdown: string): string {
+ const baseUrl = this.iotHubApiService.baseUrl;
+ return markdown.replace(/([("])(\/api\/resources\/[^)"]*)/g, `$1${baseUrl}$2`);
+ }
+
+ private resolveDocLinks(markdown: string): string {
+ if (this.item || this.packageInfo) {
+ const dd = this.item ? this.item.dataDescriptor : this.packageInfo;
+ return resolveDocLinkPlaceholders(
+ markdown,
+ this.item?.name || dd?.name || '',
+ { productURL: dd?.productURL, datasheetURL: dd?.datasheetURL },
+ { productPage: 'Product page', datasheet: 'Datasheet' }
+ );
+ } else {
+ return markdown;
+ }
+ }
+
+ private resolveImages(content: string): string {
+ if (this.imageMap) {
+ return content.replace(/!\[([^\]]*)]\(([^)]+)\)/g, (match, alt, path) => {
+ if (path.startsWith('data:') || path.startsWith('http')) {
+ return match;
+ }
+ const dataUri = this.imageMap.get(path);
+ return dataUri ? `` : match;
+ });
+ } else {
+ return content;
+ }
+ }
+
+ private resolveImage(uri: string): string {
+ if (this.imageMap && uri) {
+ if (uri.startsWith('data:') || uri.startsWith('http')) {
+ return uri;
+ }
+ const dataUri = this.imageMap.get(uri);
+ return dataUri ? dataUri : uri;
+ } else {
+ return uri;
+ }
+ }
+
+ private resolveVariables(content: string): string {
+ // Image gallery is handled first because its inner ${...} contents
+ // may include nested braces and span multiple lines, which the
+ // generic ${key} regex below cannot parse.
+ //
+ // Format: ${images.gallery({src: 'p1', alt: 'a1', caption: 'c1'}, {src: 'p2'}, ...)}
+ // Each image entry is a JS object literal with a required `src`
+ // and optional `alt` / `caption` string fields.
+ content = content.replace(/\$\{\s*images\.gallery\(([\s\S]*?)\)\s*}/g, (_match, inner: string) => {
+ const objects: string[] = inner.match(/\{[\s\S]*?}/g) || [];
+ const items = objects
+ .map((obj: string) => {
+ const src = (obj.match(/src\s*:\s*(['"])((?:(?!\1).)*)\1/) || [])[2] || '';
+ const alt = (obj.match(/alt\s*:\s*(['"])((?:(?!\1).)*)\1/) || [])[2] || '';
+ const caption = (obj.match(/caption\s*:\s*(['"])((?:(?!\1).)*)\1/) || [])[2] || '';
+ return { src: this.resolveImage(src), alt, caption };
+ })
+ .filter((item: { src?: string }) => !!item.src);
+ const images = items
+ .map(item => {
+ let galleryImageHtml = ``;
+ return galleryImageHtml;
+ })
+ .join('');
+ return ` = { note: 'info_outline', warn: 'warning_amber', error: 'error_outline' };
+ return `${icon} ${safeText}`;
+}
+
+export function escapeHtml(value: string): string {
+ return value.replace(/[&<>]/g, ch => ch === '&' ? '&' : ch === '<' ? '<' : '>');
+}
+
+export function escapeHtmlAttr(value: string): string {
+ return value.replace(/[&<>"']/g, ch => {
+ switch (ch) {
+ case '&': return '&';
+ case '<': return '<';
+ case '>': return '>';
+ case '"': return '"';
+ default: return ''';
+ }
+ });
+}
+
+// Inline-only tags + a small attribute whitelist that are safe to keep
+// in caption strings (or other small bits of user-authored HTML inside
+// generated markdown). Anything else is dropped — disallowed tags are
+// replaced by their text content and disallowed attributes are removed.
+const SAFE_INLINE_TAGS: ReadonlySet = new Set([
+ 'B', 'STRONG', 'I', 'EM', 'U', 'S', 'MARK',
+ 'SMALL', 'SUB', 'SUP', 'BR', 'CODE', 'SPAN'
+]);
+
+const SAFE_INLINE_ATTRS: ReadonlySet = new Set(['class', 'style']);
+
+export function sanitizeInlineHtml(value: string): string {
+ if (!value) {
+ return '';
+ }
+ const doc = new DOMParser().parseFromString(` {
+
+ constructor(
+ protected store: Store,
+ protected router: Router,
+ protected dialogRef: MatDialogRef
+ ) {
+ super(store, router, dialogRef);
+ }
+
+ close(): void {
+ this.dialogRef.close();
+ }
+
+ upgradeInstance(): void {
+ window.open('https://thingsboard.io/docs/pe/installation/upgrade-from-ce/', '_blank');
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-search.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-search.component.html
new file mode 100644
index 0000000000..5a74f045fe
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-search.component.html
@@ -0,0 +1,158 @@
+
+();
+
+ get searchPlaceholderKey(): string {
+ return this.creatorId ? 'iot-hub.search-published-items' : 'iot-hub.search';
+ }
+
+ resultGroups: SearchResultGroup[] = [];
+ totalElements = 0;
+ isLoading = false;
+ hasError = false;
+ private retryTimer: any = null;
+
+ pageSize = 15;
+ pageIndex = 0;
+ pageSizeOptions = [15, 30, 60];
+
+ sortOptions: SortOption[] = [
+ { value: 'totalInstallCount', label: 'iot-hub.sort-most-installed', direction: Direction.DESC },
+ { value: 'publishedTime', label: 'iot-hub.sort-newest', direction: Direction.DESC },
+ { value: 'name', label: 'iot-hub.sort-name', direction: Direction.ASC }
+ ];
+ selectedSortIndex = 0;
+
+ installedWidgets: IotHubInstalledItem[] = [];
+ installedSolutionTemplates: IotHubInstalledItem[] = [];
+ installedDeviceCounts: Record = {};
+ installedCalcFieldCounts: Record = {};
+ installedAlarmRuleCounts: Record = {};
+ installedRuleChainCounts: Record = {};
+
+ private searchSubject = new Subject();
+ private searchSubscription: Subscription;
+
+ constructor(
+ private router: Router,
+ private translate: TranslateService,
+ private iotHubApiService: IotHubApiService,
+ private iotHubActions: IotHubActionsService
+ ) {}
+
+ ngOnInit(): void {
+ this.loadInstalledItems();
+ this.searchSubscription = this.searchSubject.pipe(
+ debounceTime(300),
+ distinctUntilChanged()
+ ).subscribe(() => {
+ this.pageIndex = 0;
+ this.loadResults();
+ });
+ this.loadResults();
+ }
+
+ ngOnDestroy(): void {
+ this.searchSubscription?.unsubscribe();
+ }
+
+ onSearchInput(): void {
+ this.searchTextChange.emit(this.searchText);
+ this.searchSubject.next(this.searchText || '');
+ }
+
+ clearSearch(): void {
+ this.searchText = '';
+ this.searchTextChange.emit(this.searchText);
+ this.loadResults();
+ }
+
+ onSearchEnter(): void {
+ this.loadResults();
+ }
+
+ onSortChange(index: number): void {
+ this.selectedSortIndex = index;
+ this.pageIndex = 0;
+ this.loadResults();
+ }
+
+ // Pagination
+ get totalPages(): number {
+ return Math.ceil(this.totalElements / this.pageSize) || 0;
+ }
+
+ getPageNumbers(): number[] {
+ const total = this.totalPages;
+ if (total <= 5) {
+ return Array.from({length: total}, (_, i) => i);
+ }
+ const pages: number[] = [];
+ const start = Math.max(0, this.pageIndex - 2);
+ const end = Math.min(total - 1, start + 4);
+ if (end - start < 4) {
+ const adjustedStart = Math.max(0, end - 4);
+ for (let i = adjustedStart; i <= end; i++) {
+ pages.push(i);
+ }
+ } else {
+ for (let i = start; i <= end; i++) {
+ pages.push(i);
+ }
+ }
+ return pages;
+ }
+
+ goToPage(page: number): void {
+ if (page >= 0 && page < this.totalPages) {
+ this.pageIndex = page;
+ this.loadResults();
+ }
+ }
+
+ onPageSizeChange(size: number): void {
+ this.pageSize = size;
+ this.pageIndex = 0;
+ this.loadResults();
+ }
+
+ // Type helpers
+ isCompactType(type: ItemType): boolean {
+ return type === ItemType.CALCULATED_FIELD
+ || type === ItemType.ALARM_RULE
+ || type === ItemType.RULE_CHAIN;
+ }
+
+ getTypeLabel(type: ItemType): string {
+ const key = itemTypeTranslations.get(type);
+ return key ? this.translate.instant(key + '-plural') : type;
+ }
+
+ getTypeRoute(type: ItemType): string {
+ switch (type) {
+ case ItemType.WIDGET: return 'widgets';
+ case ItemType.SOLUTION_TEMPLATE: return 'solution-templates';
+ case ItemType.CALCULATED_FIELD: return 'calculated-fields';
+ case ItemType.ALARM_RULE: return 'alarm-rules';
+ case ItemType.RULE_CHAIN: return 'rule-chains';
+ case ItemType.DEVICE: return 'devices';
+ default: return 'widgets';
+ }
+ }
+
+ navigateToType(type: ItemType): void {
+ const search = this.searchText?.trim() || undefined;
+ void this.router.navigate(['/iot-hub', this.getTypeRoute(type)], { queryParams: { search } });
+ }
+
+ // Installed items
+ getInstalledItem(item: MpItemVersionView): IotHubInstalledItem | undefined {
+ switch (item.type) {
+ case ItemType.WIDGET:
+ return this.installedWidgets.find(i => i.itemId === item.itemId);
+ case ItemType.SOLUTION_TEMPLATE:
+ return this.installedSolutionTemplates.find(i => i.itemId === item.itemId);
+ default:
+ return undefined;
+ }
+ }
+
+ getInstalledItemsCount(item: MpItemVersionView): number {
+ switch (item.type) {
+ case ItemType.DEVICE:
+ return this.installedDeviceCounts[item.itemId] || 0;
+ case ItemType.CALCULATED_FIELD:
+ return this.installedCalcFieldCounts[item.itemId] || 0;
+ case ItemType.ALARM_RULE:
+ return this.installedAlarmRuleCounts[item.itemId] || 0;
+ case ItemType.RULE_CHAIN:
+ return this.installedRuleChainCounts[item.itemId] || 0;
+ default:
+ return 0;
+ }
+ }
+
+ // Dialogs
+ openItemDetail(item: MpItemVersionView): void {
+ this.iotHubActions.openItemDetail(item, this.getInstalledItem(item), this.getInstalledItemsCount(item), undefined, this.showCreator).subscribe(result => {
+ if (result === 'installed' || result === 'deleted' || result === 'updated') {
+ this.reloadInstalledItems();
+ }
+ });
+ }
+
+ installItem(item: MpItemVersionView): void {
+ this.iotHubActions.installItem(item).subscribe(result => {
+ if (result === 'installed') {
+ this.reloadInstalledItems();
+ }
+ });
+ }
+
+ updateItem(item: MpItemVersionView): void {
+ const installedItem = this.getInstalledItem(item);
+ if (!installedItem) { return; }
+ this.iotHubActions.updateItem(installedItem, item.version, item.id as string).subscribe(result => {
+ if (result === 'updated') {
+ this.reloadInstalledItems();
+ }
+ });
+ }
+
+ deleteInstalledItem(item: MpItemVersionView): void {
+ const installedItem = this.getInstalledItem(item);
+ if (!installedItem) { return; }
+ this.iotHubActions.deleteItem(installedItem).subscribe(() => {
+ this.reloadInstalledItems();
+ });
+ }
+
+ navigateToCreator(creatorId: string): void {
+ void this.router.navigate(['/iot-hub/creator', creatorId]);
+ }
+
+ retryLoadResults(): void {
+ if (this.retryTimer != null) {
+ clearTimeout(this.retryTimer);
+ }
+ this.isLoading = true;
+ this.retryTimer = setTimeout(() => {
+ this.retryTimer = null;
+ this.loadResults();
+ }, 350);
+ }
+
+ // Data loading
+ private loadResults(): void {
+ if (this.retryTimer != null) {
+ clearTimeout(this.retryTimer);
+ this.retryTimer = null;
+ }
+ this.isLoading = true;
+ // hasError stays as-is until the request actually succeeds
+ // (cleared in the `next` callback below).
+ this.fetchResults(this.searchText || '').subscribe({
+ next: result => {
+ this.applyResults(result.data, result.totalElements);
+ this.hasError = false;
+ },
+ error: () => {
+ this.isLoading = false;
+ this.hasError = true;
+ this.resultGroups = [];
+ this.totalElements = 0;
+ }
+ });
+ }
+
+ private fetchResults(text: string) {
+ const sort = this.sortOptions[this.selectedSortIndex];
+ const sortOrder: SortOrder = { property: sort.value, direction: sort.direction };
+ const pageLink = new PageLink(this.pageSize, this.pageIndex, text.trim() || null, sortOrder);
+ const query = new MpItemVersionQuery(pageLink, { creatorId: this.creatorId || undefined });
+ return this.iotHubApiService.getPublishedVersions(query, { ignoreLoading: true, ignoreErrors: true });
+ }
+
+ private applyResults(data: MpItemVersionView[], totalElements: number): void {
+ this.totalElements = totalElements;
+ this.resultGroups = this.groupResults(data);
+ this.isLoading = false;
+ }
+
+ private groupResults(items: MpItemVersionView[]): SearchResultGroup[] {
+ const groupMap = new Map();
+ for (const item of items) {
+ let list = groupMap.get(item.type);
+ if (!list) {
+ list = [];
+ groupMap.set(item.type, list);
+ }
+ list.push(item);
+ }
+ return TYPE_ORDER
+ .filter(type => groupMap.has(type))
+ .map(type => ({ type, items: groupMap.get(type) }));
+ }
+
+ private loadInstalledItems(): void {
+ const config = { ignoreLoading: true };
+ const pageLink = new PageLink(10000, 0);
+ forkJoin({
+ widgets: this.iotHubApiService.getInstalledItems(pageLink, ItemType.WIDGET, undefined, config),
+ solutionTemplates: this.iotHubApiService.getInstalledItems(pageLink, ItemType.SOLUTION_TEMPLATE, undefined, config),
+ deviceCounts: this.iotHubApiService.getInstalledItemCounts(ItemType.DEVICE, config),
+ calcFieldCounts: this.iotHubApiService.getInstalledItemCounts(ItemType.CALCULATED_FIELD, config),
+ alarmRuleCounts: this.iotHubApiService.getInstalledItemCounts(ItemType.ALARM_RULE, config),
+ ruleChainCounts: this.iotHubApiService.getInstalledItemCounts(ItemType.RULE_CHAIN, config)
+ }).subscribe(results => {
+ this.installedWidgets = results.widgets.data;
+ this.installedSolutionTemplates = results.solutionTemplates.data;
+ this.installedDeviceCounts = results.deviceCounts;
+ this.installedCalcFieldCounts = results.calcFieldCounts;
+ this.installedAlarmRuleCounts = results.alarmRuleCounts;
+ this.installedRuleChainCounts = results.ruleChainCounts;
+ });
+ }
+
+ private reloadInstalledItems(): void {
+ this.loadInstalledItems();
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-unpublished-warning-dialog.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-unpublished-warning-dialog.component.html
new file mode 100644
index 0000000000..2f14b5f99a
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-unpublished-warning-dialog.component.html
@@ -0,0 +1,32 @@
+
+ {
+
+ constructor(
+ protected store: Store,
+ protected router: Router,
+ protected dialogRef: MatDialogRef,
+ @Inject(MAT_DIALOG_DATA) public data: IotHubUnpublishedWarningDialogData
+ ) {
+ super(store, router, dialogRef);
+ }
+
+ confirm(): void {
+ this.dialogRef.close(true);
+ }
+
+ cancel(): void {
+ this.dialogRef.close(false);
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-update-dialog.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-update-dialog.component.html
new file mode 100644
index 0000000000..78e8fc3b66
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-update-dialog.component.html
@@ -0,0 +1,70 @@
+
+
+ @switch (state) {
+ @case ('confirm') {
+
+
+ }
+ @case ('updating') {
+
+
+ }
+ @case ('success') {
+
+ @if (entityDetailsUrl) {
+
+ }
+ }
+ @case ('error') {
+
+ }
+ }
+
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-update-dialog.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-update-dialog.component.ts
new file mode 100644
index 0000000000..6962073104
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-update-dialog.component.ts
@@ -0,0 +1,132 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { DialogComponent } from '@shared/components/dialog.component';
+import { ItemType, itemTypeTranslations } from '@shared/models/iot-hub/iot-hub-item.models';
+import {
+ getInstalledItemUrl,
+ SolutionTemplateInstalledItemDescriptor
+} from '@shared/models/iot-hub/iot-hub-installed-item.models';
+import { IotHubApiService } from '@core/http/iot-hub-api.service';
+import { DialogService } from '@core/services/dialog.service';
+import { TranslateService } from '@ngx-translate/core';
+import { SolutionInstallDialogComponent } from '@home/components/iot-hub/solution-install-dialog.component';
+
+export interface IotHubUpdateDialogData {
+ installedItemId: string;
+ itemName: string;
+ itemType: ItemType;
+ version: string;
+ versionId: string;
+}
+
+export type UpdateState = 'confirm' | 'updating' | 'success' | 'error';
+
+@Component({
+ selector: 'tb-iot-hub-update-dialog',
+ standalone: false,
+ templateUrl: './iot-hub-update-dialog.component.html',
+ styleUrls: ['./iot-hub-install-dialog.component.scss']
+})
+export class TbIotHubUpdateDialogComponent extends DialogComponent {
+
+ ItemType = ItemType;
+
+ typeTranslations = itemTypeTranslations;
+ state: UpdateState = 'confirm';
+ errorMessage = '';
+ entityDetailsUrl: string | null = null;
+
+ constructor(
+ protected store: Store,
+ protected router: Router,
+ protected dialogRef: MatDialogRef,
+ @Inject(MAT_DIALOG_DATA) public data: IotHubUpdateDialogData,
+ private dialog: MatDialog,
+ private dialogService: DialogService,
+ private translate: TranslateService,
+ private iotHubApiService: IotHubApiService
+ ) {
+ super(store, router, dialogRef);
+ }
+
+ getTypeLabel(): string {
+ const key = this.typeTranslations.get(this.data.itemType);
+ return key ? this.translate.instant(key) : '';
+ }
+
+ update(force = false): void {
+ this.state = 'updating';
+ this.iotHubApiService.updateItemVersion(this.data.installedItemId, this.data.versionId, { ignoreLoading: true }, force).subscribe({
+ next: (result) => {
+ if (result.success) {
+ if (result.descriptor?.type === 'SOLUTION_TEMPLATE') {
+ this.dialogRef.close('updated');
+ this.dialog.open(SolutionInstallDialogComponent, {
+ disableClose: true,
+ autoFocus: false,
+ panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
+ data: { descriptor: result.descriptor as SolutionTemplateInstalledItemDescriptor }
+ });
+ } else {
+ this.state = 'success';
+ this.entityDetailsUrl = getInstalledItemUrl(result.descriptor);
+ }
+ } else if (result.entityModified) {
+ this.state = 'confirm';
+ this.dialogService.confirm(
+ this.translate.instant('iot-hub.entity-modified-title'),
+ this.translate.instant('iot-hub.entity-modified-text', { type: this.getTypeLabel() }),
+ this.translate.instant('action.no'),
+ this.translate.instant('action.yes')
+ ).subscribe(confirmed => {
+ if (confirmed) {
+ this.update(true);
+ }
+ });
+ } else {
+ this.state = 'error';
+ this.errorMessage = result.errorMessage || this.translate.instant('iot-hub.update-error', { name: this.data.itemName });
+ }
+ },
+ error: (err) => {
+ this.state = 'error';
+ this.errorMessage = err?.error?.message || err?.message || this.translate.instant('iot-hub.update-error', { name: this.data.itemName });
+ }
+ });
+ }
+
+ openEntityDetails(): void {
+ if (this.entityDetailsUrl) {
+ this.dialogRef.close('updated');
+ void this.router.navigateByUrl(this.entityDetailsUrl);
+ }
+ }
+
+ close(): void {
+ this.dialogRef.close(this.state === 'success' ? 'updated' : false);
+ }
+
+ cancel(): void {
+ this.dialogRef.close(false);
+ }
+
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-upgrade-required-dialog.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-upgrade-required-dialog.component.html
new file mode 100644
index 0000000000..e1fce18133
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-upgrade-required-dialog.component.html
@@ -0,0 +1,43 @@
+
+ {
+
+ readonly minVersion: string;
+ readonly currentVersion: string;
+
+ constructor(
+ protected store: Store,
+ protected router: Router,
+ protected dialogRef: MatDialogRef,
+ @Inject(MAT_DIALOG_DATA) public data: IotHubUpgradeRequiredDialogData
+ ) {
+ super(store, router, dialogRef);
+ this.minVersion = `v${tbVersionIntToString(data.minTbVersion)}`;
+ this.currentVersion = `v${env.tbVersion}`;
+ }
+
+ close(): void {
+ this.dialogRef.close();
+ }
+
+ upgradeInstance(): void {
+ window.open('https://thingsboard.io/docs/installation/upgrade-instructions/', '_blank');
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-utils.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-utils.ts
new file mode 100644
index 0000000000..c5ea02e2d0
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-utils.ts
@@ -0,0 +1,69 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { FilterParamInfo } from '@shared/models/iot-hub/iot-hub-item.models';
+import { MpItemVersionView } from '@shared/models/iot-hub/iot-hub-version.models';
+import { IotHubApiService } from '@core/http/iot-hub-api.service';
+
+export const IOT_HUB_FILTER_GROUPING_THRESHOLD = 11;
+export const IOT_HUB_FILTER_POPULAR_LIMIT = 10;
+
+export interface IotHubFilterGroup {
+ label: string;
+ items: FilterParamInfo[];
+}
+
+export function filterIotHubItemsBySearch(items: FilterParamInfo[], search: string): FilterParamInfo[] {
+ const normalized = (search || '').toLowerCase();
+ if (!normalized) {
+ return items;
+ }
+ return items.filter(item => item.key.toLowerCase().includes(normalized));
+}
+
+export function groupIotHubFilterItems(items: FilterParamInfo[], search: string): IotHubFilterGroup[] {
+ const filtered = filterIotHubItemsBySearch(items, search);
+ if (items.length < IOT_HUB_FILTER_GROUPING_THRESHOLD) {
+ return [{ label: null, items: filtered }];
+ }
+ const topKeys = new Set(
+ [...items]
+ .sort((a, b) => b.totalInstallCount - a.totalInstallCount)
+ .slice(0, IOT_HUB_FILTER_POPULAR_LIMIT)
+ .map(i => i.key)
+ );
+ const popular = filtered.filter(i => topKeys.has(i.key));
+ const rest = filtered.filter(i => !topKeys.has(i.key));
+ const groups: IotHubFilterGroup[] = [];
+ if (popular.length) {
+ groups.push({ label: 'iot-hub.most-popular', items: popular });
+ }
+ if (rest.length) {
+ groups.push({ label: 'iot-hub.all', items: rest });
+ }
+ return groups;
+}
+
+export function resolveIotHubItemImageUrl(item: MpItemVersionView, api: IotHubApiService): string | null {
+ if (item.image) {
+ return api.resolveResourceUrl(item.image);
+ }
+ const resource = item.resources?.find(r => r.type === 'SCREENSHOT') || item.resources?.find(r => r.type === 'ICON');
+ if (resource) {
+ return api.resolveResourceUrl(`/api/resources/${resource.id}`);
+ }
+ return null;
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/pe-connectivity-method-prompt.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/pe-connectivity-method-prompt.component.html
new file mode 100644
index 0000000000..1c4b8e25b1
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/pe-connectivity-method-prompt.component.html
@@ -0,0 +1,38 @@
+
+ {
+
+ constructor(
+ protected store: Store,
+ protected router: Router,
+ protected dialogRef: MatDialogRef,
+ @Inject(MAT_DIALOG_DATA) public data: PeConnectivityMethodPromptData
+ ) {
+ super(store, router, dialogRef);
+ }
+
+ close(): void {
+ this.dialogRef.close();
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/solution-install-dialog.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/solution-install-dialog.component.html
new file mode 100644
index 0000000000..243ae759d3
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/solution-install-dialog.component.html
@@ -0,0 +1,47 @@
+
+,
+ private router: Router
+ ) {
+ this.details = replaceItemLinkPlaceholders(data.descriptor.details || '');
+ this.dashboardId = data.descriptor.dashboardId?.id || null;
+ this.instructions = !!data.instructions;
+ }
+
+ gotoMainDashboard(): void {
+ if (this.dashboardId) {
+ this.dialogRef.close();
+ this.router.navigateByUrl(`/dashboards/${this.dashboardId}`);
+ }
+ }
+
+ close(): void {
+ this.dialogRef.close();
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/external/ai-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/external/ai-config.component.html
index 3cf88a2463..4a12d06097 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/external/ai-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/external/ai-config.component.html
@@ -91,9 +91,15 @@
{{ 'rule-node-config.ai.response-format' | translate }}
+
+{{ 'iot-hub.remove-confirm-title' | translate:{ name: data.itemName } }}
+{{ (data.itemType === 'SOLUTION_TEMPLATE' ? 'iot-hub.remove-desc-solution-template' : 'iot-hub.remove-desc') | translate }}
+
+
+
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-delete-dialog.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-delete-dialog.component.scss
new file mode 100644
index 0000000000..bb7b7fe893
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-delete-dialog.component.scss
@@ -0,0 +1,33 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+
+.tb-iot-hub-delete-title {
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 24px;
+ letter-spacing: 0.1px;
+ color: rgba(0, 0, 0, 0.87);
+ margin: 0;
+}
+
+.tb-iot-hub-delete-desc {
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.2px;
+ color: rgba(0, 0, 0, 0.54);
+ margin: 0;
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-delete-dialog.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-delete-dialog.component.ts
new file mode 100644
index 0000000000..4353f1a9f6
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-delete-dialog.component.ts
@@ -0,0 +1,53 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { DialogComponent } from '@shared/components/dialog.component';
+
+export interface IotHubDeleteDialogData {
+ itemName: string;
+ itemType?: string;
+}
+
+@Component({
+ selector: 'tb-iot-hub-delete-dialog',
+ standalone: false,
+ templateUrl: './iot-hub-delete-dialog.component.html',
+ styleUrls: ['./iot-hub-delete-dialog.component.scss']
+})
+export class TbIotHubDeleteDialogComponent extends DialogComponent
+ @switch (state) {
+ @case ('confirm') {
+
+
+ }
+ }
+ @case ('confirm-overwrite') {
+
+{{ 'iot-hub.install-confirm-title' | translate:{ name: item.name } }}
+{{ 'iot-hub.install-desc' | translate }}
+ } + @case ('select-entity') { +{{ 'iot-hub.install-confirm-title' | translate:{ name: item.name } }}
+ @if (item.type === ItemType.RULE_CHAIN) { +{{ 'iot-hub.rule-chain-install-subtitle' | translate }}
+ + } @else { + @if (activeSelectEntityConfig?.promptKey) { + + } +{{ 'iot-hub.rule-chain-overwrite-title' | translate }}
+ + } + @case ('plan') { +{{ 'iot-hub.install-plan-title' | translate:{ name: item.name } }}
++ @if (planSummary.willInstall > 0) { + {{ 'iot-hub.install-plan-will-install' | translate:{ count: planSummary.willInstall } }} + } + @if (planSummary.alreadyInstalled > 0) { + {{ 'iot-hub.install-plan-will-update' | translate:{ count: planSummary.alreadyInstalled } }} + } +
+ @if (planSummary.missing > 0) { +{{ 'iot-hub.install-plan-missing-warning' | translate:{ count: planSummary.missing } }}
+ } +-
+ @for (entry of installPlan?.entries; track entry.itemId) {
+
-
+ + {{ entry.name || entry.itemId }} + @if (entry.type) { + {{ (typeTranslations.get(entry.type) || entry.type) | translate }} + } + @if (entry.version) { + v{{ entry.version }} + } ++ + @switch (entry.status) { + @case (PlanStatus.WILL_INSTALL) { {{ 'iot-hub.install-plan-status-will' | translate }} } + @case (PlanStatus.ALREADY_INSTALLED) { {{ 'iot-hub.install-plan-status-installed' | translate }} } + @case (PlanStatus.MISSING) { {{ 'iot-hub.install-plan-status-missing' | translate }} } + } + +
+ }
+
{{ 'iot-hub.install-confirm-title' | translate:{ name: item.name } }}
+{{ 'iot-hub.install-desc' | translate }}
+ } + @case ('success') { +{{ 'iot-hub.install-success-title' | translate }}
+{{ 'iot-hub.install-success-desc' | translate:{ name: item.name } }}
+ } + @case ('partial') { +{{ 'iot-hub.install-partial-title' | translate }}
+{{ 'iot-hub.install-partial-desc' | translate:{ name: item.name } }}
+-
+ @for (entry of missingEntries; track entry.itemId) {
+
- + {{ entry.name || entry.itemId }} + @if (entry.errorMessage) { + {{ entry.errorMessage }} + } + + } +
{{ 'iot-hub.install-error-title' | translate }}
+{{ 'iot-hub.install-error-message' | translate:{ name: item.name } }}
+ @if (item.type === ItemType.SOLUTION_TEMPLATE) { +
+ {{ errorMessage }}
+
+ }
+ }
+ }
+
+
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-dialog.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-dialog.component.scss
new file mode 100644
index 0000000000..d417ed0ec9
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-dialog.component.scss
@@ -0,0 +1,74 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+
+@import "../../../../../scss/constants";
+
+:host {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ min-height: 0;
+}
+
+.dlg-header {
+ border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+.dlg-title {
+ margin: 0;
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 24px;
+ letter-spacing: 0.1px;
+ color: rgba(0, 0, 0, 0.87);
+}
+
+:host-context(.mat-mdc-dialog-container) {
+ .mat-mdc-dialog-content {
+ display: flex;
+ flex-direction: column;
+ flex: 1 1 auto;
+ min-height: 0;
+ padding: 24px;
+ overflow: hidden;
+
+ tb-iot-hub-installed-items-table {
+ display: flex;
+ flex-direction: column;
+ flex: 1 1 auto;
+ min-height: 0;
+ width: 100%;
+ overflow: hidden;
+ }
+
+ @media #{$mat-gt-xs} {
+ height: 500px;
+ }
+
+ @media #{$mat-gt-sm} {
+ width: 700px;
+ }
+
+ @media #{$mat-gt-md} {
+ width: 800px;
+ }
+ }
+
+ .mat-mdc-dialog-actions {
+ border-top: 1px solid rgba(0, 0, 0, 0.12);
+ padding: 8px;
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-dialog.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-dialog.component.ts
new file mode 100644
index 0000000000..4c0527821c
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-dialog.component.ts
@@ -0,0 +1,52 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { DialogComponent } from '@shared/components/dialog.component';
+import { MpItemVersionView } from '@shared/models/iot-hub/iot-hub-version.models';
+
+export interface IotHubInstalledItemsDialogData {
+ item: MpItemVersionView;
+}
+
+@Component({
+ selector: 'tb-iot-hub-installed-items-dialog',
+ standalone: false,
+ templateUrl: './iot-hub-installed-items-dialog.component.html',
+ styleUrls: ['./iot-hub-installed-items-dialog.component.scss']
+})
+export class TbIotHubInstalledItemsDialogComponent extends DialogComponent
+
+ + {{ 'iot-hub.installed-items-for' | translate:{ name: item.name } }} +
+ +
+
+
+
+
+
+
+
+
+
+
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-table.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-table.component.scss
new file mode 100644
index 0000000000..400bb5778b
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-table.component.scss
@@ -0,0 +1,263 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+
+@import "../../../../../scss/constants";
+
+:host {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ min-height: 0;
+}
+
+// Table + paginator container — border
+.tb-installed-table-container {
+ border: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+.tb-installed-table-wrapper {
+ table {
+ width: 100%;
+ }
+
+ // Header cells — Design: 16px Medium, rgba(0,0,0,0.87), tracking 0.25
+ th.mat-mdc-header-cell {
+ font-size: 16px;
+ font-weight: 500;
+ line-height: 24px;
+ letter-spacing: 0.25px;
+ color: rgba(0, 0, 0, 0.87);
+ }
+
+ // Body cells — Design: 14px Regular, rgba(0,0,0,0.76), tracking 0.2
+ td.mat-mdc-cell {
+ font-size: 14px;
+ font-weight: 400;
+ letter-spacing: 0.2px;
+ color: rgba(0, 0, 0, 0.76);
+ }
+}
+
+
+// Column sizing
+.mat-column-itemName {
+ width: 50%;
+ min-width: 200px;
+ max-width: 50%;
+}
+
+.mat-column-itemType {
+ width: 50%;
+ min-width: 50%;
+ max-width: 50%;
+}
+
+.mat-column-version {
+ width: 80px;
+ min-width: 80px;
+ max-width: 80px;
+}
+
+.mat-column-createdTime {
+ width: 160px;
+ min-width: 160px;
+ max-width: 160px;
+}
+
+.mat-column-updates {
+ width: 250px;
+ min-width: 250px;
+ max-width: 250px;
+}
+
+.mat-column-actions {
+ width: 108px;
+ min-width: 108px;
+ max-width: 108px;
+}
+
+::ng-deep .mat-mdc-paginator-range-label {
+ white-space: nowrap;
+}
+
+// Nowrap columns
+.mat-column-itemType,
+.mat-column-createdTime,
+.mat-column-updates {
+ white-space: nowrap;
+}
+
+// Type chip — Design: pill, h-32, rounded-16, px-12 py-6, gap-4, bg at 6% opacity
+.tb-installed-type {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ height: 32px;
+ padding: 6px 12px;
+ border-radius: 16px;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.2px;
+}
+
+.tb-installed-type-icon {
+ font-size: 18px;
+ width: 18px;
+ height: 18px;
+ color: inherit !important;
+ --mat-icon-color: currentColor;
+}
+
+// Colors mirror itemTypeChipColors from the iot-hub mp-item.models.
+.tb-type-device { color: #3d4ca6; background: rgba(61, 76, 166, 0.06); }
+.tb-type-solution-template { color: #2c6cb4; background: rgba(44, 108, 180, 0.06); }
+.tb-type-widget { color: #20733d; background: rgba(46, 166, 88, 0.06); }
+.tb-type-calc-field { color: #3db5e0; background: rgba(61, 181, 224, 0.06); }
+.tb-type-alarm-rule { color: #d7702f; background: rgba(215, 112, 47, 0.06); }
+.tb-type-rule-chain { color: #aa5be3; background: rgba(170, 91, 227, 0.06); }
+.tb-type-dashboard { color: #607d8b; background: rgba(96, 125, 139, 0.06); }
+
+// "vX.X.X Available" button — Design: border rgba(0,0,0,0.12), rounded-4, px-12 py-6, gap-8
+.tb-installed-version-btn {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ letter-spacing: 0.25px;
+ color: rgba(0, 0, 0, 0.76);
+ background: none;
+ border: 1px solid rgba(0, 0, 0, 0.12);
+ border-radius: 4px;
+ padding: 6px 12px;
+ cursor: pointer;
+ font-family: inherit;
+
+ mat-icon {
+ font-size: 18px;
+ width: 18px;
+ height: 18px;
+ color: inherit !important;
+ --mat-icon-color: currentColor;
+ }
+
+ &:hover {
+ background: rgba(0, 0, 0, 0.04);
+ }
+}
+
+// "Update" button — Design: same height as available btn, border matches text color
+.tb-installed-update-btn.mat-mdc-outlined-button {
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ letter-spacing: 0.25px;
+ padding: 6px 12px;
+ height: auto;
+ --mat-button-outlined-outline-color: var(--mat-button-outlined-label-text-color);
+}
+
+// "Up to date" — Design: 14px Medium, #198038, gap-8, py-6
+.tb-installed-up-to-date {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ letter-spacing: 0.25px;
+ color: #198038;
+ padding: 6px 0;
+
+ mat-icon {
+ font-size: 18px;
+ width: 18px;
+ height: 18px;
+ color: inherit !important;
+ --mat-icon-color: currentColor;
+ }
+}
+
+// Actions column — icon-button tweaks
+.tb-installed-actions {
+ .mat-mdc-icon-button {
+ width: 36px;
+ height: 36px;
+ padding: 6px;
+ --mdc-icon-button-state-layer-size: 36px;
+ --mdc-icon-button-icon-color: rgba(0, 0, 0, 0.54);
+ color: rgba(0, 0, 0, 0.54);
+ }
+}
+
+// Empty state — mirrors the browse component's tb-iot-hub-empty-state
+.tb-iot-hub-empty-state {
+ .tb-no-data-bg {
+ flex: auto;
+ height: 100px;
+ }
+
+ h3 {
+ font-size: 18px;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.87);
+ margin: 16px 0 8px;
+ }
+
+ p {
+ font-size: 14px;
+ color: rgba(0, 0, 0, 0.54);
+ margin: 0 0 24px;
+ }
+}
+
+:host(:not(.tb-installed-with-version)) {
+ @media #{$mat-lt-lg} {
+ .mat-column-actions {
+ width: 36px;
+ min-width: 36px;
+ max-width: 36px;
+ }
+ }
+}
+
+:host(.tb-installed-with-version) {
+ .mat-column-version {
+ width: 160px;
+ min-width: 0;
+ max-width: 160px;
+ }
+
+ .mat-column-createdTime {
+ width: 200px;
+ min-width: 0;
+ max-width: 200px;
+ }
+
+ .mat-column-updates {
+ min-width: 0;
+ }
+
+ @media #{$mat-lt-md} {
+ .mat-column-actions {
+ width: 36px;
+ min-width: 36px;
+ max-width: 36px;
+ }
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-table.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-table.component.ts
new file mode 100644
index 0000000000..bb5e1ecd7a
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-table.component.ts
@@ -0,0 +1,279 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import {
+ AfterViewInit,
+ ChangeDetectorRef,
+ Component,
+ ElementRef,
+ EventEmitter,
+ HostBinding,
+ Input,
+ NgZone,
+ OnChanges,
+ OnDestroy,
+ OnInit,
+ Output,
+ SimpleChanges,
+ ViewChild
+} from '@angular/core';
+import { Router } from '@angular/router';
+import { MatSort } from '@angular/material/sort';
+import { MatPaginator } from '@angular/material/paginator';
+import { IotHubApiService } from '@core/http/iot-hub-api.service';
+import { TranslateService } from '@ngx-translate/core';
+import { switchMap } from 'rxjs/operators';
+import { PageLink } from '@shared/models/page/page-link';
+import { Direction, SortOrder } from '@shared/models/page/sort-order';
+import {
+ DeviceInstalledItemDescriptor,
+ getInstalledItemUrl,
+ IotHubInstalledItem,
+ ItemPublishedVersionInfo
+} from '@shared/models/iot-hub/iot-hub-installed-item.models';
+import { MpItemVersionView } from '@shared/models/iot-hub/iot-hub-version.models';
+import { getItemTypeIcon, ItemType, itemTypeTranslations } from '@shared/models/iot-hub/iot-hub-item.models';
+import { IotHubActionsService } from '@home/components/iot-hub/iot-hub-actions.service';
+
+@Component({
+ selector: 'tb-iot-hub-installed-items-table',
+ standalone: false,
+ templateUrl: './iot-hub-installed-items-table.component.html',
+ styleUrls: ['./iot-hub-installed-items-table.component.scss']
+})
+export class TbIotHubInstalledItemsTableComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
+
+ @Input() textSearch = '';
+ @Input() typeFilters: string[] = [];
+ @Input() itemVersion: MpItemVersionView;
+
+ @Output() clearFilters = new EventEmitter
+
+
+
+
+ @if (isLoading) {
+
+
+
+ | {{ 'iot-hub.item-name' | translate }} | +{{ item.itemName }} | +{{ 'iot-hub.item-type' | translate }} | +
+
+ |
+ {{ 'iot-hub.item-version' | translate }} | +{{ item.version }} | +{{ 'iot-hub.installed-date' | translate }} | +{{ item.createdTime | date:'MMM d, y, h:mm a' }} | +@if (updatesChecked) { {{ 'iot-hub.updates' | translate }} } | +
+ @if (updatesChecked) {
+ @if (getPublishedVersionInfo(item); as pubInfo) {
+ @if (pubInfo.publishedVersionId !== item.itemVersionId) {
+
+ @if (!itemVersion) {
+
+ }
+
+
+ } @else {
+
+ |
+ + + + | +
+
+
+ @if (!itemVersion || item.itemType === 'DEVICE') {
+
+ }
+
+
+
+
+
+
+
+ |
+
|---|
+
+ }
+
+ @if (!isLoading && dataSource.length === 0) {
+
+
+
+ }
+ {{ 'iot-hub.no-installed-items' | translate }}
+{{ 'iot-hub.no-installed-items-text' | translate }}
+ @if (hasActiveFilters()) { + + } +
+
+ check {{ 'iot-hub.installed' | translate }}
+ } @else {
+
+ }
+ } @else if (isInstalled()) {
+ @if (isSameVersion()) {
+ check {{ 'iot-hub.installed' | translate }}
+ @if (hasInstallGuide()) {
+
+ }
+
+ } @else {
+
+ @if (hasInstallGuide()) {
+
+ }
+
+ }
+ } @else {
+
+ }
+
+} @else {
+
+
+ @if (showSubtype && getSubtypeLabel(); as subtypeLabel) {
+ {{ subtypeLabel }}
+ }
+
+ @if (mode === 'add') {
+ @if (isInstalled()) {
+ {{ item.name }}
+ +
+
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.scss
new file mode 100644
index 0000000000..71f3ea051d
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.scss
@@ -0,0 +1,403 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+
+@import "../../../../../scss/constants";
+
+:host {
+ display: block;
+ height: 100%;
+ min-width: 0;
+}
+
+// Card — Design: white bg, border rgba(0,0,0,0.12), rounded-8, overflow-clip, flex-col, gap-16, pb-16
+.tb-iot-hub-item-card {
+ border: 1px solid rgba(0, 0, 0, 0.12);
+ border-radius: 8px;
+ overflow: hidden;
+ cursor: pointer;
+ transition: box-shadow 0.2s, transform 0.2s;
+ background: white;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ &:hover {
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+ transform: translateY(-2px);
+ }
+
+}
+
+// Preview area — Design: aspect ~305:172, bg rgba(0,0,0,0.04), overflow-clip, p-12, dot pattern bg
+.tb-iot-hub-card-preview {
+ aspect-ratio: 305 / 172;
+ background: radial-gradient(circle, rgba(0, 0, 0, 0.06) 1px, transparent 1px) 0 0 / 20px 20px rgba(0, 0, 0, 0.04);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ overflow: hidden;
+ padding: 12px;
+}
+
+.tb-iot-hub-preview-image {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+}
+
+.tb-iot-hub-preview-placeholder {
+ width: 62px;
+ height: 62px;
+ border-radius: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: rgba(0, 0, 0, 0.06);
+
+ tb-icon {
+ font-size: 36px;
+ width: 36px;
+ height: 36px;
+ color: rgba(0, 0, 0, 0.38);
+ }
+}
+
+.tb-iot-hub-pe-badge {
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ background: rgba(0, 0, 0, 0.6);
+ color: white;
+ padding: 2px 6px;
+ border-radius: 4px;
+ font-size: 11px;
+ font-weight: 600;
+}
+
+// Compact card (CF / RC) — Design: horizontal flex, gap-16, p-16, rounded-8
+.tb-iot-hub-card-compact {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ padding: 16px;
+ background: white;
+ border: 1px solid rgba(0, 0, 0, 0.12);
+ border-radius: 8px;
+ cursor: pointer;
+ height: 100%;
+ transition: box-shadow 0.2s, transform 0.2s;
+
+ &:hover {
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+ transform: translateY(-2px);
+ }
+}
+
+// Compact icon — Design: 72x72, rounded-6, colored bg, white icon 36px centered
+.tb-iot-hub-compact-icon {
+ width: 72px;
+ height: 72px;
+ border-radius: 6px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+
+ tb-icon {
+ font-size: 36px;
+ width: 36px;
+ height: 36px;
+ color: #fff;
+ }
+}
+
+// Compact content — Design: flex-1, flex-col, gap-8
+.tb-iot-hub-compact-content {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+// Compact name — Design: 16px Medium, line-height 24, tracking 0.25, ellipsis
+.tb-iot-hub-compact-name {
+ font-size: 16px;
+ font-weight: 500;
+ line-height: 24px;
+ letter-spacing: 0.25px;
+ color: rgba(0, 0, 0, 0.87);
+ margin: 0;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+// Compact meta row — Design: flex row, gap-8, items-center
+.tb-iot-hub-compact-meta {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ font-size: 12px;
+ line-height: 16px;
+ letter-spacing: 0.25px;
+ color: rgba(0, 0, 0, 0.54);
+}
+
+.tb-iot-hub-compact-author-icon {
+ font-size: 16px;
+ width: 16px;
+ height: 16px;
+ flex-shrink: 0;
+}
+
+.tb-iot-hub-verified-icon {
+ color: #00695c;
+}
+
+.tb-iot-hub-compact-creator {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ &.clickable {
+ cursor: pointer;
+
+ &:hover {
+ color: $tb-primary-color;
+ text-decoration: underline;
+ }
+ }
+}
+
+.tb-iot-hub-compact-dot {
+ margin: 0 4px;
+ flex-shrink: 0;
+}
+
+.tb-iot-hub-compact-download-icon {
+ font-size: 12px;
+ width: 12px;
+ height: 12px;
+ flex-shrink: 0;
+}
+
+.tb-iot-hub-compact-count {
+ font-weight: 500;
+ text-transform: uppercase;
+}
+
+// Subtype label — Design: 12px Medium uppercase, rgba(0,0,0,0.54), tracking 0.25
+.tb-iot-hub-card-subtype {
+ font-size: 12px;
+ font-weight: 500;
+ line-height: 16px;
+ letter-spacing: 0.25px;
+ text-transform: uppercase;
+ color: rgba(0, 0, 0, 0.54);
+}
+
+// Name — Design: 16px Medium, line-height 24, tracking 0.25, ellipsis
+.tb-iot-hub-card-name {
+ font-size: 16px;
+ font-weight: 500;
+ line-height: 24px;
+ letter-spacing: 0.25px;
+ margin: 0;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: rgba(0, 0, 0, 0.87);
+}
+
+
+// Footer — Design: flex, justify-between, no border-top, inline with content
+.tb-iot-hub-card-footer {
+ display: flex;
+ align-items: center;
+ font-size: 12px;
+ line-height: 16px;
+ letter-spacing: 0.25px;
+ color: rgba(0, 0, 0, 0.54);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-top: auto;
+
+ // Author icon — Design: person icon, 16px
+ .tb-iot-hub-card-author-icon {
+ font-size: 16px;
+ width: 16px;
+ height: 16px;
+ flex-shrink: 0;
+ margin-right: 4px;
+ }
+
+ .tb-iot-hub-card-creator {
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ &.clickable {
+ cursor: pointer;
+
+ &:hover {
+ color: $tb-primary-color;
+ text-decoration: underline;
+ }
+ }
+ }
+
+ // Dot separator — Design: 3px circle, rgba(0,0,0,0.38)
+ .tb-iot-hub-card-dot {
+ margin: 0 8px;
+ flex-shrink: 0;
+ }
+
+ .tb-iot-hub-card-stats {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-left: auto;
+ flex-shrink: 0;
+ }
+
+ // Download stat — Design: download icon 12px, count 12px Medium uppercase
+ .tb-iot-hub-card-stat {
+ display: flex;
+ align-items: center;
+ gap: 2px;
+ font-size: 12px;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.54);
+ text-transform: uppercase;
+ margin-right: 8px;
+
+ tb-icon {
+ font-size: 12px;
+ width: 12px;
+ height: 12px;
+ }
+ }
+
+}
+
+// Install button — Design: border rgba(0,0,0,0.12), rounded-4, px-16 py-6, text #00695c 14px Medium
+.tb-iot-hub-card-install-btn {
+ padding: 6px 16px;
+ border-radius: 4px;
+ border: 1px solid rgba(0, 0, 0, 0.12);
+ background: transparent;
+ color: $tb-primary-color;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ letter-spacing: 0.25px;
+ cursor: pointer;
+ white-space: nowrap;
+ flex-shrink: 0;
+ transition: background 0.15s;
+
+ &:hover {
+ background: rgba($tb-primary-color, 0.04);
+ }
+}
+
+// Installed chip — Design: pill, bg rgba(25,128,56,0.06), check 18px + "Installed" 14px Regular, #198038
+.tb-iot-hub-card-installed-chip {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ height: 32px;
+ padding: 6px 12px 6px 8px;
+ border-radius: 16px;
+ background: rgba(25, 128, 56, 0.06);
+ color: #198038;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 20px;
+ white-space: nowrap;
+ flex-shrink: 0;
+
+ tb-icon {
+ font-size: 18px;
+ width: 18px;
+ height: 18px;
+ }
+}
+
+%tb-iot-hub-card-icon-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ padding: 4px;
+ border: none;
+ background: none;
+ cursor: pointer;
+ flex-shrink: 0;
+ border-radius: 50%;
+ transition: background 0.15s;
+
+ &:hover {
+ background: rgba(0, 0, 0, 0.04);
+ }
+}
+
+// Guide icon button
+.tb-iot-hub-card-guide-btn {
+ @extend %tb-iot-hub-card-icon-btn;
+
+ tb-icon {
+ font-size: 20px;
+ width: 20px;
+ height: 20px;
+ color: rgba(0, 0, 0, 0.54);
+ }
+}
+
+// Remove icon button — Design: trash-can-outline 24px, rgba(0,0,0,0.54)
+.tb-iot-hub-card-remove-btn {
+ @extend %tb-iot-hub-card-icon-btn;
+
+ tb-icon {
+ font-size: 24px;
+ width: 24px;
+ height: 24px;
+ color: rgba(0, 0, 0, 0.54);
+ }
+}
+
+.tb-iot-hub-card-update-btn {
+ padding: 6px 16px;
+ border-radius: 4px;
+ border: 1px solid #f57c00;
+ background: transparent;
+ color: #f57c00;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ cursor: pointer;
+ white-space: nowrap;
+ flex-shrink: 0;
+ transition: background 0.15s;
+
+ &:hover {
+ background: rgba(245, 124, 0, 0.04);
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.ts
new file mode 100644
index 0000000000..2d9c13d8d7
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.ts
@@ -0,0 +1,159 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { MpItemVersionView, cfTypeTranslations, cfTypeIcons, ruleChainTypeTranslations, widgetTypeTranslations } from '@shared/models/iot-hub/iot-hub-version.models';
+import { getItemTypeIcon, ItemType } from '@shared/models/iot-hub/iot-hub-item.models';
+import { IotHubInstalledItem } from '@shared/models/iot-hub/iot-hub-installed-item.models';
+import { TranslateService } from '@ngx-translate/core';
+import { IotHubApiService } from '@core/http/iot-hub-api.service';
+
+@Component({
+ selector: 'tb-iot-hub-item-card',
+ standalone: false,
+ templateUrl: './iot-hub-item-card.component.html',
+ styleUrls: ['./iot-hub-item-card.component.scss']
+})
+export class TbIotHubItemCardComponent {
+
+ readonly ItemType = ItemType;
+
+ @Input() item: MpItemVersionView;
+ @Input() installedItem: IotHubInstalledItem;
+ @Input() installedItemsCount = 0;
+ @Input() showCreator = true;
+ @Input() showTypeChip = true;
+ @Input() showSubtype = false;
+ @Input() mode: 'default' | 'add' = 'default';
+ @Output() cardClick = new EventEmitter
+ @if (getPreviewUrl(); as previewUrl) {
+ ![]()
+ } @else {
+
+
+ {{ getPlaceholderIcon() }}
+
+ }
+
+ @if (showSubtype && getSubtypeLabel(); as subtypeLabel) {
+ {{ subtypeLabel }}
+ }
+
+ {{ item.name }}
+ +
+
+
+
+
+ @if (isCompactLayout()) {
+
+ }
+
+
+
+
+
+
+ {{ item.name }}
+
+
+
+ {{ getTypeIcon() }}
+ {{ typeTranslations.get(item.type) | translate }}
+
+
+
+ download
+ {{ item.totalInstallCount | shortNumber }} {{ 'iot-hub.installs' | translate }}
+
+
+
+ update
+ v {{ item.version }}
+
+ @if (preview) {
+
+
+ warning
+ {{ 'iot-hub.unpublished-preview' | translate }}
+
+ }
+ @if (item.publishedTime) {
+
+
+ today
+ {{ item.publishedTime | date:'mediumDate' }}
+
+ }
+
+
+ @if (isInstalled()) {
+ @if (hasUpdate()) {
+
+ } @else {
+
+ check
+ {{ 'iot-hub.installed' | translate }} v{{ installedItem.version }}
+
+ }
+ }
+
+
+
+
+
+
+
+
+
+ @if (isCompactLayout()) {
+
+
+
+
+
+
+ } @else {
+
+
+ @if (item.description) {
+
+
+
+ }
+
+
+ }
+
+ @if (item.type === ItemType.SOLUTION_TEMPLATE && carouselImages.length > 1) {
+ ![]()
+ } @else {
+
+
+
+
+ @for (imageUrl of carouselImages; track imageUrl) {
+
+ ![]()
+
+ }
+
+
+
+ } @else {
+ @if (getPreviewUrl(); as url) {
+
+
+
+
+ @for (img of carouselImages; track img; let i = $index) {
+
+ }
+
+
+
+ {{ getTypeIcon() }}
+
+ }
+ }
+
+
+
+ @if (item.description) {
+
+
+
+ }
+
+
+
+
+
+ @if (item.type === ItemType.RULE_CHAIN && getNodes().length) {
+
+ @if (showCreator) {
+
+
+
+
+
+ }
+ @if (getSubtypeLabel(); as subtypeLabel) {
+
+ }
+ @if (item.type === ItemType.DEVICE) {
+ @if (item.dataDescriptor?.hardwareType) {
+
+ }
+ @if (item.dataDescriptor?.connectivity?.length) {
+
+ }
+ } @else {
+ @if (item.categories?.length) {
+
+ }
+ }
+ @if (item.useCases?.length) {
+
+ }
+ @if ((isInstalled() || installedItemsCount > 0) && mode !== 'add') {
+
+ }
+ @if (hasDetails()) {
+
+ }
+
+
+
+ @if (getCreatorAvatarUrl(); as avatarUrl) {
+ ![]()
+ } @else {
+ person
+ }
+ @if (item.creatorVerified) {
+ verified
+ }
+
+
+
+ @for (node of getNodes(); track node.name) {
+ {{ node.name }}
+ }
+
+
+ }
+
+
+ @if (readmeContent || shouldShowChangelog()) {
+
+ @if (readmeContent) {
+
+ }
+ {{ 'iot-hub.changelog' | translate }}
+
+ {{ 'iot-hub.details' | translate }}
+
+
+ @if (getSubtypeLabel(); as subtypeLabel) {
+
+ }
+ @if (item.type === ItemType.DEVICE) {
+ @if (item.dataDescriptor?.hardwareType) {
+
+ }
+ @if (item.dataDescriptor?.connectivity?.length) {
+
+ }
+ } @else {
+ @if (item.categories?.length) {
+
+ }
+ }
+ @if (item.useCases?.length) {
+
+ }
+
+
+
+
+ }
+ @case ('loaded') {
+
+ @if (isCompact()) {
+
+
+
+
+
+ {{ getCompactIcon() }}
+
+ } @else {
+
+ @if (getImageUrl(); as imgUrl) {
+ ![]()
+ } @else {
+ {{ getTypeIcon() }}
+ }
+
+ }
+
+ {{ item.name }}
+
+
+
+ }
+ @case ('unavailable') {
+
+
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-link-card/iot-hub-item-link-card.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-link-card/iot-hub-item-link-card.component.scss
new file mode 100644
index 0000000000..cdf4005199
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-link-card/iot-hub-item-link-card.component.scss
@@ -0,0 +1,168 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+
+:host {
+ display: block;
+ margin: 12px 0;
+}
+
+.tb-iot-hub-item-link-card {
+ display: inline-flex;
+ align-items: center;
+ gap: 12px;
+ width: 360px;
+ max-width: 100%;
+ padding: 8px 12px;
+ border: 1px solid rgba(0, 0, 0, 0.08);
+ border-radius: 8px;
+ background: #fff;
+ text-decoration: none;
+ color: inherit;
+ transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
+
+ &:hover:not(.tb-iot-hub-item-link-card--unavailable):not(.tb-iot-hub-item-link-card--skeleton) {
+ background: rgba(4, 138, 211, 0.04);
+ border-color: rgba(4, 138, 211, 0.32);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+ .tb-iot-hub-item-link-name, .tb-iot-hub-item-link-author {
+ text-decoration: underline;
+ }
+ }
+
+ &--unavailable {
+ opacity: 0.6;
+ cursor: default;
+ }
+
+ &--skeleton {
+ cursor: default;
+ }
+}
+
+.tb-iot-hub-item-link-thumb {
+ flex-shrink: 0;
+ width: 99px;
+ height: 56px;
+ border-radius: 4px;
+ border: 1px solid rgba(0, 0, 0, 0.12);
+ background: rgba(0, 0, 0, 0.04);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ display: block;
+ }
+
+ &--compact {
+ width: 56px;
+ height: 56px;
+ border: none;
+ border-radius: 4.667px;
+ color: #fff;
+ }
+
+ &--unavailable {
+ width: 56px;
+ height: 56px;
+ border: none;
+ color: rgba(0, 0, 0, 0.45);
+ }
+}
+
+.tb-iot-hub-item-link-thumb-icon {
+ font-size: 28px;
+ width: 28px;
+ height: 28px;
+ line-height: 28px;
+ color: #fff;
+}
+
+.tb-iot-hub-item-link-thumb-fallback {
+ font-size: 28px;
+ width: 28px;
+ height: 28px;
+ color: rgba(0, 0, 0, 0.45);
+}
+
+.tb-iot-hub-item-link-text {
+ display: flex;
+ flex-direction: column;
+ min-width: 0;
+ gap: 2px;
+}
+
+.tb-iot-hub-item-link-name {
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 1.3;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.tb-iot-hub-item-link-author {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ font-size: 12px;
+ color: rgba(0, 0, 0, 0.6);
+ line-height: 1.3;
+
+ mat-icon {
+ font-size: 14px;
+ width: 14px;
+ height: 14px;
+ }
+
+ // Verified-creator accent — matches the item card chip color.
+ .tb-iot-hub-item-link-verified-icon {
+ color: #00695c;
+ }
+}
+
+.tb-iot-hub-item-link-skeleton-block,
+.tb-iot-hub-item-link-skeleton-line {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 0, 0, 0.06) 0%,
+ rgba(0, 0, 0, 0.12) 50%,
+ rgba(0, 0, 0, 0.06) 100%
+ );
+ background-size: 200% 100%;
+ animation: tb-iot-hub-item-link-shimmer 1.4s ease-in-out infinite;
+ border-radius: 4px;
+}
+
+.tb-iot-hub-item-link-skeleton-line {
+ display: block;
+ height: 12px;
+ width: 180px;
+ margin: 4px 0;
+
+ &--short {
+ width: 96px;
+ }
+}
+
+@keyframes tb-iot-hub-item-link-shimmer {
+ 0% { background-position: 200% 0; }
+ 100% { background-position: -200% 0; }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-link-card/iot-hub-item-link-card.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-link-card/iot-hub-item-link-card.component.ts
new file mode 100644
index 0000000000..743f02bea4
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-link-card/iot-hub-item-link-card.component.ts
@@ -0,0 +1,88 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { Component, Input, OnInit } from '@angular/core';
+import { IotHubApiService } from '@core/http/iot-hub-api.service';
+import { MpItemVersionView } from '@shared/models/iot-hub/iot-hub-version.models';
+import { getItemTypeIcon, ItemType } from '@shared/models/iot-hub/iot-hub-item.models';
+
+type CardState = 'loading' | 'loaded' | 'unavailable';
+
+const COMPACT_TYPES: ReadonlySet
+ link_off
+
+
+ {{ 'iot-hub.item-link-unavailable' | translate }}
+
+
-
- {{ 'widget.' + type.type | translate }}
-
-
+${images}
`;
+ });
+
+ return content.replace(/\$\{([^}]+)}/g, (_match, key) => {
+ // Callout boxes: ${note(...)}, ${warn(...)}, ${error(...)}
+ const calloutMatch = key.match(/^(note|warn|error)\((.+)\)$/s);
+ if (calloutMatch) {
+ const type = calloutMatch[1];
+ const text = calloutMatch[2];
+ const icons: Record${icons[type]}${text}
`;
+ }
+
+ // Special variables
+ const res = this.onResolveVariable(key);
+ if (res) {
+ return res;
+ }
+ return '${' + key + '}';
+ });
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-markdown.utils.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-markdown.utils.ts
new file mode 100644
index 0000000000..6db27ce352
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-markdown.utils.ts
@@ -0,0 +1,124 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+export const ITEM_LINK_PLACEHOLDER_REGEX =
+ /\$\{item-link:([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12})}/g;
+
+export function itemLinkCardTag(itemId: string): string {
+ return `${value}
`, 'text/html');
+ const root = doc.body.firstElementChild as HTMLElement | null;
+ if (!root) {
+ return '';
+ }
+ const sanitize = (parent: Element): void => {
+ const children = Array.from(parent.childNodes);
+ for (const node of children) {
+ if (node.nodeType !== Node.ELEMENT_NODE) {
+ continue;
+ }
+ const el = node as Element;
+ if (!SAFE_INLINE_TAGS.has(el.tagName)) {
+ // Replace disallowed elements with their plain text content.
+ parent.replaceChild(doc.createTextNode(el.textContent || ''), el);
+ continue;
+ }
+ for (const attr of Array.from(el.attributes)) {
+ if (!SAFE_INLINE_ATTRS.has(attr.name)) {
+ el.removeAttribute(attr.name);
+ continue;
+ }
+ if (attr.name === 'style' && /(expression\s*\(|javascript:|url\s*\()/i.test(attr.value)) {
+ el.removeAttribute(attr.name);
+ }
+ }
+ sanitize(el);
+ }
+ };
+ sanitize(root);
+ return root.innerHTML;
+}
+
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-pe-required-dialog.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-pe-required-dialog.component.html
new file mode 100644
index 0000000000..57e98e4cbb
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-pe-required-dialog.component.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-pe-required-dialog.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-pe-required-dialog.component.scss
new file mode 100644
index 0000000000..8e5f0ad2e6
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-pe-required-dialog.component.scss
@@ -0,0 +1,77 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+
+@import "../../../../../scss/constants";
+
+:host {
+ display: block;
+ width: 500px;
+ max-width: 100%;
+}
+
+.tb-iot-hub-pe-required {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ gap: 20px;
+ padding: 40px;
+ background: white;
+ border-radius: 8px;
+}
+
+.tb-iot-hub-pe-required-close {
+ position: absolute;
+ top: 8px;
+ right: 8px;
+}
+
+// SVG illustration applied as a mask so the silhouette is filled
+// with $tb-primary-color. PE builds inherit their own primary value
+// without re-exporting the asset.
+.tb-iot-hub-pe-required-icon {
+ display: block;
+ width: 100px;
+ height: 100px;
+ background-color: $tb-primary-color;
+ -webkit-mask: url('/assets/iot-hub/upgrade-required.svg') no-repeat center / contain;
+ mask: url('/assets/iot-hub/upgrade-required.svg') no-repeat center / contain;
+}
+
+.tb-iot-hub-pe-required-title {
+ font-size: 24px;
+ font-weight: 500;
+ line-height: 32px;
+ letter-spacing: 0.15px;
+ color: rgba(0, 0, 0, 0.87);
+ margin: 0;
+}
+
+.tb-iot-hub-pe-required-message {
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0.25px;
+ color: rgba(0, 0, 0, 0.76);
+ margin: 0;
+}
+
+.tb-iot-hub-pe-required-actions {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-pe-required-dialog.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-pe-required-dialog.component.ts
new file mode 100644
index 0000000000..640c8fad20
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-pe-required-dialog.component.ts
@@ -0,0 +1,47 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { DialogComponent } from '@shared/components/dialog.component';
+
+@Component({
+ selector: 'tb-iot-hub-pe-required-dialog',
+ standalone: false,
+ templateUrl: './iot-hub-pe-required-dialog.component.html',
+ styleUrls: ['./iot-hub-pe-required-dialog.component.scss']
+})
+export class TbIotHubPeRequiredDialogComponent extends DialogComponent+ {{ 'iot-hub.pe-required-title' | translate }} +
+ + + +
+
+
+
+
+
+
+
+
+ @for (option of sortOptions; track option.value; let i = $index) {
+
+ }
+
+
+
+
+
+
+ @if (searchText) {
+
+ } @else {
+
+ }
+
+
+
+
+
+ {{ 'iot-hub.results-count' | translate:{ count: totalElements } }}
+
+ @if (totalElements > 0) {
+
+
+
+
+
+
+ }
+
+
+ @for (p of getPageNumbers(); track p) {
+
+ }
+
+
+
+ {{ 'iot-hub.items-per-page' | translate }}:
+
+ @for (size of pageSizeOptions; track size) {
+ {{ size }}
+ }
+
+
+
+
+
+
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-search.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-search.component.scss
new file mode 100644
index 0000000000..de87e32c0f
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-search.component.scss
@@ -0,0 +1,284 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+
+@import "../../../../../scss/constants";
+@import "./iot-hub-common";
+
+:host {
+ display: flex;
+ flex-direction: column;
+}
+
+.tb-search-results-count-mobile {
+ display: none;
+ margin-left: auto;
+}
+
+.tb-search-input-field {
+ @include tb-iot-hub-page-search-container;
+}
+
+.tb-search-input {
+ @include tb-iot-hub-page-search-input;
+}
+
+.tb-search-input-action {
+ @include tb-iot-hub-page-search-action;
+}
+
+.tb-search-sort-btn {
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ letter-spacing: 0.25px;
+ margin-left: auto;
+}
+
+.tb-search-sort-btn-icon {
+ display: none;
+}
+
+// Results count + Pagination row
+.tb-search-pagination-row {
+ flex: 0 0 48px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: 12px;
+}
+
+.tb-search-results-count {
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ color: rgba(0, 0, 0, 0.76);
+ white-space: nowrap;
+}
+
+.tb-search-pagination {
+ display: flex;
+ align-items: center;
+ gap: 24px;
+}
+
+.tb-search-page-btn {
+ min-width: 40px;
+ height: 40px;
+ border: none;
+ background: none;
+ border-radius: 4px;
+ font-size: 14px;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.87);
+ cursor: pointer;
+ padding: 8px 16px;
+ font-family: inherit;
+
+ &:hover {
+ background: rgba(0, 0, 0, 0.04);
+ }
+
+ &.active {
+ background: $tb-primary-color;
+ color: white;
+ }
+}
+
+.tb-search-page-size {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.2px;
+ color: rgba(0, 0, 0, 0.76);
+ margin-left: auto;
+}
+
+.tb-search-page-size-select {
+ width: 77px;
+ height: 40px;
+ border: 1px solid rgba(0, 0, 0, 0.12);
+ border-radius: 4px;
+ padding: 6px 12px;
+
+ ::ng-deep .mat-mdc-select-trigger {
+ font-size: 14px;
+ }
+}
+
+// Empty state no-data-bg + text
+.tb-search-empty {
+ .tb-no-data-bg, .tb-no-service-bg {
+ flex: auto;
+ height: 100px;
+ }
+
+ h3 {
+ font-size: 18px;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.87);
+ margin: 16px 0 8px;
+ }
+
+ p {
+ font-size: 14px;
+ color: rgba(0, 0, 0, 0.54);
+ margin: 0 0 24px;
+ }
+}
+
+// Divider before categories
+.tb-search-divider {
+ background: rgba(0, 0, 0, 0.12);
+ height: 1px;
+ min-height: 1px;
+ margin-top: 20px;
+}
+
+.tb-results-container {
+ position: relative;
+ height: 100%;
+ padding-top: 20px;
+ overflow: auto;
+}
+
+// Categories / sections
+.tb-search-categories {
+ display: flex;
+ flex-direction: column;
+ gap: 48px;
+}
+
+// Section header
+.tb-search-section-header {
+ font-size: 18px;
+ font-weight: 500;
+ line-height: 24px;
+ color: rgba(0, 0, 0, 0.87);
+ padding: 0;
+ margin-bottom: 12px;
+
+ mat-icon {
+ font-size: 24px;
+ width: 24px;
+ height: 24px;
+ }
+}
+
+// Card grid
+.tb-search-card-grid {
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ gap: 20px;
+
+ &.tb-search-card-grid-compact {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
+
+// Responsive
+
+@media #{$mat-gt-xxl} {
+ .tb-search-card-grid {
+ grid-template-columns: repeat(6, 1fr);
+
+ &.tb-search-card-grid-compact {
+ grid-template-columns: repeat(4, 1fr);
+ }
+ }
+}
+
+@media #{$mat-lt-xl} {
+ .tb-search-card-grid {
+ grid-template-columns: repeat(4, 1fr);
+
+ &.tb-search-card-grid-compact {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ }
+}
+
+@media #{$mat-lt-xmd} {
+ .tb-search-card-grid {
+ grid-template-columns: repeat(3, 1fr);
+
+ &.tb-search-card-grid-compact {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ }
+}
+
+@media #{$mat-lt-lg} {
+ .tb-search-pagination-row {
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+ gap: 12px;
+ }
+
+ .tb-search-results-count {
+ order: 1;
+ }
+
+ .tb-search-pagination {
+ order: 0;
+ width: 100%;
+ }
+
+ .tb-search-card-grid {
+ grid-template-columns: repeat(2, 1fr);
+
+ &.tb-search-card-grid-compact {
+ grid-template-columns: repeat(1, 1fr);
+ }
+ }
+}
+
+@media #{$mat-lt-md} {
+ .tb-search-results-count-mobile {
+ display: inline;
+ }
+
+ .tb-search-pagination-row .tb-search-results-count {
+ display: none;
+ }
+}
+
+@media #{$mat-lt-sm} {
+ .tb-search-sort-btn-full {
+ display: none;
+ }
+
+ .tb-search-sort-btn-icon {
+ display: inline-flex;
+ }
+
+ .tb-search-card-grid {
+ grid-template-columns: repeat(1, 1fr);
+ }
+
+ .tb-search-pagination {
+ flex-direction: column;
+ align-items: center;
+ gap: 16px;
+ }
+
+ .tb-search-page-size {
+ margin-left: 0;
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-search.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-search.component.ts
new file mode 100644
index 0000000000..64ff558723
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-search.component.ts
@@ -0,0 +1,356 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
+import { Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { forkJoin, Subject, Subscription } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { PageLink } from '@shared/models/page/page-link';
+import { Direction, SortOrder } from '@shared/models/page/sort-order';
+import { MpItemVersionQuery, MpItemVersionView } from '@shared/models/iot-hub/iot-hub-version.models';
+import { ItemType, itemTypeTranslations } from '@shared/models/iot-hub/iot-hub-item.models';
+import { IotHubInstalledItem } from '@shared/models/iot-hub/iot-hub-installed-item.models';
+import { IotHubApiService } from '@core/http/iot-hub-api.service';
+import { IotHubActionsService } from './iot-hub-actions.service';
+
+interface SearchResultGroup {
+ type: ItemType;
+ items: MpItemVersionView[];
+}
+
+interface SortOption {
+ value: string;
+ label: string;
+ direction: Direction;
+}
+
+const TYPE_ORDER: ItemType[] = [
+ ItemType.DEVICE, ItemType.SOLUTION_TEMPLATE, ItemType.WIDGET,
+ ItemType.CALCULATED_FIELD, ItemType.ALARM_RULE, ItemType.RULE_CHAIN
+];
+
+@Component({
+ selector: 'tb-iot-hub-search',
+ standalone: false,
+ templateUrl: './iot-hub-search.component.html',
+ styleUrls: ['./iot-hub-search.component.scss']
+})
+export class TbIotHubSearchComponent implements OnInit, OnDestroy {
+
+ readonly ItemType = ItemType;
+
+ @Input() searchText = '';
+ @Input() creatorId: string;
+ @Input() showCreator = true;
+ @Output() searchTextChange = new EventEmitter
+
+ @if (hasError) {
+
+
+
+ @if (isLoading) {
+
+
+
+ }
+
+
+ @if (!hasError && totalElements === 0 && searchText?.trim()) {
+ {{ 'iot-hub.network-server-unavailable' | translate }}
+{{ 'iot-hub.network-server-unavailable-text' | translate }}
+ +
+
+
+ }
+
+
+ @if (resultGroups.length > 0) {
+ {{ 'iot-hub.no-items-found' | translate }}
+{{ 'iot-hub.try-adjusting-search' | translate }}
+
+ @for (group of resultGroups; track group.type) {
+
+ }
+
+
+
+
+
+ }
+
+ @for (item of group.items; track item.id) {
+
+
+ }
+
+
+
+ }
+
+
+
+
+
+
+ warning
+
+ {{ 'iot-hub.unpublished-warning-title' | translate }}
+{{ 'iot-hub.unpublished-warning-text' | translate }}
+
+ {{ data.item.name }}
+ v {{ data.item.version }}
+
+
+
+
+
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-unpublished-warning-dialog.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-unpublished-warning-dialog.component.scss
new file mode 100644
index 0000000000..184924cbcc
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-unpublished-warning-dialog.component.scss
@@ -0,0 +1,82 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+
+.tb-iot-hub-warning-content {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ padding: 24px;
+ max-width: 480px;
+}
+
+.tb-iot-hub-warning-title-row {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.tb-iot-hub-warning-icon {
+ color: #d32f2f;
+ font-size: 28px;
+ width: 28px;
+ height: 28px;
+}
+
+.tb-iot-hub-warning-title {
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 24px;
+ letter-spacing: 0.1px;
+ color: rgba(0, 0, 0, 0.87);
+ margin: 0;
+}
+
+.tb-iot-hub-warning-text {
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.2px;
+ color: rgba(0, 0, 0, 0.75);
+ margin: 0;
+}
+
+.tb-iot-hub-warning-item {
+ display: flex;
+ align-items: baseline;
+ gap: 8px;
+ padding: 12px 16px;
+ background: rgba(211, 47, 47, 0.08);
+ border-left: 3px solid #d32f2f;
+ border-radius: 2px;
+
+ .tb-iot-hub-warning-item-name {
+ font-weight: 600;
+ color: rgba(0, 0, 0, 0.87);
+ }
+
+ .tb-iot-hub-warning-item-version {
+ font-size: 13px;
+ color: rgba(0, 0, 0, 0.54);
+ }
+}
+
+.tb-iot-hub-warning-actions {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 8px;
+ padding: 8px;
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-unpublished-warning-dialog.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-unpublished-warning-dialog.component.ts
new file mode 100644
index 0000000000..3d55dc598a
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-unpublished-warning-dialog.component.ts
@@ -0,0 +1,53 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { DialogComponent } from '@shared/components/dialog.component';
+import { MpItemVersionView } from '@shared/models/iot-hub/iot-hub-version.models';
+
+export interface IotHubUnpublishedWarningDialogData {
+ item: MpItemVersionView;
+}
+
+@Component({
+ selector: 'tb-iot-hub-unpublished-warning-dialog',
+ standalone: false,
+ templateUrl: './iot-hub-unpublished-warning-dialog.component.html',
+ styleUrls: ['./iot-hub-unpublished-warning-dialog.component.scss']
+})
+export class TbIotHubUnpublishedWarningDialogComponent extends DialogComponent
+ @switch (state) {
+ @case ('confirm') {
+
+{{ 'iot-hub.update-confirm-title' | translate:{ name: data.itemName } }}
+{{ 'iot-hub.update-desc' | translate }}
+ } + @case ('updating') { +{{ 'iot-hub.update-confirm-title' | translate:{ name: data.itemName } }}
+{{ 'iot-hub.update-desc' | translate }}
+ } + @case ('success') { +{{ 'iot-hub.update-success-title' | translate }}
+{{ 'iot-hub.update-success-desc' | translate:{ name: data.itemName } }}
+ } + @case ('error') { +{{ 'iot-hub.update-error-title' | translate }}
+{{ 'iot-hub.update-error-message' | translate:{ name: data.itemName } }}
+ @if (data?.itemType === ItemType.SOLUTION_TEMPLATE) { +
+ {{ errorMessage }}
+
+ }
+ }
+ }
+
+
+
+
+
+
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-upgrade-required-dialog.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-upgrade-required-dialog.component.scss
new file mode 100644
index 0000000000..3a4d7f8c08
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-upgrade-required-dialog.component.scss
@@ -0,0 +1,76 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+
+@import "../../../../../scss/constants";
+
+:host {
+ display: block;
+ width: 500px;
+ max-width: 100%;
+}
+
+.tb-iot-hub-upgrade-required {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ gap: 20px;
+ padding: 40px;
+ background: white;
+ border-radius: 8px;
+}
+
+.tb-iot-hub-upgrade-required-close {
+ position: absolute;
+ top: 8px;
+ right: 8px;
+}
+
+// Re-use the upgrade-required.svg silhouette as a CSS mask so the icon
+// tints with $tb-primary-color (PE overrides apply automatically).
+.tb-iot-hub-upgrade-required-icon {
+ display: block;
+ width: 100px;
+ height: 100px;
+ background-color: $tb-primary-color;
+ -webkit-mask: url('/assets/iot-hub/upgrade-required.svg') no-repeat center / contain;
+ mask: url('/assets/iot-hub/upgrade-required.svg') no-repeat center / contain;
+}
+
+.tb-iot-hub-upgrade-required-title {
+ font-size: 24px;
+ font-weight: 500;
+ line-height: 32px;
+ letter-spacing: 0.15px;
+ color: rgba(0, 0, 0, 0.87);
+ margin: 0;
+}
+
+.tb-iot-hub-upgrade-required-message {
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0.25px;
+ color: rgba(0, 0, 0, 0.76);
+ margin: 0;
+}
+
+.tb-iot-hub-upgrade-required-actions {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-upgrade-required-dialog.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-upgrade-required-dialog.component.ts
new file mode 100644
index 0000000000..480d3109ba
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-upgrade-required-dialog.component.ts
@@ -0,0 +1,59 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { DialogComponent } from '@shared/components/dialog.component';
+import { tbVersionIntToString } from '@core/http/iot-hub-api.service';
+import { environment as env } from '@env/environment';
+
+export interface IotHubUpgradeRequiredDialogData {
+ minTbVersion: number;
+}
+
+@Component({
+ selector: 'tb-iot-hub-upgrade-required-dialog',
+ standalone: false,
+ templateUrl: './iot-hub-upgrade-required-dialog.component.html',
+ styleUrls: ['./iot-hub-upgrade-required-dialog.component.scss']
+})
+export class TbIotHubUpgradeRequiredDialogComponent extends DialogComponent+ {{ 'iot-hub.upgrade-required-title' | translate }} +
+ + + +
+
+
+
+
+
+ 
+
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/pe-connectivity-method-prompt.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/pe-connectivity-method-prompt.component.scss
new file mode 100644
index 0000000000..a66a867374
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/pe-connectivity-method-prompt.component.scss
@@ -0,0 +1,65 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+
+@import "../../../../../scss/constants";
+
+:host {
+ display: block;
+ width: 500px;
+ max-width: 100%;
+}
+
+.tb-pe-connectivity-prompt {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ gap: 20px;
+ padding: 40px;
+ background: white;
+ border-radius: 8px;
+}
+
+.tb-pe-connectivity-prompt-close {
+ position: absolute;
+ top: 8px;
+ right: 8px;
+}
+
+.tb-pe-connectivity-prompt-illustration {
+ width: 140px;
+ height: 140px;
+}
+
+.tb-pe-connectivity-prompt-title {
+ font-size: 24px;
+ font-weight: 500;
+ line-height: 32px;
+ letter-spacing: 0.15px;
+ color: rgba(0, 0, 0, 0.87);
+ margin: 0;
+}
+
+.tb-pe-connectivity-prompt-connector {
+ color: $tb-primary-color;
+}
+
+.tb-pe-connectivity-prompt-actions {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/pe-connectivity-method-prompt.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/pe-connectivity-method-prompt.component.ts
new file mode 100644
index 0000000000..11173a21cb
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/pe-connectivity-method-prompt.component.ts
@@ -0,0 +1,48 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { DialogComponent } from '@shared/components/dialog.component';
+
+export interface PeConnectivityMethodPromptData {
+ connectorName: string;
+}
+
+@Component({
+ selector: 'tb-pe-connectivity-method-prompt',
+ standalone: false,
+ templateUrl: './pe-connectivity-method-prompt.component.html',
+ styleUrls: ['./pe-connectivity-method-prompt.component.scss']
+})
+export class TbPeConnectivityMethodPromptComponent extends DialogComponent
+ + {{ data.connectorName }} + {{ 'iot-hub.pe-connectivity-prompt-title-suffix' | translate }} +
+ +
+
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/solution-install-dialog.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/solution-install-dialog.component.scss
new file mode 100644
index 0000000000..ae8f543c10
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/solution-install-dialog.component.scss
@@ -0,0 +1,65 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+
+@import "../../../../../scss/constants";
+
+:host {
+ .dlg-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 12px 12px 8px 24px;
+ flex-shrink: 0;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+ }
+ .dlg-title {
+ font-size: 24px;
+ font-weight: 500;
+ line-height: 32px;
+ color: rgba(0, 0, 0, 0.87);
+ }
+ .mat-mdc-dialog-actions {
+ border-top: 1px solid rgba(0, 0, 0, 0.12);
+ }
+}
+
+.tb-dialog-content {
+ max-width: 100%;
+ width: 1200px;
+ display: flex;
+ flex-direction: column;
+
+ @media #{$mat-lt-xxl} {
+ width: 900px;
+ }
+
+ @media #{$mat-lt-lg} {
+ width: 768px;
+ }
+
+ @media #{$mat-lt-md} {
+ width: 100%;
+ }
+
+ @media #{$mat-xs} {
+ min-width: 100% !important;
+ height: 100%;
+ }
+}
+
+:host .tb-dialog-content ::ng-deep tb-iot-hub-markdown .tb-markdown-view {
+ padding: 0;
+}
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/solution-install-dialog.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/solution-install-dialog.component.ts
new file mode 100644
index 0000000000..12539d039e
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/solution-install-dialog.component.ts
@@ -0,0 +1,62 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { SolutionTemplateInstalledItemDescriptor } from '@shared/models/iot-hub/iot-hub-installed-item.models';
+import {
+ replaceItemLinkPlaceholders
+} from '@home/components/iot-hub/iot-hub-markdown.utils';
+
+export interface SolutionInstallDialogData {
+ descriptor: SolutionTemplateInstalledItemDescriptor;
+ instructions?: boolean;
+}
+
+@Component({
+ selector: 'tb-solution-install-dialog',
+ templateUrl: './solution-install-dialog.component.html',
+ styleUrls: ['./solution-install-dialog.component.scss'],
+ standalone: false
+})
+export class SolutionInstallDialogComponent {
+
+ details: string;
+ dashboardId: string | null;
+ instructions: boolean;
+
+ constructor(
+ @Inject(MAT_DIALOG_DATA) public data: SolutionInstallDialogData,
+ private dialogRef: MatDialogRef
+ @if (instructions) {info_outline }
+
+ {{ (instructions ? 'iot-hub.solution-instructions' : 'iot-hub.solution-install-title') | translate }}
+
+
+
+
+
+
+ @if (dashboardId) {
+
+ }
+
+
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/widget-actions-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/widget-actions-panel.component.ts
index 0320dc7fd1..389c780e4c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/widget-actions-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/widget-actions-panel.component.ts
@@ -26,6 +26,7 @@ import {
import { deepClone } from '@core/utils';
import { MatDialog } from '@angular/material/dialog';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { coerceBoolean } from '@shared/decorators/coercion';
@Component({
selector: 'tb-widget-actions-panel',
@@ -45,6 +46,10 @@ export class WidgetActionsPanelComponent implements ControlValueAccessor, OnInit
@Input()
disabled: boolean;
+ @Input()
+ @coerceBoolean()
+ strokedPanel = false;
+
actionsFormGroup: UntypedFormGroup;
private propagateChange = (_val: any) => {};
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/html/html-container-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/html/html-container-basic-config.component.html
index 298bdb6e61..907da3e14b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/html/html-container-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/html/html-container-basic-config.component.html
@@ -17,4 +17,8 @@
-->
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/html/html-container-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/html/html-container-basic-config.component.ts
index d057acf057..3872e07853 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/html/html-container-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/html/html-container-basic-config.component.ts
@@ -51,12 +51,14 @@ export class HtmlContainerBasicConfigComponent extends BasicWidgetConfigComponen
protected onConfigSet(configData: WidgetConfigComponentData) {
const settings: HtmlContainerWidgetSettings = {...htmlContainerDefaultSettings, ...(configData.config.settings || {})};
this.htmlContainerWidgetConfigForm = this.fb.group({
- settings: [settings, []]
+ settings: [settings, []],
+ actions: [configData.config.actions || {}, []]
});
}
protected prepareOutputConfig(config: any): WidgetConfigComponentData {
this.widgetConfig.config.settings = {...(this.widgetConfig.config.settings || {}), ...config.settings};
+ this.widgetConfig.config.actions = config.actions;
return this.widgetConfig;
}
}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/home-page-widgets.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/home-page-widgets.module.ts
index af27184780..067cc0daab 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/home-page-widgets.module.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/home-page-widgets.module.ts
@@ -35,6 +35,8 @@ import { AddQuickLinkDialogComponent } from '@home/components/widget/lib/home-pa
import {
RecentDashboardsWidgetComponent
} from '@home/components/widget/lib/home-page/recent-dashboards-widget.component';
+import { IotHubWidgetComponent } from '@home/components/widget/lib/home-page/iot-hub-widget.component';
+import { IotHubComponentsModule } from '@home/components/iot-hub/iot-hub-components.module';
@NgModule({
declarations:
@@ -52,11 +54,13 @@ import {
QuickLinksWidgetComponent,
QuickLinkComponent,
AddQuickLinkDialogComponent,
- RecentDashboardsWidgetComponent
+ RecentDashboardsWidgetComponent,
+ IotHubWidgetComponent
],
imports: [
CommonModule,
- SharedModule
+ SharedModule,
+ IotHubComponentsModule
],
exports: [
ClusterInfoTableComponent,
@@ -72,7 +76,8 @@ import {
QuickLinksWidgetComponent,
QuickLinkComponent,
AddQuickLinkDialogComponent,
- RecentDashboardsWidgetComponent
+ RecentDashboardsWidgetComponent,
+ IotHubWidgetComponent
]
})
export class HomePageWidgetsModule { }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/iot-hub-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/iot-hub-widget.component.html
new file mode 100644
index 0000000000..7c1a11f3ab
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/iot-hub-widget.component.html
@@ -0,0 +1,82 @@
+
+ = {};
+
+ constructor(private iotHubApiService: IotHubApiService,
+ private iotHubActions: IotHubActionsService) {
+ super();
+ }
+
+ ngOnInit() {
+ this.ctx.overflowVisible = true;
+ this.hasIotHubAccess = [Authority.TENANT_ADMIN].includes(this.authUser.authority);
+ if (this.hasIotHubAccess) {
+ this.load();
+ }
+ }
+
+ openItemDetail(item: MpItemVersionView): void {
+ this.iotHubActions.openItemDetail(item, this.findInstalledSolutionTemplate(item), this.findInstalledDeviceCount(item))
+ .subscribe(result => {
+ if (result === 'installed' || result === 'deleted' || result === 'updated') {
+ this.reloadInstalled(item.type);
+ }
+ });
+ }
+
+ getItemImage(item: MpItemVersionView): string | null {
+ return resolveIotHubItemImageUrl(item, this.iotHubApiService);
+ }
+
+ isInstalled(item: MpItemVersionView): boolean {
+ return item.type === ItemType.SOLUTION_TEMPLATE && !!this.findInstalledSolutionTemplate(item);
+ }
+
+ private findInstalledSolutionTemplate(item: MpItemVersionView): IotHubInstalledItem | undefined {
+ return this.installedSolutionTemplates.find(i => i.itemId === item.itemId);
+ }
+
+ private findInstalledDeviceCount(item: MpItemVersionView): number {
+ return this.installedDeviceCounts[item.itemId] || 0;
+ }
+
+ private load(): void {
+ const config = { ignoreLoading: true };
+ const sortOrder: SortOrder = { property: 'totalInstallCount', direction: Direction.DESC };
+ const buildQuery = (type: ItemType): MpItemVersionQuery =>
+ new MpItemVersionQuery(new PageLink(WIDGET_CARD_COUNT, 0, null, sortOrder), { type });
+ const installedPageLink = new PageLink(10000, 0);
+
+ forkJoin({
+ solutionTemplates: this.iotHubApiService.getPublishedVersions(buildQuery(ItemType.SOLUTION_TEMPLATE), config),
+ devices: this.iotHubApiService.getPublishedVersions(buildQuery(ItemType.DEVICE), config),
+ installedSolutionTemplates: this.iotHubApiService.getInstalledItems(installedPageLink, ItemType.SOLUTION_TEMPLATE, undefined, config),
+ installedDeviceCounts: this.iotHubApiService.getInstalledItemCounts(ItemType.DEVICE, config)
+ }).subscribe(result => {
+ this.solutionTemplates = result.solutionTemplates.data;
+ this.devices = result.devices.data;
+ this.installedSolutionTemplates = result.installedSolutionTemplates.data;
+ this.installedDeviceCounts = result.installedDeviceCounts;
+ this.ctx.detectChanges();
+ });
+ }
+
+ private reloadInstalled(type: ItemType): void {
+ const config = { ignoreLoading: true };
+ if (type === ItemType.SOLUTION_TEMPLATE) {
+ const installedPageLink = new PageLink(10000, 0);
+ this.iotHubApiService.getInstalledItems(installedPageLink, ItemType.SOLUTION_TEMPLATE, undefined, config).subscribe(data => {
+ this.installedSolutionTemplates = data.data;
+ this.ctx.detectChanges();
+ });
+ } else if (type === ItemType.DEVICE) {
+ this.iotHubApiService.getInstalledItemCounts(ItemType.DEVICE, config).subscribe(counts => {
+ this.installedDeviceCounts = counts;
+ this.ctx.detectChanges();
+ });
+ }
+ }
+
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/html/html-container-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/html/html-container-widget.component.ts
index f7bae926bc..51ee9871f8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/html/html-container-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/html/html-container-widget.component.ts
@@ -15,8 +15,10 @@
///
import {
- Component,
+ ChangeDetectorRef,
+ Component, ComponentRef,
ElementRef,
+ inject,
Inject,
Injector,
Input,
@@ -96,6 +98,7 @@ export class HtmlContainerWidgetComponent implements OnInit {
@Inject(HOME_COMPONENTS_MODULE_TOKEN) private homeComponentsModule: Type,
private dynamicComponentFactoryService: DynamicComponentFactoryService,
private utils: UtilsService,
+ private cdr: ChangeDetectorRef,
private resources: ResourcesService) {}
ngOnInit(): void {
@@ -160,11 +163,13 @@ export class HtmlContainerWidgetComponent implements OnInit {
this.compileAngularFunction().subscribe(
{
next: (containerFunction) => {
- try {
- this.initAngularComponent(imports, containerFunction);
- } catch (e) {
- this.handleWidgetException(e);
- }
+ setTimeout(() => {
+ try {
+ this.initAngularComponent(imports, containerFunction);
+ } catch (e) {
+ this.handleWidgetException(e);
+ }
+ });
},
error: (e) => {
this.handleWidgetException(e);
@@ -200,9 +205,16 @@ export class HtmlContainerWidgetComponent implements OnInit {
compileModules = compileModules.concat(imports);
}
const self = () => this;
+
+ let containerRef: ComponentRef;
+
this.dynamicComponentFactoryService.createDynamicComponent(
class TbContainerInstance {
+
+ private cdr = inject(ChangeDetectorRef);
+
ngOnInit(): void {
+ this.cdr.detach();
if (containerFunction) {
const instance = self();
try {
@@ -212,6 +224,15 @@ export class HtmlContainerWidgetComponent implements OnInit {
}
}
}
+ ngDoCheck(): void {
+ const instance = self();
+ try {
+ this.cdr.detectChanges()
+ } catch (error) {
+ containerRef.destroy();
+ instance.handleWidgetException(error)
+ }
+ }
ngOnDestroy(): void {
destroyContainerInstanceResources();
}
@@ -224,7 +245,7 @@ export class HtmlContainerWidgetComponent implements OnInit {
this.containerInstanceComponentType = componentType;
const injector: Injector = Injector.create({providers: [], parent: this.angularContainer.viewContainerRef.injector});
try {
- this.angularContainer.viewContainerRef.createComponent(this.containerInstanceComponentType,
+ containerRef = this.angularContainer.viewContainerRef.createComponent(this.containerInstanceComponentType,
{index: 0, injector});
} catch (error) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/geo-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/geo-map.ts
index bc1e5f8f89..405be8729e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/geo-map.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/geo-map.ts
@@ -18,13 +18,13 @@ import {
DEFAULT_ZOOM_LEVEL,
defaultGeoMapSettings,
GeoMapSettings,
- latLngPointToBounds,
+ latLngPointToBounds, MapControlsPosition,
MapZoomAction,
TbCircleData,
TbPolygonCoordinate,
TbPolygonCoordinates,
TbPolygonRawCoordinate,
- TbPolygonRawCoordinates
+ TbPolygonRawCoordinates, WEBGL_ERROR_EVENT
} from '@shared/models/widget/maps/map.models';
import { WidgetContext } from '@home/models/widget-component.models';
import { DeepPartial } from '@shared/models/common';
@@ -92,9 +92,19 @@ export class TbGeoMap extends TbMap {
return this.loadLayers().pipe(
tap((layers: L.TB.LayerData[]) => {
if (layers.length) {
- const layer = layers[0];
- layer.layer.addTo(this.map);
- this.map.attributionControl.setPrefix(layer.attributionPrefix);
+ const defaultLayer = layers[0];
+ layers.forEach(layer => {
+ layer.layer.once(WEBGL_ERROR_EVENT, () => {
+ const toastPosition = this.settings.controlsPosition === MapControlsPosition.bottomleft
+ || this.settings.controlsPosition === MapControlsPosition.bottomright ? 'top' : 'bottom';
+ this.ctx.showErrorToast(
+ this.ctx.translate.instant('widgets.maps.layer.webgl-not-available'),
+ toastPosition, 'left', this.ctx.toastTargetId, true
+ );
+ });
+ });
+ defaultLayer.layer.addTo(this.map);
+ this.map.attributionControl.setPrefix(defaultLayer.attributionPrefix);
if (layers.length > 1) {
const sidebar = this.getSidebar();
L.TB.layers({
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet/leaflet-tb.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet/leaflet-tb.ts
index c16d5cc67c..72e7e5b324 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet/leaflet-tb.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet/leaflet-tb.ts
@@ -24,6 +24,7 @@ import { MatIconRegistry } from '@angular/material/icon';
import { isSvgIcon, splitIconName } from '@shared/models/icon.models';
import { catchError, take } from 'rxjs/operators';
import { of } from 'rxjs';
+import { WEBGL_ERROR_EVENT } from '@shared/models/widget/maps/map.models';
L.MarkerCluster = L.MarkerCluster.mergeOptions({ pmIgnore: true });
@@ -1093,6 +1094,7 @@ class MapLibreGLLayer extends L.Layer implements TB.MapLibreGL.MapLibreGLLayer {
private _actualCanvas: HTMLCanvasElement;
private _offset: L.Point;
private _zooming: boolean;
+ private _glError = false;
constructor(options: TB.MapLibreGL.LeafletMapLibreGLMapOptions) {
super();
@@ -1136,7 +1138,9 @@ class MapLibreGLLayer extends L.Layer implements TB.MapLibreGL.MapLibreGLLayer {
const paneName = this.getPaneName();
map.getPane(paneName).removeChild(this._container);
- this._glMap.remove();
+ if (this._glMap) {
+ this._glMap.remove();
+ }
this._glMap = null;
return this;
@@ -1204,7 +1208,18 @@ class MapLibreGLLayer extends L.Layer implements TB.MapLibreGL.MapLibreGLLayer {
zoom: this._map.getZoom() - 1,
attributionControl: false
});
- this._glMap = new MapLibreGLMap(options);
+ this._glError = false;
+ try {
+ this._glMap = new MapLibreGLMap(options);
+ } catch (e) {
+ this._glError = true;
+ this.fire(WEBGL_ERROR_EVENT, { error: e });
+ return;
+ }
+ this._glMap.once('webglcontextlost', (e) => {
+ this._glError = true;
+ this.fire(WEBGL_ERROR_EVENT, {error: e});
+ });
this._glMap.once('load', () => {
this.fire('load');
});
@@ -1222,8 +1237,12 @@ class MapLibreGLLayer extends L.Layer implements TB.MapLibreGL.MapLibreGLLayer {
}
}
+ private _glReady(): boolean {
+ return !this._glError && !!this._glMap;
+ }
+
private _update() {
- if (!this._map) {
+ if (!this._map || !this._glReady()) {
return;
}
this._offset = this._map.containerPointToLayerPoint([0, 0]);
@@ -1253,6 +1272,7 @@ class MapLibreGLLayer extends L.Layer implements TB.MapLibreGL.MapLibreGLLayer {
private _transformGL(gl: MapLibreGLMap) {
const center = this._map.getCenter();
const tr = gl._getTransformForUpdate();
+ if (!tr) { return; }
tr.setCenter(MapLibreGLLngLat.convert([center.lng, center.lat]));
tr.setZoom(this._map.getZoom() - 1);
gl.transform.apply(tr);
@@ -1260,6 +1280,7 @@ class MapLibreGLLayer extends L.Layer implements TB.MapLibreGL.MapLibreGLLayer {
}
private _pinchZoom() {
+ if (!this._glReady()) { return; }
this._glMap.jumpTo({
zoom: this._map.getZoom() - 1,
center: this._map.getCenter()
@@ -1267,6 +1288,7 @@ class MapLibreGLLayer extends L.Layer implements TB.MapLibreGL.MapLibreGLLayer {
}
private _animateZoom(e: L.ZoomAnimEvent) {
+ if (!this._glReady() || !this._actualCanvas) { return; }
const scale = this._map.getZoomScale(e.zoom);
const padding = this._map.getSize().multiplyBy(this.options.padding * scale);
const viewHalf = this.getSize().divideBy(2);
@@ -1291,6 +1313,7 @@ class MapLibreGLLayer extends L.Layer implements TB.MapLibreGL.MapLibreGLLayer {
}
private _zoomEnd() {
+ if (!this._glReady() || !this._actualCanvas) { return; }
const scale = this._map.getZoomScale(this._map.getZoom());
L.DomUtil.setTransform(
this._actualCanvas,
@@ -1302,7 +1325,9 @@ class MapLibreGLLayer extends L.Layer implements TB.MapLibreGL.MapLibreGLLayer {
}
private _transitionEnd() {
+ if (!this._glReady()) { return; }
L.Util.requestAnimFrame(() => {
+ if (!this._glReady()) { return; }
const zoom = this._map.getZoom();
const center = this._map.getCenter();
const offset = this._map.latLngToContainerPoint(
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-layer.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-layer.ts
index 2953c609ce..4bc2dbf231 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-layer.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-layer.ts
@@ -28,14 +28,14 @@ import {
MapProvider,
OpenStreetMapLayerSettings,
ReferenceLayerType,
- TencentMapLayerSettings
+ TencentMapLayerSettings, WEBGL_ERROR_EVENT
} from '@shared/models/widget/maps/map.models';
import { WidgetContext } from '@home/models/widget-component.models';
import { DeepPartial } from '@shared/models/common';
import { mergeDeep } from '@core/utils';
import { Observable, of, shareReplay, switchMap } from 'rxjs';
import { CustomTranslatePipe } from '@shared/pipe/custom-translate.pipe';
-import L from 'leaflet';
+import L, { LeafletEvent } from 'leaflet';
import { catchError, map } from 'rxjs/operators';
import { ResourcesService } from '@core/services/resources.service';
import { StyleSpecification } from '@maplibre/maplibre-gl-style-spec';
@@ -120,6 +120,13 @@ export abstract class TbMapLayer {
let referenceLayerLoaded = false;
baseLayer.addTo(layer);
referenceLayer.addTo(layer);
+ // Forwarding is needed only here: when a reference layer is present the base layer is
+ // wrapped in this featureGroup, and geo-map listens for WEBGL_ERROR_EVENT on the
+ // returned layer (the group). In the other branches the MapLibreGLLayer is returned
+ // directly and fires WEBGL_ERROR_EVENT itself, so no forwarding is required.
+ baseLayer.once(WEBGL_ERROR_EVENT, (e: LeafletEvent) => {
+ layer.fire(WEBGL_ERROR_EVENT, e);
+ });
baseLayer.once('load', () => {
baseLayerLoaded = true;
if (referenceLayerLoaded) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/html/html-container-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/html/html-container-settings.component.html
index a72f28e70e..4f891f1617 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/html/html-container-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/html/html-container-settings.component.html
@@ -122,7 +122,8 @@
[editorCompleter]="containerFunctionEditorCompleter"
[functionArgs]="htmlContainerSettingsForm.get('type').value === HtmlContainerWidgetType.ANGULAR ? ['ctx'] : ['ctx', 'container']"
withModules
- functionTitle="{{ 'widgets.html-container.js-function' | translate }}">
+ functionTitle="{{ 'widgets.html-container.js-function' | translate }}"
+ [helpId]="htmlContainerSettingsForm.get('type').value === HtmlContainerWidgetType.ANGULAR ? 'widget/lib/html_container/container_angular_fn' : 'widget/lib/html_container/container_plain_fn'">
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
index f35a1f9ae1..b09929d917 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
@@ -29,7 +29,7 @@
widget-config.actions
+ @if (hasIotHubAccess) {
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/iot-hub-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/iot-hub-widget.component.scss
new file mode 100644
index 0000000000..345c68adaf
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/iot-hub-widget.component.scss
@@ -0,0 +1,203 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+@import "../../../../../../../scss/constants";
+
+:host {
+ .tb-card-header {
+ gap: 10px;
+ @media #{$mat-md-lg} {
+ gap: 8px;
+ @media #{$mat-lt-lg} {
+ gap: 4px;
+ }
+ }
+ .tb-card-title-text {
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 20px;
+ color: rgba(0, 0, 0, 0.76);
+ @media #{$mat-md-lg} {
+ font-size: 12px;
+ line-height: 16px;
+ }
+ a {
+ display: inline-block;
+ font-weight: 500;
+ border: none;
+ color: $tb-primary-color;
+ }
+ }
+ .mat-divider {
+ margin-left: -16px;
+ margin-right: -16px;
+ @media #{$mat-md-lg} {
+ margin-left: -8px;
+ margin-right: -8px;
+ @media #{$mat-lt-lg} {
+ margin-left: -2px;
+ margin-right: -2px;
+ }
+ }
+ }
+ }
+
+ .tb-iot-hub-widget-body {
+ display: flex;
+ flex: 1 1 0;
+ min-height: 0;
+ gap: 0;
+ padding: 8px 0 0;
+
+ @media #{$mat-lt-md} {
+ flex-direction: column;
+ gap: 12px;
+ }
+
+ .mat-divider {
+ margin: 24px 16px;
+ @media #{$mat-lt-md} {
+ display: none;
+ }
+ @media #{$mat-md-lg} {
+ margin-left: 8px;
+ margin-right: 8px;
+ }
+ }
+ }
+
+ .tb-iot-hub-widget-column {
+ display: flex;
+ flex: 1 1 0;
+ min-width: 0;
+ flex-direction: column;
+ gap: 8px;
+ overflow: hidden;
+ }
+
+ .tb-iot-hub-widget-cards {
+ display: flex;
+ flex: 1 1 0;
+ min-height: 0;
+ gap: 12px;
+ @media #{$mat-md} {
+ gap: 8px;
+ }
+ }
+
+ .tb-iot-hub-widget-card {
+ display: flex;
+ flex: 1 1 0;
+ min-width: 0;
+ flex-direction: column;
+ gap: 4px;
+ cursor: pointer;
+ border: none;
+ background: none;
+ padding: 0;
+ text-align: left;
+
+ &:hover .tb-iot-hub-widget-card-image,
+ &:focus-visible .tb-iot-hub-widget-card-image {
+ border-color: rgba(0, 0, 0, 0.12);
+ box-shadow: 0 4px 10px 0 rgba(23, 33, 90, 0.08);
+ }
+
+ &:focus-visible {
+ outline: none;
+ }
+ }
+
+ .tb-iot-hub-widget-card-image {
+ position: relative;
+ display: flex;
+ flex: 1 1 0;
+ min-height: 0;
+ align-items: center;
+ justify-content: center;
+ padding: 8px;
+ border: 1px solid rgba(0, 0, 0, 0.05);
+ border-radius: 10px;
+ background: radial-gradient(circle, rgba(0, 0, 0, 0.06) 1px, transparent 1px) 0 0 / 16px 16px rgba(0, 0, 0, 0.04);
+ overflow: hidden;
+ transition: border-color 0.15s, box-shadow 0.15s;
+ @media #{$mat-md-lg} {
+ padding: 4px;
+ }
+ img {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
+ }
+ }
+
+ // Installed badge — green circle + check icon, top-right corner
+ .tb-iot-hub-widget-card-installed {
+ position: absolute;
+ top: 5px;
+ right: 5px;
+ width: 20px;
+ height: 20px;
+ font-size: 20px;
+ line-height: 20px;
+ color: #2e7d32;
+ background: white;
+ border-radius: 50%;
+ }
+
+ .tb-iot-hub-widget-card-label {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 0 4px;
+ }
+
+ .tb-iot-hub-widget-card-name {
+ flex: 1 1 0;
+ min-width: 0;
+ font-family: inherit;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 16px;
+ color: rgba(0, 0, 0, 0.76);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ @media #{$mat-md-lg} {
+ font-size: 11px;
+ }
+ }
+
+ .tb-iot-hub-widget-card-installs {
+ display: inline-flex;
+ flex-shrink: 0;
+ align-items: center;
+ gap: 2px;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 16px;
+ letter-spacing: 0.4px;
+ color: rgba(0, 0, 0, 0.54);
+
+ mat-icon {
+ width: 12px;
+ height: 12px;
+ font-size: 12px;
+ line-height: 12px;
+ color: rgba(0, 0, 0, 0.54);
+ }
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/iot-hub-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/iot-hub-widget.component.ts
new file mode 100644
index 0000000000..8195aa4117
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/iot-hub-widget.component.ts
@@ -0,0 +1,131 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { Component, Input, OnInit } from '@angular/core';
+import { forkJoin } from 'rxjs';
+import { PageComponent } from '@shared/components/page.component';
+import { Authority } from '@shared/models/authority.enum';
+import { getCurrentAuthUser } from '@core/auth/auth.selectors';
+import { WidgetContext } from '@home/models/widget-component.models';
+import { IotHubApiService } from '@core/http/iot-hub-api.service';
+import { IotHubActionsService } from '@home/components/iot-hub/iot-hub-actions.service';
+import { resolveIotHubItemImageUrl } from '@home/components/iot-hub/iot-hub-utils';
+import { MpItemVersionQuery, MpItemVersionView } from '@shared/models/iot-hub/iot-hub-version.models';
+import { ItemType } from '@shared/models/iot-hub/iot-hub-item.models';
+import { IotHubInstalledItem } from '@shared/models/iot-hub/iot-hub-installed-item.models';
+import { PageLink } from '@shared/models/page/page-link';
+import { Direction, SortOrder } from '@shared/models/page/sort-order';
+
+const WIDGET_CARD_COUNT = 3;
+
+@Component({
+ selector: 'tb-iot-hub-widget',
+ templateUrl: './iot-hub-widget.component.html',
+ styleUrls: ['./home-page-widget.scss', './iot-hub-widget.component.scss'],
+ standalone: false
+})
+export class IotHubWidgetComponent extends PageComponent implements OnInit {
+
+ @Input()
+ ctx: WidgetContext;
+
+ authority = Authority;
+
+ authUser = getCurrentAuthUser(this.store);
+
+ hasIotHubAccess = true;
+
+ solutionTemplates: MpItemVersionView[] = [];
+ devices: MpItemVersionView[] = [];
+ installedSolutionTemplates: IotHubInstalledItem[] = [];
+ installedDeviceCounts: Record
+
+ {{ 'widgets.iot-hub.title-text' | translate }} IoT Hub
+
+
+ } @else {
+
+ {{ 'item.type-solution-template-plural' | translate }}
+
+
+ @for (item of solutionTemplates; track item.id) {
+
+
+
+ }
+
+ @if (getItemImage(item); as imgUrl) {
+ ![]()
+ }
+ @if (isInstalled(item)) {
+ check_circle
+ }
+
+
+
+ {{ 'iot-hub.device-library' | translate }}
+
+
+ @for (item of devices; track item.id) {
+
+
+
+ }
+
+ @if (getItemImage(item); as imgUrl) {
+ ![]()
+ }
+
+
+
+
+
+ }
+widgets.home.no-data-available
+
+
;
error$?: Observable;
}
@@ -69,6 +70,8 @@ export class ToggleOption implements OnChanges, OnDestroy {
@Input() value: any;
+ @Input() template: TemplateRef;
+
@Input() error: string;
currentError = new ReplaySubject(1);
@@ -127,6 +130,7 @@ export abstract class _ToggleBase extends PageComponent implements AfterContentI
{
name: option.viewValue,
value: option.value,
+ template: option.template,
error$: option.currentError.asObservable()
}
);
diff --git a/ui-ngx/src/app/shared/components/widgets-bundle-search.component.ts b/ui-ngx/src/app/shared/components/widgets-bundle-search.component.ts
deleted file mode 100644
index 8f15905141..0000000000
--- a/ui-ngx/src/app/shared/components/widgets-bundle-search.component.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-///
-/// Copyright © 2016-2026 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.
-///
-
-import { Component, ElementRef, forwardRef, Input, ViewChild, ViewEncapsulation } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-@Component({
- selector: 'tb-widgets-bundle-search',
- templateUrl: './widgets-bundle-search.component.html',
- styleUrls: ['./widgets-bundle-search.component.scss'],
- providers: [{
- provide: NG_VALUE_ACCESSOR,
- useExisting: forwardRef(() => WidgetsBundleSearchComponent),
- multi: true
- }],
- encapsulation: ViewEncapsulation.None,
- standalone: false
-})
-export class WidgetsBundleSearchComponent implements ControlValueAccessor {
-
- searchText: string;
- focus = false;
-
- @Input() placeholder: string;
-
- @ViewChild('searchInput') searchInput: ElementRef;
-
- private propagateChange = (v: any) => { };
-
- constructor() {
- }
-
- registerOnChange(fn: any): void {
- this.propagateChange = fn;
- }
-
- registerOnTouched(fn: any): void {
- }
-
- writeValue(value: string | null): void {
- this.searchText = value;
- }
-
- updateSearchText(): void {
- this.updateView();
- }
-
- private updateView() {
- this.propagateChange(this.searchText);
- }
-
- clear($event: Event): void {
- $event.preventDefault();
- $event.stopPropagation();
- this.searchText = '';
- this.updateView();
- }
-
- toggleFocus() {
- this.focus = !this.focus;
- }
-}
diff --git a/ui-ngx/src/app/shared/directives/autocomplete-auto-scroll-reposition.directive.ts b/ui-ngx/src/app/shared/directives/autocomplete-auto-scroll-reposition.directive.ts
new file mode 100644
index 0000000000..5f620789f1
--- /dev/null
+++ b/ui-ngx/src/app/shared/directives/autocomplete-auto-scroll-reposition.directive.ts
@@ -0,0 +1,80 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import {
+ Directive,
+ ElementRef,
+ OnDestroy,
+ inject, AfterViewInit, Renderer2,
+} from '@angular/core';
+import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
+import { Subscription } from 'rxjs';
+import { onParentScrollOrWindowResize } from '@core/utils';
+
+@Directive({
+ selector: 'input[matAutocomplete], textarea[matAutocomplete]',
+ standalone: false
+})
+export class AutocompleteAutoScrollRepositionDirective implements AfterViewInit, OnDestroy {
+ private readonly trigger = inject(MatAutocompleteTrigger, { host: true });
+ private readonly elementRef = inject(ElementRef);
+ private readonly renderer = inject(Renderer2);
+
+ private parentScrollSubscription: Subscription = null;
+ private isIntersecting: boolean = false;
+
+ private intersectionObserver = new IntersectionObserver((entries) => {
+ if (this.isIntersecting !== entries[0].isIntersecting) {
+ this.isIntersecting = entries[0].isIntersecting;
+ this.updatePanelVisibility();
+ }
+ }, {threshold: [0.5]});
+
+ constructor() {
+ }
+
+ ngAfterViewInit(): void {
+ this.parentScrollSubscription = onParentScrollOrWindowResize(this.elementRef.nativeElement).subscribe(() => {
+ if (this.trigger.panelOpen) {
+ this.trigger.updatePosition();
+ }
+ });
+ this.intersectionObserver.observe(this.elementRef.nativeElement);
+ }
+
+ ngOnDestroy(): void {
+ if (this.parentScrollSubscription) {
+ this.parentScrollSubscription.unsubscribe();
+ this.parentScrollSubscription = null;
+ }
+ if (this.intersectionObserver) {
+ this.intersectionObserver.unobserve(this.elementRef.nativeElement);
+ this.intersectionObserver.disconnect();
+ this.intersectionObserver = null;
+ }
+ }
+
+ private updatePanelVisibility(): void {
+ if (this.trigger.panelOpen) {
+ if (this.isIntersecting) {
+ this.renderer.removeStyle(this.trigger.autocomplete.panel.nativeElement, 'display');
+ } else {
+ this.renderer.setStyle(this.trigger.autocomplete.panel.nativeElement, 'display', 'none');
+ }
+ }
+ }
+
+}
diff --git a/ui-ngx/src/app/shared/directives/chip-overflow.directive.ts b/ui-ngx/src/app/shared/directives/chip-overflow.directive.ts
new file mode 100644
index 0000000000..10585f1453
--- /dev/null
+++ b/ui-ngx/src/app/shared/directives/chip-overflow.directive.ts
@@ -0,0 +1,197 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { AfterViewInit, Directive, ElementRef, Input, NgZone, OnDestroy, Renderer2 } from '@angular/core';
+import { coerceBoolean } from '@shared/decorators/coercion';
+
+@Directive({
+ selector: '[tb-chip-overflow]',
+ standalone: false
+})
+export class ChipOverflowDirective implements AfterViewInit, OnDestroy {
+
+ @Input() chipSelector = '.tb-chip';
+ @Input() gap = 8;
+ @Input() overflowTemplate = '+{n}';
+ @Input() overflowClass = 'tb-overflow-chip';
+ @Input() minChips = 1;
+
+ @Input()
+ @coerceBoolean()
+ showOverflowedTitle = false;
+
+ private resizeObserver?: ResizeObserver;
+ private mutationObserver?: MutationObserver;
+ private overflowEl!: HTMLElement;
+ private timeoutId?: NodeJS.Timeout;
+
+ constructor(
+ private host: ElementRef,
+ private renderer: Renderer2,
+ private zone: NgZone
+ ) {}
+
+ ngAfterViewInit(): void {
+ this.prepareHost();
+ this.createOverflowChip();
+ this.zone.runOutsideAngular(() => {
+ requestAnimationFrame(() => {
+ this.reflow();
+ this.observeResize();
+ this.observeMutations();
+ });
+ });
+ }
+
+ ngOnDestroy(): void {
+ this.resizeObserver?.disconnect();
+ this.mutationObserver?.disconnect();
+ if (this.timeoutId) {
+ clearTimeout(this.timeoutId);
+ }
+ }
+
+ private prepareHost() {
+ const el = this.host.nativeElement;
+ const styles: { [key: string]: string } = {
+ display: 'flex',
+ flexWrap: 'nowrap',
+ alignItems: 'center',
+ overflow: 'hidden',
+ gap: `${this.gap}px`,
+ whiteSpace: 'nowrap',
+ minWidth: '0'
+ };
+ Object.entries(styles).forEach(([prop, value]) =>
+ this.renderer.setStyle(el, prop, value)
+ );
+ }
+
+ private createOverflowChip() {
+ this.overflowEl = this.renderer.createElement('div') as HTMLElement;
+ this.renderer.setProperty(this.overflowEl, 'className', this.overflowClass);
+ this.renderer.setStyle(this.overflowEl, 'display', 'none');
+ this.renderer.setStyle(this.overflowEl, 'userSelect', 'none');
+ this.renderer.setStyle(this.overflowEl, 'pointerEvents', 'none');
+ this.renderer.appendChild(this.host.nativeElement, this.overflowEl);
+ }
+
+ private observeResize(): void {
+ this.resizeObserver = new ResizeObserver(() => {
+ if (this.timeoutId) {
+ clearTimeout(this.timeoutId);
+ }
+ this.timeoutId = setTimeout(() => this.reflow());
+ });
+ this.resizeObserver.observe(this.host.nativeElement);
+ }
+
+ private observeMutations(): void {
+ this.mutationObserver = new MutationObserver(mutations => {
+ const relevantMutations = mutations.some(
+ mutation =>
+ mutation.type === 'childList' &&
+ Array.from(mutation.addedNodes).some(node => node instanceof HTMLElement && node.matches(this.chipSelector)) ||
+ Array.from(mutation.removedNodes).some(node => node instanceof HTMLElement && node.matches(this.chipSelector))
+ );
+
+ if (relevantMutations) {
+ if (this.timeoutId) {
+ clearTimeout(this.timeoutId);
+ }
+ this.timeoutId = setTimeout(() => this.reflow());
+ }
+ });
+
+ this.mutationObserver.observe(this.host.nativeElement, {
+ childList: true,
+ });
+ }
+
+ private reflow() {
+ const container = this.host.nativeElement;
+ const chips = Array.from(container.querySelectorAll(this.chipSelector))
+ .filter(el => el !== this.overflowEl);
+
+ if (!chips.length) {
+ return;
+ }
+
+ // 1. Show all chips to measure their natural widths
+ chips.forEach(chip => this.renderer.setStyle(chip, 'display', ''));
+ this.renderer.setStyle(this.overflowEl, 'display', 'none');
+
+ const chipWidths = chips.map(chip => Math.ceil(chip.offsetWidth));
+
+ // 2. Hide everything to measure the true available width
+ // without content inflating the table cell
+ chips.forEach(chip => this.renderer.setStyle(chip, 'display', 'none'));
+
+ const availableWidth = container.clientWidth;
+
+ if (!availableWidth) {
+ chips.forEach(chip => this.renderer.setStyle(chip, 'display', ''));
+ return;
+ }
+
+ // 3. Measure overflow chip width
+ this.renderer.setProperty(this.overflowEl, 'textContent', this.overflowTemplate.replace('{n}', '9'));
+ this.renderer.setStyle(this.overflowEl, 'display', 'inline-flex');
+ const minOverflowWidth = this.overflowEl.offsetWidth;
+ this.renderer.setStyle(this.overflowEl, 'display', 'none');
+
+ // 4. Determine which chips fit
+ let usedWidth = 0;
+ let hiddenCount = 0;
+ const hiddenChips: HTMLElement[] = [];
+ const minChips = Math.max(1, this.minChips);
+
+ for (let i = 0; i < chips.length; i++) {
+ const chipWidth = chipWidths[i];
+ const nextUsedWidth = usedWidth ? usedWidth + this.gap + chipWidth : chipWidth;
+ const withOverflow = nextUsedWidth + (nextUsedWidth ? this.gap : 0) + minOverflowWidth;
+
+ if (i < minChips || withOverflow <= availableWidth) {
+ this.renderer.setStyle(chips[i], 'display', 'inline-flex');
+ usedWidth = nextUsedWidth;
+ } else {
+ hiddenCount++;
+ hiddenChips.push(chips[i]);
+ }
+ }
+
+ if (hiddenCount > 0) {
+ this.renderer.setProperty(this.overflowEl, 'textContent', this.overflowTemplate.replace('{n}', String(hiddenCount)));
+ this.renderer.setStyle(this.overflowEl, 'display', 'inline-flex');
+ if (this.showOverflowedTitle) {
+ const title = hiddenChips
+ .map(chip => (chip.textContent || '').trim())
+ .filter(text => !!text)
+ .join(', ');
+ this.renderer.setAttribute(this.overflowEl, 'title', title);
+ // Allow pointer interaction so the browser's native title
+ // tooltip appears on hover.
+ this.renderer.removeStyle(this.overflowEl, 'pointerEvents');
+ } else {
+ this.renderer.removeAttribute(this.overflowEl, 'title');
+ this.renderer.setStyle(this.overflowEl, 'pointerEvents', 'none');
+ }
+ } else {
+ this.renderer.removeAttribute(this.overflowEl, 'title');
+ this.renderer.setStyle(this.overflowEl, 'pointerEvents', 'none');
+ }
+ }
+}
diff --git a/ui-ngx/src/app/shared/directives/photoswipe-gallery.directive.ts b/ui-ngx/src/app/shared/directives/photoswipe-gallery.directive.ts
new file mode 100644
index 0000000000..22eb3c76dd
--- /dev/null
+++ b/ui-ngx/src/app/shared/directives/photoswipe-gallery.directive.ts
@@ -0,0 +1,217 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { Directive, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
+import PhotoSwipeLightbox from 'photoswipe/lightbox';
+import PhotoSwipe from 'photoswipe';
+import cssjs from '@core/css/css';
+
+const PHOTO_GALLERY_STYLE_ID = 'photoswipe-gallery-style';
+const PHOTO_GALLERY_CLASS = 'tb-photoswipe-gallery';
+const PHOTO_GALLERY_STYLE =
+ '{\n'+
+ ' background: rgba(10, 10, 20, 0.55);\n' +
+ ' backdrop-filter: blur(18px);\n' +
+ ' opacity: 1;\n' +
+ '}\n' +
+ '\n' +
+ '.pswp__tb-photoswipe-caption {\n' +
+ ' position: fixed;\n' +
+ ' bottom: 1.5rem;\n' +
+ ' left: 50%;\n' +
+ ' transform: translate(-50%);\n' +
+ ' z-index: 10000;\n' +
+ ' display: flex;\n' +
+ ' flex-direction: column;\n' +
+ ' align-items: center;\n' +
+ ' gap: .25rem;\n' +
+ ' max-width: 80vw;\n' +
+ ' text-align: center;\n' +
+ ' pointer-events: none;\n' +
+ ' line-height: 1.75;\n' +
+ '}\n' +
+ '\n' +
+ '.pswp__tb-photoswipe-caption .tb-gallery-caption {\n' +
+ ' color: #fff;\n' +
+ ' font-size: 1.125rem;\n' +
+ ' line-height: 1.5;\n' +
+ ' background: #000000a6;\n' +
+ ' padding: .5rem 1.25rem;\n' +
+ ' border-radius: 8px;\n' +
+ ' backdrop-filter: blur(8px);\n' +
+ ' -webkit-backdrop-filter: blur(8px);\n' +
+ '}\n' +
+ '\n' +
+ '.pswp__tb-photoswipe-caption .tb-gallery-counter {\n' +
+ ' color: #fff9;\n' +
+ ' font-size: .8rem;\n' +
+ '}\n'+
+ '\n' +
+ '.pswp__item img.pswp__img {\n' +
+ ' display: block;\n' +
+ ' object-fit: contain;\n' +
+ ' border-radius: 4px; \n' +
+ ' box-shadow: 0 20px 60px #00000080;\n' +
+ '}\n' +
+ '\n' +
+ '.pswp__item .pswp__img--placeholder {\n' +
+ ' border-radius: 4px; \n' +
+ '}\n' +
+ '\n' +
+ '.pswp__button {\n' +
+ ' border-radius: 50%;\n' +
+ ' border: 1px solid rgba(255, 255, 255, .2);\n' +
+ ' background: #1e1e2899;\n' +
+ ' backdrop-filter: blur(8px);\n' +
+ ' -webkit-backdrop-filter: blur(8px);\n' +
+ ' color: #fff;\n' +
+ ' transition: background .18s ease, transform .18s ease;\n' +
+ ' outline: none;\n' +
+ '}\n' +
+ '\n' +
+ '.pswp__button:hover {\n' +
+ ' background: #3c3c50d9;\n' +
+ ' transform: scale(1.08);\n' +
+ ' outline: none;\n' +
+ '}\n' +
+ '\n' +
+ '.pswp__button.pswp__button--close, .pswp__button.pswp__button--zoom {\n' +
+ ' width: 40px;\n' +
+ ' height: 40px;\n' +
+ ' margin-top: 16px;\n' +
+ ' margin-right: 16px;\n' +
+ '}\n' +
+ '\n' +
+ '.pswp__button.pswp__button--close .pswp__icn, .pswp__button.pswp__button--zoom .pswp__icn {\n' +
+ ' width: 24px;\n' +
+ ' height: 24px;\n' +
+ ' top: 7px;\n' +
+ ' left: 7px;\n' +
+ '}\n' +
+ '\n' +
+ '.pswp__button.pswp__button--arrow {\n' +
+ ' width: 48px;\n' +
+ ' height: 48px;\n' +
+ ' margin-top: -24px;\n' +
+ '}\n' +
+ '\n' +
+ '.pswp__button.pswp__button--arrow .pswp__icn {\n' +
+ ' width: 32px;\n' +
+ ' height: 32px;\n' +
+ ' margin-top: 0;\n' +
+ ' top: 7px;\n' +
+ '}\n' +
+ '\n' +
+ '.pswp__button.pswp__button--arrow.pswp__button--arrow--prev {\n' +
+ ' left: 16px;\n' +
+ '}\n' +
+ '\n' +
+ '.pswp__button.pswp__button--arrow.pswp__button--arrow--prev .pswp__icn {\n' +
+ ' left: 12px;\n' +
+ '}\n' +
+ '\n' +
+ '.pswp__button.pswp__button--arrow.pswp__button--arrow--next {\n' +
+ ' right: 16px\n' +
+ '}\n' +
+ '\n' +
+ '.pswp__button.pswp__button--arrow.pswp__button--arrow--next .pswp__icn { \n' +
+ ' right: 12px;\n' +
+ '}';
+
+@Directive({
+ selector: '[tbPhotoSwipeGallery]',
+ standalone: false
+})
+export class PhotoSwipeGalleryDirective implements OnInit, OnDestroy {
+
+ @Input() galleryChildrenSelector = '.tb-image';
+ @Input() imageCaptionSelector = '.tb-image-tooltip';
+
+ private lightbox: PhotoSwipeLightbox;
+
+ constructor(
+ private elementRef: ElementRef
+ ) {}
+
+ ngOnInit(): void {
+ this.initPhotoSwipeGalleryStyle();
+ this.lightbox = new PhotoSwipeLightbox({
+ gallery: this.elementRef.nativeElement,
+ children: this.galleryChildrenSelector,
+ pswpModule: PhotoSwipe,
+ counter: false,
+ bgOpacity: 0,
+ mainClass: PHOTO_GALLERY_CLASS
+ });
+ this.lightbox.addFilter('domItemData', (itemData, element) => {
+ let image: HTMLImageElement;
+ if (element instanceof HTMLImageElement) {
+ image = element;
+ } else {
+ image = element.querySelector('img');
+ }
+ itemData.src = image.src;
+ itemData.width = image.naturalWidth;
+ itemData.height = image.naturalHeight;
+ itemData.thumbCropped = true;
+ return itemData;
+ });
+ this.lightbox.on('uiRegister', () => {
+ this.lightbox.pswp.ui.registerElement({
+ name: 'tb-photoswipe-caption',
+ order: 9,
+ isButton: false,
+ appendTo: 'root',
+ html: '',
+ onInit: (el, pswp) => {
+ const caption = el.querySelector('.tb-gallery-caption');
+ const counter = el.querySelector('.tb-gallery-counter');
+ this.lightbox.pswp.on('change', () => {
+ counter.innerText = pswp.currIndex + 1 + pswp.options.indexIndicatorSep + pswp.getNumItems();
+ const currSlideElement = this.lightbox.pswp.currSlide.data.element;
+ let imageTooltip: Element;
+ if (currSlideElement) {
+ imageTooltip = currSlideElement.querySelector(this.imageCaptionSelector);
+ }
+ if (imageTooltip) {
+ caption.style.display = 'block';
+ caption.innerHTML = imageTooltip.innerHTML || '';
+ } else {
+ caption.style.display = 'none';
+ }
+ });
+ }
+ });
+ });
+ this.lightbox.init();
+ }
+
+ ngOnDestroy(): void {
+ if (this.lightbox) {
+ this.lightbox.destroy();
+ }
+ }
+
+ private initPhotoSwipeGalleryStyle(): void {
+ const existingElement = document.getElementById(PHOTO_GALLERY_STYLE_ID);
+ if (!existingElement) {
+ const cssParser = new cssjs();
+ cssParser.testMode = false;
+ cssParser.cssPreviewNamespace = PHOTO_GALLERY_CLASS;
+ cssParser.createStyleElement(PHOTO_GALLERY_STYLE_ID, PHOTO_GALLERY_STYLE);
+ }
+ }
+}
diff --git a/ui-ngx/src/app/shared/directives/public-api.ts b/ui-ngx/src/app/shared/directives/public-api.ts
index 98c68dfd28..1ff38116fc 100644
--- a/ui-ngx/src/app/shared/directives/public-api.ts
+++ b/ui-ngx/src/app/shared/directives/public-api.ts
@@ -17,3 +17,4 @@
export * from './truncate-with-tooltip.directive';
export * from './ellipsis-chip-list.directive';
export * from './context-menu.directive';
+export * from './chip-overflow.directive';
diff --git a/ui-ngx/src/app/shared/models/ace/widget-completion.models.ts b/ui-ngx/src/app/shared/models/ace/widget-completion.models.ts
index e6ce4b3ef7..757677fadd 100644
--- a/ui-ngx/src/app/shared/models/ace/widget-completion.models.ts
+++ b/ui-ngx/src/app/shared/models/ace/widget-completion.models.ts
@@ -632,6 +632,28 @@ export const widgetContextCompletionsWithSettings = (settingsCompletions?: TbEdi
optional: true
}
]
+ },
+ invokeAction: {
+ description: 'Invoke action with JavaScript action source.',
+ meta: 'function',
+ args: [
+ {
+ name: '$event',
+ description: 'DOM event object associated with action.',
+ type: 'Event'
+ },
+ {
+ name: 'actionName',
+ description: 'Name of the configured action with JavaScript action source.',
+ type: 'string'
+ },
+ {
+ name: 'additionalParams',
+ description: 'Optional payload merged into the action context and forwarded to the configured JavaScript action function as its {
+ switch (provider) {
+ case AiProvider.ANTHROPIC:
+ case AiProvider.AMAZON_BEDROCK:
+ return [ResponseFormat.TEXT, ResponseFormat.JSON_SCHEMA];
+ default:
+ return [ResponseFormat.TEXT, ResponseFormat.JSON, ResponseFormat.JSON_SCHEMA];
+ }
+};
+
export interface AiModelWithUserMsg {
userMessage: {
contents: Array<{contentType: string; text: string}>;
diff --git a/ui-ngx/src/app/shared/models/constants.ts b/ui-ngx/src/app/shared/models/constants.ts
index 429bfe217a..1117f032ed 100644
--- a/ui-ngx/src/app/shared/models/constants.ts
+++ b/ui-ngx/src/app/shared/models/constants.ts
@@ -69,11 +69,14 @@ export const MediaBreakpoints = {
'lt-sm': 'screen and (max-width: 599px)',
'lt-md': 'screen and (max-width: 959px)',
'lt-lg': 'screen and (max-width: 1279px)',
+ 'lt-xmd': 'screen and (max-width: 1599px)',
'lt-xl': 'screen and (max-width: 1919px)',
'gt-xs': 'screen and (min-width: 600px)',
'gt-sm': 'screen and (min-width: 960px)',
'gt-md': 'screen and (min-width: 1280px)',
+ 'gt-xmd': 'screen and (min-width: 1600px)',
'gt-lg': 'screen and (min-width: 1920px)',
+ 'gt-xxl': 'screen and (min-width: 2448px)',
'gt-xl': 'screen and (min-width: 5001px)',
'md-lg': 'screen and (min-width: 960px) and (max-width: 1819px)'
};
diff --git a/ui-ngx/src/app/shared/models/iot-hub/device-package.models.ts b/ui-ngx/src/app/shared/models/iot-hub/device-package.models.ts
new file mode 100644
index 0000000000..97c3a3f7b6
--- /dev/null
+++ b/ui-ngx/src/app/shared/models/iot-hub/device-package.models.ts
@@ -0,0 +1,329 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+export enum InstallMethod {
+ // Direct device-to-platform transports
+ DIRECT_HTTP = 'DIRECT_HTTP',
+ DIRECT_MQTT = 'DIRECT_MQTT',
+ DIRECT_COAP = 'DIRECT_COAP',
+ DIRECT_LWM2M = 'DIRECT_LWM2M',
+ DIRECT_SNMP = 'DIRECT_SNMP',
+ // ThingsBoard IoT Gateway connectors
+ GATEWAY_MQTT = 'GATEWAY_MQTT',
+ GATEWAY_MODBUS = 'GATEWAY_MODBUS',
+ GATEWAY_OPCUA = 'GATEWAY_OPCUA',
+ GATEWAY_BACNET = 'GATEWAY_BACNET',
+ GATEWAY_BLE = 'GATEWAY_BLE',
+ GATEWAY_CAN = 'GATEWAY_CAN',
+ GATEWAY_FTP = 'GATEWAY_FTP',
+ GATEWAY_KNX = 'GATEWAY_KNX',
+ GATEWAY_OCPP = 'GATEWAY_OCPP',
+ GATEWAY_ODBC = 'GATEWAY_ODBC',
+ GATEWAY_REQUEST = 'GATEWAY_REQUEST',
+ GATEWAY_REST = 'GATEWAY_REST',
+ GATEWAY_SNMP = 'GATEWAY_SNMP',
+ GATEWAY_SOCKET = 'GATEWAY_SOCKET',
+ GATEWAY_XMPP = 'GATEWAY_XMPP',
+ // ChirpStack (CE-compatible LoRaWAN integration)
+ CHIRPSTACK = 'CHIRPSTACK',
+ // ThingsBoard PE integrations (CE shows "PE only" gate)
+ INTEGRATION_APACHE_PULSAR = 'INTEGRATION_APACHE_PULSAR',
+ INTEGRATION_AWS_IOT = 'INTEGRATION_AWS_IOT',
+ INTEGRATION_AWS_KINESIS = 'INTEGRATION_AWS_KINESIS',
+ INTEGRATION_AWS_SQS = 'INTEGRATION_AWS_SQS',
+ INTEGRATION_AZURE_EVENT_HUB = 'INTEGRATION_AZURE_EVENT_HUB',
+ INTEGRATION_AZURE_IOT_HUB = 'INTEGRATION_AZURE_IOT_HUB',
+ INTEGRATION_AZURE_SERVICE_BUS = 'INTEGRATION_AZURE_SERVICE_BUS',
+ INTEGRATION_CHIRPSTACK = 'INTEGRATION_CHIRPSTACK',
+ INTEGRATION_COAP = 'INTEGRATION_COAP',
+ INTEGRATION_CUSTOM = 'INTEGRATION_CUSTOM',
+ INTEGRATION_HTTP = 'INTEGRATION_HTTP',
+ INTEGRATION_IOT_CREATORS = 'INTEGRATION_IOT_CREATORS',
+ INTEGRATION_KAFKA = 'INTEGRATION_KAFKA',
+ INTEGRATION_KPN_THINGS = 'INTEGRATION_KPN_THINGS',
+ INTEGRATION_LORIOT = 'INTEGRATION_LORIOT',
+ INTEGRATION_MQTT = 'INTEGRATION_MQTT',
+ INTEGRATION_OPC_UA = 'INTEGRATION_OPC_UA',
+ INTEGRATION_PARTICLE = 'INTEGRATION_PARTICLE',
+ INTEGRATION_PUB_SUB = 'INTEGRATION_PUB_SUB',
+ INTEGRATION_RABBITMQ = 'INTEGRATION_RABBITMQ',
+ INTEGRATION_REMOTE = 'INTEGRATION_REMOTE',
+ INTEGRATION_SIGFOX = 'INTEGRATION_SIGFOX',
+ INTEGRATION_TCP = 'INTEGRATION_TCP',
+ INTEGRATION_THINGPARK = 'INTEGRATION_THINGPARK',
+ INTEGRATION_THINGPARK_ENTERPRISE = 'INTEGRATION_THINGPARK_ENTERPRISE',
+ INTEGRATION_TTI = 'INTEGRATION_TTI',
+ INTEGRATION_TTN = 'INTEGRATION_TTN',
+ INTEGRATION_TUYA = 'INTEGRATION_TUYA',
+ INTEGRATION_UDP = 'INTEGRATION_UDP'
+}
+
+export const installMethodLabels = new Map(
+ [
+ // Direct
+ [InstallMethod.DIRECT_HTTP, 'HTTP'],
+ [InstallMethod.DIRECT_MQTT, 'MQTT'],
+ [InstallMethod.DIRECT_COAP, 'CoAP'],
+ [InstallMethod.DIRECT_LWM2M, 'LwM2M'],
+ [InstallMethod.DIRECT_SNMP, 'SNMP'],
+ // Gateway connectors
+ [InstallMethod.GATEWAY_MQTT, 'MQTT Gateway'],
+ [InstallMethod.GATEWAY_MODBUS, 'Modbus Gateway'],
+ [InstallMethod.GATEWAY_OPCUA, 'OPC-UA Gateway'],
+ [InstallMethod.GATEWAY_BACNET, 'BACnet Gateway'],
+ [InstallMethod.GATEWAY_BLE, 'BLE Gateway'],
+ [InstallMethod.GATEWAY_CAN, 'CAN Gateway'],
+ [InstallMethod.GATEWAY_FTP, 'FTP Gateway'],
+ [InstallMethod.GATEWAY_KNX, 'KNX Gateway'],
+ [InstallMethod.GATEWAY_OCPP, 'OCPP Gateway'],
+ [InstallMethod.GATEWAY_ODBC, 'ODBC Gateway'],
+ [InstallMethod.GATEWAY_REQUEST, 'Request Gateway'],
+ [InstallMethod.GATEWAY_REST, 'REST Gateway'],
+ [InstallMethod.GATEWAY_SNMP, 'SNMP Gateway'],
+ [InstallMethod.GATEWAY_SOCKET, 'Socket Gateway'],
+ [InstallMethod.GATEWAY_XMPP, 'XMPP Gateway'],
+ // ChirpStack
+ [InstallMethod.CHIRPSTACK, 'ChirpStack'],
+ // PE integrations
+ [InstallMethod.INTEGRATION_APACHE_PULSAR, 'Apache Pulsar'],
+ [InstallMethod.INTEGRATION_AWS_IOT, 'AWS IoT'],
+ [InstallMethod.INTEGRATION_AWS_KINESIS, 'AWS Kinesis'],
+ [InstallMethod.INTEGRATION_AWS_SQS, 'AWS SQS'],
+ [InstallMethod.INTEGRATION_AZURE_EVENT_HUB, 'Azure Event Hub'],
+ [InstallMethod.INTEGRATION_AZURE_IOT_HUB, 'Azure IoT Hub'],
+ [InstallMethod.INTEGRATION_AZURE_SERVICE_BUS, 'Azure Service Bus'],
+ [InstallMethod.INTEGRATION_CHIRPSTACK, 'ChirpStack (Integration)'],
+ [InstallMethod.INTEGRATION_COAP, 'CoAP Integration'],
+ [InstallMethod.INTEGRATION_CUSTOM, 'Custom Integration'],
+ [InstallMethod.INTEGRATION_HTTP, 'HTTP Integration'],
+ [InstallMethod.INTEGRATION_IOT_CREATORS, 'IoT Creators'],
+ [InstallMethod.INTEGRATION_KAFKA, 'Apache Kafka'],
+ [InstallMethod.INTEGRATION_KPN_THINGS, 'KPN Things'],
+ [InstallMethod.INTEGRATION_LORIOT, 'LORIOT'],
+ [InstallMethod.INTEGRATION_MQTT, 'MQTT Integration'],
+ [InstallMethod.INTEGRATION_OPC_UA, 'OPC-UA Integration'],
+ [InstallMethod.INTEGRATION_PARTICLE, 'Particle'],
+ [InstallMethod.INTEGRATION_PUB_SUB, 'Google Pub/Sub'],
+ [InstallMethod.INTEGRATION_RABBITMQ, 'RabbitMQ'],
+ [InstallMethod.INTEGRATION_REMOTE, 'Remote Integration'],
+ [InstallMethod.INTEGRATION_SIGFOX, 'Sigfox'],
+ [InstallMethod.INTEGRATION_TCP, 'TCP Integration'],
+ [InstallMethod.INTEGRATION_THINGPARK, 'ThingPark Wireless'],
+ [InstallMethod.INTEGRATION_THINGPARK_ENTERPRISE, 'ThingPark Enterprise'],
+ [InstallMethod.INTEGRATION_TTI, 'The Things Industries'],
+ [InstallMethod.INTEGRATION_TTN, 'The Things Stack'],
+ [InstallMethod.INTEGRATION_TUYA, 'Tuya'],
+ [InstallMethod.INTEGRATION_UDP, 'UDP Integration']
+ ]
+);
+
+export const installMethodIcons = new Map(
+ [
+ // Direct connect — assets/direct-connect-icon
+ [InstallMethod.DIRECT_HTTP, 'assets/direct-connect-icon/http.svg'],
+ [InstallMethod.DIRECT_MQTT, 'assets/direct-connect-icon/mqtt.svg'],
+ [InstallMethod.DIRECT_COAP, 'assets/direct-connect-icon/coap.svg'],
+ [InstallMethod.DIRECT_LWM2M, 'assets/direct-connect-icon/lwm2m.svg'],
+ [InstallMethod.DIRECT_SNMP, 'assets/direct-connect-icon/snmp.svg'],
+ // Gateway connectors — assets/gateway-connect-icon
+ [InstallMethod.GATEWAY_MQTT, 'assets/gateway-connect-icon/mqtt.svg'],
+ [InstallMethod.GATEWAY_MODBUS, 'assets/gateway-connect-icon/modbus.svg'],
+ [InstallMethod.GATEWAY_OPCUA, 'assets/gateway-connect-icon/opc-ua.svg'],
+ [InstallMethod.GATEWAY_BACNET, 'assets/gateway-connect-icon/bacnet.svg'],
+ [InstallMethod.GATEWAY_BLE, 'assets/gateway-connect-icon/ble.svg'],
+ [InstallMethod.GATEWAY_CAN, 'assets/gateway-connect-icon/can.svg'],
+ [InstallMethod.GATEWAY_FTP, 'assets/gateway-connect-icon/ftp.svg'],
+ [InstallMethod.GATEWAY_OCPP, 'assets/gateway-connect-icon/ocpp.svg'],
+ [InstallMethod.GATEWAY_ODBC, 'assets/gateway-connect-icon/odbc.svg'],
+ [InstallMethod.GATEWAY_REQUEST, 'assets/gateway-connect-icon/request.svg'],
+ [InstallMethod.GATEWAY_REST, 'assets/gateway-connect-icon/rest.svg'],
+ [InstallMethod.GATEWAY_SNMP, 'assets/gateway-connect-icon/snmp.svg'],
+ [InstallMethod.GATEWAY_SOCKET, 'assets/gateway-connect-icon/socket.svg'],
+ [InstallMethod.GATEWAY_XMPP, 'assets/gateway-connect-icon/xmpp.svg'],
+ // ChirpStack — reuses the integration icon
+ [InstallMethod.CHIRPSTACK, 'assets/integration-icon/chirpstack.svg'],
+ // PE integrations — assets/integration-icon
+ [InstallMethod.INTEGRATION_APACHE_PULSAR, 'assets/integration-icon/apache-pulsar.svg'],
+ [InstallMethod.INTEGRATION_AWS_IOT, 'assets/integration-icon/aws-iot.svg'],
+ [InstallMethod.INTEGRATION_AWS_KINESIS, 'assets/integration-icon/aws-kinesis.svg'],
+ [InstallMethod.INTEGRATION_AWS_SQS, 'assets/integration-icon/aws-sqs.svg'],
+ [InstallMethod.INTEGRATION_AZURE_EVENT_HUB, 'assets/integration-icon/azure-event-hub.svg'],
+ [InstallMethod.INTEGRATION_AZURE_IOT_HUB, 'assets/integration-icon/azure-iot-hub.svg'],
+ [InstallMethod.INTEGRATION_AZURE_SERVICE_BUS, 'assets/integration-icon/azure-service-bus.svg'],
+ [InstallMethod.INTEGRATION_CHIRPSTACK, 'assets/integration-icon/chirpstack.svg'],
+ [InstallMethod.INTEGRATION_COAP, 'assets/integration-icon/coap.svg'],
+ [InstallMethod.INTEGRATION_CUSTOM, 'assets/integration-icon/custom.svg'],
+ [InstallMethod.INTEGRATION_HTTP, 'assets/integration-icon/http.svg'],
+ [InstallMethod.INTEGRATION_IOT_CREATORS, 'assets/integration-icon/iotcreators.com.svg'],
+ [InstallMethod.INTEGRATION_KAFKA, 'assets/integration-icon/kafka.svg'],
+ [InstallMethod.INTEGRATION_KPN_THINGS, 'assets/integration-icon/kpn.svg'],
+ [InstallMethod.INTEGRATION_LORIOT, 'assets/integration-icon/loriot.svg'],
+ [InstallMethod.INTEGRATION_MQTT, 'assets/integration-icon/mqtt.svg'],
+ [InstallMethod.INTEGRATION_OPC_UA, 'assets/integration-icon/opc-ua.svg'],
+ [InstallMethod.INTEGRATION_PARTICLE, 'assets/integration-icon/particle.svg'],
+ [InstallMethod.INTEGRATION_PUB_SUB, 'assets/integration-icon/pub-sub.svg'],
+ [InstallMethod.INTEGRATION_RABBITMQ, 'assets/integration-icon/rabbitmq.svg'],
+ [InstallMethod.INTEGRATION_SIGFOX, 'assets/integration-icon/sigfox.svg'],
+ [InstallMethod.INTEGRATION_TCP, 'assets/integration-icon/tcp.svg'],
+ [InstallMethod.INTEGRATION_THINGPARK, 'assets/integration-icon/thingpark.svg'],
+ [InstallMethod.INTEGRATION_THINGPARK_ENTERPRISE, 'assets/integration-icon/thingpark-enterprise.svg'],
+ [InstallMethod.INTEGRATION_TTI, 'assets/integration-icon/things-stack-industries.svg'],
+ [InstallMethod.INTEGRATION_TTN, 'assets/integration-icon/things-stack-сommunity.svg'],
+ [InstallMethod.INTEGRATION_TUYA, 'assets/integration-icon/tuya.svg'],
+ [InstallMethod.INTEGRATION_UDP, 'assets/integration-icon/udp.svg']
+ ]
+);
+
+export const peOnlyInstallMethods: ReadonlySet = new Set([
+ InstallMethod.INTEGRATION_APACHE_PULSAR,
+ InstallMethod.INTEGRATION_AWS_IOT,
+ InstallMethod.INTEGRATION_AWS_KINESIS,
+ InstallMethod.INTEGRATION_AWS_SQS,
+ InstallMethod.INTEGRATION_AZURE_EVENT_HUB,
+ InstallMethod.INTEGRATION_AZURE_IOT_HUB,
+ InstallMethod.INTEGRATION_AZURE_SERVICE_BUS,
+ InstallMethod.INTEGRATION_CHIRPSTACK,
+ InstallMethod.INTEGRATION_COAP,
+ InstallMethod.INTEGRATION_CUSTOM,
+ InstallMethod.INTEGRATION_HTTP,
+ InstallMethod.INTEGRATION_IOT_CREATORS,
+ InstallMethod.INTEGRATION_KAFKA,
+ InstallMethod.INTEGRATION_KPN_THINGS,
+ InstallMethod.INTEGRATION_LORIOT,
+ InstallMethod.INTEGRATION_MQTT,
+ InstallMethod.INTEGRATION_OPC_UA,
+ InstallMethod.INTEGRATION_PARTICLE,
+ InstallMethod.INTEGRATION_PUB_SUB,
+ InstallMethod.INTEGRATION_RABBITMQ,
+ InstallMethod.INTEGRATION_REMOTE,
+ InstallMethod.INTEGRATION_SIGFOX,
+ InstallMethod.INTEGRATION_TCP,
+ InstallMethod.INTEGRATION_THINGPARK,
+ InstallMethod.INTEGRATION_THINGPARK_ENTERPRISE,
+ InstallMethod.INTEGRATION_TTI,
+ InstallMethod.INTEGRATION_TTN,
+ InstallMethod.INTEGRATION_TUYA,
+ InstallMethod.INTEGRATION_UDP
+]);
+
+export enum InstallStepType {
+ SHOW_INSTRUCTION = 'SHOW_INSTRUCTION',
+ SHOW_FORM = 'SHOW_FORM',
+ DEVICE_PROFILE = 'DEVICE_PROFILE',
+ CONVERTER = 'CONVERTER',
+ INTEGRATION = 'INTEGRATION',
+ DEVICE = 'DEVICE',
+ GATEWAY = 'GATEWAY',
+ GATEWAY_CONNECTOR = 'GATEWAY_CONNECTOR',
+ DASHBOARD = 'DASHBOARD',
+ RULE_CHAIN = 'RULE_CHAIN'
+}
+
+export const ENTITY_STEP_TYPES = new Set([
+ InstallStepType.DEVICE_PROFILE,
+ InstallStepType.DEVICE,
+ InstallStepType.GATEWAY,
+ InstallStepType.GATEWAY_CONNECTOR,
+ InstallStepType.DASHBOARD,
+ InstallStepType.RULE_CHAIN
+]);
+
+export const stepTypeAliasMap: Record = {
+ [InstallStepType.DEVICE_PROFILE]: 'deviceProfile',
+ [InstallStepType.DEVICE]: 'device',
+ [InstallStepType.GATEWAY]: 'gateway',
+ [InstallStepType.GATEWAY_CONNECTOR]: 'gatewayConnector',
+ [InstallStepType.DASHBOARD]: 'dashboard',
+ [InstallStepType.RULE_CHAIN]: 'ruleChain'
+};
+
+export interface DeviceInstallStep {
+ type: InstallStepType;
+ name: string;
+ file?: string;
+ template?: string;
+ serverAttributes?: string;
+ sharedAttributes?: string;
+ credentials?: string;
+ dockerCompose?: string;
+}
+
+export interface DevicePackageInfo {
+ name: string;
+ description: string;
+ vendor: string;
+ hardwareType: string;
+ installMethods: string[];
+ installSteps: Record;
+ productURL?: string;
+ datasheetURL?: string;
+}
+
+export enum FormFieldType {
+ STRING = 'STRING',
+ INTEGER = 'INTEGER',
+ BOOLEAN = 'BOOLEAN',
+ SELECT = 'SELECT',
+ PASSWORD = 'PASSWORD'
+}
+
+export interface FormFieldValidator {
+ pattern: string;
+ message: string;
+}
+
+export interface FormFieldOption {
+ value: string;
+ label: string;
+}
+
+export interface FormFieldDefinition {
+ key: string;
+ label: string;
+ type: FormFieldType;
+ defaultValue?: any;
+ required?: boolean;
+ helpText?: string;
+ helpImage?: string;
+ validators?: FormFieldValidator[];
+ options?: FormFieldOption[];
+ randomGenerator?: boolean;
+ randomSize?: number;
+ randomByDefault?: boolean;
+}
+
+export interface EntityStepOutput {
+ id: string;
+ name: string;
+ url?: string;
+ token?: string;
+ dockerComposeUrl?: string;
+}
+
+export type EntityStepStatus = 'pending' | 'running' | 'success' | 'error' | 'conflict';
+
+export type ConflictType = 'use-or-overwrite' | 'overwrite-or-copy';
+
+export interface EntityStepProgress {
+ step: DeviceInstallStep;
+ status: EntityStepStatus;
+ resolvedName?: string;
+ entityOutput?: EntityStepOutput;
+ errorMessage?: string;
+ existingEntity?: EntityStepOutput;
+ conflictType?: ConflictType;
+ resolution?: string;
+}
diff --git a/ui-ngx/src/app/shared/models/iot-hub/iot-hub-creator.models.ts b/ui-ngx/src/app/shared/models/iot-hub/iot-hub-creator.models.ts
new file mode 100644
index 0000000000..3cf365fbb5
--- /dev/null
+++ b/ui-ngx/src/app/shared/models/iot-hub/iot-hub-creator.models.ts
@@ -0,0 +1,31 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+export interface CreatorView {
+ id: string;
+ createdTime: number;
+ displayName: string;
+ contactEmail: string;
+ website: string;
+ description: string;
+ avatarUrl: string;
+ githubUrl: string;
+ linkedinUrl: string;
+ twitterUrl: string;
+ youtubeUrl: string;
+ publishedCount: number;
+ verified: boolean;
+}
diff --git a/ui-ngx/src/app/shared/models/iot-hub/iot-hub-installed-item.models.ts b/ui-ngx/src/app/shared/models/iot-hub/iot-hub-installed-item.models.ts
new file mode 100644
index 0000000000..b2320453bb
--- /dev/null
+++ b/ui-ngx/src/app/shared/models/iot-hub/iot-hub-installed-item.models.ts
@@ -0,0 +1,183 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { BaseData } from '@shared/models/base-data';
+import { EntityType } from '@shared/models/entity-type.models';
+import { getEntityDetailsPageURL } from '@core/utils';
+
+export interface WidgetInstalledItemDescriptor {
+ type: 'WIDGET';
+ widgetTypeId: { id: string };
+}
+
+export interface DashboardInstalledItemDescriptor {
+ type: 'DASHBOARD';
+ dashboardId: { id: string };
+}
+
+export interface CalculatedFieldInstalledItemDescriptor {
+ type: 'CALCULATED_FIELD';
+ calculatedFieldId: { id: string };
+ entityId: { entityType: string; id: string };
+}
+
+export interface AlarmRuleInstalledItemDescriptor {
+ type: 'ALARM_RULE';
+ calculatedFieldId: { id: string };
+ entityId: { entityType: string; id: string };
+}
+
+export interface RuleChainInstalledItemDescriptor {
+ type: 'RULE_CHAIN';
+ ruleChainId: { id: string };
+}
+
+export interface DeviceInstalledItemDescriptor {
+ type: 'DEVICE';
+ createdEntityIds?: { entityType: string; id: string }[];
+ dashboardId?: { id: string };
+ selectedInstallMethod?: string;
+ installState?: Record;
+}
+
+export interface SolutionTemplateInstalledItemDescriptor {
+ type: 'SOLUTION_TEMPLATE';
+ createdEntityIds: { entityType: string; id: string }[];
+ dashboardId: { id: string };
+ publicId: { id: string };
+ mainDashboardPublic: boolean;
+ details: string;
+}
+
+export type IotHubInstalledItemDescriptor =
+ | WidgetInstalledItemDescriptor
+ | DashboardInstalledItemDescriptor
+ | CalculatedFieldInstalledItemDescriptor
+ | AlarmRuleInstalledItemDescriptor
+ | RuleChainInstalledItemDescriptor
+ | DeviceInstalledItemDescriptor
+ | SolutionTemplateInstalledItemDescriptor;
+
+export interface InstallItemVersionResult {
+ success: boolean;
+ errorMessage: string;
+ descriptor: IotHubInstalledItemDescriptor;
+}
+
+export enum InstallPlanEntryStatus {
+ WILL_INSTALL = 'WILL_INSTALL',
+ ALREADY_INSTALLED = 'ALREADY_INSTALLED',
+ MISSING = 'MISSING'
+}
+
+export interface InstallPlanEntry {
+ itemId: string;
+ versionId: string;
+ name: string;
+ type: string;
+ version: string;
+ status: InstallPlanEntryStatus;
+ root: boolean;
+ errorMessage?: string;
+}
+
+export interface InstallPlan {
+ rootVersionId: string;
+ entries: InstallPlanEntry[];
+}
+
+export interface InstallPlanResult {
+ success: boolean;
+ rolledBack: boolean;
+ errorMessage?: string;
+ rootDescriptor?: IotHubInstalledItemDescriptor;
+ entries: InstallPlanEntry[];
+ missingItemIds: string[];
+}
+
+export interface UpdateItemVersionResult {
+ success: boolean;
+ entityModified: boolean;
+ errorMessage: string;
+ descriptor: IotHubInstalledItemDescriptor;
+}
+
+export interface ItemPublishedVersionInfo {
+ itemId: string;
+ publishedVersionId: string;
+ publishedVersion: string;
+}
+
+export interface IotHubInstalledItem extends BaseData<{id: string}> {
+ tenantId: { id: string };
+ itemId: string;
+ itemVersionId: string;
+ itemName: string;
+ itemType: string;
+ version: string;
+ descriptor: IotHubInstalledItemDescriptor;
+}
+
+export const getInstalledItemUrl = (descriptor?: IotHubInstalledItemDescriptor): string | null => {
+ if (!descriptor) {
+ return null;
+ }
+ let entityId: string | null = null;
+ let entityType: EntityType | null = null;
+ let query: string | null = null;
+ switch (descriptor.type) {
+ case 'DEVICE':
+ entityId = descriptor.dashboardId?.id;
+ entityType = EntityType.DASHBOARD;
+ break;
+ case 'WIDGET':
+ entityId = descriptor.widgetTypeId?.id;
+ entityType = EntityType.WIDGET_TYPE;
+ break;
+ case 'DASHBOARD':
+ entityId = descriptor.dashboardId?.id;
+ entityType = EntityType.DASHBOARD;
+ break;
+ case 'CALCULATED_FIELD':
+ case 'ALARM_RULE':
+ entityId = descriptor.entityId?.id;
+ entityType = descriptor.entityId?.entityType as EntityType;
+ if (descriptor.type === 'CALCULATED_FIELD') {
+ query = 'selectedTab=cf';
+ }
+ break;
+ case 'RULE_CHAIN':
+ entityId = descriptor.ruleChainId?.id;
+ entityType = EntityType.RULE_CHAIN;
+ break;
+ case 'SOLUTION_TEMPLATE':
+ entityId = descriptor.dashboardId?.id;
+ entityType = EntityType.DASHBOARD;
+ break;
+ }
+ if (entityType && entityId) {
+ let url = getEntityDetailsPageURL(entityId, entityType);
+ if (url) {
+ if (query) {
+ url = `${url}?${query}`;
+ }
+ return url;
+ } else {
+ return null;
+ }
+ }
+ return null;
+}
diff --git a/ui-ngx/src/app/shared/models/iot-hub/iot-hub-item.models.ts b/ui-ngx/src/app/shared/models/iot-hub/iot-hub-item.models.ts
new file mode 100644
index 0000000000..6c528384c4
--- /dev/null
+++ b/ui-ngx/src/app/shared/models/iot-hub/iot-hub-item.models.ts
@@ -0,0 +1,89 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+export enum ItemType {
+ WIDGET = 'WIDGET',
+ DASHBOARD = 'DASHBOARD',
+ SOLUTION_TEMPLATE = 'SOLUTION_TEMPLATE',
+ CALCULATED_FIELD = 'CALCULATED_FIELD',
+ ALARM_RULE = 'ALARM_RULE',
+ RULE_CHAIN = 'RULE_CHAIN',
+ DEVICE = 'DEVICE'
+}
+
+export const itemTypeTranslations = new Map(
+ [
+ [ItemType.WIDGET, 'item.type-widget'],
+ [ItemType.DASHBOARD, 'item.type-dashboard'],
+ [ItemType.SOLUTION_TEMPLATE, 'item.type-solution-template'],
+ [ItemType.CALCULATED_FIELD, 'item.type-calculated-field'],
+ [ItemType.ALARM_RULE, 'item.type-alarm-rule'],
+ [ItemType.RULE_CHAIN, 'item.type-rule-chain'],
+ [ItemType.DEVICE, 'item.type-device']
+ ]
+);
+
+// Canonical icon lookup per item type. Values are tb-icon
+// identifiers (Material symbol names or `mdi:*` strings) and should
+// be used everywhere an icon is rendered for an item type so the
+// mapping stays consistent across the app.
+export const itemTypeIcons: Record = {
+ [ItemType.WIDGET]: 'widgets',
+ [ItemType.DASHBOARD]: 'dashboard',
+ [ItemType.SOLUTION_TEMPLATE]: 'apps',
+ [ItemType.CALCULATED_FIELD]: 'mdi:function-variant',
+ [ItemType.RULE_CHAIN]: 'settings_ethernet',
+ [ItemType.ALARM_RULE]: 'mdi:bell-cog',
+ [ItemType.DEVICE]: 'devices_other'
+};
+
+export const getItemTypeIcon = (type?: string | null): string =>
+ type && itemTypeIcons[type] ? itemTypeIcons[type] : 'category';
+
+/**
+ * Item types discoverable to creators in the marketplace UI.
+ * DASHBOARD is intentionally absent (IoT Hub no longer accepts Dashboard contributions).
+ * Defensive code paths (item card, detail dialog descriptor switch, installed-items table,
+ * install handler, /iot-hub/dashboards route) remain functional for already-installed items.
+ */
+export const CREATOR_VISIBLE_ITEM_TYPES: ItemType[] = [
+ ItemType.WIDGET,
+ ItemType.SOLUTION_TEMPLATE,
+ ItemType.DEVICE,
+ ItemType.CALCULATED_FIELD,
+ ItemType.ALARM_RULE,
+ ItemType.RULE_CHAIN,
+];
+
+export interface FilterParamInfo {
+ key: string;
+ totalItems: number;
+ totalInstallCount: number;
+}
+
+export interface ItemTypeFilterInfo {
+ types: FilterParamInfo[];
+ categories: FilterParamInfo[];
+ useCases: FilterParamInfo[];
+ vendors: FilterParamInfo[];
+ hardwareTypes: FilterParamInfo[];
+ connectivities: Record;
+}
+
+export interface WidgetCategory {
+ name: string;
+ image: string;
+}
diff --git a/ui-ngx/src/app/shared/models/iot-hub/iot-hub-version.models.ts b/ui-ngx/src/app/shared/models/iot-hub/iot-hub-version.models.ts
new file mode 100644
index 0000000000..250a2f19f7
--- /dev/null
+++ b/ui-ngx/src/app/shared/models/iot-hub/iot-hub-version.models.ts
@@ -0,0 +1,189 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { ItemType } from './iot-hub-item.models';
+import { PageLink } from '@shared/models/page/page-link';
+
+export const widgetTypeTranslations = new Map([
+ ['timeseries', 'item-data.widget-type-timeseries'],
+ ['latest', 'item-data.widget-type-latest'],
+ ['rpc', 'item-data.widget-type-rpc'],
+ ['alarm', 'item-data.widget-type-alarm'],
+ ['static', 'item-data.widget-type-static'],
+]);
+
+export const cfTypeTranslations = new Map([
+ ['SIMPLE', 'item-data.cf-type-simple'],
+ ['SCRIPT', 'item-data.cf-type-script'],
+ ['GEOFENCING', 'item-data.cf-type-geofencing'],
+ ['ALARM', 'item-data.cf-type-alarm'],
+ ['PROPAGATION', 'item-data.cf-type-propagation'],
+ ['RELATED_ENTITIES_AGGREGATION', 'item-data.cf-type-related-entities-aggregation'],
+ ['ENTITY_AGGREGATION', 'item-data.cf-type-entity-aggregation'],
+]);
+
+export const cfTypeIcons = new Map([
+ ['SIMPLE', 'calculate'],
+ ['SCRIPT', 'code'],
+ ['GEOFENCING', 'share_location'],
+ ['ALARM', 'notification_important'],
+ ['PROPAGATION', 'account_tree'],
+ ['RELATED_ENTITIES_AGGREGATION', 'hub'],
+ ['ENTITY_AGGREGATION', 'functions'],
+]);
+
+export enum NodeComponentType {
+ ENRICHMENT = 'ENRICHMENT',
+ FILTER = 'FILTER',
+ TRANSFORMATION = 'TRANSFORMATION',
+ ACTION = 'ACTION',
+ ANALYTICS = 'ANALYTICS',
+ EXTERNAL = 'EXTERNAL',
+ FLOW = 'FLOW',
+ UNKNOWN = 'UNKNOWN'
+}
+
+export const nodeComponentTypeTranslations = new Map([
+ [NodeComponentType.ENRICHMENT, 'item-data.node-type-enrichment'],
+ [NodeComponentType.FILTER, 'item-data.node-type-filter'],
+ [NodeComponentType.TRANSFORMATION, 'item-data.node-type-transformation'],
+ [NodeComponentType.ACTION, 'item-data.node-type-action'],
+ [NodeComponentType.ANALYTICS, 'item-data.node-type-analytics'],
+ [NodeComponentType.EXTERNAL, 'item-data.node-type-external'],
+ [NodeComponentType.FLOW, 'item-data.node-type-flow'],
+ [NodeComponentType.UNKNOWN, 'item-data.node-type-unknown'],
+]);
+
+export interface NodeInfo {
+ name: string;
+ type: NodeComponentType;
+}
+
+export const ruleChainTypeTranslations = new Map([
+ ['CORE', 'item-data.rule-chain-type-core'],
+ ['EDGE', 'item-data.rule-chain-type-edge'],
+]);
+
+export interface MpItemVersionResource {
+ id: string;
+ type: string;
+}
+
+export interface MpItemVersionView {
+ id: string;
+ createdTime: number;
+ version: string;
+ publishedTime: number;
+ changelog: string;
+ dataDescriptor: any;
+ image: string;
+ icon: string;
+ color: string;
+ description: string;
+ categories: string[];
+ useCases: string[];
+ itemId: string;
+ creatorId: string;
+ name: string;
+ type: ItemType;
+ peOnly: boolean;
+ tags: string[];
+ creatorDisplayName: string;
+ creatorWebsite: string;
+ creatorContactEmail: string;
+ creatorDescription: string;
+ creatorAvatarUrl: string;
+ creatorVerified: boolean;
+ installCount: number;
+ totalInstallCount: number;
+ resources: MpItemVersionResource[];
+ relatedItems?: string[];
+ checksum?: string;
+}
+
+// 404 body shapes returned by the public listing item-version endpoint
+// (GET /api/listings/public/by-slug/{slug}/item-version) when no
+// version matches the caller's edition / platform combination.
+export interface ListingItemVersionNotFound {
+ noMatchingVersions?: boolean;
+ peRequired?: boolean;
+ minTbVersionRequired?: number;
+}
+
+export interface MpItemVersionQueryOptions {
+ type?: string;
+ peOnly?: boolean;
+ creatorId?: string;
+ categories?: string[];
+ useCases?: string[];
+ cfTypes?: string[];
+ widgetTypes?: string[];
+ ruleChainTypes?: string[];
+ tbVersion?: number;
+ hardwareTypes?: string[];
+ connectivity?: string[];
+ vendors?: string[];
+ scadaFirst?: boolean;
+}
+
+export class MpItemVersionQuery {
+ constructor(public pageLink: PageLink, public options: MpItemVersionQueryOptions = {}) {}
+
+ public toQuery(): string {
+ let query = this.pageLink.toQuery();
+ const o = this.options;
+ if (o.type) {
+ query += `&type=${o.type}`;
+ }
+ if (o.peOnly != null) {
+ query += `&peOnly=${o.peOnly}`;
+ }
+ if (o.creatorId) {
+ query += `&creatorId=${o.creatorId}`;
+ }
+ if (o.categories?.length) {
+ query += o.categories.map(c => `&categories=${encodeURIComponent(c)}`).join('');
+ }
+ if (o.useCases?.length) {
+ query += o.useCases.map(u => `&useCases=${encodeURIComponent(u)}`).join('');
+ }
+ if (o.cfTypes?.length) {
+ query += o.cfTypes.map(t => `&cfTypes=${encodeURIComponent(t)}`).join('');
+ }
+ if (o.widgetTypes?.length) {
+ query += o.widgetTypes.map(t => `&widgetTypes=${encodeURIComponent(t)}`).join('');
+ }
+ if (o.ruleChainTypes?.length) {
+ query += o.ruleChainTypes.map(t => `&ruleChainTypes=${encodeURIComponent(t)}`).join('');
+ }
+ if (o.tbVersion != null) {
+ query += `&tbVersion=${o.tbVersion}`;
+ }
+ if (o.hardwareTypes?.length) {
+ query += o.hardwareTypes.map(ht => `&hardwareTypes=${encodeURIComponent(ht)}`).join('');
+ }
+ if (o.connectivity?.length) {
+ query += o.connectivity.map(c => `&connectivity=${encodeURIComponent(c)}`).join('');
+ }
+ if (o.vendors?.length) {
+ query += o.vendors.map(v => `&vendors=${encodeURIComponent(v)}`).join('');
+ }
+ if (o.scadaFirst != null) {
+ query += `&scadaFirst=${o.scadaFirst}`;
+ }
+ return query;
+ }
+}
diff --git a/ui-ngx/src/app/shared/models/widget/maps/map.models.ts b/ui-ngx/src/app/shared/models/widget/maps/map.models.ts
index 6db3b1481b..e8141e9eb1 100644
--- a/ui-ngx/src/app/shared/models/widget/maps/map.models.ts
+++ b/ui-ngx/src/app/shared/models/widget/maps/map.models.ts
@@ -1127,6 +1127,8 @@ export interface ImageMapSourceSettings {
entityKey?: DataKey;
}
+export const WEBGL_ERROR_EVENT = 'gl-error';
+
export const imageMapSourceSettingsValid = (imageSource: ImageMapSourceSettings): boolean => {
if (!imageSource?.sourceType) {
return false;
diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts
index c3791c1332..d5073332d2 100644
--- a/ui-ngx/src/app/shared/shared.module.ts
+++ b/ui-ngx/src/app/shared/shared.module.ts
@@ -68,6 +68,7 @@ import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
import { UserMenuComponent } from '@shared/components/user-menu.component';
import { TruncateWithTooltipDirective } from '@shared/directives/truncate-with-tooltip.directive';
import { ContextMenuDirective } from '@shared/directives/context-menu.directive';
+import { ChipOverflowDirective } from '@shared/directives/chip-overflow.directive';
import { NospacePipe } from '@shared/pipe/nospace.pipe';
import { TranslateModule } from '@ngx-translate/core';
import { TbCheckboxComponent } from '@shared/components/tb-checkbox.component';
@@ -146,7 +147,6 @@ import { QueueAutocompleteComponent } from '@shared/components/queue/queue-autoc
import { ContactComponent } from '@shared/components/contact.component';
import { TimezoneSelectComponent } from '@shared/components/time/timezone-select.component';
import { FileSizePipe } from '@shared/pipe/file-size.pipe';
-import { WidgetsBundleSearchComponent } from '@shared/components/widgets-bundle-search.component';
import { SelectableColumnsPipe } from '@shared/pipe/selectable-columns.pipe';
import { QuickTimeIntervalComponent } from '@shared/components/time/quick-time-interval.component';
import { OtaPackageAutocompleteComponent } from '@shared/components/ota-package/ota-package-autocomplete.component';
@@ -229,6 +229,10 @@ import { EntityKeyAutocompleteComponent } from '@shared/components/entity/entity
import { DurationLeftPipe } from '@shared/pipe/duration-left.pipe';
import { MqttVersionSelectComponent } from '@shared/components/mqtt-version-select.component';
import { MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS } from '@angular/material/button-toggle';
+import { PhotoSwipeGalleryDirective } from '@shared/directives/photoswipe-gallery.directive';
+import {
+ AutocompleteAutoScrollRepositionDirective
+} from '@shared/directives/autocomplete-auto-scroll-reposition.directive';
export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) {
return markedOptionsService;
@@ -277,8 +281,6 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
{
provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
useValue: {
- hasBackdrop: true,
- backdropClass: 'cdk-overlay-transparent-backdrop',
hideSingleSelectionIndicator: true
}
},
@@ -386,6 +388,9 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
MarkdownEditorComponent,
TruncateWithTooltipDirective,
ContextMenuDirective,
+ ChipOverflowDirective,
+ PhotoSwipeGalleryDirective,
+ AutocompleteAutoScrollRepositionDirective,
NospacePipe,
MillisecondsToTimeStringPipe,
EnumToArrayPipe,
@@ -406,7 +411,6 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
EntityGatewaySelectComponent,
ContactComponent,
OtaPackageAutocompleteComponent,
- WidgetsBundleSearchComponent,
CopyButtonComponent,
TogglePasswordComponent,
WidgetButtonToggleComponent,
@@ -651,6 +655,9 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
MarkdownEditorComponent,
TruncateWithTooltipDirective,
ContextMenuDirective,
+ ChipOverflowDirective,
+ PhotoSwipeGalleryDirective,
+ AutocompleteAutoScrollRepositionDirective,
NospacePipe,
MillisecondsToTimeStringPipe,
EnumToArrayPipe,
@@ -672,7 +679,6 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
EntityGatewaySelectComponent,
ContactComponent,
OtaPackageAutocompleteComponent,
- WidgetsBundleSearchComponent,
CopyButtonComponent,
TogglePasswordComponent,
WidgetButtonToggleComponent,
diff --git a/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json b/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json
index 6e3b698200..44c1541429 100644
--- a/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json
+++ b/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json
@@ -6,6 +6,31 @@
"configuration": {
"description": "",
"widgets": {
+ "fe678c4f-ea86-4cae-8d81-6fca493fe311": {
+ "type": "static",
+ "sizeX": 7.5,
+ "sizeY": 6.5,
+ "config": {
+ "showTitle": false,
+ "backgroundColor": "rgb(255, 255, 255)",
+ "color": "rgba(0, 0, 0, 0.87)",
+ "padding": "16px",
+ "settings": {},
+ "title": "IoT Hub",
+ "dropShadow": true,
+ "enableFullscreen": false,
+ "widgetStyle": {},
+ "widgetCss": "",
+ "pageSize": 1024,
+ "noDataDisplayMessage": "",
+ "showLegend": false,
+ "datasources": []
+ },
+ "row": 0,
+ "col": 0,
+ "id": "fe678c4f-ea86-4cae-8d81-6fca493fe311",
+ "typeFullFqn": "system.home_page_widgets.iot_hub"
+ },
"d70cc256-4c7b-ee06-9905-b8c5e546605f": {
"type": "latest",
"sizeX": 5,
@@ -1228,55 +1253,63 @@
"widgets": {
"d70cc256-4c7b-ee06-9905-b8c5e546605f": {
"sizeX": 42,
- "sizeY": 29,
- "row": 13,
+ "sizeY": 17,
+ "row": 27,
"col": 43,
- "mobileOrder": 4,
+ "mobileOrder": 5,
"mobileHeight": 10
},
"867f82cf-ecf2-2d5c-35cb-08c6f2edc3a4": {
"sizeX": 29,
- "sizeY": 16,
- "row": 42,
+ "sizeY": 14,
+ "row": 44,
"col": 28,
"mobileHide": true
},
"ebbd0a6e-8a47-e770-5086-7f4974250f2d": {
"sizeX": 28,
- "sizeY": 16,
- "row": 42,
+ "sizeY": 14,
+ "row": 44,
"col": 57,
- "mobileOrder": 3,
+ "mobileOrder": 4,
"mobileHeight": 10
},
"9e3ef045-d8bc-1640-a3f4-2dd10b19d50e": {
"sizeX": 28,
- "sizeY": 16,
- "row": 42,
+ "sizeY": 14,
+ "row": 44,
"col": 0,
"mobileHide": true
},
"6d6e2b1d-6ce7-4678-3745-c6b0897b2674": {
"sizeX": 43,
- "sizeY": 29,
- "row": 13,
+ "sizeY": 17,
+ "row": 27,
"col": 0,
"mobileOrder": 2,
"mobileHeight": 10
},
+ "fe678c4f-ea86-4cae-8d81-6fca493fe311": {
+ "sizeX": 85,
+ "sizeY": 15,
+ "row": 0,
+ "col": 0,
+ "mobileOrder": 3,
+ "mobileHeight": 12
+ },
"35d3ac3b-f1af-dc3d-a1d1-11f351d16fc6": {
"sizeX": 43,
- "sizeY": 13,
- "row": 0,
+ "sizeY": 12,
+ "row": 15,
"col": 0,
"mobileHeight": 9,
"mobileOrder": 1
},
"7ac20b6a-dc40-b18e-9f5f-bca20bc693bb": {
"sizeX": 42,
- "sizeY": 13,
+ "sizeY": 12,
"mobileHeight": 9,
- "row": 0,
+ "row": 15,
"col": 43,
"mobileOrder": 0
},
@@ -1365,15 +1398,15 @@
"widgets": {
"ed33e56f-293b-aaaa-ad19-0cf499dc926f": {
"sizeX": 120,
- "sizeY": 45,
+ "sizeY": 44,
"row": 0,
"col": 0,
"mobileHide": true
},
"8c5207d8-7103-4dc2-db48-d61c0c8c61fd": {
"sizeX": 120,
- "sizeY": 17,
- "row": 45,
+ "sizeY": 14,
+ "row": 44,
"col": 0
}
},
diff --git a/ui-ngx/src/assets/direct-connect-icon/coap.svg b/ui-ngx/src/assets/direct-connect-icon/coap.svg
new file mode 100644
index 0000000000..9405b5b791
--- /dev/null
+++ b/ui-ngx/src/assets/direct-connect-icon/coap.svg
@@ -0,0 +1,6 @@
+
diff --git a/ui-ngx/src/assets/direct-connect-icon/http.svg b/ui-ngx/src/assets/direct-connect-icon/http.svg
new file mode 100644
index 0000000000..9e97fe918c
--- /dev/null
+++ b/ui-ngx/src/assets/direct-connect-icon/http.svg
@@ -0,0 +1,9 @@
+
diff --git a/ui-ngx/src/assets/direct-connect-icon/lwm2m.svg b/ui-ngx/src/assets/direct-connect-icon/lwm2m.svg
new file mode 100644
index 0000000000..6762a50a7c
--- /dev/null
+++ b/ui-ngx/src/assets/direct-connect-icon/lwm2m.svg
@@ -0,0 +1,14 @@
+
diff --git a/ui-ngx/src/assets/direct-connect-icon/mqtt.svg b/ui-ngx/src/assets/direct-connect-icon/mqtt.svg
new file mode 100644
index 0000000000..50ef36f2f7
--- /dev/null
+++ b/ui-ngx/src/assets/direct-connect-icon/mqtt.svg
@@ -0,0 +1,10 @@
+
diff --git a/ui-ngx/src/assets/direct-connect-icon/snmp.svg b/ui-ngx/src/assets/direct-connect-icon/snmp.svg
new file mode 100644
index 0000000000..d11c791135
--- /dev/null
+++ b/ui-ngx/src/assets/direct-connect-icon/snmp.svg
@@ -0,0 +1,3 @@
+
diff --git a/ui-ngx/src/assets/gateway-connect-icon/bacnet.svg b/ui-ngx/src/assets/gateway-connect-icon/bacnet.svg
new file mode 100644
index 0000000000..a967a94c6c
--- /dev/null
+++ b/ui-ngx/src/assets/gateway-connect-icon/bacnet.svg
@@ -0,0 +1,9 @@
+
diff --git a/ui-ngx/src/assets/gateway-connect-icon/ble.svg b/ui-ngx/src/assets/gateway-connect-icon/ble.svg
new file mode 100644
index 0000000000..a8fbd84952
--- /dev/null
+++ b/ui-ngx/src/assets/gateway-connect-icon/ble.svg
@@ -0,0 +1,3 @@
+
diff --git a/ui-ngx/src/assets/gateway-connect-icon/can.svg b/ui-ngx/src/assets/gateway-connect-icon/can.svg
new file mode 100644
index 0000000000..d01d4b2d3a
--- /dev/null
+++ b/ui-ngx/src/assets/gateway-connect-icon/can.svg
@@ -0,0 +1,3 @@
+
diff --git a/ui-ngx/src/assets/gateway-connect-icon/ftp.svg b/ui-ngx/src/assets/gateway-connect-icon/ftp.svg
new file mode 100644
index 0000000000..41f46d4f1c
--- /dev/null
+++ b/ui-ngx/src/assets/gateway-connect-icon/ftp.svg
@@ -0,0 +1,3 @@
+
diff --git a/ui-ngx/src/assets/gateway-connect-icon/modbus.svg b/ui-ngx/src/assets/gateway-connect-icon/modbus.svg
new file mode 100644
index 0000000000..e93eb319ba
--- /dev/null
+++ b/ui-ngx/src/assets/gateway-connect-icon/modbus.svg
@@ -0,0 +1,4 @@
+
diff --git a/ui-ngx/src/assets/gateway-connect-icon/mqtt.svg b/ui-ngx/src/assets/gateway-connect-icon/mqtt.svg
new file mode 100644
index 0000000000..50ef36f2f7
--- /dev/null
+++ b/ui-ngx/src/assets/gateway-connect-icon/mqtt.svg
@@ -0,0 +1,10 @@
+
diff --git a/ui-ngx/src/assets/gateway-connect-icon/ocpp.svg b/ui-ngx/src/assets/gateway-connect-icon/ocpp.svg
new file mode 100644
index 0000000000..218010ee50
--- /dev/null
+++ b/ui-ngx/src/assets/gateway-connect-icon/ocpp.svg
@@ -0,0 +1,3 @@
+
diff --git a/ui-ngx/src/assets/gateway-connect-icon/odbc.svg b/ui-ngx/src/assets/gateway-connect-icon/odbc.svg
new file mode 100644
index 0000000000..44dac5506c
--- /dev/null
+++ b/ui-ngx/src/assets/gateway-connect-icon/odbc.svg
@@ -0,0 +1,6 @@
+
diff --git a/ui-ngx/src/assets/gateway-connect-icon/opc-ua.svg b/ui-ngx/src/assets/gateway-connect-icon/opc-ua.svg
new file mode 100644
index 0000000000..a1eb4bf55c
--- /dev/null
+++ b/ui-ngx/src/assets/gateway-connect-icon/opc-ua.svg
@@ -0,0 +1,3 @@
+
diff --git a/ui-ngx/src/assets/gateway-connect-icon/request.svg b/ui-ngx/src/assets/gateway-connect-icon/request.svg
new file mode 100644
index 0000000000..de4a5616f1
--- /dev/null
+++ b/ui-ngx/src/assets/gateway-connect-icon/request.svg
@@ -0,0 +1,3 @@
+
diff --git a/ui-ngx/src/assets/gateway-connect-icon/rest.svg b/ui-ngx/src/assets/gateway-connect-icon/rest.svg
new file mode 100644
index 0000000000..919462645b
--- /dev/null
+++ b/ui-ngx/src/assets/gateway-connect-icon/rest.svg
@@ -0,0 +1,3 @@
+
diff --git a/ui-ngx/src/assets/gateway-connect-icon/snmp.svg b/ui-ngx/src/assets/gateway-connect-icon/snmp.svg
new file mode 100644
index 0000000000..d11c791135
--- /dev/null
+++ b/ui-ngx/src/assets/gateway-connect-icon/snmp.svg
@@ -0,0 +1,3 @@
+
diff --git a/ui-ngx/src/assets/gateway-connect-icon/socket.svg b/ui-ngx/src/assets/gateway-connect-icon/socket.svg
new file mode 100644
index 0000000000..636b022f2a
--- /dev/null
+++ b/ui-ngx/src/assets/gateway-connect-icon/socket.svg
@@ -0,0 +1,15 @@
+
diff --git a/ui-ngx/src/assets/gateway-connect-icon/xmpp.svg b/ui-ngx/src/assets/gateway-connect-icon/xmpp.svg
new file mode 100644
index 0000000000..236ae42abb
--- /dev/null
+++ b/ui-ngx/src/assets/gateway-connect-icon/xmpp.svg
@@ -0,0 +1,3 @@
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/container_angular_fn.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/container_angular_fn.md
new file mode 100644
index 0000000000..2f739b9770
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/container_angular_fn.md
@@ -0,0 +1,135 @@
+#### Container function
+
+
+
+ +*function (ctx): void* + +A JavaScript function used to expose data and handlers to the Angular template by assigning them to
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/container_plain_fn.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/container_plain_fn.md new file mode 100644 index 0000000000..5874a6e657 --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/container_plain_fn.md @@ -0,0 +1,124 @@ +#### Container function + + +
+ +*function (ctx, container): void* + +A JavaScript function used to initialize libraries, build or update the DOM inside the widget content element, wire up event handlers and drive the widget through the widget context. + +**Parameters:** + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_drawer_css.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_drawer_css.md new file mode 100644 index 0000000000..8bd68b8197 --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_drawer_css.md @@ -0,0 +1,201 @@ +#### CSS of slide-over device detail + +```css +{:code-style="max-height: 400px;"} +.dd { + height: 100%; + font-family: 'Inter', 'Roboto', system-ui, sans-serif; + color: #0f172a; +} + +.dd__main { + padding: 20px; + box-sizing: border-box; +} + +.dd__title { + margin: 0 0 16px; + font-family: 'Roboto', sans-serif; + font-size: 20px; + font-weight: 500; +} + +.dd__card { + background: #fff; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.12); +} + +.dd__table { + width: 100%; +} + +.dd__table .mat-column-name { + flex: 1; +} + +.dd__table .mat-column-people { + flex: 0 0 120px; + justify-content: flex-end; +} + +.dd__table .mat-mdc-row { + cursor: pointer; +} + +.dd__table .mat-mdc-row:hover { + background: rgba(0, 0, 0, 0.04); +} + +.dd__table .mat-mdc-row.is-active { + background: rgba(47, 107, 255, 0.08); +} + +.dd__drawer { + width: 70%; + box-sizing: border-box; +} + +.dd__panel { + display: flex; + flex-direction: column; + gap: 16px; + padding: 24px; +} + +.dd__panel-bar { + display: flex; + align-items: flex-start; + justify-content: space-between; +} + +.dd__panel-eyebrow { + font-size: 11px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: .08em; + color: #94a3b8; +} + +.dd__panel-title { + margin: 2px 0 0; + font-size: 22px; + font-weight: 800; +} + +.dd__close { + border: 0; + background: #f1f5f9; + border-radius: 10px; + width: 36px; + height: 36px; + font-size: 16px; + cursor: pointer; + color: #475569; +} + +.dd__close:hover { + background: #e2e8f0; +} + +.dd__cards { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 12px; +} + +.card { + display: flex; + flex-direction: column; + gap: 4px; + padding: 14px 16px; + border-radius: 14px; + background: linear-gradient(180deg, #f8fafc, #eef2f7); + border: 1px solid #e6ebf2; +} + +.card__label { + font-size: 10px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: .08em; + color: #94a3b8; +} + +.card__value { + font-size: 18px; + font-weight: 800; +} + +.dd__actions { + display: flex; + gap: 10px; +} + +.dd__action { + display: inline-flex; + flex-direction: column; + gap: 6px; +} + +.dd__btn { + padding: 9px 16px; + border: 1px solid #d8dee9; + border-radius: 10px; + background: #fff; + color: #0f172a; + font-size: 13px; + font-weight: 600; + cursor: pointer; + transition: background 0.15s ease; +} + +.dd__btn:hover { + background: #f8fafc; +} + +.dd__btn:disabled { + opacity: 0.6; + cursor: default; +} + +.dd__btn--warn { + color: #b91c1c; + border-color: #fecaca; +} + +.dd__btn--warn:hover { + background: #fef2f2; +} + +.dd__section { + display: flex; + flex-direction: column; + gap: 8px; +} + +.dd__section-title { + margin: 0; + font-size: 13px; + font-weight: 700; + color: #334155; +} + +.dd__state { + height: 280px; + border: 1px solid #eef1f6; + border-radius: 14px; + overflow: hidden; +} + +.dd__state tb-dashboard-state { + display: block; + width: 100%; + height: 100%; +} +{:copy-code} +``` + +
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_drawer_html.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_drawer_html.md new file mode 100644 index 0000000000..eeabbf94ae --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_drawer_html.md @@ -0,0 +1,66 @@ +#### Angular template of slide-over device detail + +```html +{:code-style="max-height: 400px;"} +
+
+
+
+
+
+
+{:copy-code}
+```
+
+
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_drawer_js.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_drawer_js.md new file mode 100644 index 0000000000..78c8ecae0b --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_drawer_js.md @@ -0,0 +1,100 @@ +#### JavaScript function of slide-over device detail + +```javascript +{:code-style="max-height: 400px;"} +this.ctx = ctx; +this.devices = []; +this.columns = ['name', 'people']; +this.selected = null; +this.selectedId = null; +this.drawerOpen = false; + +this.openDevice = (d) => { + this.selected = d; + this.selectedId = d.entityId; + this.drawerOpen = true; + ctx.stateController.updateState(null, { + entityId: { entityType: d.entityType, id: d.entityId }, + entityName: d.name, + }); + ctx.detectChanges(); +}; + +this.rebooting = false; +this.resetting = false; + +this.reboot = () => { + if (!this.selected || this.rebooting) return; + this.rebooting = true; + ctx.detectChanges(); + ctx.http.post('/api/rpc/twoway/' + this.selected.entityId, { method: 'reboot', params: {} }).subscribe({ + error: (e) => { + console.error(e); + this.rebooting = false; + ctx.detectChanges(); + }, + complete: () => { + this.rebooting = false; + ctx.detectChanges(); + }, + }); +}; + +this.resetCounter = () => { + if (!this.selected || this.resetting) return; + this.resetting = true; + ctx.detectChanges(); + ctx.http.post('/api/rpc/twoway/' + this.selected.entityId, { method: 'resetCounter', params: {} }).subscribe({ + error: (e) => { + console.error(e); + this.resetting = false; + ctx.detectChanges(); + }, + complete: () => { + this.resetting = false; + ctx.detectChanges(); + }, + }); +}; + +const subOpts = { + type: 'latest', + datasources: [ + { + type: 'entity', + entityFilter: { type: 'deviceType', deviceTypes: ['peopleCount'], deviceNameFilter: '', resolveMultiple: true }, + dataKeys: [{ type: 'timeseries', name: 'peopleCount', settings: {} }], + }, + ], + callbacks: { + onDataUpdated: (subscription) => { + this.devices = (subscription.data || []).map((entry) => { + const ds = entry.datasource; + const last = entry.data && entry.data.length ? entry.data[entry.data.length - 1] : null; + return { + entityId: ds.entityId, + entityType: ds.entityType, + name: ds.entityName, + lastValue: last ? last[1] : '—', + lastSeen: last ? new Date(last[0]).toLocaleString() : '—', + }; + }); + ctx.detectChanges(); + }, + onDataUpdateError: (subscription, e) => console.error(e), + }, +}; + +let subscriptionId = null; +ctx.subscriptionApi.createSubscription(subOpts, true).subscribe((subscription) => { + subscriptionId = subscription.id; +}); + +ctx.registerDestroyCallback(() => { + if (subscriptionId != null) ctx.subscriptionApi.removeSubscription(subscriptionId); +}); +{:copy-code} +``` + +
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_split_css.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_split_css.md new file mode 100644 index 0000000000..2297dfcf75 --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_split_css.md @@ -0,0 +1,142 @@ +#### CSS of resizable split master–detail + +```css +{:code-style="max-height: 400px;"} +.split { + display: flex; + height: 100%; + box-sizing: border-box; + font-family: 'Inter', 'Roboto', system-ui, sans-serif; + color: #0f172a; + background: #fff; + border-radius: 16px; + box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06); + overflow: hidden; +} + +.split__list { + flex: 0 0 auto; + min-width: 160px; + overflow: auto; + border-right: 1px solid #eef1f6; +} + +.split__title { + margin: 0; + padding: 16px; + font-family: 'Roboto', sans-serif; + font-size: 20px; + font-weight: 500; +} + +.split__items { + list-style: none; + margin: 0; + padding: 0; +} + +.split__item { + display: flex; + justify-content: space-between; + gap: 12px; + padding: 12px 16px; + cursor: pointer; + border-bottom: 1px solid #f1f5f9; + transition: background 0.15s ease; +} + +.split__item:hover { + background: #f8fafc; +} + +.split__item.is-active { + background: rgba(47, 107, 255, 0.08); + box-shadow: inset 3px 0 0 #2f6bff; +} + +.split__value { + font-weight: 700; + color: #475569; +} + +.split__divider { + flex: 0 0 12px; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + background: #eef1f6; + transition: background 0.15s ease; +} + +.split__divider:hover { + background: #e2e8f0; +} + +.split__divider::before { + content: ''; + width: 4px; + height: 32px; + background-image: radial-gradient(circle, #94a3b8 1.2px, transparent 1.4px); + background-position: center; + background-size: 4px 6px; + background-repeat: repeat-y; +} + +.split--dragging { + user-select: none; +} + +.split--dragging .split__list, +.split--dragging .split__detail { + pointer-events: none; +} + +.split__detail { + flex: 1 1 0; + min-width: 220px; + display: flex; + flex-direction: column; + gap: 16px; + padding: 20px; + overflow: auto; +} + +.split__eyebrow { + font-size: 11px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + color: #94a3b8; +} + +.split__detail-title { + margin: 2px 0 0; + font-size: 20px; + font-weight: 800; +} + +.split__state { + flex: 1 1 auto; + min-height: 260px; + border: 1px solid #eef1f6; + border-radius: 14px; + overflow: hidden; +} + +.split__state tb-dashboard-state { + display: block; + width: 100%; + height: 100%; +} + +.split__empty { + margin: auto; + color: #94a3b8; + font-size: 14px; +} +{:copy-code} +``` + +
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_split_html.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_split_html.md new file mode 100644 index 0000000000..0d4394015d --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_split_html.md @@ -0,0 +1,38 @@ +#### Angular template of resizable split master–detail + +```html +{:code-style="max-height: 400px;"} +
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_split_js.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_split_js.md new file mode 100644 index 0000000000..7c101ae20e --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_split_js.md @@ -0,0 +1,73 @@ +#### JavaScript function of resizable split master–detail + +```javascript +{:code-style="max-height: 400px;"} +this.ctx = ctx; +this.devices = []; +this.selected = null; +this.selectedId = null; +this.listWidth = 280; + +this.select = (d) => { + this.selected = d; + this.selectedId = d.entityId; + ctx.stateController.updateState(null, { + entityId: { entityType: d.entityType, id: d.entityId }, + entityName: d.name, + }); + ctx.detectChanges(); +}; + +this.startDrag = (event) => { + event.preventDefault(); + const root = event.currentTarget.closest('.split'); + const left = root.getBoundingClientRect().left; + root.classList.add('split--dragging'); + const onMove = (e) => { + this.listWidth = Math.max(160, Math.min(e.clientX - left, root.clientWidth - 220)); + ctx.detectChanges(); + }; + const onUp = () => { + root.classList.remove('split--dragging'); + window.removeEventListener('mousemove', onMove); + window.removeEventListener('mouseup', onUp); + }; + window.addEventListener('mousemove', onMove); + window.addEventListener('mouseup', onUp); +}; + +const subOpts = { + type: 'latest', + datasources: [ + { + type: 'entity', + entityFilter: { type: 'deviceType', deviceTypes: ['peopleCount'], deviceNameFilter: '', resolveMultiple: true }, + dataKeys: [{ type: 'timeseries', name: 'peopleCount', settings: {} }], + }, + ], + callbacks: { + onDataUpdated: (subscription) => { + this.devices = (subscription.data || []).map((entry) => { + const ds = entry.datasource; + const last = entry.data && entry.data.length ? entry.data[entry.data.length - 1] : null; + return { entityId: ds.entityId, entityType: ds.entityType, name: ds.entityName, lastValue: last ? last[1] : '—' }; + }); + ctx.detectChanges(); + }, + onDataUpdateError: (subscription, e) => console.error(e), + }, +}; + +let subscriptionId = null; +ctx.subscriptionApi.createSubscription(subOpts, true).subscribe((subscription) => { + subscriptionId = subscription.id; +}); + +ctx.registerDestroyCallback(() => { + if (subscriptionId != null) ctx.subscriptionApi.removeSubscription(subscriptionId); +}); +{:copy-code} +``` + +
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_tabs_css.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_tabs_css.md new file mode 100644 index 0000000000..ffb7e4833f --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_tabs_css.md @@ -0,0 +1,66 @@ +#### CSS of composite dashboard with tab navigation + +```css +{:code-style="max-height: 400px;"} +.composite { + display: flex; + flex-direction: column; + gap: 12px; + height: 100%; + box-sizing: border-box; + padding: 12px; + font-family: 'Roboto', system-ui, sans-serif; +} + +.tabs { + display: inline-flex; + gap: 4px; + padding: 4px; + align-self: flex-start; + background: #eef1f6; + border-radius: 10px; +} + +.tab { + border: 0; + background: transparent; + padding: 8px 16px; + border-radius: 7px; + font-size: 13px; + font-weight: 600; + color: #5b6472; + cursor: pointer; + transition: background 0.15s ease, color 0.15s ease; +} + +.tab:hover { + color: #1f2733; +} + +.tab.is-active { + background: #fff; + color: #2f6bff; + box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); +} + +.container { + flex-grow: 1; + width: 100%; + display: flex; + padding: 0; + border: 1px solid #e6eaf0; + border-radius: 12px; + overflow: hidden; +} + +.state { + flex-grow: 1; + width: 100%; + height: 100%; + padding: 0; +} +{:copy-code} +``` + +
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_tabs_html.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_tabs_html.md new file mode 100644 index 0000000000..7e1648c4ef --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_tabs_html.md @@ -0,0 +1,22 @@ +#### Angular template of composite dashboard with tab navigation + +```html +{:code-style="max-height: 400px;"} +
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_tabs_js.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_tabs_js.md new file mode 100644 index 0000000000..1eddefb304 --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_tabs_js.md @@ -0,0 +1,35 @@ +#### JavaScript function of composite dashboard with tab navigation + +```javascript +{:code-style="max-height: 400px;"} +this.ctx = ctx; + +this.tabs = [ + { id: 'assets', label: 'Assets', stateId: 'assetsState' }, + { id: 'devices', label: 'Devices', stateId: 'devicesState' }, + { id: 'customers', label: 'Customers', stateId: 'customersState' }, +]; + +const apply = (subState) => { + const tab = this.tabs.find((t) => t.id === subState) || this.tabs[0]; + this.activeTab = tab.id; + this.stateId = tab.stateId; +}; + +apply(ctx.stateController.getStateParams().subState); + +this.selectTab = (subState) => ctx.stateController.updateState(null, { subState }); + +const stateSub = ctx.stateController.dashboardCtrl.dashboardCtx.stateChanged.subscribe(() => { + apply(ctx.stateController.getStateParams().subState); + ctx.detectChanges(); +}); + +ctx.registerDestroyCallback(() => { + stateSub.unsubscribe(); +}); +{:copy-code} +``` + +
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_analytics_css.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_analytics_css.md new file mode 100644 index 0000000000..11fb741d53 --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_analytics_css.md @@ -0,0 +1,38 @@ +#### CSS of visitor analytics + +```css +{:code-style="max-height: 400px;"} +.vc { + display: flex; + flex-direction: column; + gap: 16px; + height: 100%; + box-sizing: border-box; + padding: 20px; + background: #fff; + font-family: 'Inter', 'Roboto', system-ui, sans-serif; + color: #0f172a; +} +.vc__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } +.vc__title { margin: 0; font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 500; } +.vc__sub { font-size: 12px; font-weight: 600; color: #94a3b8; } +.vc__controls { display: flex; gap: 10px; flex-wrap: wrap; } +.vc__field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: #64748b; } +.vc__field input { padding: 7px 10px; border: 1px solid #d8dee9; border-radius: 10px; font-size: 13px; color: #0f172a; } +.vc__field input:focus { outline: none; border-color: #2f6bff; box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.15); } +.vc__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } +.vc-kpi { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; background: #f8fafc; border: 1px solid #e6ebf2; } +.vc-kpi__label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; } +.vc-kpi__value { font-size: 26px; font-weight: 800; line-height: 1; color: #1e293b; } +.vc__card { flex: 1; min-height: 240px; display: flex; flex-direction: column; padding: 16px; border: 1px solid #e6ebf2; border-radius: 14px; } +.vc__card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } +.vc__card-title { font-size: 13px; font-weight: 700; color: #334155; } +.vc__back { padding: 6px 12px; border: 1px solid #d8dee9; border-radius: 8px; background: #fff; color: #2f6bff; font-size: 12px; font-weight: 600; cursor: pointer; } +.vc__back[hidden] { display: none; } +.vc__back:hover { background: #f0f5ff; border-color: #2f6bff; } +.vc__chart { flex: 1; min-height: 200px; } +{:copy-code} +``` + +
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_analytics_html.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_analytics_html.md new file mode 100644 index 0000000000..90d664ed5c --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_analytics_html.md @@ -0,0 +1,36 @@ +#### HTML code of visitor analytics + +```html +{:code-style="max-height: 400px;"} +
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_analytics_js.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_analytics_js.md new file mode 100644 index 0000000000..1fc2b85b82 --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_analytics_js.md @@ -0,0 +1,185 @@ +#### JavaScript function of visitor analytics + +```javascript +{:code-style="max-height: 400px;"} +// Plain HTML mode: `container` is the widget's DOM; ECharts comes from the CDN. +const echarts = window.echarts; +const el = (sel) => container.querySelector(sel); +const pad = (n) => String(n).padStart(2, '0'); +const isoDate = (d) => d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()); +const dayLabel = (d) => d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }); +const minutes = (v) => { + const [h, m] = (v || '0:0').split(':').map(Number); + return h * 60 + m; +}; +const palette = ['#2563eb', '#10b981', '#f59e0b', '#8b5cf6', '#ef4444', '#0ea5e9']; + +const chart = echarts.init(el('#vcChart')); +chart.setOption({ + tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, + legend: { top: 0 }, + grid: { left: 8, right: 16, top: 40, bottom: 8, containLabel: true }, + xAxis: { type: 'category', data: [], axisLabel: { hideOverlap: true } }, + yAxis: { type: 'value' }, + series: [], +}); +const resizeObserver = new window.ResizeObserver(() => chart.resize()); +resizeObserver.observe(el('#vcChart')); + +let lastEntries = []; +let mode = 'daily'; +let selectedDate = null; +let dailyDates = []; // iso date per daily x-index, for drill-down + +// Click a day → drill into its hourly breakdown. +chart.on('click', (p) => { + if (mode !== 'daily' || p.dataIndex == null || dailyDates[p.dataIndex] == null) return; + selectedDate = dailyDates[p.dataIndex]; + mode = 'hourly'; + el('#vcBack').hidden = false; + recompute(); +}); +el('#vcBack').addEventListener('click', () => { + mode = 'daily'; + selectedDate = null; + el('#vcBack').hidden = true; + recompute(); +}); + +// One stacked series per device, summing values into the given bucket index. +function buildSeries(labelCount, bucketOf) { + return lastEntries.map((entry, k) => { + const arr = new Array(labelCount).fill(0); + (entry.data || []).forEach(([ts, value]) => { + const i = bucketOf(new Date(Number(ts))); + if (i != null && i >= 0) arr[i] += Number(value); + }); + return { name: entry.datasource.entityName, type: 'bar', stack: 'v', data: arr, itemStyle: { color: palette[k % palette.length] } }; + }); +} + +function recompute() { + const open = minutes(el('#vcOpen').value); + const close = minutes(el('#vcClose').value); + const inHours = (d) => { + const m = d.getHours() * 60 + d.getMinutes(); + return m >= open && m < close; + }; + + // KPIs over the whole range (per day, summed across devices). + const start = new Date(el('#vcStart').value + 'T00:00:00'); + const end = new Date(el('#vcEnd').value + 'T00:00:00'); + const dayIndex = {}; + const dayLabels = []; + dailyDates = []; + for (let t = new Date(start); t <= end; t.setDate(t.getDate() + 1)) { + dayIndex[isoDate(t)] = dayLabels.length; + dailyDates.push(isoDate(t)); + dayLabels.push(dayLabel(t)); + } + const dayTotals = dayLabels.map(() => 0); + const perHour = {}; + let total = 0; + lastEntries.forEach((entry) => + (entry.data || []).forEach(([ts, value]) => { + const d = new Date(Number(ts)); + if (!inHours(d)) return; + const i = dayIndex[isoDate(d)]; + if (i === undefined) return; + const v = Number(value); + dayTotals[i] += v; + perHour[d.getHours()] = (perHour[d.getHours()] || 0) + v; + total += v; + }), + ); + el('#vcTotal').textContent = total; + el('#vcPeakDay').textContent = total ? dayLabels[dayTotals.indexOf(Math.max(...dayTotals))] : '—'; + const ph = Object.keys(perHour).sort((a, b) => perHour[b] - perHour[a])[0]; + el('#vcPeakHour').textContent = ph != null ? ph + ':00' : '—'; + el('#vcAvg').textContent = Math.round(total / (dayTotals.filter((x) => x > 0).length || 1)); + + // Chart: daily (stacked by device) or the hourly breakdown of the selected day. + if (mode === 'daily') { + el('#vcChartTitle').textContent = 'Visitors by day'; + const series = buildSeries(dayLabels.length, (d) => (inHours(d) ? dayIndex[isoDate(d)] : null)); + chart.setOption({ xAxis: { data: dayLabels }, series }, { replaceMerge: ['series'] }); + } else { + const h0 = Math.floor(open / 60); + const h1 = Math.ceil(close / 60); + const labels = []; + for (let h = h0; h < h1; h++) labels.push(pad(h) + ':00'); + el('#vcChartTitle').textContent = 'Visitors by hour — ' + dayLabel(new Date(selectedDate + 'T00:00:00')); + const series = buildSeries(labels.length, (d) => + isoDate(d) === selectedDate && inHours(d) ? d.getHours() - h0 : null, + ); + chart.setOption({ xAxis: { data: labels }, series }, { replaceMerge: ['series'] }); + } +} + +// (Re)subscribe for the chosen date range (a fixed history window). +let subscriptionId = null; +function subscribe() { + if (subscriptionId != null) { + ctx.subscriptionApi.removeSubscription(subscriptionId); + subscriptionId = null; + } + const startTimeMs = new Date(el('#vcStart').value + 'T00:00:00').getTime(); + const endTimeMs = new Date(el('#vcEnd').value + 'T23:59:59').getTime(); + const subOpts = { + type: 'timeseries', + useDashboardTimewindow: false, + timeWindowConfig: { + selectedTab: 1, + history: { historyType: 1, fixedTimewindow: { startTimeMs, endTimeMs } }, + aggregation: { type: 'NONE', limit: 50000 }, + }, + datasources: [ + { + type: 'entity', + entityFilter: { type: 'deviceType', deviceTypes: ['peopleCount'], deviceNameFilter: '', resolveMultiple: true }, + dataKeys: [{ type: 'timeseries', name: 'peopleCount', settings: {} }], + }, + ], + callbacks: { + onDataUpdated: (subscription) => { + lastEntries = subscription.data || []; + recompute(); + }, + onDataUpdateError: (subscription, e) => console.error(e), + }, + }; + ctx.subscriptionApi.createSubscription(subOpts, true).subscribe((subscription) => { + subscriptionId = subscription.id; + }); +} + +// Changing the range resets the drill-down and re-subscribes; hours just re-filter. +function onRangeChange() { + mode = 'daily'; + selectedDate = null; + el('#vcBack').hidden = true; + subscribe(); +} + +// Defaults: the current month (1st → today). +const now = new Date(); +el('#vcEnd').value = isoDate(now); +el('#vcStart').value = isoDate(new Date(now.getFullYear(), now.getMonth(), 1)); + +el('#vcStart').addEventListener('change', onRangeChange); +el('#vcEnd').addEventListener('change', onRangeChange); +el('#vcOpen').addEventListener('change', recompute); +el('#vcClose').addEventListener('change', recompute); +subscribe(); + +// The JS re-runs on every reload — release the subscription, observer and chart. +ctx.registerDestroyCallback(() => { + if (subscriptionId != null) ctx.subscriptionApi.removeSubscription(subscriptionId); + resizeObserver.disconnect(); + chart.dispose(); +}); +{:copy-code} +``` + +
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_analytics_resources.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_analytics_resources.md new file mode 100644 index 0000000000..0b3ae21dd1 --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_analytics_resources.md @@ -0,0 +1,12 @@ +#### Resources of visitor analytics + +Add the following JavaScript URL under the Resources tab. It loads ECharts before your function runs and exposes the
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_kanban_css.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_kanban_css.md new file mode 100644 index 0000000000..6f9a857f19 --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_kanban_css.md @@ -0,0 +1,45 @@ +#### CSS of kanban board + +```css +{:code-style="max-height: 400px;"} +.kanban { + display: flex; + gap: 12px; + height: 100%; + box-sizing: border-box; + padding: 16px; + overflow-x: auto; + background: #f9fafb; + font-family: 'Inter', 'Roboto', system-ui, sans-serif; + color: #111827; + font-size: 13px; +} +.kanban__col { flex: 1 1 0; min-width: 220px; display: flex; flex-direction: column; background: #f3f4f6; border-radius: 10px; } +.kanban__head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; } +.kanban__title { font-size: 12px; font-weight: 600; color: #374151; } +.kanban__count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #e5e7eb; color: #6b7280; font-size: 11px; font-weight: 600; } +.kanban__cards { display: flex; flex-direction: column; gap: 8px; padding: 4px 8px 12px; flex: 1; min-height: 24px; overflow-y: auto; } +.kanban__card { + display: flex; + align-items: center; + gap: 8px; + padding: 10px 12px; + background: #fff; + border: 1px solid #e5e7eb; + border-radius: 8px; + cursor: grab; + transition: border-color 0.12s ease, box-shadow 0.12s ease; +} +.kanban__card:hover { border-color: #d1d5db; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } +.kanban__name { font-weight: 500; color: #111827; } +.kanban__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } +.kanban__dot--idle { background: #9ca3af; } +.kanban__dot--active { background: #22c55e; } +.kanban__dot--maintenance { background: #f59e0b; } +.kanban__card.sortable-ghost { opacity: 0; } +.kanban__card.sortable-chosen { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } +{:copy-code} +``` + +
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_kanban_html.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_kanban_html.md new file mode 100644 index 0000000000..d2ed3008b4 --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_kanban_html.md @@ -0,0 +1,10 @@ +#### HTML code of kanban board + +```html +{:code-style="max-height: 400px;"} + +{:copy-code} +``` + +
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_kanban_js.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_kanban_js.md new file mode 100644 index 0000000000..6b04e2551e --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_kanban_js.md @@ -0,0 +1,89 @@ +#### JavaScript function of kanban board + +```javascript +{:code-style="max-height: 400px;"} +// Plain HTML mode: `container` is the widget's DOM. Build a status board and, +// on drop, persist the card's new column (status) back to the device. +const Sortable = window.Sortable; // loaded from the CDN added under Resources +const statuses = ['idle', 'active', 'maintenance']; +const labels = { idle: 'Idle', active: 'Active', maintenance: 'Maintenance' }; + +const board = container.querySelector('#board'); +let devices = []; // { id, entityType, name, status } + +// Escape untrusted strings (e.g. device names) before putting them in innerHTML. +const esc = (s) => + String(s).replace(/[&<>"']/g, (c) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' })[c]); + +function render() { + board.innerHTML = statuses + .map((s) => { + const items = devices.filter((d) => d.status === s); + const cards = items + .map( + (d) => + `
+ ${labels[s]}${items.length}
+ `;
+ })
+ .join('');
+
+ // Make each column a Sortable list; cards share one group so they move between columns.
+ board.querySelectorAll('.kanban__cards').forEach((listEl) => {
+ new Sortable(listEl, {
+ group: 'kanban',
+ animation: 150,
+ onAdd: (evt) => {
+ const id = evt.item.dataset.id;
+ const entityType = evt.item.dataset.type;
+ const status = evt.to.dataset.status; // destination column
+ const dev = devices.find((d) => d.id === id);
+ if (dev) dev.status = status;
+ ctx.attributeService
+ .saveEntityAttributes({ id, entityType }, 'SERVER_SCOPE', [{ key: 'status', value: status }])
+ .subscribe();
+ },
+ });
+ });
+}
+
+// Live data: devices of type "machine" with their "status" attribute.
+const subOpts = {
+ type: 'latest',
+ datasources: [
+ {
+ type: 'entity',
+ entityFilter: { type: 'deviceType', deviceTypes: ['machine'], deviceNameFilter: '', resolveMultiple: true },
+ dataKeys: [{ type: 'attribute', name: 'status', settings: {} }],
+ },
+ ],
+ callbacks: {
+ onDataUpdated: (subscription) => {
+ devices = (subscription.data || []).map((entry) => {
+ const ds = entry.datasource;
+ const last = entry.data && entry.data.length ? entry.data[entry.data.length - 1] : null;
+ const status = last ? String(last[1]) : 'idle';
+ return { id: ds.entityId, entityType: ds.entityType, name: ds.entityName, status: statuses.includes(status) ? status : 'idle' };
+ });
+ render();
+ },
+ onDataUpdateError: (subscription, e) => console.error(e),
+ },
+};
+// The JS re-runs on every reload — capture the id and remove the subscription on destroy.
+let subscriptionId = null;
+ctx.subscriptionApi.createSubscription(subOpts, true).subscribe((subscription) => {
+ subscriptionId = subscription.id;
+});
+ctx.registerDestroyCallback(() => {
+ if (subscriptionId != null) ctx.subscriptionApi.removeSubscription(subscriptionId);
+});
+{:copy-code}
+```
+
+
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_kanban_resources.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_kanban_resources.md new file mode 100644 index 0000000000..a85de9604a --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_kanban_resources.md @@ -0,0 +1,12 @@ +#### Resources of kanban board + +Add the following JavaScript URL under the Resources tab. It loads SortableJS before your function runs and exposes the
+
diff --git a/ui-ngx/src/assets/home/no-service.svg b/ui-ngx/src/assets/home/no-service.svg new file mode 100644 index 0000000000..2c591b268a --- /dev/null +++ b/ui-ngx/src/assets/home/no-service.svg @@ -0,0 +1,23 @@ + diff --git a/ui-ngx/src/assets/integration-icon/apache-pulsar.svg b/ui-ngx/src/assets/integration-icon/apache-pulsar.svg new file mode 100644 index 0000000000..1ff16cb1ed --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/apache-pulsar.svg @@ -0,0 +1,3 @@ + diff --git a/ui-ngx/src/assets/integration-icon/aws-iot.svg b/ui-ngx/src/assets/integration-icon/aws-iot.svg new file mode 100644 index 0000000000..ce93615737 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/aws-iot.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui-ngx/src/assets/integration-icon/aws-kinesis.svg b/ui-ngx/src/assets/integration-icon/aws-kinesis.svg new file mode 100644 index 0000000000..fdf672f1d4 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/aws-kinesis.svg @@ -0,0 +1,13 @@ + diff --git a/ui-ngx/src/assets/integration-icon/aws-sqs.svg b/ui-ngx/src/assets/integration-icon/aws-sqs.svg new file mode 100644 index 0000000000..2b9fdbf1b5 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/aws-sqs.svg @@ -0,0 +1,13 @@ + diff --git a/ui-ngx/src/assets/integration-icon/azure-event-hub.svg b/ui-ngx/src/assets/integration-icon/azure-event-hub.svg new file mode 100644 index 0000000000..fec9fd51a4 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/azure-event-hub.svg @@ -0,0 +1,3 @@ + diff --git a/ui-ngx/src/assets/integration-icon/azure-iot-hub.svg b/ui-ngx/src/assets/integration-icon/azure-iot-hub.svg new file mode 100644 index 0000000000..7f080283a8 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/azure-iot-hub.svg @@ -0,0 +1,3 @@ + diff --git a/ui-ngx/src/assets/integration-icon/azure-service-bus.svg b/ui-ngx/src/assets/integration-icon/azure-service-bus.svg new file mode 100644 index 0000000000..bdc50a6978 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/azure-service-bus.svg @@ -0,0 +1,7 @@ + diff --git a/ui-ngx/src/assets/integration-icon/chirpstack.svg b/ui-ngx/src/assets/integration-icon/chirpstack.svg new file mode 100644 index 0000000000..d4cfc414cc --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/chirpstack.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui-ngx/src/assets/integration-icon/coap.svg b/ui-ngx/src/assets/integration-icon/coap.svg new file mode 100644 index 0000000000..63d096c7d9 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/coap.svg @@ -0,0 +1,3 @@ + diff --git a/ui-ngx/src/assets/integration-icon/custom.svg b/ui-ngx/src/assets/integration-icon/custom.svg new file mode 100644 index 0000000000..ba1077e068 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/custom.svg @@ -0,0 +1,3 @@ + diff --git a/ui-ngx/src/assets/integration-icon/http.svg b/ui-ngx/src/assets/integration-icon/http.svg new file mode 100644 index 0000000000..d964e6b91c --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/http.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui-ngx/src/assets/integration-icon/iotcreators.com.svg b/ui-ngx/src/assets/integration-icon/iotcreators.com.svg new file mode 100644 index 0000000000..64224848b6 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/iotcreators.com.svg @@ -0,0 +1,3 @@ + diff --git a/ui-ngx/src/assets/integration-icon/kafka.svg b/ui-ngx/src/assets/integration-icon/kafka.svg new file mode 100644 index 0000000000..2ff631845c --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/kafka.svg @@ -0,0 +1,10 @@ + diff --git a/ui-ngx/src/assets/integration-icon/kpn.svg b/ui-ngx/src/assets/integration-icon/kpn.svg new file mode 100644 index 0000000000..edc4afe28d --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/kpn.svg @@ -0,0 +1,13 @@ + diff --git a/ui-ngx/src/assets/integration-icon/loriot.svg b/ui-ngx/src/assets/integration-icon/loriot.svg new file mode 100644 index 0000000000..8c4f139439 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/loriot.svg @@ -0,0 +1,3 @@ + diff --git a/ui-ngx/src/assets/integration-icon/mqtt.svg b/ui-ngx/src/assets/integration-icon/mqtt.svg new file mode 100644 index 0000000000..05ed77deac --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/mqtt.svg @@ -0,0 +1,10 @@ + diff --git a/ui-ngx/src/assets/integration-icon/ocean-connect.svg b/ui-ngx/src/assets/integration-icon/ocean-connect.svg new file mode 100644 index 0000000000..97ff84f3fc --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/ocean-connect.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui-ngx/src/assets/integration-icon/opc-ua.svg b/ui-ngx/src/assets/integration-icon/opc-ua.svg new file mode 100644 index 0000000000..53968794c6 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/opc-ua.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui-ngx/src/assets/integration-icon/particle.svg b/ui-ngx/src/assets/integration-icon/particle.svg new file mode 100644 index 0000000000..cc823fa6f8 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/particle.svg @@ -0,0 +1,4 @@ + diff --git a/ui-ngx/src/assets/integration-icon/pub-sub.svg b/ui-ngx/src/assets/integration-icon/pub-sub.svg new file mode 100644 index 0000000000..7ed9730d64 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/pub-sub.svg @@ -0,0 +1,12 @@ + diff --git a/ui-ngx/src/assets/integration-icon/rabbitmq.svg b/ui-ngx/src/assets/integration-icon/rabbitmq.svg new file mode 100644 index 0000000000..9b2d81160f --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/rabbitmq.svg @@ -0,0 +1,3 @@ + diff --git a/ui-ngx/src/assets/integration-icon/sigfox.svg b/ui-ngx/src/assets/integration-icon/sigfox.svg new file mode 100644 index 0000000000..6bd29d8c56 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/sigfox.svg @@ -0,0 +1,4 @@ + diff --git a/ui-ngx/src/assets/integration-icon/tcp.svg b/ui-ngx/src/assets/integration-icon/tcp.svg new file mode 100644 index 0000000000..5972d82f07 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/tcp.svg @@ -0,0 +1,3 @@ + diff --git a/ui-ngx/src/assets/integration-icon/thingpark-enterprise.svg b/ui-ngx/src/assets/integration-icon/thingpark-enterprise.svg new file mode 100644 index 0000000000..677421c7a3 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/thingpark-enterprise.svg @@ -0,0 +1,3 @@ + diff --git a/ui-ngx/src/assets/integration-icon/thingpark.svg b/ui-ngx/src/assets/integration-icon/thingpark.svg new file mode 100644 index 0000000000..2518cc273f --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/thingpark.svg @@ -0,0 +1,3 @@ + diff --git a/ui-ngx/src/assets/integration-icon/things-stack-industries.svg b/ui-ngx/src/assets/integration-icon/things-stack-industries.svg new file mode 100644 index 0000000000..e85c828a24 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/things-stack-industries.svg @@ -0,0 +1,9 @@ + diff --git a/ui-ngx/src/assets/integration-icon/things-stack-сommunity.svg b/ui-ngx/src/assets/integration-icon/things-stack-сommunity.svg new file mode 100644 index 0000000000..e85c828a24 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/things-stack-сommunity.svg @@ -0,0 +1,9 @@ + diff --git a/ui-ngx/src/assets/integration-icon/ttn.svg b/ui-ngx/src/assets/integration-icon/ttn.svg new file mode 100644 index 0000000000..88a388db9d --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/ttn.svg @@ -0,0 +1,12 @@ + diff --git a/ui-ngx/src/assets/integration-icon/tuya.svg b/ui-ngx/src/assets/integration-icon/tuya.svg new file mode 100644 index 0000000000..3498d0a1c0 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/tuya.svg @@ -0,0 +1,10 @@ + diff --git a/ui-ngx/src/assets/integration-icon/udp.svg b/ui-ngx/src/assets/integration-icon/udp.svg new file mode 100644 index 0000000000..e8f81f83db --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/udp.svg @@ -0,0 +1,3 @@ + diff --git a/ui-ngx/src/assets/iot-hub/category-alarm-rules-img.png b/ui-ngx/src/assets/iot-hub/category-alarm-rules-img.png new file mode 100644 index 0000000000..ab374fadef Binary files /dev/null and b/ui-ngx/src/assets/iot-hub/category-alarm-rules-img.png differ diff --git a/ui-ngx/src/assets/iot-hub/category-calculated-fields-img.png b/ui-ngx/src/assets/iot-hub/category-calculated-fields-img.png new file mode 100644 index 0000000000..acdcd322e8 Binary files /dev/null and b/ui-ngx/src/assets/iot-hub/category-calculated-fields-img.png differ diff --git a/ui-ngx/src/assets/iot-hub/category-device-library-img.png b/ui-ngx/src/assets/iot-hub/category-device-library-img.png new file mode 100644 index 0000000000..9e7817b70a Binary files /dev/null and b/ui-ngx/src/assets/iot-hub/category-device-library-img.png differ diff --git a/ui-ngx/src/assets/iot-hub/category-rule-chains-img.png b/ui-ngx/src/assets/iot-hub/category-rule-chains-img.png new file mode 100644 index 0000000000..bd136772b3 Binary files /dev/null and b/ui-ngx/src/assets/iot-hub/category-rule-chains-img.png differ diff --git a/ui-ngx/src/assets/iot-hub/category-solution-templates-img.png b/ui-ngx/src/assets/iot-hub/category-solution-templates-img.png new file mode 100644 index 0000000000..3c649f92ef Binary files /dev/null and b/ui-ngx/src/assets/iot-hub/category-solution-templates-img.png differ diff --git a/ui-ngx/src/assets/iot-hub/category-widgets-img.png b/ui-ngx/src/assets/iot-hub/category-widgets-img.png new file mode 100644 index 0000000000..0808b123cc Binary files /dev/null and b/ui-ngx/src/assets/iot-hub/category-widgets-img.png differ diff --git a/ui-ngx/src/assets/iot-hub/hero-alarm-rule-cluster.svg b/ui-ngx/src/assets/iot-hub/hero-alarm-rule-cluster.svg new file mode 100644 index 0000000000..545e7db89b --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/hero-alarm-rule-cluster.svg @@ -0,0 +1,48 @@ + diff --git a/ui-ngx/src/assets/iot-hub/hero-calculated-field-cluster.svg b/ui-ngx/src/assets/iot-hub/hero-calculated-field-cluster.svg new file mode 100644 index 0000000000..a5206aa4ea --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/hero-calculated-field-cluster.svg @@ -0,0 +1,71 @@ + diff --git a/ui-ngx/src/assets/iot-hub/hero-device-cluster.svg b/ui-ngx/src/assets/iot-hub/hero-device-cluster.svg new file mode 100644 index 0000000000..7e75c744a7 --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/hero-device-cluster.svg @@ -0,0 +1,138 @@ + diff --git a/ui-ngx/src/assets/iot-hub/hero-rule-chain-cluster.svg b/ui-ngx/src/assets/iot-hub/hero-rule-chain-cluster.svg new file mode 100644 index 0000000000..ee3a4d39de --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/hero-rule-chain-cluster.svg @@ -0,0 +1,72 @@ + diff --git a/ui-ngx/src/assets/iot-hub/hero-solution-template-cluster.svg b/ui-ngx/src/assets/iot-hub/hero-solution-template-cluster.svg new file mode 100644 index 0000000000..2afd1f2ab8 --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/hero-solution-template-cluster.svg @@ -0,0 +1,57 @@ + diff --git a/ui-ngx/src/assets/iot-hub/hero-widget-cluster.svg b/ui-ngx/src/assets/iot-hub/hero-widget-cluster.svg new file mode 100644 index 0000000000..0df6ad4336 --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/hero-widget-cluster.svg @@ -0,0 +1,57 @@ + diff --git a/ui-ngx/src/assets/iot-hub/items-page-alarm-rules-hero.svg b/ui-ngx/src/assets/iot-hub/items-page-alarm-rules-hero.svg new file mode 100644 index 0000000000..74ba7569b4 --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/items-page-alarm-rules-hero.svg @@ -0,0 +1,150 @@ + diff --git a/ui-ngx/src/assets/iot-hub/items-page-calculated-fields-hero.svg b/ui-ngx/src/assets/iot-hub/items-page-calculated-fields-hero.svg new file mode 100644 index 0000000000..916c521ea0 --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/items-page-calculated-fields-hero.svg @@ -0,0 +1,104 @@ + diff --git a/ui-ngx/src/assets/iot-hub/items-page-dashboards-hero.svg b/ui-ngx/src/assets/iot-hub/items-page-dashboards-hero.svg new file mode 100644 index 0000000000..c699714457 --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/items-page-dashboards-hero.svg @@ -0,0 +1,102 @@ + diff --git a/ui-ngx/src/assets/iot-hub/items-page-devices-hero.svg b/ui-ngx/src/assets/iot-hub/items-page-devices-hero.svg new file mode 100644 index 0000000000..d951dd8744 --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/items-page-devices-hero.svg @@ -0,0 +1,243 @@ + diff --git a/ui-ngx/src/assets/iot-hub/items-page-rule-chains-hero.svg b/ui-ngx/src/assets/iot-hub/items-page-rule-chains-hero.svg new file mode 100644 index 0000000000..05cb14b0e2 --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/items-page-rule-chains-hero.svg @@ -0,0 +1,151 @@ + diff --git a/ui-ngx/src/assets/iot-hub/items-page-solution-templates-hero.png b/ui-ngx/src/assets/iot-hub/items-page-solution-templates-hero.png new file mode 100644 index 0000000000..690c23f552 Binary files /dev/null and b/ui-ngx/src/assets/iot-hub/items-page-solution-templates-hero.png differ diff --git a/ui-ngx/src/assets/iot-hub/items-page-widgets-hero.svg b/ui-ngx/src/assets/iot-hub/items-page-widgets-hero.svg new file mode 100644 index 0000000000..84c4b37a2f --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/items-page-widgets-hero.svg @@ -0,0 +1,138 @@ + diff --git a/ui-ngx/src/assets/iot-hub/pe-only-illustration.svg b/ui-ngx/src/assets/iot-hub/pe-only-illustration.svg new file mode 100644 index 0000000000..c93239d290 --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/pe-only-illustration.svg @@ -0,0 +1,44 @@ + diff --git a/ui-ngx/src/assets/iot-hub/upgrade-required.svg b/ui-ngx/src/assets/iot-hub/upgrade-required.svg new file mode 100644 index 0000000000..1c0973a83a --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/upgrade-required.svg @@ -0,0 +1,15 @@ + diff --git a/ui-ngx/src/assets/locale/locale.constant-da_DK.json b/ui-ngx/src/assets/locale/locale.constant-da_DK.json index 0992ccd6ff..0058dc7df6 100644 --- a/ui-ngx/src/assets/locale/locale.constant-da_DK.json +++ b/ui-ngx/src/assets/locale/locale.constant-da_DK.json @@ -1097,8 +1097,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -9538,4 +9538,4 @@ "language": { "language": "Sprog" } -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/locale/locale.constant-de_DE.json b/ui-ngx/src/assets/locale/locale.constant-de_DE.json index d218d2b96b..03ec53a2ed 100644 --- a/ui-ngx/src/assets/locale/locale.constant-de_DE.json +++ b/ui-ngx/src/assets/locale/locale.constant-de_DE.json @@ -1097,8 +1097,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -9538,4 +9538,4 @@ "language": { "language": "Sprache" } -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/locale/locale.constant-el_GR.json b/ui-ngx/src/assets/locale/locale.constant-el_GR.json index a12db1a589..f97ebf47f1 100644 --- a/ui-ngx/src/assets/locale/locale.constant-el_GR.json +++ b/ui-ngx/src/assets/locale/locale.constant-el_GR.json @@ -1097,8 +1097,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -9538,4 +9538,4 @@ "language": { "language": "Γλώσσα" } -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 039e7a33e7..acfe5c344a 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -82,7 +82,8 @@ "upload": "Upload", "delete-anyway": "Delete anyway", "delete-selected": "Delete selected", - "set": "Set" + "set": "Set", + "retry": "Retry" }, "aggregation": { "aggregation": "Aggregation", @@ -1107,8 +1108,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -3682,7 +3683,277 @@ } }, "item": { - "selected": "Selected" + "type-widget": "Widget", + "type-widget-plural": "Widgets", + "type-dashboard": "Dashboard", + "type-dashboard-plural": "Dashboards", + "type-solution-template": "Solution Template", + "type-solution-template-plural": "Solution Templates", + "type-calculated-field": "Calculated Field", + "type-calculated-field-plural": "Calculated Fields", + "type-alarm-rule": "Alarm Rule", + "type-alarm-rule-plural": "Alarm Rules", + "type-rule-chain": "Rule Chain", + "type-rule-chain-plural": "Rule Chains", + "type-device": "Device", + "type-device-plural": "Devices" + }, + "iot-hub": { + "iot-hub": "IoT Hub", + "generate-random-value": "Generate random value", + "home-title": "ThingsBoard IoT Hub", + "home-subtitle-prefix": "Discover ready-to-use", + "and-devices": "& Devices", + "search-placeholder": "Search in IoT Hub...", + "search": "Search...", + "search-published-items": "Search published items...", + "see-all-results": "See all results", + "no-search-results": "No results found for '{{ search }}'", + "no-items-available": "No items available", + "search-results": "Search results", + "search-results-for": "Search results for ", + "try-adjusting-search": "Try adjusting your search", + "add-widget-from-iot-hub": "Add widget from IoT Hub", + "all-widgets": "All widgets", + "all-iot-hub-widgets": "All IoT Hub widgets", + "installed-from-iot-hub": "Installed from IoT Hub", + "item-link-unavailable": "Item unavailable", + "include-deprecated": "Include deprecated", + "widget-category-value": "{{ category }} widgets", + "search-categories": "Search categories...", + "search-in-category": "Search widgets...", + "search-bundles": "Search bundles...", + "search-widgets": "Search widgets...", + "add-item-from-iot-hub": "Add {{ type }} from IoT Hub", + "add-from-iot-hub": "Add from IoT Hub", + "filters": "Filters", + "type": "Type", + "items-per-page": "Items per page", + "filter": "Filter", + "available": "Available", + "items-page-desc-widgets": "Jumpstart your IoT journey with pre-configured widgets designed for your industry. Deploy proven architectures instantly and focus your energy on what matters: your unique business logic.", + "items-page-desc-dashboards": "Explore dashboards to find pre-built visualization templates and interactive UI layouts you can deploy in minutes to bring your IoT data to life.", + "items-page-desc-solution-templates": "Complete IoT solution packages with dashboards, rule chains, and device configurations. Get started with proven architectures.", + "items-page-desc-calculated-fields": "Use pre-configured Calculated Fields to automate complex metrics like fuel efficiency or power factor. Skip the manual logic and keep your dashboards clean and actionable.", + "items-page-desc-alarm-rules": "Use pre-built Alarm Rule templates to detect critical conditions like low battery, threshold breaches, or devices going offline. Skip writing the rule logic and start reacting to incidents the moment they happen.", + "items-page-desc-rule-chains": "From sophisticated data processing to seamless API integrations, Rule Chain templates provide the architectural foundation you need to scale without building from scratch.", + "items-page-desc-devices": "Explore the device library to find pre-configured connectivity templates you can deploy in minutes to connect your hardware instantly.", + "device-library": "Device Library", + "most-popular-in-iot-hub": "Most popular in IoT Hub", + "alarm-rule-install-update-required": "Update required", + "alarm-rule-install-update-required-text": "Alarm Rules require ThingsBoard 4.3 or later. Please update your platform instance to install Alarm Rule packages.", + "alarm-rules-unavailable-title-prefix": "Alarm Rules are available starting from", + "alarm-rules-unavailable-tb-version": "Thingsboard v4.3", + "alarm-rules-unavailable-desc": "Use pre-built Alarm Rule templates to detect critical conditions like low battery, threshold breaches, or devices going offline. Skip writing the rule logic and start reacting to incidents the moment they happen.", + "alarm-rules-unavailable-upgrade": "Upgrade instance", + "alarm-rules-unavailable-current": "Current platform version: ThingsBoard v{{version}}", + "pe-required-title": "Professional Edition required", + "pe-required-message": "This item is available only on ThingsBoard Professional Edition. You are currently running Community Edition. To install it, upgrade to Professional Edition.", + "upgrade-required-title": "ThingsBoard upgrade required", + "upgrade-required-message": "This item requires ThingsBoard {{minVersion}} or newer. You are currently running {{currentVersion}}. Please upgrade your instance to install it.", + "become-creator-text": "Submit your templates to the ThingsBoard IoT Hub to get featured and showcase your solutions to our global community.", + "contribute": "Contribute", + "creator-profile": "Creator Profile", + "title-widgets": "Widgets", + "title-dashboards": "Dashboards", + "title-calculated-fields": "Calculated Fields", + "title-alarm-rules": "Alarm Rules", + "title-rule-chains": "Rule Chains", + "title-devices": "Devices", + "title-solution-templates": "Solution Templates", + "subtitle-widgets": "Browse community widgets for your dashboards", + "subtitle-dashboards": "Browse ready-to-use dashboards", + "subtitle-solution-templates": "Browse complete IoT solution packages", + "subtitle-calculated-fields": "Browse calculated field templates", + "subtitle-alarm-rules": "Browse alarm rule templates", + "subtitle-rule-chains": "Browse rule chain templates", + "subtitle-devices": "Browse device configurations", + "search-dashboards": "Search dashboards...", + "search-solution-templates": "Search solution templates...", + "search-calculated-fields": "Search calculated fields...", + "search-alarm-rules": "Search alarm rules...", + "search-rule-chains": "Search rule chains...", + "search-devices": "Search devices...", + "sort-most-installed": "Most installed", + "sort-newest": "Newest", + "sort-name": "Name (A-Z)", + "type-filter-label": "Type", + "category": "Category", + "use-case": "Use case", + "vendor": "Vendor", + "view-setup-guide": "View setup guide", + "hardware-type": "Hardware Type", + "connectivity": "Connectivity", + "clear-all-filters": "Clear all filters", + "clear-all": "Clear all", + "results-count": "{{count}} results", + "unable-to-load": "Unable to load", + "unable-to-load-text": "There was a problem loading items. Please try again.", + "network-server-unavailable": "Network or server unavailable", + "network-server-unavailable-text": "We couldn’t reach the catalog. Please try again in a moment.", + "try-again": "Try again", + "retry": "Retry", + "no-items-found": "No items found", + "no-items-found-text": "Try adjusting your search or filters.", + "no-widgets-found": "No widgets found", + "browse-tip-prefix": "Can't find what you need?", + "browse-tip-link": "Browse IoT Hub", + "browse-tip-suffix": "for more widgets.", + "creator": "Creator", + "manage": "Manage", + "details": "Details", + "become-a-creator": "Become a creator", + "back-to-iot-hub": "Back to IoT Hub", + "verified-creator": "Verified Creator", + "published-items": "Published items", + "by-creator": "by {{name}}", + "installs": "installs", + "more": "more", + "categories": "Categories", + "use-cases": "Use Cases", + "changelog": "Changelog", + "created-by": "Created by {{name}}", + "install-confirm": "Install {{name}} v{{version}}?", + "install-confirm-title": "Install '{{name}}'?", + "install-desc": "Installing this will automatically create and configure the necessary resources within your tenant", + "install-success-desc": "'{{name}}' has been installed successfully", + "remove": "Remove", + "remove-confirm-title": "Remove '{{name}}'?", + "remove-desc": "Removing this will also remove the installed entity and its associated resources within your tenant", + "remove-desc-solution-template": "Removing this solution template will also remove all created entities including dashboards, rule chains, devices, and other associated resources within your tenant", + "remove-anyway": "Remove anyway", + "select-entity-for-cf": "Select entity for calculated field '{{name}}'", + "rule-chain-install-subtitle": "Installing automatically creates the rule chain within your tenant. Optionally set it as a profile's default so entities of that profile route through it.", + "rule-chain-set-as-profile-default-toggle": "Set as profile default rule chain", + "rule-chain-set-as-profile-default-tooltip": "If enabled, all entities of the selected profile will route messages through this rule chain.", + "rule-chain-overwrite-title": "Replace existing default rule chain?", + "rule-chain-overwrite-body": "Profile {{profile}} currently uses {{existing}} as its default rule chain. Installing will replace it with this rule chain.", + "rule-chain-overwrite-replace": "Replace", + "install": "Install", + "connect": "Connect", + "connect-device": "Connect device", + "installing": "Installing...", + "installed": "Installed", + "install-success": "{{name}} installed successfully", + "install-success-title": "Installation Successful", + "install-success-message": "'{{name}}' v{{version}} has been installed successfully.", + "install-error": "Failed to install {{name}}", + "solution-install-title": "Solution template successfully installed", + "solution-instructions": "Solution instructions", + "goto-main-dashboard": "Go to main dashboard", + "install-error-title": "Installation Failed", + "install-error-message": "Failed to install '{{name}}'.", + "install-plan-title": "Install '{{name}}' and its dependencies", + "install-plan-will-install": "{{count}} item(s) will be installed.", + "install-plan-will-update": "{{count}} item(s) already installed and will be skipped.", + "install-plan-missing-warning": "{{count}} required item(s) could not be found on the marketplace. '{{ name }}' may not work fully without them.", + "install-plan-status-will": "Install", + "install-plan-status-installed": "Already installed", + "install-plan-status-missing": "Missing", + "install-plan-confirm": "Install", + "install-partial-title": "Installed with warnings", + "install-partial-desc": "'{{name}}' was installed, but some required items were missing.", + "install-rollback-partial": "Some of the items installed before the failure could not be removed automatically and may need to be deleted manually.", + "check-for-updates": "Check for updates", + "updates": "Updates", + "up-to-date": "Up to date", + "update": "Update", + "update-to-version": "Update to v {{ version }}", + "update-item-title": "Update Item", + "update-confirm": "Update '{{name}}' to version {{version}}?", + "update-confirm-title": "Update '{{name}}'?", + "update-desc": "Updating this will replace the current version with the latest and reconfigure the associated resources within your tenant", + "update-success-desc": "'{{name}}' has been updated successfully", + "updating": "Updating...", + "update-success-title": "Update Successful", + "update-success-message": "'{{name}}' has been updated to version {{version}}.", + "entity-modified-title": "Entity Modified", + "entity-modified-text": "The {{type}} has been modified locally. Do you still want to update it?", + "update-error-title": "Update Failed", + "update-error-message": "Failed to update '{{name}}'.", + "update-error": "Failed to update {{name}}", + "most-popular": "Most popular", + "all": "All", + "installed-items": "Installed Items", + "installed-items-for": "Installed Items for \"{{name}}\"", + "search-installed-items": "Search installed items...", + "item-name": "Name", + "item-type": "Type", + "item-version": "Version", + "installed-date": "Installed", + "no-installed-items": "No installed items found", + "no-installed-items-text": "Try adjusting your search or filters.", + "remove-installed-item-title": "Remove Installed Item", + "remove-installed-item-text": "Are you sure you want to remove '{{name}}'? The installed entity will also be removed.", + "installed-item-removed": "'{{name}}' has been removed", + "installed-item-remove-error": "Failed to remove '{{name}}'", + "open-installed-entity": "Open installed entity", + "view-item-details": "View item details", + "review-device-instructions": "Review device instructions", + "open-item-type": "Open {{type}}", + "back-to-marketplace": "Back to Marketplace", + "device-install-select-connectivity": "Choose a connection method for your device", + "pe-only": "PE Only", + "pe-connectivity-prompt-title-suffix": "available only in ThingsBoard Professional Edition", + "pe-connectivity-prompt-try-pe": "Try Professional Edition", + "connection-method": "Connection method", + "step-prerequisites": "Prerequisites", + "step-configuration": "Configuration", + "step-provisioning": "Provisioning", + "device-install-step-error": "Failed", + "device-install-step-pending": "Pending", + "device-install-step-running": "Creating...", + "device-install-step-success": "Created", + "device-install-step-type-DASHBOARD": "Dashboard", + "device-install-step-type-DEVICE": "Device", + "device-install-step-type-DEVICE_PROFILE": "Device Profile", + "device-install-step-type-GATEWAY": "Gateway", + "device-install-step-type-GATEWAY_CONNECTOR": "Gateway Connector", + "device-install-step-type-RULE_CHAIN": "Rule Chain", + "device-install-conflict-exists": "{{type}} with this name already exists", + "device-install-use-existing": "Use existing", + "device-install-overwrite": "Overwrite", + "device-install-create-copy": "Create copy", + "device-install-resolution-created": "Created", + "device-install-resolution-use-existing": "Used existing", + "device-install-resolution-overwrite": "Overwritten", + "device-install-resolution-create-copy": "Created copy", + "device-install-title": "Connect \"{{name}}\"", + "device-installing-title": "Installing \"{{name}}\"", + "done": "Done", + "in-progress": "In progress", + "item-detail": "IoT Hub item", + "unpublished-warning-title": "Unpublished content", + "unpublished-warning-text": "This is a preview of unpublished content. It has not been reviewed by IoT Hub. Installing unverified content can introduce security and stability risks — only continue if you trust the creator.", + "unpublished-warning-confirm": "I understand the risk, continue", + "unpublished-preview": "Unpublished preview", + "deep-link-invalid-id": "Invalid IoT Hub item link.", + "deep-link-not-found": "This IoT Hub item doesn't exist or was removed.", + "deep-link-fetch-failed": "Couldn't load IoT Hub item. Please try again." + }, + "item-data": { + "widget-type-timeseries": "Timeseries", + "widget-type-latest": "Latest", + "widget-type-rpc": "Control", + "widget-type-alarm": "Alarm", + "widget-type-static": "Static", + "cf-type-simple": "Simple", + "cf-type-script": "Script", + "cf-type-geofencing": "Geofencing", + "cf-type-alarm": "Alarm", + "cf-type-propagation": "Propagation", + "cf-type-related-entities-aggregation": "Related Entities Aggregation", + "cf-type-entity-aggregation": "Entity Aggregation", + "rule-chain-type-core": "Core", + "rule-chain-type-edge": "Edge", + "node-type-enrichment": "Enrichment", + "node-type-filter": "Filter", + "node-type-transformation": "Transformation", + "node-type-action": "Action", + "node-type-analytics": "Analytics", + "node-type-external": "External", + "node-type-flow": "Flow", + "node-type-unknown": "Unknown" }, "js-func": { "no-return-error": "Function must return value!", @@ -6731,6 +7002,7 @@ "widget-bundle": "Widgets Bundle", "all-bundles": "All bundles", "select-widgets-bundle": "Select widgets bundle", + "installed": "Installed", "widgets": "Widgets", "all-widgets": "All widgets", "widget": "Widget", @@ -6761,6 +7033,11 @@ "rpc-short": "control", "alarm-short": "alarm", "static-short": "static", + "type-timeseries": "Timeseries", + "type-latest": "Latest", + "type-rpc": "Control", + "type-alarm": "Alarm", + "type-static": "Static", "select-widget-type": "Select widget type", "missing-widget-title-error": "Widget title must be specified!", "widget-saved": "Widget saved", @@ -8261,6 +8538,7 @@ "roadmap": "Roadmap", "satellite": "Satellite", "hybrid": "Hybrid", + "webgl-not-available": "The selected map layer requires graphics acceleration to display. Please enable 'Hardware acceleration' in your browser settings, or switch to a different layer.", "reference": { "reference-layer": "Reference layer", "no-layer": "No layer", @@ -9363,6 +9641,9 @@ "no-links-matching": "No links matching '{{name}}' were found.", "columns": "Columns" }, + "iot-hub": { + "title-text": "Build faster with community-proven resources from" + }, "recent-dashboards": { "title": "Dashboards", "last": "Last viewed", diff --git a/ui-ngx/src/assets/locale/locale.constant-es_ES.json b/ui-ngx/src/assets/locale/locale.constant-es_ES.json index cca6b2a6ff..0913972e47 100644 --- a/ui-ngx/src/assets/locale/locale.constant-es_ES.json +++ b/ui-ngx/src/assets/locale/locale.constant-es_ES.json @@ -1097,8 +1097,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -9538,4 +9538,4 @@ "language": { "language": "Idioma" } -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/locale/locale.constant-fr_FR.json b/ui-ngx/src/assets/locale/locale.constant-fr_FR.json index 6406930aab..8934bb139c 100644 --- a/ui-ngx/src/assets/locale/locale.constant-fr_FR.json +++ b/ui-ngx/src/assets/locale/locale.constant-fr_FR.json @@ -1097,8 +1097,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -9538,4 +9538,4 @@ "language": { "language": "Langue" } -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/locale/locale.constant-it_IT.json b/ui-ngx/src/assets/locale/locale.constant-it_IT.json index ac47330f30..3117d40df7 100644 --- a/ui-ngx/src/assets/locale/locale.constant-it_IT.json +++ b/ui-ngx/src/assets/locale/locale.constant-it_IT.json @@ -1097,8 +1097,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -9538,4 +9538,4 @@ "language": { "language": "Lingua" } -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/locale/locale.constant-ja_JP.json b/ui-ngx/src/assets/locale/locale.constant-ja_JP.json index b7b87fd579..526cabd1dd 100644 --- a/ui-ngx/src/assets/locale/locale.constant-ja_JP.json +++ b/ui-ngx/src/assets/locale/locale.constant-ja_JP.json @@ -1097,8 +1097,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -9538,4 +9538,4 @@ "language": { "language": "言語" } -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/locale/locale.constant-lt_LT.json b/ui-ngx/src/assets/locale/locale.constant-lt_LT.json index c3ddb5af74..4069fe951f 100644 --- a/ui-ngx/src/assets/locale/locale.constant-lt_LT.json +++ b/ui-ngx/src/assets/locale/locale.constant-lt_LT.json @@ -1106,8 +1106,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", diff --git a/ui-ngx/src/assets/locale/locale.constant-nl_NL.json b/ui-ngx/src/assets/locale/locale.constant-nl_NL.json index f9adb7f86c..3281909806 100644 --- a/ui-ngx/src/assets/locale/locale.constant-nl_NL.json +++ b/ui-ngx/src/assets/locale/locale.constant-nl_NL.json @@ -1097,8 +1097,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -9538,4 +9538,4 @@ "language": { "language": "Taal" } -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/locale/locale.constant-no_NO.json b/ui-ngx/src/assets/locale/locale.constant-no_NO.json index c7d1a4d7f3..9a8ee78206 100644 --- a/ui-ngx/src/assets/locale/locale.constant-no_NO.json +++ b/ui-ngx/src/assets/locale/locale.constant-no_NO.json @@ -1097,8 +1097,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -9538,4 +9538,4 @@ "language": { "language": "Språk" } -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/locale/locale.constant-pt_BR.json b/ui-ngx/src/assets/locale/locale.constant-pt_BR.json index f13ad03a3b..37e8bbae34 100644 --- a/ui-ngx/src/assets/locale/locale.constant-pt_BR.json +++ b/ui-ngx/src/assets/locale/locale.constant-pt_BR.json @@ -1097,8 +1097,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -9538,4 +9538,4 @@ "language": { "language": "Idioma" } -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/locale/locale.constant-tr_TR.json b/ui-ngx/src/assets/locale/locale.constant-tr_TR.json index 66bc099e84..dfc2d1be39 100644 --- a/ui-ngx/src/assets/locale/locale.constant-tr_TR.json +++ b/ui-ngx/src/assets/locale/locale.constant-tr_TR.json @@ -1097,8 +1097,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -9538,4 +9538,4 @@ "language": { "language": "Dil" } -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/locale/locale.constant-uk_UA.json b/ui-ngx/src/assets/locale/locale.constant-uk_UA.json index 654f305ae0..d71e1039b2 100644 --- a/ui-ngx/src/assets/locale/locale.constant-uk_UA.json +++ b/ui-ngx/src/assets/locale/locale.constant-uk_UA.json @@ -1097,8 +1097,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -9538,4 +9538,4 @@ "language": { "language": "Мова" } -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/locale/locale.constant-zh_CN.json b/ui-ngx/src/assets/locale/locale.constant-zh_CN.json index fb1c849057..7f11a953ad 100644 --- a/ui-ngx/src/assets/locale/locale.constant-zh_CN.json +++ b/ui-ngx/src/assets/locale/locale.constant-zh_CN.json @@ -1097,8 +1097,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -9538,4 +9538,4 @@ "language": { "language": "语言" } -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/widget/all-iot-hub-widgets.png b/ui-ngx/src/assets/widget/all-iot-hub-widgets.png new file mode 100644 index 0000000000..bf9eb1a16c Binary files /dev/null and b/ui-ngx/src/assets/widget/all-iot-hub-widgets.png differ diff --git a/ui-ngx/src/assets/widget/all-widgets.png b/ui-ngx/src/assets/widget/all-widgets.png new file mode 100644 index 0000000000..a5b9dca579 Binary files /dev/null and b/ui-ngx/src/assets/widget/all-widgets.png differ diff --git a/ui-ngx/src/assets/widget/installed-from-iot-hub.png b/ui-ngx/src/assets/widget/installed-from-iot-hub.png new file mode 100644 index 0000000000..79f5d73988 Binary files /dev/null and b/ui-ngx/src/assets/widget/installed-from-iot-hub.png differ diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss index a694e04a65..ab178e29ae 100644 --- a/ui-ngx/src/form.scss +++ b/ui-ngx/src/form.scss @@ -720,6 +720,31 @@ } } + .tb-no-service-bg { + margin: 10px; + position: relative; + flex: 1; + width: 100%; + max-height: 100px; + &:before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: $tb-primary-color; + mask-image: url(/assets/home/no-service.svg); + -webkit-mask-image: url(/assets/home/no-service.svg); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-size: contain; + mask-position: center; + -webkit-mask-position: center; + } + } + .tb-no-data-text { font-weight: 500; font-size: 14px; diff --git a/ui-ngx/src/scss/constants.scss b/ui-ngx/src/scss/constants.scss index aca02be591..addc319a4d 100644 --- a/ui-ngx/src/scss/constants.scss +++ b/ui-ngx/src/scss/constants.scss @@ -25,7 +25,10 @@ $mat-lt-xl: "screen and (max-width: 1919px)"; $mat-gt-xs: "screen and (min-width: 600px)"; $mat-gt-sm: "screen and (min-width: 960px)"; $mat-gt-md: "screen and (min-width: 1280px)"; +$mat-lt-xmd: "screen and (max-width: 1599px)"; $mat-gt-xmd: "screen and (min-width: 1600px)"; +$mat-lt-xxl: "screen and (max-width: 2447px)"; +$mat-gt-xxl: "screen and (min-width: 2448px)"; $mat-gt-xl: "screen and (min-width: 1920px)"; $mat-md-lg: "screen and (min-width: 960px) and (max-width: 1819px)"; diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss index 9058ce4960..00e051c497 100644 --- a/ui-ngx/src/styles.scss +++ b/ui-ngx/src/styles.scss @@ -1078,6 +1078,25 @@ pre.tb-highlight { } } + .tb-fullscreen-dialog-lt-md { + @media #{$mat-lt-md} { + min-height: 100%; + min-width: 100%; + max-width: none !important; + position: absolute !important; + inset: 0; + .mat-mdc-dialog-container { + > *:first-child, form { + min-width: 100% !important; + height: 100%; + } + .mat-mdc-dialog-content { + max-height: 100%; + } + } + } + } + .tb-fullscreen-dialog { @media #{$mat-lt-sm} { min-height: 100%; diff --git a/ui-ngx/yarn.lock b/ui-ngx/yarn.lock index 6b5f48283b..e05a9e4a7c 100644 --- a/ui-ngx/yarn.lock +++ b/ui-ngx/yarn.lock @@ -160,24 +160,24 @@ "@angular-devkit/core" "^20.0.0" "@angular/build" "^20.0.0" -"@angular-devkit/architect@0.2003.24", "@angular-devkit/architect@>= 0.2000.0 < 0.2100.0", "@angular-devkit/architect@>=0.2000.0 < 0.2100.0": - version "0.2003.24" - resolved "https://registry.yarnpkg.com/@angular-devkit/architect/-/architect-0.2003.24.tgz#1c59822ffeada4248f669424c7c0534f39fe8bc5" - integrity sha512-E7mCdkL6SWnW60G1nGLuugmsopza/eVIrDWB1y0vLkWN8gepOvnHz2Uf637kdzed/F1WoqR+dhv1SfsaJapzKA== +"@angular-devkit/architect@0.2003.25", "@angular-devkit/architect@>= 0.2000.0 < 0.2100.0", "@angular-devkit/architect@>=0.2000.0 < 0.2100.0": + version "0.2003.25" + resolved "https://registry.yarnpkg.com/@angular-devkit/architect/-/architect-0.2003.25.tgz#5fef6c3b713c7db438464e7f352bc762eafedfa5" + integrity sha512-39pTqt4wSmpD1WeCee46oSGXRh6TR1PFd9GZEwyZoMvBTMs8mE2sXGxUgd4Qyi5CkQ1XnCM5XfgJcjUWUQRoGg== dependencies: - "@angular-devkit/core" "20.3.24" + "@angular-devkit/core" "20.3.25" rxjs "7.8.2" -"@angular-devkit/build-angular@20.3.24": - version "20.3.24" - resolved "https://registry.yarnpkg.com/@angular-devkit/build-angular/-/build-angular-20.3.24.tgz#871b7c134d9c9f77b16cd68bca340801638e56a7" - integrity sha512-zBjETGqKtiojF8VHvjELW+UAMBRJ7ziqNc1xwUtqRuWZQVz8HH6x8m8Ncw4mSq9ecCFC4VB7OWTJ1VkAdYSBnQ== +"@angular-devkit/build-angular@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular-devkit/build-angular/-/build-angular-20.3.25.tgz#1e3f973cd33a399ab6d05839cede6fe29b8e3219" + integrity sha512-jp2sbJhbVRT65RbGENY/lz3Z0W0D50Af3xzENmLDLBVp9uhlpIPSTC9LG4CEPV7T6H5Oq6ymHKM+OO5WwTlHHA== dependencies: "@ampproject/remapping" "2.3.0" - "@angular-devkit/architect" "0.2003.24" - "@angular-devkit/build-webpack" "0.2003.24" - "@angular-devkit/core" "20.3.24" - "@angular/build" "20.3.24" + "@angular-devkit/architect" "0.2003.25" + "@angular-devkit/build-webpack" "0.2003.25" + "@angular-devkit/core" "20.3.25" + "@angular/build" "20.3.25" "@babel/core" "7.28.3" "@babel/generator" "7.28.3" "@babel/helper-annotate-as-pure" "7.27.3" @@ -188,7 +188,7 @@ "@babel/preset-env" "7.28.3" "@babel/runtime" "7.28.3" "@discoveryjs/json-ext" "0.6.3" - "@ngtools/webpack" "20.3.24" + "@ngtools/webpack" "20.3.25" ansi-colors "4.1.3" autoprefixer "10.4.21" babel-loader "10.0.0" @@ -210,7 +210,7 @@ ora "8.2.0" picomatch "4.0.4" piscina "5.1.3" - postcss "8.5.6" + postcss "8.5.12" postcss-loader "8.1.1" resolve-url-loader "5.0.0" rxjs "7.8.2" @@ -230,18 +230,18 @@ optionalDependencies: esbuild "0.28.0" -"@angular-devkit/build-webpack@0.2003.24": - version "0.2003.24" - resolved "https://registry.yarnpkg.com/@angular-devkit/build-webpack/-/build-webpack-0.2003.24.tgz#9d96b1d2c05faf3bcb696059c736d9498230ba36" - integrity sha512-gfadsLK3SxbGpZQMSJGr8RK65R2mZi/VmHXdztXQHATvMpy+00CX1Nu3n+lPTxOVbC73aIczUkUbIuRC1HBCqg== +"@angular-devkit/build-webpack@0.2003.25": + version "0.2003.25" + resolved "https://registry.yarnpkg.com/@angular-devkit/build-webpack/-/build-webpack-0.2003.25.tgz#ec1e1fbc690edb319a80f31acdf8673199352d43" + integrity sha512-jJMpYBdWeRfvrCna7JWsyMBbvjMcPblyzh4/pSfWw5znla3hJGzDtmb84qKZ+IB8eZNEcky4iGR5LK2jdGFLAg== dependencies: - "@angular-devkit/architect" "0.2003.24" + "@angular-devkit/architect" "0.2003.25" rxjs "7.8.2" -"@angular-devkit/core@20.3.24", "@angular-devkit/core@>= 20.0.0 < 21.0.0", "@angular-devkit/core@^20.0.0": - version "20.3.24" - resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-20.3.24.tgz#e4108ad599d507d934b9ca990d98a4bb23bd0471" - integrity sha512-kmOjXJcbFxUI91nds9n6XZ6Y/DyQ7/TqRXbHHqvkz9RtlIpdbgWHlIZIq6mgsPOgPBzkxFjtncVARYZUI3yxaw== +"@angular-devkit/core@20.3.25", "@angular-devkit/core@>= 20.0.0 < 21.0.0", "@angular-devkit/core@^20.0.0": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-20.3.25.tgz#779b2eba00f688f0b9105e1562d9c14738cfabfa" + integrity sha512-pSfeWEoS1y9zxqTOw0Etj2NXkRmp/aU52wdnyq3KqVA9cJtgxtlOHlBBNswTil4dReojEy+0K1xJm+mLuWuLxA== dependencies: ajv "8.18.0" ajv-formats "3.0.1" @@ -250,12 +250,12 @@ rxjs "7.8.2" source-map "0.7.6" -"@angular-devkit/schematics@20.3.24", "@angular-devkit/schematics@>= 20.0.0 < 21.0.0": - version "20.3.24" - resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-20.3.24.tgz#4631ec0755363173db0e89eadc0d756985e0bae1" - integrity sha512-B5fBPi0xnEDI0wLLkCjsrYjazRPyf+rnHLAHi34thMdeY9dqljJGWYdNuyUUBak6HNPBLdEo1EUSNcOF9OWt4A== +"@angular-devkit/schematics@20.3.25", "@angular-devkit/schematics@>= 20.0.0 < 21.0.0": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-20.3.25.tgz#446618dbeb9b9756784e46b01190b71d10b6ffee" + integrity sha512-IB0IHf8ZRqr69hT/XIfHkYLPAYHWQ/WUc6+fKHBwq58jJlm/y5QUeTEuXvJ18IX/+hUIqw+E2Q3T0N9rLDLzXg== dependencies: - "@angular-devkit/core" "20.3.24" + "@angular-devkit/core" "20.3.25" jsonc-parser "3.3.1" magic-string "0.30.17" ora "8.2.0" @@ -321,20 +321,20 @@ dependencies: "@angular-eslint/bundled-angular-compiler" "20.7.0" -"@angular/animations@20.3.19": - version "20.3.19" - resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-20.3.19.tgz#636cf19528c548427f3f2ce6c4dd3b863b1475c4" - integrity sha512-/FjU9i7J58/yBURhgVSIiLDcuyOfJxAa0b7ZrOsx6P+FES+M2T2BKZl5V2NuiP2fDFtjsV7U+M/Z9UNUmeHCEw== +"@angular/animations@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-20.3.25.tgz#f672d78b9282a93f23b91739093dc1b40663e1ef" + integrity sha512-lQmti3tI85D525TjUVGqCNLzFxSUoZg+vgIyvuGJZPY0UU/o2S6KAxW6ObmcRotZZHNfenLHIxWgzamBDjIjuw== dependencies: tslib "^2.3.0" -"@angular/build@20.3.24", "@angular/build@^20.0.0": - version "20.3.24" - resolved "https://registry.yarnpkg.com/@angular/build/-/build-20.3.24.tgz#79e423a077a4177074b52e3a20c76f082fc08824" - integrity sha512-AMGXOr268y+kVutl4LpOXY2xv9P+RXLCyXUkzYwi8XwGyxAJZfyu/L5qtcO2llExp5CuvP0OxkWxk4JOGRi9TA== +"@angular/build@20.3.25", "@angular/build@^20.0.0": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular/build/-/build-20.3.25.tgz#cb21941c33b00758a2496d7ffc1e4d5b869d0867" + integrity sha512-ddWmPzYuzDWz9ql0262u9w3OJHXpSjHVNIDFIYOG2XYyMj/Xve0RkJ8/xvV+Hv7T3iqyyGKtsO+n/d0GCJQCtQ== dependencies: "@ampproject/remapping" "2.3.0" - "@angular-devkit/architect" "0.2003.24" + "@angular-devkit/architect" "0.2003.25" "@babel/core" "7.28.3" "@babel/helper-annotate-as-pure" "7.27.3" "@babel/helper-split-export-declaration" "7.24.7" @@ -370,18 +370,18 @@ parse5 "^8.0.0" tslib "^2.3.0" -"@angular/cli@20.3.24": - version "20.3.24" - resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-20.3.24.tgz#e6ab456b83eede47ccc3503dd6068bdf04be4e05" - integrity sha512-TT7LldRJPCi1VGBJMzcrYU+P3w2G6zgubwhFUdJthUiS77A+At6WJqaRY2BdIS3l7HZOXTEaU2Vj2Gkf2ol2Yw== +"@angular/cli@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-20.3.25.tgz#f16e78a689dfc546b55e0fc7da68545d1b307944" + integrity sha512-QOSxza45CZY11kqPVpqsU+WGYF99rR/r9A9GykZQWuAHb5SEAxlXHyaaGMu/BMtBHy5HNIlJH25UlzelrbaNyQ== dependencies: - "@angular-devkit/architect" "0.2003.24" - "@angular-devkit/core" "20.3.24" - "@angular-devkit/schematics" "20.3.24" + "@angular-devkit/architect" "0.2003.25" + "@angular-devkit/core" "20.3.25" + "@angular-devkit/schematics" "20.3.25" "@inquirer/prompts" "7.8.2" "@listr2/prompt-adapter-inquirer" "3.0.1" "@modelcontextprotocol/sdk" "1.26.0" - "@schematics/angular" "20.3.24" + "@schematics/angular" "20.3.25" "@yarnpkg/lockfile" "1.1.0" algoliasearch "5.35.0" ini "5.0.0" @@ -394,17 +394,17 @@ yargs "18.0.0" zod "4.1.13" -"@angular/common@20.3.19": - version "20.3.19" - resolved "https://registry.yarnpkg.com/@angular/common/-/common-20.3.19.tgz#fb19c335a5a5ea84cd6c90a4abda99c2de5c8b17" - integrity sha512-hcB1eUEN8LGcKGc4DlRJ+abS6AYfbEHDZKg8LnXNugkbwI6Ebyh2AUYTDhzZL2S4aH+C8biHKgSYHFCqieCRhA== +"@angular/common@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular/common/-/common-20.3.25.tgz#0f2bd058ec6595cfb4dd6a05601c41cb5cf3cb23" + integrity sha512-rnRGcXbjet0DHgkRL4Dqxk21G2T4UypVfiTV/fay58H8w9U89PJ1L6gRmk8B/uyfpii/9r23cBwnpcguQykxYw== dependencies: tslib "^2.3.0" -"@angular/compiler-cli@20.3.19": - version "20.3.19" - resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-20.3.19.tgz#baeb020e693a759b0b8190931611309678b1e011" - integrity sha512-ET/JjO8s62kAHfgIsGXlvW5VUwLqHm03q1y/2yD7aQW/WdDvssMsvZv7Knl440989vdOFemIGTMwVPakmWqRmA== +"@angular/compiler-cli@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-20.3.25.tgz#64c7cdcd4118cd24cb1905804754ccf3d90a7df4" + integrity sha512-iqxwVo5Pgzt3EfT49OZ6plxA6KKxwv7ixx1XNH7QRvaOJC9gmsPScWpx+LO7ZsVZdo/NkA+rnXDl0PauUgGciw== dependencies: "@babel/core" "7.28.3" "@jridgewell/sourcemap-codec" "^1.4.14" @@ -415,31 +415,31 @@ tslib "^2.3.0" yargs "^18.0.0" -"@angular/compiler@20.3.19": - version "20.3.19" - resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-20.3.19.tgz#cce87072c55c1bab3fda92d83048d0136cea83ad" - integrity sha512-ETkgDKm0l2PuaBubgPJe0ccy8kE75DFu6/zKcz7TUuk3KrKF2OZAopbbjftsUSZGeCNvCdqHzjmcL6hQ6oAOwA== +"@angular/compiler@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-20.3.25.tgz#674d07b2437e9a3c99e9bb1c10e4d13bbedb4086" + integrity sha512-TSh6gVoQqlLPqWwsYMK0lfVEQYENQO+USzS+BHFXEHFfgBRap6qDpIUGnRdj0Y2PlaVJUVFbeq1855EZUPUEoA== dependencies: tslib "^2.3.0" -"@angular/core@20.3.19": - version "20.3.19" - resolved "https://registry.yarnpkg.com/@angular/core/-/core-20.3.19.tgz#ce8b2a0df48612b3d9bfefe8098a1018a3186406" - integrity sha512-SYnwW+q51bQoPtGFoGovm1P5GK9fMEXsG0lGaEAUapjskblAYyX7hLlM/jgueSojv2SjhqNF8aXR+gjHLhZVNA== +"@angular/core@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular/core/-/core-20.3.25.tgz#4418a9625a8a152029b49158dbda01f1c83d19c0" + integrity sha512-B4XnnR5jzikZDvZ4PjwjAWZMT14dxrKrmJdwa/n0yp7rMPkIJTKF6ZJMg4d1pLWLLSsc2oWHioN3UrWlGqIKnA== dependencies: tslib "^2.3.0" -"@angular/forms@20.3.19": - version "20.3.19" - resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-20.3.19.tgz#179fa22f6e2daf3fe58c400d3e3a7c10647f0ebc" - integrity sha512-WJotd+Lhl4FG2b0K+aQNyQDHhR515zKCuphjiUqEW7sifWrOQxANLKzPBngGrH75ayANFgPaDf7U3ZRIoblcQA== +"@angular/forms@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-20.3.25.tgz#10a16a9ebe8e71c2a236b1bf69c3fe4bd44923c5" + integrity sha512-vGRo1LVPFo2Cu0k+QyDTlsBv5UbN0c3Et2YMS+43oyi1c4keocntBccOjLyM5C0kpMz4+pP81MqqYpAWu2k+TQ== dependencies: tslib "^2.3.0" -"@angular/language-service@20.3.19": - version "20.3.19" - resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-20.3.19.tgz#ba9e04a35717d948ff972476486eae2ea25a109d" - integrity sha512-9J0XrAKXInz11KKyNMrMZmn2NSjVbxzt/DsAumbrzzixeZwiY7vDy2Kqw/LLFLi7IlfMQ/gznz/mCVVgUWI5Gg== +"@angular/language-service@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-20.3.25.tgz#a319dec7d6369337908862461b45be96c6851a06" + integrity sha512-3PZUwbDUVQXk9BLSiNUpDxTnRXGR3szwK9QFQaGDt8lhmLYaQLh3VJsY0FHDRghHZYIGR2P2MbVxGQHytF+IPw== "@angular/material@20.2.14": version "20.2.14" @@ -448,24 +448,24 @@ dependencies: tslib "^2.3.0" -"@angular/platform-browser-dynamic@20.3.19": - version "20.3.19" - resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-20.3.19.tgz#b13cb94dc39be24e22d70712605ca879aa5e83b2" - integrity sha512-OgErw7wjcC+8yKF5h99hJq8x+tvc091wThfmdL5YC+U3HgRmUaNZFgB/jR7cb/NeeeC42QW5Vc0qoUTC9rMnLQ== +"@angular/platform-browser-dynamic@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-20.3.25.tgz#5051bea6135c0e9585956bc2ec0df4d9dabac182" + integrity sha512-3Ku+IsN4tQPVBsw75SoLbLf7TsXAGL0rGPHSsyNYFhG2ZZeQuYNIAi8mc4cwz/qMDnuassHFrCxuLDgN6Yab5w== dependencies: tslib "^2.3.0" -"@angular/platform-browser@20.3.19": - version "20.3.19" - resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-20.3.19.tgz#4bffa36591d9ba5adc89a1b48952fdfd982d2f30" - integrity sha512-TRZfatH1B/kreDwFRwtpLEurJQ6044qh6DWpvxzTbugaG5otLQJKTk+1z81/KsJwQqc1+24v+yuywc1LM7aq7w== +"@angular/platform-browser@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-20.3.25.tgz#f738f1895415c76932b5064d04b4493d17159cdf" + integrity sha512-0k06U/AJRQifGMLkcU3R9uEHWbuKEzkKMuKcGagXTrkeFvCG2Ub4JdsbcjFNWB2bspWgaxIMSceuj7c83U5wOA== dependencies: tslib "^2.3.0" -"@angular/router@20.3.19": - version "20.3.19" - resolved "https://registry.yarnpkg.com/@angular/router/-/router-20.3.19.tgz#2346ff945a8039194ba921a473a8f4565a92b949" - integrity sha512-qHrMniHOsCJ4neZmcQVodjutJilyXAXk7EhLa931QyL0qyVKVomv6E0I3UFzRaC3ZeHc+hzBdU6C6bvMFKTl1g== +"@angular/router@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular/router/-/router-20.3.25.tgz#0b79c6c0a0f4212002713c03bbb2709dbd79c546" + integrity sha512-YIjLHWAufTaukNj15hEoys29e7XNhnCRsS1/95h/OqR69R3adbB8hV7ut7gO6XdXokriYqb4gtoUjoESxR+xFQ== dependencies: tslib "^2.3.0" @@ -1382,135 +1382,135 @@ resolved "https://registry.yarnpkg.com/@es-joy/resolve.exports/-/resolve.exports-1.2.0.tgz#fe541a68aa080255f798c8561714ac8fad72cdd5" integrity sha512-Q9hjxWI5xBM+qW2enxfe8wDKdFWMfd0Z29k5ZJnuBqD/CasY5Zryj09aCA6owbGATWz+39p5uIdaHXpopOcG8g== -"@esbuild/aix-ppc64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.28.0.tgz#7a289c158e29cbf59ea0afc83cc80f06d1c89402" - integrity sha512-lhRUCeuOyJQURhTxl4WkpFTjIsbDayJHih5kZC1giwE+MhIzAb7mEsQMqMf18rHLsrb5qI1tafG20mLxEWcWlA== - -"@esbuild/android-arm64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.28.0.tgz#b8828d9edfa3a92660644eb8de6e4f3c203d7b17" - integrity sha512-+WzIXQOSaGs33tLEgYPYe/yQHf0WTU0X42Jca3y8NWMbUVhp7rUnw+vAsRC/QiDrdD31IszMrZy+qwPOPjd+rw== - -"@esbuild/android-arm@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.28.0.tgz#5ec1847605e05b5dbe5df90db9ff7e3e4c58dca7" - integrity sha512-wqh0ByljabXLKHeWXYLqoJ5jKC4XBaw6Hk08OfMrCRd2nP2ZQ5eleDZC41XHyCNgktBGYMbqnrJKq/K/lzPMSQ== - -"@esbuild/android-x64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.28.0.tgz#390642175b88ef82bad4cce03f8ab13fe9b1912e" - integrity sha512-+VJggoaKhk2VNNqVL7f6S189UzShHC/mR9EE8rDdSkdpN0KflSwWY/gWjDrNxxisg8Fp1ZCD9jLMo4m0OUfeUA== - -"@esbuild/darwin-arm64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.28.0.tgz#ae45325960d5950cd6951e4f97396f4e1ff7d8d3" - integrity sha512-0T+A9WZm+bZ84nZBtk1ckYsOvyA3x7e2Acj1KdVfV4/2tdG4fzUp91YHx+GArWLtwqp77pBXVCPn2We7Letr0Q== - -"@esbuild/darwin-x64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.28.0.tgz#c079247d589b6b99449659d94f06951b84bff2e4" - integrity sha512-fyzLm/DLDl/84OCfp2f/XQ4flmORsjU7VKt8HLjvIXChJoFFOIL6pLJPH4Yhd1n1gGFF9mPwtlN5Wf82DZs+LQ== - -"@esbuild/freebsd-arm64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.0.tgz#45c456215a486593c94900297202dc11c880a37a" - integrity sha512-l9GeW5UZBT9k9brBYI+0WDffcRxgHQD8ShN2Ur4xWq/NFzUKm3k5lsH4PdaRgb2w7mI9u61nr2gI2mLI27Nh3Q== - -"@esbuild/freebsd-x64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.28.0.tgz#0399494c1c85e4388e9b7040bd60d48f2a5b0d2c" - integrity sha512-BXoQai/A0wPO6Es3yFJ7APCiKGc1tdAEOgeTNy3SsB491S3aHn4S4r3e976eUnPdU+NbdtmBuLncYir2tMU9Nw== - -"@esbuild/linux-arm64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.28.0.tgz#d6d9f09ef0de54116bf459a4d53cac7e0952fe39" - integrity sha512-RVyzfb3FWsGA55n6WY0MEIEPURL1FcbhFE6BffZEMEekfCzCIMtB5yyDcFnVbTnwk+CLAgTujmV/Lgvih56W+A== - -"@esbuild/linux-arm@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.28.0.tgz#7b42ffa84c288ae94fdc431c1b28a89e3c3b9278" - integrity sha512-CjaaREJagqJp7iTaNQjjidaNbCKYcd4IDkzbwwxtSvjI7NZm79qiHc8HqciMddQ6CKvJT6aBd8lO9kN/ZudLlw== - -"@esbuild/linux-ia32@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.28.0.tgz#deb15d112ed8dd605346b6b953d23a21ff81253f" - integrity sha512-KBnSTt1kxl9x70q+ydterVdl+Cn0H18ngRMRCEQfrbqdUuntQQ0LoMZv47uB97NljZFzY6HcfqEZ2SAyIUTQBQ== - -"@esbuild/linux-loong64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.28.0.tgz#81fb89d07eecc79b157dea61033757726fce0ca4" - integrity sha512-zpSlUce1mnxzgBADvxKXX5sl8aYQHo2ezvMNI8I0lbblJtp8V4odlm3Yzlj7gPyt3T8ReksE6bK+pT3WD+aJRg== - -"@esbuild/linux-mips64el@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.28.0.tgz#d0e42691b3ff7af9fb2217b70fc01f343bdb62bb" - integrity sha512-2jIfP6mmjkdmeTlsX/9vmdmhBmKADrWqN7zcdtHIeNSCH1SqIoNI63cYsjQR8J+wGa4Y5izRcSHSm8K3QWmk3w== - -"@esbuild/linux-ppc64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.28.0.tgz#389f3e5e98f17d477c467cc87136e1a076eead87" - integrity sha512-bc0FE9wWeC0WBm49IQMPSPILRocGTQt3j5KPCA8os6VprfuJ7KD+5PzESSrJ6GmPIPJK965ZJHTUlSA6GNYEhg== - -"@esbuild/linux-riscv64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.28.0.tgz#763bd60d59b242be12da1e67d5729f3024c605fa" - integrity sha512-SQPZOwoTTT/HXFXQJG/vBX8sOFagGqvZyXcgLA3NhIqcBv1BJU1d46c0rGcrij2B56Z2rNiSLaZOYW5cUk7yLQ== - -"@esbuild/linux-s390x@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.28.0.tgz#aac6061634872e4677de693bce8030d73b1fd055" - integrity sha512-SCfR0HN8CEEjnYnySJTd2cw0k9OHB/YFzt5zgJEwa+wL/T/raGWYMBqwDNAC6dqFKmJYZoQBRfHjgwLHGSrn3Q== - -"@esbuild/linux-x64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.28.0.tgz#4f2917747188fe77632bcec65b2d84b422419779" - integrity sha512-us0dSb9iFxIi8srnpl931Nvs65it/Jd2a2K3qs7fz2WfGPHqzfzZTfec7oxZJRNPXPnNYZtanmRc4AL/JwVzHQ== - -"@esbuild/netbsd-arm64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.0.tgz#814df0ae57a0c386814491b8397eeba82094a947" - integrity sha512-CR/RYotgtCKwtftMwJlUU7xCVNg3lMYZ0RzTmAHSfLCXw3NtZtNpswLEj/Kkf6kEL3Gw+BpOekRX0BYCtklhUw== - -"@esbuild/netbsd-x64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.28.0.tgz#e01bdf7e60fa1a08e46d46d960b0d9bb8ac210af" - integrity sha512-nU1yhmYutL+fQ71Kxnhg8uEOdC0pwEW9entHykTgEbna2pw2dkbFSMeqjjyHZoCmt8SBkOSvV+yNmm94aUrrqw== - -"@esbuild/openbsd-arm64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.0.tgz#4a15c36aacca68d2d5a4c90b710c06759f4c1ffa" - integrity sha512-cXb5vApOsRsxsEl4mcZ1XY3D4DzcoMxR/nnc4IyqYs0rTI8ZKmW6kyyg+11Z8yvgMfAEldKzP7AdP64HnSC/6g== - -"@esbuild/openbsd-x64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.28.0.tgz#475e6101498a8ecce3008d7c388111d7a27c17bd" - integrity sha512-8wZM2qqtv9UP3mzy7HiGYNH/zjTA355mpeuA+859TyR+e+Tc08IHYpLJuMsfpDJwoLo1ikIJI8jC3GFjnRClzA== - -"@esbuild/openharmony-arm64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.0.tgz#cfdc3957f0b7a69f1bde129aad17fcc2f6fa033e" - integrity sha512-FLGfyizszcef5C3YtoyQDACyg95+dndv79i2EekILBofh5wpCa1KuBqOWKrEHZg3zrL3t5ouE5jgr94vA+Wb2w== - -"@esbuild/sunos-x64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.28.0.tgz#a013c856fecacd1c3aec985c8afe1d1cb017497d" - integrity sha512-1ZgjUoEdHZZl/YlV76TSCz9Hqj9h9YmMGAgAPYd+q4SicWNX3G5GCyx9uhQWSLcbvPW8Ni7lj4gDa1T40akdlw== - -"@esbuild/win32-arm64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.28.0.tgz#eae05e0f35271cad3898b43168d3e9a3bbaf47e5" - integrity sha512-Q9StnDmQ/enxnpxCCLSg0oo4+34B9TdXpuyPeTedN/6+iXBJ4J+zwfQI28u/Jl40nOYAxGoNi7mFP40RUtkmUA== - -"@esbuild/win32-ia32@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.28.0.tgz#06161ebc5bf75c08d69feb3c6b22560515913998" - integrity sha512-zF3ag/gfiCe6U2iczcRzSYJKH1DCI+ByzSENHlM2FcDbEeo5Zd2C86Aq0tKUYAJJ1obRP84ymxIAksZUcdztHA== - -"@esbuild/win32-x64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.28.0.tgz#04d90d5752b4ce65d2b6ac25eba08ff7624fe07c" - integrity sha512-pEl1bO9mfAmIC+tW5btTmrKaujg3zGtUmWNdCw/xs70FBjwAL3o9OEKNHvNmnyylD6ubxUERiEhdsL0xBQ9efw== +"@esbuild/aix-ppc64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz#7a01a8d2ec2fbb2dac78adad09b0fa781e4082be" + integrity sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ== + +"@esbuild/android-arm64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz#b540a27d14e4afd058496a4dbec4d3f414db110a" + integrity sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg== + +"@esbuild/android-arm@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.28.1.tgz#704bd297de6d762de54eabbeafbf55f6756abe2f" + integrity sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ== + +"@esbuild/android-x64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.28.1.tgz#d1cb166d34b0fbf0fe8ab460a5594f24a378701e" + integrity sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng== + +"@esbuild/darwin-arm64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz#1034b26457fc886368fe61bbd09f653f6afa8e54" + integrity sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q== + +"@esbuild/darwin-x64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz#65556a432a1e4d72032d8218c1932fcca1a49772" + integrity sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ== + +"@esbuild/freebsd-arm64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz#2e61e0592f9030d7e3dae18ee25ebc535918aef6" + integrity sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw== + +"@esbuild/freebsd-x64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz#c95ec289959ef8079c4dca817a1e2c4be66b9bd3" + integrity sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ== + +"@esbuild/linux-arm64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz#40b22175dda06182f3ee8141186c5ff304c4a717" + integrity sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g== + +"@esbuild/linux-arm@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz#c09a0f67917592ac0de892a9be4d3814debd2a6c" + integrity sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ== + +"@esbuild/linux-ia32@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz#a580f9c676797833891e519fc7a1337c8afd8db3" + integrity sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w== + +"@esbuild/linux-loong64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz#46452cf321dc7f9e91c2fa780a56bb56e79cd68b" + integrity sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg== + +"@esbuild/linux-mips64el@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz#4211b3184dd6608f53dcb22e39f5d34ee08852c8" + integrity sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ== + +"@esbuild/linux-ppc64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz#697857c2a61cb9b0b6bb6652e40c1dc5e1ca8e5d" + integrity sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ== + +"@esbuild/linux-riscv64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz#d192943eb146a40ac4c6497d0cf7be35b986bf08" + integrity sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ== + +"@esbuild/linux-s390x@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz#acea0356da0e0ebc08f97cf7b9c2e401e1e648dc" + integrity sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag== + +"@esbuild/linux-x64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz#6f0c3ce0cb64c534b70c4c45ecb2c16d34e35dfd" + integrity sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA== + +"@esbuild/netbsd-arm64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz#8bcd77077a0dce3378b574fedb26d2a253b73d36" + integrity sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw== + +"@esbuild/netbsd-x64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz#e7fb2a01e99c830c94e6623cd9fefb4c8fb58347" + integrity sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg== + +"@esbuild/openbsd-arm64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz#c52909372db8b86e2c55e05a8940033b5660a3b2" + integrity sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q== + +"@esbuild/openbsd-x64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz#c427b9be5a64c262ff9a7eb70b5fbbaadf446c6c" + integrity sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw== + +"@esbuild/openharmony-arm64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz#dc9b147baca2e6c4b3c85571741ef4860a489097" + integrity sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg== + +"@esbuild/sunos-x64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz#ce866d12df13c15e4c99f073a3d466f6e0649b3a" + integrity sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ== + +"@esbuild/win32-arm64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz#7468e3692d01d629d5941e5d83817bb80f9e39b4" + integrity sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA== + +"@esbuild/win32-ia32@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz#a5bc0063fb2bcab6d0ed63f2a1537958bc269ec6" + integrity sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg== + +"@esbuild/win32-x64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz#10064ee44f4347b90c9a02b446bbf80a91632b12" + integrity sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A== "@eslint-community/eslint-utils@^4.8.0", "@eslint-community/eslint-utils@^4.9.1": version "4.9.1" @@ -2386,10 +2386,10 @@ dependencies: tslib "^2.0.0" -"@ngtools/webpack@20.3.24": - version "20.3.24" - resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-20.3.24.tgz#8e344ebaea46d7e669220f02a33bb61826bb35f6" - integrity sha512-PIP9hFVF6OOmDxG0s6vX7cHm/6wwWK8jXd6e1I/CewR0zpVPtR1vxhhw9CrY4VEUCFSL6x2NuW/U3cI7LU+Z1Q== +"@ngtools/webpack@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-20.3.25.tgz#18e676da66c10b6810aac8b5aee9a10432e03e9a" + integrity sha512-p/YopAgukaIvezv3hsJzJevnNUBNTM8UQIkyDHPY5/aANdKraUTKDQUwlVxRiyD8U+PTSeD/BI56oOnuKrdFZQ== "@ngx-translate/core@^17.0.0": version "17.0.0" @@ -2740,13 +2740,13 @@ resolved "https://registry.yarnpkg.com/@sanity/diff-match-patch/-/diff-match-patch-3.2.0.tgz#7ce587273f7372a146308cb1075ba26177d42cdb" integrity sha512-4hPADs0qUThFZkBK/crnfKKHg71qkRowfktBljH2UIxGHHTxIzt8g8fBiXItyCjxkuNy+zpYOdRMifQNv8+Yww== -"@schematics/angular@20.3.24": - version "20.3.24" - resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-20.3.24.tgz#1cef967a08a55336b296dfd0e2c5207dc1c43226" - integrity sha512-GNB8zI8Lz0rJl4Q7FH4Y8ZmRpODkNDKGxWObfZ39POgiyr3CtT5sMRTQq1lWRWTlZeV8uD51DvW/EsAsbaS4HA== +"@schematics/angular@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-20.3.25.tgz#bf22b66390eb8fb8cf125f07ba3718077642c721" + integrity sha512-ezoJpPKhhjXgE3LxuNcJO/ghSXs8f73xrqGvqouag7IbuliJYbHrt22WH3X75XSbD0+iOdiqA2bARvAO/ezyxQ== dependencies: - "@angular-devkit/core" "20.3.24" - "@angular-devkit/schematics" "20.3.24" + "@angular-devkit/core" "20.3.25" + "@angular-devkit/schematics" "20.3.25" jsonc-parser "3.3.1" "@sigstore/bundle@^4.0.0": @@ -5712,37 +5712,37 @@ esbuild-wasm@0.28.0: resolved "https://registry.yarnpkg.com/esbuild-wasm/-/esbuild-wasm-0.28.0.tgz#e2e60b86ed19e0f6f5a1e6c1c722f5a811d7d5f7" integrity sha512-5TRVKExcEmeMkccIZMzUq+Az6X2RoMAJyfl6SMMO1dMVhmvt0I2mx7gAb6zYi42n4d1ETcatFXazGKzA+aW7fg== -esbuild@0.28.0, esbuild@^0.27.0: - version "0.28.0" - resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.28.0.tgz#5dee347ffb3e3874212a35a69836b077b1ce6d96" - integrity sha512-sNR9MHpXSUV/XB4zmsFKN+QgVG82Cc7+/aaxJ8Adi8hyOac+EXptIp45QBPaVyX3N70664wRbTcLTOemCAnyqw== +esbuild@0.28.0, esbuild@0.28.1, esbuild@^0.27.0: + version "0.28.1" + resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.28.1.tgz#ef45b4634c9c9d97a296aea4114a5f9840f95578" + integrity sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw== optionalDependencies: - "@esbuild/aix-ppc64" "0.28.0" - "@esbuild/android-arm" "0.28.0" - "@esbuild/android-arm64" "0.28.0" - "@esbuild/android-x64" "0.28.0" - "@esbuild/darwin-arm64" "0.28.0" - "@esbuild/darwin-x64" "0.28.0" - "@esbuild/freebsd-arm64" "0.28.0" - "@esbuild/freebsd-x64" "0.28.0" - "@esbuild/linux-arm" "0.28.0" - "@esbuild/linux-arm64" "0.28.0" - "@esbuild/linux-ia32" "0.28.0" - "@esbuild/linux-loong64" "0.28.0" - "@esbuild/linux-mips64el" "0.28.0" - "@esbuild/linux-ppc64" "0.28.0" - "@esbuild/linux-riscv64" "0.28.0" - "@esbuild/linux-s390x" "0.28.0" - "@esbuild/linux-x64" "0.28.0" - "@esbuild/netbsd-arm64" "0.28.0" - "@esbuild/netbsd-x64" "0.28.0" - "@esbuild/openbsd-arm64" "0.28.0" - "@esbuild/openbsd-x64" "0.28.0" - "@esbuild/openharmony-arm64" "0.28.0" - "@esbuild/sunos-x64" "0.28.0" - "@esbuild/win32-arm64" "0.28.0" - "@esbuild/win32-ia32" "0.28.0" - "@esbuild/win32-x64" "0.28.0" + "@esbuild/aix-ppc64" "0.28.1" + "@esbuild/android-arm" "0.28.1" + "@esbuild/android-arm64" "0.28.1" + "@esbuild/android-x64" "0.28.1" + "@esbuild/darwin-arm64" "0.28.1" + "@esbuild/darwin-x64" "0.28.1" + "@esbuild/freebsd-arm64" "0.28.1" + "@esbuild/freebsd-x64" "0.28.1" + "@esbuild/linux-arm" "0.28.1" + "@esbuild/linux-arm64" "0.28.1" + "@esbuild/linux-ia32" "0.28.1" + "@esbuild/linux-loong64" "0.28.1" + "@esbuild/linux-mips64el" "0.28.1" + "@esbuild/linux-ppc64" "0.28.1" + "@esbuild/linux-riscv64" "0.28.1" + "@esbuild/linux-s390x" "0.28.1" + "@esbuild/linux-x64" "0.28.1" + "@esbuild/netbsd-arm64" "0.28.1" + "@esbuild/netbsd-x64" "0.28.1" + "@esbuild/openbsd-arm64" "0.28.1" + "@esbuild/openbsd-x64" "0.28.1" + "@esbuild/openharmony-arm64" "0.28.1" + "@esbuild/sunos-x64" "0.28.1" + "@esbuild/win32-arm64" "0.28.1" + "@esbuild/win32-ia32" "0.28.1" + "@esbuild/win32-x64" "0.28.1" escalade@^3.1.1, escalade@^3.2.0: version "3.2.0" @@ -6265,15 +6265,15 @@ foreground-child@^3.1.0: signal-exit "^4.0.1" form-data@4.0.0, form-data@>=4.0.4: - version "4.0.5" - resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.5.tgz#b49e48858045ff4cbf6b03e1805cebcad3679053" - integrity sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w== + version "4.0.6" + resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.6.tgz#28e864e1b786dbebb68db1f452f9635278665827" + integrity sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ== dependencies: asynckit "^0.4.0" combined-stream "^1.0.8" es-set-tostringtag "^2.1.0" - hasown "^2.0.2" - mime-types "^2.1.12" + hasown "^2.0.4" + mime-types "^2.1.35" formdata-polyfill@^4.0.10: version "4.0.10" @@ -6558,17 +6558,17 @@ has-tostringtag@^1.0.2: dependencies: has-symbols "^1.0.3" -hasown@^2.0.2: - version "2.0.2" - resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003" - integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ== +hasown@^2.0.2, hasown@^2.0.4: + version "2.0.4" + resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.4.tgz#8c62d8cb90beb2aad5d0a5b67581ad9854c3f003" + integrity sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A== dependencies: function-bind "^1.1.2" hono@^4.11.4: - version "4.12.8" - resolved "https://registry.yarnpkg.com/hono/-/hono-4.12.8.tgz#5f3a9c0d5339ff460b2c652a4c64dd79059930ad" - integrity sha512-VJCEvtrezO1IAR+kqEYnxUOoStaQPGrCmX3j4wDTNOcD1uRPFpGlwQUIW8niPuvHXaTUxeOUl5MMDGrl+tmO9A== + version "4.12.25" + resolved "https://registry.yarnpkg.com/hono/-/hono-4.12.25.tgz#f2d9996a54e8c9c0c5f5de1c8f3a962e43a98c4e" + integrity sha512-2NFaIyNVgJmBs/ecmtGzlmluTFs5cHEWGTdu0t1HBwYzoGXOL5nUQBRMXsXWla5i4KkG//QMzVP88m1+I3fdAQ== hosted-git-info@^9.0.0: version "9.0.2" @@ -7232,9 +7232,9 @@ js-beautify@1.15.4: nopt "^7.2.1" js-cookie@^3.0.5: - version "3.0.5" - resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc" - integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw== + version "3.0.8" + resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.8.tgz#444e6f4b27a5d844594fef61c9d6bca5f0787688" + integrity sha512-yeJd4aNAdYZQjaon2bpD/Gb0B/omw7HQOsynXXcOiWVCacbBcPlgn8S/d1X6blFSaHao7ozqtW7NZW19xpCtIw== js-tokens@^4.0.0: version "4.0.0" @@ -7865,7 +7865,7 @@ mime-db@1.52.0: resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.54.0.tgz#cddb3ee4f9c64530dff640236661d42cb6a314f5" integrity sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ== -mime-types@^2.1.12, mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34: +mime-types@^2.1.27, mime-types@^2.1.31, mime-types@^2.1.35, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34: version "2.1.35" resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a" integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw== @@ -8742,6 +8742,11 @@ pbf@^3.2.1, pbf@^3.3.0: ieee754 "^1.1.12" resolve-protobuf-schema "^2.1.0" +photoswipe@^5.4.4: + version "5.4.4" + resolved "https://registry.yarnpkg.com/photoswipe/-/photoswipe-5.4.4.tgz#e045dc036453493188d5c8665b0e8f1000ac4d6e" + integrity sha512-WNFHoKrkZNnvFFhbHL93WDkW3ifwVOXSW3w1UuZZelSmgXpIGiZSNlZJq37rR8YejqME2rHs9EhH9ZvlvFH2NA== + picocolors@^1.0.0, picocolors@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b" @@ -8916,10 +8921,10 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^ resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== -postcss@8.5.6, postcss@^8.2.14, postcss@^8.4.33, postcss@^8.4.4, postcss@^8.4.47, postcss@^8.4.49, postcss@^8.5.6: - version "8.5.6" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.6.tgz#2825006615a619b4f62a9e7426cc120b349a8f3c" - integrity sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg== +postcss@8.5.12, postcss@^8.2.14, postcss@^8.4.33, postcss@^8.4.4, postcss@^8.4.47, postcss@^8.4.49, postcss@^8.5.6: + version "8.5.12" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.12.tgz#cd0c0f667f7cb0521e2313234ea6e707a9ec1ddb" + integrity sha512-W62t/Se6rA0Az3DfCL0AqJwXuKwBeYg6nOaIgzP+xZ7N5BFCI7DYi1qs6ygUYT6rvfi6t9k65UMLJC+PHZpDAA== dependencies: nanoid "^3.3.11" picocolors "^1.1.1" @@ -9643,9 +9648,9 @@ shebang-regex@^3.0.0: integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A== shell-quote@^1.8.1: - version "1.8.1" - resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.1.tgz#6dbf4db75515ad5bac63b4f1894c3a154c766680" - integrity sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA== + version "1.8.4" + resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.4.tgz#2edd9a4dcefc96649e2e2cb12f637b1f1d92a190" + integrity sha512-VsC6n6vz1ihYYyZZwX7YZSF5l5x36ca17OC+a69h94YqB7X6XLwf+5MOgynYir2SLFUbl8gIYvBo8K8RoNQ6bQ== side-channel-list@^1.0.0: version "1.0.0" @@ -10232,9 +10237,9 @@ tinyqueue@^3.0.0: integrity sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g== tmp@^0.2.4: - version "0.2.5" - resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.5.tgz#b06bcd23f0f3c8357b426891726d16015abfd8f8" - integrity sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow== + version "0.2.7" + resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.7.tgz#26f4db11d1601ce8012dcb8a798ece1c06a99059" + integrity sha512-e0votIpp4Uo2AJYSzVHV6xCcawuiez3DzqDAbrTc3YxBkplN6e+dM13ZeIcZnDg/QpSuU2zfZ3rzwY8ukEnaXw== to-regex-range@^5.0.1: version "5.0.1" @@ -10584,10 +10589,10 @@ vary@^1, vary@^1.1.2, vary@~1.1.2: resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg== -vite@7.3.2: - version "7.3.2" - resolved "https://registry.yarnpkg.com/vite/-/vite-7.3.2.tgz#cb041794d4c1395e28baea98198fd6e8f4b96b5c" - integrity sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg== +vite@7.3.2, vite@7.3.5: + version "7.3.5" + resolved "https://registry.yarnpkg.com/vite/-/vite-7.3.5.tgz#90c2d0b7b94a224e7e7dcf22d2912ff0b5291165" + integrity sha512-KuOaNhcnGFN2zIPGA7wRmzF+lJA1sea7rHq17aiJ++9lzY1WWG6Jpwqwe1KNbRVPIqHmr8GLYx7jbrQcN/7/ww== dependencies: esbuild "^0.27.0" fdir "^6.5.0" @@ -10945,9 +10950,9 @@ wrappy@1: integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ== ws@^8.18.0: - version "8.19.0" - resolved "https://registry.yarnpkg.com/ws/-/ws-8.19.0.tgz#ddc2bdfa5b9ad860204f5a72a4863a8895fd8c8b" - integrity sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg== + version "8.21.0" + resolved "https://registry.yarnpkg.com/ws/-/ws-8.21.0.tgz#012e413fc07429945121b0c153158c4343086951" + integrity sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g== wsl-utils@^0.1.0: version "0.1.0"
@@ -213,7 +213,7 @@
- {
this.config.tableTitle = this.translate.instant('widget.widgets');
const authUser = getCurrentAuthUser(this.store);
+ this.config.addActionDescriptors = [
+ {
+ name: this.translate.instant('dashboard.create-new-widget'),
+ icon: 'insert_drive_file',
+ isEnabled: () => true,
+ onAction: ($event) => this.addWidgetType($event)
+ },
+ {
+ name: this.translate.instant('widget.import'),
+ icon: 'file_upload',
+ isEnabled: () => true,
+ onAction: ($event) => this.importWidgetType($event)
+ }
+ ];
+ if (authUser.authority === Authority.TENANT_ADMIN) {
+ this.config.addActionDescriptors.push(
+ {
+ name: this.translate.instant('iot-hub.add-from-iot-hub'),
+ icon: 'hub',
+ isEnabled: () => true,
+ onAction: (_$event) => this.addWidgetFromIotHub()
+ }
+ );
+ }
this.config.deleteEnabled = (widgetType) => this.isWidgetTypeEditable(widgetType, authUser.authority);
this.config.entitySelectionEnabled = (widgetType) => this.isWidgetTypeEditable(widgetType, authUser.authority);
this.config.detailsReadonly = (widgetType) => !this.isWidgetTypeEditable(widgetType, authUser.authority);
@@ -183,6 +195,14 @@ export class WidgetTypesTableConfigResolver {
);
}
+ addWidgetFromIotHub() {
+ this.iotHubActions.addItem(ItemType.WIDGET).subscribe(result => {
+ if (result?.descriptor) {
+ this.config.updateData();
+ }
+ });
+ }
+
importWidgetType($event: Event) {
this.importExport.importWidgetType().subscribe(
(widgetType) => {
diff --git a/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts b/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts
index e045768712..fcc9fc9f83 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts
@@ -298,6 +298,18 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit
this.entityRequiredText = 'ai-models.model-required';
this.notFoundEntities = 'ai-models.no-model-text';
break;
+ case EntityType.DEVICE_PROFILE:
+ this.entityText = 'device-profile.device-profile';
+ this.noEntitiesMatchingText = 'device-profile.no-device-profiles-matching';
+ this.entityRequiredText = 'device-profile.device-profile-required';
+ this.notFoundEntities = 'device-profile.no-device-profiles-text';
+ break;
+ case EntityType.ASSET_PROFILE:
+ this.entityText = 'asset-profile.asset-profile';
+ this.noEntitiesMatchingText = 'asset-profile.no-asset-profiles-matching';
+ this.entityRequiredText = 'asset-profile.asset-profile-required';
+ this.notFoundEntities = 'asset-profile.no-asset-profiles-text';
+ break;
case AliasEntityType.CURRENT_CUSTOMER:
this.entityText = 'customer.default-customer';
this.noEntitiesMatchingText = 'customer.no-customers-matching';
diff --git a/ui-ngx/src/app/shared/components/entity/entity-select.component.html b/ui-ngx/src/app/shared/components/entity/entity-select.component.html
index 7d57e575ef..c88366e75e 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-select.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-select.component.html
@@ -25,6 +25,7 @@
[useAliasEntityTypes]="useAliasEntityTypes"
[allowedEntityTypes]="allowedEntityTypes"
[additionEntityTypes]="additionEntityTypes"
+ [filterAllowedEntityTypes]="filterAllowedEntityTypes"
formControlName="entityType">
{ };
constructor(private store: Store,
@@ -83,15 +87,17 @@ export class EntitySelectComponent implements ControlValueAccessor, OnInit, Afte
const entityTypes = this.entityService.prepareAllowedEntityTypesList(this.allowedEntityTypes,
this.useAliasEntityTypes);
+
+ let defaultEntityType: EntityType | AliasEntityType = null;
if (entityTypes.length === 1) {
this.displayEntityTypeSelect = false;
- this.defaultEntityType = entityTypes[0];
+ defaultEntityType = entityTypes[0];
} else {
this.displayEntityTypeSelect = true;
}
this.entitySelectFormGroup = this.fb.group({
- entityType: [this.defaultEntityType],
+ entityType: [defaultEntityType],
entityId: [null]
});
}
@@ -123,6 +129,19 @@ export class EntitySelectComponent implements ControlValueAccessor, OnInit, Afte
if (additionNullUIIDEntityTypes.length > 0) {
additionNullUIIDEntityTypes.forEach((entityType) => this.entityTypeNullUUID.add(entityType));
}
+
+ if (this.filterAllowedEntityTypes === false) {
+ if (this.allowedEntityTypes?.length === 1) {
+ this.displayEntityTypeSelect = false;
+ this.entitySelectFormGroup.get('entityType').setValue(this.allowedEntityTypes[0]);
+ } else {
+ this.displayEntityTypeSelect = true;
+ }
+ }
+
+ if (this.defaultEntityType) {
+ this.entitySelectFormGroup.get('entityType').setValue(this.defaultEntityType);
+ }
}
ngAfterViewInit(): void {
diff --git a/ui-ngx/src/app/shared/components/toggle-header.component.html b/ui-ngx/src/app/shared/components/toggle-header.component.html
index bddaa896b6..c71e226dce 100644
--- a/ui-ngx/src/app/shared/components/toggle-header.component.html
+++ b/ui-ngx/src/app/shared/components/toggle-header.component.html
@@ -42,14 +42,18 @@
[(ngModel)]="value"
(ngModelChange)="valueChange.emit(value)">
- {{ option.name }}
-
- warning
-
+ @if (option.template) {
+
+ warning
+
+ }
diff --git a/ui-ngx/src/app/shared/components/toggle-header.component.ts b/ui-ngx/src/app/shared/components/toggle-header.component.ts
index c60faf810a..53b000d429 100644
--- a/ui-ngx/src/app/shared/components/toggle-header.component.ts
+++ b/ui-ngx/src/app/shared/components/toggle-header.component.ts
@@ -33,7 +33,7 @@ import {
OnInit,
Output,
QueryList,
- SimpleChanges,
+ SimpleChanges, TemplateRef,
ViewChild
} from '@angular/core';
import { PageComponent } from '@shared/components/page.component';
@@ -50,6 +50,7 @@ import { MatButtonToggle, MatButtonToggleGroup } from '@angular/material/button-
export interface ToggleHeaderOption {
name: string;
value: any;
+ template?: TemplateRef
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss
index af7e27f481..8df18b25bc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss
@@ -43,7 +43,9 @@
}
.tb-widget-config-content {
& > .mat-content {
- height: 100%;
+ &.tb-widget-config-fill {
+ height: 100%;
+ }
padding-top: 8px;
@media #{$mat-xs} {
padding-left: 8px;
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
index cb96a493a1..fc7ad9f64b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
@@ -276,6 +276,7 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
elementClick: this.elementClick.bind(this),
cardClick: this.cardClick.bind(this),
click: this.click.bind(this),
+ invokeAction: this.invokeAction.bind(this),
getActiveEntityInfo: this.getActiveEntityInfo.bind(this),
openDashboardStateInSeparateDialog: this.openDashboardStateInSeparateDialog.bind(this),
openDashboardStateInPopover: this.openDashboardStateInPopover.bind(this),
@@ -1590,6 +1591,16 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
}
}
+ private invokeAction($event: Event, actionName: string, additionalParams?: any) {
+ const descriptors = this.getActionDescriptors('javaScript');
+ if (descriptors?.length) {
+ const found = descriptors.find(d => d.name === actionName);
+ if (found) {
+ this.handleWidgetAction($event, found, null, null, additionalParams);
+ }
+ }
+ }
+
private onWidgetAction($event: Event, action: WidgetAction) {
if ($event) {
$event.stopPropagation();
diff --git a/ui-ngx/src/app/modules/home/menu/menu-link.component.html b/ui-ngx/src/app/modules/home/menu/menu-link.component.html
index 3d3823d12a..1be09e0ddd 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-link.component.html
+++ b/ui-ngx/src/app/modules/home/menu/menu-link.component.html
@@ -15,7 +15,8 @@
limitations under the License.
-->
-
+
{{section.icon}}
{{section.customTranslate ? (section.name | customTranslate) : (section.name | translate)}}
diff --git a/ui-ngx/src/app/modules/home/menu/menu-link.component.scss b/ui-ngx/src/app/modules/home/menu/menu-link.component.scss
index 16bc26c7e2..7720091e79 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-link.component.scss
+++ b/ui-ngx/src/app/modules/home/menu/menu-link.component.scss
@@ -13,6 +13,23 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-:host {
+@import '../../../../scss/constants';
+
+:host ::ng-deep {
+ a.is-new::after {
+ content: "NEW";
+ font-size: 12px;
+ letter-spacing: .03125em;
+ transform: translate(6px, -6px);
+ display: inline-block;
+ border-radius: 10px;
+ line-height: 22px;
+ height: 20px;
+ background: #fff;
+ color: $tb-primary-color;
+ padding-left: 6px;
+ padding-right: 6px;
+ margin-left: -6px;
+ }
}
diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
index 31753751af..ca379c6e73 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
+++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
@@ -15,7 +15,8 @@
limitations under the License.
-->
-
+
{{section.icon}}
{{section.customTranslate ? (section.name | customTranslate) : (section.name | translate)}}
void;
+
export class WidgetContext {
constructor(public dashboard: IDashboardComponent,
@@ -343,6 +345,8 @@ export class WidgetContext {
...RxJSOperators
};
+ private destroyCallbacks: WidgetDestroyCallback[] = [];
+
registerPopoverComponent(popoverComponent: TbPopoverComponent) {
this.popoverComponents.push(popoverComponent);
popoverComponent.tbDestroy.subscribe(() => {
@@ -382,6 +386,10 @@ export class WidgetContext {
}
}
+ registerDestroyCallback(destroyCallback: WidgetDestroyCallback) {
+ this.destroyCallbacks.push(destroyCallback);
+ }
+
showSuccessToast(message: string, duration: number = 1000,
verticalPosition: NotificationVerticalPosition = 'bottom',
horizontalPosition: NotificationHorizontalPosition = 'left',
@@ -494,6 +502,13 @@ export class WidgetContext {
labelPattern.destroy();
}
this.labelPatterns.clear();
+ this.destroyCallbacks.forEach((destroyCallback) => {
+ try {
+ destroyCallback()
+ } catch (_ignoredError) { /* empty */ }
+ }
+ );
+ this.destroyCallbacks.length = 0;
this.width = undefined;
this.height = undefined;
this.destroyed = true;
diff --git a/ui-ngx/src/app/modules/home/pages/asset-profile/asset-profile-tabs.component.ts b/ui-ngx/src/app/modules/home/pages/asset-profile/asset-profile-tabs.component.ts
index a7ce0082cd..41dd189b63 100644
--- a/ui-ngx/src/app/modules/home/pages/asset-profile/asset-profile-tabs.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/asset-profile/asset-profile-tabs.component.ts
@@ -36,4 +36,12 @@ export class AssetProfileTabsComponent extends EntityTabsComponent
super.ngOnInit();
}
+ resolveTabIndex(tab: string): number {
+ if (tab === 'cf') {
+ return 1;
+ } else {
+ return super.resolveTabIndex(tab);
+ }
+ }
+
}
diff --git a/ui-ngx/src/app/modules/home/pages/asset/asset-tabs.component.ts b/ui-ngx/src/app/modules/home/pages/asset/asset-tabs.component.ts
index 10ef434755..03aa7a1fa1 100644
--- a/ui-ngx/src/app/modules/home/pages/asset/asset-tabs.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/asset/asset-tabs.component.ts
@@ -36,4 +36,12 @@ export class AssetTabsComponent extends EntityTabsComponent {
super.ngOnInit();
}
+ resolveTabIndex(tab: string): number {
+ if (tab === 'cf') {
+ return 3;
+ } else {
+ return super.resolveTabIndex(tab);
+ }
+ }
+
}
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts
index 4d8637d5d7..e83f1dd16a 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts
@@ -77,7 +77,6 @@ import {
EntityAliasesDialogComponent,
EntityAliasesDialogData
} from '@home/components/alias/entity-aliases-dialog.component';
-
@Injectable()
export class DashboardsTableConfigResolver {
diff --git a/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.ts b/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.ts
index 1a762ac881..bfefdf5d4c 100644
--- a/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.ts
@@ -56,6 +56,14 @@ export class DeviceProfileTabsComponent extends EntityTabsComponent {
super.ngOnInit();
}
+ resolveTabIndex(tab: string): number {
+ if (tab === 'cf') {
+ return 3;
+ } else {
+ return super.resolveTabIndex(tab);
+ }
+ }
+
}
diff --git a/ui-ngx/src/app/modules/home/pages/device/devices-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/device/devices-table-config.resolver.ts
index 3363532b5f..72d0a08dd6 100644
--- a/ui-ngx/src/app/modules/home/pages/device/devices-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/device/devices-table-config.resolver.ts
@@ -84,6 +84,8 @@ import {
DeviceCheckConnectivityDialogData
} from '@home/pages/device/device-check-connectivity-dialog.component';
import { EntityId } from '@shared/models/id/entity-id';
+import { ItemType } from '@shared/models/iot-hub/iot-hub-item.models';
+import { IotHubActionsService } from '@home/components/iot-hub/iot-hub-actions.service';
interface DevicePageQueryParams extends PageQueryParam {
deviceProfileId?: string;
@@ -107,7 +109,8 @@ export class DevicesTableConfigResolver {
private translate: TranslateService,
private datePipe: DatePipe,
private router: Router,
- private dialog: MatDialog) {
+ private dialog: MatDialog,
+ private iotHubActions: IotHubActionsService) {
this.config.entityType = EntityType.DEVICE;
this.config.entityComponent = DeviceComponent;
@@ -416,6 +419,12 @@ export class DevicesTableConfigResolver {
isEnabled: () => true,
onAction: ($event) => this.importDevices($event)
},
+ {
+ name: this.translate.instant('iot-hub.add-from-iot-hub'),
+ icon: 'hub',
+ isEnabled: () => true,
+ onAction: (_$event) => this.addDeviceFromIotHub()
+ },
);
this.config.addEntity = () => {this.deviceWizard(null); return of(null); };
}
@@ -450,6 +459,14 @@ export class DevicesTableConfigResolver {
this.router.navigateByUrl(url);
}
+ addDeviceFromIotHub() {
+ this.iotHubActions.addItem(ItemType.DEVICE).subscribe(result => {
+ if (result?.descriptor) {
+ this.config.updateData();
+ }
+ });
+ }
+
importDevices($event: Event) {
this.homeDialogs.importEntities(EntityType.DEVICE).subscribe((res) => {
if (res) {
diff --git a/ui-ngx/src/app/modules/home/pages/home-pages.module.ts b/ui-ngx/src/app/modules/home/pages/home-pages.module.ts
index 84412fabf4..fcc8298904 100644
--- a/ui-ngx/src/app/modules/home/pages/home-pages.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/home-pages.module.ts
@@ -47,6 +47,7 @@ import { ScadaSymbolModule } from '@home/pages/scada-symbol/scada-symbol.module'
import { GatewaysModule } from '@home/pages/gateways/gateways.module';
import { MobileModule } from '@home/pages/mobile/mobile.module';
import { AiModelModule } from '@home/pages/ai-model/ai-model.module';
+import { IotHubModule } from '@home/pages/iot-hub/iot-hub.module';
@NgModule({
exports: [
@@ -81,6 +82,7 @@ import { AiModelModule } from '@home/pages/ai-model/ai-model.module';
AccountModule,
ScadaSymbolModule,
AiModelModule,
+ IotHubModule,
]
})
export class HomePagesModule { }
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-alarm-rules-unavailable-page.component.html b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-alarm-rules-unavailable-page.component.html
new file mode 100644
index 0000000000..18a47441ff
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-alarm-rules-unavailable-page.component.html
@@ -0,0 +1,52 @@
+
+();
+
+ constructor(
+ private route: ActivatedRoute,
+ private router: Router,
+ private iotHubApiService: IotHubApiService
+ ) {}
+
+ ngOnInit(): void {
+ this.route.params.pipe(takeUntil(this.destroy$)).subscribe(params => {
+ this.creatorId = params['creatorId'];
+ this.loadCreator();
+ });
+ }
+
+ ngOnDestroy(): void {
+ this.destroy$.next();
+ this.destroy$.complete();
+ }
+
+ getAvatarUrl(): string | null {
+ return this.creator?.avatarUrl ? this.iotHubApiService.resolveResourceUrl(this.creator.avatarUrl) : null;
+ }
+
+ getWebsiteLabel(): string {
+ return this.creator?.website?.replace(/^https?:\/\//, '') || '';
+ }
+
+ goBack(): void {
+ void this.router.navigate(['/iot-hub']);
+ }
+
+ retryLoadCreator(): void {
+ // Debounce frequent retry clicks: show the loading spinner
+ // immediately and defer the actual loadCreator() call by 350ms
+ // so rapid-fire clicks coalesce into a single network round-trip.
+ // hasError is left as-is until the next request actually succeeds.
+ if (this.retryTimer != null) {
+ clearTimeout(this.retryTimer);
+ }
+ this.isLoading = true;
+ this.retryTimer = setTimeout(() => {
+ this.retryTimer = null;
+ this.loadCreator();
+ }, 350);
+ }
+
+ private loadCreator(): void {
+ if (this.retryTimer != null) {
+ clearTimeout(this.retryTimer);
+ this.retryTimer = null;
+ }
+ this.isLoading = true;
+ // hasError stays as-is until the request actually succeeds —
+ // cleared in the `next` callback below.
+ this.iotHubApiService.getCreatorProfile(this.creatorId, { ignoreLoading: true, ignoreErrors: true }).subscribe({
+ next: creator => {
+ this.creator = creator;
+ this.isLoading = false;
+ this.hasError = false;
+ },
+ error: () => {
+ this.creator = null;
+ this.isLoading = false;
+ this.hasError = true;
+ }
+ });
+ }
+
+}
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-deep-link.utils.ts b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-deep-link.utils.ts
new file mode 100644
index 0000000000..e1171095a2
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-deep-link.utils.ts
@@ -0,0 +1,46 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { ItemType } from '@shared/models/iot-hub/iot-hub-item.models';
+import { MpItemVersionView } from '@shared/models/iot-hub/iot-hub-version.models';
+
+const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
+export function isUUID(s: string | null | undefined): s is string {
+ return !!s && UUID_RE.test(s);
+}
+
+export function typeSegment(t: ItemType): string | undefined {
+ switch (t) {
+ case ItemType.WIDGET: return 'widgets';
+ case ItemType.DASHBOARD: return 'dashboards';
+ case ItemType.SOLUTION_TEMPLATE: return 'solution-templates';
+ case ItemType.CALCULATED_FIELD: return 'calculated-fields';
+ case ItemType.ALARM_RULE: return 'alarm-rules';
+ case ItemType.RULE_CHAIN: return 'rule-chains';
+ case ItemType.DEVICE: return 'devices';
+ default: return undefined;
+ }
+}
+
+export function isPublished(v: MpItemVersionView): boolean {
+ return !!v.publishedTime && v.publishedTime > 0;
+}
+
+export interface DeepLinkOpenItem {
+ version: MpItemVersionView;
+ preview: boolean;
+}
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.html b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.html
new file mode 100644
index 0000000000..71506d090e
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.html
@@ -0,0 +1,337 @@
+
+();
+ private searchSubscription: Subscription;
+
+
+ heroTypes: HeroTypeConfig[] = [
+ {
+ type: ItemType.DEVICE, labelKey: 'item.type-device-plural', color: '#4b63cc',
+ icon: 'assets/iot-hub/hero-device-cluster.svg'
+ },
+ {
+ type: ItemType.SOLUTION_TEMPLATE, labelKey: 'item.type-solution-template-plural', color: '#2b6bb4',
+ icon: 'assets/iot-hub/hero-solution-template-cluster.svg'
+ },
+ {
+ type: ItemType.WIDGET, labelKey: 'item.type-widget-plural', color: '#2c9755',
+ icon: 'assets/iot-hub/hero-widget-cluster.svg'
+ },
+ {
+ type: ItemType.CALCULATED_FIELD, labelKey: 'item.type-calculated-field-plural', color: '#3cb4e0',
+ icon: 'assets/iot-hub/hero-calculated-field-cluster.svg'
+ },
+ {
+ type: ItemType.ALARM_RULE, labelKey: 'item.type-alarm-rule-plural', color: '#d66f2e',
+ icon: 'assets/iot-hub/hero-alarm-rule-cluster.svg'
+ },
+ {
+ type: ItemType.RULE_CHAIN, labelKey: 'item.type-rule-chain-plural', color: '#a95ae2',
+ icon: 'assets/iot-hub/hero-rule-chain-cluster.svg'
+ }
+ ];
+
+ activeHeroType: HeroTypeConfig = this.heroTypes[0];
+ heroIconsReady = false;
+ private heroInterval: any;
+
+ categoryCards: CategoryCard[] = [
+ { type: ItemType.DEVICE, titleKey: 'iot-hub.device-library', icon: 'memory', cssClass: 'category-devices', image: 'assets/iot-hub/category-device-library-img.png' },
+ { type: ItemType.SOLUTION_TEMPLATE, titleKey: 'item.type-solution-template-plural', icon: 'integration_instructions', cssClass: 'category-solutions', image: 'assets/iot-hub/category-solution-templates-img.png' },
+ { type: ItemType.WIDGET, titleKey: 'item.type-widget-plural', icon: 'widgets', cssClass: 'category-widgets', image: 'assets/iot-hub/category-widgets-img.png' },
+ { type: ItemType.CALCULATED_FIELD, titleKey: 'item.type-calculated-field-plural', icon: 'functions', cssClass: 'category-calc-fields', image: 'assets/iot-hub/category-calculated-fields-img.png' },
+ { type: ItemType.ALARM_RULE, titleKey: 'item.type-alarm-rule-plural', icon: 'notification_important', cssClass: 'category-alarm-rules', image: 'assets/iot-hub/category-alarm-rules-img.png' },
+ { type: ItemType.RULE_CHAIN, titleKey: 'item.type-rule-chain-plural', icon: 'account_tree', cssClass: 'category-rule-chains', image: 'assets/iot-hub/category-rule-chains-img.png' }
+ ];
+
+ popularWidgets: MpItemVersionView[] = [];
+ popularSolutionTemplates: MpItemVersionView[] = [];
+ popularCalcFields: MpItemVersionView[] = [];
+ popularAlarmRules: MpItemVersionView[] = [];
+ popularRuleChains: MpItemVersionView[] = [];
+ popularDevices: MpItemVersionView[] = [];
+
+ installedWidgets: IotHubInstalledItem[] = [];
+ installedSolutionTemplates: IotHubInstalledItem[] = [];
+ installedDeviceCounts: Record = {};
+ installedCalcFieldCounts: Record = {};
+ installedAlarmRuleCounts: Record = {};
+ installedRuleChainCounts: Record = {};
+ installedItemsCount = 0;
+
+ isLoading = true;
+ hasError = false;
+ private retryTimer: any = null;
+
+ bigCardCount = 5;
+ compactCardCount = 6;
+ private breakpointSubscription: Subscription;
+
+ constructor(
+ private router: Router,
+ private iotHubApiService: IotHubApiService,
+ private iotHubActions: IotHubActionsService,
+ private translate: TranslateService,
+ private breakpointObserver: BreakpointObserver
+ ) {}
+
+ ngOnInit(): void {
+ this.updateCardCounts();
+ this.loadPopularItems();
+ this.breakpointSubscription = this.breakpointObserver.observe([
+ MediaBreakpoints['lt-sm'],
+ MediaBreakpoints['lt-md'],
+ MediaBreakpoints['lt-lg'],
+ MediaBreakpoints['lt-xmd'],
+ MediaBreakpoints['lt-xl'],
+ MediaBreakpoints['gt-xxl']
+ ]).subscribe(() => {
+ const prev = { big: this.bigCardCount, compact: this.compactCardCount };
+ this.updateCardCounts();
+ if (this.bigCardCount !== prev.big || this.compactCardCount !== prev.compact) {
+ this.loadPopularItems();
+ }
+ });
+ this.searchSubscription = this.searchSubject.pipe(
+ debounceTime(300),
+ distinctUntilChanged(),
+ switchMap(text => {
+ this.searchLoading = true;
+ const sortOrder: SortOrder = { property: 'totalInstallCount', direction: Direction.DESC };
+ const pageLink = new PageLink(10, 0, text.trim() || null, sortOrder);
+ const query = new MpItemVersionQuery(pageLink);
+ return this.iotHubApiService.getPublishedVersions(query, { ignoreLoading: true });
+ })
+ ).subscribe(result => {
+ this.searchResults = result.data;
+ this.searchResultGroups = this.groupSearchResults(result.data);
+ this.searchLoaded = true;
+ this.searchLoading = false;
+ });
+ // One-tick delay so Angular renders icons in hidden state first, then triggers transition
+ requestAnimationFrame(() => {
+ this.heroIconsReady = true;
+ this.startHeroCycle();
+ });
+ }
+
+ ngOnDestroy(): void {
+ this.stopHeroCycle();
+ this.searchSubscription?.unsubscribe();
+ this.breakpointSubscription?.unsubscribe();
+ }
+
+ onHeroTypeHover(config: HeroTypeConfig): void {
+ this.stopHeroCycle();
+ this.activeHeroType = config;
+ }
+
+ onHeroTypeLeave(): void {
+ this.startHeroCycle();
+ }
+
+ private startHeroCycle(): void {
+ this.stopHeroCycle();
+ this.heroInterval = setInterval(() => {
+ const idx = this.heroTypes.indexOf(this.activeHeroType);
+ this.activeHeroType = this.heroTypes[(idx + 1) % this.heroTypes.length];
+ }, 3000);
+ }
+
+ private stopHeroCycle(): void {
+ if (this.heroInterval) {
+ clearInterval(this.heroInterval);
+ this.heroInterval = null;
+ }
+ }
+
+ onSearchInput(): void {
+ this.searchLoading = true;
+ this.searchSubject.next(this.searchText || '');
+ }
+
+ onSearchFocus(): void {
+ if (!this.searchLoaded) {
+ this.searchLoading = true;
+ this.searchSubject.next(this.searchText || '');
+ }
+ }
+
+ searchDisplayFn = (value: any): string => {
+ return typeof value === 'string' ? value : this.searchText || '';
+ };
+
+ clearSearch(): void {
+ this.searchText = '';
+ this.searchSubject.next('');
+ this.searchInputRef?.nativeElement?.focus();
+ setTimeout(() => this.searchAutoTrigger?.openPanel());
+ }
+
+ onSearch(): void {
+ this.seeAllResults();
+ }
+
+ seeAllResults(): void {
+ this.searchAutoTrigger?.closePanel();
+ const search = this.searchText?.trim() || undefined;
+ void this.router.navigate(['/iot-hub/search'], { queryParams: { search } });
+ }
+
+ isCompactType(type: ItemType): boolean {
+ return type === ItemType.CALCULATED_FIELD
+ || type === ItemType.ALARM_RULE
+ || type === ItemType.RULE_CHAIN;
+ }
+
+ getCompactIcon(item: MpItemVersionView): string {
+ return item.icon || getItemTypeIcon(item.type);
+ }
+
+ getItemImage(item: MpItemVersionView): string | null {
+ return resolveIotHubItemImageUrl(item, this.iotHubApiService);
+ }
+
+ getItemTypeIcon(type: ItemType): string {
+ return getItemTypeIcon(type);
+ }
+
+ getSearchGroupLabel(type: ItemType): string {
+ const key = itemTypeTranslations.get(type);
+ return key ? this.translate.instant(key + '-plural') : type;
+ }
+
+ navigateToBrowse(type: ItemType): void {
+ void this.router.navigate(['/iot-hub', this.getTypeRoute(type)]);
+ }
+
+ hasAnyPopularItems(): boolean {
+ return this.popularDevices.length > 0
+ || this.popularSolutionTemplates.length > 0
+ || this.popularWidgets.length > 0
+ || this.popularCalcFields.length > 0
+ || this.popularAlarmRules.length > 0
+ || this.popularRuleChains.length > 0;
+ }
+
+ private getTypeRoute(type: ItemType): string {
+ switch (type) {
+ case ItemType.WIDGET: return 'widgets';
+ case ItemType.DASHBOARD: return 'dashboards';
+ case ItemType.SOLUTION_TEMPLATE: return 'solution-templates';
+ case ItemType.CALCULATED_FIELD: return 'calculated-fields';
+ case ItemType.ALARM_RULE: return 'alarm-rules';
+ case ItemType.RULE_CHAIN: return 'rule-chains';
+ case ItemType.DEVICE: return 'devices';
+ default: return 'widgets';
+ }
+ }
+
+ navigateToInstalledItems(): void {
+ void this.router.navigate(['/iot-hub/installed']);
+ }
+
+ openItemDetail(item: MpItemVersionView): void {
+ this.iotHubActions.openItemDetail(item, this.findInstalledItem(item), this.findInstalledItemsCount(item)).subscribe(result => {
+ if (result === 'installed' || result === 'deleted') {
+ this.reloadInstalledItems(item.type);
+ }
+ });
+ }
+
+ private reloadInstalledItems(type: ItemType): void {
+ const config = { ignoreLoading: true };
+ const pageLink = new PageLink(10000, 0);
+ this.iotHubApiService.getInstalledItemsCount(null, config).subscribe(count => {
+ this.installedItemsCount = count;
+ });
+ if (type === ItemType.WIDGET) {
+ this.iotHubApiService.getInstalledItems(pageLink, ItemType.WIDGET, undefined, config).subscribe(data => {
+ this.installedWidgets = data.data;
+ });
+ } else if (type === ItemType.SOLUTION_TEMPLATE) {
+ this.iotHubApiService.getInstalledItems(pageLink, ItemType.SOLUTION_TEMPLATE, undefined, config).subscribe(data => {
+ this.installedSolutionTemplates = data.data;
+ });
+ } else if (type === ItemType.DEVICE) {
+ this.iotHubApiService.getInstalledItemCounts(ItemType.DEVICE, config).subscribe(counts => {
+ this.installedDeviceCounts = counts;
+ });
+ } else if (type === ItemType.CALCULATED_FIELD) {
+ this.iotHubApiService.getInstalledItemCounts(ItemType.CALCULATED_FIELD, config).subscribe(counts => {
+ this.installedCalcFieldCounts = counts;
+ });
+ } else if (type === ItemType.ALARM_RULE) {
+ this.iotHubApiService.getInstalledItemCounts(ItemType.ALARM_RULE, config).subscribe(counts => {
+ this.installedAlarmRuleCounts = counts;
+ });
+ } else if (type === ItemType.RULE_CHAIN) {
+ this.iotHubApiService.getInstalledItemCounts(ItemType.RULE_CHAIN, config).subscribe(counts => {
+ this.installedRuleChainCounts = counts;
+ });
+ }
+ }
+
+ private findInstalledItem(item: MpItemVersionView): IotHubInstalledItem | undefined {
+ switch (item.type) {
+ case ItemType.WIDGET:
+ return this.installedWidgets.find(i => i.itemId === item.itemId);
+ case ItemType.SOLUTION_TEMPLATE:
+ return this.installedSolutionTemplates.find(i => i.itemId === item.itemId);
+ default:
+ return undefined;
+ }
+ }
+
+ findInstalledItemsCount(item: MpItemVersionView): number {
+ switch (item.type) {
+ case ItemType.DEVICE:
+ return this.installedDeviceCounts[item.itemId] || 0;
+ case ItemType.CALCULATED_FIELD:
+ return this.installedCalcFieldCounts[item.itemId] || 0;
+ case ItemType.ALARM_RULE:
+ return this.installedAlarmRuleCounts[item.itemId] || 0;
+ case ItemType.RULE_CHAIN:
+ return this.installedRuleChainCounts[item.itemId] || 0;
+ default:
+ return 0;
+ }
+ }
+
+ installItem(item: MpItemVersionView): void {
+ this.iotHubActions.installItem(item).subscribe(result => {
+ if (result === 'installed') {
+ this.reloadInstalledItems(item.type);
+ }
+ });
+ }
+
+ updateItem(item: MpItemVersionView): void {
+ const installedItem = this.findInstalledItem(item);
+ if (!installedItem) { return; }
+ this.iotHubActions.updateItem(installedItem, item.version, item.id as string).subscribe(result => {
+ if (result === 'updated') {
+ this.reloadInstalledItems(item.type);
+ }
+ });
+ }
+
+ navigateToCreator(creatorId: string): void {
+ void this.router.navigate(['/iot-hub/creator', creatorId]);
+ }
+
+ getInstalledWidget(item: MpItemVersionView): IotHubInstalledItem | undefined {
+ return this.installedWidgets.find(i => i.itemId === item.itemId);
+ }
+
+ getInstalledSolutionTemplate(item: MpItemVersionView): IotHubInstalledItem | undefined {
+ return this.installedSolutionTemplates.find(i => i.itemId === item.itemId);
+ }
+
+ deleteInstalledItem(item: MpItemVersionView): void {
+ const installedItem = this.findInstalledItem(item);
+ if (!installedItem) { return; }
+ this.iotHubActions.deleteItem(installedItem).subscribe(() => {
+ this.installedItemsCount = Math.max(0, this.installedItemsCount - 1);
+ if (item.type === ItemType.WIDGET) {
+ this.installedWidgets = this.installedWidgets.filter(i => i.id.id !== installedItem.id.id);
+ } else if (item.type === ItemType.SOLUTION_TEMPLATE) {
+ this.installedSolutionTemplates = this.installedSolutionTemplates.filter(i => i.id.id !== installedItem.id.id);
+ } else if (item.type === ItemType.DEVICE && this.installedDeviceCounts[item.itemId]) {
+ this.installedDeviceCounts[item.itemId] = Math.max(0, this.installedDeviceCounts[item.itemId] - 1);
+ } else if (item.type === ItemType.CALCULATED_FIELD && this.installedCalcFieldCounts[item.itemId]) {
+ this.installedCalcFieldCounts[item.itemId] = Math.max(0, this.installedCalcFieldCounts[item.itemId] - 1);
+ } else if (item.type === ItemType.ALARM_RULE && this.installedAlarmRuleCounts[item.itemId]) {
+ this.installedAlarmRuleCounts[item.itemId] = Math.max(0, this.installedAlarmRuleCounts[item.itemId] - 1);
+ } else if (item.type === ItemType.RULE_CHAIN && this.installedRuleChainCounts[item.itemId]) {
+ this.installedRuleChainCounts[item.itemId] = Math.max(0, this.installedRuleChainCounts[item.itemId] - 1);
+ }
+ });
+ }
+
+ openSignup(): void {
+ window.open(this.iotHubApiService.baseUrl + '/signup', '_blank');
+ }
+
+ private updateCardCounts(): void {
+ if (this.breakpointObserver.isMatched(MediaBreakpoints['lt-sm'])) {
+ // ≤599px: 1-col big cards, 1-col compact
+ this.bigCardCount = 2;
+ this.compactCardCount = 4;
+ } else if (this.breakpointObserver.isMatched(MediaBreakpoints['lt-md'])) {
+ // ≤959px: 2-col big cards, 1-col compact
+ this.bigCardCount = 4;
+ this.compactCardCount = 4;
+ } else if (this.breakpointObserver.isMatched(MediaBreakpoints['lt-lg'])) {
+ // ≤1279px: 2-col big cards, 1-col compact
+ this.bigCardCount = 4;
+ this.compactCardCount = 4;
+ } else if (this.breakpointObserver.isMatched(MediaBreakpoints['lt-xmd'])) {
+ // ≤1599px: 3-col big cards, 2-col compact
+ this.bigCardCount = 3;
+ this.compactCardCount = 4;
+ } else if (this.breakpointObserver.isMatched(MediaBreakpoints['lt-xl'])) {
+ // ≤1919px: 4-col big cards, 3-col compact
+ this.bigCardCount = 4;
+ this.compactCardCount = 6;
+ } else if (this.breakpointObserver.isMatched(MediaBreakpoints['gt-xxl'])) {
+ // ≥2448px: 6-col big cards, 4-col compact
+ this.bigCardCount = 6;
+ this.compactCardCount = 8;
+ } else {
+ // ≥1920px: 5-col big cards, 3-col compact
+ this.bigCardCount = 5;
+ this.compactCardCount = 6;
+ }
+ }
+
+ retryLoadPopularItems(): void {
+ // Debounce frequent retry clicks: show the loading spinner
+ // immediately and defer the actual loadPopularItems() call by
+ // 350ms so rapid-fire clicks coalesce into a single request set.
+ // hasError stays as-is until the next request actually succeeds.
+ if (this.retryTimer != null) {
+ clearTimeout(this.retryTimer);
+ }
+ this.isLoading = true;
+ this.retryTimer = setTimeout(() => {
+ this.retryTimer = null;
+ this.loadPopularItems();
+ }, 350);
+ }
+
+ private loadPopularItems(): void {
+ if (this.retryTimer != null) {
+ clearTimeout(this.retryTimer);
+ this.retryTimer = null;
+ }
+ this.isLoading = true;
+ // hasError is intentionally NOT reset here — the error UI stays
+ // visible until the next forkJoin actually succeeds (cleared in
+ // the `next` callback below).
+ const sortOrder: SortOrder = { property: 'totalInstallCount', direction: Direction.DESC };
+ const config = { ignoreLoading: true, ignoreErrors: true };
+ const installedPageLink = new PageLink(10000, 0);
+
+ const buildQuery = (type: ItemType, size: number): MpItemVersionQuery => {
+ const pageLink = new PageLink(size, 0, null, sortOrder);
+ return new MpItemVersionQuery(pageLink, { type });
+ };
+
+ forkJoin({
+ widgets: this.iotHubApiService.getPublishedVersions(buildQuery(ItemType.WIDGET, this.bigCardCount), config),
+ solutionTemplates: this.iotHubApiService.getPublishedVersions(buildQuery(ItemType.SOLUTION_TEMPLATE, this.bigCardCount), config),
+ calcFields: this.iotHubApiService.getPublishedVersions(buildQuery(ItemType.CALCULATED_FIELD, this.compactCardCount), config),
+ alarmRules: this.iotHubApiService.getPublishedVersions(buildQuery(ItemType.ALARM_RULE, this.compactCardCount), config),
+ ruleChains: this.iotHubApiService.getPublishedVersions(buildQuery(ItemType.RULE_CHAIN, this.compactCardCount), config),
+ devices: this.iotHubApiService.getPublishedVersions(buildQuery(ItemType.DEVICE, this.bigCardCount), config),
+ installedWidgets: this.iotHubApiService.getInstalledItems(installedPageLink, ItemType.WIDGET, undefined, config),
+ installedSolutionTemplates: this.iotHubApiService.getInstalledItems(installedPageLink, ItemType.SOLUTION_TEMPLATE, undefined, config),
+ installedDeviceCounts: this.iotHubApiService.getInstalledItemCounts(ItemType.DEVICE, config),
+ installedCalcFieldCounts: this.iotHubApiService.getInstalledItemCounts(ItemType.CALCULATED_FIELD, config),
+ installedAlarmRuleCounts: this.iotHubApiService.getInstalledItemCounts(ItemType.ALARM_RULE, config),
+ installedRuleChainCounts: this.iotHubApiService.getInstalledItemCounts(ItemType.RULE_CHAIN, config),
+ installedCount: this.iotHubApiService.getInstalledItemsCount(null, config)
+ }).subscribe({
+ next: (results) => {
+ this.popularWidgets = results.widgets.data;
+ this.popularSolutionTemplates = results.solutionTemplates.data;
+ this.popularCalcFields = results.calcFields.data;
+ this.popularAlarmRules = results.alarmRules.data;
+ this.popularRuleChains = results.ruleChains.data;
+ this.popularDevices = results.devices.data;
+ this.installedWidgets = results.installedWidgets.data;
+ this.installedSolutionTemplates = results.installedSolutionTemplates.data;
+ this.installedDeviceCounts = results.installedDeviceCounts;
+ this.installedCalcFieldCounts = results.installedCalcFieldCounts;
+ this.installedAlarmRuleCounts = results.installedAlarmRuleCounts;
+ this.installedRuleChainCounts = results.installedRuleChainCounts;
+ this.installedItemsCount = results.installedCount;
+ this.isLoading = false;
+ this.hasError = false;
+ },
+ error: () => {
+ this.isLoading = false;
+ this.hasError = true;
+ this.popularWidgets = [];
+ this.popularSolutionTemplates = [];
+ this.popularCalcFields = [];
+ this.popularAlarmRules = [];
+ this.popularRuleChains = [];
+ this.popularDevices = [];
+ }
+ });
+ }
+
+ private groupSearchResults(items: MpItemVersionView[]): SearchResultGroup[] {
+ const groupMap = new Map();
+ for (const item of items) {
+ if (!SEARCH_GROUP_ORDER.includes(item.type)) {
+ continue;
+ }
+ let list = groupMap.get(item.type);
+ if (!list) {
+ list = [];
+ groupMap.set(item.type, list);
+ }
+ list.push(item);
+ }
+ return SEARCH_GROUP_ORDER
+ .filter(type => groupMap.has(type))
+ .map(type => ({ type, items: groupMap.get(type) }));
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.html b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.html
new file mode 100644
index 0000000000..be6793f766
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.html
@@ -0,0 +1,100 @@
+
+();
+ allItemTypes: string[] = ['DEVICE', 'SOLUTION_TEMPLATE', 'WIDGET', 'CALCULATED_FIELD', 'ALARM_RULE', 'RULE_CHAIN'];
+
+ @ViewChild(TbIotHubInstalledItemsTableComponent) tableComponent: TbIotHubInstalledItemsTableComponent;
+
+ private searchSubject = new Subject();
+ private destroy$ = new Subject();
+
+ constructor(
+ private translate: TranslateService,
+ private route: ActivatedRoute,
+ private router: Router
+ ) {}
+
+ ngOnInit(): void {
+ const itemType = this.route.snapshot.queryParamMap.get('itemType');
+ if (itemType && this.allItemTypes.includes(itemType)) {
+ this.activeTypeFilters.add(itemType);
+ this.typeFilters = Array.from(this.activeTypeFilters);
+ }
+ this.searchSubject.pipe(
+ debounceTime(300),
+ takeUntil(this.destroy$)
+ ).subscribe(value => {
+ this.appliedTextSearch = value;
+ });
+ }
+
+ ngOnDestroy(): void {
+ this.destroy$.next();
+ this.destroy$.complete();
+ }
+
+ navigateToMarketplace(): void {
+ void this.router.navigate(['/iot-hub']);
+ }
+
+ onSearchChange(value: string): void {
+ this.textSearch = value;
+ this.searchSubject.next(value);
+ }
+
+ isTypeFilterActive(type: string): boolean {
+ return this.activeTypeFilters.has(type);
+ }
+
+ toggleTypeFilter(type: string): void {
+ if (this.activeTypeFilters.has(type)) {
+ this.activeTypeFilters.delete(type);
+ } else {
+ this.activeTypeFilters.add(type);
+ }
+ this.typeFilters = Array.from(this.activeTypeFilters);
+ }
+
+ removeTypeFilter(type: string): void {
+ this.activeTypeFilters.delete(type);
+ this.typeFilters = Array.from(this.activeTypeFilters);
+ }
+
+ clearAllFilters(): void {
+ this.activeTypeFilters.clear();
+ this.typeFilters = [];
+ this.textSearch = '';
+ this.appliedTextSearch = '';
+ }
+
+ hasActiveFilters(): boolean {
+ return this.activeTypeFilters.size > 0;
+ }
+
+ getItemTypeLabel(itemType: string): string {
+ const key = itemTypeTranslations.get(itemType as ItemType);
+ return key ? this.translate.instant(key) : itemType;
+ }
+
+ checkForUpdates(): void {
+ this.tableComponent?.checkForUpdates();
+ }
+
+ get isCheckingUpdates(): boolean {
+ return this.tableComponent?.isCheckingUpdates || false;
+ }
+
+ get updatesChecked(): boolean {
+ return this.tableComponent?.updatesChecked || false;
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-resolver.component.ts b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-resolver.component.ts
new file mode 100644
index 0000000000..606d6a29ae
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-resolver.component.ts
@@ -0,0 +1,180 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatDialog } from '@angular/material/dialog';
+import { Store } from '@ngrx/store';
+import { TranslateService } from '@ngx-translate/core';
+import { AppState } from '@core/core.state';
+import { Observable } from 'rxjs';
+import { ActionNotificationShow } from '@core/notification/notification.actions';
+import { IotHubApiService } from '@core/http/iot-hub-api.service';
+import { ListingItemVersionNotFound, MpItemVersionView } from '@shared/models/iot-hub/iot-hub-version.models';
+import {
+ DeepLinkOpenItem,
+ isPublished,
+ isUUID,
+ typeSegment
+} from './iot-hub-deep-link.utils';
+import {
+ IotHubUnpublishedWarningDialogData,
+ TbIotHubUnpublishedWarningDialogComponent
+} from '@home/components/iot-hub/iot-hub-unpublished-warning-dialog.component';
+import {
+ TbIotHubPeRequiredDialogComponent
+} from '@home/components/iot-hub/iot-hub-pe-required-dialog.component';
+import {
+ IotHubUpgradeRequiredDialogData,
+ TbIotHubUpgradeRequiredDialogComponent
+} from '@home/components/iot-hub/iot-hub-upgrade-required-dialog.component';
+
+@Component({
+ selector: 'tb-iot-hub-item-resolver',
+ standalone: false,
+ template: ''
+})
+export class TbIotHubItemResolverComponent implements OnInit {
+
+ constructor(
+ private route: ActivatedRoute,
+ private router: Router,
+ private dialog: MatDialog,
+ private store: Store,
+ private translate: TranslateService,
+ private iotHubApi: IotHubApiService
+ ) {}
+
+ ngOnInit(): void {
+ const params = this.route.snapshot.paramMap;
+ const slug = params.get('slug');
+ const itemVersionId = params.get('itemVersionId');
+ const itemId = params.get('itemId');
+ const bySlug = slug != null;
+ const byVersion = !bySlug && itemVersionId != null;
+
+ let fetch$: Observable;
+ if (bySlug) {
+ fetch$ = this.iotHubApi.getListingItemVersion(slug, { ignoreErrors: true });
+ } else {
+ const id = byVersion ? itemVersionId : itemId;
+ if (!isUUID(id)) {
+ this.failTo('iot-hub.deep-link-invalid-id');
+ return;
+ }
+ fetch$ = byVersion
+ ? this.iotHubApi.getVersionInfo(id, { ignoreErrors: true })
+ : this.iotHubApi.getPublishedVersion(id, { ignoreErrors: true });
+ }
+
+ fetch$.subscribe({
+ next: v => this.handleResolved(v, byVersion),
+ error: err => {
+ if (bySlug && err?.status === 404) {
+ const body = (err?.error ?? {}) as ListingItemVersionNotFound;
+ if (body.peRequired) {
+ this.showPeRequired();
+ return;
+ }
+ if (typeof body.minTbVersionRequired === 'number') {
+ this.showMinTbVersionRequired(body.minTbVersionRequired);
+ return;
+ }
+ if (body.noMatchingVersions) {
+ this.failTo('iot-hub.deep-link-not-found');
+ return;
+ }
+ }
+ const key = err?.status === 404
+ ? 'iot-hub.deep-link-not-found'
+ : 'iot-hub.deep-link-fetch-failed';
+ this.failTo(key);
+ }
+ });
+ }
+
+ private showPeRequired(): void {
+ this.router.navigate(['/iot-hub'], { replaceUrl: true }).then(() => {
+ this.dialog.open(TbIotHubPeRequiredDialogComponent, {
+ panelClass: ['tb-dialog'],
+ disableClose: true,
+ autoFocus: false
+ });
+ });
+ }
+
+ private showMinTbVersionRequired(minTbVersion: number): void {
+ this.router.navigate(['/iot-hub'], { replaceUrl: true }).then(() => {
+ this.dialog.open(
+ TbIotHubUpgradeRequiredDialogComponent,
+ {
+ panelClass: ['tb-dialog'],
+ disableClose: true,
+ autoFocus: false,
+ data: { minTbVersion }
+ }
+ );
+ });
+ }
+
+ private handleResolved(version: MpItemVersionView, byVersion: boolean): void {
+ const segment = typeSegment(version.type);
+ if (!segment) {
+ this.failTo('iot-hub.deep-link-fetch-failed');
+ return;
+ }
+
+ const unpublished = byVersion && !isPublished(version);
+
+ if (unpublished) {
+ this.dialog.open<
+ TbIotHubUnpublishedWarningDialogComponent,
+ IotHubUnpublishedWarningDialogData,
+ boolean
+ >(TbIotHubUnpublishedWarningDialogComponent, {
+ panelClass: ['tb-dialog'],
+ disableClose: true,
+ autoFocus: false,
+ data: { item: version }
+ }).afterClosed().subscribe(confirmed => {
+ if (confirmed) {
+ this.openOnTypePage(version, segment, true);
+ } else {
+ this.router.navigate(['/iot-hub'], { replaceUrl: true });
+ }
+ });
+ } else {
+ this.openOnTypePage(version, segment, false);
+ }
+ }
+
+ private openOnTypePage(version: MpItemVersionView, segment: string, preview: boolean): void {
+ const openItem: DeepLinkOpenItem = { version, preview };
+ this.router.navigate(['/iot-hub', segment], {
+ state: { openItem },
+ replaceUrl: true
+ });
+ }
+
+ private failTo(messageKey: string): void {
+ this.store.dispatch(new ActionNotificationShow({
+ message: this.translate.instant(messageKey),
+ type: 'error',
+ duration: 5000
+ }));
+ this.router.navigate(['/iot-hub'], { replaceUrl: true });
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-items-page.component.html b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-items-page.component.html
new file mode 100644
index 0000000000..3d9de39460
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-items-page.component.html
@@ -0,0 +1,61 @@
+
+ = {
+ WIDGET: {
+ type: ItemType.WIDGET,
+ titleKey: 'item.type-widget-plural',
+ descriptionKey: 'iot-hub.items-page-desc-widgets',
+ image: 'assets/iot-hub/items-page-widgets-hero.svg',
+ routeSegment: 'widgets'
+ },
+ DASHBOARD: {
+ type: ItemType.DASHBOARD,
+ titleKey: 'item.type-dashboard-plural',
+ descriptionKey: 'iot-hub.items-page-desc-dashboards',
+ image: 'assets/iot-hub/items-page-dashboards-hero.svg',
+ routeSegment: 'dashboards'
+ },
+ SOLUTION_TEMPLATE: {
+ type: ItemType.SOLUTION_TEMPLATE,
+ titleKey: 'item.type-solution-template-plural',
+ descriptionKey: 'iot-hub.items-page-desc-solution-templates',
+ image: 'assets/iot-hub/items-page-solution-templates-hero.png',
+ routeSegment: 'solution-templates'
+ },
+ CALCULATED_FIELD: {
+ type: ItemType.CALCULATED_FIELD,
+ titleKey: 'item.type-calculated-field-plural',
+ descriptionKey: 'iot-hub.items-page-desc-calculated-fields',
+ image: 'assets/iot-hub/items-page-calculated-fields-hero.svg',
+ routeSegment: 'calculated-fields'
+ },
+ ALARM_RULE: {
+ type: ItemType.ALARM_RULE,
+ titleKey: 'item.type-alarm-rule-plural',
+ descriptionKey: 'iot-hub.items-page-desc-alarm-rules',
+ image: 'assets/iot-hub/items-page-alarm-rules-hero.svg',
+ routeSegment: 'alarm-rules'
+ },
+ RULE_CHAIN: {
+ type: ItemType.RULE_CHAIN,
+ titleKey: 'item.type-rule-chain-plural',
+ descriptionKey: 'iot-hub.items-page-desc-rule-chains',
+ image: 'assets/iot-hub/items-page-rule-chains-hero.svg',
+ routeSegment: 'rule-chains'
+ },
+ DEVICE: {
+ type: ItemType.DEVICE,
+ titleKey: 'iot-hub.device-library',
+ descriptionKey: 'iot-hub.items-page-desc-devices',
+ image: 'assets/iot-hub/items-page-devices-hero.svg',
+ routeSegment: 'devices'
+ }
+};
+
+@Component({
+ selector: 'tb-iot-hub-items-page',
+ standalone: false,
+ templateUrl: './iot-hub-items-page.component.html',
+ styleUrls: ['./iot-hub-items-page.component.scss']
+})
+export class TbIotHubItemsPageComponent implements OnInit {
+
+ config: ItemTypePageConfig;
+ installedItemsCount = 0;
+
+ constructor(
+ private route: ActivatedRoute,
+ private router: Router,
+ private iotHubApiService: IotHubApiService,
+ private iotHubActions: IotHubActionsService
+ ) {}
+
+ ngOnInit(): void {
+ const itemType = this.route.snapshot.data['itemType'] as string;
+ this.config = PAGE_CONFIGS[itemType];
+ this.loadInstalledCount();
+ this.maybeOpenDeepLinkedItem();
+ }
+
+ goBack(): void {
+ void this.router.navigate(['/iot-hub']);
+ }
+
+ navigateToInstalledItems(): void {
+ void this.router.navigate(['/iot-hub/installed'], { queryParams: { itemType: this.config.type } });
+ }
+
+ openSignup(): void {
+ window.open(this.iotHubApiService.baseUrl + '/signup', '_blank');
+ }
+
+ private loadInstalledCount(): void {
+ this.iotHubApiService.getInstalledItemsCount(this.config.type, { ignoreLoading: true }).subscribe(count => {
+ this.installedItemsCount = count;
+ });
+ }
+
+ private maybeOpenDeepLinkedItem(): void {
+ const openItem = history.state?.openItem as DeepLinkOpenItem | undefined;
+ if (!openItem || openItem.version.type !== this.config.type) {
+ return;
+ }
+ history.replaceState({ ...history.state, openItem: undefined }, '');
+
+ // Types where multiple entities can be installed from the same
+ // IoT Hub item — we only care about the count per itemId
+ // (no singular installed entity to surface in the detail dialog).
+ const countBasedTypes: ReadonlySet = new Set([
+ ItemType.DEVICE,
+ ItemType.CALCULATED_FIELD,
+ ItemType.ALARM_RULE,
+ ItemType.RULE_CHAIN
+ ]);
+ const isCountBased = countBasedTypes.has(this.config.type);
+ const resolution$: Observable<{ installed?: IotHubInstalledItem; count?: number }> = isCountBased
+ ? this.iotHubApiService
+ .getInstalledItemCounts(this.config.type, { ignoreLoading: true })
+ .pipe(map(counts => ({ count: counts[openItem.version.itemId] || 0 })))
+ : this.resolveInstalledItem(openItem.version)
+ .pipe(map(installed => ({ installed: installed ?? undefined })));
+
+ resolution$.subscribe(({ installed, count }) => {
+ this.iotHubActions.openItemDetail(
+ openItem.version,
+ installed,
+ count,
+ 'default',
+ true,
+ openItem.preview
+ ).subscribe();
+ });
+ }
+
+ private resolveInstalledItem(version: MpItemVersionView): Observable {
+ return this.iotHubApiService
+ .getInstalledItems(new PageLink(1), undefined, version.itemId, { ignoreLoading: true })
+ .pipe(map(page => page.data[0] ?? null));
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-routing.module.ts b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-routing.module.ts
new file mode 100644
index 0000000000..3e387e6c0a
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-routing.module.ts
@@ -0,0 +1,185 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { Authority } from '@shared/models/authority.enum';
+import { TbIotHubHomeComponent } from './iot-hub-home.component';
+import { TbIotHubItemsPageComponent } from './iot-hub-items-page.component';
+import { TbIotHubAlarmRulesUnavailablePageComponent } from './iot-hub-alarm-rules-unavailable-page.component';
+import { TbIotHubCreatorProfileComponent } from './iot-hub-creator-profile.component';
+import { TbIotHubInstalledItemsComponent } from './iot-hub-installed-items.component';
+import { TbIotHubSearchPageComponent } from './iot-hub-search-page.component';
+import { TbIotHubItemResolverComponent } from './iot-hub-item-resolver.component';
+
+const routes: Routes = [
+ {
+ path: 'iot-hub',
+ data: {
+ auth: [Authority.TENANT_ADMIN],
+ breadcrumb: {
+ label: 'iot-hub.iot-hub',
+ icon: 'hub'
+ }
+ },
+ children: [
+ {
+ path: '',
+ component: TbIotHubHomeComponent,
+ data: {
+ auth: [Authority.TENANT_ADMIN],
+ title: 'iot-hub.iot-hub'
+ }
+ },
+ {
+ path: 'widgets',
+ component: TbIotHubItemsPageComponent,
+ data: {
+ auth: [Authority.TENANT_ADMIN],
+ title: 'item.type-widget-plural',
+ itemType: 'WIDGET',
+ breadcrumb: { label: 'item.type-widget-plural', icon: 'widgets' }
+ }
+ },
+ {
+ path: 'dashboards',
+ component: TbIotHubItemsPageComponent,
+ data: {
+ auth: [Authority.TENANT_ADMIN],
+ title: 'item.type-dashboard-plural',
+ itemType: 'DASHBOARD',
+ breadcrumb: { label: 'item.type-dashboard-plural', icon: 'dashboard' }
+ }
+ },
+ {
+ path: 'solution-templates',
+ component: TbIotHubItemsPageComponent,
+ data: {
+ auth: [Authority.TENANT_ADMIN],
+ title: 'item.type-solution-template-plural',
+ itemType: 'SOLUTION_TEMPLATE',
+ breadcrumb: { label: 'item.type-solution-template-plural', icon: 'integration_instructions' }
+ }
+ },
+ {
+ path: 'calculated-fields',
+ component: TbIotHubItemsPageComponent,
+ data: {
+ auth: [Authority.TENANT_ADMIN],
+ title: 'item.type-calculated-field-plural',
+ itemType: 'CALCULATED_FIELD',
+ breadcrumb: { label: 'item.type-calculated-field-plural', icon: 'functions' }
+ }
+ },
+ {
+ path: 'alarm-rules',
+ component: TbIotHubAlarmRulesUnavailablePageComponent,
+ data: {
+ auth: [Authority.TENANT_ADMIN],
+ title: 'item.type-alarm-rule-plural',
+ breadcrumb: { label: 'item.type-alarm-rule-plural', icon: 'notification_important' }
+ }
+ },
+ {
+ path: 'rule-chains',
+ component: TbIotHubItemsPageComponent,
+ data: {
+ auth: [Authority.TENANT_ADMIN],
+ title: 'item.type-rule-chain-plural',
+ itemType: 'RULE_CHAIN',
+ breadcrumb: { label: 'item.type-rule-chain-plural', icon: 'account_tree' }
+ }
+ },
+ {
+ path: 'devices',
+ component: TbIotHubItemsPageComponent,
+ data: {
+ auth: [Authority.TENANT_ADMIN],
+ title: 'iot-hub.device-library',
+ itemType: 'DEVICE',
+ breadcrumb: { label: 'iot-hub.device-library', icon: 'memory' }
+ }
+ },
+ {
+ path: 'search',
+ component: TbIotHubSearchPageComponent,
+ data: {
+ auth: [Authority.TENANT_ADMIN],
+ title: 'iot-hub.search-results',
+ breadcrumb: {
+ label: 'iot-hub.search-results',
+ icon: 'search'
+ }
+ }
+ },
+ {
+ path: 'installed',
+ component: TbIotHubInstalledItemsComponent,
+ data: {
+ auth: [Authority.TENANT_ADMIN],
+ title: 'iot-hub.installed-items',
+ breadcrumb: {
+ label: 'iot-hub.installed-items',
+ icon: 'inventory_2'
+ }
+ }
+ },
+ {
+ path: 'creator/:creatorId',
+ component: TbIotHubCreatorProfileComponent,
+ data: {
+ auth: [Authority.TENANT_ADMIN],
+ title: 'iot-hub.creator-profile',
+ breadcrumb: {
+ label: 'iot-hub.creator-profile',
+ icon: 'person'
+ }
+ }
+ },
+ {
+ path: 'listing/:slug',
+ component: TbIotHubItemResolverComponent,
+ data: {
+ auth: [Authority.TENANT_ADMIN],
+ title: 'iot-hub.item-detail'
+ }
+ },
+ {
+ path: 'version/:itemVersionId',
+ component: TbIotHubItemResolverComponent,
+ data: {
+ auth: [Authority.TENANT_ADMIN],
+ title: 'iot-hub.item-detail'
+ }
+ },
+ {
+ path: ':itemId',
+ component: TbIotHubItemResolverComponent,
+ data: {
+ auth: [Authority.TENANT_ADMIN],
+ title: 'iot-hub.item-detail'
+ }
+ }
+ ]
+ }
+];
+
+@NgModule({
+ imports: [RouterModule.forChild(routes)],
+ exports: [RouterModule]
+})
+export class IotHubRoutingModule { }
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-search-page.component.html b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-search-page.component.html
new file mode 100644
index 0000000000..27a461b283
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-search-page.component.html
@@ -0,0 +1,36 @@
+
+
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-types-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/widget/widget-types-table-config.resolver.ts
index 811d3e56e8..cb8b436166 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widget-types-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/widget/widget-types-table-config.resolver.ts
@@ -47,6 +47,8 @@ import { WidgetTypeComponent } from '@home/pages/widget/widget-type.component';
import { WidgetTypeTabsComponent } from '@home/pages/widget/widget-type-tabs.component';
import { SelectWidgetTypeDialogComponent } from '@home/pages/widget/select-widget-type-dialog.component';
import { MatDialog } from '@angular/material/dialog';
+import { ItemType } from '@shared/models/iot-hub/iot-hub-item.models';
+import { IotHubActionsService } from '@home/components/iot-hub/iot-hub-actions.service';
@Injectable()
export class WidgetTypesTableConfigResolver {
@@ -60,7 +62,8 @@ export class WidgetTypesTableConfigResolver {
private translate: TranslateService,
private importExport: ImportExportService,
private datePipe: DatePipe,
- private router: Router) {
+ private router: Router,
+ private iotHubActions: IotHubActionsService) {
this.config.entityType = EntityType.WIDGETS_BUNDLE;
this.config.entityComponent = WidgetTypeComponent;
@@ -87,21 +90,6 @@ export class WidgetTypesTableConfigResolver {
entity => checkBoxCell(entity.deprecated))
);
- this.config.addActionDescriptors.push(
- {
- name: this.translate.instant('dashboard.create-new-widget'),
- icon: 'insert_drive_file',
- isEnabled: () => true,
- onAction: ($event) => this.addWidgetType($event)
- },
- {
- name: this.translate.instant('widget.import'),
- icon: 'file_upload',
- isEnabled: () => true,
- onAction: ($event) => this.importWidgetType($event)
- }
- );
-
this.config.cellActionDescriptors.push(
{
name: this.translate.instant('widget.export'),
@@ -151,6 +139,30 @@ export class WidgetTypesTableConfigResolver {
resolve(): EntityTableConfig
+
+
+
+
+
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-alarm-rules-unavailable-page.component.scss b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-alarm-rules-unavailable-page.component.scss
new file mode 100644
index 0000000000..d958011810
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-alarm-rules-unavailable-page.component.scss
@@ -0,0 +1,143 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+
+@import "../../../../../scss/constants";
+
+// Outer page — 16px padding around the white container, matches
+// iot-hub-home.
+:host {
+ display: block;
+ padding: 16px;
+ height: 100%;
+}
+
+// Page container — same white card / dot pattern / blob layering
+// rules as the iot-hub home page.
+.tb-iot-hub-alarm-rules-unavailable {
+ position: relative;
+ background: white;
+ border-radius: 8px;
+ overflow: hidden;
+ height: 100%;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 800px;
+ background-image: radial-gradient(circle, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
+ background-size: 20px 20px;
+ mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
+ -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
+ pointer-events: none;
+ z-index: 1;
+ }
+
+ > *:not(.tb-iot-hub-blob) {
+ position: relative;
+ z-index: 2;
+ }
+}
+
+// Soft colored glow blobs — copied verbatim from iot-hub-home so the
+// page background matches. `color` is bound from the ALARM_RULE
+// HeroTypeConfig entry.
+.tb-iot-hub-blob {
+ position: absolute;
+ width: 568px;
+ height: 568px;
+ border-radius: 50%;
+ background: currentColor;
+ opacity: 0.16;
+ filter: blur(120px);
+ pointer-events: none;
+ z-index: 0;
+}
+
+.tb-iot-hub-blob-left {
+ top: 56px;
+ left: -221px;
+}
+
+.tb-iot-hub-blob-right {
+ top: 259px;
+ right: -196px;
+}
+
+.tb-alarm-rules-banner-container {
+ height: 100%;
+ display: flex;
+ overflow-y: auto;
+ flex-direction: column;
+}
+
+// Banner content stack — vertically centred in the card.
+.tb-alarm-rules-banner {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ gap: 40px;
+ padding: 80px 40px;
+ margin: auto;
+}
+
+.tb-alarm-rules-banner-image {
+ width: 446px;
+ max-width: 100%;
+ height: auto;
+}
+
+.tb-alarm-rules-banner-title {
+ font-size: 28px;
+ font-weight: 500;
+ line-height: 36px;
+ letter-spacing: 0.15px;
+ color: rgba(0, 0, 0, 0.87);
+ margin: 0;
+ max-width: 900px;
+}
+
+.tb-alarm-rules-banner-version {
+ color: $tb-primary-color;
+}
+
+.tb-alarm-rules-banner-desc {
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0.15px;
+ color: rgba(0, 0, 0, 0.76);
+ margin: -24px 0 0;
+ max-width: 900px;
+}
+
+.tb-alarm-rules-banner-actions {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.tb-alarm-rules-banner-current {
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 16px;
+ letter-spacing: 0.4px;
+ color: rgba(0, 0, 0, 0.54);
+ margin-top: -28px;
+}
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-alarm-rules-unavailable-page.component.ts b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-alarm-rules-unavailable-page.component.ts
new file mode 100644
index 0000000000..c44a46ce0f
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-alarm-rules-unavailable-page.component.ts
@@ -0,0 +1,43 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { environment as env } from '@env/environment';
+
+@Component({
+ selector: 'tb-iot-hub-alarm-rules-unavailable-page',
+ standalone: false,
+ templateUrl: './iot-hub-alarm-rules-unavailable-page.component.html',
+ styleUrls: ['./iot-hub-alarm-rules-unavailable-page.component.scss']
+})
+export class TbIotHubAlarmRulesUnavailablePageComponent {
+
+ // Same colour as the ALARM_RULE HeroTypeConfig entry on the home page.
+ readonly alarmRulesColor = '#d66f2e';
+
+ readonly currentTbVersion: string = env.tbVersion;
+
+ constructor(private router: Router) {}
+
+ goBack(): void {
+ void this.router.navigate(['/iot-hub']);
+ }
+
+ upgradeInstance(): void {
+ window.open('https://thingsboard.io/docs/installation/upgrade-instructions/', '_blank');
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.html b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.html
new file mode 100644
index 0000000000..9e181dff63
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.html
@@ -0,0 +1,116 @@
+
+
+
+
+ 
+
+
+
+
+ + {{ 'iot-hub.alarm-rules-unavailable-title-prefix' | translate }} + +
+ + + + + + +
+ @if (hasError) {
+
+
+ }
+
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.scss b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.scss
new file mode 100644
index 0000000000..3163c89674
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.scss
@@ -0,0 +1,360 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+
+@import "../../../../../scss/constants";
+
+:host {
+ display: block;
+ padding: 16px;
+ height: 100%;
+}
+
+.tb-creator-page {
+ background: white;
+ border-radius: 8px;
+ padding-left: 123px;
+ overflow: hidden;
+ display: flex;
+ height: 100%;
+}
+
+.tb-iot-hub-empty-state {
+ position: relative;
+ .tb-no-data-bg,
+ .tb-no-service-bg {
+ flex: auto;
+ height: 100px;
+ }
+
+ h3 {
+ font-size: 18px;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.87);
+ margin: 16px 0 8px;
+ }
+
+ p {
+ font-size: 14px;
+ color: rgba(0, 0, 0, 0.54);
+ margin: 0 0 24px;
+ }
+}
+
+// Left column: creator info
+.tb-creator-info {
+ width: 360px;
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 48px;
+ padding: 40px 24px 0 0;
+}
+
+// Avatar
+.tb-creator-avatar {
+ width: 140px;
+ height: 140px;
+ min-width: 140px;
+ min-height: 140px;
+ border-radius: 50%;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: rgba(0, 0, 0, 0.06);
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ mat-icon {
+ font-size: 48px;
+ width: 48px;
+ height: 48px;
+ color: rgba(0, 0, 0, 0.3);
+ }
+}
+
+.tb-creator-name {
+ font-size: 28px;
+ font-weight: 500;
+ line-height: 36px;
+ letter-spacing: 0.07px;
+ color: rgba(0, 0, 0, 0.87);
+ margin: 0;
+}
+
+.tb-creator-verified-badge {
+ font-size: 32px;
+ width: 32px;
+ height: 32px;
+ color: #00695c;
+ flex-shrink: 0;
+ cursor: default;
+}
+
+.tb-creator-desc-container {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ flex: 1;
+ min-height: 0;
+ overflow-y: auto;
+ @media #{$mat-gt-md} {
+ padding-bottom: 1rem;
+ }
+}
+
+// Description
+.tb-creator-desc {
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0.15px;
+ color: rgba(0, 0, 0, 0.76);
+ margin: 0;
+ max-width: 800px;
+}
+
+.tb-creator-link {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 4px 0;
+ height: 32px;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ letter-spacing: 0.25px;
+ color: rgba(0, 0, 0, 0.54);
+ text-decoration: none;
+ border-bottom: none;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ &:hover {
+ border-bottom: none;
+ }
+
+ mat-icon, tb-icon {
+ font-size: 24px;
+ width: 24px;
+ height: 24px;
+ flex-shrink: 0;
+ color: rgba(0, 0, 0, 0.54);
+ }
+
+ &.tb-creator-link-primary {
+ color: $tb-primary-color;
+
+ mat-icon {
+ color: $tb-primary-color;
+ }
+ }
+}
+
+a.tb-creator-link:hover span {
+ color: $tb-primary-color;
+ text-decoration: underline;
+}
+
+// Vertical divider (desktop)
+.tb-creator-divider {
+ width: 1px;
+ background: rgba(0, 0, 0, 0.12);
+ flex-shrink: 0;
+ align-self: stretch;
+}
+
+// Right column: published items
+.tb-creator-items {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ padding-top: 40px;
+ padding-left: 24px;
+ padding-right: 123px;
+
+ ::ng-deep {
+ .tb-search-divider {
+ margin-left: -24px;
+ margin-right: -123px;
+ }
+
+ .tb-results-container {
+ padding-right: 123px;
+ padding-bottom: 40px;
+ margin-right: -123px;
+ }
+
+ .tb-search-card-grid {
+ grid-template-columns: repeat(5, 1fr);
+
+ &.tb-search-card-grid-compact {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ }
+ }
+}
+
+.tb-creator-items-heading {
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 24px;
+ letter-spacing: 0.1px;
+ color: rgba(0, 0, 0, 0.87);
+ margin: 0 0 24px;
+}
+
+// Responsive
+
+@media #{$mat-lt-xxl} {
+ .tb-creator-page {
+ padding-left: 40px;
+ }
+
+ .tb-creator-items {
+ padding-right: 40px;
+
+ ::ng-deep {
+ .tb-search-divider {
+ margin-right: -40px;
+ }
+
+ .tb-results-container {
+ padding-right: 40px;
+ margin-right: -40px;
+ }
+
+ .tb-search-card-grid {
+ grid-template-columns: repeat(4, 1fr);
+ }
+ }
+ }
+}
+
+@media #{$mat-lt-xl} {
+ .tb-creator-info {
+ width: 300px;
+ }
+
+ .tb-creator-items {
+ ::ng-deep {
+ .tb-search-card-grid {
+ grid-template-columns: repeat(3, 1fr);
+
+ &.tb-search-card-grid-compact {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ }
+ }
+ }
+}
+
+@media #{$mat-lt-xmd} {
+
+ .tb-creator-items {
+ ::ng-deep {
+ .tb-search-card-grid {
+ grid-template-columns: repeat(2, 1fr);
+
+ &.tb-search-card-grid-compact {
+ grid-template-columns: repeat(1, 1fr);
+ }
+ }
+ }
+ }
+}
+
+@media #{$mat-lt-lg} {
+ :host {
+ height: auto;
+ flex: 1;
+ }
+
+ .tb-creator-page {
+ flex-direction: column;
+ padding: 0;
+ gap: 40px;
+ }
+
+ .tb-creator-info {
+ width: 100%;
+ padding: 40px 24px 0 24px;
+ }
+
+ .tb-creator-items {
+ padding-top: 0;
+ padding-right: 24px;
+
+ ::ng-deep {
+ .tb-search-divider {
+ margin-right: -24px;
+ }
+
+ .tb-results-container {
+ padding-right: 24px;
+ margin-right: -24px;
+ }
+ }
+ }
+
+ .tb-creator-items-heading {
+ margin-bottom: 0;
+ }
+
+ .tb-creator-divider {
+ width: 100%;
+ height: 1px;
+ align-self: auto;
+ }
+}
+
+@media #{$mat-lt-sm} {
+ .tb-creator-page {
+ gap: 24px;
+ }
+
+ .tb-creator-info {
+ padding: 16px 16px 0 16px;
+ gap: 24px;
+ }
+
+ .tb-creator-items {
+ padding-left: 16px;
+ padding-right: 16px;
+
+ ::ng-deep {
+ .tb-search-divider {
+ margin-left: -16px;
+ margin-right: -16px;
+ }
+
+ .tb-results-container {
+ padding-right: 16px;
+ margin-right: -16px;
+ }
+
+ .tb-search-card-grid {
+ grid-template-columns: repeat(1, 1fr);
+ }
+ }
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.ts b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.ts
new file mode 100644
index 0000000000..d4a992f50c
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.ts
@@ -0,0 +1,107 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { CreatorView } from '@shared/models/iot-hub/iot-hub-creator.models';
+import { IotHubApiService } from '@core/http/iot-hub-api.service';
+
+@Component({
+ selector: 'tb-iot-hub-creator-profile',
+ standalone: false,
+ templateUrl: './iot-hub-creator-profile.component.html',
+ styleUrls: ['./iot-hub-creator-profile.component.scss']
+})
+export class TbIotHubCreatorProfileComponent implements OnInit, OnDestroy {
+
+ creator: CreatorView;
+ creatorId: string;
+ isLoading = false;
+ hasError = false;
+
+ private retryTimer: any = null;
+ private destroy$ = new Subject
+
+
+ }
+ @if (creator && !hasError) {
+
+ {{ 'iot-hub.network-server-unavailable' | translate }}
+{{ 'iot-hub.network-server-unavailable-text' | translate }}
+ + @if (isLoading) { +
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @if (getAvatarUrl(); as avatarUrl) {
+ ![]()
+ } @else {
+ person
+ }
+
+
+ verified
+ }
+
+ {{ creator.displayName }}
+ @if (creator.verified) { +
+ @if (creator.description) {
+
+ {{ creator.description }}
+ } +
+ @if (creator.website) {
+
+ language
+ {{ getWebsiteLabel() }}
+
+ }
+ @if (creator.contactEmail) {
+
+ mdi:email-outline
+ {{ creator.contactEmail }}
+
+ }
+ @if (creator.githubUrl) {
+
+ mdi:github
+ GitHub
+
+ }
+ @if (creator.linkedinUrl) {
+
+ mdi:linkedin
+ LinkedIn
+
+ }
+ @if (creator.twitterUrl) {
+
+ mdi:twitter
+ X
+
+ }
+ @if (creator.youtubeUrl) {
+
+ mdi:youtube
+ YouTube
+
+ }
+
+ + {{ 'iot-hub.published-items' | translate }} ({{ creator.publishedCount }}) +
+
+
+
+
+
+
+ @if (installedItemsCount > 0) {
+
+ }
+
+
+
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.scss b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.scss
new file mode 100644
index 0000000000..f0768bf330
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.scss
@@ -0,0 +1,783 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+
+@import "../../../../../scss/constants";
+
+// Outer page — 16px padding around the white container
+:host {
+ display: block;
+ padding: 16px;
+}
+
+// Page container — white card with 8px radius, matches Design "page-container"
+.tb-iot-hub-home {
+ position: relative;
+ background: white;
+ border-radius: 8px;
+ overflow: hidden;
+
+ // Dot grid pattern — covers top 800px, fades out via gradient mask.
+ // Layered ABOVE the colored blobs so the dots overlay the glow.
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 800px;
+ background-image: radial-gradient(circle, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
+ background-size: 20px 20px;
+ mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
+ -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
+ pointer-events: none;
+ z-index: 1;
+ }
+
+ > *:not(.tb-iot-hub-installed-btn):not(.tb-iot-hub-blob) {
+ position: relative;
+ z-index: 2;
+ }
+}
+
+// Installed Items button — Design: top-right, white bg, primary border, card shadow
+.tb-iot-hub-installed-btn {
+ position: absolute;
+ top: 24px;
+ right: 24px;
+ z-index: 3;
+ background: white;
+ box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+
+ &.mat-primary {
+ --mat-button-outlined-outline-color: #{$tb-primary-color};
+ }
+}
+
+// Hero section
+.tb-iot-hub-hero {
+ text-align: center;
+ padding: 140px 40px 80px;
+ position: relative;
+ overflow: hidden;
+}
+
+// Soft colored glow blobs — direct CSS port of the design's two
+// 568×568 ellipses (Ellipse 399 right, Ellipse 400 left) with layer
+// opacity 0.16. Children of the page container so the halo spreads
+// across the whole page background, not just the hero. Fill comes
+// from the active hero type via `currentColor` (driven by
+// `[style.color]`).
+//
+// The design's "Layer Blur 240" is a Figma renderer parameter — when
+// translated to CSS `filter: blur(<σ>)` the visual match is around
+// σ=120 (Figma's radius is roughly twice the Gaussian σ used by CSS).
+// At σ=240 the kernel reaches well outside the 568px ellipse and peak
+// intensity collapses to ~58 % before opacity is applied, which
+// produced an almost invisible wash. σ=120 keeps the centre near
+// full strength while still spreading the halo across the page.
+.tb-iot-hub-blob {
+ position: absolute;
+ width: 568px;
+ height: 568px;
+ border-radius: 50%;
+ background: currentColor;
+ opacity: 0.16;
+ filter: blur(120px);
+ pointer-events: none;
+ z-index: 0;
+ transition: color 0.6s ease;
+ will-change: filter;
+}
+
+// Ellipse 400 — top-left corner at (-221, 56) inside the page-container.
+.tb-iot-hub-blob-left {
+ top: 56px;
+ left: -221px;
+}
+
+// Ellipse 399 — top-left corner at (1266, 259) inside a 1638-wide
+// page-container. Anchored to the right edge so it stays in place on
+// any viewport width: 1638 - (1266 + 568) = -196.
+.tb-iot-hub-blob-right {
+ top: 259px;
+ right: -196px;
+}
+
+// Floating icons cluster per type — one composite SVG with all icons baked in.
+// Active variant fades in expanding outward from the hero center; inactive
+// variants fade out collapsing back toward the center. This is achieved by
+// uniformly scaling the wrapper around its centre — peripheral icons travel
+// further than central ones, giving the "burst from / collapse to centre"
+// motion shown in the design prototype.
+.tb-iot-hub-hero-icons {
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ opacity: 0;
+ transform: scale(0.8);
+ transform-origin: 50% 50%;
+ transition: opacity 0.4s ease-out, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+
+ &.active {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+// Cluster SVG — sits above the title, centered, scales with viewport.
+// Aspect ratio is preserved by the SVG's intrinsic dimensions.
+.tb-iot-hub-hero-cluster {
+ position: absolute;
+ top: 40px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: min(890px, calc(100% - 80px));
+ height: auto;
+ display: block;
+ pointer-events: none;
+}
+
+.tb-iot-hub-hero-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 40px;
+ position: relative;
+ z-index: 1;
+}
+
+.tb-iot-hub-hero-title {
+ font-size: 56px;
+ font-weight: 500;
+ line-height: 1.2;
+ letter-spacing: 0.14px;
+ color: rgba(0, 0, 0, 0.87);
+ margin: 0;
+}
+
+.tb-iot-hub-hero-subtitle {
+ font-size: 20px;
+ line-height: 24px;
+ letter-spacing: 0.1px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 6px;
+}
+
+.tb-iot-hub-hero-subtitle-break {
+ flex-basis: 100%;
+ height: 0;
+}
+
+.tb-iot-hub-hero-prefix {
+ font-weight: 400;
+ color: rgba(0, 0, 0, 0.76);
+}
+
+.tb-iot-hub-hero-keyword {
+ font-weight: 600;
+ color: rgba(0, 0, 0, 0.54);
+ opacity: 0.48;
+ cursor: pointer;
+ transition: color 0.3s ease, opacity 0.3s ease;
+
+ &.active {
+ color: var(--keyword-color);
+ opacity: 1;
+ }
+
+ &:hover {
+ opacity: 0.8;
+ }
+}
+
+.tb-iot-hub-hero-search {
+ width: 600px;
+ max-width: 100%;
+
+ ::ng-deep .mat-mdc-text-field-wrapper {
+ background: white;
+ border-radius: 8px;
+ box-shadow:
+ 0 7px 16px 0 rgba(0, 0, 0, 0.04),
+ 0 29px 29px 0 rgba(0, 0, 0, 0.03),
+ 0 64px 38px 0 rgba(0, 0, 0, 0.02),
+ 0 114px 46px 0 rgba(0, 0, 0, 0.01),
+ 0 178px 50px 0 rgba(0, 0, 0, 0);
+ }
+}
+
+// Search popup panel (mat-autocomplete overlay)
+::ng-deep .tb-search-popup-panel.mat-mdc-autocomplete-panel {
+ border: 1px solid rgba(0, 0, 0, 0.12);
+ border-radius: 8px;
+ padding: 16px 0 0;
+ max-height: 424px;
+ box-shadow:
+ 0 7px 16px 0 rgba(0, 0, 0, 0.04),
+ 0 29px 29px 0 rgba(0, 0, 0, 0.03),
+ 0 64px 38px 0 rgba(0, 0, 0, 0.02),
+ 0 114px 46px 0 rgba(0, 0, 0, 0.01),
+ 0 178px 50px 0 rgba(0, 0, 0, 0);
+
+ // Section group — 12px gap between groups
+ .mat-mdc-optgroup + .mat-mdc-optgroup .mat-mdc-optgroup-label {
+ margin-top: 12px;
+ }
+
+ // Section title — Design: 14px Medium, 0.25 tracking, black-tertiary, 4px V / 16px H
+ .mat-mdc-optgroup .mat-mdc-optgroup-label {
+ padding: 4px 16px;
+ min-height: 28px;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ letter-spacing: 0.25px;
+ color: rgba(0, 0, 0, 0.54);
+ white-space: nowrap;
+
+ .mdc-list-item__primary-text {
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ letter-spacing: 0.25px;
+ color: rgba(0, 0, 0, 0.54);
+ }
+ }
+
+ // Item row — Design: 8px V / 16px H, 16px gap, centered
+ .mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple) {
+ padding: 8px 16px;
+ min-height: auto;
+ height: auto;
+
+ &:hover:not(.mdc-list-item--disabled),
+ &.mat-mdc-option-active:not(.mdc-list-item--disabled) {
+ background: rgba(0, 0, 0, 0.04);
+ }
+
+ .mat-icon, tb-icon {
+ margin-right: 0;
+ }
+
+ .mdc-list-item__primary-text {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ width: 100%;
+ }
+ }
+
+ // Thumbnail — Design: 99px x 56px, 4px radius, 1px border, 4% bg
+ .tb-search-popup-thumbnail {
+ width: 99px;
+ height: 56px;
+ border-radius: 4px;
+ border: 1px solid rgba(0, 0, 0, 0.12);
+ background: rgba(0, 0, 0, 0.04);
+ overflow: hidden;
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
+ }
+
+ .tb-search-popup-thumb-placeholder {
+ font-size: 24px;
+ width: 24px;
+ height: 24px;
+ color: rgba(0, 0, 0, 0.38);
+ }
+
+ // Icon square — Design: 56x56, 4.667px radius, colored bg
+ .tb-search-popup-icon-square {
+ width: 56px;
+ height: 56px;
+ border-radius: 4.667px;
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .tb-search-popup-icon-inner {
+ font-size: 28px;
+ width: 28px;
+ height: 28px;
+ color: white !important;
+ --tb-icon-color: white;
+ }
+
+ // Text block — Design: flex-col, 4px gap, flex 1
+ .tb-search-popup-text {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ flex: 1;
+ min-width: 0;
+ }
+
+ // Name — Design: 14px Medium, 0.25 tracking, black-primary, ellipsis
+ .tb-search-popup-name {
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ letter-spacing: 0.25px;
+ color: rgba(0, 0, 0, 0.87);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ // Author — Design: 12px Regular, 0.25 tracking, black-tertiary, 16px person icon
+ .tb-search-popup-author {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 16px;
+ letter-spacing: 0.25px;
+ color: rgba(0, 0, 0, 0.54);
+ white-space: nowrap;
+
+ mat-icon {
+ font-size: 16px;
+ width: 16px;
+ height: 16px;
+ margin-right: 0;
+ color: rgba(0, 0, 0, 0.54);
+ }
+ }
+
+ // Loading
+ .tb-search-popup-loading {
+ pointer-events: none;
+ opacity: 1 !important;
+ display: flex;
+ justify-content: center;
+ padding: 24px 16px;
+ min-height: auto;
+ }
+
+ // No results
+ .tb-search-popup-no-results {
+ pointer-events: none;
+ opacity: 1 !important;
+ }
+
+ .tb-search-popup-no-results-content {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 16px 0;
+ color: rgba(0, 0, 0, 0.87);
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+
+ mat-icon {
+ font-size: 24px;
+ width: 24px;
+ height: 24px;
+ color: rgba(0, 0, 0, 0.76);
+ }
+ }
+
+ // Footer — Design: 40px h, 8px V / 16px H, 1px top border, tb-primary text
+ .tb-search-popup-footer {
+ position: sticky;
+ bottom: 0;
+ border-top: 1px solid rgba(0, 0, 0, 0.12);
+ height: 40px;
+ min-height: 40px;
+ padding: 8px 16px;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ letter-spacing: 0.25px;
+ color: $tb-primary-color;
+ cursor: pointer;
+ background: white;
+ white-space: nowrap;
+
+ &:hover {
+ background: #f5f5f5;
+ }
+ }
+}
+
+// Main content — wraps categories + item sections
+// Category cards — Design: centered 1200px container, 3-col rows
+.tb-iot-hub-categories {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 20px;
+ max-width: 1200px;
+ margin: 0 auto;
+ width: 100%;
+}
+
+// Card — design: flex-col, gap=24, pt=24, rounded-8, h=220, overflow clipped
+// to crop the scaled hover image. The hover state mirrors the design's
+// SMART_ANIMATE on hover (200ms ease-out): the image scales up slightly
+// and the title chevron fades+slides in.
+.tb-iot-hub-category-card {
+ border-radius: 8px;
+ cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+ padding-top: 24px;
+ height: 220px;
+ border: 1px solid rgba(0, 0, 0, 0.12);
+ overflow: hidden;
+
+ &:hover {
+ .tb-iot-hub-category-img img {
+ // 408 / 387 ≈ 1.054 — design grows the img frame from 387×148 → 408×156
+ transform: scale(1.054);
+ }
+ .tb-iot-hub-category-chevron {
+ opacity: 1;
+ width: 24px;
+ margin-left: 4px;
+ transform: translateX(0);
+ }
+ }
+}
+
+// Title — design: 18px Medium, centered horizontally with chevron, 4px gap
+.tb-iot-hub-category-title {
+ font-size: 18px;
+ font-weight: 500;
+ line-height: 24px;
+ letter-spacing: 0.15px;
+ color: rgba(0, 0, 0, 0.87);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+}
+
+.tb-iot-hub-category-title-text {
+ white-space: nowrap;
+}
+
+// Chevron — hidden in default state, slides in on card hover (200ms ease-out)
+.tb-iot-hub-category-chevron {
+ width: 0;
+ height: 24px;
+ margin-left: 0;
+ opacity: 0;
+ overflow: hidden;
+ transform: translateX(-4px);
+ font-size: 24px;
+ color: rgba(0, 0, 0, 0.87);
+ transition:
+ opacity 0.2s ease-out,
+ transform 0.2s ease-out,
+ width 0.2s ease-out,
+ margin-left 0.2s ease-out;
+}
+
+// Card image wrapper — fixed 148px tall; overflow visible lets the 5.4%
+// hover scale bleed past the wrapper. The card itself has overflow:
+// hidden, so the bleed is still clipped at the card edges.
+.tb-iot-hub-category-img {
+ width: 100%;
+ height: 148px;
+ flex-shrink: 0;
+ overflow: visible;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center top;
+ transition: transform 0.2s ease-out;
+ }
+}
+
+// Per-card flat background colors sampled from the design.
+.category-devices { background: #ccd5ff; }
+.category-solutions { background: #b7d8ff; }
+.category-widgets { background: #a3ffc3; }
+.category-calc-fields { background: #bcedff; }
+.category-alarm-rules { background: #ffe6cc; }
+.category-rule-chains { background: #ebd1ff; }
+
+// "Most popular in IoT Hub" title — design: 28/36 Medium, sits between
+// the post-cards divider and the first popular section.
+.tb-iot-hub-most-popular-title {
+ font-size: 28px;
+ font-weight: 500;
+ line-height: 36px;
+ letter-spacing: 0.15px;
+ color: rgba(0, 0, 0, 0.87);
+ margin: 0;
+}
+
+.tb-iot-hub-empty-state {
+ position: relative;
+ .tb-no-data-bg,
+ .tb-no-service-bg {
+ flex: auto;
+ height: 100px;
+ }
+
+ h3 {
+ font-size: 18px;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.87);
+ margin: 16px 0 8px;
+ }
+
+ p {
+ font-size: 14px;
+ color: rgba(0, 0, 0, 0.54);
+ margin: 0 0 24px;
+ }
+}
+
+// Sections — inside main-content, no individual padding needed
+.tb-iot-hub-section {
+}
+
+// Section header — mat-button, Design: height=40, font-size=20, font-weight=500
+.tb-iot-hub-section-header {
+ font-size: 20px;
+ font-weight: 500;
+ line-height: 40px;
+ color: rgba(0, 0, 0, 0.87);
+
+ mat-icon {
+ font-size: 20px;
+ width: 20px;
+ height: 20px;
+ }
+
+}
+
+// Big card row — matches Design "cards-row" (5 cards, gap=20, mt=12 from header)
+.tb-iot-hub-big-cards-row {
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ gap: 20px;
+ margin-top: 12px;
+}
+
+// Compact card grid — matches Design "cards" (3 columns, row gap=20, col gap=20)
+.tb-iot-hub-compact-cards-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 20px;
+ margin-top: 12px;
+}
+
+// Divider — matches Design "divider" (1px, rgba(0,0,0,0.12))
+.tb-iot-hub-divider {
+ height: 1px;
+ background: rgba(0, 0, 0, 0.12);
+}
+
+// Bleed variant — used inside main-content (which has 40px horizontal
+// padding) to span the full page-container width like in the design.
+.tb-iot-hub-divider-bleed {
+ margin: 0 -40px;
+}
+
+// Become a Creator — matches Design (pt=64, text centered, button at y=156)
+.tb-iot-hub-become-creator {
+ text-align: center;
+ padding: 64px 40px;
+
+ h2 {
+ font-size: 24px;
+ font-weight: 500;
+ line-height: 32px;
+ color: rgba(0, 0, 0, 0.87);
+ margin: 0 0 8px;
+ }
+
+ p {
+ font-size: 14px;
+ line-height: 20px;
+ color: rgba(0, 0, 0, 0.54);
+ margin: 0 0 32px;
+ }
+}
+
+// Page load animation — Design: Default→appear-first, Smart Animate 1.02s, Gentle easing
+// Hero elements fade in + slide DOWN 20px; categories fade in + slide UP 20px
+@keyframes iot-hub-fade-slide-down {
+ from {
+ opacity: 0;
+ transform: translateY(-20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes iot-hub-fade-slide-up {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.tb-iot-hub-hero-title,
+.tb-iot-hub-hero-subtitle,
+.tb-iot-hub-hero-search {
+ animation: iot-hub-fade-slide-down 1s cubic-bezier(0.19, 1, 0.22, 1) 0.2s both;
+}
+
+.tb-iot-hub-categories {
+ animation: iot-hub-fade-slide-up 1s cubic-bezier(0.19, 1, 0.22, 1) 0.2s both;
+}
+
+// Responsive — breakpoints from design: XXXL=2448, XXL=1920, XL=1600, LG=1280, MD=960, SM=600, XS=375
+
+// ≥2448px: 6-col big cards, 4-col compact
+@media #{$mat-gt-xxl} {
+ .tb-iot-hub-big-cards-row {
+ grid-template-columns: repeat(6, 1fr);
+ }
+
+ .tb-iot-hub-compact-cards-grid {
+ grid-template-columns: repeat(4, 1fr);
+ }
+}
+
+// ≤1919px: 4-col big cards, 3-col compact
+@media #{$mat-lt-xl} {
+ .tb-iot-hub-big-cards-row {
+ grid-template-columns: repeat(4, 1fr);
+ }
+}
+
+// ≤1599px: 3-col big cards, 2-col compact
+@media #{$mat-lt-xmd} {
+ .tb-iot-hub-big-cards-row {
+ grid-template-columns: repeat(3, 1fr);
+ }
+
+ .tb-iot-hub-compact-cards-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+// ≤1279px: 2-col big cards, 1-col compact, 2-col categories, smaller icons
+@media #{$mat-lt-lg} {
+ .tb-iot-hub-big-cards-row {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .tb-iot-hub-compact-cards-grid {
+ grid-template-columns: repeat(1, 1fr);
+ }
+
+ .tb-iot-hub-categories {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .tb-iot-hub-hero {
+ padding: 140px 24px 60px;
+ }
+
+ .tb-iot-hub-hero-title {
+ font-size: 40px;
+ }
+
+ .tb-iot-hub-hero-subtitle {
+ font-size: 18px;
+ line-height: 22px;
+ }
+
+ .tb-iot-hub-main-content {
+ padding: 0 24px 64px;
+ }
+
+ .tb-iot-hub-become-creator {
+ padding: 64px 24px;
+ }
+
+ // Cluster shrinks with viewport — keep some gutter on the sides
+ .tb-iot-hub-hero-cluster {
+ top: 30px;
+ width: min(900px, calc(100% - 48px));
+ }
+}
+
+// ≤959px: cluster sits closer to the title and uses the full content width
+@media #{$mat-lt-md} {
+ .tb-iot-hub-hero-cluster {
+ top: 64px;
+ width: calc(100% - 32px);
+ }
+}
+
+// ≤599px: only top pair visible (51px), bottom pair hidden
+@media #{$mat-lt-sm} {
+ :host {
+ padding: 8px;
+ }
+
+ .tb-iot-hub-hero {
+ padding: 140px 16px 40px;
+ }
+
+ .tb-iot-hub-categories {
+ grid-template-columns: 1fr;
+ }
+
+ .tb-iot-hub-big-cards-row {
+ grid-template-columns: 1fr;
+ }
+
+ .tb-iot-hub-main-content {
+ padding: 0 16px 48px;
+ }
+
+ .tb-iot-hub-become-creator {
+ padding: 48px 16px;
+ }
+
+ .tb-iot-hub-installed-btn {
+ top: 12px;
+ right: auto;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+
+}
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.ts b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.ts
new file mode 100644
index 0000000000..87f8eee0b2
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.ts
@@ -0,0 +1,556 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
+import { Router } from '@angular/router';
+import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { forkJoin, Subject, Subscription } from 'rxjs';
+import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
+import { MediaBreakpoints } from '@shared/models/constants';
+import { PageLink } from '@shared/models/page/page-link';
+import { Direction, SortOrder } from '@shared/models/page/sort-order';
+import { MpItemVersionQuery, MpItemVersionView } from '@shared/models/iot-hub/iot-hub-version.models';
+import { getItemTypeIcon, ItemType, itemTypeTranslations } from '@shared/models/iot-hub/iot-hub-item.models';
+import { IotHubInstalledItem } from '@shared/models/iot-hub/iot-hub-installed-item.models';
+import { IotHubApiService } from '@core/http/iot-hub-api.service';
+import { TranslateService } from '@ngx-translate/core';
+import { IotHubActionsService } from '@home/components/iot-hub/iot-hub-actions.service';
+import { resolveIotHubItemImageUrl } from '@home/components/iot-hub/iot-hub-utils';
+
+interface CategoryCard {
+ type: ItemType;
+ titleKey: string;
+ icon: string;
+ cssClass: string;
+ image: string;
+}
+
+interface HeroTypeConfig {
+ type: ItemType;
+ labelKey: string;
+ color: string;
+ icon: string;
+}
+
+interface SearchResultGroup {
+ type: ItemType;
+ items: MpItemVersionView[];
+}
+
+const SEARCH_GROUP_ORDER: ItemType[] = [
+ ItemType.DEVICE, ItemType.SOLUTION_TEMPLATE, ItemType.WIDGET,
+ ItemType.CALCULATED_FIELD, ItemType.ALARM_RULE, ItemType.RULE_CHAIN
+];
+
+@Component({
+ selector: 'tb-iot-hub-home',
+ standalone: false,
+ templateUrl: './iot-hub-home.component.html',
+ styleUrls: ['./iot-hub-home.component.scss']
+})
+export class TbIotHubHomeComponent implements OnInit, OnDestroy {
+
+ readonly ItemType = ItemType;
+
+ searchText = '';
+ searchResults: MpItemVersionView[] = [];
+ searchResultGroups: SearchResultGroup[] = [];
+ searchLoaded = false;
+ searchLoading = false;
+ @ViewChild(MatAutocompleteTrigger) searchAutoTrigger: MatAutocompleteTrigger;
+ @ViewChild('searchInput', {read: ElementRef}) searchInputRef: ElementRef;
+ private searchSubject = new Subject
+
+ @for (heroType of heroTypes; track heroType.type) {
+
+
+
+
+ ![]()
+
+ }
+
+
+
+
+ @if (searchText) {
+
+ }
+
+
+
+ @if (searchLoading) {
+
+
+ } @else if (searchResults.length === 0 && searchLoaded) {
+
+
+ } @else {
+ @for (group of searchResultGroups; track group.type) {
+
+ @for (item of group.items; track item.id) {
+
+ @if (isCompactType(item.type)) {
+
+ } @else {
+
+ }
+
+ }
+ }
+
+
+
+ {{ 'iot-hub.home-title' | translate }}
+
+ {{ 'iot-hub.home-subtitle-prefix' | translate }}
+ @for (ht of heroTypes; track ht.type; let i = $index; let last = $last) {
+ @if (last) {& }{{ ht.labelKey | translate }}@if (!last) {,}
+ @if (i === 2) {
+
+ }
+ }
+
+
+ search_off
+ @if (searchText?.trim()) {
+ {{ 'iot-hub.no-search-results' | translate:{ search: searchText.trim() } }}
+ } @else {
+ {{ 'iot-hub.no-items-available' | translate }}
+ }
+
+
+ @if (getItemImage(item); as imgUrl) {
+ ![]()
+ } @else {
+ {{ getItemTypeIcon(item.type) }}
+ }
+
+ }
+
+ {{ item.name }}
+
+
+
+
+
+
+
+ @if (!isLoading && !hasError) {
+
+
+ @for (card of categoryCards; track card.type) {
+
+
+ @if (hasError) {
+
+
+ {{ card.titleKey | translate }}
+ chevron_right
+
+
+ }
+
+ ![]()
+
+
+
+
+ }
+
+ @if (!isLoading && !hasError) {
+ @if (hasAnyPopularItems()) {
+
+ {{ 'iot-hub.network-server-unavailable' | translate }}
+{{ 'iot-hub.network-server-unavailable-text' | translate }}
+ + @if (isLoading) { +
+
+ }
+
+
+ {{ 'iot-hub.most-popular-in-iot-hub' | translate }}
+ } + + + @if (popularDevices.length) { +
+
+
+ }
+
+
+ @if (popularSolutionTemplates.length) {
+
+ @for (item of popularDevices; track item.id) {
+
+
+ }
+
+
+
+
+ }
+
+
+ @if (popularWidgets.length) {
+
+ @for (item of popularSolutionTemplates; track item.id) {
+
+
+ }
+
+
+
+
+ }
+
+
+ @if (popularCalcFields.length) {
+
+ @for (item of popularWidgets; track item.id) {
+
+
+ }
+
+
+
+
+ }
+
+
+ @if (popularAlarmRules.length) {
+
+ @for (item of popularCalcFields; track item.id) {
+
+
+ }
+
+
+
+
+ }
+
+
+ @if (popularRuleChains.length) {
+
+ @for (item of popularAlarmRules; track item.id) {
+
+
+ }
+
+
+
+
+ }
+ }
+
+ @if (isLoading && !hasError) {
+
+ @for (item of popularRuleChains; track item.id) {
+
+
+ }
+
+
+
+ }
+
+
+ }
+{{ 'iot-hub.become-a-creator' | translate }}
+{{ 'iot-hub.become-creator-text' | translate }}
+ +
+
+
+
+
+
+
+
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.scss b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.scss
new file mode 100644
index 0000000000..0ac5db7e61
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.scss
@@ -0,0 +1,151 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+
+@import "../../../../../scss/constants";
+@import "../../components/iot-hub/iot-hub-common";
+
+:host {
+ display: block;
+ padding: 16px;
+ height: 100%;
+}
+
+.tb-installed-items-page {
+ background: white;
+ border-radius: 8px;
+ padding: 40px 40px 40px;
+}
+
+// Back button
+.tb-installed-back-btn {
+ margin-bottom: 40px;
+}
+
+// Header: title + check for updates
+.tb-installed-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 32px;
+}
+
+.tb-installed-title {
+ font-size: 36px;
+ font-weight: 500;
+ line-height: 48px;
+ color: rgba(0, 0, 0, 0.87);
+ margin: 0;
+}
+
+// Filter row — filter button + active chips on top
+.tb-installed-filter-row {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 16px;
+
+ .mat-mdc-chip {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+}
+
+// Search row — full-width search input below the filter row
+.tb-installed-search-row {
+ display: flex;
+ align-items: center;
+ margin-bottom: 16px;
+}
+
+.tb-installed-filter-btn {
+ &.mat-primary {
+ --mat-button-outlined-outline-color: #{$tb-primary-color};
+ }
+}
+
+.tb-installed-filter-chips {
+ .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) {
+ --mat-chip-elevated-container-color: rgba(0, 0, 0, 0.04);
+ }
+}
+
+.tb-installed-clear-btn {
+ font-size: 14px;
+ font-weight: 400;
+ color: rgba(0, 0, 0, 0.54);
+ cursor: pointer;
+ background: none;
+ border: none;
+ padding: 6px 8px;
+ font-family: inherit;
+
+ &:hover {
+ color: rgba(0, 0, 0, 0.87);
+ }
+}
+
+// Filter menu panel
+::ng-deep .tb-installed-filter-menu {
+ .mat-mdc-menu-content {
+ padding: 0;
+ }
+
+ .tb-installed-filter-item {
+ height: 40px;
+ padding: 0 16px;
+
+ mat-checkbox {
+ width: 100%;
+ }
+ }
+
+ mat-divider {
+ margin: 0;
+ }
+}
+
+.tb-installed-search {
+ @include tb-iot-hub-page-search-container;
+}
+
+.tb-installed-search-input {
+ @include tb-iot-hub-page-search-input;
+}
+
+.tb-installed-search-action {
+ @include tb-iot-hub-page-search-action;
+}
+
+// Responsive
+@media #{$mat-lt-md} {
+ .tb-installed-items-page {
+ padding: 40px 24px;
+ }
+}
+
+@media #{$mat-xs} {
+ .tb-installed-items-page {
+ padding-left: 16px;
+ padding-right: 16px;
+ }
+
+ .tb-installed-header {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 16px;
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.ts b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.ts
new file mode 100644
index 0000000000..9f118a4c1e
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.ts
@@ -0,0 +1,124 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { Subject } from 'rxjs';
+import { debounceTime, takeUntil } from 'rxjs/operators';
+import { ItemType, itemTypeTranslations } from '@shared/models/iot-hub/iot-hub-item.models';
+import { TbIotHubInstalledItemsTableComponent } from '@home/components/iot-hub/iot-hub-installed-items-table.component';
+
+@Component({
+ selector: 'tb-iot-hub-installed-items',
+ standalone: false,
+ templateUrl: './iot-hub-installed-items.component.html',
+ styleUrls: ['./iot-hub-installed-items.component.scss']
+})
+export class TbIotHubInstalledItemsComponent implements OnInit, OnDestroy {
+
+ textSearch = '';
+ appliedTextSearch = '';
+ typeFilters: string[] = [];
+
+ activeTypeFilters = new Set
+
+
+
+ {{ 'iot-hub.installed-items' | translate }}
+ @if (!updatesChecked) { + + } +
+
+
+ @for (type of allItemTypes; track type; let last = $last) {
+
+ @if (hasActiveFilters()) {
+
+ @for (type of activeTypeFilters; track type) {
+
+ {{ getItemTypeLabel(type) }}
+ close
+
+ }
+
+
+ }
+
+
+
+
+
+ {{ getItemTypeLabel(type) }}
+
+
+ @if (!last) {
+
+
+
+
+
+ @if (textSearch) {
+
+ } @else {
+
+ }
+
+
+
+
+
+
+
+
+
+
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-items-page.component.scss b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-items-page.component.scss
new file mode 100644
index 0000000000..7991a3e665
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-items-page.component.scss
@@ -0,0 +1,178 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+
+@import "../../../../../scss/constants";
+
+:host {
+ display: block;
+ padding: 16px;
+}
+
+.tb-iot-hub-items-page {
+ background: white;
+ border-radius: 8px;
+ padding: 40px 40px 48px;
+}
+
+.tb-iot-hub-back-btn {
+ margin-bottom: 40px;
+}
+
+.tb-iot-hub-items-title {
+ font-size: 36px;
+ font-weight: 500;
+ line-height: 48px;
+ color: rgba(0, 0, 0, 0.87);
+ margin: 0 0 12px;
+}
+
+// Description — Design: 16px Regular, line-height 24, tracking 0.15, rgba(0,0,0,0.76)
+.tb-iot-hub-items-desc {
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0.15px;
+ color: rgba(0, 0, 0, 0.76);
+ margin: 0 0 24px;
+ max-width: 800px;
+}
+
+.tb-iot-hub-items-actions {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+}
+
+.tb-iot-hub-items-installed-btn {
+ &.mat-primary {
+ --mat-button-outlined-outline-color: #{$tb-primary-color};
+ }
+}
+
+.tb-iot-hub-items-hero-image {
+ flex-shrink: 0;
+ display: flex;
+ align-items: flex-start;
+
+ img {
+ max-height: 276px;
+ object-fit: contain;
+ }
+}
+
+// Browse component — stretch to fill, ignore parent padding
+tb-iot-hub-browse {
+ margin-left: -40px;
+ margin-right: -40px;
+}
+
+// Footer divider
+.tb-iot-hub-items-divider {
+ height: 1px;
+ background: rgba(0, 0, 0, 0.12);
+ margin-top: 48px;
+ margin-left: -40px;
+ margin-right: -40px;
+}
+
+// Become a Creator footer
+.tb-iot-hub-items-footer {
+ text-align: center;
+ padding: 40px 0 0;
+
+ h2 {
+ font-size: 24px;
+ font-weight: 500;
+ line-height: 32px;
+ color: rgba(0, 0, 0, 0.87);
+ margin: 0 0 8px;
+ }
+
+ p {
+ font-size: 14px;
+ line-height: 20px;
+ color: rgba(0, 0, 0, 0.54);
+ margin: 0 0 32px;
+ }
+}
+
+// Responsive
+@media #{$mat-lt-lg} {
+ .tb-iot-hub-items-page {
+ padding-left: 24px;
+ padding-right: 24px;
+ }
+
+ .tb-iot-hub-items-divider {
+ margin-left: -24px;
+ margin-right: -24px;
+ }
+
+ tb-iot-hub-browse {
+ margin-left: -24px;
+ margin-right: -24px;
+ }
+
+ .tb-iot-hub-items-title {
+ font-size: 28px;
+ line-height: 36px;
+ }
+
+ .tb-iot-hub-items-desc {
+ font-size: 14px;
+ line-height: 20px;
+ }
+}
+
+@media #{$mat-lt-xmd} {
+ .tb-iot-hub-items-hero {
+ gap: 24px;
+ }
+
+ .tb-iot-hub-items-hero-image {
+ min-width: 0;
+ flex: 1;
+
+ img {
+ min-width: 0;
+ margin-left: auto;
+ margin-top: auto;
+ }
+ }
+}
+
+@media #{$mat-lt-md} {
+ .tb-iot-hub-items-hero-image {
+ display: none;
+ }
+}
+
+@media #{$mat-xs} {
+ .tb-iot-hub-items-page {
+ padding-left: 16px;
+ padding-right: 16px;
+ }
+
+ .tb-iot-hub-items-divider {
+ margin-left: -16px;
+ margin-right: -16px;
+ }
+
+ tb-iot-hub-browse {
+ margin-left: -16px;
+ margin-right: -16px;
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-items-page.component.ts b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-items-page.component.ts
new file mode 100644
index 0000000000..90519f4e7f
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-items-page.component.ts
@@ -0,0 +1,173 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { map } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+import { ItemType } from '@shared/models/iot-hub/iot-hub-item.models';
+import { IotHubApiService } from '@core/http/iot-hub-api.service';
+import { IotHubActionsService } from '@home/components/iot-hub/iot-hub-actions.service';
+import { IotHubInstalledItem } from '@shared/models/iot-hub/iot-hub-installed-item.models';
+import { MpItemVersionView } from '@shared/models/iot-hub/iot-hub-version.models';
+import { PageLink } from '@shared/models/page/page-link';
+import { DeepLinkOpenItem } from './iot-hub-deep-link.utils';
+
+interface ItemTypePageConfig {
+ type: ItemType;
+ titleKey: string;
+ descriptionKey: string;
+ image: string;
+ routeSegment: string;
+}
+
+const PAGE_CONFIGS: Record
+
+
+
+
+
+
+
+ {{ config.titleKey | translate }}
+{{ config.descriptionKey | translate }}
+
+ @if (installedItemsCount > 0) {
+
+ }
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+
+
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-search-page.component.scss b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-search-page.component.scss
new file mode 100644
index 0000000000..d76c2c5ae7
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-search-page.component.scss
@@ -0,0 +1,143 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+
+@import "../../../../../scss/constants";
+
+:host {
+ display: block;
+ padding: 16px;
+ height: 100%;
+}
+
+
+// Back button
+.tb-search-back-btn {
+ align-self: flex-start;
+ margin-top: 40px;
+ margin-left: 123px;
+}
+
+// Title
+.tb-search-title {
+ font-size: 28px;
+ font-weight: 500;
+ line-height: 36px;
+ letter-spacing: 0.25px;
+ color: rgba(0, 0, 0, 0.87);
+ margin: 0;
+}
+
+.tb-search-title-query {
+ color: rgba(0, 0, 0, 0.54);
+}
+
+tb-iot-hub-search {
+ flex: 1;
+ min-height: 0;
+ padding-left: 123px;
+ padding-right: 123px;
+
+ ::ng-deep {
+ .tb-search-divider {
+ margin-left: -123px;
+ margin-right: -123px;
+ }
+
+ .tb-results-container {
+ padding-right: 123px;
+ padding-bottom: 40px;
+ margin-right: -123px;
+ }
+ }
+}
+
+// Responsive
+@media #{$mat-lt-xxl} {
+ .tb-search-back-btn {
+ margin-left: 40px;
+ }
+
+ tb-iot-hub-search {
+ padding-left: 40px;
+ padding-right: 40px;
+
+ ::ng-deep {
+ .tb-search-divider {
+ margin-left: -40px;
+ margin-right: -40px;
+ }
+
+ .tb-results-container {
+ padding-right: 40px;
+ margin-right: -40px;
+ }
+ }
+ }
+}
+
+@media #{$mat-lt-lg} {
+ .tb-search-back-btn {
+ margin-top: 24px;
+ margin-left: 24px;
+ }
+
+ tb-iot-hub-search {
+ padding-left: 24px;
+ padding-right: 24px;
+
+ ::ng-deep {
+ .tb-search-divider {
+ margin-left: -24px;
+ margin-right: -24px;
+ }
+
+ .tb-results-container {
+ padding-right: 24px;
+ padding-bottom: 24px;
+ margin-right: -24px;
+ }
+ }
+ }
+}
+
+@media #{$mat-lt-sm} {
+ .tb-search-page {
+ gap: 16px;
+ }
+
+ .tb-search-back-btn {
+ margin-top: 16px;
+ margin-left: 16px;
+ }
+
+ tb-iot-hub-search {
+ padding-left: 16px;
+ padding-right: 16px;
+
+ ::ng-deep {
+ .tb-search-divider {
+ margin-left: -16px;
+ margin-right: -16px;
+ }
+
+ .tb-results-container {
+ padding-right: 16px;
+ padding-bottom: 16px;
+ margin-right: -16px;
+ }
+ }
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-search-page.component.ts b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-search-page.component.ts
new file mode 100644
index 0000000000..22853207a7
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-search-page.component.ts
@@ -0,0 +1,45 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+ selector: 'tb-iot-hub-search-page',
+ standalone: false,
+ templateUrl: './iot-hub-search-page.component.html',
+ styleUrls: ['./iot-hub-search-page.component.scss']
+})
+export class TbIotHubSearchPageComponent implements OnInit {
+
+ searchText = '';
+
+ constructor(
+ private route: ActivatedRoute,
+ private router: Router
+ ) {}
+
+ ngOnInit(): void {
+ const search = this.route.snapshot.queryParamMap.get('search');
+ if (search) {
+ this.searchText = search;
+ }
+ }
+
+ navigateBack(): void {
+ void this.router.navigate(['/iot-hub']);
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub.module.ts b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub.module.ts
new file mode 100644
index 0000000000..23c4687ac0
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub.module.ts
@@ -0,0 +1,47 @@
+///
+/// Copyright © 2016-2026 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.
+///
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '@shared/shared.module';
+import { IotHubComponentsModule } from '@home/components/iot-hub/iot-hub-components.module';
+import { IotHubRoutingModule } from './iot-hub-routing.module';
+import { TbIotHubHomeComponent } from './iot-hub-home.component';
+import { TbIotHubItemsPageComponent } from './iot-hub-items-page.component';
+import { TbIotHubAlarmRulesUnavailablePageComponent } from './iot-hub-alarm-rules-unavailable-page.component';
+import { TbIotHubCreatorProfileComponent } from './iot-hub-creator-profile.component';
+import { TbIotHubInstalledItemsComponent } from './iot-hub-installed-items.component';
+import { TbIotHubSearchPageComponent } from './iot-hub-search-page.component';
+import { TbIotHubItemResolverComponent } from './iot-hub-item-resolver.component';
+
+@NgModule({
+ declarations: [
+ TbIotHubHomeComponent,
+ TbIotHubItemsPageComponent,
+ TbIotHubCreatorProfileComponent,
+ TbIotHubInstalledItemsComponent,
+ TbIotHubSearchPageComponent,
+ TbIotHubItemResolverComponent,
+ TbIotHubAlarmRulesUnavailablePageComponent
+ ],
+ imports: [
+ CommonModule,
+ SharedModule,
+ IotHubComponentsModule,
+ IotHubRoutingModule
+ ]
+})
+export class IotHubModule { }
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechains-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/rulechain/rulechains-table-config.resolver.ts
index b94b312893..e631eeaf15 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechains-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechains-table-config.resolver.ts
@@ -49,6 +49,8 @@ import { isUndefined } from '@core/utils';
import { PageLink } from '@shared/models/page/page-link';
import { Edge } from '@shared/models/edge.models';
import { mergeMap } from 'rxjs/operators';
+import { ItemType } from '@shared/models/iot-hub/iot-hub-item.models';
+import { IotHubActionsService } from '@home/components/iot-hub/iot-hub-actions.service';
import { PageData } from '@shared/models/page/page-data';
import { CustomTranslatePipe } from '@shared/pipe/custom-translate.pipe';
@@ -63,6 +65,7 @@ export class RuleChainsTableConfigResolver {
private importExport: ImportExportService,
private itembuffer: ItemBufferService,
private edgeService: EdgeService,
+ private iotHubActions: IotHubActionsService,
private translate: TranslateService,
private datePipe: DatePipe,
private router: Router,
@@ -168,6 +171,12 @@ export class RuleChainsTableConfigResolver {
icon: 'file_upload',
isEnabled: () => true,
onAction: ($event) => this.importRuleChain($event)
+ },
+ {
+ name: this.translate.instant('iot-hub.add-from-iot-hub'),
+ icon: 'hub',
+ isEnabled: () => true,
+ onAction: (_$event) => this.addRuleChainFromIotHub()
}
);
}
@@ -288,6 +297,21 @@ export class RuleChainsTableConfigResolver {
return actions;
}
+ addRuleChainFromIotHub() {
+ const ruleChainScope = this.config.componentsData.ruleChainScope;
+ const ruleChainType = ruleChainScope === 'edges' ? 'EDGE' : 'CORE';
+ this.iotHubActions.addItem(ItemType.RULE_CHAIN, { itemSubType: ruleChainType }).subscribe(result => {
+ if (result?.descriptor?.type === 'RULE_CHAIN' && result.descriptor.ruleChainId?.id) {
+ const ruleChainId = result.descriptor.ruleChainId.id;
+ if (ruleChainScope === 'edges') {
+ this.router.navigateByUrl(`edgeManagement/ruleChains/${ruleChainId}`);
+ } else {
+ this.router.navigateByUrl(`ruleChains/${ruleChainId}`);
+ }
+ }
+ });
+ }
+
importRuleChain($event: Event) {
if ($event) {
$event.stopPropagation();
diff --git a/ui-ngx/src/app/modules/home/pages/security/security.component.html b/ui-ngx/src/app/modules/home/pages/security/security.component.html
index f2bdd657a8..4d0551f3b9 100644
--- a/ui-ngx/src/app/modules/home/pages/security/security.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/security.component.html
@@ -134,7 +134,7 @@
+ @if (searchText?.trim()) { + {{ 'iot-hub.search-results-for' | translate }}'{{ searchText.trim() }}' + } @else { + {{ 'iot-hub.search-results' | translate }} + } +
+additionalParams argument. Use it to pass row data, button state, or any extra values the action handler should react to.',
+ type: 'object',
+ optional: true
+ }
+ ]
}
}
},
@@ -736,6 +758,17 @@ export const widgetContextCompletionsWithSettings = (settingsCompletions?: TbEdi
}
}
}
+ },
+ registerDestroyCallback: {
+ description: 'Registers a teardown callback that will be invoked exactly once when the widget is about to be destroyed (dashboard navigation, edit/view switch, layout change, etc.). Use it to release resources acquired during widget setup so they don\'t leak across widget reloads — e.g. unsubscribe RxJS subscriptions, detach DOM/window event listeners, clear setInterval / setTimeout timers, abort outstanding HTTP requests, destroy third-party plugin instances. Multiple callbacks may be registered; they are executed in registration order.',
+ meta: 'function',
+ args: [
+ {
+ description: 'Zero-argument function executed when the widget is destroyed. Should be idempotent — synchronously dispose of one specific resource (e.g. one subscription or one listener) and avoid throwing; throwing here may prevent later cleanup callbacks from running.',
+ name: 'destroyCallback',
+ type: '() => void',
+ }
+ ]
}
},
...serviceCompletions
diff --git a/ui-ngx/src/app/shared/models/ai-model.models.ts b/ui-ngx/src/app/shared/models/ai-model.models.ts
index 504e4d2659..575eba1d33 100644
--- a/ui-ngx/src/app/shared/models/ai-model.models.ts
+++ b/ui-ngx/src/app/shared/models/ai-model.models.ts
@@ -105,11 +105,11 @@ export const AiModelMap = new Map+ +*function (ctx): void* + +A JavaScript function used to expose data and handlers to the Angular template by assigning them to
this. Reference them in the template without the this prefix.
+
+**Parameters:**
+
+-
+
- ctx:
WidgetContext- A reference to WidgetContext that has all necessary API + and data used by widget instance.
+ Provides access to send RPC, switch dashboard states, create data subscriptions, read settings and access platform services. +
+
this.
+
+
+
+##### Notes
+
+-
+
- There is no
containerparameter in Angular mode. Access the root element viactx.$container[0]orevent.currentTarget.closest(...)from a handler.
+ - Define helper functions as arrow functions to preserve
this.
+ - Call
ctx.detectChanges()after changing template-bound values so the template re-renders.
+ - This widget does not bind widget datasources automatically. There is no
ctx.datapopulated from the widget configuration. To read live data create an explicit subscription viactx.subscriptionApi.createSubscription(...)and release it fromctx.registerDestroyCallback(...).
+
+ +
+
+
++ +
+
+
++ +
+
+
+###### Slide-over device detail with two-way RPC
+
++ +
+
+
++ +
+
+
++ +
+
+
+###### Composite dashboard with tab navigation
+
++ +
+
+
++ +
+
+
++ +
+
+
++
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/container_plain_fn.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/container_plain_fn.md new file mode 100644 index 0000000000..5874a6e657 --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/container_plain_fn.md @@ -0,0 +1,124 @@ +#### Container function + + +
+ +*function (ctx, container): void* + +A JavaScript function used to initialize libraries, build or update the DOM inside the widget content element, wire up event handlers and drive the widget through the widget context. + +**Parameters:** + +
-
+
- ctx:
WidgetContext- A reference to WidgetContext that has all necessary API + and data used by widget instance.
+ Provides access to send RPC, switch dashboard states, create data subscriptions, read settings and access platform services. +
+ - container:
HTMLElement- The widget's content element, a native DOM node (<div class="tb-absolute-fill">) wrapping the rendered template.
+ Query it withcontainer.querySelector(...). +
+
-
+
- This widget does not bind widget datasources automatically. There is no
ctx.datapopulated from the widget configuration. To read live data create an explicit subscription viactx.subscriptionApi.createSubscription(...).
+ - Release every subscription, timer and global event listener you create from
ctx.registerDestroyCallback(...)so the widget cleans up correctly.
+
+ +
+
+
++ +
+
+
++ +
+
+
++ +
+
+
+###### Visitor analytics with a custom range and working hours
+
++ +
+
+
++ +
+
+
++ +
+
+
++ +
+
+
++
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_drawer_css.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_drawer_css.md new file mode 100644 index 0000000000..8bd68b8197 --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_drawer_css.md @@ -0,0 +1,201 @@ +#### CSS of slide-over device detail + +```css +{:code-style="max-height: 400px;"} +.dd { + height: 100%; + font-family: 'Inter', 'Roboto', system-ui, sans-serif; + color: #0f172a; +} + +.dd__main { + padding: 20px; + box-sizing: border-box; +} + +.dd__title { + margin: 0 0 16px; + font-family: 'Roboto', sans-serif; + font-size: 20px; + font-weight: 500; +} + +.dd__card { + background: #fff; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.12); +} + +.dd__table { + width: 100%; +} + +.dd__table .mat-column-name { + flex: 1; +} + +.dd__table .mat-column-people { + flex: 0 0 120px; + justify-content: flex-end; +} + +.dd__table .mat-mdc-row { + cursor: pointer; +} + +.dd__table .mat-mdc-row:hover { + background: rgba(0, 0, 0, 0.04); +} + +.dd__table .mat-mdc-row.is-active { + background: rgba(47, 107, 255, 0.08); +} + +.dd__drawer { + width: 70%; + box-sizing: border-box; +} + +.dd__panel { + display: flex; + flex-direction: column; + gap: 16px; + padding: 24px; +} + +.dd__panel-bar { + display: flex; + align-items: flex-start; + justify-content: space-between; +} + +.dd__panel-eyebrow { + font-size: 11px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: .08em; + color: #94a3b8; +} + +.dd__panel-title { + margin: 2px 0 0; + font-size: 22px; + font-weight: 800; +} + +.dd__close { + border: 0; + background: #f1f5f9; + border-radius: 10px; + width: 36px; + height: 36px; + font-size: 16px; + cursor: pointer; + color: #475569; +} + +.dd__close:hover { + background: #e2e8f0; +} + +.dd__cards { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 12px; +} + +.card { + display: flex; + flex-direction: column; + gap: 4px; + padding: 14px 16px; + border-radius: 14px; + background: linear-gradient(180deg, #f8fafc, #eef2f7); + border: 1px solid #e6ebf2; +} + +.card__label { + font-size: 10px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: .08em; + color: #94a3b8; +} + +.card__value { + font-size: 18px; + font-weight: 800; +} + +.dd__actions { + display: flex; + gap: 10px; +} + +.dd__action { + display: inline-flex; + flex-direction: column; + gap: 6px; +} + +.dd__btn { + padding: 9px 16px; + border: 1px solid #d8dee9; + border-radius: 10px; + background: #fff; + color: #0f172a; + font-size: 13px; + font-weight: 600; + cursor: pointer; + transition: background 0.15s ease; +} + +.dd__btn:hover { + background: #f8fafc; +} + +.dd__btn:disabled { + opacity: 0.6; + cursor: default; +} + +.dd__btn--warn { + color: #b91c1c; + border-color: #fecaca; +} + +.dd__btn--warn:hover { + background: #fef2f2; +} + +.dd__section { + display: flex; + flex-direction: column; + gap: 8px; +} + +.dd__section-title { + margin: 0; + font-size: 13px; + font-weight: 700; + color: #334155; +} + +.dd__state { + height: 280px; + border: 1px solid #eef1f6; + border-radius: 14px; + overflow: hidden; +} + +.dd__state tb-dashboard-state { + display: block; + width: 100%; + height: 100%; +} +{:copy-code} +``` + +
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_drawer_html.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_drawer_html.md new file mode 100644 index 0000000000..eeabbf94ae --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_drawer_html.md @@ -0,0 +1,66 @@ +#### Angular template of slide-over device detail + +```html +{:code-style="max-height: 400px;"} +
Devices
+
+
+
+ Device
+ {{ d.name }}
+
+
+ People
+ {{ d.lastValue }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Device
+ {{ selected.name }}
+
+
+
+ People{{ selected.lastValue }}
+ Entity type{{ selected.entityType }}
+ Last update{{ selected.lastSeen }}
+
+
+
+
+
+
+
+
+
+ Alarms
+Charts
++
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_drawer_js.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_drawer_js.md new file mode 100644 index 0000000000..78c8ecae0b --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_drawer_js.md @@ -0,0 +1,100 @@ +#### JavaScript function of slide-over device detail + +```javascript +{:code-style="max-height: 400px;"} +this.ctx = ctx; +this.devices = []; +this.columns = ['name', 'people']; +this.selected = null; +this.selectedId = null; +this.drawerOpen = false; + +this.openDevice = (d) => { + this.selected = d; + this.selectedId = d.entityId; + this.drawerOpen = true; + ctx.stateController.updateState(null, { + entityId: { entityType: d.entityType, id: d.entityId }, + entityName: d.name, + }); + ctx.detectChanges(); +}; + +this.rebooting = false; +this.resetting = false; + +this.reboot = () => { + if (!this.selected || this.rebooting) return; + this.rebooting = true; + ctx.detectChanges(); + ctx.http.post('/api/rpc/twoway/' + this.selected.entityId, { method: 'reboot', params: {} }).subscribe({ + error: (e) => { + console.error(e); + this.rebooting = false; + ctx.detectChanges(); + }, + complete: () => { + this.rebooting = false; + ctx.detectChanges(); + }, + }); +}; + +this.resetCounter = () => { + if (!this.selected || this.resetting) return; + this.resetting = true; + ctx.detectChanges(); + ctx.http.post('/api/rpc/twoway/' + this.selected.entityId, { method: 'resetCounter', params: {} }).subscribe({ + error: (e) => { + console.error(e); + this.resetting = false; + ctx.detectChanges(); + }, + complete: () => { + this.resetting = false; + ctx.detectChanges(); + }, + }); +}; + +const subOpts = { + type: 'latest', + datasources: [ + { + type: 'entity', + entityFilter: { type: 'deviceType', deviceTypes: ['peopleCount'], deviceNameFilter: '', resolveMultiple: true }, + dataKeys: [{ type: 'timeseries', name: 'peopleCount', settings: {} }], + }, + ], + callbacks: { + onDataUpdated: (subscription) => { + this.devices = (subscription.data || []).map((entry) => { + const ds = entry.datasource; + const last = entry.data && entry.data.length ? entry.data[entry.data.length - 1] : null; + return { + entityId: ds.entityId, + entityType: ds.entityType, + name: ds.entityName, + lastValue: last ? last[1] : '—', + lastSeen: last ? new Date(last[0]).toLocaleString() : '—', + }; + }); + ctx.detectChanges(); + }, + onDataUpdateError: (subscription, e) => console.error(e), + }, +}; + +let subscriptionId = null; +ctx.subscriptionApi.createSubscription(subOpts, true).subscribe((subscription) => { + subscriptionId = subscription.id; +}); + +ctx.registerDestroyCallback(() => { + if (subscriptionId != null) ctx.subscriptionApi.removeSubscription(subscriptionId); +}); +{:copy-code} +``` + +
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_split_css.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_split_css.md new file mode 100644 index 0000000000..2297dfcf75 --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_split_css.md @@ -0,0 +1,142 @@ +#### CSS of resizable split master–detail + +```css +{:code-style="max-height: 400px;"} +.split { + display: flex; + height: 100%; + box-sizing: border-box; + font-family: 'Inter', 'Roboto', system-ui, sans-serif; + color: #0f172a; + background: #fff; + border-radius: 16px; + box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06); + overflow: hidden; +} + +.split__list { + flex: 0 0 auto; + min-width: 160px; + overflow: auto; + border-right: 1px solid #eef1f6; +} + +.split__title { + margin: 0; + padding: 16px; + font-family: 'Roboto', sans-serif; + font-size: 20px; + font-weight: 500; +} + +.split__items { + list-style: none; + margin: 0; + padding: 0; +} + +.split__item { + display: flex; + justify-content: space-between; + gap: 12px; + padding: 12px 16px; + cursor: pointer; + border-bottom: 1px solid #f1f5f9; + transition: background 0.15s ease; +} + +.split__item:hover { + background: #f8fafc; +} + +.split__item.is-active { + background: rgba(47, 107, 255, 0.08); + box-shadow: inset 3px 0 0 #2f6bff; +} + +.split__value { + font-weight: 700; + color: #475569; +} + +.split__divider { + flex: 0 0 12px; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + background: #eef1f6; + transition: background 0.15s ease; +} + +.split__divider:hover { + background: #e2e8f0; +} + +.split__divider::before { + content: ''; + width: 4px; + height: 32px; + background-image: radial-gradient(circle, #94a3b8 1.2px, transparent 1.4px); + background-position: center; + background-size: 4px 6px; + background-repeat: repeat-y; +} + +.split--dragging { + user-select: none; +} + +.split--dragging .split__list, +.split--dragging .split__detail { + pointer-events: none; +} + +.split__detail { + flex: 1 1 0; + min-width: 220px; + display: flex; + flex-direction: column; + gap: 16px; + padding: 20px; + overflow: auto; +} + +.split__eyebrow { + font-size: 11px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + color: #94a3b8; +} + +.split__detail-title { + margin: 2px 0 0; + font-size: 20px; + font-weight: 800; +} + +.split__state { + flex: 1 1 auto; + min-height: 260px; + border: 1px solid #eef1f6; + border-radius: 14px; + overflow: hidden; +} + +.split__state tb-dashboard-state { + display: block; + width: 100%; + height: 100%; +} + +.split__empty { + margin: auto; + color: #94a3b8; + font-size: 14px; +} +{:copy-code} +``` + +
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_split_html.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_split_html.md new file mode 100644 index 0000000000..0d4394015d --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_split_html.md @@ -0,0 +1,38 @@ +#### Angular template of resizable split master–detail + +```html +{:code-style="max-height: 400px;"} +
+
+
+
+
+
+
+
+
+
+
+
+{:copy-code}
+```
+
+Device
+ {{ selected.name }}
+
+
+ Select a device
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_split_js.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_split_js.md new file mode 100644 index 0000000000..7c101ae20e --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_split_js.md @@ -0,0 +1,73 @@ +#### JavaScript function of resizable split master–detail + +```javascript +{:code-style="max-height: 400px;"} +this.ctx = ctx; +this.devices = []; +this.selected = null; +this.selectedId = null; +this.listWidth = 280; + +this.select = (d) => { + this.selected = d; + this.selectedId = d.entityId; + ctx.stateController.updateState(null, { + entityId: { entityType: d.entityType, id: d.entityId }, + entityName: d.name, + }); + ctx.detectChanges(); +}; + +this.startDrag = (event) => { + event.preventDefault(); + const root = event.currentTarget.closest('.split'); + const left = root.getBoundingClientRect().left; + root.classList.add('split--dragging'); + const onMove = (e) => { + this.listWidth = Math.max(160, Math.min(e.clientX - left, root.clientWidth - 220)); + ctx.detectChanges(); + }; + const onUp = () => { + root.classList.remove('split--dragging'); + window.removeEventListener('mousemove', onMove); + window.removeEventListener('mouseup', onUp); + }; + window.addEventListener('mousemove', onMove); + window.addEventListener('mouseup', onUp); +}; + +const subOpts = { + type: 'latest', + datasources: [ + { + type: 'entity', + entityFilter: { type: 'deviceType', deviceTypes: ['peopleCount'], deviceNameFilter: '', resolveMultiple: true }, + dataKeys: [{ type: 'timeseries', name: 'peopleCount', settings: {} }], + }, + ], + callbacks: { + onDataUpdated: (subscription) => { + this.devices = (subscription.data || []).map((entry) => { + const ds = entry.datasource; + const last = entry.data && entry.data.length ? entry.data[entry.data.length - 1] : null; + return { entityId: ds.entityId, entityType: ds.entityType, name: ds.entityName, lastValue: last ? last[1] : '—' }; + }); + ctx.detectChanges(); + }, + onDataUpdateError: (subscription, e) => console.error(e), + }, +}; + +let subscriptionId = null; +ctx.subscriptionApi.createSubscription(subOpts, true).subscribe((subscription) => { + subscriptionId = subscription.id; +}); + +ctx.registerDestroyCallback(() => { + if (subscriptionId != null) ctx.subscriptionApi.removeSubscription(subscriptionId); +}); +{:copy-code} +``` + +
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_tabs_css.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_tabs_css.md new file mode 100644 index 0000000000..ffb7e4833f --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_tabs_css.md @@ -0,0 +1,66 @@ +#### CSS of composite dashboard with tab navigation + +```css +{:code-style="max-height: 400px;"} +.composite { + display: flex; + flex-direction: column; + gap: 12px; + height: 100%; + box-sizing: border-box; + padding: 12px; + font-family: 'Roboto', system-ui, sans-serif; +} + +.tabs { + display: inline-flex; + gap: 4px; + padding: 4px; + align-self: flex-start; + background: #eef1f6; + border-radius: 10px; +} + +.tab { + border: 0; + background: transparent; + padding: 8px 16px; + border-radius: 7px; + font-size: 13px; + font-weight: 600; + color: #5b6472; + cursor: pointer; + transition: background 0.15s ease, color 0.15s ease; +} + +.tab:hover { + color: #1f2733; +} + +.tab.is-active { + background: #fff; + color: #2f6bff; + box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); +} + +.container { + flex-grow: 1; + width: 100%; + display: flex; + padding: 0; + border: 1px solid #e6eaf0; + border-radius: 12px; + overflow: hidden; +} + +.state { + flex-grow: 1; + width: 100%; + height: 100%; + padding: 0; +} +{:copy-code} +``` + +
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_tabs_html.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_tabs_html.md new file mode 100644 index 0000000000..7e1648c4ef --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_tabs_html.md @@ -0,0 +1,22 @@ +#### Angular template of composite dashboard with tab navigation + +```html +{:code-style="max-height: 400px;"} +
+
+
+{:copy-code}
+```
+
+
+
++
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_tabs_js.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_tabs_js.md new file mode 100644 index 0000000000..1eddefb304 --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/angular_tabs_js.md @@ -0,0 +1,35 @@ +#### JavaScript function of composite dashboard with tab navigation + +```javascript +{:code-style="max-height: 400px;"} +this.ctx = ctx; + +this.tabs = [ + { id: 'assets', label: 'Assets', stateId: 'assetsState' }, + { id: 'devices', label: 'Devices', stateId: 'devicesState' }, + { id: 'customers', label: 'Customers', stateId: 'customersState' }, +]; + +const apply = (subState) => { + const tab = this.tabs.find((t) => t.id === subState) || this.tabs[0]; + this.activeTab = tab.id; + this.stateId = tab.stateId; +}; + +apply(ctx.stateController.getStateParams().subState); + +this.selectTab = (subState) => ctx.stateController.updateState(null, { subState }); + +const stateSub = ctx.stateController.dashboardCtrl.dashboardCtx.stateChanged.subscribe(() => { + apply(ctx.stateController.getStateParams().subState); + ctx.detectChanges(); +}); + +ctx.registerDestroyCallback(() => { + stateSub.unsubscribe(); +}); +{:copy-code} +``` + +
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_analytics_css.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_analytics_css.md new file mode 100644 index 0000000000..11fb741d53 --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_analytics_css.md @@ -0,0 +1,38 @@ +#### CSS of visitor analytics + +```css +{:code-style="max-height: 400px;"} +.vc { + display: flex; + flex-direction: column; + gap: 16px; + height: 100%; + box-sizing: border-box; + padding: 20px; + background: #fff; + font-family: 'Inter', 'Roboto', system-ui, sans-serif; + color: #0f172a; +} +.vc__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } +.vc__title { margin: 0; font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 500; } +.vc__sub { font-size: 12px; font-weight: 600; color: #94a3b8; } +.vc__controls { display: flex; gap: 10px; flex-wrap: wrap; } +.vc__field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: #64748b; } +.vc__field input { padding: 7px 10px; border: 1px solid #d8dee9; border-radius: 10px; font-size: 13px; color: #0f172a; } +.vc__field input:focus { outline: none; border-color: #2f6bff; box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.15); } +.vc__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } +.vc-kpi { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; background: #f8fafc; border: 1px solid #e6ebf2; } +.vc-kpi__label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; } +.vc-kpi__value { font-size: 26px; font-weight: 800; line-height: 1; color: #1e293b; } +.vc__card { flex: 1; min-height: 240px; display: flex; flex-direction: column; padding: 16px; border: 1px solid #e6ebf2; border-radius: 14px; } +.vc__card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } +.vc__card-title { font-size: 13px; font-weight: 700; color: #334155; } +.vc__back { padding: 6px 12px; border: 1px solid #d8dee9; border-radius: 8px; background: #fff; color: #2f6bff; font-size: 12px; font-weight: 600; cursor: pointer; } +.vc__back[hidden] { display: none; } +.vc__back:hover { background: #f0f5ff; border-color: #2f6bff; } +.vc__chart { flex: 1; min-height: 200px; } +{:copy-code} +``` + +
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_analytics_html.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_analytics_html.md new file mode 100644 index 0000000000..90d664ed5c --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_analytics_html.md @@ -0,0 +1,36 @@ +#### HTML code of visitor analytics + +```html +{:code-style="max-height: 400px;"} +
+
+
+
+{:copy-code}
+```
+
+
+
+ Visitor analytics
+ all peopleCount devices +
+
+
+
+
+
+
+
+ Total visitors—
+ Busiest day—
+ Peak hour—
+ Daily average—
+
+
+
+ Visitors by day
+
+
+
+ +
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_analytics_js.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_analytics_js.md new file mode 100644 index 0000000000..1fc2b85b82 --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_analytics_js.md @@ -0,0 +1,185 @@ +#### JavaScript function of visitor analytics + +```javascript +{:code-style="max-height: 400px;"} +// Plain HTML mode: `container` is the widget's DOM; ECharts comes from the CDN. +const echarts = window.echarts; +const el = (sel) => container.querySelector(sel); +const pad = (n) => String(n).padStart(2, '0'); +const isoDate = (d) => d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()); +const dayLabel = (d) => d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }); +const minutes = (v) => { + const [h, m] = (v || '0:0').split(':').map(Number); + return h * 60 + m; +}; +const palette = ['#2563eb', '#10b981', '#f59e0b', '#8b5cf6', '#ef4444', '#0ea5e9']; + +const chart = echarts.init(el('#vcChart')); +chart.setOption({ + tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, + legend: { top: 0 }, + grid: { left: 8, right: 16, top: 40, bottom: 8, containLabel: true }, + xAxis: { type: 'category', data: [], axisLabel: { hideOverlap: true } }, + yAxis: { type: 'value' }, + series: [], +}); +const resizeObserver = new window.ResizeObserver(() => chart.resize()); +resizeObserver.observe(el('#vcChart')); + +let lastEntries = []; +let mode = 'daily'; +let selectedDate = null; +let dailyDates = []; // iso date per daily x-index, for drill-down + +// Click a day → drill into its hourly breakdown. +chart.on('click', (p) => { + if (mode !== 'daily' || p.dataIndex == null || dailyDates[p.dataIndex] == null) return; + selectedDate = dailyDates[p.dataIndex]; + mode = 'hourly'; + el('#vcBack').hidden = false; + recompute(); +}); +el('#vcBack').addEventListener('click', () => { + mode = 'daily'; + selectedDate = null; + el('#vcBack').hidden = true; + recompute(); +}); + +// One stacked series per device, summing values into the given bucket index. +function buildSeries(labelCount, bucketOf) { + return lastEntries.map((entry, k) => { + const arr = new Array(labelCount).fill(0); + (entry.data || []).forEach(([ts, value]) => { + const i = bucketOf(new Date(Number(ts))); + if (i != null && i >= 0) arr[i] += Number(value); + }); + return { name: entry.datasource.entityName, type: 'bar', stack: 'v', data: arr, itemStyle: { color: palette[k % palette.length] } }; + }); +} + +function recompute() { + const open = minutes(el('#vcOpen').value); + const close = minutes(el('#vcClose').value); + const inHours = (d) => { + const m = d.getHours() * 60 + d.getMinutes(); + return m >= open && m < close; + }; + + // KPIs over the whole range (per day, summed across devices). + const start = new Date(el('#vcStart').value + 'T00:00:00'); + const end = new Date(el('#vcEnd').value + 'T00:00:00'); + const dayIndex = {}; + const dayLabels = []; + dailyDates = []; + for (let t = new Date(start); t <= end; t.setDate(t.getDate() + 1)) { + dayIndex[isoDate(t)] = dayLabels.length; + dailyDates.push(isoDate(t)); + dayLabels.push(dayLabel(t)); + } + const dayTotals = dayLabels.map(() => 0); + const perHour = {}; + let total = 0; + lastEntries.forEach((entry) => + (entry.data || []).forEach(([ts, value]) => { + const d = new Date(Number(ts)); + if (!inHours(d)) return; + const i = dayIndex[isoDate(d)]; + if (i === undefined) return; + const v = Number(value); + dayTotals[i] += v; + perHour[d.getHours()] = (perHour[d.getHours()] || 0) + v; + total += v; + }), + ); + el('#vcTotal').textContent = total; + el('#vcPeakDay').textContent = total ? dayLabels[dayTotals.indexOf(Math.max(...dayTotals))] : '—'; + const ph = Object.keys(perHour).sort((a, b) => perHour[b] - perHour[a])[0]; + el('#vcPeakHour').textContent = ph != null ? ph + ':00' : '—'; + el('#vcAvg').textContent = Math.round(total / (dayTotals.filter((x) => x > 0).length || 1)); + + // Chart: daily (stacked by device) or the hourly breakdown of the selected day. + if (mode === 'daily') { + el('#vcChartTitle').textContent = 'Visitors by day'; + const series = buildSeries(dayLabels.length, (d) => (inHours(d) ? dayIndex[isoDate(d)] : null)); + chart.setOption({ xAxis: { data: dayLabels }, series }, { replaceMerge: ['series'] }); + } else { + const h0 = Math.floor(open / 60); + const h1 = Math.ceil(close / 60); + const labels = []; + for (let h = h0; h < h1; h++) labels.push(pad(h) + ':00'); + el('#vcChartTitle').textContent = 'Visitors by hour — ' + dayLabel(new Date(selectedDate + 'T00:00:00')); + const series = buildSeries(labels.length, (d) => + isoDate(d) === selectedDate && inHours(d) ? d.getHours() - h0 : null, + ); + chart.setOption({ xAxis: { data: labels }, series }, { replaceMerge: ['series'] }); + } +} + +// (Re)subscribe for the chosen date range (a fixed history window). +let subscriptionId = null; +function subscribe() { + if (subscriptionId != null) { + ctx.subscriptionApi.removeSubscription(subscriptionId); + subscriptionId = null; + } + const startTimeMs = new Date(el('#vcStart').value + 'T00:00:00').getTime(); + const endTimeMs = new Date(el('#vcEnd').value + 'T23:59:59').getTime(); + const subOpts = { + type: 'timeseries', + useDashboardTimewindow: false, + timeWindowConfig: { + selectedTab: 1, + history: { historyType: 1, fixedTimewindow: { startTimeMs, endTimeMs } }, + aggregation: { type: 'NONE', limit: 50000 }, + }, + datasources: [ + { + type: 'entity', + entityFilter: { type: 'deviceType', deviceTypes: ['peopleCount'], deviceNameFilter: '', resolveMultiple: true }, + dataKeys: [{ type: 'timeseries', name: 'peopleCount', settings: {} }], + }, + ], + callbacks: { + onDataUpdated: (subscription) => { + lastEntries = subscription.data || []; + recompute(); + }, + onDataUpdateError: (subscription, e) => console.error(e), + }, + }; + ctx.subscriptionApi.createSubscription(subOpts, true).subscribe((subscription) => { + subscriptionId = subscription.id; + }); +} + +// Changing the range resets the drill-down and re-subscribes; hours just re-filter. +function onRangeChange() { + mode = 'daily'; + selectedDate = null; + el('#vcBack').hidden = true; + subscribe(); +} + +// Defaults: the current month (1st → today). +const now = new Date(); +el('#vcEnd').value = isoDate(now); +el('#vcStart').value = isoDate(new Date(now.getFullYear(), now.getMonth(), 1)); + +el('#vcStart').addEventListener('change', onRangeChange); +el('#vcEnd').addEventListener('change', onRangeChange); +el('#vcOpen').addEventListener('change', recompute); +el('#vcClose').addEventListener('change', recompute); +subscribe(); + +// The JS re-runs on every reload — release the subscription, observer and chart. +ctx.registerDestroyCallback(() => { + if (subscriptionId != null) ctx.subscriptionApi.removeSubscription(subscriptionId); + resizeObserver.disconnect(); + chart.dispose(); +}); +{:copy-code} +``` + +
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_analytics_resources.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_analytics_resources.md new file mode 100644 index 0000000000..0b3ae21dd1 --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_analytics_resources.md @@ -0,0 +1,12 @@ +#### Resources of visitor analytics + +Add the following JavaScript URL under the Resources tab. It loads ECharts before your function runs and exposes the
echarts global (accessed as window.echarts):
+
+```text
+{:code-style="max-height: 400px;"}
+https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js
+{:copy-code}
+```
+
++
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_kanban_css.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_kanban_css.md new file mode 100644 index 0000000000..6f9a857f19 --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_kanban_css.md @@ -0,0 +1,45 @@ +#### CSS of kanban board + +```css +{:code-style="max-height: 400px;"} +.kanban { + display: flex; + gap: 12px; + height: 100%; + box-sizing: border-box; + padding: 16px; + overflow-x: auto; + background: #f9fafb; + font-family: 'Inter', 'Roboto', system-ui, sans-serif; + color: #111827; + font-size: 13px; +} +.kanban__col { flex: 1 1 0; min-width: 220px; display: flex; flex-direction: column; background: #f3f4f6; border-radius: 10px; } +.kanban__head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; } +.kanban__title { font-size: 12px; font-weight: 600; color: #374151; } +.kanban__count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #e5e7eb; color: #6b7280; font-size: 11px; font-weight: 600; } +.kanban__cards { display: flex; flex-direction: column; gap: 8px; padding: 4px 8px 12px; flex: 1; min-height: 24px; overflow-y: auto; } +.kanban__card { + display: flex; + align-items: center; + gap: 8px; + padding: 10px 12px; + background: #fff; + border: 1px solid #e5e7eb; + border-radius: 8px; + cursor: grab; + transition: border-color 0.12s ease, box-shadow 0.12s ease; +} +.kanban__card:hover { border-color: #d1d5db; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } +.kanban__name { font-weight: 500; color: #111827; } +.kanban__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } +.kanban__dot--idle { background: #9ca3af; } +.kanban__dot--active { background: #22c55e; } +.kanban__dot--maintenance { background: #f59e0b; } +.kanban__card.sortable-ghost { opacity: 0; } +.kanban__card.sortable-chosen { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } +{:copy-code} +``` + +
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_kanban_html.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_kanban_html.md new file mode 100644 index 0000000000..d2ed3008b4 --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_kanban_html.md @@ -0,0 +1,10 @@ +#### HTML code of kanban board + +```html +{:code-style="max-height: 400px;"} + +{:copy-code} +``` + +
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_kanban_js.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_kanban_js.md new file mode 100644 index 0000000000..6b04e2551e --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_kanban_js.md @@ -0,0 +1,89 @@ +#### JavaScript function of kanban board + +```javascript +{:code-style="max-height: 400px;"} +// Plain HTML mode: `container` is the widget's DOM. Build a status board and, +// on drop, persist the card's new column (status) back to the device. +const Sortable = window.Sortable; // loaded from the CDN added under Resources +const statuses = ['idle', 'active', 'maintenance']; +const labels = { idle: 'Idle', active: 'Active', maintenance: 'Maintenance' }; + +const board = container.querySelector('#board'); +let devices = []; // { id, entityType, name, status } + +// Escape untrusted strings (e.g. device names) before putting them in innerHTML. +const esc = (s) => + String(s).replace(/[&<>"']/g, (c) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' })[c]); + +function render() { + board.innerHTML = statuses + .map((s) => { + const items = devices.filter((d) => d.status === s); + const cards = items + .map( + (d) => + `
${esc(d.name)}
`,
+ )
+ .join('');
+ return `${cards}
+ +
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_kanban_resources.md b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_kanban_resources.md new file mode 100644 index 0000000000..a85de9604a --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/lib/html_container/examples/plain_kanban_resources.md @@ -0,0 +1,12 @@ +#### Resources of kanban board + +Add the following JavaScript URL under the Resources tab. It loads SortableJS before your function runs and exposes the
Sortable global (accessed as window.Sortable):
+
+```text
+{:code-style="max-height: 400px;"}
+https://cdn.jsdelivr.net/npm/sortablejs@1/Sortable.min.js
+{:copy-code}
+```
+
++
diff --git a/ui-ngx/src/assets/home/no-service.svg b/ui-ngx/src/assets/home/no-service.svg new file mode 100644 index 0000000000..2c591b268a --- /dev/null +++ b/ui-ngx/src/assets/home/no-service.svg @@ -0,0 +1,23 @@ + diff --git a/ui-ngx/src/assets/integration-icon/apache-pulsar.svg b/ui-ngx/src/assets/integration-icon/apache-pulsar.svg new file mode 100644 index 0000000000..1ff16cb1ed --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/apache-pulsar.svg @@ -0,0 +1,3 @@ + diff --git a/ui-ngx/src/assets/integration-icon/aws-iot.svg b/ui-ngx/src/assets/integration-icon/aws-iot.svg new file mode 100644 index 0000000000..ce93615737 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/aws-iot.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui-ngx/src/assets/integration-icon/aws-kinesis.svg b/ui-ngx/src/assets/integration-icon/aws-kinesis.svg new file mode 100644 index 0000000000..fdf672f1d4 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/aws-kinesis.svg @@ -0,0 +1,13 @@ + diff --git a/ui-ngx/src/assets/integration-icon/aws-sqs.svg b/ui-ngx/src/assets/integration-icon/aws-sqs.svg new file mode 100644 index 0000000000..2b9fdbf1b5 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/aws-sqs.svg @@ -0,0 +1,13 @@ + diff --git a/ui-ngx/src/assets/integration-icon/azure-event-hub.svg b/ui-ngx/src/assets/integration-icon/azure-event-hub.svg new file mode 100644 index 0000000000..fec9fd51a4 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/azure-event-hub.svg @@ -0,0 +1,3 @@ + diff --git a/ui-ngx/src/assets/integration-icon/azure-iot-hub.svg b/ui-ngx/src/assets/integration-icon/azure-iot-hub.svg new file mode 100644 index 0000000000..7f080283a8 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/azure-iot-hub.svg @@ -0,0 +1,3 @@ + diff --git a/ui-ngx/src/assets/integration-icon/azure-service-bus.svg b/ui-ngx/src/assets/integration-icon/azure-service-bus.svg new file mode 100644 index 0000000000..bdc50a6978 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/azure-service-bus.svg @@ -0,0 +1,7 @@ + diff --git a/ui-ngx/src/assets/integration-icon/chirpstack.svg b/ui-ngx/src/assets/integration-icon/chirpstack.svg new file mode 100644 index 0000000000..d4cfc414cc --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/chirpstack.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui-ngx/src/assets/integration-icon/coap.svg b/ui-ngx/src/assets/integration-icon/coap.svg new file mode 100644 index 0000000000..63d096c7d9 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/coap.svg @@ -0,0 +1,3 @@ + diff --git a/ui-ngx/src/assets/integration-icon/custom.svg b/ui-ngx/src/assets/integration-icon/custom.svg new file mode 100644 index 0000000000..ba1077e068 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/custom.svg @@ -0,0 +1,3 @@ + diff --git a/ui-ngx/src/assets/integration-icon/http.svg b/ui-ngx/src/assets/integration-icon/http.svg new file mode 100644 index 0000000000..d964e6b91c --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/http.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui-ngx/src/assets/integration-icon/iotcreators.com.svg b/ui-ngx/src/assets/integration-icon/iotcreators.com.svg new file mode 100644 index 0000000000..64224848b6 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/iotcreators.com.svg @@ -0,0 +1,3 @@ + diff --git a/ui-ngx/src/assets/integration-icon/kafka.svg b/ui-ngx/src/assets/integration-icon/kafka.svg new file mode 100644 index 0000000000..2ff631845c --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/kafka.svg @@ -0,0 +1,10 @@ + diff --git a/ui-ngx/src/assets/integration-icon/kpn.svg b/ui-ngx/src/assets/integration-icon/kpn.svg new file mode 100644 index 0000000000..edc4afe28d --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/kpn.svg @@ -0,0 +1,13 @@ + diff --git a/ui-ngx/src/assets/integration-icon/loriot.svg b/ui-ngx/src/assets/integration-icon/loriot.svg new file mode 100644 index 0000000000..8c4f139439 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/loriot.svg @@ -0,0 +1,3 @@ + diff --git a/ui-ngx/src/assets/integration-icon/mqtt.svg b/ui-ngx/src/assets/integration-icon/mqtt.svg new file mode 100644 index 0000000000..05ed77deac --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/mqtt.svg @@ -0,0 +1,10 @@ + diff --git a/ui-ngx/src/assets/integration-icon/ocean-connect.svg b/ui-ngx/src/assets/integration-icon/ocean-connect.svg new file mode 100644 index 0000000000..97ff84f3fc --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/ocean-connect.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui-ngx/src/assets/integration-icon/opc-ua.svg b/ui-ngx/src/assets/integration-icon/opc-ua.svg new file mode 100644 index 0000000000..53968794c6 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/opc-ua.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui-ngx/src/assets/integration-icon/particle.svg b/ui-ngx/src/assets/integration-icon/particle.svg new file mode 100644 index 0000000000..cc823fa6f8 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/particle.svg @@ -0,0 +1,4 @@ + diff --git a/ui-ngx/src/assets/integration-icon/pub-sub.svg b/ui-ngx/src/assets/integration-icon/pub-sub.svg new file mode 100644 index 0000000000..7ed9730d64 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/pub-sub.svg @@ -0,0 +1,12 @@ + diff --git a/ui-ngx/src/assets/integration-icon/rabbitmq.svg b/ui-ngx/src/assets/integration-icon/rabbitmq.svg new file mode 100644 index 0000000000..9b2d81160f --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/rabbitmq.svg @@ -0,0 +1,3 @@ + diff --git a/ui-ngx/src/assets/integration-icon/sigfox.svg b/ui-ngx/src/assets/integration-icon/sigfox.svg new file mode 100644 index 0000000000..6bd29d8c56 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/sigfox.svg @@ -0,0 +1,4 @@ + diff --git a/ui-ngx/src/assets/integration-icon/tcp.svg b/ui-ngx/src/assets/integration-icon/tcp.svg new file mode 100644 index 0000000000..5972d82f07 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/tcp.svg @@ -0,0 +1,3 @@ + diff --git a/ui-ngx/src/assets/integration-icon/thingpark-enterprise.svg b/ui-ngx/src/assets/integration-icon/thingpark-enterprise.svg new file mode 100644 index 0000000000..677421c7a3 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/thingpark-enterprise.svg @@ -0,0 +1,3 @@ + diff --git a/ui-ngx/src/assets/integration-icon/thingpark.svg b/ui-ngx/src/assets/integration-icon/thingpark.svg new file mode 100644 index 0000000000..2518cc273f --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/thingpark.svg @@ -0,0 +1,3 @@ + diff --git a/ui-ngx/src/assets/integration-icon/things-stack-industries.svg b/ui-ngx/src/assets/integration-icon/things-stack-industries.svg new file mode 100644 index 0000000000..e85c828a24 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/things-stack-industries.svg @@ -0,0 +1,9 @@ + diff --git a/ui-ngx/src/assets/integration-icon/things-stack-сommunity.svg b/ui-ngx/src/assets/integration-icon/things-stack-сommunity.svg new file mode 100644 index 0000000000..e85c828a24 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/things-stack-сommunity.svg @@ -0,0 +1,9 @@ + diff --git a/ui-ngx/src/assets/integration-icon/ttn.svg b/ui-ngx/src/assets/integration-icon/ttn.svg new file mode 100644 index 0000000000..88a388db9d --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/ttn.svg @@ -0,0 +1,12 @@ + diff --git a/ui-ngx/src/assets/integration-icon/tuya.svg b/ui-ngx/src/assets/integration-icon/tuya.svg new file mode 100644 index 0000000000..3498d0a1c0 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/tuya.svg @@ -0,0 +1,10 @@ + diff --git a/ui-ngx/src/assets/integration-icon/udp.svg b/ui-ngx/src/assets/integration-icon/udp.svg new file mode 100644 index 0000000000..e8f81f83db --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/udp.svg @@ -0,0 +1,3 @@ + diff --git a/ui-ngx/src/assets/iot-hub/category-alarm-rules-img.png b/ui-ngx/src/assets/iot-hub/category-alarm-rules-img.png new file mode 100644 index 0000000000..ab374fadef Binary files /dev/null and b/ui-ngx/src/assets/iot-hub/category-alarm-rules-img.png differ diff --git a/ui-ngx/src/assets/iot-hub/category-calculated-fields-img.png b/ui-ngx/src/assets/iot-hub/category-calculated-fields-img.png new file mode 100644 index 0000000000..acdcd322e8 Binary files /dev/null and b/ui-ngx/src/assets/iot-hub/category-calculated-fields-img.png differ diff --git a/ui-ngx/src/assets/iot-hub/category-device-library-img.png b/ui-ngx/src/assets/iot-hub/category-device-library-img.png new file mode 100644 index 0000000000..9e7817b70a Binary files /dev/null and b/ui-ngx/src/assets/iot-hub/category-device-library-img.png differ diff --git a/ui-ngx/src/assets/iot-hub/category-rule-chains-img.png b/ui-ngx/src/assets/iot-hub/category-rule-chains-img.png new file mode 100644 index 0000000000..bd136772b3 Binary files /dev/null and b/ui-ngx/src/assets/iot-hub/category-rule-chains-img.png differ diff --git a/ui-ngx/src/assets/iot-hub/category-solution-templates-img.png b/ui-ngx/src/assets/iot-hub/category-solution-templates-img.png new file mode 100644 index 0000000000..3c649f92ef Binary files /dev/null and b/ui-ngx/src/assets/iot-hub/category-solution-templates-img.png differ diff --git a/ui-ngx/src/assets/iot-hub/category-widgets-img.png b/ui-ngx/src/assets/iot-hub/category-widgets-img.png new file mode 100644 index 0000000000..0808b123cc Binary files /dev/null and b/ui-ngx/src/assets/iot-hub/category-widgets-img.png differ diff --git a/ui-ngx/src/assets/iot-hub/hero-alarm-rule-cluster.svg b/ui-ngx/src/assets/iot-hub/hero-alarm-rule-cluster.svg new file mode 100644 index 0000000000..545e7db89b --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/hero-alarm-rule-cluster.svg @@ -0,0 +1,48 @@ + diff --git a/ui-ngx/src/assets/iot-hub/hero-calculated-field-cluster.svg b/ui-ngx/src/assets/iot-hub/hero-calculated-field-cluster.svg new file mode 100644 index 0000000000..a5206aa4ea --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/hero-calculated-field-cluster.svg @@ -0,0 +1,71 @@ + diff --git a/ui-ngx/src/assets/iot-hub/hero-device-cluster.svg b/ui-ngx/src/assets/iot-hub/hero-device-cluster.svg new file mode 100644 index 0000000000..7e75c744a7 --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/hero-device-cluster.svg @@ -0,0 +1,138 @@ + diff --git a/ui-ngx/src/assets/iot-hub/hero-rule-chain-cluster.svg b/ui-ngx/src/assets/iot-hub/hero-rule-chain-cluster.svg new file mode 100644 index 0000000000..ee3a4d39de --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/hero-rule-chain-cluster.svg @@ -0,0 +1,72 @@ + diff --git a/ui-ngx/src/assets/iot-hub/hero-solution-template-cluster.svg b/ui-ngx/src/assets/iot-hub/hero-solution-template-cluster.svg new file mode 100644 index 0000000000..2afd1f2ab8 --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/hero-solution-template-cluster.svg @@ -0,0 +1,57 @@ + diff --git a/ui-ngx/src/assets/iot-hub/hero-widget-cluster.svg b/ui-ngx/src/assets/iot-hub/hero-widget-cluster.svg new file mode 100644 index 0000000000..0df6ad4336 --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/hero-widget-cluster.svg @@ -0,0 +1,57 @@ + diff --git a/ui-ngx/src/assets/iot-hub/items-page-alarm-rules-hero.svg b/ui-ngx/src/assets/iot-hub/items-page-alarm-rules-hero.svg new file mode 100644 index 0000000000..74ba7569b4 --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/items-page-alarm-rules-hero.svg @@ -0,0 +1,150 @@ + diff --git a/ui-ngx/src/assets/iot-hub/items-page-calculated-fields-hero.svg b/ui-ngx/src/assets/iot-hub/items-page-calculated-fields-hero.svg new file mode 100644 index 0000000000..916c521ea0 --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/items-page-calculated-fields-hero.svg @@ -0,0 +1,104 @@ + diff --git a/ui-ngx/src/assets/iot-hub/items-page-dashboards-hero.svg b/ui-ngx/src/assets/iot-hub/items-page-dashboards-hero.svg new file mode 100644 index 0000000000..c699714457 --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/items-page-dashboards-hero.svg @@ -0,0 +1,102 @@ + diff --git a/ui-ngx/src/assets/iot-hub/items-page-devices-hero.svg b/ui-ngx/src/assets/iot-hub/items-page-devices-hero.svg new file mode 100644 index 0000000000..d951dd8744 --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/items-page-devices-hero.svg @@ -0,0 +1,243 @@ + diff --git a/ui-ngx/src/assets/iot-hub/items-page-rule-chains-hero.svg b/ui-ngx/src/assets/iot-hub/items-page-rule-chains-hero.svg new file mode 100644 index 0000000000..05cb14b0e2 --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/items-page-rule-chains-hero.svg @@ -0,0 +1,151 @@ + diff --git a/ui-ngx/src/assets/iot-hub/items-page-solution-templates-hero.png b/ui-ngx/src/assets/iot-hub/items-page-solution-templates-hero.png new file mode 100644 index 0000000000..690c23f552 Binary files /dev/null and b/ui-ngx/src/assets/iot-hub/items-page-solution-templates-hero.png differ diff --git a/ui-ngx/src/assets/iot-hub/items-page-widgets-hero.svg b/ui-ngx/src/assets/iot-hub/items-page-widgets-hero.svg new file mode 100644 index 0000000000..84c4b37a2f --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/items-page-widgets-hero.svg @@ -0,0 +1,138 @@ + diff --git a/ui-ngx/src/assets/iot-hub/pe-only-illustration.svg b/ui-ngx/src/assets/iot-hub/pe-only-illustration.svg new file mode 100644 index 0000000000..c93239d290 --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/pe-only-illustration.svg @@ -0,0 +1,44 @@ + diff --git a/ui-ngx/src/assets/iot-hub/upgrade-required.svg b/ui-ngx/src/assets/iot-hub/upgrade-required.svg new file mode 100644 index 0000000000..1c0973a83a --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/upgrade-required.svg @@ -0,0 +1,15 @@ + diff --git a/ui-ngx/src/assets/locale/locale.constant-da_DK.json b/ui-ngx/src/assets/locale/locale.constant-da_DK.json index 0992ccd6ff..0058dc7df6 100644 --- a/ui-ngx/src/assets/locale/locale.constant-da_DK.json +++ b/ui-ngx/src/assets/locale/locale.constant-da_DK.json @@ -1097,8 +1097,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -9538,4 +9538,4 @@ "language": { "language": "Sprog" } -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/locale/locale.constant-de_DE.json b/ui-ngx/src/assets/locale/locale.constant-de_DE.json index d218d2b96b..03ec53a2ed 100644 --- a/ui-ngx/src/assets/locale/locale.constant-de_DE.json +++ b/ui-ngx/src/assets/locale/locale.constant-de_DE.json @@ -1097,8 +1097,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -9538,4 +9538,4 @@ "language": { "language": "Sprache" } -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/locale/locale.constant-el_GR.json b/ui-ngx/src/assets/locale/locale.constant-el_GR.json index a12db1a589..f97ebf47f1 100644 --- a/ui-ngx/src/assets/locale/locale.constant-el_GR.json +++ b/ui-ngx/src/assets/locale/locale.constant-el_GR.json @@ -1097,8 +1097,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -9538,4 +9538,4 @@ "language": { "language": "Γλώσσα" } -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 039e7a33e7..acfe5c344a 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -82,7 +82,8 @@ "upload": "Upload", "delete-anyway": "Delete anyway", "delete-selected": "Delete selected", - "set": "Set" + "set": "Set", + "retry": "Retry" }, "aggregation": { "aggregation": "Aggregation", @@ -1107,8 +1108,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -3682,7 +3683,277 @@ } }, "item": { - "selected": "Selected" + "type-widget": "Widget", + "type-widget-plural": "Widgets", + "type-dashboard": "Dashboard", + "type-dashboard-plural": "Dashboards", + "type-solution-template": "Solution Template", + "type-solution-template-plural": "Solution Templates", + "type-calculated-field": "Calculated Field", + "type-calculated-field-plural": "Calculated Fields", + "type-alarm-rule": "Alarm Rule", + "type-alarm-rule-plural": "Alarm Rules", + "type-rule-chain": "Rule Chain", + "type-rule-chain-plural": "Rule Chains", + "type-device": "Device", + "type-device-plural": "Devices" + }, + "iot-hub": { + "iot-hub": "IoT Hub", + "generate-random-value": "Generate random value", + "home-title": "ThingsBoard IoT Hub", + "home-subtitle-prefix": "Discover ready-to-use", + "and-devices": "& Devices", + "search-placeholder": "Search in IoT Hub...", + "search": "Search...", + "search-published-items": "Search published items...", + "see-all-results": "See all results", + "no-search-results": "No results found for '{{ search }}'", + "no-items-available": "No items available", + "search-results": "Search results", + "search-results-for": "Search results for ", + "try-adjusting-search": "Try adjusting your search", + "add-widget-from-iot-hub": "Add widget from IoT Hub", + "all-widgets": "All widgets", + "all-iot-hub-widgets": "All IoT Hub widgets", + "installed-from-iot-hub": "Installed from IoT Hub", + "item-link-unavailable": "Item unavailable", + "include-deprecated": "Include deprecated", + "widget-category-value": "{{ category }} widgets", + "search-categories": "Search categories...", + "search-in-category": "Search widgets...", + "search-bundles": "Search bundles...", + "search-widgets": "Search widgets...", + "add-item-from-iot-hub": "Add {{ type }} from IoT Hub", + "add-from-iot-hub": "Add from IoT Hub", + "filters": "Filters", + "type": "Type", + "items-per-page": "Items per page", + "filter": "Filter", + "available": "Available", + "items-page-desc-widgets": "Jumpstart your IoT journey with pre-configured widgets designed for your industry. Deploy proven architectures instantly and focus your energy on what matters: your unique business logic.", + "items-page-desc-dashboards": "Explore dashboards to find pre-built visualization templates and interactive UI layouts you can deploy in minutes to bring your IoT data to life.", + "items-page-desc-solution-templates": "Complete IoT solution packages with dashboards, rule chains, and device configurations. Get started with proven architectures.", + "items-page-desc-calculated-fields": "Use pre-configured Calculated Fields to automate complex metrics like fuel efficiency or power factor. Skip the manual logic and keep your dashboards clean and actionable.", + "items-page-desc-alarm-rules": "Use pre-built Alarm Rule templates to detect critical conditions like low battery, threshold breaches, or devices going offline. Skip writing the rule logic and start reacting to incidents the moment they happen.", + "items-page-desc-rule-chains": "From sophisticated data processing to seamless API integrations, Rule Chain templates provide the architectural foundation you need to scale without building from scratch.", + "items-page-desc-devices": "Explore the device library to find pre-configured connectivity templates you can deploy in minutes to connect your hardware instantly.", + "device-library": "Device Library", + "most-popular-in-iot-hub": "Most popular in IoT Hub", + "alarm-rule-install-update-required": "Update required", + "alarm-rule-install-update-required-text": "Alarm Rules require ThingsBoard 4.3 or later. Please update your platform instance to install Alarm Rule packages.", + "alarm-rules-unavailable-title-prefix": "Alarm Rules are available starting from", + "alarm-rules-unavailable-tb-version": "Thingsboard v4.3", + "alarm-rules-unavailable-desc": "Use pre-built Alarm Rule templates to detect critical conditions like low battery, threshold breaches, or devices going offline. Skip writing the rule logic and start reacting to incidents the moment they happen.", + "alarm-rules-unavailable-upgrade": "Upgrade instance", + "alarm-rules-unavailable-current": "Current platform version: ThingsBoard v{{version}}", + "pe-required-title": "Professional Edition required", + "pe-required-message": "This item is available only on ThingsBoard Professional Edition. You are currently running Community Edition. To install it, upgrade to Professional Edition.", + "upgrade-required-title": "ThingsBoard upgrade required", + "upgrade-required-message": "This item requires ThingsBoard {{minVersion}} or newer. You are currently running {{currentVersion}}. Please upgrade your instance to install it.", + "become-creator-text": "Submit your templates to the ThingsBoard IoT Hub to get featured and showcase your solutions to our global community.", + "contribute": "Contribute", + "creator-profile": "Creator Profile", + "title-widgets": "Widgets", + "title-dashboards": "Dashboards", + "title-calculated-fields": "Calculated Fields", + "title-alarm-rules": "Alarm Rules", + "title-rule-chains": "Rule Chains", + "title-devices": "Devices", + "title-solution-templates": "Solution Templates", + "subtitle-widgets": "Browse community widgets for your dashboards", + "subtitle-dashboards": "Browse ready-to-use dashboards", + "subtitle-solution-templates": "Browse complete IoT solution packages", + "subtitle-calculated-fields": "Browse calculated field templates", + "subtitle-alarm-rules": "Browse alarm rule templates", + "subtitle-rule-chains": "Browse rule chain templates", + "subtitle-devices": "Browse device configurations", + "search-dashboards": "Search dashboards...", + "search-solution-templates": "Search solution templates...", + "search-calculated-fields": "Search calculated fields...", + "search-alarm-rules": "Search alarm rules...", + "search-rule-chains": "Search rule chains...", + "search-devices": "Search devices...", + "sort-most-installed": "Most installed", + "sort-newest": "Newest", + "sort-name": "Name (A-Z)", + "type-filter-label": "Type", + "category": "Category", + "use-case": "Use case", + "vendor": "Vendor", + "view-setup-guide": "View setup guide", + "hardware-type": "Hardware Type", + "connectivity": "Connectivity", + "clear-all-filters": "Clear all filters", + "clear-all": "Clear all", + "results-count": "{{count}} results", + "unable-to-load": "Unable to load", + "unable-to-load-text": "There was a problem loading items. Please try again.", + "network-server-unavailable": "Network or server unavailable", + "network-server-unavailable-text": "We couldn’t reach the catalog. Please try again in a moment.", + "try-again": "Try again", + "retry": "Retry", + "no-items-found": "No items found", + "no-items-found-text": "Try adjusting your search or filters.", + "no-widgets-found": "No widgets found", + "browse-tip-prefix": "Can't find what you need?", + "browse-tip-link": "Browse IoT Hub", + "browse-tip-suffix": "for more widgets.", + "creator": "Creator", + "manage": "Manage", + "details": "Details", + "become-a-creator": "Become a creator", + "back-to-iot-hub": "Back to IoT Hub", + "verified-creator": "Verified Creator", + "published-items": "Published items", + "by-creator": "by {{name}}", + "installs": "installs", + "more": "more", + "categories": "Categories", + "use-cases": "Use Cases", + "changelog": "Changelog", + "created-by": "Created by {{name}}", + "install-confirm": "Install {{name}} v{{version}}?", + "install-confirm-title": "Install '{{name}}'?", + "install-desc": "Installing this will automatically create and configure the necessary resources within your tenant", + "install-success-desc": "'{{name}}' has been installed successfully", + "remove": "Remove", + "remove-confirm-title": "Remove '{{name}}'?", + "remove-desc": "Removing this will also remove the installed entity and its associated resources within your tenant", + "remove-desc-solution-template": "Removing this solution template will also remove all created entities including dashboards, rule chains, devices, and other associated resources within your tenant", + "remove-anyway": "Remove anyway", + "select-entity-for-cf": "Select entity for calculated field '{{name}}'", + "rule-chain-install-subtitle": "Installing automatically creates the rule chain within your tenant. Optionally set it as a profile's default so entities of that profile route through it.", + "rule-chain-set-as-profile-default-toggle": "Set as profile default rule chain", + "rule-chain-set-as-profile-default-tooltip": "If enabled, all entities of the selected profile will route messages through this rule chain.", + "rule-chain-overwrite-title": "Replace existing default rule chain?", + "rule-chain-overwrite-body": "Profile {{profile}} currently uses {{existing}} as its default rule chain. Installing will replace it with this rule chain.", + "rule-chain-overwrite-replace": "Replace", + "install": "Install", + "connect": "Connect", + "connect-device": "Connect device", + "installing": "Installing...", + "installed": "Installed", + "install-success": "{{name}} installed successfully", + "install-success-title": "Installation Successful", + "install-success-message": "'{{name}}' v{{version}} has been installed successfully.", + "install-error": "Failed to install {{name}}", + "solution-install-title": "Solution template successfully installed", + "solution-instructions": "Solution instructions", + "goto-main-dashboard": "Go to main dashboard", + "install-error-title": "Installation Failed", + "install-error-message": "Failed to install '{{name}}'.", + "install-plan-title": "Install '{{name}}' and its dependencies", + "install-plan-will-install": "{{count}} item(s) will be installed.", + "install-plan-will-update": "{{count}} item(s) already installed and will be skipped.", + "install-plan-missing-warning": "{{count}} required item(s) could not be found on the marketplace. '{{ name }}' may not work fully without them.", + "install-plan-status-will": "Install", + "install-plan-status-installed": "Already installed", + "install-plan-status-missing": "Missing", + "install-plan-confirm": "Install", + "install-partial-title": "Installed with warnings", + "install-partial-desc": "'{{name}}' was installed, but some required items were missing.", + "install-rollback-partial": "Some of the items installed before the failure could not be removed automatically and may need to be deleted manually.", + "check-for-updates": "Check for updates", + "updates": "Updates", + "up-to-date": "Up to date", + "update": "Update", + "update-to-version": "Update to v {{ version }}", + "update-item-title": "Update Item", + "update-confirm": "Update '{{name}}' to version {{version}}?", + "update-confirm-title": "Update '{{name}}'?", + "update-desc": "Updating this will replace the current version with the latest and reconfigure the associated resources within your tenant", + "update-success-desc": "'{{name}}' has been updated successfully", + "updating": "Updating...", + "update-success-title": "Update Successful", + "update-success-message": "'{{name}}' has been updated to version {{version}}.", + "entity-modified-title": "Entity Modified", + "entity-modified-text": "The {{type}} has been modified locally. Do you still want to update it?", + "update-error-title": "Update Failed", + "update-error-message": "Failed to update '{{name}}'.", + "update-error": "Failed to update {{name}}", + "most-popular": "Most popular", + "all": "All", + "installed-items": "Installed Items", + "installed-items-for": "Installed Items for \"{{name}}\"", + "search-installed-items": "Search installed items...", + "item-name": "Name", + "item-type": "Type", + "item-version": "Version", + "installed-date": "Installed", + "no-installed-items": "No installed items found", + "no-installed-items-text": "Try adjusting your search or filters.", + "remove-installed-item-title": "Remove Installed Item", + "remove-installed-item-text": "Are you sure you want to remove '{{name}}'? The installed entity will also be removed.", + "installed-item-removed": "'{{name}}' has been removed", + "installed-item-remove-error": "Failed to remove '{{name}}'", + "open-installed-entity": "Open installed entity", + "view-item-details": "View item details", + "review-device-instructions": "Review device instructions", + "open-item-type": "Open {{type}}", + "back-to-marketplace": "Back to Marketplace", + "device-install-select-connectivity": "Choose a connection method for your device", + "pe-only": "PE Only", + "pe-connectivity-prompt-title-suffix": "available only in ThingsBoard Professional Edition", + "pe-connectivity-prompt-try-pe": "Try Professional Edition", + "connection-method": "Connection method", + "step-prerequisites": "Prerequisites", + "step-configuration": "Configuration", + "step-provisioning": "Provisioning", + "device-install-step-error": "Failed", + "device-install-step-pending": "Pending", + "device-install-step-running": "Creating...", + "device-install-step-success": "Created", + "device-install-step-type-DASHBOARD": "Dashboard", + "device-install-step-type-DEVICE": "Device", + "device-install-step-type-DEVICE_PROFILE": "Device Profile", + "device-install-step-type-GATEWAY": "Gateway", + "device-install-step-type-GATEWAY_CONNECTOR": "Gateway Connector", + "device-install-step-type-RULE_CHAIN": "Rule Chain", + "device-install-conflict-exists": "{{type}} with this name already exists", + "device-install-use-existing": "Use existing", + "device-install-overwrite": "Overwrite", + "device-install-create-copy": "Create copy", + "device-install-resolution-created": "Created", + "device-install-resolution-use-existing": "Used existing", + "device-install-resolution-overwrite": "Overwritten", + "device-install-resolution-create-copy": "Created copy", + "device-install-title": "Connect \"{{name}}\"", + "device-installing-title": "Installing \"{{name}}\"", + "done": "Done", + "in-progress": "In progress", + "item-detail": "IoT Hub item", + "unpublished-warning-title": "Unpublished content", + "unpublished-warning-text": "This is a preview of unpublished content. It has not been reviewed by IoT Hub. Installing unverified content can introduce security and stability risks — only continue if you trust the creator.", + "unpublished-warning-confirm": "I understand the risk, continue", + "unpublished-preview": "Unpublished preview", + "deep-link-invalid-id": "Invalid IoT Hub item link.", + "deep-link-not-found": "This IoT Hub item doesn't exist or was removed.", + "deep-link-fetch-failed": "Couldn't load IoT Hub item. Please try again." + }, + "item-data": { + "widget-type-timeseries": "Timeseries", + "widget-type-latest": "Latest", + "widget-type-rpc": "Control", + "widget-type-alarm": "Alarm", + "widget-type-static": "Static", + "cf-type-simple": "Simple", + "cf-type-script": "Script", + "cf-type-geofencing": "Geofencing", + "cf-type-alarm": "Alarm", + "cf-type-propagation": "Propagation", + "cf-type-related-entities-aggregation": "Related Entities Aggregation", + "cf-type-entity-aggregation": "Entity Aggregation", + "rule-chain-type-core": "Core", + "rule-chain-type-edge": "Edge", + "node-type-enrichment": "Enrichment", + "node-type-filter": "Filter", + "node-type-transformation": "Transformation", + "node-type-action": "Action", + "node-type-analytics": "Analytics", + "node-type-external": "External", + "node-type-flow": "Flow", + "node-type-unknown": "Unknown" }, "js-func": { "no-return-error": "Function must return value!", @@ -6731,6 +7002,7 @@ "widget-bundle": "Widgets Bundle", "all-bundles": "All bundles", "select-widgets-bundle": "Select widgets bundle", + "installed": "Installed", "widgets": "Widgets", "all-widgets": "All widgets", "widget": "Widget", @@ -6761,6 +7033,11 @@ "rpc-short": "control", "alarm-short": "alarm", "static-short": "static", + "type-timeseries": "Timeseries", + "type-latest": "Latest", + "type-rpc": "Control", + "type-alarm": "Alarm", + "type-static": "Static", "select-widget-type": "Select widget type", "missing-widget-title-error": "Widget title must be specified!", "widget-saved": "Widget saved", @@ -8261,6 +8538,7 @@ "roadmap": "Roadmap", "satellite": "Satellite", "hybrid": "Hybrid", + "webgl-not-available": "The selected map layer requires graphics acceleration to display. Please enable 'Hardware acceleration' in your browser settings, or switch to a different layer.", "reference": { "reference-layer": "Reference layer", "no-layer": "No layer", @@ -9363,6 +9641,9 @@ "no-links-matching": "No links matching '{{name}}' were found.", "columns": "Columns" }, + "iot-hub": { + "title-text": "Build faster with community-proven resources from" + }, "recent-dashboards": { "title": "Dashboards", "last": "Last viewed", diff --git a/ui-ngx/src/assets/locale/locale.constant-es_ES.json b/ui-ngx/src/assets/locale/locale.constant-es_ES.json index cca6b2a6ff..0913972e47 100644 --- a/ui-ngx/src/assets/locale/locale.constant-es_ES.json +++ b/ui-ngx/src/assets/locale/locale.constant-es_ES.json @@ -1097,8 +1097,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -9538,4 +9538,4 @@ "language": { "language": "Idioma" } -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/locale/locale.constant-fr_FR.json b/ui-ngx/src/assets/locale/locale.constant-fr_FR.json index 6406930aab..8934bb139c 100644 --- a/ui-ngx/src/assets/locale/locale.constant-fr_FR.json +++ b/ui-ngx/src/assets/locale/locale.constant-fr_FR.json @@ -1097,8 +1097,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -9538,4 +9538,4 @@ "language": { "language": "Langue" } -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/locale/locale.constant-it_IT.json b/ui-ngx/src/assets/locale/locale.constant-it_IT.json index ac47330f30..3117d40df7 100644 --- a/ui-ngx/src/assets/locale/locale.constant-it_IT.json +++ b/ui-ngx/src/assets/locale/locale.constant-it_IT.json @@ -1097,8 +1097,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -9538,4 +9538,4 @@ "language": { "language": "Lingua" } -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/locale/locale.constant-ja_JP.json b/ui-ngx/src/assets/locale/locale.constant-ja_JP.json index b7b87fd579..526cabd1dd 100644 --- a/ui-ngx/src/assets/locale/locale.constant-ja_JP.json +++ b/ui-ngx/src/assets/locale/locale.constant-ja_JP.json @@ -1097,8 +1097,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -9538,4 +9538,4 @@ "language": { "language": "言語" } -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/locale/locale.constant-lt_LT.json b/ui-ngx/src/assets/locale/locale.constant-lt_LT.json index c3ddb5af74..4069fe951f 100644 --- a/ui-ngx/src/assets/locale/locale.constant-lt_LT.json +++ b/ui-ngx/src/assets/locale/locale.constant-lt_LT.json @@ -1106,8 +1106,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", diff --git a/ui-ngx/src/assets/locale/locale.constant-nl_NL.json b/ui-ngx/src/assets/locale/locale.constant-nl_NL.json index f9adb7f86c..3281909806 100644 --- a/ui-ngx/src/assets/locale/locale.constant-nl_NL.json +++ b/ui-ngx/src/assets/locale/locale.constant-nl_NL.json @@ -1097,8 +1097,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -9538,4 +9538,4 @@ "language": { "language": "Taal" } -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/locale/locale.constant-no_NO.json b/ui-ngx/src/assets/locale/locale.constant-no_NO.json index c7d1a4d7f3..9a8ee78206 100644 --- a/ui-ngx/src/assets/locale/locale.constant-no_NO.json +++ b/ui-ngx/src/assets/locale/locale.constant-no_NO.json @@ -1097,8 +1097,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -9538,4 +9538,4 @@ "language": { "language": "Språk" } -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/locale/locale.constant-pt_BR.json b/ui-ngx/src/assets/locale/locale.constant-pt_BR.json index f13ad03a3b..37e8bbae34 100644 --- a/ui-ngx/src/assets/locale/locale.constant-pt_BR.json +++ b/ui-ngx/src/assets/locale/locale.constant-pt_BR.json @@ -1097,8 +1097,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -9538,4 +9538,4 @@ "language": { "language": "Idioma" } -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/locale/locale.constant-tr_TR.json b/ui-ngx/src/assets/locale/locale.constant-tr_TR.json index 66bc099e84..dfc2d1be39 100644 --- a/ui-ngx/src/assets/locale/locale.constant-tr_TR.json +++ b/ui-ngx/src/assets/locale/locale.constant-tr_TR.json @@ -1097,8 +1097,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -9538,4 +9538,4 @@ "language": { "language": "Dil" } -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/locale/locale.constant-uk_UA.json b/ui-ngx/src/assets/locale/locale.constant-uk_UA.json index 654f305ae0..d71e1039b2 100644 --- a/ui-ngx/src/assets/locale/locale.constant-uk_UA.json +++ b/ui-ngx/src/assets/locale/locale.constant-uk_UA.json @@ -1097,8 +1097,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -9538,4 +9538,4 @@ "language": { "language": "Мова" } -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/locale/locale.constant-zh_CN.json b/ui-ngx/src/assets/locale/locale.constant-zh_CN.json index fb1c849057..7f11a953ad 100644 --- a/ui-ngx/src/assets/locale/locale.constant-zh_CN.json +++ b/ui-ngx/src/assets/locale/locale.constant-zh_CN.json @@ -1097,8 +1097,8 @@ "ai-providers": { "openai": "OpenAI", "azure-openai": "Azure OpenAI", - "google-ai-gemini": "Google AI Gemini", - "google-vertex-ai-gemini": "Google Vertex AI Gemini", + "google-ai-gemini": "Google Gemini (Gemini API)", + "google-vertex-ai-gemini": "Google Gemini (Agent Platform - Vertex AI)", "mistral-ai": "Mistral AI", "anthropic": "Anthropic", "amazon-bedrock": "Amazon Bedrock", @@ -9538,4 +9538,4 @@ "language": { "language": "语言" } -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/widget/all-iot-hub-widgets.png b/ui-ngx/src/assets/widget/all-iot-hub-widgets.png new file mode 100644 index 0000000000..bf9eb1a16c Binary files /dev/null and b/ui-ngx/src/assets/widget/all-iot-hub-widgets.png differ diff --git a/ui-ngx/src/assets/widget/all-widgets.png b/ui-ngx/src/assets/widget/all-widgets.png new file mode 100644 index 0000000000..a5b9dca579 Binary files /dev/null and b/ui-ngx/src/assets/widget/all-widgets.png differ diff --git a/ui-ngx/src/assets/widget/installed-from-iot-hub.png b/ui-ngx/src/assets/widget/installed-from-iot-hub.png new file mode 100644 index 0000000000..79f5d73988 Binary files /dev/null and b/ui-ngx/src/assets/widget/installed-from-iot-hub.png differ diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss index a694e04a65..ab178e29ae 100644 --- a/ui-ngx/src/form.scss +++ b/ui-ngx/src/form.scss @@ -720,6 +720,31 @@ } } + .tb-no-service-bg { + margin: 10px; + position: relative; + flex: 1; + width: 100%; + max-height: 100px; + &:before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: $tb-primary-color; + mask-image: url(/assets/home/no-service.svg); + -webkit-mask-image: url(/assets/home/no-service.svg); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-size: contain; + mask-position: center; + -webkit-mask-position: center; + } + } + .tb-no-data-text { font-weight: 500; font-size: 14px; diff --git a/ui-ngx/src/scss/constants.scss b/ui-ngx/src/scss/constants.scss index aca02be591..addc319a4d 100644 --- a/ui-ngx/src/scss/constants.scss +++ b/ui-ngx/src/scss/constants.scss @@ -25,7 +25,10 @@ $mat-lt-xl: "screen and (max-width: 1919px)"; $mat-gt-xs: "screen and (min-width: 600px)"; $mat-gt-sm: "screen and (min-width: 960px)"; $mat-gt-md: "screen and (min-width: 1280px)"; +$mat-lt-xmd: "screen and (max-width: 1599px)"; $mat-gt-xmd: "screen and (min-width: 1600px)"; +$mat-lt-xxl: "screen and (max-width: 2447px)"; +$mat-gt-xxl: "screen and (min-width: 2448px)"; $mat-gt-xl: "screen and (min-width: 1920px)"; $mat-md-lg: "screen and (min-width: 960px) and (max-width: 1819px)"; diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss index 9058ce4960..00e051c497 100644 --- a/ui-ngx/src/styles.scss +++ b/ui-ngx/src/styles.scss @@ -1078,6 +1078,25 @@ pre.tb-highlight { } } + .tb-fullscreen-dialog-lt-md { + @media #{$mat-lt-md} { + min-height: 100%; + min-width: 100%; + max-width: none !important; + position: absolute !important; + inset: 0; + .mat-mdc-dialog-container { + > *:first-child, form { + min-width: 100% !important; + height: 100%; + } + .mat-mdc-dialog-content { + max-height: 100%; + } + } + } + } + .tb-fullscreen-dialog { @media #{$mat-lt-sm} { min-height: 100%; diff --git a/ui-ngx/yarn.lock b/ui-ngx/yarn.lock index 6b5f48283b..e05a9e4a7c 100644 --- a/ui-ngx/yarn.lock +++ b/ui-ngx/yarn.lock @@ -160,24 +160,24 @@ "@angular-devkit/core" "^20.0.0" "@angular/build" "^20.0.0" -"@angular-devkit/architect@0.2003.24", "@angular-devkit/architect@>= 0.2000.0 < 0.2100.0", "@angular-devkit/architect@>=0.2000.0 < 0.2100.0": - version "0.2003.24" - resolved "https://registry.yarnpkg.com/@angular-devkit/architect/-/architect-0.2003.24.tgz#1c59822ffeada4248f669424c7c0534f39fe8bc5" - integrity sha512-E7mCdkL6SWnW60G1nGLuugmsopza/eVIrDWB1y0vLkWN8gepOvnHz2Uf637kdzed/F1WoqR+dhv1SfsaJapzKA== +"@angular-devkit/architect@0.2003.25", "@angular-devkit/architect@>= 0.2000.0 < 0.2100.0", "@angular-devkit/architect@>=0.2000.0 < 0.2100.0": + version "0.2003.25" + resolved "https://registry.yarnpkg.com/@angular-devkit/architect/-/architect-0.2003.25.tgz#5fef6c3b713c7db438464e7f352bc762eafedfa5" + integrity sha512-39pTqt4wSmpD1WeCee46oSGXRh6TR1PFd9GZEwyZoMvBTMs8mE2sXGxUgd4Qyi5CkQ1XnCM5XfgJcjUWUQRoGg== dependencies: - "@angular-devkit/core" "20.3.24" + "@angular-devkit/core" "20.3.25" rxjs "7.8.2" -"@angular-devkit/build-angular@20.3.24": - version "20.3.24" - resolved "https://registry.yarnpkg.com/@angular-devkit/build-angular/-/build-angular-20.3.24.tgz#871b7c134d9c9f77b16cd68bca340801638e56a7" - integrity sha512-zBjETGqKtiojF8VHvjELW+UAMBRJ7ziqNc1xwUtqRuWZQVz8HH6x8m8Ncw4mSq9ecCFC4VB7OWTJ1VkAdYSBnQ== +"@angular-devkit/build-angular@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular-devkit/build-angular/-/build-angular-20.3.25.tgz#1e3f973cd33a399ab6d05839cede6fe29b8e3219" + integrity sha512-jp2sbJhbVRT65RbGENY/lz3Z0W0D50Af3xzENmLDLBVp9uhlpIPSTC9LG4CEPV7T6H5Oq6ymHKM+OO5WwTlHHA== dependencies: "@ampproject/remapping" "2.3.0" - "@angular-devkit/architect" "0.2003.24" - "@angular-devkit/build-webpack" "0.2003.24" - "@angular-devkit/core" "20.3.24" - "@angular/build" "20.3.24" + "@angular-devkit/architect" "0.2003.25" + "@angular-devkit/build-webpack" "0.2003.25" + "@angular-devkit/core" "20.3.25" + "@angular/build" "20.3.25" "@babel/core" "7.28.3" "@babel/generator" "7.28.3" "@babel/helper-annotate-as-pure" "7.27.3" @@ -188,7 +188,7 @@ "@babel/preset-env" "7.28.3" "@babel/runtime" "7.28.3" "@discoveryjs/json-ext" "0.6.3" - "@ngtools/webpack" "20.3.24" + "@ngtools/webpack" "20.3.25" ansi-colors "4.1.3" autoprefixer "10.4.21" babel-loader "10.0.0" @@ -210,7 +210,7 @@ ora "8.2.0" picomatch "4.0.4" piscina "5.1.3" - postcss "8.5.6" + postcss "8.5.12" postcss-loader "8.1.1" resolve-url-loader "5.0.0" rxjs "7.8.2" @@ -230,18 +230,18 @@ optionalDependencies: esbuild "0.28.0" -"@angular-devkit/build-webpack@0.2003.24": - version "0.2003.24" - resolved "https://registry.yarnpkg.com/@angular-devkit/build-webpack/-/build-webpack-0.2003.24.tgz#9d96b1d2c05faf3bcb696059c736d9498230ba36" - integrity sha512-gfadsLK3SxbGpZQMSJGr8RK65R2mZi/VmHXdztXQHATvMpy+00CX1Nu3n+lPTxOVbC73aIczUkUbIuRC1HBCqg== +"@angular-devkit/build-webpack@0.2003.25": + version "0.2003.25" + resolved "https://registry.yarnpkg.com/@angular-devkit/build-webpack/-/build-webpack-0.2003.25.tgz#ec1e1fbc690edb319a80f31acdf8673199352d43" + integrity sha512-jJMpYBdWeRfvrCna7JWsyMBbvjMcPblyzh4/pSfWw5znla3hJGzDtmb84qKZ+IB8eZNEcky4iGR5LK2jdGFLAg== dependencies: - "@angular-devkit/architect" "0.2003.24" + "@angular-devkit/architect" "0.2003.25" rxjs "7.8.2" -"@angular-devkit/core@20.3.24", "@angular-devkit/core@>= 20.0.0 < 21.0.0", "@angular-devkit/core@^20.0.0": - version "20.3.24" - resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-20.3.24.tgz#e4108ad599d507d934b9ca990d98a4bb23bd0471" - integrity sha512-kmOjXJcbFxUI91nds9n6XZ6Y/DyQ7/TqRXbHHqvkz9RtlIpdbgWHlIZIq6mgsPOgPBzkxFjtncVARYZUI3yxaw== +"@angular-devkit/core@20.3.25", "@angular-devkit/core@>= 20.0.0 < 21.0.0", "@angular-devkit/core@^20.0.0": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-20.3.25.tgz#779b2eba00f688f0b9105e1562d9c14738cfabfa" + integrity sha512-pSfeWEoS1y9zxqTOw0Etj2NXkRmp/aU52wdnyq3KqVA9cJtgxtlOHlBBNswTil4dReojEy+0K1xJm+mLuWuLxA== dependencies: ajv "8.18.0" ajv-formats "3.0.1" @@ -250,12 +250,12 @@ rxjs "7.8.2" source-map "0.7.6" -"@angular-devkit/schematics@20.3.24", "@angular-devkit/schematics@>= 20.0.0 < 21.0.0": - version "20.3.24" - resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-20.3.24.tgz#4631ec0755363173db0e89eadc0d756985e0bae1" - integrity sha512-B5fBPi0xnEDI0wLLkCjsrYjazRPyf+rnHLAHi34thMdeY9dqljJGWYdNuyUUBak6HNPBLdEo1EUSNcOF9OWt4A== +"@angular-devkit/schematics@20.3.25", "@angular-devkit/schematics@>= 20.0.0 < 21.0.0": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-20.3.25.tgz#446618dbeb9b9756784e46b01190b71d10b6ffee" + integrity sha512-IB0IHf8ZRqr69hT/XIfHkYLPAYHWQ/WUc6+fKHBwq58jJlm/y5QUeTEuXvJ18IX/+hUIqw+E2Q3T0N9rLDLzXg== dependencies: - "@angular-devkit/core" "20.3.24" + "@angular-devkit/core" "20.3.25" jsonc-parser "3.3.1" magic-string "0.30.17" ora "8.2.0" @@ -321,20 +321,20 @@ dependencies: "@angular-eslint/bundled-angular-compiler" "20.7.0" -"@angular/animations@20.3.19": - version "20.3.19" - resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-20.3.19.tgz#636cf19528c548427f3f2ce6c4dd3b863b1475c4" - integrity sha512-/FjU9i7J58/yBURhgVSIiLDcuyOfJxAa0b7ZrOsx6P+FES+M2T2BKZl5V2NuiP2fDFtjsV7U+M/Z9UNUmeHCEw== +"@angular/animations@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-20.3.25.tgz#f672d78b9282a93f23b91739093dc1b40663e1ef" + integrity sha512-lQmti3tI85D525TjUVGqCNLzFxSUoZg+vgIyvuGJZPY0UU/o2S6KAxW6ObmcRotZZHNfenLHIxWgzamBDjIjuw== dependencies: tslib "^2.3.0" -"@angular/build@20.3.24", "@angular/build@^20.0.0": - version "20.3.24" - resolved "https://registry.yarnpkg.com/@angular/build/-/build-20.3.24.tgz#79e423a077a4177074b52e3a20c76f082fc08824" - integrity sha512-AMGXOr268y+kVutl4LpOXY2xv9P+RXLCyXUkzYwi8XwGyxAJZfyu/L5qtcO2llExp5CuvP0OxkWxk4JOGRi9TA== +"@angular/build@20.3.25", "@angular/build@^20.0.0": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular/build/-/build-20.3.25.tgz#cb21941c33b00758a2496d7ffc1e4d5b869d0867" + integrity sha512-ddWmPzYuzDWz9ql0262u9w3OJHXpSjHVNIDFIYOG2XYyMj/Xve0RkJ8/xvV+Hv7T3iqyyGKtsO+n/d0GCJQCtQ== dependencies: "@ampproject/remapping" "2.3.0" - "@angular-devkit/architect" "0.2003.24" + "@angular-devkit/architect" "0.2003.25" "@babel/core" "7.28.3" "@babel/helper-annotate-as-pure" "7.27.3" "@babel/helper-split-export-declaration" "7.24.7" @@ -370,18 +370,18 @@ parse5 "^8.0.0" tslib "^2.3.0" -"@angular/cli@20.3.24": - version "20.3.24" - resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-20.3.24.tgz#e6ab456b83eede47ccc3503dd6068bdf04be4e05" - integrity sha512-TT7LldRJPCi1VGBJMzcrYU+P3w2G6zgubwhFUdJthUiS77A+At6WJqaRY2BdIS3l7HZOXTEaU2Vj2Gkf2ol2Yw== +"@angular/cli@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-20.3.25.tgz#f16e78a689dfc546b55e0fc7da68545d1b307944" + integrity sha512-QOSxza45CZY11kqPVpqsU+WGYF99rR/r9A9GykZQWuAHb5SEAxlXHyaaGMu/BMtBHy5HNIlJH25UlzelrbaNyQ== dependencies: - "@angular-devkit/architect" "0.2003.24" - "@angular-devkit/core" "20.3.24" - "@angular-devkit/schematics" "20.3.24" + "@angular-devkit/architect" "0.2003.25" + "@angular-devkit/core" "20.3.25" + "@angular-devkit/schematics" "20.3.25" "@inquirer/prompts" "7.8.2" "@listr2/prompt-adapter-inquirer" "3.0.1" "@modelcontextprotocol/sdk" "1.26.0" - "@schematics/angular" "20.3.24" + "@schematics/angular" "20.3.25" "@yarnpkg/lockfile" "1.1.0" algoliasearch "5.35.0" ini "5.0.0" @@ -394,17 +394,17 @@ yargs "18.0.0" zod "4.1.13" -"@angular/common@20.3.19": - version "20.3.19" - resolved "https://registry.yarnpkg.com/@angular/common/-/common-20.3.19.tgz#fb19c335a5a5ea84cd6c90a4abda99c2de5c8b17" - integrity sha512-hcB1eUEN8LGcKGc4DlRJ+abS6AYfbEHDZKg8LnXNugkbwI6Ebyh2AUYTDhzZL2S4aH+C8biHKgSYHFCqieCRhA== +"@angular/common@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular/common/-/common-20.3.25.tgz#0f2bd058ec6595cfb4dd6a05601c41cb5cf3cb23" + integrity sha512-rnRGcXbjet0DHgkRL4Dqxk21G2T4UypVfiTV/fay58H8w9U89PJ1L6gRmk8B/uyfpii/9r23cBwnpcguQykxYw== dependencies: tslib "^2.3.0" -"@angular/compiler-cli@20.3.19": - version "20.3.19" - resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-20.3.19.tgz#baeb020e693a759b0b8190931611309678b1e011" - integrity sha512-ET/JjO8s62kAHfgIsGXlvW5VUwLqHm03q1y/2yD7aQW/WdDvssMsvZv7Knl440989vdOFemIGTMwVPakmWqRmA== +"@angular/compiler-cli@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-20.3.25.tgz#64c7cdcd4118cd24cb1905804754ccf3d90a7df4" + integrity sha512-iqxwVo5Pgzt3EfT49OZ6plxA6KKxwv7ixx1XNH7QRvaOJC9gmsPScWpx+LO7ZsVZdo/NkA+rnXDl0PauUgGciw== dependencies: "@babel/core" "7.28.3" "@jridgewell/sourcemap-codec" "^1.4.14" @@ -415,31 +415,31 @@ tslib "^2.3.0" yargs "^18.0.0" -"@angular/compiler@20.3.19": - version "20.3.19" - resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-20.3.19.tgz#cce87072c55c1bab3fda92d83048d0136cea83ad" - integrity sha512-ETkgDKm0l2PuaBubgPJe0ccy8kE75DFu6/zKcz7TUuk3KrKF2OZAopbbjftsUSZGeCNvCdqHzjmcL6hQ6oAOwA== +"@angular/compiler@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-20.3.25.tgz#674d07b2437e9a3c99e9bb1c10e4d13bbedb4086" + integrity sha512-TSh6gVoQqlLPqWwsYMK0lfVEQYENQO+USzS+BHFXEHFfgBRap6qDpIUGnRdj0Y2PlaVJUVFbeq1855EZUPUEoA== dependencies: tslib "^2.3.0" -"@angular/core@20.3.19": - version "20.3.19" - resolved "https://registry.yarnpkg.com/@angular/core/-/core-20.3.19.tgz#ce8b2a0df48612b3d9bfefe8098a1018a3186406" - integrity sha512-SYnwW+q51bQoPtGFoGovm1P5GK9fMEXsG0lGaEAUapjskblAYyX7hLlM/jgueSojv2SjhqNF8aXR+gjHLhZVNA== +"@angular/core@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular/core/-/core-20.3.25.tgz#4418a9625a8a152029b49158dbda01f1c83d19c0" + integrity sha512-B4XnnR5jzikZDvZ4PjwjAWZMT14dxrKrmJdwa/n0yp7rMPkIJTKF6ZJMg4d1pLWLLSsc2oWHioN3UrWlGqIKnA== dependencies: tslib "^2.3.0" -"@angular/forms@20.3.19": - version "20.3.19" - resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-20.3.19.tgz#179fa22f6e2daf3fe58c400d3e3a7c10647f0ebc" - integrity sha512-WJotd+Lhl4FG2b0K+aQNyQDHhR515zKCuphjiUqEW7sifWrOQxANLKzPBngGrH75ayANFgPaDf7U3ZRIoblcQA== +"@angular/forms@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-20.3.25.tgz#10a16a9ebe8e71c2a236b1bf69c3fe4bd44923c5" + integrity sha512-vGRo1LVPFo2Cu0k+QyDTlsBv5UbN0c3Et2YMS+43oyi1c4keocntBccOjLyM5C0kpMz4+pP81MqqYpAWu2k+TQ== dependencies: tslib "^2.3.0" -"@angular/language-service@20.3.19": - version "20.3.19" - resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-20.3.19.tgz#ba9e04a35717d948ff972476486eae2ea25a109d" - integrity sha512-9J0XrAKXInz11KKyNMrMZmn2NSjVbxzt/DsAumbrzzixeZwiY7vDy2Kqw/LLFLi7IlfMQ/gznz/mCVVgUWI5Gg== +"@angular/language-service@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-20.3.25.tgz#a319dec7d6369337908862461b45be96c6851a06" + integrity sha512-3PZUwbDUVQXk9BLSiNUpDxTnRXGR3szwK9QFQaGDt8lhmLYaQLh3VJsY0FHDRghHZYIGR2P2MbVxGQHytF+IPw== "@angular/material@20.2.14": version "20.2.14" @@ -448,24 +448,24 @@ dependencies: tslib "^2.3.0" -"@angular/platform-browser-dynamic@20.3.19": - version "20.3.19" - resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-20.3.19.tgz#b13cb94dc39be24e22d70712605ca879aa5e83b2" - integrity sha512-OgErw7wjcC+8yKF5h99hJq8x+tvc091wThfmdL5YC+U3HgRmUaNZFgB/jR7cb/NeeeC42QW5Vc0qoUTC9rMnLQ== +"@angular/platform-browser-dynamic@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-20.3.25.tgz#5051bea6135c0e9585956bc2ec0df4d9dabac182" + integrity sha512-3Ku+IsN4tQPVBsw75SoLbLf7TsXAGL0rGPHSsyNYFhG2ZZeQuYNIAi8mc4cwz/qMDnuassHFrCxuLDgN6Yab5w== dependencies: tslib "^2.3.0" -"@angular/platform-browser@20.3.19": - version "20.3.19" - resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-20.3.19.tgz#4bffa36591d9ba5adc89a1b48952fdfd982d2f30" - integrity sha512-TRZfatH1B/kreDwFRwtpLEurJQ6044qh6DWpvxzTbugaG5otLQJKTk+1z81/KsJwQqc1+24v+yuywc1LM7aq7w== +"@angular/platform-browser@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-20.3.25.tgz#f738f1895415c76932b5064d04b4493d17159cdf" + integrity sha512-0k06U/AJRQifGMLkcU3R9uEHWbuKEzkKMuKcGagXTrkeFvCG2Ub4JdsbcjFNWB2bspWgaxIMSceuj7c83U5wOA== dependencies: tslib "^2.3.0" -"@angular/router@20.3.19": - version "20.3.19" - resolved "https://registry.yarnpkg.com/@angular/router/-/router-20.3.19.tgz#2346ff945a8039194ba921a473a8f4565a92b949" - integrity sha512-qHrMniHOsCJ4neZmcQVodjutJilyXAXk7EhLa931QyL0qyVKVomv6E0I3UFzRaC3ZeHc+hzBdU6C6bvMFKTl1g== +"@angular/router@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@angular/router/-/router-20.3.25.tgz#0b79c6c0a0f4212002713c03bbb2709dbd79c546" + integrity sha512-YIjLHWAufTaukNj15hEoys29e7XNhnCRsS1/95h/OqR69R3adbB8hV7ut7gO6XdXokriYqb4gtoUjoESxR+xFQ== dependencies: tslib "^2.3.0" @@ -1382,135 +1382,135 @@ resolved "https://registry.yarnpkg.com/@es-joy/resolve.exports/-/resolve.exports-1.2.0.tgz#fe541a68aa080255f798c8561714ac8fad72cdd5" integrity sha512-Q9hjxWI5xBM+qW2enxfe8wDKdFWMfd0Z29k5ZJnuBqD/CasY5Zryj09aCA6owbGATWz+39p5uIdaHXpopOcG8g== -"@esbuild/aix-ppc64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.28.0.tgz#7a289c158e29cbf59ea0afc83cc80f06d1c89402" - integrity sha512-lhRUCeuOyJQURhTxl4WkpFTjIsbDayJHih5kZC1giwE+MhIzAb7mEsQMqMf18rHLsrb5qI1tafG20mLxEWcWlA== - -"@esbuild/android-arm64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.28.0.tgz#b8828d9edfa3a92660644eb8de6e4f3c203d7b17" - integrity sha512-+WzIXQOSaGs33tLEgYPYe/yQHf0WTU0X42Jca3y8NWMbUVhp7rUnw+vAsRC/QiDrdD31IszMrZy+qwPOPjd+rw== - -"@esbuild/android-arm@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.28.0.tgz#5ec1847605e05b5dbe5df90db9ff7e3e4c58dca7" - integrity sha512-wqh0ByljabXLKHeWXYLqoJ5jKC4XBaw6Hk08OfMrCRd2nP2ZQ5eleDZC41XHyCNgktBGYMbqnrJKq/K/lzPMSQ== - -"@esbuild/android-x64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.28.0.tgz#390642175b88ef82bad4cce03f8ab13fe9b1912e" - integrity sha512-+VJggoaKhk2VNNqVL7f6S189UzShHC/mR9EE8rDdSkdpN0KflSwWY/gWjDrNxxisg8Fp1ZCD9jLMo4m0OUfeUA== - -"@esbuild/darwin-arm64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.28.0.tgz#ae45325960d5950cd6951e4f97396f4e1ff7d8d3" - integrity sha512-0T+A9WZm+bZ84nZBtk1ckYsOvyA3x7e2Acj1KdVfV4/2tdG4fzUp91YHx+GArWLtwqp77pBXVCPn2We7Letr0Q== - -"@esbuild/darwin-x64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.28.0.tgz#c079247d589b6b99449659d94f06951b84bff2e4" - integrity sha512-fyzLm/DLDl/84OCfp2f/XQ4flmORsjU7VKt8HLjvIXChJoFFOIL6pLJPH4Yhd1n1gGFF9mPwtlN5Wf82DZs+LQ== - -"@esbuild/freebsd-arm64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.0.tgz#45c456215a486593c94900297202dc11c880a37a" - integrity sha512-l9GeW5UZBT9k9brBYI+0WDffcRxgHQD8ShN2Ur4xWq/NFzUKm3k5lsH4PdaRgb2w7mI9u61nr2gI2mLI27Nh3Q== - -"@esbuild/freebsd-x64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.28.0.tgz#0399494c1c85e4388e9b7040bd60d48f2a5b0d2c" - integrity sha512-BXoQai/A0wPO6Es3yFJ7APCiKGc1tdAEOgeTNy3SsB491S3aHn4S4r3e976eUnPdU+NbdtmBuLncYir2tMU9Nw== - -"@esbuild/linux-arm64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.28.0.tgz#d6d9f09ef0de54116bf459a4d53cac7e0952fe39" - integrity sha512-RVyzfb3FWsGA55n6WY0MEIEPURL1FcbhFE6BffZEMEekfCzCIMtB5yyDcFnVbTnwk+CLAgTujmV/Lgvih56W+A== - -"@esbuild/linux-arm@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.28.0.tgz#7b42ffa84c288ae94fdc431c1b28a89e3c3b9278" - integrity sha512-CjaaREJagqJp7iTaNQjjidaNbCKYcd4IDkzbwwxtSvjI7NZm79qiHc8HqciMddQ6CKvJT6aBd8lO9kN/ZudLlw== - -"@esbuild/linux-ia32@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.28.0.tgz#deb15d112ed8dd605346b6b953d23a21ff81253f" - integrity sha512-KBnSTt1kxl9x70q+ydterVdl+Cn0H18ngRMRCEQfrbqdUuntQQ0LoMZv47uB97NljZFzY6HcfqEZ2SAyIUTQBQ== - -"@esbuild/linux-loong64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.28.0.tgz#81fb89d07eecc79b157dea61033757726fce0ca4" - integrity sha512-zpSlUce1mnxzgBADvxKXX5sl8aYQHo2ezvMNI8I0lbblJtp8V4odlm3Yzlj7gPyt3T8ReksE6bK+pT3WD+aJRg== - -"@esbuild/linux-mips64el@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.28.0.tgz#d0e42691b3ff7af9fb2217b70fc01f343bdb62bb" - integrity sha512-2jIfP6mmjkdmeTlsX/9vmdmhBmKADrWqN7zcdtHIeNSCH1SqIoNI63cYsjQR8J+wGa4Y5izRcSHSm8K3QWmk3w== - -"@esbuild/linux-ppc64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.28.0.tgz#389f3e5e98f17d477c467cc87136e1a076eead87" - integrity sha512-bc0FE9wWeC0WBm49IQMPSPILRocGTQt3j5KPCA8os6VprfuJ7KD+5PzESSrJ6GmPIPJK965ZJHTUlSA6GNYEhg== - -"@esbuild/linux-riscv64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.28.0.tgz#763bd60d59b242be12da1e67d5729f3024c605fa" - integrity sha512-SQPZOwoTTT/HXFXQJG/vBX8sOFagGqvZyXcgLA3NhIqcBv1BJU1d46c0rGcrij2B56Z2rNiSLaZOYW5cUk7yLQ== - -"@esbuild/linux-s390x@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.28.0.tgz#aac6061634872e4677de693bce8030d73b1fd055" - integrity sha512-SCfR0HN8CEEjnYnySJTd2cw0k9OHB/YFzt5zgJEwa+wL/T/raGWYMBqwDNAC6dqFKmJYZoQBRfHjgwLHGSrn3Q== - -"@esbuild/linux-x64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.28.0.tgz#4f2917747188fe77632bcec65b2d84b422419779" - integrity sha512-us0dSb9iFxIi8srnpl931Nvs65it/Jd2a2K3qs7fz2WfGPHqzfzZTfec7oxZJRNPXPnNYZtanmRc4AL/JwVzHQ== - -"@esbuild/netbsd-arm64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.0.tgz#814df0ae57a0c386814491b8397eeba82094a947" - integrity sha512-CR/RYotgtCKwtftMwJlUU7xCVNg3lMYZ0RzTmAHSfLCXw3NtZtNpswLEj/Kkf6kEL3Gw+BpOekRX0BYCtklhUw== - -"@esbuild/netbsd-x64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.28.0.tgz#e01bdf7e60fa1a08e46d46d960b0d9bb8ac210af" - integrity sha512-nU1yhmYutL+fQ71Kxnhg8uEOdC0pwEW9entHykTgEbna2pw2dkbFSMeqjjyHZoCmt8SBkOSvV+yNmm94aUrrqw== - -"@esbuild/openbsd-arm64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.0.tgz#4a15c36aacca68d2d5a4c90b710c06759f4c1ffa" - integrity sha512-cXb5vApOsRsxsEl4mcZ1XY3D4DzcoMxR/nnc4IyqYs0rTI8ZKmW6kyyg+11Z8yvgMfAEldKzP7AdP64HnSC/6g== - -"@esbuild/openbsd-x64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.28.0.tgz#475e6101498a8ecce3008d7c388111d7a27c17bd" - integrity sha512-8wZM2qqtv9UP3mzy7HiGYNH/zjTA355mpeuA+859TyR+e+Tc08IHYpLJuMsfpDJwoLo1ikIJI8jC3GFjnRClzA== - -"@esbuild/openharmony-arm64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.0.tgz#cfdc3957f0b7a69f1bde129aad17fcc2f6fa033e" - integrity sha512-FLGfyizszcef5C3YtoyQDACyg95+dndv79i2EekILBofh5wpCa1KuBqOWKrEHZg3zrL3t5ouE5jgr94vA+Wb2w== - -"@esbuild/sunos-x64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.28.0.tgz#a013c856fecacd1c3aec985c8afe1d1cb017497d" - integrity sha512-1ZgjUoEdHZZl/YlV76TSCz9Hqj9h9YmMGAgAPYd+q4SicWNX3G5GCyx9uhQWSLcbvPW8Ni7lj4gDa1T40akdlw== - -"@esbuild/win32-arm64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.28.0.tgz#eae05e0f35271cad3898b43168d3e9a3bbaf47e5" - integrity sha512-Q9StnDmQ/enxnpxCCLSg0oo4+34B9TdXpuyPeTedN/6+iXBJ4J+zwfQI28u/Jl40nOYAxGoNi7mFP40RUtkmUA== - -"@esbuild/win32-ia32@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.28.0.tgz#06161ebc5bf75c08d69feb3c6b22560515913998" - integrity sha512-zF3ag/gfiCe6U2iczcRzSYJKH1DCI+ByzSENHlM2FcDbEeo5Zd2C86Aq0tKUYAJJ1obRP84ymxIAksZUcdztHA== - -"@esbuild/win32-x64@0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.28.0.tgz#04d90d5752b4ce65d2b6ac25eba08ff7624fe07c" - integrity sha512-pEl1bO9mfAmIC+tW5btTmrKaujg3zGtUmWNdCw/xs70FBjwAL3o9OEKNHvNmnyylD6ubxUERiEhdsL0xBQ9efw== +"@esbuild/aix-ppc64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz#7a01a8d2ec2fbb2dac78adad09b0fa781e4082be" + integrity sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ== + +"@esbuild/android-arm64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz#b540a27d14e4afd058496a4dbec4d3f414db110a" + integrity sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg== + +"@esbuild/android-arm@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.28.1.tgz#704bd297de6d762de54eabbeafbf55f6756abe2f" + integrity sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ== + +"@esbuild/android-x64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.28.1.tgz#d1cb166d34b0fbf0fe8ab460a5594f24a378701e" + integrity sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng== + +"@esbuild/darwin-arm64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz#1034b26457fc886368fe61bbd09f653f6afa8e54" + integrity sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q== + +"@esbuild/darwin-x64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz#65556a432a1e4d72032d8218c1932fcca1a49772" + integrity sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ== + +"@esbuild/freebsd-arm64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz#2e61e0592f9030d7e3dae18ee25ebc535918aef6" + integrity sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw== + +"@esbuild/freebsd-x64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz#c95ec289959ef8079c4dca817a1e2c4be66b9bd3" + integrity sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ== + +"@esbuild/linux-arm64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz#40b22175dda06182f3ee8141186c5ff304c4a717" + integrity sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g== + +"@esbuild/linux-arm@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz#c09a0f67917592ac0de892a9be4d3814debd2a6c" + integrity sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ== + +"@esbuild/linux-ia32@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz#a580f9c676797833891e519fc7a1337c8afd8db3" + integrity sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w== + +"@esbuild/linux-loong64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz#46452cf321dc7f9e91c2fa780a56bb56e79cd68b" + integrity sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg== + +"@esbuild/linux-mips64el@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz#4211b3184dd6608f53dcb22e39f5d34ee08852c8" + integrity sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ== + +"@esbuild/linux-ppc64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz#697857c2a61cb9b0b6bb6652e40c1dc5e1ca8e5d" + integrity sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ== + +"@esbuild/linux-riscv64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz#d192943eb146a40ac4c6497d0cf7be35b986bf08" + integrity sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ== + +"@esbuild/linux-s390x@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz#acea0356da0e0ebc08f97cf7b9c2e401e1e648dc" + integrity sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag== + +"@esbuild/linux-x64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz#6f0c3ce0cb64c534b70c4c45ecb2c16d34e35dfd" + integrity sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA== + +"@esbuild/netbsd-arm64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz#8bcd77077a0dce3378b574fedb26d2a253b73d36" + integrity sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw== + +"@esbuild/netbsd-x64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz#e7fb2a01e99c830c94e6623cd9fefb4c8fb58347" + integrity sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg== + +"@esbuild/openbsd-arm64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz#c52909372db8b86e2c55e05a8940033b5660a3b2" + integrity sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q== + +"@esbuild/openbsd-x64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz#c427b9be5a64c262ff9a7eb70b5fbbaadf446c6c" + integrity sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw== + +"@esbuild/openharmony-arm64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz#dc9b147baca2e6c4b3c85571741ef4860a489097" + integrity sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg== + +"@esbuild/sunos-x64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz#ce866d12df13c15e4c99f073a3d466f6e0649b3a" + integrity sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ== + +"@esbuild/win32-arm64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz#7468e3692d01d629d5941e5d83817bb80f9e39b4" + integrity sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA== + +"@esbuild/win32-ia32@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz#a5bc0063fb2bcab6d0ed63f2a1537958bc269ec6" + integrity sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg== + +"@esbuild/win32-x64@0.28.1": + version "0.28.1" + resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz#10064ee44f4347b90c9a02b446bbf80a91632b12" + integrity sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A== "@eslint-community/eslint-utils@^4.8.0", "@eslint-community/eslint-utils@^4.9.1": version "4.9.1" @@ -2386,10 +2386,10 @@ dependencies: tslib "^2.0.0" -"@ngtools/webpack@20.3.24": - version "20.3.24" - resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-20.3.24.tgz#8e344ebaea46d7e669220f02a33bb61826bb35f6" - integrity sha512-PIP9hFVF6OOmDxG0s6vX7cHm/6wwWK8jXd6e1I/CewR0zpVPtR1vxhhw9CrY4VEUCFSL6x2NuW/U3cI7LU+Z1Q== +"@ngtools/webpack@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-20.3.25.tgz#18e676da66c10b6810aac8b5aee9a10432e03e9a" + integrity sha512-p/YopAgukaIvezv3hsJzJevnNUBNTM8UQIkyDHPY5/aANdKraUTKDQUwlVxRiyD8U+PTSeD/BI56oOnuKrdFZQ== "@ngx-translate/core@^17.0.0": version "17.0.0" @@ -2740,13 +2740,13 @@ resolved "https://registry.yarnpkg.com/@sanity/diff-match-patch/-/diff-match-patch-3.2.0.tgz#7ce587273f7372a146308cb1075ba26177d42cdb" integrity sha512-4hPADs0qUThFZkBK/crnfKKHg71qkRowfktBljH2UIxGHHTxIzt8g8fBiXItyCjxkuNy+zpYOdRMifQNv8+Yww== -"@schematics/angular@20.3.24": - version "20.3.24" - resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-20.3.24.tgz#1cef967a08a55336b296dfd0e2c5207dc1c43226" - integrity sha512-GNB8zI8Lz0rJl4Q7FH4Y8ZmRpODkNDKGxWObfZ39POgiyr3CtT5sMRTQq1lWRWTlZeV8uD51DvW/EsAsbaS4HA== +"@schematics/angular@20.3.25": + version "20.3.25" + resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-20.3.25.tgz#bf22b66390eb8fb8cf125f07ba3718077642c721" + integrity sha512-ezoJpPKhhjXgE3LxuNcJO/ghSXs8f73xrqGvqouag7IbuliJYbHrt22WH3X75XSbD0+iOdiqA2bARvAO/ezyxQ== dependencies: - "@angular-devkit/core" "20.3.24" - "@angular-devkit/schematics" "20.3.24" + "@angular-devkit/core" "20.3.25" + "@angular-devkit/schematics" "20.3.25" jsonc-parser "3.3.1" "@sigstore/bundle@^4.0.0": @@ -5712,37 +5712,37 @@ esbuild-wasm@0.28.0: resolved "https://registry.yarnpkg.com/esbuild-wasm/-/esbuild-wasm-0.28.0.tgz#e2e60b86ed19e0f6f5a1e6c1c722f5a811d7d5f7" integrity sha512-5TRVKExcEmeMkccIZMzUq+Az6X2RoMAJyfl6SMMO1dMVhmvt0I2mx7gAb6zYi42n4d1ETcatFXazGKzA+aW7fg== -esbuild@0.28.0, esbuild@^0.27.0: - version "0.28.0" - resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.28.0.tgz#5dee347ffb3e3874212a35a69836b077b1ce6d96" - integrity sha512-sNR9MHpXSUV/XB4zmsFKN+QgVG82Cc7+/aaxJ8Adi8hyOac+EXptIp45QBPaVyX3N70664wRbTcLTOemCAnyqw== +esbuild@0.28.0, esbuild@0.28.1, esbuild@^0.27.0: + version "0.28.1" + resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.28.1.tgz#ef45b4634c9c9d97a296aea4114a5f9840f95578" + integrity sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw== optionalDependencies: - "@esbuild/aix-ppc64" "0.28.0" - "@esbuild/android-arm" "0.28.0" - "@esbuild/android-arm64" "0.28.0" - "@esbuild/android-x64" "0.28.0" - "@esbuild/darwin-arm64" "0.28.0" - "@esbuild/darwin-x64" "0.28.0" - "@esbuild/freebsd-arm64" "0.28.0" - "@esbuild/freebsd-x64" "0.28.0" - "@esbuild/linux-arm" "0.28.0" - "@esbuild/linux-arm64" "0.28.0" - "@esbuild/linux-ia32" "0.28.0" - "@esbuild/linux-loong64" "0.28.0" - "@esbuild/linux-mips64el" "0.28.0" - "@esbuild/linux-ppc64" "0.28.0" - "@esbuild/linux-riscv64" "0.28.0" - "@esbuild/linux-s390x" "0.28.0" - "@esbuild/linux-x64" "0.28.0" - "@esbuild/netbsd-arm64" "0.28.0" - "@esbuild/netbsd-x64" "0.28.0" - "@esbuild/openbsd-arm64" "0.28.0" - "@esbuild/openbsd-x64" "0.28.0" - "@esbuild/openharmony-arm64" "0.28.0" - "@esbuild/sunos-x64" "0.28.0" - "@esbuild/win32-arm64" "0.28.0" - "@esbuild/win32-ia32" "0.28.0" - "@esbuild/win32-x64" "0.28.0" + "@esbuild/aix-ppc64" "0.28.1" + "@esbuild/android-arm" "0.28.1" + "@esbuild/android-arm64" "0.28.1" + "@esbuild/android-x64" "0.28.1" + "@esbuild/darwin-arm64" "0.28.1" + "@esbuild/darwin-x64" "0.28.1" + "@esbuild/freebsd-arm64" "0.28.1" + "@esbuild/freebsd-x64" "0.28.1" + "@esbuild/linux-arm" "0.28.1" + "@esbuild/linux-arm64" "0.28.1" + "@esbuild/linux-ia32" "0.28.1" + "@esbuild/linux-loong64" "0.28.1" + "@esbuild/linux-mips64el" "0.28.1" + "@esbuild/linux-ppc64" "0.28.1" + "@esbuild/linux-riscv64" "0.28.1" + "@esbuild/linux-s390x" "0.28.1" + "@esbuild/linux-x64" "0.28.1" + "@esbuild/netbsd-arm64" "0.28.1" + "@esbuild/netbsd-x64" "0.28.1" + "@esbuild/openbsd-arm64" "0.28.1" + "@esbuild/openbsd-x64" "0.28.1" + "@esbuild/openharmony-arm64" "0.28.1" + "@esbuild/sunos-x64" "0.28.1" + "@esbuild/win32-arm64" "0.28.1" + "@esbuild/win32-ia32" "0.28.1" + "@esbuild/win32-x64" "0.28.1" escalade@^3.1.1, escalade@^3.2.0: version "3.2.0" @@ -6265,15 +6265,15 @@ foreground-child@^3.1.0: signal-exit "^4.0.1" form-data@4.0.0, form-data@>=4.0.4: - version "4.0.5" - resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.5.tgz#b49e48858045ff4cbf6b03e1805cebcad3679053" - integrity sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w== + version "4.0.6" + resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.6.tgz#28e864e1b786dbebb68db1f452f9635278665827" + integrity sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ== dependencies: asynckit "^0.4.0" combined-stream "^1.0.8" es-set-tostringtag "^2.1.0" - hasown "^2.0.2" - mime-types "^2.1.12" + hasown "^2.0.4" + mime-types "^2.1.35" formdata-polyfill@^4.0.10: version "4.0.10" @@ -6558,17 +6558,17 @@ has-tostringtag@^1.0.2: dependencies: has-symbols "^1.0.3" -hasown@^2.0.2: - version "2.0.2" - resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003" - integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ== +hasown@^2.0.2, hasown@^2.0.4: + version "2.0.4" + resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.4.tgz#8c62d8cb90beb2aad5d0a5b67581ad9854c3f003" + integrity sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A== dependencies: function-bind "^1.1.2" hono@^4.11.4: - version "4.12.8" - resolved "https://registry.yarnpkg.com/hono/-/hono-4.12.8.tgz#5f3a9c0d5339ff460b2c652a4c64dd79059930ad" - integrity sha512-VJCEvtrezO1IAR+kqEYnxUOoStaQPGrCmX3j4wDTNOcD1uRPFpGlwQUIW8niPuvHXaTUxeOUl5MMDGrl+tmO9A== + version "4.12.25" + resolved "https://registry.yarnpkg.com/hono/-/hono-4.12.25.tgz#f2d9996a54e8c9c0c5f5de1c8f3a962e43a98c4e" + integrity sha512-2NFaIyNVgJmBs/ecmtGzlmluTFs5cHEWGTdu0t1HBwYzoGXOL5nUQBRMXsXWla5i4KkG//QMzVP88m1+I3fdAQ== hosted-git-info@^9.0.0: version "9.0.2" @@ -7232,9 +7232,9 @@ js-beautify@1.15.4: nopt "^7.2.1" js-cookie@^3.0.5: - version "3.0.5" - resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc" - integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw== + version "3.0.8" + resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.8.tgz#444e6f4b27a5d844594fef61c9d6bca5f0787688" + integrity sha512-yeJd4aNAdYZQjaon2bpD/Gb0B/omw7HQOsynXXcOiWVCacbBcPlgn8S/d1X6blFSaHao7ozqtW7NZW19xpCtIw== js-tokens@^4.0.0: version "4.0.0" @@ -7865,7 +7865,7 @@ mime-db@1.52.0: resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.54.0.tgz#cddb3ee4f9c64530dff640236661d42cb6a314f5" integrity sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ== -mime-types@^2.1.12, mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34: +mime-types@^2.1.27, mime-types@^2.1.31, mime-types@^2.1.35, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34: version "2.1.35" resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a" integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw== @@ -8742,6 +8742,11 @@ pbf@^3.2.1, pbf@^3.3.0: ieee754 "^1.1.12" resolve-protobuf-schema "^2.1.0" +photoswipe@^5.4.4: + version "5.4.4" + resolved "https://registry.yarnpkg.com/photoswipe/-/photoswipe-5.4.4.tgz#e045dc036453493188d5c8665b0e8f1000ac4d6e" + integrity sha512-WNFHoKrkZNnvFFhbHL93WDkW3ifwVOXSW3w1UuZZelSmgXpIGiZSNlZJq37rR8YejqME2rHs9EhH9ZvlvFH2NA== + picocolors@^1.0.0, picocolors@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b" @@ -8916,10 +8921,10 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^ resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== -postcss@8.5.6, postcss@^8.2.14, postcss@^8.4.33, postcss@^8.4.4, postcss@^8.4.47, postcss@^8.4.49, postcss@^8.5.6: - version "8.5.6" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.6.tgz#2825006615a619b4f62a9e7426cc120b349a8f3c" - integrity sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg== +postcss@8.5.12, postcss@^8.2.14, postcss@^8.4.33, postcss@^8.4.4, postcss@^8.4.47, postcss@^8.4.49, postcss@^8.5.6: + version "8.5.12" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.12.tgz#cd0c0f667f7cb0521e2313234ea6e707a9ec1ddb" + integrity sha512-W62t/Se6rA0Az3DfCL0AqJwXuKwBeYg6nOaIgzP+xZ7N5BFCI7DYi1qs6ygUYT6rvfi6t9k65UMLJC+PHZpDAA== dependencies: nanoid "^3.3.11" picocolors "^1.1.1" @@ -9643,9 +9648,9 @@ shebang-regex@^3.0.0: integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A== shell-quote@^1.8.1: - version "1.8.1" - resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.1.tgz#6dbf4db75515ad5bac63b4f1894c3a154c766680" - integrity sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA== + version "1.8.4" + resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.4.tgz#2edd9a4dcefc96649e2e2cb12f637b1f1d92a190" + integrity sha512-VsC6n6vz1ihYYyZZwX7YZSF5l5x36ca17OC+a69h94YqB7X6XLwf+5MOgynYir2SLFUbl8gIYvBo8K8RoNQ6bQ== side-channel-list@^1.0.0: version "1.0.0" @@ -10232,9 +10237,9 @@ tinyqueue@^3.0.0: integrity sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g== tmp@^0.2.4: - version "0.2.5" - resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.5.tgz#b06bcd23f0f3c8357b426891726d16015abfd8f8" - integrity sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow== + version "0.2.7" + resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.7.tgz#26f4db11d1601ce8012dcb8a798ece1c06a99059" + integrity sha512-e0votIpp4Uo2AJYSzVHV6xCcawuiez3DzqDAbrTc3YxBkplN6e+dM13ZeIcZnDg/QpSuU2zfZ3rzwY8ukEnaXw== to-regex-range@^5.0.1: version "5.0.1" @@ -10584,10 +10589,10 @@ vary@^1, vary@^1.1.2, vary@~1.1.2: resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg== -vite@7.3.2: - version "7.3.2" - resolved "https://registry.yarnpkg.com/vite/-/vite-7.3.2.tgz#cb041794d4c1395e28baea98198fd6e8f4b96b5c" - integrity sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg== +vite@7.3.2, vite@7.3.5: + version "7.3.5" + resolved "https://registry.yarnpkg.com/vite/-/vite-7.3.5.tgz#90c2d0b7b94a224e7e7dcf22d2912ff0b5291165" + integrity sha512-KuOaNhcnGFN2zIPGA7wRmzF+lJA1sea7rHq17aiJ++9lzY1WWG6Jpwqwe1KNbRVPIqHmr8GLYx7jbrQcN/7/ww== dependencies: esbuild "^0.27.0" fdir "^6.5.0" @@ -10945,9 +10950,9 @@ wrappy@1: integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ== ws@^8.18.0: - version "8.19.0" - resolved "https://registry.yarnpkg.com/ws/-/ws-8.19.0.tgz#ddc2bdfa5b9ad860204f5a72a4863a8895fd8c8b" - integrity sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg== + version "8.21.0" + resolved "https://registry.yarnpkg.com/ws/-/ws-8.21.0.tgz#012e413fc07429945121b0c153158c4343086951" + integrity sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g== wsl-utils@^0.1.0: version "0.1.0"