Browse Source

Merge with feature/iot-hub

pull/15646/head
Igor Kulikov 3 months ago
parent
commit
b3503c6017
  1. 2
      ui-ngx/src/app/core/services/menu.models.ts
  2. 20
      ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html
  3. 35
      ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss
  4. 62
      ui-ngx/src/app/modules/home/components/iot-hub/_iot-hub-common.scss
  5. 40
      ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.html
  6. 46
      ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.scss
  7. 13
      ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.ts
  8. 31
      ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-table.component.html
  9. 21
      ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-table.component.scss
  10. 8
      ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-table.component.ts
  11. 13
      ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-search.component.html
  12. 19
      ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-search.component.scss
  13. 24
      ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-search.component.ts
  14. 17
      ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts
  15. 90
      ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.html
  16. 299
      ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.scss
  17. 64
      ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.ts
  18. 24
      ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.html
  19. 80
      ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.scss
  20. 4
      ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.ts
  21. 2
      ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-items-page.component.ts
  22. 2
      ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-routing.module.ts
  23. 20
      ui-ngx/src/app/shared/components/toggle-header.component.html
  24. 6
      ui-ngx/src/app/shared/components/toggle-header.component.ts
  25. BIN
      ui-ngx/src/assets/iot-hub/category-alarm-rules-img.png
  26. BIN
      ui-ngx/src/assets/iot-hub/category-calculated-fields-img.png
  27. 233
      ui-ngx/src/assets/iot-hub/category-calculated-fields-img.svg
  28. 84
      ui-ngx/src/assets/iot-hub/category-dashboards-img.svg
  29. BIN
      ui-ngx/src/assets/iot-hub/category-device-library-img.png
  30. 95
      ui-ngx/src/assets/iot-hub/category-device-library-img.svg
  31. BIN
      ui-ngx/src/assets/iot-hub/category-rule-chains-img.png
  32. 107
      ui-ngx/src/assets/iot-hub/category-rule-chains-img.svg
  33. BIN
      ui-ngx/src/assets/iot-hub/category-solution-templates-img.png
  34. BIN
      ui-ngx/src/assets/iot-hub/category-widgets-img.png
  35. 181
      ui-ngx/src/assets/iot-hub/category-widgets-img.svg
  36. 48
      ui-ngx/src/assets/iot-hub/hero-alarm-rule-cluster.svg
  37. 71
      ui-ngx/src/assets/iot-hub/hero-calculated-field-cluster.svg
  38. 25
      ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-1.svg
  39. 25
      ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-2.svg
  40. 25
      ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-3.svg
  41. 25
      ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-4.svg
  42. 30
      ui-ngx/src/assets/iot-hub/hero-dashboard-icon-1.svg
  43. 25
      ui-ngx/src/assets/iot-hub/hero-dashboard-icon-2.svg
  44. 30
      ui-ngx/src/assets/iot-hub/hero-dashboard-icon-3.svg
  45. 30
      ui-ngx/src/assets/iot-hub/hero-dashboard-icon-4.svg
  46. 138
      ui-ngx/src/assets/iot-hub/hero-device-cluster.svg
  47. 25
      ui-ngx/src/assets/iot-hub/hero-device-icon-1.svg
  48. 25
      ui-ngx/src/assets/iot-hub/hero-device-icon-2.svg
  49. 25
      ui-ngx/src/assets/iot-hub/hero-device-icon-3.svg
  50. 30
      ui-ngx/src/assets/iot-hub/hero-device-icon-4.svg
  51. 72
      ui-ngx/src/assets/iot-hub/hero-rule-chain-cluster.svg
  52. 25
      ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-1.svg
  53. 25
      ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-2.svg
  54. 25
      ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-3.svg
  55. 35
      ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-4.svg
  56. 57
      ui-ngx/src/assets/iot-hub/hero-solution-template-cluster.svg
  57. 25
      ui-ngx/src/assets/iot-hub/hero-solution-template-icon-1.svg
  58. 25
      ui-ngx/src/assets/iot-hub/hero-solution-template-icon-2.svg
  59. 25
      ui-ngx/src/assets/iot-hub/hero-solution-template-icon-3.svg
  60. 25
      ui-ngx/src/assets/iot-hub/hero-solution-template-icon-4.svg
  61. 57
      ui-ngx/src/assets/iot-hub/hero-widget-cluster.svg
  62. 27
      ui-ngx/src/assets/iot-hub/hero-widget-icon-1.svg
  63. 25
      ui-ngx/src/assets/iot-hub/hero-widget-icon-2.svg
  64. 35
      ui-ngx/src/assets/iot-hub/hero-widget-icon-3.svg
  65. 35
      ui-ngx/src/assets/iot-hub/hero-widget-icon-4.svg
  66. 150
      ui-ngx/src/assets/iot-hub/items-page-alarm-rules-hero.svg
  67. 112
      ui-ngx/src/assets/iot-hub/items-page-calculated-fields-hero.svg
  68. 351
      ui-ngx/src/assets/iot-hub/items-page-devices-hero.svg
  69. 12
      ui-ngx/src/assets/locale/locale.constant-en_US.json

2
ui-ngx/src/app/core/services/menu.models.ts

@ -750,7 +750,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
name: 'iot-hub.iot-hub',
type: 'link',
path: '/iot-hub',
icon: 'store',
icon: 'hub',
isNew: true
}
]

20
ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html

@ -19,13 +19,25 @@
<mat-toolbar color="primary" class="tb-widget-select-header flex flex-col">
<div class="tb-widget-select-title-row flex flex-row items-center">
@if (showTopLevelWidgetModeToggle()) {
<tb-toggle-select appearance="fill-invert"
<tb-toggle-select class="tb-top-level-widget-mode-toggle"
appearance="fill-invert"
[disablePagination]="true"
selectMediaBreakpoint="xs"
[(ngModel)]="selectWidgetMode">
<tb-toggle-option value="installed">{{ 'widget.installed' | translate }}</tb-toggle-option>
<tb-toggle-option value="iotHub">{{ 'iot-hub.iot-hub' | translate }}</tb-toggle-option>
<tb-toggle-option value="installed" [template]="installedWidgetsOption"></tb-toggle-option>
<tb-toggle-option value="iotHub" [template]="iotHubWidgetsOption"></tb-toggle-option>
</tb-toggle-select>
<ng-template #installedWidgetsOption>
<div class="flex items-center gap-2">
<tb-icon>now_widgets</tb-icon>
<div>{{ 'widget.installed' | translate }}</div>
</div>
</ng-template>
<ng-template #iotHubWidgetsOption>
<div class="flex items-center gap-2">
<tb-icon>hub</tb-icon>
<div>{{ 'iot-hub.iot-hub' | translate }}</div>
</div>
</ng-template>
} @else if (showBackButton()) {
<button mat-icon-button type="button" (click)="onBackClick()">
<mat-icon>arrow_back</mat-icon>

35
ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss

@ -64,6 +64,41 @@ tb-dashboard-widget-select {
}
}
.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;

62
ui-ngx/src/app/modules/home/components/iot-hub/_iot-hub-common.scss

@ -70,3 +70,65 @@
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;
}
}

40
ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.html

@ -322,28 +322,36 @@
<!-- Right content area -->
<div class="tb-iot-hub-results">
<!-- Top bar: search + filter button (mobile) -->
<div class="tb-iot-hub-results-top flex shrink-0 items-center justify-between pt-6">
<div class="tb-iot-hub-search-field flex items-center gap-2">
<mat-icon class="tb-iot-hub-search-icon">search</mat-icon>
<!-- Top bar: search + sort + filter button (mobile) -->
<div class="tb-iot-hub-results-top flex shrink-0 items-center gap-4 pt-6">
<div class="tb-iot-hub-search-field flex flex-1 items-center">
<input class="tb-iot-hub-search-input"
[placeholder]="'iot-hub.search' | translate"
[placeholder]="searchPlaceholderKey | translate"
[value]="textSearch"
(input)="onSearchChange($any($event.target).value)">
@if (textSearch) {
<button mat-icon-button class="tb-iot-hub-search-clear" (click)="onSearchChange('')">
<button mat-icon-button class="tb-iot-hub-search-action" (click)="onSearchChange('')">
<mat-icon>close</mat-icon>
</button>
} @else {
<span class="tb-iot-hub-search-action tb-iot-hub-search-action-static" aria-hidden="true">
<mat-icon>search</mat-icon>
</span>
}
</div>
<button mat-stroked-button color="primary" class="tb-iot-hub-filter-toggle-btn" (click)="filterDrawerOpened = true">
<mat-icon>filter_list</mat-icon>
{{ 'iot-hub.filter' | translate }}@if (activeFilterCount) {: {{ activeFilterCount }}}
<button mat-button color="primary" class="tb-iot-hub-sort-btn" [matMenuTriggerFor]="sortMenu">
{{ sortOptions[selectedSortIndex].label | translate }}
<mat-icon iconPositionEnd>arrow_drop_down</mat-icon>
</button>
<mat-menu #sortMenu="matMenu">
@for (option of sortOptions; track option.value; let i = $index) {
<button mat-menu-item (click)="onSortChange(i)">{{ option.label | translate }}</button>
}
</mat-menu>
</div>
<!-- Sort row: results count + filter chips + sort -->
<div class="tb-iot-hub-sort-row flex shrink-0 flex-wrap items-center gap-2 py-2">
<!-- Filter chips row: results count + filter chips -->
<div class="tb-iot-hub-sort-row flex shrink-0 flex-wrap items-center gap-2">
<span class="tb-iot-hub-results-count">
{{ 'iot-hub.results-count' | translate:{ count: totalElements } }}
</span>
@ -391,16 +399,10 @@
{{ 'iot-hub.clear-all' | translate }}
</button>
}
<span class="flex-1"></span>
<button mat-button color="primary" class="tb-iot-hub-sort-btn" [matMenuTriggerFor]="sortMenu">
<button mat-stroked-button color="primary" class="tb-iot-hub-filter-toggle-btn ml-auto" (click)="filterDrawerOpened = true">
<mat-icon>filter_list</mat-icon>
{{ sortOptions[selectedSortIndex].label | translate }}
{{ 'iot-hub.filter' | translate }}@if (activeFilterCount) {: {{ activeFilterCount }}}
</button>
<mat-menu #sortMenu="matMenu">
@for (option of sortOptions; track option.value; let i = $index) {
<button mat-menu-item (click)="onSortChange(i)">{{ option.label | translate }}</button>
}
</mat-menu>
</div>
<!-- Loading -->

46
ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.scss

@ -325,27 +325,49 @@
}
.tb-iot-hub-search-field {
@include tb-iot-hub-search-container;
width: 320px;
}
.tb-iot-hub-search-icon {
@include tb-iot-hub-search-icon;
@include tb-iot-hub-page-search-container;
}
.tb-iot-hub-search-input {
@include tb-iot-hub-search-input-text;
@include tb-iot-hub-page-search-input;
}
.tb-iot-hub-search-clear.mat-mdc-icon-button {
@include tb-iot-hub-search-clear;
.tb-iot-hub-search-action {
@include tb-iot-hub-page-search-action;
}
// Sort button Design: 14px Medium, primary color, with filter_list icon
// 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)
@ -557,10 +579,6 @@
width: 100%;
max-width: 100%;
}
.tb-iot-hub-search-field {
width: 200px;
}
}
@media #{$mat-xs} {

13
ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.ts

@ -93,6 +93,19 @@ export class TbIotHubBrowseComponent implements OnInit, AfterViewInit, OnDestroy
|| 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;

31
ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-table.component.html

@ -16,7 +16,7 @@
-->
<div class="tb-installed-table-container flex flex-1 flex-col overflow-hidden rounded-lg">
<div class="tb-installed-table-wrapper flex-1 overflow-auto">
<div class="tb-installed-table-wrapper flex flex-1 flex-col overflow-auto">
<table mat-table [dataSource]="dataSource" matSort matSortActive="createdTime" matSortDirection="desc">
<!-- Name -->
<ng-container matColumnDef="itemName">
@ -134,19 +134,26 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let _row; columns: displayedColumns;"></tr>
</table>
</div>
@if (isLoading) {
<div class="flex justify-center py-12">
<mat-spinner diameter="40"></mat-spinner>
</div>
}
@if (isLoading) {
<div class="flex flex-1 items-center justify-center py-12">
<mat-spinner diameter="40"></mat-spinner>
</div>
}
@if (!isLoading && dataSource.length === 0) {
<div class="tb-installed-empty py-12 text-center text-sm">
{{ 'iot-hub.no-installed-items' | translate }}
</div>
}
@if (!isLoading && dataSource.length === 0) {
<div class="tb-iot-hub-empty-state flex flex-1 flex-col items-center justify-center py-20 text-center">
<div class="tb-no-data-bg"></div>
<h3>{{ 'iot-hub.no-installed-items' | translate }}</h3>
<p>{{ 'iot-hub.no-installed-items-text' | translate }}</p>
@if (hasActiveFilters()) {
<button mat-flat-button color="primary" (click)="clearFilters.emit()">
{{ 'iot-hub.clear-all-filters' | translate }}
</button>
}
</div>
}
</div>
<!-- Paginator inside border -->
<mat-divider></mat-divider>

21
ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-table.component.scss

@ -203,8 +203,25 @@
}
}
.tb-installed-empty {
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)) {

8
ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-table.component.ts

@ -19,12 +19,14 @@ import {
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
HostBinding,
Input,
NgZone,
OnChanges,
OnDestroy,
OnInit,
Output,
SimpleChanges,
ViewChild
} from '@angular/core';
@ -59,6 +61,12 @@ export class TbIotHubInstalledItemsTableComponent implements OnInit, OnChanges,
@Input() typeFilters: string[] = [];
@Input() itemVersion: MpItemVersionView;
@Output() clearFilters = new EventEmitter<void>();
hasActiveFilters(): boolean {
return !!this.textSearch || (this.typeFilters?.length ?? 0) > 0;
}
@HostBinding('class.tb-installed-with-version') get withVersionClass() {
return !!this.itemVersion;
}

13
ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-search.component.html

@ -25,22 +25,25 @@
</div>
<!-- Search + Sort row -->
<div class="flex items-center gap-4">
<div class="tb-search-input-field">
<mat-icon class="tb-search-input-icon">search</mat-icon>
<div class="tb-search-input-field flex flex-1 items-center">
<input class="tb-search-input"
[placeholder]="'iot-hub.search' | translate"
[placeholder]="searchPlaceholderKey | translate"
[(ngModel)]="searchText"
(input)="onSearchInput()"
(keyup.enter)="onSearchEnter()">
@if (searchText) {
<button mat-icon-button class="tb-search-input-clear" (click)="clearSearch()">
<button mat-icon-button class="tb-search-input-action" (click)="clearSearch()">
<mat-icon>close</mat-icon>
</button>
} @else {
<span class="tb-search-input-action tb-search-input-action-static" aria-hidden="true">
<mat-icon>search</mat-icon>
</span>
}
</div>
<button mat-button color="primary" class="tb-search-sort-btn tb-search-sort-btn-full" [matMenuTriggerFor]="sortMenu">
<mat-icon>filter_list</mat-icon>
{{ sortOptions[selectedSortIndex].label | translate }}
<mat-icon iconPositionEnd>arrow_drop_down</mat-icon>
</button>
<button mat-icon-button color="primary" class="tb-search-sort-btn tb-search-sort-btn-icon" [matMenuTriggerFor]="sortMenu">
<mat-icon>filter_list</mat-icon>

19
ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-search.component.scss

@ -29,21 +29,15 @@
}
.tb-search-input-field {
@include tb-iot-hub-search-container;
width: 320px;
min-width: 0;
}
.tb-search-input-icon {
@include tb-iot-hub-search-icon;
@include tb-iot-hub-page-search-container;
}
.tb-search-input {
@include tb-iot-hub-search-input-text;
@include tb-iot-hub-page-search-input;
}
.tb-search-input-clear.mat-mdc-icon-button {
@include tb-iot-hub-search-clear;
.tb-search-input-action {
@include tb-iot-hub-page-search-action;
}
.tb-search-sort-btn {
@ -272,11 +266,6 @@
}
@media #{$mat-lt-sm} {
.tb-search-input-field {
width: 100%;
flex: 1;
}
.tb-search-sort-btn-full {
display: none;
}

24
ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-search.component.ts

@ -39,8 +39,8 @@ interface SortOption {
}
const TYPE_ORDER: ItemType[] = [
ItemType.WIDGET, ItemType.DASHBOARD, ItemType.SOLUTION_TEMPLATE, ItemType.DEVICE,
ItemType.CALCULATED_FIELD, ItemType.RULE_CHAIN
ItemType.DEVICE, ItemType.SOLUTION_TEMPLATE, ItemType.WIDGET,
ItemType.CALCULATED_FIELD, ItemType.ALARM_RULE, ItemType.RULE_CHAIN
];
@Component({
@ -58,6 +58,10 @@ export class TbIotHubSearchComponent implements OnInit, OnDestroy {
@Input() showCreator = true;
@Output() searchTextChange = new EventEmitter<string>();
get searchPlaceholderKey(): string {
return this.creatorId ? 'iot-hub.search-published-items' : 'iot-hub.search';
}
resultGroups: SearchResultGroup[] = [];
totalElements = 0;
isLoading = false;
@ -76,8 +80,8 @@ export class TbIotHubSearchComponent implements OnInit, OnDestroy {
installedWidgets: IotHubInstalledItem[] = [];
installedSolutionTemplates: IotHubInstalledItem[] = [];
installedDeviceCounts: Record<string, number> = {};
installedDashboardCounts: Record<string, number> = {};
installedCalcFieldCounts: Record<string, number> = {};
installedAlarmRuleCounts: Record<string, number> = {};
installedRuleChainCounts: Record<string, number> = {};
private searchSubject = new Subject<string>();
@ -172,7 +176,9 @@ export class TbIotHubSearchComponent implements OnInit, OnDestroy {
// Type helpers
isCompactType(type: ItemType): boolean {
return type === ItemType.CALCULATED_FIELD || type === ItemType.RULE_CHAIN;
return type === ItemType.CALCULATED_FIELD
|| type === ItemType.ALARM_RULE
|| type === ItemType.RULE_CHAIN;
}
getTypeLabel(type: ItemType): string {
@ -183,9 +189,9 @@ export class TbIotHubSearchComponent implements OnInit, OnDestroy {
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';
@ -213,10 +219,10 @@ export class TbIotHubSearchComponent implements OnInit, OnDestroy {
switch (item.type) {
case ItemType.DEVICE:
return this.installedDeviceCounts[item.itemId] || 0;
case ItemType.DASHBOARD:
return this.installedDashboardCounts[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:
@ -307,15 +313,15 @@ export class TbIotHubSearchComponent implements OnInit, OnDestroy {
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),
dashboardCounts: this.iotHubApiService.getInstalledItemCounts(ItemType.DASHBOARD, 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.installedDashboardCounts = results.dashboardCounts;
this.installedCalcFieldCounts = results.calcFieldCounts;
this.installedAlarmRuleCounts = results.alarmRuleCounts;
this.installedRuleChainCounts = results.ruleChainCounts;
});
}

17
ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts

@ -82,8 +82,6 @@ import {
ImportDashboardFileDialogComponent
} from "@home/pages/dashboard/import-dashboard-file-dialog.component";
import { PageLink } from "@shared/models/page/page-link";
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 DashboardsTableConfigResolver {
@ -97,7 +95,6 @@ export class DashboardsTableConfigResolver {
private dialogService: DialogService,
private homeDialogs: HomeDialogsService,
private importExport: ImportExportService,
private iotHubActions: IotHubActionsService,
private translate: TranslateService,
private datePipe: DatePipe,
private router: Router,
@ -357,12 +354,6 @@ export class DashboardsTableConfigResolver {
icon: 'file_upload',
isEnabled: () => true,
onAction: ($event) => this.importDashboard($event)
},
{
name: this.translate.instant('iot-hub.add-from-iot-hub'),
icon: 'store',
isEnabled: () => true,
onAction: ($event) => this.addDashboardFromIotHub($event)
}
);
}
@ -402,14 +393,6 @@ export class DashboardsTableConfigResolver {
}
}
addDashboardFromIotHub(_$event: Event) {
this.iotHubActions.addItem(ItemType.DASHBOARD).subscribe(result => {
if (result?.descriptor?.type === 'DASHBOARD' && result.descriptor.dashboardId?.id) {
this.router.navigateByUrl(`dashboards/${result.descriptor.dashboardId.id}`);
}
});
}
importDashboard(_$event: Event) {
this.importExport.importDashboard(this.editMissingAliases.bind(this)).subscribe(
(dashboard) => {

90
ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.html

@ -16,6 +16,13 @@
-->
<div class="tb-iot-hub-home">
<!-- Soft colored glows (left + right) tinted with the active type's color.
Sit on the page background, behind the hero/cards content. -->
<div class="tb-iot-hub-blob tb-iot-hub-blob-left"
[style.color]="activeHeroType.color"></div>
<div class="tb-iot-hub-blob tb-iot-hub-blob-right"
[style.color]="activeHeroType.color"></div>
<!-- Installed Items button -->
@if (installedItemsCount > 0) {
<button mat-stroked-button color="primary" class="tb-iot-hub-installed-btn" (click)="navigateToInstalledItems()">
@ -26,23 +33,12 @@
<!-- Hero section -->
<div class="tb-iot-hub-hero">
<!-- Background gradient overlay -->
<div class="tb-iot-hub-hero-gradient"
[style.background]="'radial-gradient(ellipse at 50% 0%, ' + activeHeroType.gradientColor + ' 0%, transparent 60%)'"></div>
<!-- Floating icons -->
<!-- Floating icons cluster (one composite SVG per type, fade between types) -->
@for (heroType of heroTypes; track heroType.type) {
@if (heroType.icons.length) {
<div class="tb-iot-hub-hero-icons"
[class.active]="heroIconsReady && activeHeroType === heroType">
@for (iconUrl of heroType.icons; track iconUrl; let i = $index) {
<div class="tb-iot-hub-hero-float-icon"
[class]="'icon-pos-' + (i + 1)">
<img [src]="iconUrl" alt="">
</div>
}
</div>
}
<div class="tb-iot-hub-hero-icons"
[class.active]="heroIconsReady && activeHeroType === heroType">
<img class="tb-iot-hub-hero-cluster" [src]="heroType.icon" alt="">
</div>
}
<div class="tb-iot-hub-hero-content">
@ -146,43 +142,51 @@
[ngClass]="card.cssClass"
(click)="navigateToBrowse(card.type)"
(keyup.enter)="navigateToBrowse(card.type)">
<span class="tb-iot-hub-category-title">{{ card.titleKey | translate }}</span>
<img class="tb-iot-hub-category-img" [src]="card.image" alt="">
<span class="tb-iot-hub-category-title">
<span class="tb-iot-hub-category-title-text">{{ card.titleKey | translate }}</span>
<mat-icon class="tb-iot-hub-category-chevron">chevron_right</mat-icon>
</span>
<div class="tb-iot-hub-category-img">
<img [src]="card.image" alt="">
</div>
</div>
}
</div>
@if (!isLoading) {
<!-- Popular Widgets -->
@if (popularWidgets.length) {
@if (hasAnyPopularItems()) {
<div class="tb-iot-hub-divider tb-iot-hub-divider-bleed"></div>
<h2 class="tb-iot-hub-most-popular-title">{{ 'iot-hub.most-popular-in-iot-hub' | translate }}</h2>
}
<!-- Devices -->
@if (popularDevices.length) {
<div class="tb-iot-hub-section">
<button mat-button class="tb-iot-hub-section-header" (click)="navigateToBrowse(ItemType.WIDGET)">
{{ 'iot-hub.popular-widgets' | translate }}
<button mat-button class="tb-iot-hub-section-header" (click)="navigateToBrowse(ItemType.DEVICE)">
{{ 'item.type-device-plural' | translate }}
<mat-icon iconPositionEnd>chevron_right</mat-icon>
</button>
<div class="tb-iot-hub-big-cards-row">
@for (item of popularWidgets; track item.id) {
@for (item of popularDevices; track item.id) {
<tb-iot-hub-item-card
[item]="item"
[installedItem]="getInstalledWidget(item)"
[installedItemsCount]="findInstalledItemsCount(item)"
[showTypeChip]="false"
[showCreator]="true"
(cardClick)="openItemDetail($event)"
(creatorClick)="navigateToCreator($event)"
(installClick)="installItem($event)"
(updateClick)="updateItem($event)"
(deleteClick)="deleteInstalledItem($event)">
(installClick)="installItem($event)">
</tb-iot-hub-item-card>
}
</div>
</div>
}
<!-- Popular Solution Templates -->
<!-- Solution Templates -->
@if (popularSolutionTemplates.length) {
<div class="tb-iot-hub-section">
<button mat-button class="tb-iot-hub-section-header" (click)="navigateToBrowse(ItemType.SOLUTION_TEMPLATE)">
{{ 'iot-hub.popular-solution-templates' | translate }}
{{ 'item.type-solution-template-plural' | translate }}
<mat-icon iconPositionEnd>chevron_right</mat-icon>
</button>
<div class="tb-iot-hub-big-cards-row">
@ -203,34 +207,36 @@
</div>
}
<!-- Popular Devices -->
@if (popularDevices.length) {
<!-- Widgets -->
@if (popularWidgets.length) {
<div class="tb-iot-hub-section">
<button mat-button class="tb-iot-hub-section-header" (click)="navigateToBrowse(ItemType.DEVICE)">
{{ 'iot-hub.popular-devices' | translate }}
<button mat-button class="tb-iot-hub-section-header" (click)="navigateToBrowse(ItemType.WIDGET)">
{{ 'item.type-widget-plural' | translate }}
<mat-icon iconPositionEnd>chevron_right</mat-icon>
</button>
<div class="tb-iot-hub-big-cards-row">
@for (item of popularDevices; track item.id) {
@for (item of popularWidgets; track item.id) {
<tb-iot-hub-item-card
[item]="item"
[installedItemsCount]="findInstalledItemsCount(item)"
[installedItem]="getInstalledWidget(item)"
[showTypeChip]="false"
[showCreator]="true"
(cardClick)="openItemDetail($event)"
(creatorClick)="navigateToCreator($event)"
(installClick)="installItem($event)">
(installClick)="installItem($event)"
(updateClick)="updateItem($event)"
(deleteClick)="deleteInstalledItem($event)">
</tb-iot-hub-item-card>
}
</div>
</div>
}
<!-- Popular Calculated Fields -->
<!-- Calculated Fields -->
@if (popularCalcFields.length) {
<div class="tb-iot-hub-section">
<button mat-button class="tb-iot-hub-section-header" (click)="navigateToBrowse(ItemType.CALCULATED_FIELD)">
{{ 'iot-hub.popular-calculated-fields' | translate }}
{{ 'item.type-calculated-field-plural' | translate }}
<mat-icon iconPositionEnd>chevron_right</mat-icon>
</button>
<div class="tb-iot-hub-compact-cards-grid">
@ -248,11 +254,11 @@
</div>
}
<!-- Popular Alarm Rules -->
<!-- Alarm Rules -->
@if (popularAlarmRules.length) {
<div class="tb-iot-hub-section">
<button mat-button class="tb-iot-hub-section-header" (click)="navigateToBrowse(ItemType.ALARM_RULE)">
{{ 'iot-hub.popular-alarm-rules' | translate }}
{{ 'item.type-alarm-rule-plural' | translate }}
<mat-icon iconPositionEnd>chevron_right</mat-icon>
</button>
<div class="tb-iot-hub-compact-cards-grid">
@ -270,11 +276,11 @@
</div>
}
<!-- Popular Rule Chains -->
<!-- Rule Chains -->
@if (popularRuleChains.length) {
<div class="tb-iot-hub-section">
<button mat-button class="tb-iot-hub-section-header" (click)="navigateToBrowse(ItemType.RULE_CHAIN)">
{{ 'iot-hub.popular-rule-chains' | translate }}
{{ 'item.type-rule-chain-plural' | translate }}
<mat-icon iconPositionEnd>chevron_right</mat-icon>
</button>
<div class="tb-iot-hub-compact-cards-grid">

299
ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.scss

@ -29,7 +29,8 @@
border-radius: 8px;
overflow: hidden;
// Dot grid pattern covers top 800px, fades out via gradient mask
// 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;
@ -42,12 +43,12 @@
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: 0;
z-index: 1;
}
> *:not(.tb-iot-hub-installed-btn) {
> *:not(.tb-iot-hub-installed-btn):not(.tb-iot-hub-blob) {
position: relative;
z-index: 1;
z-index: 2;
}
}
@ -56,7 +57,7 @@
position: absolute;
top: 24px;
right: 24px;
z-index: 2;
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);
@ -73,84 +74,80 @@
overflow: hidden;
}
// Animated background gradient
.tb-iot-hub-hero-gradient {
// 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;
inset: 0;
transition: background 0.6s ease;
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;
}
// Floating icons container per type
// 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);
// Icons start near center (translated toward center, scaled down, invisible)
.tb-iot-hub-hero-float-icon {
opacity: 0;
transform: translate(var(--start-x), var(--start-y)) scale(0.9);
transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
// Active: icons move outward to final position, scale to 1, fully visible
&.active .tb-iot-hub-hero-float-icon {
&.active {
opacity: 1;
transform: translate(0, 0) scale(1);
transform: scale(1);
}
}
// Individual floating icon SVG has rotation/bg/shadow baked in, CSS handles position + animation
// Base: 1600px 78px top icons (top: 40px), 87px bottom icons (top: 216px, bottom edge: 303px)
.tb-iot-hub-hero-float-icon {
// 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;
width: 78px;
height: 78px;
img {
width: 100%;
height: 100%;
display: block;
}
// Top-left
&.icon-pos-1 {
top: 40px;
left: calc(50% - 404px);
--start-x: 40px;
--start-y: 12px;
}
// Top-right mirrors icon-pos-1
&.icon-pos-2 {
top: 40px;
left: auto;
right: calc(50% - 404px);
--start-x: -40px;
--start-y: 12px;
}
// Bottom-left 87px bounding box
&.icon-pos-3 {
top: 216px;
left: calc(50% - 487px);
width: 87px;
height: 87px;
--start-x: 50px;
--start-y: -8px;
}
// Bottom-right 87px bounding box, mirrors icon-pos-3
&.icon-pos-4 {
top: 216px;
left: auto;
right: calc(50% - 487px);
width: 87px;
height: 87px;
--start-x: -45px;
--start-y: -4px;
}
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 {
@ -444,7 +441,10 @@
width: 100%;
}
// Card Design: flex-col, gap=24, pt=24, rounded-8, border, overflow-clip, h=220
// 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;
@ -453,62 +453,93 @@
align-items: center;
gap: 24px;
padding-top: 24px;
transition: transform 0.2s, box-shadow 0.2s;
height: 220px;
border: 1px solid rgba(0, 0, 0, 0.12);
overflow: hidden;
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
.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, tracking=0.15, flex child
// 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);
text-align: center;
width: 100%;
flex-shrink: 0;
}
// Card image Design: h=148, w=full, overflow-clip, fills remaining space
.tb-iot-hub-category-img {
width: 100%;
object-fit: contain;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
// Exact Design gradients (104.75deg angle)
.category-widgets {
background: linear-gradient(104.75deg, rgb(240, 255, 245) 0%, rgb(147, 246, 182) 100%);
.tb-iot-hub-category-title-text {
white-space: nowrap;
}
.category-dashboards {
background: linear-gradient(104.75deg, rgb(245, 246, 255) 0%, rgb(189, 197, 255) 100%);
}
.category-solutions {
background: linear-gradient(104.75deg, rgb(245, 250, 255) 0%, rgb(149, 200, 255) 100%);
// 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;
}
.category-calc-fields {
background: linear-gradient(104.75deg, rgb(245, 252, 255) 0%, rgb(149, 222, 248) 100%);
}
// 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;
.category-alarm-rules {
background: linear-gradient(104.75deg, rgb(245, 246, 255) 0%, rgb(189, 197, 255) 100%);
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
transition: transform 0.2s ease-out;
}
}
.category-rule-chains {
background: linear-gradient(104.75deg, rgb(255, 252, 245) 0%, rgb(255, 238, 194) 100%);
}
// 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; }
.category-devices {
background: linear-gradient(104.75deg, rgb(245, 255, 252) 0%, rgb(147, 240, 213) 100%);
// "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;
}
// Sections inside main-content, no individual padding needed
@ -552,6 +583,12 @@
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;
@ -673,60 +710,18 @@
padding: 64px 24px;
}
// Icons: 1280px 69px top (top: 90px), 77px bottom (top: 246px, bottom edge: 323px)
.tb-iot-hub-hero-float-icon {
width: 69px;
height: 69px;
&.icon-pos-1 {
top: 90px;
left: 106px;
}
&.icon-pos-2 {
top: 90px;
left: auto;
right: 106px;
}
&.icon-pos-3 {
top: 246px;
left: 28px;
width: 77px;
height: 77px;
}
&.icon-pos-4 {
top: 246px;
left: auto;
right: 28px;
width: 77px;
height: 77px;
}
// Cluster shrinks with viewport keep some gutter on the sides
.tb-iot-hub-hero-cluster {
top: 30px;
width: min(900px, calc(100% - 48px));
}
}
// 959px: only top pair, area width 160px (icon 51px + gap + icon 51px)
// 959px: cluster sits closer to the title and uses the full content width
@media #{$mat-lt-md} {
.tb-iot-hub-hero-float-icon {
width: 51px;
height: 51px;
&.icon-pos-1 {
top: 80px;
left: calc(50% - 80px);
}
&.icon-pos-2 {
top: 80px;
left: auto;
right: calc(50% - 80px);
}
&.icon-pos-3,
&.icon-pos-4 {
display: none;
}
.tb-iot-hub-hero-cluster {
top: 64px;
width: calc(100% - 32px);
}
}

64
ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.ts

@ -44,8 +44,7 @@ interface HeroTypeConfig {
type: ItemType;
labelKey: string;
color: string;
gradientColor: string;
icons: string[];
icon: string;
}
interface SearchResultGroup {
@ -53,6 +52,11 @@ interface SearchResultGroup {
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,
@ -76,34 +80,28 @@ export class TbIotHubHomeComponent implements OnInit, OnDestroy {
heroTypes: HeroTypeConfig[] = [
{
type: ItemType.WIDGET, labelKey: 'item.type-widget-plural', color: '#2c9755',
gradientColor: 'rgba(44, 151, 85, 0.1)',
icons: ['assets/iot-hub/hero-widget-icon-1.svg', 'assets/iot-hub/hero-widget-icon-2.svg', 'assets/iot-hub/hero-widget-icon-3.svg', 'assets/iot-hub/hero-widget-icon-4.svg']
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: '#2666a9',
gradientColor: 'rgba(38, 102, 169, 0.1)',
icons: ['assets/iot-hub/hero-solution-template-icon-1.svg', 'assets/iot-hub/hero-solution-template-icon-2.svg', 'assets/iot-hub/hero-solution-template-icon-3.svg', 'assets/iot-hub/hero-solution-template-icon-4.svg']
type: ItemType.SOLUTION_TEMPLATE, labelKey: 'item.type-solution-template-plural', color: '#2b6bb4',
icon: 'assets/iot-hub/hero-solution-template-cluster.svg'
},
{
type: ItemType.DEVICE, labelKey: 'item.type-device-plural', color: '#4b8a79',
gradientColor: 'rgba(75, 138, 121, 0.1)',
icons: ['assets/iot-hub/hero-device-icon-1.svg', 'assets/iot-hub/hero-device-icon-2.svg', 'assets/iot-hub/hero-device-icon-3.svg', 'assets/iot-hub/hero-device-icon-4.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: '#006d92',
gradientColor: 'rgba(0, 109, 146, 0.1)',
icons: ['assets/iot-hub/hero-calculated-field-icon-1.svg', 'assets/iot-hub/hero-calculated-field-icon-2.svg', 'assets/iot-hub/hero-calculated-field-icon-3.svg', 'assets/iot-hub/hero-calculated-field-icon-4.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: '#4d5fd0',
gradientColor: 'rgba(77, 95, 208, 0.1)',
icons: ['assets/iot-hub/hero-dashboard-icon-1.svg', 'assets/iot-hub/hero-dashboard-icon-2.svg', 'assets/iot-hub/hero-dashboard-icon-3.svg', 'assets/iot-hub/hero-dashboard-icon-4.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: '#95694b',
gradientColor: 'rgba(149, 105, 75, 0.1)',
icons: ['assets/iot-hub/hero-rule-chain-icon-1.svg', 'assets/iot-hub/hero-rule-chain-icon-2.svg', 'assets/iot-hub/hero-rule-chain-icon-3.svg', 'assets/iot-hub/hero-rule-chain-icon-4.svg']
type: ItemType.RULE_CHAIN, labelKey: 'item.type-rule-chain-plural', color: '#a95ae2',
icon: 'assets/iot-hub/hero-rule-chain-cluster.svg'
}
];
@ -112,12 +110,12 @@ export class TbIotHubHomeComponent implements OnInit, OnDestroy {
private heroInterval: any;
categoryCards: CategoryCard[] = [
{ type: ItemType.WIDGET, titleKey: 'item.type-widget-plural', icon: 'widgets', cssClass: 'category-widgets', image: 'assets/iot-hub/category-widgets-img.svg' },
{ 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.DEVICE, titleKey: 'iot-hub.device-library', icon: 'memory', cssClass: 'category-devices', image: 'assets/iot-hub/category-device-library-img.svg' },
{ type: ItemType.CALCULATED_FIELD, titleKey: 'item.type-calculated-field-plural', icon: 'functions', cssClass: 'category-calc-fields', image: 'assets/iot-hub/category-calculated-fields-img.svg' },
{ type: ItemType.ALARM_RULE, titleKey: 'item.type-alarm-rule-plural', icon: 'notification_important', cssClass: 'category-alarm-rules', image: 'assets/iot-hub/category-dashboards-img.svg' },
{ 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.svg' }
{ 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[] = [];
@ -301,6 +299,15 @@ export class TbIotHubHomeComponent implements OnInit, OnDestroy {
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';
@ -522,6 +529,9 @@ export class TbIotHubHomeComponent implements OnInit, OnDestroy {
private groupSearchResults(items: MpItemVersionView[]): SearchResultGroup[] {
const groupMap = new Map<ItemType, MpItemVersionView[]>();
for (const item of items) {
if (!SEARCH_GROUP_ORDER.includes(item.type)) {
continue;
}
let list = groupMap.get(item.type);
if (!list) {
list = [];
@ -529,6 +539,8 @@ export class TbIotHubHomeComponent implements OnInit, OnDestroy {
}
list.push(item);
}
return Array.from(groupMap.entries()).map(([type, groupItems]) => ({ type, items: groupItems }));
return SEARCH_GROUP_ORDER
.filter(type => groupMap.has(type))
.map(type => ({ type, items: groupMap.get(type) }));
}
}

24
ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.html

@ -37,8 +37,8 @@
}
</div>
<!-- Filter + Search row -->
<div class="tb-installed-toolbar">
<!-- Filter + chips row -->
<div class="tb-installed-filter-row">
<button mat-stroked-button color="primary" class="tb-installed-filter-btn" [matMenuTriggerFor]="filterMenu">
<mat-icon>filter_list</mat-icon>
{{ 'iot-hub.filter' | translate }}
@ -71,18 +71,30 @@
{{ 'iot-hub.clear-all' | translate }}
</button>
}
<span class="flex-1"></span>
<div class="tb-installed-search">
<mat-icon class="tb-installed-search-icon">search</mat-icon>
</div>
<!-- Search row -->
<div class="tb-installed-search-row">
<div class="tb-installed-search flex flex-1 items-center">
<input class="tb-installed-search-input"
[placeholder]="'iot-hub.search' | translate"
[value]="textSearch"
(input)="onSearchChange($any($event.target).value)">
@if (textSearch) {
<button mat-icon-button class="tb-installed-search-action" (click)="onSearchChange('')">
<mat-icon>close</mat-icon>
</button>
} @else {
<span class="tb-installed-search-action tb-installed-search-action-static" aria-hidden="true">
<mat-icon>search</mat-icon>
</span>
}
</div>
</div>
<tb-iot-hub-installed-items-table
[textSearch]="appliedTextSearch"
[typeFilters]="typeFilters">
[typeFilters]="typeFilters"
(clearFilters)="clearAllFilters()">
</tb-iot-hub-installed-items-table>
</div>

80
ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.scss

@ -15,6 +15,7 @@
*/
@import "../../../../../scss/constants";
@import "../../components/iot-hub/iot-hub-common";
:host {
display: block;
@ -49,12 +50,25 @@
margin: 0;
}
// Toolbar: filter + search
.tb-installed-toolbar {
// 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 {
@ -104,67 +118,19 @@
}
}
// Search field
.tb-installed-search {
width: 320px;
height: 40px;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.12);
background: white;
}
.tb-installed-search-icon {
font-size: 24px;
width: 24px;
height: 24px;
color: rgba(0, 0, 0, 0.38);
flex-shrink: 0;
@include tb-iot-hub-page-search-container;
}
.tb-installed-search-input {
flex: 1;
border: none;
outline: none;
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.87);
background: transparent;
font-family: inherit;
&::placeholder {
color: rgba(0, 0, 0, 0.38);
}
@include tb-iot-hub-page-search-input;
}
// Responsive
@media #{$mat-lt-lg} {
.tb-installed-toolbar {
flex-wrap: wrap;
}
.tb-installed-search {
order: 1;
}
.tb-installed-filter-chips {
order: 10;
}
.tb-installed-clear-btn {
order: 11;
}
.tb-installed-toolbar::before {
content: '';
width: 100%;
order: 9;
}
.tb-installed-search-action {
@include tb-iot-hub-page-search-action;
}
// Responsive
@media #{$mat-lt-md} {
.tb-installed-items-page {
padding: 40px 24px;
@ -182,8 +148,4 @@
align-items: flex-start;
gap: 16px;
}
.tb-installed-search {
width: 200px;
}
}

4
ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.ts

@ -35,7 +35,7 @@ export class TbIotHubInstalledItemsComponent implements OnInit, OnDestroy {
typeFilters: string[] = [];
activeTypeFilters = new Set<string>();
allItemTypes: string[] = ['WIDGET', 'DASHBOARD', 'SOLUTION_TEMPLATE', 'CALCULATED_FIELD', 'RULE_CHAIN', 'DEVICE'];
allItemTypes: string[] = ['DEVICE', 'SOLUTION_TEMPLATE', 'WIDGET', 'CALCULATED_FIELD', 'ALARM_RULE', 'RULE_CHAIN'];
@ViewChild(TbIotHubInstalledItemsTableComponent) tableComponent: TbIotHubInstalledItemsTableComponent;
@ -97,6 +97,8 @@ export class TbIotHubInstalledItemsComponent implements OnInit, OnDestroy {
clearAllFilters(): void {
this.activeTypeFilters.clear();
this.typeFilters = [];
this.textSearch = '';
this.appliedTextSearch = '';
}
hasActiveFilters(): boolean {

2
ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-items-page.component.ts

@ -67,7 +67,7 @@ const PAGE_CONFIGS: Record<string, ItemTypePageConfig> = {
type: ItemType.ALARM_RULE,
titleKey: 'item.type-alarm-rule-plural',
descriptionKey: 'iot-hub.items-page-desc-alarm-rules',
image: 'assets/iot-hub/items-page-dashboards-hero.svg',
image: 'assets/iot-hub/items-page-alarm-rules-hero.svg',
routeSegment: 'alarm-rules'
},
RULE_CHAIN: {

2
ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-routing.module.ts

@ -32,7 +32,7 @@ const routes: Routes = [
auth: [Authority.TENANT_ADMIN],
breadcrumb: {
label: 'iot-hub.iot-hub',
icon: 'store'
icon: 'hub'
}
},
children: [

20
ui-ngx/src/app/shared/components/toggle-header.component.html

@ -42,14 +42,18 @@
[(ngModel)]="value"
(ngModelChange)="valueChange.emit(value)">
<mat-button-toggle *ngFor="let option of options; trackBy: trackByHeaderOption" [value]="option.value" [disabled]="disabled" [class.tb-toggle-button-error]="(option.error$ | async) && value !== option.value">
{{ option.name }}
<mat-icon matTooltipPosition="above"
matTooltipClass="tb-error-tooltip"
[matTooltip]="(option.error$ | async)"
*ngIf="(option.error$ | async) && value !== option.value"
class="tb-error tb-error-icon">
warning
</mat-icon>
@if (option.template) {
<ng-container *ngTemplateOutlet="option.template"></ng-container>
} @else {
{{ option.name }}
<mat-icon matTooltipPosition="above"
matTooltipClass="tb-error-tooltip"
[matTooltip]="(option.error$ | async)"
*ngIf="(option.error$ | async) && value !== option.value"
class="tb-error tb-error-icon">
warning
</mat-icon>
}
</mat-button-toggle>
</mat-button-toggle-group>
</div>

6
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<any>;
error$?: Observable<string>;
}
@ -69,6 +70,8 @@ export class ToggleOption implements OnChanges, OnDestroy {
@Input() value: any;
@Input() template: TemplateRef<any>;
@Input() error: string;
currentError = new ReplaySubject<string>(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()
}
);

BIN
ui-ngx/src/assets/iot-hub/category-alarm-rules-img.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

BIN
ui-ngx/src/assets/iot-hub/category-calculated-fields-img.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

233
ui-ngx/src/assets/iot-hub/category-calculated-fields-img.svg

@ -1,233 +0,0 @@
<svg width="387" height="148" viewBox="0 0 387 148" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_16822_62175)">
<g filter="url(#filter0_dddd_16822_62175)">
<rect x="63.1523" y="0.375" width="76" height="76" rx="6" fill="white"/>
<g clip-path="url(#clip1_16822_62175)">
<path opacity="0.16" d="M82.3995 36.4004H96.2177C97.003 36.4004 97.7562 36.0884 98.3115 35.5331C98.8668 34.9778 99.1787 34.2247 99.1787 33.4394V19.6212C99.1787 18.8359 98.8668 18.0827 98.3115 17.5274C97.7562 16.9721 97.003 16.6602 96.2177 16.6602H82.3995C81.6142 16.6602 80.861 16.9721 80.3057 17.5274C79.7504 18.0827 79.4385 18.8359 79.4385 19.6212V33.4394C79.4385 34.2247 79.7504 34.9778 80.3057 35.5331C80.861 36.0884 81.6142 36.4004 82.3995 36.4004Z" fill="#006D92"/>
<path d="M84.3737 25.543H94.2439C94.5056 25.543 94.7567 25.647 94.9418 25.8321C95.1269 26.0172 95.2309 26.2682 95.2309 26.53C95.2309 26.7918 95.1269 27.0428 94.9418 27.2279C94.7567 27.413 94.5056 27.517 94.2439 27.517H84.3737C84.112 27.517 83.8609 27.413 83.6758 27.2279C83.4907 27.0428 83.3867 26.7918 83.3867 26.53C83.3867 26.2682 83.4907 26.0172 83.6758 25.8321C83.8609 25.647 84.112 25.543 84.3737 25.543Z" fill="#006D92"/>
<path opacity="0.16" d="M119.906 16.6602H106.088C105.303 16.6602 104.55 16.9721 103.994 17.5274C103.439 18.0827 103.127 18.8359 103.127 19.6212V33.4394C103.127 34.2247 103.439 34.9778 103.994 35.5331C104.55 36.0884 105.303 36.4004 106.088 36.4004H119.906C120.691 36.4004 121.445 36.0884 122 35.5331C122.555 34.9778 122.867 34.2247 122.867 33.4394V19.6212C122.867 18.8359 122.555 18.0827 122 17.5274C121.445 16.9721 120.691 16.6602 119.906 16.6602Z" fill="#006D92"/>
<path d="M117.932 27.5165H113.984V31.4646C113.984 31.7263 113.88 31.9774 113.695 32.1625C113.51 32.3476 113.259 32.4516 112.997 32.4516C112.735 32.4516 112.484 32.3476 112.299 32.1625C112.114 31.9774 112.01 31.7263 112.01 31.4646V27.5165H108.062C107.8 27.5165 107.549 27.4125 107.364 27.2274C107.179 27.0423 107.075 26.7913 107.075 26.5295C107.075 26.2677 107.179 26.0167 107.364 25.8316C107.549 25.6465 107.8 25.5425 108.062 25.5425H112.01V21.5944C112.01 21.3327 112.114 21.0816 112.299 20.8965C112.484 20.7114 112.735 20.6074 112.997 20.6074C113.259 20.6074 113.51 20.7114 113.695 20.8965C113.88 21.0816 113.984 21.3327 113.984 21.5944V25.5425H117.932C118.194 25.5425 118.445 25.6465 118.63 25.8316C118.815 26.0167 118.919 26.2677 118.919 26.5295C118.919 26.7913 118.815 27.0423 118.63 27.2274C118.445 27.4125 118.194 27.5165 117.932 27.5165Z" fill="#006D92"/>
<path opacity="0.16" d="M96.2177 60.0879C97.003 60.0879 97.7562 59.7759 98.3115 59.2206C98.8668 58.6653 99.1787 57.9122 99.1787 57.1269V43.3087C99.1787 42.5234 98.8668 41.7702 98.3115 41.2149C97.7562 40.6596 97.003 40.3477 96.2177 40.3477H82.3995C81.6142 40.3477 80.861 40.6596 80.3057 41.2149C79.7504 41.7702 79.4385 42.5234 79.4385 43.3087V57.1269C79.4385 57.9122 79.7504 58.6653 80.3057 59.2206C80.861 59.7759 81.6142 60.0879 82.3995 60.0879H96.2177Z" fill="#006D92"/>
<path d="M85.1234 47.4259C84.9617 47.2371 84.8772 46.9942 84.8868 46.7458C84.8964 46.4974 84.9994 46.2617 85.1752 46.086C85.351 45.9102 85.5866 45.8072 85.835 45.7976C86.0834 45.788 86.3263 45.8725 86.5151 46.0342L89.3084 48.8275L92.1016 46.0342C92.2904 45.8725 92.5333 45.788 92.7817 45.7976C93.0301 45.8072 93.2658 45.9102 93.4416 46.086C93.6173 46.2617 93.7203 46.4974 93.7299 46.7458C93.7395 46.9942 93.655 47.2371 93.4933 47.4259L90.7001 50.2191L93.4933 53.0124C93.6771 53.1973 93.7803 53.4475 93.7803 53.7082C93.7803 53.969 93.6771 54.2192 93.4933 54.4041C93.3084 54.5879 93.0582 54.6911 92.7975 54.6911C92.5367 54.6911 92.2866 54.5879 92.1016 54.4041L89.3084 51.6108L86.5151 54.4041C86.3302 54.5879 86.08 54.6911 85.8193 54.6911C85.5585 54.6911 85.3084 54.5879 85.1234 54.4041C84.9396 54.2192 84.8364 53.969 84.8364 53.7082C84.8364 53.4475 84.9396 53.1973 85.1234 53.0124L87.9167 50.2191L85.1234 47.4259Z" fill="#006D92"/>
<path opacity="0.16" d="M119.906 40.3477H106.088C105.303 40.3477 104.55 40.6596 103.994 41.2149C103.439 41.7702 103.127 42.5234 103.127 43.3087V57.1269C103.127 57.9122 103.439 58.6653 103.994 59.2206C104.55 59.7759 105.303 60.0879 106.088 60.0879H119.906C120.691 60.0879 121.445 59.7759 122 59.2206C122.555 58.6653 122.867 57.9122 122.867 57.1269V43.3087C122.867 42.5234 122.555 41.7702 122 41.2149C121.445 40.6596 120.691 40.3477 119.906 40.3477Z" fill="#006D92"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M108.062 51.2053H117.932C118.194 51.2053 118.445 51.1013 118.63 50.9162C118.815 50.7311 118.919 50.48 118.919 50.2183C118.919 49.9565 118.815 49.7054 118.63 49.5203C118.445 49.3352 118.194 49.2313 117.932 49.2313H108.062C107.8 49.2313 107.549 49.3352 107.364 49.5203C107.179 49.7054 107.075 49.9565 107.075 50.2183C107.075 50.48 107.179 50.7311 107.364 50.9162C107.549 51.1013 107.8 51.2053 108.062 51.2053Z" fill="#006D92"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M113.545 45.4495C113.383 45.3411 113.192 45.2832 112.997 45.2832C112.735 45.2832 112.484 45.3872 112.299 45.5723C112.114 45.7574 112.01 46.0084 112.01 46.2702C112.01 46.4654 112.068 46.6563 112.176 46.8186C112.285 46.9809 112.439 47.1074 112.619 47.1821C112.799 47.2568 112.998 47.2763 113.189 47.2383C113.381 47.2002 113.557 47.1062 113.695 46.9681C113.833 46.8301 113.927 46.6542 113.965 46.4628C114.003 46.2713 113.983 46.0729 113.909 45.8925C113.834 45.7122 113.707 45.558 113.545 45.4495Z" fill="#006D92"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M112.299 54.8642C112.484 55.0493 112.735 55.1533 112.997 55.1533C113.259 55.1533 113.51 55.0493 113.695 54.8642C113.88 54.6791 113.984 54.4281 113.984 54.1663C113.984 53.9045 113.88 53.6535 113.695 53.4684C113.51 53.2833 113.259 53.1793 112.997 53.1793C112.735 53.1793 112.484 53.2833 112.299 53.4684C112.114 53.6535 112.01 53.9045 112.01 54.1663C112.01 54.4281 112.114 54.6791 112.299 54.8642Z" fill="#006D92"/>
</g>
</g>
<g filter="url(#filter1_dddd_16822_62175)">
<rect x="155.152" y="0.375" width="76" height="76" rx="6" fill="white"/>
<g clip-path="url(#clip2_16822_62175)">
<rect opacity="0.16" x="171.438" y="16.6602" width="43.4286" height="43.4286" rx="21.7143" fill="#006D92"/>
<path d="M184.707 33.5488L179.882 38.3742L184.707 43.1996" stroke="#006D92" stroke-width="2.4127" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M201.596 33.5488L206.422 38.3742L201.596 43.1996" stroke="#006D92" stroke-width="2.4127" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M195.565 28.7246L190.739 48.0262" stroke="#006D92" stroke-width="2.4127" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
<g filter="url(#filter2_dddd_16822_62175)">
<rect x="247.152" y="0.375" width="76" height="76" rx="6" fill="white"/>
<path opacity="0.16" d="M295.349 21.7891C295.258 22.1425 295.21 22.513 295.21 22.8949C295.21 25.3378 297.19 27.3182 299.633 27.3182C300.015 27.3182 300.386 27.2698 300.739 27.1789V49.5739C300.386 49.4829 300.015 49.4346 299.633 49.4346C297.19 49.4346 295.21 51.4149 295.21 53.8578C295.21 54.2397 295.258 54.6102 295.349 54.9637H272.954C273.045 54.6102 273.094 54.2397 273.094 53.8578C273.094 51.4149 271.113 49.4346 268.67 49.4346C268.288 49.4346 267.918 49.4829 267.564 49.5739V27.1789C267.918 27.2698 268.288 27.3182 268.67 27.3182C271.113 27.3182 273.094 25.3378 273.094 22.8949C273.094 22.513 273.045 22.1425 272.954 21.7891H295.349Z" fill="#006D92"/>
<path opacity="0.4" d="M295.246 53.3049C295.223 53.4861 295.21 53.6705 295.21 53.8578C295.21 54.2397 295.258 54.6102 295.349 54.9637H272.954C273.045 54.6102 273.094 54.2397 273.094 53.8578C273.094 53.6705 273.081 53.4861 273.058 53.3049H295.246ZM267.564 27.1789C267.918 27.2698 268.288 27.3182 268.67 27.3182C268.858 27.3182 269.042 27.3051 269.223 27.2825V49.4691C269.042 49.4465 268.858 49.4346 268.67 49.4346C268.288 49.4346 267.918 49.4829 267.564 49.5739V27.1789ZM300.739 49.5739C300.386 49.4829 300.015 49.4346 299.633 49.4346C299.446 49.4346 299.261 49.4465 299.08 49.4691V27.2825C299.262 27.3051 299.446 27.3182 299.633 27.3182C300.015 27.3182 300.386 27.2698 300.739 27.1789V49.5739ZM295.349 21.7891C295.258 22.1425 295.21 22.513 295.21 22.8949C295.21 23.0822 295.223 23.2666 295.246 23.4478H273.058C273.081 23.2666 273.094 23.0822 273.094 22.8949C273.094 22.513 273.045 22.1425 272.954 21.7891H295.349Z" fill="#006D92"/>
<path d="M302.951 22.8936C302.951 21.0614 301.466 19.5762 299.633 19.5762C297.801 19.5762 296.316 21.0614 296.316 22.8936C296.316 24.7258 297.801 26.2111 299.633 26.2111C301.466 26.2111 302.951 24.7258 302.951 22.8936Z" fill="#006D92"/>
<path d="M302.951 53.8565C302.951 52.0243 301.466 50.5391 299.633 50.5391C297.801 50.5391 296.316 52.0243 296.316 53.8565C296.316 55.6887 297.801 57.174 299.633 57.174C301.466 57.174 302.951 55.6887 302.951 53.8565Z" fill="#006D92"/>
<path d="M271.988 53.8565C271.988 52.0243 270.503 50.5391 268.67 50.5391C266.838 50.5391 265.353 52.0243 265.353 53.8565C265.353 55.6887 266.838 57.174 268.67 57.174C270.503 57.174 271.988 55.6887 271.988 53.8565Z" fill="#006D92"/>
<path d="M271.988 22.8936C271.988 21.0614 270.503 19.5762 268.67 19.5762C266.838 19.5762 265.353 21.0614 265.353 22.8936C265.353 24.7258 266.838 26.2111 268.67 26.2111C270.503 26.2111 271.988 24.7258 271.988 22.8936Z" fill="#006D92"/>
</g>
<g filter="url(#filter3_dddd_16822_62175)">
<rect x="247" y="88.375" width="76" height="76" rx="6" fill="white"/>
<g clip-path="url(#clip3_16822_62175)">
<rect x="275.248" y="103.646" width="17.6931" height="13.2698" rx="1.10582" fill="#006D92"/>
<path opacity="0.16" fill-rule="evenodd" clip-rule="evenodd" d="M283.314 117.338C283.622 117.031 284.085 116.974 284.45 117.166C284.506 117.195 284.56 117.23 284.61 117.271C284.636 117.292 284.661 117.314 284.685 117.338L288.002 120.655C288.38 121.033 288.379 121.646 288.002 122.024C287.624 122.402 287.011 122.402 286.633 122.024L285.002 120.393C285.175 123.376 285.966 125.176 286.973 126.324C288.123 127.636 289.684 128.25 291.42 128.68C292.311 128.901 293.14 129.051 294.036 129.251C294.891 129.441 295.761 129.668 296.533 130.023C297.317 130.384 298.043 130.897 298.563 131.68C299.085 132.466 299.343 133.436 299.343 134.61C299.343 135.144 298.909 135.578 298.375 135.578C297.841 135.578 297.407 135.144 297.407 134.61C297.407 133.722 297.215 133.148 296.951 132.751C296.686 132.351 296.288 132.041 295.724 131.781C295.148 131.516 294.446 131.324 293.616 131.139C292.828 130.964 291.86 130.783 290.954 130.558C289.097 130.098 287.063 129.362 285.518 127.599C285.324 127.379 285.14 127.144 284.967 126.894V139.033C284.967 139.567 284.533 140.001 283.999 140.001C283.465 140.001 283.031 139.567 283.031 139.033V126.896C282.858 127.145 282.675 127.379 282.481 127.599C280.936 129.362 278.902 130.098 277.045 130.558C276.139 130.783 275.171 130.964 274.383 131.139C273.553 131.324 272.851 131.516 272.275 131.781C271.711 132.041 271.313 132.351 271.048 132.751C270.784 133.148 270.592 133.722 270.592 134.61C270.592 135.144 270.158 135.578 269.624 135.578C269.09 135.578 268.656 135.144 268.656 134.61C268.656 133.436 268.914 132.466 269.436 131.68C269.956 130.897 270.682 130.384 271.466 130.023C272.238 129.668 273.108 129.441 273.963 129.251C274.859 129.051 275.688 128.901 276.579 128.68C278.315 128.25 279.876 127.636 281.026 126.324C282.033 125.176 282.822 123.376 282.995 120.394L281.366 122.024C280.988 122.402 280.375 122.402 279.997 122.024C279.62 121.646 279.619 121.033 279.997 120.655L283.314 117.338Z" fill="#006D92"/>
<path d="M283.444 132.707C283.856 132.295 284.524 132.295 284.935 132.707L289.41 137.182C289.822 137.594 289.822 138.261 289.41 138.673L284.935 143.148C284.524 143.56 283.856 143.56 283.444 143.148L278.97 138.673C278.558 138.261 278.558 137.594 278.97 137.182L283.444 132.707Z" fill="#006D92"/>
<path d="M269.069 132.707C269.48 132.295 270.148 132.295 270.56 132.707L275.034 137.182C275.446 137.594 275.446 138.261 275.034 138.673L270.56 143.148C270.148 143.56 269.48 143.56 269.069 143.148L264.594 138.673C264.182 138.261 264.182 137.594 264.594 137.182L269.069 132.707Z" fill="#006D92"/>
<path d="M297.82 132.707C298.232 132.295 298.9 132.295 299.311 132.707L303.786 137.182C304.198 137.594 304.198 138.261 303.786 138.673L299.311 143.148C298.9 143.56 298.232 143.56 297.82 143.148L293.346 138.673C292.934 138.261 292.934 137.594 293.346 137.182L297.82 132.707Z" fill="#006D92"/>
</g>
</g>
<g filter="url(#filter4_dddd_16822_62175)">
<rect x="63" y="88.375" width="76" height="76" rx="6" fill="white"/>
<g clip-path="url(#clip4_16822_62175)">
<path opacity="0.16" d="M97.5557 110.105L86.5557 121.105" stroke="#006D92" stroke-width="2.44444" stroke-linecap="round"/>
<path opacity="0.16" d="M102.444 110.105L113.444 121.105" stroke="#006D92" stroke-width="2.44444" stroke-linecap="round"/>
<path d="M83.2869 117.781C83.7421 117.326 84.4801 117.326 84.9354 117.781L89.8808 122.726C90.336 123.182 90.336 123.92 89.8808 124.375L84.9354 129.32C84.4801 129.775 83.7421 129.775 83.2869 129.32L78.3414 124.375C77.8862 123.92 77.8862 123.182 78.3414 122.726L83.2869 117.781Z" fill="#006D92"/>
<path d="M115.065 117.781C115.52 117.326 116.258 117.326 116.713 117.781L121.659 122.726C122.114 123.182 122.114 123.92 121.659 124.375L116.713 129.32C116.258 129.775 115.52 129.775 115.065 129.32L110.119 124.375C109.664 123.92 109.664 123.182 110.119 122.726L115.065 117.781Z" fill="#006D92"/>
<path d="M99.1755 101.892C99.6308 101.437 100.369 101.437 100.824 101.892L105.769 106.838C106.225 107.293 106.225 108.031 105.769 108.486L100.824 113.432C100.369 113.887 99.6308 113.887 99.1755 113.432L94.2301 108.486C93.7749 108.031 93.7749 107.293 94.2301 106.838L99.1755 101.892Z" fill="#006D92"/>
<path d="M100.978 125.996C101.222 125.996 101.467 126.159 101.548 126.403L101.915 127.504C101.955 127.707 102.118 127.87 102.322 127.911C102.892 128.074 103.422 128.277 103.911 128.562C104.074 128.644 104.318 128.644 104.481 128.562L105.5 128.074C105.744 127.952 105.989 127.993 106.193 128.196L107.578 129.581C107.781 129.744 107.822 130.029 107.7 130.273L107.211 131.292C107.089 131.496 107.13 131.699 107.211 131.862C107.497 132.351 107.7 132.881 107.863 133.451C107.944 133.655 108.066 133.778 108.27 133.859L109.371 134.226C109.615 134.307 109.778 134.552 109.778 134.796V136.752C109.778 136.996 109.615 137.241 109.371 137.322L108.27 137.688C108.067 137.729 107.904 137.892 107.863 138.096C107.7 138.666 107.496 139.196 107.211 139.685C107.13 139.847 107.13 140.092 107.211 140.255L107.66 141.273C107.782 141.518 107.74 141.763 107.537 141.967L106.152 143.352C105.989 143.555 105.704 143.596 105.459 143.474L104.441 142.985C104.237 142.863 104.034 142.904 103.871 142.985C103.382 143.27 102.852 143.474 102.282 143.637C102.078 143.718 101.955 143.84 101.874 144.044L101.507 145.145C101.426 145.389 101.181 145.552 100.937 145.552H98.981C98.7367 145.552 98.4921 145.389 98.4106 145.145L98.0444 144.044C98.0036 143.84 97.8407 143.678 97.6372 143.637C97.067 143.474 96.5371 143.27 96.0483 142.985C95.8854 142.904 95.641 142.904 95.478 142.985L94.4595 143.474C94.2151 143.596 93.9708 143.555 93.7671 143.352L92.3813 141.967C92.1776 141.804 92.1371 141.518 92.2593 141.273L92.7886 140.255C92.9106 140.051 92.87 139.847 92.7886 139.685C92.5035 139.196 92.3001 138.666 92.1372 138.096C92.0558 137.892 91.9334 137.77 91.73 137.688L90.6294 137.322C90.3851 137.241 90.2223 136.996 90.2222 136.752V134.796C90.2223 134.552 90.3851 134.307 90.6294 134.226L91.73 133.859C91.9335 133.819 92.0965 133.655 92.1372 133.451C92.3001 132.881 92.5035 132.351 92.7886 131.862C92.8699 131.699 92.87 131.455 92.7886 131.292L92.2593 130.273C92.178 130.029 92.2187 129.745 92.3813 129.541L93.7671 128.155C93.9707 127.993 94.2553 127.952 94.4995 128.033L95.5181 128.562C95.7217 128.685 95.9255 128.644 96.0884 128.562C96.5771 128.277 97.1071 128.074 97.6772 127.911C97.8809 127.83 98.004 127.707 98.0854 127.504L98.4517 126.403C98.5332 126.159 98.7776 125.996 99.022 125.996H100.978ZM98.2632 141.379V141.378V141.379ZM101.737 141.379V141.378V141.379ZM99.9995 130.885C97.2998 130.885 95.1111 133.074 95.1108 135.773C95.1108 138.473 97.2996 140.663 99.9995 140.663C102.7 140.663 104.889 138.473 104.889 135.773C104.889 133.074 102.699 130.885 99.9995 130.885Z" fill="#006D92"/>
</g>
</g>
<g filter="url(#filter5_dddd_16822_62175)">
<rect x="155" y="88.375" width="76" height="76" rx="6" fill="white"/>
<g clip-path="url(#clip5_16822_62175)">
<path d="M192.587 113.383C192.832 113.383 193.076 113.546 193.158 113.79L193.524 114.891C193.565 115.094 193.728 115.257 193.931 115.298C194.501 115.461 195.031 115.664 195.52 115.949C195.683 116.031 195.927 116.031 196.09 115.949L197.109 115.461C197.353 115.339 197.599 115.379 197.802 115.583L199.187 116.968C199.391 117.131 199.431 117.416 199.309 117.66L198.821 118.679C198.699 118.882 198.739 119.086 198.821 119.249C199.106 119.738 199.309 120.268 199.472 120.838C199.554 121.042 199.676 121.165 199.879 121.246L200.98 121.612C201.224 121.694 201.387 121.938 201.387 122.183V124.139C201.387 124.383 201.224 124.627 200.98 124.709L199.879 125.075C199.676 125.116 199.513 125.279 199.472 125.482C199.309 126.053 199.106 126.583 198.821 127.071C198.739 127.234 198.739 127.479 198.821 127.642L199.269 128.66C199.391 128.905 199.35 129.15 199.146 129.354L197.761 130.738C197.598 130.942 197.313 130.983 197.069 130.86L196.05 130.372C195.847 130.25 195.643 130.291 195.48 130.372C194.991 130.657 194.461 130.86 193.891 131.023C193.687 131.105 193.564 131.227 193.483 131.431L193.117 132.531C193.035 132.776 192.791 132.938 192.546 132.938H190.59C190.346 132.938 190.101 132.775 190.02 132.531L189.654 131.431C189.613 131.227 189.45 131.064 189.247 131.023C188.676 130.861 188.147 130.657 187.658 130.372C187.495 130.291 187.25 130.291 187.087 130.372L186.069 130.86C185.824 130.983 185.58 130.942 185.376 130.738L183.991 129.354C183.787 129.191 183.746 128.905 183.869 128.66L184.398 127.642C184.52 127.438 184.479 127.234 184.398 127.071C184.113 126.583 183.909 126.053 183.747 125.482C183.665 125.279 183.543 125.157 183.339 125.075L182.239 124.709C181.994 124.628 181.832 124.383 181.832 124.139V122.183C181.832 121.938 181.994 121.694 182.239 121.612L183.339 121.246C183.543 121.205 183.706 121.041 183.747 120.838C183.91 120.268 184.113 119.738 184.398 119.249C184.479 119.086 184.479 118.842 184.398 118.679L183.869 117.66C183.787 117.416 183.828 117.131 183.991 116.928L185.376 115.542C185.58 115.379 185.865 115.339 186.109 115.42L187.127 115.949C187.331 116.071 187.535 116.031 187.698 115.949C188.187 115.664 188.716 115.461 189.287 115.298C189.49 115.216 189.613 115.094 189.695 114.891L190.061 113.79C190.143 113.546 190.387 113.383 190.631 113.383H192.587ZM189.873 128.766V128.765V128.766ZM193.346 128.766V128.765V128.766ZM191.609 118.271C188.909 118.272 186.72 120.46 186.72 123.16C186.72 125.86 188.909 128.05 191.609 128.05C194.309 128.05 196.499 125.86 196.499 123.16C196.498 120.46 194.309 118.271 191.609 118.271Z" fill="#006D92"/>
<circle opacity="0.16" cx="191.609" cy="123.16" r="18.3333" stroke="#006D92" stroke-width="2.44444"/>
<circle cx="191.61" cy="104.827" r="3.66667" fill="#006D92"/>
<circle cx="173.276" cy="123.161" r="3.66667" fill="#006D92"/>
<circle cx="191.61" cy="141.493" r="3.66667" fill="#006D92"/>
<circle cx="209.943" cy="123.161" r="3.66667" fill="#006D92"/>
</g>
</g>
</g>
<defs>
<filter id="filter0_dddd_16822_62175" x="30.4251" y="-5.07955" width="141.455" height="196" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="5.45455"/>
<feGaussianBlur stdDeviation="5.45455"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_16822_62175"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="20.7273"/>
<feGaussianBlur stdDeviation="10.3636"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_16822_62175" result="effect2_dropShadow_16822_62175"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="45.8182"/>
<feGaussianBlur stdDeviation="13.6364"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
<feBlend mode="normal" in2="effect2_dropShadow_16822_62175" result="effect3_dropShadow_16822_62175"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="81.8182"/>
<feGaussianBlur stdDeviation="16.3636"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.01 0"/>
<feBlend mode="normal" in2="effect3_dropShadow_16822_62175" result="effect4_dropShadow_16822_62175"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_16822_62175" result="shape"/>
</filter>
<filter id="filter1_dddd_16822_62175" x="122.425" y="-5.07955" width="141.455" height="196" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="5.45455"/>
<feGaussianBlur stdDeviation="5.45455"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_16822_62175"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="20.7273"/>
<feGaussianBlur stdDeviation="10.3636"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_16822_62175" result="effect2_dropShadow_16822_62175"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="45.8182"/>
<feGaussianBlur stdDeviation="13.6364"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
<feBlend mode="normal" in2="effect2_dropShadow_16822_62175" result="effect3_dropShadow_16822_62175"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="81.8182"/>
<feGaussianBlur stdDeviation="16.3636"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.01 0"/>
<feBlend mode="normal" in2="effect3_dropShadow_16822_62175" result="effect4_dropShadow_16822_62175"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_16822_62175" result="shape"/>
</filter>
<filter id="filter2_dddd_16822_62175" x="214.425" y="-5.07955" width="141.455" height="196" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="5.45455"/>
<feGaussianBlur stdDeviation="5.45455"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_16822_62175"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="20.7273"/>
<feGaussianBlur stdDeviation="10.3636"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_16822_62175" result="effect2_dropShadow_16822_62175"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="45.8182"/>
<feGaussianBlur stdDeviation="13.6364"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
<feBlend mode="normal" in2="effect2_dropShadow_16822_62175" result="effect3_dropShadow_16822_62175"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="81.8182"/>
<feGaussianBlur stdDeviation="16.3636"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.01 0"/>
<feBlend mode="normal" in2="effect3_dropShadow_16822_62175" result="effect4_dropShadow_16822_62175"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_16822_62175" result="shape"/>
</filter>
<filter id="filter3_dddd_16822_62175" x="214.273" y="82.9205" width="141.455" height="196" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="5.45455"/>
<feGaussianBlur stdDeviation="5.45455"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_16822_62175"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="20.7273"/>
<feGaussianBlur stdDeviation="10.3636"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_16822_62175" result="effect2_dropShadow_16822_62175"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="45.8182"/>
<feGaussianBlur stdDeviation="13.6364"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
<feBlend mode="normal" in2="effect2_dropShadow_16822_62175" result="effect3_dropShadow_16822_62175"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="81.8182"/>
<feGaussianBlur stdDeviation="16.3636"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.01 0"/>
<feBlend mode="normal" in2="effect3_dropShadow_16822_62175" result="effect4_dropShadow_16822_62175"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_16822_62175" result="shape"/>
</filter>
<filter id="filter4_dddd_16822_62175" x="30.2727" y="82.9205" width="141.455" height="196" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="5.45455"/>
<feGaussianBlur stdDeviation="5.45455"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_16822_62175"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="20.7273"/>
<feGaussianBlur stdDeviation="10.3636"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_16822_62175" result="effect2_dropShadow_16822_62175"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="45.8182"/>
<feGaussianBlur stdDeviation="13.6364"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
<feBlend mode="normal" in2="effect2_dropShadow_16822_62175" result="effect3_dropShadow_16822_62175"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="81.8182"/>
<feGaussianBlur stdDeviation="16.3636"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.01 0"/>
<feBlend mode="normal" in2="effect3_dropShadow_16822_62175" result="effect4_dropShadow_16822_62175"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_16822_62175" result="shape"/>
</filter>
<filter id="filter5_dddd_16822_62175" x="122.273" y="82.9205" width="141.455" height="196" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="5.45455"/>
<feGaussianBlur stdDeviation="5.45455"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_16822_62175"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="20.7273"/>
<feGaussianBlur stdDeviation="10.3636"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_16822_62175" result="effect2_dropShadow_16822_62175"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="45.8182"/>
<feGaussianBlur stdDeviation="13.6364"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
<feBlend mode="normal" in2="effect2_dropShadow_16822_62175" result="effect3_dropShadow_16822_62175"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="81.8182"/>
<feGaussianBlur stdDeviation="16.3636"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.01 0"/>
<feBlend mode="normal" in2="effect3_dropShadow_16822_62175" result="effect4_dropShadow_16822_62175"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_16822_62175" result="shape"/>
</filter>
<clipPath id="clip0_16822_62175">
<rect width="386.667" height="148" fill="white"/>
</clipPath>
<clipPath id="clip1_16822_62175">
<rect width="43.4286" height="43.4286" fill="white" transform="translate(79.4385 16.6602)"/>
</clipPath>
<clipPath id="clip2_16822_62175">
<rect width="43.4286" height="43.4286" fill="white" transform="translate(171.438 16.6602)"/>
</clipPath>
<clipPath id="clip3_16822_62175">
<rect width="39.8095" height="39.8095" fill="white" transform="translate(264.095 103.646)"/>
</clipPath>
<clipPath id="clip4_16822_62175">
<rect width="44" height="44" fill="white" transform="translate(78 101.551)"/>
</clipPath>
<clipPath id="clip5_16822_62175">
<rect width="44" height="44" fill="white" transform="translate(169.609 101.16)"/>
</clipPath>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 30 KiB

84
ui-ngx/src/assets/iot-hub/category-dashboards-img.svg

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 62 KiB

BIN
ui-ngx/src/assets/iot-hub/category-device-library-img.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 165 KiB

95
ui-ngx/src/assets/iot-hub/category-device-library-img.svg

@ -1,95 +0,0 @@
<svg width="387" height="148" viewBox="0 0 387 148" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_17063_68013)">
<g filter="url(#filter0_dddd_17063_68013)">
<rect x="28" width="77" height="51" rx="5.85799" fill="white"/>
<g clip-path="url(#clip1_17063_68013)">
<path d="M44.1343 31.0677V17.4609H47.4659V28.2088H52.676V31.0677H44.1343Z" fill="#4B8A79"/>
<path d="M69.6183 19.976V23.6491H72.6664C73.8537 23.6491 74.4562 23.0339 74.4562 21.8216C74.4562 20.5912 73.8714 19.9941 72.6664 19.9941H69.6183V19.976ZM66.2866 31.0677V17.4609H72.9499C76.1752 17.4609 77.7879 18.9447 77.7879 21.9302C77.7879 22.8168 77.5398 23.5767 77.0436 24.2281C76.5474 24.8795 75.8739 25.35 75.041 25.6033L78.0891 31.0677H74.3676L71.7448 26.1642H69.6183V31.0677H66.2866Z" fill="#4B8A79"/>
<path d="M85.3189 26.8347V26.129L83.3518 26.708C82.4126 26.9794 81.9518 27.4137 81.9518 28.0289C81.9518 28.7888 82.4126 29.1688 83.3164 29.1688C83.9189 29.1688 84.3974 28.9698 84.7696 28.5717C85.124 28.1555 85.3189 27.5765 85.3189 26.8347ZM88.1189 23.5777V28.9517C88.1189 29.9107 88.2075 30.6163 88.3847 31.0687H85.6911C85.5847 30.743 85.5316 30.3992 85.5139 30.0192H85.4784C85.248 30.3992 84.805 30.7249 84.1848 30.9782C83.6177 31.2134 83.0506 31.3401 82.4835 31.3401C81.4911 31.3401 80.7113 31.0868 80.1088 30.562C79.4708 30.0192 79.1519 29.2593 79.1519 28.3184C79.1519 27.1604 79.6126 26.2737 80.5164 25.6766C81.2962 25.17 82.5367 24.79 84.2556 24.5548L85.3189 24.4101V23.5596C85.3189 22.8359 84.8582 22.474 83.9367 22.474C83.4582 22.474 83.1037 22.5826 82.8734 22.7816C82.643 22.9806 82.4835 23.3425 82.4126 23.831H79.5772C79.6303 21.6959 81.0126 20.6465 83.6886 20.6465C85.1417 20.6465 86.2227 20.8455 86.9316 21.2617C87.729 21.714 88.1189 22.4921 88.1189 23.5777Z" fill="#4B8A79"/>
<path d="M59.0204 22.9068C58.2229 22.9068 57.6204 23.1963 57.2128 23.7934C56.8407 24.3362 56.6457 25.06 56.6457 25.9828C56.6457 26.9056 56.8407 27.6294 57.2128 28.1722C57.6204 28.7693 58.2229 29.0588 59.0204 29.0588C60.6153 29.0588 61.3951 27.9912 61.3951 25.8561C61.3951 24.9876 61.2001 24.282 60.828 23.7572C60.4204 23.1963 59.8179 22.9068 59.0204 22.9068ZM59.0204 20.627C60.6153 20.627 61.8913 21.0974 62.866 22.0383C63.8406 22.9792 64.3191 24.3001 64.3191 25.9828C64.3191 27.6656 63.8406 28.9864 62.866 29.9273C61.8913 30.8682 60.6153 31.3387 59.0204 31.3387C57.4255 31.3387 56.1495 30.8682 55.1748 29.9273C54.2002 28.9864 53.7217 27.6656 53.7217 25.9828C53.7217 24.3001 54.2002 22.9792 55.1748 22.0383C56.1672 21.0974 57.4432 20.627 59.0204 20.627Z" fill="#4B8A79"/>
<path d="M58.9313 18.6012C60.3844 18.6012 61.749 19.0354 62.8832 19.7954L63.4502 18.963C62.1388 18.0945 60.5971 17.5879 58.9313 17.5879C57.3363 17.5879 55.8477 18.0583 54.5718 18.8545L55.1389 19.6868C56.2553 18.9811 57.549 18.6012 58.9313 18.6012Z" fill="#4B8A79"/>
<path d="M52.7998 16.2479L53.5618 17.3517C55.1213 16.3384 56.9644 15.7594 58.9314 15.7594C60.9871 15.7594 62.8833 16.3927 64.4783 17.4602L65.2403 16.3565C63.4327 15.1261 61.2529 14.4023 58.9314 14.4023C56.6808 14.4023 54.572 15.0899 52.7998 16.2479Z" fill="#4B8A79"/>
<path d="M58.9316 12.8649C61.5898 12.8649 64.0531 13.6791 66.1265 15.0905L67.0834 13.6972C64.7619 12.0869 61.9442 11.1641 58.9316 11.1641C56.0075 11.1641 53.2607 12.0507 50.9746 13.5706L51.9316 14.9638C53.9518 13.643 56.3442 12.8649 58.9316 12.8649Z" fill="#4B8A79"/>
<path d="M59.1269 33.4012C57.6737 33.4012 56.3092 32.967 55.175 32.207L54.6079 33.0394C55.9193 33.9079 57.4611 34.4145 59.1446 34.4145C60.7395 34.4145 62.2281 33.9441 63.5041 33.1479L62.937 32.3156C61.8028 33.0213 60.5092 33.4012 59.1269 33.4012Z" fill="#4B8A79"/>
<path d="M65.2579 35.7533L64.4958 34.6496C62.9363 35.6628 61.0933 36.2419 59.1262 36.2419C57.0705 36.2419 55.1743 35.6086 53.5794 34.541L52.8174 35.6448C54.625 36.8752 56.787 37.5989 59.1262 37.5989C61.3769 37.5989 63.4857 36.9113 65.2579 35.7533Z" fill="#4B8A79"/>
<path d="M59.1265 39.1377C56.4683 39.1377 54.005 38.3234 51.9316 36.9121L50.9746 38.3054C53.2961 39.8976 56.1138 40.8385 59.1265 40.8385C62.0505 40.8385 64.7974 39.9519 67.0834 38.432L66.1265 37.0388C64.1062 38.3596 61.6961 39.1377 59.1265 39.1377Z" fill="#4B8A79"/>
</g>
<rect x="28" y="120" width="77.1302" height="40" rx="5.85799" fill="url(#paint0_linear_17063_68013)"/>
<rect x="28" y="60" width="59" height="50" rx="5.85799" fill="white"/>
<path d="M41.7041 81.0303L44.5996 83.9258C51.7948 76.7305 63.4636 76.7305 70.6589 83.9258L73.5543 81.0303C64.7666 72.2425 50.5063 72.2425 41.7041 81.0303ZM53.286 92.6122L57.6292 96.9554L61.9724 92.6122C59.5837 90.2089 55.6892 90.2089 53.286 92.6122ZM47.4951 86.8212L50.3905 89.7167C54.3863 85.7209 60.8721 85.7209 64.8679 89.7167L67.7634 86.8212C62.1751 81.233 53.0978 81.233 47.4951 86.8212Z" fill="#4B8A79"/>
<rect x="115" width="64" height="51" rx="5.85799" fill="white"/>
<path d="M165.655 27.4551H162.473V25.0732H165.655C166.088 25.0732 166.44 25 166.709 24.8535C166.979 24.707 167.175 24.5049 167.298 24.2471C167.427 23.9834 167.492 23.6875 167.492 23.3594C167.492 23.0078 167.427 22.6826 167.298 22.3838C167.175 22.085 166.979 21.8447 166.709 21.6631C166.44 21.4756 166.088 21.3818 165.655 21.3818H163.633V31.7969H160.548V19H165.655C166.68 19 167.562 19.1875 168.3 19.5625C169.044 19.9375 169.616 20.4531 170.014 21.1094C170.413 21.7598 170.612 22.5039 170.612 23.3418C170.612 24.168 170.413 24.8887 170.014 25.5039C169.616 26.1191 169.044 26.5996 168.3 26.9453C167.562 27.2852 166.68 27.4551 165.655 27.4551Z" fill="#4B8A79"/>
<path d="M155.239 19V31.7969H152.154V19H155.239ZM159.088 19V21.3818H148.392V19H159.088Z" fill="#4B8A79"/>
<path d="M143.593 19V31.7969H140.508V19H143.593ZM147.442 19V21.3818H136.746V19H147.442Z" fill="#4B8A79"/>
<path d="M133.476 24.0801V26.4531H126.911V24.0801H133.476ZM127.939 19V31.7969H124.854V19H127.939ZM135.55 19V31.7969H132.474V19H135.55Z" fill="#4B8A79"/>
<rect x="114.894" y="120" width="64.4379" height="40" rx="5.85799" fill="url(#paint1_linear_17063_68013)"/>
<rect x="189" width="102" height="51" rx="5.85799" fill="white"/>
<path d="M230.034 27.1094C230.159 27.3778 230.276 27.6534 230.387 27.9363C230.494 27.6509 230.614 27.3702 230.746 27.0949C230.871 26.8266 231.003 26.5582 231.135 26.3044L234.831 19.095C234.897 18.9717 234.963 18.8774 235.036 18.8049C235.102 18.7396 235.183 18.6888 235.271 18.6526C235.359 18.6163 235.454 18.6018 235.564 18.6018H238.498V32.861H235.549V24.6507C235.549 24.2518 235.571 23.8239 235.608 23.3597L231.787 30.6924C231.67 30.9244 231.509 31.0913 231.311 31.2146C231.113 31.3306 230.878 31.3886 230.621 31.3886H230.166C229.91 31.3886 229.682 31.3306 229.477 31.2146C229.279 31.0985 229.118 30.9244 229 30.6924L225.15 23.3524C225.18 23.5845 225.194 23.8094 225.209 24.0342C225.224 24.2591 225.231 24.4694 225.231 24.658V32.861H222.283V18.6018H225.216C225.326 18.6018 225.422 18.6163 225.51 18.6526C225.598 18.6888 225.671 18.7324 225.744 18.8049C225.81 18.8702 225.884 18.9717 225.95 19.095L229.66 26.3406C229.785 26.5872 229.917 26.8411 230.034 27.1094ZM254.317 25.7241C254.317 26.3406 254.251 26.9281 254.126 27.4938C253.994 28.0596 253.81 28.589 253.568 29.0822C253.326 29.5754 253.033 30.0396 252.674 30.4603C252.322 30.8882 251.918 31.2581 251.471 31.5845L255.123 35.53H252.373C251.977 35.53 251.618 35.4793 251.295 35.385C250.972 35.2907 250.686 35.1021 250.437 34.812L248.648 32.8247C248.354 32.8827 248.061 32.9262 247.76 32.9625C247.459 32.9915 247.151 33.0133 246.836 33.0133C245.714 33.0133 244.687 32.8247 243.763 32.4548C242.839 32.0849 242.047 31.57 241.394 30.9099C240.734 30.2572 240.228 29.4811 239.869 28.5963C239.51 27.7114 239.326 26.7468 239.326 25.7169C239.326 24.687 239.51 23.7296 239.869 22.8375C240.228 21.9526 240.734 21.1766 241.394 20.5238C242.054 19.8711 242.839 19.3561 243.763 18.9862C244.687 18.6163 245.707 18.4277 246.836 18.4277C247.958 18.4277 248.978 18.6163 249.902 18.9935C250.826 19.3706 251.61 19.8856 252.263 20.5383C252.916 21.1911 253.422 21.9599 253.781 22.852C254.141 23.7368 254.317 24.6942 254.317 25.7241ZM250.892 25.7241C250.892 25.0206 250.796 24.3823 250.613 23.8166C250.43 23.2509 250.166 22.7722 249.814 22.3806C249.469 21.9889 249.044 21.6915 248.545 21.4812C248.046 21.2709 247.474 21.1693 246.829 21.1693C246.183 21.1693 245.604 21.2709 245.098 21.4812C244.592 21.6915 244.167 21.9889 243.822 22.3806C243.477 22.7722 243.213 23.2509 243.023 23.8166C242.839 24.3823 242.744 25.0134 242.744 25.7241C242.744 26.4349 242.839 27.0732 243.023 27.6389C243.206 28.2046 243.47 28.6833 243.822 29.075C244.167 29.4666 244.592 29.764 245.098 29.9743C245.604 30.1774 246.176 30.2862 246.829 30.2862C247.467 30.2862 248.039 30.1847 248.545 29.9743C249.044 29.7712 249.469 29.4666 249.814 29.075C250.158 28.6833 250.422 28.2046 250.613 27.6389C250.804 27.0732 250.892 26.4349 250.892 25.7241ZM265.06 18.5946V21.2201H261.152V32.861H257.807V21.2201H253.898V18.5946H265.06ZM277.865 18.5946V21.2201H273.81V32.861H270.465V21.2201H266.557V18.5946H277.865Z" fill="#4B8A79"/>
<path d="M204.368 26.4816H204.325V32.2049C204.325 32.6179 204.655 32.9571 205.056 32.9571H210.78C210.73 29.3801 207.879 26.4816 204.368 26.4816ZM204.368 21.7614H204.325V24.1953C209.047 24.2174 212.887 28.1263 212.937 32.9571H215.387C215.344 26.7766 210.422 21.7614 204.368 21.7614ZM218.862 32.2122V27.0421C217.2 22.853 213.854 19.5414 209.691 18H205.056C204.655 18 204.325 18.3393 204.325 18.7523V19.4824C211.59 19.5046 217.501 25.5302 217.544 32.9645H218.131C218.54 32.9571 218.862 32.6252 218.862 32.2122ZM216.949 20.0872C217.623 20.7805 218.31 21.6582 218.862 22.4326V18.7449C218.862 18.647 218.844 18.55 218.808 18.4595C218.771 18.369 218.718 18.2868 218.651 18.2175C218.584 18.1483 218.504 18.0934 218.416 18.0561C218.328 18.0188 218.234 17.9997 218.139 18H214.449C215.309 18.6122 216.197 19.3128 216.949 20.0872Z" fill="#4B8A79"/>
<rect x="189.095" y="120" width="101.538" height="40" rx="5.85799" fill="url(#paint2_linear_17063_68013)"/>
<path d="M257 65.858C257 62.6227 259.623 60 262.858 60H352.142C355.377 60 358 62.6227 358 65.858V104.142C358 107.377 355.377 110 352.142 110H262.858C259.623 110 257 107.377 257 104.142V65.858Z" fill="white"/>
<path d="M292.432 86.0178L294.876 86.7841C294.501 88.1317 293.877 89.134 293.002 89.7909C292.134 90.4421 291.029 90.7678 289.689 90.7678C288.031 90.7678 286.669 90.2091 285.601 89.0917C284.534 87.9688 284 86.436 284 84.4934C284 82.4385 284.537 80.8439 285.61 79.7097C286.683 78.5699 288.094 78 289.843 78C291.37 78 292.611 78.4465 293.565 79.3392C294.132 79.867 294.558 80.625 294.842 81.6131L292.347 82.2027C292.199 81.5626 291.89 81.0572 291.418 80.6868C290.953 80.3161 290.385 80.1309 289.715 80.1309C288.789 80.1309 288.037 80.4593 287.458 81.1162C286.884 81.7731 286.598 82.837 286.598 84.3082C286.598 85.869 286.882 86.9807 287.449 87.6433C288.017 88.3057 288.755 88.6371 289.664 88.6371C290.334 88.6371 290.91 88.4265 291.393 88.0054C291.875 87.5843 292.222 86.9217 292.432 86.0178ZM296.789 85.9589C296.789 85.1728 296.985 84.4121 297.376 83.6765C297.768 82.9409 298.322 82.3795 299.037 81.992C299.758 81.6047 300.562 81.411 301.448 81.411C302.816 81.411 303.937 81.8517 304.812 82.7333C305.686 83.6092 306.123 84.718 306.123 86.0599C306.123 87.4129 305.681 88.536 304.795 89.4286C303.915 90.3158 302.805 90.7593 301.465 90.7593C300.636 90.7593 299.844 90.574 299.088 90.2034C298.339 89.833 297.768 89.2911 297.376 88.5781C296.985 87.8594 296.789 86.9864 296.789 85.9589ZM299.242 86.0851C299.242 86.9724 299.455 87.6516 299.88 88.1233C300.306 88.5948 300.832 88.8306 301.456 88.8306C302.081 88.8306 302.603 88.5948 303.023 88.1233C303.449 87.6516 303.662 86.9667 303.662 86.0682C303.662 85.1924 303.449 84.5186 303.023 84.0471C302.603 83.5754 302.081 83.3396 301.456 83.3396C300.832 83.3396 300.306 83.5754 299.88 84.0471C299.455 84.5186 299.242 85.1981 299.242 86.0851ZM319.593 90.5572H316.851L315.761 87.7527H310.77L309.739 90.5572H307.065L311.928 78.2106H314.594L319.593 90.5572ZM314.952 85.6724L313.231 81.0909L311.545 85.6724H314.952ZM321.251 90.5572V78.2106H325.296C326.829 78.2106 327.829 78.2724 328.294 78.3958C329.01 78.5813 329.609 78.9854 330.091 79.6086C330.574 80.2263 330.815 81.0263 330.815 82.0089C330.815 82.7669 330.676 83.4042 330.398 83.9207C330.12 84.4373 329.765 84.8443 329.333 85.1419C328.907 85.4339 328.473 85.6277 328.03 85.723C327.428 85.8409 326.557 85.8999 325.415 85.8999H323.772V90.5572H321.251ZM323.772 80.2993V83.8027H325.151C326.145 83.8027 326.809 83.7383 327.144 83.6092C327.479 83.4801 327.741 83.2778 327.928 83.0027C328.121 82.7276 328.217 82.4076 328.217 82.0427C328.217 81.5935 328.084 81.2229 327.817 80.9309C327.55 80.639 327.212 80.4564 326.804 80.3834C326.503 80.3273 325.898 80.2993 324.99 80.2993H323.772Z" fill="#4B8A79"/>
<path d="M96 65.858C96 62.6227 98.6227 60 101.858 60H173.142C176.377 60 179 62.6227 179 65.858V104.142C179 107.377 176.377 110 173.142 110H101.858C98.6227 110 96 107.377 96 104.142V65.858Z" fill="white"/>
<path d="M127.044 79H130.154V87.2264C130.154 88.2067 129.945 89.0371 129.525 89.7177C129.106 90.3924 128.518 90.9027 127.762 91.2488C127.006 91.5947 126.117 91.7678 125.095 91.7678C124.085 91.7678 123.196 91.5947 122.428 91.2488C121.666 90.9027 121.069 90.3924 120.638 89.7177C120.213 89.0371 120 88.2067 120 87.2264V79H123.119V87.2264C123.119 87.7454 123.196 88.1692 123.349 88.4979C123.503 88.8208 123.727 89.0573 124.023 89.2073C124.318 89.3572 124.675 89.4322 125.095 89.4322C125.52 89.4322 125.878 89.3572 126.167 89.2073C126.456 89.0573 126.675 88.8208 126.823 88.4979C126.97 88.1692 127.044 87.7454 127.044 87.2264V79ZM136.628 91.5947H133.766L133.783 89.2591H136.628C137.218 89.2591 137.718 89.1208 138.125 88.8439C138.539 88.5672 138.852 88.1549 139.064 87.6069C139.283 87.0533 139.392 86.3729 139.392 85.5656V85.0206C139.392 84.4151 139.33 83.8845 139.206 83.4289C139.088 82.9675 138.911 82.584 138.674 82.2785C138.438 81.967 138.143 81.7335 137.788 81.5778C137.44 81.4221 137.038 81.3443 136.583 81.3443H133.713V79H136.583C137.458 79 138.258 79.147 138.985 79.4412C139.717 79.7295 140.349 80.1447 140.881 80.6868C141.418 81.2231 141.832 81.8604 142.121 82.5985C142.417 83.3309 142.564 84.144 142.564 85.0378V85.5656C142.564 86.4537 142.417 87.2667 142.121 88.0049C141.832 88.743 141.421 89.3803 140.89 89.9166C140.358 90.4528 139.729 90.8682 139.002 91.1622C138.282 91.4506 137.49 91.5947 136.628 91.5947ZM135.547 79V91.5947H132.437V79H135.547ZM149.658 87.3216H146.45V84.9773H149.658C150.095 84.9773 150.45 84.9052 150.721 84.761C150.993 84.6169 151.191 84.418 151.315 84.1642C151.445 83.9047 151.51 83.6135 151.51 83.2906C151.51 82.9444 151.445 82.6245 151.315 82.3303C151.191 82.0362 150.993 81.7998 150.721 81.621C150.45 81.4364 150.095 81.3443 149.658 81.3443H147.62V91.5947H144.51V79H149.658C150.692 79 151.581 79.1845 152.325 79.5536C153.075 79.9227 153.651 80.4302 154.053 81.076C154.455 81.7162 154.655 82.4485 154.655 83.2732C154.655 84.0863 154.455 84.7957 154.053 85.4011C153.651 86.0066 153.075 86.4795 152.325 86.8198C151.581 87.1542 150.692 87.3216 149.658 87.3216Z" fill="#4B8A79"/>
<rect x="189" y="60" width="58" height="50" rx="5.85799" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M217.767 80.0992C222.988 75.2953 228.279 72.8314 229.992 74.5434C231.759 76.3111 229.078 81.888 223.968 87.2686C226.244 90.7343 227.1 93.6975 225.898 94.8994C224.637 96.1598 221.439 95.1558 217.755 92.6228V92.6405C214.082 95.1606 210.895 96.1567 209.637 94.8994C208.435 93.6976 209.289 90.7339 211.565 87.2686C206.54 81.9769 203.865 76.4954 205.46 74.6348L205.543 74.5445C207.256 72.8319 212.545 75.2959 217.767 80.0992ZM217.755 89.2033C219.206 90.3414 220.583 91.2303 221.78 91.8331C222.5 92.1954 223.092 92.4201 223.549 92.548C223.421 92.0911 223.195 91.4999 222.833 90.7806C221.849 88.8263 220.101 86.395 217.755 83.9457V89.2033ZM207.895 76.8948C208.022 77.3516 208.247 77.9431 208.609 78.6622C209.526 80.482 211.104 82.7163 213.211 84.9931C213.983 84.0142 214.849 83.0188 215.795 82.0308C213.587 80.0139 211.429 78.4993 209.662 77.6096C208.943 77.2478 208.351 77.0228 207.895 76.8948Z" fill="#4B8A79"/>
<rect x="300" width="58" height="51" rx="5.85799" fill="white"/>
<g clip-path="url(#clip2_17063_68013)">
<path d="M330.115 12H328.6C324.403 12 321 15.4707 321 19.752V30.248C321 34.5293 324.403 38 328.6 38H330.115C334.312 38 337.714 34.5293 337.714 30.248V19.752C337.714 15.4707 334.312 12 330.115 12Z" fill="#4B8A79"/>
<path d="M334.015 21.3373L330.262 25.0894L333.999 28.9258L328.535 35.6748V26.817L325.585 29.7667L324.616 28.7585L328.298 25.0762L324.609 21.2888L325.591 20.2937L328.535 23.3157V14.873L334.015 21.3373ZM329.919 31.7479L332.133 29.0133L329.919 26.7401V31.7479ZM329.919 23.4557L332.117 21.2575L329.919 18.6644V23.4557Z" fill="white"/>
</g>
<rect x="300.396" y="120" width="57.6035" height="40" rx="5.85799" fill="url(#paint3_linear_17063_68013)"/>
</g>
</g>
<defs>
<filter id="filter0_dddd_17063_68013" x="0.569185" y="-4.5718" width="384.862" height="260.58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4.5718"/>
<feGaussianBlur stdDeviation="4.5718"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_17063_68013"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="17.3729"/>
<feGaussianBlur stdDeviation="8.68643"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_17063_68013" result="effect2_dropShadow_17063_68013"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="38.4031"/>
<feGaussianBlur stdDeviation="11.4295"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
<feBlend mode="normal" in2="effect2_dropShadow_17063_68013" result="effect3_dropShadow_17063_68013"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="68.577"/>
<feGaussianBlur stdDeviation="13.7154"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.01 0"/>
<feBlend mode="normal" in2="effect3_dropShadow_17063_68013" result="effect4_dropShadow_17063_68013"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_17063_68013" result="shape"/>
</filter>
<linearGradient id="paint0_linear_17063_68013" x1="66.5651" y1="120" x2="66.5651" y2="148" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_17063_68013" x1="147.112" y1="120" x2="147.112" y2="148" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear_17063_68013" x1="239.864" y1="120" x2="239.864" y2="148" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint3_linear_17063_68013" x1="329.198" y1="120" x2="329.198" y2="148" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip0_17063_68013">
<rect width="387" height="148" fill="white"/>
</clipPath>
<clipPath id="clip1_17063_68013">
<rect width="44.5714" height="30" fill="white" transform="translate(44.1328 11)"/>
</clipPath>
<clipPath id="clip2_17063_68013">
<rect width="16.7143" height="26" fill="white" transform="translate(321 12)"/>
</clipPath>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
ui-ngx/src/assets/iot-hub/category-rule-chains-img.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 133 KiB

107
ui-ngx/src/assets/iot-hub/category-rule-chains-img.svg

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 36 KiB

BIN
ui-ngx/src/assets/iot-hub/category-solution-templates-img.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 127 KiB

After

Width:  |  Height:  |  Size: 126 KiB

BIN
ui-ngx/src/assets/iot-hub/category-widgets-img.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 81 KiB

181
ui-ngx/src/assets/iot-hub/category-widgets-img.svg

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 72 KiB

48
ui-ngx/src/assets/iot-hub/hero-alarm-rule-cluster.svg

@ -0,0 +1,48 @@
<svg width="906" height="207" viewBox="0 0 906 207" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.8" clip-path="url(#clip0_18447_177232)">
<path d="M830.233 71.7761L837.336 72.2728L835.871 93.228L828.768 92.7313L830.233 71.7761Z" stroke="#D7702F" stroke-width="3.53684" stroke-miterlimit="10" stroke-linecap="round"/>
<path d="M802.531 69.8385L795.427 69.3418L793.962 90.297L801.066 90.7937L802.531 69.8385Z" stroke="#D7702F" stroke-width="3.53684" stroke-miterlimit="10" stroke-linecap="round"/>
<path d="M802.296 73.2142L801.302 87.4211L811.602 88.1414L812.099 81.0379L818.706 88.6381L829.006 89.3583L829.999 75.1514L802.296 73.2142Z" stroke="#D7702F" stroke-width="3.53684" stroke-miterlimit="10" stroke-linecap="round"/>
<path d="M819.491 107.469C819.273 110.586 816.57 112.936 813.453 112.718C810.337 112.5 807.987 109.797 808.205 106.68C808.423 103.564 814.658 95.4919 814.658 95.4919C814.658 95.4919 819.709 104.353 819.491 107.469Z" stroke="#D7702F" stroke-width="3.53684" stroke-miterlimit="10" stroke-linecap="round"/>
</g>
<g opacity="0.8" clip-path="url(#clip1_18447_177232)">
<path d="M177.821 50.5582C176.919 50.6166 175.993 50.5893 175.05 50.4679C174.902 50.4488 174.753 50.4274 174.604 50.4039C168.699 49.4686 164.124 45.2653 162.431 39.9301C161.484 36.9444 161.624 33.7191 162.699 30.7769L166.707 19.8029L170.82 25.7295C172.44 15.5059 178.342 12.6604 184.965 9.51631C183.842 16.6031 189.303 23.3791 190.763 32.5063C191.383 34.9647 191.34 37.3975 190.769 39.6435" stroke="#D7702F" stroke-width="4.52113" stroke-miterlimit="10"/>
<path d="M181.264 44.055C182.004 37.5885 176.886 33.5617 176.886 33.5617C176.886 33.5617 170.576 37.1199 169.659 44.0651C169.184 47.0628 171.229 49.8778 174.227 50.3526C175.635 50.5756 177.004 50.2424 178.108 49.5155" stroke="#D7702F" stroke-width="4.52113" stroke-miterlimit="10"/>
</g>
<g opacity="0.8">
<path d="M85.6588 110.96C83.3006 109.05 81.9624 106.581 81.6442 103.554C81.4602 101.803 81.6716 100.13 82.2785 98.536C82.8854 96.9417 83.8263 95.5428 85.1013 94.3393L83.261 76.8304C83.0693 75.0066 83.5447 73.3892 84.6872 71.9783C85.8297 70.5674 87.3129 69.7662 89.1368 69.5745C90.9606 69.3828 92.578 69.8582 93.9888 71.0007C95.3997 72.1432 96.201 73.6264 96.3927 75.4502L98.233 92.9591C99.7303 93.8713 100.941 95.044 101.867 96.4772C102.792 97.9105 103.346 99.5026 103.53 101.253C103.849 104.281 103.053 106.974 101.143 109.332C99.2336 111.69 96.765 113.029 93.7374 113.347C90.7098 113.665 88.0169 112.869 85.6588 110.96ZM89.0184 89.502L93.3957 89.0419L93.1656 86.8533L90.977 87.0834L90.747 84.8948L92.9356 84.6647L92.4755 80.2875L90.2869 80.5175L90.0569 78.3289L92.2455 78.0989L92.0155 75.9103C91.9503 75.2902 91.6859 74.7924 91.2223 74.417C90.7588 74.0416 90.2169 73.8865 89.5968 73.9517C88.9767 74.0169 88.479 74.2812 88.1036 74.7448C87.7282 75.2084 87.5731 75.7502 87.6382 76.3703L89.0184 89.502Z" fill="#D7702F"/>
</g>
<g opacity="0.8" clip-path="url(#clip2_18447_177232)">
<path d="M15.5243 159.232L20.0558 182.545L26.1754 181.355L29.5741 198.84L39.3216 172.751L31.1621 174.338L35.9229 155.267L15.5243 159.232Z" stroke="#D7702F" stroke-width="3.8"/>
</g>
<g opacity="0.8" clip-path="url(#clip3_18447_177232)">
<g clip-path="url(#clip4_18447_177232)">
<path d="M730.138 38.0198C730.355 39.3866 730.911 40.6904 731.808 41.9311C732.705 43.1717 734.129 44.5962 736.08 46.2046L733.449 49.4974C731.015 47.6337 729.206 45.8737 728.022 44.2176C726.838 42.5615 726.092 40.7623 725.785 38.8199C725.568 37.453 725.547 35.9814 725.722 34.4051C725.896 32.8289 726.271 30.8336 726.848 28.4193C727.375 26.1603 727.707 24.4761 727.845 23.3665C727.983 22.2569 727.98 21.2525 727.838 20.3533C727.621 18.9864 727.047 17.7499 726.116 16.6436C725.185 15.5374 723.731 14.3297 721.754 13.0205L724.28 9.41249C726.751 11.049 728.6 12.6551 729.827 14.2307C731.054 15.8063 731.827 17.6013 732.146 19.6157C732.345 20.8746 732.375 22.225 732.234 23.6669C732.094 25.1087 731.733 27.0188 731.151 29.3971C730.593 31.6977 730.244 33.4492 730.102 34.6515C729.961 35.8539 729.973 36.9766 730.138 38.0198ZM719.617 39.6862C719.833 41.0531 720.399 42.3554 721.314 43.5932C722.229 44.831 723.662 46.2541 725.613 47.8625L722.982 51.1553C720.548 49.2915 718.73 47.533 717.528 45.8798C716.326 44.2265 715.571 42.4287 715.263 40.4863C715.047 39.1194 715.026 37.6478 715.2 36.0716C715.375 34.4953 715.75 32.5 716.326 30.0857C716.853 27.8268 717.186 26.1425 717.323 25.0329C717.461 23.9234 717.459 22.919 717.316 22.0197C717.1 20.6528 716.535 19.4148 715.622 18.3058C714.709 17.1967 713.264 15.9876 711.286 14.6784L713.758 11.0789C716.23 12.7155 718.079 14.3215 719.306 15.8971C720.532 17.4728 721.305 19.2677 721.624 21.2821C721.824 22.541 721.853 23.8914 721.713 25.3333C721.572 26.7751 721.211 28.6852 720.629 31.0635C720.072 33.3641 719.722 35.1156 719.581 36.318C719.44 37.5203 719.451 38.643 719.617 39.6862ZM740.659 36.3533C740.876 37.7202 741.442 39.0226 742.357 40.2604C743.272 41.4982 744.705 42.9213 746.656 44.5297L744.016 47.7685C741.582 45.9047 739.766 44.1552 738.566 42.52C737.367 40.8847 736.614 39.0959 736.306 37.1535C736.09 35.7866 736.069 34.315 736.243 32.7387C736.417 31.1624 736.793 29.1672 737.369 26.7529C737.896 24.4939 738.229 22.8096 738.366 21.7001C738.504 20.5905 738.502 19.5861 738.359 18.6869C738.143 17.32 737.578 16.082 736.665 14.973C735.752 13.8639 734.306 12.6548 732.329 11.3455L734.801 7.74606C737.273 9.38261 739.122 10.9887 740.348 12.5643C741.575 14.1399 742.348 15.9349 742.667 17.9492C742.866 19.2082 742.896 20.5586 742.756 22.0004C742.615 23.4423 742.254 25.3523 741.672 27.7306C741.115 30.0313 740.765 31.7828 740.624 32.9851C740.482 34.1875 740.494 35.3102 740.659 36.3533Z" fill="#D7702F"/>
</g>
</g>
<g opacity="0.8" clip-path="url(#clip5_18447_177232)">
<path d="M853.158 193.922L852.795 195.788L850.929 195.425L851.292 193.56L853.158 193.922ZM860.337 156.989L858.471 156.626L858.778 155.048L860.385 155.089L860.337 156.989ZM881.257 157.489L881.281 155.588L883.557 155.617L883.123 157.851L881.257 157.489ZM875.456 197.293C875.256 198.324 874.258 198.997 873.228 198.796C872.197 198.596 871.524 197.598 871.725 196.568L873.59 196.931L875.456 197.293ZM892.987 201.664L892.624 203.53L852.795 195.788L853.158 193.922L853.52 192.057L893.35 199.799L892.987 201.664ZM853.158 193.922L851.292 193.56L858.471 156.626L860.337 156.989L862.203 157.351L855.023 194.285L853.158 193.922ZM881.257 157.489L883.123 157.851L875.456 197.293L873.59 196.931L871.725 196.568L879.391 157.126L881.257 157.489ZM860.337 156.989C860.385 155.089 860.385 155.089 860.385 155.089C860.386 155.089 860.386 155.089 860.386 155.089C860.387 155.089 860.387 155.089 860.389 155.089C860.391 155.089 860.394 155.089 860.399 155.089C860.407 155.089 860.421 155.09 860.438 155.09C860.473 155.091 860.525 155.092 860.593 155.094C860.729 155.098 860.928 155.103 861.183 155.109C861.692 155.122 862.423 155.14 863.307 155.163C865.075 155.207 867.459 155.267 869.919 155.327C874.85 155.448 880.063 155.573 881.281 155.588L881.257 157.489L881.233 159.389C879.986 159.373 874.739 159.248 869.826 159.127C867.364 159.067 864.98 159.007 863.211 158.963C862.327 158.94 861.596 158.922 861.087 158.909C860.832 158.903 860.632 158.897 860.497 158.894C860.429 158.892 860.377 158.891 860.342 158.89C860.324 158.89 860.311 158.889 860.302 158.889C860.298 158.889 860.294 158.889 860.292 158.889C860.291 158.889 860.29 158.889 860.289 158.889C860.289 158.889 860.289 158.889 860.289 158.889C860.289 158.889 860.289 158.889 860.337 156.989Z" fill="#D7702F"/>
<path d="M870.34 174.915L869.237 180.59" stroke="#D7702F" stroke-width="3.8" stroke-miterlimit="10"/>
<path d="M880.225 161.87L888.571 163.492L881.7 198.841" stroke="#D7702F" stroke-width="3.8"/>
</g>
<defs>
<clipPath id="clip0_18447_177232">
<rect width="50" height="50" fill="white" transform="translate(791.453 64.7697) scale(1.0003) rotate(4)"/>
</clipPath>
<clipPath id="clip1_18447_177232">
<rect width="50" height="50" fill="white" transform="translate(156.677 0.832284) scale(1.0003) rotate(9)"/>
</clipPath>
<clipPath id="clip2_18447_177232">
<rect width="50" height="50" fill="white" transform="translate(0.0996397 157.712) scale(1.0003) rotate(-11)"/>
</clipPath>
<clipPath id="clip3_18447_177232">
<rect width="50" height="50" fill="white" transform="translate(700.019 8.65497) scale(1.0003) rotate(-9)"/>
</clipPath>
<clipPath id="clip4_18447_177232">
<rect width="44" height="44" fill="white" transform="translate(703.452 11.1479) scale(1.0003) rotate(-9)"/>
</clipPath>
<clipPath id="clip5_18447_177232">
<rect width="50" height="50" fill="white" transform="translate(856.903 148.166) scale(1.0003) rotate(11)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 8.4 KiB

71
ui-ngx/src/assets/iot-hub/hero-calculated-field-cluster.svg

@ -0,0 +1,71 @@
<svg width="1028" height="297" viewBox="0 0 1028 297" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.8" clip-path="url(#clip0_18326_154129)">
<path d="M31.143 134.974C31.433 134.897 31.775 135.012 31.9493 135.276L32.7327 136.465C32.8457 136.694 33.091 136.835 33.3455 136.819C34.0739 136.831 34.7674 136.906 35.438 137.089C35.6572 137.134 35.9474 137.056 36.1149 136.908L37.168 136.004C37.4192 135.781 37.722 135.752 38.0283 135.929L40.1118 137.133C40.4052 137.262 40.5444 137.587 40.477 137.915L40.2198 139.279C40.1396 139.56 40.2526 139.789 40.401 139.956C40.8946 140.446 41.3052 141.009 41.6797 141.634C41.8409 141.85 42.025 141.956 42.2924 141.988L43.7134 142.074C44.0292 142.093 44.3002 142.331 44.3779 142.621L44.9989 144.942C45.0764 145.232 44.9608 145.574 44.6967 145.748L43.5082 146.531C43.2795 146.644 43.138 146.89 43.1541 147.144C43.1419 147.873 43.0676 148.566 42.8845 149.237C42.8396 149.456 42.9173 149.746 43.0656 149.914L43.9215 150.98C44.144 151.231 44.1728 151.534 43.9959 151.84L42.7921 153.923C42.6635 154.217 42.3384 154.356 42.0096 154.289L40.6458 154.031C40.3654 153.951 40.1363 154.064 39.9689 154.213C39.4794 154.706 38.9157 155.117 38.2907 155.491C38.075 155.653 37.9686 155.837 37.9367 156.104L37.8506 157.525C37.8315 157.841 37.5938 158.112 37.304 158.189L34.9833 158.81C34.6933 158.888 34.3514 158.772 34.1771 158.508L33.3927 157.32C33.2797 157.091 33.0346 156.95 32.7799 156.966C32.0516 156.954 31.3588 156.879 30.6883 156.696C30.4692 156.651 30.1789 156.729 30.0114 156.877L28.9583 157.781C28.7071 158.004 28.4035 158.033 28.0971 157.856L26.0145 156.652C25.7211 156.523 25.5819 156.198 25.6493 155.869L25.9547 154.493C26.0349 154.212 25.9219 153.983 25.7735 153.816C25.2799 153.326 24.8693 152.762 24.4948 152.137C24.3336 151.922 24.1495 151.815 23.8821 151.783L22.4611 151.698C22.1453 151.679 21.8743 151.441 21.7966 151.151L21.1756 148.83C21.0981 148.54 21.2137 148.198 21.4778 148.024L22.6664 147.24C22.895 147.127 23.0365 146.882 23.0204 146.628C23.0326 145.899 23.1069 145.206 23.29 144.535C23.3349 144.316 23.2572 144.026 23.1089 143.858L22.1567 142.818C21.9824 142.554 21.9405 142.202 22.0691 141.909L23.2723 139.826C23.4622 139.568 23.7879 139.429 24.1038 139.448L25.4805 139.753C25.761 139.834 25.99 139.721 26.1575 139.572C26.647 139.079 27.2107 138.668 27.8357 138.294C28.0512 138.132 28.1577 137.948 28.1897 137.681L28.2748 136.26C28.2939 135.944 28.5325 135.673 28.8224 135.595L31.143 134.974ZM39.4483 143.5C39.6992 143.973 39.9021 144.481 40.0467 145.022C41.0815 148.888 38.768 152.823 34.9495 153.845C31.9591 154.645 28.8758 153.437 27.182 151.019C28.8756 153.438 31.9591 154.647 34.95 153.847C38.7687 152.825 41.083 148.89 40.0481 145.023C39.9034 144.482 39.6996 143.973 39.4483 143.5ZM31.5345 141.083C28.331 141.941 26.4291 145.233 27.2862 148.436C28.1435 151.64 31.4354 153.542 34.639 152.685C37.8424 151.827 39.7446 148.535 38.8873 145.332C38.0299 142.129 34.7378 140.226 31.5345 141.083ZM26.538 149.89C26.6736 150.187 26.8266 150.471 26.9975 150.741C26.8265 150.471 26.6736 150.187 26.538 149.89Z" fill="#006D92"/>
<circle opacity="0.16" cx="33.0873" cy="146.885" r="22.5176" transform="rotate(-14.9817 33.0873 146.885)" stroke="#006D92" stroke-width="3"/>
<circle cx="27.266" cy="125.133" r="4.50352" transform="rotate(-14.9817 27.266 125.133)" fill="#006D92"/>
<circle cx="11.3356" cy="152.705" r="4.50352" transform="rotate(-14.9817 11.3356 152.705)" fill="#006D92"/>
<circle cx="38.9079" cy="168.636" r="4.50352" transform="rotate(-14.9817 38.9079 168.636)" fill="#006D92"/>
<circle cx="54.8403" cy="141.063" r="4.50352" transform="rotate(-14.9817 54.8403 141.063)" fill="#006D92"/>
</g>
<g opacity="0.8" clip-path="url(#clip1_18326_154129)">
<rect opacity="0.16" x="906.708" y="5.05864" width="50.0391" height="50.0391" rx="25" transform="rotate(-5.802 906.708 5.05864)" fill="#006D92"/>
<path d="M923.887 22.8742L918.918 28.9677L925.011 33.937" stroke="#006D92" stroke-width="2.77778" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M943.246 20.907L949.34 25.8763L944.37 31.9698" stroke="#006D92" stroke-width="2.77778" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M935.77 16.0759L932.486 38.7637" stroke="#006D92" stroke-width="2.77778" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g opacity="0.8" clip-path="url(#clip2_18326_154129)">
<path opacity="0.16" d="M124.309 10.1822C124.141 10.5892 124.021 11.0239 123.957 11.4801C123.547 14.3993 125.581 17.0983 128.5 17.5085C128.956 17.5727 129.407 17.5771 129.845 17.5278L126.084 44.2885C125.677 44.1204 125.242 44.0005 124.786 43.9363C121.867 43.5261 119.168 45.5599 118.757 48.479C118.693 48.9353 118.689 49.3862 118.738 49.8238L91.9775 46.0629C92.1455 45.6558 92.2655 45.2211 92.3296 44.7649C92.7399 41.8457 90.706 39.1467 87.7869 38.7365C87.3306 38.6723 86.8797 38.6679 86.4421 38.7172L90.2031 11.9565C90.6102 12.1246 91.0448 12.2446 91.5011 12.3087C94.4202 12.7189 97.1192 10.6851 97.5295 7.76596C97.5936 7.30969 97.5981 6.85879 97.5487 6.42118L124.309 10.1822Z" fill="#006D92"/>
<path opacity="0.4" d="M118.893 47.8243C118.835 48.037 118.789 48.2552 118.757 48.479C118.693 48.9353 118.689 49.3862 118.738 49.8238L91.9775 46.0629C92.1455 45.6558 92.2655 45.2211 92.3296 44.7649C92.3611 44.541 92.3765 44.3185 92.3799 44.0982L118.893 47.8243ZM90.2031 11.9565C90.6102 12.1246 91.0448 12.2446 91.5011 12.3087C91.7249 12.3401 91.9475 12.3555 92.1678 12.359L88.4418 38.8706C88.2291 38.8132 88.0107 38.7679 87.7869 38.7365C87.3306 38.6723 86.8797 38.6679 86.4421 38.7172L90.2031 11.9565ZM126.084 44.2885C125.677 44.1204 125.242 44.0005 124.786 43.9363C124.562 43.9049 124.34 43.8882 124.119 43.8848L127.845 17.3731C128.058 17.4305 128.276 17.4771 128.5 17.5085C128.956 17.5727 129.407 17.5771 129.845 17.5278L126.084 44.2885ZM124.309 10.1822C124.141 10.5892 124.021 11.0239 123.957 11.4801C123.926 11.704 123.91 11.9265 123.907 12.1468L97.3941 8.42067C97.4515 8.20796 97.498 7.98978 97.5295 7.76596C97.5936 7.30969 97.5981 6.85879 97.5487 6.42118L124.309 10.1822Z" fill="#006D92"/>
<path d="M133.208 12.7758C133.515 10.5865 131.99 8.56224 129.801 8.25454C127.611 7.94685 125.587 9.47224 125.279 11.6616C124.972 13.8509 126.497 15.8752 128.686 16.1829C130.876 16.4906 132.9 14.9652 133.208 12.7758Z" fill="#006D92"/>
<path d="M128.006 49.7774C128.314 47.588 126.789 45.5638 124.599 45.2561C122.41 44.9484 120.386 46.4738 120.078 48.6631C119.77 50.8525 121.296 52.8767 123.485 53.1844C125.674 53.4921 127.699 51.9667 128.006 49.7774Z" fill="#006D92"/>
<path d="M91.0088 44.5741C91.3165 42.3848 89.7911 40.3605 87.6017 40.0528C85.4124 39.7451 83.3881 41.2705 83.0804 43.4599C82.7728 45.6492 84.2981 47.6735 86.4875 47.9811C88.6768 48.2888 90.7011 46.7635 91.0088 44.5741Z" fill="#006D92"/>
<path d="M96.2082 7.57647C96.5158 5.38712 94.9905 3.36286 92.8011 3.05517C90.6118 2.74748 88.5875 4.27286 88.2798 6.46221C87.9721 8.65156 89.4975 10.6758 91.6869 10.9835C93.8762 11.2912 95.9005 9.76582 96.2082 7.57647Z" fill="#006D92"/>
</g>
<g opacity="0.8" clip-path="url(#clip3_18326_154129)">
<rect x="994.063" y="125.172" width="21.35" height="16.0125" rx="1.33333" transform="rotate(12 994.063 125.172)" fill="#006D92"/>
<path opacity="0.16" fill-rule="evenodd" clip-rule="evenodd" d="M1000.27 143.379C1000.81 143.028 1001.53 143.182 1001.88 143.723C1001.89 143.73 1001.89 143.738 1001.89 143.745L1004.96 148.471C1005.31 149.012 1005.16 149.736 1004.62 150.087C1004.08 150.438 1003.36 150.284 1003 149.743L1001.49 147.411C1000.95 150.973 1001.43 153.294 1002.33 154.901C1003.36 156.738 1005.05 157.854 1006.99 158.798C1007.98 159.282 1008.92 159.667 1009.93 160.127C1010.89 160.566 1011.86 161.053 1012.69 161.666C1013.52 162.288 1014.25 163.076 1014.67 164.131C1015.08 165.189 1015.15 166.399 1014.85 167.785C1014.72 168.416 1014.1 168.818 1013.47 168.684C1012.84 168.55 1012.43 167.93 1012.57 167.3C1012.79 166.252 1012.71 165.526 1012.49 164.99C1012.28 164.452 1011.89 163.986 1011.29 163.538C1010.68 163.081 1009.9 162.678 1008.96 162.252C1008.08 161.848 1006.98 161.39 1005.97 160.898C1003.89 159.888 1001.67 158.51 1000.29 156.042C1000.12 155.733 999.961 155.409 999.818 155.071L996.772 169.402C996.638 170.032 996.018 170.435 995.387 170.301C994.757 170.166 994.354 169.547 994.487 168.916L997.533 154.585C997.266 154.836 996.989 155.068 996.705 155.281C994.439 156.973 991.854 157.331 989.547 157.409C988.421 157.447 987.232 157.418 986.258 157.427C985.233 157.437 984.356 157.487 983.61 157.656C982.879 157.821 982.332 158.087 981.918 158.492C981.507 158.895 981.136 159.525 980.914 160.573C980.779 161.203 980.159 161.605 979.529 161.471C978.898 161.337 978.495 160.718 978.629 160.087C978.924 158.701 979.472 157.62 980.285 156.824C981.096 156.03 982.081 155.607 983.096 155.377C984.096 155.152 985.181 155.102 986.237 155.092C987.345 155.081 988.361 155.112 989.468 155.075C991.625 155.003 993.622 154.67 995.308 153.41C996.784 152.308 998.168 150.382 999.121 146.908L996.79 148.422C996.25 148.773 995.526 148.619 995.175 148.078C994.824 147.537 994.977 146.814 995.518 146.463L1000.27 143.379Z" fill="#006D92"/>
<path d="M996.334 161.502C996.924 161.119 997.712 161.287 998.095 161.876L1002.25 168.28C1002.64 168.87 1002.47 169.658 1001.88 170.041L995.475 174.199C994.886 174.582 994.098 174.414 993.715 173.825L989.556 167.421C989.173 166.832 989.341 166.044 989.93 165.661L996.334 161.502Z" fill="#006D92"/>
<path d="M979.368 157.898C979.957 157.515 980.745 157.682 981.128 158.272L985.287 164.676C985.67 165.265 985.502 166.053 984.913 166.436L978.509 170.595C977.919 170.978 977.131 170.81 976.749 170.221L972.59 163.817C972.207 163.227 972.375 162.439 972.964 162.056L979.368 157.898Z" fill="#006D92"/>
<path d="M1013.3 165.11C1013.89 164.728 1014.68 164.895 1015.06 165.485L1019.22 171.888C1019.6 172.478 1019.44 173.266 1018.85 173.649L1012.44 177.807C1011.85 178.19 1011.07 178.023 1010.68 177.433L1006.52 171.029C1006.14 170.44 1006.31 169.652 1006.9 169.269L1013.3 165.11Z" fill="#006D92"/>
</g>
<g opacity="0.8" clip-path="url(#clip4_18326_154129)">
<path opacity="0.16" d="M936.524 251.63L925.971 266.702" stroke="#006D92" stroke-width="2.88889" stroke-linecap="round"/>
<path opacity="0.16" d="M942.218 250.625L957.29 261.178" stroke="#006D92" stroke-width="2.88889" stroke-linecap="round"/>
<path d="M921.48 263.499C921.917 262.875 922.776 262.723 923.4 263.16L930.176 267.905C930.8 268.341 930.951 269.201 930.515 269.825L925.77 276.601C925.333 277.225 924.474 277.376 923.85 276.939L917.074 272.195C916.45 271.758 916.299 270.898 916.735 270.275L921.48 263.499Z" fill="#006D92"/>
<path d="M958.495 256.974C958.932 256.35 959.792 256.199 960.415 256.635L967.191 261.38C967.815 261.817 967.967 262.676 967.53 263.3L962.785 270.076C962.349 270.7 961.489 270.851 960.865 270.415L954.089 265.67C953.465 265.233 953.314 264.374 953.751 263.75L958.495 256.974Z" fill="#006D92"/>
<path d="M936.724 241.728C937.161 241.104 938.021 240.952 938.644 241.389L945.42 246.134C946.044 246.571 946.196 247.43 945.759 248.054L941.014 254.83C940.578 255.454 939.718 255.605 939.094 255.168L932.318 250.424C931.694 249.987 931.543 249.127 931.98 248.504L936.724 241.728Z" fill="#006D92"/>
<path d="M943.774 269.433C944.059 269.383 944.377 269.522 944.522 269.79L945.175 270.996C945.265 271.225 945.488 271.381 945.733 271.387C946.431 271.459 947.09 271.588 947.718 271.82C947.925 271.881 948.209 271.831 948.382 271.703L949.469 270.924C949.728 270.731 950.021 270.729 950.3 270.924L952.198 272.254C952.469 272.402 952.575 272.725 952.483 273.035L952.123 274.321C952.022 274.583 952.112 274.813 952.24 274.986C952.673 275.497 953.019 276.072 953.326 276.703C953.463 276.923 953.63 277.041 953.884 277.094L955.24 277.294C955.542 277.339 955.782 277.591 955.832 277.876L956.234 280.153C956.284 280.438 956.144 280.756 955.876 280.901L954.671 281.554C954.442 281.643 954.285 281.867 954.28 282.112C954.207 282.81 954.078 283.469 953.847 284.097C953.785 284.303 953.835 284.588 953.964 284.761L954.695 285.856C954.887 286.115 954.89 286.408 954.694 286.687L953.366 288.585C953.218 288.856 952.894 288.962 952.584 288.87L951.297 288.51C951.035 288.41 950.806 288.499 950.633 288.627C950.122 289.06 949.547 289.406 948.916 289.713C948.696 289.85 948.579 290.017 948.525 290.271L948.324 291.628C948.279 291.929 948.028 292.169 947.744 292.219L945.465 292.621C945.181 292.671 944.863 292.531 944.718 292.263L944.064 291.058C943.975 290.829 943.752 290.673 943.506 290.667C942.808 290.594 942.149 290.466 941.521 290.234C941.315 290.173 941.03 290.223 940.857 290.351L939.772 291.129C939.512 291.321 939.218 291.324 938.939 291.129L937.042 289.8C936.771 289.652 936.665 289.328 936.757 289.019L937.165 287.723C937.265 287.461 937.176 287.232 937.048 287.059C936.615 286.548 936.269 285.973 935.962 285.342C935.825 285.122 935.658 285.004 935.404 284.951L934.047 284.75C933.746 284.705 933.506 284.454 933.456 284.169L933.054 281.892C933.004 281.607 933.143 281.289 933.411 281.143L934.617 280.491C934.846 280.402 935.002 280.178 935.008 279.933C935.081 279.235 935.209 278.576 935.441 277.948C935.503 277.742 935.452 277.456 935.324 277.283L934.498 276.206C934.353 275.938 934.342 275.597 934.49 275.326L935.818 273.429C936.022 273.197 936.346 273.091 936.648 273.136L937.942 273.544C938.205 273.644 938.434 273.555 938.607 273.426C939.118 272.994 939.694 272.647 940.324 272.341C940.545 272.204 940.662 272.036 940.715 271.782L940.916 270.426C940.96 270.125 941.212 269.885 941.497 269.834L943.774 269.433ZM944.015 287.931C944.069 287.936 944.122 287.941 944.175 287.945C944.122 287.941 944.069 287.936 944.015 287.931ZM943.641 275.328C940.496 275.883 938.396 278.883 938.95 282.028C939.505 285.172 942.504 287.272 945.649 286.717C948.794 286.163 950.893 283.164 950.339 280.019C949.785 276.875 946.786 274.774 943.641 275.328ZM939.898 286.085C940.023 286.202 940.153 286.312 940.286 286.419C940.154 286.312 940.023 286.202 939.899 286.086L939.898 286.085ZM939.118 285.218C939.287 285.44 939.467 285.652 939.66 285.851L939.433 285.605C939.323 285.481 939.219 285.351 939.118 285.218ZM943.439 274.189C939.69 274.85 937.141 278.431 937.81 282.228C937.969 283.126 938.295 283.95 938.747 284.678C938.295 283.951 937.97 283.127 937.811 282.228C937.142 278.432 939.691 274.851 943.44 274.19C943.665 274.15 943.889 274.121 944.113 274.104C943.889 274.121 943.664 274.149 943.439 274.189ZM949.157 275.752C949.449 276.001 949.718 276.276 949.966 276.572C949.718 276.276 949.448 276.001 949.157 275.752ZM947.523 274.711C947.667 274.778 947.809 274.849 947.949 274.925C947.809 274.849 947.667 274.778 947.523 274.711ZM944.183 274.099C945.215 274.03 946.222 274.193 947.145 274.551C946.222 274.193 945.215 274.03 944.183 274.099Z" fill="#006D92"/>
</g>
<g opacity="0.8" clip-path="url(#clip5_18326_154129)">
<path opacity="0.16" d="M96.5152 259.631L111.363 263.258C112.207 263.464 113.098 263.327 113.841 262.876C114.583 262.425 115.116 261.697 115.322 260.853L118.949 246.005C119.155 245.161 119.018 244.27 118.567 243.528C118.116 242.785 117.388 242.253 116.544 242.046L101.696 238.42C100.852 238.214 99.9612 238.351 99.2187 238.802C98.4763 239.253 97.9434 239.98 97.7373 240.824L94.1106 255.673C93.9045 256.516 94.0421 257.408 94.493 258.15C94.944 258.892 95.6714 259.425 96.5152 259.631Z" fill="#006D92"/>
<path d="M101.487 248.484L112.093 251.075C112.374 251.143 112.616 251.321 112.767 251.568C112.917 251.816 112.963 252.113 112.894 252.394C112.825 252.676 112.648 252.918 112.4 253.068C112.153 253.219 111.856 253.264 111.574 253.196L100.969 250.605C100.687 250.537 100.445 250.359 100.294 250.111C100.144 249.864 100.098 249.567 100.167 249.286C100.236 249.004 100.413 248.762 100.661 248.612C100.908 248.461 101.205 248.415 101.487 248.484Z" fill="#006D92"/>
<path opacity="0.16" d="M141.998 248.262L127.15 244.636C126.306 244.429 125.415 244.567 124.672 245.018C123.93 245.469 123.397 246.196 123.191 247.04L119.564 261.888C119.358 262.732 119.496 263.623 119.946 264.366C120.397 265.108 121.125 265.641 121.969 265.847L136.817 269.474C137.661 269.68 138.552 269.542 139.294 269.091C140.037 268.641 140.57 267.913 140.776 267.069L144.402 252.221C144.609 251.377 144.471 250.486 144.02 249.744C143.569 249.001 142.842 248.468 141.998 248.262Z" fill="#006D92"/>
<path d="M137.029 259.413L132.786 258.377L131.75 262.62C131.681 262.901 131.504 263.143 131.256 263.294C131.009 263.444 130.712 263.49 130.43 263.421C130.149 263.352 129.907 263.175 129.756 262.927C129.606 262.68 129.56 262.383 129.629 262.102L130.665 257.859L126.423 256.823C126.141 256.754 125.899 256.577 125.749 256.329C125.598 256.082 125.552 255.785 125.621 255.503C125.69 255.222 125.868 254.98 126.115 254.829C126.362 254.679 126.66 254.633 126.941 254.702L131.183 255.738L132.219 251.496C132.288 251.214 132.466 250.972 132.713 250.822C132.961 250.671 133.258 250.625 133.539 250.694C133.82 250.763 134.063 250.94 134.213 251.188C134.363 251.435 134.409 251.732 134.341 252.014L133.304 256.256L137.547 257.292C137.828 257.361 138.07 257.539 138.221 257.786C138.371 258.034 138.417 258.331 138.348 258.612C138.28 258.893 138.102 259.136 137.854 259.286C137.607 259.436 137.31 259.482 137.029 259.413Z" fill="#006D92"/>
<path opacity="0.16" d="M105.146 288.712C105.99 288.918 106.881 288.78 107.623 288.329C108.366 287.878 108.898 287.151 109.105 286.307L112.731 271.459C112.937 270.615 112.8 269.724 112.349 268.981C111.898 268.239 111.17 267.706 110.327 267.5L95.4784 263.873C94.6346 263.667 93.7434 263.805 93.001 264.256C92.2585 264.707 91.7257 265.434 91.5195 266.278L87.8929 281.126C87.6868 281.97 87.8243 282.861 88.2753 283.603C88.7262 284.346 89.4536 284.879 90.2975 285.085L105.146 288.712Z" fill="#006D92"/>
<path d="M96.5481 272.193C96.424 271.948 96.3969 271.665 96.4724 271.4C96.5479 271.136 96.7204 270.91 96.9554 270.767C97.1905 270.624 97.4707 270.575 97.7401 270.63C98.0096 270.685 98.2484 270.84 98.4088 271.063L100.677 274.798L104.412 272.529C104.657 272.405 104.94 272.378 105.205 272.453C105.469 272.529 105.695 272.701 105.838 272.936C105.981 273.171 106.03 273.452 105.975 273.721C105.92 273.991 105.765 274.229 105.542 274.39L101.807 276.658L104.076 280.393C104.225 280.64 104.27 280.936 104.201 281.216C104.133 281.496 103.957 281.738 103.71 281.888C103.463 282.037 103.168 282.082 102.887 282.014C102.607 281.946 102.365 281.769 102.215 281.523L99.9467 277.788L96.2121 280.057C95.9651 280.206 95.6693 280.251 95.3891 280.183C95.1089 280.114 94.8672 279.938 94.7167 279.691C94.5677 279.445 94.5225 279.149 94.5909 278.868C94.6593 278.588 94.8359 278.347 95.0819 278.196L98.8165 275.928L96.5481 272.193Z" fill="#006D92"/>
<path opacity="0.16" d="M135.782 273.716L120.934 270.089C120.09 269.883 119.199 270.02 118.456 270.471C117.714 270.922 117.181 271.65 116.975 272.494L113.348 287.342C113.142 288.186 113.28 289.077 113.731 289.819C114.182 290.562 114.909 291.095 115.753 291.301L130.601 294.927C131.445 295.133 132.336 294.996 133.079 294.545C133.821 294.094 134.354 293.367 134.56 292.523L138.187 277.675C138.393 276.831 138.255 275.94 137.804 275.197C137.353 274.455 136.626 273.922 135.782 273.716Z" fill="#006D92"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M120.204 282.275L130.81 284.866C131.091 284.934 131.388 284.889 131.636 284.738C131.883 284.588 132.061 284.346 132.13 284.064C132.198 283.783 132.152 283.486 132.002 283.238C131.852 282.991 131.609 282.813 131.328 282.745L120.722 280.154C120.441 280.085 120.144 280.131 119.896 280.282C119.649 280.432 119.471 280.674 119.403 280.956C119.334 281.237 119.38 281.534 119.53 281.781C119.68 282.029 119.923 282.207 120.204 282.275Z" fill="#006D92"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M127.607 277.53C127.461 277.371 127.271 277.258 127.061 277.207C126.78 277.138 126.483 277.184 126.235 277.334C125.988 277.485 125.81 277.727 125.742 278.009C125.69 278.218 125.703 278.439 125.776 278.641C125.85 278.844 125.983 279.021 126.157 279.148C126.331 279.276 126.539 279.349 126.755 279.358C126.971 279.368 127.184 279.313 127.369 279.201C127.554 279.089 127.701 278.924 127.792 278.729C127.883 278.533 127.914 278.314 127.881 278.101C127.848 277.888 127.753 277.689 127.607 277.53Z" fill="#006D92"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M123.797 287.319C123.947 287.567 124.19 287.744 124.471 287.813C124.752 287.882 125.049 287.836 125.297 287.685C125.544 287.535 125.722 287.293 125.79 287.011C125.859 286.73 125.813 286.433 125.663 286.186C125.513 285.938 125.27 285.76 124.989 285.692C124.708 285.623 124.411 285.669 124.163 285.819C123.916 285.969 123.738 286.212 123.669 286.493C123.601 286.775 123.646 287.072 123.797 287.319Z" fill="#006D92"/>
</g>
<defs>
<clipPath id="clip0_18326_154129">
<rect width="54" height="54" fill="white" transform="translate(0 127.768) scale(1.00078) rotate(-14.9817)"/>
</clipPath>
<clipPath id="clip1_18326_154129">
<rect width="50" height="50" fill="white" transform="translate(906.708 5.05864) scale(1.00078) rotate(-5.802)"/>
</clipPath>
<clipPath id="clip2_18326_154129">
<rect width="48" height="48" fill="white" transform="translate(87.7013 0.992963) scale(1.00078) rotate(8)"/>
</clipPath>
<clipPath id="clip3_18326_154129">
<rect width="48" height="48" fill="white" transform="translate(981.012 122.396) scale(1.00078) rotate(12)"/>
</clipPath>
<clipPath id="clip4_18326_154129">
<rect width="52" height="52" fill="white" transform="translate(911.989 245.68) scale(1.00078) rotate(-10)"/>
</clipPath>
<clipPath id="clip5_18326_154129">
<rect width="48" height="48" fill="white" transform="translate(98.5144 237.643) scale(1.00078) rotate(13.7257)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 21 KiB

25
ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-1.svg

@ -1,25 +0,0 @@
<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_17168_73615)">
<rect y="7.87372" width="64.6079" height="64.6079" rx="5.99735" transform="rotate(-7 0 7.87372)" fill="#3DB5E0"/>
<rect x="0.556962" y="8.30886" width="63.6083" height="63.6083" rx="5.49758" transform="rotate(-7 0.556962 8.30886)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
<path d="M35.1984 24.7853C33.433 24.841 32.0513 26.3156 32.1089 28.0969L32.2753 32.7325L36.7511 32.1829L37.1409 35.3572L32.3794 35.9419L32.6691 44.0745C32.7131 45.4147 32.3348 46.7348 31.5879 47.8484C30.8409 48.962 29.7629 49.8127 28.5062 50.2804C27.2495 50.7481 25.8776 50.8091 24.5843 50.4549C23.291 50.1006 22.1418 49.3489 21.2989 48.3061L23.3873 45.633C24.1157 47.2352 26.0241 47.9514 27.6085 47.2091C28.7997 46.6762 29.5382 45.4739 29.4914 44.1747L29.2051 36.3316L24.4436 36.9162L24.0539 33.7419L29.101 33.1222L28.9313 28.197C28.8705 26.5005 29.485 24.8492 30.64 23.605C31.7949 22.3609 33.3961 21.6255 35.0924 21.5601C37.1136 21.4891 39.0594 22.378 40.3174 23.9635L38.229 26.6365C37.6821 25.4631 36.4976 24.7386 35.1984 24.7853ZM52.0325 36.187L49.5199 34.2239L45.5797 39.2671L40.5366 35.3269L38.5417 37.8435L43.6205 41.8115L39.6447 46.8268L42.1891 48.786L46.1293 43.7429L51.1724 47.683L53.1356 45.1704L48.0963 41.2619L52.0325 36.187Z" fill="white"/>
</g>
<defs>
<filter id="filter0_ii_17168_73615" x="0" y="-2.01894" width="71.9999" height="76.038" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17168_73615"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_17168_73615" result="effect2_innerShadow_17168_73615"/>
</filter>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 2.5 KiB

25
ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-2.svg

@ -1,25 +0,0 @@
<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_17168_73617)">
<rect x="7.87372" width="64.6079" height="64.6079" rx="5.99735" transform="rotate(7 7.87372 0)" fill="#3DB5E0"/>
<rect x="8.30886" y="0.556962" width="63.6083" height="63.6083" rx="5.49758" transform="rotate(7 8.30886 0.556962)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
<path d="M25.4671 42.531L18.5057 33.6208L27.4159 26.6594L29.3651 29.1543L22.9895 34.1713L27.962 40.5818L25.4671 42.531ZM31.8869 48.6358L28.9882 47.3133L40.042 22.8931L42.9407 24.2157L31.8869 48.6358ZM44.513 44.8695L42.5638 42.3747L48.9395 37.3576L43.9669 30.9471L46.4618 28.998L53.4232 37.9081L44.513 44.8695Z" fill="white"/>
</g>
<defs>
<filter id="filter0_ii_17168_73617" x="-0.000682753" y="-2.019" width="71.9999" height="76.038" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17168_73617"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_17168_73617" result="effect2_innerShadow_17168_73617"/>
</filter>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 1.9 KiB

25
ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-3.svg

@ -1,25 +0,0 @@
<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_17168_73619)">
<rect y="13.3225" width="64.0777" height="64.0777" rx="5.99735" transform="rotate(-12 0 13.3225)" fill="#3DB5E0"/>
<rect x="0.592768" y="13.7075" width="63.0782" height="63.0782" rx="5.49758" transform="rotate(-12 0.592768 13.7075)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M43.7844 43.2607L53.4895 44.4489C53.8664 44.4951 54.1725 44.7757 54.2514 45.1473C54.3302 45.5189 54.1643 45.8996 53.8385 46.0947L41.3325 53.5851C41.2477 53.6358 41.1557 53.6718 41.0603 53.6921C40.9648 53.7124 40.8658 53.7169 40.7674 53.7049L26.3424 51.9388C25.9654 51.8927 25.6592 51.612 25.5805 51.2405C25.5017 50.8689 25.6676 50.4883 25.9934 50.2931L34.3836 45.2678C34.0445 44.9759 33.6996 44.674 33.352 44.3629C29.0983 40.5547 26.6842 37.4136 26.1769 35.0269C24.9501 29.2551 28.6476 23.5614 34.4193 22.3346C40.191 21.1078 45.8847 24.8053 47.1116 30.5771C47.6189 32.9638 46.691 36.8152 44.354 42.0243C44.1646 42.4464 43.9739 42.8591 43.7844 43.2607ZM40.6804 51.9023L29.1294 50.4881L35.8244 46.4781C37.8461 48.1358 39.3934 49.2437 39.4818 49.3069C39.6849 49.4518 39.9394 49.5048 40.1835 49.4529C40.4275 49.401 40.6385 49.2491 40.7651 49.0341C40.8203 48.9403 41.7859 47.294 42.961 44.9518L50.7024 45.8996L40.6804 51.9023ZM37.4863 36.7637C39.9517 36.2396 41.5311 33.8076 41.0071 31.3421C40.483 28.8767 38.051 27.2973 35.5855 27.8213C33.1201 28.3454 31.5407 30.7774 32.0647 33.2429C32.5888 35.7083 35.0209 37.2877 37.4863 36.7637Z" fill="white"/>
</g>
<defs>
<filter id="filter0_ii_17168_73619" x="0" y="-2.00249" width="76.0007" height="80.0049" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17168_73619"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_17168_73619" result="effect2_innerShadow_17168_73619"/>
</filter>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 2.7 KiB

25
ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-4.svg

@ -1,25 +0,0 @@
<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_17168_73621)">
<rect x="13.3225" width="64.0777" height="64.0777" rx="5.99735" transform="rotate(12 13.3225 0)" fill="#3DB5E0"/>
<rect x="13.7075" y="0.592768" width="63.0782" height="63.0782" rx="5.49758" transform="rotate(12 13.7075 0.592768)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
<path d="M38.2146 39.8171C38.4213 39.8611 38.5992 40.0431 38.6245 40.2644L38.7366 41.2609C38.7344 41.4404 38.8429 41.6083 39.0077 41.6795C39.4608 41.9199 39.8726 42.1876 40.2349 42.5167C40.3581 42.6149 40.5654 42.659 40.7179 42.6194L41.6673 42.3887C41.8958 42.3293 42.0957 42.4079 42.2314 42.6163L43.1544 44.0375C43.2974 44.2119 43.2808 44.4609 43.1337 44.6457L42.5367 45.42C42.3969 45.5701 42.3947 45.7498 42.4342 45.9021C42.5875 46.3669 42.6645 46.8522 42.6998 47.3638C42.7321 47.5506 42.8136 47.6769 42.971 47.7824L43.8357 48.2901C44.0278 48.403 44.1222 48.6399 44.0784 48.8466L43.7268 50.5009C43.6828 50.7078 43.5002 50.8856 43.2787 50.9106L42.2822 51.0227C42.1029 51.0207 41.9356 51.1294 41.8645 51.294C41.624 51.7472 41.3564 52.1589 41.0272 52.5212C40.9291 52.6443 40.8852 52.8517 40.9246 53.0042L41.1207 53.9462C41.1801 54.175 41.1012 54.3744 40.8922 54.5102L39.4709 55.4332C39.2965 55.5761 39.0484 55.5598 38.8636 55.4127L38.0894 54.8156C37.9391 54.6759 37.7587 54.6733 37.6063 54.7129C37.1415 54.8662 36.6565 54.9433 36.1447 54.9786C35.9581 55.0109 35.8324 55.0925 35.7269 55.2499L35.2192 56.1146C35.1063 56.3068 34.8696 56.4013 34.6627 56.3574L33.0084 56.0057C32.8017 55.9616 32.6237 55.779 32.5987 55.5577L32.4866 54.5612C32.4885 54.3818 32.38 54.2145 32.2153 54.1434C31.7623 53.903 31.3503 53.6352 30.9881 53.3062C30.8649 53.2081 30.6575 53.1639 30.5051 53.2035L29.5558 53.4342C29.327 53.4936 29.1275 53.4147 28.9918 53.2058L28.0688 51.7845C27.9261 51.61 27.9422 51.361 28.0895 51.1763L28.721 50.4103C28.8609 50.2599 28.8633 50.0797 28.8237 49.9272C28.6704 49.4624 28.5933 48.9773 28.558 48.4656C28.5256 48.2789 28.4434 48.1531 28.2858 48.0477L27.4211 47.5399C27.2292 47.4269 27.1353 47.1903 27.1792 46.9836L27.5308 45.3293C27.5749 45.1228 27.7569 44.9446 27.9781 44.9195L28.9746 44.8074C29.1542 44.8096 29.3223 44.7004 29.3934 44.5354C29.6338 44.0823 29.9015 43.6704 30.2306 43.3082C30.3285 43.1849 30.3726 42.9783 30.3331 42.826L30.0679 41.8685C30.0432 41.6472 30.1293 41.4136 30.3036 41.2707L31.7248 40.3477C31.9263 40.2466 32.1747 40.2631 32.3668 40.3756L33.1337 41.0073C33.2839 41.1471 33.4635 41.1493 33.6158 41.1098C34.0806 40.9565 34.5658 40.8794 35.0775 40.8441C35.2645 40.8118 35.3907 40.7298 35.4963 40.5721L36.004 39.7074C36.117 39.5156 36.3537 39.4217 36.5603 39.4655L38.2146 39.8171ZM36.5077 43.7783C34.2234 43.2932 31.9781 44.7513 31.4922 47.0354C31.0066 49.3199 32.4648 51.5658 34.7491 52.0517C37.0338 52.5373 39.28 51.0787 39.7656 48.794C40.2508 46.5095 38.7922 44.2639 36.5077 43.7783ZM41.0261 19.0986C41.4931 18.7953 42.1174 18.928 42.4207 19.395L45.7159 24.4692C46.0191 24.9363 45.8865 25.5606 45.4195 25.8639L43.7685 26.9353L49.9615 36.4717L51.6125 35.4003C52.0794 35.0973 52.7038 35.2301 53.0072 35.6968L56.3024 40.771C56.6057 41.2381 56.4728 41.8632 56.0058 42.1665L50.9316 45.4617C50.4646 45.7647 49.8402 45.6321 49.5369 45.1653L46.2417 40.0911C45.9384 39.624 46.0712 38.9989 46.5383 38.6956L48.1876 37.6238L41.9945 28.0873L40.3453 29.1591C39.8783 29.4624 39.254 29.3296 38.9506 28.8627L37.879 27.2125L28.3426 33.4056L29.4142 35.0557C29.7174 35.5228 29.5846 36.1479 29.1176 36.4512L24.0433 39.7464C23.5763 40.0497 22.9512 39.9168 22.6478 39.4498L19.3526 34.3756C19.0493 33.9085 19.1822 33.2834 19.6492 32.9801L24.7235 29.6849C25.1905 29.3816 25.8156 29.5144 26.1189 29.9815L27.1905 31.6316L36.727 25.4386L35.6554 23.7884C35.3521 23.3214 35.4848 22.6971 35.9518 22.3938L41.0261 19.0986Z" fill="white"/>
</g>
<defs>
<filter id="filter0_ii_17168_73621" x="-0.00030061" y="-2.00243" width="76.0007" height="80.0048" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17168_73621"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_17168_73621" result="effect2_innerShadow_17168_73621"/>
</filter>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 4.9 KiB

30
ui-ngx/src/assets/iot-hub/hero-dashboard-icon-1.svg

@ -1,30 +0,0 @@
<svg width="74" height="74" viewBox="0 0 74 74" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_16977_25520)">
<rect y="8.09243" width="66.4025" height="66.4025" rx="6.15549" transform="rotate(-7 0 8.09243)" fill="#4D5FD0"/>
<rect x="0.571648" y="8.53905" width="65.3766" height="65.3766" rx="5.64254" transform="rotate(-7 0.571648 8.53905)" stroke="white" stroke-opacity="0.12" stroke-width="1.02592"/>
<g clip-path="url(#clip0_16977_25520)">
<path d="M22.2504 40.5849L35.2946 38.9833L33.2925 22.678L20.2483 24.2796L22.2504 40.5849ZM23.852 53.6291L36.8962 52.0275L35.695 42.2443L22.6508 43.846L23.852 53.6291ZM40.1573 51.6271L53.2015 50.0254L51.1994 33.7202L38.1552 35.3218L40.1573 51.6271ZM36.5536 22.2776L37.7548 32.0608L50.799 30.4591L49.5978 20.676L36.5536 22.2776Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_ii_16977_25520" x="0" y="-2.07526" width="74.0009" height="78.1511" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-2.05183"/>
<feGaussianBlur stdDeviation="4.10366"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_16977_25520"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="2.05183"/>
<feGaussianBlur stdDeviation="4.10366"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_16977_25520" result="effect2_innerShadow_16977_25520"/>
</filter>
<clipPath id="clip0_16977_25520">
<rect width="38.9848" height="38.9848" fill="white" transform="translate(14.7591 19.9894) scale(1.01133) rotate(-7)"/>
</clipPath>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 2.1 KiB

25
ui-ngx/src/assets/iot-hub/hero-dashboard-icon-2.svg

@ -1,25 +0,0 @@
<svg width="73" height="73" viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_16977_25524)">
<rect x="6.94288" width="66.421" height="66.421" rx="6.15549" transform="rotate(6 6.94288 0)" fill="#4D5FD0"/>
<rect x="7.39941" y="0.563767" width="65.3951" height="65.3951" rx="5.64254" transform="rotate(6 7.39941 0.563767)" stroke="white" stroke-opacity="0.12" stroke-width="1.02592"/>
<path d="M21.3893 36.7069L20.1869 48.1464L49.603 51.2382L49.8606 48.7869L36.355 35.8014L28.8734 44.1026L21.3893 36.7069ZM22.4199 26.9015L28.4415 32.4912L37.815 21.9105L45.299 29.3062L51.8359 29.9933L50.2952 44.6523L36.1891 31.0915L28.7436 39.3634L21.829 32.5232L22.4199 26.9015Z" fill="white"/>
</g>
<defs>
<filter id="filter0_ii_16977_25524" x="-8.96633e-05" y="-2.07566" width="73" height="77.1513" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-2.05183"/>
<feGaussianBlur stdDeviation="4.10366"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_16977_25524"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="2.05183"/>
<feGaussianBlur stdDeviation="4.10366"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_16977_25524" result="effect2_innerShadow_16977_25524"/>
</filter>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 1.9 KiB

30
ui-ngx/src/assets/iot-hub/hero-dashboard-icon-3.svg

@ -1,30 +0,0 @@
<svg width="78" height="78" viewBox="0 0 78 78" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_16977_25528)">
<rect y="13.6731" width="65.764" height="65.764" rx="6.15549" transform="rotate(-12 0 13.6731)" fill="#4D5FD0"/>
<rect x="0.608399" y="14.0682" width="64.7381" height="64.7381" rx="5.64254" transform="rotate(-12 0.608399 14.0682)" stroke="white" stroke-opacity="0.12" stroke-width="1.02592"/>
<g clip-path="url(#clip0_16977_25528)">
<path d="M41.5261 35.0451L37.9298 34.246L40.8901 32.0532L41.6892 28.4569L43.882 31.4173L47.4783 32.2164L44.5179 34.4092L43.7188 38.0055L41.5261 35.0451ZM26.8897 44.9092L27.6889 41.3129L30.6492 39.1202L27.0529 38.3211L24.8601 35.3607L24.061 38.957L21.1007 41.1498L24.697 41.9489L26.8897 44.9092ZM32.3598 35.4299L33.2792 31.2259L36.7458 28.676L32.5418 27.7566L29.9919 24.29L29.0725 28.494L25.6059 31.0439L29.8099 31.9633L32.3598 35.4299ZM29.8842 55.0843L37.3997 43.4903L45.1185 48.5029L55.4117 30.4137L52.6909 28.6467L44.1037 43.7287L36.3849 38.716L26.9897 53.2046L29.8842 55.0843Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_ii_16977_25528" x="0" y="-2.05432" width="78" height="82.1103" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-2.05183"/>
<feGaussianBlur stdDeviation="4.10366"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_16977_25528"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="2.05183"/>
<feGaussianBlur stdDeviation="4.10366"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_16977_25528" result="effect2_innerShadow_16977_25528"/>
</filter>
<clipPath id="clip0_16977_25528">
<rect width="38.9848" height="38.9848" fill="white" transform="translate(15.787 23.9826) scale(1.00161) rotate(-12)"/>
</clipPath>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 2.4 KiB

30
ui-ngx/src/assets/iot-hub/hero-dashboard-icon-4.svg

@ -1,30 +0,0 @@
<svg width="83" height="83" viewBox="0 0 83 83" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_16977_25533)">
<rect x="20.3547" width="65.8692" height="65.8692" rx="6.15549" transform="rotate(18 20.3547 0)" fill="#4D5FD0"/>
<rect x="20.684" y="0.646365" width="64.8433" height="64.8433" rx="5.64254" transform="rotate(18 20.684 0.646365)" stroke="white" stroke-opacity="0.12" stroke-width="1.02592"/>
<g clip-path="url(#clip0_16977_25533)">
<path d="M59.3828 28.4347L57.8721 33.0842L62.5216 34.5949L61.5145 37.6945L56.865 36.1838L55.3543 40.8333L52.2547 39.8261L53.7654 35.1767L49.1159 33.666L50.123 30.5663L54.7725 32.077L56.2832 27.4276L59.3828 28.4347ZM40.9415 43.004C39.2367 42.4501 38.2951 40.602 38.849 38.8972C39.4029 37.1924 41.251 36.2508 42.9558 36.8047C44.6606 37.3587 45.6022 39.2067 45.0483 40.9115C44.4943 42.6163 42.6463 43.5579 40.9415 43.004ZM47.4968 28.1024L46.4796 31.233C45.9932 30.9854 45.4885 30.7756 44.97 30.6055C39.7781 28.9185 34.3769 31.5671 32.549 37.1929C31.3706 40.8195 32.8317 46.6059 37.2453 54.3797C45.3853 50.6848 49.9634 46.8778 51.1468 43.2357L51.2475 42.9258L54.3472 43.9329L54.2465 44.2429C52.5746 49.3883 46.4576 54.1345 35.9058 58.5022C29.9365 48.7665 27.7775 41.3312 29.4494 36.1858C31.9571 28.4677 39.4679 25.3908 45.9772 27.5058C46.5041 27.677 47.0055 27.8742 47.4968 28.1024Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_ii_16977_25533" x="0.000561057" y="-2.05841" width="82.9997" height="87.1165" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-2.05183"/>
<feGaussianBlur stdDeviation="4.10366"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_16977_25533"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="2.05183"/>
<feGaussianBlur stdDeviation="4.10366"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_16977_25533" result="effect2_innerShadow_16977_25533"/>
</filter>
<clipPath id="clip0_16977_25533">
<rect width="38.9848" height="38.9848" fill="white" transform="translate(28.8898 16.8135) scale(1.00321) rotate(18)"/>
</clipPath>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 2.7 KiB

138
ui-ngx/src/assets/iot-hub/hero-device-cluster.svg

@ -0,0 +1,138 @@
<svg width="858" height="195" viewBox="0 0 858 195" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.8" clip-path="url(#clip0_18309_235561)">
<mask id="mask0_18309_235561" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="-1" y="149" width="45" height="44">
<path d="M-0.00116042 152.818L39.8824 149.487L43.2136 189.371L3.32999 192.702L-0.00116042 152.818Z" fill="white"/>
</mask>
<g mask="url(#mask0_18309_235561)">
<path d="M39.3302 156.986L31.5798 159.987L32.1003 166.219L40.241 167.892L39.3302 156.986Z" stroke="#4B63CC" stroke-width="2.75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path d="M22.6885 166.218L27.3624 165.828" stroke="#4B63CC" stroke-width="2.75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<mask id="mask1_18309_235561" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="-1" y="149" width="45" height="44">
<path d="M-0.00116042 152.818L39.8824 149.487L43.2136 189.371L3.32999 192.702L-0.00116042 152.818Z" fill="white"/>
</mask>
<g mask="url(#mask1_18309_235561)">
<path d="M5.82697 180.335L3.49004 180.53L4.40091 191.436L6.73783 191.24C8.02844 191.133 8.98737 189.999 8.87958 188.708L8.35909 182.476C8.25129 181.186 7.11758 180.227 5.82697 180.335Z" stroke="#4B63CC" stroke-width="2.75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M25.6134 173.035L25.4182 170.698L14.5125 171.609L14.7077 173.946C14.8155 175.236 15.9492 176.195 17.2398 176.087L23.4716 175.567C24.7622 175.459 25.7212 174.325 25.6134 173.035Z" stroke="#4B63CC" stroke-width="2.75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18.0164 176.022L18.5499 182.41L8.42317 183.256L8.81354 187.93L18.9402 187.084C21.5215 186.868 23.4393 184.601 23.2237 182.02L22.6902 175.632L18.0164 176.022Z" stroke="#4B63CC" stroke-width="2.75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.29022 164.533L5.74565 169.986C5.85345 171.277 6.98715 172.236 8.27776 172.128L30.0891 170.306C31.3797 170.199 32.3386 169.065 32.2308 167.774L31.32 156.869" stroke="#4B63CC" stroke-width="2.75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M35.5411 151.027L3.60307 153.695C2.31246 153.803 1.35353 154.936 1.46132 156.227L1.98182 162.459C2.08961 163.749 3.22332 164.708 4.51393 164.6L14.2886 163.784C15.4592 163.686 16.474 162.935 16.91 161.845C17.2784 160.924 18.0652 160.234 19.0269 159.99L31.3227 156.87L35.5411 151.027Z" stroke="#4B63CC" stroke-width="2.75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
<g opacity="0.8" clip-path="url(#clip1_18309_235561)">
<path d="M845.874 154.861L825.33 152.902L823.371 173.446L843.915 175.404L845.874 154.861Z" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round"/>
<path d="M838.373 161.056L834.949 160.729L831.525 160.403L832.178 153.555L839.026 154.208L838.373 161.056Z" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round"/>
<circle cx="832.992" cy="181.273" r="1.71971" transform="rotate(5.44694 832.992 181.273)" fill="#4B63CC"/>
<path d="M853.19 183.199C852.829 186.981 849.471 189.755 845.689 189.394L818.982 186.848C815.201 186.487 812.427 183.129 812.788 179.347C813.148 175.565 816.506 172.791 820.288 173.152L846.995 175.699C850.777 176.059 853.55 179.417 853.19 183.199Z" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<circle cx="843.263" cy="182.254" r="1.71971" transform="rotate(5.44694 843.263 182.254)" fill="#4B63CC"/>
<circle cx="822.72" cy="180.292" r="1.71971" transform="rotate(5.44694 822.72 180.292)" fill="#4B63CC"/>
</g>
<g opacity="0.8" clip-path="url(#clip2_18309_235561)">
<path d="M216.812 41.3481C217.117 42.4868 216.442 43.6572 215.303 43.9623L192.043 50.1948C190.905 50.4999 189.734 49.8241 189.429 48.6854L183.197 25.4258C182.892 24.2871 183.567 23.1166 184.706 22.8115L207.966 16.5791C209.104 16.274 210.275 16.9497 210.58 18.0884L216.812 41.3481Z" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M193.921 20.3434L192.065 13.4171" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M189.09 21.6371L187.235 14.7108" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M198.752 19.0497L196.896 12.1234" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M203.583 17.7521L201.727 10.8258" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M186.961 39.472L180.035 41.3279" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M188.259 44.3067L181.332 46.1626" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M185.667 34.6411L178.741 36.497" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M184.37 29.8064L177.443 31.6623" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M206.089 46.4317L207.945 53.3581" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M210.92 45.138L212.776 52.0644" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M201.258 47.7254L203.114 54.6517" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M196.427 49.023L198.283 55.9494" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M213.049 27.3044L219.976 25.4485" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M211.755 22.4696L218.682 20.6137" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M214.347 32.1352L221.273 30.2793" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M215.64 36.966L222.567 35.1101" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M207.807 36.7311C208.011 37.4902 207.56 38.2705 206.801 38.4739L196.664 41.1902C195.905 41.3936 195.124 40.9431 194.921 40.1839L192.205 30.0468C192.001 29.2876 192.452 28.5073 193.211 28.3039L203.348 25.5877C204.107 25.3843 204.888 25.8348 205.091 26.5939L207.807 36.7311Z" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
</g>
<g opacity="0.8" clip-path="url(#clip3_18309_235561)">
<path d="M452.287 32.5333C452.393 34.5541 450.81 36.2799 448.751 36.3878L412.211 38.3028C410.152 38.4107 408.397 36.8599 408.291 34.839L407.908 27.5207C407.802 25.4999 409.385 23.7741 411.444 23.6662L447.983 21.7513C450.043 21.6433 451.798 23.1941 451.904 25.215L452.287 32.5333Z" stroke="#4B63CC" stroke-width="3.5" stroke-miterlimit="10"/>
<path d="M439.42 29.5396C439.473 30.5501 438.681 31.4129 437.652 31.4669C436.622 31.5208 435.744 30.7455 435.692 29.735C435.639 28.7245 436.43 27.8617 437.46 27.8077C438.489 27.7538 439.367 28.5291 439.42 29.5396Z" fill="#4B63CC"/>
<path d="M446.877 29.1488C446.93 30.1592 446.139 31.0221 445.109 31.076C444.079 31.13 443.202 30.3546 443.149 29.3442C443.096 28.3337 443.888 27.4709 444.917 27.4169C445.947 27.3629 446.824 28.1383 446.877 29.1488Z" fill="#4B63CC"/>
<path d="M410.695 6.79647L411.579 23.6578" stroke="#4B63CC" stroke-width="3.5" stroke-miterlimit="10"/>
<path d="M446.965 4.89697L447.849 21.7583" stroke="#4B63CC" stroke-width="3.5" stroke-miterlimit="10"/>
<path d="M414.479 31.1737L423.53 30.6994" stroke="#4B63CC" stroke-width="3.5" stroke-miterlimit="10"/>
</g>
<g opacity="0.8" clip-path="url(#clip4_18309_235561)">
<path d="M312.531 75.8375C322.471 78.0727 332.341 71.8265 334.576 61.8863C336.812 51.946 330.565 42.0758 320.625 39.8407C310.685 37.6055 300.815 43.8517 298.58 53.7919C296.344 63.7322 302.591 73.6024 312.531 75.8375Z" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M306.355 50.6344L301.548 47.1006" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M323.784 47.6171L327.318 42.8105" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M314.445 45.5156L313.309 39.659" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M298.398 61.1092L304.254 59.9732C303.98 58.3996 304.004 56.7479 304.376 55.0948C305.889 48.3665 312.594 44.1233 319.322 45.6363C326.05 47.1492 330.293 53.8541 328.78 60.5824C328.409 62.2355 327.723 63.7387 326.802 65.0433L331.608 68.5769" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M328.902 55.7046L334.759 54.5687" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M319.629 58.5252C319.25 60.2099 317.577 61.2686 315.892 60.8898C314.207 60.5109 313.149 58.838 313.527 57.1532C313.906 55.4685 317.95 51.738 317.95 51.738C317.95 51.738 320.007 56.8404 319.629 58.5252Z" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M311.468 66.3067L317.569 67.6786" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
</g>
<g opacity="0.8" clip-path="url(#clip5_18309_235561)">
<path d="M533.221 42.3089L569.668 48.0439" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
<path d="M566.578 47.5604L561.741 57.2522C561.148 58.4391 559.837 59.1606 558.457 58.9434L540.542 56.1245C539.162 55.9073 538.135 54.818 537.936 53.5065L536.309 42.7974" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
<path d="M542.093 56.3676C542.25 60.1643 544.756 63.2737 548.51 63.8644C552.264 64.4551 555.604 62.2655 556.919 58.7005" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
<path d="M556.027 74.3848C561.136 75.1888 565.947 71.6863 566.751 66.5766" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
<path d="M556.999 68.2073C558.704 68.4757 560.305 67.3104 560.573 65.6046" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
<path d="M538.113 71.567C533.004 70.763 529.501 65.9524 530.305 60.8427" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
<path d="M539.083 65.3907C537.377 65.1223 536.212 63.5218 536.481 61.8159" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
<path d="M537.294 49.2815L557.167 52.4087" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
<path d="M550.361 72.1828C548.965 73.1992 548.658 75.1549 549.674 76.5509C550.69 77.947 550.383 79.9027 548.987 80.9191" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
<path d="M544.178 71.2096C542.782 72.226 542.474 74.1817 543.491 75.5777C544.507 76.9738 544.199 78.9295 542.803 79.9459" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
</g>
<g opacity="0.8" clip-path="url(#clip6_18309_235561)">
<path d="M656.531 15.8424L643.306 16.7672L642.917 11.1987L656.843 10.225" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M670.753 9.25234L684.679 8.27854L685.068 13.847L671.843 14.7718" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M667.872 8.05422L659.519 8.63829C657.605 8.77214 656.149 10.4478 656.283 12.3618L656.623 17.2342L659.699 21.2158L669.444 20.5344L671.936 16.1634L671.595 11.291C671.462 9.37705 669.786 7.92037 667.872 8.05422Z" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M675.995 35.9326L673.138 31.698C672.066 30.1073 669.621 28.9152 667.707 29.0491L662.612 29.4054C660.698 29.5392 658.444 31.0598 657.602 32.7844L655.363 37.3753C654.522 39.1 654.712 41.8125 655.785 43.4032L660.592 50.5301L663.771 44.0127L661.068 40.0051L663.187 35.6603L668.009 35.3231L670.712 39.3307L668.593 43.6755L672.648 49.6871L676.416 41.9605C677.258 40.236 677.068 37.5235 675.995 35.9326Z" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M667.94 29.0334L662.372 29.4228L661.787 21.0702L667.356 20.6808L667.94 29.0334Z" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M659.717 30.5267L663.163 35.6372" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M670.725 29.7567L668.023 35.2971" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M671.518 16.1926L657.04 17.205" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
</g>
<g opacity="0.8" clip-path="url(#clip7_18309_235561)">
<path d="M757.964 102.346L773.098 88.8141" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
<path d="M758.045 95.7535L764.913 96.1354L764.531 103.004" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
<path d="M788.231 75.2791L773.098 88.8115" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
<path d="M781.667 74.6233L781.285 81.4916L788.153 81.8734" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
<path d="M777.256 108.674L773.1 88.8117" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
<path d="M771.581 105.317L775.346 99.5598L781.103 103.325" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
<path d="M768.942 68.949L773.098 88.8115" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
<path d="M765.09 74.299L770.847 78.0638L774.612 72.3067" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
<path d="M792.388 95.1417L773.099 88.8116" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
<path d="M786.636 98.3783L783.533 92.2393L789.672 89.1359" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
<path d="M753.807 82.4839L773.096 88.814" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
<path d="M756.526 88.491L762.665 85.3876L759.561 79.2487" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
</g>
<g opacity="0.8" clip-path="url(#clip8_18309_235561)">
<path d="M93.6535 101.442L75.2613 98.8574C72.9527 98.533 71.3443 96.3985 71.6687 94.0899L74.4624 74.2115C74.7869 71.9029 76.9214 70.2945 79.2299 70.6189L97.6221 73.2038C99.9307 73.5282 101.539 75.6627 101.215 77.9713L98.421 97.8497C98.0965 100.158 95.962 101.767 93.6535 101.442Z" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M78.0232 70.4505L82.1575 62.6011L97.0199 64.6898L98.8305 73.3748" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M74.0533 98.6882L75.8638 107.373L90.7262 109.462L94.8606 101.612" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
<path d="M94.2692 84.2591C94.1468 85.1302 93.7992 85.9543 93.2606 86.65C91.3655 89.0981 88.9265 91.0713 86.1365 92.4133L85.5024 92.7183L84.9769 92.2503C82.665 90.1913 80.8643 87.6222 79.7173 84.7466C79.3914 83.9294 79.2844 83.0415 79.4069 82.1703C79.7074 80.0316 81.6849 78.5415 83.8236 78.8421C85.1184 79.024 86.2365 79.841 86.8033 81.0193L87.069 81.5716L87.4766 81.1139C88.3462 80.1375 89.6462 79.6604 90.941 79.8423C93.0797 80.1429 94.5698 82.1204 94.2692 84.2591Z" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
</g>
<defs>
<clipPath id="clip0_18309_235561">
<rect width="40" height="40" fill="white" transform="translate(0 152.82) scale(1.00056) rotate(-4.77437)"/>
</clipPath>
<clipPath id="clip1_18309_235561">
<rect width="44" height="44" fill="white" transform="translate(814.144 146.997) scale(1.00056) rotate(5.44694)"/>
</clipPath>
<clipPath id="clip2_18309_235561">
<rect width="48" height="48" fill="white" transform="translate(170.596 16.4076) scale(1.00056) rotate(-15)"/>
</clipPath>
<clipPath id="clip3_18309_235561">
<rect width="47.7631" height="41.25" fill="white" transform="translate(404.727 2.5014) scale(1.00056) rotate(-3)"/>
</clipPath>
<clipPath id="clip4_18309_235561">
<rect width="40" height="40" fill="white" transform="translate(301.443 33.9253) scale(1.00056) rotate(12.6728)"/>
</clipPath>
<clipPath id="clip5_18309_235561">
<rect width="40" height="40" fill="white" transform="matrix(0.9884 0.155527 -0.155527 0.9884 532.017 39.9286)"/>
</clipPath>
<clipPath id="clip6_18309_235561">
<rect width="44.4454" height="44.4454" fill="white" transform="translate(641.422 8.59857) scale(1.00056) rotate(-4)"/>
</clipPath>
<clipPath id="clip7_18309_235561">
<rect width="44" height="44" fill="white" transform="translate(747.044 71.7746) scale(1.00056) rotate(-11.8175)"/>
</clipPath>
<clipPath id="clip8_18309_235561">
<rect width="48" height="48" fill="white" transform="translate(66.2168 58.9393) scale(1.00056) rotate(8)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 16 KiB

25
ui-ngx/src/assets/iot-hub/hero-device-icon-1.svg

@ -1,25 +0,0 @@
<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_17179_74548)">
<rect y="7.87372" width="64.6079" height="64.6079" rx="5.99735" transform="rotate(-7 0 7.87372)" fill="#35B690"/>
<rect x="0.556962" y="8.30886" width="63.6083" height="63.6083" rx="5.49758" transform="rotate(-7 0.556962 8.30886)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
<path d="M40.6063 37.3376L39.0473 24.6404C38.7238 22.0057 36.3359 20.14 33.7012 20.4635C31.0665 20.787 29.2008 23.175 29.5243 25.8096L31.0834 38.5069C29.3402 40.187 28.3709 42.6582 28.6886 45.2453C29.2264 49.6258 33.2182 52.7445 37.5987 52.2067C41.9793 51.6688 45.098 47.6771 44.5601 43.2965C44.2425 40.7094 42.7041 38.5461 40.6063 37.3376ZM32.6986 25.4199C32.5915 24.5469 33.218 23.745 34.0909 23.6378C34.9639 23.5307 35.7658 24.1572 35.873 25.0301L34.2858 25.225L34.4807 26.8122L36.0678 26.6173L36.4576 29.7916L34.8704 29.9865L35.0653 31.5736L36.6525 31.3788L37.0422 34.5531L33.8679 34.9428L32.6986 25.4199Z" fill="white"/>
</g>
<defs>
<filter id="filter0_ii_17179_74548" x="0" y="-2.01894" width="72.0018" height="76.038" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17179_74548"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_17179_74548" result="effect2_innerShadow_17179_74548"/>
</filter>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 2.2 KiB

25
ui-ngx/src/assets/iot-hub/hero-device-icon-2.svg

@ -1,25 +0,0 @@
<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_17179_74550)">
<rect x="7.87372" width="64.6079" height="64.6079" rx="5.99735" transform="rotate(7 7.87372 0)" fill="#35B690"/>
<rect x="8.30886" y="0.556962" width="63.6083" height="63.6083" rx="5.49758" transform="rotate(7 8.30886 0.556962)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
<path d="M21.5115 49.0439C20.8767 48.9659 20.3504 48.6596 19.9327 48.125C19.515 47.5904 19.3452 47.0057 19.4231 46.3708L20.4316 38.1573C20.5096 37.5224 20.8159 36.9961 21.3505 36.5784C21.8851 36.1608 22.4698 35.9909 23.1047 36.0688L41.4363 38.3197L42.2987 31.2965L44.6794 31.5888L43.8171 38.612L47.9437 39.1187C48.5785 39.1966 49.1048 39.5029 49.5225 40.0375C49.9402 40.5721 50.1101 41.1569 50.0321 41.7917L49.0236 50.0053C48.9457 50.6401 48.6394 51.1664 48.1048 51.5841C47.5702 52.0018 46.9854 52.1717 46.3506 52.0937L21.5115 49.0439ZM27.7819 43.2444C27.84 42.771 27.7284 42.3559 27.4472 41.9992C27.166 41.6424 26.7887 41.435 26.3153 41.3769C25.8419 41.3187 25.4269 41.4303 25.0701 41.7115C24.7134 41.9928 24.5059 42.3701 24.4478 42.8434C24.3897 43.3168 24.5013 43.7319 24.7825 44.0886C25.0638 44.4454 25.4411 44.6528 25.9144 44.7109C26.3878 44.769 26.8028 44.6575 27.1596 44.3763C27.5163 44.095 27.7238 43.7177 27.7819 43.2444ZM33.6544 43.9654C33.7125 43.492 33.6009 43.077 33.3197 42.7202C33.0384 42.3635 32.6611 42.156 32.1878 42.0979C31.7144 42.0398 31.2994 42.1514 30.9426 42.4326C30.5859 42.7138 30.3784 43.0911 30.3203 43.5645C30.2622 44.0379 30.3737 44.4529 30.655 44.8097C30.9362 45.1664 31.3135 45.3739 31.7869 45.432C32.2602 45.4901 32.6753 45.3785 33.0321 45.0973C33.3888 44.8161 33.5962 44.4387 33.6544 43.9654ZM37.6594 46.153C38.1327 46.2111 38.5478 46.0996 38.9045 45.8184C39.2613 45.5371 39.4687 45.1598 39.5268 44.6865C39.585 44.2131 39.4734 43.798 39.1922 43.4413C38.9109 43.0845 38.5336 42.8771 38.0603 42.819C37.5869 42.7608 37.1718 42.8724 36.8151 43.1536C36.4583 43.4349 36.2509 43.8122 36.1928 44.2855C36.1347 44.7589 36.2462 45.174 36.5275 45.5307C36.8087 45.8875 37.186 46.0949 37.6594 46.153ZM40.5242 29.3467L39.0971 27.5201C39.81 26.9632 40.5916 26.549 41.442 26.2775C42.2925 26.006 43.1957 25.929 44.1516 26.0463C45.1076 26.1637 45.9653 26.457 46.7248 26.9262C47.4843 27.3953 48.1425 27.9863 48.6994 28.6992L46.8729 30.1262C46.548 29.7104 46.1232 29.3428 45.5986 29.0233C45.0739 28.7038 44.5008 28.5058 43.8792 28.4295C43.2575 28.3532 42.6469 28.4058 42.0473 28.5872C41.4477 28.7687 40.94 29.0219 40.5242 29.3467ZM37.5656 25.5599L36.0341 23.5997C37.0142 22.8339 38.2732 22.2031 39.8109 21.7072C41.3486 21.2113 42.9904 21.0705 44.7363 21.2849C46.4821 21.4992 48.0411 22.033 49.4132 22.8862C50.7853 23.7394 51.8542 24.656 52.6199 25.6361L50.6597 27.1677C50.0661 26.3161 49.2389 25.5634 48.178 24.9095C47.1171 24.2556 45.8724 23.841 44.444 23.6656C43.0155 23.4902 41.7075 23.5914 40.5199 23.9692C39.3324 24.347 38.3476 24.8772 37.5656 25.5599Z" fill="white"/>
</g>
<defs>
<filter id="filter0_ii_17179_74550" x="-0.000682753" y="-2.019" width="72.0018" height="76.038" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17179_74550"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_17179_74550" result="effect2_innerShadow_17179_74550"/>
</filter>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 4.1 KiB

25
ui-ngx/src/assets/iot-hub/hero-device-icon-3.svg

@ -1,25 +0,0 @@
<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_17179_74553)">
<rect y="13.3225" width="64.0777" height="64.0777" rx="5.99735" transform="rotate(-12 0 13.3225)" fill="#35B690"/>
<rect x="0.592768" y="13.7075" width="63.0782" height="63.0782" rx="5.49758" transform="rotate(-12 0.592768 13.7075)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
<path d="M32.6275 46.014C30.5805 44.6981 29.0465 42.592 28.4991 40.0169C27.9518 37.4417 28.4965 34.8939 29.8313 32.859L32.5024 34.5937C31.6074 35.9513 31.239 37.651 31.6017 39.3574C31.9645 41.0638 32.9923 42.4667 34.3499 43.3618L32.6275 46.014ZM45.7825 43.2179C47.1173 41.183 47.6621 38.6352 47.1147 36.06C46.5674 33.4849 45.0334 31.3788 42.9864 30.0629L41.2517 32.7339C42.6216 33.6102 43.6494 35.0131 44.0121 36.7195C44.3748 38.4259 44.0065 40.1256 43.1303 41.4955L45.7825 43.2179ZM37.1475 34.9359C35.441 35.2986 34.3416 36.9915 34.7043 38.6979C35.0671 40.4044 36.76 41.5038 38.4664 41.141C40.1728 40.7783 41.2723 39.0854 40.9095 37.379C40.5468 35.6725 38.8539 34.5731 37.1475 34.9359ZM50.2173 35.4005C50.9461 38.8289 50.2094 42.2283 48.4348 44.9403L51.1059 46.6749C53.3169 43.2702 54.23 39.0226 53.3199 34.7411C52.4098 30.4595 49.848 26.9505 46.4434 24.7395L44.7088 27.4106C47.433 29.1663 49.4886 31.9722 50.2173 35.4005ZM27.1791 31.1366L24.508 29.402C22.297 32.8067 21.3839 37.0543 22.294 41.3358C23.204 45.6174 25.7658 49.1264 29.1705 51.3374L30.9051 48.6663C28.1809 46.9106 26.1253 44.1047 25.3965 40.6764C24.6678 37.248 25.4045 33.8486 27.1791 31.1366Z" fill="white"/>
</g>
<defs>
<filter id="filter0_ii_17179_74553" x="0" y="-2.00249" width="76.0007" height="80.0049" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17179_74553"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_17179_74553" result="effect2_innerShadow_17179_74553"/>
</filter>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 2.7 KiB

30
ui-ngx/src/assets/iot-hub/hero-device-icon-4.svg

@ -1,30 +0,0 @@
<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_17179_74555)">
<rect x="13.3225" width="64.0777" height="64.0777" rx="5.99735" transform="rotate(12 13.3225 0)" fill="#35B690"/>
<rect x="13.7075" y="0.592768" width="63.0782" height="63.0782" rx="5.49758" transform="rotate(12 13.7075 0.592768)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
<g clip-path="url(#clip0_17179_74555)">
<path d="M34.367 43.9365C34.8566 44.7548 35.6056 45.2634 36.614 45.4623C37.6221 45.6623 38.446 45.4285 39.0856 44.7609L48.0885 35.3802C48.4113 35.0322 48.4551 34.6624 48.2198 34.2707C47.9859 33.8781 47.6565 33.7706 47.2316 33.9482L35.6582 39.0325C34.835 39.3933 34.2918 40.0962 34.0287 41.1415C33.7646 42.1865 33.8773 43.1182 34.367 43.9365ZM24.2411 49.8197C23.6856 49.7016 23.1868 49.4468 22.7447 49.0552C22.3026 48.6636 21.9905 48.1806 21.8085 47.6062C21.3931 46.1787 21.1529 44.7068 21.0881 43.1907C21.0235 41.6735 21.1607 40.1176 21.4996 38.523C22.002 36.1596 22.8895 34.034 24.1623 32.1463C25.4337 30.2595 26.9556 28.6931 28.7278 27.4473C30.4987 26.2023 32.4452 25.3363 34.567 24.8493C36.6887 24.3634 38.8341 24.351 41.0033 24.812C42.1938 25.0651 43.3158 25.4446 44.3695 25.9507C45.4229 26.458 46.408 27.0917 47.3247 27.8521C47.8136 28.2834 48.0466 28.7793 48.0237 29.3399C48.0018 29.9007 47.7543 30.3838 47.281 30.7891C47.0149 31.0004 46.6906 31.0952 46.3082 31.0734C45.9257 31.0516 45.6041 30.9386 45.3434 30.7344C44.5937 30.0989 43.7934 29.5716 42.9424 29.1526C42.0914 28.7337 41.2029 28.4258 40.277 28.229C36.7587 27.4811 33.4802 28.1753 30.4415 30.3114C27.4015 32.4485 25.4791 35.4106 24.6741 39.1977C24.4199 40.3937 24.3205 41.6076 24.3761 42.8396C24.4327 44.0719 24.6298 45.2596 24.9674 46.4027L46.8711 51.0585C47.7096 50.1058 48.392 49.0753 48.9184 47.967C49.4438 46.8585 49.8397 45.6778 50.106 44.4249C50.3178 43.4283 50.4129 42.4295 50.3912 41.4285C50.3687 40.4261 50.2396 39.4386 50.004 38.4659C49.8975 38.0564 49.9263 37.6607 50.0904 37.2789C50.2545 36.8972 50.5093 36.6091 50.8547 36.4146C51.3627 36.106 51.8499 36.0905 52.3162 36.3681C52.7825 36.6458 53.0741 37.0947 53.1912 37.7148C53.4374 38.8981 53.5701 40.0947 53.5894 41.3047C53.6089 42.5136 53.512 43.7501 53.2986 45.0142C52.9536 46.6373 52.4454 48.1512 51.7741 49.5561C51.1017 50.9607 50.2662 52.2563 49.2675 53.4428C48.8675 53.8935 48.386 54.2078 47.8228 54.3857C47.2597 54.5636 46.7004 54.5935 46.1448 54.4754L24.2411 49.8197Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_ii_17179_74555" x="-0.00030061" y="-2.00243" width="76.0007" height="80.0048" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17179_74555"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_17179_74555" result="effect2_innerShadow_17179_74555"/>
</filter>
<clipPath id="clip0_17179_74555">
<rect width="36" height="36" fill="white" transform="translate(24.3055 16.6545) scale(1.00166) rotate(12)"/>
</clipPath>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 3.8 KiB

72
ui-ngx/src/assets/iot-hub/hero-rule-chain-cluster.svg

@ -0,0 +1,72 @@
<svg width="806" height="184" viewBox="0 0 806 184" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_18332_158483)">
<g opacity="0.8">
<path d="M253.541 40.9957L262.457 42.2487L263.084 37.7908L254.168 36.5378L253.541 40.9957ZM241.698 12.0554L241.071 16.5133L281.192 22.152L281.819 17.6941L241.698 12.0554ZM246.192 28.5978L272.939 32.357L273.566 27.899L246.818 24.1399L246.192 28.5978Z" fill="#AA5BE3"/>
</g>
</g>
<g clip-path="url(#clip1_18332_158483)">
<g opacity="0.8" clip-path="url(#clip2_18332_158483)">
<path d="M767.05 113.259L770.912 119.08L763.59 123.937L765.985 127.546L773.306 122.69L777.168 128.511L779.735 115.826L767.05 113.259ZM758.593 111.547L745.908 108.979L743.34 121.664L749.162 117.803L757.108 129.755L753.86 145.802L758.089 146.658L761.688 128.877L752.772 115.408L758.593 111.547Z" fill="#AA5BE3"/>
</g>
</g>
<g clip-path="url(#clip3_18332_158483)">
<g opacity="0.8">
<path d="M516.231 49.453L543.599 46.0927L543.119 42.1831L515.751 45.5434L516.231 49.453ZM513.831 29.9048L521.65 28.9447L523.09 40.6736L534.819 39.2335L533.379 27.5046L541.198 26.5445L525.835 14.5409L513.831 29.9048Z" fill="#AA5BE3"/>
</g>
</g>
<g clip-path="url(#clip4_18332_158483)">
<g opacity="0.8">
<path fill-rule="evenodd" clip-rule="evenodd" d="M143.943 50.8903C145.672 50.7971 147.372 51.3734 148.667 52.5009C149.964 53.6294 150.749 55.2185 150.841 56.9207L151.584 70.6926C151.636 71.6635 151.557 72.4661 151.305 73.2216C151.057 73.966 150.667 74.586 150.227 75.2049C149.621 76.0561 148.737 76.5861 147.893 76.9096C147.043 77.2358 146.142 77.3886 145.375 77.43L136.832 77.8908L128.515 83.3506C128.148 83.592 127.677 83.6205 127.283 83.4243C126.889 83.2276 126.632 82.836 126.608 82.399L126.395 78.4538L124.073 78.579C122.344 78.6721 120.644 78.0959 119.349 76.9684C118.052 75.84 117.267 74.2507 117.175 72.5486L116.432 58.7768C116.398 58.138 116.462 57.5042 116.617 56.8953L119.128 57.4299L120.366 61.1454C121.349 64.0986 125.634 63.8674 126.294 60.8257L127.124 56.9986L130.869 55.7683C132.848 55.1181 133.408 53.0231 132.663 51.4987L143.943 50.8903ZM126.774 67.7147C126.096 67.7514 125.575 68.327 125.611 69.0003C125.647 69.6736 126.227 70.1899 126.906 70.1535L140.423 69.4243C141.102 69.3877 141.623 68.812 141.586 68.1386C141.55 67.4652 140.971 66.9489 140.292 66.9855L126.774 67.7147ZM128.837 60.2657C128.159 60.3025 127.638 60.878 127.674 61.5514C127.711 62.2247 128.29 62.7409 128.969 62.7045L143.715 61.9091C144.394 61.8725 144.915 61.2967 144.879 60.6234C144.842 59.9499 144.263 59.4337 143.584 59.4703L128.837 60.2657Z" fill="#AA5BE3"/>
<path d="M121.314 45.7537C121.563 44.5125 123.316 44.4179 123.697 45.6252L125.062 49.9561C125.194 50.3759 125.543 50.6934 125.976 50.7857L130.164 51.6765C131.39 51.9375 131.481 53.6383 130.291 54.0296L126.212 55.3698C125.797 55.506 125.486 55.8494 125.394 56.2726L124.49 60.4417C124.225 61.658 122.512 61.7505 122.118 60.5696L120.771 56.522C120.634 56.1113 120.288 55.8032 119.862 55.7123L115.662 54.8187C114.436 54.5574 114.344 52.8572 115.535 52.4656L119.602 51.1296C120.023 50.9912 120.337 50.6379 120.423 50.2063L121.314 45.7537Z" fill="#AA5BE3"/>
<path d="M111.228 41.5994C111.468 40.3443 113.242 40.2486 113.615 41.4707L114.354 43.8923C114.482 44.3128 114.829 44.6318 115.26 44.7283L117.67 45.2659C118.881 45.5362 118.972 47.2141 117.797 47.613L115.447 48.411C115.034 48.5511 114.727 48.8977 114.639 49.3216L114.159 51.6441C113.904 52.8756 112.168 52.9693 111.782 51.7723L111.053 49.515C110.92 49.1031 110.578 48.7915 110.152 48.6966L107.73 48.156C106.52 47.8855 106.43 46.2079 107.604 45.8089L109.942 45.0152C110.361 44.8729 110.671 44.5184 110.753 44.0865L111.228 41.5994Z" fill="#AA5BE3"/>
<path d="M129.035 40.3189C129.289 39.0872 131.026 38.9935 131.412 40.1906L131.661 40.9619C131.796 41.3807 132.147 41.6945 132.581 41.7841L133.212 41.9149C134.447 42.1698 134.54 43.8852 133.339 44.2715L132.713 44.4724C132.298 44.606 131.985 44.9481 131.89 45.3707L131.726 46.1057C131.456 47.3125 129.757 47.4041 129.359 46.2334L129.115 45.5204C128.976 45.1103 128.628 44.8039 128.201 44.7158L127.558 44.5833C126.322 44.3286 126.229 42.6129 127.431 42.2267L128.042 42.0289C128.464 41.8932 128.781 41.5434 128.87 41.1124L129.035 40.3189Z" fill="#AA5BE3"/>
</g>
</g>
<g clip-path="url(#clip5_18332_158483)">
<g opacity="0.8" clip-path="url(#clip6_18332_158483)">
<path d="M653.981 49.8189L673.563 51.9209L672.932 57.7957L681.606 50.8035L674.614 42.1296L673.983 48.0044L650.484 45.482L649.223 57.2315L653.14 57.6519L653.981 49.8189ZM671.461 71.5034L651.879 69.4014L652.509 63.5267L643.835 70.5189L650.828 79.1927L651.458 73.318L674.957 75.8404L676.218 64.0908L672.302 63.6704L671.461 71.5034Z" fill="#AA5BE3"/>
</g>
</g>
<g clip-path="url(#clip7_18332_158483)">
<g opacity="0.8" clip-path="url(#clip8_18332_158483)">
<path d="M31.2921 117.355C34.0616 118.016 36.3019 119.739 37.6969 121.981L31.3824 125.862L43.4236 128.737L46.2986 116.696L41.2022 119.827C39.262 116.67 36.1237 114.266 32.2504 113.341C25.1661 111.65 18.0956 115.498 15.4879 122.067L19.5418 123.035C21.5574 118.68 26.4355 116.196 31.2921 117.355ZM38.2314 138.401C39.9872 136.911 41.4231 134.984 42.3048 132.712L38.2509 131.744C36.2352 136.1 31.3572 138.584 26.5005 137.424C23.731 136.763 21.4908 135.04 20.0958 132.798L26.4103 128.917L14.369 126.042L11.4941 138.084L16.5904 134.952C18.5306 138.109 21.6689 140.513 25.5422 141.438C28.6529 142.18 31.7671 141.842 34.5024 140.692L41.9319 152.754L45.6361 150.478L38.2314 138.401Z" fill="#AA5BE3"/>
</g>
</g>
<g clip-path="url(#clip9_18332_158483)">
<g opacity="0.8">
<path d="M411.168 66.7027L411.594 62.7869L384.183 59.8004L386.743 36.3054L390.659 36.7321L385.425 30.2184L378.912 35.4522L382.827 35.8788L382.401 39.7946L374.569 38.9413L374.143 42.8572L381.974 43.7105L380.268 59.3738C380.033 61.5275 381.603 63.4816 383.757 63.7163L399.42 65.4228L398.994 69.3386L395.078 68.912L400.311 75.4257L406.825 70.1919L402.909 69.7653L403.336 65.8494L411.168 66.7027ZM389.806 44.5637L401.553 45.8436L400.273 57.5911L404.189 58.0178L405.469 46.2703C405.704 44.1166 404.134 42.1625 401.98 41.9278L390.232 40.6479L389.806 44.5637Z" fill="#AA5BE3"/>
</g>
</g>
<defs>
<clipPath id="clip0_18332_158483">
<rect width="50" height="50" fill="white" transform="translate(238.593) scale(1.00038) rotate(8)"/>
</clipPath>
<clipPath id="clip1_18332_158483">
<rect width="50" height="50" fill="white" transform="translate(739.851 99.8428) scale(1.00038) rotate(11.4429)"/>
</clipPath>
<clipPath id="clip2_18332_158483">
<rect width="51.75" height="51.75" fill="white" transform="translate(739.165 98.8112) scale(1.00038) rotate(11.4429)"/>
</clipPath>
<clipPath id="clip3_18332_158483">
<rect width="50" height="50" fill="white" transform="translate(500.125 10.3555) scale(1.00038) rotate(-7)"/>
</clipPath>
<clipPath id="clip4_18332_158483">
<rect width="50" height="50" fill="white" transform="translate(102.83 37.2017) scale(1.00038) rotate(-3.08756)"/>
</clipPath>
<clipPath id="clip5_18332_158483">
<rect width="50" height="50" fill="white" transform="translate(640.526 33.1298) scale(1.00038) rotate(6.12669)"/>
</clipPath>
<clipPath id="clip6_18332_158483">
<rect width="47.25" height="47.25" fill="white" transform="translate(641.745 34.6421) scale(1.00038) rotate(6.12669)"/>
</clipPath>
<clipPath id="clip7_18332_158483">
<rect width="50" height="50" fill="white" transform="translate(11.9069 99.7373) scale(1.00038) rotate(13.4284)"/>
</clipPath>
<clipPath id="clip8_18332_158483">
<rect width="49.5" height="49.5" fill="white" transform="translate(12.0925 100.042) scale(1.00038) rotate(13.4284)"/>
</clipPath>
<clipPath id="clip9_18332_158483">
<rect width="50" height="50" fill="white" transform="translate(370.716 25.2518) scale(1.00038) rotate(6.21795)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 7.6 KiB

25
ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-1.svg

@ -1,25 +0,0 @@
<svg width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_17177_74096)">
<rect y="16.6947" width="64.5032" height="64.5032" rx="5.99735" transform="rotate(-15 0 16.6947)" fill="#D99424"/>
<rect x="0.612102" y="17.0481" width="63.5037" height="63.5037" rx="5.49758" transform="rotate(-15 0.612102 17.0481)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
<path d="M57.2426 45.1466L56.4162 42.0624L34.827 47.8472L29.8686 29.3422L32.9527 28.5158L27.0869 25.1291L23.7002 30.995L26.7844 30.1686L27.6108 33.2528L21.4424 34.9056L22.2688 37.9897L28.4372 36.3369L31.7428 48.6736C32.1973 50.3699 33.9571 51.3859 35.6534 50.9314L47.9901 47.6258L48.8165 50.71L45.7323 51.5364L51.5982 54.923L54.9849 49.0572L51.9007 49.8836L51.0743 46.7994L57.2426 45.1466ZM34.6056 34.6841L43.8581 32.2049L46.3373 41.4574L49.4215 40.631L46.9423 31.3785C46.4877 29.6822 44.728 28.6662 43.0317 29.1207L33.7792 31.5999L34.6056 34.6841Z" fill="white"/>
</g>
<defs>
<filter id="filter0_ii_17177_74096" x="0" y="-2.01574" width="79.0005" height="83.0315" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17177_74096"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_17177_74096" result="effect2_innerShadow_17177_74096"/>
</filter>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 2.1 KiB

25
ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-2.svg

@ -1,25 +0,0 @@
<svg width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_17177_74098)">
<rect x="16.6947" width="64.5032" height="64.5032" rx="5.99735" transform="rotate(15 16.6947 0)" fill="#D99424"/>
<rect x="17.0481" y="0.612102" width="63.5037" height="63.5037" rx="5.49758" transform="rotate(15 17.0481 0.612102)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
<path d="M35.3003 29.65L33.4544 27.0398L22.4176 34.8588L28.0662 47.1486L30.9699 45.811L26.427 35.9331L35.3003 29.65ZM31.5345 38.9544L34.6187 39.7808L35.4451 36.6967L32.3609 35.8703L31.5345 38.9544ZM47.7818 40.0023L44.6976 39.1759L43.8712 42.26L46.9554 43.0864L47.7818 40.0023ZM37.7029 40.6072L40.787 41.4336L41.6134 38.3495L38.5293 37.5231L37.7029 40.6072ZM51.2501 31.8081L48.3463 33.1456L52.8893 43.0236L44.016 49.3067L45.8619 51.9169L56.8987 44.0979L51.2501 31.8081Z" fill="white"/>
</g>
<defs>
<filter id="filter0_ii_17177_74098" x="-0.00149042" y="-2.01573" width="79.0025" height="83.0315" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17177_74098"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_17177_74098" result="effect2_innerShadow_17177_74098"/>
</filter>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 2.1 KiB

25
ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-3.svg

@ -1,25 +0,0 @@
<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_17177_74100)">
<rect y="32.2102" width="64.4205" height="64.4205" rx="5.99735" transform="rotate(-30 0 32.2102)" fill="#D99424"/>
<rect x="0.682712" y="32.3932" width="63.4209" height="63.4209" rx="5.49758" transform="rotate(-30 0.682712 32.3932)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
<path d="M29.836 48.6854C28.7188 46.7503 28.0484 44.6966 27.8248 42.5242C27.6012 40.3518 27.8472 38.2174 28.5626 36.121L31.6729 36.9402C31.096 38.638 30.886 40.3622 31.0429 42.1127C31.1999 43.8631 31.7278 45.517 32.6268 47.0741L29.836 48.6854ZM53.5909 34.9705C52.6919 33.4133 51.5236 32.1292 50.0861 31.1181C48.6486 30.1069 47.0505 29.4267 45.2917 29.0774L46.1373 25.9742C48.3106 26.4028 50.282 27.257 52.0516 28.5369C53.8212 29.8167 55.2645 31.4241 56.3817 33.3592L53.5909 34.9705ZM39.1217 58.7832L37.4397 55.8699L40.0851 54.3425L35.0732 45.6617C34.0121 43.8239 33.6134 41.8686 33.8769 39.7958C34.1405 37.723 35.029 35.955 36.5424 34.4916L36.0514 33.6412C35.7151 33.0587 35.6331 32.4459 35.8055 31.8027C35.9778 31.1596 36.3552 30.6698 36.9377 30.3335C37.5202 29.9972 38.133 29.9152 38.7762 30.0876C39.4193 30.2599 39.909 30.6373 40.2454 31.2198L40.7364 32.0703C42.7655 31.4884 44.7414 31.6009 46.6643 32.4079C48.5871 33.2149 50.0805 34.5399 51.1445 36.3829L56.1564 45.0637L58.8095 43.532L60.4915 46.4453L39.1217 58.7832ZM52.0506 56.4921C51.321 56.9133 50.5468 57.0149 49.7282 56.7968C48.9095 56.5787 48.2902 56.1059 47.8702 55.3784L53.1686 52.3194C53.59 53.0492 53.6909 53.8221 53.4712 54.6381C53.2516 55.4541 52.778 56.0721 52.0506 56.4921Z" fill="white"/>
</g>
<defs>
<filter id="filter0_ii_17177_74100" x="0" y="-2.01309" width="87.9996" height="92.0263" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17177_74100"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_17177_74100" result="effect2_innerShadow_17177_74100"/>
</filter>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 2.8 KiB

35
ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-4.svg

@ -1,35 +0,0 @@
<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_17177_74102)">
<g clip-path="url(#clip0_17177_74102)">
<rect x="32.2102" width="64.4205" height="64.4205" rx="5.99735" transform="rotate(30 32.2102 0)" fill="#D99424"/>
<g clip-path="url(#clip1_17177_74102)">
<path d="M29.4855 50.2566L31.08 47.495L44.8386 44.392L40.6466 30.9251L42.241 28.1634L58.8109 37.7301L56.4193 41.8726L46.4428 36.1126L49.8787 47.3018L38.4706 49.9209L48.4471 55.6808L46.0554 59.8233L29.4855 50.2566Z" fill="white"/>
</g>
</g>
<rect x="32.3932" y="0.682712" width="63.4209" height="63.4209" rx="5.49758" transform="rotate(30 32.3932 0.682712)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
</g>
<defs>
<filter id="filter0_ii_17177_74102" x="0.00152506" y="-2.01314" width="87.9996" height="92.0263" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17177_74102"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_17177_74102" result="effect2_innerShadow_17177_74102"/>
</filter>
<clipPath id="clip0_17177_74102">
<rect x="32.2102" width="64.4205" height="64.4205" rx="5.99735" transform="rotate(30 32.2102 0)" fill="white"/>
</clipPath>
<clipPath id="clip1_17177_74102">
<rect width="38" height="38" fill="white" transform="translate(37.143 17.8568) scale(1.00701) rotate(30)"/>
</clipPath>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 2.2 KiB

57
ui-ngx/src/assets/iot-hub/hero-solution-template-cluster.svg

@ -0,0 +1,57 @@
<svg width="990" height="260" viewBox="0 0 990 260" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.8" clip-path="url(#clip0_18368_189992)">
<path d="M39.5189 205.251C37.5147 206.408 36.8356 208.943 37.9927 210.947L45.0396 223.152C44.4782 224.849 44.683 226.705 45.5691 228.239C47.2996 231.237 51.1159 232.259 54.1131 230.529C57.1104 228.798 58.133 224.982 56.4025 221.985C55.5164 220.45 54.0116 219.345 52.2723 219.001L45.2149 206.777C44.0578 204.773 41.5231 204.094 39.5189 205.251ZM40.5614 207.056C41.5544 206.483 42.836 206.826 43.4094 207.819L44.4518 209.625L40.8407 211.71L39.7982 209.904C39.2249 208.911 39.5683 207.63 40.5614 207.056ZM18.1357 214.082L17.6572 216.38C17.6572 216.38 16.8576 220.332 16.4882 225.072C16.1188 229.811 15.9546 235.322 18.2063 239.222C21.6568 245.199 29.3179 247.252 35.2943 243.801C41.2708 240.351 43.3236 232.69 39.8731 226.713C37.6214 222.813 32.7662 220.2 28.4772 218.15C24.1882 216.1 20.3655 214.816 20.3655 214.816L18.1357 214.082ZM21.3986 219.733C22.7351 220.213 23.9056 220.573 26.694 221.9C30.7135 223.816 35.0527 226.704 36.2619 228.798C38.5762 232.806 37.2178 237.876 33.2095 240.19C29.2011 242.504 24.1316 241.146 21.8174 237.138C20.6082 235.043 20.2773 229.841 20.6273 225.402C20.8722 222.324 21.1462 221.131 21.3986 219.733Z" fill="#2C6CB4"/>
</g>
<g opacity="0.8">
<path d="M210.655 46.6853L208.582 46.9032L209.13 32.171L201.873 32.9338C200.048 33.1256 201.025 31.4506 201.06 31.3841C203.238 26.3754 206.519 18.9028 210.9 8.92487L212.974 8.70694L212.426 23.4391L219.704 22.6742C220.533 22.587 221.031 22.933 220.677 23.9555C213.988 39.1025 210.655 46.6853 210.655 46.6853Z" stroke="#2C6CB4" stroke-width="3.25"/>
</g>
<g opacity="0.8">
<path d="M795.224 47.2939L759.393 43.5279L761.653 22.0295L774.758 17.9729L774.382 21.556L783.716 18.9144L783.151 24.289L788.526 24.8539L791.824 10.7099L797.198 11.2748L797.483 25.7954L795.224 47.2939ZM779.577 23.8229L770.243 26.4645L770.61 22.971L764.987 24.7709L763.353 40.3215L792.017 43.3342L793.524 29.0019L779.191 27.4955L779.577 23.8229ZM776.27 38.0565L779.853 38.4331L780.606 31.2669L777.023 30.8903L776.27 38.0565ZM769.104 37.3033L772.687 37.6799L773.44 30.5137L769.857 30.1371L769.104 37.3033ZM787.772 32.0201L784.189 31.6435L783.436 38.8097L787.019 39.1863L787.772 32.0201Z" fill="#2C6CB4"/>
</g>
<g opacity="0.8" clip-path="url(#clip1_18368_189992)">
<path d="M76.3577 90.376C78.5415 86.5934 83.3853 85.2955 87.1677 87.4795" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
<path d="M71.7879 87.7334C75.4275 81.4292 83.5009 79.266 89.805 82.9057" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
<path d="M80.9275 93.0108C81.6555 91.7499 83.2696 91.3175 84.5306 92.0453" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
<path d="M86.966 108.344C84.7036 99.9009 76.025 94.8903 67.5815 97.1527L67.5795 97.1532L67.5801 97.1552C69.8425 105.599 78.5211 110.609 86.9646 108.347L86.9665 108.346L86.966 108.344Z" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
<path d="M88.673 114.716C86.4106 106.273 91.4212 97.5943 99.8647 95.3318L99.8666 95.3313L99.8671 95.3333C102.13 103.777 97.119 112.455 88.6755 114.718L88.6735 114.718L88.673 114.716Z" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
<path d="M78.2048 123.326L101.404 117.11" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
<path d="M86.9655 108.35L90.0378 119.816" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
</g>
<g opacity="0.8" clip-path="url(#clip2_18368_189992)">
<path d="M898.697 101.071C897.818 104.354 899.804 107.735 903.147 108.631C906.49 109.527 909.901 107.592 910.78 104.309C911.487 101.671 910.625 100.62 907.194 93.5272C900.646 97.9889 899.399 98.4534 898.697 101.071Z" fill="#2C6CB4"/>
<path d="M920.876 106.905C921.983 107.202 923.132 106.538 923.429 105.431C923.726 104.323 923.062 103.174 921.955 102.877L919.941 102.338L923.179 90.2545L925.193 90.7941C926.3 91.0908 927.449 90.4274 927.746 89.3198C928.043 88.2122 927.379 87.0632 926.272 86.7664L894.05 78.1326C892.943 77.8358 891.793 78.4993 891.497 79.6069C891.2 80.7145 891.863 81.8635 892.971 82.1603L894.985 82.6999L891.747 94.783L889.733 94.2434C888.626 93.9466 887.477 94.61 887.18 95.7176C886.883 96.8253 887.546 97.9743 888.654 98.2711L890.668 98.8107L887.43 110.894L885.416 110.354C884.309 110.057 883.16 110.721 882.863 111.828C882.566 112.936 883.23 114.085 884.337 114.382L916.559 123.016C917.666 123.312 918.815 122.649 919.112 121.541C919.409 120.434 918.746 119.285 917.638 118.988L915.624 118.448L918.862 106.365L920.876 106.905ZM911.596 117.369L891.458 111.973L894.696 99.8899C895.803 100.187 896.952 99.5233 897.249 98.4157C897.546 97.3081 896.882 96.159 895.775 95.8622L899.012 83.7791L919.151 89.1752L915.913 101.258C914.806 100.962 913.657 101.625 913.36 102.733C913.063 103.84 913.726 104.989 914.834 105.286L911.596 117.369Z" fill="#2C6CB4"/>
</g>
<g opacity="0.8" clip-path="url(#clip3_18368_189992)">
<path d="M954.742 247.505L936.542 236.997L950.115 213.489L968.315 223.996L954.742 247.505Z" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
<path d="M963.841 252.759L954.741 247.505L965.249 229.305L974.349 234.559L963.841 252.759Z" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
<path d="M936.542 236.997L927.442 231.743L937.949 213.543L947.05 218.797L936.542 236.997Z" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
<path d="M948.707 236.943L944.157 234.316L941.092 239.624L945.642 242.251L948.707 236.943Z" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
<path d="M953.258 239.57L948.707 236.943L945.643 242.251L950.193 244.878L953.258 239.57Z" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
<path d="M947.924 230.418C947.561 231.046 946.758 231.261 946.129 230.899C945.501 230.536 945.286 229.733 945.649 229.105C946.011 228.476 946.815 228.261 947.443 228.624C948.071 228.986 948.286 229.79 947.924 230.418Z" fill="#2C6CB4"/>
<path d="M954.749 234.358C954.386 234.987 954.602 235.79 955.23 236.153C955.858 236.515 956.661 236.3 957.024 235.672C957.387 235.044 957.172 234.24 956.543 233.878C955.915 233.515 955.112 233.73 954.749 234.358Z" fill="#2C6CB4"/>
<path d="M952.474 233.045C952.111 233.673 951.308 233.888 950.68 233.526C950.051 233.163 949.836 232.36 950.199 231.731C950.562 231.103 951.365 230.888 951.993 231.251C952.621 231.613 952.837 232.417 952.474 233.045Z" fill="#2C6CB4"/>
<path d="M950.551 225.868C950.188 226.496 949.384 226.711 948.756 226.348C948.128 225.986 947.913 225.182 948.276 224.554C948.638 223.926 949.442 223.711 950.07 224.073C950.698 224.436 950.913 225.24 950.551 225.868Z" fill="#2C6CB4"/>
<path d="M957.376 229.808C957.013 230.436 957.229 231.24 957.857 231.602C958.485 231.965 959.288 231.75 959.651 231.122C960.014 230.493 959.799 229.69 959.17 229.327C958.542 228.965 957.739 229.18 957.376 229.808Z" fill="#2C6CB4"/>
<path d="M955.101 228.495C954.738 229.123 953.935 229.338 953.307 228.975C952.678 228.613 952.463 227.809 952.826 227.181C953.188 226.553 953.992 226.338 954.62 226.7C955.248 227.063 955.464 227.866 955.101 228.495Z" fill="#2C6CB4"/>
<path d="M953.177 221.317C952.815 221.946 952.011 222.161 951.383 221.798C950.755 221.436 950.54 220.632 950.902 220.004C951.265 219.376 952.069 219.161 952.697 219.523C953.325 219.886 953.54 220.689 953.177 221.317Z" fill="#2C6CB4"/>
<path d="M960.003 225.258C959.64 225.886 959.856 226.689 960.484 227.052C961.112 227.415 961.915 227.2 962.278 226.571C962.641 225.943 962.425 225.14 961.797 224.777C961.169 224.414 960.366 224.63 960.003 225.258Z" fill="#2C6CB4"/>
<path d="M957.728 223.944C957.365 224.573 956.562 224.788 955.934 224.425C955.305 224.062 955.09 223.259 955.453 222.631C955.815 222.003 956.619 221.787 957.247 222.15C957.875 222.513 958.09 223.316 957.728 223.944Z" fill="#2C6CB4"/>
<path d="M958.013 209.305C962.232 208.174 966.575 210.681 967.705 214.9" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
<path d="M956.651 204.203C963.682 202.319 970.921 206.498 972.805 213.529" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
<path d="M959.383 214.398C960.79 214.021 962.237 214.857 962.614 216.263" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
</g>
<defs>
<clipPath id="clip0_18368_189992">
<rect width="50" height="50" fill="white" transform="translate(0 216.028) scale(1.00075) rotate(-30)"/>
</clipPath>
<clipPath id="clip1_18368_189992">
<rect width="50" height="50" fill="white" transform="translate(54.054 82.8782) scale(1.00075) rotate(-15)"/>
</clipPath>
<clipPath id="clip2_18368_189992">
<rect width="50" height="50" fill="white" transform="translate(887.613 69.9311) scale(1.00075) rotate(15)"/>
</clipPath>
<clipPath id="clip3_18368_189992">
<rect width="50" height="50" fill="white" transform="translate(946.667 191.01) scale(1.00075) rotate(30)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 8.7 KiB

25
ui-ngx/src/assets/iot-hub/hero-solution-template-icon-1.svg

@ -1,25 +0,0 @@
<svg width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_17168_73117)">
<rect y="16.6947" width="64.5032" height="64.5032" rx="5.99735" transform="rotate(-15 0 16.6947)" fill="#0B8BB8"/>
<rect x="0.612102" y="17.0481" width="63.5037" height="63.5037" rx="5.49758" transform="rotate(-15 0.612102 17.0481)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
<path d="M52.0802 41.4165L48.1135 26.6125L25.4028 32.6978L29.3695 47.5018L52.0802 41.4165ZM47.4524 24.1451C48.1216 23.9658 48.8331 24.0538 49.4303 24.3897C50.0276 24.7256 50.4616 25.2819 50.6369 25.9363L54.6037 40.7404C54.779 41.3947 54.6813 42.0936 54.332 42.6831C53.9828 43.2726 53.4106 43.7045 52.7414 43.8839L43.9094 46.2504L44.5705 48.7177L47.0939 48.0416L47.7551 50.5089L37.6614 53.2135L37.0003 50.7462L39.5237 50.07L38.8626 47.6027L30.0306 49.9692C29.3614 50.1485 28.6499 50.0605 28.0526 49.7246C27.4554 49.3887 27.0214 48.8324 26.8461 48.178L22.8793 33.3739C22.5124 32.0046 23.3411 30.6057 24.7416 30.2305L47.4524 24.1451ZM28.5873 34.489L39.9427 31.4463L41.5955 37.6147L30.2401 40.6573L28.5873 34.489ZM41.2044 31.1083L46.2512 29.756L46.9123 32.2233L41.8655 33.5756L41.2044 31.1083ZM47.2429 33.457L48.8957 39.6253L43.8489 40.9776L42.1961 34.8093L47.2429 33.457ZM30.5707 41.891L35.6175 40.5387L36.2786 43.0061L31.2318 44.3584L30.5707 41.891ZM36.8792 40.2006L41.926 38.8484L42.5872 41.3157L37.5403 42.668L36.8792 40.2006Z" fill="white"/>
</g>
<defs>
<filter id="filter0_ii_17168_73117" x="0" y="-2.01574" width="79.0005" height="83.0315" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17168_73117"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_17168_73117" result="effect2_innerShadow_17168_73117"/>
</filter>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 2.6 KiB

25
ui-ngx/src/assets/iot-hub/hero-solution-template-icon-2.svg

@ -1,25 +0,0 @@
<svg width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_17168_73122)">
<rect x="16.6947" width="64.5032" height="64.5032" rx="5.99735" transform="rotate(15 16.6947 0)" fill="#0B8BB8"/>
<rect x="17.0481" y="0.612102" width="63.5037" height="63.5037" rx="5.49758" transform="rotate(15 17.0481 0.612102)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
<path d="M46.8423 41.3968C48.9704 41.967 51.1449 40.6985 51.7151 38.5704C52.2853 36.4423 51.0364 34.2565 48.9083 33.6863C46.7802 33.1161 44.5903 34.3805 44.0201 36.5085C43.4499 38.6366 44.7142 40.8265 46.8423 41.3968ZM35.6899 36.7557C38.2497 37.4416 40.8544 35.9247 41.5403 33.3649C42.2262 30.805 40.7289 28.1891 38.1691 27.5031C35.6092 26.8172 32.9891 28.3299 32.3032 30.8898C31.6173 33.4497 33.13 36.0698 35.6899 36.7557ZM46.0159 44.4809C43.1939 43.7248 37.1543 43.6271 36.3981 46.4491L35.4684 49.9188L52.4314 54.464L53.3611 50.9943C54.1173 48.1723 48.8379 45.2371 46.0159 44.4809ZM34.8635 39.8398C31.2704 38.8771 23.5854 38.7517 22.6226 42.3447L21.5896 46.2L32.3843 49.0924L33.314 45.6227C33.6652 44.3119 34.7897 42.1505 38.4025 41.2509C37.1353 40.6139 35.8812 40.1126 34.8635 39.8398Z" fill="white"/>
</g>
<defs>
<filter id="filter0_ii_17168_73122" x="0.000478935" y="-2.01573" width="79.0005" height="83.0315" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17168_73122"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_17168_73122" result="effect2_innerShadow_17168_73122"/>
</filter>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 2.4 KiB

25
ui-ngx/src/assets/iot-hub/hero-solution-template-icon-3.svg

@ -1,25 +0,0 @@
<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_17168_73124)">
<rect y="32.2102" width="64.4205" height="64.4205" rx="5.99735" transform="rotate(-30 0 32.2102)" fill="#0B8BB8"/>
<rect x="0.682712" y="32.3932" width="63.4209" height="63.4209" rx="5.49758" transform="rotate(-30 0.682712 32.3932)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
<path d="M39.8182 37.1345L36.6293 31.6112L22.8211 39.5834L37.171 64.4382L64.7875 48.4938L53.6264 29.1623L39.8182 37.1345ZM41.0999 58.4877L38.3382 60.0821L36.7438 57.3205L39.5054 55.726L41.0999 58.4877ZM37.911 52.9644L35.1493 54.5588L33.5549 51.7972L36.3165 50.2027L37.911 52.9644ZM34.7221 47.4411L31.9605 49.0355L30.366 46.2739L33.1277 44.6794L34.7221 47.4411ZM31.5332 41.9178L28.7716 43.5122L27.1771 40.7506L29.9388 39.1561L31.5332 41.9178ZM46.6232 55.2988L43.8615 56.8932L42.2671 54.1316L45.0287 52.5372L46.6232 55.2988ZM43.4343 49.7755L40.6726 51.3699L39.0782 48.6083L41.8398 47.0139L43.4343 49.7755ZM40.2454 44.2522L37.4838 45.8466L35.8893 43.085L38.651 41.4906L40.2454 44.2522ZM37.0565 38.7289L34.2949 40.3233L32.7004 37.5617L35.4621 35.9673L37.0565 38.7289ZM60.4314 47.3266L49.3848 53.7044L47.7904 50.9427L50.552 49.3483L48.9576 46.5866L46.1959 48.1811L44.6015 45.4194L47.3631 43.825L45.7687 41.0633L43.0071 42.6578L41.4126 39.8961L52.4592 33.5184L60.4314 47.3266ZM51.292 37.8745L48.5304 39.4689L50.1248 42.2305L52.8864 40.6361L51.292 37.8745ZM54.4809 43.3977L51.7192 44.9922L53.3137 47.7538L56.0753 46.1594L54.4809 43.3977Z" fill="white"/>
</g>
<defs>
<filter id="filter0_ii_17168_73124" x="0" y="-2.01309" width="87.9996" height="92.0263" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17168_73124"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_17168_73124" result="effect2_innerShadow_17168_73124"/>
</filter>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 2.7 KiB

25
ui-ngx/src/assets/iot-hub/hero-solution-template-icon-4.svg

@ -1,25 +0,0 @@
<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_17168_73127)">
<rect x="32.2102" width="64.4205" height="64.4205" rx="5.99735" transform="rotate(30 32.2102 0)" fill="#0B8BB8"/>
<rect x="32.3932" y="0.682712" width="63.4209" height="63.4209" rx="5.49758" transform="rotate(30 32.3932 0.682712)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
<path d="M38.5395 45.4961L42.6252 38.4194L49.7019 42.5052L45.6162 49.5819L38.5395 45.4961ZM32.8305 54.0291L34.4249 51.2675L30.9728 49.2744C30.4205 48.9555 30.0568 48.4694 29.8817 47.816C29.7066 47.1625 29.7786 46.5597 30.0974 46.0073L32.0905 42.5553L29.3288 40.9608L30.5247 38.8896L33.2863 40.484L35.7577 36.2035L32.996 34.6091L34.1919 32.5378L36.9535 34.1323L38.9466 30.6802C39.2655 30.1279 39.7516 29.7642 40.405 29.5891C41.0584 29.414 41.6613 29.4859 42.2136 29.8048L45.6657 31.7978L47.1804 29.1743L49.2517 30.3701L47.7369 32.9937L52.0175 35.465L53.5322 32.8415L55.6034 34.0373L54.0887 36.6609L57.5408 38.6539C58.0931 38.9728 58.4568 39.459 58.6319 40.1124C58.807 40.7658 58.7351 41.3687 58.4162 41.921L56.4231 45.373L59.0467 46.8878L57.8509 48.959L55.2273 47.4443L52.7559 51.7248L55.3795 53.2396L54.1837 55.3108L51.5601 53.7961L49.5671 57.2481C49.2482 57.8005 48.762 58.1642 48.1086 58.3393C47.4552 58.5143 46.8523 58.4424 46.3 58.1235L42.8479 56.1305L41.2535 58.8921L39.1823 57.6963L40.7767 54.9347L36.4961 52.4633L34.9017 55.2249L32.8305 54.0291ZM47.4958 56.0523L56.345 40.7252L41.0178 31.876L32.1687 47.2032L47.4958 56.0523Z" fill="white"/>
</g>
<defs>
<filter id="filter0_ii_17168_73127" x="-0.000439846" y="-2.01314" width="87.9996" height="92.0263" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17168_73127"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_17168_73127" result="effect2_innerShadow_17168_73127"/>
</filter>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 2.7 KiB

57
ui-ngx/src/assets/iot-hub/hero-widget-cluster.svg

@ -0,0 +1,57 @@
<svg width="1011" height="231" viewBox="0 0 1011 231" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.8" clip-path="url(#clip0_18326_153917)">
<path opacity="0.08" d="M152.513 38.2815C154.954 49.7635 147.624 61.0499 136.142 63.4905C124.66 65.9311 113.374 58.6016 110.933 47.1196C108.493 35.6376 115.822 24.3512 127.304 21.9106C138.786 19.4701 150.073 26.7996 152.513 38.2815ZM117.17 45.7939C118.879 53.8313 126.779 58.9619 134.817 57.2535C142.854 55.5451 147.985 47.6446 146.276 39.6072C144.568 31.5699 136.667 26.4392 128.63 28.1476C120.592 29.856 115.462 37.7565 117.17 45.7939Z" fill="#2C9755"/>
<path d="M127.967 25.0282C127.601 23.3059 128.703 21.5873 130.46 21.4827C134.03 21.2703 137.614 21.9614 140.873 23.5157C145.096 25.53 148.537 28.8814 150.661 33.0503C152.785 37.2192 153.474 41.9724 152.621 46.5729C151.769 51.1734 149.422 55.3639 145.945 58.4947C142.468 61.6254 138.055 63.5214 133.39 63.8885C128.726 64.2556 124.071 63.0733 120.147 60.525C116.223 57.9768 113.249 54.2049 111.688 49.7945C110.482 46.3911 110.17 42.7543 110.754 39.2262C111.042 37.4891 112.866 36.5727 114.541 37.1168C116.215 37.6609 117.094 39.4642 116.919 41.2162C116.702 43.3845 116.962 45.5875 117.698 47.666C118.791 50.7533 120.873 53.3936 123.62 55.1774C126.366 56.9612 129.625 57.7888 132.89 57.5318C136.155 57.2748 139.244 55.9477 141.678 53.7562C144.112 51.5646 145.755 48.6312 146.352 45.4109C146.949 42.1906 146.466 38.8633 144.979 35.9451C143.492 33.0269 141.084 30.6809 138.128 29.2709C136.138 28.3216 133.974 27.8323 131.795 27.8217C130.034 27.8131 128.333 26.7504 127.967 25.0282Z" fill="#2C9755"/>
<path d="M95.172 18.9727L155.463 6.15746L168.278 66.4483L107.987 79.2635L95.172 18.9727Z" stroke="#2C9755" stroke-opacity="0.2" stroke-width="1.59375" stroke-dasharray="5.31 5.31"/>
<rect x="91.39" y="16.5151" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(-12 91.39 16.5151)" fill="#2C9755"/>
<rect x="151.68" y="3.69998" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(-12 151.68 3.69998)" fill="#2C9755"/>
<rect x="104.205" y="76.801" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(-12 104.205 76.801)" fill="#2C9755"/>
<rect x="164.495" y="63.982" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(-12 164.495 63.982)" fill="#2C9755"/>
</g>
<g opacity="0.8" clip-path="url(#clip1_18326_153917)">
<path d="M855.138 6.15752L915.429 18.9727L902.613 79.2635L842.322 66.4483L855.138 6.15752Z" stroke="#2C9755" stroke-opacity="0.2" stroke-width="1.59375" stroke-dasharray="5.31 5.31"/>
<rect x="852.684" y="2.37549" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(12 852.684 2.37549)" fill="#2C9755"/>
<rect x="912.974" y="15.1906" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(12 912.974 15.1906)" fill="#2C9755"/>
<rect x="839.869" y="62.6614" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(12 839.869 62.6614)" fill="#2C9755"/>
<rect x="900.163" y="75.4726" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(12 900.163 75.4726)" fill="#2C9755"/>
<path opacity="0.25" d="M860.4 35.7402L854.235 40.3178L849.648 61.8986L898.715 72.3282L906.768 34.4461L903.355 38.0892C900.749 40.8708 896.337 40.8792 893.721 38.1075L893.165 37.5186C891.078 35.3078 887.752 34.805 885.105 36.3L878.873 39.8194C875.962 41.4632 872.282 40.676 870.298 37.9852L869.665 37.1256C867.493 34.1788 863.339 33.5577 860.4 35.7402Z" fill="url(#paint0_linear_18326_153917)"/>
<path d="M854.237 40.3161L860.402 35.7385C863.341 33.556 867.494 34.1771 869.666 37.1239L870.3 37.9835C872.284 40.6744 875.964 41.4615 878.874 39.8177L885.106 36.2983C887.754 34.8033 891.079 35.3061 893.166 37.5169L893.722 38.1059C896.339 40.8775 900.751 40.8691 903.356 38.0875L906.769 34.4445" stroke="#2C9755" stroke-width="2.09877" stroke-linecap="round"/>
</g>
<g opacity="0.8" clip-path="url(#clip2_18326_153917)">
<path d="M915.736 164.034L976.027 151.219L988.842 211.51L928.551 224.325L915.736 164.034Z" stroke="#2C9755" stroke-opacity="0.2" stroke-width="1.59375" stroke-dasharray="5.31 5.31"/>
<rect x="911.954" y="161.576" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(-12 911.954 161.576)" fill="#2C9755"/>
<rect x="972.244" y="148.761" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(-12 972.244 148.761)" fill="#2C9755"/>
<rect x="924.769" y="221.862" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(-12 924.769 221.862)" fill="#2C9755"/>
<rect x="985.059" y="209.043" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(-12 985.059 209.043)" fill="#2C9755"/>
<path opacity="0.08" d="M930.855 203.239C930.396 203.337 929.943 203.043 929.86 202.581C928.729 196.222 930.051 189.657 933.581 184.222C937.265 178.549 943.052 174.571 949.668 173.165C956.285 171.759 963.189 173.038 968.862 176.722C974.297 180.252 978.176 185.711 979.729 191.981C979.841 192.437 979.547 192.889 979.088 192.987L970.772 194.754C970.312 194.852 969.863 194.558 969.74 194.105C968.757 190.481 966.471 187.334 963.306 185.279C959.902 183.068 955.759 182.3 951.79 183.144C947.82 183.988 944.347 186.374 942.137 189.778C940.081 192.944 939.273 196.748 939.849 200.458C939.921 200.922 939.63 201.374 939.171 201.471L930.855 203.239Z" fill="#2C9755"/>
<path d="M930.855 203.239C930.396 203.337 929.943 203.044 929.86 202.581C929.028 197.905 929.518 193.083 931.282 188.662C933.151 183.976 936.368 179.951 940.525 177.093C944.682 174.236 949.593 172.676 954.637 172.61C959.398 172.547 964.075 173.819 968.142 176.271C968.544 176.514 968.655 177.042 968.399 177.435L963.769 184.566C963.513 184.959 962.988 185.069 962.58 184.836C960.21 183.477 957.513 182.775 954.771 182.811C951.744 182.851 948.798 183.787 946.303 185.501C943.809 187.215 941.879 189.631 940.758 192.442C939.741 194.99 939.43 197.758 939.849 200.458C939.921 200.922 939.63 201.374 939.171 201.471L930.855 203.239Z" fill="#2C9755"/>
</g>
<g opacity="0.8" clip-path="url(#clip3_18326_153917)">
<path d="M34.9682 151.188L95.259 164.003L82.4438 224.294L22.153 211.478L34.9682 151.188Z" stroke="#2C9755" stroke-opacity="0.2" stroke-width="1.59375" stroke-dasharray="5.31 5.31"/>
<rect x="32.5145" y="147.405" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(12 32.5145 147.405)" fill="#2C9755"/>
<rect x="92.8043" y="160.221" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(12 92.8043 160.221)" fill="#2C9755"/>
<rect x="19.6994" y="207.691" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(12 19.6994 207.691)" fill="#2C9755"/>
<rect x="79.9931" y="220.503" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(12 79.9931 220.503)" fill="#2C9755"/>
<rect x="59.7467" y="166.038" width="7.55712" height="43.4534" rx="0.944444" transform="rotate(12 59.7467 166.038)" fill="#2C9755"/>
<rect x="41.7606" y="182.499" width="7.55712" height="23.616" rx="0.944444" transform="rotate(12 41.7606 182.499)" fill="#2C9755"/>
<rect x="70.8564" y="181.92" width="7.55712" height="30.2285" rx="0.944444" transform="rotate(12 70.8564 181.92)" fill="#2C9755"/>
</g>
<defs>
<linearGradient id="paint0_linear_18326_153917" x1="882.274" y1="29.238" x2="874.211" y2="67.1731" gradientUnits="userSpaceOnUse">
<stop stop-color="#2C9755"/>
<stop offset="1" stop-color="#2C9755" stop-opacity="0.25"/>
</linearGradient>
<clipPath id="clip0_18326_153917">
<rect width="68" height="68" fill="white" transform="translate(91.3919 16.5151) rotate(-12)"/>
</clipPath>
<clipPath id="clip1_18326_153917">
<rect width="68" height="68" fill="white" transform="translate(852.686 2.37549) rotate(12)"/>
</clipPath>
<clipPath id="clip2_18326_153917">
<rect width="68" height="68" fill="white" transform="translate(911.956 161.576) rotate(-12)"/>
</clipPath>
<clipPath id="clip3_18326_153917">
<rect width="68" height="68" fill="white" transform="translate(32.5165 147.405) rotate(12)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 7.7 KiB

27
ui-ngx/src/assets/iot-hub/hero-widget-icon-1.svg

@ -1,27 +0,0 @@
<svg width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_16977_25487)">
<rect y="16.6947" width="64.5032" height="64.5032" rx="5.99735" transform="rotate(-15 0 16.6947)" fill="#2C9755"/>
<rect x="0.612102" y="17.0481" width="63.5037" height="63.5037" rx="5.49758" transform="rotate(-15 0.612102 17.0481)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
<path d="M28.3433 35.2655C27.6302 37.1086 27.3918 39.1005 27.6498 41.0585C27.6734 41.2131 27.6393 41.3711 27.5539 41.5024C27.4685 41.6337 27.3379 41.7291 27.1867 41.7707L21.3652 43.3306C21.2799 43.3537 21.1908 43.3589 21.1034 43.346C21.0161 43.333 20.9324 43.3021 20.8576 43.2553C20.7829 43.2084 20.7186 43.1466 20.669 43.0737C20.6194 43.0008 20.5855 42.9184 20.5693 42.8318C19.9008 39.0834 20.3754 35.2198 21.9317 31.7414C21.9691 31.6605 22.0231 31.5883 22.0901 31.5294C22.1571 31.4705 22.2357 31.4262 22.3208 31.3995C22.4059 31.3727 22.4957 31.364 22.5844 31.3739C22.673 31.3838 22.7586 31.4122 22.8356 31.4571L28.0734 34.4746C28.2062 34.5519 28.3065 34.6744 28.3561 34.8197C28.4056 34.9649 28.4011 35.1232 28.3433 35.2655Z" fill="white"/>
<path d="M47.5436 22.9031L44.5157 28.1362C44.4375 28.2686 44.3144 28.3688 44.1687 28.4184C44.023 28.4681 43.8644 28.464 43.7216 28.4068C41.3786 27.5104 38.8107 27.3776 36.3858 28.0273C33.9609 28.677 31.8035 30.0761 30.2226 32.0239C30.128 32.1454 29.9926 32.2288 29.8414 32.2587C29.6902 32.2886 29.5333 32.263 29.3996 32.1866L24.1608 29.1685C24.0835 29.1245 24.0163 29.0648 23.9635 28.9933C23.9107 28.9219 23.8734 28.8401 23.8541 28.7534C23.8347 28.6667 23.8337 28.5769 23.8512 28.4897C23.8686 28.4025 23.9041 28.32 23.9553 28.2472C26.5406 24.7024 30.2647 22.1487 34.5061 21.0122C38.7475 19.8758 43.2495 20.2253 47.2609 22.0025C47.3416 22.0399 47.4136 22.0937 47.4723 22.1604C47.531 22.2272 47.575 22.3055 47.6017 22.3903C47.6283 22.475 47.6369 22.5644 47.6269 22.6528C47.6169 22.7411 47.5885 22.8264 47.5436 22.9031Z" fill="white"/>
<path d="M57.9959 34.541C60.7271 44.7344 54.6571 55.2647 44.417 58.0044C35.005 60.5263 25.2718 55.6215 21.6826 46.7121C21.6501 46.6282 21.6357 46.5384 21.6404 46.4486C21.6451 46.3588 21.6688 46.271 21.7098 46.1909C21.7509 46.1108 21.8084 46.0402 21.8787 45.9838C21.9489 45.9274 22.0303 45.8865 22.1175 45.8637L27.9769 44.2937C28.1226 44.2556 28.2771 44.2701 28.4131 44.3346C28.5491 44.3991 28.6579 44.5095 28.7203 44.6463C29.997 47.3108 32.2229 49.4041 34.9636 50.5177C37.7044 51.6312 40.7634 51.6853 43.5442 50.6693C48.807 48.7635 52.0798 43.2921 51.2455 37.7689C50.8129 34.8229 49.2858 32.1483 46.9674 30.2765C46.8461 30.1821 46.7629 30.0471 46.7333 29.8963C46.7037 29.7455 46.7296 29.589 46.8062 29.4557L49.8341 24.2226C49.8783 24.1454 49.9382 24.0782 50.0099 24.0254C50.0815 23.9727 50.1634 23.9354 50.2503 23.916C50.3372 23.8966 50.4272 23.8955 50.5145 23.9128C50.6018 23.9301 50.6845 23.9654 50.7573 24.0165C54.3134 26.5864 56.8703 30.304 57.9959 34.541Z" fill="white"/>
</g>
<defs>
<filter id="filter0_ii_16977_25487" x="0" y="-2.01525" width="79.0005" height="83.032" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_16977_25487"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_16977_25487" result="effect2_innerShadow_16977_25487"/>
</filter>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 4.1 KiB

25
ui-ngx/src/assets/iot-hub/hero-widget-icon-2.svg

@ -1,25 +0,0 @@
<svg width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_16977_25492)">
<rect x="16.6947" width="64.5032" height="64.5032" rx="5.99735" transform="rotate(15 16.6947 0)" fill="#2C9755"/>
<rect x="17.0481" y="0.612102" width="63.5037" height="63.5037" rx="5.49758" transform="rotate(15 17.0481 0.612102)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
<path d="M24.4511 48.4844L47.6648 54.7045C50.0385 55.3405 52.208 53.1629 51.5704 50.7948L45.337 27.631C44.6994 25.2629 41.7399 24.4699 40.0037 26.202L23.0236 43.1456C21.2874 44.8777 22.0774 47.8483 24.4511 48.4844ZM38.9491 40.8046C38.1013 40.5774 37.5935 39.6979 37.8207 38.8501L38.6467 35.7673C38.8739 34.9196 39.7534 34.4118 40.6012 34.6389C41.4489 34.8661 41.9567 35.7456 41.7295 36.5934L40.9035 39.6762C40.6763 40.524 39.7969 41.0317 38.9491 40.8046ZM38.8384 47.3832L35.7556 46.5572L36.5816 43.4744L39.6645 44.3004L38.8384 47.3832Z" fill="white"/>
</g>
<defs>
<filter id="filter0_ii_16977_25492" x="0.000478935" y="-2.01573" width="79.0005" height="83.032" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_16977_25492"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_16977_25492" result="effect2_innerShadow_16977_25492"/>
</filter>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 2.1 KiB

35
ui-ngx/src/assets/iot-hub/hero-widget-icon-3.svg

@ -1,35 +0,0 @@
<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_16977_25494)">
<g clip-path="url(#clip0_16977_25494)">
<rect y="32.2102" width="64.4205" height="64.4205" rx="5.99735" transform="rotate(-30 0 32.2102)" fill="#2C9755"/>
<g clip-path="url(#clip1_16977_25494)">
<path d="M38.3282 49.6285L45.5 62.0505C45.7113 62.4165 45.7686 62.8515 45.6592 63.2598C45.5498 63.6681 45.2827 64.0162 44.9166 64.2276L39.3958 67.415C39.0297 67.6264 38.5947 67.6836 38.1864 67.5742C37.7781 67.4648 37.43 67.1977 37.2187 66.8317L30.0469 54.4097C29.8355 54.0437 29.7783 53.6087 29.8877 53.2004C29.9971 52.7921 30.2642 52.444 30.6302 52.2327L36.1511 49.0452C36.5171 48.8338 36.9522 48.7766 37.3604 48.886C37.7687 48.9954 38.1168 49.2625 38.3282 49.6285ZM38.4273 27.4879L32.9064 30.6753C32.5404 30.8867 32.2732 31.2348 32.1638 31.6431C32.0544 32.0514 32.1117 32.4864 32.3231 32.8524L48.2604 60.4567C48.4718 60.8228 48.8199 61.0899 49.2281 61.1993C49.6364 61.3087 50.0714 61.2514 50.4375 61.0401L55.9584 57.8526C56.3244 57.6413 56.5915 57.2932 56.7009 56.8849C56.8103 56.4766 56.7531 56.0416 56.5417 55.6755L40.6044 28.0712C40.393 27.7052 40.0449 27.4381 39.6366 27.3287C39.2283 27.2193 38.7933 27.2765 38.4273 27.4879ZM53.4533 28.014L47.9325 31.2015C47.5664 31.4128 47.2993 31.7609 47.1899 32.1692C47.0805 32.5775 47.1378 33.0125 47.3491 33.3786L59.3021 54.0818C59.5135 54.4478 59.8616 54.715 60.2699 54.8244C60.6781 54.9338 61.1132 54.8765 61.4792 54.6651L67.0001 51.4777C67.3661 51.2663 67.6332 50.9182 67.7426 50.5099C67.852 50.1017 67.7948 49.6666 67.5834 49.3006L55.6304 28.5974C55.4191 28.2313 55.071 27.9642 54.6627 27.8548C54.2544 27.7454 53.8194 27.8027 53.4533 28.014Z" fill="white"/>
</g>
</g>
<rect x="0.682712" y="32.3932" width="63.4209" height="63.4209" rx="5.49758" transform="rotate(-30 0.682712 32.3932)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
</g>
<defs>
<filter id="filter0_ii_16977_25494" x="0" y="-2.01358" width="87.9996" height="92.0259" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_16977_25494"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_16977_25494" result="effect2_innerShadow_16977_25494"/>
</filter>
<clipPath id="clip0_16977_25494">
<rect y="32.2102" width="64.4205" height="64.4205" rx="5.99735" transform="rotate(-30 0 32.2102)" fill="white"/>
</clipPath>
<clipPath id="clip1_16977_25494">
<rect width="37.9832" height="37.9832" fill="white" transform="translate(18.3072 37.263) scale(1.00701) rotate(-30)"/>
</clipPath>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 3.4 KiB

35
ui-ngx/src/assets/iot-hub/hero-widget-icon-4.svg

@ -1,35 +0,0 @@
<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_16977_25497)">
<g clip-path="url(#clip0_16977_25497)">
<rect x="32.2102" width="64.4205" height="64.4205" rx="5.99735" transform="rotate(30 32.2102 0)" fill="#2C9755"/>
<g clip-path="url(#clip1_16977_25497)">
<path d="M40.3142 24.9296C40.7543 24.1673 40.4931 23.1926 39.7309 22.7525C38.9686 22.3124 37.9939 22.5736 37.5538 23.3359L27.9915 39.8982L24.8039 45.4193C23.4836 47.7062 24.2671 50.6303 26.5539 51.9506L48.6374 64.7005C49.3997 65.1406 50.3744 64.8794 50.8145 64.1171C51.2546 63.3548 50.9934 62.3801 50.2311 61.94L28.1477 49.1901C27.3854 48.75 27.1242 47.7753 27.5643 47.0131L30.4217 42.0639L36.953 40.3138L38.2905 45.3057C38.5184 46.1558 39.3923 46.6604 40.2425 46.4326L56.1197 42.1783L57.4573 47.1702C57.6851 48.0203 58.559 48.5249 59.4092 48.2971C60.2593 48.0692 60.7639 47.1953 60.5361 46.3452L58.7861 39.8139C58.5583 38.9637 57.6843 38.4591 56.8342 38.687L40.9569 42.9413L39.6194 37.9495C39.3915 37.0992 38.5176 36.5947 37.6674 36.8225L32.6756 38.1601L40.3142 24.9296Z" fill="white"/>
</g>
</g>
<rect x="32.3932" y="0.682712" width="63.4209" height="63.4209" rx="5.49758" transform="rotate(30 32.3932 0.682712)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
</g>
<defs>
<filter id="filter0_ii_16977_25497" x="-0.000439846" y="-2.01314" width="87.9996" height="92.0259" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_16977_25497"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1.99912"/>
<feGaussianBlur stdDeviation="3.99824"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_16977_25497" result="effect2_innerShadow_16977_25497"/>
</filter>
<clipPath id="clip0_16977_25497">
<rect x="32.2102" width="64.4205" height="64.4205" rx="5.99735" transform="rotate(30 32.2102 0)" fill="white"/>
</clipPath>
<clipPath id="clip1_16977_25497">
<rect width="37.9832" height="37.9832" fill="white" transform="translate(37.1843 17.6011) scale(1.00701) rotate(30)"/>
</clipPath>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 2.8 KiB

150
ui-ngx/src/assets/iot-hub/items-page-alarm-rules-hero.svg

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 377 KiB

112
ui-ngx/src/assets/iot-hub/items-page-calculated-fields-hero.svg

@ -1,103 +1,103 @@
<svg width="397" height="276" viewBox="0 0 397 276" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_17521_103112)">
<g filter="url(#filter0_ddd_17521_103112)">
<g clip-path="url(#clip0_17199_45631)">
<g filter="url(#filter0_ddd_17199_45631)">
<rect x="4.22656" y="15.6602" width="113.588" height="113.588" rx="10" fill="white"/>
<rect x="4.72656" y="16.1602" width="112.588" height="112.588" rx="9.5" stroke="black" stroke-opacity="0.05"/>
<g clip-path="url(#clip1_17521_103112)">
<path opacity="0.16" d="M32.9958 69.5033H53.6482C54.8219 69.5033 55.9475 69.0371 56.7775 68.2071C57.6074 67.3772 58.0737 66.2516 58.0737 65.0778V44.4255C58.0737 43.2518 57.6074 42.1261 56.7775 41.2962C55.9475 40.4663 54.8219 40 53.6482 40H32.9958C31.8221 40 30.6965 40.4663 29.8665 41.2962C29.0366 42.1261 28.5703 43.2518 28.5703 44.4255V65.0778C28.5703 66.2516 29.0366 67.3772 29.8665 68.2071C30.6965 69.0371 31.8221 69.5033 32.9958 69.5033Z" fill="#006D92"/>
<path d="M35.9478 53.2773H50.6995C51.0907 53.2773 51.466 53.4328 51.7426 53.7094C52.0192 53.9861 52.1747 54.3613 52.1747 54.7525C52.1747 55.1437 52.0192 55.519 51.7426 55.7956C51.466 56.0723 51.0907 56.2277 50.6995 56.2277H35.9478C35.5566 56.2277 35.1814 56.0723 34.9047 55.7956C34.6281 55.519 34.4727 55.1437 34.4727 54.7525C34.4727 54.3613 34.6281 53.9861 34.9047 53.7094C35.1814 53.4328 35.5566 53.2773 35.9478 53.2773Z" fill="#006D92"/>
<g clip-path="url(#clip1_17199_45631)">
<path opacity="0.16" d="M32.9939 69.5033H53.6462C54.8199 69.5033 55.9456 69.0371 56.7755 68.2071C57.6055 67.3772 58.0717 66.2516 58.0717 65.0778V44.4255C58.0717 43.2518 57.6055 42.1261 56.7755 41.2962C55.9456 40.4663 54.8199 40 53.6462 40H32.9939C31.8201 40 30.6945 40.4663 29.8646 41.2962C29.0346 42.1261 28.5684 43.2518 28.5684 44.4255V65.0778C28.5684 66.2516 29.0346 67.3772 29.8646 68.2071C30.6945 69.0371 31.8201 69.5033 32.9939 69.5033Z" fill="#006D92"/>
<path d="M35.9439 53.2773H50.6956C51.0868 53.2773 51.462 53.4328 51.7387 53.7094C52.0153 53.9861 52.1708 54.3613 52.1708 54.7525C52.1708 55.1437 52.0153 55.519 51.7387 55.7956C51.462 56.0723 51.0868 56.2277 50.6956 56.2277H35.9439C35.5527 56.2277 35.1775 56.0723 34.9008 55.7956C34.6242 55.519 34.4688 55.1437 34.4688 54.7525C34.4688 54.3613 34.6242 53.9861 34.9008 53.7094C35.1775 53.4328 35.5527 53.2773 35.9439 53.2773Z" fill="#006D92"/>
<path opacity="0.16" d="M89.0505 40H68.3982C67.2244 40 66.0988 40.4663 65.2689 41.2962C64.4389 42.1261 63.9727 43.2518 63.9727 44.4255V65.0778C63.9727 66.2516 64.4389 67.3772 65.2689 68.2071C66.0988 69.0371 67.2244 69.5033 68.3982 69.5033H89.0505C90.2242 69.5033 91.3499 69.0371 92.1798 68.2071C93.0097 67.3772 93.476 66.2516 93.476 65.0778V44.4255C93.476 43.2518 93.0097 42.1261 92.1798 41.2962C91.3499 40.4663 90.2242 40 89.0505 40Z" fill="#006D92"/>
<path d="M86.1018 56.2266H80.2012V62.1272C80.2012 62.5185 80.0458 62.8937 79.7691 63.1703C79.4925 63.447 79.1172 63.6024 78.726 63.6024C78.3348 63.6024 77.9596 63.447 77.6829 63.1703C77.4063 62.8937 77.2508 62.5185 77.2508 62.1272V56.2266H71.3502C70.9589 56.2266 70.5837 56.0711 70.3071 55.7945C70.0304 55.5178 69.875 55.1426 69.875 54.7514C69.875 54.3602 70.0304 53.9849 70.3071 53.7083C70.5837 53.4316 70.9589 53.2762 71.3502 53.2762H77.2508V47.3756C77.2508 46.9843 77.4063 46.6091 77.6829 46.3325C77.9596 46.0558 78.3348 45.9004 78.726 45.9004C79.1172 45.9004 79.4925 46.0558 79.7691 46.3325C80.0458 46.6091 80.2012 46.9843 80.2012 47.3756V53.2762H86.1018C86.4931 53.2762 86.8683 53.4316 87.1449 53.7083C87.4216 53.9849 87.577 54.3602 87.577 54.7514C87.577 55.1426 87.4216 55.5178 87.1449 55.7945C86.8683 56.0711 86.4931 56.2266 86.1018 56.2266Z" fill="#006D92"/>
<path opacity="0.16" d="M53.6482 104.908C54.8219 104.908 55.9475 104.441 56.7775 103.611C57.6074 102.781 58.0737 101.656 58.0737 100.482V79.8298C58.0737 78.6561 57.6074 77.5304 56.7775 76.7005C55.9475 75.8706 54.8219 75.4043 53.6482 75.4043H32.9958C31.8221 75.4043 30.6965 75.8706 29.8665 76.7005C29.0366 77.5304 28.5703 78.6561 28.5703 79.8298V100.482C28.5703 101.656 29.0366 102.781 29.8665 103.611C30.6965 104.441 31.8221 104.908 32.9958 104.908H53.6482Z" fill="#006D92"/>
<path d="M86.0999 56.2266H80.1992V62.1272C80.1992 62.5185 80.0438 62.8937 79.7672 63.1703C79.4905 63.447 79.1153 63.6024 78.7241 63.6024C78.3328 63.6024 77.9576 63.447 77.6809 63.1703C77.4043 62.8937 77.2489 62.5185 77.2489 62.1272V56.2266H71.3482C70.957 56.2266 70.5818 56.0711 70.3051 55.7945C70.0285 55.5178 69.873 55.1426 69.873 54.7514C69.873 54.3602 70.0285 53.9849 70.3051 53.7083C70.5818 53.4316 70.957 53.2762 71.3482 53.2762H77.2489V47.3756C77.2489 46.9843 77.4043 46.6091 77.6809 46.3325C77.9576 46.0558 78.3328 45.9004 78.7241 45.9004C79.1153 45.9004 79.4905 46.0558 79.7672 46.3325C80.0438 46.6091 80.1992 46.9843 80.1992 47.3756V53.2762H86.0999C86.4911 53.2762 86.8663 53.4316 87.143 53.7083C87.4196 53.9849 87.5751 54.3602 87.5751 54.7514C87.5751 55.1426 87.4196 55.5178 87.143 55.7945C86.8663 56.0711 86.4911 56.2266 86.0999 56.2266Z" fill="#006D92"/>
<path opacity="0.16" d="M53.6462 104.908C54.8199 104.908 55.9456 104.441 56.7755 103.611C57.6055 102.781 58.0717 101.656 58.0717 100.482V79.8298C58.0717 78.6561 57.6055 77.5304 56.7755 76.7005C55.9456 75.8706 54.8199 75.4043 53.6462 75.4043H32.9939C31.8201 75.4043 30.6945 75.8706 29.8646 76.7005C29.0346 77.5304 28.5684 78.6561 28.5684 79.8298V100.482C28.5684 101.656 29.0346 102.781 29.8646 103.611C30.6945 104.441 31.8201 104.908 32.9939 104.908H53.6462Z" fill="#006D92"/>
<path d="M37.0657 85.9816C36.824 85.6994 36.6977 85.3364 36.7121 84.9651C36.7264 84.5938 36.8803 84.2417 37.143 83.9789C37.4058 83.7162 37.7579 83.5623 38.1292 83.548C38.5005 83.5336 38.8635 83.6599 39.1457 83.9016L43.3204 88.0763L47.4951 83.9016C47.7773 83.6599 48.1403 83.5336 48.5116 83.548C48.8829 83.5623 49.235 83.7162 49.4978 83.9789C49.7605 84.2417 49.9144 84.5938 49.9287 84.9651C49.9431 85.3364 49.8168 85.6994 49.5751 85.9816L45.4004 90.1563L49.5751 94.331C49.8499 94.6074 50.0041 94.9813 50.0041 95.371C50.0041 95.7607 49.8499 96.1346 49.5751 96.411C49.2987 96.6858 48.9248 96.84 48.5351 96.84C48.1454 96.84 47.7715 96.6858 47.4951 96.411L43.3204 92.2363L39.1457 96.411C38.8693 96.6858 38.4954 96.84 38.1057 96.84C37.716 96.84 37.3421 96.6858 37.0657 96.411C36.7909 96.1346 36.6367 95.7607 36.6367 95.371C36.6367 94.9813 36.7909 94.6074 37.0657 94.331L41.2404 90.1563L37.0657 85.9816Z" fill="#006D92"/>
<path opacity="0.16" d="M89.0505 75.4043H68.3982C67.2244 75.4043 66.0988 75.8706 65.2689 76.7005C64.4389 77.5304 63.9727 78.6561 63.9727 79.8298V100.482C63.9727 101.656 64.4389 102.781 65.2689 103.611C66.0988 104.441 67.2244 104.908 68.3982 104.908H89.0505C90.2242 104.908 91.3499 104.441 92.1798 103.611C93.0097 102.781 93.476 101.656 93.476 100.482V79.8298C93.476 78.6561 93.0097 77.5304 92.1798 76.7005C91.3499 75.8706 90.2242 75.4043 89.0505 75.4043Z" fill="#006D92"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M71.3502 91.6303H86.1018C86.4931 91.6303 86.8683 91.4749 87.1449 91.1982C87.4216 90.9216 87.577 90.5464 87.577 90.1551C87.577 89.7639 87.4216 89.3887 87.1449 89.112C86.8683 88.8354 86.4931 88.68 86.1018 88.68H71.3502C70.9589 88.68 70.5837 88.8354 70.3071 89.112C70.0304 89.3887 69.875 89.7639 69.875 90.1551C69.875 90.5464 70.0304 90.9216 70.3071 91.1982C70.5837 91.4749 70.9589 91.6303 71.3502 91.6303Z" fill="#006D92"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M79.5456 83.0279C79.303 82.8658 79.0178 82.7793 78.726 82.7793C78.3348 82.7793 77.9596 82.9347 77.6829 83.2114C77.4063 83.488 77.2508 83.8632 77.2508 84.2545C77.2508 84.5462 77.3374 84.8314 77.4994 85.074C77.6615 85.3166 77.8919 85.5057 78.1615 85.6173C78.431 85.729 78.7276 85.7582 79.0138 85.7013C79.3 85.6444 79.5628 85.5039 79.7691 85.2976C79.9754 85.0913 80.1159 84.8284 80.1728 84.5423C80.2297 84.2561 80.2005 83.9595 80.0889 83.6899C79.9772 83.4204 79.7882 83.19 79.5456 83.0279Z" fill="#006D92"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M77.6829 97.0989C77.9596 97.3756 78.3348 97.531 78.726 97.531C79.1172 97.531 79.4925 97.3756 79.7691 97.0989C80.0458 96.8223 80.2012 96.447 80.2012 96.0558C80.2012 95.6646 80.0458 95.2894 79.7691 95.0127C79.4925 94.7361 79.1172 94.5806 78.726 94.5806C78.3348 94.5806 77.9596 94.7361 77.6829 95.0127C77.4063 95.2894 77.2508 95.6646 77.2508 96.0558C77.2508 96.447 77.4063 96.8223 77.6829 97.0989Z" fill="#006D92"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M71.3482 91.6303H86.0999C86.4911 91.6303 86.8663 91.4749 87.143 91.1982C87.4196 90.9216 87.5751 90.5464 87.5751 90.1551C87.5751 89.7639 87.4196 89.3887 87.143 89.112C86.8663 88.8354 86.4911 88.68 86.0999 88.68H71.3482C70.957 88.68 70.5818 88.8354 70.3051 89.112C70.0285 89.3887 69.873 89.7639 69.873 90.1551C69.873 90.5464 70.0285 90.9216 70.3051 91.1982C70.5818 91.4749 70.957 91.6303 71.3482 91.6303Z" fill="#006D92"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M79.5436 83.0279C79.301 82.8658 79.0158 82.7793 78.7241 82.7793C78.3328 82.7793 77.9576 82.9347 77.6809 83.2114C77.4043 83.488 77.2489 83.8632 77.2489 84.2545C77.2489 84.5462 77.3354 84.8314 77.4975 85.074C77.6596 85.3166 77.89 85.5057 78.1595 85.6173C78.4291 85.729 78.7257 85.7582 79.0118 85.7013C79.298 85.6444 79.5608 85.5039 79.7672 85.2976C79.9735 85.0913 80.114 84.8284 80.1709 84.5423C80.2278 84.2561 80.1986 83.9595 80.0869 83.6899C79.9753 83.4204 79.7862 83.19 79.5436 83.0279Z" fill="#006D92"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M77.6809 97.0989C77.9576 97.3756 78.3328 97.531 78.7241 97.531C79.1153 97.531 79.4905 97.3756 79.7672 97.0989C80.0438 96.8223 80.1992 96.447 80.1992 96.0558C80.1992 95.6646 80.0438 95.2894 79.7672 95.0127C79.4905 94.7361 79.1153 94.5806 78.7241 94.5806C78.3328 94.5806 77.9576 94.7361 77.6809 95.0127C77.4043 95.2894 77.2489 95.6646 77.2489 96.0558C77.2489 96.447 77.4043 96.8223 77.6809 97.0989Z" fill="#006D92"/>
</g>
<rect x="141.727" y="15.6602" width="113.588" height="113.588" rx="10" fill="white"/>
<rect x="142.227" y="16.1602" width="112.588" height="112.588" rx="9.5" stroke="black" stroke-opacity="0.05"/>
<g clip-path="url(#clip2_17521_103112)">
<rect opacity="0.16" x="166.062" y="40" width="64.9074" height="64.9074" rx="32.4537" fill="#006D92"/>
<path d="M185.896 65.2422L178.684 72.4541L185.896 79.6661" stroke="#006D92" stroke-width="3.60596" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M211.137 65.2422L218.349 72.4541L211.137 79.6661" stroke="#006D92" stroke-width="3.60596" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M202.122 58.0293L194.91 86.877" stroke="#006D92" stroke-width="3.60596" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="141.729" y="15.6602" width="113.588" height="113.588" rx="10" fill="white"/>
<rect x="142.229" y="16.1602" width="112.588" height="112.588" rx="9.5" stroke="black" stroke-opacity="0.05"/>
<g clip-path="url(#clip2_17199_45631)">
<rect opacity="0.16" x="166.066" y="40" width="64.9074" height="64.9074" rx="32.4537" fill="#006D92"/>
<path d="M185.899 65.2422L178.688 72.4541L185.899 79.6661" stroke="#006D92" stroke-width="3.60596" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M211.141 65.2422L218.353 72.4541L211.141 79.6661" stroke="#006D92" stroke-width="3.60596" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M202.126 58.0293L194.914 86.877" stroke="#006D92" stroke-width="3.60596" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<rect x="279.227" y="15.6602" width="113.588" height="113.588" rx="10" fill="white"/>
<rect x="279.727" y="16.1602" width="112.588" height="112.588" rx="9.5" stroke="black" stroke-opacity="0.05"/>
<path opacity="0.16" d="M351.257 47.6641C351.121 48.1923 351.049 48.7461 351.049 49.3168C351.049 52.9679 354.009 55.9277 357.66 55.9277C358.23 55.9277 358.784 55.8555 359.312 55.7195V89.1906C358.784 89.0547 358.23 88.9824 357.66 88.9824C354.009 88.9824 351.049 91.9422 351.049 95.5933C351.049 96.164 351.121 96.7178 351.257 97.2461H317.786C317.922 96.7178 317.994 96.164 317.994 95.5933C317.994 91.9422 315.034 88.9824 311.383 88.9824C310.813 88.9824 310.259 89.0547 309.73 89.1906V55.7195C310.259 55.8555 310.813 55.9277 311.383 55.9277C315.034 55.9277 317.994 52.9679 317.994 49.3168C317.994 48.7461 317.922 48.1923 317.786 47.6641H351.257Z" fill="#006D92"/>
<path opacity="0.4" d="M351.102 94.767C351.068 95.0378 351.049 95.3134 351.049 95.5933C351.049 96.164 351.121 96.7178 351.257 97.2461H317.786C317.922 96.7178 317.994 96.164 317.994 95.5933C317.994 95.3134 317.975 95.0378 317.941 94.767H351.102ZM309.73 55.7195C310.259 55.8555 310.813 55.9277 311.383 55.9277C311.663 55.9277 311.939 55.9082 312.21 55.8745V89.0341C311.939 89.0003 311.663 88.9824 311.383 88.9824C310.813 88.9824 310.259 89.0547 309.73 89.1906V55.7195ZM359.312 89.1906C358.784 89.0547 358.23 88.9824 357.66 88.9824C357.38 88.9824 357.104 89.0003 356.833 89.0341V55.8745C357.104 55.9082 357.38 55.9277 357.66 55.9277C358.23 55.9277 358.784 55.8555 359.312 55.7195V89.1906ZM351.257 47.6641C351.121 48.1923 351.049 48.7461 351.049 49.3168C351.049 49.5967 351.068 49.8724 351.102 50.1432H317.941C317.975 49.8724 317.994 49.5967 317.994 49.3168C317.994 48.7461 317.922 48.1923 317.786 47.6641H351.257Z" fill="#006D92"/>
<path d="M362.62 49.3156C362.62 46.5773 360.4 44.3574 357.661 44.3574C354.923 44.3574 352.703 46.5773 352.703 49.3156C352.703 52.054 354.923 54.2738 357.661 54.2738C360.4 54.2738 362.62 52.054 362.62 49.3156Z" fill="#006D92"/>
<path d="M362.62 95.593C362.62 92.8546 360.4 90.6348 357.661 90.6348C354.923 90.6348 352.703 92.8546 352.703 95.593C352.703 98.3313 354.923 100.551 357.661 100.551C360.4 100.551 362.62 98.3313 362.62 95.593Z" fill="#006D92"/>
<path d="M316.342 95.593C316.342 92.8546 314.122 90.6348 311.384 90.6348C308.646 90.6348 306.426 92.8546 306.426 95.593C306.426 98.3313 308.646 100.551 311.384 100.551C314.122 100.551 316.342 98.3313 316.342 95.593Z" fill="#006D92"/>
<path d="M316.342 49.3156C316.342 46.5773 314.122 44.3574 311.384 44.3574C308.646 44.3574 306.426 46.5773 306.426 49.3156C306.426 52.054 308.646 54.2738 311.384 54.2738C314.122 54.2738 316.342 52.054 316.342 49.3156Z" fill="#006D92"/>
<rect x="279" y="147.184" width="113.588" height="113.588" rx="10" fill="white"/>
<rect x="279.5" y="147.684" width="112.588" height="112.588" rx="9.5" stroke="black" stroke-opacity="0.05"/>
<g clip-path="url(#clip3_17521_103112)">
<rect x="323.465" y="174.281" width="26.4437" height="19.8328" rx="1.65273" fill="#006D92"/>
<path opacity="0.16" fill-rule="evenodd" clip-rule="evenodd" d="M336.436 194.32C336.667 194.32 336.899 194.375 337.108 194.485C337.192 194.529 337.273 194.583 337.349 194.645C337.386 194.675 337.423 194.709 337.458 194.744L342.416 199.702C342.981 200.267 342.98 201.182 342.416 201.747C341.851 202.312 340.936 202.312 340.371 201.747L337.935 199.311C338.193 203.768 339.376 206.457 340.88 208.173C342.599 210.134 344.931 211.051 347.526 211.694C348.858 212.025 350.097 212.249 351.437 212.547C352.714 212.831 354.015 213.171 355.169 213.702C356.34 214.241 357.424 215.007 358.202 216.178C358.982 217.352 359.367 218.802 359.367 220.558C359.367 221.356 358.719 222.003 357.921 222.003C357.122 222.003 356.475 221.356 356.475 220.558C356.475 219.231 356.188 218.373 355.793 217.778C355.396 217.181 354.802 216.717 353.959 216.329C353.099 215.933 352.049 215.646 350.809 215.37C349.631 215.108 348.183 214.838 346.83 214.502C344.054 213.813 341.014 212.713 338.705 210.079C338.416 209.749 338.141 209.399 337.882 209.026V227.168C337.882 227.966 337.234 228.614 336.436 228.614C335.637 228.614 334.989 227.967 334.989 227.168V209.026C334.73 209.399 334.455 209.749 334.166 210.079C331.857 212.713 328.817 213.813 326.041 214.502C324.688 214.838 323.24 215.108 322.062 215.37C320.822 215.646 319.772 215.933 318.912 216.329C318.069 216.717 317.475 217.181 317.078 217.778C316.683 218.373 316.397 219.231 316.396 220.558C316.396 221.356 315.749 222.003 314.95 222.003C314.152 222.003 313.504 221.356 313.504 220.558C313.504 218.802 313.889 217.352 314.669 216.178C315.447 215.007 316.531 214.241 317.702 213.702C318.856 213.171 320.157 212.831 321.435 212.547C322.774 212.249 324.013 212.025 325.345 211.694C327.94 211.051 330.272 210.134 331.991 208.173C333.495 206.457 334.677 203.767 334.936 199.311L332.5 201.747C331.935 202.312 331.02 202.311 330.455 201.747C329.89 201.182 329.89 200.267 330.455 199.702L335.413 194.744C335.695 194.462 336.066 194.32 336.436 194.32Z" fill="#006D92"/>
<path d="M334.825 217.714C335.44 217.098 336.438 217.098 337.054 217.714L343.741 224.401C344.357 225.017 344.357 226.015 343.741 226.63L337.054 233.318C336.438 233.933 335.44 233.933 334.825 233.318L328.137 226.63C327.522 226.015 327.522 225.017 328.137 224.401L334.825 217.714Z" fill="#006D92"/>
<path d="M313.337 217.714C313.952 217.098 314.95 217.098 315.566 217.714L322.253 224.401C322.869 225.017 322.869 226.015 322.253 226.63L315.566 233.318C314.95 233.933 313.952 233.933 313.337 233.318L306.649 226.63C306.034 226.015 306.034 225.017 306.649 224.401L313.337 217.714Z" fill="#006D92"/>
<path d="M356.309 217.714C356.925 217.098 357.923 217.098 358.538 217.714L365.226 224.401C365.841 225.017 365.841 226.015 365.226 226.63L358.538 233.318C357.923 233.933 356.925 233.933 356.309 233.318L349.622 226.63C349.006 226.015 349.006 225.017 349.622 224.401L356.309 217.714Z" fill="#006D92"/>
<rect x="279.229" y="15.6602" width="113.588" height="113.588" rx="10" fill="white"/>
<rect x="279.729" y="16.1602" width="112.588" height="112.588" rx="9.5" stroke="black" stroke-opacity="0.05"/>
<path opacity="0.16" d="M351.263 47.6641C351.127 48.1923 351.055 48.7461 351.055 49.3168C351.055 52.9679 354.014 55.9277 357.666 55.9277C358.236 55.9277 358.79 55.8555 359.318 55.7195V89.1906C358.79 89.0547 358.236 88.9824 357.666 88.9824C354.014 88.9824 351.055 91.9422 351.055 95.5933C351.055 96.164 351.127 96.7178 351.263 97.2461H317.792C317.928 96.7178 318 96.164 318 95.5933C318 91.9422 315.04 88.9824 311.389 88.9824C310.818 88.9824 310.265 89.0547 309.736 89.1906V55.7195C310.265 55.8555 310.818 55.9277 311.389 55.9277C315.04 55.9277 318 52.9679 318 49.3168C318 48.7461 317.928 48.1923 317.792 47.6641H351.263Z" fill="#006D92"/>
<path opacity="0.4" d="M351.108 94.767C351.074 95.0378 351.055 95.3134 351.055 95.5933C351.055 96.164 351.127 96.7178 351.263 97.2461H317.792C317.928 96.7178 318 96.164 318 95.5933C318 95.3134 317.981 95.0378 317.947 94.767H351.108ZM309.736 55.7195C310.265 55.8555 310.818 55.9277 311.389 55.9277C311.669 55.9277 311.945 55.9082 312.215 55.8745V89.0341C311.945 89.0003 311.669 88.9824 311.389 88.9824C310.818 88.9824 310.265 89.0547 309.736 89.1906V55.7195ZM359.318 89.1906C358.79 89.0547 358.236 88.9824 357.666 88.9824C357.386 88.9824 357.11 89.0003 356.839 89.0341V55.8745C357.11 55.9082 357.386 55.9277 357.666 55.9277C358.236 55.9277 358.79 55.8555 359.318 55.7195V89.1906ZM351.263 47.6641C351.127 48.1923 351.055 48.7461 351.055 49.3168C351.055 49.5967 351.074 49.8724 351.108 50.1432H317.947C317.981 49.8724 318 49.5967 318 49.3168C318 48.7461 317.928 48.1923 317.792 47.6641H351.263Z" fill="#006D92"/>
<path d="M362.623 49.3156C362.623 46.5773 360.404 44.3574 357.665 44.3574C354.927 44.3574 352.707 46.5773 352.707 49.3156C352.707 52.054 354.927 54.2738 357.665 54.2738C360.404 54.2738 362.623 52.054 362.623 49.3156Z" fill="#006D92"/>
<path d="M362.623 95.593C362.623 92.8546 360.404 90.6348 357.665 90.6348C354.927 90.6348 352.707 92.8546 352.707 95.593C352.707 98.3313 354.927 100.551 357.665 100.551C360.404 100.551 362.623 98.3313 362.623 95.593Z" fill="#006D92"/>
<path d="M316.346 95.593C316.346 92.8546 314.126 90.6348 311.388 90.6348C308.65 90.6348 306.43 92.8546 306.43 95.593C306.43 98.3313 308.65 100.551 311.388 100.551C314.126 100.551 316.346 98.3313 316.346 95.593Z" fill="#006D92"/>
<path d="M316.346 49.3156C316.346 46.5773 314.126 44.3574 311.388 44.3574C308.65 44.3574 306.43 46.5773 306.43 49.3156C306.43 52.054 308.65 54.2738 311.388 54.2738C314.126 54.2738 316.346 52.054 316.346 49.3156Z" fill="#006D92"/>
<rect x="279.002" y="147.184" width="113.588" height="113.588" rx="10" fill="white"/>
<rect x="279.502" y="147.684" width="112.588" height="112.588" rx="9.5" stroke="black" stroke-opacity="0.05"/>
<g clip-path="url(#clip3_17199_45631)">
<rect x="323.469" y="174.281" width="26.4437" height="19.8328" rx="1.65273" fill="#006D92"/>
<path opacity="0.16" fill-rule="evenodd" clip-rule="evenodd" d="M336.441 194.32C336.673 194.32 336.904 194.375 337.114 194.485C337.198 194.529 337.279 194.583 337.354 194.645C337.392 194.675 337.429 194.709 337.464 194.744L342.422 199.702C342.986 200.267 342.986 201.182 342.422 201.747C341.857 202.312 340.942 202.312 340.377 201.747L337.94 199.311C338.199 203.768 339.382 206.457 340.886 208.173C342.605 210.134 344.937 211.051 347.532 211.694C348.864 212.025 350.102 212.249 351.442 212.547C352.72 212.831 354.021 213.171 355.175 213.702C356.345 214.241 357.43 215.007 358.208 216.178C358.988 217.352 359.373 218.802 359.373 220.558C359.373 221.356 358.725 222.003 357.927 222.003C357.128 222.003 356.481 221.356 356.48 220.558C356.48 219.231 356.194 218.373 355.799 217.778C355.402 217.181 354.808 216.717 353.965 216.329C353.105 215.933 352.055 215.646 350.814 215.37C349.637 215.108 348.189 214.838 346.836 214.502C344.06 213.813 341.02 212.713 338.711 210.079C338.422 209.749 338.147 209.399 337.888 209.026V227.168C337.888 227.966 337.24 228.614 336.441 228.614C335.643 228.614 334.995 227.967 334.995 227.168V209.026C334.736 209.399 334.461 209.749 334.172 210.079C331.863 212.713 328.823 213.813 326.047 214.502C324.694 214.838 323.246 215.108 322.068 215.37C320.828 215.646 319.778 215.933 318.918 216.329C318.075 216.717 317.481 217.181 317.084 217.778C316.689 218.373 316.402 219.231 316.402 220.558C316.402 221.356 315.754 222.003 314.956 222.003C314.158 222.003 313.51 221.356 313.51 220.558C313.51 218.802 313.895 217.352 314.675 216.178C315.453 215.007 316.537 214.241 317.708 213.702C318.862 213.171 320.163 212.831 321.44 212.547C322.78 212.249 324.019 212.025 325.351 211.694C327.945 211.051 330.278 210.134 331.997 208.173C333.501 206.457 334.683 203.767 334.941 199.311L332.506 201.747C331.941 202.312 331.026 202.311 330.461 201.747C329.896 201.182 329.896 200.267 330.461 199.702L335.419 194.744C335.701 194.462 336.071 194.32 336.441 194.32Z" fill="#006D92"/>
<path d="M334.827 217.714C335.442 217.098 336.44 217.098 337.056 217.714L343.743 224.401C344.359 225.017 344.359 226.015 343.743 226.63L337.056 233.318C336.44 233.933 335.442 233.933 334.827 233.318L328.139 226.63C327.524 226.015 327.524 225.017 328.139 224.401L334.827 217.714Z" fill="#006D92"/>
<path d="M313.342 217.714C313.958 217.098 314.956 217.098 315.572 217.714L322.259 224.401C322.875 225.017 322.875 226.015 322.259 226.63L315.572 233.318C314.956 233.933 313.958 233.933 313.342 233.318L306.655 226.63C306.039 226.015 306.039 225.017 306.655 224.401L313.342 217.714Z" fill="#006D92"/>
<path d="M356.313 217.714C356.929 217.098 357.927 217.098 358.542 217.714L365.23 224.401C365.845 225.017 365.845 226.015 365.23 226.63L358.542 233.318C357.927 233.933 356.929 233.933 356.313 233.318L349.626 226.63C349.01 226.015 349.01 225.017 349.626 224.401L356.313 217.714Z" fill="#006D92"/>
</g>
<rect x="4" y="147.184" width="113.588" height="113.588" rx="10" fill="white"/>
<rect x="4.5" y="147.684" width="112.588" height="112.588" rx="9.5" stroke="black" stroke-opacity="0.05"/>
<g clip-path="url(#clip4_17521_103112)">
<path opacity="0.16" d="M57.1005 184.74L40.6602 201.181" stroke="#006D92" stroke-width="3.65341" stroke-linecap="round"/>
<path opacity="0.16" d="M64.4073 184.74L80.8477 201.181" stroke="#006D92" stroke-width="3.65341" stroke-linecap="round"/>
<g clip-path="url(#clip4_17199_45631)">
<path opacity="0.16" d="M57.1025 184.74L40.6621 201.181" stroke="#006D92" stroke-width="3.65341" stroke-linecap="round"/>
<path opacity="0.16" d="M64.4093 184.74L80.8496 201.181" stroke="#006D92" stroke-width="3.65341" stroke-linecap="round"/>
<path d="M36.0149 196.211C36.6953 195.531 37.7983 195.531 38.4787 196.211L45.8701 203.603C46.5504 204.283 46.5504 205.386 45.8701 206.067L38.4787 213.458C37.7983 214.138 36.6953 214.138 36.0149 213.458L28.6235 206.067C27.9432 205.386 27.9432 204.283 28.6235 203.603L36.0149 196.211Z" fill="#006D92"/>
<path d="M83.511 196.211C84.1914 195.531 85.2944 195.531 85.9748 196.211L93.3662 203.603C94.0465 204.283 94.0465 205.386 93.3662 206.067L85.9748 213.458C85.2944 214.138 84.1914 214.138 83.511 213.458L76.1196 206.067C75.4393 205.386 75.4393 204.283 76.1196 203.603L83.511 196.211Z" fill="#006D92"/>
<path d="M59.761 172.463C60.4414 171.783 61.5444 171.783 62.2248 172.463L69.6162 179.855C70.2965 180.535 70.2965 181.638 69.6162 182.319L62.2248 189.71C61.5444 190.39 60.4414 190.39 59.761 189.71L52.3696 182.319C51.6893 181.638 51.6893 180.535 52.3696 179.855L59.761 172.463Z" fill="#006D92"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M62.3369 208.605C62.7022 208.605 63.0677 208.85 63.1895 209.215L63.7373 210.858C63.7982 211.163 64.0422 211.407 64.3467 211.468C65.1988 211.711 65.9902 212.015 66.7207 212.441C66.9643 212.563 67.3297 212.563 67.5732 212.441L69.0957 211.711C69.461 211.528 69.8264 211.589 70.1309 211.894L72.2012 213.964C72.5056 214.207 72.5664 214.634 72.3838 214.999L71.6533 216.521C71.4706 216.826 71.5315 217.13 71.6533 217.374C72.0794 218.104 72.3834 218.896 72.627 219.748C72.7487 220.052 72.9319 220.236 73.2363 220.357L74.8799 220.905C75.2452 221.027 75.4892 221.393 75.4893 221.758V224.681C75.4892 225.046 75.2452 225.411 74.8799 225.533L73.2363 226.081C72.9319 226.142 72.6878 226.386 72.627 226.69C72.3835 227.543 72.0794 228.334 71.6533 229.064C71.5315 229.308 71.5316 229.673 71.6533 229.917L72.3232 231.439C72.5058 231.805 72.4449 232.17 72.1406 232.475L70.0703 234.545C69.8268 234.849 69.4004 234.91 69.0352 234.728L67.5127 233.997C67.2082 233.814 66.9037 233.875 66.6602 233.997C65.9295 234.423 65.1376 234.727 64.2852 234.971C63.9807 235.092 63.7985 235.276 63.6768 235.58L63.1289 237.224C63.0072 237.589 62.6416 237.833 62.2764 237.833H59.3535C58.9882 237.833 58.6228 237.589 58.501 237.224L57.9531 235.58C57.8922 235.276 57.6482 235.032 57.3438 234.971C56.4914 234.727 55.6994 234.423 54.9688 233.997C54.7253 233.875 54.3607 233.875 54.1172 233.997L52.5947 234.728C52.2294 234.91 51.864 234.849 51.5596 234.545L49.4893 232.475C49.1848 232.231 49.124 231.805 49.3066 231.439L50.0977 229.917C50.2803 229.613 50.2194 229.308 50.0977 229.064C49.6716 228.334 49.3675 227.543 49.124 226.69C49.0022 226.386 48.8191 226.203 48.5146 226.081L46.8711 225.533C46.5058 225.411 46.2617 225.046 46.2617 224.681V221.758C46.2618 221.393 46.5058 221.027 46.8711 220.905L48.5146 220.357C48.8191 220.297 49.0631 220.052 49.124 219.748C49.3675 218.896 49.6716 218.104 50.0977 217.374C50.2194 217.13 50.2194 216.765 50.0977 216.521L49.3066 214.999C49.1849 214.634 49.2457 214.208 49.4893 213.903L51.5596 211.833C51.864 211.589 52.29 211.529 52.6553 211.65L54.1777 212.441C54.4822 212.624 54.7867 212.563 55.0303 212.441C55.7607 212.015 56.5521 211.711 57.4043 211.468C57.7087 211.346 57.8919 211.163 58.0137 210.858L58.5615 209.215C58.6833 208.85 59.0488 208.606 59.4141 208.605H62.3369ZM64.2744 231.303H64.2754H64.2744ZM60.876 215.912C56.8405 215.912 53.5684 219.184 53.5684 223.22C53.5686 227.255 56.8407 230.526 60.876 230.526C64.9111 230.526 68.1824 227.255 68.1826 223.22C68.1826 219.184 64.9112 215.912 60.876 215.912Z" fill="#006D92"/>
<path d="M83.5091 196.211C84.1894 195.531 85.2925 195.531 85.9728 196.211L93.3642 203.603C94.0446 204.283 94.0446 205.386 93.3642 206.067L85.9728 213.458C85.2925 214.138 84.1894 214.138 83.5091 213.458L76.1177 206.067C75.4373 205.386 75.4373 204.283 76.1177 203.603L83.5091 196.211Z" fill="#006D92"/>
<path d="M59.763 172.463C60.4433 171.783 61.5464 171.783 62.2268 172.463L69.6181 179.855C70.2985 180.535 70.2985 181.638 69.6181 182.319L62.2268 189.71C61.5464 190.39 60.4433 190.39 59.763 189.71L52.3716 182.319C51.6912 181.638 51.6912 180.535 52.3716 179.855L59.763 172.463Z" fill="#006D92"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M62.3369 208.605C62.7022 208.605 63.0677 208.85 63.1895 209.215L63.7373 210.858C63.7982 211.163 64.0422 211.407 64.3467 211.468C65.1988 211.711 65.9902 212.015 66.7207 212.441C66.9643 212.563 67.3297 212.563 67.5732 212.441L69.0957 211.711C69.461 211.528 69.8264 211.589 70.1309 211.894L72.2012 213.964C72.5056 214.207 72.5664 214.634 72.3838 214.999L71.6533 216.521C71.4706 216.826 71.5315 217.13 71.6533 217.374C72.0794 218.104 72.3834 218.896 72.627 219.748C72.7487 220.052 72.9319 220.236 73.2363 220.357L74.8799 220.905C75.2452 221.027 75.4892 221.393 75.4893 221.758V224.681C75.4892 225.046 75.2452 225.411 74.8799 225.533L73.2363 226.081C72.9319 226.142 72.6878 226.386 72.627 226.69C72.3835 227.543 72.0794 228.334 71.6533 229.064C71.5316 229.308 71.5316 229.673 71.6533 229.917L72.3232 231.439C72.5058 231.805 72.4449 232.17 72.1406 232.475L70.0703 234.545C69.8268 234.849 69.4004 234.91 69.0352 234.728L67.5127 233.997C67.2082 233.814 66.9037 233.875 66.6602 233.997C65.9295 234.423 65.1376 234.727 64.2852 234.971C63.9807 235.092 63.7985 235.276 63.6768 235.58L63.1289 237.224C63.0072 237.589 62.6416 237.833 62.2764 237.833H59.3535C58.9882 237.833 58.6228 237.589 58.501 237.224L57.9531 235.58C57.8922 235.276 57.6482 235.032 57.3438 234.971C56.4914 234.727 55.6994 234.423 54.9688 233.997C54.7253 233.875 54.3607 233.875 54.1172 233.997L52.5947 234.728C52.2295 234.91 51.864 234.849 51.5596 234.545L49.4893 232.475C49.1848 232.231 49.124 231.805 49.3066 231.439L50.0977 229.917C50.2803 229.613 50.2194 229.308 50.0977 229.064C49.6716 228.334 49.3675 227.543 49.124 226.69C49.0022 226.386 48.8191 226.203 48.5146 226.081L46.8711 225.533C46.5058 225.411 46.2617 225.046 46.2617 224.681V221.758C46.2618 221.393 46.5058 221.027 46.8711 220.905L48.5146 220.357C48.8191 220.297 49.0631 220.052 49.124 219.748C49.3675 218.896 49.6716 218.104 50.0977 217.374C50.2194 217.13 50.2194 216.765 50.0977 216.521L49.3066 214.999C49.1849 214.634 49.2457 214.208 49.4893 213.903L51.5596 211.833C51.864 211.589 52.29 211.529 52.6553 211.65L54.1777 212.441C54.4822 212.624 54.7867 212.563 55.0303 212.441C55.7607 212.015 56.5521 211.711 57.4043 211.468C57.7087 211.346 57.8919 211.163 58.0137 210.858L58.5615 209.215C58.6833 208.85 59.0488 208.606 59.4141 208.605H62.3369ZM60.876 215.912C56.8405 215.912 53.5684 219.184 53.5684 223.22C53.5686 227.255 56.8407 230.526 60.876 230.526C64.9111 230.526 68.1824 227.255 68.1826 223.22C68.1826 219.184 64.9112 215.912 60.876 215.912Z" fill="#006D92"/>
</g>
<rect x="141.5" y="147.184" width="113.588" height="113.588" rx="10" fill="white"/>
<rect x="142" y="147.684" width="112.588" height="112.588" rx="9.5" stroke="black" stroke-opacity="0.05"/>
<g clip-path="url(#clip5_17521_103112)">
<g clip-path="url(#clip5_17199_45631)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M199.251 189.758C199.616 189.758 199.982 190.002 200.104 190.367L200.651 192.011C200.712 192.315 200.956 192.559 201.261 192.62C202.113 192.864 202.904 193.168 203.635 193.594C203.878 193.716 204.244 193.715 204.487 193.594L206.01 192.863C206.375 192.681 206.74 192.741 207.045 193.046L209.115 195.116C209.42 195.36 209.481 195.786 209.298 196.151L208.567 197.674C208.385 197.978 208.446 198.283 208.567 198.526C208.993 199.257 209.298 200.048 209.541 200.9C209.663 201.205 209.846 201.388 210.15 201.51L211.794 202.058C212.159 202.179 212.403 202.545 212.403 202.91V205.833C212.403 206.198 212.159 206.564 211.794 206.686L210.15 207.233C209.846 207.294 209.602 207.537 209.541 207.842C209.297 208.694 208.994 209.486 208.567 210.217C208.446 210.46 208.446 210.826 208.567 211.069L209.237 212.592C209.42 212.957 209.359 213.323 209.055 213.627L206.984 215.697C206.741 216.002 206.314 216.062 205.949 215.88L204.427 215.149C204.122 214.967 203.818 215.028 203.574 215.149C202.844 215.576 202.052 215.879 201.199 216.123C200.895 216.245 200.713 216.428 200.591 216.732L200.043 218.376C199.921 218.741 199.556 218.985 199.19 218.985H196.268C195.902 218.985 195.537 218.741 195.415 218.376L194.867 216.732C194.806 216.428 194.562 216.184 194.258 216.123C193.405 215.879 192.613 215.576 191.883 215.149C191.639 215.028 191.275 215.028 191.031 215.149L189.509 215.88C189.144 216.063 188.778 216.002 188.474 215.697L186.403 213.627C186.099 213.383 186.038 212.957 186.221 212.592L187.012 211.069C187.194 210.765 187.133 210.46 187.012 210.217C186.586 209.486 186.282 208.694 186.038 207.842C185.916 207.537 185.733 207.355 185.429 207.233L183.785 206.686C183.42 206.564 183.176 206.198 183.176 205.833V202.91C183.176 202.545 183.42 202.179 183.785 202.058L185.429 201.51C185.733 201.449 185.977 201.205 186.038 200.9C186.282 200.048 186.586 199.257 187.012 198.526C187.133 198.283 187.133 197.917 187.012 197.674L186.221 196.151C186.099 195.786 186.16 195.36 186.403 195.056L188.474 192.985C188.778 192.742 189.204 192.681 189.569 192.803L191.092 193.594C191.396 193.776 191.701 193.716 191.944 193.594C192.675 193.168 193.466 192.864 194.318 192.62C194.623 192.498 194.806 192.315 194.928 192.011L195.476 190.367C195.597 190.002 195.963 189.758 196.328 189.758H199.251ZM197.79 197.064C193.755 197.064 190.483 200.336 190.482 204.371C190.482 208.407 193.755 211.679 197.79 211.679C201.825 211.678 205.097 208.406 205.097 204.371C205.096 200.336 201.825 197.065 197.79 197.064Z" fill="#006D92"/>
<circle opacity="0.16" cx="197.67" cy="204.252" r="27.4006" stroke="#006D92" stroke-width="3.65341"/>
<circle cx="197.672" cy="176.851" r="5.48012" fill="#006D92"/>
<circle cx="197.67" cy="176.851" r="5.48012" fill="#006D92"/>
<circle cx="170.269" cy="204.252" r="5.48012" fill="#006D92"/>
<circle cx="197.672" cy="231.652" r="5.48012" fill="#006D92"/>
<circle cx="197.67" cy="231.652" r="5.48012" fill="#006D92"/>
<circle cx="225.07" cy="204.252" r="5.48012" fill="#006D92"/>
</g>
</g>
</g>
<defs>
<filter id="filter0_ddd_17521_103112" x="-3" y="13.6602" width="402.812" height="266.111" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<filter id="filter0_ddd_17199_45631" x="-3" y="13.6602" width="402.816" height="266.111" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_17521_103112"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_17199_45631"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="5"/>
<feGaussianBlur stdDeviation="2.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_17521_103112" result="effect2_dropShadow_17521_103112"/>
<feBlend mode="normal" in2="effect1_dropShadow_17199_45631" result="effect2_dropShadow_17199_45631"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="12"/>
<feGaussianBlur stdDeviation="3.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
<feBlend mode="normal" in2="effect2_dropShadow_17521_103112" result="effect3_dropShadow_17521_103112"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_17521_103112" result="shape"/>
<feBlend mode="normal" in2="effect2_dropShadow_17199_45631" result="effect3_dropShadow_17199_45631"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_17199_45631" result="shape"/>
</filter>
<clipPath id="clip0_17521_103112">
<clipPath id="clip0_17199_45631">
<rect width="397" height="276" fill="white"/>
</clipPath>
<clipPath id="clip1_17521_103112">
<rect width="64.9074" height="64.9074" fill="white" transform="translate(28.5703 40)"/>
<clipPath id="clip1_17199_45631">
<rect width="64.9074" height="64.9074" fill="white" transform="translate(28.5684 40)"/>
</clipPath>
<clipPath id="clip2_17521_103112">
<rect width="64.9074" height="64.9074" fill="white" transform="translate(166.062 40)"/>
<clipPath id="clip2_17199_45631">
<rect width="64.9074" height="64.9074" fill="white" transform="translate(166.066 40)"/>
</clipPath>
<clipPath id="clip3_17521_103112">
<rect width="59.4984" height="59.4984" fill="white" transform="translate(306.688 174.281)"/>
<clipPath id="clip3_17199_45631">
<rect width="59.4984" height="59.4984" fill="white" transform="translate(306.691 174.281)"/>
</clipPath>
<clipPath id="clip4_17521_103112">
<clipPath id="clip4_17199_45631">
<rect width="65.7614" height="65.7614" fill="white" transform="translate(27.875 171.953)"/>
</clipPath>
<clipPath id="clip5_17521_103112">
<clipPath id="clip5_17199_45631">
<rect width="65.7614" height="65.7614" fill="white" transform="translate(164.789 171.371)"/>
</clipPath>
</defs>

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 21 KiB

351
ui-ngx/src/assets/iot-hub/items-page-devices-hero.svg

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 178 KiB

After

Width:  |  Height:  |  Size: 59 KiB

12
ui-ngx/src/assets/locale/locale.constant-en_US.json

@ -4198,6 +4198,7 @@
"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",
@ -4229,13 +4230,7 @@
"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",
"popular-widgets": "Popular Widgets",
"popular-dashboards": "Popular Dashboards",
"popular-solution-templates": "Popular Solution Templates",
"popular-calculated-fields": "Popular Calculated Fields",
"popular-alarm-rules": "Popular Alarm Rules",
"popular-rule-chains": "Popular Rule Chains",
"popular-devices": "Popular Devices",
"most-popular-in-iot-hub": "Most popular in IoT Hub",
"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",
@ -4253,7 +4248,6 @@
"subtitle-alarm-rules": "Browse alarm rule templates",
"subtitle-rule-chains": "Browse rule chain templates",
"subtitle-devices": "Browse device configurations",
"search-widgets": "Search widgets...",
"search-dashboards": "Search dashboards...",
"search-solution-templates": "Search solution templates...",
"search-calculated-fields": "Search calculated fields...",
@ -4263,7 +4257,6 @@
"sort-most-installed": "Most installed",
"sort-newest": "Newest",
"sort-name": "Name (A-Z)",
"type": "Type",
"type-filter-label": "Type",
"category": "Category",
"use-case": "Use case",
@ -4349,6 +4342,7 @@
"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",

Loading…
Cancel
Save